/* =========================================================
   Mad Makers Pro - global styles
   ========================================================= */

:root{
  --bg:#0c0d0a;
  --bg-2:#141511;
  --cream:#f1ece0;
  --cream-2:#e8e2d4;
  --ink:#0c0d0a;
  --fg:#f1ece0;
  --fg-dim:#a4a298;
  --fg-mute:#6b6a62;
  --line:rgba(241,236,224,0.10);
  --line-2:rgba(241,236,224,0.18);
  --lime:#c8ff3d;
  --lime-2:#9ed420;
  --lime-deep:#5a7a0d;
  --serif:"Instrument Serif", "Georgia", serif;
  --sans:"Inter", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
body{overflow-x:hidden}
/* leave room for the fixed pill nav so anchor jumps land below it */
section[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}

/* ================ NAV ================ */
.nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:50;
  width:min(1240px, calc(100% - 32px));
  background:rgba(20,21,17,0.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px 10px 22px;
  display:flex;align-items:center;justify-content:space-between;
  transition:transform .35s ease, background .3s ease;
}
.nav.is-hidden{transform:translateX(-50%) translateY(-130%)}
.brand{display:flex;align-items:center;gap:0;font-family:var(--serif);font-size:22px;font-style:italic;letter-spacing:0.2px}
.brand .mk{
  width:28px;height:28px;border-radius:6px;
  background:url("assets/logo-mad-makers.png") center/contain no-repeat;
  box-shadow:0 0 0 1px rgba(200,255,61,0.25);
  flex-shrink:0;
  transition:box-shadow .25s ease, transform .25s ease;
}
.brand:hover .mk{
  box-shadow:0 0 0 1px rgba(200,255,61,0.55), 0 0 18px rgba(200,255,61,0.18);
}
.brand-name{
  display:inline-block;
  max-width:0;
  margin-left:0;
  /* internal padding gives the italic 'M' room for its left foot/serif so
     overflow:hidden doesn't clip it */
  padding-left:5px;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  pointer-events:none;
  transform:translateX(-6px);
  transition:max-width .45s cubic-bezier(.2,.7,.2,1),
             opacity .35s ease,
             margin-left .45s cubic-bezier(.2,.7,.2,1),
             transform .45s cubic-bezier(.2,.7,.2,1);
}
.brand:hover .brand-name,
.brand:focus-visible .brand-name{
  max-width:12em;
  margin-left:12px;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  padding:9px 16px;font-size:14px;font-weight:500;color:var(--fg);
  border-radius:999px;display:inline-flex;align-items:center;gap:6px;
  transition:background .2s ease, color .2s ease;
}
.nav-links a:hover{background:rgba(241,236,224,0.06)}
.nav-links a .caret{font-size:9px;color:var(--lime);margin-left:2px}

/* Liquid glass - primary nav button (cream-tinted glass) */
.nav-cta{
  position:relative;overflow:hidden;
  padding:10px 18px;font-size:14px;font-weight:500;
  color:var(--ink);border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
  background:radial-gradient(ellipse 100% 70% at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(255,253,247,0.85) 50%, rgba(225,219,205,0.78) 100%);
  border:1px solid rgba(255,255,255,0.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    inset 0 0 18px rgba(255,255,255,0.4),
    0 10px 24px rgba(0,0,0,0.28);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, box-shadow .3s ease;
}
.nav-cta::after{
  content:"";position:absolute;top:0;left:-30%;height:100%;width:30%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;opacity:0;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.nav-cta:hover{
  transform:translateY(-2px);
  background:radial-gradient(ellipse 100% 70% at 50% 0%, #fff 0%, var(--cream) 70%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 0 0 3px rgba(200,255,61,0.22),
    0 14px 32px rgba(0,0,0,0.30);
}
.nav-cta:hover::after{opacity:1;transform:skewX(-18deg) translateX(420%)}
.nav-cta .arrow{display:inline-block;transform:rotate(-45deg);font-weight:600;position:relative;z-index:1}

/* Liquid glass - dark variant (use on green/dark surfaces) */
.glass-dark{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 110% 75% at 50% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 45%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 50%, rgba(0,0,0,0.10) 100%);
  backdrop-filter:blur(30px) saturate(220%) brightness(1.12);
  -webkit-backdrop-filter:blur(30px) saturate(220%) brightness(1.12);
  border:1px solid rgba(255,255,255,0.46);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.30);
  /* lighter shadow at rest - no big halo / frame around the button */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.glass-dark::after{
  content:"";position:absolute;top:0;left:-30%;height:100%;width:30%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;opacity:0;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.glass-dark:hover{
  transform:translateY(-2px);
  background:
    radial-gradient(ellipse 110% 75% at 50% 0%, rgba(255,255,255,0.50) 0%, rgba(200,255,61,0.18) 50%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 50%, rgba(0,0,0,0.10) 100%);
  border-color:rgba(200,255,61,0.65);
  /* drop shadow + lime halo only on hover, lighter than before */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.85),
    inset 0 0 24px rgba(200,255,61,0.10),
    0 0 0 2px rgba(200,255,61,0.14),
    0 14px 32px rgba(200,255,61,0.18);
}
.glass-dark:hover::after{opacity:1;transform:skewX(-18deg) translateX(420%)}

/* ================ HERO ================ */
.hero{
  position:relative;min-height:100vh;
  padding:160px 32px 80px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg, #2d3d0a 0%, #0c0d0a 100%);
}
.hero-bg .hero-video{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  object-fit:cover;display:block;
  filter:saturate(1.06) contrast(1.03);
}
.hero-bg .hero-tint{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(200,255,61,0.14), transparent 65%),
    linear-gradient(180deg, rgba(12,13,10,0.20) 0%, rgba(12,13,10,0.05) 40%, rgba(12,13,10,0.55) 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 5px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.40 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.45;mix-blend-mode:overlay;
}
.hero-bg::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, transparent 35%, rgba(12,13,10,0.92) 85%);
}
.dot-grid{
  position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(241,236,224,0.18) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
  opacity:.55;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg);
  margin-bottom:30px;
}
.eyebrow .sq{width:8px;height:8px;background:var(--fg);flex-shrink:0}

