:root{
  --bg:#0b0713;
  --paper:#ffffff;
  --ink:#1b1b1b;
  --muted:#5b5b5b;
  --purple:#6a35d7;
  --purple2:#8a5bff;
  --lav:#f4f0ff;
  --border: rgba(20,20,20,.12);
  --shadow: 0 14px 40px rgba(10, 6, 20, .18);
  --radius: 16px;
  --radius2: 22px;
  --max: 1120px;
  --focus: 0 0 0 4px rgba(138, 91, 255, .22);
  --link:#5a2ea6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; color:var(--ink); background:#fff;}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}
.topbar{background:linear-gradient(90deg, rgba(106,53,215,.10), rgba(138,91,255,.10)); border-bottom:1px solid rgba(106,53,215,.18)}
.topbar .row{display:flex; gap:14px; align-items:center; justify-content:space-between; padding:10px 0; font-size:14px; color:#3a2a62}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(106,53,215,.22); border-radius:999px; background:rgba(255,255,255,.55)}
.badge svg{width:16px;height:16px;opacity:.9}

.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid rgba(20,20,20,.08)}
.header .row{display:flex;align-items:center;justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logoMark{width:40px;height:40px;border-radius:14px; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--purple), var(--purple2)); box-shadow: 0 10px 20px rgba(106,53,215,.25)}
.brandText{display:flex; flex-direction:column; line-height:1.1}
.brandText strong{font-size:15px; letter-spacing:.2px}
.brandText span{font-size:12px; color:#5c5c5c}

.nav{display:flex; gap:18px; align-items:center}
.nav a{font-size:14px; text-decoration:none; color:#2b2b2b; opacity:.92}
.nav a:hover{opacity:1; color:#2a1b52}
.ctaRow{display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 14px; border-radius:12px; border:1px solid rgba(20,20,20,.10); background:#fff; cursor:pointer; font-weight:600; font-size:14px; text-decoration:none}
.btn:focus{outline:none; box-shadow: var(--focus)}
.btnPrimary{background:linear-gradient(135deg, var(--purple), var(--purple2)); color:#fff; border:1px solid rgba(106,53,215,.5)}
.btnPrimary:hover{filter:brightness(.98)}
.btnGhost{background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.45)}
.btnSmall{padding:10px 12px; font-size:13px}

.hamburger{display:none; border:1px solid rgba(20,20,20,.14); background:#fff; border-radius:12px; padding:10px; cursor:pointer}
.hamburger svg{width:20px;height:20px}

.mobileNav{display:none; border-top:1px solid rgba(20,20,20,.08); background:#fff}
.mobileNav .links{display:flex; flex-direction:column; padding:10px 22px 18px}
.mobileNav a{padding:12px 8px; text-decoration:none; border-radius:12px}
.mobileNav a:hover{background:rgba(106,53,215,.08)}
.mobileNav .cta{padding:10px 8px}

.heroWrap{background: radial-gradient(circle at 20% 0%, rgba(138,91,255,.16), rgba(138,91,255,0) 55%), linear-gradient(180deg, rgba(106,53,215,.10), rgba(255,255,255,0) 40%)}
.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; padding:42px 0 24px; align-items:stretch}
.heroCard{padding:26px; background:#fff; border:1px solid rgba(20,20,20,.10); border-radius: var(--radius2); box-shadow: var(--shadow)}
.heroCard h1{margin:0 0 10px; font-size:44px; letter-spacing:-.6px}
.heroCard p{margin:0 0 16px; font-size:16px; color:#444; line-height:1.55}
.heroMeta{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; color:#4a3a78; font-size:13px}
.heroMeta span{display:inline-flex; gap:8px; align-items:center}
.heroMeta svg{width:16px;height:16px; opacity:.85}
.heroBtns{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.heroImage{position:relative; border-radius: var(--radius2); overflow:hidden; border:1px solid rgba(106,53,215,.22); box-shadow: var(--shadow); min-height: 360px; background:#180f2b}
.heroImage img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02)}
.heroImage::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(106,53,215,.55), rgba(138,91,255,.10) 55%, rgba(0,0,0,.12));
  pointer-events:none;
}
.heroImage .caption{
  position:absolute; left:18px; bottom:16px; right:18px;
  color:rgba(255,255,255,.92); font-size:13px; line-height:1.35;
  display:flex; gap:10px; align-items:flex-start;
}
.heroImage .chip{display:inline-flex; align-items:center; gap:8px; padding:9px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.14); backdrop-filter: blur(10px);}
.heroImage .chip svg{width:16px;height:16px;opacity:.9}

.trustBar{display:grid; grid-template-columns: repeat(4,1fr); gap:14px; padding:16px 0 34px}
.trustItem{display:flex; gap:12px; align-items:flex-start; padding:14px; background:rgba(255,255,255,.9); border:1px solid rgba(106,53,215,.14); border-radius: 16px}
.trustItem svg{width:20px;height:20px; color:#5b2ecc}
.trustItem strong{display:block; font-size:14px; margin-bottom:4px}
.trustItem span{display:block; font-size:13px; color:#4b4b4b; line-height:1.35}

.section{padding:48px 0}
.sectionAlt{background: linear-gradient(180deg, rgba(106,53,215,.06), rgba(255,255,255,0) 70%)}
.kicker{font-size:13px; color:#5630a5; letter-spacing:.12em; text-transform:uppercase; font-weight:700}
.h2{margin:10px 0 12px; font-size:30px; letter-spacing:-.3px}
.lead{margin:0; color:#4a4a4a; line-height:1.6; max-width:70ch}

.grid3{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px}
.card{background:#fff; border:1px solid rgba(20,20,20,.10); border-radius: var(--radius); padding:18px; box-shadow: 0 10px 26px rgba(10, 6, 20, .08)}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:#4a4a4a; line-height:1.55; font-size:14px}
.icon{width:36px;height:36px;border-radius:14px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px; background:rgba(106,53,215,.10); border:1px solid rgba(106,53,215,.20)}
.icon svg{width:18px;height:18px; color:#4a22b0}

.grid2{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; margin-top:24px; align-items:start}
.list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.list li{display:flex; gap:10px; align-items:flex-start; color:#3f3f3f; line-height:1.55}
.list svg{width:18px;height:18px; color:#5b2ecc; margin-top:2px; flex: 0 0 auto}

.serviceGrid{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px}
.service{padding:18px; border-radius: var(--radius); border:1px solid rgba(20,20,20,.10); background:#fff; box-shadow: 0 10px 26px rgba(10, 6, 20, .06)}
.service strong{display:block; margin-bottom:6px}
.service span{display:block; color:#4a4a4a; font-size:14px; line-height:1.55}

.testimonials{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px}
.quote{padding:18px; border-radius: var(--radius); background:#fff; border:1px solid rgba(20,20,20,.10); box-shadow: 0 10px 26px rgba(10, 6, 20, .06)}
.quote p{margin:0 0 10px; color:#3f3f3f; line-height:1.6}
.quote .by{display:flex; justify-content:space-between; align-items:center; color:#6b6b6b; font-size:13px}
.stars{letter-spacing:2px; color:#6a35d7}

.faq{margin-top:20px; display:flex; flex-direction:column; gap:10px}
details{background:#fff; border:1px solid rgba(20,20,20,.10); border-radius: 16px; padding:14px 14px}
summary{cursor:pointer; font-weight:700}
details p{margin:10px 0 0; color:#4a4a4a; line-height:1.6; font-size:14px}

.ctaBand{margin-top:26px; background: linear-gradient(135deg, rgba(106,53,215,.16), rgba(138,91,255,.12)); border:1px solid rgba(106,53,215,.18); border-radius: 22px; padding:22px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start}
.form{display:grid; gap:10px}
.field{display:grid; gap:6px}
label{font-size:13px; color:#343434; font-weight:700}
input, select, textarea{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid rgba(20,20,20,.16); font-size:14px;
}
input:focus, select:focus, textarea:focus{outline:none; box-shadow: var(--focus); border-color: rgba(106,53,215,.5)}
textarea{min-height:110px; resize:vertical}
.formRow{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.notice{font-size:12px; color:#4a4a4a; line-height:1.5}
.notice a{color:#2a1b52; text-decoration:underline}
.check{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius: 14px; border:1px solid rgba(20,20,20,.10); background:#fff}
.check input{width:18px;height:18px;margin-top:2px}
.check p{margin:0; font-size:13px; color:#3f3f3f; line-height:1.45}
.check p a{text-decoration:underline; color:#2a1b52}

.pageHero{padding:28px 0 10px}
.pageHero h1{margin:0; font-size:34px; letter-spacing:-.4px}
.breadcrumb{margin-top:6px; font-size:13px; color:#555}

.footer{padding:28px 0; border-top:1px solid rgba(20,20,20,.10); background:#0f0a1c; color:rgba(255,255,255,.90)}
.footer .cols{display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:18px}
.footer a{color:rgba(255,255,255,.88); text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer .muted{color:rgba(255,255,255,.72); font-size:13px; line-height:1.6}
.footer .fine{margin-top:16px; color:rgba(255,255,255,.62); font-size:12px; line-height:1.6}

@media (max-width: 980px){
  .hero{grid-template-columns: 1fr; padding:26px 0 18px}
  .heroCard h1{font-size:38px}
  .trustBar{grid-template-columns: repeat(2,1fr); padding-bottom:22px}
  .grid3{grid-template-columns: 1fr; }
  .serviceGrid{grid-template-columns: 1fr}
  .testimonials{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .ctaBand{grid-template-columns: 1fr}
  .nav{display:none}
  .hamburger{display:inline-flex}
  .mobileNav{display:none}
  .footer .cols{grid-template-columns: 1fr}
}