/* ============================================================
   md tavakoli — resume terminal OS
   cyber-terminal × 3D scroll world · RTL Persian
   ============================================================ */

@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/vazirmatn.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JBMono';
  src:url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:      #05070d;
  --bg2:     #0a0e18;
  --bg3:     #0d1220;
  --panel:   rgba(11,16,28,.86);
  --line:    rgba(140,180,255,.10);
  --line2:   rgba(140,180,255,.18);
  --text:    #dbe5f3;
  --text2:   #9aa7bf;
  --faint:   #76839e;
  --green:   #00ff9c;
  --green2:  #00c97e;
  --cyan:    #00e5ff;
  --purple:  #a78bfa;
  --amber:   #ffb454;
  --red:     #ff5470;
  --sans: 'Vazirmatn', 'Vazirmatn FD', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --mono: 'JBMono', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
  --r-lg: 18px;
  --r-md: 13px;
  --r-sm: 10px;
  --nav-h: 62px;
  --ease: cubic-bezier(.22,.9,.28,1);
  --t-fast:.18s ease;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  background:var(--bg);
}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
::selection{ background:rgba(0,255,156,.22); color:#eafff5 }

/* scrollbar */
::-webkit-scrollbar{ width:11px }
::-webkit-scrollbar-track{ background:#06080f }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#123a2c,#0d2233);
  border:2px solid #06080f; border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:#155f45 }

.ltr{ direction:ltr !important; text-align:left !important; unicode-bidi:isolate }
.mute{ color:var(--faint) }
.green{ color:var(--green) }
.cyan{ color:var(--cyan) }
.purple{ color:var(--purple) }
.amber{ color:var(--amber) }
.red{ color:var(--red) }
.glowg{ text-shadow:0 0 18px rgba(0,255,156,.45) }
.glowc{ text-shadow:0 0 18px rgba(0,229,255,.45) }

[id]{ scroll-margin-top:calc(var(--nav-h) + 18px) }

/* ============ background canvas + fixed ambience ============ */
.bg-canvas{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
}
.bg-tint{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 82% -8%, rgba(126,73,255,.10), transparent 60%),
    radial-gradient(1000px 640px at 4% 24%, rgba(0,229,255,.07), transparent 60%),
    radial-gradient(900px 600px at 60% 118%, rgba(0,255,156,.07), transparent 60%);
}
.scanlines{
  position:fixed; inset:0; z-index:55; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(2,4,9,.55) 100%);
}
.crt-flicker{
  position:fixed; inset:0; z-index:55; pointer-events:none; opacity:0;
  background:rgba(255,255,255,.028);
  animation:crt-flick 7s infinite;
}
@keyframes crt-flick{
  0%,87%,93%,100%{opacity:0}
  89%{opacity:1}
  91%{opacity:.5}
}
.noise{
  position:fixed; inset:-60px; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:noise-shift 1.4s steps(4) infinite;
}
@keyframes noise-shift{
  0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-14px,9px,0)}
  50%{transform:translate3d(10px,-12px,0)} 75%{transform:translate3d(-7px,-6px,0)} 100%{transform:translate3d(0,0,0)}
}

