:root{
    --ink:#0C0A18; --surface:#151122; --band:#1E1830;
    --accent:#FF3B8E; --accent-deep:#C81E6B;
    --text:#EDE9F5; --muted:#A9A3C2; --line:#2A2440; --star:#C9C2E8;
    --wrap:1160px; --prose:64ch;
    --e:cubic-bezier(.2,.7,.2,1);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:76px}
  html,body{overflow-x:hidden}
  body{
    margin:0; background:var(--ink); color:var(--text);
    font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(1200px 700px at 78% -8%, rgba(255,59,142,.10), transparent 60%),
      radial-gradient(900px 600px at 5% 12%, rgba(120,80,220,.10), transparent 60%);
    background-attachment:fixed;
  }
  h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif; font-weight:700; line-height:1.12; letter-spacing:-.02em; text-wrap:balance; margin:0}
  p,li{text-wrap:pretty}
  p{margin:0 0 1rem}
  a{color:var(--accent); text-decoration:none}
  a:hover{color:#ff6aa8}
  .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
  .quote{font-family:"Newsreader",Georgia,serif; font-style:italic}
  .kicker{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600; font-family:"Space Grotesk",sans-serif}
  .rule{height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); border:0; opacity:.5}

  /* prototype banner */
  .proto{background:var(--accent-deep); color:#fff; text-align:center; font-size:.82rem; letter-spacing:.03em; padding:.5rem 1rem; font-weight:500}
  .proto b{font-weight:700}

  /* buttons */
  .btn{display:inline-flex; align-items:center; gap:.5rem; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px;
    padding:.8rem 1.35rem; border-radius:10px; cursor:pointer; border:1px solid transparent;
    transition:transform .25s var(--e), background-color .25s var(--e), box-shadow .25s var(--e), color .25s var(--e)}
  .btn-primary{background:var(--accent); color:#0C0A18; box-shadow:0 8px 26px -10px rgba(255,59,142,.7)}
  .btn-primary:hover{transform:translateY(-2px); background:#ff579f; box-shadow:0 14px 34px -10px rgba(255,59,142,.75)}
  .btn:active{transform:scale(.97)}
  .btn-primary:focus-visible{outline:2px solid #fff; outline-offset:3px}
  .btn-ghost{background:transparent; color:var(--text); border-color:rgba(255,255,255,.16)}
  .btn-ghost:hover{border-color:var(--accent); color:#fff; transform:translateY(-2px)}
  .btn-ghost:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

  /* nav */
  header.nav{position:sticky; top:0; z-index:50; background:rgba(12,10,24,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .nav-in{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-block:14px}
  .brand{min-width:0}
  .brand{font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:.02em; font-size:18px; color:#fff}
  .brand small{display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:500}
  .nav-links{display:flex; align-items:center; gap:26px}
  .nav-links a.lnk{color:var(--muted); font-size:14.5px}
  .nav-links a.lnk:hover{color:#fff}
  @media(max-width:720px){ .nav-links a.lnk{display:none} }
  @media(max-width:480px){ header .nav .btn-primary, .nav-in .btn-primary{padding:.55rem .85rem; font-size:12.5px} .brand small{display:none} .hero-inner{max-width:100%} .hero .sub{font-size:1rem} }

  /* hero */
  .hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; text-align:center}
  .hero-bg{position:absolute; inset:0; z-index:0}
  .hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--e)}
  .hero-slide.on{opacity:1}
  .hero-slide img{width:100%; height:100%; object-fit:cover; filter:grayscale(.4) contrast(1.05)}
  .hero-wash{position:absolute; inset:0; z-index:1; background:radial-gradient(130% 130% at 50% 44%, rgba(12,10,24,.6), rgba(12,10,24,.94) 78%)}
  .hero-tint{position:absolute; inset:0; z-index:1; background:var(--accent); mix-blend-mode:soft-light; opacity:.38}
  .hero-stars{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
    background-image:radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 68% 22%, #cdbfff 50%, transparent),
      radial-gradient(1px 1px at 82% 64%, #fff 50%, transparent), radial-gradient(1px 1px at 42% 78%, #e7d9ff 50%, transparent),
      radial-gradient(1px 1px at 12% 68%, #fff 50%, transparent);}
  .hero .wrap{position:relative; z-index:2; padding-block:8vh}
  .hero-inner{max-width:min(820px,100%); margin-inline:auto}
  .hero h1{font-size:clamp(1.6rem,5.2vw,3.15rem); min-height:3.8em}
  .hero .sig{font-size:1.05rem; color:var(--star); margin:.9rem 0 0}
  .hero .sub{color:#d8d2ec; font-size:1.06rem; margin:1.1rem auto 1.7rem; max-width:min(56ch,100%)}
  .hero-cta{display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap}
  .hero-dots{display:flex; gap:8px; margin-top:2rem; justify-content:center}
  .hero-dots button{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.28); cursor:pointer; padding:0; transition:transform .2s var(--e), background-color .2s var(--e)}
  .hero-dots button.on{background:var(--accent); transform:scale(1.25)}
  .hero-dots button:focus-visible{outline:2px solid #fff; outline-offset:2px}

  /* sections */
  section{padding-block:clamp(64px,9vw,110px)}
  .sec-head{max-width:none; margin-bottom:2.4rem}
  .sec-head h2{font-size:clamp(1.45rem,3.4vw,2.5rem)}
  .sec-head p{color:var(--muted); margin-top:.7rem; max-width:var(--prose)}
  .band{background:
      linear-gradient(180deg, rgba(30,24,48,.55), rgba(21,17,34,.55)),
      radial-gradient(700px 400px at 90% 0%, rgba(255,59,142,.08), transparent 60%);
    border-block:1px solid var(--line)}

  /* stakes */
  .pain{display:grid; gap:14px; max-width:var(--prose)}
  .pain li{list-style:none; display:flex; gap:14px; align-items:flex-start; font-size:1.12rem; color:#e4dff5}
  .pain li::before{content:""; width:9px; height:9px; margin-top:.55rem; border-radius:50%; background:var(--accent); flex:0 0 auto; box-shadow:0 0 12px rgba(255,59,142,.7)}
  .villain{margin-top:2rem; font-size:1.15rem; color:#fff; max-width:60ch; border-left:2px solid var(--accent); padding-left:1.1rem}

  /* value rows */
  .values{display:grid; gap:2px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface)}
  .values .v{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:20px 22px; align-items:start; border-bottom:1px solid var(--line)}
  .values .v:last-child{border-bottom:0}
  .values .v b{color:#fff; font-family:"Space Grotesk",sans-serif}
  .values .n{font-family:"Space Grotesk",sans-serif; color:var(--accent); font-weight:700}

  /* guide */
  .guide{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center}
  @media(max-width:840px){ .guide{grid-template-columns:1fr} }
  .portrait{aspect-ratio:4/5; border-radius:18px; border:1px solid var(--line); position:relative; overflow:hidden;
    background:radial-gradient(120% 90% at 30% 10%, rgba(255,59,142,.25), transparent 55%), linear-gradient(160deg,#1a1430,#0c0a18)}
  .portrait span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:1rem}
  .portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%}
  .portrait::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(12,10,24,.5)); pointer-events:none}
  .guide .story{font-size:1.12rem; color:#e7e2f6}
  .creds{display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid var(--line)}
  .creds span{font-size:13.5px; color:var(--muted); display:flex; gap:8px; align-items:center}
  .creds span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}

  /* constellation */
  .constel{display:flex; flex-wrap:wrap; gap:14px}
  .node{border:1px solid var(--line); background:var(--surface); border-radius:100px; padding:.7rem 1.2rem; font-family:"Space Grotesk",sans-serif; font-size:15px;
    transition:transform .25s var(--e), border-color .25s var(--e), color .25s var(--e)}
  .node:hover{transform:translateY(-3px); border-color:var(--accent); color:#fff}
  .node b{color:var(--star)}

  /* video */
  .video-frame{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; box-shadow:0 30px 80px -40px rgba(255,59,142,.4)}
  .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

  /* plan timeline */
  .plan{position:relative; max-width:var(--prose); margin-left:8px}
  .plan::before{content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--accent),transparent)}
  .step{position:relative; padding:0 0 30px 52px}
  .step:last-child{padding-bottom:0}
  .step .dot{position:absolute; left:6px; top:2px; width:20px; height:20px; border-radius:50%; background:var(--ink); border:2px solid var(--accent); box-shadow:0 0 14px rgba(255,59,142,.6)}
  .step b{font-family:"Space Grotesk",sans-serif; color:#fff; font-size:1.1rem}

  /* offers */
  .offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
  .offer{border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--surface); display:flex; flex-direction:column; gap:12px;
    border-top:2px solid var(--accent); transition:transform .25s var(--e), box-shadow .25s var(--e)}
  .offer:hover{transform:translateY(-4px); box-shadow:0 24px 60px -34px rgba(255,59,142,.5)}
  .offer h3{font-size:1.2rem}
  .offer .price{font-family:"Space Grotesk",sans-serif; color:var(--star); font-size:1.05rem}
  .offer p{color:var(--muted); font-size:.96rem; flex:1}
  .offer .btn{align-self:flex-start; margin-top:auto}

  /* email */
  .lead{display:grid; grid-template-columns:1.3fr 1fr; gap:26px; align-items:center; border:1px solid var(--line); border-radius:18px; padding:26px;
    background:linear-gradient(120deg, rgba(255,59,142,.10), rgba(21,17,34,.6))}
  @media(max-width:760px){ .lead{grid-template-columns:1fr} }
  .lead form{display:flex; gap:10px; flex-wrap:wrap}
  .lead input{flex:1; min-width:180px; background:#0e0b1a; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:.8rem 1rem; font:inherit}
  .lead input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}

  /* about */
  .about{max-width:var(--prose)}
  .about p{color:#d6d0ea}

  /* centered-section modifier + reversed guide (photo right) */
  .sec-center{text-align:center}
  .sec-center .sec-head p{margin-inline:auto}
  .sec-center .constel{justify-content:center}
  @media(min-width:841px){ .guide.rev{grid-template-columns:1.15fr .85fr} }

  /* footer */
  footer{border-top:1px solid var(--line); background:#0a0814; padding-block:44px 30px}
  .foot{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
  @media(max-width:760px){ .foot{grid-template-columns:1fr} }
  footer h3{font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; font-weight:600}
  footer a, footer p{color:#c3bcda; font-size:14.5px}
  footer a{display:block; margin-bottom:8px}
  .foot-note{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
  .disclaimer{max-width:var(--wrap); margin:22px auto 0; padding:0 24px; color:#8f89a6; font-size:12.5px}

  /* booking */
  .book{display:grid; grid-template-columns:1fr auto; gap:clamp(24px,5vw,56px); align-items:center}
  @media(max-width:820px){ .book{grid-template-columns:1fr} }
  .book-list{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:12px; max-width:52ch}
  .book-list li{display:flex; gap:12px; align-items:flex-start; color:#e4dff5; font-size:1.02rem}
  .book-list li::before{content:""; width:8px; height:8px; margin-top:.55rem; border-radius:50%; background:var(--accent); flex:0 0 auto; box-shadow:0 0 10px rgba(255,59,142,.6)}
  .cal2{background:#151122; border:1px solid #2A2440; border-radius:14px; padding:1.1rem; max-width:380px}
  .cal2-tag{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:#A9A3C2; font-weight:700; margin-bottom:.7rem}
  .cal2-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; margin-bottom:.8rem}
  .cal2-dow{font-size:.65rem; text-align:center; color:#A9A3C2; padding:.15rem 0}
  .cal2-day{aspect-ratio:1; border:none; background:transparent; border-radius:8px; font:inherit; font-size:.82rem; color:#EDE9F5; cursor:default}
  .cal2-day.past{color:#6f6a86}.cal2-day.avail{cursor:pointer; background:#0E0B1A; border:1px solid #2A2440; font-weight:600}
  .cal2-day.today{outline:2px solid #C81E6B}@media(hover:hover){.cal2-day.avail:hover{background:#C81E6B; color:#ffffff}}
  .cal2-day.avail:focus-visible{outline:3px solid #C81E6B}.cal2-day.sel{background:#A3175A; color:#ffffff}
  .cal2-slots{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem}
  .cal2-slot{font:inherit; font-size:.83rem; padding:.45rem .8rem; border-radius:8px; border:1px solid #2A2440; background:#151122; color:#EDE9F5; cursor:pointer}
  @media(hover:hover){.cal2-slot:hover{border-color:#C81E6B}}.cal2-slot.sel{background:#A3175A; color:#ffffff; border-color:#A3175A}.cal2-slot:focus-visible{outline:3px solid #C81E6B}
  .cal2-btn{font:inherit; font-weight:600; padding:.6rem 1rem; border-radius:10px; border:none; background:#A3175A; color:#ffffff; cursor:pointer}
  .cal2-btn[disabled]{opacity:.5; cursor:not-allowed}
  .cal2-sel{font-size:.9rem; color:#f39bc4; font-weight:600; margin:0 0 .8rem}
  .cal2-l{display:block; font-size:.8rem; font-weight:600; color:#A9A3C2; margin-bottom:.25rem}
  .cal2-i{width:100%; border:1px solid #2A2440; border-radius:9px; padding:.6rem .8rem; font:inherit; font-size:.95rem; background:#0E0B1A; color:#EDE9F5; margin-bottom:.7rem}
  .cal2-i:focus{outline:none; border-color:#C81E6B}
  .cal2-row{display:flex; gap:.5rem; align-items:center}
  .cal2-back{font:inherit; background:transparent; border:1px solid #2A2440; border-radius:10px; padding:.6rem .9rem; color:#EDE9F5; cursor:pointer}
  .cal2-grow{flex:1}
  .cal2-step[data-step=done]{text-align:center}
  .cal2-ok{width:46px; height:46px; border-radius:50%; background:#A3175A; color:#ffffff; display:grid; place-items:center; margin:0 auto .7rem; font-size:1.3rem}
  .cal2-donetxt{font-weight:600; color:#EDE9F5; margin:0 0 .3rem}
  .cal2-note{font-size:.8rem; color:#A9A3C2; margin:.3rem 0 0}

  /* mobile overrides — kept LAST so they win over base rules of equal specificity */
  @media(max-width:640px){
    .hero-inner, .hero .sub{max-width:100%}
    .nav-in{gap:8px}
    .nav-in .btn-primary{padding:.5rem .78rem; font-size:12px}
    .brand{font-size:15px}
    .hero{min-height:82vh}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
    html{scroll-behavior:auto}
  }
  @media (hover:none){
    a:hover,.btn:hover,.node:hover,.offer:hover,.hero-dots button:hover{transform:none}
  }
  a:focus-visible,.brand:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
  .skip{position:absolute; left:-9999px; top:auto}
  .skip:focus{left:12px; top:12px; z-index:100; background:var(--accent); color:#0C0A18; padding:.55rem .9rem; border-radius:8px}