/* Looping reveal: the square acts as a switch - it rotates as the text
   slides out of it, holds, then rotates again as the text retracts. 6s loop. */
.eyebrow-loop .eyebrow-text{
  display:inline-block;
  white-space:nowrap;
  transform-origin:left center;
  transform:scaleX(0);
  animation:eyebrow-text-loop 6s cubic-bezier(.5,0,.5,1) infinite;
}
.eyebrow-loop .sq{
  animation:eyebrow-square-loop 6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes eyebrow-text-loop{
  /* phase timing (% of 6s):
     0-8%   rest invisible    (0.48s)
     8-18%  appearing         (0.60s)
     18-78% holding visible   (3.60s)
     78-88% disappearing      (0.60s)
     88-100% rest invisible   (0.72s) */
  0%, 8%   { transform:scaleX(0); }
  18%, 78% { transform:scaleX(1); }
  88%,100% { transform:scaleX(0); }
}
@keyframes eyebrow-square-loop{
  /* opacity goes to 0 during the rest/swap phase so the textContent change
     (which shifts the eyebrow's intrinsic width and so its centred position)
     happens while the square is invisible - no visible jump */
  0%, 8%   { transform:rotate(0deg);  opacity:0; }
  18%, 78% { transform:rotate(45deg); opacity:1; }
  88%,100% { transform:rotate(90deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .eyebrow-loop .eyebrow-text{transform:scaleX(1);animation:none}
  .eyebrow-loop .sq{animation:none}
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px, 7.2vw, 104px);
  line-height:1.02;letter-spacing:-0.02em;
  text-align:center;max-width:1100px;
  text-wrap:balance;
}
.hero h1 em{
  font-style:italic;
  background:linear-gradient(95deg, var(--lime) 0%, var(--lime) 55%, rgba(241,236,224,0.35) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Hero h1 - per-character "lens" detachment on cursor proximity. Just
   movement + drop-shadow, no colour overlay. */
.frag-char{
  display:inline-block;
  --t:0;
  --rx:0; --ry:0; --rot:0deg;
  transform:translate(
    calc(var(--rx) * var(--t) * 7px),
    calc(var(--ry) * var(--t) * 7px)
  ) rotate(calc(var(--rot) * var(--t)));
  filter:drop-shadow(
    0 calc(var(--t) * 3px)
      calc(var(--t) * 8px)
      rgba(0, 0, 0, calc(var(--t) * 0.45))
  );
  /* The parent h1 has letter-spacing:-0.02em + each char is an inline-block
     with a transform. That combo makes adjacent char boxes overlap, and the
     next box's stacking context visually clips the previous glyph's right
     edge. Pad each char's content area on the right and compensate with
     a negative right margin so layout is unchanged but glyphs render fully. */
  padding-right:0.06em;
  margin-right:-0.06em;
  overflow:visible;
}
/* Em chars get a SOLID colour set per-char by JS, sampled from the gradient
   at the char's position. Solid colour paints the entire glyph including
   italic overhang, so nothing gets clipped. Default (before JS) is lime,
   which matches 55% of the gradient anyway. */
.frag-char-em{
  font-style:italic;
  color:var(--lime);
  -webkit-text-fill-color:currentColor;
  background:none;
}
@media (prefers-reduced-motion: reduce){
  .frag-char{transform:none !important;filter:none !important}
}
.hero-sub{
  margin-top:22px;color:var(--fg-dim);font-size:17px;text-align:center;max-width:600px;line-height:1.55;
}
.hero-cta{
  margin-top:40px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:0.04em;color:var(--fg);
  padding:6px 4px;border-bottom:1px solid var(--line-2);
  transition:color .2s ease, border-color .2s ease;
}
.hero-cta:hover{color:var(--lime);border-color:var(--lime)}
.hero-cta .turn{display:inline-block;color:var(--lime)}

/* ================ FEATURE CARD ================ */
.feature-card-wrap{
  position:relative;margin-top:auto;width:100%;max-width:1240px;
  display:flex;justify-content:center;gap:18px;padding-top:80px;flex-wrap:wrap;
  /* anchor cards to the BOTTOM of the wrap. The wrap itself is pinned to the
     bottom of the hero via margin-top:auto, so when a hovered card expands
     upward, its bottom stays put - the un-hovered sibling doesn't shift. */
  align-items:flex-end;
}
.feature-card{
  width:380px;height:200px;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg, #1a1d12, #0c0d0a);
  border:1px solid var(--line-2);
  position:relative;cursor:pointer;
  display:flex;align-items:flex-end;padding:18px;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(200,255,61,0.4)}
.feature-card.note{
  width:380px;height:auto;
  background:linear-gradient(135deg, #1a1d12, #0c0d0a);
  padding:18px 20px;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:0;
}
.feature-card.note .head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.feature-card.note .label{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg)}
.feature-card.note .label .sq{width:8px;height:8px;background:var(--fg)}
.feature-card.note .expand-icon{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-dim);
  flex-shrink:0;
  transition:color .55s ease, border-color .55s ease, background .55s ease,
             transform .85s cubic-bezier(.2,.7,.2,1);
}
.feature-card.note .expand-icon svg{width:13px;height:13px;display:block}
.feature-card.note:hover .expand-icon{
  color:var(--lime);
  border-color:rgba(200,255,61,0.6);
  background:rgba(200,255,61,0.08);
  /* arrow turns from south-east (collapse cue) to south (pointing at the
     paragraph that just appeared below) */
  transform:rotate(45deg);
}
.feature-card.note .body{
  font-size:14px;line-height:1.55;color:var(--fg-dim);
  max-height:0;
  margin-top:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .9s cubic-bezier(.2,.7,.2,1),
             margin-top .8s cubic-bezier(.2,.7,.2,1),
             opacity .65s ease .1s;
}
.feature-card.note:hover .body{
  max-height:240px;
  margin-top:12px;
  opacity:1;
}

/* ================ STATS / DARK SECTION ================ */
section.dark{background:var(--bg);padding:140px 32px;position:relative;overflow:hidden}
.container{max-width:1240px;margin:0 auto}
.stats-row{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.big-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px, 4.6vw, 64px);
  line-height:1.05;letter-spacing:-0.02em;color:var(--cream);
  text-wrap:balance;
}
.big-title em{font-style:italic;background:linear-gradient(95deg, var(--lime) 0%, var(--lime) 50%, rgba(241,236,224,0.4) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:24px;font-size:16px;line-height:1.6;color:var(--fg-dim);max-width:540px}
.stats{display:flex;gap:60px;margin-top:48px}
.stat .num{font-family:var(--serif);font-size:54px;line-height:1;color:var(--cream);letter-spacing:-0.02em}
.stat .lab{margin-top:10px;font-size:13px;color:var(--fg-dim)}
/* Mad Makers custom box (replaces the spinning orbs in the manifesto section) */
.orb-wrap{position:relative;height:480px;display:flex;align-items:center;justify-content:center}
.orb-wrap .mm-box{
  max-height:100%;max-width:100%;
  width:auto;height:auto;
  display:block;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  animation:mm-box-float 6.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes mm-box-float{
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-16px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce){
  .orb-wrap .mm-box{animation:none}
}

/* Tools / inspirations row */
.logos-row{
  margin-top:120px;
  display:grid;grid-template-columns:0.8fr 2fr;gap:48px;align-items:center;
  border-top:1px solid var(--line);padding-top:40px;
}
.logos-row .lab{font-size:13px;color:var(--fg-dim);max-width:200px;line-height:1.5}
.logos.tools{display:flex;align-items:center;justify-content:flex-start;gap:30px 36px;flex-wrap:wrap}
.tool{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.10em;
  color:var(--fg-mute);
  opacity:.65;
  filter:saturate(0.55) brightness(0.95);
  transition:opacity .25s ease, filter .25s ease, color .25s ease, transform .25s ease;
}
.tool:hover{opacity:1;filter:saturate(1) brightness(1);color:var(--cream);transform:translateY(-1px)}
.tool img{
  height:22px;width:auto;display:block;flex-shrink:0;
  object-fit:contain;
}
/* Wordmarks (Framer, Cloudflare) need slightly less height than icons to
   read at the same visual weight (text-only marks are taller per pixel). */
.tool img.wordmark{height:20px}
/* Some icons (Figma, Spline) ship with built-in padding around the glyph,
   so they look smaller than the others at identical heights - bump them. */
.tool--lg img{height:28px}
/* Some icons read heavier than average (cosmos.svg has bold strokes),
   pull them down a notch so the row stays balanced. */
.tool--sm img{height:18px}
.tool span{white-space:nowrap}

/* ================ CREAM SECTION (services) ================ */
section.cream{background:var(--cream);color:var(--ink);padding:140px 32px;position:relative}
section.cream .big-title{color:var(--ink)}
section.cream .big-title em{background:linear-gradient(95deg, var(--ink) 0%, var(--ink) 55%, #9ca096 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
section.cream .eyebrow{color:var(--ink)}
section.cream .eyebrow .sq{background:var(--ink)}

/* Services horizontal scroller */
.services-scroller{
  margin-top:80px;
  position:relative;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
}
.services-grid{
  display:flex;gap:22px;
  overflow-x:auto;overflow-y:visible;
  /* scroll-snap removed: it was fighting the RAF lerp and caused snags */
  padding:8px max(32px, calc(50vw - 620px)) 32px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(12,13,10,0.35) transparent;
  cursor:grab;
  overscroll-behavior-x:contain;
}
.services-grid.is-grabbing{cursor:grabbing}
.services-grid::-webkit-scrollbar{height:6px}
.services-grid::-webkit-scrollbar-track{background:rgba(12,13,10,0.06);border-radius:999px}
.services-grid::-webkit-scrollbar-thumb{background:rgba(12,13,10,0.30);border-radius:999px}
.services-grid::-webkit-scrollbar-thumb:hover{background:rgba(12,13,10,0.55)}
.svc-row{
  flex:0 0 320px;display:flex;flex-direction:column;
  user-select:none;
}
.services-scroller::before,
.services-scroller::after{
  content:"";position:absolute;top:0;bottom:32px;width:64px;pointer-events:none;z-index:3;
}
.services-scroller::before{left:0;background:linear-gradient(90deg, var(--cream) 10%, transparent 100%)}
.services-scroller::after{right:0;background:linear-gradient(270deg, var(--cream) 10%, transparent 100%)}

/* ===== Service card: dark at rest, WebGL paints the splash + lens on hover ===== */
.svc{
  border-radius:14px;
  aspect-ratio:1/1;position:relative;overflow:hidden;
  cursor:pointer;isolation:isolate;
  /* dark grey-black at rest (and as no-WebGL fallback) */
  background:linear-gradient(180deg, #161812 0%, #0a0b07 100%);
  /* outer drop shadow only - inset shadows would draw a dark ring along the
     rounded corners (visible because rounded-corner anti-aliasing leaves a
     thin sliver where the canvas can't fully overpaint them) */
  box-shadow:0 10px 24px rgba(0,0,0,0.30);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.svc:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}
.svc-fx{
  /* extend 1.5px beyond the card on every side so that subpixel anti-aliasing
     at the rounded corners doesn't leave a sliver of the CSS background
     showing through. The parent's border-radius + overflow:hidden does the
     clipping, so the canvas itself doesn't need a border-radius. */
  position:absolute;
  inset:-1.5px;
  width:calc(100% + 3px);
  height:calc(100% + 3px);
  z-index:1;
  display:block;
  pointer-events:none;
}
.svc-icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;color:var(--cream);
  z-index:2;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,0.45));
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.svc:hover .svc-icon{transform:translate(-50%,-50%) scale(1.06)}
.svc-label{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.svc-label h3{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.svc-label p{font-size:13px;color:#5a5a52;line-height:1.5}

/* ================ PROJETS ================ */
section.projects{background:var(--bg);padding:140px 32px;border-top:1px solid var(--line);position:relative;overflow:hidden}
.proj-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:56px}
.proj-head .right{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-dim)}
.proj-head .right b{color:var(--lime);font-weight:500;letter-spacing:0.18em}
.proj-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px}
.proj-card{
  position:relative;border-radius:14px;background:#141511;border:1px solid var(--line);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:transform .35s ease, border-color .25s ease;
  min-height:260px;
}
.proj-card:hover{transform:translateY(-4px);border-color:rgba(200,255,61,0.32)}
.proj-card .cover{position:relative;flex:1;overflow:hidden;background:#0c0d0a;min-height:180px}
.proj-card .cover video,.proj-card .cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.proj-card:hover .cover video,.proj-card:hover .cover img{transform:scale(1.04)}
.proj-card .cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(12,13,10,0.55) 100%);
}
.proj-card .num{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--lime);
  padding:5px 9px;border:1px solid rgba(200,255,61,0.35);border-radius:4px;
  background:rgba(12,13,10,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.proj-card .live{
  position:absolute;top:14px;right:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream);
  padding:5px 10px;border:1px solid rgba(241,236,224,0.18);border-radius:999px;
  background:rgba(12,13,10,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.proj-card .live .pulse{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);animation:pulseDot 1.8s ease-in-out infinite}
@keyframes pulseDot{50%{opacity:.4;transform:scale(.85)}}
.proj-card .meta{
  position:relative;z-index:2;padding:20px 20px 22px;
  display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--line);
}
.proj-card .name{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-0.01em;color:var(--cream);line-height:1.1}
.proj-card .name em{font-style:italic;color:var(--lime)}
.proj-card .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-dim);display:flex;justify-content:space-between;gap:12px}
.proj-card .sub .arr{color:var(--lime);transition:transform .25s ease}
.proj-card:hover .sub .arr{transform:translateX(3px)}

.proj-card.featured{grid-column:span 2;grid-row:span 2;min-height:540px}
.proj-card.featured .cover{min-height:0}
.proj-card.featured .name{font-size:38px;line-height:1.02}

.proj-card.empty{cursor:default;background:transparent;border-style:dashed}
.proj-card.empty:hover{transform:none;border-color:rgba(241,236,224,0.18)}
.proj-card.empty .cover{
  background:
    repeating-linear-gradient(135deg, rgba(241,236,224,0.025) 0 10px, transparent 10px 20px),
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(200,255,61,0.05), transparent 70%),
    #0e0f0b;
  display:flex;align-items:center;justify-content:center;
}
.proj-card.empty .cover::after{display:none}
.proj-card.empty .empty-mark{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--fg-mute);
}
.proj-card.empty .empty-mark .dot{width:7px;height:7px;border-radius:50%;background:var(--fg-mute);animation:pulseDot 2.4s ease-in-out infinite}
.proj-card.empty .meta .name{font-family:var(--mono);font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-mute)}