/* ============ nav ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 clamp(14px,3.4vw,34px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, backdrop-filter .3s;
}
.nav.scrolled{
  background:rgba(5,8,14,.78);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-color:var(--line);
}
.nav-brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
}
.nav-brand .caret{
  width:0; height:0;
  border:5px solid transparent; border-right-color:var(--green);
  filter:drop-shadow(0 0 6px rgba(0,255,156,.8));
}
.nav-links{
  display:flex; align-items:center; gap:4px;
  margin-inline-start:auto;
  list-style:none;
}
.nav-links a{
  color:var(--text2);
  text-decoration:none;
  font-size:14px; font-weight:500;
  padding:7px 13px; border-radius:9px;
  border:1px solid transparent;
  transition:color .18s, background .18s, border-color .18s;
  position:relative;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  color:var(--green);
  background:rgba(0,255,156,.06);
  border-color:rgba(0,255,156,.25);
  outline:none;
}
.nav-links .num{
  font-family:var(--mono); font-size:10px; color:var(--faint);
  margin-inline-end:1px;
}
.nav-ham{
  display:none;
  margin-inline-start:auto;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--text);
  width:42px; height:38px; border-radius:10px;
  cursor:pointer; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:15px;
}
.nav-ham:hover{ border-color:var(--line2); color:var(--green) }
.nav-status{
  margin-inline-start:14px;
  font-family:var(--mono); font-size:11px;
  color:var(--green);
  display:flex; align-items:center; gap:7px;
  border:1px solid rgba(0,255,156,.22);
  padding:5px 11px; border-radius:999px;
  background:rgba(0,255,156,.05);
  white-space:nowrap;
}
.nav-status .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
  animation:pulse-dot 2.2s infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(0,255,156,.6)}
  55%{box-shadow:0 0 0 6px rgba(0,255,156,0)}
}

/* ============ shared layout ============ */
main{ position:relative; z-index:5 }
.section{ position:relative; padding:clamp(84px,13vh,140px) 0 }
.container{ width:min(1130px, 92vw); margin-inline:auto }
.head{
  margin-bottom:clamp(34px,6vh,56px);
  position:relative;
}
.tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--cyan);
  padding:7px 14px;
  border:1px solid rgba(0,229,255,.2);
  border-radius:999px;
  background:rgba(0,229,255,.05);
  margin-bottom:20px;
}
.tag::before{ content:''; width:7px; height:7px; border-radius:2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan) }
.h1{
  font-size:clamp(26px,4.6vw,46px);
  font-weight:800; letter-spacing:-.01em;
  line-height:1.4;
  text-shadow:0 2px 30px rgba(0,229,255,.14);
}
.h1 .slash{ font-family:var(--mono); color:var(--green); font-weight:400; margin-inline-end:8px }
.sub{
  margin-top:14px; color:var(--text2);
  max-width:56ch;
  font-size:clamp(15px,1.6vw,16.5px);
}

/* ============ terminal chrome ============ */
.term{
  background:linear-gradient(180deg, rgba(13,18,30,.94), rgba(8,11,20,.94));
  border:1px solid var(--line2);
  border-radius:var(--r-lg);
  position:relative;
  box-shadow:
    0 24px 70px -20px rgba(0,0,0,.75),
    0 0 0 1px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(160,200,255,.08),
    inset 0 0 0 1px rgba(120,255,210,.03);
  overflow:hidden;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.term::after{ /* inner glass glint */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(170,220,255,.05) 0%, transparent 30%);
}
.termbar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.tdot{ width:11px; height:11px; border-radius:50%; flex:none }
.tdot.r{ background:#ff5f57; box-shadow:0 0 8px rgba(255,95,87,.5) }
.tdot.y{ background:#febc2e; box-shadow:0 0 8px rgba(254,188,46,.4) }
.tdot.g{ background:#28c840; box-shadow:0 0 8px rgba(40,200,64,.4) }
.tbar-title{
  margin-inline:auto;
  font-family:var(--mono); font-size:11.5px; color:var(--faint);
  letter-spacing:.08em;
  display:flex; align-items:center; gap:8px;
}
.tbar-title .ic{ color:var(--green2); font-size:13px }
.tbar-meta{
  font-family:var(--mono); font-size:10px; color:var(--faint);
  letter-spacing:.06em;
  display:flex; gap:10px; align-items:center;
}
.tbar-meta .st{ color:var(--green) }

/* ============ hero ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 30px) 0 70px;
}
.hero::before{ /* floor beam accent */
  content:''; position:absolute; left:50%; bottom:0; translate:-50% 0;
  width:min(90vw,820px); height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,255,156,.5), rgba(0,229,255,.5), transparent);
  filter:blur(.4px);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(26px,3.6vw,52px);
  align-items:center;
  width:min(1180px, 94vw); margin-inline:auto;
}
.boot{
  border-radius:var(--r-lg);
  border-color:rgba(0,255,156,.14);
}
.boot-bar .bmin{ margin-inline-start:auto }
.boot-body{
  padding:clamp(16px,2vw,22px) clamp(16px,2vw,22px) 4px;
  font-family:var(--mono);
  font-size:clamp(11.5px,1.25vw,13px);
  line-height:1.95;
  color:var(--text2);
}
.boot-line{ white-space:pre-wrap; word-break:break-word; min-height:1.6em }
.boot-sub{ color:var(--faint); font-size:.92em }
.bcurl{
  color:var(--text);
  opacity:.55;
}
.type{
  color:var(--green);
  text-shadow:0 0 14px rgba(0,255,156,.5);
}
.cursor{
  display:inline-block; width:.62em; height:1.1em;
  background:var(--green);
  vertical-align:middle;
  margin-inline-start:2px;
  box-shadow:0 0 10px rgba(0,255,156,.9);
  animation:cursor-blink 1.05s steps(2,start) infinite;
}
.cursor.amber{ background:var(--amber); box-shadow:0 0 10px rgba(255,180,84,.9) }
@keyframes cursor-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.kv{
  display:grid; grid-template-columns:160px 1fr;
  gap:2px 14px;
  padding:10px 0;
}
.kv .k{ font-family:var(--mono); color:var(--faint); font-size:.92em; letter-spacing:.05em }
.kv .v{ font-family:var(--mono); color:var(--text); word-break:break-all; min-width:0 }
.kv .v.green{ color:var(--green) }
.kv .v.cyan{ color:var(--cyan) }
.kv .v.purple{ color:var(--purple) }

