:root{--accent:var(--c-accent)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
section[id]{scroll-margin-top:12px}

a{color:var(--c-ink)}a:hover{color:var(--c-hover)}
.wrap{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;box-sizing:border-box;text-decoration:none;font-weight:600;font-size:15px;color:var(--c-btn-fg);background:var(--c-btn-bg);padding:12px 20px;border-radius:8px}
.btn:hover{color:var(--c-btn-fg);background:var(--c-btn-hover)}
.btn2{display:inline-flex;align-items:center;gap:6px;min-height:46px;text-decoration:none;font-weight:500;font-size:15px;color:var(--c-text)}
.chip{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--c-text);background:var(--c-surface);border:1px solid var(--c-line);border-radius:999px;padding:7px 12px;white-space:nowrap}
.tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--c-text);border:1px solid var(--c-line);border-radius:999px;padding:4px 10px;white-space:nowrap;align-self:flex-start}
.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--c-ink)}
.field input,.field select,.field textarea{font:inherit;font-size:15px;color:var(--c-ink);background:var(--c-bg);border:1px solid var(--c-line-2);border-radius:8px;padding:11px 12px;min-height:44px;box-sizing:border-box;width:100%}
.field textarea{min-height:96px;resize:vertical}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] .plus{transform:rotate(45deg)}
.plus{transition:transform .2s ease}
.lift{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.lift:hover{border-color:var(--c-ink);transform:translateY(-2px);box-shadow:0 10px 24px -14px var(--c-shadow)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.lead-form{position:relative}
.lead-form .status{font-size:14px;line-height:1.5;text-align:center;margin:0}
.lead-form .status.ok{color:var(--accent)}
.lead-form .status.err{color:var(--c-danger)}
.lead-form button[disabled]{opacity:.6;cursor:progress}
.lead-form .done{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.lead-form .done h3{margin:0;font-size:20px;font-weight:600}
.lead-form .done p{margin:0;font-size:15px;line-height:1.6;color:var(--c-text)}
/* typed labels */
[data-type].typing::after{content:"";display:inline-block;width:.55em;height:1.05em;vertical-align:-.15em;background:var(--accent);margin-left:1px;animation:blink 1s steps(1) infinite}
.js [data-type].await{visibility:hidden}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* reveals */
.js [data-reveal],.js [data-stagger]>*{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.js [data-reveal].in,.js [data-stagger]>.in{opacity:1;transform:none}
/* pipeline: stages light up in order, then deploy completes */
.pipe>div>span:first-child{animation:pipe-dot .5s ease both}
.pipe>div:nth-child(1)>span:first-child{animation-delay:.3s}
.pipe>div:nth-child(3)>span:first-child{animation-delay:.9s}
.pipe>div:nth-child(5)>span:first-child{animation-delay:1.5s}
.pipe>div:nth-child(7)>span:first-child{animation:pipe-deploy .5s ease 2.1s both}
.pipe>div:nth-child(even){transform-origin:left;animation:pipe-line .5s ease both}
.pipe>div:nth-child(2){animation-delay:.6s}.pipe>div:nth-child(4){animation-delay:1.2s}.pipe>div:nth-child(6){animation:pipe-line-last .5s ease 1.8s both}
@keyframes pipe-dot{from{transform:scale(.4);opacity:.3}to{transform:none;opacity:1}}
@keyframes pipe-line{from{transform:scaleX(0)}to{transform:none}}
@keyframes pipe-line-last{from{transform:scaleX(0);background:var(--c-line-2)}to{transform:none;background:var(--accent)}}
@keyframes pipe-deploy{from{background:var(--c-surface);border-color:var(--c-line-2)}to{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--c-accent-tint)}}
@media (max-width:640px){
 h1{font-size:40px!important}
 h2{font-size:30px!important}
 form h2{font-size:21px!important}
 [data-count]{font-size:28px!important}
 details summary{font-size:16px!important}
 .chip[style*="position: absolute"]{right:8px!important;left:auto!important}
 .chip[style*="bottom: 28px"]{left:8px!important;right:auto!important}
 #top>.wrap,section>.wrap{padding-top:64px!important;padding-bottom:64px!important}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .pipe *{animation:none!important}
 .pipe>div:nth-child(6){background:var(--accent)!important}
 .pipe>div:nth-child(7)>span:first-child{background:var(--accent)!important;border-color:var(--accent)!important}
 .js [data-reveal],.js [data-stagger]>*{opacity:1;transform:none;transition:none}
 [data-type].typing::after{animation:none}
}

/* dark terminal card on the light page */
.term{margin:0;padding:20px 20px 22px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13.5px;line-height:1.8;color:var(--c-panel-text);background: var(--c-panel);white-space:pre;overflow-x:auto}
.term .tl{display:block;min-height:1.8em}
.term .tl[data-cmd]::before{content:"$ ";color:var(--c-term)}
.term .tl.ok{color:var(--c-term)}
.term .tl[data-last]::after,.term .tl.typing::after{content:"";display:inline-block;width:.55em;height:1.05em;vertical-align:-.16em;background:var(--c-term);margin-left:1px;animation:blink 1s steps(1) infinite}
.js .term[data-term] .tl.pending{visibility:hidden}
@media (max-width:640px){.term{font-size:12px}.whoami .term{min-height:290px!important}}
@media (prefers-reduced-motion:reduce){.term .tl[data-last]::after,.term .tl.typing::after{animation:none}}

/* ── Mobile menu ─────────────────────────────── */
.menu-btn { display: none; }
@media (max-width: 640px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--c-ink); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
  .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .menu-icon, .menu-icon::before, .menu-icon::after { width: 22px !important; }
  .menu-icon::before { top: -7px !important; } .menu-icon::after { top: 7px !important; }
  .site-nav.open .menu-icon::before { transform: translateY(7px) rotate(45deg) !important; }
  .site-nav.open .menu-icon::after { transform: translateY(-7px) rotate(-45deg) !important; }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -5px; } .menu-icon::after { top: 5px; }
  .site-nav.open .menu-icon { background: transparent; }
  .site-nav.open .menu-icon::before { transform: translateY(5px) rotate(45deg); }
  .site-nav.open .menu-icon::after { transform: translateY(-5px) rotate(-45deg); }
  .site-nav .navlinks { display: none !important; width: 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; }
  .site-nav.open .navlinks { display: flex !important; }
  .site-nav .navlinks > a { display: block !important; padding: 14px 2px; font-size: 17px !important; border-top: 1px solid var(--c-line); }
  .site-nav .navlinks > a.navcta { margin-top: 10px; border: 0; text-align: center; color: var(--c-btn-fg) !important; background: var(--c-btn-bg); border-radius: 8px; padding: 14px; }
}