:root{
  /* Palette (unique, strict, bright) */
  --bg: #0B1026;           /* night indigo */
  --bg2: #F6F2FF;          /* lavender mist */
  --text: #0E0F14;
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted-2: rgba(14,15,20,.68);
  --a1: #FF3D7F;           /* neon magenta */
  --a2: #2DE2E6;           /* electro cyan */
  --line: rgba(255,255,255,.12);
  --line2: rgba(14,15,20,.10);
  --glass: rgba(255,255,255,.10);
  --glass-2: rgba(255,255,255,.08);
  --shadow: 0 22px 55px rgba(0,0,0,.42);
  --radius: 18px;
  --radius-lg: 26px;
  --focus: 0 0 0 3px rgba(45,226,230,.35), 0 0 0 1px rgba(255,61,127,.25) inset;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{overflow-x:hidden}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(900px 540px at 14% 12%, rgba(255,61,127,.22), transparent 55%),
    radial-gradient(900px 540px at 86% 18%, rgba(45,226,230,.20), transparent 55%),
    radial-gradient(1200px 760px at 50% 110%, rgba(246,242,255,.10), transparent 55%),
    linear-gradient(180deg, #090E22, var(--bg));
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}
a:hover{color:rgba(255,255,255,.98)}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{outline:none; box-shadow: var(--focus); border-radius: 12px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}
.tiny{font-size:.92rem}

.skip-link{
  position:absolute; left:-999px; top:10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.10); border:1px solid var(--line);
}
.skip-link:focus{left:10px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(11,16,38,.86), rgba(11,16,38,.55));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.header-glow{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,61,127,.75), rgba(45,226,230,.65), transparent);
  opacity:.55;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-mark{
  width:18px; height:18px; border-radius:8px;
  background:
    linear-gradient(135deg, rgba(255,61,127,1), rgba(45,226,230,1));
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 22px rgba(0,0,0,.35);
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute; inset:2px;
  border-radius:7px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%);
}
.brand-text{
  font-weight:800; letter-spacing:.14em; text-transform:lowercase;
  font-size:1.05rem;
}

.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav-link{
  text-decoration:none;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(255,255,255,.86);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.nav-link:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  transform: translateY(-1px);
  color:rgba(255,255,255,.98);
}
.nav-cta{
  text-decoration:none;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,61,127,.26), rgba(45,226,230,.16));
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.nav-cta:hover{transform: translateY(-1px); filter:saturate(1.1); border-color:rgba(255,255,255,.22)}

/* Sections layout */
.section{padding:44px 0}
.section + .section{border-top:1px solid rgba(255,255,255,.06)}
.section-tight{padding:34px 0}
.section-title{
  font-size:1.65rem;
  letter-spacing:.01em;
  margin:0 0 12px;
}
.section-kicker{
  color:rgba(45,226,230,.92);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.88rem;
  margin:0 0 10px;
}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}

.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: var(--shadow);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(255,61,127,.18), transparent 55%),
    radial-gradient(540px 220px at 100% 10%, rgba(45,226,230,.16), transparent 55%),
    linear-gradient(135deg, transparent, rgba(255,255,255,.06), transparent);
  opacity:.65;
  pointer-events:none;
}
.card > *{position:relative}
.card h3{margin:0 0 8px; font-size:1.15rem}
.card p{margin:0}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  font-weight:650;
  font-size:.92rem;
}
.pill i{
  width:8px; height:8px; border-radius:99px; display:inline-block;
  background:linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
}

/* Hero (unique pattern: diagonal micro-lines + gradient core) */
.hero{
  padding:52px 0 36px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-86px -40px auto -40px; height:420px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 10px),
    radial-gradient(900px 460px at 20% 20%, rgba(255,61,127,.25), transparent 60%),
    radial-gradient(900px 460px at 85% 10%, rgba(45,226,230,.22), transparent 60%);
  opacity:.75;
  filter: blur(.1px);
  pointer-events:none;
}
.hero-grid{display:grid; gap:18px}
.hero h1{
  font-size:2.05rem;
  margin:10px 0 10px;
  letter-spacing:-.02em;
}
.hero p{margin:0; color:rgba(255,255,255,.78)}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

.btn{
  appearance:none;
  border-radius:14px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.96);
  cursor:pointer;
  text-decoration:none;
  font-weight:750;
  letter-spacing:.01em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:hover{transform: translateY(-1px); border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08)}
