/* ==========================================================================
   MAKAN LAB — design system v2
   Deep navy, aurora gradient (green → cyan → blue), glass surfaces.
   ========================================================================== */

:root{
  /* surfaces */
  --color-bg:            #05070D;
  --color-bg-2:          #070B14;
  --color-surface:       #0B111C;
  --color-surface-2:     #101826;
  --color-glass:         rgba(14,21,34,.62);
  --color-border:        rgba(255,255,255,.07);
  --color-border-strong: rgba(255,255,255,.13);

  /* brand */
  --brand-green: #22E58A;
  --brand-cyan:  #13C8F5;
  --brand-blue:  #3B6BFF;
  --brand-grad:  linear-gradient(100deg,#22E58A 0%,#13C8F5 50%,#3B6BFF 100%);

  /* accent (admin theme can override) */
  --color-accent:      #13C8F5;
  --color-accent-dim:  rgba(19,200,245,.12);
  --color-accent-line: rgba(19,200,245,.32);
  --color-cta:         #13C8F5;
  --color-cta-contrast:#03111A;

  /* text */
  --color-text:       #EAF1F7;
  --color-text-muted: #93A1B5;
  --color-text-faint: #5E6B7E;
  --color-visited:    rgba(19,200,245,.7);
  --color-focus-ring: #13C8F5;

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  --radius-s:10px; --radius-m:16px; --radius-l:24px; --radius-xl:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-hover:180ms; --dur-section:600ms;
  --max-w:1240px; --nav-h:72px; --touch-min:44px;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.command-open{ overflow:hidden; }
img,video{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
a.js-visited-track:visited{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.1; margin:0; letter-spacing:-.02em; }
p{ margin:0 0 var(--sp-4); }
::selection{ background:rgba(19,200,245,.35); color:#fff; }
:focus-visible{ outline:2px solid var(--color-focus-ring); outline-offset:3px; border-radius:6px; }
code,kbd{ font-family:var(--font-mono); }
.skip-link{ position:absolute; left:-9999px; top:12px; z-index:2000; background:var(--brand-cyan); color:#03111A; padding:10px 16px; border-radius:10px; font-weight:600; }
.skip-link:focus{ left:16px; }

.container{ width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-8); }
@media (max-width:640px){ .container{ padding:0 var(--sp-5); } }

.section{ padding:var(--sp-24) 0; position:relative; }
.section--tight{ padding:var(--sp-10) 0; }
.section--tint{ background:linear-gradient(180deg,transparent,rgba(19,200,245,.028) 20%,rgba(59,107,255,.03) 80%,transparent); }
@media (max-width:768px){ .section{ padding:var(--sp-16) 0; } }

.label-mono{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-cyan); margin:0 0 var(--sp-3); display:inline-flex; align-items:center; gap:10px; }
.label-mono::before{ content:""; width:18px; height:2px; border-radius:2px; background:var(--brand-grad); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-10); margin-bottom:var(--sp-12); }
.section-head h2{ font-size:clamp(30px,4.2vw,50px); }
.section-head > p{ max-width:420px; color:var(--color-text-muted); margin:0; }
@media (max-width:760px){ .section-head{ flex-direction:column; align-items:flex-start; gap:var(--sp-4); margin-bottom:var(--sp-8); } }

.grad-text{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.center-row{ display:flex; justify-content:center; margin-top:var(--sp-10); }

.pill{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted);
  padding:7px 15px; border-radius:100px; border:1px solid var(--color-border-strong); background:rgba(255,255,255,.03); backdrop-filter:blur(8px); margin:0 0 var(--sp-6); }
.pill-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-green); box-shadow:0 0 12px var(--brand-green); animation:pulse 2.2s infinite; flex-shrink:0; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,229,138,.55);} 70%{ box-shadow:0 0 0 9px rgba(34,229,138,0);} 100%{ box-shadow:0 0 0 0 rgba(34,229,138,0);} }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--touch-min); padding:0 20px; border-radius:12px;
  font-family:var(--font-body); font-size:14.5px; font-weight:600; color:var(--color-text); background:rgba(255,255,255,.04); border:1px solid var(--color-border-strong);
  cursor:pointer; white-space:nowrap; transition:transform var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease); }
