:root{
  --bg:#0b1220;
  --text:#e9eefc;
  --muted:#b7c2dd;
  --line:rgba(255,255,255,.10);
  --brand:#7c5cff;
  --brand2:#25d0ff;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --r: 18px;
  --r2: 24px;
  --max: 1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(900px 500px at 15% 5%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(700px 450px at 85% 0%, rgba(37,208,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #070b14 100%);
  color: var(--text);
  line-height:1.55;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
code{background:rgba(255,255,255,.08); padding:.1rem .35rem; border-radius:.4rem}

.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}

.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background:#fff; color:#000; padding:.6rem .8rem; border-radius:.6rem; z-index:9999;
}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(10,16,30,.65);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 0;
  gap: 1rem;
}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:700; letter-spacing:.2px}
.brand strong{color: var(--brand2)}
.brand--footer{opacity:.95}

.nav{display:flex; align-items:center; gap:1rem}
.nav a{
  padding:.5rem .7rem;
  border-radius:.8rem;
  color: var(--muted);
  font-weight: 700;
  font-size: .95rem;
}
.nav a:hover{background: rgba(255,255,255,.06); color: var(--text)}
.nav__cta{
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(37,208,255,.18));
  border: 1px solid rgba(124,92,255,.35);
  color: var(--text) !important;
}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  padding: 10px;
}
.nav-toggle span{
  display:block; height:2px; background: var(--text);
  border-radius: 2px; margin: 6px 0; opacity:.9;
}

.badge{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding:.35rem .6rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .3px;
}

.hero{padding: 4.2rem 0 2.6rem}
.hero--compact{padding: 3.2rem 0 1.6rem}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items:center;
}
.hero__content h1{
  font-size: clamp(2rem, 3.2vw, 3.15rem);
  line-height:1.08;
  margin: .9rem 0 .9rem;
}
.grad{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{font-size: 1.08rem; color: var(--muted); margin: 0 0 1.2rem}

.hero__actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom: 1.3rem}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .8rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  letter-spacing: .2px;
  cursor:pointer;
}
.btn--primary{
  border: 1px solid rgba(124,92,255,.45);
  background: linear-gradient(135deg, rgba(124,92,255,.85), rgba(37,208,255,.75));
  color: #071018;
}
.btn--ghost{background: rgba(255,255,255,.02)}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}

.trust{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
}
.trust__item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--r);
  padding: .8rem .9rem;
}
.trust__kpi{display:block; font-weight: 900; font-size:1.05rem}
.trust__label{display:block; color: var(--muted); font-size:.9rem}

.photo{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.hero__media{position:relative}
.hero__card{
  position:absolute;
  right: -10px;
  bottom: -18px;
  width: min(360px, 92%);
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(17,28,51,.78);
  box-shadow: var(--shadow);
  padding: 1rem 1.05rem;
  backdrop-filter: blur(12px);
}
.hero__cardTitle{margin:0 0 .6rem; font-weight: 900}
.checklist{margin:.2rem 0 0; padding-left: 1.1rem; color: var(--muted)}
.checklist li{margin:.35rem 0}

.section{padding: 3.4rem 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section__head{max-width: 900px; margin-bottom: 1.4rem}
.section__head h2{font-size: clamp(1.55rem, 2.1vw, 2.15rem); margin:0 0 .55rem; line-height:1.15}
.muted{color: var(--muted)}
.small{font-size: .9rem}
.mt{margin-top: 1rem}

.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem}
.card{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 1.15rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.card h3{margin:.7rem 0 .3rem}
.card p{color: var(--muted); margin:.35rem 0 0}

.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1rem;
  align-items:center;
}
.split__text{padding: .2rem}
.split__media{padding: .2rem}

.gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.gallery__item figcaption{
  color: var(--muted);
  font-weight: 700;
  margin-top: .5rem;
  font-size: .92rem;
}

.resource-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.resource{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.20);
}
.resource .photo{border-radius:0; border:0; box-shadow:none}
.resource__body{padding: 1rem 1rem 1.1rem}
.resource__body h3{margin:.2rem 0 .3rem}
.resource__body p{margin:0; color: var(--muted)}
.resource__cta{display:inline-block; margin-top:.7rem; font-weight:900; color: var(--text)}

.prose{max-width: 920px}
.prose h2,.prose h3{line-height:1.2}
.prose h3{margin-top: 1.3rem}
.prose p,.prose li{color: var(--muted)}
.prose strong{color: var(--text)}

.inline-photos{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin: 1rem 0;
}

.faq{display:grid; gap: .7rem}
.faq__item{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: .2rem .9rem;
}
.faq__item summary{cursor:pointer; padding: .9rem .2rem; font-weight: 900}
.faq__content{padding: 0 .2rem 1rem}
.faq__content p{margin:.2rem 0; color: var(--muted)}

.form{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 1.1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.form label{display:flex; flex-direction:column; gap:.35rem; font-weight: 900}
.form input,.form textarea{
  margin-top:.15rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: .75rem .8rem;
  outline:none;
}
.form__row{display:grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .8rem}
.form__actions{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top: .9rem}
.form__note{margin:.7rem 0 0; color: var(--muted)}

.example{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: .9rem 1rem;
  margin: .7rem 0;
}

.footer{
  border-top: 1px solid var(--line);
  padding: 2.2rem 0;
  background: rgba(0,0,0,.22);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .6fr .6fr;
  gap: 1.1rem;
}
.footer h4{margin:.2rem 0 .6rem}
.footer ul{margin:0; padding-left: 1.1rem; color: var(--muted)}
.footer li{margin:.35rem 0}
.footer a{color: var(--muted)}
.footer a:hover{color: var(--text)}

@media (max-width: 1080px){
  .gallery{grid-template-columns: 1fr 1fr}
}
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; gap: 1.2rem}
  .hero__card{position:relative; right:auto; bottom:auto; margin-top: .8rem; width:100%}
  .trust{grid-template-columns: 1fr}
  .grid3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .resource-grid{grid-template-columns: 1fr}
  .inline-photos{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr}
  .form__row{grid-template-columns: 1fr}
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;
    right: 1rem;
    top: 68px;
    flex-direction: column;
    align-items: stretch;
    width: min(340px, calc(100% - 2rem));
    padding: .7rem;
    border-radius: var(--r2);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,16,30,.92);
    box-shadow: var(--shadow);
    display:none;
  }
  .nav a{width:100%}
  .nav.is-open{display:flex}
}