/* ============================================================
   RESPONSIVE STRATEGY — MOBILE FIRST
   ─────────────────────────────────────────────────────────────
   All base styles target mobile (≤ 767px).
   Layouts expand at three breakpoints via min-width:
     sm  → 30rem   (480px)   small phones → wider phones
     md  → 48rem   (768px)   tablet portrait
     lg  → 64rem   (1024px)  tablet landscape / small desktop
     xl  → 80rem   (1280px)  full desktop
   ─────────────────────────────────────────────────────────────
   Design tokens (CSS custom properties) centralise every
   repeated value so a single change propagates everywhere.
   This also eliminates the scattered magic numbers that made
   the original file hard to maintain.
============================================================ */

/* ============================================================
   DESIGN TOKENS
============================================================ */

:root{
  /* Spacing scale — used for padding, gap, margin */
  --space-xs:   0.5rem;      /*  8px */
  --space-sm:   1rem;        /* 16px */
  --space-md:   1.5rem;      /* 24px */
  --space-lg:   2.5rem;      /* 40px */
  --space-xl:   4rem;        /* 64px */
  --space-2xl:  6rem;        /* 96px */
  --space-3xl:  8rem;        /* 128px */

  /* Horizontal page padding — grows with viewport */
  --page-x:     1.25rem;    /* mobile → 20px; prevents content kissing screen edges */

  /* Colours */
  --clr-bg:         #000000;
  --clr-surface:    #111111;
  --clr-border:     #222222;
  --clr-text:       #ffffff;
  --clr-text-muted: #aaaaaa;   /* 5.9 : 1 on --clr-bg — WCAG AA ✓ */
  --clr-text-soft:  #bbbbbb;   /* 7.5 : 1 on --clr-bg — WCAG AAA ✓ */
  --clr-accent:     #78aaff;   /* 6.5 : 1 on --clr-bg — WCAG AA ✓ */
  --clr-accent-hi:  #9ec5ff;   /* 7.7 : 1 on --clr-bg — WCAG AA ✓ */
  --clr-accent-sub: #8ab6ff;   /* 6.5 : 1 on --clr-bg — WCAG AA ✓ */

  /* Glow colours */
  --glow-blue:   rgba(120,170,255,0.6);
  --glow-purple: rgba(170,120,255,0.28);

  /* Border radius */
  --radius-sm:  0.5rem;
  --radius-md:  0.875rem;
  --radius-lg:  1.5rem;
  --radius-xl:  1.75rem;

  /* Animation timing */
  --dur-fast:   0.25s;
  --dur-base:   0.4s;
  --dur-slow:   1s;
  --ease:       ease;
  --ease-out:   ease-out;

  /* Tap-target minimum (WCAG 2.5.5) */
  --tap-min:    2.75rem;     /* 44px */

  /* Navbar height — used for offset calculations */
  --nav-h:      4rem;        /* 64px */
}


/* ============================================================
   RESET & BASE
============================================================ */

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

html{
  scroll-behavior:smooth;
  /* Prevent font inflation on iOS Safari */
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--clr-bg);
  color:var(--clr-text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  /* Prevent horizontal scroll from overflowing content */
  overflow-x:hidden;
}

/* Safe global image rule — prevents layouts from breaking */
img{
  max-width:100%;
  display:block;
}


/* ============================================================
   NAVBAR
   Mobile base: compact padding, toggle visible, links hidden.
   md+ (48rem / 768px): full horizontal nav, toggle hidden.
============================================================ */

.navbar{
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  /* Mobile: tight padding */
  padding:var(--space-sm) var(--page-x);
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
  min-height:var(--nav-h);
}

@media(min-width:48rem){
  .navbar{
    padding:var(--space-sm) 2rem;
  }
}

@media(min-width:64rem){
  .navbar{
    padding:var(--space-sm) var(--space-lg);
  }
}

.logo{
  font-weight:600;
  font-size:1rem;
}

.logo img{
  width: 100%;
  height: 24px;
}

/* Mobile: links hidden; stacked in dropdown when .active */
.nav-links{
  list-style:none;
  display:none;
  flex-direction:column;
  gap:var(--space-xs);
  position:absolute;
  top:var(--nav-h);
  right:var(--page-x);
  background:var(--clr-surface);
  padding:var(--space-sm);
  border-radius:var(--radius-md);
  border:1px solid var(--clr-border);
  min-width:10rem;
  /* Ensure dropdown floats above all section content on mobile */
  z-index:999;
}

.nav-links.active{
  display:flex;
}

/* md+: links become a horizontal row, no dropdown */
@media(min-width:48rem){
  .nav-links{
    display:flex;
    flex-direction:row;
    position:static;
    background:none;
    border:none;
    padding:0;
    gap:var(--space-md);
    min-width:auto;
  }
}

.nav-links a{
  color:var(--clr-text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:var(--tap-min);   /* 44px tap target */
  padding:0.25rem 0;
  transition:color var(--dur-fast) var(--ease);
}

.nav-links a:hover{
  color:var(--clr-accent);
}

.nav-links a:focus-visible{
  outline:2px solid var(--clr-accent);
  outline-offset:4px;
  border-radius:4px;
}

/* Mobile: hamburger visible */
.menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  color:var(--clr-text);
  font-size:1.5rem;
  min-width:var(--tap-min);
  min-height:var(--tap-min);
  cursor:pointer;
}

