/* ================= Fonts — DeepVertex Sans (200–800) ================= */
@font-face{font-family:"DeepVertex Sans";src:url("fonts/DeepVertexSans-200.ttf") format("truetype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"DeepVertex Sans";src:url("fonts/DeepVertexSans-300.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"DeepVertex Sans";src:url("fonts/DeepVertexSans-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DeepVertex Sans";src:url("fonts/DeepVertexSans-500.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DeepVertex Sans";src:url("fonts/DeepVertexSans-600.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DeepVertex Sans";src:url("fonts/DeepVertexSans-700.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DeepVertex Sans";src:url("fonts/DeepVertexSans-800.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

/* ================= Tokens ================= */
:root{
  --ivory:#F1EDE6;
  --ink:#14171A;
  --accent:#00E5FF;
  --accent-deep:#00748A;
  --stone:#57534B;
  --teal:#0E5C63;
  --ink-78:rgba(20,23,26,.78);
  --ink-72:rgba(20,23,26,.72);
  --bone-78:rgba(241,237,230,.78);
  --bone-62:rgba(241,237,230,.62);
  --bone-45:rgba(241,237,230,.45);
  --bone-35:rgba(241,237,230,.35);
  --hair-ink:rgba(20,23,26,.22);
  --hair-ink-soft:rgba(20,23,26,.14);
  --hair-bone:rgba(241,237,230,.18);
  --gutter:64px;
  --maxw:1440px;
  --sans:"DeepVertex Sans","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* ================= Base ================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ivory);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16px;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.overline{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.4}
.on-ink .overline{color:var(--bone-62)}
.display{font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.015em;line-height:1.16;text-wrap:balance}
h1{font-size:clamp(40px,5vw,72px);font-weight:800;letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
.lead{font-size:18px;line-height:1.62;max-width:56ch}
section.block{padding:104px 0}
/* ================= Buttons ================= */
.btn{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;text-decoration:none;padding:17px 28px;border:1px solid transparent;border-radius:999px;position:relative;overflow:hidden;transition:opacity .15s ease}
.btn:hover{opacity:.85}
.btn.primary{color:#04252C;background:#00E5FF;border-color:rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 16px 36px -22px rgba(0,229,255,.55);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%)}
.btn.ghost{color:var(--ivory);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 36px -26px rgba(0,0,0,.5);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%)}
/* ================= Nav ================= */
.nav{position:sticky;top:0;z-index:50;background:var(--ivory);border-bottom:1px solid var(--hair-ink-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px}
.nav-logo{flex:0 0 auto}
.nav-logo img{height:40px;width:auto}
.nav-links a{white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:38px}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;text-decoration:none}
.nav-links a:hover{color:var(--accent)}
.nav .btn{padding:14px 22px;color:var(--ivory);background:rgba(20,23,26,.82);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -20px rgba(20,23,26,.42);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.nav .btn:hover{opacity:1;color:var(--ivory);background:var(--accent)}
/* ================= Hero ================= */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--ivory);padding:112px 0 104px}
.hero .wrap{position:relative;z-index:1}
.hero-mark{position:absolute;top:96px;right:-70px;width:min(580px,46vw);opacity:.07;pointer-events:none;user-select:none}
.hero h1{margin:34px 0 30px;max-width:1160px}
.hero .lead{color:var(--bone-78)}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:46px;flex-wrap:wrap}
/* ================= Statement ================= */
section.block.statement{position:relative;overflow:hidden;padding-top:64px;padding-bottom:60px}
.statement-mark{position:absolute;right:-60px;top:-8px;width:min(420px,38vw);opacity:.05;pointer-events:none;user-select:none}
.statement .display{max-width:26ch}
/* ================= Divisions ================= */
.divisions-head .display{max-width:24ch}
.divisions-head .lead{color:var(--ink-78);margin-top:22px}
.divgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:64px}
.dcol{border-top:1px solid var(--hair-ink);padding-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dcol .num{color:var(--stone)}
.dcol .icon{height:30px;width:auto;margin:2px 0 4px}
.dcol h3{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.dcol p{font-size:14px;line-height:1.55;color:var(--ink-72)}
.dcol .status{margin-top:10px}
.status.active{color:var(--accent)}
.status.soon{color:var(--stone)}
/* ================= Marine ================= */
.marine{background:var(--ink);color:var(--ivory)}
.marine-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.marine-top a{color:var(--accent);text-decoration:none}
.marine-grid{display:grid;grid-template-columns:minmax(0,620fr) minmax(0,640fr);gap:56px;align-items:start;margin-top:38px}
.marine h2{margin-bottom:24px}
.marine .lead{color:var(--bone-78);font-size:17px}
figure.plate{border:1px solid rgba(241,237,230,.28);margin:0;border-radius:14px;overflow:hidden}
figure.plate img{width:100%;height:auto}
figure.plate figcaption{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(241,237,230,.55);padding:14px 4px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;border-top:1px solid var(--hair-bone);margin-top:64px;padding-top:30px}
.stat .num{font-size:44px;font-weight:800;letter-spacing:-.01em;line-height:1.05}
.stat .lbl{margin-top:10px;color:var(--bone-62)}
.marine .source{margin-top:34px;font-size:14px;color:rgba(241,237,230,.42);max-width:78ch}
/* ================= Why ================= */
.why .display{max-width:30ch}
.why .lead{color:var(--ink-78);margin-top:22px}
/* ================= Frontier ================= */
.frontier{border-top:1px solid var(--hair-ink-soft);padding:56px 0 64px}
.frontier-in{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.frontier h3{font-size:26px;font-weight:700;letter-spacing:-.01em;margin-top:12px}
.frontier p{color:var(--ink-72);margin-top:10px;max-width:62ch}
.frontier a{color:var(--accent);text-decoration:none;white-space:nowrap}
/* ================= Footer ================= */
.foot{background:var(--ink);color:var(--ivory);padding:84px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:56px}
.foot-brand img{height:30px;width:auto}
.foot-brand p{color:var(--bone-62);font-size:14px;margin-top:18px;max-width:30ch}
.fcol h4{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-45)}
.fcol ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.fcol li,.fcol a{font-size:14px;color:var(--bone-78);text-decoration:none;line-height:1.5}
.fcol a:hover{color:var(--ivory)}
.foot-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--hair-bone);margin-top:64px;padding-top:22px;font-size:13px;color:var(--bone-45)}
/* ================= Responsive ================= */
@media (max-width:1100px){
  .divgrid{grid-template-columns:repeat(2,1fr);gap:40px 32px}
  .marine-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:720px){
  :root{--gutter:24px}
  section.block{padding:72px 0}
  .nav-links{display:none}
  .divgrid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr}
  .hero-mark{right:-120px;opacity:.05}
}
/* ============ Multi-page additions ============ */
a.dcol{text-decoration:none;color:inherit}
.dcol:hover h3{color:var(--accent)}
.nav-links a.on,.fcol a.on{color:var(--accent)}

/* ============ Roadmap / coming-soon / badges ============ */
.road{margin-top:48px}
.road .row{border-top:1px solid var(--hair-ink);padding:24px 0;display:grid;grid-template-columns:90px 1fr;gap:28px;align-items:baseline}
.road .row .n{color:var(--stone)}
.road .row h3{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.road .row p{color:var(--ink-72);font-size:15px;margin-top:6px}
.badge{display:inline-flex;align-items:center;gap:9px;color:var(--stone);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1}.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.badge.on-ink{color:var(--bone-62)}
.fields3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.fields3{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.road .row{grid-template-columns:48px 1fr;gap:16px}.fields3{grid-template-columns:1fr}}

.fields3 .dcol:first-child .num{color:var(--accent)}

/* ============ Responsive table (mobile: stacked rows) ============ */
@media (max-width:720px){
  .cmp thead{display:none}
  .cmp tr{display:block;border-top:1px solid var(--hair-ink);padding:18px 0}
  .cmp td{display:block;border:0;padding:3px 0;white-space:normal}
  .cmp td:nth-child(2){margin:6px 0}
}

/* ============ Focus (accessibility) ============ */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============ Motion system (Premium personality, iOS-feel) ============ */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --dur-fast:160ms;
  --dur-mid:260ms;
  --dur-slow:560ms;
}
html{scroll-padding-top:96px}
::selection{background:rgba(0,229,255,.16)}
a,button,.btn{-webkit-tap-highlight-color:transparent}
/* --- reveal-on-scroll (class added by site.js; no-JS keeps content visible) --- */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--rvd,0)*1ms)}
.rv.in{opacity:1;transform:none}
figure.plate.rv img{clip-path:inset(0 0 100% 0);transform:scale(1.03);transition:clip-path 760ms var(--ease-in-out),transform 900ms var(--ease-in-out),opacity var(--dur-slow) var(--ease-out)}
figure.plate.rv.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
/* --- micro-interactions --- */
.btn{transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform 480ms cubic-bezier(.34,1.56,.64,1),box-shadow var(--dur-fast) ease,filter var(--dur-fast) ease,opacity var(--dur-fast) ease}
@supports (transition-timing-function:linear(0,1)){
  .btn{transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform 540ms linear(0,0.215 8%,0.56 18%,0.85 30%,1.045 44%,1.115 54%,1.09 64%,1.035 76%,1.005 88%,1),box-shadow var(--dur-fast) ease,filter var(--dur-fast) ease,opacity var(--dur-fast) ease}
}
.btn:active{transform:scale(0.97)}
.nav-links a{transition:color var(--dur-fast) ease}
.fcol a{transition:color var(--dur-fast) ease}
a.overline{transition:color var(--dur-fast) ease,opacity var(--dur-fast) ease}
a.overline:hover{opacity:.8}
@media (hover:hover) and (pointer:fine){
  a.dcol{transition:transform var(--dur-mid) var(--ease-out)}
  a.dcol:hover{transform:translateY(-3px)}
  .dcol .icon{transition:transform var(--dur-mid) var(--ease-out)}
  a.dcol:hover .icon{transform:rotate(-8deg) scale(1.06)}
}
/* nav link underline sweep */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-mid) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover::after{transform:scaleX(1)}}
/* --- reduced motion: keep comprehension, drop movement --- */
@media (prefers-reduced-motion:reduce){
  .rv{transition:opacity 200ms ease;transform:none}
  figure.plate.rv img{clip-path:none;transform:none;transition:opacity 200ms ease}
  .btn:active{transform:none}
  a.dcol:hover{transform:none}
  a.dcol:hover .icon{transform:none}
  .nav-links a::after{display:none}
  html{scroll-behavior:auto}
}

