/* sudosu.dev — style.css */

/* ── VARIABLES ─────────────────────────────── */
:root {
  --sky:       #56cffc;
  --sky-dark:  #0c4a6e;
  --sky-glow:  rgba(86,207,252,0.15);
  --em:        #2dd4a0;
  --em-dark:   #065f46;
  --em-glow:   rgba(45,212,160,0.12);
  --teal:      #22d3ee;
  --blue:      #818cf8;

  --bg:        #040912;
  --bg2:       #070e1d;
  --surface:   #0d1929;

  --text:      #ddeeff;
  --text-dim:  rgba(180,220,255,0.55);
  --text-faint:rgba(140,185,230,0.25);

  --border:    rgba(86,207,252,0.1);
  --border-hi: rgba(86,207,252,0.28);
  --glass:     rgba(4,9,18,0.72);
  --shadow:    rgba(0,0,0,0.65);

  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
}
[data-theme="light"] {
  --bg:        #f0f8ff;
  --bg2:       #e2f2ff;
  --surface:   #ffffff;
  --text:      #0b1a2e;
  --text-dim:  rgba(11,26,46,0.58);
  --text-faint:rgba(11,26,46,0.22);
  --border:    rgba(14,100,180,0.14);
  --border-hi: rgba(14,100,180,0.32);
  --glass:     rgba(240,248,255,0.78);
  --shadow:    rgba(14,60,120,0.1);
}

/* ── RESET ─────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:17px;line-height:1.7;
  overflow-x:hidden;transition:background .45s,color .45s;
}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ── MODAL ─────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;z-index:2000;
  background:rgba(4,9,18,0.78);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-backdrop.open{opacity:1;pointer-events:all;}
.modal{
  background:var(--surface);border:1px solid var(--border-hi);
  max-width:460px;width:90%;padding:3rem 2.6rem 2.4rem;
  position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(86,207,252,.06);
  transform:translateY(18px) scale(0.97);transition:transform .3s;
}
.modal-backdrop.open .modal{transform:translateY(0) scale(1);}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sky),var(--em));}
.modal-close{
  position:absolute;top:1rem;right:1rem;
  background:none;border:1px solid var(--border);color:var(--text-dim);
  font-size:.8rem;width:28px;height:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:border-color .2s,color .2s;
}
.modal-close:hover{border-color:var(--sky);color:var(--sky);}
.modal-icon{font-size:2rem;margin-bottom:.9rem;}
.modal-title{
  font-family:var(--font-mono);font-size:1rem;color:var(--text);
  letter-spacing:.5px;margin-bottom:.8rem;line-height:1.45;
}
.modal-body{
  font-size:.95rem;color:var(--text-dim);line-height:1.9;
  margin-bottom:1.8rem;white-space:pre-line;
}
.modal-cta{display:inline-flex;align-items:center;font-size:.75rem;}

/* ── NAVBAR ─────────────────────────────────── */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:64px;padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .4s,border-color .4s,box-shadow .4s;
}
#navbar.scrolled{
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(200%);
  -webkit-backdrop-filter:blur(24px) saturate(200%);
  border-bottom:1px solid var(--border-hi);
  box-shadow:0 1px 0 var(--border),0 8px 32px var(--shadow);
}
.nav-logo{
  font-family:var(--font-mono);font-size:1.05rem;letter-spacing:1px;
  color:var(--text);white-space:nowrap;
}
.logo-prompt{color:var(--text-faint);}
[data-theme="dark"]  .logo-sudo{color:var(--sky);}
[data-theme="dark"]  .logo-su  {color:#fff;}
[data-theme="light"] .logo-sudo{color:var(--bg);background:var(--sky);padding:1px 5px;}
[data-theme="light"] .logo-su  {color:var(--sky);}
.logo-dot{color:var(--em);}

.nav-links{list-style:none;display:flex;gap:1.8rem;}
.nav-links a{
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.5px;
  color:var(--text-dim);text-decoration:none;text-transform:capitalize;
  display:flex;align-items:center;gap:.25rem;
  position:relative;transition:color .2s;white-space:nowrap;
}
.nav-links .ln{color:var(--em);font-size:.7rem;}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;
  width:0;height:1px;background:var(--sky);transition:width .25s;
}
.nav-links a:hover{color:var(--sky);}
.nav-links a:hover::after{width:100%;}

