/* ════════════════════════════════════════════════════════════════════
   PORTFOLIO STYLESHEET — Aditya Kumar Sinha
   ════════════════════════════════════════════════════════════════════
   DESIGN PHILOSOPHY
   A dark, glassmorphic "math meets code" aesthetic: warm amber/orange
   accent on near-black backgrounds (with a light "parchment" mode as
   the alternative theme), soft frosted-glass cards, generous negative
   space, and understated motion (fade/slide reveals, floating elements,
   subtle glows) rather than loud animation. The overall tone aims for
   "quietly confident technical portfolio" — precise typography, muted
   secondary text, one accent color used consistently for emphasis.

   TYPOGRAPHY SYSTEM (3 families, each with a distinct job — see --fd/--fb/--fm below)
     --fd (display) 'Sora'/'Space Grotesk' → headings, big numbers, titles.
                     Bold, geometric, slightly condensed — for IMPACT.
     --fb (body)     'Inter'               → paragraphs, body copy.
                     Neutral, highly legible at small sizes — for READING.
     --fm (mono)     'JetBrains Mono'      → labels, tags, nav links, badges,
                     stats, code-adjacent UI chrome — for a "technical/CP" feel.
   Rule of thumb when adding new UI: headings → --fd, prose → --fb,
   anything small/uppercase/label-like or numeric/stat-like → --fm.

   COLOR SYSTEM (CSS custom properties, themed via [data-theme])
   All colors are defined as tokens in the TOKENS block below and consumed
   everywhere else via var(--token) — never hardcode a hex value in a
   component rule; add/adjust the token instead so both themes stay in sync.
     --bg/--bg2/--bg3   → background layers, darkest to lightest (dark theme)
                           or lightest to darkest (light theme), used for
                           section-to-section contrast (see .about-section,
                           .cp-section, etc. each pinned to a --bgN).
     --surf/--surf2      → subtle translucent fill for interactive chrome
                           (pills, inputs, badges) — surf2 is the "hover/active" step up
     --bord/--bord2       → hairline borders; bord2 is the more visible variant
                           used on hover states
     --text/--text2/--text3 → foreground text, high → low emphasis
                           (text = headings/primary, text2 = body/secondary,
                           text3 = tertiary/timestamps/faint labels)
     --accent/--accent2/--accent3 → the single brand hue (warm orange) in
                           3 steps: accent = primary CTA/link color,
                           accent2 = lighter highlight (hover, "hot" tags),
                           accent3 = deeper shade (gradient starts, e.g. progress bars)
     --glow/--glow2       → accent color at low opacity, used for box-shadow
                           "glow" effects around buttons/avatars — glow2 is fainter
     --card/--card-h      → glassmorphic card background, default vs hover
     --shadow             → the one drop-shadow used for deep elevation (rarely referenced directly)
   To retheme the whole site (e.g. swap orange for blue), you only need to
   edit the --accent/--accent2/--accent3/--glow/--glow2 values in BOTH
   [data-theme="dark"] and [data-theme="light"] blocks — everything else
   (buttons, links, borders, glows, bars) inherits from those automatically.

   LAYOUT PRIMITIVES
     --nh   → fixed navbar height, referenced by hero's padding-top and
              the mobile dropdown's top offset — change once here if the
              navbar's visual height ever changes.
     --mw   → max content width (1140px) used by .wrap and most section
              inner containers, for consistent side margins across sections.
     --ease/--ease2 → the two easing curves used for nearly all transitions;
              --ease (a soft "overshoot-then-settle" curve) is used for most
              hover/reveal motion, --ease2 is a standard material-style curve.

   FILE MAP (search these landmark comments to jump around)
     TOKENS → RESET → SCROLL PROGRESS → CANVAS → CURSOR → NAV → SHARED
     → MATH FLOATS → HERO → MARQUEE → ABOUT → PROJECTS → CP STATS
     → SKILLS → ACHIEVEMENTS → CONTACT → FOOTER → TILT/MAGNETIC → RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ═══ TOKENS ═══
   Single source of truth for every color/spacing value used across the
   site. Dark theme is the default (see <html data-theme="dark"> in the
   HTML); light theme values are hand-tuned to feel like warm parchment,
   not just an inverted dark theme — note the accent hue shifts slightly
   darker/more saturated in light mode (#c45e00 vs #ff9933) since a bright
   orange that pops on black would look washed out on a pale background. */
