/* ============================================================
   GOPAL BISHNOI — PREMIUM PORTFOLIO v2
   Design System: Cyberpunk-Minimalist × Data Viz × Motion
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:           #08080A;
  --bg-1:         #0D0D12;
  --bg-2:         #111118;
  --bg-3:         #16161F;
  --surface:      #1A1A24;
  --surface-2:    #20202C;
  --border:       rgba(255,255,255,0.07);
  --border-bright:rgba(255,255,255,0.12);

  --blue:         #00D4FF;
  --blue-mid:     #0099CC;
  --blue-dim:     rgba(0,212,255,0.10);
  --blue-glow:    rgba(0,212,255,0.30);
  --purple:       #7C3AED;
  --purple-light: #A78BFA;
  --purple-dim:   rgba(124,58,237,0.12);
  --purple-glow:  rgba(124,58,237,0.30);
  --teal:         #14B8A6;
  --pink:         #EC4899;
  --green:        #22C55E;
  --amber:        #F59E0B;

  --text:         #F4F4F8;
  --text-2:       #9494A8;
  --text-3:       #52526A;
  --text-4:       #2E2E40;

  --glass:        rgba(13,13,18,0.80);
  --glass-border: rgba(255,255,255,0.06);

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 40px;
  --r-full: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-blue:   0 0 0 1px rgba(0,212,255,0.12), 0 8px 40px rgba(0,212,255,0.08), 0 2px 12px rgba(0,0,0,0.6);
  --shadow-purple: 0 0 0 1px rgba(124,58,237,0.15), 0 8px 40px rgba(124,58,237,0.08), 0 2px 12px rgba(0,0,0,0.6);
  --shadow-card:   0 1px 0 var(--border), 0 8px 32px rgba(0,0,0,0.4);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  cursor:none;
}
body.no-scroll { overflow:hidden; }
::selection { background:var(--blue-dim); color:var(--blue); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { cursor:none; border:none; background:none; font-family:inherit; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--blue),var(--purple)); border-radius:2px; }

/* ── CUSTOM CURSOR ──────────────────────────────────────────── */
#cur-ring {
  position:fixed; top:0; left:0;
  width:40px; height:40px;
  border:1px solid var(--blue);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s var(--ease-out), height .2s var(--ease-out),
             border-color .2s, opacity .2s, background .2s;
  mix-blend-mode:screen;
  opacity:0;
}
#cur-dot {
  position:fixed; top:0; left:0;
  width:5px; height:5px;
  background:var(--blue);
  border-radius:50%;
  pointer-events:none;
  z-index:10000;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--blue);
  opacity:0;
}
body.c-hover #cur-ring { width:56px; height:56px; border-color:var(--purple-light); background:rgba(124,58,237,.06); }
body.c-hover #cur-dot  { background:var(--purple-light); box-shadow:0 0 10px var(--purple-light); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { width:100%; max-width:1240px; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem); }
.section    { padding:clamp(5rem,10vh,8rem) 0; position:relative; overflow:hidden; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.display { font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1.03; letter-spacing:-0.025em; }
.mono    { font-family:'JetBrains Mono',monospace; }
.label-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin-bottom:.9rem;
}
.label-tag::before { content:''; width:20px; height:1px; background:var(--blue); }

