/* NOTE: the "prefers-reduced-motion" blocks below are deliberately switched off (min-width:99999px never matches)
   so every animation also runs on phones. To respect the OS "reduce motion" setting again, delete
   " and (min-width: 99999px)" from those media queries and set RESPECT_REDUCED_MOTION = true in script.js. */
:root{
  --bg: #090d13;
  --bg-panel: #0f1620;
  --line: rgba(255,255,255,0.08);
  --text: #e7ecf2;
  --text-dim: #8291a3;
  --signal: #4fd6c4;
  --signal-soft: rgba(79,214,196,0.16);
  --signal-glow: rgba(79,214,196,0.45);
  --amber: #f2a65a;
  --card: #10171f;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  margin:0;
  color:#fff;
}
p{ margin:0; color:var(--text-dim); line-height:1.7; }
a{ color:inherit; text-decoration:none; }
code{ font-family:'JetBrains Mono', monospace; background:var(--card); padding:2px 6px; border-radius:4px; }
::selection{ background:var(--signal); color:#08110f; }

/* ===================== Loader ===================== */
body.is-loading{ overflow:hidden; }
.loader{
  position:fixed; inset:0; z-index:200;
  pointer-events:all;
}
.loader.hidden{ visibility:hidden; pointer-events:none; }

/* two curtain halves that part to reveal the hero */
.loader-panel{
  position:absolute; left:0; right:0; height:50.2%;
  background:var(--bg);
  transition:transform 0.8s cubic-bezier(.76,0,.24,1);
}
.loader-panel-top{ top:0; border-bottom:1px solid var(--line); }
.loader-panel-bottom{ bottom:0; border-top:1px solid var(--line); }
.loader.open .loader-panel-top{ transform:translateY(-101%); }
.loader.open .loader-panel-bottom{ transform:translateY(101%); }
/* soft ambient glow on the panels while loading */
.loader-panel::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(79,214,196,0.09), transparent 60%);
}

