/* ============================================================
   AQUATIC RHYTHM — style.css
   Extracted from index.html for maintainability
   ============================================================ */

/* ── RESET & ROOT ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
:root{
  --ink:#18190f;--ink-3:#606355;--ink-4:#959880;--ink-5:#c2c5b0;
  --paper:#f8f6f0;--paper-3:#e6e0d3;
  --moss:#4a6b48;--moss-2:#6a9268;--moss-3:#9dbf9a;--moss-4:#cce0ca;--moss-5:#eaf4e8;
  --tide:#3a6e8c;--tide-2:#5a94b2;--tide-3:#8bbdd2;--tide-4:#c2dde8;--tide-5:#e8f4f8;
  --deep:#06100d;--deep-2:#091a15;--abyss:#030b09;
  --accent:#3DD6E8;
  --accent-dim:#28B8C8;
  --accent-glow:rgba(61,214,232,0.18);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(0.19,1,0.22,1);
}
body{font-family:var(--sans);background:var(--abyss);color:rgba(255,255,255,.94);overflow-x:hidden;line-height:1.72}

/* ── CURSOR ── */
#cd,#cr{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
#cd{width:5px;height:5px;background:rgba(61,214,232,.95);transition:transform .15s var(--ease),background .3s}
#cr{width:28px;height:28px;border:1px solid rgba(61,214,232,.35);transition:width .4s var(--ease),height .4s var(--ease),border-color .3s}
body.hov #cd{transform:translate(-50%,-50%) scale(2.2);background:rgba(100,230,180,.9)}
body.hov #cr{width:48px;height:48px;border-color:rgba(100,230,180,.18)}