.nav-right{display:flex;align-items:center;gap:.55rem;}

/* Icon buttons */
.nav-icon-btn{
  position:relative;
  background:none;border:1px solid var(--border);color:var(--text-dim);
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .2s,color .2s;
  border-radius:4px;
}
.nav-icon-btn:hover{border-color:var(--sky);color:var(--sky);}

/* Rounded badge */
.nav-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--sky);color:#040912;
  font-family:var(--font-mono);font-size:.48rem;font-weight:700;
  border-radius:9999px;              /* fully round pill */
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}

.theme-toggle{
  background:none;border:1px solid var(--border-hi);color:var(--text-dim);
  font-size:1rem;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:4px;transition:border-color .2s,color .2s;
}
.theme-toggle:hover{border-color:var(--sky);color:var(--sky);}

.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:1px solid var(--border);
  width:38px;height:38px;padding:0 9px;cursor:pointer;border-radius:4px;
}
.hamburger span{display:block;height:1.5px;background:var(--text-dim);transition:transform .3s,opacity .3s;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-drawer{
  position:fixed;top:64px;left:0;right:0;z-index:999;
  background:var(--glass);backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-hi);
  padding:1.2rem 2rem 1.8rem;
  display:none;flex-direction:column;
  transform:translateY(-8px);opacity:0;
  transition:transform .25s,opacity .25s;
}
.mobile-drawer.open{display:flex;transform:translateY(0);opacity:1;}
.mobile-drawer ul{list-style:none;display:flex;flex-direction:column;gap:1rem;}
.drawer-link{
  font-family:var(--font-mono);font-size:.9rem;
  color:var(--text-dim);text-decoration:none;text-transform:capitalize;
  display:flex;align-items:center;gap:.4rem;
  padding:.55rem 0;border-bottom:1px solid var(--border);
  transition:color .2s;
}
.drawer-link:hover{color:var(--sky);}
.drawer-link .ln{color:var(--em);}

@media(max-width:820px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
}

/* ── HERO ───────────────────────────────────── */
#hero{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;align-items:center;padding:80px 0 60px;
}
.hero-term-bg{
  position:absolute;inset:0;z-index:0;
  padding:60px 3rem 2rem;display:flex;flex-direction:column;gap:2px;
  overflow:hidden;pointer-events:none;opacity:.065;
  font-family:var(--font-mono);font-size:11px;line-height:1.9;color:var(--sky);
}
.tbl{display:block;white-space:nowrap;}
.tbl.g{color:var(--em);} .tbl.d{opacity:.5;}
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 75% 80% at 32% 50%,
    rgba(4,9,18,0) 0%,rgba(4,9,18,0) 28%,
    rgba(4,9,18,.6) 58%,rgba(4,9,18,.92) 100%);
}
[data-theme="light"] .hero-overlay{
  background:radial-gradient(ellipse 75% 80% at 32% 50%,
    rgba(240,248,255,0) 0%,rgba(240,248,255,0) 28%,
    rgba(240,248,255,.65) 58%,rgba(240,248,255,.96) 100%);
}
.hero-accent-line{
  position:absolute;
  left:calc(max(3.5rem,(100% - 1280px)/2 + 3rem));
  top:15%;bottom:15%;width:2px;z-index:3;
  background:linear-gradient(180deg,
    transparent 0%,var(--sky) 30%,var(--em) 70%,transparent 100%);
  opacity:.7;
}
.hero-split{
  position:relative;z-index:2;
  width:100%;max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;padding:0 4rem 0 6rem;align-items:center;
}
.hero-left{display:flex;flex-direction:column;gap:1.4rem;}
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:2px;
  color:var(--em);border:1px solid rgba(45,212,160,.3);
  padding:.3rem 1rem;align-self:flex-start;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--em);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.hero-title{
  font-size:clamp(4rem,9vw,8rem);
  font-weight:700;letter-spacing:-2px;line-height:.95;
}
[data-theme="dark"]  .ht-sudo{color:var(--sky);text-shadow:0 0 40px var(--sky-glow);}
[data-theme="dark"]  .ht-su  {color:#fff;}
[data-theme="light"] .ht-sudo{color:#040912;}
[data-theme="light"] .ht-su  {color:var(--sky);}
.hero-dev{
  font-family:var(--font-mono);font-size:clamp(1.2rem,3vw,2rem);
  color:var(--em);letter-spacing:5px;min-height:1.3em;
  text-shadow:0 0 20px var(--em-glow);
}
.dev-cursor{display:inline-block;color:var(--em);animation:blink .75s step-end infinite;}
@keyframes blink{50%{opacity:0}}
.hero-tagline{font-size:1.05rem;color:var(--text-dim);line-height:1.8;}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.4rem;}

.btn-primary{
  display:inline-flex;align-items:center;
  padding:.75rem 1.7rem;
  background:var(--sky);color:#040912;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:1.5px;
  text-decoration:none;font-weight:700;
  box-shadow:3px 3px 0 var(--sky-dark);
  transition:transform .12s,box-shadow .12s;
  border:none;cursor:pointer;
}
.btn-primary:hover {transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--sky-dark);}
.btn-primary:active{transform:translate(1px,1px);  box-shadow:2px 2px 0 var(--sky-dark);}
.btn-primary.large {padding:1rem 2.4rem;font-size:.78rem;}
.btn-ghost{
  display:inline-flex;align-items:center;
  padding:.75rem 1.7rem;background:transparent;color:var(--text-dim);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:1.5px;
  text-decoration:none;border:1px solid var(--border-hi);
  transition:border-color .2s,color .2s;
}
.btn-ghost:hover{border-color:var(--sky);color:var(--sky);}