.btn svg{ width:17px; height:17px; flex-shrink:0; }
.btn img{ border-radius:5px; }
.btn:hover{ border-color:rgba(19,200,245,.5); background:rgba(19,200,245,.07); transform:translateY(-1px); }
.btn:disabled{ opacity:.6; cursor:default; transform:none; }
.btn-cta{ background:var(--brand-grad); border-color:transparent; color:#03111A; box-shadow:0 8px 30px -10px rgba(19,200,245,.6); }
.btn-cta:hover{ background:var(--brand-grad); color:#03111A; border-color:transparent; box-shadow:0 12px 40px -10px rgba(34,229,138,.65); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--color-text-muted); }
.btn-ghost:hover{ background:rgba(255,255,255,.04); color:var(--color-text); border-color:var(--color-border); }
.btn-sm{ min-height:38px; padding:0 14px; font-size:13.5px; border-radius:10px; }
.btn-lg{ min-height:54px; padding:0 26px; font-size:15.5px; border-radius:14px; }
.btn-meta{ font-family:var(--font-mono); font-size:11.5px; opacity:.75; font-weight:500; }
.is-downloading{ opacity:.7; pointer-events:none; }

.tag{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--color-text-muted);
  padding:4px 10px; border:1px solid var(--color-border-strong); border-radius:100px; background:rgba(255,255,255,.02); }
.badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12px; padding:7px 14px; border-radius:100px; border:1px solid var(--color-border-strong); margin:0; }
.badge .dot{ width:8px; height:8px; border-radius:50%; }
.badge.is-available{ color:var(--brand-green); border-color:rgba(34,229,138,.3); } .badge.is-available .dot{ background:var(--brand-green); box-shadow:0 0 10px var(--brand-green); }
.badge.is-booked{ color:#FFB44A; border-color:rgba(255,180,74,.3); } .badge.is-booked .dot{ background:#FFB44A; }
.empty-state{ padding:var(--sp-12); text-align:center; color:var(--color-text-muted); border:1px dashed var(--color-border-strong); border-radius:var(--radius-l); font-family:var(--font-mono); font-size:13px; }

/* ---------- nav ---------- */
.site-nav{ position:fixed; top:0; left:0; right:0; z-index:400; height:var(--nav-h); display:flex; align-items:center;
  background:rgba(5,7,13,.72); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--color-border); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); }
.brand{ display:inline-flex; align-items:center; gap:11px; min-height:var(--touch-min); }
.brand-mark{ width:34px; height:34px; border-radius:11px; background:var(--brand-grad); display:grid; place-items:center; box-shadow:0 0 22px -4px rgba(19,200,245,.6); }
.brand-mark span{ font-family:var(--font-display); font-weight:700; font-size:17px; color:#03111A; }
.brand-text{ font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.02em; }
.brand-text b{ font-weight:500; color:var(--color-text-muted); margin-left:5px; }
.nav-links{ display:flex; align-items:center; gap:4px; padding:5px; border-radius:100px; border:1px solid var(--color-border); background:rgba(255,255,255,.025); }
.nav-links a{ display:inline-flex; align-items:center; font-size:14px; font-weight:500; color:var(--color-text-muted); padding:8px 16px; border-radius:100px; transition:color var(--dur-hover),background var(--dur-hover); }
.nav-links a:hover{ color:var(--color-text); background:rgba(255,255,255,.05); }
.nav-links a.is-current{ color:var(--color-text); background:rgba(255,255,255,.08); }
.nav-cta{ display:flex; align-items:center; gap:var(--sp-2); }
.nav-search{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border-radius:11px; border:1px solid var(--color-border-strong);
  background:rgba(255,255,255,.03); color:var(--color-text-muted); font-family:var(--font-mono); font-size:12px; cursor:pointer; transition:border-color var(--dur-hover); }
.nav-search:hover{ border-color:rgba(19,200,245,.5); color:var(--color-text); }
.nav-search kbd{ font-size:10.5px; border:1px solid var(--color-border-strong); border-radius:6px; padding:1px 6px; }
.nav-menu-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; border:1px solid var(--color-border-strong); background:transparent; color:var(--color-text); cursor:pointer; }
@media (max-width:980px){ .nav-links{ display:none; } .nav-menu-toggle{ display:inline-flex; } .nav-search{ display:none; } }
@media (max-width:420px){ .nav-contact{ display:none; } }

.mobile-nav{ position:fixed; inset:0; z-index:600; background:rgba(5,7,13,.98); backdrop-filter:blur(20px); padding:calc(var(--nav-h) + var(--sp-6)) var(--sp-6) var(--sp-8);
  display:flex; flex-direction:column; opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease); overflow-y:auto; }
.mobile-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-nav a{ font-family:var(--font-display); font-size:28px; font-weight:700; padding:var(--sp-4) 0; border-bottom:1px solid var(--color-border); }
.close-mobile{ position:absolute; top:14px; right:var(--sp-5); width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--color-border-strong); background:transparent; color:var(--color-text); cursor:pointer; }
.mobile-search{ display:inline-flex !important; margin-top:var(--sp-6); justify-content:center; min-height:50px; font-size:14px; }

