:root{
    --bg0:#060d1c; --bg1:#0a1730; --navy:#0d1c36; --tile:#0f1f3a;
    --cyan:#7ec8ff; --cyan-bright:#a9ddff; --cyan-deep:#3f8fd6;
    --gold:#ffd24a; --gold-soft:#ffe49a;
    --ink:#eaf2ff; --dim:#8094b4; --dimmer:#52668a; --line:#1b2f52;
    --display:'Playfair Display',serif; --glyphfont:'Fredoka',sans-serif; --ui:'Manrope',system-ui,sans-serif;
    --maxw:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--ui); color:var(--ink); background:var(--bg0); overflow-x:hidden; -webkit-font-smoothing:antialiased; line-height:1.6;}

  /* ----- atmosphere ----- */
  .atmos{position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
      radial-gradient(120% 80% at 50% -10%, #16294a 0%, transparent 55%),
      radial-gradient(90% 70% at 80% 10%, #102649 0%, transparent 50%),
      radial-gradient(90% 80% at 50% 120%, #0a1832 0%, transparent 60%),
      linear-gradient(165deg, #070f21 0%, #0a1730 45%, #060d1c 100%);}
  .gridlines{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
    background-image:linear-gradient(rgba(126,200,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(126,200,255,.04) 1px, transparent 1px);
    background-size:54px 54px; mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);}
  .beam{position:fixed; inset:-30% -40%; z-index:-2; pointer-events:none;
    background:linear-gradient(108deg,transparent 43%, rgba(126,200,255,.05) 49%, rgba(126,200,255,.1) 51%, rgba(126,200,255,.05) 53%, transparent 60%);
    animation:beam 11s ease-in-out infinite;}
  @keyframes beam{0%,100%{transform:translateX(-7%)}50%{transform:translateX(7%)}}
  .grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}
  .wordmark{font-family:var(--display); font-weight:900; letter-spacing:.01em; color:var(--cyan-bright); position:relative; display:inline-block;}
  .wordmark sup{font-size:.34em; color:var(--cyan); top:-1.25em; margin-left:.05em; font-weight:600;}

  /* ----- nav ----- */
  nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s, box-shadow .4s, padding .4s;
    padding:18px 0;}
  nav.solid{background:rgba(8,16,32,.82); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(126,200,255,.1); padding:12px 0;}
  .navrow{display:flex; align-items:center; justify-content:space-between; gap:16px;}
  .navrow .wordmark{font-size:22px;}
  .navlinks{display:flex; align-items:center; gap:28px;}
  .navlinks a{color:var(--dim); text-decoration:none; font-size:13.5px; font-weight:600; letter-spacing:.02em; transition:color .25s;}
  .navlinks a:hover{color:var(--cyan-bright);}
  .btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0; font-family:var(--ui); font-weight:700;
    letter-spacing:.04em; text-decoration:none; border-radius:999px; transition:transform .22s, filter .22s, box-shadow .22s;}
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#1a1405; padding:13px 26px; font-size:14px;
    box-shadow:0 10px 30px -8px rgba(255,210,74,.5);}
  .btn-primary:hover{filter:brightness(1.05); box-shadow:0 14px 36px -8px rgba(255,210,74,.6);}
  .btn-cyan{background:linear-gradient(180deg,var(--cyan-bright),var(--cyan-deep)); color:#06101f; padding:13px 26px; font-size:14px;
    box-shadow:0 10px 30px -8px rgba(126,200,255,.5);}
  .btn-ghost{background:transparent; color:var(--cyan-bright); padding:12px 22px; font-size:14px; box-shadow:inset 0 0 0 1.5px rgba(126,200,255,.35);}
  .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(126,200,255,.7);}
  .btn-sm{padding:9px 18px; font-size:13px;}
  .nav-cta{}

  /* ----- hero ----- */
  header{position:relative; padding:140px 0 70px;}
  .hero{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
  .kicker{font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--dim); font-weight:700;}
  .kicker .dot{color:var(--gold); margin:0 6px;}
  h1.hero-mark{font-family:var(--display); font-weight:900; line-height:.86; font-size:clamp(58px,10vw,104px); color:var(--cyan-bright);
    text-shadow:0 0 50px rgba(126,200,255,.3); margin:14px 0 6px; letter-spacing:.005em;}
  h1.hero-mark sup{font-size:.26em; color:var(--cyan); top:-1.7em; font-weight:600;}
  .hero-tag{font-family:var(--display); font-style:italic; font-weight:700; font-size:clamp(20px,3.2vw,28px); color:var(--gold-soft);
    text-shadow:0 0 24px rgba(255,210,74,.25); line-height:1.25; margin-bottom:16px;}
  .hero-sub{color:var(--dim); font-size:16px; max-width:44ch; margin-bottom:28px;}
  .hero-sub b{color:var(--ink); font-weight:600;}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
  .hero-note{margin-top:18px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer);}
  .hero-note b{color:var(--gold-soft); font-weight:700;}

  /* cover + glyph constellation */
  .hero-visual{position:relative; height:440px; display:flex; align-items:center; justify-content:center;}
  .glyph-field{position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:10px; opacity:.5;}
  .gtile{display:flex; align-items:center; justify-content:center; border-radius:10px; font-family:var(--glyphfont); font-weight:600;
    font-size:clamp(14px,2vw,20px); color:var(--cyan); background:linear-gradient(180deg,rgba(15,31,58,.5),rgba(11,26,51,.5));
    box-shadow:inset 0 0 0 1px rgba(126,200,255,.08); animation:tw 5s ease-in-out infinite;}
  .gtile.star{color:var(--gold-soft); box-shadow:0 0 0 1.5px var(--gold), 0 0 22px rgba(255,210,74,.4); background:linear-gradient(180deg,#241d0c,#171206);}
  @keyframes tw{0%,100%{opacity:.35}50%{opacity:.95}}
  .cover-wrap{position:relative; width:248px; height:372px; border-radius:8px; overflow:hidden; z-index:2;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(126,200,255,.18), 0 0 70px rgba(126,200,255,.18);
    animation:float 7s ease-in-out infinite; transform:rotate(-3deg);}
  @keyframes float{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-12px)}}
  .cover-img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2;}
  .cover-fallback{position:absolute; inset:0; z-index:1; padding:24px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    background:radial-gradient(80% 60% at 50% 32%, #15294a, #070f1f);}
  .cover-fallback .cf-kick{font-size:8px; letter-spacing:.34em; text-transform:uppercase; color:var(--dim);}
  .cover-fallback .cf-mark{font-family:var(--display); font-weight:900; font-size:38px; color:var(--cyan-bright); line-height:.9; margin:10px 0 4px; text-shadow:0 0 24px rgba(126,200,255,.4);}
  .cover-fallback .cf-sub{font-family:var(--display); font-style:italic; color:var(--cyan); font-size:13px;}
  .cover-fallback .cf-vol{margin-top:auto; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);}
  .cover-fallback .cf-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:16px 0;}
  .cover-fallback .cf-grid span{width:26px;height:26px;border-radius:6px; display:flex;align-items:center;justify-content:center; font-family:var(--glyphfont); font-size:13px; color:var(--cyan); background:rgba(126,200,255,.06); box-shadow:inset 0 0 0 1px rgba(126,200,255,.12);}
  .cover-fallback .cf-grid span.s{color:#1a1405; background:radial-gradient(circle,#ffe49a,#ffd24a);}

  /* ----- sections ----- */
  section{position:relative; padding:84px 0;}
  .sec-head{text-align:center; max-width:680px; margin:0 auto 48px;}
  .sec-eyebrow{font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold-soft); font-weight:700;}
  .sec-title{font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,46px); line-height:1.08; margin:14px 0 12px; color:var(--ink);}
  .sec-title em{font-style:italic; color:var(--cyan-bright);}
  .sec-desc{color:var(--dim); font-size:16.5px;}

  /* hook band */
  .hook{padding:70px 0; text-align:center;}
  .hook .wrap{max-width:880px;}
  .hook-q{font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(24px,4.2vw,40px); line-height:1.34; color:var(--ink);}
  .hook-q b{color:var(--gold-soft); font-weight:700; font-style:normal;}
  .hook-rule{width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:30px auto 0;}

  /* steps */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .step{position:relative; padding:26px 22px; border-radius:16px; background:linear-gradient(180deg,rgba(13,28,54,.6),rgba(8,18,36,.6));
    box-shadow:inset 0 0 0 1px rgba(126,200,255,.1); overflow:hidden;}
  .step::before{content:''; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 0%, rgba(126,200,255,.08), transparent); opacity:0; transition:opacity .4s;}
  .step:hover::before{opacity:1;}
  .step-n{font-family:var(--display); font-weight:900; font-size:46px; color:transparent; -webkit-text-stroke:1.4px var(--cyan-deep); line-height:1; opacity:.75;}
  .step h3{font-family:var(--display); font-weight:700; font-size:20px; margin:12px 0 8px; color:var(--cyan-bright);}
  .step p{color:var(--dim); font-size:14.5px;}
  .step .frag{color:var(--gold-soft); font-weight:700;}

  /* embed */
  .embed-row{display:grid; grid-template-columns:1fr; gap:14px; margin-top:42px; justify-items:center;}
  .embed{width:100%; max-width:440px; aspect-ratio:440/760; border-radius:18px; overflow:hidden; position:relative;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(126,200,255,.12);}
  .embed iframe{width:100%; height:100%; border:0; display:block;}
  .embed-cap{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); text-align:center; margin-top:6px;}

  /* two readers */
  .duo{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; max-width:760px; margin:0 auto 8px;}
  .rcard{padding:24px 18px; border-radius:16px; text-align:center; display:flex; flex-direction:column; gap:10px;
    background:rgba(10,22,42,.55); transition:transform .35s;}
  .rcard:hover{transform:translateY(-4px);}
  .rcard.a{box-shadow:inset 0 0 0 1.5px rgba(126,200,255,.45), 0 0 30px rgba(126,200,255,.12);}
  .rcard.b{box-shadow:inset 0 0 0 1.5px rgba(255,210,74,.45), 0 0 30px rgba(255,210,74,.12);}
  .rwho{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); font-weight:700;}
  .rpath{font-family:var(--glyphfont); font-size:13px; color:var(--dim);}
  .rpath b{color:var(--ink);}
  .rtruth-n{font-family:var(--display); font-weight:900; font-size:22px;}
  .rcard.a .rtruth-n{color:var(--cyan-bright);} .rcard.b .rtruth-n{color:var(--gold-soft);}
  .rtruth-m{font-family:var(--display); font-style:italic; font-weight:700; font-size:18px; color:var(--ink);}
  .duo-mid{display:flex; align-items:center; justify-content:center; font-family:var(--display); font-style:italic; color:var(--dimmer); font-size:14px;}

  /* inside / features */
  .feat{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .fcard{padding:24px 20px; border-radius:16px; background:linear-gradient(180deg,rgba(13,28,54,.5),rgba(8,18,36,.5));
    box-shadow:inset 0 0 0 1px rgba(126,200,255,.1); transition:transform .3s, box-shadow .3s;}
  .fcard:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(126,200,255,.25), 0 16px 40px -16px rgba(0,0,0,.6);}
  .fcard .ico{width:42px;height:42px;border-radius:11px; display:flex;align-items:center;justify-content:center; font-family:var(--glyphfont); font-weight:700; font-size:20px;
    color:var(--gold-soft); background:rgba(255,210,74,.08); box-shadow:inset 0 0 0 1px rgba(255,210,74,.2); margin-bottom:14px;}
  .fcard h4{font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); margin-bottom:6px;}
  .fcard p{color:var(--dim); font-size:14px;}
  .specs{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px;}
  .spec{padding:12px 20px; border-radius:12px; background:rgba(10,22,42,.5); box-shadow:inset 0 0 0 1px rgba(126,200,255,.12); text-align:center; min-width:130px;}
  .spec .k{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer);}
  .spec .v{font-family:var(--glyphfont); font-weight:600; font-size:15px; color:var(--cyan-bright); margin-top:3px;}

  /* about */
  .about{display:grid; grid-template-columns:1fr 1.4fr; gap:36px; align-items:center; max-width:920px; margin:0 auto;}
  .about-badge{aspect-ratio:1; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px;
    background:radial-gradient(70% 60% at 50% 35%, #15294a, #08122a); box-shadow:inset 0 0 0 1px rgba(126,200,255,.14);}
  .about-badge .imprint{font-family:var(--display); font-weight:900; font-size:30px; color:var(--cyan-bright); line-height:.95;}
  .about-badge .imp-sub{font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--dim);}
  .about p{color:var(--dim); font-size:16px; margin-bottom:14px;}
  .about p b{color:var(--ink); font-weight:600;}
  .about .sig{font-family:var(--display); font-style:italic; color:var(--cyan-bright); font-size:18px;}

  /* closing CTA + email */
  .close-cta{text-align:center; padding:96px 0;}
  .close-cta .wrap{max-width:760px;}
  .close-title{font-family:var(--display); font-weight:700; font-size:clamp(30px,5.4vw,52px); line-height:1.1; margin-bottom:14px;}
  .close-title em{font-style:italic; color:var(--gold-soft);}
  .close-sub{color:var(--dim); font-size:17px; margin-bottom:30px;}
  .email-form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:38px;}
  .email-form input{flex:1; min-width:220px; max-width:320px; padding:14px 18px; border-radius:999px; border:0; font-family:var(--ui); font-size:14px;
    background:rgba(126,200,255,.08); color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(126,200,255,.2); outline:none;}
  .email-form input::placeholder{color:var(--dimmer);}
  .email-form input:focus{box-shadow:inset 0 0 0 1.5px rgba(126,200,255,.6);}
  .email-note{font-size:12px; color:var(--dimmer); margin-top:14px;}
  .email-ok{color:var(--gold-soft); font-weight:600;}

  /* footer */
  footer{padding:50px 0 40px; border-top:1px solid rgba(126,200,255,.1);}
  .foot{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .foot .wordmark{font-size:20px;}
  .socials{display:flex; gap:10px;}
  .socials a{width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; color:var(--dim); text-decoration:none;
    background:rgba(126,200,255,.06); box-shadow:inset 0 0 0 1px rgba(126,200,255,.12); transition:.25s; font-weight:700; font-size:12px;}
  .socials a:hover{color:var(--cyan-bright); box-shadow:inset 0 0 0 1px rgba(126,200,255,.4); transform:translateY(-2px);}
  .foot-legal{width:100%; text-align:center; margin-top:26px; color:var(--dimmer); font-size:12px; line-height:1.7;}
  .foot-legal a{color:var(--dim); text-decoration:none;} .foot-legal a:hover{color:var(--cyan);}

  /* reveal */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1; transform:none;}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

  /* responsive */
  @media(max-width:860px){
    .navlinks{display:none;}
    .hero{grid-template-columns:1fr; gap:24px; text-align:center;}
    .hero-cta{justify-content:center;}
    .hero-sub{margin-left:auto;margin-right:auto;}
    .hero-visual{height:420px; order:-1;}
    .steps{grid-template-columns:1fr;}
    .feat{grid-template-columns:1fr 1fr;}
    .about{grid-template-columns:1fr; text-align:center;} .about-badge{max-width:180px; margin:0 auto;}
    .duo{grid-template-columns:1fr; } .duo-mid{padding:6px 0;}
  }
  @media(max-width:520px){
    .wrap{padding:0 18px;} header{padding:120px 0 50px;}
    .feat{grid-template-columns:1fr;}
    .foot{justify-content:center; text-align:center;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;} .reveal{transition:none; opacity:1; transform:none;}
  }

  /* ---- hub / edition / volume grids ---- */
  .crumb{font-size:12px;letter-spacing:.04em;color:var(--dim);margin-bottom:18px}
  .crumb a{color:var(--cyan);text-decoration:none}.crumb a:hover{color:var(--cyan-bright)}
  .ed-grid,.vol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;max-width:900px;margin:0 auto}
  .ed-card,.vol-card{display:block;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;
    background:linear-gradient(180deg,rgba(13,28,54,.6),rgba(8,18,36,.6));box-shadow:inset 0 0 0 1px rgba(126,200,255,.12);
    transition:transform .3s, box-shadow .3s}
  .ed-card:hover,.vol-card:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(126,200,255,.3),0 22px 50px -20px rgba(0,0,0,.7)}
  .ec-body{padding:24px 22px}
  .ec-tag{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}
  .ec-title{font-family:var(--display);font-weight:700;font-size:24px;color:var(--cyan-bright);margin:10px 0 8px}
  .ec-desc{color:var(--dim);font-size:14.5px}
  .ec-more{display:inline-block;margin-top:14px;color:var(--cyan);font-weight:700;font-size:13px;letter-spacing:.04em}
  .vol-cover{aspect-ratio:3/4;width:100%;object-fit:cover;display:block;background:#0a1730}
  .vol-cover-fallback{aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:var(--display);font-weight:900;font-size:28px;color:var(--cyan-bright);background:radial-gradient(70% 60% at 50% 35%,#15294a,#08122a)}
  .vol-cover-fallback .vcf-sub{font-family:var(--display);font-style:italic;font-weight:500;font-size:13px;color:var(--cyan)}
  .badge-soon{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);box-shadow:inset 0 0 0 1px rgba(126,200,255,.2);padding:3px 11px;border-radius:999px}