.btn:active{transform: translateY(0)}
.btn-primary{
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,61,127,.34), rgba(45,226,230,.22));
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}
.btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.18);
}

.hero-media{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(246,242,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  position:relative;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(240px 240px at 20% 30%, rgba(255,61,127,.18), transparent 65%),
    radial-gradient(240px 240px at 80% 20%, rgba(45,226,230,.14), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.18));
  pointer-events:none;
}
.hero-media img{width:100%; height:100%; object-fit:cover; opacity:.96; filter:saturate(1.02) contrast(1.03)}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}

/* Benefits (unique pattern: corner dots) */
.pattern-dots{
  position:relative;
  overflow:hidden;
}
.pattern-dots::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 40px 40px, rgba(45,226,230,.10) 0 1px, transparent 2px);
  background-size: 64px 64px;
  opacity:.65;
  pointer-events:none;
}

/* Packages (unique pattern: gradient rails) */
.rail{
  position:relative;
}
.rail::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,61,127,.70), rgba(45,226,230,.62), transparent);
  opacity:.60;
  pointer-events:none;
}
.price{
  display:flex; align-items:baseline; gap:8px;
  margin:12px 0 10px;
}
.price strong{font-size:1.65rem}
.price span{color:rgba(255,255,255,.70)}
.list{margin:0; padding-left:18px; color:rgba(255,255,255,.78)}
.list li{margin:6px 0}

/* Program (unique pattern: timeline spine) */
.timeline{
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left:12px; top:10px; bottom:10px;
  width:2px; border-radius:2px;
  background: linear-gradient(180deg, rgba(45,226,230,.75), rgba(255,61,127,.55));
  opacity:.55;
}
.step{
  display:grid;
  grid-template-columns: 28px 1fr;
  gap:12px;
  padding:14px 14px 14px 10px;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--a2), var(--a1));
  margin-top:6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 22px rgba(0,0,0,.35);
}
.step h3{margin:0 0 6px}
.step p{margin:0; color:rgba(255,255,255,.76)}

/* Testimonials (unique pattern: quote shimmer) */
.quote{
  position:relative;
  padding-top:24px;
}
.quote::before{
  content:"“"; position:absolute; left:14px; top:8px;
  font-size:52px; line-height:1;
  background: linear-gradient(135deg, rgba(255,61,127,.95), rgba(45,226,230,.88));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.9;
}
.quote cite{display:block; margin-top:10px; color:rgba(255,255,255,.72); font-style:normal}

/* FAQ (unique pattern: subtle accordion lines) */
.faq details{
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:14px 16px;
  font-weight:760;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:16px; top:50%;
  width:10px; height:10px; transform: translateY(-50%) rotate(0deg);
  border-right:2px solid rgba(255,255,255,.80);
  border-bottom:2px solid rgba(255,255,255,.80);
  transition: transform .18s ease, opacity .18s ease;
  opacity:.8;
}
.faq details[open] summary::after{transform: translateY(-60%) rotate(45deg)}
.faq .faq-body{
  padding:0 16px 14px;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
}

/* Methodology / trust (unique pattern: thin technical grid) */
.tech-grid{
  position:relative;
  overflow:hidden;
}
.tech-grid::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(transparent 95%, rgba(255,255,255,.08) 95%),
    linear-gradient(90deg, transparent 95%, rgba(45,226,230,.08) 95%);
  background-size: 28px 28px;
  opacity:.45;
  pointer-events:none;
}

