/* ——— tokens ——— */
:root{
  --bg: #0A0A0B;
  --bg-soft: #0F0F10;
  --panel: #141416;
  --panel-2: #1A1A1E;
  --panel-3: #1E1E22;
  --line: #232326;
  --line-2: #2A2A2E;
  --text: #EDE9E3;
  --muted: #9A9590;
  --muted-2: #6B6763;
  --faint: #3A3937;
  --accent: #EAB308;
  --accent-2: #D9A441;
  --accent-soft: rgba(234,179,8,.12);
  --radius: 18px;
  --radius-lg: 24px;
  --max: 1200px;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: "Fragment Mono", "JetBrains Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.mono{font-family:var(--mono); letter-spacing:.02em}
.serif{font-family:var(--serif); font-weight:400; font-style:normal}

/* grain */
.grain{
  position:fixed; inset:0; pointer-events:none; opacity:.045; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* layout helpers */
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; z-index:1}
.kicker{font-size:11px; letter-spacing:.14em; color:var(--muted); margin-bottom:14px}
.section__head{display:flex; gap:40px; align-items:flex-end; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap}
.section__head h2{font-size:clamp(32px,4.2vw,48px); line-height:.95; letter-spacing:-.04em; margin:0; font-weight:700}
.section__head h2 .serif{font-size:1.06em; letter-spacing:-.03em}
.section__desc{max-width:420px; color:var(--muted); font-size:15px; line-height:1.6; margin:0}
@media(max-width:900px){ .section__head{flex-direction:column; align-items:flex-start} }

/* nav */
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(18px) saturate(1.1);
  background: rgba(10,10,11,.72);
  border-bottom:1px solid var(--line);
}
.nav__inner{max-width:var(--max); margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.nav__brand{display:flex; align-items:center; gap:12px}
.nav__avatar{
  width:38px; height:38px; object-fit:contain; display:block;
  background: transparent; border: none; border-radius: 0;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
  image-rendering: -webkit-optimize-contrast;
}
.nav__avatar--sm{width:30px; height:30px}
.nav__name strong{display:block; font-size:14px; font-weight:650; letter-spacing:-.02em; line-height:1}
.nav__name span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-top:3px}
.nav__links{display:flex; align-items:center; gap:22px}
.nav__links a{font-size:13px; color:var(--muted); font-weight:500; letter-spacing:.01em}
.nav__links a:hover{color:var(--text)}
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  background: var(--text); color: var(--bg) !important;
  font-size:13px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent;
}
.nav__cta:hover{transform:translateY(-1px)}
.nav__burger{width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--panel); display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.nav__burger span{width:16px; height:1.5px; background:var(--text); display:block; border-radius:999px}
.nav__mobile{display:none; padding:0 24px 18px; flex-direction:column; gap:10px}
.nav__mobile a{padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); font-size:14px; color:var(--muted)}
@media(max-width:820px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__mobile.is-open{display:flex}
}