.proj-foot{margin-top:40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--fg-dim)}
.proj-foot a{display:inline-flex;align-items:center;gap:8px;color:var(--cream);border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:color .2s ease, border-color .2s ease}
.proj-foot a:hover{color:var(--lime);border-color:var(--lime)}
.proj-foot a .turn{color:var(--lime)}

/* ================ DUO CTA ================ */
section.duo{background:var(--bg);padding:0 32px 140px;position:relative}
.duo-banner{
  position:relative;border-radius:18px;overflow:hidden;
  height:380px;display:flex;align-items:center;justify-content:center;
  margin-bottom:80px;
}
.duo-banner-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 50% 80% at 30% 50%, rgba(200,255,61,0.45), transparent 60%),
  radial-gradient(ellipse 50% 80% at 70% 50%, rgba(158,212,32,0.45), transparent 60%),
  linear-gradient(180deg, #2a3808 0%, #0c0d0a 100%);
}
.duo-banner-bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(241,236,224,0.20) 1px, transparent 1px);
  background-size:20px 20px;opacity:.6;
}
.duo-banner .pill{
  position:relative;text-align:center;padding:48px 56px;
  background:rgba(20,21,17,0.55);border:1px solid var(--line-2);
  border-radius:18px;backdrop-filter:blur(8px);max-width:600px;
}
.duo-banner .pill .mk-orb{width:54px;height:54px;margin:0 auto 22px;background:url("assets/logo-mad-makers.png") center/contain no-repeat;filter:drop-shadow(0 0 20px rgba(200,255,61,0.4))}
.duo-banner .pill h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.15;color:var(--cream);text-wrap:balance}
.duo-banner .pill .btn{
  margin-top:26px;display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
}

