/* Chapter sections (#about, #orbit, #modmap, #oravex-wave) — extracted from
   index.html's inline <style> so index-ar.html can render the same sections.
   Generated; if you change a rule here, index.html still has its own inline
   copy of these rules and the two will drift. See the note in the handoff. */

/* ═══════════ ABOUT — flows after the film (Variant A: Deep dive) ═══════════ */
  .ab-wrap { position: relative; z-index: 6; background: #02090e; }
.ab-stage { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh;
    overflow: hidden; z-index: 0; }
.ab-stage video.ab-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.72) saturate(1.04); }
.ab-grade { position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 120% 66% at 50% 0%, rgba(56,209,194,0.07), transparent 54%),
      linear-gradient(180deg, rgba(3,13,19,0.62) 0%, rgba(2,10,15,0.8) 52%, rgba(1,6,11,0.94) 100%); }
/* progressive deep-dive darkening: opacity rises as you descend into About */
  .ab-deepen { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(1,7,12,0.15), rgba(0,4,8,0.92)); }
.ab-life { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ab-fish { transition: opacity 0.5s ease; z-index: 1; }
.ab-swimmer { position: absolute; top: 0; left: 0; will-change: transform;
    animation: ab-swim linear infinite; }
.ab-swimmer img { display: block; animation: ab-fbob 3.6s ease-in-out infinite alternate;
    filter: drop-shadow(0 6px 14px rgba(2,10,16,0.5)); }
.ab-swimmer.rev img { transform: scaleX(-1); }
.ab-weed { position: absolute; bottom: -2vh; transform-origin: bottom center;
    animation: ab-sway ease-in-out infinite alternate; opacity: 0.5; }
.ab-content { position: relative; z-index: 1; }
.ab-wrap .display { font-weight: 200; text-transform: uppercase; line-height: 1.32;
    letter-spacing: 0.14em; text-shadow: 0 2px 30px rgba(4,16,28,0.7); }
.ab-wrap .ab-title, .ab-wrap .ab-fh { font-weight: 400; letter-spacing: 0.04em; }
.ab-wrap .em { color: var(--teal); }
.ab-lead { font-weight: 300; line-height: 1.9; color: rgba(255,255,255,0.94);
    text-shadow: 0 2px 18px rgba(4,16,28,0.9); }
.ab-kicker { font-size: clamp(10px, 1.1vw, 12px); letter-spacing: 0.5em; text-indent: 0.5em;
    text-transform: uppercase; color: var(--teal); font-weight: 400; }
.ab-reveal { opacity: 0; transform: translateY(34px);
    transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.ab-reveal.in { opacity: 1; transform: none; }
.ab-reveal.fromL { transform: translateX(-90px); }
.ab-reveal.fromR { transform: translateX(90px); }
.ab-reveal.fromL.in, .ab-reveal.fromR.in { transform: none; }
.ab-reveal.d1 { transition-delay: 0.12s; }
.ab-reveal.d2 { transition-delay: 0.24s; }
.ab-octo { width: min(52vh, 78vw); aspect-ratio: 1; display: block;
    filter: drop-shadow(0 26px 60px rgba(2,8,16,0.55));
    -webkit-mask-image: radial-gradient(ellipse 42% 74% at 50% 46%, #000 52%, transparent 72%);
    mask-image: radial-gradient(ellipse 42% 74% at 50% 46%, #000 52%, transparent 72%); }
.ab-inner { max-width: 1180px; margin: 0 auto; padding: 0 8vw; }
.ab-hero { min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; gap: 30px; padding: 0 4vw; }
.ab-title { font-size: clamp(27px, 4.4vw, 64px); max-width: 20ch; width: 100%; line-height: 1.25; margin: 0 auto; }
.ab-sub { font-size: clamp(15px, 2vw, 22px); font-weight: 300; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-dim); max-width: 40ch; line-height: 1.7; }
.ab-stageocto { min-height: 96vh; display: flex; align-items: center; justify-content: center; }
.ab-fact { min-height: 82vh; display: flex; align-items: center; }
.ab-fact .ab-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.ab-fact:nth-of-type(even) .ab-num { order: 2; }
.ab-num { font-size: clamp(70px, 12vw, 180px); font-weight: 200; color: rgba(70,216,198,0.08);
    -webkit-text-stroke: 1.7px rgba(96,226,216,0.88); text-shadow: 0 0 34px rgba(70,216,198,0.22); line-height: 0.9; }
.ab-fh { font-size: clamp(26px, 3.6vw, 46px); margin-bottom: 22px; }
.ab-fp { font-size: clamp(15px, 1.5vw, 18px); }
.ab-mv { padding: 14vh 0 18vh; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; }
@media (max-width: 820px) {
  .ab-fact .ab-inner { grid-template-columns: 1fr; gap: 3vh; }
  .ab-fact:nth-of-type(even) .ab-num { order: 0; }
  .ab-mv { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-swimmer, .ab-weed, .ab-octo { animation: none; }
  .ab-reveal { opacity: 1; transform: none; }
}
/* ═══════════ MEET ORBIT — the AI operating layer (octopus = Orbit's mind) ═══════════ */
  .orb-wrap { position: relative; z-index: 6; background: #041018;
    --orb-lit: #46d8c6; --orb-glow: rgba(70,216,198,0.5); }
.orb-wrap .em { color: var(--orb-lit); }
.orb-animate .orb-wrap { height: 500vh; }
.orb-animate .orb-fallback { display: none; }
.orb-sticky { display: none; }
.orb-animate .orb-sticky { display: block; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.orb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.48) saturate(1.06); }
.orb-grade { position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 72% 60% at 50% 46%, transparent 26%, rgba(2,10,16,0.66) 100%),
      linear-gradient(180deg, rgba(3,14,20,0.72), transparent 22%, transparent 72%, rgba(1,7,12,0.92)); }
.orb-beams { position: absolute; inset: -20%; pointer-events: none; opacity: 0.5;
    background:
      linear-gradient(102deg, transparent 34%, rgba(120,220,210,0.05) 42%, transparent 50%),
      linear-gradient(78deg, transparent 54%, rgba(120,220,210,0.045) 62%, transparent 70%);
    animation: orb-beam 16s ease-in-out infinite alternate; }
.orb-dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.orb-dust i { position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: rgba(150,230,220,0.4); animation: orb-drift linear infinite; }
/* octopus = Orbit's mind, centred */
  .orb-octo-wrap { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%);
    width: min(44vh, 34vw); aspect-ratio: 1; z-index: 2; pointer-events: none; will-change: transform; }
.orb-halo { position: absolute; inset: -28%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(70,216,198,0.22), rgba(56,209,194,0.07) 46%, transparent 70%);
    filter: blur(8px); animation: orb-breathe 6.5s ease-in-out infinite; }
.orb-octo { width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(2,10,16,0.5)) drop-shadow(0 0 58px rgba(70,190,180,0.26)); }
/* radial arm markers (7 capabilities) */
  .orb-arms { display: none; }
.orb-arm { position: absolute; transform: translate(-50%,-50%); text-align: center;
    opacity: 0.32; transition: opacity .5s ease; }
.orb-arm .oa-dot { width: 9px; height: 9px; border-radius: 50%; margin: 0 auto 7px;
    background: rgba(120,230,215,0.55); box-shadow: 0 0 8px rgba(70,216,198,0.4);
    transition: transform .4s ease, box-shadow .4s ease, background .4s ease; }
.orb-arm .oa-name { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(234,247,247,0.72); white-space: nowrap; }
.orb-arm .oa-num { font-size: 8.5px; letter-spacing: 0.18em; color: var(--orb-lit); margin-top: 3px; }
.orb-arm.active { opacity: 1; }
.orb-arm.active .oa-dot { background: #dafff8; box-shadow: 0 0 16px 3px rgba(70,216,198,0.8); transform: scale(1.5); }
.orb-arm.active .oa-name { color: #eaf7f7; }
.orb-links { display: none; }
.orb-link { fill: none; stroke: rgba(70,216,198,0.55); stroke-width: 1.4;
    stroke-dasharray: 5 8; animation: orb-flow 1.1s linear infinite; }
.orb-spark { fill: #dafff8; }
/* text column (left) */
  .orb-text { position: absolute; left: 5vw; top: 50%; transform: translateY(-50%);
    width: min(330px, 27vw); z-index: 5; opacity: 0; transition: opacity .5s ease; }
.orb-eyebrow { display: flex; gap: 12px; align-items: center; font-size: 11px; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px; }
.orb-eyebrow b { color: var(--orb-lit); font-weight: 500; letter-spacing: 0.18em; }
.orb-h { font-size: clamp(23px, 2.5vw, 37px); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.03em; line-height: 1.12; margin-bottom: 15px; }
.orb-p { font-size: clamp(14px, 1.05vw, 15.5px); font-weight: 300; line-height: 1.72;
    color: rgba(234,247,247,0.88); margin-bottom: 16px; }
.orb-bul { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }
.orb-bul li { position: relative; padding-left: 19px; font-size: 13px; line-height: 1.45;
    color: rgba(234,247,247,0.8); }
.orb-bul li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--orb-lit); box-shadow: 0 0 7px var(--orb-glow); }
.orb-payoff { font-size: 14.5px; color: var(--orb-lit); letter-spacing: 0.01em; line-height: 1.5; }
/* product panel (right) — Orbit workspace */
  .orb-panel { position: absolute; right: 5vw; left: auto; top: 50%; transform: translateY(-50%);
    width: min(380px, 30vw); z-index: 5; opacity: 0; transition: opacity .5s ease; }
.orb-win { border-radius: 16px; overflow: hidden; border: 1px solid rgba(70,216,198,0.24);
    background: linear-gradient(180deg, rgba(8,30,38,0.97), rgba(4,16,22,0.99));   /* solid (no live blur during scroll) */
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.62); }
.orb-winbar { display: flex; align-items: center; gap: 9px; padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.07); }
.orb-winbar .owm { font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #eaf7f7;
    display: flex; align-items: center; gap: 9px; }
