/* Islandr — Feature page · Night Sea theme */
/* Self-hosted font — SIL OFL licence. See ADR-0010. */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-variable.woff2') format('woff2');
}
:root{
  --navy:#0A1320; --navy-2:#0E1B2A; --panel:#101F30; --panel-2:#13263a;
  --sky-top:#070D16; --sky-mid:#0B1623;
  --teal:#3BBBD2; --teal-deep:#1F94AD; --cyan:#6FD3E8; --glow:#9FECF8;
  --ink:#EAF6F8; --soft:#B6C7D4; --muted:#7C93A4; --faint:#54697A;
  --line:rgba(120,160,185,.16); --line-2:rgba(120,160,185,.10);
  --grotesk:'Space Grotesk',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--grotesk);
     -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---- Night Sea background — fixed sky gradient only, stars are inside hero-scene ---- */
.ns-sky{position:fixed;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 6%, #102032 0%, var(--sky-mid) 40%, var(--sky-top) 100%);}
/* Stars live inside hero-scene so they scroll away naturally with the hero */
.ns-stars{display:none;}
.hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hero-stars .star{position:absolute;border-radius:50%;background:#dff3f8;
  animation:tw var(--d,4s) ease-in-out infinite alternate;}
@keyframes tw{from{opacity:var(--o1,.2);}to{opacity:var(--o2,.85);}}
/* sea, horizon, vignette live inside .hero-scene and scroll with the page */
.ns-sea{display:none;}
.ns-horizon{display:none;}
.ns-vignette{display:none;}

/* hero scene wrapper — contains sky content + scrolling sea */
.hero-scene{position:relative;overflow:hidden;}
.hs-sea{position:absolute;left:0;right:0;bottom:0;height:12%;overflow:hidden;
  background:linear-gradient(180deg,#0A1521 0%,#04080E 100%);}
.hs-horizon{position:absolute;left:0;right:0;bottom:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,211,232,.5),rgba(159,236,248,.85),rgba(111,211,232,.5),transparent);}
.hs-horizon::after{content:"";position:absolute;left:0;right:0;bottom:-46px;height:92px;
  background:radial-gradient(55% 100% at 50% 40%,rgba(59,187,210,.15),transparent 72%);}
.hs-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 105% at 50% 32%,transparent 52%,rgba(0,0,0,.45) 100%);}
.ns-moonpath{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:62%;max-width:560px;height:100%;
  background:linear-gradient(180deg,rgba(159,236,248,.28),rgba(111,211,232,.06) 55%,transparent 85%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);
  filter:blur(7px);mix-blend-mode:screen;opacity:.8;}
.ns-ripples{position:absolute;inset:0;
  background-image:repeating-linear-gradient(180deg,transparent 0 15px,rgba(130,190,210,.045) 15px 16px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
  animation:ns-drift 10s linear infinite;}
@keyframes ns-drift{from{background-position-y:0;}to{background-position-y:16px;}}
.content{position:relative;z-index:2;}

/* ---- Constellation draw-on animation ---- */
.c-line{stroke:var(--teal);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;stroke-dasharray:1;stroke-dashoffset:1;
  animation:c-draw 1.8s cubic-bezier(.6,.05,.25,1) .2s forwards;}
.c-node{fill:var(--teal);opacity:0;animation:c-pop .5s ease forwards;}
@keyframes c-draw{to{stroke-dashoffset:0;}}
@keyframes c-pop{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:scale(1);}}

/* hub star: pop-in then continuous glow-pulse */
.hub-pulse{fill:var(--glow);opacity:0;
  animation:c-pop .55s ease forwards, glow-pulse 1.8s ease-in-out 2s infinite alternate;
  transform-origin:112px 26px;}
.hub-pulse-outer{fill:var(--cyan);opacity:0;
  animation:c-pop .55s ease forwards, glow-pulse-outer 1.8s ease-in-out 2s infinite alternate;
  transform-origin:112px 26px;}