/* the seam: a single light line along the split */
.loader-seam{
  position:absolute; left:50%; top:50%; height:1px; width:0;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg, transparent, var(--signal), #fff, var(--signal), transparent);
  box-shadow:0 0 22px 2px var(--signal-glow);
  opacity:0; z-index:3;
}
.loader.seam .loader-seam{ animation:seamFlash 0.5s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes seamFlash{
  0%{ width:0; opacity:1; }
  60%{ width:100%; opacity:1; }
  100%{ width:100%; opacity:0; }
}

.loader-stage{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.loader.seam .loader-stage{ opacity:0; transform:scale(0.96); }

/* classic touch: italic serif corners */
.loader-corner{
  position:absolute;
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
  font-size:19px; color:var(--text);
  opacity:0; animation:fadeUp 0.45s ease 0.1s forwards;
}
.loader-corner.tl{ top:34px; left:44px; }
.loader-corner.tr{ top:34px; right:44px; color:var(--text-dim); }
.loader-corner.bl{
  bottom:38px; left:44px;
  font-family:'JetBrains Mono', monospace; font-style:normal;
  font-size:11.5px; color:var(--text-dim); letter-spacing:0.5px;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* centerpiece: tick ring + drawn monogram */
.loader-center{
  position:relative;
  width:min(300px, 64vw); aspect-ratio:1;
  display:grid; place-items:center;
}
.loader-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.loader-ring .tick{
  stroke:rgba(255,255,255,0.14); stroke-width:1.2; stroke-linecap:round;
  transition:stroke 0.25s ease, filter 0.25s ease;
}
.loader-ring .tick.lit{
  stroke:var(--signal);
  filter:drop-shadow(0 0 3px var(--signal-glow));
}
.ring-orbit{ fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 6; }
.ring-sweep{
  transform-origin:100px 100px;
  animation:sweep 1.4s linear infinite;
}
.ring-sweep circle{ fill:var(--amber); filter:drop-shadow(0 0 5px rgba(242,166,90,0.9)); }
@keyframes sweep{ to{ transform:rotate(360deg); } }

.loader-monogram{ width:46%; overflow:visible; }
.loader-monogram path{
  fill:none; stroke:url(#hnGrad); stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:drawMono 0.75s cubic-bezier(.65,0,.25,1) 0.1s forwards;
}
.loader-monogram path:nth-child(2){ animation-delay:0.3s; }
.mono-glow{ filter:drop-shadow(0 0 7px var(--signal-glow)); }
@keyframes drawMono{ to{ stroke-dashoffset:0; } }

/* big serif counter */
.loader-count{
  position:absolute; right:44px; bottom:22px;
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
  font-size:clamp(64px, 11vw, 132px); line-height:1; color:#fff;
  font-variant-numeric:tabular-nums;
  opacity:0; animation:fadeUp 0.9s ease 0.35s forwards;
}
.loader-count i{ font-size:0.32em; color:var(--signal); margin-left:6px; vertical-align:top; position:relative; top:0.35em; }

.sound-toggle:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* floating sound toggle with equalizer bars */
.sound-toggle{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(15,22,32,0.72); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sound-toggle.visible{ opacity:1; transform:none; pointer-events:auto; }
.sound-toggle:hover{ border-color:var(--signal); }
.sound-toggle.on{ border-color:rgba(79,214,196,0.5); box-shadow:0 0 18px var(--signal-soft); }
.bars{ display:flex; align-items:center; gap:3px; height:18px; }
.bars i{
  display:block; width:3px; height:4px; border-radius:2px;
  background:var(--text-dim); transition:background 0.2s ease;
}
.sound-toggle.on .bars i{ background:var(--signal); animation:eq 1s ease-in-out infinite; }
.sound-toggle.on .bars i:nth-child(2){ animation-delay:-0.35s; animation-duration:0.85s; }
.sound-toggle.on .bars i:nth-child(3){ animation-delay:-0.6s; animation-duration:1.15s; }
.sound-toggle.on .bars i:nth-child(4){ animation-delay:-0.15s; animation-duration:0.95s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:18px; } }
@media (max-width:600px){ .sound-toggle{ right:16px; bottom:16px; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){ .sound-toggle.on .bars i{ animation:none; } .sound-toggle.on .bars i{ height:12px; } }

@media (max-width:600px){
  .loader-corner.tl, .loader-corner.bl{ left:22px; }
  .loader-corner.tr, .loader-count{ right:22px; }
  .loader-corner{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .ring-sweep{ animation:none; }
  .loader-monogram path{ animation-duration:0.01s; animation-delay:0s !important; }
  .loader-panel{ transition:none; }
  .loader.seam .loader-seam{ animation:none; }
}

/* ===================== Ambient network canvas ===================== */
#networkCanvas{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  opacity:0.55;
}

/* ===================== Signal rail (scroll progress line) ===================== */
.signal-rail{
  position:fixed;
  left:28px; top:0; bottom:0;
  width:2px; z-index:5;
  pointer-events:none;
}
.signal-rail svg{ height:100vh; position:sticky; top:0; }
.rail-track{ stroke:var(--line); stroke-width:2; }
.rail-fill{
  stroke:var(--signal);
  stroke-width:2;
  filter:drop-shadow(0 0 6px var(--signal-glow));
  transition:y2 0.1s linear;
}
@media (max-width:880px){ .signal-rail{ left:6px; } }

.node-dot.hit{ animation:nodeArrive 0.7s ease-out; }
@keyframes nodeArrive{
  0%{ box-shadow:0 0 14px var(--signal-glow); }
  40%{ box-shadow:0 0 28px 8px var(--signal-glow); background:var(--signal); }
  100%{ box-shadow:0 0 14px var(--signal-glow); background:var(--bg); }
}

/* ===================== Nav ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px;
  backdrop-filter:blur(10px);
  background:rgba(9,13,19,0.4);
  border-bottom:1px solid transparent;
  transition:background 0.25s ease, border-color 0.25s ease;
}
.nav.scrolled{ background:rgba(9,13,19,0.85); border-color:var(--line); }
.nav-logo{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:19px; color:#fff;
}
.nav-logo .dot{ color:var(--signal); }
.nav-links{ display:flex; gap:32px; }
.nav-links a{
  font-size:13.5px; color:var(--text-dim); font-weight:500;
  transition:color 0.15s ease;
}
.nav-links a:hover{ color:#fff; }
.nav-cta{
  font-size:13px; font-weight:600; color:var(--signal);
  border:1px solid var(--signal-soft); padding:9px 18px; border-radius:30px;
  transition:background 0.15s ease;
}
.nav-cta:hover{ background:var(--signal-soft); }
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-burger span{ width:22px; height:2px; background:#fff; display:block; }
.nav-mobile{
  position:fixed; top:0; right:0; height:100vh; width:220px; z-index:99;
  background:var(--bg-panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:22px;
  padding:100px 30px; transform:translateX(100%);
  transition:transform 0.25s ease;
}
.nav-mobile.open{ transform:translateX(0); }
.nav-mobile a{ font-size:15px; color:var(--text); }

@media (max-width:880px){
  .nav{ padding:18px 22px; }
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}

/* ===================== Reveal-on-scroll ===================== */
.reveal, .reveal-line{
  opacity:0; transform:translateY(26px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in-view, .reveal-line.in-view{ opacity:1; transform:translateY(0); }
.reveal-line.delay-1{ transition-delay:0.15s; }
.reveal-line.delay-2{ transition-delay:0.3s; }
.reveal-line.delay-3{ transition-delay:0.45s; }

/* ===================== Hero ===================== */
.hero{
  position:relative; z-index:2;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:120px 48px 80px 90px;
}
/* ---------- Cinematic hero video ---------- */
.hero-video-wrap{
  position:absolute; inset:0;
  overflow:hidden;
  z-index:0;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.3s ease, transform 2.2s cubic-bezier(.2,.7,.3,1);
}
.hero-video-wrap.show{ opacity:1; transform:scale(1); }
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(0.15) contrast(1.08) brightness(0.78);
}
.hero-video-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 55%, rgba(9,13,19,0.35), rgba(9,13,19,0.88) 68%),
    linear-gradient(180deg, rgba(9,13,19,0.55) 0%, rgba(9,13,19,0.35) 35%, rgba(9,13,19,0.92) 100%);
}
.hero-flash{
  position:absolute; inset:0;
  background:radial-gradient(circle at 30% 55%, rgba(79,214,196,0.55), transparent 60%);
  opacity:0;
  pointer-events:none;
}
.hero-video-wrap.show .hero-flash{ animation:heroFlashSweep 1s ease-out forwards; }
@keyframes heroFlashSweep{
  0%{ opacity:0.9; }
  100%{ opacity:0; }
}

.hero-content{
  position:relative; z-index:1; max-width:920px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.9s ease 0.35s, transform 0.9s ease 0.35s;
}
.hero-content.show{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .hero-video-wrap{ transition:opacity 0.4s ease; transform:none; }
  .hero-video-wrap.show{ transform:none; }
  .hero-flash{ display:none; }
  .hero-content{ transition:opacity 0.4s ease; transform:none; }
  .hero-content.show{ transform:none; }
}

.hero-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:12.5px;
  color:var(--signal); letter-spacing:1px; margin-bottom:22px;
}
.ping{
  width:8px; height:8px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 var(--signal-glow);
  animation:ping 2s infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 var(--signal-glow); }
  70%{ box-shadow:0 0 0 10px rgba(79,214,196,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,214,196,0); }
}
.hero-name{
  font-size:clamp(42px, 7vw, 84px);
  line-height:1.02;
  letter-spacing:-1px;
  margin-bottom:20px;
  min-height:1.1em;
}
.hero-name .char{ display:inline-block; }
.name-word{ display:inline-block; white-space:nowrap; }   /* PC + tablet: one line */
@media (max-width:880px){
  .hero{ padding:110px 24px 96px 28px; }
}
@media (max-width:700px){                                   /* phones: stacked, one word per line */
  .hero-name{ font-size:clamp(40px, 14vw, 72px); line-height:1.04; letter-spacing:-0.5px; }
  .name-word{ display:block; }
}
.hero-role{
  font-size:clamp(17px, 2.4vw, 22px);
  color:var(--text); font-weight:500;
  margin-bottom:18px;
}
.hero-tagline{ max-width:560px; font-size:15.5px; margin-bottom:36px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  font-family:'Inter', sans-serif; font-weight:600; font-size:14px;
  padding:13px 26px; border-radius:30px;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary{
  background:var(--signal); color:#08110f;
  box-shadow:0 0 0 0 var(--signal-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 24px var(--signal-glow); }
.btn-ghost{ border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-dim); }
.btn-lg{ padding:16px 34px; font-size:15px; }

.scroll-cue{
  position:absolute; bottom:40px; left:90px; z-index:1;
  width:26px; height:42px; border:2px solid var(--line); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--signal);
  animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ top:7px; opacity:1; } 70%{ opacity:1; } 100%{ top:26px; opacity:0; } }
@media (max-width:880px){ .scroll-cue{ left:28px; bottom:32px; } }

/* ===================== Sections (general) ===================== */
.section{
  position:relative; z-index:2;
  max-width:1040px; margin:0 auto;
  padding:130px 48px 130px 90px;
}
.section-inner{ max-width:720px; }
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  color:var(--signal); letter-spacing:1.5px; text-transform:uppercase;
  margin:0 0 14px;
}
.lede{ font-size:16px; max-width:640px; margin-top:18px; }
.section h2{ font-size:clamp(28px, 4vw, 38px); }