/* Code window */
.hero-right{display:flex;justify-content:center;}
.code-window{
  width:100%;max-width:420px;background:#030810;
  border:1px solid var(--border-hi);
  box-shadow:0 0 0 1px rgba(86,207,252,.04),0 24px 80px rgba(0,0,0,.55);
  position:relative;overflow:hidden;
}
.code-window::after{
  content:'';position:absolute;inset:32px 0 0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,
    rgba(86,207,252,.015) 3px,rgba(86,207,252,.015) 4px);
}
.cw-bar{
  display:flex;align-items:center;gap:.6rem;
  padding:0 1rem;height:30px;background:#060e1c;border-bottom:1px solid var(--border);
}
.cw-dots{display:flex;gap:5px;}
.cwd{width:10px;height:10px;border-radius:50%;}
.cwd.red{background:#ff5f57;}.cwd.yellow{background:#febc2e;}.cwd.green{background:#28c840;}
.cw-filename{flex:1;text-align:center;font-family:var(--font-mono);font-size:.52rem;color:var(--text-faint);letter-spacing:1px;}
.cw-body{padding:1.1rem 1.3rem 1.4rem;font-family:var(--font-mono);font-size:.78rem;line-height:2;position:relative;z-index:1;min-height:220px;}
.cl{display:block;}
.cl-ln{color:rgba(86,207,252,.2);user-select:none;margin-right:.6rem;font-size:.62rem;}
.cl-kw{color:#c084fc;}.cl-fn{color:var(--sky);}.cl-str{color:var(--em);}
.cl-cm{color:rgba(180,220,255,.28);font-style:italic;}
.cl-pl{color:rgba(200,230,255,.65);}.cl-num{color:#fb923c;}
.cl-cur{display:inline-block;width:8px;height:14px;background:var(--sky);vertical-align:middle;animation:termBlink 1s step-end infinite;margin-left:2px;}
@keyframes termBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

.hero-scroll{
  position:absolute;bottom:2rem;
  left:calc(max(3.5rem,(100% - 1280px)/2 + 5.5rem));
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:fadeIn 1s ease 2s both;
}
.hs-line{width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--sky));animation:linePulse 2.5s ease-in-out infinite;}
.hs-label{font-family:var(--font-mono);font-size:.44rem;color:var(--text-faint);letter-spacing:3px;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes linePulse{0%,100%{opacity:.35}50%{opacity:1}}

@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;padding:0 2rem 0 3.5rem;gap:3rem;}
  .hero-right{display:none;}
  .hero-accent-line{left:1.5rem;}
  .hero-scroll{left:3rem;}
}

/* ── ABOUT STRIP ─────────────────────────── */
.about-strip{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg2);padding:.9rem 0;overflow:hidden;position:relative;z-index:2;
}
.strip-track{display:flex;gap:1.5rem;align-items:center;white-space:nowrap;animation:stripScroll 28s linear infinite;}
@keyframes stripScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.si{font-family:var(--font-mono);font-size:.58rem;letter-spacing:2px;color:var(--text-dim);}
.ss{color:var(--text-faint);}