/* ---------- command palette ---------- */
.command-overlay{ position:fixed; inset:0; z-index:1200; background:rgba(2,4,8,.72); backdrop-filter:blur(8px); display:flex; align-items:flex-start; justify-content:center; padding:12vh var(--sp-4) var(--sp-4); }
.command-overlay[hidden]{ display:none; }
.command-panel{ width:min(640px,100%); border-radius:var(--radius-l); background:#0B111C; border:1px solid var(--color-border-strong); box-shadow:0 40px 100px -20px rgba(0,0,0,.8),0 0 0 1px rgba(19,200,245,.08); overflow:hidden; }
.command-head{ display:flex; justify-content:space-between; align-items:center; padding:var(--sp-4) var(--sp-5) 0; }
.command-head .label-mono{ margin:0; font-size:11px; }
.command-close{ font-family:var(--font-mono); font-size:11px; color:var(--color-text-muted); background:transparent; border:1px solid var(--color-border-strong); border-radius:7px; padding:3px 8px; cursor:pointer; }
.command-input-wrap{ display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-4) var(--sp-5); padding:0 var(--sp-4); border-radius:12px; border:1px solid var(--color-border-strong); background:rgba(255,255,255,.03); color:var(--color-text-muted); }
.command-input-wrap input{ flex:1; background:none; border:0; outline:0; color:var(--color-text); font:400 16px var(--font-body); padding:14px 0; }
.command-results{ max-height:50vh; overflow-y:auto; padding:0 var(--sp-3) var(--sp-3); }
.command-item{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:12px; }
.command-item.is-selected,.command-item:hover{ background:rgba(19,200,245,.08); }
.command-type{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--brand-cyan); border:1px solid var(--color-accent-line); border-radius:6px; padding:2px 7px; }
.command-item-copy{ display:flex; flex-direction:column; min-width:0; }
.command-item-copy b{ font-size:14.5px; } .command-item-copy small{ color:var(--color-text-faint); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.command-arrow{ color:var(--color-text-faint); }
.command-empty{ padding:var(--sp-8); text-align:center; color:var(--color-text-muted); font-size:14px; }
.command-foot{ display:flex; gap:var(--sp-5); padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--color-border); font-family:var(--font-mono); font-size:11px; color:var(--color-text-faint); }

