:root{
  --bg:#E8E5DE; --panel:#F4F2EC; --frame:#E6E2D9; --ink:#13213A; --ink2:#56607A; --muted:#8C93A6; --line:#D9D6CE; --acc:#A9844A;
  --btn:#13213A; --btn-ink:#F4F2EC; --outline:#BFC3CC; --card:rgba(250,248,243,.94); --grid:rgba(19,33,58,.05); --shadow:0 12px 30px rgba(19,33,58,.12);
  color-scheme:light;
}
:root[data-mode="night"]{
  --bg:#141619; --panel:#1C1F23; --frame:#0F1114; --ink:#ECEAE5; --ink2:#A5A29B; --muted:#77746E; --line:#2B2F35; --acc:#E8742E;
  --btn:#ECEAE5; --btn-ink:#15171A; --outline:#3A3F46; --card:rgba(28,31,35,.92); --grid:rgba(255,255,255,.04); --shadow:0 12px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;transition:background .6s,color .6s}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{padding:max(16px,2.8vw);display:flex;flex-direction:column;gap:0}
.hero{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);height:clamp(620px,calc(100vh - 2*max(16px,2.8vw)),860px);background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:background .6s,border-color .6s}
.left{padding:34px 36px 36px 40px;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px}
.logo b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.logo span{font-size:12px;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.copy{margin-top:auto;display:flex;flex-direction:column;gap:18px}
.eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
h1{margin:0;font-size:clamp(38px,3.6vw,52px);line-height:1.02;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.copy p{margin:0;font-size:16px;line-height:1.55;color:var(--ink2)}
.ctas{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap}
.btn{height:48px;padding:0 18px;border-radius:6px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer}
.btn.primary{background:var(--btn);color:var(--btn-ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--outline)}
.right{position:relative;display:flex;flex-direction:column;min-width:0}
nav.top{height:72px;flex:none;padding:0 20px 0 36px;display:flex;align-items:center;gap:32px;font-size:13.5px;color:var(--ink2)}
nav.top a:hover{color:var(--ink)}
.navr{margin-left:auto;display:flex;align-items:center;gap:12px}
.mode{display:flex;padding:3px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line)}
.mode button{width:32px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--ink2);cursor:pointer;display:grid;place-items:center}
.mode button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink)}
.phone{height:38px;padding:0 14px;border-radius:6px;background:var(--btn);color:var(--btn-ink);display:flex;align-items:center;font-weight:500;font-variant-numeric:tabular-nums}
#stage{position:relative;flex:1;margin:0 20px 20px;border-radius:10px;overflow:hidden;background:var(--frame);transition:background .6s}
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:120px 120px}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
#overlay{position:absolute;inset:0;pointer-events:none;z-index:2;transition:opacity .3s}
#overlay svg{color:var(--ink);position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.an{transition:opacity .25s;position:absolute;left:0;top:0;padding:7px 10px;border-radius:8px;background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.an b{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.an span{font-size:11.5px;color:var(--ink2)}
.dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;background:var(--ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--panel) 60%,transparent)}
.live{position:absolute;left:0;top:0;width:230px;padding:11px 13px;border-radius:10px;background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px}
.live .h{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.live .g{display:flex;align-items:center;gap:5px;color:#3D8A5A}.live .g::before{content:"";width:6px;height:6px;border-radius:3px;background:#3D8A5A}
.live b{font-size:14.5px;font-weight:600}
.live .bar{height:4px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.live .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--acc);border-radius:2px;transition:width .6s}
.live small{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.meta{position:absolute;left:18px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:6px;font-size:10.5px;letter-spacing:.12em;color:var(--ink2);pointer-events:none}
.meta .sc{display:flex}.meta .sc i{width:50px;height:5px;border-left:1px solid var(--ink2);border-bottom:1px solid var(--ink2)}.meta .sc i:last-child{border-right:1px solid var(--ink2)}
.meta .coord{font-variant-numeric:tabular-nums}
.hint{position:absolute;right:16px;bottom:14px;z-index:2;font-size:12px;color:var(--ink2);transition:opacity .5s;pointer-events:none}
.hint.gone{opacity:0}
.clients{display:flex;align-items:center;gap:44px;padding:26px 4px;border-bottom:1px solid var(--line);overflow:hidden}
.clients .k{flex:none;font-size:10.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);width:110px;padding-right:22px;border-right:1px solid var(--line)}
.clients .n{display:flex;gap:48px;opacity:.55;font-size:15px;font-weight:600;letter-spacing:.08em;white-space:nowrap}
.tip{position:fixed;left:0;top:0;width:270px;border-radius:12px;padding:14px 16px;z-index:9;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 16px));transition:opacity .15s;background:var(--card);box-shadow:var(--shadow);color:var(--ink)}
.tip.show{opacity:1}
.tip .k{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.tip b{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em;margin:4px 0 2px}
.tip span{display:block;font-size:13.5px;color:var(--ink2);line-height:1.4}
.tip .c{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.panel{position:fixed;top:max(16px,2.8vw);right:max(16px,2.8vw);bottom:max(16px,2.8vw);width:min(400px,calc(100% - 32px));border-radius:14px;z-index:10;padding:24px;display:flex;flex-direction:column;gap:14px;overflow:auto;transform:translateX(calc(100% + 60px));transition:transform .45s cubic-bezier(.2,.8,.2,1);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink)}
.panel.open{transform:none}
.panel h2{margin:0;font-size:30px;line-height:1.05;font-weight:600;letter-spacing:-.03em}
.panel .line{margin:0;font-size:16px;font-weight:500}
.panel .body{margin:0;color:var(--ink2);font-size:14.5px}
.panel ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.panel li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.panel .x{align-self:flex-end;width:38px;height:38px;border-radius:8px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:15px;cursor:pointer}
.panel .kick{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.panel .pill{display:inline-flex;justify-content:center;align-items:center;gap:10px;height:48px;border-radius:6px;background:var(--btn);color:var(--btn-ink);font-size:14px;font-weight:500}
.proto{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:11;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--acc);color:#fff;padding:5px 8px;border-radius:5px}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;height:auto}
  .left{border-right:0;border-bottom:1px solid var(--line);padding:26px 22px}
  .copy{margin-top:40px}.ctas{margin-top:26px}
  nav.top{padding:0 14px}.navlinks{display:none}
  #stage{height:480px;flex:none;margin:0 12px 12px}
  .panel{top:auto;left:8px;right:8px;width:auto;max-height:70vh;transform:translateY(calc(100% + 30px))}
  .panel.open{transform:none}
  .an{display:none}.dot{display:none}#overlay svg{display:none}
  .clients .n{gap:30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---------- sections ---------- */
:root{--t1:#DEE0E3;--t2:#E8E4DC;--t3:#EEE3CF;--t4:#13213A;--t4ink:#F4F2EC;--q:#13213A;--qink:#F4F2EC}
:root[data-mode="night"]{--t1:#22262B;--t2:#262A30;--t3:#2E2924;--t4:#0C0D0F;--t4ink:#ECEAE5;--q:#0C0D0F;--qink:#ECEAE5}
.sec{padding:72px 4px 0}
.kick{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
h2{margin:0;font-size:clamp(30px,3.2vw,44px);line-height:1.04;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
h2 .soft{color:var(--muted)}
.lead{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2);max-width:46ch}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:32px}
.shead>div{display:flex;flex-direction:column;gap:14px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.st{position:relative;height:380px;border-radius:12px;padding:24px;overflow:hidden;background:var(--t1)}
.st:nth-child(2){background:var(--t2)}.st:nth-child(3){background:var(--t3)}.st:nth-child(4){background:var(--t4);color:var(--t4ink)}
.st .n{font-size:12.5px;opacity:.7;font-variant-numeric:tabular-nums}
.st h3{margin:8px 0 10px;font-size:28px;font-weight:600;letter-spacing:-.02em}
.st p{margin:0;font-size:14px;line-height:1.5;opacity:.8;max-width:26ch}
.st img{position:absolute;left:-6%;bottom:-24px;width:112%;height:200px;object-fit:cover}
.st:nth-child(4) img{filter:brightness(.6)}
:root[data-mode="night"] .st:nth-child(4) img{filter:none}
.im-n{display:none}:root[data-mode="night"] .im-d{display:none}:root[data-mode="night"] .im-n{display:block}
.prot{display:grid;grid-template-columns:380px minmax(0,1fr);gap:56px}
.prot .txt{display:flex;flex-direction:column;gap:18px;padding-top:6px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.card .im{height:210px;background:var(--frame);overflow:hidden}.card .im img{width:100%;height:100%;object-fit:cover}
.card .b{padding:14px 16px 16px;display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px 8px}
.card .b span{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}.card .b b{font-size:15px;font-weight:600}.card .b em{grid-column:2;font-style:normal;font-size:13px;color:var(--ink2)}
.stats{margin-top:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:30px 12px}
.stat{padding:0 26px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:6px}.stat:first-child{border-left:0}
.stat b{font-size:44px;font-weight:500;letter-spacing:-.03em}.stat b i{font-style:normal;color:var(--acc)}.stat span{font-size:13.5px;color:var(--ink2);max-width:24ch}
.tt{margin-top:72px;position:relative;height:700px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tt .cityimg{position:absolute;left:36%;top:-4%;width:72%}
.tt .cityimg img{width:100%;display:block}
.tt .pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:15px;border:1.5px solid var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.tt .pin::after{content:"";position:absolute;left:9px;top:9px;width:10px;height:10px;border-radius:5px;background:var(--acc)}
.tt .lc{position:absolute;width:220px;padding:11px 13px;border-radius:10px;background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px}
.tt .lc .h{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}.tt .lc b{font-size:14.5px;font-weight:600}.tt .lc small{font-size:11.5px;color:var(--ink2)}
.tt .txt{position:absolute;left:48px;top:56px;width:400px;display:flex;flex-direction:column;gap:16px}
.tt ul{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.tt li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;font-size:14.5px}.tt li span{color:var(--acc);font-variant-numeric:tabular-nums}
.quote{margin-top:72px;background:var(--q);color:var(--qink);border-radius:14px;padding:56px 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:56px;position:relative;overflow:hidden}
.quote .l{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
.quote .kick{color:inherit;opacity:.6}
.quote .dispatch{margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:4px}
.quote .dispatch small{opacity:.65;font-size:13.5px}.quote .dispatch b{font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.quote .wm{position:absolute;left:40px;bottom:-50px;font-size:220px;font-weight:700;letter-spacing:-.05em;opacity:.06;line-height:1;pointer-events:none}
form.qf{position:relative;z-index:1;background:var(--panel);color:var(--ink);border-radius:12px;padding:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.fl{display:flex;flex-direction:column;gap:6px}.fl.full{grid-column:1/-1}
.fl label{font-size:12.5px;font-weight:500;color:var(--ink2)}
.fl input,.fl select,.fl textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:11px 12px;width:100%}
.fl textarea{min-height:92px;resize:vertical}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
form.qf .btn{grid-column:1/-1;justify-content:center;height:52px}
.fmsg{grid-column:1/-1;margin:0;font-size:13.5px;color:#3D8A5A}
footer.ft{margin-top:56px;padding:40px 4px 60px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;font-size:14px;color:var(--ink2)}
footer.ft b{display:block;color:var(--ink);font-size:14px;margin-bottom:10px}footer.ft a{display:block;padding:3px 0}footer.ft a:hover{color:var(--ink)}
@media (max-width:980px){
  .shead{flex-direction:column;align-items:flex-start}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prot{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.stat:nth-child(3){border-left:0}
  .tt{height:auto;display:flex;flex-direction:column}.tt .txt{position:static;width:auto;padding:28px 24px 0}.tt .cityimg{position:relative;left:auto;top:auto;width:100%;margin:10px 0 -20px}.tt .lc{display:none}
  .quote{grid-template-columns:1fr;padding:32px 22px}
  footer.ft{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){.steps,.cards{grid-template-columns:1fr}.st{height:340px}form.qf{grid-template-columns:1fr;padding:20px}footer.ft{grid-template-columns:1fr}.stat b{font-size:36px}}

/* ---- specimen visuals ---- */
.st{height:auto;min-height:430px;display:flex;flex-direction:column}
.st .vis{position:relative;margin-top:22px;height:240px;display:flex;align-items:flex-end;justify-content:center}
.st .fig{position:relative;height:100%;display:inline-block}
.st .fig img{position:static;height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
:root[data-mode="night"] .st .fig img.im-d{display:none}
.st .fig.sq{height:92%;margin-bottom:4%}
.st .fig svg{position:absolute;left:5%;top:5%;width:90%;height:90%;overflow:visible}
.st .fig.ghost{opacity:.2}
.st:nth-child(4) img{filter:none}
.br{position:absolute;border:1.5px dashed var(--acc);border-radius:6px}
.tg{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;background:var(--card);box-shadow:var(--shadow);font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap;color:var(--ink)}
.tg i{width:7px;height:7px;border-radius:4px;background:var(--acc)}
.cp{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:11px;background:var(--acc);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.rep{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);width:min(250px,86%);background:var(--panel);color:var(--ink);border-radius:10px;padding:14px;box-shadow:0 16px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:6px;font-size:12px}
.rep .rh{display:flex;justify-content:space-between;align-items:center}.rep b{font-size:13px}.rep em{font-style:normal;font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:10px;background:#DDF3E5;color:#17663A}
.rep span{color:var(--ink2);border-top:1px solid var(--line);padding-top:6px;font-variant-numeric:tabular-nums}
.card .im{height:250px;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--t1)}
.card:nth-child(2) .im{background:var(--t2)}.card:nth-child(3) .im{background:var(--t3)}.card:nth-child(4) .im{background:color-mix(in srgb,var(--acc) 12%,var(--panel))}
.card .im img{width:auto;height:100%;max-width:100%;object-fit:contain}