:root{
  --ink:#08090b; --raise:#101317; --line:#1e242a; --line-bright:#2b333a;
  --cream:#f3eee4; --muted:#8d968f; --dim:#5a635e; --emerald:#00e58a;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);
  font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 520px at 50% -8%, rgba(0,229,138,.10), transparent 62%),
             radial-gradient(640px 400px at 92% 8%, rgba(0,229,138,.045), transparent 60%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 70%)}
.wrap{max-width:760px;margin:0 auto;padding:0 22px;position:relative;z-index:1}

nav.top{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);
  background:rgba(8,9,11,.82);backdrop-filter:blur(14px) saturate(140%);
  padding-top:env(safe-area-inset-top,0px)}
.nav-in{max-width:760px;margin:0 auto;padding:15px 22px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;border:0;margin-right:auto}
.brand svg{width:21px;height:21px;display:block;filter:drop-shadow(0 0 9px rgba(0,229,138,.5))}
.brand span{font-size:18px;font-weight:700;letter-spacing:.17em;color:var(--cream)}
nav.top a.navlink{font-size:13.5px;color:var(--muted);text-decoration:none;border:0;
  padding:6px 11px;border-radius:7px;white-space:nowrap;transition:color .15s,background .15s}
nav.top a.navlink:hover{color:var(--cream);background:rgba(255,255,255,.045)}
nav.top a.navlink[aria-current="page"]{color:var(--emerald);background:rgba(0,229,138,.09)}

header.page{padding-block:86px 0;position:relative}
.hero-mark{width:58px;height:58px;display:block;margin:0 0 30px;
  filter:drop-shadow(0 0 26px rgba(0,229,138,.5)) drop-shadow(0 0 60px rgba(0,229,138,.22))}
h1{font-size:clamp(32px,6.4vw,50px);font-weight:600;letter-spacing:-.033em;
  line-height:1.08;margin:0;text-wrap:balance;
  background:linear-gradient(170deg,#ffffff 8%,#cfd6cf 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);font-size:18px;margin:22px 0 0;max-width:52ch;line-height:1.6}
.hero-rule{height:1px;margin-top:46px;
  background:linear-gradient(90deg,rgba(0,229,138,.55),rgba(0,229,138,.07) 42%,transparent)}

section{padding-block:58px;position:relative}
section + section{border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 16px;font-weight:500;display:flex;align-items:center;gap:11px}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line)}
h2{font-size:clamp(21px,3.4vw,26px);font-weight:600;letter-spacing:-.022em;margin:0 0 18px;text-wrap:balance;line-height:1.25}
h3{font-size:16.5px;font-weight:600;margin:0 0 8px;letter-spacing:-.008em}
p{margin:0 0 16px;color:var(--muted);max-width:64ch}
p:last-child{margin-bottom:0}
strong{color:var(--cream);font-weight:500}
em{color:var(--cream);font-style:italic}

.cards{display:grid;gap:14px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  border:1px solid var(--line);border-radius:13px;padding:24px 24px 22px;
  position:relative;overflow:hidden;transition:border-color .2s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--emerald),rgba(0,229,138,.08));opacity:.75}
.card:hover{border-color:var(--line-bright)}
.card .n{font-family:var(--mono);font-size:11px;color:var(--emerald);
  letter-spacing:.14em;display:block;margin-bottom:11px;opacity:.9}
.card p{font-size:15px;max-width:60ch}

.ladder{display:grid;margin:0}
.ladder .rung{display:grid;grid-template-columns:96px 1fr;gap:22px;
  padding:24px 0;border-top:1px solid var(--line);align-items:start}
.ladder .rung:first-child{border-top:0}
.ladder .tag{display:flex;align-items:center;gap:9px;padding-top:3px}
.ladder .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--emerald)}
.ladder .rung:nth-child(1) .dot{opacity:.3}
.ladder .rung:nth-child(2) .dot{opacity:.62;box-shadow:0 0 9px rgba(0,229,138,.45)}
.ladder .rung:nth-child(3) .dot{opacity:1;box-shadow:0 0 13px rgba(0,229,138,.85)}
.ladder .lvl{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.07em;white-space:nowrap}
.ladder .rung:nth-child(3) .lvl{color:var(--emerald)}
.ladder b{display:block;color:var(--cream);font-weight:600;font-size:16px;margin-bottom:5px}
.ladder span.d{color:var(--muted);font-size:15px;display:block;max-width:58ch}

.scale-bar{height:5px;border-radius:3px;margin:4px 0 26px;
  background:linear-gradient(90deg,var(--emerald) 0%,rgba(0,229,138,.55) 33%,rgba(141,150,143,.5) 67%,rgba(141,150,143,.22) 100%)}
.scale{display:grid;margin:0}
.scale .row{display:grid;grid-template-columns:118px 1fr;gap:20px;
  padding:15px 0;border-top:1px solid var(--line);align-items:baseline}
