/* ============ RESET & BASE ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', sans-serif;
  color: var(--text);
  overflow-x:hidden;
  background: var(--sky-bottom);
  transition: color .8s ease, background .8s ease;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
::selection { background: var(--accent); color:#fff; }

/* ============ MODE TOKENS ============ */
:root {
  --font-display:'Space Grotesk', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --radius: 20px;
}
html[data-mode="day"] {
  --sky-top:#8fd3f4;
  --sky-mid:#c9ecff;
  --sky-bottom:#fdf6e3;
  --text:#0d2b55;
  --text-soft:#3a5a8a;
  --accent:#2457a4;
  --accent-soft:#4a7fc1;
  --card-bg: rgba(255,255,255,0.62);
  --card-border: rgba(13,43,85,0.12);
  --glow: #ffd166;
  --sticky-bg:#CFE8FA;
  --sticky-text:#1B4E9B;
  --sticky-tape: rgba(255,255,255,0.6);
  --sticky-label:#4A4D45;
  --badge-bg:#DCEBFF;
  --badge-border:#5B9EF2;
  --badge-text:#1B4E9B;
}
html[data-mode="evening"] {
  --sky-top:#3b2a5c;
  --sky-mid:#a8567e;
  --sky-bottom:#ffb37a;
  --text:#2c1b3d;
  --text-soft:#5b3a63;
  --accent:#c1487a;
  --accent-soft:#e28a4d;
  --card-bg: rgba(255,244,236,0.55);
  --card-border: rgba(44,27,61,0.15);
  --glow: #ff9d5c;
  --sticky-bg:#FCE1F0;
  --sticky-text:#9B1B5C;
  --sticky-tape: rgba(255,255,255,0.5);
  --sticky-label:#6b4a5c;
  --badge-bg:#FCE1F0;
  --badge-border:#F27CB0;
  --badge-text:#9B1B5C;
}
html[data-mode="night"] {
  --sky-top:#050914;
  --sky-mid:#0d2b55;
  --sky-bottom:#1a3a6b;
  --text:#eaf1fb;
  --text-soft:#a8c8e8;
  --accent:#a8c8e8;
  --accent-soft:#4a7fc1;
  --card-bg: rgba(13,43,85,0.45);
  --card-border: rgba(168,200,232,0.18);
  --glow:#a8c8e8;
  --sticky-bg:#b6bec82e;
  --sticky-text:#ffffff;
  --sticky-tape: rgba(166,150,150,0.15);
  --sticky-label:#B9C6E0;
  --badge-bg: rgba(168,200,232,0.12);
  --badge-border:#a8c8e8;
  --badge-text:#eaf1fb;
}