.node-marker{
  position:absolute; left:22px; top:136px;
  width:16px; height:16px; z-index:6;
}
.node-dot{
  display:block; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--signal);
  box-shadow:0 0 14px var(--signal-glow);
}
@media (max-width:880px){
  .section{ padding:100px 24px 100px 28px; }
  .node-marker{ left:-1px; top:106px; }
}

/* ===================== About / stats ===================== */
.stat-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  margin-top:46px;
}
@media (max-width:700px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat{ border-top:1px solid var(--line); padding-top:14px; }
.stat-num{
  font-family:'Space Grotesk', sans-serif; font-size:34px; font-weight:700; color:#fff;
  display:block;
}
.stat p{ font-size:12.5px; margin-top:4px; }

/* ===================== Journey / timeline ===================== */
.timeline{ margin-top:50px; display:flex; flex-direction:column; gap:46px; }
.tl-item{ position:relative; padding-left:6px; }
.tl-item .node-marker{ position:absolute; left:-68px; top:6px; }
@media (max-width:880px){ .tl-item .node-marker{ display:none; } }
.tl-tag{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--amber);
  letter-spacing:0.5px; text-transform:uppercase;
}
.tl-content h3{ font-size:20px; margin:8px 0 10px; }
.tl-content p{ font-size:14.5px; max-width:600px; }

/* ===================== Skills ===================== */
.skills-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  margin-top:44px;
}
@media (max-width:800px){ .skills-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .skills-grid{ grid-template-columns:1fr; } }
.skill-group h4{
  font-size:13px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px;
  font-family:'JetBrains Mono', monospace; font-weight:500; margin-bottom:12px;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  background:var(--card); border:1px solid var(--line); color:var(--text);
  padding:7px 13px; border-radius:20px;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.chip:hover{ border-color:var(--signal); box-shadow:0 0 12px var(--signal-soft); transform:translateY(-1px); }
.chip-row.small .chip{ font-size:11px; padding:5px 11px; }
.soft-skills{ margin-top:50px; padding-top:30px; border-top:1px solid var(--line); }
.soft-label{ font-size:12.5px; margin-bottom:12px; }
.chip-soft{ border-color:rgba(242,166,90,0.3); }
.chip-soft:hover{ border-color:var(--amber); box-shadow:0 0 12px rgba(242,166,90,0.2); }

/* ===================== Projects ===================== */
.project-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:22px;
  margin-top:40px;
}
@media (max-width:800px){ .project-grid{ grid-template-columns:1fr; } }
.project-card{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:26px 24px; overflow:hidden;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.project-card:hover{ transform:translateY(-4px); border-color:rgba(79,214,196,0.4); }
.project-card.featured{ background:linear-gradient(155deg, var(--card), #0d2420); }
.project-glow{
  position:absolute; top:-40px; right:-40px; width:140px; height:140px;
  background:radial-gradient(circle, var(--signal-soft), transparent 70%);
  pointer-events:none;
}
.project-tag-label{
  display:inline-block; font-family:'JetBrains Mono', monospace; font-size:10.5px;
  color:var(--signal); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;
}
.project-card h3{ font-size:19px; margin-bottom:10px; }
.project-card p{ font-size:13.5px; margin-bottom:16px; }
.freelance-head{ margin-top:70px; }
.project-note{
  margin-top:30px; font-size:12px; font-style:italic; opacity:0.65;
}

/* ===================== Live Code Feed (GitHub) ===================== */
.repo-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  margin-top:40px; min-height:60px;
}
@media (max-width:880px){ .repo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .repo-grid{ grid-template-columns:1fr; } }

.repo-status{
  grid-column:1/-1;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px; color:var(--text-dim);
  padding:20px 0;
}
.repo-status.error{ color:var(--amber); }

.repo-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:22px 20px; display:flex; flex-direction:column; gap:10px;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.repo-card:hover{ transform:translateY(-4px); border-color:rgba(79,214,196,0.4); }
.repo-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.repo-name{
  font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:500;
  color:#fff; word-break:break-word;
}
.repo-stars{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--amber);
  white-space:nowrap;
}
.repo-desc{ font-size:13px; line-height:1.55; flex-grow:1; }
.repo-meta{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-dim); }
.repo-lang-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

.repo-cta{ margin-top:30px; display:inline-block; }