.status{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  margin-top:8px;
}
.status .st-cell{
  background:rgba(10,14,24,.97);
  padding:11px 14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
}
.status .st-k{ color:var(--faint); display:block; margin-bottom:4px }
.status .st-v{ color:var(--text); display:block; font-size:11.5px }
.status .st-v.on{ color:var(--green); text-shadow:0 0 10px rgba(0,255,156,.5) }
.status .st-v.c{ color:var(--cyan) }

/* hero right column — identity + chips */
.hero-id{ position:relative }
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  color:var(--purple);
  margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.kicker::before{ content:''; width:34px; height:1px; background:linear-gradient(90deg,var(--purple),transparent) }
.hero-name{
  font-size:clamp(34px,5.6vw,58px);
  font-weight:900; line-height:1.35;
  letter-spacing:-.015em;
  background:linear-gradient(115deg,#fff 12%, var(--cyan) 48%, var(--green) 90%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 26px rgba(0,229,255,.18));
}
.hero-role{
  margin-top:14px;
  font-size:clamp(15.5px,2vw,19px);
  color:var(--text2);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.hero-role .dot-sep{ width:5px; height:5px; border-radius:50%; background:var(--green2); box-shadow:0 0 8px var(--green2) }
.hero-cta{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:28px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px;
  border-radius:12px;
  font:600 15px var(--sans);
  text-decoration:none; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .25s, background .2s, border-color .2s;
  position:relative; overflow:hidden;
}
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px }
.btn::after{ /* sweep */
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  translate:-130% 0;
  transition:translate .6s var(--ease);
}
.btn:hover::after{ translate:130% 0 }
.btn-solid{
  background:var(--green); color:#03130c;
  box-shadow:0 0 0 1px rgba(0,255,156,.4), 0 10px 30px -10px rgba(0,255,156,.55);
}
.btn-solid:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(0,255,156,.6), 0 16px 40px -12px rgba(0,255,156,.7);
}
.btn-ghost{
  background:rgba(255,255,255,.03);
  color:var(--text);
  border:1px solid var(--line2);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  border-color:rgba(0,229,255,.5);
  box-shadow:0 12px 34px -14px rgba(0,229,255,.45);
  color:var(--cyan);
}
.btn .key{
  font-family:var(--mono); font-size:11px; opacity:.65;
  border:1px solid currentColor; border-radius:5px; padding:1px 6px;
  letter-spacing:.05em;
}

.chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:30px;
}
.chip{
  font-family:var(--mono); font-size:11.5px;
  color:var(--text2);
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  padding:6px 13px; border-radius:999px;
  transition:color .2s, border-color .2s, box-shadow .2s;
  cursor:default;
}
.chip:hover{
  color:var(--green);
  border-color:rgba(0,255,156,.4);
  box-shadow:0 0 16px -4px rgba(0,255,156,.4);
}
/* custom-prop chips with flyout */
.prop-chip{
  position:relative;
  color:var(--text2);
}
.prop-chip .keyname{
  font-family:var(--mono); font-size:11.5px;
  border:1px dashed var(--line2);
  background:rgba(0,255,156,.04);
  color:var(--cyan);
  padding:6px 13px; border-radius:999px;
  transition:all .2s;
  cursor:help;
  display:inline-block;
}
.prop-chip:hover .keyname,
.prop-chip:focus-within .keyname{
  border-style:solid; border-color:var(--cyan);
  box-shadow:0 0 18px -6px var(--cyan);
  color:#fff;
}
.prop-chip .flyout{
  visibility:hidden; opacity:0;
  position:absolute; top:calc(100% + 12px); right:0;
  z-index:30;
  background:#0c1220;
  border:1px solid rgba(0,229,255,.3);
  border-radius:14px;
  padding:14px 16px;
  min-width:250px; max-width:320px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85), 0 0 24px -8px rgba(0,229,255,.35);
  font-family:var(--sans);
  transition:opacity .18s, visibility .18s, translate .18s var(--ease);
  translate:0 6px;
}
.prop-chip:hover .flyout,
.prop-chip:focus-within .flyout{
  visibility:visible; opacity:1; translate:0 0;
}
.flyout .f-head{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; color:var(--cyan); letter-spacing:.08em;
  margin-bottom:8px;
}
.flyout .f-kv{
  font-family:var(--mono); font-size:11px; line-height:1.9;
  color:var(--text2);
}
.flyout .f-kv b{ color:var(--green); font-weight:500 }
.flyout .f-desc{ font-size:12.5px; color:var(--text2); line-height:1.9; margin-top:8px }