[data-theme="dark"] {
  /* Background layers: darkest → slightly lighter, used to separate
     sections visually without hard borders (e.g. hero=bg, about=bg2) */
  --bg:        #0a0a0a;
  --bg2:       #0f0f14;
  --bg3:       #141420;

  /* Translucent surface fills for chips/inputs/badges (glassmorphism) */
  --surf:      rgba(255,255,255,0.04);
  --surf2:     rgba(255,255,255,0.07);

  /* Hairline borders — bord2 used on hover/focus for a slightly stronger edge */
  --bord:      rgba(255,255,255,0.08);
  --bord2:     rgba(255,255,255,0.16);

  /* Text hierarchy: text = headings/high-emphasis, text2 = body copy,
     text3 = faint/tertiary (timestamps, disabled-ish labels) */
  --text:      #f5f5f5;
  --text2:     #a0a0a0;
  --text3:     #555;

  /* THE brand accent — warm amber/orange. accent2 = lighter (hover/hot
     state), accent3 = deeper (used at the start of gradients) */
  --accent:    #ff9933;
  --accent2:   #ffd580;
  --accent3:   #ff6600;

  /* Accent-tinted glow shadows, used around buttons/avatars/pills */
  --glow:      rgba(255,153,51,0.22);
  --glow2:     rgba(255,153,51,0.08);

  /* Glassmorphic card fill: card = resting state, card-h = hover state */
  --card:      rgba(255,255,255,0.03);
  --card-h:    rgba(255,255,255,0.065);

  /* --noise is reserved for a potential grain/noise overlay (not currently
     wired into any rule below — safe to use if you add a noise texture) */
  --noise:     0.032;
  --shadow:    0 24px 64px rgba(0,0,0,0.6);
}
[data-theme="light"] {
  /* "Warm parchment" palette — off-white/cream rather than pure white,
     to keep the same cozy, slightly bookish feel as the dark theme */
  --bg:        #faf8f4;
  --bg2:       #f3efe7;
  --bg3:       #ede8de;
  --surf:      rgba(0,0,0,0.03);
  --surf2:     rgba(0,0,0,0.06);
  --bord:      rgba(0,0,0,0.08);
  --bord2:     rgba(0,0,0,0.18);

  /* Text flips to near-black with a warm brown tint (not pure #000)
     to match the parchment background undertone */
  --text:      #1a1006;
  --text2:     #6b5e4a;
  --text3:     #b0a090;

  /* Accent is deepened/desaturated vs dark mode so it stays legible
     and doesn't look neon against a light background */
  --accent:    #c45e00;
  --accent2:   #e07020;
  --accent3:   #ff8820;
  --glow:      rgba(196,94,0,0.18);
  --glow2:     rgba(196,94,0,0.06);
  --card:      rgba(255,255,255,0.7);
  --card-h:    rgba(255,255,255,0.95);
  --noise:     0.018;
  --shadow:    0 24px 64px rgba(0,0,0,0.12);
}
:root {
  /* Typography stacks — see the philosophy note at the top of this file
     for when to use each one */
  --fd: 'Sora', 'Space Grotesk', sans-serif;   /* display: headings, big stats */
  --fb: 'Inter', sans-serif;                    /* body: paragraphs, prose */
  --fm: 'JetBrains Mono', monospace;            /* mono: labels/tags/nav/badges */

  --nh: 68px;      /* fixed navbar height */
  --mw: 1140px;    /* max content width for .wrap containers */

  /* Shared easing curves — --ease has a gentle overshoot (nice for
     hover lifts and reveal-on-scroll), --ease2 is a standard, more
     "mechanical" curve used sparingly */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease2: cubic-bezier(0.4,0,0.2,1);
}

/* ═══ RESET ═══
   Minimal, standard CSS reset. Notable non-default choices:
   - `cursor:none` globally because the site uses a custom animated
     cursor (#cursor-dot/#cursor-ring in the HTML) driven by JS —
     if you ever remove the custom cursor, delete `cursor:none` here
     and from button/input/textarea below, or the native cursor stays hidden.
   - `strong` is restyled to use the accent color instead of just bold,
     so inline emphasis in bios/descriptions doubles as a visual accent hit. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font-family:inherit;cursor:none}
strong{font-weight:600;color:var(--accent2)}

/* ═══ SCROLL PROGRESS ═══
   Thin gradient bar pinned to the very top of the viewport; its width is
   updated by JS as the user scrolls (0% at top of page → 100% at bottom). */
#scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--accent3),var(--accent),var(--accent2));z-index:9999;width:0%;transition:width .1s linear}

/* ═══ CANVAS ═══
   Full-viewport, fixed, behind everything (z-index:0) — background for
   the ambient particle animation drawn by JS. pointer-events:none so it
   never blocks clicks on real content above it. */
#particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ═══ CURSOR ═══
   Custom cursor replacement: a small solid dot that tracks the mouse
   exactly, plus a larger outlined ring that trails slightly behind (via
   its own transition timing) for a subtle lag/elastic feel. JS sets the
   --x/--y (dot) and --ring-x/--ring-y (ring) custom properties on each
   mousemove. Hover/click states below add visual feedback. */
#cursor-dot{
  position:fixed;pointer-events:none;z-index:9999;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  transform:translate(var(--x,0),var(--y,0)) translate(-50%,-50%);
  transition:transform .08s linear;
  box-shadow:0 0 10px 3px var(--glow);
}
#cursor-ring{
  position:fixed;pointer-events:none;z-index:9998;
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid rgba(255,153,51,.45);
  transform:translate(var(--ring-x,0),var(--ring-y,0)) translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,opacity .3s;
}
/* Grows + brightens when hovering an interactive element (JS toggles
   .is-hovering on <body>); dot briefly scales up on mousedown (.is-clicking) */
body.is-hovering #cursor-ring{width:60px;height:60px;border-color:var(--accent)}
body.is-clicking #cursor-dot{transform:translate(var(--x,0),var(--y,0)) translate(-50%,-50%) scale(1.6)}

/* ═══ NAV ═══
   Fixed top navbar, transparent over the hero until scrolled (JS adds
   .scrolled once the user scrolls past a threshold), at which point it
   gets a frosted-glass background + bottom border. Desktop shows full
   link list + "Hire me" CTA; mobile collapses to a hamburger + dropdown
   (see .nav-mobile and the RESPONSIVE section at the bottom of this file). */
