/* RUPIC */
:root{
  --bg:#F2F5F8; --surface:#FFFFFF; --sunk:#E6ECF2; --ink:#16213A; --muted:#566179; --line:#D3DCE5;
  --sonar:#1C8FB3; --sonar-soft:#D4EDF5; --plum:#7B2382; --plum-soft:#F0E1F1; --alert:#C8233A; --sun:#F2B33D;
  --head:#E9D9CB; --shell:#FFFFFF; --shell-edge:#2C3A5C; --ok:#1F8A5B;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1524; --surface:#162038; --sunk:#1C2844; --ink:#E7EDF6; --muted:#9AA8C0; --line:#2A3757;
    --sonar:#4CC3E3; --sonar-soft:#163A4D; --plum:#CC7AD4; --plum-soft:#3A2241; --alert:#FF6B7E; --sun:#F2B33D;
    --head:#8A7363; --shell:#DDE6F0; --shell-edge:#0E1524; --ok:#4FD39A; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1524; --surface:#162038; --sunk:#1C2844; --ink:#E7EDF6; --muted:#9AA8C0; --line:#2A3757;
  --sonar:#4CC3E3; --sonar-soft:#163A4D; --plum:#CC7AD4; --plum-soft:#3A2241; --alert:#FF6B7E; --sun:#F2B33D;
  --head:#8A7363; --shell:#DDE6F0; --shell-edge:#0E1524; --ok:#4FD39A; color-scheme: dark;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
img,svg{max-width:100%}
a{color:var(--sonar)}
:focus-visible{outline:3px solid var(--sonar);outline-offset:3px;border-radius:4px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--surface);border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;padding:.7rem 1.25rem;overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.brand{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:.02em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.4rem;flex:none}
.nav ol{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0;counter-reset:n}
.nav li{flex:none;counter-increment:n}
.nav li a{color:var(--muted);text-decoration:none;font-size:.92rem;white-space:nowrap}
.nav li a::before{content:counter(n) ". ";color:var(--sonar);font-weight:700}
.nav li a:hover{color:var(--ink)}

main{max-width:1180px;margin:0 auto;padding:0 1.25rem 4rem}
section{padding:4.5rem 0 1rem;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
.sec-head{display:grid;grid-template-columns:5rem 1fr;gap:1rem;align-items:baseline;margin-bottom:2rem}
.sec-num{font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:1;color:var(--sonar);opacity:.85}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;margin:0;letter-spacing:-.01em}
h3{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.25;margin:0 0 .5rem}
p{margin:0 0 1rem;max-width:68ch}
.lede{font-size:1.2rem;color:var(--ink);max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:3.5rem 0 2.5rem}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(4rem,12vw,9rem);line-height:.85;margin:0 0 1rem;letter-spacing:-.03em}
.hero .expand{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.3;max-width:30ch;margin-bottom:1.5rem}
.hero .expand b{color:var(--sonar);font-weight:800}
.partners{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;color:var(--muted);font-size:.95rem}
.partners strong{color:var(--ink)}
.plus{display:inline-block;width:14px;height:14px;position:relative;margin:0 .1rem}
.plus::before,.plus::after{content:"";position:absolute;background:var(--plum)}
.plus::before{left:5px;top:0;width:4px;height:14px}.plus::after{top:5px;left:0;width:14px;height:4px}
.sonar-hero{position:relative;aspect-ratio:1;max-width:420px;justify-self:end;width:100%}
.sonar-hero svg{width:100%;height:auto}
.arc{fill:none;stroke:var(--sonar);stroke-width:6;stroke-linecap:round;opacity:0;animation:arc 2.8s ease-out infinite}
.arc:nth-of-type(2){animation-delay:.45s}.arc:nth-of-type(3){animation-delay:.9s}
@keyframes arc{0%{opacity:0}15%{opacity:.9}100%{opacity:0}}
.hero-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:999px;background:var(--sunk);font-size:.9rem;color:var(--ink)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--sonar);display:inline-block}

/* 1 what */
.two{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.def{border-left:4px solid var(--sonar);padding-left:1.25rem}
.acr{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:1.25rem 0;font-size:1rem}
.acr b{font-family:var(--display);font-size:1.4rem;color:var(--sonar);line-height:1.2}
.acr span{align-self:center}
.icp-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.5rem}
.mk{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.mk figure{margin:0;flex:1 1 140px;text-align:center}
.mk figcaption{font-size:.88rem;color:var(--muted);margin-top:.4rem}

/* 2 objectives */
.goal{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.35;max-width:46ch;margin-bottom:2rem}
.goal em{font-style:normal;background:linear-gradient(transparent 62%,var(--sonar-soft) 62%)}
.objs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:2px solid var(--ink)}
.objs li{padding:1.1rem 1.1rem 1.25rem 0;border-bottom:1px solid var(--line)}
.objs li b{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.3rem}
.objs li span{font-size:.95rem;color:var(--muted)}