.repo-tools{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:34px; }
.repo-search{
  flex:1; min-width:200px; max-width:380px;
  background:var(--card); border:1px solid var(--line); border-radius:30px;
  color:#fff; font:inherit; font-size:14px; padding:11px 18px; outline:none;
  transition:border-color 0.2s ease;
}
.repo-search:focus{ border-color:var(--signal); }
.repo-search::placeholder{ color:var(--text-dim); }
.repo-count{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-dim); }
.repo-grid{ margin-top:22px; }
.repo-card{ animation:cardIn 0.5s ease backwards; animation-delay:calc(var(--n, 0) * 35ms); }
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.repo-fork{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--line); border-radius:10px; padding:2px 7px; margin-left:8px; vertical-align:middle;
}
.repo-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:6px; padding-top:12px; border-top:1px solid var(--line);
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-dim);
}
.repo-view{ color:var(--signal); transition:letter-spacing 0.25s ease; }
.repo-card:hover .repo-view{ letter-spacing:0.6px; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){ .repo-card{ animation:none; } }

/* ===================== Contact ===================== */
.contact{ max-width:1180px; }
.contact-wrap{ max-width:1060px; }
.contact-top{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.contact-clock{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--signal);
}
.contact-clock span#beirutTime{ color:#fff; font-variant-numeric:tabular-nums; }
.contact-open{ font-size:13.5px; }
.contact-title{
  font-size:clamp(38px, 6.4vw, 84px);
  line-height:1.02; letter-spacing:-0.025em;
  margin:44px 0 54px; max-width:11em;
}
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px; align-items:center;
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }

/* ----- signal network: every channel is a node ----- */
.net{ display:flex; flex-direction:column; align-items:center; }
.net-stage{ position:relative; width:min(100%, 460px); aspect-ratio:1; margin-bottom:40px; }
.net-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.net-lines line{
  stroke:rgba(255,255,255,0.14); stroke-width:1.2; stroke-dasharray:3 5;
  vector-effect:non-scaling-stroke;
  transition:stroke 0.25s ease, stroke-width 0.25s ease;
}
.net-lines line.hot{ stroke-dasharray:none; stroke-width:2.2; filter:drop-shadow(0 0 4px currentColor); }
.net-lines .packet{ fill:var(--signal); filter:drop-shadow(0 0 3px var(--signal-glow)); }

.net-hub{
  position:absolute; left:50%; top:50%; width:30%; aspect-ratio:1;
  transform:translate(-50%,-50%); display:grid; place-items:center; z-index:1;
}
.hub-core{
  position:relative; width:100%; height:100%; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #16303a, #0b141c 70%);
  border:1px solid rgba(79,214,196,0.38);
  box-shadow:0 0 44px var(--signal-soft), inset 0 0 26px rgba(79,214,196,0.12);
}
.hub-core b{
  font-family:'Space Grotesk', sans-serif; font-size:clamp(22px, 5.6vw, 34px); letter-spacing:1px;
  background:linear-gradient(135deg, var(--signal), var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hub-ring{
  position:absolute; inset:-14%; border-radius:50%;
  border:1px dashed rgba(79,214,196,0.38); animation:ringSpin 18s linear infinite;
}
.hub-ring.r2{
  inset:-28%; border:1px solid rgba(79,214,196,0.16);
  animation:hubPulse 3.2s ease-out infinite;
}
@keyframes hubPulse{ 0%{ transform:scale(0.72); opacity:0.9; } 100%{ transform:scale(1.12); opacity:0; } }

.net-node{
  --ns:64px; --c:#4fd6c4; --cg:rgba(79,214,196,0.45);
  position:absolute; width:var(--ns); height:var(--ns); z-index:2;
  opacity:0; transform:translate(-50%,-50%) scale(0.55);
}
.contact-wrap.in-view .net-node{
  opacity:1; transform:translate(-50%,-50%);
  transition:opacity 0.5s ease calc(var(--i) * 0.09s + 0.2s),
             transform 0.65s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * 0.09s + 0.2s);
}
.node-icon{
  position:absolute; inset:0; border-radius:50%;
  display:grid; place-items:center;
  background:#0d141c; border:1px solid rgba(255,255,255,0.14); color:#c9d3df;
  transition:transform 0.35s cubic-bezier(.3,1.5,.5,1), color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, background 0.25s ease;
}
.node-icon svg{ width:42%; height:42%; }
.node-icon::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--c); opacity:0; pointer-events:none;
}
.net-node:hover .node-icon, .net-node:focus-visible .node-icon{
  transform:scale(1.16); color:var(--c); border-color:var(--c);
  background:#101a24; box-shadow:0 0 0 6px rgba(255,255,255,0.03), 0 0 34px var(--cg);
}
.net-node:hover .node-icon::after, .net-node:focus-visible .node-icon::after{ animation:ripple 1.2s ease-out infinite; }
@keyframes ripple{ 0%{ transform:scale(1); opacity:0.8; } 100%{ transform:scale(1.7); opacity:0; } }
.net-node:focus-visible{ outline:none; }
.node-name{
  position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.4px;
  color:var(--text-dim); white-space:nowrap; transition:color 0.2s ease;
}
.net-node:hover .node-name, .net-node:focus-visible .node-name{ color:#fff; }

.net-status{
  display:flex; align-items:center; gap:10px; justify-content:center; text-align:center;
  font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-dim);
  min-height:22px;
}
.net-status b{ font-weight:600; }

