/* two-world.css — cinematic dark/light rhythm ported from alethia-hero prototype.
   SCOPING: every section/atom selector is prefixed with `.alethia` so a page opts
   into the alethia look by adding class="alethia" on the section wrapper. This avoids
   collisions with the landing's own #hero / #proof / #sectors / nav / footer styles.
   Color/space/mono tokens live in tokens.css (var(--petrol|navy|ink|sky|steel|pale|
   text-2|gold|teal|font|mono)). Two-world rhythm = dark default + `.light` class;
   [data-theme="dark"|"light"] attribute selectors, when present, are shared rhythm
   and are kept as-is (no alethia prefix). FAQ/details styles live in faq.css. */

/* ---------- shared two-world attribute rhythm (kept as-is) ---------- */
[data-theme="dark"] { background: var(--ink); color: var(--pale); }
[data-theme="light"] { background: var(--pale); color: var(--ink); }

/* ---------- full-bleed reset for alethia sections ----------
   base.css `section{ max-width; margin-inline:auto; padding }` is right for the
   landing content sections but cages the cinematic full-bleed alethia panels and
   leaves them position:static (breaking inset:0 hero children). Reset here BEFORE
   the component rules below, so each alethia component's own padding still wins. */
.alethia section {
  position: relative;
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

/* ---------- atoms ---------- */
.alethia .mono { font-family: var(--mono); }
.alethia .pill { display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); background:var(--sky);
  padding:.34rem .7rem; border-radius:40px; font-weight:700; }
.alethia .bracket { font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sky); }
.alethia .hud { font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }
.alethia .sky { color:var(--sky); font-weight:600; }
.alethia .arrow { width:38px; height:38px; border-radius:50%; background:var(--sky); color:var(--ink);
  display:grid; place-items:center; flex:none; transition:transform .25s ease; }
.alethia .arrow svg { width:15px; height:15px; }
.alethia h1, .alethia h2 { font-weight:300; letter-spacing:-.01em; line-height:1.05; }
.alethia h2 em, .alethia h1 em { font-style:normal; font-weight:600; color:var(--sky); }

/* ---------- NAV ---------- */
.alethia .topnav { position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem clamp(1.2rem,4vw,3rem); transition:background .4s, backdrop-filter .4s; }
.alethia .topnav.scrolled { background:rgba(19,38,54,.72); backdrop-filter:blur(10px); }
.alethia .brand { display:flex; align-items:center; gap:.6rem; font-weight:500; font-size:1.02rem; color:var(--pale); }
.alethia .brand .mark { width:24px; height:24px; color:var(--sky); }
.alethia .navlinks { display:flex; gap:1.9rem; font-size:.82rem; color:var(--text-2); }
.alethia .navlinks a { color:inherit; text-decoration:none; transition:.2s; }
.alethia .navlinks a:hover { color:var(--pale); }
.alethia .nav-cta { display:inline-flex; align-items:center; gap:.7rem; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pale); text-decoration:none; }