@media(prefers-reduced-motion:reduce){
  .c-line{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.85;}
  .c-node{animation:none;opacity:1;}
  .hub-pulse{animation:none;opacity:1;}
  .hub-pulse-outer{animation:none;opacity:.22;}
}
@keyframes glow-pulse{
  from{opacity:.9;transform:scale(1);}
  to{opacity:1;transform:scale(1.18);filter:drop-shadow(0 0 6px #9FECF8);}
}
@keyframes glow-pulse-outer{
  from{opacity:.22;transform:scale(1);}
  to{opacity:.38;transform:scale(1.22);}
}

/* wordmark water reflection — absolute inside hero-scene, sits at horizon */
.wm-reflect{position:absolute;left:50%;bottom:12%;transform:translateX(-50%) scaleY(-1);
  font-family:var(--grotesk);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(28px,5vw,56px);line-height:1;color:#1f3a47;
  opacity:.18;filter:blur(1.5px);white-space:nowrap;pointer-events:none;z-index:2;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
  mask-image:linear-gradient(180deg,#000,transparent 75%);}
.wm-reflect .r{color:#2a6675;}

/* nav */
nav.top{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(10,19,32,.82),rgba(10,19,32,.45));
  border-bottom:1px solid var(--line-2);}
nav.top .row{display:flex;align-items:center;gap:20px;height:66px;}
nav.top .brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:21px;letter-spacing:-.02em;}
nav.top .brand .r{color:var(--teal);}
nav.top .links{display:flex;gap:26px;margin-left:18px;font-size:14px;color:var(--soft);}
nav.top .links a:hover{color:var(--ink);}
nav.top .spacer{flex:1;}
.btn{font-family:var(--grotesk);font-weight:500;font-size:14px;border-radius:10px;padding:9px 16px;cursor:pointer;
  border:1px solid transparent;transition:.16s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.btn.primary{background:var(--teal);color:#08131c;}
.btn.primary:hover{background:#54cfe3;transform:translateY(-1px);}
.btn.ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--ink);}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal);}
.lang{display:flex;font-size:12px;letter-spacing:.06em;}
.lang button{background:none;border:1px solid var(--line);color:var(--muted);padding:6px 11px;cursor:pointer;
  font-family:var(--grotesk);transition:.16s;}
.lang button:first-child{border-radius:8px 0 0 8px;}
.lang button:last-child{border-radius:0 8px 8px 0;border-left:none;}
.lang button.on{background:rgba(59,187,210,.16);color:var(--ink);border-color:rgba(59,187,210,.4);}

/* hero */
header.hero{position:relative;text-align:center;padding:96px 0 140px;z-index:3;}
.hero .const{width:160px;margin:0 auto 26px;filter:drop-shadow(0 0 24px rgba(59,187,210,.35));}
.hero .const svg{display:block;width:100%;height:auto;overflow:visible;}

@media(prefers-reduced-motion:no-preference){
  .hub-pulse{animation:glow-pulse 1.8s ease-in-out infinite alternate;transform-origin:112px 26px;}
  .hub-pulse-outer{animation:glow-pulse-outer 1.8s ease-in-out infinite alternate;transform-origin:112px 26px;}
}
@keyframes glow-pulse{
  from{opacity:.9;transform:scale(1);}
  to{opacity:1;transform:scale(1.18);filter:drop-shadow(0 0 6px #9FECF8);}
}
@keyframes glow-pulse-outer{
  from{opacity:.22;transform:scale(1);}
  to{opacity:.38;transform:scale(1.22);}
}
.eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin:0 0 18px;}
.hero h1{font-size:clamp(38px,6vw,68px);font-weight:600;letter-spacing:-.03em;line-height:1.04;margin:0 auto 22px;max-width:16ch;}
.hero h1 .r{color:var(--teal);}
.hero p.sub{font-size:clamp(16px,2vw,20px);color:var(--soft);max-width:60ch;margin:0 auto 34px;font-weight:400;}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero .meta{margin-top:30px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  font-size:13px;color:var(--muted);}
.hero .meta b{color:var(--soft);font-weight:500;}

/* section scaffolding */
section{padding:96px 0;position:relative;}
.sec-head{text-align:center;max-width:62ch;margin:0 auto 56px;}
.sec-head .kick{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin:0 0 18px;
  display:inline-flex;align-items:center;gap:10px;}
.sec-head .kick::before,.sec-head .kick::after{content:"";display:block;width:24px;height:1px;background:var(--teal);opacity:.5;}
.sec-head h2{font-size:clamp(28px,4vw,42px);font-weight:600;letter-spacing:-.02em;margin:0 0 16px;line-height:1.1;}
.sec-head p{color:var(--soft);font-size:16.5px;margin:0;line-height:1.7;}
.divider{display:none;}

/* ---- Section depth rhythm ---- */
/* Features: base navy — cards surface from the deep */
#features{background:transparent;}

/* Security band + Architecture: navy-2 — one step elevated */
.nzt-wrap,#architecture{background:var(--navy-2);}
.nzt-wrap{padding:48px 0;}

/* Install: panel — maximum depth for code contrast */
#install{background:var(--panel);}

/* Agentic: navy-2 — returns to mid-deck */
#agentic{background:var(--navy-2);}

/* Section edge treatment: top highlight on elevated sections */
#architecture,#install,#agentic{
  box-shadow:inset 0 1px 0 var(--line);
}
footer.site{box-shadow:inset 0 1px 0 var(--line-2);}

/* not-zero-trust band */
.nzt-band{display:flex;align-items:baseline;gap:18px;border:1px solid var(--line);border-left:2px solid var(--teal);
  border-radius:12px;padding:18px 22px;margin:0 0 0;}
.nzt-band .nzt-label{flex:0 0 auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);white-space:nowrap;}
.nzt-band p{margin:0;font-size:14px;color:var(--soft);line-height:1.6;}
@media(max-width:680px){.nzt-band{flex-direction:column;gap:8px;}}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.feat{background:linear-gradient(180deg,var(--panel),rgba(16,31,48,.5));
  border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:.18s;position:relative;overflow:hidden;}
.feat:hover{border-color:rgba(59,187,210,.42);transform:translateY(-3px);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.7);}
.feat .ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(59,187,210,.12);border:1px solid rgba(59,187,210,.25);margin-bottom:18px;}
.feat .ico svg{width:24px;height:24px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.feat h3{font-size:18.5px;font-weight:600;letter-spacing:-.01em;margin:0 0 9px;}
.feat p{color:var(--soft);font-size:14.5px;margin:0;line-height:1.62;}

/* architecture */
.arch{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
.arch .diagram{background:radial-gradient(120% 120% at 50% 0%, #0e2032, #091523);
  border:1px solid var(--line);border-radius:20px;padding:14px;position:relative;overflow:hidden;}
.arch .diagram svg{display:block;width:100%;height:auto;overflow:visible;}
.arch .steps{display:flex;flex-direction:column;gap:22px;}
.arch .step{display:flex;gap:16px;}
.arch .step .n{flex:0 0 34px;height:34px;border-radius:9px;background:rgba(59,187,210,.12);
  border:1px solid rgba(59,187,210,.3);color:var(--teal);font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center;}
.arch .step h4{margin:4px 0 5px;font-size:17px;font-weight:600;letter-spacing:-.01em;}
.arch .step p{margin:0;color:var(--soft);font-size:14.5px;}
.arch-c4-link{margin:32px 0 0;text-align:center;}
.arch-c4-link a{color:var(--teal);font-weight:500;font-size:14.5px;text-decoration:none;
  border-bottom:1px solid rgba(59,187,210,.3);padding-bottom:2px;transition:.15s;}
.arch-c4-link a:hover,.arch-c4-link a:focus-visible{border-bottom-color:var(--teal);}

/* install */
.install-wrap{max-width:860px;margin:0 auto;}
.tabs{display:flex;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:5px;margin-bottom:18px;flex-wrap:wrap;}
.tabs button{flex:1;min-width:140px;background:none;border:none;color:var(--soft);font-family:var(--grotesk);
  font-size:14px;font-weight:500;padding:11px 14px;border-radius:8px;cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;gap:9px;}
.tabs button .arch-tag{font-size:11px;color:var(--faint);font-family:var(--mono);}
.tabs button.on{background:rgba(59,187,210,.14);color:var(--ink);}
.tabs button.on .arch-tag{color:var(--teal);}
.codeblock{background:#070E18;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.codeblock .cb-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line-2);
  font-size:12.5px;color:var(--muted);}
.codeblock .cb-bar .dot{width:10px;height:10px;border-radius:50%;background:#26384a;}
.codeblock .cb-bar .fname{margin-left:6px;font-family:var(--mono);}
.codeblock .cb-bar .copy{margin-left:auto;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--soft);font-family:var(--grotesk);font-size:12px;padding:5px 11px;border-radius:7px;cursor:pointer;transition:.15s;}
.codeblock .cb-bar .copy:hover{color:var(--teal);border-color:var(--teal);}
.codeblock pre{margin:0;padding:18px 20px;overflow:auto;font-family:var(--mono);font-size:13px;line-height:1.75;color:#CFE2EC;}
.codeblock pre .c{color:#5E7689;}
.codeblock pre .p{color:#6FD3E8;}
.codeblock pre .s{color:#9FD4A8;}
.codeblock pre .f{color:#E7C07B;}
.pane{display:none;}
.pane.on{display:block;}
.install-note{margin-top:18px;font-size:13.5px;color:var(--muted);text-align:center;}
.install-note code{font-family:var(--mono);color:var(--soft);background:rgba(255,255,255,.05);padding:2px 7px;border-radius:5px;}

/* get-started CTA */
.getstarted{margin:34px auto 0;max-width:860px;text-align:center;
  background:radial-gradient(120% 130% at 50% 0%, rgba(59,187,210,.10), rgba(16,31,48,.45));
  border:1px solid rgba(59,187,210,.28);border-radius:18px;padding:36px 28px;}
.getstarted .gs-kick{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 11px;}
.getstarted h3{font-size:clamp(20px,2.6vw,27px);font-weight:600;letter-spacing:-.02em;margin:0 0 22px;line-height:1.15;}
.getstarted .gs-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
.getstarted .gs-open{margin:18px 0 0;font-size:13.5px;color:var(--muted);}
.getstarted .gs-open code{font-family:var(--mono);color:var(--soft);background:rgba(255,255,255,.05);padding:2px 7px;border-radius:5px;}
.wg-note{margin-top:16px;font-size:11.5px;color:var(--faint);line-height:1.55;max-width:70ch;}

/* agentic-coding band */
#agentic .agentic{max-width:880px;margin:0 auto;text-align:center;}
#agentic .kick{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 14px;}
#agentic h2{font-size:clamp(26px,3.6vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0 0 16px;}
#agentic p.lead{color:var(--soft);font-size:16.5px;margin:0 auto 34px;max-width:62ch;}
#agentic .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
#agentic .stat{background:linear-gradient(180deg,var(--panel),rgba(16,31,48,.5));border:1px solid var(--line);border-radius:14px;padding:24px 16px;}
#agentic .stat b{display:block;font-size:36px;font-weight:600;letter-spacing:-.02em;color:var(--cyan);line-height:1;}
#agentic .stat span{display:block;margin-top:9px;font-size:13px;color:var(--muted);line-height:1.4;}
@media(max-width:680px){#agentic .stats{grid-template-columns:1fr 1fr;}}

/* footer */
footer.site{border-top:1px solid var(--line-2);padding:48px 0 60px;margin-top:30px;}
footer.site .frow{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;}
footer.site .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;}
footer.site .brand .r{color:var(--teal);}
footer.site .tagline{color:var(--muted);font-size:13.5px;margin-top:10px;max-width:34ch;}
footer.site .cols{display:flex;gap:54px;flex-wrap:wrap;}
footer.site .col h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 12px;}
footer.site .col a{display:block;color:var(--soft);font-size:14px;margin-bottom:9px;}
footer.site .col a:hover{color:var(--teal);}
footer.site .legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--faint);}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--soft);white-space:nowrap;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:5px 12px;}
.badge .d{width:7px;height:7px;border-radius:50%;background:var(--teal);}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(18px);
  background:var(--teal);color:#08131c;font-weight:500;padding:10px 18px;border-radius:10px;font-size:13px;
  opacity:0;transition:.2s;pointer-events:none;z-index:50;}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:880px){
  .features{grid-template-columns:1fr 1fr;}
  .arch{grid-template-columns:1fr;gap:30px;}
  nav.top .links{display:none;}
  .scenario-compare{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .features{grid-template-columns:1fr;}
  .hero{padding:70px 0 60px;}
  nav.top .brand span.full{display:none;}
}

/* ── Footer extras ──────────────────────────────────────────────────────── */
.foot-badge{margin-top:16px;}
.foot-impressum{color:inherit;opacity:.5;text-decoration:none;font-size:12px;}
.foot-impressum:hover{opacity:.8;}

/* ── Who is this for ───────────────────────────────────────────────────── */
#for-whom{background:var(--navy-2);box-shadow:inset 0 1px 0 var(--line);}
.fw-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.fw-text .kick{margin-bottom:14px;}
.fw-text h2{font-size:clamp(24px,3.2vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0 0 18px;}
.fw-text p{color:var(--soft);font-size:15.5px;line-height:1.72;margin:0 0 14px;}
.fw-pills{display:flex;flex-direction:column;gap:16px;}
.fw-pill{border-radius:14px;padding:22px 24px;border:1px solid;}
.fw-pill--yes{background:rgba(59,187,210,.06);border-color:rgba(59,187,210,.28);}
.fw-pill--no{background:rgba(255,255,255,.025);border-color:var(--line);}
.fp-label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;}
.fw-pill--yes .fp-label{color:var(--teal);}
.fw-pill--no .fp-label{color:var(--faint);}
.fw-pill ul{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:7px;}
.fw-pill li{font-size:14px;line-height:1.5;}
.fw-pill--yes li{color:var(--soft);}
.fw-pill--no li{color:var(--muted);}
@media(max-width:880px){.fw-inner{grid-template-columns:1fr;gap:32px;}}

/* ── Screenshots section ────────────────────────────────────────────────── */
#screenshots{background:var(--panel);box-shadow:inset 0 1px 0 var(--line);}
.ss-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.ss-tabs{display:flex;gap:6px;}
.ss-tabs button{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--soft);
  font-family:var(--grotesk);font-size:14px;font-weight:500;padding:9px 22px;border-radius:8px;
  cursor:pointer;transition:.15s;}
.ss-tabs button.on{background:rgba(59,187,210,.14);border-color:rgba(59,187,210,.4);color:var(--ink);}
.ss-nav{display:flex;align-items:center;gap:12px;}
.ss-arrow{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--soft);
  width:36px;height:36px;border-radius:8px;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;font-family:var(--mono);}