.orb-winbar .owm svg { width: 16px; height: 16px; }
.orb-live { margin-left: auto; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--orb-lit); display: flex; align-items: center; gap: 6px; }
.orb-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--orb-lit);
    box-shadow: 0 0 8px var(--orb-lit); animation: orb-pulse 1.6s ease-in-out infinite; }
.orb-winbody { padding: 15px; min-height: 210px; }
.orb-kan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.orb-col h5 { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim);
    margin-bottom: 8px; white-space: nowrap; }
.orb-it { font-size: 9.5px; line-height: 1.3; padding: 7px; border-radius: 7px; margin-bottom: 6px;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.06);
    color: rgba(234,247,247,0.85); }
.orb-it.hot { border-color: rgba(70,216,198,0.55); background: rgba(70,216,198,0.08); }
.orb-it.warn { border-color: rgba(240,180,90,0.5); }
.orb-it.done { opacity: 0.5; text-decoration: line-through; }
.orb-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 4px 9px; border-radius: 999px; margin: 0 6px 6px 0; }
.orb-badge.alone { background: rgba(70,216,198,0.14); color: var(--orb-lit); border: 1px solid rgba(70,216,198,0.34); }
.orb-badge.needs { background: rgba(240,180,90,0.14); color: #f4c07a; border: 1px solid rgba(240,180,90,0.34); }
.orb-badge.observe { background: rgba(255,255,255,0.05); color: var(--ink-dim); border: 1px solid rgba(255,255,255,0.12); }
.orb-note { font-size: 11.5px; line-height: 1.5; color: rgba(234,247,247,0.78); margin-top: 12px;
    padding: 10px 12px; border-left: 2px solid var(--orb-lit); background: rgba(70,216,198,0.06); border-radius: 0 8px 8px 0; }
.orb-row { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 10px 0;
    color: rgba(234,247,247,0.86); }
.orb-row + .orb-row { border-top: 1px solid rgba(255,255,255,0.06); }
.orb-row .ic { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center;
    background: rgba(70,216,198,0.14); color: var(--orb-lit); font-size: 11px; }
.orb-flowrow { display: flex; align-items: center; gap: 8px; font-size: 10.5px; margin: 8px 0; }
.orb-flowrow span { padding: 6px 10px; border-radius: 7px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08); color: rgba(234,247,247,0.8); white-space: nowrap; }
.orb-flowrow span.now { border-color: var(--orb-lit); color: var(--orb-lit); background: rgba(70,216,198,0.1); }
.orb-flowrow .arr { color: var(--orb-lit); }
.orb-ctrls { display: flex; gap: 8px; margin-top: 14px; }
.orb-btn { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 14px;
    border-radius: 8px; border: 1px solid rgba(70,216,198,0.4); color: var(--orb-lit); background: transparent; cursor: pointer; }