.grad-text {
  background:linear-gradient(135deg,var(--blue) 0%,var(--purple-light) 60%,var(--pink) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── GLASS ──────────────────────────────────────────────────── */
.glass {
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 2rem; border-radius:var(--r-full);
  font-weight:600; font-size:.875rem; letter-spacing:.02em;
  position:relative; overflow:hidden; white-space:nowrap;
  transition:transform .18s var(--ease-out), box-shadow .18s;
  border:none;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.07); opacity:0;
  transition:opacity .15s;
}
.btn:hover::after { opacity:1; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn-primary {
  background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);
  color:#fff;
  box-shadow:0 4px 24px rgba(0,212,255,.25);
}
.btn-primary:hover { box-shadow:0 8px 40px rgba(0,212,255,.4); }

.btn-ghost {
  background:transparent; color:var(--text);
  border:1px solid var(--border-bright);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover { border-color:rgba(0,212,255,.4); color:var(--blue); }

/* ══════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem 0;
  transition:background .3s, padding .3s, box-shadow .3s;
}
#navbar.scrolled {
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:.7rem 0;
  box-shadow:0 1px 0 var(--border),0 8px 32px rgba(0,0,0,.5);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family:'Space Grotesk',sans-serif; font-size:1.25rem; font-weight:700;
  letter-spacing:-.03em; flex-shrink:0;
  text-decoration: none;
}
.logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.logo-text {
  background:linear-gradient(135deg,var(--blue),var(--purple-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-links { display:flex; list-style:none; gap:.15rem; }
.nav-links a {
  font-size:.82rem; font-weight:500; color:var(--text-2);
  padding:.4rem .9rem; border-radius:var(--r-xs);
  transition:color .15s, background .15s;
}
.nav-links a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav-links a.active { color:var(--blue); }

.badge-avail {
  display:flex; align-items:center; gap:.45rem;
  padding:.3rem .8rem; border-radius:var(--r-full);
  background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.22);
  font-family:'JetBrains Mono',monospace; font-size:.67rem; letter-spacing:.06em;
  color:#4ade80; white-space:nowrap;
}
.badge-dot {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100%{ box-shadow:0 0 8px var(--green); }
  50%{ box-shadow:0 0 16px var(--green),0 0 24px var(--green); }
}

/* Hamburger */
.nav-ham { display:none; flex-direction:column; gap:5px; padding:6px; border-radius:var(--r-xs); }
.nav-ham span { display:block; width:22px; height:2px; background:var(--text-2); border-radius:2px; transition:.3s var(--ease-out); transform-origin:center; }
.nav-ham.open span:nth-child(1){ transform:translateY(7px)rotate(45deg); background:var(--blue); }
.nav-ham.open span:nth-child(2){ opacity:0; }
.nav-ham.open span:nth-child(3){ transform:translateY(-7px)rotate(-45deg); background:var(--blue); }

/* Mobile overlay */
.mob-nav {
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(8,8,10,.97); backdrop-filter:blur(32px);
  flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; padding:5rem 2rem 2rem;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.mob-nav.open { opacity:1; pointer-events:all; }
.mob-nav a {
  font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,6vw,2.5rem);
  font-weight:700; color:var(--text-2); padding:.5rem 1rem;
  transition:color .15s;
}
.mob-nav a:hover { color:var(--blue); }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
#hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding-top:90px;
}
#particle-canvas {
  position:absolute; inset:0; z-index:0; opacity:.75;
}

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

.hero-glow-1 {
  position:absolute; width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.09) 0%,transparent 70%);
  top:-15%; left:-10%; pointer-events:none; z-index:0;
  animation:breathe-glow 8s ease-in-out infinite;
}
.hero-glow-2 {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.10) 0%,transparent 70%);
  bottom:0%; right:-5%; pointer-events:none; z-index:0;
  animation:breathe-glow 8s ease-in-out 4s infinite;
}
@keyframes breathe-glow {
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.12); opacity:.7; }
}

.hero-inner { position:relative; z-index:2; width:100%; }
.hero-grid  { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3rem; }

/* Split text chars */
.split-char {
  display:inline-block;
  opacity:0; transform:translateY(60%) rotateX(-90deg);
  transform-origin:0% 50%;
  animation:char-in .7s var(--ease-out) both;
}
@keyframes char-in {
  to { opacity:1; transform:translateY(0) rotateX(0); }
}

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.3rem .9rem; border-radius:var(--r-full);
  background:var(--blue-dim); border:1px solid rgba(0,212,255,.18);
  font-family:'JetBrains Mono',monospace; font-size:.69rem; letter-spacing:.14em;
  color:var(--blue); margin-bottom:1.6rem;
  animation:fade-up .8s var(--ease-out) .2s both;
}
.hero-eyebrow span { width:5px; height:5px; border-radius:50%; background:var(--blue); box-shadow:0 0 6px var(--blue); }

.hero-name {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(3.2rem,8vw,6.5rem);
  line-height:1.0; letter-spacing:-0.03em;
  margin-bottom:.75rem;
  animation:fade-up .9s var(--ease-out) .35s both;
}