/* ---------- aurora + backdrop ---------- */
.hero-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-aurora span{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.45; will-change:transform; }
.hero-aurora span:nth-child(1){ width:620px; height:620px; left:-200px; top:-160px; background:#0c8f58; animation:drift 16s ease-in-out infinite alternate; }
.hero-aurora span:nth-child(2){ width:560px; height:560px; left:35%; top:-260px; background:#0a78a8; opacity:.35; animation:drift 20s ease-in-out infinite alternate-reverse; }
.hero-aurora span:nth-child(3){ width:700px; height:700px; right:-260px; top:40px; background:#1a3db8; animation:drift 22s ease-in-out infinite alternate; }
.hero-aurora--soft span{ opacity:.25; }
@keyframes drift{ to{ transform:translate(70px,50px) scale(1.1); } }
.backdrop-field{ position:absolute; inset:0; pointer-events:none; transition:transform .5s var(--ease);
  -webkit-mask-image:radial-gradient(ellipse at 60% 30%,#000 10%,transparent 70%); mask-image:radial-gradient(ellipse at 60% 30%,#000 10%,transparent 70%); }
.backdrop-field svg{ width:100%; height:100%; }
.bd-grid-line{ stroke:rgba(255,255,255,.05); stroke-width:1; }
.bd-arc{ fill:none; stroke:rgba(19,200,245,.1); stroke-width:1; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:calc(var(--nav-h) + var(--sp-20)) 0 0; min-height:min(100vh,980px); display:flex; flex-direction:column; }
.hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; mix-blend-mode:screen; }
@media (max-width:640px){ .hero-bg-video{ display:none; } }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.25fr .9fr; gap:var(--sp-12); align-items:center; flex:1; padding-bottom:var(--sp-16); }
.hero-title{ font-size:clamp(52px,8.4vw,116px); line-height:.94; letter-spacing:-.045em; margin:0 0 var(--sp-6); display:flex; flex-direction:column; }
.hero-title span{ display:block; }
.hero-sub{ font-size:clamp(17px,1.7vw,20px); color:var(--color-text-muted); max-width:560px; margin:0 0 var(--sp-8); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.hero-stats{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-10) 0 0; }
.hero-stats div{ padding:var(--sp-3) var(--sp-5); border-radius:14px; border:1px solid var(--color-border); background:rgba(255,255,255,.025); min-width:120px; }
.hero-stats dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-faint); }
.hero-stats dd{ margin:2px 0 0; font-family:var(--font-display); font-weight:700; font-size:24px; }
.hero-status.is-open{ color:var(--brand-green); } .hero-status.is-booked{ color:#FFB44A; }

.term{ border-radius:var(--radius-l); background:rgba(9,14,24,.82); border:1px solid var(--color-border-strong); backdrop-filter:blur(14px); overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(19,120,245,.45); }
.term-bar{ display:flex; align-items:center; gap:var(--sp-4); padding:12px 16px; border-bottom:1px solid var(--color-border); font-family:var(--font-mono); font-size:12px; color:var(--color-text-faint); }
.term-dots{ display:flex; gap:6px; } .term-dots i{ width:10px; height:10px; border-radius:50%; background:#2A3547; }
.term-dots i:nth-child(1){ background:#ff5f57; } .term-dots i:nth-child(2){ background:#febc2e; } .term-dots i:nth-child(3){ background:#28c840; }
.term-body{ padding:var(--sp-5); font-family:var(--font-mono); font-size:13px; }
.term-line{ margin:0 0 var(--sp-2); color:var(--color-text-muted); }
.term-muted{ color:var(--color-text-faint); margin-top:var(--sp-2); }
.term-prompt{ color:var(--brand-green); margin-right:6px; }
.term-row{ display:grid; grid-template-columns:36px 1fr auto; gap:var(--sp-3); align-items:center; padding:7px 10px; margin:0 -10px; border-radius:9px; transition:background var(--dur-hover); }
.term-row:hover{ background:rgba(19,200,245,.08); }
.term-row b{ font-weight:500; color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.term-type{ font-size:10.5px; color:var(--color-text-faint); text-transform:uppercase; }
.term-state{ font-size:11.5px; color:var(--color-text-faint); }
.term-row--hot{ background:linear-gradient(90deg,rgba(34,229,138,.1),rgba(59,107,255,.08)); }
.term-row--hot b{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }
.term-row--hot .term-state{ color:var(--brand-green); }
.term-cursor{ display:inline-block; width:8px; height:15px; background:var(--brand-cyan); vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } .hero{ min-height:0; } }

.marquee{ position:relative; z-index:1; border-block:1px solid var(--color-border); background:rgba(255,255,255,.015); overflow:hidden; padding:var(--sp-4) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track{ display:flex; gap:var(--sp-10); width:max-content; animation:marquee 38s linear infinite; }
.marquee-track span{ font-family:var(--font-mono); font-size:13px; color:var(--color-text-faint); white-space:nowrap; display:inline-flex; align-items:center; gap:var(--sp-10); }
.marquee-track span::after{ content:"✦"; color:rgba(19,200,245,.4); font-size:10px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- work ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.work-card{ display:flex; flex-direction:column; border-radius:var(--radius-l); background:var(--color-surface); border:1px solid var(--color-border); overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); }
.work-card:hover{ transform:translateY(-4px); border-color:rgba(19,200,245,.35); box-shadow:0 30px 70px -30px rgba(19,120,245,.45); }
.work-card--lead{ grid-column:span 2; flex-direction:row; }
.work-card--lead .work-cover{ flex:1.25; aspect-ratio:auto; min-height:340px; }
.work-card--lead .work-body{ flex:1; padding:var(--sp-10) var(--sp-8); justify-content:center; }
.work-card--lead h3{ font-size:30px; }
.work-cover{ position:relative; display:block; aspect-ratio:16/10; background:linear-gradient(135deg,#0E1828,#0A0F1A); overflow:hidden; }
.work-cover img,.work-cover video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.work-card:hover .work-cover img,.work-card:hover .work-cover video{ transform:scale(1.045); }
.work-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(5,7,13,.55)); pointer-events:none; }
.work-cover-fallback{ position:absolute; inset:0; display:grid; place-items:center; color:var(--brand-cyan); }
.work-cover-fallback svg{ width:56px; height:56px; opacity:.8; }
.work-cover-badge{ position:absolute; z-index:1; top:14px; left:14px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; background:rgba(5,7,13,.72); backdrop-filter:blur(8px); border:1px solid var(--color-border-strong); color:var(--color-text); }
.work-body{ display:flex; flex-direction:column; flex:1; padding:var(--sp-6); }
.work-top{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.work-num{ font-family:var(--font-mono); font-size:12px; font-weight:500; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.work-role{ font-family:var(--font-mono); font-size:11px; color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.08em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.work-body h3{ font-size:21px; margin-bottom:var(--sp-2); }
.work-body h3 a:hover{ color:var(--brand-cyan); }
.work-body .desc{ color:var(--color-text-muted); font-size:14.5px; margin-bottom:var(--sp-4); }
.work-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--sp-5); }
.work-footer{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); padding-top:var(--sp-4); border-top:1px solid var(--color-border); }
.work-metric{ font-family:var(--font-mono); font-size:11.5px; color:var(--brand-green); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.work-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; white-space:nowrap; min-height:var(--touch-min); }
.work-link svg{ width:15px; height:15px; transition:transform var(--dur-hover); }
.work-link:hover{ color:var(--brand-cyan); } .work-link:hover svg{ transform:translate(2px,-2px); }
@media (max-width:1024px){ .work-grid{ grid-template-columns:repeat(2,1fr); } .work-card--lead{ grid-column:1 / -1; } }
@media (max-width:700px){ .work-grid{ grid-template-columns:1fr; } .work-card--lead{ flex-direction:column; } .work-card--lead .work-cover{ min-height:0; aspect-ratio:16/10; } .work-card--lead .work-body{ padding:var(--sp-6); } .work-card--lead h3{ font-size:23px; } }

/* ---------- apps ---------- */
.app-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.app-card{ display:flex; flex-direction:column; border-radius:var(--radius-l); background:var(--color-surface); border:1px solid var(--color-border); overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease); }
.app-card:hover{ transform:translateY(-4px); border-color:rgba(19,200,245,.35); }
.app-media{ position:relative; display:grid; place-items:center; height:170px; background:radial-gradient(circle at 30% 20%,rgba(34,229,138,.16),transparent 55%),radial-gradient(circle at 80% 90%,rgba(59,107,255,.2),transparent 55%),#0A1019; overflow:hidden; }
.app-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.app-icon{ position:relative; width:72px; height:72px; border-radius:20px; display:grid; place-items:center; color:#EAF1F7;
  background:linear-gradient(135deg,rgba(34,229,138,.28),rgba(59,107,255,.32)); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); box-shadow:0 12px 30px -8px rgba(0,0,0,.6); }
.app-icon svg{ width:34px; height:34px; }
.app-body{ display:flex; flex-direction:column; flex:1; padding:var(--sp-5) var(--sp-6) var(--sp-6); }
.app-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.app-card h3{ font-size:19px; }
.app-card h3 a:hover{ color:var(--brand-cyan); }
.app-cat-badge{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-faint); border:1px solid var(--color-border-strong); border-radius:100px; padding:3px 9px; white-space:nowrap; }
.app-desc{ color:var(--color-text-muted); font-size:14px; margin-bottom:var(--sp-4); }
.app-stats{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--color-text-faint); padding:var(--sp-3) 0; border-top:1px solid var(--color-border); margin-top:auto; margin-bottom:var(--sp-4); }
.app-actions{ display:flex; gap:var(--sp-2); }
.app-actions .btn{ flex:1; }
@media (max-width:1024px){ .app-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .app-grid{ grid-template-columns:1fr; } }

/* apps page */
.page-hero{ position:relative; overflow:hidden; padding:calc(var(--nav-h) + var(--sp-16)) 0 var(--sp-10); }
.page-hero .container{ position:relative; }
.page-title{ font-size:clamp(42px,6.4vw,84px); line-height:.98; letter-spacing:-.04em; margin:0 0 var(--sp-5); }
.apps-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4); }
.apps-search-box{ display:flex; align-items:center; gap:var(--sp-3); flex:1 1 320px; max-width:460px; padding:0 var(--sp-5); border-radius:14px; border:1px solid var(--color-border-strong); background:rgba(255,255,255,.035); color:var(--color-text-muted); transition:border-color var(--dur-hover); }
.apps-search-box:focus-within{ border-color:var(--brand-cyan); }
.apps-search-box input{ flex:1; background:none; border:0; outline:0; color:var(--color-text); font:400 15px var(--font-body); padding:15px 0; }
.apps-filter-row{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.app-filter-chip{ font-family:var(--font-mono); font-size:12px; padding:9px 16px; border-radius:100px; border:1px solid var(--color-border-strong); color:var(--color-text-muted); background:transparent; cursor:pointer; min-height:40px; transition:all var(--dur-hover); }
.app-filter-chip:hover{ color:var(--color-text); border-color:rgba(19,200,245,.5); }
.app-filter-chip.is-active{ background:var(--brand-grad); color:#03111A; border-color:transparent; font-weight:600; }
@media (max-width:640px){ .apps-filter-row{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; width:100%; } }

.eps-strip{ display:flex; align-items:center; gap:var(--sp-6); padding:var(--sp-5) var(--sp-6); border-radius:var(--radius-l); border:1px solid rgba(19,200,245,.25);
  background:linear-gradient(100deg,rgba(34,229,138,.08),rgba(19,200,245,.05),rgba(59,107,255,.1)); transition:border-color var(--dur-hover),transform var(--dur-hover); }
.eps-strip:hover{ border-color:rgba(19,200,245,.55); transform:translateY(-2px); }
.eps-strip img{ filter:drop-shadow(0 0 16px rgba(19,200,245,.4)); flex-shrink:0; }
.eps-strip-copy{ flex:1; display:flex; flex-direction:column; min-width:0; }
.eps-strip-copy .label-mono{ margin:0; font-size:10.5px; }
.eps-strip-copy b{ font-family:var(--font-display); font-size:20px; }
.eps-strip-copy small{ color:var(--color-text-muted); font-size:13.5px; }
@media (max-width:640px){ .eps-strip{ flex-wrap:wrap; } .eps-strip .btn{ width:100%; } }

.featured-app-card{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-8); align-items:center; padding:var(--sp-8); border-radius:var(--radius-xl); background:var(--color-surface); border:1px solid var(--color-border); }
.featured-app-icon{ width:120px; height:120px; border-radius:32px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(34,229,138,.3),rgba(59,107,255,.35)); border:1px solid rgba(255,255,255,.14); box-shadow:0 20px 50px -15px rgba(19,200,245,.5); }
.featured-app-icon svg{ width:54px; height:54px; }
.featured-app-body h2{ font-size:clamp(26px,3vw,36px); margin-bottom:var(--sp-2); }
.featured-app-body > p:not(.label-mono){ color:var(--color-text-muted); }
.featured-app-meta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.featured-app-meta span{ font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-muted); border:1px solid var(--color-border-strong); border-radius:100px; padding:4px 12px; }
.featured-app-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
@media (max-width:700px){ .featured-app-card{ grid-template-columns:1fr; padding:var(--sp-6); } .featured-app-icon{ width:84px; height:84px; border-radius:24px; } }