.orb-btn.solid { background: var(--orb-lit); color: #04241f; border-color: transparent; font-weight: 500; }
.orb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.orb-tab { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.05); color: var(--ink-dim); border: 1px solid rgba(255,255,255,0.08); }
.orb-tab.on { background: rgba(70,216,198,0.14); color: var(--orb-lit); border-color: rgba(70,216,198,0.34); }
.orb-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.orb-mod { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
    padding: 12px 6px; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(70,216,198,0.18);
    color: rgba(234,247,247,0.82); }
.orb-mem { display: grid; gap: 0; }
.orb-mem li { list-style: none; position: relative; padding: 0 0 14px 18px; font-size: 11.5px;
    color: rgba(234,247,247,0.82); border-left: 1px solid rgba(70,216,198,0.3); }
.orb-mem li:last-child { border-left-color: transparent; }
.orb-mem li::before { content: ""; position: absolute; left: -4px; top: 3px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--orb-lit); box-shadow: 0 0 6px var(--orb-glow); }
.orb-mem li b { color: #eaf7f7; font-weight: 500; }
.orb-mem li small { display: block; color: var(--ink-dim); font-size: 9.5px; margin-top: 2px; letter-spacing: 0.06em; }
/* intro + final centred overlays */
  .orb-intro, .orb-final { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; padding: 0 8vw; z-index: 6; }
.orb-intro { pointer-events: none; }
.orb-final { opacity: 0; }
.orb-final .orb-word { display: inline-block; opacity: 0; will-change: transform, opacity; }
.orb-final-tail { opacity: 0; will-change: transform, opacity; }
.orb-ceyebrow { font-size: clamp(10px,1.1vw,12px); letter-spacing: 0.5em; text-indent: 0.5em;
    text-transform: uppercase; color: var(--orb-lit); margin-bottom: 22px; }
.orb-title { font-size: clamp(30px, 5.2vw, 82px); font-weight: 400; text-transform: uppercase;
    letter-spacing: 0.04em; line-height: 1.08; text-shadow: 0 2px 44px rgba(1,10,16,0.85); }
.orb-lead { font-weight: 300; line-height: 1.85; color: rgba(234,247,247,0.9);
    font-size: clamp(14px,1.4vw,17px); max-width: 60ch; margin: 24px auto 0; text-shadow: 0 2px 18px rgba(1,10,16,0.9); }
.orb-final .orb-lead { max-width: 66ch; }
.orb-cta-row { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.orb-cta { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding: 16px 30px;
    border-radius: 999px; text-decoration: none; transition: transform .3s, background .3s, border-color .3s, color .3s; }
.orb-cta.solid { background: var(--orb-lit); color: #04241f; font-weight: 500; }
.orb-cta.solid:hover { transform: translateY(-2px); background: #6ff0e0; }
.orb-cta.ghost { border: 1px solid rgba(234,247,247,0.4); color: var(--ink); }
.orb-cta.ghost:hover { border-color: var(--orb-lit); color: var(--orb-lit); }
.orb-cta:focus-visible { outline: 2px solid var(--orb-lit); outline-offset: 3px; }
.orb-rail { position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 11px; z-index: 4; }
.orb-rail span { width: 6px; height: 6px; border-radius: 50%; background: rgba(234,247,247,0.22);
    transition: background .4s, transform .4s; }
.orb-rail span.on { background: var(--orb-lit); transform: scale(1.55); }
/* static fallback */
  .orb-fallback { max-width: 1080px; margin: 0 auto; padding: 16vh 7vw 12vh; }
.orb-fb-head { text-align: center; margin-bottom: 6vh; }
.orb-fb-arm { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 5vh;
    border-left: 2px solid rgba(70,216,198,0.4); padding-left: 26px; }
.orb-fb-arm h3 { font-size: clamp(22px,3vw,32px); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.orb-fb-arm .lbl { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--orb-lit); }
.orb-fb-arm p { font-size: 15px; line-height: 1.7; color: rgba(234,247,247,0.85); }
.orb-fb-arm ul { margin: 4px 0 0 18px; color: rgba(234,247,247,0.75); font-size: 14px; line-height: 1.6; }
.orb-fb-final { text-align: center; margin-top: 9vh; }
@media (max-width: 1024px) {
  .orb-text { width: min(320px, 34vw); }
  .orb-panel { width: min(360px, 40vw); }
  .orb-octo-wrap { width: 40vh; }
  .orb-bul li { font-size: 12px; }
}
@media (max-width: 720px) {
  .orb-animate .orb-wrap { height: 420vh; }
  .orb-bul { display: none; }
  .orb-octo-wrap { left: 50%; top: 17%; width: 30vh; }
  .orb-arms, .orb-links, .orb-rail { display: none; }
  .orb-text { left: 0; right: 0; width: auto; top: 34%; transform: none; padding: 0 6vw; text-align: center; }
  .orb-eyebrow { justify-content: center; }
  .orb-panel { left: 5vw; right: 5vw; width: auto; top: auto; bottom: 4vh; transform: none; }
  .orb-title { font-size: clamp(32px, 9vw, 52px); }
  .orb-kan { grid-template-columns: repeat(2, 1fr); }
  .orb-cta { width: 100%; text-align: center; }
}
/* right — product example (reuses .orb-win product styles) */
  .dep-panel { position: absolute; right: 5vw; top: 50%; transform: translateY(-50%);
    width: min(400px, 32vw); z-index: 5; opacity: 0; transition: opacity .5s ease; }
.dep-panel .orb-winbody { min-height: 232px; }
.dep-fb-panel .orb-win { width: 100%; }
/* ═══════════ THE SURFACE BREAK — the physical payoff of the whole dive ═══════════ */
  .wv-wrap { position: relative; z-index: 6; --dir: 1; }
[dir="rtl"] .wv-wrap { --dir: -1; }
.sb-animate .wv-wrap { height: 300vh; }
/* calm-surface state (also the reduced-motion / no-JS fallback): bright at the top
     where you surface, deepening to the dark below where the octopus stays */
  .wv-sticky { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: linear-gradient(180deg, #d7f1f2 0%, #9ad2d4 26%, #2f7e85 58%, #0a3f47 80%, #041a22 100%); }
.sb-animate .wv-sticky { position: sticky; top: 0; height: 100vh; min-height: 0; }
.sb-deep, .sb-caustics, .sb-bloom, .sb-particles { position: absolute; inset: 0; pointer-events: none; }
:not(.sb-animate) .sb-deep, :not(.sb-animate) .sb-caustics, :not(.sb-animate) .sb-bloom, :not(.sb-animate) .sb-particles { display: none; }
/* the underwater dark + pressure vignette that RELEASES at the break */
  .sb-deep { z-index: 1; background: radial-gradient(ellipse 130% 100% at 50% 42%, #06222c 0%, #031420 55%, #01080f 100%); }
/* overhead surface caustics — procedural (animated), not a flat image */
  .sb-caustics { z-index: 3; opacity: 0; mix-blend-mode: screen; will-change: opacity;
    background:
      radial-gradient(56% 34% at 28% 10%, rgba(180,245,240,0.55), transparent 62%),
      radial-gradient(48% 30% at 66% 6%, rgba(150,235,235,0.5), transparent 62%),
      radial-gradient(40% 26% at 48% 16%, rgba(205,250,248,0.45), transparent 64%),
      radial-gradient(34% 22% at 82% 14%, rgba(160,240,236,0.4), transparent 62%);
    animation: sb-caust 9s ease-in-out infinite alternate; }
.sb-bloom { z-index: 7; opacity: 0; will-change: opacity;
    background: radial-gradient(circle at 50% 33%, rgba(236,253,253,0.98), rgba(205,246,246,0.55) 30%, transparent 64%); }
.sb-particles { z-index: 3; overflow: hidden; }
.sb-particles i { position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%;
    background: rgba(190,240,235,0.7); box-shadow: 0 0 6px rgba(140,225,215,0.6); }
/* the octopus stays below, dim, at the lower edge — looking up as you leave */
  .sb-octo { position: absolute; z-index: 2; inset-inline: 0; bottom: -8vh; display: flex; justify-content: center; pointer-events: none; }
:not(.sb-animate) .sb-octo { bottom: -6vh; }
.sb-octo video { width: min(26vh, 40vw); opacity: 0.4; filter: brightness(0.5) blur(0.5px); }
.sb-above { position: relative; z-index: 4; text-align: center; width: 100%; padding: 0 6vw; margin-top: -6vh; }
.sb-animate .sb-above { opacity: 0; will-change: opacity, transform; }
.wv-word { position: relative; z-index: 2; width: 100%; max-width: 1500px; height: auto; display: block; margin: 0 auto; }
.wv-word text { font-family: "Jost", sans-serif; font-weight: 500; }
.wv-tag { position: relative; z-index: 2; margin-top: 2.4vh; font-size: clamp(11px, 1.2vw, 14px);
    letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase; color: rgba(4,26,30,0.92); }
/* footer options merged into the surface-break screen (dark ink on the bright surface) */
  .sb-foot { margin-top: 4.5vh; display: flex; flex-direction: column; align-items: center; gap: 20px; text-transform: none; }
.sb-foot-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; font-size: 13.5px; letter-spacing: 0.01em; }
.sb-foot-contact a, .sb-foot-contact > span { display: inline-flex; align-items: center; gap: 8px; color: #063138; text-decoration: none; }
.sb-foot-contact a:hover { color: #021a1e; }
.sb-foot-ic { flex: none; width: 16px; height: 16px; color: #0a4a52; }
.sb-foot-ic svg { display: block; width: 100%; height: 100%; }
.sb-foot-social { display: flex; gap: 17px; }
.sb-foot-social a { width: 20px; height: 20px; opacity: 0.78; transition: opacity 0.2s, transform 0.2s; }
.sb-foot-social img { width: 100%; height: 100%; filter: brightness(0) saturate(0); }
.sb-foot-social a:hover { opacity: 1; transform: translateY(-2px); }
.sb-foot-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 30px; margin-top: 4px;
    font-size: 12px; color: rgba(6,49,56,0.7); }
.sb-foot-bar nav { display: flex; gap: 26px; }
.sb-foot-bar a { color: rgba(6,49,56,0.85); text-decoration: underline; text-underline-offset: 3px; }
.sb-foot-bar a:hover { color: #021a1e; }
.wv-ripples { position: absolute; left: 50%; top: 42%; pointer-events: none; z-index: 5; }
.wv-ring { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px;
    border-radius: 50%; border: 1px solid rgba(70,216,198,0.5); transform: scale(0); opacity: 0; will-change: transform, opacity; }
.wv-ring.go { animation: wv-ring 2.8s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .sb-caustics { animation: none; }
}
/* ═══════════ MODULES ORBITAL MAP — every module orbits the ORAVEX core; the rings
     revolve with scroll (each at its own rate). Dark field, teal glow, upright labels. ═══════════ */
  .mm-wrap { position: relative; z-index: 6; height: 360vh; --dir: 1;
    --mm-accent: #5fd6e0; --orb-lit: #46d8c6; --orb-glow: rgba(70,216,198,0.5);
    background: radial-gradient(120% 90% at 50% 46%, #06222b 0%, #030e15 56%, #01060a 100%); color: #dff6f2; }
[dir="rtl"] .mm-wrap { --dir: -1; }
.mm-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.mm-ocean { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mm-ocean video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.mm-ocean::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 46%, rgba(3,14,21,0.45) 0%, rgba(1,6,10,0.86) 68%, rgba(1,5,9,0.95) 100%); }
.mm-head { position: absolute; top: 3vh; inset-inline: 0; z-index: 5; text-align: center; pointer-events: none; padding-inline: 6vw; }
.mm-eyebrow { font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase; color: #6E8F99; }
.mm-title { margin: 8px auto 0; font-size: clamp(20px, 2.8vw, 36px); font-weight: 200; letter-spacing: 0.01em; color: #eaf7f7; }
.mm-title b { color: var(--mm-accent); font-weight: 400; }
.mm-stage { position: absolute; inset: 0; z-index: 2; will-change: transform; }
.mm-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%;
    border: 1px solid rgba(95,214,224,0.22); pointer-events: none; }
.mm-ring0 { width: 26vh; height: 26vh; }
.mm-ring1 { width: 47vh; height: 47vh; }
.mm-ring2 { width: 69vh; height: 69vh; }
.mm-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 86px; height: 86px; z-index: 3;
    display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle, rgba(70,216,198,0.16), transparent 72%);
    filter: drop-shadow(0 0 28px rgba(70,216,198,0.55)); animation: mm-pulse 5s ease-in-out infinite; }
.mm-core img { width: 50px; height: 50px; object-fit: contain; }
.mm-orbs { position: absolute; inset: 0; z-index: 4; }
.mm-badge { position: absolute; left: 50%; top: 50%; width: 60px; will-change: transform, opacity;
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mm-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(9,28,38,0.86); border: 1px solid rgba(95,214,224,0.3); color: var(--mm-accent);
    box-shadow: 0 0 22px -8px rgba(70,216,198,0.5);   /* solid bg (no backdrop-filter): these badges orbit every frame — a live blur would jank */
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.mm-ic svg { width: 26px; height: 26px; }
.mm-name { font-size: 12px; letter-spacing: 0.04em; color: #cfe6e4; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,0.75); }
.mm-badge:hover .mm-ic { border-color: var(--mm-accent); box-shadow: 0 0 30px -6px rgba(70,216,198,0.85); transform: scale(1.1); }
.mm-trywrap { position: absolute; z-index: 7; bottom: 3.5vh; left: 50%; transform: translateX(-50%); }
.mm-try { display: inline-block; padding: 16px 40px; border-radius: 999px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .mm-wrap { height: auto; }
  .mm-sticky { position: relative; height: auto; min-height: 112vh; }
  .mm-core { animation: none; }
}
@media (max-width: 760px) {
  .mm-badge { width: 48px; }
  .mm-ic { width: 46px; height: 46px; }
  .mm-ic svg { width: 22px; height: 22px; }
  .mm-name { font-size: 10px; }
}
/* ═══════════ Liquid (tank-fill) buttons — the pill fills with live sloshing teal water ═══════════ */
  .form-btn, .orb-cta.solid, .orb-cta.ghost {
    position: relative; overflow: hidden;
    background: transparent; color: var(--ink); border: 1px solid rgba(70,216,198,0.55);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.35s; }
.form-btn .lb-label, .orb-cta .lb-label { position: relative; z-index: 2;
    text-shadow: 0 1px 10px rgba(2,14,20,0.7); }
.form-btn::before, .form-btn::after, .orb-cta::before, .orb-cta::after {
    content: ""; position: absolute; z-index: 1; left: 50%; top: 58%;
    width: 232%; aspect-ratio: 1; border-radius: 42% 45% 43% 44%;
    background: linear-gradient(180deg, rgba(120,240,225,0.98), var(--orb-lit) 42%, #10b0be 100%);
    animation: cta-slosh 7s linear infinite;
    transition: top 1.05s cubic-bezier(.3,.85,.25,1); will-change: transform, top; }
.form-btn::after, .orb-cta::after {
    border-radius: 46% 42% 45% 43%; opacity: 0.45; animation: cta-slosh 10.5s linear infinite reverse; }
.form-btn:hover, .orb-cta:hover { transform: translateY(-2px); border-color: rgba(70,216,198,0.9); }
.form-btn:hover::before, .form-btn:hover::after,
  .orb-cta:hover::before, .orb-cta:hover::after { top: -55%; }
.form-btn, .orb-cta.solid { animation: cta-ping 3.6s cubic-bezier(.22,1,.36,1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .form-btn, .orb-cta.solid { animation: none; }
  .form-btn::before, .form-btn::after, .orb-cta::before, .orb-cta::after { animation: none; top: 40%; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .lad-animate .lad-wrap, .orb-animate .orb-wrap { height: auto; }
  .lad-animate .lad-sticky, .orb-animate .orb-sticky { position: static; height: auto; min-height: 0; overflow: visible; }
  .lad-animate .lad-fallback, .orb-animate .orb-fallback { display: block; }
  .lad-animate .lad-sticky, .orb-animate .orb-sticky { display: none; }
}