.hero-role-row {
  display:flex; align-items:center; gap:.75rem;
  font-family:'Space Grotesk',sans-serif; font-size:clamp(1rem,2.5vw,1.55rem);
  font-weight:500; color:var(--text-2); margin-bottom:1.6rem;
  animation:fade-up .9s var(--ease-out) .5s both;
  min-height:2.2rem;
}
#role-text { color:var(--blue); font-weight:600; }
#role-text::after { content:'_'; animation:blink 1s step-end infinite; color:var(--purple-light); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-tagline {
  font-size:clamp(.95rem,1.6vw,1.05rem); color:var(--text-2);
  max-width:580px; line-height:1.85; margin-bottom:2.4rem;
  animation:fade-up .9s var(--ease-out) .65s both;
}
.hero-ctas { display:flex; gap:.85rem; flex-wrap:wrap; animation:fade-up .9s var(--ease-out) .8s both; }

/* Hero right — live metric cards */
.hero-metrics { display:flex; flex-direction:column; gap:1rem; animation:fade-up 1s var(--ease-out) 1s both; }
.metric-card {
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-md);
  padding:1.1rem 1.4rem; min-width:160px;
  position:relative; overflow:hidden;
}
.metric-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-glow),transparent);
}
.metric-card.purple::before { background:linear-gradient(90deg,transparent,var(--purple-glow),transparent); }
.metric-card.teal::before   { background:linear-gradient(90deg,transparent,rgba(20,184,166,.4),transparent); }

.metric-num {
  font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700;
  line-height:1; margin-bottom:.2rem;
  background:linear-gradient(135deg,var(--blue),var(--purple-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.metric-card.purple .metric-num { background:linear-gradient(135deg,var(--purple-light),var(--pink)); -webkit-background-clip:text; background-clip:text; }
.metric-card.teal .metric-num   { background:linear-gradient(135deg,var(--teal),var(--blue)); -webkit-background-clip:text; background-clip:text; }
.metric-label { font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.12em; color:var(--text-3); text-transform:uppercase; }

/* Scroll indicator */
.scroll-hint {
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  animation:fade-up 1s .ease-out 1.5s both;
}
.scroll-hint p { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.2em; color:var(--text-3); }
.scroll-line { width:1px; height:50px; background:linear-gradient(var(--blue),transparent); animation:scroll-drop 2s ease-in-out infinite; }
@keyframes scroll-drop { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ══════════════════════════════════════════════════════════════
   MARQUEE TECH STACK
══════════════════════════════════════════════════════════════ */
#marquee-section {
  padding:1.75rem 0;
  background:var(--bg-1);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.marquee-track { display:flex; width:max-content; animation:marquee 28s linear infinite; gap:0; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item {
  display:flex; align-items:center; gap:.55rem;
  padding:0 2rem;
  font-family:'JetBrains Mono',monospace; font-size:.78rem; letter-spacing:.05em;
  color:var(--text-3); white-space:nowrap;
  border-right:1px solid var(--border);
  transition:color .2s;
}
.marquee-item:hover { color:var(--blue); }
.marquee-item .ico { font-size:1rem; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ══════════════════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════════════════ */
#about { background:linear-gradient(180deg,var(--bg) 0%,var(--bg-1) 100%); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:center; }

/* Profile picture */
.profile-wrap { position:relative; display:flex; justify-content:center; }
.profile-hex-ring {
  position:relative; width:clamp(260px,36vw,400px); aspect-ratio:1;
}
.hex-bg {
  position:absolute; inset:-4px;
  background:conic-gradient(from 0deg,var(--blue),var(--purple),var(--pink),var(--blue));
  border-radius:38% 62% 62% 38% / 41% 41% 59% 59%;
  animation:morph-ring 8s ease-in-out infinite;
  filter:blur(0);
}
.hex-bg-glow {
  position:absolute; inset:-12px;
  background:conic-gradient(from 0deg,var(--blue),var(--purple),var(--pink),var(--blue));
  border-radius:38% 62% 62% 38% / 41% 41% 59% 59%;
  animation:morph-ring 8s ease-in-out infinite;
  filter:blur(20px); opacity:.35; z-index:-1;
}
@keyframes morph-ring {
  0%  {border-radius:38% 62% 62% 38% / 41% 41% 59% 59%;}
  25% {border-radius:58% 42% 75% 25% / 76% 46% 54% 24%;}
  50% {border-radius:50% 50% 33% 67% / 55% 27% 73% 45%;}
  75% {border-radius:33% 67% 58% 42% / 63% 68% 32% 37%;}
  100%{border-radius:38% 62% 62% 38% / 41% 41% 59% 59%;}
}
.profile-img {
  position:relative; z-index:2;
  width:100%; height:100%;
  border-radius:38% 62% 62% 38% / 41% 41% 59% 59%;
  overflow:hidden;
  animation:morph-ring 8s ease-in-out infinite;
  background:var(--surface);
}
.profile-img img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .6s var(--ease-out), filter .6s; }
.profile-wrap:hover .profile-img img { transform:scale(1.04); filter:saturate(1.15) brightness(1.05); }

/* Floating chips */
.float-chip {
  position:absolute; display:flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--border-bright);
  backdrop-filter:blur(12px); font-size:.78rem; font-weight:600;
  box-shadow:var(--shadow-card);
}
.float-chip.top-right { top:8%; right:-14%; color:var(--blue); animation:float-y 4s ease-in-out infinite; }
.float-chip.bot-left  { bottom:12%; left:-14%; color:var(--purple-light); animation:float-y 4s ease-in-out 2s infinite; }
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Bio text */
.about-bio .label-tag { margin-bottom:1rem; }
.about-bio h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.1; letter-spacing:-.025em; margin-bottom:1.5rem; }
.about-bio p  { color:var(--text-2); font-size:.95rem; line-height:1.85; margin-bottom:1rem; }
.about-bio p strong { color:var(--text); }

/* Skill bars */
.skill-bars { margin-top:1.75rem; display:flex; flex-direction:column; gap:1rem; }
.skill-bar-item {}
.skill-bar-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.skill-bar-name { font-size:.8rem; font-weight:600; color:var(--text-2); }
.skill-bar-pct  { font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--text-3); }
.skill-bar-track {
  height:3px; background:var(--bg-3); border-radius:2px; overflow:hidden;
}
.skill-bar-fill {
  height:100%; border-radius:2px; width:0;
  background:linear-gradient(90deg,var(--blue),var(--purple-light));
  transition:width 1.2s var(--ease-out);
  box-shadow:0 0 8px rgba(0,212,255,.4);
}
.skill-bar-fill.purple { background:linear-gradient(90deg,var(--purple),var(--pink)); box-shadow:0 0 8px rgba(124,58,237,.4); }
.skill-bar-fill.teal   { background:linear-gradient(90deg,var(--teal),var(--blue)); box-shadow:0 0 8px rgba(20,184,166,.4); }

/* Pills */
.tag-cloud { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.25rem; }
.tag {
  padding:.3rem .75rem; border-radius:var(--r-full);
  font-size:.72rem; font-weight:500; font-family:'JetBrains Mono',monospace;
  border:1px solid var(--border); color:var(--text-3);
  transition:border-color .15s, color .15s, background .15s;
}
.tag:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-dim); }

