/* index: page-specific styles ported from reference/ets-index.html. Shared rules live in base.css and chrome.css, tokens in tokens.css. */
:root{ --horizon:#1C3E63;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);line-height:1.6}
.cy{color:var(--cyan)}
@media(max-width:768px){.wrap{padding:0 20px}body{font-size:16px}}
.btn-dark{background:var(--on-flood);color:var(--ink)}
.btn-dark:hover{background:#0A2836}
.link{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--cyan);
  transition:gap var(--t-fast) var(--e)}
.link:hover{gap:14px}

/* ---------- NAV ---------- */

/* ---------- HERO SCENE ---------- */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0;z-index:-1}
.scene svg{width:100%;height:100%;display:block}
.hero-copy{position:relative;text-align:center;padding:126px var(--margin) 0;max-width:1000px;margin-bottom:auto}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);line-height:1.06;letter-spacing:-.03em}
.hero .sub{margin:var(--s5) auto 0;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:400;
  color:var(--muted);max-width:60ch}
.hero .acts{margin-top:var(--s8)}
.badges{position:relative;margin-top:auto;padding:0 var(--margin) clamp(62px,10vh,104px);
  display:flex;gap:clamp(26px,6vw,88px);justify-content:center;flex-wrap:wrap;width:100%}
.badge{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:210px}
.badge b{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
@media(max-width:900px){
  .hero-copy{padding-top:136px}
  .badges{gap:22px;padding-bottom:42px}
  .badge{max-width:31%;gap:9px}.badge b{font-size:11px}.badge svg{width:42px;height:48px}
}
@keyframes net{to{stroke-dashoffset:-100}}
.net{stroke-dasharray:7 93;animation:net 6s linear infinite}
@keyframes moonrise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
.orb-in{animation:moonrise 1.8s cubic-bezier(.16,1,.3,1) both .1s}
.orb-pos{transform:translateY(198px)}
@media (min-width:821px) and (max-height:800px){.orb-pos{transform:translateY(126px)}}
@supports (animation-timeline:scroll()){
  @keyframes sink{to{transform:translateY(var(--d))}}
  .par{animation:sink linear both;animation-timeline:scroll(root);animation-range:0 100svh}
}
@media (prefers-reduced-motion:reduce){.net,.orb-in,.par{animation:none!important}}
@media (max-height:800px){
  .hero-copy{padding-top:104px}
  .hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
  .hero .sub{font-size:1.02rem;margin-top:var(--s4)}
  .hero .acts{margin-top:var(--s7)}
}
@keyframes ps1{from{stroke-dashoffset:0}to{stroke-dashoffset:-186.9px}}
@keyframes tr1{from{stroke-dashoffset:78.5px}to{stroke-dashoffset:-108.4px}}
.p1{animation:ps1 7.5s linear infinite}
.t1{animation:tr1 7.5s linear infinite}
@keyframes fl1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-560px,0,0)}}
@keyframes bb1{from{transform:translate3d(0,-1.6px,0)}to{transform:translate3d(0,1.6px,0)}}
.w1{animation:fl1 50s linear infinite}
.b1{animation:bb1 7.0s ease-in-out infinite alternate}
@keyframes ps2{from{stroke-dashoffset:0}to{stroke-dashoffset:-119.3px}}
@keyframes tr2{from{stroke-dashoffset:50.1px}to{stroke-dashoffset:-69.2px}}
.p2{animation:ps2 10.5s linear infinite}
.t2{animation:tr2 10.5s linear infinite}
@keyframes fl2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-476px,0,0)}}
@keyframes bb2{from{transform:translate3d(0,-2.3px,0)}to{transform:translate3d(0,2.3px,0)}}
.w2{animation:fl2 42s linear infinite}
.b2{animation:bb2 8.3s ease-in-out infinite alternate}
@keyframes fl3{from{transform:translate3d(0,0,0)}to{transform:translate3d(-406px,0,0)}}
@keyframes bb3{from{transform:translate3d(0,-3.0px,0)}to{transform:translate3d(0,3.0px,0)}}
.w3{animation:fl3 35s linear infinite}
.b3{animation:bb3 9.6s ease-in-out infinite alternate}
@keyframes ps4{from{stroke-dashoffset:0}to{stroke-dashoffset:-117.7px}}
@keyframes tr4{from{stroke-dashoffset:49.4px}to{stroke-dashoffset:-68.3px}}
.p4{animation:ps4 9s linear infinite}
.t4{animation:tr4 9s linear infinite}
@keyframes fl4{from{transform:translate3d(0,0,0)}to{transform:translate3d(-350px,0,0)}}
@keyframes bb4{from{transform:translate3d(0,-3.7px,0)}to{transform:translate3d(0,3.7px,0)}}
.w4{animation:fl4 29s linear infinite}
.b4{animation:bb4 10.9s ease-in-out infinite alternate}
@keyframes fl5{from{transform:translate3d(0,0,0)}to{transform:translate3d(-302px,0,0)}}
@keyframes bb5{from{transform:translate3d(0,-4.4px,0)}to{transform:translate3d(0,4.4px,0)}}
.w5{animation:fl5 24s linear infinite}
.b5{animation:bb5 12.2s ease-in-out infinite alternate}
@keyframes fl6{from{transform:translate3d(0,0,0)}to{transform:translate3d(-260px,0,0)}}
@keyframes bb6{from{transform:translate3d(0,-5.1px,0)}to{transform:translate3d(0,5.1px,0)}}
.w6{animation:fl6 19s linear infinite}
.b6{animation:bb6 13.5s ease-in-out infinite alternate}
@keyframes fl7{from{transform:translate3d(0,0,0)}to{transform:translate3d(-224px,0,0)}}
@keyframes bb7{from{transform:translate3d(0,-5.8px,0)}to{transform:translate3d(0,5.8px,0)}}
.w7{animation:fl7 15s linear infinite}
.b7{animation:bb7 14.8s ease-in-out infinite alternate}
.glow{animation:pulse 11s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.82}to{opacity:1}}