/* ── SECTIONS ────────────────────────────── */
.section{max-width:1280px;margin:0 auto;padding:6.5rem 3rem;position:relative;z-index:2;}
.stack-section{max-width:unset;background:var(--bg2);padding:6.5rem 3rem;}
.stack-section>*{max-width:1280px;margin-left:auto;margin-right:auto;}
.section-label{display:flex;align-items:center;gap:1rem;margin-bottom:3.5rem;}
.sl-n{font-family:var(--font-mono);font-size:.72rem;color:var(--em);letter-spacing:2px;}
.sl-line{flex:0 0 50px;height:1px;background:linear-gradient(90deg,var(--em),transparent);}
.sl-t{font-family:var(--font-mono);font-size:.85rem;color:var(--text-dim);letter-spacing:2px;}

/* ── PROJECT ROWS ────────────────────────── */
.prow{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  padding:3.5rem 0;position:relative;
  border-bottom:1px solid var(--border);
}
.prow:first-of-type{border-top:1px solid var(--border);}
.prow::before{
  content:'';position:absolute;left:-1.5rem;top:10%;bottom:10%;width:2px;
  background:linear-gradient(180deg,transparent,var(--sky),var(--em),transparent);
  opacity:0;transition:opacity .35s;
}
.prow:hover::before{opacity:.7;}
.prow .prow-info  {order:1;} .prow .prow-visual{order:2;}
.prow.reverse .prow-info  {order:2;} .prow.reverse .prow-visual{order:1;}
.prow-info{padding:0 2.5rem 0 0;display:flex;flex-direction:column;gap:1.2rem;justify-content:center;}
.prow.reverse .prow-info{padding:0 0 0 2.5rem;}
.prow-idx{font-family:var(--font-mono);font-size:3.5rem;font-weight:700;color:var(--border-hi);line-height:1;user-select:none;}
.prow-title{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;letter-spacing:-.3px;color:var(--text);line-height:1.3;}
.prow-tags{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:-.5rem;}
.ptag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--em);
  display:inline-flex;align-items:center;
}
.ptag::before{content:'#';color:var(--text-faint);margin-right:1px;}
.prow-desc{font-size:.93rem;color:var(--text-dim);line-height:1.85;}
.prow-pts{list-style:none;display:flex;flex-direction:column;gap:.45rem;}
.prow-pts li{font-size:.85rem;color:var(--text-dim);line-height:1.6;padding-left:1.2rem;position:relative;}
.prow-pts li::before{content:'▸';position:absolute;left:0;color:var(--em);}
.prow-stack{display:flex;flex-wrap:wrap;gap:.4rem;}
.badge{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:1px;
  padding:4px 10px;border:1px solid currentColor;
  transition:transform .15s,box-shadow .15s;
}
.badge:hover{transform:translateY(-2px);box-shadow:0 0 8px currentColor;}
.badge.sky    {color:var(--sky); background:rgba(86,207,252,.07);}
.badge.blue   {color:var(--blue);background:rgba(129,140,248,.07);}
.badge.teal   {color:var(--teal);background:rgba(34,211,238,.07);}
.badge.emerald{color:var(--em);  background:rgba(45,212,160,.07);}
.prow-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;}
.video-play-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.65rem 1.5rem;background:transparent;
  border:1px solid var(--border-hi);color:var(--text-dim);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:1.5px;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.video-play-btn:hover{border-color:var(--sky);color:var(--sky);background:rgba(86,207,252,.06);}
.vp-icon{font-size:.8rem;color:var(--sky);}