/* ============ Glass materials (Apple-style, restrained) ============ */
:root{
  --radius-lg:20px;
  --glass-dk-bg:rgba(255,255,255,.07);
  --glass-dk-brd:rgba(255,255,255,.16);
  --glass-lt-bg:rgba(255,255,255,.5);
  --glass-lt-brd:rgba(255,255,255,.6);
  --glass-shadow:0 30px 70px -40px rgba(20,23,26,.45);
}
/* nav: frosted chrome */
.nav{background:rgba(241,237,230,.72);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);transition:box-shadow 240ms var(--ease-out),border-color 240ms ease}
.nav.scrolled{border-bottom-color:rgba(20,23,26,.14);box-shadow:0 14px 40px -30px rgba(20,23,26,.45)}
/* glass plates (image cards) */
.plate.glass{padding:10px;border-radius:var(--radius-lg);background:var(--glass-dk-bg);border:1px solid var(--glass-dk-brd);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 34px 80px -48px rgba(0,0,0,.6)}
.plate.glass img{border-radius:calc(var(--radius-lg) - 7px)}
.plate.light.glass{background:var(--glass-lt-bg);border-color:var(--glass-lt-brd);border-bottom-color:rgba(20,23,26,.08);box-shadow:var(--glass-shadow)}
.plate.glass figcaption{padding:12px 8px 4px}
/* stats as glass panel (dark) */
.stats.glass{border-top:0;padding:26px 30px;border-radius:var(--radius-lg);background:var(--glass-dk-bg);border:1px solid var(--glass-dk-brd);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
/* ghost button = glass */
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 46%,rgba(255,255,255,0) 62%)}
.btn.ghost:hover{background:rgba(255,255,255,.15);opacity:1}
/* to-top glass FAB */
.to-top{position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.62);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border:1px solid rgba(255,255,255,.7);box-shadow:0 16px 40px -16px rgba(20,23,26,.45);color:var(--ink);cursor:pointer;z-index:60;opacity:0;transform:translateY(10px) scale(.92);pointer-events:none;transition:opacity 200ms var(--ease-out),transform 260ms var(--ease-out),background 160ms ease;padding:0}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:rgba(255,255,255,.85)}
.to-top:active{transform:scale(.94)}
.to-top svg{width:16px;height:16px;display:block}
/* pointer tilt + sheen (decorative) */
.tilt{position:relative;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 260ms ease;background:radial-gradient(340px 240px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 62%)}
@media (hover:hover) and (pointer:fine){.tilt:hover::after{opacity:1}}
/* two-column gallery */
.gallery.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.gallery.two{grid-template-columns:1fr}}
/* accessibility / fallback modes */
@media (prefers-reduced-motion:reduce){.tilt{transform:none;will-change:auto}.to-top{transition:opacity 160ms ease}}
@media (prefers-reduced-transparency:reduce){
  .nav{background:var(--ivory);backdrop-filter:none;-webkit-backdrop-filter:none}
  .to-top{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .plate.glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.06)}
  .plate.light.glass{background:rgba(255,255,255,.72);backdrop-filter:none;-webkit-backdrop-filter:none}
  .stats.glass{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--ivory)}
  .to-top{background:#fff}
  .plate.light.glass{background:rgba(255,255,255,.78)}
}