.duo-head{font-family:var(--serif);font-weight:400;font-size:clamp(28px, 3.4vw, 44px);line-height:1.15;color:var(--cream);letter-spacing:-0.01em;text-wrap:balance;max-width:780px}
.duo-head .dim{color:var(--fg-mute)}
.duo-head em{font-style:normal;color:var(--cream)}
.duo-cards{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo-card{
  display:flex;align-items:center;gap:18px;
  padding:22px 24px;border-radius:14px;
  background:#141511;border:1px solid var(--line);
  transition:border-color .25s ease, background .25s ease, transform .2s ease;
  cursor:pointer;
  /* button reset */
  font:inherit;color:inherit;text-align:left;width:100%;
}
.duo-card:active{transform:scale(0.99)}
.duo-card:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.duo-card:hover{border-color:rgba(200,255,61,0.35);background:#181a13}
.duo-card .icon-tile{
  width:54px;height:54px;border-radius:10px;flex-shrink:0;
  background:radial-gradient(ellipse at 50% 60%, #c8ff3d 0%, #5a7a0d 60%, #1a2007 100%);
  position:relative;display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.duo-card .icon-tile svg{width:26px;height:26px}
.duo-card .text{flex:1}
.duo-card .text .t1{font-size:15px;font-weight:600;color:var(--cream);margin-bottom:3px}
.duo-card .text .t2{font-size:13px;color:var(--fg-dim)}
.duo-card .arr{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--fg-dim);
  transition:transform .2s ease, color .2s ease, border-color .2s ease;
  flex-shrink:0;
}
.duo-card .arr svg{width:14px;height:14px;display:block}
.duo-card:hover .arr{color:var(--lime);border-color:var(--lime);transform:translateX(3px)}

/* ================ FOUNDER MODAL ================ */
.founder-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
  pointer-events:none;
  opacity:0;
  /* GPU promotion so the open/close animation never repaints the rest of the page */
  will-change:opacity;
  transform:translateZ(0);
  transition:opacity .28s ease;
}
.founder-modal.is-open{
  pointer-events:auto;
  opacity:1;
}
.founder-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(8,9,7,0.72);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
}
.founder-modal-card{
  position:relative;z-index:1;
  width:100%;max-width:760px;max-height:calc(100vh - 64px);
  display:grid;grid-template-columns:300px 1fr;gap:0;
  background:linear-gradient(180deg, #1a1d12 0%, #0e100b 100%);
  border:1px solid rgba(241,236,224,0.12);
  border-radius:18px;overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 32px 80px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.30);
  /* GPU layer + 3d transform so the in/out animation is composited, not painted */
  will-change:transform, opacity;
  transform:translate3d(0, 18px, 0) scale(0.96);
  opacity:0;
  transition:transform .42s cubic-bezier(.2,.7,.2,1), opacity .28s ease;
}
.founder-modal.is-open .founder-modal-card{
  transform:translate3d(0, 0, 0) scale(1);
  opacity:1;
}
.founder-modal-close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(241,236,224,0.18);
  background:rgba(20,21,17,0.72);
  backdrop-filter:blur(8px);
  color:var(--cream);cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.founder-modal-close svg{width:16px;height:16px}
.founder-modal-close:hover{
  border-color:var(--lime);color:var(--lime);
  background:rgba(200,255,61,0.08);
  transform:rotate(90deg);
}
.founder-modal-photo{
  position:relative;
  background:#0e100b;
  overflow:hidden;
  min-height:380px;
}
.founder-modal-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 60%, rgba(14,16,11,0.4) 100%);
}
.founder-modal-photo img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.02);
  transition:opacity .25s ease;
}
.founder-modal-body{
  padding:36px 36px 32px;
  display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;
}
.founder-modal-role{
  font-family:var(--mono);font-size:11px;letter-spacing:0.20em;
  text-transform:uppercase;color:var(--lime);
}
.founder-modal-name{
  font-family:var(--serif);font-weight:400;
  font-size:36px;line-height:1.05;letter-spacing:-0.02em;
  color:var(--cream);
  text-wrap:balance;
}
.founder-modal-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:0.10em;
  color:var(--fg-mute);text-transform:uppercase;
  margin-top:-4px;
}
.founder-modal-bio{
  font-size:14.5px;line-height:1.65;color:var(--fg-dim);
  margin-top:6px;
}
.founder-modal-bio p + p{margin-top:10px}
.founder-modal-bio b{color:var(--cream);font-weight:600}
.founder-modal-link{
  align-self:flex-start;
  margin-top:14px;
  padding:12px 22px;border-radius:999px;
  font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.founder-modal-link .ar{display:inline-block;color:var(--lime);transition:transform .25s ease}
.founder-modal-link:hover .ar{transform:translate(2px,-2px)}

@media (max-width: 700px){
  .founder-modal{padding:16px}
  .founder-modal-card{
    grid-template-columns:1fr;
    max-height:calc(100vh - 32px);
    overflow-y:auto;
  }
  .founder-modal-photo{
    min-height:0;
    aspect-ratio:16/10;
  }
  .founder-modal-body{padding:28px 24px 24px}
  .founder-modal-name{font-size:28px}
}

/* ================ ARTICLES ================ */
section.articles{padding:0 32px 140px;background:var(--bg)}
.articles-head{font-family:var(--serif);font-weight:400;font-size:clamp(36px, 4.4vw, 60px);letter-spacing:-0.01em;color:var(--cream);margin-bottom:56px}
.articles-head .dim{color:var(--fg-mute)}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.article{
  background:#141511;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;
  transition:transform .3s ease, border-color .25s ease;
}
.article:hover{transform:translateY(-4px);border-color:var(--line-2)}
.article .thumb{
  aspect-ratio:5/3;position:relative;overflow:hidden;
  padding:24px;display:flex;flex-direction:column;justify-content:flex-end;
}
.article .thumb h4{
  font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-0.01em;
  text-wrap:balance;
  position:relative;z-index:2;
}
.article .thumb h4 em{font-style:italic;color:var(--lime)}
.article.t1 .thumb{background:radial-gradient(ellipse at 100% 100%, rgba(200,255,61,0.25), transparent 60%), repeating-linear-gradient(0deg, rgba(241,236,224,0.06) 0 1px, transparent 1px 30px), #181a13}
.article.t2 .thumb{background:radial-gradient(ellipse at 0% 0%, rgba(241,236,224,0.06), transparent 50%), repeating-linear-gradient(45deg, rgba(241,236,224,0.04) 0 2px, transparent 2px 18px), #1c1f15}
.article.t3 .thumb{background:radial-gradient(circle at 50% 30%, rgba(200,255,61,0.18), transparent 55%), radial-gradient(circle at 80% 80%, rgba(90,122,13,0.4), transparent 55%), #141611}
.article .body{
  padding:24px;flex:1;display:flex;flex-direction:column;gap:18px;
  border-top:1px solid var(--line);
}
.article .body h5{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.4;color:var(--cream);text-wrap:balance}
.article .body .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-dim)}
.article .body .foot .tag{display:flex;align-items:center;gap:8px}
.article .body .foot .tag .sq{width:7px;height:7px;background:var(--fg-dim)}
.articles-foot{margin-top:36px;display:flex;justify-content:flex-end;align-items:center;gap:18px;font-size:14px;color:var(--fg-dim)}
.articles-foot a{display:inline-flex;align-items:center;gap:8px;color:var(--cream);border-bottom:1px solid var(--line-2);padding-bottom:4px}
.articles-foot a:hover{color:var(--lime);border-color:var(--lime)}
.articles-foot a .turn{color:var(--lime)}

/* ================ FOOTER CTA ================ */
.footer-cta{
  padding:160px 32px 140px;text-align:center;position:relative;overflow:hidden;isolation:isolate;
  background:#1a2007;
}
.footer-cta .footer-video{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.02);
}
.footer-cta .footer-tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(200,255,61,0.15) 0%, transparent 65%),
    linear-gradient(180deg, rgba(12,13,10,0.10) 0%, rgba(12,13,10,0.05) 40%, rgba(12,13,10,0.45) 100%);
}
/* Dot grid is rendered by WebGL canvas (.footer-cta-fx) to support a real
   magnifying-lens warp at the cursor. The static CSS dot grid via ::after is
   removed - the canvas takes over with the same look at rest. */