/* Mockup */
.mockup-screen{width:100%;max-width:360px;background:#030810;border:1px solid rgba(86,207,252,.15);box-shadow:0 8px 40px rgba(0,0,0,.5);}
.ms-bar{display:flex;align-items:center;gap:5px;padding:0 10px;height:26px;background:#060e1c;border-bottom:1px solid rgba(86,207,252,.08);}
.msd{width:7px;height:7px;border-radius:50%;background:rgba(86,207,252,.18);}
.ms-url{flex:1;text-align:center;font-family:var(--font-mono);font-size:.46rem;color:rgba(86,207,252,.3);letter-spacing:1px;}
.ms-body{font-family:var(--font-mono);font-size:.64rem;}
.dash-layout{display:flex;min-height:170px;}
.dash-sidebar{width:80px;padding:10px 0;background:#04090f;border-right:1px solid rgba(86,207,252,.07);}
.dsb{padding:6px 10px;font-size:.52rem;color:rgba(86,207,252,.3);}
.dsb.active{color:var(--sky);border-left:2px solid var(--sky);}
.dash-main{flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;}
.dash-stats{display:flex;gap:5px;}
.dstat{flex:1;padding:6px 5px;background:rgba(86,207,252,.03);border:1px solid rgba(86,207,252,.07);display:flex;flex-direction:column;gap:2px;}
.dv{font-size:.62rem;font-weight:700;} .dv.sky{color:var(--sky);} .dv.em{color:var(--em);} .dv.tl{color:var(--teal);}
.dl{font-size:.42rem;color:rgba(86,207,252,.3);letter-spacing:1px;}
.dash-chart{flex:1;}
.chart-bars{display:flex;align-items:flex-end;gap:3px;height:55px;padding:4px;background:rgba(86,207,252,.02);border:1px solid rgba(86,207,252,.05);}
.bar{flex:1;height:var(--h);background:rgba(86,207,252,.2);}.bar.hi{background:var(--sky);}
.api-layout{display:flex;flex-direction:column;padding:8px;gap:3px;min-height:170px;justify-content:center;}
.api-row{display:flex;align-items:center;gap:7px;padding:4px 7px;border:1px solid rgba(86,207,252,.05);background:rgba(86,207,252,.02);}
.am{font-size:.46rem;font-weight:700;padding:2px 5px;min-width:34px;text-align:center;}
.am.get{color:var(--sky);background:rgba(86,207,252,.1);} .am.post{color:var(--em);background:rgba(45,212,160,.1);}
.am.put{color:#fbbf24;background:rgba(251,191,36,.1);}    .am.del{color:#f87171;background:rgba(248,113,113,.1);}
.ap{flex:1;color:var(--text-dim);}
.as{font-size:.46rem;}.as.ok{color:var(--em);}.as.err{color:#f87171;}
.mob-wrap{display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.mobile-frame{width:140px;background:#040c18;border:2px solid rgba(86,207,252,.2);border-radius:16px;padding:8px;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.mob-notch{width:36px;height:7px;border-radius:4px;background:rgba(86,207,252,.12);margin:0 auto 8px;}
.mob-screen{display:flex;flex-direction:column;gap:7px;}
.mob-greet{font-size:.54rem;color:var(--text);padding-bottom:6px;border-bottom:1px solid rgba(86,207,252,.08);}
.mob-tasks{display:flex;flex-direction:column;gap:4px;}
.mt{display:flex;align-items:center;gap:5px;font-size:.48rem;color:var(--text-dim);}
.mt.done{text-decoration:line-through;color:var(--text-faint);}.mt.active{color:var(--text);}
.mc{color:var(--em);}.md{width:5px;height:5px;border-radius:50%;background:var(--sky);flex-shrink:0;}.md.dim{background:rgba(86,207,252,.18);}
.mob-ai-chip{display:flex;align-items:flex-start;gap:5px;padding:5px;background:rgba(45,212,160,.07);border:1px solid rgba(45,212,160,.18);margin-top:2px;}
.ai-lbl{font-size:.42rem;color:var(--em);border:1px solid var(--em);padding:1px 3px;flex-shrink:0;}
.mob-ai-chip span:last-child{font-size:.44rem;color:var(--em);line-height:1.5;}
@media(max-width:768px){
  .prow,.prow.reverse{grid-template-columns:1fr;gap:2rem;}
  .prow-info{padding:0 !important;}
}

/* ── STACK ───────────────────────────────── */
.stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}
.stack-cat{
  background:var(--surface);border:1px solid var(--border);
  padding:2rem;position:relative;overflow:hidden;transition:border-color .3s;
}
.stack-cat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--sky),var(--em));opacity:0;transition:opacity .3s;}
.stack-cat:hover{border-color:var(--border-hi);}
.stack-cat:hover::before{opacity:1;}
.scat-h{font-family:var(--font-mono);font-size:.68rem;color:var(--text);letter-spacing:2px;margin-bottom:1.2rem;}
.sci{color:var(--sky);}
.scat-tags{display:flex;flex-wrap:wrap;gap:.5rem;}
.stag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.78rem;padding:5px 12px;
  background:rgba(86,207,252,.04);border:1px solid rgba(86,207,252,.1);
  color:var(--text-dim);transition:border-color .2s,color .2s;
}
.stag:hover{border-color:var(--sky);color:var(--sky);}
.tech-icon{width:14px;height:14px;object-fit:contain;flex-shrink:0;filter:none;}

/* ── BIOINFORMATICS ──────────────────────── */
.bio-layout{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:start;}
.bio-title{
  font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;
  letter-spacing:-.3px;color:var(--text);line-height:1.35;
}
.bio-title em{font-style:normal;color:var(--em);}
.bio-desc{margin-top:1rem;font-size:.93rem;color:var(--text-dim);line-height:1.9;}

.bio-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;
}
.bio-card{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.4rem;
  border:1px solid var(--border);background:var(--surface);
  position:relative;overflow:hidden;transition:border-color .3s;
}
.bio-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--sky),var(--em));opacity:0;transition:opacity .3s;}
.bio-card:hover{border-color:var(--border-hi);}
.bio-card:hover::before{opacity:1;}
.bio-card-icon{
  font-family:var(--font-mono);font-size:1.1rem;color:var(--sky);
  flex-shrink:0;width:2rem;text-align:center;line-height:1;margin-top:.1rem;
}
.bio-card-title{
  font-family:var(--font-mono);font-size:.72rem;
  color:var(--text);letter-spacing:.5px;margin-bottom:.4rem;
}
.bio-card-desc{font-size:.8rem;color:var(--text-dim);line-height:1.75;}