/* ---------- generic full-bleed section ---------- */
.alethia .panel { min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.alethia .inner { position:relative; z-index:5; width:100%; padding:0 clamp(1.2rem,4vw,3rem); }
.alethia .bg-layer { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.alethia .scrim { position:absolute; inset:0; z-index:1; }

/* ---------- HERO ---------- */
.alethia .bg-ocean { position:absolute; inset:-4%; z-index:0; background:url("../assets/img/bg-ocean-mosaic.webp") center 60%/cover no-repeat;
  filter:saturate(.72) brightness(.42) contrast(1.05) hue-rotate(-6deg); transform:scale(1.05); will-change:transform; transition:opacity 1s ease; }
.alethia .hero-video { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease; pointer-events:none; }
/* when the drift video is playing it IS the motion layer → retire the PNG scene + SVG seam + static bg */
.alethia .hero.video-on .hero-video { opacity:1; }
.alethia .hero.video-on .bg-ocean { opacity:0; }
.alethia .hero.video-on .field .piece,
.alethia .hero.video-on .route { opacity:0 !important; }
.alethia .hero-scrim { position:absolute; inset:0; z-index:2; background:
    radial-gradient(120% 90% at 68% 42%, rgba(60,87,104,.30), transparent 55%),
    radial-gradient(90% 70% at 22% 30%, rgba(19,38,54,.55), transparent 60%),
    linear-gradient(180deg, rgba(19,38,54,.80), rgba(28,53,71,.60) 40%, rgba(19,38,54,.92)); }
.alethia .field { position:absolute; inset:0; z-index:3; pointer-events:none; }
.alethia .piece { position:absolute; will-change:transform; filter:drop-shadow(0 30px 45px rgba(10,20,32,.55)); }
.alethia .piece img { display:block; width:100%; height:auto; }
.alethia .p-queen { width:min(30vw,360px); left:52%; top:50%; transform:translate(-50%,-50%); z-index:5; }
.alethia .p-knight { width:min(15vw,190px); left:11%; top:58%; z-index:3; }
.alethia .p-bishop { width:min(11vw,140px); left:80%; top:20%; z-index:3; }
.alethia .p-rook { width:min(13vw,165px); left:82%; top:70%; z-index:4; }
.alethia .p-pawn { width:min(10vw,120px); left:20%; top:24%; z-index:2; }
.alethia .route { position:absolute; left:52%; top:50%; transform:translate(-50%,-50%); z-index:6; width:min(30vw,360px); opacity:0; }
.alethia .route svg { width:100%; height:auto; overflow:visible; }
.alethia .route path { fill:none; stroke:var(--sky); stroke-width:2.2; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(94,154,200,.9)); stroke-dasharray:1 8; }
.alethia .readout { position:absolute; left:64%; top:57%; z-index:7; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.06em; color:var(--steel); opacity:0; border-left:1px solid rgba(94,154,200,.5); padding-left:.5rem; line-height:1.6; }
.alethia .readout b { color:var(--sky); }
.alethia .bg-fog { position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 65%, rgba(169,196,222,.16), transparent 55%); opacity:1; will-change:opacity; }
.alethia .hero-label { position:absolute; left:clamp(1.2rem,4vw,3rem); top:24vh; z-index:8; line-height:1.7; opacity:0; }
.alethia .headline { max-width:15ch; font-size:clamp(2.3rem,6vw,5rem); color:var(--pale); }
.alethia .headline .l { display:block; overflow:hidden; }
.alethia .headline .l>span { display:block; transform:translateY(110%); }
.alethia .hero-cta { margin-top:2.1rem; opacity:0; transform:translateY(14px); }
.alethia .btn-pill { display:inline-flex; align-items:center; gap:.9rem; background:transparent; color:var(--pale);
  font-family:var(--mono); font-weight:400; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.5rem .5rem .5rem 1.3rem; border:1px solid rgba(169,196,222,.35); border-radius:40px; text-decoration:none; transition:.25s; }
.alethia .btn-pill:hover { border-color:var(--sky); }
.alethia .btn-pill:hover .arrow { transform:translateX(3px); }
.alethia .subblock { position:absolute; left:clamp(1.2rem,4vw,3rem); bottom:6vh; z-index:8; max-width:44ch; opacity:0; transform:translateY(14px); }
.alethia .subblock .sub { font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.5; font-weight:300; color:var(--pale); }
.alethia .subblock .sub strong { font-weight:500; color:var(--steel); }
.alethia .tagline { margin-top:1rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--text-2); }
.alethia .scroll-hint { position:absolute; right:clamp(1.2rem,4vw,3rem); bottom:6vh; z-index:8; display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); opacity:0; }
.alethia .scroll-hint .ring { width:20px; height:32px; border:1px solid var(--text-2); border-radius:12px; position:relative; }
.alethia .scroll-hint .ring::after { content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px;
  background:var(--sky); transform:translateX(-50%); animation:alethia-sd 1.6s ease-in-out infinite; }
@keyframes alethia-sd { 0%,100%{opacity:.2;transform:translate(-50%,0)} 50%{opacity:1;transform:translate(-50%,7px)} }