/* ── ECOSYSTEM FIXED BG ── */
#eco{position:fixed;inset:0;z-index:0;overflow:hidden;contain:layout style}
.wb{position:absolute;inset:0;background:linear-gradient(180deg,#052535 0%,#073040 18%,#062a38 38%,#041e28 58%,#030f18 78%,#020810 100%)}
.cl{position:absolute;top:0;left:0;right:0;height:60%;background:radial-gradient(ellipse at 50% 0%,rgba(60,200,220,.14) 0%,rgba(20,140,180,.08) 38%,transparent 72%);animation:caustic 14s ease-in-out infinite}
@keyframes caustic{0%{transform:scaleX(1) translateX(0);opacity:.55}20%{transform:scaleX(1.18) translateX(4%);opacity:1}45%{transform:scaleX(.88) translateX(-3%);opacity:.38}70%{transform:scaleX(1.12) translateX(2%);opacity:.9}100%{transform:scaleX(1) translateX(0);opacity:.55}}
.cl2{position:absolute;top:0;left:-10%;right:-10%;height:45%;background:radial-gradient(ellipse at 40% 0%,rgba(40,180,200,.08) 0%,transparent 60%);animation:caustic2 19s ease-in-out infinite 3s}
@keyframes caustic2{0%{opacity:.2;transform:translateX(0) scaleX(1)}35%{opacity:.7;transform:translateX(8%) scaleX(1.2)}65%{opacity:.15;transform:translateX(-5%) scaleX(.85)}100%{opacity:.2;transform:translateX(0) scaleX(1)}}
.sl{position:absolute;top:0;left:-20%;right:-20%;height:1px;background:linear-gradient(to right,transparent,rgba(80,220,235,.65),transparent);animation:surfsh 8s ease-in-out infinite}
@keyframes surfsh{0%,100%{transform:translateX(-8%) scaleX(.8);opacity:.35}50%{transform:translateX(8%) scaleX(1.2);opacity:.9}}
.df{position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(2,8,16,.88),transparent)}
.ray{position:absolute;top:0;transform-origin:top center;background:linear-gradient(180deg,rgba(80,220,235,.09) 0%,rgba(40,170,200,.04) 50%,transparent 100%);border-radius:50% 50% 80% 80%;animation:rayf ease-in-out infinite;filter:blur(1.5px)}
@keyframes rayf{0%,100%{opacity:.4;transform:skewX(-4deg) scaleY(1)}50%{opacity:1;transform:skewX(4deg) scaleY(1.08)}}
.plant-layer{position:absolute;bottom:0;left:0;right:0;height:70%;pointer-events:none}
.plant{position:absolute;bottom:0;transform-origin:bottom center}
@keyframes psway{0%,100%{transform:rotate(var(--sa))}50%{transform:rotate(var(--sb))}}
.mote{position:absolute;border-radius:50%;background:rgba(80,220,240,.55);animation:mrise linear infinite;pointer-events:none;will-change:transform,opacity}
@keyframes mrise{0%{opacity:0;transform:translateY(0) translateX(0)}5%{opacity:var(--mo)}90%{opacity:calc(var(--mo)*.4)}100%{opacity:0;transform:translateY(var(--mr)) translateX(var(--md))}}
.spk{position:absolute;border-radius:50%;background:rgba(60,200,180,.35);animation:sdrift ease-in-out infinite alternate;pointer-events:none;will-change:transform,opacity}
@keyframes sdrift{from{transform:translate(0,0);opacity:.1}to{transform:translate(var(--sx),var(--sy));opacity:.55}}
#driftwood-layer{position:absolute;bottom:0;left:0;right:0;height:55%;pointer-events:none}

/* ── Z-INDEX STACK ── */
#fish-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1;contain:strict;will-change:contents}
#app-main{position:relative;z-index:20;isolation:isolate}
#pl{position:relative;z-index:1}
.page{position:relative;z-index:1}
nav{position:fixed;z-index:800}

/* ── FISH ── */
.fish{position:absolute;pointer-events:none;will-change:transform,left,top;contain:layout style size}
.fish svg{display:block}

/* ── TEXT PROTECTION ── */
.ht,.pst,.bt,.hk,.api,.rhd,.apq,.snt,.sco,.stit,.starr,.stco{text-shadow:0 1px 12px rgba(3,9,8,.9),0 0 32px rgba(3,9,8,.7)}
.dxl,.dlg,.dmd,.rhtit{text-shadow:0 2px 16px rgba(3,9,8,.95),0 0 48px rgba(3,9,8,.8)}
.pc,.snb,.eg,.scv,.rhr,.qi,.pb{background:rgba(6,14,11,.72)}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:800;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.5rem,5vw,4.5rem);background:linear-gradient(to bottom,rgba(3,18,30,.88),transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nl{display:flex;align-items:center;text-decoration:none;transition:opacity .3s}
.nl:hover{opacity:.75}
.nlinks{display:flex;gap:2.6rem;list-style:none}
.nlinks a{font-size:.63rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none;transition:color .3s;position:relative}
.nlinks a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:rgba(61,214,232,.75);transition:width .35s var(--ease)}
.nlinks a:hover{color:rgba(255,255,255,.82)}
.nlinks a:hover::after{width:100%}
.ncta{font-size:.62rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(61,214,232,.92);border:1px solid rgba(61,214,232,.35);padding:.52rem 1.25rem;border-radius:100px;text-decoration:none;transition:background .3s,border-color .3s,color .3s;backdrop-filter:blur(8px)}
.ncta:hover{background:rgba(61,214,232,.15);border-color:rgba(61,214,232,.6);color:#ffffff}
.nbg{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:none;padding:5px}
.nbg span{display:block;height:1px;background:rgba(255,255,255,.4);transition:transform .36s var(--ease),opacity .22s,width .3s var(--ease);transform-origin:center}
.nbg span:nth-child(1){width:18px}
.nbg span:nth-child(2){width:12px}
.nbg.open span:nth-child(1){transform:translateY(6px) rotate(45deg);width:18px}
.nbg.open span:nth-child(2){transform:translateY(-6px) rotate(-45deg);width:18px}
.nmob{position:fixed;top:68px;left:0;right:0;z-index:799;background:rgba(6,16,13,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(139,189,210,.08);padding:0 clamp(1.5rem,5vw,4.5rem);max-height:0;overflow:hidden;pointer-events:none;transition:max-height .48s var(--ease),padding-top .35s,padding-bottom .35s}
.nmob.open{max-height:380px;padding-top:1.6rem;padding-bottom:2rem;pointer-events:all}
.nmob ul{list-style:none}
.nmob li{border-bottom:1px solid rgba(255,255,255,.05)}
.nmob li:last-child{border-bottom:none}
.nmob a{display:block;padding:.95rem 0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);text-decoration:none;transition:color .25s,padding-left .3s var(--ease)}
.nmob a:hover{color:rgba(139,189,210,.85);padding-left:.5rem}
.nmob .nmc{color:rgba(139,189,210,.6)}

/* ── PAGE SYSTEM ── */
.page{display:none}
.page.active{display:block;animation:pgin .6s var(--ease) forwards}
@keyframes pgin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sr{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.sr.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.3s}.d4{transition-delay:.44s}.d5{transition-delay:.58s}

/* ── SHARED UTILITIES ── */
.cap{max-width:1160px;margin:0 auto}
.pad{padding-left:clamp(1.5rem,5vw,4.5rem);padding-right:clamp(1.5rem,5vw,4.5rem)}
.ey{display:block;font-size:.65rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:rgba(157,191,154,.8);margin-bottom:1.6rem}
.ey-t{color:rgba(61,214,232,.72)}
.div{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(139,189,210,.12),transparent)}
.dxl{font-family:var(--serif);font-weight:300;line-height:1.08;font-size:clamp(3.4rem,6.5vw,6.5rem);letter-spacing:-.01em}
.dlg{font-family:var(--serif);font-weight:300;line-height:1.1;font-size:clamp(2.4rem,4.2vw,4.4rem)}
.dmd{font-family:var(--serif);font-weight:300;line-height:1.18;font-size:clamp(1.9rem,2.8vw,2.9rem)}
.bt{font-size:1rem;font-weight:300;color:rgba(255,255,255,.72);line-height:1.95}
.bt+.bt{margin-top:1rem}
.btn{display:inline-block;text-decoration:none;font-family:var(--sans);font-size:.67rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;border-radius:2px;transition:all .32s var(--ease)}
.bf{background:rgba(30,165,185,.88);color:#ffffff;border:1px solid rgba(61,214,232,.55);padding:.9rem 2rem;backdrop-filter:blur(8px);letter-spacing:.01em}
.bf:hover{background:rgba(40,184,208,.95);border-color:rgba(61,214,232,.8);transform:translateY(-2px);box-shadow:0 12px 36px rgba(40,184,208,.35)}
.bg{background:transparent;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.12);padding:.9rem 2rem}
.bg:hover{border-color:rgba(60,210,225,.35);color:rgba(60,210,225,.85)}
.bl{background:transparent;color:rgba(61,214,232,.72);border-bottom:1px solid rgba(61,214,232,.32);border-radius:0;padding:0;font-size:.62rem}
.bl:hover{color:rgba(61,214,232,1);border-bottom-color:rgba(61,214,232,.7)}