/* ---------- FLOOD ---------- */
.flood{position:relative;background:var(--flood);color:var(--on-flood);overflow:hidden;
  padding:var(--s9) 0 var(--s8)}
.flood h2{font-size:clamp(1.5rem,2.4vw,2.05rem);letter-spacing:-.02em;line-height:1.18}
.flood p{font-size:16px;line-height:1.55}
.flood h2{color:var(--on-flood);max-width:16ch}
.flood p{color:#0A2A38}
.flood-top,.flood-bot{position:absolute;left:0;right:0;width:100%;display:block;height:52px}
.flood-top{top:-1px}.flood-bot{bottom:-1px}
.flood-in{position:relative;display:grid;grid-template-columns:.9fr 1.35fr;gap:var(--s8);align-items:center}
.flood .stat{font-size:clamp(3rem,6vw,5rem);font-weight:800;letter-spacing:-.045em;line-height:.95}
.flood .statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s8)}
.flood .statrow p{font-size:15px;line-height:1.45;margin-top:6px}
@media(max-width:900px){.flood{padding:var(--s8) 0 var(--s7)}.flood-in{grid-template-columns:1fr;gap:var(--s7)}}

/* ---------- CURRENTS ---------- */
.currents{position:relative;background:var(--base);padding:var(--s11) 0 var(--s10);overflow:hidden}
.cur-head{max-width:640px;margin-bottom:var(--s9)}
.cur-wrap{position:relative}
.cur-wrap svg{width:100%;height:auto;display:block}
.cur-list{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s6);margin-top:var(--s9)}
.cur-list h3{margin-bottom:var(--s3)}
.cur-list .n{display:block;font-size:14px;font-weight:600;color:var(--cyan);margin-bottom:10px}
.cur-list p{font-size:15.5px;color:var(--muted);line-height:1.6}
@media(max-width:1200px){.cur-list{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
@media(max-width:860px){.cur-list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cur-list{grid-template-columns:1fr}.cur-wrap{display:none}}

/* ---------- GALLERY ---------- */
.gallery{background:var(--deep);padding:var(--s11) 0}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s7);
  margin-bottom:var(--s8);flex-wrap:wrap}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.gal{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  transition:transform var(--t-mid) var(--e)}
.gal:hover{transform:translateY(-5px)}
.gal .im{aspect-ratio:16/11;overflow:hidden;background:var(--base)}
.gal .im img{width:100%;height:100%;object-fit:cover;object-position:left top;
  transition:transform 900ms var(--e)}