/* hero */
.hero{position:relative; z-index:1; border-bottom:1px solid var(--line); background: radial-gradient(900px 600px at 70% 10%, rgba(234,179,8,.07), transparent 60%), radial-gradient(700px 500px at 10% 90%, rgba(255,255,255,.03), transparent 60%), var(--bg)}
.hero__grid{max-width:var(--max); margin:0 auto; padding:48px 24px 32px; display:grid; grid-template-columns: 1.05fr 0.90fr; gap:28px; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase;
  border:1px solid var(--line); background: rgba(255,255,255,.02); padding:8px 12px; border-radius:999px;
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px var(--accent-soft); display:inline-block}
.dot--green{background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.14)}
.eyebrow__sep{opacity:.3}
.hero__copy{padding:0; max-width:760px}
.hero__title{font-size:clamp(42px,6vw,68px); line-height:.88; letter-spacing:-.05em; font-weight:700; margin:22px 0 18px}
.hero__title .serif{font-style:normal; font-weight:400; letter-spacing:-.04em; color: var(--muted); display:block; margin-top:2px}
.hero__lead{font-size:16.5px; line-height:1.65; color: #CFCAC2; max-width:560px; margin:0 0 24px; font-weight:400}
.hero__lead strong{color:var(--text); font-weight:600}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px}
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:12px 18px; border-radius:999px; font-size:14px; font-weight:600; letter-spacing:-.01em;
  border:1px solid var(--line-2); transition:.18s ease; cursor:pointer; white-space:nowrap;
}
.btn--primary{background:var(--text); color:var(--bg); border-color:var(--text)}
.btn--primary:hover{transform:translateY(-1px); background:#fff}
.btn--ghost{background: rgba(255,255,255,.04); color:var(--text); backdrop-filter: blur(8px)}
.btn--ghost:hover{background: rgba(255,255,255,.08); border-color: #3A3A3E}
.btn--sm{padding:10px 14px; font-size:13px}
.btn--block{width:100%}
.hero__meta{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; border-top:1px solid var(--line); padding-top:20px; margin-top:8px}
.meta__num{font-family:var(--serif); font-size:28px; line-height:1; display:block; font-weight:400; letter-spacing:-.03em}
.meta__label{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); line-height:1.45; margin-top:8px; display:block}
.meta__label em{font-style:normal; color:var(--muted-2); letter-spacing:.06em; display:block; margin-top:2px; font-size:10px}

/* liquid glass — replaces 3D cube */
.hero__glass{
  position:relative; min-height:480px; border-radius: var(--radius-lg);
  overflow:hidden; display:flex; align-items:center; justify-content:center; padding:20px;
  background: radial-gradient(700px 420px at 50% 0%, rgba(234,179,8,0.07), transparent 62%), linear-gradient(180deg, #0F0F11 0%, #0A0A0B 100%);
  border:1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass{
  position:relative; width:min(380px, 100%); border-radius:20px; overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.032) 48%, rgba(255,255,255,0.06) 100%);
  backdrop-filter: blur(20px) saturate(1.35) brightness(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.35) brightness(1.06);
  border:1px solid rgba(255,255,255,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.04), 0 14px 36px rgba(0,0,0,0.38), 0 2px 10px rgba(0,0,0,0.24);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:1;
  background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, transparent 20%, transparent 84%, rgba(255,255,255,0.04) 100%);
  opacity:0.95;
}
.glass::after{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:2;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.07) 38%, rgba(255,255,255,0.15) 43.5%, rgba(255,255,255,0.05) 48.5%, transparent 62%);
  opacity:0; transform: translateX(-32%) skewX(-12deg);
  filter: blur(0.6px); mix-blend-mode: overlay;
  transition: opacity 0.32s ease;
}
.hero__glass:hover .glass::after{opacity:1; animation: glassSheen 1.65s ease-out forwards}
@keyframes glassSheen{
  0%{transform: translateX(-42%) skewX(-13deg)}
  100%{transform: translateX(42%) skewX(-13deg)}
}
.glass__highlight{
  position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:2; opacity:0;
  background: radial-gradient(240px 180px at var(--mx,50%) var(--my,45%), rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 36%, transparent 68%);
  mix-blend-mode: soft-light; filter: blur(0.8px);
  transition: opacity 0.28s ease;
}
.hero__glass:hover .glass__highlight{opacity:0.72}
.glass__header{position:relative; z-index:3}
.glass__code{position:relative; z-index:3}
.glass__footer{position:relative; z-index:3}