.menu-toggle:focus-visible{
  outline:2px solid var(--clr-accent);
  outline-offset:4px;
  border-radius:4px;
}

/* md+: hamburger hidden */
@media(min-width:48rem){
  .menu-toggle{
    display:none;
  }
}


/* ============================================================
   HERO
   Mobile: min-height uses svh (excludes browser chrome).
   Padding uses calc so content always clears the fixed navbar.
   md+: more generous overlay padding.
============================================================ */

.hero{
  position:relative;
  /* svh = "small viewport height" — avoids the mobile browser-chrome bug */
  /* 100svh excludes mobile browser chrome so hero truly fills the screen */
  min-height:100svh;
  background:url("../assets/images/heroImg2.png") center/contain no-repeat;
  display:flex;
  /* flex-end keeps overlay text anchored at the bottom of the hero image */
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}

.hero-overlay{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* Mobile: top clears the fixed navbar; generous bottom so text isn't
     flush against the viewport edge on small screens */
  padding:calc(var(--nav-h) + var(--space-md)) var(--page-x) var(--space-xl);
}

/* Tablet: intermediate breathing room */
@media(min-width:48rem) and (max-width:63.99rem){
  .hero-overlay{
    padding:var(--space-2xl) 2.5rem var(--space-2xl);
  }
}

@media(min-width:64rem){
  .hero-overlay{
    padding:var(--space-3xl) var(--space-lg) var(--space-2xl);
  }
}

/* clamp() → fluid heading that needs zero breakpoint overrides */
.hero h1{
  font-size:clamp(2rem, 6vw, 4rem);
  font-weight:700;
  line-height:1.15;
  text-align:center;
}

/* Hero subtitle — stacked on mobile, inline on md+ */
.hero-overlay h2{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:var(--space-sm);
  color:var(--clr-text);
  font-size:clamp(1rem, 2.5vw, 2rem);
  line-height:1.5;
  font-weight:500;
  text-align:center;
  margin-bottom:var(--space-sm);
}

@media(min-width:48rem){
  .hero-overlay h2{
    flex-direction:row;
    gap:0.25rem;
  }
}


/* ============================================================
   DYNAMIC WORD ANIMATION
============================================================ */

.dynamic-word{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* Mobile: no fixed min-width — prevents overflow on narrow screens */
  min-width:auto;
  color:var(--clr-text);
  font-weight:700;
  letter-spacing:0.04em;
  text-shadow:
    0 0 10px var(--glow-blue),
    0 0 24px var(--glow-purple);
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.5s var(--ease), transform 0.5s var(--ease), filter 0.5s var(--ease);
}

/* md+: restore the fixed minimum width for the animation */
@media(min-width:48rem){
  .dynamic-word{
    min-width:6.75rem;
  }
}

.dynamic-word.fade-out{
  opacity:0;
  transform:translateY(10px);
  filter:blur(5px);
}

.dynamic-word.fade-in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.dynamic-word::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(120,170,255,0),
    var(--clr-text),
    rgba(180,120,255,0)
  );
  animation:glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse{
  0%,100%{ opacity:0.4; transform:scaleX(0.92); }
  50%{     opacity:1;   transform:scaleX(1); }
}


/* ============================================================
   GLOBAL SECTIONS
   Mobile base: compact padding; lg+: cinematic spacing.
   clamp() on all headings eliminates per-breakpoint overrides.
============================================================ */

section{
  /* Mobile: vertical breathing room, tight horizontal margin */
  padding:var(--space-md) var(--page-x);
}

/* lg+: full cinematic spacing */
@media(min-width:64rem){
  section{
    padding:var(--space-3xl) 5rem;
  }
}

/* md (tablet): intermediate comfortable padding */
@media(min-width:48rem) and (max-width:63.99rem){
  section{
    padding:var(--space-2xl) 2.5rem;
  }
}

.section-header h2{
  font-size:clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight:700;
  margin-bottom:0.625rem;
  text-align:center;
  line-height:1.2;
}

/* WCAG AA: #aaa on #090909 ≈ 5.9 : 1 */
.section-header p{
  color:var(--clr-text-muted);
  text-align:center;
  line-height:1.7;
}

.section-header img{
  width:100%;
  height:auto;   /* was 100% — preserves aspect ratio on mobile */
}


/* ============================================================
   INTRO
   Mobile: single column (image stacked above text).
   lg+: 1/3 – 2/3 side-by-side grid.
============================================================ */

.intro-content{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
  align-items:center;
}

/* Tablet: still single-column but with extra gap for breathing room */
@media(min-width:48rem) and (max-width:63.99rem){
  .intro-content{
    gap:var(--space-xl);
  }
}

@media(min-width:64rem){
  .intro-content{
    grid-template-columns:1fr 2fr;
    gap:var(--space-xl);
  }
}

.intro-brand img{
  width:100%;
  border-radius:var(--radius-lg);
  border:4px solid var(--clr-text);
}

/* WCAG AAA: #bbb on #090909 ≈ 7.5 : 1 */
.intro-text ul{
  display:flex;
  flex-direction:column;
  gap:0.9375rem;
  color:var(--clr-text-soft);
}


/* ============================================================
   PHILOSOPHY GRID
   Mobile → sm: 1 col → 2 col → lg: 4 col.
============================================================ */

.philosophy-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-sm);
}