.hero-meta{
  margin-top:26px;
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-family:var(--mono); font-size:12px; color:var(--text2);
}
.hero-meta .hm{ display:flex; align-items:center; gap:8px }

.hero-meta a{ color:var(--cyan); text-decoration:none }
.hero-meta a:hover{ text-decoration:underline }

.scroll-hint{
  position:absolute; bottom:26px; right:50%; translate:50% 0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--faint);
  font:400 11px var(--mono);
  letter-spacing:.24em;
  z-index:5;
}
.scroll-hint .mouse{
  width:22px; height:34px;
  border:1.5px solid var(--faint);
  border-radius:12px; position:relative;
}
.scroll-hint .mouse::after{
  content:''; position:absolute; top:6px; left:50%; translate:-50% 0;
  width:3px; height:7px; border-radius:3px;
  background:var(--green);
  animation:wheel 1.8s infinite;
}
@keyframes wheel{ 0%{opacity:1; top:6px} 60%{opacity:0; top:16px} 100%{opacity:0; top:16px} }

/* ============ glitch ============ */
.glitch{ position:relative; display:inline-block }
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
}
.glitch:hover::before{
  opacity:.8; color:var(--red);
  animation:gl-a .32s steps(2) infinite;
  clip-path:inset(12% 0 55% 0);
}
.glitch:hover::after{
  opacity:.8; color:var(--cyan);
  animation:gl-b .4s steps(3) infinite;
  clip-path:inset(62% 0 8% 0);
}
@keyframes gl-a{ 0%{translate:-3px 0} 50%{translate:2px -1px} 100%{translate:-2px 1px} }
@keyframes gl-b{ 0%{translate:3px 0} 50%{translate:-2px 1px} 100%{translate:2px -1px} }

/* ============ contact quick strip (hero bottom / under boot) ============ */
.qpane{
  margin-top:20px;
  display:grid; gap:8px;
  font-family:var(--mono); font-size:12px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(10,14,24,.6);
  padding:12px 16px;
}
.qpane .qr{
  display:grid; grid-template-columns:150px 1fr; gap:2px 12px; align-items:center;
}
.qpane .qk{ color:var(--faint) }
.qpane .qv{ color:var(--text2) }
.qpane a.qv{ color:var(--cyan); text-decoration:none; transition:color .15s }
.qpane a.qv:hover{ color:var(--green) }

/* ============ about (intro) ============ */
.intro{
  grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,3.4vw,48px);
  align-items:stretch;
}
.i-term-body{ padding:18px 20px 8px }
.i-prose{
  font-size:clamp(15px,1.7vw,17px);
  line-height:2.1;
  color:var(--text2);
}
.i-prose p{ margin-bottom:14px }
.i-prose strong{ color:#fff; font-weight:700 }
.i-prose .ln{ color:var(--faint); font-size:.8em; font-family:var(--mono) }
.i-prose .hl{ color:var(--green) }
.i-prose .hlc{ color:var(--cyan) }
.i-half{ display:flex; flex-direction:column; gap:18px }
.stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.stat{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  padding:14px 10px 12px;
  text-align:center;
  transition:border-color .2s, translate .2s;
}
.stat:hover{ border-color:rgba(0,255,156,.35); translate:0 -2px }
.stat .n{
  font-family:var(--mono); font-size:clamp(20px,2.4vw,26px); font-weight:700;
  color:var(--green);
  text-shadow:0 0 16px rgba(0,255,156,.4);
}
.stat .l{ font-size:12px; color:var(--faint); margin-top:4px }
.tag2{
  display:inline-block;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--amber);
  border:1px solid rgba(255,180,84,.3);
  background:rgba(255,180,84,.05);
  padding:4px 10px; border-radius:6px;
  margin-bottom:10px;
}