/* Partner logos */
.dcol .plogo{height:56px;width:auto;display:block;margin:6px 0 4px}

/* Partner logo row (conductor-style) */
.plogo-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start;margin-top:52px}
.plogo-item{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.plogo-item img{height:58px;width:auto;display:block}
.plogo-item:nth-child(2) img{height:62px}
.plogo-item .overline{color:var(--stone)}
.plogo-row.home{display:flex;gap:52px;align-items:center;margin-top:20px}
.plogo-row.home img{height:46px;width:auto;display:block}
@media (max-width:720px){.plogo-row{gap:40px}.plogo-item img{height:52px}.plogo-row.home img{height:36px}}

/* Centered logo wall (conductor-style) */
.plogo-row.centered{display:flex;justify-content:center;gap:120px;align-items:flex-end;margin-top:56px}
.on-ink .plogo-item .overline{color:var(--bone-62)}
.plogo-row.home.centered{gap:52px;margin-top:18px;align-items:center}
@media (max-width:720px){.plogo-row.centered{gap:48px;flex-wrap:wrap}.plogo-row.centered .plogo-item img{height:52px}}

/* IPB navy seal: slight lift on dark ground */
.on-ink .plogo-item:nth-child(2) img{filter:brightness(1.28) saturate(1.05)}

/* Equalize logo item widths so the pair centers exactly */
.plogo-row.centered .plogo-item{min-width:190px}

/* BRIN lockup on dark ground: lift wordmark legibility */
.on-ink .plogo-item:nth-child(1) img{filter:brightness(1.22)}

/* Zora — footer cameo */
.foot-brand img.foot-zora{height:132px;width:auto;max-width:100%;margin-top:26px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.4))}
.foot-brand p.zcap{font-size:13px;color:var(--bone-45);margin-top:10px;max-width:none}
@media (max-width:720px){.foot-brand img.foot-zora{height:110px}}