/* CTA + form (unique pattern: soft aurora strip) */
.cta{
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 320px at 20% 10%, rgba(255,61,127,.20), transparent 60%),
    radial-gradient(900px 320px at 90% 30%, rgba(45,226,230,.18), transparent 60%),
    linear-gradient(180deg, rgba(246,242,255,.06), transparent 60%);
  opacity:.8;
  pointer-events:none;
}
.form{
  display:grid; gap:12px;
}
.field label{display:block; font-weight:720; margin:0 0 6px}
.field input, .field select, .field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(11,16,38,.72);
  color:rgba(255,255,255,.92);
}
.field select{
  appearance:auto;
  color-scheme: dark;
}
.field select option{
  background: #0B1026;
  color: rgba(255,255,255,.92);
}
.field select:disabled{
  opacity:.75;
}
.field input::placeholder{color:rgba(255,255,255,.55)}
.help{margin:8px 0 0; color:rgba(255,255,255,.70); font-size:.95rem}
.checks{
  display:grid; gap:10px;
  padding:12px 12px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.check{
  display:flex; gap:10px; align-items:flex-start;
}
.check input{margin-top:3px}
.check label{font-weight:650; color:rgba(255,255,255,.86)}
.check small{display:block; color:rgba(255,255,255,.70); font-weight:500}
.alert{
  border-radius: var(--radius);
  border:1px solid rgba(255,61,127,.35);
  background: rgba(255,61,127,.10);
  padding:12px 14px;
}
.ok{
  border-color: rgba(45,226,230,.38);
  background: rgba(45,226,230,.10);
}

/* Footer */
.site-footer{
  margin-top:32px;
  border-top:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.footer-grid{
  display:grid; gap:18px; padding:30px 0;
}
.footer-title{margin:0 0 10px; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.78)}
.footer-item{margin:0 0 8px; color:rgba(255,255,255,.78)}
.footer-k{color:rgba(255,255,255,.92); font-weight:750}
.footer-link{
  display:inline-flex;
  padding:8px 0;
  color:rgba(255,255,255,.80);
  text-decoration:none;
}
.footer-link:hover{color:rgba(255,255,255,.98); text-decoration:underline}
.footer-bottom{
  padding:14px 0 22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.10);
}

/* Cookie banner */
.cookie-layer{
  position:fixed; inset:0;
  background: rgba(11,16,38,.62);
  backdrop-filter: blur(10px);
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  opacity:0;
  transition: opacity .22s ease;
  z-index:90;
}
.cookie-layer.is-visible{display:flex}
.cookie-layer.is-opaque{opacity:1}
.cookie-card{
  width: min(720px, 100%);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding:14px 14px 12px;
}
.cookie-head{display:flex; gap:12px; align-items:flex-start}
.cookie-icon{
  width:36px; height:36px; border-radius:14px;
  background: linear-gradient(135deg, rgba(255,61,127,.42), rgba(45,226,230,.28));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 26px rgba(0,0,0,.25);
}
.cookie-title{margin:0; font-size:1.06rem}
.cookie-sub{margin:4px 0 0}
.cookie-text{margin:10px 0 12px; color:rgba(255,255,255,.78)}
.cookie-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}

/* Motion (no JS required) */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform: translateY(10px);
    animation: rise .72s ease forwards;
  }
  .reveal.d2{animation-delay:.08s}
  .reveal.d3{animation-delay:.16s}
  .reveal.d4{animation-delay:.24s}
  .btn:hover{filter:saturate(1.08)}
  .pulse{
    animation: pulse 2.6s ease-in-out infinite;
  }
}
@keyframes rise{
  to{opacity:1; transform: translateY(0)}
}
@keyframes pulse{
  0%, 100%{transform: translateY(0)}
  50%{transform: translateY(-2px)}
}

/* Light pages (legal pages) */
.paper{
  background:
    radial-gradient(900px 540px at 16% 12%, rgba(255,61,127,.18), transparent 58%),
    radial-gradient(900px 540px at 86% 10%, rgba(45,226,230,.16), transparent 58%),
    linear-gradient(180deg, rgba(246,242,255,.08), rgba(246,242,255,.02));
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.12);
  padding:18px;
}
.paper h1{margin:0 0 10px; font-size:1.85rem}
.paper h2{margin:22px 0 8px; font-size:1.15rem}
.paper h3{margin:18px 0 8px; font-size:1.02rem}
.paper p, .paper li{color:rgba(255,255,255,.80)}
.paper a{text-decoration:underline}

/* Responsive */
@media (min-width: 760px){
  .wrap{padding:0 22px}
  .grid-2{grid-template-columns: 1.1fr .9fr}
  .grid-3{grid-template-columns: repeat(3, 1fr)}
  .hero{padding:64px 0 46px}
  .hero-grid{grid-template-columns: 1.1fr .9fr; align-items:stretch}
  .hero h1{font-size:2.55rem}
  .section{padding:56px 0}
  .footer-grid{grid-template-columns: 1.4fr 1fr 1fr; align-items:start}
  .cookie-layer{align-items:flex-end}
  .cookie-card{padding:16px 16px 14px}
}