/* ── HOME HERO ── */
.hero{min-height:100svh;display:flex;align-items:center;padding:68px clamp(1.5rem,5vw,4.5rem) 0;position:relative}
.hi{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;padding:8rem 0 6rem}
.ht .ey{opacity:0;animation:ru .9s var(--ease) forwards .3s}
.ht .dxl{color:rgba(255,255,255,.95);opacity:0;animation:ru .9s var(--ease) forwards .48s}
.hk{opacity:0;animation:ru .9s var(--ease) forwards .66s;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1rem,1.4vw,1.18rem);color:rgba(255,255,255,.58);line-height:1.8;max-width:420px;margin:2rem 0 3rem}
.hb{opacity:0;animation:ru .9s var(--ease) forwards .84s;display:flex;gap:1rem;flex-wrap:wrap}
@keyframes ru{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hoz{display:flex;justify-content:center;align-items:center;opacity:0;animation:or 1.4s var(--ease) forwards 1s}
@keyframes or{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.orb{position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center}
.or{position:absolute;border-radius:50%;border:1px solid;animation:ob ease-in-out infinite}
.or1{inset:0;border-color:rgba(139,189,210,.14);animation-duration:5.5s}
.or2{inset:30px;border-color:rgba(139,189,210,.08);animation-duration:7s;animation-delay:1s}
.or3{inset:72px;border-color:rgba(157,191,154,.06);animation-duration:9s;animation-delay:2s}
.or4{inset:118px;border-color:rgba(139,189,210,.04);animation-duration:11s;animation-delay:3s}
@keyframes ob{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.025);opacity:.4}}
.oc{position:absolute;inset:108px;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(139,189,210,.18) 0%,rgba(58,110,140,.1) 45%,rgba(74,107,72,.06) 100%);animation:ocs 6s ease-in-out infinite}
@keyframes ocs{0%,100%{opacity:.8}50%{opacity:1}}
.ol{position:relative;z-index:2;text-align:center}
.on{display:block;font-family:var(--serif);font-style:italic;font-size:1.7rem;font-weight:300;color:rgba(255,255,255,.32);animation:nb 5s ease-in-out infinite}
@keyframes nb{0%,100%{opacity:.32}50%{opacity:.52}}
.os{display:block;font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(139,189,210,.22);margin-top:.5rem}
.scue{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;opacity:0;animation:ru 1s var(--ease) forwards 1.6s}
.scue span{font-size:.54rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.18)}
.sline{width:1px;height:40px;background:linear-gradient(to bottom,rgba(139,189,210,.3),transparent);animation:sd 2.2s ease-in-out infinite}
@keyframes sd{0%,100%{transform:scaleY(1) translateY(0);opacity:.5}50%{transform:scaleY(.6) translateY(8px);opacity:1}}