/* ============ SKY BACKDROP ============ */
.sky {
  position:fixed; inset:0; z-index:-3; overflow:hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
  transition: background 1.4s ease;
}
.celestial {
  position:absolute; left:50%; width:120px; height:120px; border-radius:50%;
  transform:translateX(-50%);
  transition: top 1.4s ease, background 1.4s ease, box-shadow 1.4s ease, opacity 1s ease;
}
html[data-mode="day"] .celestial { top:8%; background:radial-gradient(circle at 35% 35%, #fff6d8, #ffd166 70%); box-shadow:0 0 90px 30px rgba(255,209,102,0.55); }
html[data-mode="evening"] .celestial { top:38%; background:radial-gradient(circle at 35% 35%, #ffe3c2, #ff8a4c 75%); box-shadow:0 0 110px 40px rgba(255,138,76,0.5); }
html[data-mode="night"] .celestial { top:10%; width:80px; height:80px; background:radial-gradient(circle at 32% 32%, #ffffff, #dbe6f5 60%, #c3d3ea 100%); box-shadow:0 0 60px 12px rgba(220,232,248,0.35); }
.celestial::after{ content:""; position:absolute; inset:0; border-radius:50%; opacity:0; transition:opacity 1s ease;}
html[data-mode="night"] .celestial::after{
  opacity:1;
  background: radial-gradient(circle at 68% 30%, transparent 12%, rgba(160,180,210,0.55) 13%, transparent 14%),
              radial-gradient(circle at 40% 60%, transparent 8%, rgba(160,180,210,0.5) 9%, transparent 10%),
              radial-gradient(circle at 55% 45%, transparent 6%, rgba(160,180,210,0.5) 7%, transparent 8%);
}
@keyframes drift { from{ transform:translateX(-10%);} to{ transform:translateX(110%);} }
.cloud { position:absolute; opacity:0; transition:opacity 1.2s ease; filter:blur(0.5px); }
html[data-mode="day"] .cloud { opacity:0.85; }
.cloud svg{ width:140px; }
.cloud.c1{ top:14%; animation:drift 46s linear infinite; }
.cloud.c2{ top:24%; width:90px; animation:drift 60s linear infinite; animation-delay:-15s;}
.cloud.c3{ top:9%; animation:drift 70s linear infinite; animation-delay:-40s;}

.star { position:absolute; width:3px; height:3px; background:#fff; border-radius:50%; opacity:0; transition:opacity 1.2s ease; }
html[data-mode="night"] .star { opacity:var(--tw,1); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{ opacity:.25; transform:scale(1);} 50%{ opacity:1; transform:scale(1.4);} }

.firefly{ position:absolute; width:5px; height:5px; border-radius:50%; background:#ffd39b; opacity:0; box-shadow:0 0 8px 2px rgba(255,180,110,0.8); transition:opacity 1.2s ease;}
html[data-mode="evening"] .firefly{ opacity:.9; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform:translate(0,0);} 25%{transform:translate(12px,-18px);} 50%{transform:translate(-8px,-6px);} 75%{transform:translate(10px,10px);} }

.skyline { position:absolute; bottom:0; left:0; width:100%; display:flex; align-items:flex-end; justify-content:space-around; opacity:0.9; color: var(--text); transition:color 1.4s ease, opacity 1.4s ease; pointer-events:none; }
.skyline span{ font-family:var(--font-mono); font-weight:600; line-height:1; opacity:.35; }

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; width:100%; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw; backdrop-filter:blur(10px);
  background: color-mix(in srgb, var(--sky-bottom) 30%, transparent);
  transition:background .8s ease;
}
.logo{ font-family:var(--font-mono); font-weight:600; font-size:1.15rem; display:flex; align-items:center; gap:2px; color:var(--text);}
.logo .bracket{ color:var(--accent); font-size:1.4rem; }
nav ul{ display:flex; gap:2.2rem; }
nav a{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.03em; color:var(--text-soft); position:relative; padding-bottom:4px;}
nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--accent); transition:width .3s ease;}
nav a:hover::after, nav a.active::after{ width:100%; }
nav a:hover, nav a.active{ color:var(--text); }

.mode-toggle{ display:flex; gap:6px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:999px; padding:5px; }
.mode-toggle button{
  border:none; background:transparent; cursor:pointer; width:34px; height:34px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-soft);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.mode-toggle button.active{ background:var(--accent); color:#fff; transform:scale(1.05); }
.mode-toggle button:hover{ transform:scale(1.1); }

/* ============ LAYOUT HELPERS ============ */
section{ padding:140px 6vw 40px; max-width:1200px; margin:0 auto; position:relative; }
.eyebrow{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.eyebrow::before, .eyebrow::after{ content:"—"; opacity:.5; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.1; }
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.section-title{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:36px; }

/* ============ PAGE HERO (subpages) ============ */
.page-hero{ padding:150px 6vw 20px; max-width:1200px; margin:0 auto; }
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); color:var(--text); margin-bottom:16px; }
.page-hero p{ color:var(--text-soft); font-size:1.05rem; max-width:600px; line-height:1.6; }
.back-home{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.8rem; color:var(--accent); margin-top:20px; }
.back-home:hover{ text-decoration:underline; }

/* ============ HERO ============ */
.hero{ min-height:100vh; display:flex; align-items:center; padding-top:120px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center; width:100%; }
.hero-eyebrow{ font-family:var(--font-mono); color:var(--accent-soft); font-size:.9rem; letter-spacing:.08em; margin-bottom:18px; }
.hero h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); color:var(--text); }
.hero h1 .accent{ color:var(--accent); }
.hero-sub{ margin-top:22px; font-size:1.15rem; color:var(--text-soft); max-width:560px; line-height:1.6; min-height:1.6em; }
.hero-sub .cursor{ display:inline-block; width:2px; background:var(--accent); margin-left:2px; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.btn{
  font-family:var(--font-mono); font-size:.85rem; padding:14px 26px; border-radius:999px; border:1.5px solid var(--accent);
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.btn.primary{ background:var(--accent); color:#fff; }
.btn.primary:hover{ transform:translateY(-3px); box-shadow:0 10px 26px -8px var(--accent); }
.btn.ghost{ color:var(--text); }
.btn.ghost:hover{ transform:translateY(-3px); background:var(--card-bg); }

/* ============ PORTRAIT (real photo) ============ */
.hero-portrait{ position:relative; display:flex; justify-content:center; }
.portrait-frame{
  position:relative; width:min(340px,80%); aspect-ratio:1/1; border-radius:38% 62% 60% 40% / 45% 40% 60% 55%;
  overflow:hidden; border:3px solid var(--card-border); box-shadow:0 30px 60px -20px rgba(0,0,0,0.35);
  animation: blobFloat 8s ease-in-out infinite;
  background: var(--card-bg);
}
@keyframes blobFloat{ 0%,100%{ border-radius:38% 62% 60% 40% / 45% 40% 60% 55%; transform:translateY(0);} 50%{ border-radius:58% 42% 40% 60% / 40% 60% 40% 60%; transform:translateY(-14px);} }
.portrait-frame img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.portrait-ring{ position:absolute; inset:-14px; border-radius:inherit; border:1.5px dashed var(--accent-soft); opacity:.5; animation:spin 30s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.chip-tag{
  position:absolute; font-family:var(--font-mono); font-size:.72rem; padding:8px 14px; border-radius:999px;
  background:var(--card-bg); border:1px solid var(--card-border); color:var(--text); backdrop-filter:blur(6px);
  animation:floaty2 5s ease-in-out infinite;
}
@keyframes floaty2{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.chip-tag.t1{ top:6%; left:-4%; animation-delay:.2s; }
.chip-tag.t2{ bottom:10%; right:-6%; animation-delay:1.2s; }
.chip-tag.t3{ top:44%; right:-10%; animation-delay:.6s; }

.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.7rem; color:var(--text-soft); display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-cue .line{ width:1.5px; height:34px; background:linear-gradient(var(--accent), transparent); animation:scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ opacity:0; transform:scaleY(0.2); transform-origin:top;} 40%{opacity:1; transform:scaleY(1); transform-origin:top;} 100%{opacity:0; transform:scaleY(1); transform-origin:bottom;} }

/* ============ ABOUT / STATS ============ */
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:50px; align-items:start; }
.lede{ font-size:1.1rem; line-height:1.75; color:var(--text-soft); }
.lede strong{ color:var(--text); font-weight:600; }

.stats-notes{
  display:grid;
  grid-template-columns:repeat(2, minmax(140px, 1fr));
  gap:36px 28px;
  padding:20px 0;
}
.stat-sticky{
  padding:22px 20px 26px;
  box-shadow:2px 4px 10px rgba(23,24,28,0.18);
  position:relative;
  font-family:'Space Grotesk', sans-serif;
  background: var(--sticky-bg);
  transition: background .8s ease;
}
.stat-sticky::before{
  content:"";
  position:absolute;
  top:-10px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:46px; height:16px;
  background: var(--sticky-tape);
  border:1px solid rgba(0,0,0,0.05);
}
.stat-num{
  font-size:40px;
  font-weight:700;
  color: var(--sticky-text);
  line-height:1;
  margin-bottom:8px;
  transition: color .8s ease;
}
.rot-l{ transform:rotate(-3deg); }
.rot-r{ transform:rotate(2.5deg); }
.rot-l-sm{ transform:rotate(-1.5deg); }
.rot-r-sm{ transform:rotate(1.5deg); }
.stat-lbl{
  font-family:var(--font-mono);
  font-size:13px;
  color: var(--sticky-label);
  transition: color .8s ease;
}

/* ============ SKILLS ============ */
.skill-groups{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.skill-group{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:28px; }
.skill-group h3{ font-size:1.05rem; margin-bottom:16px; color:var(--text); }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:9px; }
.tag{
  font-family:var(--font-mono); font-size:.78rem; padding:7px 13px; border-radius:8px; border:1px solid var(--card-border);
  color:var(--text-soft); opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.skill-group.in .tag{ opacity:1; transform:translateY(0); }
.tag:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ============ TIMELINE ============ */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1.5px; background:linear-gradient(var(--accent), transparent); }
.tl-item{ position:relative; padding-bottom:38px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:-34px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--card-bg); }
.tl-date{ font-family:var(--font-mono); font-size:.75rem; color:var(--accent-soft); margin-bottom:6px; display:block;}
.tl-item h3{ font-size:1.15rem; margin-bottom:4px; }
.tl-item .org{ color:var(--text-soft); font-size:.92rem; margin-bottom:8px; }
.tl-item p{ color:var(--text-soft); line-height:1.6; font-size:.95rem; max-width:600px; }

/* ============ PROJECTS ============ */
.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.project-card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:36px 30px;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2), box-shadow .4s ease, border-color .3s ease;
  position:relative; overflow:hidden; min-height:280px; display:flex; flex-direction:column;
}
.project-card::before{
  content:""; position:absolute; top:-40%; right:-40%; width:70%; height:70%; border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity:0; transition:opacity .4s ease;
}
.project-card:hover{ transform:translateY(-8px) rotate(-0.4deg); box-shadow:0 24px 50px -20px rgba(0,0,0,0.35); border-color:var(--accent); }
.project-card:hover::before{ opacity:.15; }
.project-stack{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent); letter-spacing:.04em; margin-bottom:14px; }
.project-card h3{ font-size:1.3rem; margin-bottom:14px; }
.project-card p{ color:var(--text-soft); font-size:.95rem; line-height:1.7; flex-grow:1; }
.project-card-link{ text-decoration:none; }

.view-all-wrap{ display:flex; justify-content:center; margin-top:44px; }

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:14px 0 12px;
}
.badge-oval{
  font-size:12px;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--badge-border);
  color: var(--badge-text);
  opacity:0.9;
  transition: border-color .8s ease, color .8s ease;
}
.badge-accuracy{
  font-size:12px;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
  border:1.5px solid var(--badge-border);
  white-space:nowrap;
  background: var(--badge-bg);
  color: var(--badge-text);
  transition: background .8s ease, border-color .8s ease, color .8s ease;
}
.github-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  width:fit-content;
}
.github-link:hover{ opacity:0.7; }
.gh-icon{ width:15px; height:15px; fill:currentColor; }