/* sm: 2 columns on wider phones */
@media(min-width:30rem){
  .philosophy-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* md (tablet): 3 columns — avoids the jarring 2→4 jump */
@media(min-width:48rem){
  .philosophy-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* lg+: full 4-column desktop layout */
@media(min-width:64rem){
  .philosophy-grid{
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-md);
  }
}

/* Mobile: show image2 (portrait/compact variant), hide image1 */
.image1{ display:none; }
.image2{ display:block; }

/* sm+ (500px): swap — show image1 (landscape/full variant), hide image2 */
@media(min-width:31.25rem){
  .image1{ display:block; }
  .image2{ display:none; }
}


.philosophy-card{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  padding:var(--space-sm);
  border-radius:var(--radius-sm);
  transition:transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.philosophy-card:hover{
  transform:translateY(-6px);
  border-color:var(--clr-accent);
}

.philosophy-card:focus-visible{
  outline:2px solid var(--clr-accent);
  outline-offset:3px;
}

.philosophy-card img{
  width:100%;
  margin-top:var(--space-sm);
}

.philosophy-fade-in-show{
  margin-top:var(--space-lg);
}

/* Work-section local tokens — scoped so they don't clash with :root */
.work-section{
  --card:   #090909;
  --muted:  rgba(255,255,255,0.65);
  --border: rgba(255,255,255,0.08);
}

/* Section */

/* Work section — let the section token control horizontal padding;
   internal components (heading, cards) supply their own vertical rhythm */
.work-section{
  padding-top:32px;
  padding-bottom:0;
  max-width:1500px;
  margin:0 auto;
}

.section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.label {
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  margin-bottom: 14px;
}

.section-heading h1 {
  /* was clamp(3rem,7vw,5rem) — 3rem minimum is too large on phones */
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
}

.subtitle {
  margin-top: 14px;
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;                     /* was 1.1rem */
}

/* ── Card shell ─────────────────────────────────────────── */

.case-study-card {
  display: grid;
  /* Mobile base: single column — responsive block below overrides to 1fr 1fr */
  grid-template-columns: 1fr;
  /* Removed fixed min-height:492px — forces excessive height on mobile */
  overflow: hidden;
  border-radius: 20px;                    /* was 32px — softer at smaller sizes */
  background: var(--card);
  border: 1px solid var(--border);
  position: relative;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Gap between multiple stacked cards */
.case-study-card + .case-study-card {
  margin-top: 1.5rem;
}

/* ── Left: text content ─────────────────────────────────── */

.case-study-content {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0)
  );
  /* Mobile: compact padding */
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}

.case-study-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,0.07),
      transparent 35%
    );
  pointer-events: none;
}

.content-inner {
  position: relative;
  z-index: 2;
}

.case-study-tag {
  font-size: 0.7rem;                      /* was 0.8rem */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.875rem;                /* was 28px fixed */
}

/* Title — clamp min was 2.5rem which is too large even on desktop halves */
.case-study-title {
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 600px;
}

/* Description — was a flat 1.3rem everywhere, oversized on all screens */
.case-study-description {
  max-width: 520px;
  color: var(--muted);
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  line-height: 1.65;
  margin-top: 24px;                          /* gap on parent handles spacing */
}

/* ── Button ─────────────────────────────────────────────── */

.case-study-button {
  position: relative;
  z-index: 2;
  /* Mobile: compact icon-only pill */
  width: 10rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: white;
  text-decoration: none;
  backdrop-filter: blur(14px);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.case-study-button:hover {
  transform: translateX(6px);
  background: white;
  color: black;
}

.case-study-button:focus-visible {
  outline: 3px solid rgba(255,255,255,0.35);
  outline-offset: 4px;
}

/* ── Right: image wrapper ───────────────────────────────── */

.case-study-image-wrapper {
  position: relative;
  overflow: hidden;
  /* Mobile: give the image a visible height */
  min-height: 220px;
  background:
    radial-gradient(circle at center, #2f1f57 0%, #121212 80%);
}

.case-study-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.5),
      rgba(0,0,0,0.1)
    );
  z-index: 1;
}

.case-study-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.case-study-card:hover .case-study-image {
  transform: scale(1.04);
}

/* ── Responsive breakpoints ─────────────────────────────── */