/* ── PROBLEM SECTION ── */
.psec{padding:9rem clamp(1.5rem,5vw,4.5rem);content-visibility:auto;contain-intrinsic-size:0 500px}
.pst{font-family:var(--serif);font-size:clamp(1.6rem,2.5vw,2.5rem);font-weight:300;line-height:1.38;color:rgba(255,255,255,.88);max-width:660px}
.pst em{font-style:italic;color:rgba(61,214,232,.88)}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(139,189,210,.06);margin-top:5rem}
.pc{padding:2.8rem 2.4rem;background:rgba(6,16,13,.6);backdrop-filter:blur(12px);position:relative;overflow:hidden;transition:background .4s}
.pc::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(139,189,210,.2),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pc:hover{background:rgba(9,22,18,.75)}
.pc:hover::before{transform:scaleX(1)}
.pn{font-family:var(--serif);font-size:3rem;font-weight:300;color:rgba(61,214,232,.38);line-height:1;margin-bottom:1.4rem}
.pc h4{font-family:var(--serif);font-size:1.08rem;font-weight:400;color:rgba(255,255,255,.94);margin-bottom:.5rem;line-height:1.3}
.pc p{font-size:.88rem;font-weight:300;color:rgba(255,255,255,.68);line-height:1.85}

/* ── ARA SECTION ── */
.arasec{padding:9rem clamp(1.5rem,5vw,4.5rem);content-visibility:auto;contain-intrinsic-size:0 500px}
.arah{display:grid;grid-template-columns:1fr 1.1fr;gap:7rem;margin-bottom:6rem;align-items:end}
.aragrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(157,191,154,.06)}
.ac{padding:2.4rem 1.8rem;background:rgba(6,16,13,.55);backdrop-filter:blur(10px);position:relative;overflow:hidden;transition:background .35s}
.ac:hover{background:rgba(9,22,18,.8)}
.ac::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(157,191,154,.25),transparent);transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease)}
.ac:hover::after{transform:scaleX(1)}
.an{font-family:var(--serif);font-size:2.8rem;font-weight:300;color:rgba(61,214,232,.4);line-height:1;margin-bottom:1.2rem}
.ac h4{font-family:var(--serif);font-size:1.02rem;font-weight:400;color:rgba(255,255,255,.85);line-height:1.3;margin-bottom:.5rem}
.ac p{font-size:.86rem;font-weight:300;color:rgba(255,255,255,.5);line-height:1.75}

/* ── SYSTEM SECTION ── */
.syssec{padding:9rem clamp(1.5rem,5vw,4.5rem);content-visibility:auto;contain-intrinsic-size:0 600px}
.sysin{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:center}
.stit{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,3.8vw,4.2rem);line-height:1.12;color:rgba(255,255,255,.9);margin:1.4rem 0 2rem}
.stit em{font-style:italic;color:rgba(139,189,210,.75)}
.slayers{display:flex;flex-direction:column;gap:1px;background:rgba(139,189,210,.06);margin-top:3rem}
.sl2{display:flex;gap:1.4rem;align-items:start;padding:1.6rem 1.8rem;background:rgba(6,16,13,.55);transition:background .3s}
.sl2:hover{background:rgba(9,22,18,.75)}
.sdot{width:5px;height:5px;border-radius:50%;margin-top:7px;flex-shrink:0}
.dg{background:rgba(157,191,154,.6);box-shadow:0 0 8px rgba(157,191,154,.4)}
.db{background:rgba(139,189,210,.6);box-shadow:0 0 8px rgba(139,189,210,.4)}
.dw{background:rgba(255,255,255,.22)}
.sl2 h5{font-family:var(--serif);font-size:1.02rem;font-weight:400;color:rgba(255,255,255,.82);margin-bottom:.25rem}
.sl2 p{font-size:.86rem;font-weight:300;color:rgba(255,255,255,.48);line-height:1.8}
.snb{padding:3rem;border:1px solid rgba(139,189,210,.12);background:rgba(6,16,13,.7);position:relative;overflow:hidden}
.snb::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(139,189,210,.25),transparent)}
.snt{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.08rem;line-height:1.78;color:rgba(255,255,255,.58)}
.snt em{font-style:normal;color:rgba(139,189,210,.75)}