#navbar{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nh);transition:background .4s,border-color .4s,backdrop-filter .4s}
#navbar.scrolled{background:rgba(10,10,10,.82);backdrop-filter:blur(28px);border-bottom:1px solid var(--bord)}
[data-theme="light"] #navbar.scrolled{background:rgba(250,248,244,.88)}
.nav-wrap{max-width:var(--mw);margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-img-wrap{width:36px;height:36px;border-radius:8px;overflow:hidden;background:var(--surf2);display:flex;align-items:center;justify-content:center;border:1px solid var(--bord)}
.logo-img-wrap img{width:100%;height:100%;object-fit:cover}
.logo-text{font-family:var(--fd);font-size:1.1rem;font-weight:700;letter-spacing:-0.02em}
.nav-links{list-style:none;display:flex;gap:32px}
/* Uppercase mono labels for nav links — small caps-style tech feel,
   with an animated underline that grows from 0 to full width on hover/active */
.nav-links a{font-size:.78rem;font-weight:500;color:var(--text2);letter-spacing:.07em;text-transform:uppercase;position:relative;padding-bottom:2px;transition:color .2s}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--accent);transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Theme toggle: sun/moon SVGs cross-fade + rotate into each other based
   on [data-theme] — see .icon-sun/.icon-moon opacity+transform pairs */
#theme-toggle{width:40px;height:40px;border-radius:10px;background:var(--surf);border:1px solid var(--bord);color:var(--text);display:flex;align-items:center;justify-content:center;position:relative;transition:background .2s,transform .15s}
#theme-toggle:hover{background:var(--surf2);transform:scale(1.07)}
#theme-toggle svg{width:17px;height:17px;position:absolute;transition:opacity .3s,transform .3s}
.icon-sun{opacity:1;transform:scale(1)}
.icon-moon{opacity:0;transform:scale(.7) rotate(-20deg)}
[data-theme="light"] .icon-sun{opacity:0;transform:scale(.7) rotate(20deg)}
[data-theme="light"] .icon-moon{opacity:1;transform:scale(1) rotate(0deg)}
/* Primary CTA button in the nav — solid accent fill, the one "loud"
   element in an otherwise muted navbar */
.nav-hire{font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:10px 22px;border-radius:9px;background:var(--accent);color:#0a0a0a;transition:background .2s,transform .15s,box-shadow .2s}
.nav-hire:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 24px var(--glow)}
/* Hamburger: 3-line icon that morphs into an X (via rotate/translate) when .open */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-mobile{display:none;flex-direction:column;position:absolute;top:var(--nh);left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--bord);padding:16px 28px;gap:16px}
.nav-mobile.open{display:flex}
.nav-mobile a{font-size:.9rem;color:var(--text2);font-weight:500;transition:color .2s}
.nav-mobile a:hover{color:var(--accent)}

/* ═══ SHARED ═══
   Reusable primitives referenced across most sections — the "design
   system" layer. If you're building a new section, start by reusing
   .wrap / .section / .eyebrow / .s-title / .glass-card / .reveal-up
   rather than writing new one-off rules. */
.wrap{max-width:var(--mw);margin:0 auto;padding:0 28px}
.section{padding:120px 0;position:relative;z-index:1}
/* Small mono eyebrow label above each section heading (e.g. "01 — About") */
.eyebrow{display:block;font-family:var(--fm);font-size:.68rem;color:var(--accent);letter-spacing:.1em;margin-bottom:14px}
.s-head{margin-bottom:60px}
/* Big display heading used at the top of every section; <em> inside it
   is the italic accent-colored word (e.g. "the person <em>behind the code</em>") */
.s-title{font-family:var(--fd);font-size:clamp(2.8rem,5.5vw,5rem);font-weight:800;line-height:.97;letter-spacing:-.04em;color:var(--text)}
.s-title em{font-style:italic;color:var(--accent);font-weight:700}
/* THE glassmorphism primitive — translucent fill + blur + hairline border,
   used for every card/panel across the site (fact cards, project cards,
   stat cards, social links, the contact form, etc.) */
.glass-card{background:var(--card);border:1px solid var(--bord);backdrop-filter:blur(12px);border-radius:16px;transition:background .25s,border-color .25s,transform .3s var(--ease),box-shadow .3s}
.glass-card:hover{background:var(--card-h);border-color:var(--bord2)}
/* Scroll-reveal primitive: starts hidden/offset, JS adds .visible via
   IntersectionObserver when the element scrolls into view. Elements set
   an inline `style="--d:0.1s"` etc. to stagger multiple items in sequence
   (see any section — cards typically increment --d by ~0.05-0.08s each). */
.reveal-up{opacity:0;transform:translateY(36px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}
.reveal-up.visible{opacity:1;transform:none}

/* ═══ MATH FLOATS ═══
   Decorative background math symbols (Σ, π, ∫...) that drift slowly up
   and down. Each span's position (--tx/--ty), size (--s), and animation
   timing (--d delay, --dur duration) are set via inline style in the HTML —
   this block just defines the shared look (faint accent color, low opacity)
   and the float keyframe itself. Currently only used in the hero section. */
.math-float{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.math-float span{
  position:absolute;left:var(--tx);top:var(--ty);
  font-family:var(--fm);font-size:var(--s);
  color:var(--accent);opacity:.07;
  animation:mf-float var(--dur) ease-in-out var(--d) infinite alternate;
  user-select:none;
}
@keyframes mf-float{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-22px) rotate(3deg)}}