/* ----- message form ----- */
.msg{
  position:relative;
  background:linear-gradient(160deg, rgba(79,214,196,0.07), rgba(255,255,255,0.015));
  border:1px solid var(--line); border-radius:22px; padding:32px 30px 28px;
}
.msg-kicker{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--signal); letter-spacing:1px; }
.msg-head h3, .msg-done h3{ font-size:26px; margin:8px 0 8px; }
.msg-head p{ font-size:13.5px; margin-bottom:24px; }
.fld{ display:block; position:relative; margin-bottom:20px; }
.fld span{
  display:block; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; transition:color 0.2s ease;
}
.fld input, .fld textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:#fff; font:inherit; font-size:15px; padding:8px 0 10px; outline:none; resize:vertical;
}
.fld input::placeholder, .fld textarea::placeholder{ color:rgba(255,255,255,0.26); }
.fld::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--signal), var(--amber));
  transform:scaleX(0); transform-origin:left; transition:transform 0.45s cubic-bezier(.6,0,.2,1);
}
.fld:focus-within::after{ transform:scaleX(1); }
.fld:focus-within span{ color:var(--signal); }
.fld.invalid input, .fld.invalid textarea{ border-bottom-color:var(--amber); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.send{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  margin-top:6px; padding:15px 28px; border:none; border-radius:40px; cursor:pointer;
  background:var(--signal); color:#08110f; font:600 14.5px 'Inter', sans-serif;
  transition:transform 0.15s ease, box-shadow 0.2s ease;
}
.send:hover{ transform:translateY(-2px); box-shadow:0 10px 30px var(--signal-glow); }
.send:disabled{ opacity:0.85; cursor:progress; transform:none; }
.send-icon{ display:inline-grid; transition:transform 0.4s cubic-bezier(.3,1.4,.5,1); }
.send:hover .send-icon{ transform:translate(4px,-3px); }
.send.sending .send-icon{ animation:planeAway 0.9s ease-in infinite; }
@keyframes planeAway{
  0%{ transform:translate(0,0); opacity:1; }
  70%{ transform:translate(34px,-26px); opacity:0; }
  71%{ transform:translate(-30px,22px); opacity:0; }
  100%{ transform:translate(0,0); opacity:1; }
}
.msg-note{ min-height:20px; margin-top:14px; font-size:13px; color:var(--text-dim); }
.msg-note.error{ color:var(--amber); }
.msg-note a{ color:var(--signal); text-decoration:underline; }

.contact-alt{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.alt-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.mail-copy{ background:none; border:none; padding:0; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.mail-text{
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
  font-size:clamp(20px, 2.6vw, 26px); line-height:1.1; color:#fff; word-break:break-all;
  background:linear-gradient(var(--signal), var(--signal)) 0 100% / 0% 2px no-repeat;
  padding-bottom:4px; transition:background-size 0.5s cubic-bezier(.6,0,.2,1);
}
.mail-copy:hover .mail-text{ background-size:100% 2px; }
.mail-hint{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-dim); transition:color 0.2s ease; }
.mail-copy.copied .mail-hint{ color:var(--signal); }
.mail-copy:focus-visible{ outline:2px solid var(--amber); outline-offset:6px; }

/* success state */
.msg-done{ display:none; text-align:center; padding:30px 6px 12px; }
.msg.done .msg-fields{ display:none; }
.msg.done .msg-done{ display:block; animation:fadeUp 0.6s ease both; }
.msg-done p{ font-size:14px; margin-bottom:22px; }
.done-check{ width:78px; height:78px; margin:0 auto 14px; display:block; color:var(--signal); filter:drop-shadow(0 0 10px var(--signal-glow)); }
.dc-circle{ stroke-dasharray:151; stroke-dashoffset:151; }
.dc-tick{ stroke-dasharray:40; stroke-dashoffset:40; }
.msg.done .dc-circle{ animation:drawCheck 0.7s ease 0.1s forwards; }
.msg.done .dc-tick{ animation:drawCheck 0.45s ease 0.65s forwards; }
@keyframes drawCheck{ to{ stroke-dashoffset:0; } }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:46px; }
}
@media (max-width:520px){
  .net-node{ --ns:54px; }
  .node-name{ font-size:9.5px; }
  .msg{ padding:26px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .hub-ring, .hub-ring.r2, .net-node:hover .node-icon::after, .send.sending .send-icon{ animation:none; }
  .net-node{ opacity:1; transform:translate(-50%,-50%); }
  .contact-wrap.in-view .net-node{ transition:none; }
}


/* ===================== Certifications — "the vault" ===================== */
.lightbox[hidden]{ display:none; }
.vault{ --ac:#4fd6c4; --gold:#e0be78; --dur:6s; margin-top:46px; position:relative; }
.vault::before{                                   /* accent glow that sits behind the deck */
  content:""; position:absolute; left:50%; top:210px; width:min(760px,100%); aspect-ratio:1.6; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, var(--ac), transparent); opacity:0.13; pointer-events:none; filter:blur(20px);
}
.vault-stage{
  position:relative; height:clamp(260px, 44vw, 440px); perspective:1500px; outline:none;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.vault-stage:focus-visible{ outline:2px solid var(--amber); outline-offset:8px; border-radius:14px; }

.v-card{
  --d:0; --abs:0; --ac:#4fd6c4;
  position:absolute; left:50%; top:50%; width:min(78%, 640px); aspect-ratio:1.5;
  transform:translate(-50%,-50%) translateX(calc(var(--d) * 52%)) translateZ(calc(var(--abs) * -150px)) rotateY(calc(var(--d) * -16deg)) scale(calc(1 - var(--abs) * 0.07));
  opacity:calc(1 - (var(--abs) * 0.28)); transform-style:preserve-3d;
  transition:transform 0.8s cubic-bezier(.22,.9,.28,1), opacity 0.6s ease, filter 0.6s ease;
}
.v-card[style*="--abs:3"], .v-card[style*="--abs: 3"]{ opacity:0; pointer-events:none; }
.v-card:not(.is-active){ filter:brightness(0.5) saturate(0.75); cursor:pointer; }

.v-paper{
  --rx:0deg; --ry:0deg;
  position:absolute; inset:0; border-radius:8px; overflow:hidden; container-type:inline-size;
  background:linear-gradient(150deg, #17202c 0%, #0d131b 60%, #0a0f15 100%);
  box-shadow:0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07);
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform 0.18s ease-out, box-shadow 0.5s ease;
}
.v-card.is-active .v-paper{ box-shadow:0 34px 70px rgba(0,0,0,0.55), 0 0 80px -22px var(--ac), 0 0 0 1px rgba(255,255,255,0.1); }
.v-paper::before, .v-paper::after{ content:""; position:absolute; pointer-events:none; z-index:2; }
.v-paper::before{ inset:2.4%; border:1px solid rgba(224,190,120,0.55); }
.v-paper::after{ inset:3.7%; border:1px solid rgba(224,190,120,0.2); }
.v-c{ position:absolute; z-index:3; width:5.5%; aspect-ratio:1; border:2px solid var(--gold); pointer-events:none; }
.v-c.tl{ top:1.6%; left:1.1%; border-right:none; border-bottom:none; }
.v-c.tr{ top:1.6%; right:1.1%; border-left:none; border-bottom:none; }
.v-c.bl{ bottom:1.6%; left:1.1%; border-right:none; border-top:none; }
.v-c.br{ bottom:1.6%; right:1.1%; border-left:none; border-top:none; }

/* generated certificate face (used when a certificate has no photo) */
.v-gen{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:9% 11%; gap:1.4cqw;
  background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ac) 14%, transparent), transparent 62%);
}
.v-kicker{ font-family:'JetBrains Mono', monospace; font-size:2cqw; letter-spacing:0.5em; text-transform:uppercase; color:var(--gold); line-height:1.3; }
.v-gtitle{ font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:500; font-size:6.4cqw; line-height:1.08; color:#fff; margin:1cqw 0; text-wrap:balance; }
.v-gtitle::after{ content:""; display:block; width:18cqw; height:2px; margin:2.4cqw auto 0; background:linear-gradient(90deg, transparent, var(--ac), var(--gold), transparent); }
.v-awarded{ font-family:'JetBrains Mono', monospace; font-size:1.7cqw; letter-spacing:0.3em; text-transform:uppercase; color:var(--text-dim); line-height:1.3; }
.v-owner{ font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-size:4.2cqw; color:#e9eef4; line-height:1.2; }
.v-gfoot{ display:flex; align-items:flex-end; justify-content:space-between; width:100%; margin-top:2.4cqw; gap:3cqw; }
.v-gfoot div{ display:flex; flex-direction:column; gap:0.6cqw; min-width:0; flex:1; }
.v-gfoot div:first-child{ align-items:flex-start; text-align:left; } .v-gfoot div:last-child{ align-items:flex-end; text-align:right; }
.v-gfoot small{ font-family:'JetBrains Mono', monospace; font-size:1.5cqw; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim); }
.v-gfoot b{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:2.5cqw; color:#e9eef4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.v-gfoot div.v-seal{
  flex:0 0 11cqw; width:11cqw; height:11cqw; border-radius:50%; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:3.6cqw; color:#0a0f14; letter-spacing:0.5px;
  background:radial-gradient(circle at 35% 30%, #fff6dc, var(--gold) 55%, #a8832e); box-shadow:0 0 0 0.9cqw rgba(224,190,120,0.18), 0 0 4cqw rgba(224,190,120,0.35);
  outline:1px dashed rgba(10,15,20,0.45); outline-offset:-0.8cqw;
}
.has-img .v-paper::before, .has-img .v-paper::after, .has-img .v-c{ display:none; }
.v-img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; background:#0b1118; pointer-events:none; }

/* holographic foil that follows the pointer (and drifts on its own on phones) */
.v-holo{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; mix-blend-mode:screen; transition:opacity 0.5s ease;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.28), transparent 42%),
    linear-gradient(115deg, transparent 18%, rgba(79,214,196,0.5) 34%, rgba(242,166,90,0.5) 44%, rgba(179,136,255,0.5) 54%, rgba(122,162,247,0.5) 64%, transparent 80%);
  background-size:100% 100%, 260% 260%; background-position:0 0, var(--mx,50%) var(--my,50%);
}
.v-card.is-active .v-holo{ opacity:0.34; }