/* ══════════════════════════════════════════════════════════════
   STATS / CHARTS ROW
══════════════════════════════════════════════════════════════ */
#stats {
  padding:clamp(3rem,6vh,5rem) 0;
  background:var(--bg-1);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  position:relative;
}
#stats::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,212,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,212,255,.025) 1px,transparent 1px);
  background-size:50px 50px; pointer-events:none;
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; position:relative; z-index:1; }
.stat-ring-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:1.75rem 1.25rem; display:flex; flex-direction:column; align-items:center;
  gap:1rem; position:relative; overflow:hidden;
  transition:transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
}
.stat-ring-card:hover { transform:translateY(-4px); border-color:rgba(0,212,255,.2); box-shadow:var(--shadow-blue); }
.stat-ring-card.purple-card:hover { border-color:rgba(124,58,237,.25); box-shadow:var(--shadow-purple); }

/* SVG ring chart */
.ring-chart { position:relative; width:100px; height:100px; flex-shrink:0; }
.ring-chart svg { transform:rotate(-90deg); overflow:visible; }
.ring-bg   { fill:none; stroke:var(--bg-3); stroke-width:6; }
.ring-fill {
  fill:none; stroke-width:6; stroke-linecap:round;
  stroke-dasharray:0 283; /* circumference ~283 for r=45 */
  transition:stroke-dasharray 1.4s var(--ease-out);
}
.ring-fill.blue   { stroke:var(--blue); filter:drop-shadow(0 0 6px var(--blue)); }
.ring-fill.purple { stroke:var(--purple-light); filter:drop-shadow(0 0 6px var(--purple-light)); }
.ring-fill.teal   { stroke:var(--teal); filter:drop-shadow(0 0 6px var(--teal)); }
.ring-fill.amber  { stroke:var(--amber); filter:drop-shadow(0 0 6px var(--amber)); }
.ring-center {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ring-num  { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; line-height:1; }
.ring-unit { font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.1em; color:var(--text-3); }
.stat-label { font-family:'Space Grotesk',sans-serif; font-size:.88rem; font-weight:600; text-align:center; }
.stat-sub   { font-size:.73rem; color:var(--text-3); text-align:center; font-family:'JetBrains Mono',monospace; letter-spacing:.05em; }

/* ══════════════════════════════════════════════════════════════
   EXPERTISE
══════════════════════════════════════════════════════════════ */
#expertise { background:var(--bg-2); }
#expertise::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-glow),transparent);
}
.expertise-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.exp-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:1.75rem; position:relative; overflow:hidden;
  transition:transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
  transform-style:preserve-3d; will-change:transform;
}
.exp-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,212,255,.07) 0%,transparent 55%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.exp-card:hover::before { opacity:1; }
.exp-card:hover { transform:translateY(-4px); border-color:rgba(0,212,255,.22); box-shadow:var(--shadow-blue); }
.exp-card.p:hover { border-color:rgba(124,58,237,.25); box-shadow:var(--shadow-purple); }
.exp-card.p::before { background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(124,58,237,.07) 0%,transparent 55%); }