/* ============ skills ============ */
.hvz .h1{ text-transform:none }
.ring-ctr{
  position:relative;
  height:clamp(340px,42vh,470px);
  margin-bottom:clamp(20px,3vh,30px);
}
#ring{ width:100%; height:100%; display:block }
.rlabel{
  position:absolute; translate:-50% -50%;
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--lc);
  text-shadow:0 0 14px color-mix(in srgb, var(--lc) 70%, transparent), 0 0 2px rgba(0,0,0,.9);
  pointer-events:none;
  white-space:nowrap;
  will-change:left,top;
}
.ring-note{
  position:absolute; bottom:6px; left:50%; translate:-50% 0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  color:var(--faint);
  white-space:nowrap;
}
.ring-note b{ color:var(--cyan); font-weight:500 }
.sk-tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content:center;
  margin-bottom:clamp(20px,3vh,28px);
}
.sk-tab{
  font-family:var(--mono); font-size:12px;
  color:var(--text2);
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 18px; cursor:pointer;
  transition:all .2s;
  position:relative;
}
.sk-tab:hover{ color:#fff; border-color:var(--line2) }
.sk-tab.active{
  color:#03130c; font-weight:700;
  background:var(--green);
  border-color:var(--green);
  box-shadow:0 8px 26px -10px rgba(0,255,156,.7);
}
.sk-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}
.sk-cell{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
  padding:16px 12px 13px;
  min-height:112px;
  transition:border-color .22s, translate .22s var(--ease), box-shadow .25s;
  overflow:hidden;
  cursor:default;
}
.sk-cell::before{ /* top accent */
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--acc,var(--green)), transparent 70%);
  opacity:.45; transition:opacity .2s;
}
.sk-cell:hover,
.sk-cell.focus{
  translate:0 -4px;
  border-color:color-mix(in srgb, var(--acc,var(--green)) 45%, transparent);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.8), 0 0 22px -10px color-mix(in srgb, var(--acc,var(--green)) 55%, transparent);
}
.sk-cell:hover::before,
.sk-cell.focus::before{ opacity:1 }
.sk-cell:focus-visible{ outline:2px solid color-mix(in srgb, var(--acc,var(--green)) 70%, transparent); outline-offset:2px }
.sk-cell.focus{ border-color:color-mix(in srgb, var(--acc,var(--green)) 55%, transparent) }
.sk-ic{
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--acc,var(--green));
  display:block; margin-bottom:8px;
  letter-spacing:.04em;
}
.sk-name{ font-size:14px; font-weight:700; color:#fff; display:block; line-height:1.5 }
.sk-desc{ font-size:11px; color:var(--faint); margin-top:5px; line-height:1.8; display:block }
.sk-cell .bar{
  position:absolute; bottom:0; left:0; height:2px; width:0;
  background:var(--acc,var(--green));
  box-shadow:0 0 8px var(--acc,var(--green));
  transition:width .6s var(--ease);
}
.sk-cell:hover .bar,
.sk-cell.focus .bar{ width:100% }

.sk-synced{ margin-top:16px }
.sk-get{
  margin-top:26px;
  font-family:var(--mono);
  font-size:clamp(11px,1.2vw,12.5px);
}
.sk-get .line{ white-space:pre-wrap; word-break:break-all; line-height:2 }
.sk-meta{
  margin-top:18px;
  display:flex; flex-wrap:wrap; gap:8px 26px;
  font-family:var(--mono); font-size:11px; color:var(--faint);
}
.sk-meta span b{ color:var(--text2); font-weight:500 }

.synced{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.synced .term{ border-radius:var(--r-md) }
.synced .termbar{ padding:9px 13px }
.synced .termbar .tt{ font-size:10.5px }
.synced .body{
  padding:13px 15px;
  font-family:var(--mono); font-size:11.5px; line-height:2.05;
}
.synced .ok{ color:var(--green) }
.synced .dim{ color:var(--faint) }
.synced .cyan2{ color:var(--cyan) }

/* ============ architecture ============ */
.arch{
  position:relative;
}
.arch-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(26px,3.4vw,48px);
  align-items:start;
  margin-bottom:clamp(30px,5vh,44px);
}
.arch-head .pane{ display:none }
.arch .flow{
  display:flex; align-items:stretch; justify-content:center;
  gap:clamp(8px,1.4vw,18px);
  flex-wrap:wrap;
}
.f-node{
  flex:1 1 150px;
  max-width:225px;
  min-width:146px;
  border:1px solid var(--line2);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  padding:16px 16px 13px;
  position:relative;
  transition:border-color .25s, translate .25s var(--ease), box-shadow .3s;
}
.f-node:hover{
  translate:0 -5px;
  border-color:color-mix(in srgb, var(--acc,var(--green)) 55%, transparent);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85), 0 0 24px -12px color-mix(in srgb, var(--acc,var(--green)) 60%, transparent);
}
.f-node .f-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--acc,var(--green));
  display:flex; align-items:center; gap:7px; margin-bottom:9px;
}
.f-node .f-tag::before{ content:'▮'; font-size:8px }
.f-node .f-title{
  font-size:14.5px; font-weight:800; color:#fff; line-height:1.5;
  display:flex; align-items:center; gap:8px;
}
.f-node .f-title .ic{ font-family:var(--mono); font-size:13px }
.f-node .f-desc{ font-size:11.5px; color:var(--faint); margin-top:6px; line-height:1.9 }
.f-node .f-sub{
  margin-top:9px; padding-top:8px;
  border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:10.5px; color:var(--text2);
  display:flex; flex-wrap:wrap; gap:4px 10px;
  line-height:1.9;
}
.f-link{
  display:flex; flex-direction:column; justify-content:center;
  color:var(--faint); font-family:var(--mono); font-size:11px;
  gap:2px; align-items:center; flex:none; padding:4px 0;
}
.f-link .arr{ font-size:15px; color:var(--green); text-shadow:0 0 8px rgba(0,255,156,.7) }
.f-link .pl{ font-size:9.5px; letter-spacing:.06em }
.pulse{
  animation:link-pulse 2.6s var(--ease) infinite;
}
@keyframes link-pulse{
  0%,100%{ opacity:.35 }
  50%{ opacity:1 }
}