@media(max-width:980px){
  .hero__grid{grid-template-columns:1fr; gap:22px; padding-top:32px}
  .hero__glass{min-height:400px; order:-1}
}
@media(max-width:560px){
  .hero__meta{grid-template-columns:1fr 1fr 1fr; gap:10px}
  .meta__num{font-size:24px}
  .hero__glass{min-height:360px; padding:14px}
  .glass{width:100%}
}
.hero__terminal{
  position:relative; border-radius:12px; overflow:hidden;
  background:#0F0F10; border:1px solid #1F1F22;
  box-shadow: 0 16px 40px rgba(0,0,0,0.42), 0 2px 10px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
}
.term__header{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#1C1C1F; border-bottom:1px solid #232326;
}
.term__dots{display:flex; gap:6px}
.term__dots i{width:12px; height:12px; border-radius:50%; display:block; border:1px solid rgba(0,0,0,0.15)}
.term__dots i:nth-child(1){background:#FF5F56}
.term__dots i:nth-child(2){background:#FFBD2E}
.term__dots i:nth-child(3){background:#27C93F}
.term__title{flex:1; text-align:center; font-size:11px; color:var(--muted); letter-spacing:.04em}
.term__body{
  padding:14px 16px 18px; font-family:var(--mono); font-size:12.6px; line-height:1.75; color:#D9D9D9;
  background:#0B0B0C;
}
.term__line{white-space:pre-wrap; word-break:break-word}
.term__prompt{color:#EAB308; margin-right:8px; font-weight:700}
.term__out{color:#EDE9E3; padding-left:18px}
.term__out.muted{color:var(--muted); font-size:11.5px}
.term__cursor{display:inline-block; width:8px; height:15px; background:#EAB308; margin-left:2px; vertical-align:middle; animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1} 50.1%,100%{opacity:0}}
@media(max-width:980px){
  .hero__grid{grid-template-columns:1fr; gap:22px; padding-top:32px}
  .hero__terminal{order:-1}
}

/* ticker */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--panel); overflow:hidden; margin-top:28px}
.ticker__track{display:flex; gap:18px; align-items:center; white-space:nowrap; padding:12px 0; animation:marquee 28s linear infinite; will-change:transform}
.ticker__track span{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted)}
.ticker__track i{color:var(--faint); font-style:normal}
@keyframes marquee{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}

/* approach */
.approach{padding:72px 0; background: var(--bg-soft); border-bottom:1px solid var(--line)}
.approach__grid{display:grid; grid-template-columns: repeat(3,1fr); gap:18px}
.approach__card{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding:22px 22px 18px; position:relative; overflow:hidden;
}
.approach__card::before{
  content:""; position:absolute; inset:0; background: radial-gradient(400px 200px at 80% 0%, rgba(234,179,8,.06), transparent 60%);
  pointer-events:none;
}
.approach__num{font-size:11px; letter-spacing:.12em; color:var(--muted-2); margin-bottom:14px}
.approach__card h3{margin:0 0 10px; font-size:18px; letter-spacing:-.02em; font-weight:650}
.approach__card p{margin:0; color: #C2BEB8; font-size:14px; line-height:1.65}
.approach__foot{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:10.5px; letter-spacing:.1em; color:var(--muted-2); text-transform:uppercase}
@media(max-width:900px){ .approach__grid{grid-template-columns:1fr} }

/* work */
.work{padding:72px 0; background: var(--bg); border-bottom:1px solid var(--line)}
.work__grid{display:grid; gap:20px}
.project{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; transition: border-color .2s, transform .2s;
}
.project:hover{border-color: #2E2E32}
.project--featured{border-color: #2E2E32; background: linear-gradient(180deg, #18181B 0%, #141416 100%)}
.project__top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line); background: rgba(255,255,255,.01)}
.project__eyebrow{font-size:10.5px; letter-spacing:.12em; color:var(--muted)}
.project__year{font-size:10.5px; letter-spacing:.1em; color:var(--muted-2)}
.tag{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; font-weight:700; line-height:1; vertical-align:middle; margin-left:8px}
.tag--unfinished{background:#ef4444; color:#fff; border:1px solid #ef4444}
.tag--unfinished::before{content:""; width:6px; height:6px; border-radius:50%; background:#fff; display:inline-block; opacity:.95}
.project__body{display:grid; grid-template-columns: 1.15fr .85fr; gap:0}
.project__main{padding:22px 22px 22px 22px; border-right:1px solid var(--line)}
.project__main h3{margin:0; font-size:26px; letter-spacing:-.03em; font-weight:750}
.project__tagline{margin:6px 0 14px; color: var(--accent-2); font-size:13.5px; font-weight:500; letter-spacing:-.01em}
.project__text{margin:0; color: #C2BEB8; font-size:14px; line-height:1.65}
.project__text code{font-family:var(--mono); font-size:12px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:1px 6px; border-radius:6px; color: var(--text)}
.project__bullets{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.project__bullets li{position:relative; padding-left:16px; font-size:13px; color: #D6D0C8; line-height:1.5}
.project__bullets li::before{content:"—"; position:absolute; left:0; color:var(--muted-2); font-family:var(--mono); font-size:11px; top:1px}
.project__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.project__tags span{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color: var(--muted)}
.project__links{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.project__visual{padding:18px; background: linear-gradient(180deg, rgba(255,255,255,.01), transparent), var(--panel-2); display:flex; flex-direction:column; gap:14px}
.codecard{background:#0B0B0C; border:1px solid var(--line-2); border-radius:14px; overflow:hidden}
.codecard__head{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; font-size:10.5px; letter-spacing:.08em; color:var(--muted); border-bottom:1px solid var(--line); background: #0F0F10}
.codecard pre{margin:0; padding:14px 14px 12px; font-family:var(--mono); font-size:12px; line-height:1.6; color:#D9D4CF; overflow:auto; white-space:pre}
.codecard__foot{display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-top:1px solid var(--line); background:#0F0F10; font-size:10px; color:var(--muted-2); letter-spacing:.08em}
.c{color:#6B7280} .k{color:#EAB308} .v{color:#60A5FA} .s{color:#A7F3D0} .n{color:#F472B6} .o{color:#9CA3AF}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.stat{background: var(--panel-3); border:1px solid var(--line); border-radius:12px; padding:10px 12px; text-align:center}
.stat .mono{font-size:10px; letter-spacing:.1em; color:var(--muted); display:block}
.stat strong{font-size:16px; letter-spacing:-.02em; margin-top:4px; display:block}
.nex__preview{background:#0B0B0C; border:1px solid var(--line-2); border-radius:14px; overflow:hidden}
.nex__bar{padding:10px 12px; border-bottom:1px solid var(--line); background:#0F0F10; font-size:10.5px; letter-spacing:.08em; color:var(--muted)}
.nex__rows{display:grid; gap:0}
.nex__row{display:grid; grid-template-columns: 80px 1fr 90px; gap:10px; padding:10px 12px; font-size:12.5px; border-bottom:1px solid rgba(255,255,255,.04); align-items:center}
.nex__row span:first-child{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.nex__row span:nth-child(2){font-family:var(--mono); font-size:11px; color:#D9D4CF}
.nex__row span:last-child{font-family:var(--mono); font-size:11px; color:var(--muted-2); text-align:right}
.nex__cmd{padding:10px 12px; font-size:11px; color: var(--muted); background:#0F0F10; border-top:1px solid var(--line)}
.risk{background:#0B0B0C; border:1px solid var(--line-2); border-radius:14px; overflow:hidden; padding:14px}
.risk__head{font-size:10.5px; letter-spacing:.1em; color:var(--muted); margin-bottom:12px}
.risk__bars{display:grid; gap:12px}
.risk__bar{display:grid; grid-template-columns: 98px 1fr 110px; gap:10px; align-items:center; font-size:11px}
.risk__bar .mono{font-size:10.5px; letter-spacing:.08em; color:var(--muted)}
.risk__bar .bar{height:6px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.04)}
.risk__bar .bar i{display:block; height:100%; border-radius:999px}
.risk__foot{margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:10.5px; letter-spacing:.06em; color:var(--muted-2)}
@media(max-width:980px){
  .project__body{grid-template-columns:1fr}
  .project__main{border-right:none; border-bottom:1px solid var(--line)}
}

.work__more{margin-top:22px; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; background: var(--panel)}
.more__head{padding:14px 18px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.12em; color:var(--muted); background: rgba(255,255,255,.01)}
.more__grid{display:grid; grid-template-columns: repeat(3,1fr); gap:0}
.more__card{padding:18px; border-right:1px solid var(--line); display:block; transition: background .18s}
.more__card:last-child{border-right:none}
.more__card:hover{background: rgba(255,255,255,.02)}
.more__card .mono{font-size:10.5px; letter-spacing:.1em; color:var(--muted-2)}
.more__card h4{margin:10px 0 8px; font-size:15px; letter-spacing:-.02em}
.more__card p{margin:0; font-size:13px; line-height:1.6; color:var(--muted)}
.more__link{margin-top:12px; display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--text); border-bottom:1px solid var(--line-2); padding-bottom:2px}
.more__card--muted{opacity:.9}
.more__card--alt{background: repeating-linear-gradient( -45deg, transparent 0 10px, rgba(255,255,255,.01) 10px 11px)}
@media(max-width:820px){ .more__grid{grid-template-columns:1fr} .more__card{border-right:none; border-bottom:1px solid var(--line)} .more__card:last-child{border-bottom:none} }

/* stack */
.stack{padding:72px 0; background: var(--bg-soft); border-bottom:1px solid var(--line)}
.stack__grid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px}
.stack__group{background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding:18px}
.stack__label{font-size:10.5px; letter-spacing:.12em; color:var(--muted-2); margin-bottom:14px}
.stack__chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 11px; border-radius:999px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  font-size:13px; font-weight:500; letter-spacing:-.01em; color:#D6D0C8;
}
.chip i{width:8px; height:8px; border-radius:50%; display:inline-block}
.chip--strong{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: var(--text)}
.stack__list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.stack__list li{position:relative; padding-left:14px; font-size:14px; color:#C2BEB8; line-height:1.5}
.stack__list li::before{content:"·"; position:absolute; left:0; color:var(--accent); font-weight:700}
@media(max-width:900px){ .stack__grid{grid-template-columns:1fr} }

/* connect */
.connect{padding:72px 0; background: var(--bg)}
.connect__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; align-items:start}
.connect__copy h2{font-size:clamp(30px,4vw,42px); line-height:.95; letter-spacing:-.04em; margin:10px 0 14px}
.connect__copy p{margin:0; color:var(--muted); font-size:15px; line-height:1.65; max-width:560px}
.socials{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.social{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px; background: var(--panel);
  color: var(--muted); transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.social:hover{border-color:#2E2E32; background: var(--panel-2); color: var(--text); transform: translateY(-1px)}
.social:active{transform: translateY(0) scale(.98)}
.email-cta{display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap}
.email-label{font-size:10.5px; letter-spacing:.12em; color:var(--muted-2)}
.email-link{font-size:13px; letter-spacing:.02em; color:var(--text); border-bottom:1px solid var(--line-2); padding-bottom:2px; word-break:break-all}
.email-link:hover{color:#fff; border-color:var(--accent)}
.connect__card{background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden}
.connect__card__top{padding:12px 18px; border-bottom:1px solid var(--line); background: rgba(255,255,255,.01); font-size:11px; letter-spacing:.12em; color:var(--muted)}
.connect__card__body{padding:18px}
.connect__card__body p{margin:0; color: #C2BEB8; font-size:14px; line-height:1.65}
.connect__badge{display:flex; align-items:center; gap:8px; margin:16px 0; padding:10px 12px; border-radius:12px; background: rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.14); font-size:10.5px; color:#86EFAC; letter-spacing:.08em}
.connect__foot{margin-top:12px; text-align:center; font-size:10.5px; letter-spacing:.06em; color:var(--muted-2)}
@media(max-width:980px){ .connect__grid{grid-template-columns:1fr} }

/* footer */
.footer{border-top:1px solid var(--line); background: var(--bg-soft); padding:18px 0}
.footer__inner{display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap}
.footer__left{display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.06em; color:var(--muted)}
.footer__right{display:flex; gap:10px; align-items:center; font-size:11px; letter-spacing:.08em}
.footer__right a{color:var(--muted); border-bottom:1px solid transparent}
.footer__right a:hover{color:var(--text); border-color:var(--line-2)}
.repos-asterisk{color:var(--accent); text-decoration:none; margin-left:2px; font-size:13px; line-height:1; vertical-align:super; font-weight:800}
.repos-asterisk:hover{color:#fff}
.repos-note{border-top:1px solid var(--line); background: var(--bg-soft); padding:14px 0}
.repos-note p{margin:0; font-size:11px; letter-spacing:.06em; color:var(--muted); line-height:1.6}
.repos-note code{font-family:var(--mono); font-size:10.5px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); padding:1px 5px; border-radius:5px; color:var(--text)}

/* safe-area for notched phones */
@supports(padding:max(0px)){
  .nav__inner{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
  .wrap{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
}
/* glowing cursor */
.cursor{
  position:fixed; top:0; left:0; width:28px; height:28px; border-radius:50%;
  border:1.5px solid rgba(234,179,8,.9);
  background: radial-gradient(circle, rgba(234,179,8,.18) 0%, rgba(234,179,8,.06) 42%, transparent 74%);
  box-shadow: 0 0 14px rgba(234,179,8,.55), 0 0 32px rgba(234,179,8,.22);
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:9999; opacity:0;
  transition: opacity .18s ease, width .18s ease, height .18s ease, background .18s ease, box-shadow .18s ease;
  will-change: transform, opacity;
}
.cursor-dot{
  position:fixed; top:0; left:0; width:30px; height:30px; background:transparent;
  transform:translate(0,0);
  pointer-events:none; z-index:10000; opacity:0;
  transition: opacity .18s ease, transform .15s ease;
  will-change: transform, opacity;
}
.cursor-dot svg{width:100%; height:100%; display:block; overflow:visible}
.cursor.is-visible, .cursor-dot.is-visible{opacity:1}
.cursor.is-hover{width:46px; height:46px; background: radial-gradient(circle, rgba(234,179,8,.28) 0%, rgba(234,179,8,.12) 46%, transparent 76%); box-shadow: 0 0 18px rgba(234,179,8,.75), 0 0 44px rgba(234,179,8,.32)}
.cursor-dot.is-hover{transform:translate(0,0) scale(1.06)}
.cursor.is-active{transform:translate(-50%,-50%) scale(0.92)}
.cursor-dot.is-active{transform:translate(0,0) scale(0.94)}
@media (hover: hover) and (pointer: fine){
  body, a, button, [role="button"]{cursor:none !important}
}
@media (hover: none), (pointer: coarse){
  .cursor, .cursor-dot{display:none !important}
}

/* responsive — all aspect ratios & devices */
*{min-width:0}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{overflow-x:hidden}
a, button{touch-action:manipulation}
img, video{height:auto}
.wrap{padding-left:clamp(16px, 4vw, 24px); padding-right:clamp(16px, 4vw, 24px)}
@media(max-width:1200px){
  .nav__inner{padding-left:20px; padding-right:20px}
}
@media(max-width:768px){
  .nav__inner{padding:12px 16px; gap:12px}
  .hero{padding-bottom:4px}
  .hero__grid{padding:32px 16px 24px; gap:20px}
  .section__head h2{font-size:clamp(28px, 7vw, 36px)}
  .section__head{margin-bottom:28px; gap:20px}
  .approach, .work, .stack, .connect{padding:48px 0}
  .project__main{padding:18px 16px}
  .project__main h3{font-size:22px}
  .project__visual{padding:14px}
  .codecard pre{font-size:11px; padding:12px}
  .nex__row{grid-template-columns: 72px 1fr 72px; gap:8px; padding:8px 10px}
  .risk__bar{grid-template-columns: 84px 1fr 92px; gap:8px}
  .stack__grid{grid-template-columns:1fr 1fr; gap:14px}
  .connect__grid{gap:18px}
  .term__body{font-size:11.8px; padding:12px 14px}
}
@media(max-width:640px){
  .hero__title{font-size:clamp(32px, 9vw, 42px); margin:16px 0 14px}
  .hero__lead{font-size:15px}
  .hero__actions .btn{flex:1 1 100%}
  .hero__actions{flex-direction:column}
  .hero__meta{gap:12px; padding-top:16px}
  .eyebrow{font-size:10px; padding:6px 10px; gap:8px}
  .kicker{font-size:10.5px}
  .section__desc{font-size:14px}
  .project__top{padding:12px 14px; flex-direction:column; align-items:flex-start; gap:6px}
  .project__body{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr; gap:8px}
  .stats .stat{display:flex; justify-content:space-between; align-items:center; text-align:left; padding:10px 12px}
  .stats .stat strong{margin-top:0}
  .stack__grid{grid-template-columns:1fr}
  .socials{gap:8px}
  .social{width:40px; height:40px}
  .footer__inner{flex-direction:column; align-items:flex-start; gap:10px}
}
@media(max-width:480px){
  .wrap{padding-left:14px; padding-right:14px}
  .nav__inner{padding:10px 14px}
  .nav__avatar{width:32px; height:32px}
  .nav__name strong{font-size:13px}
  .hero__grid{padding:24px 14px 20px}
  .hero__title{font-size:clamp(28px, 10vw, 36px); line-height:0.9}
  .hero__lead{font-size:14.5px; line-height:1.6}
  .hero__meta{grid-template-columns:1fr; gap:14px; text-align:left}
  .meta__item{display:flex; gap:12px; align-items:baseline}
  .meta__num{font-size:22px}
  .meta__label{margin-top:0}
  .btn{padding:11px 16px; font-size:13.5px}
  .ticker__track span{font-size:10px; letter-spacing:.13em}
  .section__head h2{font-size:26px}
  .project__main h3{font-size:20px}
  .project__tagline{font-size:13px}
  .project__text{font-size:13.5px}
  .codecard pre{font-size:10.5px; line-height:1.55}
  .nex__row{grid-template-columns: 64px 1fr 64px; font-size:11px}
  .risk__bar{grid-template-columns:1fr; gap:6px; text-align:left}
  .risk__bar .bar{order:2}
  .chip{font-size:12.5px; padding:7px 10px}
  .stack__list li{font-size:13.5px}
  .connect__copy h2{font-size:26px}
  .social{width:38px; height:38px}
  .connect__card__body{padding:14px}
  .footer__left, .footer__right{font-size:10.5px}
  .repos-note p{font-size:10px; line-height:1.55}
}
@media(max-width:360px){
  .hero__title{font-size:26px}
  .hero__lead{font-size:14px}
  .eyebrow{font-size:9.5px; letter-spacing:.12em}
  .btn{font-size:13px; padding:10px 14px}
  .project__main{padding:14px 12px}
  .stack__group{padding:14px}
  .term__body{font-size:11px; line-height:1.65}
  .term__header{padding:8px 10px}
}
@media(max-height:560px) and (orientation:landscape){
  .hero__grid{padding-top:20px; padding-bottom:16px; gap:16px; align-items:start}
  .hero__title{margin:12px 0 10px; font-size:clamp(26px, 5vw, 36px)}
  .hero__lead{margin-bottom:16px; font-size:14px}
  .hero__meta{margin-top:4px; padding-top:12px; gap:10px}
  .hero__terminal{max-height:58vh; overflow:auto}
}
@media(min-width:1400px){
  :root{--max:1240px}
}
@media(min-aspect-ratio:21/9){
  .hero__grid{max-width:1240px}
  .hero__copy{max-width:720px}
}
@media(max-aspect-ratio:9/19.5){
  .hero__title{line-height:0.92}
  .hero__lead{max-width:100%}
}
/* ensure no horizontal scroll on any device */
html, body{max-width:100vw; overflow-x:clip}
pre, code{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
table{max-width:100%; display:block; overflow-x:auto}

/* reveal */
.reveal{opacity:0; transform:translateY(10px); transition:.6s ease}
.reveal.is-in{opacity:1; transform:none}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  *{scroll-behavior:auto}
}