.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.trust-item{ padding:var(--sp-6); border-radius:var(--radius-m); border:1px solid var(--color-border); background:rgba(255,255,255,.02); }
.trust-item b{ display:block; font-family:var(--font-display); font-size:17px; margin-bottom:var(--sp-2); }
.trust-item p{ color:var(--color-text-muted); font-size:14px; margin:0; }
@media (max-width:760px){ .trust-grid{ grid-template-columns:1fr; } }

/* ---------- now + lab ---------- */
.now-lab{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-5); align-items:start; }
.now-board{ padding:var(--sp-8); border-radius:var(--radius-l); background:radial-gradient(circle at 0 0,rgba(34,229,138,.12),transparent 55%),var(--color-surface); border:1px solid rgba(34,229,138,.2); position:sticky; top:calc(var(--nav-h) + 20px); }
.now-title{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-green); margin-bottom:var(--sp-6); }
.now-row{ padding:var(--sp-4) 0; border-top:1px solid var(--color-border); }
.now-key{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:4px; }
.now-row strong{ font-family:var(--font-display); font-size:19px; font-weight:700; }
.lab-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.lab-card{ padding:var(--sp-6); border-radius:var(--radius-m); background:var(--color-surface); border:1px solid var(--color-border); transition:border-color var(--dur-hover),transform var(--dur-hover); }
.lab-card:hover{ border-color:rgba(19,200,245,.35); transform:translateY(-3px); }
.lab-top{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.lab-id{ font-family:var(--font-mono); font-size:12px; color:var(--brand-cyan); }
.lab-card h4{ font-size:17px; margin-bottom:var(--sp-3); }
.lab-learned{ font-size:13.5px; color:var(--color-text-muted); margin:0; }
.lab-learned b{ color:var(--color-text); font-weight:600; }
@media (max-width:900px){ .now-lab{ grid-template-columns:1fr; } .now-board{ position:static; } }
@media (max-width:560px){ .lab-grid{ grid-template-columns:1fr; } }

/* ---------- code ---------- */
.code-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-6); align-items:start; }
.code-feature{ border-radius:var(--radius-l); overflow:hidden; background:#0A0F19; border:1px solid var(--color-border-strong); box-shadow:0 30px 80px -30px rgba(0,0,0,.7); }
.code-feature img{ width:100%; display:block; }
.code-window-head{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--color-border); }
.code-window-head span{ width:10px; height:10px; border-radius:50%; background:#2A3547; }
.code-window-head span:nth-child(1){ background:#ff5f57; } .code-window-head span:nth-child(2){ background:#febc2e; } .code-window-head span:nth-child(3){ background:#28c840; }
.code-window-head b{ margin-left:10px; font-family:var(--font-mono); font-size:12px; font-weight:400; color:var(--color-text-faint); }
.code-fallback{ margin:0; padding:var(--sp-6); font-size:13.5px; line-height:1.8; color:var(--color-text-muted); overflow-x:auto; }
.c-k{ color:#7aa7ff; } .c-s{ color:var(--brand-green); }
.repo-list{ display:flex; flex-direction:column; gap:var(--sp-3); }
.repo-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-4); padding:var(--sp-5); border-radius:var(--radius-m); border:1px solid var(--color-border); background:var(--color-surface); transition:border-color var(--dur-hover),transform var(--dur-hover); }
.repo-row:hover{ border-color:rgba(19,200,245,.4); transform:translateX(4px); }
.repo-row b{ display:block; font-size:15.5px; } .repo-row small{ font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-faint); }
.repo-index{ font-family:var(--font-mono); font-size:12px; color:var(--brand-cyan); }
.repo-arrow{ color:var(--color-text-faint); }
.stack-strip{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-3); }
.stack-strip span{ font-family:var(--font-mono); font-size:11.5px; padding:5px 11px; border-radius:100px; border:1px solid var(--color-border-strong); color:var(--color-text-muted); }
@media (max-width:900px){ .code-layout{ grid-template-columns:1fr; } }