.arch-map{
  margin-top:clamp(30px,5vh,44px);
}
.map-frame{
  border:1px solid var(--line2);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(13,18,30,.7), rgba(8,11,20,.9));
  position:relative;
  overflow:hidden;
}
.map-grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(140,180,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(75% 75% at 50% 40%, #000 30%, transparent 100%);
}
.map-heart{
  position:absolute; inline-size:14px; block-size:14px;
  top:14px; left:14px;
  background:var(--red);
  transform:rotate(45deg);
  filter:drop-shadow(0 0 8px rgba(255,84,112,.8)) drop-shadow(0 0 26px rgba(255,84,112,.4));
  animation:heart-beat 1.9s ease-in-out infinite;
  border-radius:3px;
}
.map-heart::before,.map-heart::after{
  content:''; position:absolute; width:14px; height:14px;
  background:var(--red); border-radius:50%;
  top:-7px; left:0;
}
.map-heart::after{ left:7px; top:0 }
@keyframes heart-beat{ 0%,100%{scale:1} 12%{scale:1.18} 22%{scale:1} 34%{scale:1.12} 44%{scale:1} }
.map-hero-desktop{
  display:flex; gap:clamp(22px,3vw,44px);
  align-items:center;
  padding:clamp(26px,4vw,44px);
  position:relative;
}
.map-msg{
  flex:1;
  font-size:clamp(14.5px,1.9vw,17.5px);
  line-height:2.1;
  color:var(--text2);
}
.map-msg .big{
  font-size:clamp(17px,2.4vw,23px);
  font-weight:800; color:#fff; line-height:1.8;
  margin-bottom:8px;
}
.map-msg .big .g{ color:var(--green); text-shadow:0 0 18px rgba(0,255,156,.5) }
.map-msg ul{ list-style:none; margin-top:6px }
.map-msg li{
  display:flex; gap:10px; align-items:baseline;
  margin-top:9px;
}
.map-msg li::before{
  content:'●'; color:var(--green2); font-size:8px;
  text-shadow:0 0 8px var(--green2);
  align-self:center;
}
.map-msg li::after{
  content:''; flex:1; border-bottom:1px dashed rgba(140,180,255,.14);
}
.map-msg li span{ color:var(--faint); font-size:.85em; font-family:var(--mono); padding-inline-start:8px; white-space:nowrap }
.arch-side{
  display:flex; flex-direction:column; gap:16px;
}
.arch-side .termbar{ padding:10px 14px }
.arch-side .tbar-title{ font-size:10.5px }
.arch-side .body{
  padding:14px 16px;
  font-family:var(--mono); font-size:11.5px; line-height:2.05;
}
.arch-side .ok{ color:var(--green) }
.arch-side .dim{ color:var(--faint) }
.arch-side .cyan2{ color:var(--cyan) }
.arch-side .amber2{ color:var(--amber) }
.arch-side .purple2{ color:var(--purple) }
.arch-side .bar-track{
  height:5px; border-radius:4px;
  background:rgba(140,180,255,.08);
  overflow:hidden; margin:6px 0 2px;
}
.arch-side .bar-fill{
  height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow:0 0 10px rgba(0,255,156,.5);
  transition:width 1.1s var(--ease);
}
.arch-side .pr-label{
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--faint);
  font-family:var(--mono);
  margin-top:2px;
}

