/* =========================================================
   Stone Rabbit Technologies LLC
   Dark theme built on the wallpaper: black / red (#E02828) / bone
   ========================================================= */

:root {
  --red: #e02828;
  --red-dark: #b81c1c;
  --red-soft: #ff4b4b;
  --red-glow: rgba(224, 40, 40, .45);

  --black: #050506;
  --ink: #f4f4f6;          /* primary text on dark */
  --white: #ffffff;

  /* Translucent panels so the wallpaper reads through the page */
  --panel: rgba(14, 10, 12, .58);
  --panel-solid: rgba(10, 8, 9, .82);
  --wash: rgba(5, 5, 6, .62);
  --line: rgba(255, 92, 92, .16);
  --line-strong: rgba(255, 92, 92, .38);
  --muted: #a9a9b4;
  --muted-2: #7c7c88;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(224,40,40,.22), 0 10px 24px rgba(0,0,0,.5);

  --container: 1160px;
  --ease: cubic-bezier(.22,1,.36,1);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--black);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* z-index 3 keeps real content above the code rail (z-index 2), which in turn
   floats above the section washes. Without this the rail would paint over copy. */
.container { width: min(var(--container), 92vw); margin: 0 auto; position: relative; z-index: 3; }

/* =============== Fixed wallpaper backdrop ===============
   A fixed element rather than background-attachment: fixed,
   which stutters badly on iOS Safari. */
.bg-layer {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: url('../assets/wallpaper.png');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: var(--black);
}
/* Keeps the rabbit + moon from crowding the copy on narrow screens */
@media (max-width: 980px) {
  .bg-layer { background-position: 72% center; }
}

/* Accessibility */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--red-soft); outline-offset: 3px; border-radius: 4px; }

/* =============== Code rail (scroll-generated) ===============
   Floats above the section washes (or it would be buried the moment you
   scroll past the hero) but below .container content, so it passes behind
   copy rather than over it. The gutter alone is too narrow on a laptop, so
   it runs wider and dissolves to the right. */
.code-rail {
  position: fixed; top: 0; bottom: 18%; left: 0; z-index: 2;
  width: clamp(300px, 32vw, 520px);
  pointer-events: none; user-select: none;
  padding: 92px 0 0 clamp(12px, 1.6vw, 32px);
  overflow: hidden;
  /* Stream is bottom-anchored, so retiring lines dissolve off the top. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}
.code-rail-inner {
  height: 100%;
  /* Anchored at the left edge so the stream pivots away from the viewer:
     near on the left, receding into the page on the right. */
  perspective: 460px;
  perspective-origin: 0% 50%;
  /* dissolve to the right so lines trail off instead of hitting a hard edge */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 92%);
}
.code-stream {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  font-family: var(--font-mono);
  font-size: .74rem; line-height: 1.9;
  white-space: pre;
  transform: rotateY(34deg);
  transform-origin: 0% 50%;
  opacity: .3;                       /* sits well behind the page content */
}
.code-line {
  color: #8f8f99;
  text-shadow: 0 0 14px rgba(0,0,0,.9);
  animation: codeIn .45s var(--ease) both;
}
.code-line.spacer { min-height: 1.85em; }
/* Retiring lines collapse their height so the stream scrolls up smoothly */
.code-line.out { opacity: 0; overflow: hidden; transition: height .5s linear, opacity .4s linear; }
@keyframes codeIn { from { opacity: 0; } to { opacity: 1; } }