/* ---------- about ---------- */
.about-layout{ display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--sp-16); align-items:center; }
.about-photo{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-xl); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border-strong); display:grid; place-items:center; }
.about-photo::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); background:linear-gradient(180deg,transparent 60%,rgba(5,7,13,.5)); pointer-events:none; }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.placeholder-mark{ font-family:var(--font-display); font-size:120px; font-weight:700; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.about-title{ font-size:clamp(34px,4.6vw,56px); margin-bottom:var(--sp-6); }
.about-bio .lead{ font-size:20px; color:var(--color-text); line-height:1.55; }
.about-bio p{ color:var(--color-text-muted); }
.about-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin:var(--sp-8) 0 var(--sp-6); }
.about-meta-item{ padding:var(--sp-4); border-radius:var(--radius-m); border:1px solid var(--color-border); background:rgba(255,255,255,.02); }
.about-meta-item .k{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-faint); }
.about-meta-item .v{ font-weight:600; font-size:14.5px; }
.about-tools{ display:flex; flex-wrap:wrap; gap:6px; }
@media (max-width:900px){ .about-layout{ grid-template-columns:1fr; gap:var(--sp-10); } .about-photo{ max-width:380px; } }
@media (max-width:560px){ .about-meta{ grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-12); align-items:start; }
.contact-intro h2{ font-size:clamp(34px,4.6vw,56px); margin-bottom:var(--sp-5); }
.contact-intro > p{ color:var(--color-text-muted); max-width:440px; }
.contact-email{ display:inline-flex; align-items:center; gap:var(--sp-3); font-family:var(--font-display); font-size:clamp(18px,2vw,24px); font-weight:700; margin:var(--sp-4) 0 var(--sp-6); word-break:break-all; }
.contact-email svg{ width:24px; height:24px; color:var(--brand-cyan); flex-shrink:0; }
.contact-email:hover{ color:var(--brand-cyan); }
.contact-card{ padding:var(--sp-8); border-radius:var(--radius-xl); background:var(--color-glass); border:1px solid var(--color-border-strong); backdrop-filter:blur(12px); }
.contact-form{ display:flex; flex-direction:column; gap:var(--sp-4); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.field label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:6px; }
.field input,.field textarea{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--color-border-strong); background:rgba(5,7,13,.6); color:var(--color-text); font:400 15px var(--font-body); transition:border-color var(--dur-hover),box-shadow var(--dur-hover); }
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus,.field textarea:focus{ outline:0; border-color:var(--brand-cyan); box-shadow:0 0 0 4px rgba(19,200,245,.12); }
.contact-form .btn{ align-self:flex-start; }
.form-note{ font-family:var(--font-mono); font-size:11.5px; color:var(--color-text-faint); margin:0; }
.form-alert{ padding:var(--sp-4); border-radius:12px; border:1px solid rgba(34,229,138,.35); background:rgba(34,229,138,.08); color:var(--brand-green); margin-bottom:var(--sp-5); font-size:14px; }
.form-alert.is-error{ border-color:rgba(255,120,120,.35); background:rgba(255,120,120,.08); color:#FF9A9A; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } .contact-card{ padding:var(--sp-6); } }

/* ---------- project detail ---------- */
.detail-hero{ position:relative; overflow:hidden; padding:calc(var(--nav-h) + var(--sp-12)) 0 var(--sp-12); border-bottom:1px solid var(--color-border); }
.detail-hero-grid{ position:relative; display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-12); align-items:end; }
.breadcrumb{ font-family:var(--font-mono); font-size:12px; color:var(--color-text-faint); margin-bottom:var(--sp-5); display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.breadcrumb a{ color:var(--color-text-muted); min-height:var(--touch-min); display:inline-flex; align-items:center; }
.breadcrumb a:hover{ color:var(--brand-cyan); }
.detail-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.detail-facts{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin:0; }
.detail-facts div{ padding:var(--sp-4); border-radius:var(--radius-m); border:1px solid var(--color-border); background:rgba(255,255,255,.025); }
.detail-facts dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-faint); }
.detail-facts dd{ margin:2px 0 0; font-weight:600; }
@media (max-width:900px){ .detail-hero-grid{ grid-template-columns:1fr; gap:var(--sp-8); } }
.detail-wrap{ padding-bottom:var(--sp-16); }
.detail-gallery{ margin:var(--sp-12) 0 0; }
.gallery-main{ position:relative; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--color-border-strong); cursor:zoom-in; background:var(--color-surface); aspect-ratio:16/9; }
.gallery-main img,.gallery-main video{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-expand{ position:absolute; top:var(--sp-4); right:var(--sp-4); width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(5,7,13,.7); backdrop-filter:blur(8px); border:1px solid var(--color-border-strong); }
.gallery-expand svg{ width:16px; height:16px; }
.gallery-thumbs{ display:flex; gap:var(--sp-3); margin-top:var(--sp-4); overflow-x:auto; padding-bottom:4px; }
.gallery-thumb{ width:110px; height:68px; object-fit:cover; border-radius:10px; border:2px solid transparent; opacity:.6; cursor:pointer; flex-shrink:0; transition:opacity var(--dur-hover),border-color var(--dur-hover); }
.gallery-thumb:hover{ opacity:1; } .gallery-thumb.is-active{ border-color:var(--brand-cyan); opacity:1; }
.detail-columns{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-8); margin-top:var(--sp-12); align-items:start; }
.detail-story{ display:flex; flex-direction:column; gap:var(--sp-4); }
.story-block{ padding:var(--sp-8); border-radius:var(--radius-l); background:var(--color-surface); border:1px solid var(--color-border); }
.story-block p:not(.label-mono){ color:var(--color-text-muted); font-size:16px; margin:0; }
.detail-aside{ display:flex; flex-direction:column; gap:var(--sp-4); position:sticky; top:calc(var(--nav-h) + 20px); }
.aside-card{ padding:var(--sp-6); border-radius:var(--radius-l); background:var(--color-surface); border:1px solid var(--color-border); }
.detail-stack{ display:flex; flex-wrap:wrap; gap:6px; }
.metric{ font-family:var(--font-display); font-size:22px; font-weight:700; margin:0; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.trust-list{ list-style:none; padding:0; margin:0 0 var(--sp-4); display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--color-text-muted); }
.trust-list li::before{ content:"✓"; color:var(--brand-green); margin-right:8px; font-weight:700; }
.sha-box{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; background:rgba(5,7,13,.7); border:1px solid var(--color-border); border-radius:12px; padding:var(--sp-3) var(--sp-4); }
.sha-label{ font-family:var(--font-mono); font-size:10.5px; color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.08em; flex-shrink:0; }
.sha-box code{ font-size:12px; color:var(--color-text-muted); word-break:break-all; flex:1; min-width:160px; }
.sha-box .btn{ min-height:34px; padding:0 14px; flex-shrink:0; }
.hint-note{ font-size:12.5px; color:var(--color-text-faint); margin-top:var(--sp-2); }
.detail-nav{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-top:var(--sp-12); }
.detail-nav-link{ display:flex; flex-direction:column; padding:var(--sp-5) var(--sp-6); border-radius:var(--radius-m); border:1px solid var(--color-border); background:var(--color-surface); transition:border-color var(--dur-hover); }
.detail-nav-link:hover{ border-color:rgba(19,200,245,.4); }
.detail-nav-link small{ font-family:var(--font-mono); font-size:11px; color:var(--color-text-faint); text-transform:uppercase; letter-spacing:.08em; }
.detail-nav-link b{ font-family:var(--font-display); font-size:18px; }
.detail-nav-link--next{ text-align:right; }
@media (max-width:900px){ .detail-columns{ grid-template-columns:1fr; } .detail-aside{ position:static; } }
@media (max-width:560px){ .detail-nav{ grid-template-columns:1fr; } .detail-nav-link--next{ text-align:left; } .story-block{ padding:var(--sp-6); } }

