:root{
  /* One committed dark identity rather than a pair of themes. The page is a
     backend engineer's storefront; instrument panels are dark, and a single
     look means the design can be tuned instead of merely made to survive both.
     No prefers-color-scheme block on purpose — every colour is painted here. */

  /* ground, stepping up in three levels so panels read as layers not outlines */
  --bg:#070910;
  --surface:#0E121C;
  --surface-2:#141926;
  --field:#0A0E17;

  /* text: never pure white — it glares against a near-black ground */
  --ink:#E6EBF4;
  --ink-2:#A3AFC2;
  --muted:#8B99AE;

  --line:#1D2433;
  --line-2:#141A26;

  /* a luminous blue that survives on dark, with a soft wash for fills */
  --accent:#4E8FFF;
  --accent-2:#7FB0FF;
  --accent-soft:#101B33;

  /* semantic colours, kept clearly apart from the accent hue */
  --pos:#3FD9A0;
  --pos-soft:#0A2019;
  --warn:#E3A951;
  --neg:#E86B63;

  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{
  margin:0; color:var(--ink); font-family:var(--body);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
  background:var(--bg);
  background-image:radial-gradient(ellipse 120% 70% at 50% -10%, #101830 0%, transparent 60%);
  background-attachment:fixed;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(16px,4vw,40px)}
h1,h2,h3{margin:0; font-weight:750; letter-spacing:-.025em; line-height:1.1; text-wrap:balance}
h1{font-size:clamp(2.4rem,6.5vw,4.4rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
h3{font-size:1.12rem; letter-spacing:-.012em; font-weight:700}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.lbl{font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.lede{font-size:clamp(1.02rem,1.9vw,1.2rem); color:var(--ink-2); max-width:62ch}

/* NAV */
nav{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
nav .inner{display:flex; align-items:center; justify-content:space-between; gap:20px; height:60px}
nav .brand{font-family:var(--mono); font-size:.84rem; font-weight:600; letter-spacing:.02em; color:var(--ink); text-decoration:none}
nav .links{display:flex; gap:22px; align-items:center}
nav .links a{font-size:.88rem; color:var(--ink-2); text-decoration:none}
nav .links a:hover{color:var(--accent)}
@media (max-width:720px){ nav .links a:not(.cta){display:none} }
.cta{
  background:var(--accent); color:#fff!important; padding:8px 16px; border-radius:var(--r);
  font-size:.85rem!important; font-weight:600; text-decoration:none; white-space:nowrap;
}
.cta:hover{background:var(--accent-2); color:#fff!important}
.status{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--pos);
  background:var(--pos-soft); padding:5px 11px; border-radius:99px;
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--pos); flex:none}

/* SECTIONS */
section{padding:clamp(56px,9vw,104px) 0; border-bottom:1px solid var(--line-2)}
.sec-lbl{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.sec-lbl::after{content:""; flex:1; height:1px; background:var(--line)}

/* HERO */
.hero{padding-top:clamp(48px,8vw,86px); border-bottom:1px solid var(--line-2)}
.hero h1{margin:20px 0 24px}
.hero .accent{color:var(--accent)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center}
.btn{
  display:inline-block; padding:12px 22px; border-radius:var(--r); font-size:.94rem; font-weight:600;
  text-decoration:none; border:1px solid var(--accent); cursor:pointer; font-family:var(--body);
}
.btn-solid{background:var(--accent); color:#fff}
.btn-solid:hover{background:var(--accent-2)}
.btn-ghost{background:transparent; color:var(--accent)}
.btn-ghost:hover{background:var(--accent-soft)}

/* CREDS */
.creds{display:flex; flex-wrap:wrap; gap:8px 0; margin-top:44px; border-top:1px solid var(--line); padding-top:22px}
.cred{flex:1 1 150px; padding-right:20px}
.cred b{display:block; font-size:.96rem; font-weight:650}
.cred span{font-family:var(--mono); font-size:.7rem; color:var(--muted); letter-spacing:.05em}

/* GRID */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); align-items:start}
.g3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start}
.card{
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border:1px solid var(--line); border-radius:var(--r); padding:24px;
  display:flex; flex-direction:column; gap:12px;
}
.card .price{font-family:var(--mono); font-weight:700; color:var(--accent); font-size:1.02rem; font-variant-numeric:tabular-nums}
.card ul{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:5px; font-size:.9rem; color:var(--ink-2)}
.card li::marker{color:var(--accent)}

/* CONFIGURATOR */
.cfg{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start}
@media (max-width:900px){ .cfg{grid-template-columns:1fr} }
.cfg-main{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,3vw,28px); display:flex; flex-direction:column; gap:26px}
.step{display:flex; flex-direction:column; gap:12px}
.step-h{display:flex; align-items:baseline; gap:10px}
.step-n{font-family:var(--mono); font-size:.7rem; color:var(--accent); font-weight:700}
.opts{display:grid; gap:9px}
.opts.cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opt{
  display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--field); cursor:pointer; transition:border-color .12s, background .12s;
}
.opt:hover{border-color:var(--accent)}
.opt input{margin:3px 0 0; accent-color:var(--accent); flex:none; cursor:pointer}
.opt.sel{border-color:var(--accent); background:var(--accent-soft)}
.opt .t{flex:1; min-width:0}
.opt .t b{display:block; font-weight:600; font-size:.94rem}
.opt .t small{color:var(--muted); font-size:.83rem; display:block; line-height:1.45}
.opt .p{font-family:var(--mono); font-size:.82rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.opt.sel .p{color:var(--accent); font-weight:600}

/* QUOTE PANEL */
.quote{position:sticky; top:78px; background:var(--surface); border:2px solid var(--accent); border-radius:var(--r); overflow:hidden}
.quote-h{padding:16px 20px; background:var(--accent-soft); border-bottom:1px solid var(--line)}
.quote-b{padding:20px; display:flex; flex-direction:column; gap:16px}
.total{font-family:var(--mono); font-size:2.5rem; font-weight:700; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1}
.meta-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.meta-grid div{display:flex; flex-direction:column; gap:3px}
.meta-grid b{font-family:var(--mono); font-size:1.02rem; font-variant-numeric:tabular-nums}
.lines{display:flex; flex-direction:column; gap:6px; font-size:.85rem; max-height:190px; overflow-y:auto}
.line{display:flex; justify-content:space-between; gap:12px; color:var(--ink-2)}
.line span:last-child{font-family:var(--mono); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.quote .btn{width:100%; text-align:center}
.fineprint{font-size:.76rem; color:var(--muted); line-height:1.5}

/* WORK */
.work{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.work-h{background:var(--surface-2)}
.work-h{padding:20px 24px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline; justify-content:space-between}
.work-b{padding:20px 24px; display:flex; flex-direction:column; gap:14px}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; padding:3px 8px; border:1px solid var(--line); border-radius:2px; color:var(--muted); background:var(--surface-2)}

/* PROCESS */
.steps{counter-reset:s; display:grid; gap:0}
.pstep{display:grid; grid-template-columns:44px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line-2)}
.pstep:last-child{border-bottom:none}
.pstep .n{font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--accent); padding-top:3px}
.pstep .c{display:flex; flex-direction:column; gap:5px}

/* FOOTER */
footer{padding:clamp(48px,7vw,80px) 0 60px}
.foot-grid{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start}
.foot-note{margin-top:44px; padding-top:20px; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted)}
.contact-list{display:flex; flex-direction:column; gap:8px; font-size:.94rem}
.contact-list a{text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:var(--bg); padding:11px 20px; border-radius:99px; font-size:.87rem;
  font-weight:600; opacity:0; pointer-events:none; transition:transform .22s, opacity .22s; z-index:100;
}
.toast.on{transform:translateX(-50%) translateY(0); opacity:1}

/* LANGUAGE PICKER */
.langs{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.langs button{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; font-weight:600;
  padding:6px 9px; border:none; background:var(--surface); color:var(--muted);
  cursor:pointer; line-height:1; transition:background .12s, color .12s;
}
.langs button:hover{color:var(--ink)}
.langs button.on{background:var(--accent); color:#fff}
@media (max-width:720px){
  nav .links .langs{display:flex}
  nav .inner{gap:10px}
  .langs button{padding:6px 7px; font-size:.66rem}
}

/* live-project link on a work card */
.visit{
  align-self:flex-start; font-family:var(--mono); font-size:.76rem; letter-spacing:.04em;
  text-decoration:none; color:var(--accent); border-bottom:1px solid transparent; padding-bottom:1px;
}
.visit:hover{border-bottom-color:var(--accent)}

/* send-brief panel: shown after the button copies the brief */
/* An author `display` beats the browser's own [hidden] rule, so the attribute
   has to be honoured explicitly or the dialog is simply always on screen. */
.sendpanel[hidden]{display:none}
.sendpanel{
  position:fixed; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter:blur(3px);
}
.sendbox{
  width:min(420px,100%); max-height:88vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px; padding:22px;
  border:1px solid var(--accent); border-radius:var(--r);
  background:var(--surface); box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
}
.sendbox h3{font-size:1.02rem}
.sendbox .btn{width:100%; text-align:center; padding:11px 16px; font-size:.92rem}
.sendbox b{font-family:var(--mono); font-size:.88em; overflow-wrap:anywhere}
.linkish{
  background:none; border:none; padding:0; align-self:flex-start; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-decoration:underline;
}
.linkish:hover{color:var(--ink)}

/* ============================================================
   TECHNICAL TREATMENT
   A blueprint grid, a live service-graph behind the hero, and
   motion that only ever reinforces structure — never decorates.
   ============================================================ */

/* faint engineering grid, anchored to the page not the viewport */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.55;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 75%);
}

/* hero canvas sits behind the copy, never over it */
.hero{position:relative; overflow:hidden}
#heroCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none; opacity:.85;
  mask-image:linear-gradient(to right, transparent 0%, #000 45%, #000 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 45%, #000 100%);
}
.hero .wrap{position:relative; z-index:1}

/* the status pill reads as telemetry: the dot actually pulses */
.dot{position:relative}
.dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--pos); animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(3);opacity:0} }

