:root{
  --bg:         #0F1419;
  --bg-2:       #0B0F13;
  --surface:    #1A1F26;
  --surface-2:  #131820;
  --line:       rgba(255,255,255,0.07);
  --line-2:     rgba(255,255,255,0.12);
  --text:       #F5F5F4;
  --text-2:     #A1A1AA;
  --text-3:     #6B7280;
  --accent:     #3B82F6;
  --accent-soft: rgba(59,130,246,0.14);
  --coral:      #F5A676;

  --f-display: "General Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --f-body:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1200px;
  --radius:    10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:rgba(59,130,246,0.35);color:#fff}

a{color:inherit;text-decoration:none}

.bg-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.045) 1px, transparent 1.2px) 0 0/24px 24px,
    radial-gradient(1200px 800px at var(--mx,50%) var(--my,20%), rgba(59,130,246,0.10), transparent 55%),
    linear-gradient(180deg, #0F1419 0%, #0B0F13 100%);
}
.bg-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.55; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.wrap{max-width:var(--container); margin:0 auto; padding:0 32px; position:relative; z-index:2}

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(15,20,25,0.55);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:600; letter-spacing:-0.01em}
.brand-mark{
  width:28px; height:28px; display:block;
  object-fit:contain;
  border-radius:6px;
  filter: drop-shadow(0 2px 10px rgba(59,130,246,0.25));
}
.brand-name{font-size:15px}

.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{
  font-family:var(--f-mono); font-size:12px; color:var(--text-2);
  transition:color 180ms ease;
}
.nav-links a:hover{color:var(--text)}
.nav-cta{
  font-family:var(--f-mono); font-size:12px;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  transition:all 180ms ease;
}
.nav-cta:hover{border-color:var(--accent); background:var(--accent-soft); color:#DCE9FF}

.theme-toggle{
  display:inline-grid; place-items:center;
  width:32px; height:32px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  cursor:pointer;
  padding:0;
  transition: all 180ms ease;
}
.theme-toggle:hover{border-color:var(--accent); background:var(--accent-soft); color:#DCE9FF}
.theme-toggle .ic-sun, .theme-toggle .ic-moon{display:none}
.theme-toggle .ic-sun{display:block}
[data-theme="light"] .theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-moon{display:block}

.nav-menu-toggle{
  display:none;
  width:32px; height:32px;
  place-items:center;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  cursor:pointer; padding:0;
  transition: all 180ms ease;
}
.nav-menu-toggle:hover{border-color:var(--accent); background:var(--accent-soft); color:#DCE9FF}
.nav-menu-toggle .ic-close{display:none}
.nav-menu-toggle[aria-expanded="true"] .ic-menu{display:none}
.nav-menu-toggle[aria-expanded="true"] .ic-close{display:block}

.mobile-menu{
  display:none;
  position:absolute;
  top:100%; left:0; right:0;
  flex-direction:column; gap:6px;
  padding:14px 32px 22px;
  background:rgba(15,20,25,0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  z-index:49;
}
.mobile-menu.open{display:flex; animation: menuIn 180ms ease}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.mobile-menu a{
  font-family:var(--f-mono); font-size:13px;
  color:var(--text-2);
  padding:11px 14px;
  border-radius:8px;
  border:1px solid transparent;
  transition: all 180ms ease;
}
.mobile-menu a:hover, .mobile-menu a:active{
  color:var(--text);
  background:rgba(255,255,255,0.04);
  border-color: var(--line);
}
.mobile-menu .mobile-cta{
  margin-top:8px;
  border-color:var(--line-2);
  background:var(--accent-soft);
  color:var(--accent);
}
.mobile-menu .mobile-cta:hover{border-color:var(--accent); color:var(--accent)}

@media (max-width: 760px){
  .nav-links .ln-hide{display:none}
  .nav-links .nav-cta{display:none}
  .nav-menu-toggle{display:inline-grid}
  .nav-links{gap:10px}
}

[data-theme="light"] .nav-menu-toggle{background:rgba(15,20,25,0.03)}
[data-theme="light"] .nav-menu-toggle:hover{background:var(--accent-soft); color:var(--accent)}
[data-theme="light"] .mobile-menu{
  background:rgba(255,255,255,0.92);
  border-bottom-color:var(--line);
}
[data-theme="light"] .mobile-menu a:hover, [data-theme="light"] .mobile-menu a:active{
  background:rgba(15,20,25,0.04);
  border-color:var(--line);
}

.hero{
  position:relative;
  padding:96px 0 120px;
  min-height:calc(100vh - 57px);
  display:flex; flex-direction:column; justify-content:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11.5px; color:var(--text-2);
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,0.02);
  width:fit-content;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(59,130,246,0.18), 0 0 14px rgba(59,130,246,0.55);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(59,130,246,0.18), 0 0 14px rgba(59,130,246,0.55)}
  50%   {box-shadow:0 0 0 6px rgba(59,130,246,0.08), 0 0 18px rgba(59,130,246,0.75)}
}

h1.hero-h{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(42px, 6.4vw, 88px);
  line-height:1.02;
  letter-spacing:-0.035em;
  margin:26px 0 22px;
  max-width:18ch;
  text-wrap:balance;
}
h1.hero-h .accent{
  color:var(--accent);
  font-style:italic;
  font-family:var(--f-display);
  font-weight:500;
}
h1.hero-h .mono-inline{
  font-family:var(--f-mono);
  font-weight:500;
  letter-spacing:-0.01em;
}

.hero-sub{
  font-size:clamp(16px, 1.35vw, 19px);
  color:var(--text-2);
  max-width:58ch;
  line-height:1.55;
  margin:0 0 36px;
}
.hero-sub b{color:var(--text); font-weight:500}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-weight:500; font-size:14.5px;
  padding:12px 18px; border-radius:8px;
  transition:all 180ms ease; cursor:pointer; border:1px solid transparent;
}
.btn-primary{
  background:var(--accent); color:#0B0F13;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.6), 0 8px 24px -6px rgba(59,130,246,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow: 0 0 0 1px rgba(59,130,246,0.9), 0 12px 30px -6px rgba(59,130,246,0.65), inset 0 1px 0 rgba(255,255,255,0.4)}
.btn-ghost{
  background:rgba(255,255,255,0.02);
  border-color:var(--line-2);
  color:var(--text);
}
.btn-ghost:hover{border-color:var(--text-2); background:rgba(255,255,255,0.05)}
.btn .arrow{transition:transform 180ms ease; font-family:var(--f-mono)}
.btn:hover .arrow{transform:translateX(3px)}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap:56px; align-items:center;
}
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr; gap:48px}
}