.exp-num   { position:absolute; top:1.25rem; right:1.5rem; font-family:'Space Grotesk',sans-serif; font-size:3.5rem; font-weight:700; color:rgba(255,255,255,.03); line-height:1; user-select:none; }
.exp-icon  { font-size:1.75rem; margin-bottom:1.2rem; }
.exp-title { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:.6rem; }
.exp-desc  { font-size:.83rem; color:var(--text-2); line-height:1.7; margin-bottom:1.25rem; }
.exp-tags  { display:flex; flex-wrap:wrap; gap:.35rem; }
.exp-tag   {
  font-family:'JetBrains Mono',monospace; font-size:.67rem;
  padding:.22rem .6rem; border-radius:var(--r-full);
  border:1px solid var(--border); color:var(--text-3);
  transition:all .15s;
}
.exp-card:hover .exp-tag { border-color:rgba(0,212,255,.2); color:var(--text-2); }
.exp-card.p:hover .exp-tag { border-color:rgba(124,58,237,.2); }

/* ══════════════════════════════════════════════════════════════
   PROJECTS
══════════════════════════════════════════════════════════════ */
#projects { background:var(--bg); }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.25rem; }
.proj-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.proj-card:hover { transform:translateY(-4px); border-color:rgba(0,212,255,.2); box-shadow:var(--shadow-blue); }

/* Animated top bar */
.proj-bar { height:2px; background:linear-gradient(90deg,var(--blue),var(--purple)); width:0; transition:width .6s var(--ease-out); }
.proj-card:hover .proj-bar { width:100%; }
.proj-bar.purple { background:linear-gradient(90deg,var(--purple),var(--pink)); }
.proj-bar.teal   { background:linear-gradient(90deg,var(--teal),var(--blue)); }