@media(max-width:800px){
  .bio-layout{grid-template-columns:1fr;gap:2.5rem;}
}

/* ── CONTACT ─────────────────────────────── */
#contact{border-top:1px solid var(--border);}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.contact-h{font-size:clamp(1.8rem,3.5vw,2.7rem);font-weight:700;letter-spacing:-.5px;line-height:1.35;color:var(--text);}
.contact-h em{font-style:normal;color:var(--sky);}
.contact-sub{margin-top:.8rem;font-size:.93rem;color:var(--text-dim);line-height:1.9;}
.contact-right{display:flex;flex-direction:column;gap:2rem;}
.contact-socials{display:flex;flex-wrap:wrap;gap:1.5rem;}
.csoc{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:1px;
  color:var(--text-dim);text-decoration:none;transition:color .2s;
}
.csoc:hover{color:var(--sky);}
.csoc svg{opacity:.6;transition:opacity .2s;}
.csoc:hover svg{opacity:1;}
@media(max-width:700px){
  .contact-layout{grid-template-columns:1fr;gap:2.5rem;}
  .section{padding:4rem 1.5rem;}
}

/* ── FOOTER ──────────────────────────────── */
footer{
  position:relative;z-index:2;padding:1.5rem 3rem;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--border);background:var(--bg);
}
.footer-logo{font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim);}
[data-theme="dark"] .footer-logo .logo-sudo{color:var(--sky);}
[data-theme="dark"] .footer-logo .logo-su {color:#fff;}
[data-theme="light"] .footer-logo .logo-sudo{color:var(--bg);}
[data-theme="light"] .footer-logo .logo-su {color:var(--sky);}
.footer-c{font-size:.65rem;color:var(--text-faint);letter-spacing:1px;}

/* ── SCROLL REVEAL ───────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--delay,0s);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── PROJECT VISUALS: SCREENSHOTS + ACTIONS ──────────── */
.ms-body.shot-body{padding:0;}
.ms-shot{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:repeating-linear-gradient(45deg,#070e1d,#070e1d 10px,#0a1426 10px,#0a1426 20px);
}
.ms-shot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;display:block;
}
.shot-ph{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.52rem;letter-spacing:1px;
  color:var(--text-faint);text-align:center;padding:0 1rem;pointer-events:none;
}

.prow-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;}
.btn-site{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.65rem 1.5rem;background:transparent;text-decoration:none;
  border:1px solid rgba(45,212,160,.35);color:var(--em);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:1.5px;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .12s;
}
.btn-site:hover{border-color:var(--em);background:rgba(45,212,160,.08);transform:translateY(-2px);}
.bs-icon{font-size:.85rem;}