/* ═══ HERO ═══
   Full-viewport intro section. Two-column grid on desktop (copy left,
   floating avatar right), stacks to a single centered column on mobile
   (see RESPONSIVE). Typography here intentionally goes BIGGER than
   anywhere else on the site (hero-name uses clamp up to 7.5rem) since
   this is the one "hero moment" — everything else stays comparatively restrained. */
.hero{min-height:100vh;padding-top:var(--nh);position:relative;overflow:hidden;display:flex;align-items:center}
#hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-wrap{max-width:var(--mw);margin:0 auto;padding:60px 28px;display:grid;grid-template-columns:1fr 420px;gap:80px;align-items:center;position:relative;z-index:1;width:100%}
/* Status pill ("Open to Research & Collaboration") with a pulsing dot */
.hero-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:.68rem;color:var(--text2);border:1px solid var(--bord2);border-radius:100px;padding:7px 14px;width:fit-content}
.pill-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pdot 2s ease-in-out infinite;flex-shrink:0}
@keyframes pdot{0%,100%{box-shadow:0 0 0 0 var(--glow)}50%{box-shadow:0 0 0 5px transparent}}
/* The big name — deliberately the largest text on the page */
.hero-name{font-family:var(--fd);font-size:clamp(3.4rem,8vw,7.5rem);font-weight:800;line-height:.93;letter-spacing:-.045em;margin:.2em 0}
.name-line{display:block}
.name-accent{color:var(--text)}
.name-accent em{font-style:italic;color:var(--accent)}
/* Typewriter tagline — the blinking-cursor "//" style code-comment look,
   text itself is typed character-by-character into #typed-text by JS */
.hero-typed{font-family:var(--fm);font-size:.96rem;color:var(--text2);min-height:1.6em}
.typed-prefix{color:var(--accent);opacity:.5}
.typed-cur{display:inline-block;width:2px;height:.9em;background:var(--accent);margin-left:1px;vertical-align:middle;animation:blink .9s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-bio{font-size:.97rem;color:var(--text2);max-width:460px;line-height:1.8;margin-top:4px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* Primary CTA: solid accent fill + lift/glow on hover — the site's main
   "button" pattern, reused conceptually (not literally) in .nav-hire, .cf-send, etc. */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#0a0a0a;font-size:.88rem;font-weight:700;letter-spacing:.02em;padding:14px 28px;border-radius:11px;transition:background .2s,transform .15s,box-shadow .2s;border:none}
.btn-primary svg{width:17px;height:17px;transition:transform .2s}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 10px 32px var(--glow)}
.btn-primary:hover svg{transform:translateX(3px)}
/* Secondary CTA: outline-only, for the lower-priority action next to a primary button */
.btn-secondary{display:inline-flex;align-items:center;color:var(--text);font-size:.88rem;font-weight:600;padding:14px 28px;border-radius:11px;border:1px solid var(--bord2);transition:border-color .2s,color .2s,transform .15s}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
/* Quick stat row (Problems Solved / Contests Entered / Year) — big display
   numbers with small mono labels underneath, separated by thin vertical dividers */
.hero-metrics{display:flex;align-items:center;gap:28px;padding-top:8px}
.metric{display:flex;flex-direction:column;gap:2px}
.met-v{font-family:var(--fd);font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--text);line-height:1}
.met-u{font-family:var(--fd);font-size:1.5rem;font-weight:700;color:var(--accent);vertical-align:top}
.met-l{font-family:var(--fm);font-size:.65rem;color:var(--text2);line-height:1.3;margin-top:3px}
.met-div{width:1px;height:40px;background:var(--bord2)}

/* avatar — the floating photo card on the right side of the hero, with
   concentric rotating rings (r1/r2/r3, each a different speed/direction/
   opacity for a layered orbit effect) and two info chips overlaid on top. */
.avatar-scene{position:relative;width:420px;height:420px;display:flex;align-items:center;justify-content:center}
.av-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 70%);pointer-events:none;animation:aglow 5s ease-in-out infinite}
@keyframes aglow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.av-frame{width:280px;height:340px;border-radius:24px;overflow:hidden;border:1px solid var(--bord2);position:relative;z-index:2;background:var(--surf2);animation:av-float 7s ease-in-out infinite}
@keyframes av-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.av-inner{width:100%;height:100%;overflow:hidden}
.av-inner img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* Three concentric rings, each larger/fainter/slower than the last, spinning
   in alternating directions for visual depth without feeling busy */
.av-ring{position:absolute;border-radius:50%;border:1px solid;animation:spin linear infinite}
.r1{width:340px;height:340px;border-color:rgba(255,153,51,.1);animation-duration:28s}
.r2{width:390px;height:390px;border-color:rgba(255,153,51,.06);animation-duration:40s;animation-direction:reverse}
.r3{width:430px;height:430px;border-color:rgba(255,153,51,.04);animation-duration:55s}
@keyframes spin{to{transform:rotate(360deg)}}
/* Floating info chips (Codeforces handle / university), each with its
   own gentle float animation offset slightly out of sync with each other
   and with the photo frame itself, so nothing moves in lockstep */
.av-card{position:absolute;background:rgba(15,15,20,.85);backdrop-filter:blur(16px);border:1px solid var(--bord2);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;z-index:3;min-width:160px}
.av-card--top{top:20px;right:-30px;animation:av-float 8s ease-in-out 1s infinite}
.av-card--bottom{bottom:30px;left:-40px;animation:av-float 8.5s ease-in-out .5s infinite}
.avc-icon{font-size:1.4rem;flex-shrink:0}
.avc-title{display:block;font-size:.82rem;font-weight:600;color:var(--text);font-family:var(--fd)}
.avc-sub{display:block;font-size:.65rem;color:var(--text2);font-family:var(--fm)}
/* "scroll" hint pinned to the bottom of the hero — fades in late (2.5s
   delay) so it doesn't compete with the initial reveal-up animations */