.proj-head { padding:1.5rem 1.5rem 0; display:flex; align-items:flex-start; justify-content:space-between; }
.proj-icon { font-size:1.9rem; }
.proj-period { font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.08em; color:var(--text-3); padding:.3rem .7rem; border:1px solid var(--border); border-radius:var(--r-full); }
.proj-body { padding:1rem 1.5rem; flex:1; }
.proj-title { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.proj-desc  { font-size:.83rem; color:var(--text-2); line-height:1.7; }
.proj-foot  { padding:1.1rem 1.5rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.proj-tags  { display:flex; flex-wrap:wrap; gap:.3rem; }
.proj-tag   { font-family:'JetBrains Mono',monospace; font-size:.65rem; padding:.2rem .55rem; border-radius:var(--r-full); background:var(--blue-dim); color:var(--blue); border:1px solid rgba(0,212,255,.15); }
.proj-tag.p { background:var(--purple-dim); color:var(--purple-light); border-color:rgba(124,58,237,.15); }
.proj-metric { font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--green); }

/* ══════════════════════════════════════════════════════════════
   EXPERIENCE TIMELINE
══════════════════════════════════════════════════════════════ */
#experience { background:var(--bg-2); }
#experience::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--purple-glow),transparent);
}
.timeline { position:relative; max-width:780px; }
.tl-line {
  position:absolute; left:20px; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,var(--blue-glow),var(--purple-glow),transparent);
}
/* Animated SVG draw on the line */
.tl-line-svg {
  position:absolute; left:14px; top:0; height:100%; width:12px;
}
.tl-line-svg path {
  stroke:url(#timelineGrad); stroke-width:1; fill:none;
  stroke-dasharray:2000; stroke-dashoffset:2000;
  transition:stroke-dashoffset 2s var(--ease-out);
}
.tl-line-svg.drawn path { stroke-dashoffset:0; }

.tl-item { position:relative; padding-left:3.25rem; padding-bottom:2.75rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot {
  position:absolute; left:14px; top:5px;
  width:13px; height:13px; border-radius:50%;
  background:var(--blue); border:2px solid var(--bg-2);
  box-shadow:0 0 0 3px rgba(0,212,255,.15),0 0 12px var(--blue);
  transition:transform .2s, box-shadow .2s;
}
.tl-dot.purple { background:var(--purple-light); box-shadow:0 0 0 3px rgba(167,139,250,.15),0 0 12px var(--purple-light); }
.tl-item:hover .tl-dot { transform:scale(1.3); }

.tl-period { font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.12em; color:var(--text-3); margin-bottom:.3rem; }
.tl-role   { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:.15rem; }
.tl-type   { display:inline-flex; align-items:center; gap:.4rem; font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--blue); margin-bottom:.75rem; }
.tl-type.purple { color:var(--purple-light); }
.tl-desc   { font-size:.85rem; color:var(--text-2); line-height:1.75; }

/* ══════════════════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════════════════ */
#contact { background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%); }
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact-left h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1.1; letter-spacing:-.025em; margin-bottom:1.25rem; }
.contact-left p   { color:var(--text-2); font-size:.92rem; line-height:1.85; margin-bottom:2rem; }

.qlinks { display:flex; flex-direction:column; gap:.65rem; }
.qlink {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.2rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); transition:border-color .15s, background .15s;
}
.qlink:hover { border-color:rgba(0,212,255,.25); background:var(--surface-2); }
.qlink-l { display:flex; align-items:center; gap:.75rem; min-width:0; flex:1; }
.qlink-ico { font-size:1rem; width:28px; text-align:center; flex-shrink:0; }
.qlink-info { display:flex; flex-direction:column; min-width:0; }
.qlink-lbl { font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.1em; color:var(--text-3); }
.qlink-val { font-size:.85rem; color:var(--text-2); font-weight:500; word-break:break-all; overflow-wrap:anywhere; }
a.qlink-val { text-decoration:none; color:var(--text-2); cursor:pointer; transition:color .2s ease; }
a.qlink-val:visited { color:var(--text-2); }
a.qlink-val:hover { color:var(--blue); }
.qlink:has(a.qlink-val) { cursor:pointer; }

.copy-btn {
  padding:.28rem .7rem; border-radius:var(--r-full);
  font-size:.68rem; font-family:'JetBrains Mono',monospace;
  border:1px solid var(--border); color:var(--text-3);
  transition:all .15s; min-width:52px; text-align:center;
}
.copy-btn:hover { border-color:var(--blue); color:var(--blue); }
.copy-btn.ok    { border-color:var(--green); color:var(--green); background:rgba(34,197,94,.08); }