.footer-cta-fx{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  display:block;pointer-events:none;
  /* difference blend: each dot inverts the colour of the video pixel beneath
     it, so dots shift colour as the lens (and the trail) moves over the
     animated background */
  mix-blend-mode:difference;
}
.footer-cta::before{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;opacity:.28;pointer-events:none;
}
.footer-cta h2{position:relative;z-index:3;font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,84px);line-height:1.05;letter-spacing:-0.02em;color:var(--cream);text-wrap:balance;max-width:1100px;margin:0 auto;text-shadow:0 2px 18px rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.25)}
.footer-cta h2 em{font-style:normal;background:linear-gradient(95deg, var(--lime) 0%, var(--lime) 55%, rgba(241,236,224,0.85) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.footer-cta p{position:relative;z-index:3;margin-top:20px;color:var(--cream);font-size:16px;font-weight:400;text-shadow:0 1px 8px rgba(0,0,0,0.55)}
.footer-cta-buttons{position:relative;z-index:3;margin-top:44px;display:inline-flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
.btn-dark{
  padding:11px 28px;border-radius:999px;font-size:12px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
}
.footer-cta-buttons .link{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--cream);font-weight:500;border-bottom:1px solid rgba(241,236,224,0.30);padding-bottom:3px;transition:color .2s ease, border-color .2s ease;text-shadow:0 1px 8px rgba(0,0,0,0.45)}
.footer-cta-buttons .link:hover{color:var(--lime);border-color:var(--lime)}
.footer-cta-buttons .link .turn{color:var(--lime)}

/* ================ FOOTER ================ */
footer.foot{background:var(--bg);padding:80px 32px 32px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;max-width:1240px;margin:0 auto}
.foot-brand .mk{width:54px;height:54px;border-radius:10px;background:url("assets/logo-mad-makers.png") center/contain no-repeat;margin-bottom:24px}
.foot-brand .addr{font-size:14px;line-height:1.6;color:var(--cream)}
.foot-brand .tag{margin-top:20px;font-size:13px;color:var(--fg-dim);font-style:italic;font-family:var(--serif)}
.foot-col h6{font-size:13px;font-weight:600;color:var(--cream);margin-bottom:20px;letter-spacing:0.02em}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot-col ul a{font-size:14px;color:var(--fg-dim);transition:color .2s ease}
.foot-col ul a:hover{color:var(--lime)}
.foot-col.contact ul a{color:var(--cream);font-weight:500}
.foot-col.contact ul a:hover{color:var(--lime)}
.foot-col.contact ul .lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:4px;font-weight:400}
.foot-bottom{max-width:1240px;margin:72px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--fg-dim);gap:20px;flex-wrap:wrap}
.foot-bottom .social{display:flex;gap:10px}
.foot-bottom .social a{
  width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);font-size:13px;font-weight:500;
  background:rgba(241,236,224,0.03);
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.foot-bottom .social a:hover{border-color:var(--lime);color:var(--lime);background:rgba(200,255,61,0.08);transform:translateY(-1px)}