/* ---------- STATEMENT panels (why-now / pain) ---------- */
.alethia .statement .inner { max-width:1100px; margin:0 auto; }
.alethia .st-center { text-align:center; }
.alethia .st-center h2 { font-size:clamp(1.9rem,4.6vw,3.6rem); max-width:20ch; margin:1.2rem auto 0; }
.alethia .st-center .sub { margin:1.6rem auto 0; max-width:52ch; font-weight:300; font-size:1.1rem; line-height:1.6; color:var(--text-2); }
.alethia .st-vision .bg-layer { background-image:url("../assets/img/plate-vision.webp"); filter:brightness(.5) saturate(.85); transform:scale(1.05); will-change:transform; }
.alethia .st-vision .scrim { background:linear-gradient(180deg, rgba(19,38,54,.86), rgba(19,38,54,.62) 45%, rgba(19,38,54,.9)); }
.alethia .st-pain .scrim { background:
    radial-gradient(80% 60% at 50% 45%, rgba(60,87,104,.35), transparent 60%),
    linear-gradient(180deg,var(--ink),var(--navy) 60%,var(--ink)); }
.alethia .st-pain .float-piece { position:absolute; z-index:2; opacity:.5; filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)); }

/* ---------- FEATURE / NAVIGATOR ---------- */
.alethia .feature { background:linear-gradient(180deg,var(--ink),var(--navy)); padding:14vh 0; }
.alethia .feature .grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center;
  width:min(1180px,92vw); margin:0 auto; }