/* ── CTA SECTION ── */
.ctasec{padding:9rem clamp(1.5rem,5vw,4.5rem);text-align:center;content-visibility:auto;contain-intrinsic-size:0 400px}
.ctasec .dmd{color:rgba(255,255,255,.68);max-width:500px;margin:1.2rem auto 1.5rem}
.ctasec .bt{max-width:380px;margin:0 auto 3rem}

/* ── ARA PAGE ── */
.araph{padding:12rem clamp(1.5rem,5vw,4.5rem) 7rem;display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:end}
.api{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1rem,1.4vw,1.18rem);color:rgba(255,255,255,.58);line-height:1.85;margin-top:1.8rem}
.adefs{padding:7rem clamp(1.5rem,5vw,4.5rem);content-visibility:auto;contain-intrinsic-size:0 500px}
.adg{display:grid;grid-template-columns:1fr 1.4fr;gap:8rem;align-items:start;margin-top:4rem}
.apq{font-family:var(--serif);font-size:clamp(1.5rem,2.3vw,2.3rem);font-weight:300;line-height:1.45;color:rgba(255,255,255,.82)}
.apq strong{font-weight:400;font-style:italic;color:rgba(139,189,210,.88)}
.prins{padding:5rem clamp(1.5rem,5vw,4.5rem) 9rem;content-visibility:auto;contain-intrinsic-size:0 900px}
.pb{display:grid;grid-template-columns:60px 200px 1fr;gap:4.5rem;padding:4.5rem 0;align-items:start;border-bottom:1px solid rgba(255,255,255,.06)}
.pb:last-child{border-bottom:none}
.pnl{font-family:var(--serif);font-size:3.5rem;font-weight:300;color:rgba(61,214,232,.45);line-height:1}
.ptag{font-size:.62rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(157,191,154,.72);display:block;margin-bottom:.7rem}
.ptit{font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.85rem);font-weight:400;color:rgba(255,255,255,.88);line-height:1.28}
.eg{margin-top:1.6rem;padding:1.2rem 1.5rem;border-left:1px solid rgba(139,189,210,.22);background:rgba(58,110,140,.07)}
.egtag{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(139,189,210,.65);display:block;margin-bottom:.45rem}
.eg p{font-family:var(--serif);font-style:italic;font-size:.92rem;color:rgba(255,255,255,.52);line-height:1.75}
.cmps{padding:7rem clamp(1.5rem,5vw,4.5rem) 9rem;content-visibility:auto;contain-intrinsic-size:0 500px}
.ctab{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(139,189,210,.06);margin-top:4rem}
.cc{padding:3rem;background:rgba(6,16,13,.6)}
.ccb{background:rgba(58,110,140,.08)}
.ch{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:2.2rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.07)}
.chd{color:rgba(255,255,255,.45)}.cht{color:rgba(61,214,232,.82)}
.cis{display:flex;flex-direction:column;gap:1.5rem}
.ci{display:flex;gap:.9rem;align-items:start}
.cmk{width:14px;height:14px;border-radius:50%;border:1px solid;flex-shrink:0;margin-top:5px;font-size:.5rem;display:flex;align-items:center;justify-content:center}
.mx{border-color:rgba(200,80,80,.4);color:rgba(200,80,80,.6)}
.my{border-color:rgba(139,189,210,.45);color:rgba(139,189,210,.8)}
.ci p{font-size:.88rem;font-weight:300;color:rgba(255,255,255,.55);line-height:1.75}