/* 3 problem */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0}
.stat{padding:1.1rem 0;border-top:3px solid var(--plum)}
.stat b{display:block;font-family:var(--display);font-size:2.4rem;font-weight:800;line-height:1;margin-bottom:.4rem}
.stat span{font-size:.92rem;color:var(--muted);display:block}
.chain{display:flex;align-items:stretch;gap:0;margin:1.5rem 0 1rem;flex-wrap:wrap}
.chain div{flex:1 1 160px;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);position:relative}
.chain div:first-child{border-radius:14px 0 0 14px}.chain div:last-child{border-radius:0 14px 14px 0;background:var(--plum-soft);border-color:transparent}
.chain b{display:block;font-family:var(--display);margin-bottom:.2rem}
.chain span{font-size:.93rem;color:var(--muted)}

/* 4 compare */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:820px;font-size:.95rem}
th,td{padding:.8rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--display);font-size:1rem;background:var(--sunk)}
thead th small{display:block;font-family:var(--body);font-weight:400;color:var(--muted);font-size:.8rem}
tbody th{font-weight:700;width:17%}
tr:last-child td,tr:last-child th{border-bottom:none}
.col-rupic{background:var(--sonar-soft)}
thead .col-rupic{background:var(--sonar);color:#fff}
thead .col-rupic small{color:#E9F7FC}
.y,.n,.p{display:inline-flex;align-items:center;gap:.35rem;font-weight:700}
.y::before{content:"✓";color:var(--ok)}.n::before{content:"✕";color:var(--alert)}.p::before{content:"◐";color:var(--sun)}
.adv{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;margin-top:2rem}
.adv div{border-left:3px solid var(--sonar);padding-left:1rem}
.note{font-size:.88rem;color:var(--muted);margin-top:1rem;font-style:italic}

/* 5 impact */
.sdg{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.sdg div{display:flex;gap:.8rem;align-items:center;padding:.7rem 1.1rem .7rem .7rem;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.sdg b{display:grid;place-items:center;width:3rem;height:3rem;border-radius:10px;color:#fff;font-family:var(--display);font-size:1.3rem}
.ben{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ben div{background:var(--surface);padding:1.3rem}
.ben .who{font-size:.85rem;color:var(--plum);font-weight:700;margin-bottom:.3rem;display:block}

/* 6 timeline */
.trl{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:1.5rem 0 .5rem}
.trl div{height:46px;border-radius:6px;background:var(--sunk);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--muted);position:relative}
.trl .now{background:var(--plum);color:#fff}
.trl .y1{background:var(--sonar-soft);color:var(--ink)}
.trl .y2{background:var(--sonar);color:#fff}
.trl-legend{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.88rem;color:var(--muted);margin-bottom:2rem}
.trl-legend span{display:inline-flex;align-items:center;gap:.4rem}
.trl-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)}
.steps li{position:relative;padding:0 0 1.8rem 2.6rem}
.steps li::before{content:"";position:absolute;left:3px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--surface);border:3px solid var(--sonar)}
.steps li.cur::before{background:var(--plum);border-color:var(--plum)}
.steps .when{font-family:var(--display);font-weight:700;color:var(--sonar);font-size:.95rem}
.steps li.cur .when{color:var(--plum)}
.steps h3{margin:.1rem 0 .4rem}
.steps ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.96rem}

/* 7 team */
.orgs{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}
.org{padding:1.4rem;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.org h3{font-size:1.4rem}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.person{display:grid;grid-template-columns:56px 1fr;gap:1rem;align-items:start}
.av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.2rem;color:#fff}
.person b{display:block;font-family:var(--display);font-size:1.1rem}
.person .role{color:var(--sonar);font-size:.9rem;font-weight:700;display:block;margin-bottom:.3rem}
.person p{font-size:.93rem;color:var(--muted);margin:0}

/* 8 prototype */
.proto{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:1.5rem;display:grid;grid-template-columns:1.15fr .85fr;gap:1.5rem}
.stage{position:relative;background:var(--sunk);border-radius:18px;padding:.5rem}
.stage svg{display:block;width:100%;height:auto}
.hot{cursor:pointer}
.hot:focus{outline:none}
.hot:focus-visible .hot-ring,.hot.sel .hot-ring{stroke:var(--plum);stroke-width:3;stroke-dasharray:6 5}
.ping{fill:none;stroke:var(--sonar);stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center}
.pod.on .ping{animation:ping 1.1s ease-out infinite}
.pod.on .ping:nth-of-type(2){animation-delay:.35s}
@keyframes ping{0%{transform:scale(.4);opacity:.95}100%{transform:scale(3.4);opacity:0}}
.pod .star{fill:var(--shell);stroke:var(--shell-edge);stroke-width:2.5;transition:fill .2s}
.pod.on .star{fill:var(--sonar)}
.led{fill:var(--line);transition:fill .2s}
.led.on{fill:var(--sonar)}.led.saved{fill:var(--ok)}
.controls{display:flex;flex-direction:column;gap:1rem}
.ctl-group{display:flex;flex-direction:column;gap:.4rem}
.ctl-label{font-size:.88rem;color:var(--muted);font-weight:700}
.seg{display:flex;background:var(--sunk);padding:4px;border-radius:12px;gap:4px}
.seg button{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.92rem;padding:.55rem .6rem;border-radius:9px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 0 var(--line);font-weight:700}
.btn{border:0;font:inherit;font-weight:700;padding:.8rem 1rem;border-radius:12px;cursor:pointer;background:var(--sonar);color:#fff;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.btn.alt{background:var(--plum)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn small{font-weight:400;opacity:.85;font-size:.8rem}
.switch{display:flex;align-items:center;gap:.7rem;cursor:pointer;font-size:.95rem}
.switch input{position:absolute;opacity:0}
.switch .tr{width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;flex:none;transition:background .2s}
.switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked+.tr{background:var(--ok)}
.switch input:checked+.tr::after{transform:translateX(18px)}
.switch input:focus-visible+.tr{outline:3px solid var(--sonar);outline-offset:2px}
.log{font-size:.9rem;background:var(--sunk);border-radius:12px;padding:.8rem 1rem;min-height:3.2rem;color:var(--ink)}

/* laptop */
.lap-row{grid-column:1/-1;display:grid;grid-template-columns:1.25fr .75fr;gap:1.5rem;align-items:start}
.laptop{max-width:760px}
.screen{background:#0F1A2E;border:10px solid #2B3550;border-bottom-width:14px;border-radius:16px 16px 4px 4px;color:#E5EEF8;padding:1rem;min-height:300px;font-size:.9rem;cursor:pointer;position:relative}
.screen.sel{box-shadow:0 0 0 3px var(--plum)}
.base{height:16px;background:#3A4563;border-radius:0 0 18px 18px;margin:0 -2%;position:relative}
.base::after{content:"";position:absolute;left:42%;right:42%;top:0;height:6px;background:#283048;border-radius:0 0 8px 8px}
.app-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding-bottom:.6rem;border-bottom:1px solid #2A3A58;margin-bottom:.8rem;flex-wrap:wrap}
.app-top b{font-family:var(--display);font-size:1rem}
.pill{font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:#24324F;color:#B9C8DE}
.pill.ok{background:#164C3A;color:#8FF0C3}.pill.off{background:#4A2530;color:#FFB3BF}
.app-body{display:grid;grid-template-columns:1fr 170px;gap:1rem}
.trace-row{display:grid;grid-template-columns:2.2rem 1fr;align-items:center;gap:.4rem;font-size:.72rem;color:#8EA3C4}
.trace-row svg{height:26px;width:100%}
.flow{display:flex;gap:.4rem;margin:.6rem 0;flex-wrap:wrap}
.flow span{font-size:.75rem;padding:.2rem .55rem;border-radius:6px;background:#1D2A44;color:#7F93B3}
.flow span.done{background:#1C4A63;color:#BFEAFF}
.result{margin-top:.6rem;padding:.6rem .7rem;border-radius:8px;background:#1A2640;font-size:.85rem;line-height:1.45}
.result.warn{background:#4A2030;color:#FFD3DA}
.result.good{background:#173F33;color:#C6F5DF}
.map-cap{font-size:.72rem;color:#8EA3C4;text-align:center;margin-top:.3rem}
.legend-bar{height:8px;border-radius:4px;background:linear-gradient(90deg,#2E7FB8,#F2B33D,#E5484D);margin-top:.4rem}
.legend-txt{display:flex;justify-content:space-between;font-size:.68rem;color:#8EA3C4}
.empty{color:#7F93B3;display:grid;place-items:center;min-height:220px;text-align:center}
.info{border-left:4px solid var(--plum);padding:.2rem 0 .2rem 1.1rem}
.info .mod{font-size:.85rem;font-weight:700;color:var(--plum)}
.info ul{padding-left:1.1rem;margin:.5rem 0 0;font-size:.94rem;color:var(--muted)}
.specs{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;border-top:1px solid var(--line);padding-top:1.25rem}
.specs div{font-size:.93rem}
.specs b{display:block;font-family:var(--display)}
.disclaimer{grid-column:1/-1;font-size:.85rem;color:var(--muted);font-style:italic;margin:0}

footer{max-width:1180px;margin:0 auto;padding:2rem 1.25rem 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width:900px){
  .hero,.two,.proto,.lap-row,.orgs{grid-template-columns:1fr}
  .sonar-hero{justify-self:center;max-width:300px}
  .stats{grid-template-columns:1fr 1fr}
  .sec-head{grid-template-columns:1fr;gap:.3rem}
  .sec-num{font-size:2.2rem}
}
@media (max-width:560px){
  .app-body{grid-template-columns:1fr}
  .trl div{height:38px;font-size:.8rem}
}