/* accent glow on the primary action, stronger in the dark theme */
.btn-solid{
  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 0 0 0 var(--accent);
  transition:box-shadow .18s ease, transform .18s ease, background .12s ease;
}
.btn-solid:hover{ transform:translateY(-1px); box-shadow:0 6px 20px -6px var(--accent) }
.cta{transition:box-shadow .18s ease, background .12s ease}
.cta:hover{box-shadow:0 6px 18px -8px var(--accent)}

/* work and info cards lift and take the accent edge on hover */
.work, .card{transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.work:hover, .card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 10px 30px -18px var(--accent);
}
.work:hover .work-h{background:var(--accent-soft)}
.work-h{transition:background .18s ease}

/* tags read as chips of a spec sheet */
.tag{transition:border-color .15s ease, color .15s ease}
.work:hover .tag, .card:hover .tag{border-color:var(--accent); color:var(--accent)}

/* section rules gain an accent tick at the left */
.sec-lbl{position:relative; padding-left:14px}
.sec-lbl::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:4px; background:var(--accent); border-radius:1px;
}

/* scroll reveal — structure appearing in order, not fading confetti */
/* Scoped under a class that reveal.js sets on <html> before it observes
   anything. If that script fails to load or throws, the rule never applies and
   the content simply stays visible — CSS must never be the only thing standing
   between a visitor and the page. */
.js-reveal .reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.js-reveal .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1; transform:none; transition:none}
  .dot::after{animation:none}
  .btn-solid:hover, .work:hover, .card:hover{transform:none}
}

/* the quote total deserves to read like an instrument display */
.total{
  text-shadow:0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
  transition:color .2s ease;
}
.quote{box-shadow:0 12px 40px -24px var(--accent)}