.ss-arrow:hover{border-color:var(--teal);color:var(--teal);}
.ss-counter{font-size:13px;color:var(--muted);font-family:var(--mono);min-width:60px;text-align:center;}
/* carousel: overflow hidden clips the 3 slides, no border/shadow on the wrap itself */
.ss-carousel-wrap{overflow:hidden;}
.ss-carousel{display:flex;transition:transform .38s cubic-bezier(.25,.46,.45,.94);}
/* each slide = 1/3 of wrap width, gap via padding */
.ss-slide{flex:0 0 calc(100% / 3);box-sizing:border-box;padding:0 6px;cursor:pointer;}
.ss-slide:first-child{padding-left:0;}
.ss-slide:last-child{padding-right:0;}
.ss-slide-inner{border-radius:10px;overflow:hidden;border:1px solid var(--line);
  transition:.18s;position:relative;background:var(--navy-2);}
.ss-slide:hover .ss-slide-inner{border-color:rgba(59,187,210,.45);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8);}
.ss-slide img{display:block;width:100%;height:auto;}
/* caption below the image, not overlaid */
.ss-caption{padding:10px 12px 12px;background:var(--navy-2);}
.ss-caption strong{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:3px;}
.ss-caption span{display:block;font-size:12px;color:var(--muted);line-height:1.45;}
/* dots */
.ss-dots{display:flex;justify-content:center;gap:8px;margin-top:18px;}
.ss-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--faint);
  padding:0;cursor:pointer;transition:.2s;}