.diagram-wrap{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(26,31,38,0.7), rgba(19,24,32,0.9));
  padding:18px;
  overflow:hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
}
.diagram-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; color:var(--text-3);
  padding:0 4px 14px;
}
.diagram-head .live{display:flex; align-items:center; gap:8px}
.diagram-head .live .dotlive{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent); animation:pulse 2s infinite}
.terminal{
  position:relative;
  height:360px;
  border:1px solid var(--line);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(11,15,19,0.7), rgba(15,20,25,0.7));
  overflow:hidden;
  padding:14px 18px;
  font-family:var(--f-mono);
  font-size:12.5px;
  line-height:1.7;
}
.terminal::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(180deg, transparent, rgba(11,15,19,0.85));
  pointer-events:none;
}
.term-body{display:flex; flex-direction:column; gap:2px}
.term-line{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--text-2);
}
.term-line .ts{color:var(--text-3); margin-right:10px}
.term-line .lvl{
  display:inline-block; padding:1px 6px; border-radius:4px;
  font-size:10.5px; font-weight:500; margin-right:10px; letter-spacing:.04em;
}
.term-line .lvl.info{background:rgba(59,130,246,.15); color:#93C5FD; border:1px solid rgba(59,130,246,.25)}
.term-line .lvl.ok  {background:rgba(34,197,94,.12); color:#86EFAC; border:1px solid rgba(34,197,94,.25)}
.term-line .lvl.warn{background:rgba(245,158,11,.12); color:#FCD34D; border:1px solid rgba(245,158,11,.25)}
.term-line .tag{color:var(--text-3); margin-right:6px}
.term-line .msg{color:var(--text)}
.term-line .num{color:var(--accent)}
.term-line.new{animation: termIn .4s ease forwards}
@keyframes termIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.term-cursor{
  display:inline-block; width:7px; height:13px;
  background:var(--accent); vertical-align:-2px;
  animation: blink 1s steps(2) infinite; margin-left:2px;
}
@keyframes blink{50%{opacity:0}}

.diagram-foot{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:14px; padding-top:14px; font-family:var(--f-mono); font-size:11px;
}
.metric{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,0.015)}
.metric .lbl{color:var(--text-3); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase}
.metric .val{color:var(--text); font-size:14px; font-weight:500}
.metric .val .unit{color:var(--text-2); font-size:11px; margin-left:2px}

section{padding:120px 0; position:relative}
.sec-label{
  font-family:var(--f-mono); font-size:12px; color:var(--accent);
  letter-spacing:0.02em;
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.sec-label::before{
  content:""; width:18px; height:1px; background:var(--accent);
  display:inline-block;
}
.sec-title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(30px, 3.8vw, 48px);
  letter-spacing:-0.025em;
  line-height:1.08;
  margin:0 0 14px;
  max-width:22ch;
  text-wrap:balance;
}
.sec-lede{
  color:var(--text-2); font-size:17px; max-width:60ch; margin:0;
}

.services-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px; margin-top:56px;
}
@media (max-width:760px){ .services-grid{grid-template-columns:1fr} }

.svc{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(26,31,38,0.5), rgba(19,24,32,0.6));
  padding:28px;
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
  overflow:hidden;
}
.svc::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(500px 240px at var(--cx,50%) var(--cy,50%), rgba(59,130,246,0.10), transparent 60%);
  transition:opacity 220ms ease;
}
.svc:hover{ border-color:var(--line-2); transform:translateY(-2px)}
.svc:hover::before{opacity:1}