.lightbox-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(3,5,10,.94); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }
.lightbox-overlay.is-open{ opacity:1; pointer-events:auto; }
.lightbox-overlay img{ max-width:88vw; max-height:86vh; object-fit:contain; border-radius:12px; }
.lightbox-close,.lightbox-nav{ position:absolute; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid var(--color-border-strong); color:var(--color-text); cursor:pointer; }
.lightbox-close{ top:var(--sp-6); right:var(--sp-6); }
.lightbox-nav{ top:50%; transform:translateY(-50%); } .lightbox-prev{ left:var(--sp-6); } .lightbox-next{ right:var(--sp-6); }
.lightbox-close:hover,.lightbox-nav:hover{ border-color:var(--brand-cyan); }

/* ---------- footer ---------- */
.site-footer{ padding:var(--sp-16) 0 var(--sp-8); border-top:1px solid var(--color-border); }
.footer-cta{ position:relative; overflow:hidden; text-align:center; padding:var(--sp-16) var(--sp-6); border-radius:var(--radius-xl); border:1px solid rgba(19,200,245,.22);
  background:linear-gradient(135deg,#07121C,#060A14); margin-bottom:var(--sp-16); }
.footer-cta-glow{ position:absolute; inset:-40% -10% auto; height:120%; background:radial-gradient(ellipse at 50% 100%,rgba(19,200,245,.22),transparent 60%); pointer-events:none; }
.footer-cta > *{ position:relative; }
.footer-cta h2{ font-size:clamp(34px,5vw,64px); margin-bottom:var(--sp-8); letter-spacing:-.035em; }
.footer-cta-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:var(--sp-3); }
.footer-grid{ display:grid; grid-template-columns:1.2fr 2fr; gap:var(--sp-12); padding-bottom:var(--sp-10); }
.footer-brand p{ color:var(--color-text-muted); font-size:14px; margin:var(--sp-4) 0 var(--sp-5); }
.footer-eps{ display:inline-flex; align-items:center; gap:12px; padding:10px 16px 10px 12px; border-radius:14px; border:1px solid rgba(19,200,245,.25); background:rgba(19,200,245,.05); transition:border-color var(--dur-hover); }
.footer-eps:hover{ border-color:rgba(19,200,245,.6); }
.footer-eps span{ display:flex; flex-direction:column; line-height:1.3; }
.footer-eps b{ font-size:14px; } .footer-eps small{ font-family:var(--font-mono); font-size:11px; color:var(--color-text-faint); }
.footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.footer-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-faint); margin:0 0 var(--sp-4); font-weight:500; }
.footer-col a{ display:block; font-size:14.5px; color:var(--color-text-muted); padding:5px 0; transition:color var(--dur-hover); }
.footer-col a:hover{ color:var(--brand-cyan); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); padding-top:var(--sp-6); border-top:1px solid var(--color-border); font-family:var(--font-mono); font-size:12px; color:var(--color-text-faint); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr; gap:var(--sp-10); } }
@media (max-width:520px){ .footer-cols{ grid-template-columns:1fr 1fr; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity var(--dur-section) var(--ease),transform var(--dur-section) var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

@media (max-width:560px){
  .hero{ padding-top:calc(var(--nav-h) + var(--sp-10)); }
  .hero-actions .btn{ flex:1 1 100%; }
  .hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
  .hero-stats div{ min-width:0; padding:10px 12px; }
  .hero-stats dt{ font-size:9.5px; letter-spacing:.06em; }
  .hero-stats dd{ font-size:18px; }
  .term-body{ font-size:12px; }
}