/* Zora — About intro */
section.block.zora-intro{padding-top:40px;padding-bottom:12px}
.zora-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.zora-figure{position:relative;margin:0;display:flex;justify-content:center}
.zora-figure::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:60%;height:36px;background:radial-gradient(ellipse at center,rgba(15,20,30,.30) 0%,rgba(15,20,30,.15) 48%,transparent 74%);pointer-events:none}
.zora-figure img{position:relative;z-index:1;height:min(560px,50vw);width:auto;filter:drop-shadow(0 18px 34px rgba(18,24,38,.15))}
@media (max-width:1100px){.zora-grid{grid-template-columns:1fr;gap:36px}.zora-figure img{height:min(360px,52vw)}}

/* ================= Animated plots ================= */
.cost-plot{margin-top:44px;padding:34px 38px}
.cost-row{display:grid;grid-template-columns:190px 1fr 120px;gap:20px;align-items:center;margin-top:20px}
.cost-row .clbl{font-size:13px;color:var(--bone-62)}
.cost-row .track{position:relative;height:22px;border-radius:5px;background:rgba(241,237,230,.08);overflow:hidden}
.cost-row .fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:5px;transition:width 1.1s cubic-bezier(.22,.8,.24,1)}
.cost-row .fill.dvl{background:rgba(241,237,230,.34)}
.cost-row .fill.dv{background:var(--accent)}
.cost-row .cval{font-size:15px;font-weight:700;color:var(--ivory);text-align:right}
.cost-plot .cnote{margin-top:22px;font-size:13px;color:var(--bone-62);max-width:70ch}
.cost-plot.play .fill.dvl{width:100%}
.cost-plot.play .fill.dv{width:3.2%;min-width:12px}
@media (max-width:720px){.cost-row{grid-template-columns:1fr;gap:8px}.cost-row .cval{text-align:left}}