.svc-num{
  font-family:var(--f-mono); font-size:11px; color:var(--text-3);
  letter-spacing:0.04em;
}
.svc-glyph{
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(59,130,246,0.12), rgba(59,130,246,0.02));
  display:grid; place-items:center; margin:14px 0 22px;
  color:var(--accent);
}
.svc h3{
  font-family:var(--f-display); font-weight:600;
  font-size:22px; letter-spacing:-0.02em; margin:0 0 10px;
}
.svc p{color:var(--text-2); font-size:14.5px; line-height:1.6; margin:0 0 22px}
.svc-foot{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:11.5px; color:var(--text-3);
  padding-top:14px; border-top:1px dashed var(--line);
}
.svc-link{color:var(--accent); display:inline-flex; align-items:center; gap:6px}
.svc-link .arrow{transition:transform 180ms ease}
.svc:hover .svc-link .arrow{transform:translateX(3px)}

.about-bio{margin-top:24px}
.about-bio p{color:var(--text-2); font-size:16.5px; line-height:1.7; margin:0 0 16px; max-width:62ch}
.about-bio p b{color:var(--text); font-weight:500}

.process{
  margin-top:56px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(26,31,38,0.45), rgba(19,24,32,0.55));
  overflow:hidden;
}
.process-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:900px){ .process-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){ .process-row{grid-template-columns:1fr}}
.pstep{
  padding:32px 28px;
  border-right:1px solid var(--line);
  position:relative;
  min-height:220px;
}
.pstep:last-child{border-right:none}
@media (max-width:900px){
  .pstep:nth-child(2){border-right:none}
  .pstep:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.pstep .pnum{
  font-family:var(--f-mono); font-size:11px; color:var(--text-3);
  letter-spacing:0.04em;
}
.pstep h4{
  font-family:var(--f-display); font-weight:600; font-size:20px;
  letter-spacing:-0.02em; margin:18px 0 10px;
}
.pstep p{color:var(--text-2); font-size:14px; line-height:1.6; margin:0}
.pstep .trace{
  position:absolute; left:28px; right:28px; bottom:28px;
  height:1px; background:linear-gradient(90deg, transparent, rgba(59,130,246,0.6), transparent);
  opacity:0.55;
}

.contact{
  padding:128px 0 96px;
  text-align:center;
}
.contact .sec-label{justify-content:center; margin-bottom:22px}
.contact h2{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(36px, 5vw, 64px); letter-spacing:-0.03em; line-height:1.05;
  margin:0 auto 18px; max-width:18ch;
}
.contact h2 .mono-inline{font-family:var(--f-mono); font-weight:500; color:var(--accent); font-size:0.86em; letter-spacing:-0.01em}
.contact p{color:var(--text-2); font-size:18px; max-width:50ch; margin:0 auto 36px}

.contact-row{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.contact-chip{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:13px;
  padding:12px 18px; border-radius:10px;
  border:1px solid var(--line-2); background:rgba(255,255,255,0.02);
  color:var(--text);
  transition: all 180ms ease;
}
.contact-chip:hover{border-color:var(--accent); background:var(--accent-soft); color:#DCE9FF}
.contact-chip .glyph{color:var(--accent)}
button.contact-chip{cursor:pointer; font:inherit; line-height:1; font-family:var(--f-mono); font-size:13px}

[hidden]{display:none !important}

.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(2,4,6,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-panel{
  position:relative; z-index:1;
  width:min(560px, 100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  background:#161B22;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:14px;
  padding:32px 32px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(59,130,246,0.05) inset;
}
.modal-panel .sec-label{margin-bottom:14px}
.modal-panel h3{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(22px, 2.4vw, 28px); letter-spacing:-0.02em; line-height:1.15;
  margin:0 0 10px;
}
.modal-lede{color:var(--text-2); font-size:14px; margin:0 0 22px}
.modal-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-2); color:var(--text-2);
  border-radius:8px; cursor:pointer; transition: all 160ms ease;
}
.modal-close:hover{color:var(--text); border-color:var(--accent)}

.project-form{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field-label{
  font-family:var(--f-mono); font-size:11px;
  color:var(--text-2); letter-spacing:0.02em;
}
.field-hint{color:var(--text-3); font-weight:400}
.field input,
.field select,
.field textarea{
  font-family:var(--f-display); font-size:14px;
  color:var(--text);
  background:rgba(0,0,0,0.30);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:8px;
  padding:11px 12px;
  width:100%;
  transition: border-color 160ms ease, background 160ms ease;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--text-3)}
.field textarea{font-family:var(--f-display); resize:vertical; min-height:120px}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--accent); background:rgba(59,130,246,0.06);
}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:32px}