.gal:hover .im img{transform:scale(1.05)}
.gal .bd{padding:var(--s5) var(--s5) var(--s6)}
.gal .k{font-size:13.5px;font-weight:600;color:var(--cyan);display:block;margin-bottom:8px}
.gal p{font-size:15px;color:var(--muted);line-height:1.6;margin-top:10px}
@media(max-width:940px){.gal-grid{grid-template-columns:1fr}}

/* ---------- SOPROS ---------- */
.sopros{position:relative;background:var(--surface-2);padding:var(--s11) 0;overflow:hidden}
.sop-mark{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:clamp(420px,42vw,760px);
  opacity:.055;pointer-events:none;user-select:none}
.sopros .wrap{position:relative;z-index:1}
@media(max-width:940px){.sop-mark{right:-160px;width:520px;opacity:.04}}
.sop-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.sop-feat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6);margin-top:var(--s7)}
.sop-feat div{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.sop-feat svg{flex-shrink:0;margin-top:5px}
.sop-shot{border-radius:var(--r-lg);overflow:hidden;background:var(--base)}
@media(max-width:940px){.sop-in{grid-template-columns:1fr;gap:var(--s7)}}
@media(max-width:520px){.sop-feat{grid-template-columns:1fr}}

/* ---------- LUMEN ---------- */
.lumen{position:relative;background:var(--base);padding:var(--s11) 0;overflow:hidden}
.lum-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.free{font-size:clamp(4rem,10vw,8rem);font-weight:800;letter-spacing:-.06em;line-height:.85;
  color:var(--cyan)}
.lumen h2{text-shadow:0 0 18px rgba(60,204,240,.45),0 0 44px rgba(60,204,240,.28),
  0 0 96px rgba(60,204,240,.16);animation:lumglow 6.5s ease-in-out infinite alternate}
@keyframes lumglow{
  from{text-shadow:0 0 14px rgba(60,204,240,.32),0 0 36px rgba(60,204,240,.18),0 0 84px rgba(60,204,240,.10)}
  to{text-shadow:0 0 22px rgba(60,204,240,.55),0 0 54px rgba(60,204,240,.34),0 0 112px rgba(60,204,240,.20)}}
@media(prefers-reduced-motion:reduce){.lumen h2{animation:none}}
.lum-shot{border-radius:var(--r-lg);overflow:hidden;background:var(--deep)}
@media(max-width:940px){.lum-in{grid-template-columns:1fr;gap:var(--s7)}}

/* ---------- CTA + FOOTER ---------- */
.cta{position:relative;background:var(--deep);padding:var(--s11) 0 var(--s10);text-align:center;
  overflow:hidden}
.cta h2{max-width:18ch;margin:0 auto}
.cta .lead{max-width:56ch;margin:var(--s5) auto 0}
.cta .btn{margin-top:var(--s7)}

.rv{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-slow) var(--e),transform var(--t-slow) var(--e)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ---- desktop hero composition: headline on top, board and water below ---- */
@media(min-width:1025px){
  .hero{min-height:clamp(660px,94vh,1040px);justify-content:flex-start}
  .hero-copy{padding:clamp(160px,21.5vh,268px) var(--margin) 0;max-width:1180px}
  .hero h1{font-size:clamp(2.6rem,4.95vw,4.75rem);line-height:1.06}
  .hero .sub{font-size:1.12rem;margin-top:var(--s6);max-width:58ch}
  .hero .acts{margin-top:var(--s8)}
}

/* ---- the CTA lives in the drawer on small screens ---- */
@media(max-width:480px){
  .hero h1{font-size:clamp(1.95rem,8.6vw,2.5rem)}
  .hero .sub{font-size:1rem}
  .hero-copy{padding-top:clamp(128px,17vh,180px)}
}

/* ---- short desktops: everything scales down together so the board still clears ---- */
@media(min-width:1025px) and (max-height:830px){
  .hero{min-height:96vh}
  .hero-copy{padding-top:clamp(92px,13vh,124px)}
  .hero h1{font-size:clamp(2.2rem,3.65vw,3.3rem)}
  .hero .sub{font-size:1.02rem;margin-top:var(--s5)}
  .hero .acts{margin-top:var(--s6)}
  .orb-pos{transform:translateY(150px)}
}
@media(min-width:1025px) and (min-height:1000px){
  .orb-pos{transform:translateY(168px)}
}

/* ---- top rail: SOPros carries its mark, Lumen carries its glow ---- */

/* ---- brand mark, upper left ---- */