/* Osmolog — one-person landing page. Calm dark, two accent colours, no glow theatre. */

@font-face{font-family:Manrope;src:url("./assets/fonts/manrope.woff2")format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("./assets/fonts/ibm-plex-mono-400.woff2")format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("./assets/fonts/ibm-plex-mono-600.woff2")format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#0B0F0D; --bg2:#0E1412; --panel:#131A17; --panel2:#171F1B;
  --line:#212C27; --line2:#2A3830;
  --tx:#E9F1EC; --mu:#93A79D; --dim:#6B7D74;
  --green:#2ECC71; --green-d:#1E8A4B; --amber:#F39C12;
  --sans:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-.022em;line-height:1.12;font-weight:700}
p{margin:0}
.wrap{width:min(1280px,calc(100% - 56px));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;padding:10px 16px;background:var(--green);color:#04140B;border-radius:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:30;background:rgba(11,15,13,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;height:66px}
.brand img{height:26px;width:auto}
.hdr-nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--mu)}
.hdr-nav a{text-decoration:none}
.hdr-nav a:hover{color:var(--tx)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:10px;background:var(--green);color:#04140B;
  font-weight:700;font-size:15px;text-decoration:none;border:0;
  transition:background .16s ease,transform .16s ease}
.btn:hover{background:#3ADB7F;transform:translateY(-1px)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:9px}
.btn-lg{padding:15px 28px;font-size:16.5px}
.btn-text{color:var(--mu);font-size:15px;text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:2px}
.btn-text:hover{color:var(--tx);border-color:var(--green)}
.kicker{display:block;margin-bottom:14px;color:var(--green);font:600 12px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(44px,4.4vw,78px) 0 clamp(52px,5vw,84px);
  background:radial-gradient(120% 90% at 18% 0%,rgba(46,204,113,.07),transparent 62%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,3.4vw,64px);align-items:center}
.note{position:relative;margin:0 0 26px;padding-left:16px;border-left:2px solid var(--green);
  color:var(--mu);font-size:15px;line-height:1.5;max-width:34ch}
.hero-copy h1{font-size:clamp(38px,3.65vw,60px);font-weight:780;letter-spacing:-.034em}
.hero-copy h1 span{color:var(--green)}
.lede{margin-top:20px;max-width:46ch;color:var(--mu);font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.62}
.facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;margin:26px 0 0;padding:0;
  font:400 13.5px/1.45 var(--sans);color:#B6C9BF}
.facts li{position:relative;padding-left:17px}
.facts li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--green-d)}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:32px;flex-wrap:wrap}