/* ============ FLIP CARDS ============ */
.flip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; perspective:1200px; }
.flip-card{ height:200px; cursor:pointer; }
.flip-card-inner{
  position:relative; width:100%; height:100%; text-align:center;
  transition:transform .7s cubic-bezier(.3,.9,.3,1.1); transform-style:preserve-3d;
}
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }
.flip-card-front, .flip-card-back{
  position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:var(--radius); border:1px solid var(--card-border); background:var(--card-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px;
}
.flip-card-front{ gap:8px; }
.flip-card-front .medal{ font-size:1.7rem; animation:swing 3.4s ease-in-out infinite; transform-origin:top center; }
@keyframes swing{ 0%,100%{ transform:rotate(-6deg);} 50%{ transform:rotate(6deg);} }
.flip-card-front h4{ font-family:var(--font-display); font-size:1rem; line-height:1.3; }
.flip-card-front span.meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-soft); }
.flip-hint{ font-family:var(--font-mono); font-size:.65rem; color:var(--accent); letter-spacing:.05em; text-transform:uppercase; margin-top:4px; }
.flip-card-back{ transform:rotateY(180deg); overflow:hidden; padding:0; }
.flip-card-back img{ width:100%; height:100%; object-fit:cover; }
.img-placeholder{
  display:none; width:100%; height:100%; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  font-family:var(--font-mono); font-size:.7rem; color:var(--text-soft); text-align:center; padding:14px;
  border:1.5px dashed var(--card-border); border-radius:var(--radius); background:var(--card-bg);
}
.img-placeholder span{ font-size:.62rem; opacity:.7; word-break:break-all; }