.alethia .feature h2 { font-size:clamp(1.8rem,3.6vw,2.9rem); max-width:16ch; }
.alethia .data-card { background:linear-gradient(160deg, rgba(28,53,71,.9), rgba(19,38,54,.9));
  border:1px solid rgba(169,196,222,.16); border-radius:18px; padding:1.6rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.alethia .data-card .dc-top { display:flex; justify-content:space-between; align-items:baseline; }
.alethia .data-card .big { font-family:var(--mono); font-size:2.2rem; font-weight:700; color:var(--pale); margin-top:.4rem; }
.alethia .data-card .big b { color:var(--sky); }
.alethia .spark { margin-top:1rem; }
.alethia .spark svg { width:100%; height:70px; overflow:visible; }
.alethia .spark path.line { fill:none; stroke:var(--sky); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:600; stroke-dashoffset:600; filter:drop-shadow(0 0 5px rgba(94,154,200,.6)); }
.alethia .spark .dot { fill:var(--sky); opacity:0; }
.alethia .acc { list-style:none; margin-top:1.4rem; }
.alethia .acc li { border-top:1px solid rgba(169,196,222,.16); padding:1.1rem .2rem; display:flex; gap:1rem; align-items:flex-start;
  opacity:0; transform:translateY(16px); }
.alethia .acc li:last-child { border-bottom:1px solid rgba(169,196,222,.16); }
.alethia .acc .num { font-family:var(--mono); font-size:.8rem; color:var(--sky); margin-top:.15rem; }
.alethia .acc .txt b { display:block; font-weight:500; font-size:1.02rem; color:var(--pale); }
.alethia .acc .txt span { font-size:.9rem; color:var(--text-2); }

/* ---------- LIGHT sections ---------- */
.alethia .light { background:var(--pale); color:var(--ink); }
.alethia .light h2 { color:var(--ink); }
.alethia .light .section-head { width:min(1180px,92vw); margin:0 auto 3rem; }
.alethia .light h2.section-title { font-size:clamp(1.7rem,3.4vw,2.7rem); max-width:20ch; }
.alethia .light .lead { margin-top:1rem; color:#41586a; max-width:46ch; font-weight:300; }
.alethia .proof { padding:14vh 0; }
.alethia .proof .row { width:min(1180px,92vw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.alethia .case { background:#fff; border-radius:16px; padding:1.5rem; box-shadow:0 20px 40px -18px rgba(19,38,54,.25);
  opacity:0; transform:translateY(30px); }
.alethia .case .bracket { color:var(--petrol); }
.alethia .case .metric { font-family:var(--mono); font-size:1.9rem; font-weight:700; color:var(--navy); margin:.6rem 0 .3rem; }
.alethia .case .metric b { color:var(--sky); }
.alethia .case p { font-size:.92rem; color:#51606c; line-height:1.5; }
.alethia .ph { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:#b23; background:#fdecec;
  padding:.15rem .4rem; border-radius:4px; text-transform:uppercase; }

.alethia .doorways { padding:14vh 0; }
.alethia .doorways .cards { width:min(1180px,92vw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.alethia .doorway { position:relative; border-radius:20px; overflow:hidden; min-height:340px; display:flex; flex-direction:column;
  justify-content:space-between; padding:1.6rem; text-decoration:none; color:var(--pale);
  box-shadow:0 24px 50px -20px rgba(19,38,54,.4); opacity:0; transform:translateY(30px); }
.alethia .doorway .d-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform .6s ease; }
.alethia .doorway:hover .d-bg { transform:scale(1.06); }
.alethia .doorway .d-scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(19,38,54,.25), rgba(19,38,54,.82)); }
.alethia .doorway .d-top,.alethia .doorway .d-bot { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; }
.alethia .doorway .d-title { font-size:1.4rem; font-weight:300; max-width:14ch; }
.alethia .doorway .bracket { color:var(--steel); }

/* ---------- CTA band ---------- */
.alethia .cta-band { min-height:80svh; display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(90% 70% at 50% 40%, rgba(60,87,104,.4), transparent 60%), linear-gradient(180deg,var(--navy),var(--ink)); }
.alethia .cta-band .inner { max-width:900px; }
.alethia .cta-band h2 { font-size:clamp(2rem,5vw,3.8rem); max-width:16ch; margin:1.2rem auto 0; }
.alethia .cta-band .sub { margin:1.4rem auto 2.2rem; max-width:46ch; color:var(--text-2); font-weight:300; font-size:1.05rem; }
.alethia .btn-solid { display:inline-flex; align-items:center; gap:.9rem; background:var(--sky); color:var(--ink);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:.55rem .6rem .55rem 1.5rem; border-radius:40px; text-decoration:none; box-shadow:0 14px 40px -10px rgba(94,154,200,.6); transition:.25s; }
.alethia .btn-solid .arrow { background:var(--ink); color:var(--sky); }
.alethia .btn-solid:hover { transform:translateY(-2px); }
.alethia .cta-band .micro { margin-top:1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--text-2); }

/* ---------- MEGA-FOOTER ---------- */
.alethia .site-footer { background:var(--ink); padding:6vh clamp(1.2rem,4vw,3rem) 3vh; border-top:1px solid rgba(169,196,222,.12); }
.alethia .footer-grid { width:min(1180px,92vw); margin:0 auto; display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:2rem; }
.alethia .footer-grid h3 { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sky); margin-bottom:1rem; }
.alethia .footer-grid a { display:block; color:var(--text-2); text-decoration:none; font-size:.88rem; margin-bottom:.55rem; transition:.2s; }
.alethia .footer-grid a:hover { color:var(--pale); }
.alethia .foot-brand { display:flex; align-items:center; gap:.6rem; color:var(--pale); font-weight:500; margin-bottom:1rem; }
.alethia .foot-brand .mark { width:22px; height:22px; color:var(--sky); }
.alethia .foot-meta { width:min(1180px,92vw); margin:3rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(169,196,222,.12);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; font-family:var(--mono); font-size:.68rem; color:var(--text-2); }

/* ---------- responsive + reduced-motion ---------- */
@media (max-width:760px){
  .alethia .navlinks { display:none; }
  .alethia .feature .grid, .alethia .proof .row, .alethia .doorways .cards, .alethia .footer-grid { grid-template-columns:1fr; }
  .alethia .subblock { position:static; margin-top:2rem; }
  .alethia .scroll-hint { display:none; }
  .alethia .hero-label { position:static; margin-bottom:1rem; }
  .alethia .hero .inner { padding-top:22vh; padding-bottom:8vh; }
  .alethia .hero { align-items:flex-start; }
  .alethia .readout, .alethia .route, .alethia .dot { display:none; }
}
@media (prefers-reduced-motion:reduce){ .alethia *{ animation:none !important; } }