.code-line .c-com { color: var(--red); opacity: .82; }      /* comments — red, per the wallpaper */
.code-line .c-kw  { color: #cfcfd8; }
.code-line .c-fn  { color: #e6e6ee; }
.code-line .c-str { color: var(--red-soft); opacity: .75; }
.code-line .c-num { color: var(--red-soft); opacity: .75; }
.code-line .c-pun { color: #6f6f7a; }

/* the typing head: a glyph still settling out of the scramble */
.code-line .c-head { color: #fff; text-shadow: 0 0 10px var(--red-glow); }
.caret {
  display: inline-block; width: .58em; height: 1.05em; vertical-align: -.18em;
  background: var(--red-soft); box-shadow: 0 0 12px var(--red-glow);
  animation: caretBlink 1.1s steps(1) infinite;
}
@keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* Below this the layout is single-column and the rail is just noise. */
@media (max-width: 1024px) { .code-rail { display: none; } }

/* =============== Header =============== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(5,5,6,.55);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled {
  background: rgba(5,5,6,.82);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 28px rgba(0,0,0,.5);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; transition: transform .5s var(--ease), filter .5s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); filter: drop-shadow(0 0 12px var(--red-glow)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.brand-sub { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); font-weight: 600; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: .95rem; font-weight: 500; color: var(--ink); position: relative; }
.nav a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--red); box-shadow: 0 0 10px var(--red-glow);
  transition: right .3s var(--ease);
}
.nav a:not(.nav-cta):hover::after { right: 0; }
.nav-cta {
  background: var(--red); padding: 9px 18px; border-radius: 999px;
  font-weight: 600; border: 1px solid var(--red);
  box-shadow: 0 6px 20px rgba(224,40,40,.3);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Higher specificity than `.nav a` so the label stays white */
.nav a.nav-cta, .mobile-nav a.nav-cta { color: #fff; }
.nav a.nav-cta:hover, .mobile-nav a.nav-cta:hover {
  background: transparent; color: #fff; border-color: var(--red);
  transform: translateY(-2px); box-shadow: 0 10px 28px rgba(224,40,40,.45);
}

.menu-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer;
  padding: 8px; border-radius: 8px;
}
.menu-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column; padding: 8px 4vw 20px;
  border-bottom: 1px solid var(--line); background: rgba(5,5,6,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mobile-nav a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 500; }
.mobile-nav a:last-child { border: 0; }
.mobile-nav .nav-cta { margin-top: 12px; text-align: center; border-radius: 999px; }
.mobile-nav.open { display: flex; }

/* =============== Buttons =============== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: .98rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 30px rgba(224,40,40,.4); }
.btn-primary:hover { background: var(--red-soft); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(224,40,40,.55); }
.btn-ghost {
  background: rgba(255,255,255,.03); color: #fff; border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--red); color: #fff; background: rgba(224,40,40,.1); transform: translateY(-3px); }

/* =============== Hero =============== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 148px 0 110px;
  overflow: hidden;
}
/* Left-side veil: keeps copy readable without dimming the rabbit or moon */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,6,.86) 0%, rgba(5,5,6,.6) 42%, transparent 72%);
}
.hero-inner { position: relative; z-index: 1; max-width: 660px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(224,40,40,.6); animation: pulse 2.2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(224,40,40,.55); }
  70% { box-shadow: 0 0 0 10px rgba(224,40,40,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,40,40,0); }
}
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em;
  color: #fff; margin-bottom: 22px;
  text-shadow: 0 6px 40px rgba(0,0,0,.7);
}
.hero-title .accent { color: var(--red); text-shadow: 0 0 34px var(--red-glow); }
.hero-lead { font-size: 1.18rem; color: var(--muted); max-width: 40ch; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }

.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: #fff; line-height: 1; }
.stat-label { font-size: .82rem; color: var(--muted-2); margin-top: 6px; max-width: 16ch; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.3); border-radius: 20px; display: grid; place-items: start center;
}
.scroll-cue span { width: 4px; height: 9px; background: var(--red-soft); border-radius: 2px; margin-top: 7px; box-shadow: 0 0 8px var(--red-glow); animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0);} 40% { opacity: 1;} 80% { opacity: 0; transform: translateY(12px);} 100% { opacity: 0; } }