/* ================ BACK-TO-TOP ================ */
.back-top{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--cream);
  background:
    radial-gradient(ellipse 110% 75% at 50% 0%, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.10) 45%, transparent 100%),
    linear-gradient(180deg, rgba(20,21,17,0.62) 0%, rgba(12,13,10,0.82) 100%);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,0.30);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 14px 32px rgba(0,0,0,0.40);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .35s ease, transform .4s cubic-bezier(.2,.7,.2,1),
             background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.back-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-top:hover{
  color:var(--lime);
  border-color:rgba(200,255,61,0.65);
  background:
    radial-gradient(ellipse 110% 75% at 50% 0%, rgba(200,255,61,0.22) 0%, rgba(255,255,255,0.10) 45%, transparent 100%),
    linear-gradient(180deg, rgba(20,21,17,0.62) 0%, rgba(12,13,10,0.82) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.75),
    0 0 0 3px rgba(200,255,61,0.18),
    0 18px 40px rgba(200,255,61,0.22);
  transform:translateY(-3px);
}
.back-top:active{transform:translateY(-1px)}
.back-top svg{width:18px;height:18px;display:block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.back-top:hover svg{transform:translateY(-2px)}
@media (max-width:600px){
  .back-top{right:16px;bottom:16px;width:44px;height:44px}
}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width: 960px){
  .nav-links{display:none}
  .stats-row, .duo-cards, .article-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .svc-row{flex:0 0 280px}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .proj-card.featured{grid-column:span 2;grid-row:auto;min-height:380px}
  .proj-card.featured .name{font-size:28px}
  .proj-head{align-items:flex-start;flex-direction:column}
  .logos-row{grid-template-columns:1fr}
  .feature-card, .feature-card.note{width:100%}
  .orb-wrap{height:300px}
  .orb-wrap .mm-box{max-height:280px}
}