/* Form */
.form-wrap {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:clamp(1.5rem,4vw,2.25rem);
}
.form-wrap h3 { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:1.4rem; }
.fg { margin-bottom:1.1rem; }
.fg label { display:block; font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.1em; color:var(--text-3); margin-bottom:.45rem; }
.fg input, .fg textarea {
  width:100%; background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--r-xs); padding:.75rem .95rem; color:var(--text);
  font-family:'Inter',sans-serif; font-size:.88rem; outline:none; resize:none;
  transition:border-color .15s, box-shadow .15s;
}
.fg input::placeholder, .fg textarea::placeholder { color:var(--text-3); }
.fg input:focus, .fg textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,212,255,.09); }
.fg textarea { min-height:120px; }
.form-status { margin-top:.65rem; font-size:.8rem; min-height:1.1em; }
.form-status.ok  { color:var(--green); }
.form-status.err { color:#F87171; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
footer { border-top:1px solid var(--border); padding:1.75rem 0; }
.footer-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:.78rem; color:var(--text-3); }
.footer-copy span { color:var(--blue); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { font-size:.78rem; color:var(--text-3); transition:color .15s; }
.footer-links a:hover { color:var(--blue); }

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(36px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.reveal.left  { transform:translateX(-36px); }
.reveal.right { transform:translateX(36px); }
.reveal.scale { transform:scale(.96) translateY(20px); }
.reveal.done  { opacity:1; transform:none; }

.stagger > * {
  opacity:0; transform:translateY(28px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.stagger.done > *:nth-child(1) { transition-delay:0ms; }
.stagger.done > *:nth-child(2) { transition-delay:70ms; }
.stagger.done > *:nth-child(3) { transition-delay:140ms; }
.stagger.done > *:nth-child(4) { transition-delay:210ms; }
.stagger.done > *:nth-child(5) { transition-delay:280ms; }
.stagger.done > *:nth-child(6) { transition-delay:350ms; }
.stagger.done > * { opacity:1; transform:none; }

@keyframes fade-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  #particle-canvas { display:none; }
  .reveal, .stagger > * { opacity:1; transform:none; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤1024px
══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .expertise-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid     { grid-template-columns:repeat(2,1fr); }
  .hero-grid      { grid-template-columns:1fr; }
  .hero-metrics   { flex-direction:row; flex-wrap:wrap; margin-top:2rem; }
  .metric-card    { min-width:140px; flex:1; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤900px
══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .about-grid    { grid-template-columns:1fr; text-align:center; }
  .about-grid .profile-wrap { order:-1; }
  .tag-cloud     { justify-content:center; }
  .skill-bars    { max-width:480px; margin-inline:auto; }
  .contact-grid  { grid-template-columns:1fr; }
  .float-chip.top-right { right:0; top:-8%; }
  .float-chip.bot-left  { left:0; bottom:-8%; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤640px
══════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
  body { cursor:auto; }
  #cur-ring, #cur-dot { display:none; }
  .nav-links, .badge-avail { display:none; }
  .nav-ham    { display:flex; }
  .mob-nav    { display:flex; }
  .expertise-grid { grid-template-columns:1fr; }
  .stats-grid     { grid-template-columns:repeat(2,1fr); }
  .hero-grid      { grid-template-columns:1fr; }
  .hero-metrics   { display:none; }
  .projects-grid  { grid-template-columns:1fr; }
  .footer-row     { flex-direction:column; text-align:center; }
  .scroll-hint    { display:none; }
  .float-chip     { display:none; }
  .qlink          { padding:.75rem 1rem; gap:.75rem; }
  .footer-links   { gap:1rem; flex-wrap:wrap; justify-content:center; }
}

@media (max-width:400px) {
  .hero-ctas   { flex-direction:column; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .stats-grid  { grid-template-columns:1fr; }
}

/* ── SCROLL-DRIVEN WORD HIGHLIGHT ──────────────────────────── */
.highlight-wrap {
  padding: clamp(6rem, 12vh, 10rem) 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.scroll-word-highlight {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-3);
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: -0.02em;
}
.scroll-word-highlight span {
  display: inline;
  transition: color 0.25s ease, opacity 0.25s ease;
  opacity: 0.15;
  color: var(--text-3);
}
.scroll-word-highlight span.highlighted {
  opacity: 1;
  color: var(--text);
  text-shadow: 0 0 16px var(--blue-glow);
}

/* ── STACKING CARDS (BEFORE VS AFTER) ───────────────────────── */
/* ── STACKING COMPARISON TRACK (BEFORE VS WITH GOPS) ─────────── */
.comparison-track {
  position: relative;
  background: #07070a;
  height: 750vh; /* Multi-viewport scroll container */
}
.comparison-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #0b0a12 0%, #060609 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
#starfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}
.comparison-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(6, 6, 9, 0.9) 100%);
  pointer-events: none;
  z-index: 2;
}
.comparison-title-container {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
}
.comparison-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3rem, 11vw, 7.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s;
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.before-title {
  color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 80px rgba(239, 68, 68, 0.12);
  filter: blur(2px);
}
.before-title span:first-child {
  color: rgba(239, 68, 68, 0.18);
}
.after-title {
  color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 80px rgba(0, 212, 255, 0.18);
  filter: blur(2px);
  opacity: 0;
}
.after-title span:first-child {
  background: linear-gradient(135deg, var(--blue) 20%, var(--purple-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.muted-slash {
  color: rgba(255, 255, 255, 0.08);
}
.active-slash {
  background: linear-gradient(135deg, var(--purple-light) 0%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.comparison-cards-container {
  position: relative;
  z-index: 10;
  margin-top: -100vh; /* Overlays cards on the sticky wrapper */
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Allows scrolling through container empty areas */
}
.comparison-card-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  width: 100%;
  pointer-events: none;
}
.comparison-card-wrapper.right-align {
  justify-content: flex-end;
  padding-right: clamp(1rem, 6vw, 10vw);
}
.comparison-card-wrapper.left-align {
  justify-content: flex-start;
  padding-left: clamp(1rem, 6vw, 10vw);
}
.comparison-spacer {
  height: 120vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.warp-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  color: rgba(0, 212, 255, 0.35);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
  border: 1px dashed rgba(0, 212, 255, 0.15);
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  background: rgba(10, 10, 15, 0.4);
  backdrop-filter: blur(5px);
  animation: pulse-warp 2s infinite ease-in-out;
}
@keyframes pulse-warp {
  0%, 100% { opacity: 0.5; transform: scale(0.98); }
  50% { opacity: 0.9; transform: scale(1.02); }
}

.stack-card {
  background: rgba(13, 13, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  position: relative;
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: auto; /* Re-enable clicks and mouse interaction */
  max-width: 480px;
  width: 100%;
}
.stack-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0, 212, 255, 0.05) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.stack-card:hover::before { opacity: 1; }
.stack-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(239, 68, 68, 0.22);
  box-shadow: 0 15px 35px rgba(239, 68, 68, 0.08);
}
.stack-card.p:hover::before {
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(139, 92, 246, 0.05) 0%, transparent 60%);
}
.stack-card.p:hover {
  border-color: rgba(0, 212, 255, 0.25);
  box-shadow: 0 15px 35px rgba(0, 212, 255, 0.12);
}

.stack-card-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(239, 68, 68, 0.6);
  margin-bottom: 0.8rem;
}
.stack-card.p .stack-card-num { color: var(--blue); }

.stack-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--text);
}
.stack-card-desc {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .comparison-track {
    height: auto;
  }
  .comparison-sticky {
    position: relative;
    height: 40vh;
    border-bottom: 1px solid var(--border);
  }
  .comparison-title {
    font-size: 3rem;
  }
  .comparison-cards-container {
    margin-top: 2rem;
    padding-bottom: 4rem;
    gap: 2rem;
  }
  .comparison-card-wrapper {
    height: auto;
    justify-content: center !important;
    padding: 0 1rem !important;
  }
  .comparison-spacer {
    height: 10vh;
  }
  .stack-card {
    max-width: 100%;
    background: var(--surface);
  }
}

/* ── POOL RULES (RULES OF ENGAGEMENT) ───────────────────────── */
.rules-section {
  background: var(--bg-1);
  padding: clamp(6rem, 12vh, 10rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.rule-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
  transform-style: preserve-3d;
  will-change: transform;
}
.rule-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0, 212, 255, 0.05) 0%, transparent 65%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.rule-card:hover::before { opacity: 1; }
.rule-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 212, 255, 0.2);
  box-shadow: var(--shadow-blue);
}
.rule-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--blue-glow);
  margin-bottom: 0.75rem;
  transition: color 0.3s, text-shadow 0.3s;
}
.rule-card:hover .rule-num {
  color: var(--blue);
  text-shadow: 0 0 12px var(--blue-glow);
}
.rule-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.rule-desc {
  font-size: 0.83rem;
  color: var(--text-2);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .rules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rules-grid { grid-template-columns: 1fr; }
}

/* ── GREEK FIRE STORY ───────────────────────────────────────── */
.story-section {
  background: var(--bg-2);
  padding: clamp(6rem, 12vh, 10rem) 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.story-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.story-left {
  position: relative;
  z-index: 2;
}
.story-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.story-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}
.story-paragraph {
  color: var(--text-2);
  font-size: clamp(0.9rem, 1.6vw, 1.02rem);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.story-paragraph strong {
  color: var(--text);
}
.story-secret-word {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue), var(--purple-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 1rem;
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
}

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-right { margin-top: 2rem; }
}