.hero-scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--fm);font-size:.6rem;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;animation:fades 2s ease 2.5s both}
@keyframes fades{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%)}}
.sh-line{width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--accent),transparent);animation:shline 2s ease-in-out infinite}
@keyframes shline{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 ═══
   Infinite auto-scrolling keyword ribbon just below the hero. The HTML
   duplicates the keyword list twice back-to-back; this animation just
   translates the whole track by exactly -50% so the seam between the two
   copies is invisible and the loop feels continuous. */
.marquee-band{overflow:hidden;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);padding:13px 0;background:var(--surf);position:relative;z-index:1}
.mb-track{display:flex;gap:24px;white-space:nowrap;animation:mscroll 30s linear infinite;font-family:var(--fm);font-size:.68rem;color:var(--text3);letter-spacing:.07em;text-transform:uppercase}
.mb-track .mx{color:var(--accent);opacity:.5}
@keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ ABOUT ═══
   Section 01 — two-column: prose bio on the left, a 2x3 grid of small
   "fact cards" (emoji + bold label + caption) on the right. Background
   is bumped to --bg2 to visually separate this section from the hero. */
.about-section{background:var(--bg2)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.about-copy p{font-size:1rem;color:var(--text2);line-height:1.82;margin-bottom:18px}
/* Underlined mono link with an arrow, used for the "View Codeforces profile →" CTA */
.text-link{font-family:var(--fm);font-size:.8rem;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:1px;display:inline-block;margin-top:8px;transition:opacity .2s}
.text-link:hover{opacity:.7}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact-card{padding:20px 18px;display:flex;flex-direction:column;gap:6px;cursor:default}
.fc-em{font-size:1.6rem;line-height:1}
.fact-card strong{font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--text);display:block;margin-top:6px}
.fact-card span{font-family:var(--fm);font-size:.68rem;color:var(--text2)}

/* ═══ PROJECTS ═══
   Section 02 — 2-column card grid, background back to --bg (matches hero)
   so the alternating bg/bg2/bg3 rhythm continues down the page. Each card
   has a themed "preview" illustration (built with plain CSS/SVG, no raster
   images) matching its category — see the sub-block comments below for
   which preview pattern goes with which kind of project. */
.projects-section{background:var(--bg)}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proj-card{padding:0;overflow:hidden;position:relative;cursor:pointer;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.proj-card:hover{border-color:rgba(255,153,51,.4);transform:translateY(-6px);box-shadow:0 24px 64px rgba(255,153,51,.08)}
/* Mouse-follow radial glow inside the card — JS updates --mx/--my to the
   cursor position relative to the card on mousemove, revealed via opacity on hover */
.pc-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,153,51,.06),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:0}
.proj-card:hover .pc-glow{opacity:1}
.pc-header{position:relative;z-index:1}
.pc-preview{height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg3);border-bottom:1px solid var(--bord)}
/* Small pill badge in the top-left of the preview area, categorizing the project */
.pc-tag{position:absolute;top:12px;left:16px;font-family:var(--fm);font-size:.62rem;color:var(--accent);border:1px solid rgba(255,153,51,.3);padding:3px 10px;border-radius:100px;background:rgba(255,153,51,.08);letter-spacing:.06em}
.pc-tag--secret{color:var(--text2);border-color:var(--bord);background:var(--surf)}
.pc-title{font-family:var(--fd);font-size:1.3rem;font-weight:700;letter-spacing:-.025em;color:var(--text);padding:20px 22px 8px;position:relative;z-index:1}
.pc-desc{font-size:.87rem;color:var(--text2);line-height:1.7;padding:0 22px 14px;position:relative;z-index:1}
.pc-stack{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 16px;position:relative;z-index:1}
.pc-stack span{font-family:var(--fm);font-size:.65rem;background:var(--surf2);border:1px solid var(--bord);color:var(--text2);padding:3px 10px;border-radius:6px}
.pc-links{display:flex;gap:8px;padding:0 22px 22px;position:relative;z-index:1}
.pcl-btn{font-family:var(--fm);font-size:.72rem;font-weight:600;padding:8px 16px;border-radius:8px;transition:background .2s,color .2s,transform .15s;display:inline-flex;align-items:center}
.pcl-live{background:var(--accent);color:#0a0a0a}
.pcl-live:hover{background:var(--accent2);transform:translateY(-1px)}
.pcl-gh{background:var(--surf2);border:1px solid var(--bord);color:var(--text2)}
.pcl-gh:hover{border-color:var(--bord2);color:var(--text);transform:translateY(-1px)}
.pcl-disabled{opacity:.45;pointer-events:none}
/* card illustrations — pure CSS/SVG mini-animations that fill each
   project's preview panel. Pick whichever matches the new project's
   category, or design a new one following the same self-contained pattern
   (a small fixed-size wrapper div + animated children, no external assets). */

/* .cp-viz → pulsing node-graph, used for "Competitive Programming" tagged projects */
.cp-viz{position:relative;width:200px;height:160px}
.cp-node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);animation:cp-pulse 2s ease-in-out infinite}
.cp-node.n1{top:30px;left:20px;animation-delay:.0s}
.cp-node.n2{top:30px;right:20px;animation-delay:.4s}
.cp-node.n3{top:72px;left:50%;transform:translateX(-50%);animation-delay:.2s;background:var(--accent2);width:18px;height:18px}
.cp-node.n4{bottom:20px;left:25px;animation-delay:.6s}
.cp-node.n5{bottom:20px;right:25px;animation-delay:.8s}
@keyframes cp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,153,51,.5)}50%{box-shadow:0 0 0 8px rgba(255,153,51,0)}}
.cp-edges{position:absolute;inset:0;width:100%;height:100%}