/* ---------- app mock ---------- */
.hero-app{border:1px solid var(--line);border-radius:18px;background:var(--bg2);
  padding:0 0 16px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.app-chrome{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line);
  background:#101715}
.app-chrome span{width:9px;height:9px;border-radius:50%;background:#26332C}
.app-chrome em{margin-left:10px;color:var(--dim);font:400 11.5px/1 var(--mono);font-style:normal}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.kpi{background:var(--bg2);padding:14px 16px}
.kpi small{display:block;color:var(--dim);font:600 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.kpi b{display:block;margin:8px 0 5px;font-size:clamp(19px,1.5vw,25px);font-weight:750;letter-spacing:-.03em}
.kpi b em{color:var(--dim);font-style:normal;font-weight:600;font-size:.62em}
.kpi i{font-style:normal;font-size:11.5px;color:var(--dim);line-height:1.35;display:block}
.kpi i.up{color:var(--green)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.chart-panel{margin:16px 16px 0;padding:16px 16px 10px}
.panel-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.panel-hd h2{font-size:15px;font-weight:700}
.panel-hd p{color:var(--dim);font-size:12.5px;margin-top:3px}
.legend{display:flex;gap:6px;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line2);color:var(--dim);
  font:600 11.5px/1 var(--sans);transition:.16s}
.lg i{width:9px;height:9px;border-radius:3px;background:currentColor;opacity:.45}
.lg[data-series=active]{--c:var(--green)} .lg[data-series=passive]{--c:var(--amber)} .lg[data-series=prev]{--c:#7C8F85}
.lg.is-on{color:var(--c);border-color:color-mix(in srgb,var(--c) 42%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent)}
.lg.is-on i{opacity:1}
.lg:hover{color:var(--c);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.chart-wrap{position:relative;margin-top:12px}
.chart{width:100%;height:clamp(160px,15vw,225px);overflow:visible}
.chart-hint{margin-top:2px;color:var(--dim);font:400 11px/1 var(--mono);text-align:right}
.tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-112%);
  background:#0A100E;border:1px solid var(--line2);border-radius:9px;padding:8px 11px;
  font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:0 10px 24px -12px #000}
.tip b{display:block;color:var(--mu);font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.tip u{text-decoration:none;display:flex;justify-content:space-between;gap:14px}
.tip u s{text-decoration:none;color:var(--dim)}
.mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 16px 0}
.mini{padding:14px}
.mini h3{font-size:12.5px;font-weight:700;color:var(--mu)}
.bars{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.bars li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}
.bars span{font-size:12px;color:#BCCEC4}
.bars b{font:600 11.5px/1 var(--mono);color:var(--mu)}
.bars i{grid-column:1/-1;height:5px;border-radius:99px;background:#1D2621;position:relative}
.bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;background:var(--green-d)}
.bars.src i::after{background:linear-gradient(90deg,var(--green-d),var(--green))}
.donut-row{display:flex;align-items:center;gap:14px;margin-top:12px}
.donut{width:86px;height:86px;flex:0 0 auto;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:5.2;stroke-linecap:butt}
.d-track{stroke:#1D2621} .d-a{stroke:var(--green)} .d-p{stroke:var(--amber)}
.donut-row dl{margin:0;display:grid;gap:9px}
.donut-row dt{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.k-a{color:var(--green)} .k-p{color:var(--amber)}
.donut-row dd{margin:3px 0 0;font-size:14px;font-weight:650}
.donut-row dd em{font-style:normal;color:var(--dim);font-weight:500;font-size:12px;margin-left:7px}

/* ---------- bands ---------- */
.band{padding:clamp(64px,6vw,104px) 0;border-top:1px solid var(--line);background:var(--bg2)}
.band-last{background:var(--bg)}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(34px,4vw,76px)}
.story h2{font-size:clamp(27px,2.3vw,38px);margin-bottom:20px;max-width:16ch}
.story p{color:var(--mu);font-size:16.5px;line-height:1.68;margin-bottom:15px;max-width:52ch}
.sig{color:var(--dim)!important;font-size:15px!important;margin-top:22px!important}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:20px}
.steps li{counter-increment:s;position:relative;padding-left:44px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  width:29px;height:29px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line2);color:var(--green);font:600 11px/1 var(--mono)}
.steps b{display:block;font-size:16.5px;font-weight:700}
.steps p{margin-top:5px;color:var(--mu);font-size:15px;line-height:1.6}
.t-a{color:var(--green)} .t-p{color:var(--amber)}
.shot{margin:28px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.shot img{width:100%;height:auto}
.shot figcaption{padding:10px 14px;border-top:1px solid var(--line);color:var(--dim);
  font:400 12px/1 var(--mono)}

/* ---------- accordion ---------- */
.more-h{font-size:clamp(27px,2.3vw,38px);margin-bottom:34px}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;cursor:pointer;list-style:none;font-size:clamp(18px,1.5vw,23px);font-weight:700;
  letter-spacing:-.02em;transition:color .16s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--green)}
.acc summary i{position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line2);transition:.2s}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;inset:50% 5px auto;height:1.5px;
  background:var(--mu);transform:translateY(-50%);transition:.2s}
.acc summary i::after{transform:translateY(-50%) rotate(90deg)}
.acc details[open] summary{color:var(--green)}
.acc details[open] summary i{border-color:var(--green)}
.acc details[open] summary i::after{opacity:0}
.acc details[open] summary i::before{background:var(--green)}
.acc-body{display:grid;grid-template-columns:1fr 1fr;gap:26px 44px;padding:2px 4px 32px}
.acc-body h4{font-size:15px;margin-bottom:7px}
.acc-body h4 em{margin-left:8px;padding:3px 8px;border-radius:99px;font-style:normal;
  background:rgba(46,204,113,.11);color:var(--green);font:600 9.5px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}
.acc-body p{color:var(--mu);font-size:15px;line-height:1.65}

/* ---------- close + footer ---------- */
.close{margin-top:clamp(56px,5vw,92px);padding:clamp(40px,4vw,64px) 32px;text-align:center;
  border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(90% 140% at 50% 0%,rgba(46,204,113,.09),transparent 68%),var(--panel)}
.close h2{font-size:clamp(30px,2.7vw,44px)}
.close p{margin:14px auto 26px;max-width:44ch;color:var(--mu);font-size:16.5px}
.close small{display:block;margin-top:16px;color:var(--dim);font:400 12.5px/1 var(--mono)}
.ftr{border-top:1px solid var(--line);padding:26px 0}
.ftr-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  color:var(--dim);font-size:13.5px}
.ftr nav{display:flex;gap:22px}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--tx)}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .hero-grid,.two{grid-template-columns:minmax(0,1fr)}
  .hero-copy{max-width:640px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  .wrap{width:calc(100% - 34px)}
  .mini-row{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .acc-body{grid-template-columns:1fr;gap:22px}
  .hdr-nav{display:none}
  .kpi b{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- additions: language chip, works line, layered figure ---------- */
.lang-pick{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--line2);border-radius:7px;
  color:var(--mu);font:600 11px/1 var(--sans)}
.lang-pick s{text-decoration:none;color:var(--dim);font-size:9px}
.works{margin-top:18px;color:var(--dim);font-size:13.5px}

/* One composite proof shot: real video, real badge, real popup, and the toolbar
   icon it came from, so the causal chain is obvious at a glance. */
.shot{margin:30px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel);box-shadow:0 30px 64px -34px rgba(0,0,0,.9)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{padding:12px 15px;border-top:1px solid var(--line);color:var(--dim);
  font:400 12.5px/1.5 var(--sans)}
}
.acc-body em.plain{margin:0;padding:0;background:none;color:var(--tx);font-style:normal;
  font-weight:600;font-size:inherit;letter-spacing:0;text-transform:none;vertical-align:baseline}

/* ---------- additions: hero eyebrow, asymmetric facts, transition strip ---------- */

/* Small green line above the headline. Replaces the old bordered .note block,
   which was one more box in an already crowded hero column. */
.eyebrow{margin:0 0 16px;color:var(--tx);font:650 13.5px/1.45 var(--sans)}

/* Two short facts, then one long one spanning both columns. The uneven shape is
   deliberate: four identical bullets read as a template, 2+1 reads as a choice. */
.facts li:nth-child(3){grid-column:1/-1;max-width:54ch}

/* Quiet full-width strip between the hero and the story. It carries the only
   piece of personality above the fold and hands off into "Why it exists", so it
   shares that band's background and suppresses its border to read as one block. */
/* An aside sitting in a gap in the divider rule, not a statement. Quiet on
   purpose: same weight and colour throughout, italic lead-in, no bold. */
.creed{background:var(--bg2);padding:clamp(28px,2.9vw,46px) 0}
.creed + .band{border-top:0}
.creed-in{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.creed .rule{flex:1 1 40px;height:1px;background:var(--line)}
.creed p{margin:0;flex:0 1 auto;text-align:center;color:var(--mu);
  font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.55}
.creed i{font-style:italic}
@media (max-width:720px){.creed .rule{display:none}}

/* Attention mix has fewer rows than its neighbours, so centre it in the panel
   instead of letting it hang from the top with dead space underneath. */
.mini-donut{display:flex;flex-direction:column}
.mini-donut .donut-row{flex:1 1 auto;justify-content:center}

/* Clicking a chart line focuses its <g>, and the browser draws a focus ring around
   the whole group's bounding box, which looks like a white box over the chart.
   Suppress it for pointer focus, keep a real ring for keyboard users. */
.chart g:focus{outline:none}
.chart g:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}