/* ============ capabilities ============ */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.cap{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006));
  padding:20px 20px 18px;
  transition:border-color .22s, translate .22s var(--ease), box-shadow .28s;
  overflow:hidden;
}
.cap::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(420px 200px at 50% -60px, color-mix(in srgb, var(--acc) 12%, transparent), transparent 70%);
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.cap:hover{
  translate:0 -4px;
  border-color:color-mix(in srgb, var(--acc) 45%, transparent);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.85), 0 0 30px -14px color-mix(in srgb, var(--acc) 55%, transparent);
}
.cap:hover::after{ opacity:1 }
.cap .id{
  font-family:var(--mono); font-size:11px; color:var(--faint);
  display:flex; justify-content:space-between; margin-bottom:14px;
}
.cap .id .chk{ color:var(--green); text-shadow:0 0 8px rgba(0,255,156,.6) }
.cap h3{
  font-size:16.5px; font-weight:800; color:#fff;
  display:flex; align-items:center; gap:10px;
  margin-bottom:9px;
}
.cap h3 .gl{
  font-family:var(--mono); font-size:12px; color:var(--acc);
  text-shadow:0 0 12px color-mix(in srgb, var(--acc) 70%, transparent);
}
.cap p{ font-size:13.5px; color:var(--text2); line-height:2; }
.cap .tags{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;
}
.cap .tags span{
  font-family:var(--mono); font-size:10px;
  color:var(--text2);
  border:1px solid var(--line);
  padding:3px 9px; border-radius:6px;
  background:rgba(255,255,255,.02);
}
.cap:hover .tags span{ color:color-mix(in srgb, var(--acc) 80%, #fff) }

/* ============ contact ============ */
.contact{
  position:relative;
  overflow:hidden;
}
.contact::before{
  content:'';
  position:absolute; left:50%; top:0; translate:-50% 0;
  width:min(92vw,760px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,255,156,.55), rgba(0,229,255,.55), transparent);
}
.gterm{
  max-width:880px; margin-inline:auto;
}
.gterm .termbar{ padding:13px 18px }
.gterm .body{
  padding:clamp(18px,2.6vw,30px);
  font-family:var(--mono);
  font-size:clamp(11.5px,1.35vw,13.5px);
  line-height:2.1;
}
.gterm .cl{ white-space:pre-wrap; word-break:break-word; min-height:1.7em }
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;
  margin:clamp(22px,4vh,34px) 0 10px;
}
.c-link{
  display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  padding:18px 18px 15px;
  text-decoration:none; color:var(--text);
  transition:border-color .22s, translate .22s var(--ease), box-shadow .28s;
  position:relative;
}
.c-link:hover{
  translate:0 -4px;
  border-color:color-mix(in srgb, var(--acc) 50%, transparent);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85), 0 0 30px -12px color-mix(in srgb, var(--acc) 55%, transparent);
}
.c-link .c-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--acc); display:flex; align-items:center; gap:7px;
}
.c-link .c-tag::before{ content:'❯'; }
.c-link .c-val{
  font-size:clamp(15.5px,1.9vw,18.5px); font-weight:800; color:#fff;
  direction:ltr; text-align:left;
  font-family:var(--mono);
  letter-spacing:.02em;
  word-break:break-all;
}
.c-link .c-hint{
  font-size:11.5px; color:var(--faint);
  display:flex; align-items:center; gap:7px;
}
.c-link .c-hint::after{ content:'↗'; color:var(--acc); font-size:13px }
.c-grid-label{
  grid-column:1/-1;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  color:var(--faint);
  text-align:center;
}
.gterm .reply{
  margin-top:16px;
  border:1px solid rgba(0,255,156,.25);
  border-radius:var(--r-md);
  background:rgba(0,255,156,.04);
  padding:14px 18px;
  font-family:var(--sans);
}
.gterm .reply .rr{
  display:grid; grid-template-columns:170px 1fr; gap:2px 14px;
  font-family:var(--mono); font-size:12px; line-height:2;
}
.gterm .reply .rk{ color:var(--faint) }
.gterm .reply .rv{ color:var(--green) }
.gterm .reply .msg{ font-size:15px; color:var(--text); margin-top:10px; line-height:2.1 }
.gterm .reply .msg::before{ content:'"'; color:var(--green) }
.gterm .reply .msg::after{ content:'"'; color:var(--green) }