/* .math-viz → self-drawing SVG curve (stroke-dashoffset animation), used
   for "Mathematics" tagged projects */
.math-viz{width:200px;height:130px}
.mv-svg{width:100%;height:100%}
.graph-path{stroke-dasharray:300;stroke-dashoffset:300;animation:draw-path 2.5s ease forwards .5s}
@keyframes draw-path{to{stroke-dashoffset:0}}

/* .web-viz → growing bar chart, used for "Web" tagged projects */
.web-viz{display:flex;align-items:flex-end;gap:10px;height:100px;padding:0 20px}
.wv-bar{width:24px;border-radius:4px 4px 0 0;background:linear-gradient(to top,var(--accent),var(--accent2));height:var(--h);animation:bar-grow 1s var(--ease) var(--d) both}
@keyframes bar-grow{from{height:0}to{height:var(--h)}}

/* .secret-viz → pulsing ripple + blinking "BUILDING..." text + bouncing
   dots, used for the "Coming Soon" placeholder project card */
.secret-viz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%}
.sv-pulse{width:60px;height:60px;border-radius:50%;border:2px solid var(--accent);animation:sv-ripple 1.8s ease-in-out infinite}
@keyframes sv-ripple{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.4);opacity:0}}
.sv-text{font-family:var(--fm);font-size:.72rem;color:var(--accent);letter-spacing:.12em;animation:sv-blink 1.5s ease-in-out infinite}
@keyframes sv-blink{0%,100%{opacity:1}50%{opacity:.3}}
.sv-dots{display:flex;gap:6px}
.sv-dots span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:sv-dot 1.4s ease-in-out infinite}
.sv-dots span:nth-child(2){animation-delay:.2s}
.sv-dots span:nth-child(3){animation-delay:.4s}
@keyframes sv-dot{0%,80%,100%{transform:scale(0);opacity:.3}40%{transform:scale(1);opacity:1}}
.proj-card--secret{grid-column:span 1}

/* ═══ CP STATS ═══
   Section 03 — the data-driven "live from Codeforces API" section
   (see js/cf-stats.js). Background steps up to --bg3, the deepest layer,
   marking this as a distinct "dashboard-like" zone within the page. */
.cp-section{background:var(--bg3)}
/* 3-card headline stat row (rating / problems / contests), each with an
   animated progress bar (.cpt-fill width is set by JS once data loads) */
.cp-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:36px}
.cpt-card{padding:28px 24px;position:relative;overflow:hidden;transition:border-color .25s,transform .3s var(--ease)}
.cpt-card:hover{transform:translateY(-5px)}
/* The "hero" variant (Problems Solved) gets a subtle accent-tinted
   background + border to visually rank it as the most important stat */
.cpt-card--hero{border-color:rgba(255,153,51,.25);background:rgba(255,153,51,.04)}
.cpt-badge{position:absolute;top:16px;right:16px;font-family:var(--fm);font-size:.62rem;font-weight:700;color:var(--accent);border:1px solid var(--accent);width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.cpt-label{font-family:var(--fm);font-size:.65rem;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.cpt-num{font-family:var(--fd);font-size:3.4rem;font-weight:800;letter-spacing:-.05em;color:var(--text);line-height:1;margin-bottom:6px}
.cpt-sub{font-size:.78rem;color:var(--text2);margin-bottom:16px}
.cpt-bar{height:3px;background:var(--surf2);border-radius:100px;overflow:hidden}
.cpt-fill{height:100%;background:linear-gradient(90deg,var(--accent3),var(--accent),var(--accent2));border-radius:100px;width:0;transition:width 1.6s var(--ease)}
/* "Most Active Topics" skill-bar list (tag name + horizontal progress bar + %) */
.cp-skills-wrap{background:var(--card);border:1px solid var(--bord);border-radius:16px;padding:28px;margin-bottom:20px}
.cp-skills-title{font-family:var(--fd);font-size:1rem;font-weight:600;color:var(--text);margin-bottom:22px}
.cp-skills{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px}
.sk-row{display:flex;align-items:center;gap:12px}
.sk-n{font-family:var(--fm);font-size:.74rem;color:var(--text2);min-width:150px;flex-shrink:0}
.sk-tr{flex:1;height:3px;background:var(--surf2);border-radius:100px;overflow:hidden}
.sk-fi{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--accent3),var(--accent2));width:0;transition:width 1.5s var(--ease)}
.sk-p{font-family:var(--fm);font-size:.65rem;color:var(--text3);min-width:24px;text-align:right}
/* Static ICPC callout banner (not data-driven) at the bottom of the CP section */
.icpc-card{padding:28px 32px;display:flex;align-items:center;gap:28px;position:relative;overflow:hidden;transition:border-color .25s}
.icpc-glow{position:absolute;top:50%;left:0;transform:translateY(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(255,153,51,.1) 0%,transparent 70%);pointer-events:none}
.icpc-icon{font-size:2.4rem;flex-shrink:0;position:relative;z-index:1}
.icpc-body{flex:1;position:relative;z-index:1}
.icpc-title{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--text);display:block;margin-bottom:6px}
.icpc-desc{font-size:.87rem;color:var(--text2);line-height:1.65}
.icpc-badge{font-family:var(--fm);font-size:.72rem;font-weight:700;color:var(--accent);border:1px solid var(--accent);padding:6px 14px;border-radius:8px;position:relative;z-index:1;flex-shrink:0}