/* the "VERIFIED" stamp that slams onto the active card */
.v-stamp{
  position:absolute; z-index:5; right:5.5%; top:7%; width:14%; aspect-ratio:1; pointer-events:none; opacity:0;
  color:var(--ac); filter:drop-shadow(0 0 8px var(--ac));
}
.v-stamp svg{ width:100%; height:100%; display:block; }
.v-stamp text{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:2.2px; fill:currentColor; font-weight:600; }
.v-card.is-active .v-stamp{ animation:stampIn 0.6s cubic-bezier(.2,1.6,.4,1) 0.55s both; }
@keyframes stampIn{ 0%{ opacity:0; transform:scale(2.4) rotate(-26deg); } 60%{ opacity:1; } 100%{ opacity:0.95; transform:scale(1) rotate(-12deg); } }

.v-arrow{
  position:absolute; top:50%; z-index:30; width:46px; height:46px; margin-top:-23px; border-radius:50%; cursor:pointer;
  background:rgba(9,13,19,0.72); border:1px solid var(--line); color:#fff; font-size:18px; line-height:1;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.v-arrow.prev{ left:0; } .v-arrow.next{ right:0; }
.v-arrow:hover, .v-arrow:active{ background:var(--ac); border-color:var(--ac); color:#08110f; }
.v-arrow:active{ transform:scale(0.92); }

.vault-info{ display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; margin-top:44px; padding-top:28px; border-top:1px solid var(--line); }
.v-num{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:clamp(56px, 9vw, 100px); line-height:0.9; letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1.2px var(--ac); }
.v-num small{ font-size:0.26em; letter-spacing:0; color:var(--text-dim); -webkit-text-stroke:0; margin-left:6px; }
.v-title{ font-size:clamp(20px, 2.6vw, 28px); line-height:1.2; }
.v-issuer{ margin-top:6px; font-size:14px; color:var(--ac); }
.v-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:12px; font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-dim); word-break:break-all; }
.v-meta b{ color:#fff; font-weight:500; }
.v-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.v-btn{
  font:600 13px 'Inter', sans-serif; padding:11px 20px; border-radius:30px; cursor:pointer; white-space:nowrap;
  background:none; border:1px solid var(--line); color:var(--text); transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.v-btn.main{ background:var(--ac); border-color:var(--ac); color:#08110f; }
.v-btn:hover{ border-color:var(--ac); } .v-btn:active{ transform:scale(0.96); }
.vault-info.swap .v-num, .vault-info.swap .v-text, .vault-info.swap .v-actions{ animation:vSwap 0.6s cubic-bezier(.2,.9,.3,1) backwards; }
.vault-info.swap .v-text{ animation-delay:0.05s; } .vault-info.swap .v-actions{ animation-delay:0.1s; }
@keyframes vSwap{ from{ opacity:0; transform:translateY(14px); } }

.vault-rail{ display:grid; grid-template-columns:repeat(var(--n, 4), 1fr); gap:10px; margin-top:28px; }
.v-tab{
  --tc:#4fd6c4; position:relative; overflow:hidden; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:4px; padding:12px 14px 17px; border-radius:12px;
  background:rgba(255,255,255,0.025); border:1px solid var(--line); color:var(--text-dim); font:inherit;
  transition:border-color 0.25s ease, background 0.25s ease, transform 0.15s ease;
}
.v-tab:active{ transform:scale(0.97); }
.v-tn{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1px; color:var(--tc); }
.v-tt{ font-size:13px; line-height:1.3; color:#cdd6e0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.v-tab.active{ border-color:var(--tc); background:rgba(255,255,255,0.05); }
.v-prog{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--tc); transform:scaleX(0); transform-origin:left; }
.v-tab.active .v-prog{ animation:vProg var(--dur) linear forwards; }
@keyframes vProg{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.vault:not(.in-view) .v-tab.active .v-prog{ animation-play-state:paused; }
@media (hover:hover){ .vault:hover .v-tab.active .v-prog{ animation-play-state:paused; } }
.vault.solo .v-arrow, .vault.solo .vault-rail{ display:none; }
.v-empty{ text-align:center; padding:46px 24px; border:1.5px dashed var(--line); border-radius:16px; color:var(--text-dim); }

@media (max-width:900px){
  .vault-info{ grid-template-columns:auto 1fr; } .v-actions{ grid-column:1 / -1; justify-content:flex-start; }
}
@media (max-width:620px){
  .vault-stage{ height:clamp(230px, 62vw, 300px); }
  .v-card{ width:84%; transform:translate(-50%,-50%) translateX(calc(var(--d) * 56%)) translateZ(calc(var(--abs) * -150px)) rotateY(calc(var(--d) * -16deg)) scale(calc(1 - var(--abs) * 0.07)); }
  .v-arrow{ width:40px; height:40px; margin-top:-20px; }
  .vault-info{ grid-template-columns:1fr; gap:16px; }
  .vault-rail{ grid-template-columns:repeat(2, 1fr); }
}

.lightbox{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px;
  background:rgba(5,8,12,0.93); cursor:zoom-out; animation:fadeUp 0.3s ease both;
}
.lightbox img{ max-width:min(92vw, 1100px); max-height:86vh; border-radius:10px; box-shadow:0 20px 80px rgba(0,0,0,0.6); }
.lightbox-close{
  position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid var(--line); color:#fff; font-size:26px; line-height:1; cursor:pointer;
}

/* ===================== Footer ===================== */
.footer{
  position:relative; z-index:2; margin-top:60px; overflow:hidden;
  padding:104px 48px 28px 90px; border-top:1px solid var(--line);
  text-align:left; font-size:13px; color:var(--text-dim);
  background:linear-gradient(180deg, rgba(79,214,196,0.035), transparent 45%);
}
.ft-glow{
  position:absolute; left:50%; top:-240px; width:1000px; max-width:140vw; height:460px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(79,214,196,0.17), transparent);
  animation:ftBreathe 6s ease-in-out infinite;
}
@keyframes ftBreathe{ 0%,100%{ opacity:0.75; } 50%{ opacity:1; } }
.ft-grid{                                   /* faint drifting grid behind everything */
  position:absolute; inset:0; pointer-events:none; opacity:0.55;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px; animation:gridDrift 26s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}
@keyframes gridDrift{ to{ background-position:56px 56px, 56px 56px; } }
.ft-inner{ position:relative; max-width:1100px; margin:0 auto; }

.ft-top{ display:grid; grid-template-columns:1.7fr auto auto; gap:64px; align-items:start; }
.ft-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--signal);
}
.ft-line{
  font-size:clamp(30px, 4.2vw, 54px); line-height:1.04; letter-spacing:-0.025em;
  margin:18px 0 14px; max-width:12em;
}
.ft-line em{
  display:block;
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:500; font-size:1.14em; letter-spacing:-0.01em;
  background:linear-gradient(100deg, var(--signal), var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ft-sub{ font-size:14.5px; max-width:420px; }
.ft-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.ft-cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 24px; border-radius:40px; border:1px solid rgba(79,214,196,0.4);
  color:var(--signal); font-weight:600; font-size:14px;
  transition:background 0.25s ease, color 0.25s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.ft-cta i{ font-style:normal; transition:transform 0.3s cubic-bezier(.3,1.5,.5,1); }
.ft-cta:hover, .ft-cta:active{ background:var(--signal); color:#08110f; box-shadow:0 10px 30px var(--signal-glow); }
.ft-cta:hover i{ transform:translateX(5px); }
.ft-cta-ghost{ border-color:var(--line); color:var(--text); }
.ft-cta-ghost:hover i{ transform:translateY(4px); }

.ft-cols h4{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:500;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px;
}
.ft-cols a{
  position:relative; display:block; width:max-content; padding:5px 0; color:#dfe6ee; font-size:14.5px;
  transition:color 0.2s ease, transform 0.25s ease;
}
.ft-cols a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease;
}
.ft-cols a:hover, .ft-cols a:active{ color:var(--signal); transform:translateX(4px); }
.ft-cols a:hover::after, .ft-cols a:active::after{ transform:scaleX(1); }

.ft-top-btn{
  position:relative; width:108px; height:108px; border-radius:50%; cursor:pointer;
  background:none; border:1px solid var(--line); color:#fff;
  display:grid; place-items:center;
  transition:background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ft-ring{ position:absolute; inset:0; width:100%; height:100%; animation:ringSpin 16s linear infinite; }
.ft-ring text{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:1.6px; fill:var(--text-dim);
  transition:fill 0.3s ease;
}
.ft-arrow{ font-size:26px; line-height:1; transition:transform 0.35s cubic-bezier(.3,1.5,.5,1), color 0.3s ease; }
.ft-top-btn:hover, .ft-top-btn:active{ background:var(--signal); border-color:var(--signal); transform:translateY(-4px); }
.ft-top-btn:hover .ft-ring text, .ft-top-btn:active .ft-ring text{ fill:#08110f; }
.ft-top-btn:hover .ft-arrow, .ft-top-btn:active .ft-arrow{ color:#08110f; transform:translateY(-5px); }
.ft-top-btn:focus-visible, .ft-cta:focus-visible, .ft-cols a:focus-visible, .ft-tile:focus-visible{ outline:2px solid var(--amber); outline-offset:4px; }

/* ----- app icon tiles ----- */
.ft-social{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:68px; }
.ft-tile{
  --c:#4fd6c4; --cg:rgba(79,214,196,.5); --cs:rgba(79,214,196,.16); --px:50%; --py:50%;
  position:relative; display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:18px; overflow:hidden;
  background:radial-gradient(230px circle at var(--px) var(--py), var(--cs), transparent 70%), rgba(255,255,255,0.025);
  border:1px solid var(--line);
  transition:transform 0.3s cubic-bezier(.3,1.4,.5,1), border-color 0.25s ease, box-shadow 0.3s ease;
}
.ft-social.in-view .ft-tile{ animation:tileIn 0.6s cubic-bezier(.3,1.3,.5,1) backwards; animation-delay:calc(var(--i) * 80ms + 120ms); }
@keyframes tileIn{ from{ opacity:0; transform:translateY(22px) scale(0.94); } }
.ft-ico{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:#0d141c; border:1px solid rgba(255,255,255,0.14); color:var(--c);
  transition:transform 0.35s cubic-bezier(.3,1.5,.5,1), background 0.25s ease, color 0.25s ease, box-shadow 0.3s ease;
}
.ft-ico svg{ width:24px; height:24px; }
.ft-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ft-txt b{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:15.5px; color:#fff; }
.ft-txt small{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ft-go{ margin-left:auto; font-style:normal; font-size:18px; color:var(--text-dim); opacity:0.5; transform:translate(-4px,4px); transition:transform 0.3s ease, opacity 0.3s ease, color 0.3s ease; }
.ft-tile:hover, .ft-tile.is-hot{ transform:translateY(-4px); border-color:var(--c); box-shadow:0 14px 34px rgba(0,0,0,0.35), 0 0 30px var(--cs); }
.ft-tile:hover .ft-ico, .ft-tile.is-hot .ft-ico{ background:var(--c); color:#0a0f14; transform:rotate(-8deg) scale(1.08); box-shadow:0 0 24px var(--cg); }
.ft-tile:hover .ft-go, .ft-tile.is-hot .ft-go{ opacity:1; color:var(--c); transform:translate(0,0); }
.ft-tile:active{ transform:scale(0.97); }

/* ----- skills ticker ----- */
.ft-marquee{
  margin-top:60px; overflow:hidden; border-block:1px solid var(--line); padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ft-track{ display:flex; width:max-content; animation:ftMarquee 34s linear infinite; }
.ft-group{ display:flex; flex-shrink:0; }
.ft-group span{
  display:inline-flex; align-items:center; gap:40px; padding-right:40px; white-space:nowrap;
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:clamp(20px, 2.6vw, 30px); letter-spacing:-0.01em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.3);
}
.ft-group span::after{ content:"✦"; font-size:0.55em; color:var(--signal); -webkit-text-stroke:0; }
@keyframes ftMarquee{ to{ transform:translateX(-50%); } }

/* giant wordmark: outlined, with a spotlight that lights it up */
.ft-mark{
  position:relative; margin:64px 0 30px; user-select:none;
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:min(14.5vw, 176px); line-height:0.88; letter-spacing:-0.045em; white-space:nowrap;
}
.ft-mark span{ display:block; }
.ft-mark-base span{ color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,0.17); }
.ft-mark-lit{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(300px circle at var(--mx, -400px) var(--my, -400px), #000 0%, transparent 100%);
          mask-image:radial-gradient(300px circle at var(--mx, -400px) var(--my, -400px), #000 0%, transparent 100%);
}
.ft-mark-lit span{
  background:linear-gradient(100deg, var(--signal) 0%, #ffffff 48%, var(--amber) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.ft-bar{
  display:flex; justify-content:space-between; align-items:center; gap:14px 28px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line);
  font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-dim);
}
.ft-status{ display:flex; align-items:center; color:#dfe6ee; }
.ft-status #ftTime{ font-variant-numeric:tabular-nums; margin:0 6px; }
.ft-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; margin-right:10px; }
.ft-bars i{ width:2px; height:3px; background:var(--signal); border-radius:1px; animation:ftBar 1.1s ease-in-out infinite; }
.ft-bars i:nth-child(2){ animation-delay:0.18s; } .ft-bars i:nth-child(3){ animation-delay:0.36s; } .ft-bars i:nth-child(4){ animation-delay:0.54s; }
@keyframes ftBar{ 0%,100%{ height:3px; } 50%{ height:12px; } }

@media (max-width:980px){
  .ft-top{ grid-template-columns:1fr auto; gap:44px; }
  .ft-intro{ grid-column:1 / -1; }
  .ft-top-btn{ justify-self:end; }
  .ft-social{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:700px){
  .footer{ padding:76px 24px 100px 28px; }
  .ft-mark{ margin:48px 0 24px; }
  .ft-bar{ flex-direction:column; align-items:flex-start; }
  .ft-marquee{ margin-top:44px; }
}
@media (max-width:540px){
  .ft-social{ grid-template-columns:1fr; margin-top:52px; }
}

/* ===================== Phones & touch: give every hover effect a touch twin ===================== */
a, button{ -webkit-tap-highlight-color:transparent; }
.net-node.lit .node-icon{
  transform:scale(1.16); color:var(--c); border-color:var(--c);
  background:#101a24; box-shadow:0 0 0 6px rgba(255,255,255,0.03), 0 0 34px var(--cg);
}
.net-node.lit .node-icon::after{ animation:ripple 1.2s ease-out infinite; }
.net-node.lit .node-name{ color:#fff; }
.project-card.is-hot, .repo-card.is-hot{ transform:translateY(-4px); border-color:rgba(79,214,196,0.4); }
.repo-card.is-hot .repo-view{ letter-spacing:0.6px; }
@media (hover:none){
  .btn:active, .send:active, .project-card:active, .repo-card:active, .chip:active{ transform:scale(0.97); }
  .btn-primary:active{ box-shadow:0 8px 24px var(--signal-glow); }
}