/* ── VIDEO LIGHTBOX ──────────────────────────────────── */
.video-lightbox{
  position:fixed;inset:0;z-index:2500;
  background:rgba(4,9,18,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:2rem;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.video-lightbox.open{opacity:1;pointer-events:all;}
.vl-frame{
  position:relative;width:100%;max-width:900px;aspect-ratio:16/9;
  background:#030810;border:1px solid var(--border-hi);
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(86,207,252,.06);
  overflow:hidden;transform:translateY(18px) scale(.97);transition:transform .3s;
}
.video-lightbox.open .vl-frame{transform:translateY(0) scale(1);}
.vl-frame::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sky),var(--em));z-index:2;}
.vl-frame video,.vl-frame iframe{width:100%;height:100%;border:0;display:block;background:#000;}
.vl-close{
  position:absolute;top:1.2rem;right:1.2rem;z-index:2600;
  background:rgba(4,9,18,.6);border:1px solid var(--border-hi);color:var(--text);
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  transition:border-color .2s,color .2s;
}
.vl-close:hover{border-color:var(--sky);color:var(--sky);}
@media(max-width:600px){
  .video-lightbox{padding:1rem;}
  .vl-close{top:.5rem;right:.5rem;}
}

/* ── ABOUT ───────────────────────────────────────────── */
.about-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;}
.about-h{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-.5px;line-height:1.3;color:var(--text);}
.about-h em{font-style:normal;color:var(--sky);}
.about-p{margin-top:1.2rem;font-size:.98rem;color:var(--text-dim);line-height:1.9;}
.about-p + .about-p{margin-top:1rem;}
.about-facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.9rem;}
.afact{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:1px;
  color:var(--text-dim);border:1px solid var(--border-hi);padding:.45rem .9rem;
}
.afact .ad{width:6px;height:6px;border-radius:50%;background:var(--em);flex-shrink:0;}
.about-visual{display:flex;justify-content:center;}

/* optional photo variant (swap the code-window for .about-photo in the HTML) */
.about-photo{
  position:relative;width:100%;max-width:340px;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--border-hi);
  box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 0 1px rgba(86,207,252,.04);
}
.about-photo::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sky),var(--em));z-index:2;}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.12) contrast(1.02);}

@media(max-width:800px){
  .about-layout{grid-template-columns:1fr;gap:2.5rem;}
  .about-visual{order:-1;}
}

/* ── ROUNDED TOP CORNERS (windows) ───────────────────── */
.mockup-screen{border-radius:8px 8px 0 0;overflow:hidden;}
.code-window{border-radius:8px 8px 0 0;}   /* .code-window already clips overflow */

/* ── PULSING "START A PROJECT" CTA + visible arrow ───── */
@keyframes ctaPulse{
  0%,100%{box-shadow:3px 3px 0 var(--sky-dark),0 0 0 0 rgba(86,207,252,.45);}
  50%    {box-shadow:3px 3px 0 var(--sky-dark),0 0 0 9px rgba(86,207,252,0);}
}
.btn-primary.pulse{animation:ctaPulse 2.4s ease-in-out infinite;}
.btn-primary.pulse:hover{animation:none;}  /* let the hover lift take over */

.btn-primary .bp-arrow{
  display:inline-block;font-size:1.15em;font-weight:700;
  margin-left:.55em;transition:transform .18s;
}
.btn-primary:hover .bp-arrow{transform:translateX(3px);}

/* ── FOOTER + MUSIC ATTRIBUTIONS ─────────────────────── */
footer{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:1.3rem;}
.footer-attrib{display:flex;flex-direction:column;gap:.55rem;}
.fa-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:2px;color:var(--em);}
.fa-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.45rem 1.4rem;}
.fa-track{font-size:.62rem;line-height:1.55;color:var(--text-faint);}
.fa-track .fa-name{color:var(--text-dim);font-style:italic;}
.fa-track a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid var(--border-hi);}
.fa-track a:hover{color:var(--sky);border-color:var(--sky);}
.fa-note{color:var(--text-faint);}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--border);padding-top:1.2rem;
}