/* ═══ SKILLS ═══
   Section 04 — flat "cloud" of pill-shaped skill tags (a <ul> of <li>
   links in the HTML). .sp is the default pill style; add .sp--hot on any
   pill to bump it into the accent-highlighted "core skill" variant.
   Background returns to --bg2 to match the alternating section rhythm. */
.skills-section{background:var(--bg2)}
.skills-cloud{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.sp{font-family:var(--fm);font-size:.78rem;border-radius:100px;background:var(--surf);border:1px solid var(--bord);color:var(--text2);transition:background .2s,border-color .2s,color .2s,transform .15s}
.sp a{display:block;padding:9px 18px;color:inherit;text-decoration:none;cursor:pointer}
.sp:hover{background:var(--surf2);border-color:var(--bord2);color:var(--text);transform:translateY(-2px)}
/* .sp--hot = the "featured/strongest skill" variant — same shape, accent-tinted */
.sp--hot{background:rgba(255,153,51,.07);border-color:rgba(255,153,51,.22);color:var(--accent2)}
.sp--hot:hover{background:rgba(255,153,51,.14);border-color:var(--accent)}
/* ═══ ACHIEVEMENTS ═══
   Section 05 — vertical numbered list of milestones. Background returns
   to --bg. Each row nudges 8px to the right on hover (padding-left) as
   a subtle "select me" affordance instead of a full lift/shadow effect,
   keeping this list feeling calmer/denser than the card grids above. */
.achieve-section{background:var(--bg)}
.ach-list{display:flex;flex-direction:column;gap:10px}
.ach-row{padding:22px 24px;display:flex;align-items:center;gap:24px;transition:border-color .25s,transform .25s var(--ease),padding-left .25s var(--ease)}
.ach-row:hover{border-color:var(--bord2);transform:none;padding-left:32px}
.acr-n{font-family:var(--fm);font-size:.62rem;color:var(--text3);min-width:22px;flex-shrink:0}
.acr-body{display:flex;flex-direction:column;gap:3px;flex:1}
.acr-body strong{font-family:var(--fd);font-size:.97rem;font-weight:600;color:var(--text)}
.acr-body span{font-family:var(--fm);font-size:.72rem;color:var(--text2)}
.acr-em{font-size:1.5rem;flex-shrink:0}

/* ═══ CONTACT ═══
   Section 06 — two columns: left = intro + social link list, right =
   contact form. Background back to --bg2, completing the section
   background rhythm: bg(hero) → bg2(about) → bg(projects) → bg3(cp) →
   bg2(skills) → bg(achievements) → bg2(contact) → bg(footer). */
.contact-section{background:var(--bg2)}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-intro{font-size:1rem;color:var(--text2);line-height:1.8;margin-bottom:32px}
/* Social link rows — icon chip + name/handle + arrow, arrow nudges on hover */
.social-links{display:flex;flex-direction:column;gap:10px}
.sl-item{display:flex;align-items:center;gap:14px;padding:16px 18px;transition:border-color .2s,transform .2s var(--ease),background .2s}
.sl-item:hover{border-color:var(--bord2);transform:translateX(6px)}
.sl-icon{font-size:.88rem;width:36px;height:36px;border:1px solid var(--bord2);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-family:var(--fm);font-style:normal}
.sl-item > div{display:flex;flex-direction:column;gap:2px;flex:1}
.sl-name{font-family:var(--fm);font-size:.62rem;color:var(--text3);letter-spacing:.1em;text-transform:uppercase}
.sl-handle{font-size:.88rem;font-weight:500;color:var(--text)}
.sl-arr{color:var(--accent);font-size:.9rem;transition:transform .2s}
.sl-item:hover .sl-arr{transform:translate(3px,-3px)}

/* contact form — floating-label inputs (label animates up/shrinks when
   the field is focused or filled, via the :not(:placeholder-shown) trick —
   this requires every input/textarea to keep its `placeholder` attribute
   even though the placeholder text itself is made invisible below) */
.contact-form{padding:32px;position:relative;overflow:hidden}
.cf-glow{position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,var(--glow2) 0%,transparent 70%);pointer-events:none;border-radius:50%}
.cf-title{font-family:var(--fd);font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:24px;position:relative;z-index:1}
.cf-field{position:relative;margin-bottom:18px;z-index:1}
.cf-field input,.cf-field textarea{width:100%;background:var(--surf);border:1px solid var(--bord);border-radius:10px;padding:14px 16px;font-size:.9rem;color:var(--text);transition:border-color .2s,background .2s,box-shadow .2s;outline:none;resize:vertical}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--accent);background:var(--surf2);box-shadow:0 0 0 3px var(--glow2)}
.cf-field label{position:absolute;top:14px;left:16px;font-size:.82rem;color:var(--text3);pointer-events:none;transition:all .2s;font-family:var(--fm)}
/* the actual floating-label mechanism: label jumps up + shrinks + gets a
   background "notch" once the field is focused OR has a non-empty value */