.coral-plot{margin:44px auto 0;max-width:760px}
.coral-plot svg{width:100%;height:auto;display:block;overflow:visible}
.coral-plot text{font-family:var(--sans);font-size:12.5px;fill:var(--stone)}
.coral-plot .grid line{stroke:var(--hair-ink-soft);stroke-dasharray:3 6}
.coral-plot .area{fill:url(#coralGrad);opacity:0;transition:opacity 1.1s ease .8s}
.coral-plot .line{fill:none;stroke:#00748A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 1.5s cubic-bezier(.3,.7,.3,1) .15s}
.coral-plot .dot{fill:#00748A;opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .45s ease,transform .55s cubic-bezier(.3,1.4,.4,1)}
.coral-plot .ptxt{fill:var(--ink);font-weight:700;font-size:13px;opacity:0;transition:opacity .5s ease}
.coral-plot .callout{fill:#00748A;font-weight:700;font-size:12px;opacity:0;transition:opacity .6s ease}
.coral-plot .dot.d1,.coral-plot .ptxt.p1{transition-delay:.55s}
.coral-plot .dot.d2,.coral-plot .ptxt.p2{transition-delay:.95s}
.coral-plot .dot.d3,.coral-plot .ptxt.p3{transition-delay:1.35s}
.coral-plot .callout{transition-delay:1.7s}
.coral-plot.play .area{opacity:1}
.coral-plot.play .line{stroke-dashoffset:0}
.coral-plot.play .dot{opacity:1;transform:scale(1)}
.coral-plot.play .ptxt{opacity:1}
.coral-plot.play .callout{opacity:1}
.coral-plot figcaption{margin-top:14px;font-size:13px;color:var(--stone)}

/* cost plot panel + refinements */
.cost-plot.glass{padding:30px 34px;border-radius:var(--radius-lg);background:var(--glass-dk-bg);border:1px solid var(--glass-dk-brd);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
.cost-plot .cnote strong{color:var(--ivory);font-weight:800}

/* ================= Ambience & micro-detail (YC reference pass) ================= */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(52% 68% at 78% 16%,rgba(0,229,255,.15),transparent 70%),
  radial-gradient(42% 58% at 10% 90%,rgba(0,229,255,.12),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(241,237,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(241,237,230,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(72% 72% at 62% 38%,#000 26%,transparent 100%);
  mask-image:radial-gradient(72% 72% at 62% 38%,#000 26%,transparent 100%)}
.hl{background-image:linear-gradient(180deg,rgba(0,229,255,0) 74%,rgba(0,229,255,.62) 74%);-webkit-box-decoration-break:clone;box-decoration-break:clone}

.ticker{overflow:hidden;background:var(--ink);border-top:1px solid var(--hair-bone);border-bottom:1px solid var(--hair-bone);padding:12px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.ticker-track{display:flex;gap:30px;align-items:center;width:max-content;white-space:nowrap;animation:tick 40s linear infinite}
.ticker-track span{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-45)}
.ticker-track i{color:rgba(0,229,255,.85);font-style:normal;font-size:10px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

.stats.glass,.cost-plot.glass{position:relative}
.stats.glass::before,.cost-plot.glass::before,
.stats.glass::after,.cost-plot.glass::after{content:"";position:absolute;width:13px;height:13px;opacity:.55;pointer-events:none;
  background:linear-gradient(var(--bone-62),var(--bone-62)) center/100% 1px no-repeat,linear-gradient(var(--bone-62),var(--bone-62)) center/1px 100% no-repeat}
.stats.glass::before,.cost-plot.glass::before{top:9px;left:9px}
.stats.glass::after,.cost-plot.glass::after{bottom:9px;right:9px}

/* Home divisions: richer cards */
#divisions .divgrid{gap:28px}
#divisions .dcol{border:1px solid var(--hair-ink-soft);border-top:1px solid var(--hair-ink);border-radius:14px;padding:26px 24px 28px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 72%);position:relative;transition:border-color .25s ease,transform .3s ease,box-shadow .35s ease}
#divisions .dcol::before,#divisions .dcol::after{content:"";position:absolute;width:12px;height:12px;opacity:.5}
#divisions .dcol::before{top:6px;left:6px;border-left:1px solid var(--hair-ink);border-top:1px solid var(--hair-ink)}
#divisions .dcol::after{bottom:6px;right:6px;border-right:1px solid var(--hair-ink);border-bottom:1px solid var(--hair-ink)}
#divisions .dcol:hover{border-color:rgba(0,229,255,.5);transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(20,23,26,.4)}

#divisions .dcol .status{margin-top:auto}

/* ================= Contact / inquiries ================= */
.inq-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start}
.inq-form{display:grid;gap:22px;margin:0}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.inq-form label{display:grid;gap:8px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--stone)}
.inq-form input,.inq-form select,.inq-form textarea{font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);background:rgba(255,255,255,.6);border:1px solid var(--hair-ink);border-radius:10px;padding:13px 14px;outline:none;transition:border-color .2s ease,background .2s ease;width:100%}
.inq-form input:focus,.inq-form select:focus,.inq-form textarea:focus{border-color:var(--accent);background-color:#fff}
.inq-form textarea{resize:vertical;min-height:150px}
.factions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn.outline{color:var(--ink);border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 30px -24px rgba(20,23,26,.32);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.btn.outline:hover{opacity:1;border-color:var(--accent);color:var(--accent)}
.fstatus{font-size:14px;color:var(--accent);min-height:20px;margin:0;line-height:1.5}
.fnote{font-size:13px;color:var(--stone);margin:0}
.inq-card{border:1px solid var(--hair-ink-soft);border-radius:16px;padding:32px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);position:relative}
.inq-card::before,.inq-card::after{content:"";position:absolute;width:11px;height:11px;opacity:.5;background:linear-gradient(var(--hair-ink),var(--hair-ink)) center/100% 1px no-repeat,linear-gradient(var(--hair-ink),var(--hair-ink)) center/1px 100% no-repeat}
.inq-card::before{top:8px;left:8px}
.inq-card::after{bottom:8px;right:8px}
.inq-mail{margin-top:18px;font-size:21px;font-weight:700;letter-spacing:-.01em}
.inq-mail a{color:var(--accent);text-decoration:none}
.inq-list{margin-top:20px;display:grid;gap:10px;list-style:none;font-size:14px;color:var(--ink-72)}
.inq-list li{padding-left:16px;position:relative}
.inq-list li::before{content:"◆";position:absolute;left:0;top:5px;color:rgba(0,229,255,.85);font-size:9px}
.inq-note{margin-top:24px;font-size:13px;color:var(--stone);line-height:1.7}
@media (max-width:1100px){.inq-grid{grid-template-columns:1fr}.frow2{grid-template-columns:1fr;gap:18px}}

/* Contact page polish */
body{display:flex;flex-direction:column;min-height:100vh}
.foot{margin-top:auto}
.inq-card{position:sticky;top:110px}
@media (max-width:1100px){.inq-card{position:static}}

/* ================= Anti-plain pass: textures, motifs, motion ================= */
/* ================= Motif backgrounds — satu motif unik per section ================= */
.bgp{position:relative}
.bgp::before{content:"";position:absolute;inset:0;pointer-events:none;background-size:640px 640px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.bgp.bg-contour::before{background-image:url("img/contour-ink.svg");background-size:640px 640px}
.bgp.bg-circuit::before{background-image:url("img/motif-circuit.svg");background-size:600px 600px}
.bgp.bg-gridx::before{background-image:url("img/motif-gridx.svg");background-size:460px 460px}
.bgp.bg-arcs::before{background-image:url("img/motif-arcs.svg");background-size:760px 760px;background-position:110px -70px}
.bgp.bg-waves::before{background-image:url("img/motif-waves.svg");background-size:680px 680px}
.bgp.bg-waves-bone::before{background-image:url("img/motif-waves-bone.svg");background-size:680px 680px}
.bgp.bg-pulse::before{background-image:url("img/motif-pulse.svg");background-size:620px 620px}
.bgp.bg-radar::before{background-image:url("img/motif-radar.svg");background-size:600px 600px;background-position:66% 0}
.bgp.bg-topo::before{background-image:url("img/motif-topo.svg");background-size:660px 660px}
.bgp.bg-dots::before{background-image:url("img/motif-dots.svg");background-size:500px 500px}
.bgp.bg-marks-bone::before{background-image:url("img/motif-marks-bone.svg");background-size:620px 620px}
.bgp.bg-rays::before{background-image:url("img/motif-rays.svg");background-size:640px 640px}

@keyframes zfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.zora-figure img{animation:zfloat 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.zora-figure img{animation:none}}

.hero .ecg{position:absolute;left:0;right:0;bottom:18px;width:100%;height:72px;pointer-events:none;z-index:0}
.ecg .base{fill:none;stroke:rgba(0,229,255,.30);stroke-width:1.6}
.ecg .pulse{fill:none;stroke:rgba(0,229,255,.9);stroke-width:2;stroke-dasharray:230 2310;animation:ecgsweep 7.5s linear infinite}
@keyframes ecgsweep{from{stroke-dashoffset:2540}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ecg .pulse{animation:none;stroke-dasharray:none;stroke:rgba(0,229,255,.35)}}

figure.motif{margin:56px 0 0;border:1px solid var(--hair-ink-soft);border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);position:relative}
figure.motif::before,figure.motif::after{content:"";position:absolute;width:11px;height:11px;opacity:.45;background:linear-gradient(var(--hair-ink),var(--hair-ink)) center/100% 1px no-repeat,linear-gradient(var(--hair-ink),var(--hair-ink)) center/1px 100% no-repeat}
figure.motif::before{top:8px;left:8px}
figure.motif::after{bottom:8px;right:8px}
figure.motif svg{display:block;width:100%;height:auto;border-radius:10px;background:rgba(20,23,26,.015)}
figure.motif figcaption{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--stone);padding:0 4px}
.motif .dr{stroke-dasharray:1500;stroke-dashoffset:1500;transition:stroke-dashoffset 3.4s cubic-bezier(.3,.7,.3,1) .15s}
.motif.play .dr{stroke-dashoffset:0}
.motif .dot{opacity:0;transition:opacity .5s ease .5s}
.motif.play .dot{opacity:1}

/* Glow khas per-section (lapisan gradient + motif) */
.zora-intro.bgp::before{background-image:radial-gradient(58% 70% at 82% 0%,rgba(0,229,255,.07),transparent 70%),url("img/motif-circuit.svg");background-size:100% 100%,600px 600px;background-repeat:no-repeat,repeat}
#divisions.bgp::before{background-image:radial-gradient(62% 80% at 20% 0%,rgba(0,229,255,.055),transparent 72%),url("img/motif-arcs.svg");background-size:100% 100%,760px 760px;background-repeat:no-repeat,repeat;background-position:0 0,110px -70px}

/* Sonar ping — flagship Marine di Home (animasi) */
.marine{position:relative;z-index:0}
.sonar{position:absolute;right:4%;top:16%;width:min(560px,42vw);pointer-events:none;z-index:-1}
.sonar .ring{fill:none;stroke:rgba(0,229,255,.55);stroke-width:2.2;transform-origin:300px 300px;animation:ping 6.5s ease-out infinite}
.sonar.s2{right:auto;left:5%;top:auto;bottom:6%;width:min(420px,32vw)}
.sonar.s2 .ring.r1{animation-delay:1.1s}
.sonar.s2 .ring.r2{animation-delay:3.26s}
.sonar.s2 .ring.r3{animation-delay:5.42s}
.sonar .ring.r2{animation-delay:2.16s}
.sonar .ring.r3{animation-delay:4.33s}
.sonar .core{fill:rgba(0,229,255,.5)}
@keyframes ping{0%{transform:scale(.32);opacity:.75}70%{opacity:.12}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.sonar .ring{animation:none;opacity:.22}}

/* Scan sweep — zona Zora (animasi) */
section.block.zora-intro{overflow:hidden}
.zora-intro::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:26%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,229,255,.03) 40%,rgba(0,229,255,.055) 50%,rgba(0,229,255,.03) 60%,transparent);animation:zsweep 14s ease-in-out infinite}
@keyframes zsweep{0%{left:-40%}55%{left:112%}100%{left:112%}}
@media (prefers-reduced-motion:reduce){.zora-intro::after{animation:none;opacity:.35;left:34%}}

.sonar .ringstatic{fill:none;stroke:rgba(0,229,255,.20);stroke-width:1.4}

/* iOS-glass press (tombol) */
.btn:active{transform:scale(.955);transition-duration:.14s;transition-timing-function:cubic-bezier(.25,.6,.3,1)}
.btn.primary:active{filter:brightness(.95);box-shadow:inset 0 2px 10px rgba(0,8,26,.28),inset 0 -1px 0 rgba(255,255,255,.12)}
.btn.ghost:active{background:rgba(255,255,255,.22);box-shadow:inset 0 2px 10px rgba(0,0,0,.22)}
.btn.outline:active{background:rgba(255,255,255,.78)}
.nav .btn:active{background:var(--accent)}
.to-top.show:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}.to-top.show:active{transform:none}}

/* Hero center + store badges */
.hero-center .wrap{text-align:center}
.hero-center h1{margin-left:auto;margin-right:auto}
.hero-center .lead{margin-left:auto;margin-right:auto}
.hero-center .hero-cta{justify-content:center}
.store-badges{margin-top:46px;display:grid;justify-items:center;gap:16px}
.store-badges .overline{color:var(--bone-45)}
.store-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.store-badge{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;color:var(--bone-62);font-size:12.5px;font-weight:600;letter-spacing:.02em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px -22px rgba(0,0,0,.55);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
.store-badge img.ic{height:17px;width:auto;filter:brightness(0) invert(1);opacity:.88;flex:none}
.store-badge img.ic.color{filter:none;opacity:1;height:18px}

/* ================= Mobile version (≤720px) ================= */
.nav-burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--hair-ink);background:rgba(255,255,255,.5);color:var(--ink);cursor:pointer;padding:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),background-color .15s ease}
.nav-burger svg{width:20px;height:20px}
.nav-burger:active{transform:scale(.92);background:rgba(255,255,255,.85)}
@media (max-width:720px){
  .nav-burger{display:inline-flex}
  .nav-right{gap:12px}
  .nav .btn{padding:12px 16px;font-size:11px}
  .nav.menu-open .nav-links{display:grid;position:absolute;top:100%;left:0;right:0;padding:14px 24px 20px;background:rgba(18,21,25,.96);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--hair-bone);box-shadow:0 30px 60px -30px rgba(20,23,26,.6);gap:0}
  .nav.menu-open .nav-links a{font-size:14px;color:var(--ivory);padding:14px 2px;border-bottom:1px solid rgba(241,237,230,.10);letter-spacing:.1em}
  .nav.menu-open .nav-links a:last-child{border-bottom:0}
  .hero{padding:88px 0 72px}
  h1{font-size:clamp(32px,8.5vw,44px)}
  .overline{font-size:12.5px;letter-spacing:.12em}
  .hero .lead{font-size:16.5px}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:12px;max-width:340px;margin-left:auto;margin-right:auto}
  .hero-cta .btn{text-align:center}
  .store-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;width:100%;max-width:380px;margin:0 auto}
  .store-badge{justify-content:center;padding:10px 8px;font-size:12px;gap:7px}
  .store-badge:nth-child(-n+2){grid-column:span 3}
  .store-badge:nth-child(n+3){grid-column:span 2}
  .ticker-track span{font-size:11.5px}
  .road .row h3{font-size:16px}
  .dcol h3{font-size:17px}
}