.ss-dot.on{background:var(--teal);transform:scale(1.25);}
/* lightbox */
.ss-lightbox{display:none;position:fixed;inset:0;z-index:100;
  background:rgba(4,8,14,.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;cursor:zoom-out;}
.ss-lightbox.on{display:flex;}
.ss-lb-inner{max-width:min(1200px,92vw);width:100%;pointer-events:none;}
.ss-lb-img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid rgba(59,187,210,.25);box-shadow:0 40px 100px -20px rgba(0,0,0,.9);}
.ss-lb-caption{margin:14px 0 0;text-align:center;font-size:14px;color:var(--soft);font-family:var(--mono);}
@media(max-width:720px){
  .ss-slide{flex:0 0 50%;padding:0 5px;}
  .ss-slide:first-child{padding-left:0;}
  .ss-slide:last-child{padding-right:0;}
}
@media(max-width:480px){
  .ss-slide{flex:0 0 85%;padding:0 4px;}
  .ss-controls{justify-content:center;}
  .ss-tabs{order:2;}
  .ss-nav{order:1;}
}

/* ── Name story section ─────────────────────────────────────────────────── */
#name{background:var(--navy-2);box-shadow:inset 0 1px 0 var(--line);}
.name-story{max-width:62ch;margin:0 auto;text-align:center;}
.name-story h2{font-size:clamp(24px,3.2vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0 0 22px;}
.name-story p{color:var(--soft);font-size:16px;line-height:1.75;margin:0 0 16px;}
.name-story p:last-child{margin-bottom:0;}
.name-story em{color:var(--teal);font-style:normal;}
.name-story strong{color:var(--ink);font-weight:600;}

/* ── Scenario section ───────────────────────────────────────────────────── */
#scenario{padding:80px 0;}
.scenario-svg{width:100%;max-width:760px;display:block;margin:0 auto;}
.scenario-diagram{margin:40px 0 36px;}
.scenario-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px;}
.sc-card{background:var(--surface,#0A1E2E);border:1px solid #1E4057;border-radius:10px;padding:24px 28px;}
.sc-card--muted{border-color:#132230;opacity:.85;}
.sc-card h4{font-size:14px;font-weight:700;color:#CFE7EE;margin:0 0 14px;letter-spacing:.02em;}
.sc-card ul{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:8px;}
.sc-card li{font-size:14px;color:#7A9DAD;line-height:1.5;}