.cf-field input:focus~label,.cf-field input:not(:placeholder-shown)~label,
.cf-field textarea:focus~label,.cf-field textarea:not(:placeholder-shown)~label{top:-9px;left:10px;font-size:.65rem;color:var(--accent);background:var(--bg2);padding:0 5px;border-radius:4px}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:transparent}
/* Submit button: 3 visual states toggled by JS via classes —
   default (txt+icon visible) → .loading (shows "Sending..." instead) →
   success message (.cf-success.visible) appears below the button */
.cf-send{width:100%;padding:14px;border-radius:10px;background:var(--accent);border:none;color:#0a0a0a;font-size:.9rem;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;z-index:1;transition:background .2s,transform .15s,box-shadow .2s;overflow:hidden;margin-top:4px}
.cf-send:hover:not(:disabled){background:var(--accent2);transform:translateY(-1px);box-shadow:0 8px 28px var(--glow)}
.cf-send:disabled{opacity:.7}
.cf-sending{display:none;position:absolute}
.cf-send.loading .cf-send-txt,.cf-send.loading .cf-send-icon{opacity:0}
.cf-send.loading .cf-sending{display:block}
.cf-success{display:none;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);border-radius:10px;padding:14px;font-size:.88rem;color:#4ade80;text-align:center;margin-top:12px;animation:pop-in .4s var(--ease)}
@keyframes pop-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.cf-success.visible{display:block}

/* ═══ FOOTER ═══
   Site footer — mantra + copyright on the left, visitor counter + music
   player toggle on the right. Note: the mantra text-shadow "breathes"
   continuously as a small signature flourish, distinct from the more
   restrained motion used everywhere else on the page. */
#footer{border-top:1px solid var(--bord);padding:28px 0;background:var(--bg);position:relative;z-index:1}
.footer-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.ft-left{display:flex;flex-direction:column;gap:4px}
.ft-mantra{font-size:1.3rem;letter-spacing:.08em;color:var(--accent);animation:mantra 4s ease-in-out infinite}
@keyframes mantra{0%,100%{text-shadow:0 0 8px rgba(255,153,51,.4),0 0 0 transparent}50%{text-shadow:0 0 20px rgba(255,153,51,.9),0 0 40px rgba(255,153,51,.3)}}
.ft-copy{font-family:var(--fm);font-size:.7rem;color:var(--text3)}
.ft-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.visitor-chip{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;border:1px solid var(--bord);background:var(--surf)}
.vc-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pdot 2s ease-in-out infinite;flex-shrink:0}
.vc-l{font-family:var(--fm);font-size:.65rem;color:var(--text2)}
.vc-n{font-family:var(--fm);font-size:.82rem;font-weight:700;color:var(--accent)}
#music-btn{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:100px;background:transparent;border:1px solid var(--bord);color:var(--text2);font-size:.78rem;transition:border-color .2s,color .2s}
#music-btn:hover{border-color:var(--accent);color:var(--accent)}
.music-note{font-size:1rem}

/* ═══ TILT EFFECT ═══
   Enables a 3D perspective context for elements JS applies a mouse-driven
   rotateX/rotateY tilt to (currently used on .proj-card via .tilt-card). */
.tilt-card{transform-style:preserve-3d;perspective:1000px}

/* ═══ MAGNETIC ═══
   Marker class for elements JS attaches a "magnetic" mouse-follow effect
   to (buttons/links subtly shift toward the cursor when nearby). This
   rule itself only ensures correct inline-flex layout; the actual pull
   effect is computed and applied in JS. */
.magnetic{display:inline-flex}

/* ═══ RESPONSIVE ═══
   Two breakpoints:
     960px → tablet/small-laptop: multi-column layouts collapse to single
             column, desktop nav swaps for the hamburger menu.
     600px → phone: further size/spacing reductions, some decorative
             elements (av-card chips, 3rd avatar ring) are hidden entirely
             since they'd feel cramped at this width.
   Keep new component styles in mind here — if you add a new multi-column
   grid elsewhere in this file, add a matching single-column override in
   the 960px block so it doesn't break on tablets. */
@media(max-width:960px){
  .hero-wrap{grid-template-columns:1fr;gap:40px;padding-top:90px;text-align:center}
  .hero-left{align-items:center}
  .hero-bio{margin:0 auto}
  .hero-right{justify-content:center}
  .av-card--top,.av-card--bottom{display:none}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .fact-grid{grid-template-columns:1fr 1fr 1fr}
  .cp-trio{grid-template-columns:1fr}
  .cp-skills{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr;gap:40px}
  .nav-links,.nav-hire{display:none}
  .hamburger{display:flex}
  .section{padding:80px 0}
}
@media(max-width:600px){
  .hero-name{font-size:clamp(2.6rem,12vw,3.8rem)}
  .fact-grid{grid-template-columns:1fr 1fr}
  .footer-wrap{flex-direction:column;align-items:flex-start}
  .avatar-scene{width:280px;height:280px}
  .av-frame{width:200px;height:250px}
  .r1{width:250px;height:250px}
  .r2{width:290px;height:290px}
  .r3{display:none}
  .s-title{font-size:clamp(2rem,10vw,2.8rem)}
  .section{padding:64px 0}
  .hero-metrics{flex-wrap:wrap}
}
/* Accessibility: respects the OS-level "reduce motion" preference by
   collapsing every animation/transition to effectively instant. Keep
   this rule LAST so it overrides all duration values defined above. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;transition-duration:0.001ms!important}
}