:root{
  --bg:#0E2B4E; --bg-2:#123360; --panel:#163A6B; --panel-2:#1B4276;
  --line:rgba(208,226,245,0.20); --line-2:rgba(208,226,245,0.09);
  --text:#EAF2FB; --muted:#A2B7D4; --faint:#5E7A9C;
  --amber:#FFBE3A; --amber-dim:#8A6312; --cyan:#62E6D6; --red:#FF6F5C;
  --maxw:1240px; --pad:clamp(20px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Golos Text",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(208,226,245,0.05) 1px,transparent 1px) 0 0/100% 24px,
    linear-gradient(90deg,rgba(208,226,245,0.05) 1px,transparent 1px) 0 0/24px 100%,
    linear-gradient(rgba(208,226,245,0.11) 1px,transparent 1px) 0 0/100% 120px,
    linear-gradient(90deg,rgba(208,226,245,0.11) 1px,transparent 1px) 0 0/120px 100%,
    radial-gradient(120% 80% at 50% -12%, rgba(130,180,230,0.12), transparent 60%),
    radial-gradient(90% 60% at 12% 112%, rgba(255,190,58,0.05), transparent 55%);}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.arch{font-family:"Archivo",sans-serif}
a{color:inherit;text-decoration:none}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(14,43,78,0.80);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:13px}
.logo img{height:30px;width:auto;mix-blend-mode:screen}
.logo .fallback{font-family:"Archivo",sans-serif;font-weight:900;letter-spacing:-0.02em;font-size:1.05rem;text-transform:uppercase}
.logo .fallback b{color:var(--amber)}
.nav-links{display:flex;gap:clamp(14px,2.4vw,32px);align-items:center}
.nav-links a{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:0.12em;font-size:0.7rem;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--amber)}
.nav-cta{border:1px solid var(--amber);color:var(--amber)!important;padding:8px 14px;border-radius:2px}
.nav-cta:hover{background:var(--amber);color:#0B0E13!important}
@media(max-width:820px){.nav-links a:not(.nav-cta){display:none}}

/* hero */
.hero{padding:clamp(56px,11vh,120px) 0 clamp(30px,5vh,60px)}
.kick{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:30px;opacity:0;animation:rise .7s .05s forwards}
.kick span{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:0.14em;font-size:0.7rem;color:var(--faint)}
.kick span b{color:var(--amber);font-weight:500}
h1{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(2.6rem,7.2vw,6rem);line-height:0.96;letter-spacing:-0.025em;max-width:16ch}
h1 .l{display:block;opacity:0;animation:rise .85s forwards}
h1 .l:nth-child(1){animation-delay:.12s} h1 .l:nth-child(2){animation-delay:.24s}
h1 .am{color:var(--amber)}
.hero-sub{margin-top:30px;max-width:54ch;font-size:1.12rem;color:var(--muted);opacity:0;animation:rise .9s .5s forwards}
.hero-sub b{color:var(--text);font-weight:500}
.pstrip{margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;opacity:0;animation:rise .9s .66s forwards}
.pstrip a{background:var(--bg-2);padding:22px 22px 26px;display:block;transition:background .25s}
.pstrip a:hover{background:var(--panel)}
.pstrip .n{font-family:"JetBrains Mono",monospace;font-size:0.7rem;color:var(--amber);letter-spacing:0.1em}
.pstrip .t{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.18rem;margin-top:12px;letter-spacing:-0.01em}
.pstrip .d{color:var(--muted);font-size:0.9rem;margin-top:8px}
@media(max-width:760px){.pstrip{grid-template-columns:1fr}}

/* page header (interior pages) */
.phead{padding:clamp(54px,9vh,110px) 0 clamp(20px,4vh,40px)}
.phead h1{font-size:clamp(2.3rem,6vw,4.6rem);max-width:20ch}
.phead .intro{margin-top:24px;max-width:60ch;color:var(--muted);font-size:1.1rem}

/* section frame */
section{position:relative;z-index:1}
.block{padding:clamp(60px,10vh,120px) 0;border-top:1px solid var(--line)}
.sec-tag{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sec-tag .bar{width:30px;height:2px;background:var(--amber)}
.sec-tag span{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:0.18em;font-size:0.72rem;color:var(--amber)}
.sec-title{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-0.02em;line-height:1.05;max-width:22ch}
.lead-para{margin-top:26px;max-width:60ch;color:var(--muted);font-size:1.08rem}
.lead-para b{color:var(--text);font-weight:500}

/* pain */
.symp{margin-top:38px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.symp div{background:var(--bg-2);padding:20px;border-left:2px solid var(--red);font-size:0.98rem;color:var(--text)}

/* grids of cells */
.grid4{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.grid5{margin-top:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cell{background:var(--bg-2);padding:24px 20px 28px}
.cell .s{font-family:"JetBrains Mono",monospace;color:var(--amber);font-size:0.7rem;letter-spacing:0.1em}
.cell h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.08rem;margin:12px 0 8px;letter-spacing:-0.01em}
.cell p{color:var(--muted);font-size:0.88rem}
@media(max-width:900px){.grid4,.grid5{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.grid4,.grid5{grid-template-columns:1fr}}

/* clients strip */
.clients{margin-top:46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;display:flex;gap:clamp(14px,2.6vw,34px);flex-wrap:wrap;align-items:center}
.clients .lbl{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:0.14em;font-size:0.66rem;color:var(--faint)}
.clients .nm{font-family:"Archivo",sans-serif;font-weight:700;font-size:0.98rem;color:var(--text);opacity:0.85}

/* products */
.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,68px);align-items:center;padding:clamp(48px,8vh,92px) 0;border-top:1px solid var(--line)}
.product:nth-child(even) .pcopy{order:2}
.pnum{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(3rem,8vw,6rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line);letter-spacing:-0.03em}
.pname{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-0.02em;line-height:1.02;margin-top:6px}
.pname .am{color:var(--amber)}
.ptag{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:0.12em;font-size:0.72rem;color:var(--muted);margin-top:18px}
.pbody{margin-top:18px;color:var(--muted);font-size:1.05rem;max-width:46ch}
.pbody b{color:var(--text);font-weight:500}
.pfeat{margin-top:22px;display:flex;flex-direction:column;gap:0}
.pfeat div{padding:11px 0;border-top:1px solid var(--line-2);font-size:0.92rem;color:var(--text);display:flex;gap:12px}
.pfeat div::before{content:"▸";color:var(--amber);font-size:0.8rem;line-height:1.7}
.inst{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:20px;box-shadow:0 24px 60px -30px rgba(0,0,0,0.8)}
.inst .ihead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.inst .ihead .lbl{font-family:"JetBrains Mono",monospace;font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint)}
.inst .ihead .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.calc-row .k{font-family:"JetBrains Mono",monospace;font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
.calc-row .v{font-family:"Archivo",sans-serif;font-weight:800;color:var(--amber)}
input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:var(--line);border-radius:3px;outline:none;margin:14px 0 26px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--amber);cursor:pointer;box-shadow:0 0 0 4px rgba(255,176,32,0.15)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--amber);cursor:pointer}
.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.calc-out .c{background:var(--bg-2);padding:16px 14px;text-align:center}
.calc-out .c .num{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.9rem;color:var(--text);letter-spacing:-0.02em}
.calc-out .c .cap{font-family:"JetBrains Mono",monospace;font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.note{font-family:"JetBrains Mono",monospace;font-size:0.6rem;color:var(--faint);margin-top:14px;letter-spacing:0.04em}
canvas{display:block;width:100%;border-radius:3px}
.gauge-wrap{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.gstat div{margin-bottom:12px}
.gstat .k{font-family:"JetBrains Mono",monospace;font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint)}
.gstat .v{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.5rem}
.gstat .v.ok{color:var(--cyan)} .gstat .v.am{color:var(--amber)}
.simctl{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.simctl button{font-family:"JetBrains Mono",monospace;font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--muted);padding:9px 14px;border-radius:2px;cursor:pointer;transition:all .2s}
.simctl button:hover{border-color:var(--amber);color:var(--amber)}
.simctl button.on{background:var(--amber);border-color:var(--amber);color:#0B0E13}
@media(max-width:860px){.product{grid-template-columns:1fr}.product:nth-child(even) .pcopy{order:0}}

/* approach */
.stat{margin-top:40px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:4px;padding:30px clamp(22px,4vw,40px)}
.stat .big{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(3.4rem,9vw,5.5rem);color:var(--amber);line-height:0.9;letter-spacing:-0.03em}
.stat p{color:var(--text);font-size:1.05rem;max-width:48ch}
.stat p span{color:var(--faint);font-size:0.82rem;display:block;margin-top:6px;font-family:"JetBrains Mono",monospace;letter-spacing:0.04em}
@media(max-width:620px){.stat{grid-template-columns:1fr;gap:10px}}
.tools{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.tools span{font-family:"JetBrains Mono",monospace;font-size:0.72rem;letter-spacing:0.06em;color:var(--muted);border:1px solid var(--line);padding:8px 14px;border-radius:2px}
.tools span b{color:var(--amber);font-weight:500}

/* services */
.svc-group{margin-top:54px}
.svc-group h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-0.01em;display:flex;align-items:center;gap:14px}
.svc-group h3::before{content:"";width:22px;height:2px;background:var(--amber)}
.svc-list{margin-top:22px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.svc-item{background:var(--bg-2);padding:22px 22px 24px}
.svc-item h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.04rem;letter-spacing:-0.01em;margin-bottom:8px}
.svc-item p{color:var(--muted);font-size:0.9rem}
@media(max-width:720px){.svc-list{grid-template-columns:1fr}}

/* about stats + timeline */
.stats3{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.stats3 .st{background:var(--bg-2);padding:34px 26px}
.stats3 .st .n{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(2.4rem,5vw,3.4rem);color:var(--amber);letter-spacing:-0.03em;line-height:1}
.stats3 .st .c{color:var(--muted);font-size:0.95rem;margin-top:10px}
@media(max-width:720px){.stats3{grid-template-columns:1fr}}
.tl{margin-top:50px;border-left:2px solid var(--line);padding-left:0}
.tl .ev{position:relative;padding:0 0 30px 30px;border-left:2px solid var(--line);margin-left:0}
.tl .ev::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--bg)}
.tl .ev .yr{font-family:"JetBrains Mono",monospace;font-size:0.72rem;letter-spacing:0.1em;color:var(--faint)}
.tl .ev .cl{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.15rem;margin:4px 0 6px;letter-spacing:-0.01em}
.tl .ev .ds{color:var(--muted);font-size:0.94rem;max-width:62ch}

/* closing */
.closing-big{font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.22;letter-spacing:-0.015em;max-width:24ch}
.closing-big .am{color:var(--amber)}

/* contact */
.contact{padding:clamp(64px,12vh,140px) 0}
.contact h2{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(2.2rem,6vw,4.6rem);letter-spacing:-0.025em;line-height:0.98;max-width:18ch}
.contact h2 .am{color:var(--amber)}
.clines{margin-top:46px;display:grid;grid-template-columns:repeat(3,auto);gap:clamp(22px,5vw,72px);justify-content:start}
.clines .k{font-family:"JetBrains Mono",monospace;font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.clines a{font-size:1.1rem;border-bottom:1px solid transparent;transition:border-color .2s}
.clines a:hover{border-color:var(--amber)}
@media(max-width:620px){.clines{grid-template-columns:1fr;gap:22px}}

footer{border-top:1px solid var(--line);padding:30px 0 50px;position:relative;z-index:1}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
footer .mono{color:var(--faint);font-family:"JetBrains Mono",monospace;font-size:0.7rem;letter-spacing:0.06em}
footer .links{display:flex;gap:22px;flex-wrap:wrap}
footer .links a{font-family:"JetBrains Mono",monospace;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
footer .links a:hover{color:var(--amber)}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* long-form articles (analytics) */
.article{max-width:780px}
.article h2{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.4rem,2.8vw,1.9rem);letter-spacing:-0.015em;margin:48px 0 14px;display:flex;align-items:center;gap:12px}
.article h2 .ix{font-family:"JetBrains Mono",monospace;font-size:0.8rem;color:var(--amber);font-weight:500}
.article p{color:var(--muted);font-size:1.07rem;margin-bottom:18px}
.article p b{color:var(--text);font-weight:500}
.article ul{margin:0 0 20px 0;padding:0;list-style:none}
.article li{color:var(--muted);font-size:1.04rem;padding:7px 0 7px 24px;position:relative}
.article li::before{content:"▸";color:var(--amber);position:absolute;left:0;top:7px;font-size:0.8rem}
.article .src{font-family:"JetBrains Mono",monospace;font-size:0.62rem;color:var(--faint);letter-spacing:0.06em;margin-top:8px}
.toc{margin-top:36px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.toc a{background:var(--bg-2);padding:16px 18px;display:flex;gap:12px;align-items:baseline;transition:background .2s}
.toc a:hover{background:var(--panel)}
.toc a .ix{font-family:"JetBrains Mono",monospace;font-size:0.7rem;color:var(--amber)}
.toc a .nm{font-family:"Archivo",sans-serif;font-weight:700;font-size:0.98rem;color:var(--text)}
@media(max-width:600px){.toc{grid-template-columns:1fr}}