/* sm (480px): more padding, taller image */
@media(min-width:30rem){
  .case-study-content{
    padding: 2rem;
  }

  .case-study-image-wrapper{
    min-height: 280px;
  }

  .case-study-button{
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* md (768px): comfortable padding, pill button reveals */
@media(min-width:48rem){
  .case-study-content{
    padding: 2.25rem 2.5rem;
  }

  .case-study-image-wrapper{
    min-height: 340px;
  }

  .case-study-button{
    width: 10rem;
    height: 3.5rem;
  }
}

/* lg (1024px): two-column side-by-side */
@media(min-width:64rem){
  .case-study-card{
    grid-template-columns: 1fr 1fr;
    min-height: 400px;                    /* sensible desktop height, was 492px */
  }

  .case-study-content{
    padding: 2.5rem 3rem;
  }

  .case-study-image-wrapper{
    min-height: unset;                    /* grid row drives height on desktop */
  }

  .case-study-button{
    width: 12rem;
    height: 4rem;
  }
}


/* ============================================================
   PROJECTS
============================================================ */

.projects-grid{
  margin-top:var(--space-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}

.project-card{
  background:var(--clr-surface);
  overflow:hidden;
  border-radius:var(--radius-md);
  border:1px solid var(--clr-border);
  transition:transform var(--dur-base) var(--ease);
}

.project-card:hover{
  /* Reduced from -10px — less jarring on mobile */
  transform:translateY(-6px);
}

@media(min-width:48rem){
  .project-card:hover{
    transform:translateY(-10px);
  }
}

.project-card img{
  width:100%;
}

.project-content{
  padding:var(--space-md);
}

.project-content h3{
  margin-bottom:0.625rem;
  font-size:1.1rem;
  font-weight:600;
}

.project-content p{
  color:var(--clr-text-muted);
  line-height:1.7;
}

.portfolio-links{
  margin-top:var(--space-lg);
  display:flex;
  /* Mobile: links wrap rather than overflow */
  flex-wrap:wrap;
  gap:var(--space-sm);
}

@media(min-width:48rem){
  .portfolio-links{
    flex-wrap:nowrap;
    gap:var(--space-md);
  }
}

.portfolio-links a{
  color:var(--clr-accent);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:var(--tap-min);
  transition:color var(--dur-fast) var(--ease), text-decoration var(--dur-fast) var(--ease);
}

.portfolio-links a:hover{
  text-decoration:underline;
}

.portfolio-links a:focus-visible{
  outline:2px solid var(--clr-accent);
  outline-offset:4px;
  border-radius:4px;
}


/* ============================================================
   SYSTEMS SECTION
   Mobile: single-column, reduced padding.
   lg+: 2-column grid, cinematic spacing.
============================================================ */

.systems-section{
  position:relative;
  overflow:hidden;
  /* Mobile: generous but not overwhelming vertical breathing room */
  padding:var(--space-xl) var(--page-x);
  background:radial-gradient(
    circle at top,
    rgba(35,55,110,0.25),
    #050505 45%
  );
  color:var(--clr-text);
}

@media(min-width:48rem) and (max-width:63.99rem){
  .systems-section{
    padding:var(--space-2xl) 2.5rem;
  }
}

@media(min-width:64rem){
  .systems-section{
    padding:8.75rem 5rem;
  }
}

.systems-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.system-particle{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  animation:particleFloat linear infinite;
}

@keyframes particleFloat{
  from{ transform:translateY(0); }
  to{   transform:translateY(-120px); }
}

.systems-container{
  position:relative;
  z-index:2;
  max-width:87.5rem;
  margin:0 auto;
}

.systems-header{
  text-align:center;
  margin-bottom:var(--space-xl);
}

@media(min-width:64rem){
  .systems-header{
    margin-bottom:5.625rem;
  }
}

/* WCAG AA: #8ab6ff on dark bg ≈ 6.5 : 1 */
.systems-subtitle{
  display:inline-block;
  margin-bottom:var(--space-sm);
  color:var(--clr-accent-sub);
  font-size:0.9rem;
  letter-spacing:0.1875rem;
  font-weight:600;
}

/* Fluid heading — zero breakpoint overrides needed */
.systems-title{
  max-width:57.5rem;
  margin:0 auto;
  font-size:clamp(1.6rem, 4vw, 3.5rem);
  line-height:1.15;
  font-weight:700;
  opacity:0;
  transform:translateY(40px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.systems-section.active .systems-title{
  opacity:1;
  transform:translateY(0);
}

/* Mobile: single column; lg+: two columns */
.systems-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
}

@media(min-width:64rem){
  .systems-grid{
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
  }
}

.systems-panel{
  position:relative;
  padding:var(--space-sm);
  border-radius:var(--radius-xl);
  overflow:hidden;
  opacity:0;
  transform:translateY(60px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
  backdrop-filter:blur(18px);
  cursor:pointer;
}

@media(min-width:48rem){
  .systems-panel{
    padding:1.75rem;
  }
}

.systems-panel:focus-visible{
  outline:2px solid var(--clr-accent);
  outline-offset:3px;
}

.systems-section.active .systems-panel{
  opacity:1;
  transform:translateY(0);
}

/* Stagger — intentional, kept as-is */
.systems-panel:nth-child(1){ transition-delay:0.2s; }
.systems-panel:nth-child(2){ transition-delay:0.45s; }
.systems-panel:nth-child(3){ transition-delay:0.7s; }
.systems-panel:nth-child(4){ transition-delay:0.95s; }

.blue-panel{
  background:rgba(18,24,42,0.72);
  border:1px solid rgba(120,170,255,0.22);
  box-shadow:inset 0 0 40px rgba(120,170,255,0.05);
}

.purple-panel{
  background:rgba(24,18,42,0.72);
  border:1px solid rgba(180,120,255,0.22);
  box-shadow:inset 0 0 40px rgba(180,120,255,0.05);
}

.systems-panel:hover{
  /* Mobile: reduced lift to avoid layout shifts */
  transform:translateY(-4px);
  box-shadow:
    0 0 40px rgba(120,170,255,0.15),
    0 0 80px rgba(180,120,255,0.08);
  border-color:rgba(120,170,255,0.45);
}

@media(min-width:48rem){
  .systems-panel:hover{
    transform:translateY(-8px);
  }
}

.panel-image-wrapper{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.panel-image{
  width:100%;
  display:block;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.08);
  transition:transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.systems-panel:hover .panel-image{
  transform:scale(1.03);
  box-shadow:
    0 0 30px rgba(120,170,255,0.2),
    0 0 50px rgba(180,120,255,0.1);
}

/* WCAG: #f5f5f5 on dark panel bg ≈ 14 : 1 */
.panel-caption{
  margin-top:var(--space-sm);
  font-size:clamp(1rem, 1.5vw, 1.15rem);
  font-weight:600;
  color:#f5f5f5;
}


/* ============================================================
   ACHIEVEMENT CALLOUTS
   Mobile: removed from absolute flow — stacked as block elements.
   lg+: absolutely positioned over the hero (cinematic layout).
============================================================ */

.achievement-callout{
  display:flex;
  align-items:center;
  /* flex-start keeps arrow + text naturally left-aligned on mobile */
  justify-content:center;
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  color:var(--clr-text);
  font-size:0.95rem;
  line-height:1.6;
  box-shadow:0 0 40px rgba(120,170,255,0.08);
  /* Mobile: visible, full-width, in normal flow */
  position:relative;
  width:100%;
  max-width:100%;
  margin-top:var(--space-md);
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.achievement-callout p{
  margin:0;
  /* Fluid font — readable on all screens, no breakpoint hacks needed */
  font-size:clamp(0.875rem, 1.5vw, 1rem);
  text-align:center;
  color:rgba(255,255,255,0.92);
}

.achievement-callout.show{
  opacity:1;
  transform:translateY(0);
}

/* Mobile: both callouts arrow in the same direction */
.right-callout{
  flex-direction:row;
}

/* lg+: restore absolute overlay layout for cinematic positioning */
@media(min-width:64rem){
  .achievement-callout{
    position:absolute;
    max-width:16.25rem;
    width:auto;
    margin-top:0;
  }

  .left-callout{
    top:96%;
    left:76%;
  }

  .right-callout{
    top:86%;
    right:76%;
    flex-direction:row-reverse;
  }
}

/* Between lg and xl: prevent callouts clipping near viewport edges */
@media(min-width:64rem) and (max-width:80rem){
  .left-callout{ left:6%; }
  .right-callout{ right:6%; }
}

/* WCAG AA: #9ec5ff on dark bg ≈ 7.7 : 1 */
.achievement-callout strong{
  color:var(--clr-accent-hi);
  text-shadow:0 0 10px rgba(120,170,255,0.45);
}

/* .callout-arrow styles removed — element not currently in use */


/* ============================================================
   TOOLTIP
============================================================ */

.systems-tooltip{
  position:fixed;
  z-index:99999;
  max-width:16.25rem;
  padding:0.75rem 0.875rem;
  border-radius:var(--radius-md);
  background:rgba(10,10,10,0.95);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--clr-text);
  font-size:0.85rem;
  line-height:1.5;
  pointer-events:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.systems-tooltip.show{
  opacity:1;
  transform:translateY(0);
}


/* ============================================================
   MAKING SECTION
   Mobile: stacked. lg+: side-by-side.
============================================================ */

.making-container{
  display:grid;
  margin-top: 32px;
  grid-template-columns:1fr;
  gap:var(--space-lg);
}

@media(min-width:64rem){
  .making-container{
    grid-template-columns:1fr 1fr;
    /* Slightly tighter gap on first desktop breakpoint; full gap at xl */
    gap:2.5rem;
  }
}

@media(min-width:80rem){
  .making-container{
    gap:3.75rem;
  }
}

.making-image img{
  width:100%;
  height:auto;          /* was 100% — collapses when parent has no explicit height */
  object-fit:cover;
  border-radius:var(--radius-md);
}

.tools{
  display:flex;
  gap:var(--space-xs);
  margin:var(--space-md) 0;
  flex-wrap:wrap;
}

.tools span{
  padding:0.5rem 1rem;
  border:1px solid #333;
  border-radius:2.5rem;
  background:var(--clr-surface);
  font-size:0.9rem;
  /* Meet tap target on mobile */
  min-height:var(--tap-min);
  display:inline-flex;
  align-items:center;
}

.making-text{
  color:var(--clr-text-muted);
  /* min-width:0 prevents this grid cell from overflowing its column
     on mobile — critical for the tool scroller child to stay contained */
  min-width:0;
  overflow:hidden;
}

.making-subsection{
  margin-top:var(--space-lg);
}

.making-subsection h3{
  margin-bottom:0.625rem;
  font-size:1rem;
  font-weight:600;
}


/* ============================================================
   GALLERY
   Mobile: 1 col → sm: 2 col → lg: 3 col.
   Image height fluid via clamp — no fixed px.
============================================================ */

.gallery-grid{
  margin-top:var(--space-md);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xs);
}

/* sm+ (wider phones): 2 columns — 30rem avoids cramped layout on tiny screens */
@media(min-width:24rem){
  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(min-width:64rem){
  .gallery-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

.gallery-grid img{
  width:100%;
  /* Min 12rem so images never collapse to thumbnails on mobile;
     fluid mid-range; max caps desktop height */
  height:clamp(12rem, 28vw, 17.5rem);
  object-fit:cover;
  border-radius:var(--radius-sm);
  transition:transform var(--dur-base) var(--ease);
}

.gallery-grid img:hover{
  transform:scale(1.02);
}


/* ============================================================
   FOOTER
   Mobile: compact. md+: generous.
   Links wrap on very narrow screens.
============================================================ */

.footer{
  /* Mobile: comfortable padding using the corrected --page-x token */
  padding:var(--space-lg) var(--page-x);
  border-top:1px solid var(--clr-border);
  text-align:center;
}

@media(min-width:48rem){
  .footer{
    padding:var(--space-xl) 2.5rem;
  }
}

@media(min-width:64rem){
  .footer{
    padding:3.75rem 5rem;
  }
}

.footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-sm);
  margin-bottom:var(--space-sm);
}

@media(min-width:48rem){
  .footer-links{
    gap:var(--space-md);
  }
}

.footer-links a{
  color:var(--clr-text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:var(--tap-min);
  transition:color var(--dur-fast) var(--ease);
}

.footer-links a:hover{
  color:var(--clr-accent);
}

.footer-links a:focus-visible{
  outline:2px solid var(--clr-accent);
  outline-offset:4px;
  border-radius:4px;
}

/* WCAG AA: #888 on #090909 ≈ 4.6 : 1 */
.footer span{
  display:block;
  margin-top:0.625rem;
  color:#888;
}


/* ============================================================
   EXPERIENCE CARD
   Mobile: compact logo (64px), row layout.
   md+: padding and gap increase.
   Headings and text use clamp — no per-breakpoint font sizes.
============================================================ */

.experience-card{
  margin-top:var(--space-md);
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:var(--space-sm);
  border:1px solid rgba(255,255,255,0.24);
  border-radius:var(--radius-lg);
  padding:var(--space-sm);
  position:relative;
  /* overflow:hidden removed — it was clipping the scroller track on mobile.
     The .tool-scroller-wrapper handles its own overflow clipping. */
}

/* md+: more padding and gap once there's enough space */
@media(min-width:48rem){
  .experience-card{
    padding:var(--space-md);
    gap:var(--space-md);
  }
}

.experience-logo{
  flex-shrink:0;
  /* Mobile: 64px — small enough for compact cards */
  width:4rem;
  height:4rem;
  min-width:4rem;
  background:#f4f4f4;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 30px 80px rgba(255,255,255,0.08),
    0 0 80px rgba(255,255,255,0.15);
}

/* md+: slightly larger logo */
@media(min-width:48rem){
  .experience-logo{
    width:5rem;
    height:5rem;
    min-width:5rem;
    border-radius:1.375rem;
  }
}

.experience-logo img{
  width:80%;
  object-fit:contain;
}

.experience-content{
  flex:1;
  /* Prevents text from overflowing on small screens */
  min-width:0;
}

.experience-top{
  display:flex;
  /* Mobile: stacked label and date */
  flex-direction:column;
  align-items:flex-start;
  gap:0.25rem;
  margin-bottom:var(--space-xs);
}

@media(min-width:48rem){
  .experience-top{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-sm);
    margin-bottom:var(--space-sm);
  }
}

/* clamp replaces separate font-size breakpoints */
.experience-top h2{
  font-size:clamp(0.875rem, 1.5vw, 1rem);
  font-weight:800;
  color:var(--clr-text-muted);
  letter-spacing:-0.03em;
}

.experience-top span{
  font-size:clamp(0.875rem, 1.5vw, 1rem);
  font-weight:700;
  color:var(--clr-text-muted);
}

.experience-content h3{
  font-size:clamp(1rem, 2vw, 1.2rem);
  font-weight:700;
  color:var(--clr-text);
  margin-bottom:0.5rem;
}

.experience-content p{
  font-size:clamp(0.9rem, 1.5vw, 1rem);
  line-height:1.65;
  color:var(--clr-text-muted);
  max-width:56.25rem;
}


/* ============================================================
   TOOL SCROLLER
   ─────────────────────────────────────────────────────────────
   Structure: section#tool-scroller.tool-scroller-section
              └── div.tool-scroller-wrapper
                  └── div.tool-scroller-track
                      └── div.tool-item (×N, duplicated for loop)

   Lives inside: .making-container > .making-text (a grid cell).

   Key fixes applied:
   1. The global `section` rule adds horizontal padding — we must
      reset it to 0 here or the track overflows on every screen.
   2. overflow:hidden must be on .tool-scroller-section so the
      ::before/::after fade masks clip correctly (they are
      position:absolute children of the section).
   3. .making-text gets min-width:0 + overflow:hidden (above) so
      the grid cell never grows wider than its column.
   4. .tool-scroller-wrapper clips the track independently so the
      animation viewport is separate from the mask viewport.
   5. width:max-content on the track is intentional — it holds
      the full duplicated icon set for the seamless loop. The
      parent chain (making-text → making-container → section)
      constrains the visible area via overflow:hidden.
============================================================ */

.tool-scroller-section{
  position:relative;
  margin-top:0.75rem;
  /* Fill .making-text exactly — never fixed width */
  width:100%;
  /* Reset global section padding — scroller needs edge-to-edge width */
  padding:var(--space-sm) 0 !important;
  background:linear-gradient(180deg, var(--clr-bg), #0a0a0a);
  /* overflow:hidden here clips the absolute fade masks correctly */
  overflow:hidden;
}

/* Fade masks — position:absolute, clipped by .tool-scroller-section */
.tool-scroller-section::before,
.tool-scroller-section::after{
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:12%;
  z-index:3;
  pointer-events:none;
}

.tool-scroller-section::before{
  left:0;
  background:linear-gradient(to right, var(--clr-bg), transparent);
}

.tool-scroller-section::after{
  right:0;
  background:linear-gradient(to left, var(--clr-bg), transparent);
}

/* Secondary clip layer — isolates track overflow from the masks */
.tool-scroller-wrapper{
  overflow:hidden;
  width:100%;
}

.tool-scroller-track{
  display:flex;
  align-items:center;
  gap:0.75rem;
  /* max-content lets both halves of the duplicated set sit inline */
  width:max-content;
  /* Mobile: slow — narrow screens show fewer icons at once */
  animation:infiniteScroll 28s linear infinite;
  /* Compositor-only animation — no layout reflow */
  will-change:transform;
}

@media(min-width:48rem){
  .tool-scroller-track{
    gap:1rem;
    animation-duration:22s;
  }
}

@media(min-width:64rem){
  .tool-scroller-track{
    gap:1.375rem;
    animation-duration:16s;
  }
}

/* Accessibility: pause on hover or keyboard focus */
.tool-scroller-track:hover,
.tool-scroller-track:focus-within{
  animation-play-state:paused;
}

/* ─── Tool items ──────────────────────────────────────────── */
/* All sizes exceed the 44px WCAG 2.5.5 tap-target minimum     */
.tool-item{
  flex-shrink:0;
  /* Mobile: 3.5rem (56px) — tappable and compact */
  width:3.5rem;
  height:3.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.625rem;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(12px);
  transition:
    transform 0.35s var(--ease),
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

@media(min-width:48rem){
  .tool-item{
    width:4.5rem;
    height:4.5rem;
    padding:0.75rem;
    border-radius:var(--radius-md);
  }
}

@media(min-width:64rem){
  .tool-item{
    width:5.75rem;
    height:5.75rem;
    padding:1rem;
    border-radius:var(--radius-lg);
  }
}

.tool-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:brightness(0.96);
  transition:transform 0.35s var(--ease);
}

.tool-item:hover{
  transform:translateY(-4px) scale(1.08);
  border-color:rgba(120,170,255,0.35);
  background:rgba(255,255,255,0.05);
  box-shadow:
    0 0 24px rgba(120,170,255,0.12),
    0 0 50px rgba(180,120,255,0.08);
}

.tool-item:hover img{
  transform:scale(1.04);
}

@keyframes infiniteScroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}


/* ============================================================
   FLOW DIAGRAM
   Mobile: vertical flow. lg+: horizontal flow restored.
============================================================ */

.horizontal-flow{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.flow-svg{
  width:20px;
  height:90px;
}

.flow-path{
  stroke-dasharray:120;
  stroke-dashoffset:120;
}

.system-node,
.node{
  width:100%;
  text-align:center;
}

.diagram-card{
  min-height:auto;
}

.systems-panel.active .horizontal,
.diagram-card.active .horizontal{
  width:80px;
}

@media(min-width:64rem){
  .horizontal-flow{
    flex-direction:row;
  }

  .flow-svg{
    width:90px;
    height:20px;
  }

  .system-node,
  .node{
    width:auto;
    text-align:left;
  }
}


/* ============================================================
   THINKING GRID
   Mobile: 1 col → sm: 2 col → lg: 2 col (design intent).
============================================================ */

.thinking-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-sm);
}

@media(min-width:30rem){
  .thinking-grid{
    grid-template-columns:repeat(2,1fr);
  }
}


/* ============================================================
   SCROLL CUE (decorative)
============================================================ */

.scroll-cue{
  position:absolute;
  /* Mobile: low enough to be visible without overlapping hero content */
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.625rem;
  z-index:10;
  animation:scrollBounce 2.5s ease-in-out infinite;
}

@media(min-width:48rem){
  .scroll-cue{
    bottom:3rem;
  }
}

.scroll-line{
  width:1px;
  height:1.75rem;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8));
}

@media(min-width:48rem){
  .scroll-line{
    height:2.5rem;
  }
}

.scroll-arrow{
  width:22px;
  height:22px;
  opacity:0.9;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

@keyframes scrollBounce{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{     transform:translateX(-50%) translateY(8px); }
}


/* ============================================================
   FADE-IN SCROLL ANIMATION
============================================================ */

.fade-in{
  opacity:0;
  transform:translateY(40px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.fade-in.show{
  opacity:1;
  transform:translateY(0);
}


/* ============================================================
   CUSTOM CURSOR + SPARKLE TRAIL
   ─────────────────────────────────────────────────────────────
   Fixes applied:
   1. mix-blend-mode:screen removed from both cursor and sparkle.
      On a dark (#090909) background, screen blending causes white
      glows to become invisible — the blend result approaches the
      background colour. Normal blending renders the glow correctly.
   2. #custom-cursor starts opacity:0 so it doesn't flash at (0,0)
      before JS has positioned it. JS should set opacity:1 once the
      first mousemove fires.
   3. .sparkle starts opacity:0 — JS sets opacity:1 when a sparkle
      is spawned so they don't pile up visibly before being placed.
   4. Glow box-shadow values strengthened — previous values were
      too subtle against the dark background.
   5. z-index hierarchy: cursor 99999, sparkles 99998 (correct —
      cursor always above trail).
============================================================ */

/* Mouse/pointer device only */
@media(hover:hover) and (pointer:fine){

  html,
  body,
  a,
  button,
  input,
  textarea{
    cursor:none;
  }

  #custom-cursor{
    position:fixed;
    top:0;
    left:0;
    width:2rem;
    height:2rem;
    border-radius:50%;
    pointer-events:none;
    z-index:99999;
    /* Start invisible — JS sets opacity:1 on first mousemove */
    opacity:0;
    transform:translate(-50%, -50%);
    background:radial-gradient(
      circle,
      rgba(255,255,255,1)    0%,
      rgba(180,210,255,0.9) 40%,
      rgba(160,100,255,0.5) 70%,
      rgba(255,255,255,0)  100%
    );
    /* Stronger glow — screen blend was hiding these on dark bg */
    box-shadow:
      0 0  8px 2px rgba(255,255,255,0.95),
      0 0 20px 4px rgba(140,180,255,0.8),
      0 0 40px 8px rgba(160,100,255,0.55);
    /* mix-blend-mode:screen REMOVED — made cursor invisible on dark bg */
    will-change:transform;
    transition:
      width  0.15s ease,
      height 0.15s ease,
      opacity 0.3s ease;
  }

  /* Cursor shrinks slightly when hovering interactive elements */
  a:hover  ~ #custom-cursor,
  button:hover ~ #custom-cursor{
    width:1.5rem;
    height:1.5rem;
  }
}

/* Touch/coarse-pointer device: restore native cursor, hide elements */
@media(hover:none),(pointer:coarse){
  html,
  body,
  a,
  button,
  input,
  textarea{
    cursor:auto;
  }

  #custom-cursor,
  #sparkle-container{
    display:none;
  }
}

/* ── Sparkle trail container ────────────────────────────── */

#sparkle-container{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:99998;
}

/* ── Individual sparkle ─────────────────────────────────── */

.sparkle{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  /* Start invisible — JS sets opacity:1 when a sparkle is spawned */
  opacity:0;
  transform:translate(-50%, -50%) scale(1);
  background:radial-gradient(
    circle,
    rgba(255,255,255,1)    0%,
    rgba(200,220,255,0.9) 40%,
    rgba(160,100,255,0.5) 70%,
    rgba(255,255,255,0)  100%
  );
  /* Stronger glow — same fix as cursor; screen blend was hiding these */
  box-shadow:
    0 0  6px 1px rgba(255,255,255,0.95),
    0 0 14px 3px rgba(140,180,255,0.75),
    0 0 24px 5px rgba(160,100,255,0.45);
  /* mix-blend-mode:screen REMOVED */
  will-change:transform, opacity;
  transition:
    opacity   0.5s ease-out,
    transform 0.5s ease-out;
}

.sparkle.fade-out{
  opacity:0;
  transform:translate(-50%, -50%) scale(0.3);
}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   Must come last to override all animation declarations above.
   Covers WCAG 2.3 SC 2.3.3 (Animation from Interactions).
============================================================ */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }

  /* Ensure scroll-triggered hidden elements become visible
     so no content is trapped behind opacity:0 */
  .systems-title,
  .systems-panel,
  .achievement-callout,
  .fade-in{
    opacity:1 !important;
    transform:none !important;
  }

  .scroll-cue,
  .system-particle{
    animation:none !important;
  }

  .sparkle,
  #custom-cursor{
    transition:none !important;
  }
}