/* ── RHYSSA PAGE ── */
.rhhero{min-height:100svh;padding-top:68px;display:flex;align-items:center;padding-left:clamp(1.5rem,5vw,4.5rem);padding-right:clamp(1.5rem,5vw,4.5rem)}
.rhg{display:grid;grid-template-columns:1.1fr 1fr;gap:8rem;align-items:center;padding:7rem 0}
.rhtit{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,5.2vw,5.4rem);line-height:1.1;color:rgba(255,255,255,.92);margin:1.4rem 0 1.8rem}
.rhtit em{font-style:italic;color:rgba(61,214,232,.78)}
.rhd{font-size:.97rem;font-weight:300;color:rgba(255,255,255,.55);line-height:2;max-width:420px;margin-bottom:2.8rem}
.orblg{position:relative;width:360px;height:360px;display:flex;align-items:center;justify-content:margin:0 auto}
.qsec{padding:7rem clamp(1.5rem,5vw,4.5rem) 9rem;content-visibility:auto;contain-intrinsic-size:0 600px}
.qg{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start}
.qis{display:flex;flex-direction:column}
.qi{padding:1.8rem 0 1.8rem 2rem;border-left:1px solid rgba(139,189,210,.12);transition:border-color .3s,padding-left .35s var(--ease)}
.qi:hover{border-left-color:rgba(61,214,232,.45);padding-left:2.5rem}
.qi+.qi{border-top:1px solid rgba(255,255,255,.05)}
.qi h4{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:rgba(255,255,255,.82);margin-bottom:.35rem}
.qi p{font-size:.88rem;font-weight:300;color:rgba(255,255,255,.48);line-height:1.8}

/* ── START PAGE ── */
.stpg{min-height:100svh;padding-top:68px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.str{position:absolute;border-radius:50%;border:1px solid rgba(139,189,210,.05);top:50%;left:50%;transform:translate(-50%,-50%);animation:strp ease-in-out infinite;pointer-events:none}
.sr1{width:160px;height:160px;animation-duration:6s}
.sr2{width:320px;height:320px;animation-duration:6s;animation-delay:1s}
.sr3{width:min(520px,140vw);height:min(520px,140vw);animation-duration:6s;animation-delay:2s}
.sr4{width:min(760px,200vw);height:min(760px,200vw);animation-duration:6s;animation-delay:3s}
.sr5{width:min(1040px,280vw);height:min(1040px,280vw);animation-duration:6s;animation-delay:4s}
@keyframes strp{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:.15;transform:translate(-50%,-50%) scale(1.02)}}
.stin{position:relative;z-index:2;max-width:560px;margin:0 auto;padding:7rem 2rem}
.starr{display:block;font-family:var(--serif);font-style:italic;font-size:1.02rem;color:rgba(255,255,255,.42);margin-bottom:2.2rem}
.stin .dxl{color:rgba(255,255,255,.88);margin-bottom:1.8rem}
.stin .dxl em{font-style:italic;color:rgba(139,189,210,.72)}
.stpaths{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(139,189,210,.06);margin-top:4rem;text-align:left}
.spp{background:rgba(6,16,13,.55);padding:1.8rem 1.5rem;text-decoration:none;display:block;backdrop-filter:blur(8px);transition:background .35s}
.spp:hover{background:rgba(9,22,18,.8)}
.spg{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:rgba(139,189,210,.25);display:block;margin-bottom:.8rem;transition:color .3s}
.spp:hover .spg{color:rgba(139,189,210,.5)}
.spp h4{font-family:var(--serif);font-size:.97rem;font-weight:400;color:rgba(255,255,255,.75);margin-bottom:.3rem}
.spp p{font-size:.8rem;font-weight:300;color:rgba(255,255,255,.42);line-height:1.68}
.stco{margin-top:4rem;font-family:var(--serif);font-style:italic;font-size:.92rem;color:rgba(255,255,255,.3);line-height:1.75}

/* ── PRIVACY / TERMS ── */
.privh{padding:12rem clamp(1.5rem,5vw,4.5rem) 4rem}
.privbody{max-width:720px;padding:0 clamp(1.5rem,5vw,4.5rem) 9rem}
.privsec{margin-bottom:3.5rem}
.privsec h3{font-family:var(--serif);font-size:1.15rem;font-weight:400;color:rgba(255,255,255,.78);margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.07)}
.privsec p{font-size:.92rem;font-weight:300;color:rgba(255,255,255,.52);line-height:2;margin-bottom:.8rem}
.privsec ul{list-style:none;margin:.5rem 0 .8rem 0}
.privsec ul li{font-size:.92rem;font-weight:300;color:rgba(255,255,255,.48);line-height:1.9;padding-left:1.2rem;position:relative}
.privsec ul li::before{content:'—';position:absolute;left:0;color:rgba(139,189,210,.4)}
.privdate{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-top:.8rem;display:block}