.scale .row:first-child{border-top:0}
.scale .k{font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--emerald)}
.scale .row:nth-child(2) .k{color:rgba(0,229,138,.62)}
.scale .row:nth-child(3) .k,.scale .row:nth-child(4) .k{color:var(--muted)}
.scale .v{color:var(--muted);font-size:15px}

.panel{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  border:1px solid var(--line);border-radius:13px;padding:26px}
dl.entity{display:grid;grid-template-columns:auto 1fr;gap:13px 30px;margin:0;font-size:14.5px;align-items:baseline}
dl.entity dt{color:var(--dim);white-space:nowrap}
dl.entity dd{margin:0;color:var(--cream);font-family:var(--mono);font-size:13.5px}
dl.entity dd.plain{font-family:var(--sans);font-size:14.5px}

.contact-card{background:linear-gradient(145deg,rgba(0,229,138,.085),rgba(255,255,255,.012));
  border:1px solid rgba(0,229,138,.26);border-radius:14px;padding:30px;
  box-shadow:0 0 44px rgba(0,229,138,.07)}
.contact-card .big{font-family:var(--mono);font-size:clamp(16px,3.6vw,21px);margin:0 0 9px;word-break:break-all;line-height:1.35}
.contact-card .big a{color:var(--emerald);border-bottom-color:rgba(0,229,138,.4)}
.contact-card .who{margin:0;color:var(--muted);font-size:14.5px}

.status{display:grid;gap:14px}
.status .s{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
.status .mk{font-family:var(--mono);font-size:13px;padding-top:3px}
.status .s.yes .mk{color:var(--emerald)}
.status .s.wip .mk{color:#d9a441}
.status .s.no .mk{color:var(--dim)}
.status p{margin:0;font-size:15px}

a{color:var(--emerald);text-decoration:none;border-bottom:1px solid rgba(0,229,138,.28);transition:border-color .15s}
a:hover{border-bottom-color:var(--emerald)}
a:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:2px}

footer{border-top:1px solid var(--line);margin-top:20px;padding-block:38px;
  padding-bottom:calc(66px + env(safe-area-inset-bottom,0px));position:relative;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(0,229,138,.022))}
footer .frow{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:20px}
footer a{font-size:14px;color:var(--muted);border:0}
footer a:hover{color:var(--cream)}
footer p{color:var(--dim);font-size:13px;margin:0;max-width:none;line-height:1.75}
footer p + p{margin-top:4px}
footer p a{color:var(--emerald);font-size:13px}

@media (max-width:560px){
  header.page{padding-block:56px 0}
  .hero-mark{width:48px;height:48px;margin-bottom:24px}
  section{padding-block:44px}
  .nav-in{gap:3px;padding:13px 18px}
  .brand{width:100%;margin-right:0;margin-bottom:7px}
  nav.top a.navlink{padding:5px 10px;font-size:13px;flex:1;text-align:center}
  .ladder .rung{grid-template-columns:1fr;gap:9px}
  .scale .row{grid-template-columns:1fr;gap:4px}
  dl.entity{grid-template-columns:1fr;gap:3px}
  dl.entity dd{margin-bottom:13px}
  .card,.panel,.contact-card{padding:21px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- form ---------- */
form.contact{display:grid;gap:18px;margin:0}
form.contact .field{display:grid;gap:7px}
form.contact label{font-size:13.5px;color:var(--muted);font-weight:500;letter-spacing:.01em}
form.contact label .req{color:var(--emerald);margin-left:3px}
form.contact input,form.contact select,form.contact textarea{
  font-family:var(--sans);font-size:15.5px;color:var(--cream);
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:9px;padding:12px 14px;width:100%;
  transition:border-color .15s,background .15s;-webkit-appearance:none;appearance:none
}
form.contact textarea{min-height:150px;resize:vertical;line-height:1.6}
form.contact select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px
}
form.contact select option{background:var(--raise);color:var(--cream)}
form.contact input:hover,form.contact select:hover,form.contact textarea:hover{border-color:var(--line-bright)}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{
  outline:none;border-color:var(--emerald);background:rgba(0,229,138,.045);
  box-shadow:0 0 0 3px rgba(0,229,138,.1)
}
form.contact input::placeholder,form.contact textarea::placeholder{color:var(--dim)}
form.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.contact button{
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  color:#06130d;background:var(--emerald);border:0;border-radius:9px;
  padding:13px 26px;cursor:pointer;justify-self:start;
  transition:filter .15s,transform .05s;box-shadow:0 0 26px rgba(0,229,138,.24)
}
form.contact button:hover{filter:brightness(1.1)}
form.contact button:active{transform:translateY(1px)}
form.contact button:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
form.contact .note{font-size:13px;color:var(--dim);margin:0}