.hp-field{position:absolute; left:-9999px; visibility:hidden}

.form-actions{display:flex; align-items:center; gap:14px; margin-top:6px; flex-wrap:wrap}
.form-actions button[disabled]{opacity:0.6; cursor:wait}
.form-status{font-family:var(--f-mono); font-size:12px; color:var(--text-2)}
.form-status.error{color:#F87171}

.form-success{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.form-success h3{margin:0}
.form-success p{color:var(--text-2); font-size:14px; margin:0 0 8px}

@media (max-width:520px){
  .field-row{grid-template-columns:1fr}
  .modal-panel{padding:24px 20px 20px}
}

[data-theme="light"] .modal-backdrop{background:rgba(15,20,25,0.45)}
[data-theme="light"] .modal-panel{background:#FFFFFF; box-shadow:0 30px 80px rgba(15,20,25,0.18)}
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea{background:#F8FAFC; border-color:rgba(15,20,25,0.12)}
[data-theme="light"] .field input:focus,
[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus{background:#FFFFFF; border-color:var(--accent)}
[data-theme="light"] .modal-close{border-color:rgba(15,20,25,0.12)}

footer{
  border-top:1px solid var(--line);
  padding:36px 0 48px;
  color:var(--text-3);
  font-family:var(--f-mono); font-size:12px;
}
.foot-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.foot-inner .links{display:flex; gap:18px}

.reveal{opacity:0; transform:translateY(12px); transition: opacity 600ms ease, transform 600ms ease}
.reveal.in{opacity:1; transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .diagram-head .live .dotlive,
  .term-cursor,
  .term-line.new{animation:none}
}

/* ── light theme ──────────────────────────────────────────── */
[data-theme="light"]{
  --bg:        #FAFAF9;
  --bg-2:      #F1F1EE;
  --surface:   #FFFFFF;
  --surface-2: #F5F5F4;
  --line:      rgba(15,20,25,0.10);
  --line-2:    rgba(15,20,25,0.16);
  --text:      #0F1419;
  --text-2:    #475467;
  --text-3:    #8B95A8;
  --accent:    #2563EB;
  --accent-soft: rgba(37,99,235,0.10);
}

[data-theme="light"] ::selection{background:rgba(37,99,235,0.22); color:#0F1419}

[data-theme="light"] .bg-field{
  background:
    radial-gradient(circle at center, rgba(15,20,25,0.07) 1px, transparent 1.2px) 0 0/24px 24px,
    radial-gradient(1200px 800px at var(--mx,50%) var(--my,20%), rgba(37,99,235,0.10), transparent 55%),
    linear-gradient(180deg, #FAFAF9 0%, #F1F1EE 100%);
}
[data-theme="light"] .bg-grain{opacity:.30; mix-blend-mode:multiply}

[data-theme="light"] .nav{background:rgba(255,255,255,0.7)}

[data-theme="light"] .btn-ghost,
[data-theme="light"] .nav-cta,
[data-theme="light"] .contact-chip,
[data-theme="light"] .theme-toggle,
[data-theme="light"] .metric{
  background:rgba(15,20,25,0.03);
}
[data-theme="light"] .btn-ghost:hover{background:rgba(15,20,25,0.06)}
[data-theme="light"] .nav-cta:hover,
[data-theme="light"] .contact-chip:hover,
[data-theme="light"] .theme-toggle:hover{
  background:var(--accent-soft); color:var(--accent);
}

[data-theme="light"] .btn-primary{
  color:#FFFFFF;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.5), 0 8px 24px -6px rgba(37,99,235,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}
[data-theme="light"] .btn-primary:hover{
  box-shadow: 0 0 0 1px rgba(37,99,235,0.8), 0 12px 30px -6px rgba(37,99,235,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}

[data-theme="light"] .diagram-wrap{
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,245,244,0.95));
  box-shadow: 0 30px 60px -30px rgba(15,20,25,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
}

[data-theme="light"] .terminal{
  background: linear-gradient(180deg, #FFFFFF, #F7F7F5);
  border-color: rgba(15,20,25,0.10);
}
[data-theme="light"] .terminal::after{
  background: linear-gradient(180deg, transparent, rgba(247,247,245,0.95));
}
[data-theme="light"] .term-line{color:var(--text-2)}
[data-theme="light"] .term-line .ts{color:var(--text-3)}
[data-theme="light"] .term-line .msg{color:var(--text)}
[data-theme="light"] .term-line .tag{color:var(--text-3)}
[data-theme="light"] .term-line .num{color:var(--accent)}
[data-theme="light"] .term-line .lvl.info{
  background:rgba(37,99,235,0.10); color:#1D4ED8; border-color:rgba(37,99,235,0.25);
}
[data-theme="light"] .term-line .lvl.ok{
  background:rgba(22,163,74,0.10); color:#15803D; border-color:rgba(22,163,74,0.25);
}
[data-theme="light"] .term-line .lvl.warn{
  background:rgba(202,138,4,0.10); color:#A16207; border-color:rgba(202,138,4,0.30);
}
[data-theme="light"] .term-cursor{background:var(--accent)}

[data-theme="light"] .svc{
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,245,244,0.92));
}
[data-theme="light"] .svc:hover{background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,245,244,1))}
[data-theme="light"] .svc::before{
  background: radial-gradient(500px 240px at var(--cx,50%) var(--cy,50%), rgba(37,99,235,0.08), transparent 60%);
}
[data-theme="light"] .svc-glyph{
  background: linear-gradient(180deg, rgba(37,99,235,0.10), rgba(37,99,235,0.02));
}

[data-theme="light"] .process{
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(245,245,244,0.9));
}

[data-theme="light"] .nav-cta:hover .arrow,
[data-theme="light"] .theme-toggle:hover{color:var(--accent)}

/* ── blog index ───────────────────────────────────────────── */
.blog-hero{padding:96px 0 40px}
.blog-hero h1{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(40px, 5vw, 64px);
  letter-spacing:-0.03em; line-height:1.05;
  margin:14px 0 18px; max-width:18ch;
}
.blog-hero p{color:var(--text-2); font-size:18px; max-width:60ch; margin:0}

.post-list{
  margin:32px 0 96px;
  border-top:1px solid var(--line);
}
.post-card{
  display:grid;
  grid-template-columns: 160px 1fr 24px;
  gap:32px;
  align-items:start;
  padding:28px 8px;
  border-bottom:1px solid var(--line);
  transition: background 200ms ease;
}
.post-card:hover{background: rgba(255,255,255,0.02)}
[data-theme="light"] .post-card:hover{background: rgba(15,20,25,0.025)}

.post-meta{
  font-family:var(--f-mono); font-size:11.5px;
  color:var(--text-3);
  display:flex; flex-direction:column; gap:6px;
  letter-spacing:0.02em;
}
.post-meta .post-read{color:var(--text-2)}

.post-body h2{
  font-family:var(--f-display); font-weight:600;
  font-size:24px; letter-spacing:-0.02em; line-height:1.2;
  margin:0 0 10px;
}
.post-body h2 a{color:var(--text); transition:color 180ms ease}
.post-body h2 a:hover{color:var(--accent)}
.post-body p{color:var(--text-2); font-size:15.5px; line-height:1.6; margin:0 0 12px; max-width:62ch}
.post-tags{font-family:var(--f-mono); font-size:11px; color:var(--text-3)}

.post-arrow{
  font-family:var(--f-mono); font-size:14px; color:var(--accent);
  align-self:center; transition:transform 180ms ease;
}
.post-card:hover .post-arrow{transform:translateX(3px)}

@media (max-width: 760px){
  .post-card{grid-template-columns: 1fr; gap:14px; padding:24px 4px}
  .post-arrow{display:none}
}

/* ── article (single post) ────────────────────────────────── */
.article-wrap{max-width:760px; margin:0 auto; padding:0 32px; position:relative; z-index:2}
.article-header{padding:80px 0 32px; border-bottom:1px solid var(--line); margin-bottom:48px}
.article-back{
  font-family:var(--f-mono); font-size:12px; color:var(--text-2);
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:24px;
  transition:color 180ms ease;
}
.article-back:hover{color:var(--accent)}
.article-header h1{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(34px, 4.4vw, 52px);
  letter-spacing:-0.025em; line-height:1.08;
  margin:14px 0 22px; max-width:24ch;
  text-wrap:balance;
}
.article-meta{
  font-family:var(--f-mono); font-size:12px; color:var(--text-3);
  display:flex; gap:14px; flex-wrap:wrap;
}

.prose{
  padding-bottom:96px;
  font-size:16.5px;
  line-height:1.72;
  color:var(--text-2);
}
.prose h2{
  font-family:var(--f-display); font-weight:600;
  font-size:24px; letter-spacing:-0.02em; line-height:1.2;
  color:var(--text);
  margin:42px 0 14px;
}
.prose h3{
  font-family:var(--f-display); font-weight:600;
  font-size:18px; letter-spacing:-0.015em;
  color:var(--text);
  margin:28px 0 10px;
}
.prose p{margin:0 0 18px}
.prose strong, .prose b{color:var(--text); font-weight:500}
.prose a{color:var(--accent); border-bottom:1px solid rgba(59,130,246,0.30); transition:border-color 180ms ease}
.prose a:hover{border-bottom-color:var(--accent)}
.prose ul, .prose ol{margin:0 0 18px; padding-left:22px}
.prose li{margin:0 0 6px}
.prose li::marker{color:var(--text-3)}
.prose code{
  font-family:var(--f-mono); font-size:0.88em;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  padding:1px 6px; border-radius:4px;
  color:var(--text);
}
[data-theme="light"] .prose code{background:rgba(15,20,25,0.05)}
.prose pre{
  font-family:var(--f-mono); font-size:13px; line-height:1.6;
  background:linear-gradient(180deg, rgba(11,15,19,0.7), rgba(15,20,25,0.7));
  border:1px solid var(--line);
  padding:16px 18px; border-radius:10px;
  overflow-x:auto; color:var(--text);
  margin:0 0 22px;
}
[data-theme="light"] .prose pre{background:linear-gradient(180deg, #FFFFFF, #F7F7F5)}
.prose pre code{background:transparent; border:0; padding:0; font-size:inherit}
.prose blockquote{
  border-left:2px solid var(--accent);
  padding:4px 0 4px 18px;
  margin:0 0 22px;
  color:var(--text);
  font-family:var(--f-display); font-weight:500;
}
.prose hr{border:0; height:1px; background:var(--line); margin:32px 0}