/* ============================================================
   SITE LOADER — Full-screen loading experience
   ─────────────────────────────────────────────────────────────
   Sits above all page content. Fades out after 10 s.
   Matches the dark aesthetic of the existing portfolio.
============================================================ */

/* ── Overlay ── */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 1;
  pointer-events: all;

  /* subtle radial vignette */
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #111318 0%, #090909 100%);
}

/* ── Grain texture overlay ── */
.loader-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.6;
  pointer-events: none;
}

/* ── Inner centred content ── */
.loader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: min(480px, 88vw);
  text-align: center;
}

/* ── Monogram logo mark ── */
.loader-logo {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(120, 170, 255, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: loader-logo-pulse 3s ease-in-out infinite;
}

.loader-logo::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(120,170,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.loader-logo-text {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--clr-accent, #78aaff);
}

@keyframes loader-logo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(120,170,255,0); }
  50%       { box-shadow: 0 0 24px 4px rgba(120,170,255,0.12); }
}

/* ── Headline text ── */
.loader-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: none;
  margin: 0;
  animation: loader-text-fade 1.2s ease forwards;
}

@keyframes loader-text-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Progress bar wrapper ── */
.loader-bar-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

/* ── Percent counter ── */
.loader-percent {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
  min-width: 4ch;
  /* Tabular numbers for no layout-shift */
  font-variant-numeric: tabular-nums;
  animation: loader-text-fade 0.8s ease 0.2s both;
}

/* ── Track (background rail) ── */
.loader-bar-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

/* ── Fill (animated bar) ── */
.loader-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(120, 170, 255, 0.6)  0%,
    rgba(158, 197, 255, 1)    60%,
    rgba(200, 220, 255, 0.9)  100%
  );
  position: relative;
  /* Glow tip */
  box-shadow: 0 0 12px 2px rgba(120,170,255,0.45);
  will-change: width;
}

/* Moving shimmer on the fill */
.loader-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  border-radius: 99px;
  animation: loader-shimmer 1.4s ease-in-out infinite;
}

@keyframes loader-shimmer {
  0%   { opacity: 0; transform: translateX(-20px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(20px); }
}

/* ── Reduced motion: no shimmer, no pulse ── */
@media (prefers-reduced-motion: reduce) {
  .loader-logo { animation: none; }
  .loader-bar-fill::after { animation: none; }
  .loader-headline,
  .loader-percent { animation: none; opacity: 1; transform: none; }
}

/* ── Mobile tweaks ── */
@media (max-width: 480px) {
  .loader-inner { gap: 1.5rem; }
  .loader-logo  { width: 52px; height: 52px; border-radius: 11px; }
  .loader-logo-text { font-size: 0.95rem; }
}