/* ============ ACHIEVEMENTS ============ */
.ach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ============ MARQUEE ============ */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:16px; width:max-content; animation:marquee 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.cert-pill{ font-family:var(--font-mono); font-size:.82rem; white-space:nowrap; padding:12px 22px; border-radius:999px; background:var(--card-bg); border:1px solid var(--card-border); color:var(--text); }

/* ============ CONTACT ============ */
.contact-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding-bottom:100px;
}
.contact-wrap h2{ font-size:clamp(2rem,5vw,3.2rem); margin-bottom:18px; }
.contact-wrap p{ color:var(--text-soft); max-width:520px; margin:0 auto 34px; font-size:1.05rem; }

.terminal-row{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:32px;
  margin-top:36px;
  flex-wrap:wrap;
}
.terminal{
  width:100%;
  max-width:640px;
  background:#171820;
  color:#DDE6D6;
  border-radius:10px;
  overflow:hidden;
  box-shadow:8px 10px 0 rgba(23,24,28,0.9);
  text-align:left;
}
.terminal .bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:#20222C;
  border-bottom:1px solid #33354a;
}
.terminal .dot{ width:11px; height:11px; border-radius:50%; }
.dot.r{ background:#FF5F56; }
.dot.y{ background:#FFBD2E; }
.dot.g{ background:#27C93F; }
.terminal .title{ margin-left:8px; font-size:13px; color:#8A8F9E; }
.terminal .body{ padding:26px 24px 32px; font-size:16px; }
.terminal .line{ margin:0 0 14px; font-family:var(--font-mono); }
.terminal .prompt{ color:#3FB88A; font-weight:600; }
.terminal .out{ color:#B9C2AE; }
.term-link{ color:#DDE6D6; text-decoration:underline; }

.sticky{
  background: var(--sticky-bg);
  font-family:'Caveat', cursive;
  font-size:19px;
  line-height:1.3;
  padding:16px 18px 20px;
  width:220px;
  flex-shrink:0;
  box-shadow:2px 4px 10px rgba(23,24,28,0.18);
  position:relative;
  transform:rotate(-3deg);
  text-align:left;
  color: var(--sticky-text);
  transition: background .8s ease, color .8s ease;
}
.sticky::before{
  content:"";
  position:absolute;
  top:-10px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:46px; height:16px;
  background: var(--sticky-tape);
  border:1px solid rgba(0,0,0,0.05);
}

footer{ text-align:center; padding:30px 6vw 50px; font-family:var(--font-mono); font-size:.75rem; color:var(--text-soft); }

/* ============ GITHUB CTA ============ */
.github-cta{ text-align:center; margin-top:70px; padding:50px 6vw; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); }
.github-cta h3{ font-size:1.5rem; margin-bottom:12px; }
.github-cta p{ color:var(--text-soft); margin-bottom:26px; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .hero-grid, .about-grid, .skill-groups{ grid-template-columns:1fr; }
  .project-grid, .flip-grid, .ach-grid{ grid-template-columns:1fr 1fr; }
  .hero{ padding-top:160px; }
  .hero-portrait{ order:-1; }
}
@media (max-width:820px){
  nav ul{ display:none; }
  header{ padding:18px 5vw; }
}
@media (max-width:760px){
  .terminal-row{ flex-direction:column; align-items:center; }
  .sticky{ width:100%; max-width:340px; }
}
@media (max-width:560px){
  .project-grid, .flip-grid, .ach-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.2s !important; }
}