/* ============ footer ============ */
footer{
  position:relative; z-index:5;
  border-top:1px solid var(--line);
  padding:34px 0 40px;
}
.foot-inner{
  width:min(1130px,92vw); margin-inline:auto;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.foot-mono{ font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.05em }
.foot-mono b{ color:var(--green); font-weight:500 }
.foot-right{ margin-inline-start:auto; display:flex; align-items:center; gap:14px }
.foot-heart{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--faint) }
.foot-heart .h{ color:var(--red); animation:heart-beat 1.9s ease-in-out infinite; display:inline-block }
.foot-links{ display:flex; gap:6px }
.foot-links a{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:11px;
  color:var(--text2); text-decoration:none;
  transition:all .2s;
}
.foot-links a:hover{
  color:var(--green); border-color:rgba(0,255,156,.45);
  box-shadow:0 0 20px -8px rgba(0,255,156,.6);
  translate:0 -2px;
}

/* ============ reveal-on-scroll ============ */
.ros{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0s);
}
.ros.in{ opacity:1; transform:none }

/* ============ mobile ============ */
@media (max-width:1020px){
  .hero-grid{ grid-template-columns:1fr; gap:34px }
  .hero{ padding-top:calc(var(--nav-h) + 34px) }
  .hero-id{ order:-1 }
  .sk-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .intro{ grid-template-columns:1fr }
  .arch-grid{ grid-template-columns:1fr }
  .cap-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .map-hero-desktop{ flex-direction:column; align-items:flex-start }
}
@media (max-width:900px){
  .nav-status{ display:none }
}
@media (max-width:760px){
  .nav-links{ display:none }
  .nav-ham{ display:flex }
  .nav-status{ display:none }
  .nav-links.open{
    display:flex;
    position:absolute; top:calc(var(--nav-h) + 8px); right:14px; left:14px;
    flex-direction:column; align-items:stretch;
    background:rgba(7,10,18,.97);
    border:1px solid var(--line2); border-radius:16px;
    padding:10px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
  }
  .nav-links.open a{ padding:12px 14px; font-size:15px }
  .sk-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .sk-cell{ min-height:100px; padding:13px 10px 11px }
  .sk-name{ font-size:13px }
  .sk-desc{ font-size:10px; display:block }
  .cap-grid{ grid-template-columns:1fr }
  .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .stat .l{ font-size:10.5px }
  .synced{ grid-template-columns:1fr }
  .contact-grid{ grid-template-columns:1fr }
  .flow{ flex-direction:column; align-items:stretch }
  .f-link{ flex-direction:row; padding:2px 0 }
  .f-link .arr{ transform:rotate(90deg) }
  .status{ grid-template-columns:1fr 1fr }
  .status .st-cell:last-child{ grid-column:1/-1 }
  .gterm .body{ font-size:11.5px; line-height:2 }
  .gterm .reply .rr{ grid-template-columns:1fr; gap:0 }
  .hero-meta{ gap:8px 14px }
  .hero{ padding-bottom:118px }
  .scroll-hint{ top:auto; bottom:4px }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ros{ opacity:1; transform:none }
  .noise,.scanlines,.crt-flicker{ display:none }
}
/* check marks in principles terminal */
.green-check{ color:var(--green); text-shadow:0 0 10px rgba(0,255,156,.55) }

/* hero subtitle */
.hero-sub{ font-size:clamp(15px,1.7vw,16.5px); line-height:2.05 }
.ring-fallback{
  font-family:var(--mono); color:var(--faint);
  text-align:center; padding-top:8em; font-size:12px; letter-spacing:.14em;
}
.sk-getbody{
  font-family:var(--mono);
  font-size:clamp(11px,1.2vw,12.5px);
}