/* On phones we drop the videos (43 MB hero would crush 4G) and the WebGL
   effects entirely. Replace with rich gradient backgrounds so the sections
   still feel alive. */
@media (max-width: 720px){
  .hero-bg .hero-video,
  .footer-cta .footer-video{display:none}
  .hero-bg{
    background:
      radial-gradient(ellipse 90% 60% at 50% 30%, rgba(200,255,61,0.55), transparent 60%),
      radial-gradient(ellipse 60% 80% at 90% 50%, rgba(158,212,32,0.35), transparent 65%),
      radial-gradient(ellipse 70% 70% at 10% 70%, rgba(90,122,13,0.5), transparent 65%),
      linear-gradient(180deg, #4a6210 0%, #2d3d0a 60%, #0c0d0a 100%);
  }
  .footer-cta{
    background:
      radial-gradient(ellipse 95% 80% at 50% 35%, rgba(200,255,61,0.30), transparent 65%),
      radial-gradient(ellipse 60% 70% at 20% 80%, rgba(158,212,32,0.18), transparent 60%),
      linear-gradient(180deg, #2d3d0a 0%, #1a2007 60%, #0c0d0a 100%);
  }
  /* simplify the heaviest non-WebGL effects too so phones don't lag */
  .nav{backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
  .glass-dark{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
}