/* ── ABOUT PAGE ── */
.abouth{padding:12rem clamp(1.5rem,5vw,4.5rem) 6rem}
.aboutg{display:grid;grid-template-columns:1fr 1.2fr;gap:8rem;align-items:start;margin-top:4rem}
.aboutq{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,2.1rem);font-weight:300;line-height:1.5;color:rgba(255,255,255,.82)}
.aboutq em{font-style:italic;color:rgba(139,189,210,.75)}
.aboutdiv{display:flex;flex-direction:column;gap:3rem}
.aboutblock{padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.07)}
.aboutblock h4{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:rgba(255,255,255,.75);margin-bottom:.7rem}
.aboutblock p{font-size:.95rem;font-weight:300;color:rgba(255,255,255,.52);line-height:1.95}

/* ── FOOTER ── */
footer{padding:3.5rem clamp(1.5rem,5vw,4.5rem);display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(255,255,255,.06)}
.subfooter{text-align:center;padding:.8rem clamp(1.5rem,5vw,4.5rem) 1.6rem;border-top:1px solid rgba(255,255,255,.03);display:flex;justify-content:center;align-items:center;gap:.8rem;flex-wrap:wrap}
.sflink{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.18);text-decoration:none;transition:color .3s}
.sflink:hover{color:rgba(139,189,210,.55)}
.sfdot{color:rgba(255,255,255,.1)}
.fl{font-family:var(--serif);font-size:.95rem;font-weight:300;color:rgba(255,255,255,.35);text-decoration:none}
.fl em{font-style:italic;color:rgba(139,189,210,.5)}
.fm{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);text-align:center}

/* ── BIOLUMINESCENCE ── */
.bio{position:fixed;border-radius:50%;pointer-events:none;z-index:9998;mix-blend-mode:screen}
@keyframes bioglow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  15%{opacity:var(--bo)}
  60%{opacity:calc(var(--bo)*.6)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(var(--bs)) translateY(var(--by))}
}
@keyframes biopulse{
  0%,100%{opacity:var(--bo);transform:translate(-50%,-50%) scale(1)}
  50%{opacity:calc(var(--bo)*1.4);transform:translate(-50%,-50%) scale(1.3)}
}

/* ── WATER LEVEL INDICATOR ── */
#water-level{position:fixed;left:0;top:0;bottom:0;width:5px;z-index:900;pointer-events:none}
#water-track{position:absolute;inset:0;background:rgba(61,214,232,.07)}
#water-fill{position:absolute;bottom:0;left:0;right:0;height:0%;background:linear-gradient(to top,rgba(61,214,232,.75),rgba(61,214,232,.35) 60%,rgba(61,214,232,.08));transition:height .2s ease-out;border-radius:0 0 2px 2px}
#water-fill::after{content:'';position:absolute;top:-2px;left:0;right:0;height:4px;background:rgba(61,214,232,.95);border-radius:2px;box-shadow:0 0 8px rgba(61,214,232,.8),0 0 18px rgba(61,214,232,.4)}
#water-bubble{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(61,214,232,.95);left:0;box-shadow:0 0 6px rgba(61,214,232,.9),0 0 12px rgba(61,214,232,.5);animation:wbrise 2.2s ease-in-out infinite;opacity:0}
@keyframes wbrise{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:1}70%{opacity:.6;transform:translateY(-22px) scale(.6)}100%{opacity:0;transform:translateY(-34px) scale(.3)}}

/* ── ECOSYSTEM TOGGLE ── */
#eco-toggle{position:fixed;bottom:1.4rem;right:1.4rem;z-index:900;pointer-events:all;display:flex;gap:6px;align-items:center;background:rgba(6,16,13,.65);border:1px solid rgba(139,189,210,.12);border-radius:100px;padding:.35rem .55rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:.35;transition:opacity .3s,border-color .3s;cursor:pointer}
#eco-toggle:hover{opacity:.85;border-color:rgba(139,189,210,.28)}
.eco-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:50%;cursor:pointer!important;padding:0;transition:background .25s,opacity .25s;position:relative;pointer-events:all}
.eco-btn:hover{background:rgba(139,189,210,.1)}
.eco-btn svg{display:block}
.eco-btn .eco-slash{transition:opacity .2s}
.eco-btn.off .eco-slash{opacity:1}
.eco-btn:not(.off) .eco-slash{opacity:0}

/* ── RHYSSA NEW SECTIONS ── */
.rhyssa-stance-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
.rhyssa-limits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
.rhyssa-facets{grid-template-columns:repeat(2,1fr)}