/* Store badges: mobile+tablet (toko app) vs desktop (platform desktop) */
.store-badge.m{display:none}
@media (max-width:1024px){
  .store-badge.m{display:inline-flex}
  .store-badge.d{display:none}
}

/* ===== TES CYAN: varian #00748A utk konteks ivory (teks/garis di latar terang) ===== */
.frontier a{color:var(--accent-deep)}
.fstatus{color:var(--accent-deep)}
.status.active{color:var(--accent-deep)}
.inq-mail a{color:var(--accent-deep)}
.inq-list li::before{color:rgba(0,135,155,.9)}
.btn.outline:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
#divisions .dcol:hover{border-color:rgba(0,135,155,.6)}
.coral-plot .line{stroke:#00748A}
.coral-plot .dot{fill:#00748A}
.coral-plot .callout{fill:#00748A}
.nav .btn:hover,.nav .btn:active{color:#04252C}

/* ================= Tablet version (721–1100px) ================= */
@media (max-width:1100px){
  .nav-links{gap:22px}
  .nav-right{gap:26px}
  .nav-in{gap:16px}
  .stats .num{font-size:40px}
  .marine-grid{gap:40px}
  .hero-cta{gap:16px}
}

/* ================= Tablet nav (≤1080px): burger, bukan links penuh ================= */
@media (max-width:1080px){
  .nav-burger{display:inline-flex}
  .nav-links{display:none}
  .nav-right{gap:12px}
  .nav .btn{padding:12px 16px;font-size:11px}
  .nav.menu-open .nav-links{display:grid;position:absolute;top:100%;left:0;right:0;padding:14px 24px 20px;background:rgba(18,21,25,.96);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--hair-bone);box-shadow:0 30px 60px -30px rgba(20,23,26,.6);gap:0}
  .nav.menu-open .nav-links a{font-size:14px;color:var(--ivory);padding:14px 2px;border-bottom:1px solid rgba(241,237,230,.10);letter-spacing:.1em}
  .nav.menu-open .nav-links a:last-child{border-bottom:0}
  .hero-mark{opacity:.05}
  .store-badge{padding:12px 20px;font-size:13px}
  .store-badge img.ic{height:18px}
  .store-row{gap:16px}
}

/* Contact form: kontrol seragam (input & select sama tinggi, chevron kustom) */
.inq-form input,.inq-form select{height:48px}
.inq-form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2357534B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:42px;cursor:pointer}