/* =============== Strip =============== */
.strip {
  position: relative;
  background: rgba(5,5,6,.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 40px 0;
}
.strip-inner { text-align: center; font-size: 1.16rem; color: var(--muted); max-width: 70ch; margin: 0 auto; }
.strip-inner strong { color: #fff; }

/* =============== Sections ===============
   A translucent wash lets the fixed wallpaper glow through
   while keeping body copy at a readable contrast. */
.section { position: relative; padding: 96px 0; background: var(--wash); }
.section-alt { background: rgba(5,5,6,.74); }
.section-head { max-width: 62ch; margin: 0 auto 56px; text-align: center; }
.kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px; text-shadow: 0 0 20px var(--red-glow);
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.02em; color: #fff; line-height: 1.08;
}
.section-sub { color: var(--muted); font-size: 1.1rem; margin-top: 16px; }
/* Keep this heading on a single line on desktop (wraps normally on mobile) */
@media (min-width: 721px) { #work .section-head h2 { white-space: nowrap; } }

/* =============== Cards (services) =============== */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow); position: relative; overflow: hidden;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red), var(--red-soft));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.card:hover::before { transform: scaleX(1); }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(224,40,40,.12); color: var(--red-soft); font-size: 1.4rem; font-weight: 700;
  font-family: var(--font-display); margin-bottom: 20px;
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover .card-icon { background: var(--red); color: #fff; box-shadow: 0 0 24px var(--red-glow); }
.card h3 { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: -.01em; margin-bottom: 10px; color: #fff; }
.card p { color: var(--muted); font-size: .98rem; margin-bottom: 16px; }
.card-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.card-list li { font-size: .9rem; color: var(--ink); padding-left: 20px; position: relative; }
.card-list li::before { content: '▸'; color: var(--red); position: absolute; left: 0; font-size: .8rem; }

/* =============== Steps (how I work) =============== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  position: relative; padding: 30px 24px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.step-num { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--red); opacity: .38; display: block; margin-bottom: 10px; }
.step h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; color: #fff; }
.step p { color: var(--muted); font-size: .96rem; }

/* =============== Skills =============== */
.skills-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; }
.skill-col {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.skill-tier { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 20px; color: #fff; }
.tier-dot { width: 12px; height: 12px; border-radius: 50%; }
.tier-dot.proficient { background: var(--red); box-shadow: 0 0 12px var(--red-glow); }
.tier-dot.comfortable { background: #fff; }
.tier-dot.familiar { background: var(--muted-2); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-size: .88rem; font-weight: 500; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink);
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  cursor: default;
}
.chip:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-3px); }

/* =============== Timeline =============== */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 34px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--red), rgba(255,92,92,.05)); }
.tl-item { position: relative; padding: 0 0 38px 8px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -34px; top: 5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--black); border: 3px solid var(--red);
  box-shadow: 0 0 0 5px rgba(224,40,40,.12), 0 0 16px var(--red-glow);
  transition: transform .3s var(--ease);
}
.tl-item:hover .tl-dot { transform: scale(1.2); }
.tl-content {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tl-item:hover .tl-content { transform: translateX(4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.tl-date { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.tl-content h3 { font-family: var(--font-display); font-size: 1.22rem; letter-spacing: -.01em; color: #fff; }
.tl-org { display: block; font-size: .92rem; color: var(--muted-2); font-weight: 500; margin: 3px 0 10px; }
.tl-content p { color: var(--muted); font-size: .97rem; }
.tl-content p strong { color: #fff; }

/* =============== Projects =============== */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position: relative; overflow: hidden;
}
.project:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.project-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lang { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--red-soft); background: rgba(224,40,40,.12); padding: 5px 11px; border-radius: 999px; }
.proj-arrow { color: var(--muted-2); font-size: 1.2rem; transition: transform .3s var(--ease), color .3s var(--ease); }
.project:hover .proj-arrow { transform: translate(3px,-3px); color: var(--red-soft); }
.project h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 8px; color: #fff; }
.project p { color: var(--muted); font-size: .95rem; }
.projects-cta { text-align: center; margin-top: 40px; }

/* =============== Contact =============== */
.contact { background: rgba(5,5,6,.5); }
.contact-card {
  text-align: center; max-width: 60ch; margin: 0 auto; position: relative;
  background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 48px 40px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}
.contact-logo { width: 84px; margin: 0 auto 24px; filter: drop-shadow(0 12px 30px var(--red-glow)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.contact .kicker { color: var(--red-soft); }
.contact-card h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.9rem); color: #fff; letter-spacing: -.02em; line-height: 1.08; }
.contact-card p { color: var(--muted); font-size: 1.12rem; margin: 18px auto 32px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* =============== Footer =============== */
.site-footer { position: relative; background: rgba(3,3,4,.92); color: var(--muted-2); padding: 46px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-mark { width: 44px; }
.footer-brand strong { color: #fff; display: block; font-family: var(--font-display); }
.footer-brand span { font-size: .86rem; }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { font-size: .92rem; transition: color .2s var(--ease); }
.footer-nav a:hover { color: var(--red-soft); }
.footer-copy { font-size: .84rem; width: 100%; text-align: center; padding-top: 20px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }

/* =============== Reveal animations =============== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Stagger children within grids */
.cards .reveal.in:nth-child(2) { transition-delay: .08s; }
.cards .reveal.in:nth-child(3) { transition-delay: .16s; }
.cards .reveal.in:nth-child(4) { transition-delay: .24s; }
.steps .reveal.in:nth-child(2) { transition-delay: .08s; }
.steps .reveal.in:nth-child(3) { transition-delay: .16s; }
.steps .reveal.in:nth-child(4) { transition-delay: .24s; }

/* =============== Responsive =============== */
@media (max-width: 980px) {
  .cards, .steps { grid-template-columns: 1fr 1fr; }
  .projects { grid-template-columns: 1fr 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 120px; }
  .hero-inner { max-width: none; }
  .hero-lead { max-width: none; }
  /* copy sits over the rabbit here, so veil the whole hero */
  .hero::before { background: linear-gradient(180deg, rgba(5,5,6,.8) 0%, rgba(5,5,6,.62) 60%, rgba(5,5,6,.8) 100%); }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
  .section { padding: 68px 0; }
  .cards, .steps, .projects { grid-template-columns: 1fr; }
  .hero-stats { gap: 24px; }
  .stat-num { font-size: 1.7rem; }
  .contact-card { padding: 36px 24px; }
  .footer-inner { justify-content: center; text-align: center; }
}

/* =============== Reduced motion =============== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .code-rail { display: none; }
}