/* ── PERFORMANCE: low-tier backdrop removal ── */
.tier-low .pc,.tier-low .ac,.tier-low .sl2,.tier-low .spp,
.tier-low .ncta,.tier-low .snb,.tier-low .bf{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .nlinks{display:none}.nbg{display:flex}.ncta{display:none}
  .hi,.arah,.sysin,.araph,.adg,.rhg,.qg,.scn,.aboutg{grid-template-columns:1fr;gap:2.5rem}
  .aboutg{margin-top:2rem}
  .abouth{padding:8rem clamp(1.5rem,5vw,4.5rem) 3rem}
  .aboutq{font-size:clamp(1.3rem,5.5vw,1.9rem);line-height:1.4}
  .aboutblock p{font-size:.9rem}
  .aboutdiv{gap:2rem}
  .hoz{display:none}
  .hi{padding:6rem 0 4rem}
  .pcards{grid-template-columns:1fr}
  .aragrid{grid-template-columns:1fr 1fr}
  .ctab,.stpaths{grid-template-columns:1fr}
  .pb{grid-template-columns:1fr;gap:1.2rem}
  .pnl{font-size:2.2rem}
  .scn:nth-child(even) .scl{order:unset}.scn:nth-child(even) .scr{order:unset}
  .orblg{width:220px;height:220px}
  .cl2,.spk{display:none}
  #driftwood-layer{opacity:.5}
  .mote{opacity:.35!important}
  .ray{opacity:.35!important}
  .cl{animation-duration:20s}
  .rhyssa-stance-grid{grid-template-columns:1fr!important;gap:2.5rem!important}
  .rhyssa-limits-grid{grid-template-columns:1fr!important}
  .ara-pillars{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .aragrid{grid-template-columns:1fr}
  .dxl{font-size:2.9rem}
  .rhyssa-stance-grid{grid-template-columns:1fr!important;gap:2rem!important}
  .rhyssa-limits-grid{grid-template-columns:1fr!important}
  .rhyssa-facets{grid-template-columns:1fr}
}
@media(hover:none),(pointer:coarse){#cd,#cr{display:none!important}}
@media(hover:hover) and (pointer:fine){body,.btn,.spp,.nbg{cursor:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  #cd,#cr,#eco,.cl,.cl2,.sl,.ray,.plant,.mote,.spk,.str,.or,.oc,.on,.sline,.sr{animation:none!important;transition:none!important}
}




/* ── READING PAGE CATEGORIES ── */
.rd-cat{margin-bottom:.5rem}
.rd-cat-header{margin-bottom:1.8rem}
.rd-cat-label{display:inline-block;font-size:.58rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(61,214,232,.7);border-bottom:1px solid rgba(61,214,232,.25);padding-bottom:.3rem;margin-bottom:.7rem}
.rd-cat-desc{font-size:.88rem;font-weight:300;color:rgba(255,255,255,.38);line-height:1.75;max-width:480px}
.rd-card{display:block;text-decoration:none;background:rgba(6,16,13,.55);border:1px solid rgba(139,189,210,.1);transition:border-color .3s;overflow:hidden;margin-bottom:.85rem}
.rd-card-bar{height:2px;background:linear-gradient(to right,rgba(61,214,232,.5),rgba(157,191,154,.3),transparent)}
.rd-card-inner{padding:1.8rem 2.2rem 1.6rem}
.rd-card-tags{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;flex-wrap:wrap}
.rd-tag{font-size:.48rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(139,189,210,.4)}
.rd-tag-level{color:rgba(157,191,154,.72);border:1px solid rgba(157,191,154,.2);padding:.14rem .45rem;border-radius:100px}
.rd-tag-int{color:rgba(61,214,232,.35)}
.rd-card-title{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:400;color:rgba(255,255,255,.88);line-height:1.22;margin-bottom:.65rem}
.rd-card-title em{font-style:italic;color:rgba(255,255,255,.48);font-size:clamp(.9rem,1.4vw,1.2rem)}
.rd-card-desc-text{font-size:.86rem;font-weight:300;color:rgba(255,255,255,.38);line-height:1.8;max-width:520px;margin-bottom:1rem}
.rd-card-cta{font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(61,214,232,.5)}
.rd-coming{padding:1.6rem 2rem;border:1px dashed rgba(255,255,255,.07);background:rgba(6,16,13,.3)}
.rd-coming p{font-family:var(--serif);font-style:italic;font-size:.92rem;color:rgba(255,255,255,.22)}