/* ============================================================
   AXLE MARKETING GROUP — landing page
   Bold / brutalist × futuristic-tech. Dark. Hand-built.
   ============================================================ */

:root{
  /* Axle brand palette (ink + cream, no vibrant colors) */
  --bg:#0B0A0F;              /* Tinta / ink */
  --bg-2:#131218;
  --card:#17161c;
  --fg:#F4F1EA;              /* Creme */
  --muted:#9d9a95;
  --muted-2:#6a665f;
  --line:rgba(244,241,234,.13);
  --line-2:rgba(244,241,234,.24);
  --accent:#FF4A00;          /* Axle orange — high-impact accent */
  --accent-rgb:255,74,0;
  --accent-ink:#0B0A0F;

  /* paper surface (inverted sections) */
  --paper:#F4F1EA;
  --paper-2:#ECE7DC;
  --ink:#0B0A0F;
  --paper-body:#2C2B27;
  --paper-muted:#625F5A;
  --paper-line:rgba(11,10,15,.16);

  --violet:#242424;
  --cyan:#333333;

  --maxw:1360px;
  --pad:clamp(20px,5vw,80px);

  --ff-display:"Clash Grotesk","Hanken Grotesk",system-ui,sans-serif;
  --ff-body:"General Sans","Hanken Grotesk",system-ui,sans-serif;
  --ff-mono:"General Sans","Hanken Grotesk",system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg); color:var(--fg);
  font-family:var(--ff-body); font-size:clamp(15px,1.05vw,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.lock{ overflow:hidden }

a{ color:inherit; text-decoration:none }
img,canvas,svg{ display:block; max-width:100% }
::selection{ background:var(--accent); color:var(--accent-ink) }

.eyebrow{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.75em; font-weight:500;
}
.eyebrow .dash{ width:34px; height:1px; background:var(--accent); display:inline-block; opacity:.8 }

.accent{ color:var(--accent); text-shadow:0 0 30px rgba(var(--accent-rgb),.4) }
em{ font-style:italic; color:var(--accent) }

/* ---------- buttons ---------- */
.btn{
  --bx:0;--by:0;
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-mono); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:15px 26px; border-radius:2px; background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); cursor:pointer; white-space:nowrap;
  transform:translate(var(--bx),var(--by)); transition:background .3s var(--ease), color .3s, box-shadow .3s;
  box-shadow:0 0 0 rgba(255,255,255,0);
}
.btn:hover{ box-shadow:0 10px 40px -8px rgba(var(--accent-rgb),.45) }
.btn:active{ transform:translate(var(--bx),calc(var(--by) + 1px)) scale(.99) }
.btn__arrow{ transition:transform .3s var(--ease) }
.btn:hover .btn__arrow{ transform:translateX(4px) }
.btn--sm{ padding:11px 18px; font-size:12px }
.btn--lg{ padding:18px 32px; font-size:14px }
.btn--block{ width:100%; justify-content:center; margin-top:8px }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line-2) }
.btn--ghost:hover{ background:#ffffff0d; box-shadow:none; border-color:var(--fg) }

/* ---------- grain + cursor + progress ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:9999; box-shadow:0 0 12px var(--accent) }

.cursor{ position:fixed; top:0; left:0; z-index:9997; pointer-events:none; mix-blend-mode:difference; display:none }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block } }
.cursor__dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; transform:translate(-50%,-50%) }
.cursor__ring{ position:absolute; width:38px; height:38px; border-radius:50%; border:1px solid #fff; transform:translate(-50%,-50%); transition:width .25s var(--ease),height .25s var(--ease),background .25s }
.cursor.is-hover .cursor__ring{ width:60px; height:60px; background:#ffffff1a }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:28px;
  padding:18px var(--pad); transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:#08080bcc; backdrop-filter:blur(14px); padding-top:12px; padding-bottom:12px; border-color:var(--line) }
.nav__brand{ display:flex; align-items:center; gap:10px }
.a-mark{ width:30px; height:30px; display:block; color:var(--fg) }
.a-mark path{ fill:currentColor }
.a-mark--xl{ width:clamp(84px,15vw,132px); height:clamp(84px,15vw,132px); margin:0 auto; color:var(--fg) }
.nav__links{ display:flex; gap:28px; margin-left:auto }
.nav__links a{ position:relative; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted); white-space:nowrap; padding:4px 0; transition:color .25s }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) }
.nav__links a:hover{ color:var(--fg) }
.nav__links a:hover::after{ transform:scaleX(1) }
.nav .btn{ margin-left:4px }
.lang{ display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid var(--line-2); border-radius:100px; padding:6px 12px; cursor:pointer; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; color:var(--muted); transition:border-color .3s }
.lang:hover{ border-color:var(--fg) }
.lang i{ font-style:normal; opacity:.4 }
.lang [data-lang-btn]{ transition:color .25s }
.lang [data-lang-btn].on{ color:var(--accent) }
.lang--menu{ margin-top:24px; font-size:14px; padding:10px 18px }
.nav__burger{ display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding:6px; margin-left:0 }
.nav__burger span{ width:26px; height:2px; background:var(--fg); transition:.3s var(--ease) }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg) }

.menu{
  position:fixed; inset:0; z-index:899; background:var(--bg); display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:8px; padding:0 var(--pad);
  transform:translateY(-100%); transition:transform .55s var(--ease); pointer-events:none;
}
.menu.open{ transform:translateY(0); pointer-events:auto }
.menu a{ font-family:var(--ff-display); font-weight:600; font-size:clamp(34px,9vw,64px); letter-spacing:-.03em; padding:6px 0; color:var(--fg) }
.menu a.btn{ font-family:var(--ff-mono); font-size:14px; margin-top:20px }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:120px var(--pad) 80px }
.hero__flag{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:1 }
.hero__grid{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 48%, rgba(11,10,15,.86) 0%, rgba(11,10,15,.52) 100%),
    linear-gradient(0deg, rgba(11,10,15,.9) 0%, rgba(11,10,15,0) 40%),
    linear-gradient(180deg, rgba(11,10,15,.78) 0%, rgba(11,10,15,0) 24%); }
.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100% }
.hero__eyebrow{ margin-bottom:30px }

.hero__title{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(34px,6.4vw,92px); line-height:.96; letter-spacing:-.03em;
  text-transform:none; margin-bottom:30px;
}
.hero__title .line{ display:block; overflow:hidden }
.hero__title .w{ display:inline-block; will-change:transform }
.hero__title .accent{ color:var(--accent); font-style:italic; letter-spacing:-.05em }

.hero__sub{ max-width:620px; font-size:clamp(16px,1.35vw,20px); color:var(--muted); line-height:1.55; margin-bottom:40px }
.hero__sub b, .hero__sub strong{ color:var(--fg) }

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px }

.hero__meta{ display:flex; flex-wrap:wrap; gap:32px; font-family:var(--ff-mono); font-size:12.5px; color:var(--muted); letter-spacing:.02em }
.hero__meta b{ color:var(--fg); font-weight:700; margin-right:6px }

.hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:10px; letter-spacing:.3em; color:var(--muted-2) }
.hero__scroll i{ width:1px; height:44px; background:linear-gradient(var(--accent),transparent); position:relative; overflow:hidden }
.hero__scroll i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--accent); animation:scrolldrop 1.8s var(--ease) infinite }
@keyframes scrolldrop{ 0%{top:-50%}100%{top:100%} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ border-block:1px solid var(--accent); background:var(--accent); overflow:hidden; padding:22px 0 }
.marquee__track{ display:flex; align-items:center; gap:34px; width:max-content; will-change:transform; animation:marq 26s linear infinite }
.marquee__track span{ font-family:var(--ff-display); font-weight:700; font-size:clamp(20px,3vw,40px); letter-spacing:-.02em; color:var(--accent-ink); text-transform:uppercase }
.marquee__track i{ color:var(--accent-ink); font-style:normal; font-size:16px }
@keyframes marq{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ max-width:var(--maxw); margin:0 auto; padding:clamp(90px,16vh,190px) var(--pad); text-align:center }
.manifesto__big{
  font-family:var(--ff-display); font-weight:600; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(24px,3.6vw,48px); margin:34px auto 44px; max-width:20ch; overflow-wrap:break-word;
}
.manifesto__big span{ display:block }
.manifesto>.eyebrow{ display:flex; width:100%; justify-content:center }
.manifesto__big em{ color:var(--accent) }
.manifesto__foot{ display:flex; justify-content:center }
.manifesto__foot p{ max-width:520px; color:var(--muted); font-size:clamp(15px,1.3vw,19px) }

/* ============================================================
   shared section title
   ============================================================ */
.section-title{ font-family:var(--ff-display); font-weight:600; letter-spacing:-.03em; line-height:1.04; font-size:clamp(30px,4.8vw,64px); margin-top:22px; overflow-wrap:break-word }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vh,120px) var(--pad) }
.services__head{ margin-bottom:60px; max-width:920px }
.services__note{ margin-top:24px; color:var(--muted); font-size:clamp(15px,1.2vw,19px); max-width:46ch }
.services__list{ border-top:1px solid var(--line) }
.svc{
  display:grid; grid-template-columns:80px 1fr 1.55fr; gap:clamp(20px,3vw,44px); align-items:start;
  padding:clamp(32px,4vw,58px) 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .5s var(--ease);
}
.svc::before{ content:""; position:absolute; left:-40px; right:-40px; top:0; bottom:0; background:var(--card); opacity:0; z-index:-1; transition:opacity .4s; border-radius:4px }
.svc:hover{ padding-left:22px }
.svc:hover::before{ opacity:.55 }
.svc__no{ font-family:var(--ff-mono); font-size:13px; color:var(--accent); padding-top:10px; letter-spacing:.1em }
.svc__title{ font-family:var(--ff-display); font-weight:600; font-size:clamp(26px,3.6vw,50px); letter-spacing:-.025em; line-height:1.02 }
.svc__obj{ margin-top:14px; font-family:var(--ff-mono); font-size:12.5px; line-height:1.5; color:var(--accent); max-width:34ch; opacity:.9 }
.svc__desc{ color:var(--muted); font-size:clamp(15px,1.15vw,18px); line-height:1.6; max-width:56ch }
.svc__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.svc__tags li{ font-family:var(--ff-mono); font-size:11px; color:var(--muted); border:1px solid var(--line-2); padding:5px 11px; border-radius:100px; letter-spacing:.03em }

/* ============================================================
   STATS
   ============================================================ */
.stats{
  position:relative; overflow:hidden;
  max-width:var(--maxw); margin:0 auto; padding:clamp(70px,9vh,120px) var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px);
}
.stats--3{ grid-template-columns:repeat(3,1fr) }
.stats .cash{ position:absolute; inset:0; z-index:0; pointer-events:none }
.stat{ position:relative; z-index:1; padding-left:22px }
.stat::before{ content:""; position:absolute; left:0; top:6px; bottom:8px; width:3px; background:var(--accent) }
.stat__num{ font-family:var(--ff-display); font-weight:700; font-size:clamp(46px,6.4vw,96px); letter-spacing:-.05em; line-height:.92; color:var(--fg) }
.stats--3 .stat:first-child .stat__num{ color:var(--accent) }
.stat p{ color:var(--muted); font-size:13.5px; margin-top:16px; max-width:22ch; line-height:1.45 }

/* ============================================================
   REGIONS / MARKETS
   ============================================================ */
.regions{ border-block:1px solid var(--line); background:
    radial-gradient(90% 120% at 50% 120%, #1a1a1a 0%, transparent 55%), var(--bg-2);
  padding:clamp(60px,9vh,110px) var(--pad); overflow:hidden }
.regions__inner{ max-width:var(--maxw); margin:0 auto; text-align:center }
.regions__list{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 clamp(20px,3vw,50px);
  margin:34px 0 26px;
}
.regions__list span{
  position:relative; font-family:var(--ff-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(26px,5.2vw,68px); line-height:1.15;
  color:transparent; -webkit-text-stroke:1px var(--muted-2);
  transition:color .35s var(--ease), -webkit-text-stroke-color .35s var(--ease);
}
.regions__list span:not(:last-child)::after{ content:"·"; position:absolute; right:calc(-1 * clamp(12px,1.6vw,26px)); color:var(--accent); -webkit-text-stroke:0; font-size:.4em; top:50%; transform:translateY(-40%) }
.regions__list span:hover{ color:var(--fg); -webkit-text-stroke-color:transparent }
@media (hover:none){ .regions__list span:nth-child(2n){ color:var(--fg); -webkit-text-stroke-color:transparent } }
.regions__note{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }

/* ============================================================
   METHOD
   ============================================================ */
.method{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vh,120px) var(--pad) }
.method__head{ margin-bottom:56px }
.method__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.step{ border-top:2px solid var(--line-2); padding-top:22px; position:relative }
.step::before{ content:""; position:absolute; top:-2px; left:0; width:0; height:2px; background:var(--accent); transition:width .8s var(--ease) }
.step.in::before{ width:100% }
.step__no{ font-family:var(--ff-mono); font-size:12px; color:var(--accent); letter-spacing:.1em }
.step h3{ font-family:var(--ff-display); font-weight:600; font-size:clamp(22px,2.4vw,32px); letter-spacing:-.02em; margin:14px 0 12px }
.step p{ color:var(--muted); font-size:15px }

/* ============================================================
   WORK / CASES
   ============================================================ */
.work{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vh,120px) var(--pad) }
.work__head{ margin-bottom:48px }
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.case{ display:block; group:case }
.case__media{
  position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; border:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 20% 10%, #232323 0%, transparent 55%),
    radial-gradient(120% 120% at 90% 90%, #161616 0%, transparent 50%),
    linear-gradient(140deg,#141414,#080808);
  display:flex; align-items:center; justify-content:center; transition:transform .5s var(--ease), border-color .4s;
}
.case:hover .case__media{ border-color:var(--accent) }
.case__ph{ font-family:var(--ff-display); font-weight:700; font-size:clamp(40px,6vw,72px); letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1px var(--line-2); transition:-webkit-text-stroke-color .4s }
.case:hover .case__ph{ -webkit-text-stroke-color:var(--accent) }
.case__body{ padding:20px 4px 0 }
.case__tag{ font-family:var(--ff-mono); font-size:11px; color:var(--accent); letter-spacing:.06em; text-transform:uppercase }
.case__body h3{ font-family:var(--ff-display); font-weight:600; font-size:clamp(20px,2vw,27px); letter-spacing:-.02em; margin:10px 0 8px }
.case__body p{ color:var(--muted); font-size:14.5px; margin-bottom:14px }
.case__link{ font-family:var(--ff-mono); font-size:12px; color:var(--fg); letter-spacing:.03em; transition:color .3s }
.case:hover .case__link{ color:var(--accent) }

/* ============================================================
   QUOTE
   ============================================================ */
.quote{ max-width:1000px; margin:0 auto; padding:clamp(60px,9vh,120px) var(--pad); text-align:center }
.quote__body p{ font-family:var(--ff-display); font-weight:500; font-size:clamp(26px,4.2vw,54px); line-height:1.15; letter-spacing:-.02em }
.quote__body footer{ font-family:var(--ff-mono); font-size:13px; color:var(--muted); margin-top:28px; letter-spacing:.03em }
.quote__body footer b{ color:var(--fg) }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ position:relative; padding:clamp(80px,12vh,160px) var(--pad); border-top:1px solid var(--line) }
.contact__inner{ max-width:760px; margin:0 auto; text-align:center }
.contact__title{ font-family:var(--ff-display); font-weight:600; font-size:clamp(34px,6vw,84px); letter-spacing:-.035em; line-height:1; margin:22px 0 18px }
.contact__sub{ color:var(--muted); font-size:clamp(15px,1.3vw,19px); max-width:52ch; margin:0 auto 44px }

.form{ text-align:left; max-width:600px; margin:0 auto }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.field{ margin-bottom:16px; display:flex; flex-direction:column }
.field label{ font-family:var(--ff-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:9px }
.field input,.field textarea{
  background:#ffffff08; border:1px solid var(--line-2); border-radius:3px; color:var(--fg);
  font-family:var(--ff-body); font-size:16px; padding:15px 16px; transition:border-color .3s, background .3s; resize:vertical;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); background:#ffffff0f }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.form__micro{ font-family:var(--ff-mono); font-size:11px; color:var(--muted-2); text-align:center; margin-top:14px; letter-spacing:.03em }
.form__ok{ text-align:center; margin-top:16px; color:var(--accent); font-family:var(--ff-mono); font-size:13px }

.contact__or{ margin-top:40px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2) }
.contact__direct{ margin-top:18px; display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; font-family:var(--ff-mono); font-size:13px; color:var(--muted) }
.contact__direct a{ color:var(--fg); transition:color .3s }
.contact__direct a:not(.contact__wa){ border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color .3s,color .3s }
.contact__direct a:not(.contact__wa):hover{ color:var(--accent); border-color:var(--accent) }
.contact__sep{ color:var(--muted-2) }
.contact__wa{ display:inline-flex; align-items:center; gap:8px; background:#ffffff0d; border:1px solid var(--line-2); color:var(--fg) !important; padding:10px 16px; border-radius:100px; transition:background .3s, border-color .3s }
.contact__wa:hover{ background:#ffffff14; border-color:var(--fg) }

/* floating whatsapp */
.wa-float{
  position:fixed; right:22px; bottom:26px; z-index:850; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--accent-ink);
  box-shadow:0 12px 34px -8px rgba(var(--accent-rgb),.5); transition:transform .3s var(--ease), box-shadow .3s;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 44px -8px rgba(var(--accent-rgb),.7) }
.wa-float::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--accent); animation:waPulse 2.4s var(--ease) infinite }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.5); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .wa-float::after{ animation:none } }
.actionbar__btn--wa{ background:var(--fg); color:var(--accent-ink); border-color:var(--fg) }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); padding:60px var(--pad) 40px; overflow:hidden }
.foot__big{ font-family:var(--ff-display); font-weight:700; font-size:clamp(90px,26vw,360px); line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px var(--line-2); text-align:center; margin-bottom:20px; user-select:none }
.foot__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:12px; color:var(--muted); letter-spacing:.03em }
.foot__links{ display:flex; gap:22px }
.foot__links a:hover{ color:var(--accent) }
.foot__made{ color:var(--muted-2) }

/* ============================================================
   mobile action bar
   ============================================================ */
.actionbar{ position:fixed; left:0; right:0; bottom:0; z-index:800; display:none; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#08080bdd; backdrop-filter:blur(14px); border-top:1px solid var(--line) }
.actionbar__btn{ flex:1; text-align:center; font-family:var(--ff-mono); font-size:13px; letter-spacing:.04em; padding:14px; border-radius:3px; border:1px solid var(--line-2); color:var(--fg) }
.actionbar__btn--primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }

/* ============================================================
   REVEAL (base motion, no-JS safe)
   ============================================================ */
.reveal,.reveal-line{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in,.reveal-line.in{ opacity:1; transform:none }
.no-js .reveal,.no-js .reveal-line{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-line{ opacity:1 !important; transform:none !important; transition:none }
  .hero__title .w{ transform:none !important }
}

/* ============================================================
   LANGUAGE SPLASH
   ============================================================ */
.lang-chosen .splash{ display:none }
.splash{
  position:fixed; inset:0; z-index:10000; background:#050506;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
.splash.gone{ opacity:0; transform:scale(1.04); pointer-events:none }
.splash__grid{ position:absolute; inset:0; opacity:.6;
  background-image:radial-gradient(rgba(244,241,234,.14) 1.4px, transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 75%);
}
.splash__inner{ position:relative; text-align:center; padding:24px }
.splash__mark{ font-family:var(--ff-display); font-weight:700; font-size:clamp(60px,13vw,150px); letter-spacing:-.05em; line-height:1; display:block;
  background:linear-gradient(120deg,#fff,var(--accent) 120%); -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:splashIn .9s var(--ease) both }
.splash__q{ font-family:var(--ff-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:20px 0 34px; animation:splashIn .9s .1s var(--ease) both }
.splash__q2{ color:var(--muted-2) }
.splash__opts{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation:splashIn .9s .2s var(--ease) both }
.splash__opts button{
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  background:#0e0e13; border:1px solid var(--line-2); border-radius:6px; padding:22px 40px; color:var(--fg);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.splash__opts button b{ font-family:var(--ff-display); font-weight:700; font-size:30px; letter-spacing:-.02em }
.splash__opts button span{ font-family:var(--ff-mono); font-size:12px; color:var(--muted); letter-spacing:.04em }
.splash__opts button:hover{ border-color:var(--accent); background:#171717; transform:translateY(-4px) }
.splash__opts button:hover b{ color:var(--accent) }
@keyframes splashIn{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .splash__mark,.splash__q,.splash__opts{ animation:none } }

/* ============================================================
   CLIENTS CAROUSEL
   ============================================================ */
.clients{ padding:clamp(70px,10vh,120px) 0; overflow:hidden; position:relative }
.clients__head{ max-width:var(--maxw); margin:0 auto 40px; padding:0 var(--pad) }
.clients__note{ max-width:58ch; margin:20px auto 0; color:var(--muted); font-size:clamp(15px,1.25vw,19px); line-height:1.5 }
/* ICP grid (who we serve) */
.icp{ max-width:var(--maxw); margin:0 auto clamp(56px,8vh,90px); padding:0 var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px); text-align:left }
.icp__item{ position:relative; border-top:2px solid var(--line-2); padding-top:22px }
.icp__item::before{ content:""; position:absolute; top:-2px; left:0; width:38px; height:2px; background:var(--accent) }
.icp__no{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; color:var(--accent) }
.icp__item h3{ font-family:var(--ff-display); font-weight:600; font-size:clamp(21px,2vw,30px); letter-spacing:-.02em; margin:12px 0 14px; line-height:1.05 }
.icp__item p{ color:var(--muted); font-size:14.5px; line-height:1.55 }

/* ============================================================
   ENEMIES / WHAT WE FIGHT (dynamic strike on scroll)
   ============================================================ */
.foes{ position:relative; overflow:hidden; max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vh,120px) var(--pad) }
.foes .funnel{ position:absolute; inset:0; z-index:0; pointer-events:none }
.foes__head,.foes__list{ position:relative; z-index:1 }
.foes__head{ text-align:center; margin-bottom:48px }
.foes__list{ border-top:1px solid var(--line) }
.foe{ display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(16px,3vw,48px); align-items:start; padding:clamp(26px,3.4vw,44px) 0; border-bottom:1px solid var(--line) }
.foe__name{ position:relative; display:inline-block; font-family:var(--ff-display); font-weight:600; font-size:clamp(24px,3.2vw,44px); letter-spacing:-.025em; line-height:1.03; color:var(--fg) }
.foe__name::after{ content:""; position:absolute; left:-3px; right:-3px; top:52%; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) .15s }
.foe.in .foe__name::after{ transform:scaleX(1) }
.foe__desc{ color:var(--muted); font-size:clamp(15px,1.15vw,18px); line-height:1.55 }
.foe__fix{ margin-top:14px; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.02em; color:var(--muted-2) }
.foe__fix::before{ content:"→ "; color:var(--accent) }
.foe__fix b{ color:var(--accent); font-weight:700 }
@media (prefers-reduced-motion:reduce){ .foe__name::after{ transition:none; transform:scaleX(1) } }
.clients__rows{ display:flex; flex-direction:column; gap:16px }
.clients__row{ display:flex; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.clients__track{ display:flex; gap:14px; width:max-content; will-change:transform; animation:cl-scroll 60s linear infinite }
.clients__row--rev .clients__track{ animation-direction:reverse; animation-duration:72s }
.clients__row:hover .clients__track{ animation-play-state:paused }
@keyframes cl-scroll{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .clients__track{ animation:none; flex-wrap:wrap; justify-content:center } }
.cl{ display:inline-flex; align-items:center; gap:12px; white-space:nowrap; flex:0 0 auto;
  border:1px solid var(--line-2); border-radius:100px; padding:12px 20px; background:#0e0e1366; transition:border-color .3s, background .3s }
.cl:hover{ border-color:var(--accent); background:#171717 }
.cl b{ font-family:var(--ff-display); font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--fg) }
.cl em{ font-style:normal; font-family:var(--ff-mono); font-size:11.5px; color:var(--muted); letter-spacing:.02em }
.cl i{ font-style:normal; font-size:16px; line-height:1 }
.clients__disc{ text-align:center; margin-top:34px; font-family:var(--ff-mono); font-size:11px; color:var(--muted-2); letter-spacing:.06em; padding:0 var(--pad) }

/* ============================================================
   DISRUPTIVE BREAKS  (ghost numbers, skew, diagonals)
   ============================================================ */
.ghost-num{ position:absolute; top:-2vw; left:0; right:0; width:100%; text-align:center; font-family:var(--ff-display); font-weight:700;
  font-size:clamp(140px,26vw,380px); line-height:.8; letter-spacing:-.06em; color:transparent;
  -webkit-text-stroke:1px #ffffff0a; z-index:0; pointer-events:none; user-select:none }
.manifesto{ position:relative; overflow:hidden }
.manifesto > *{ position:relative; z-index:1 }

/* skew the marquee for a broken feel */
.marquee{ transform:rotate(-2.4deg) scale(1.04); transform-origin:center }
.marquee__track span{ font-size:clamp(24px,3.6vw,46px) }

/* diagonal cut into the contact section */
.contact{ clip-path:polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); margin-top:-2vw }

/* centered section heads */
.services__head,.method__head,.vs__head,.work__head,.tstm__head,.clients__head{ text-align:center; margin-left:auto; margin-right:auto }
.services__note{ margin-left:auto; margin-right:auto }
.clients__head .section-title{ padding-left:0 }

@media (prefers-reduced-motion:reduce){ .marquee{ transform:rotate(-2.4deg) } }

/* ============================================================
   INTERACTIVE FLYWHEEL
   ============================================================ */
.wheel{ position:relative; width:min(520px,80vw); aspect-ratio:1; margin:70px auto 46px; cursor:grab; touch-action:pan-y }
.wheel--grab{ cursor:grabbing }
.wheel__svg{ width:100%; height:100%; overflow:visible; display:block }
.wheel__rim{ fill:none; stroke:var(--line-2); stroke-width:1.2 }
.wheel__rim--2{ stroke:var(--line) }
.wheel__rim--3{ stroke:var(--line-2) }
.wheel__spoke{ stroke:var(--line); stroke-width:1 }
.wheel__spoke--d{ stroke:rgba(244,241,234,.06) }
.wheel__tick{ stroke:var(--line-2); stroke-width:1 }
.wheel__tick--l{ stroke:var(--muted); stroke-width:1.4 }
.wheel__orb{ fill:var(--accent) }
.wheel__node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--bg); border:1px solid var(--line-2); padding:11px 16px; cursor:pointer; z-index:2;
  transition:border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s }
/* nodes sit on the rim (r = 158/400 = 39.5% from centre) so they align with the fixed dots */
.wheel__node--t{ left:50%; top:10.5% }
.wheel__node--r{ left:89.5%; top:50% }
.wheel__node--b{ left:50%; top:89.5% }
.wheel__node--l{ left:10.5%; top:50% }
.wheel__n{ font-family:var(--ff-mono); font-size:11px; color:var(--accent); letter-spacing:.1em }
.wheel__l{ font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--fg); white-space:nowrap }
.wheel__node:hover,.wheel__node.on{ border-color:var(--accent); background:#160f07; transform:translate(-50%,-50%) scale(1.09); box-shadow:0 0 34px -6px rgba(var(--accent-rgb),.5) }
.wheel__hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:32%; aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  border:1px solid var(--line-2); background:radial-gradient(circle,#17130d,var(--bg)); transition:border-color .3s }
.wheel__hub .a-mark{ width:38%; height:auto; color:var(--fg) }
.wheel__hublabel{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.05em; color:var(--accent); min-height:13px; padding:0 8px }
.wheel--active .wheel__hub{ border-color:var(--accent) }
.wheel__cap{ text-align:center; max-width:46ch; margin:0 auto 26px; color:var(--muted); font-size:clamp(14px,1.15vw,17px) }
.svc--flash{ animation:svcflash 1.3s var(--ease) }
@keyframes svcflash{ 0%,100%{ background:transparent } 30%{ background:rgba(var(--accent-rgb),.09) } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tstm{ position:relative; overflow:hidden; max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vh,120px) var(--pad) }
.tstm::before{ content:"\201C"; position:absolute; z-index:0; pointer-events:none; top:-8%; left:1%;
  font-family:var(--ff-display); font-weight:700; font-size:min(58vw,680px); line-height:1; color:var(--fg); opacity:.03 }
.tstm__head,.tstm__grid{ position:relative; z-index:1 }
.tstm__head{ margin-bottom:48px }
.tstm__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px }
.tstm__card{ position:relative; background:transparent; border:none; border-top:1px solid var(--line-2); padding:24px 0 0; grid-column:span 2 }
.tstm__card p{ font-family:var(--ff-display); font-weight:500; font-size:clamp(17px,1.4vw,21px); line-height:1.35; letter-spacing:-.01em; color:var(--fg) }
.tstm__card footer{ margin-top:20px; font-family:var(--ff-mono); font-size:12px; color:var(--muted); letter-spacing:.02em }
.tstm__card footer b{ color:var(--accent); font-weight:700 }
.tstm__card--big{ grid-column:span 6; display:flex; flex-direction:column; justify-content:center; border-top-width:2px }
.tstm__card--big p{ font-size:clamp(22px,2.8vw,40px); line-height:1.22; letter-spacing:-.02em }
.tstm__quote{ font-family:var(--ff-display); font-weight:700; font-size:70px; line-height:.5; color:var(--accent); display:block; margin-bottom:14px }

/* ============================================================
   WHY AXLE / VS
   ============================================================ */
.vs{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vh,120px) var(--pad) }
.vs__head{ margin-bottom:48px }
.vs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.vs__card{ background:transparent; border:none; border-top:2px solid var(--line-2); padding:24px clamp(0px,1vw,12px) 0 0 }
.vs__them{ color:var(--muted); font-size:clamp(15px,1.2vw,18px); line-height:1.5; padding-left:28px; position:relative }
.vs__them::before{ content:"✕"; position:absolute; left:0; top:1px; color:var(--muted-2); font-size:15px }
.vs__us{ margin-top:20px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--ff-display); font-weight:600;
  font-size:clamp(17px,1.5vw,22px); line-height:1.25; letter-spacing:-.01em; color:var(--fg); padding-left:28px; position:relative }
.vs__us::before{ content:"→"; position:absolute; left:0; top:22px; color:var(--accent); font-weight:700 }

/* ============================================================
   AXLE "A" WATERMARK (transparent, background of some sections)
   ============================================================ */
.a-bg{ position:relative; overflow:hidden }
.a-bg::before{ content:""; position:absolute; z-index:0; pointer-events:none; left:50%; top:50%; transform:translate(-50%,-50%);
  height:92%; aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2096%20L400%20410%20L112%20410%20Z%20M256%20250%20L320%20410%20L192%20410%20Z'%20fill='%23F4F1EA'%20fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.05 }
.a-bg--big::before{ height:100% }
.a-bg > *{ position:relative; z-index:1 }

/* giant dollar-bill watermark for some blocks */
.bill-bg{ position:relative; overflow:hidden }
.bill-bg::before{ content:""; position:absolute; z-index:0; pointer-events:none; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-5deg); width:min(1000px,96vw); aspect-ratio:1843/781; background:url("bill-100.jpg") no-repeat center/contain; opacity:.12 }
.bill-bg > *{ position:relative; z-index:1 }

/* ============================================================
   THEME TOGGLE (temporary preview control) + METAL THEME
   ============================================================ */
.palette{ position:fixed; left:16px; bottom:20px; z-index:860; display:flex; flex-wrap:wrap; gap:8px; max-width:118px;
  padding:9px; background:#0e0e13e0; backdrop-filter:blur(10px); border:1px solid var(--line-2); border-radius:14px }
.palette button{ width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; background:var(--sw); transition:transform .18s, border-color .18s }
.palette button:hover{ transform:scale(1.15) }
.palette button.on{ border-color:#fff; transform:scale(1.15) }

/* accent colour themes (switchable via the palette) */
html.theme-orange{ --accent:#FF4A00; --accent-rgb:255,74,0; --accent-ink:#0B0A0F }
html.theme-red{ --accent:#FF3B30; --accent-rgb:255,59,48; --accent-ink:#0B0A0F }
html.theme-lime{ --accent:#C6FF3A; --accent-rgb:198,255,58; --accent-ink:#0B0A0F }
html.theme-green{ --accent:#12C46A; --accent-rgb:18,196,106; --accent-ink:#04210f }
html.theme-cyan{ --accent:#12E3C6; --accent-rgb:18,227,198; --accent-ink:#04211d }
html.theme-blue{ --accent:#3B6BFF; --accent-rgb:59,107,255; --accent-ink:#0B0A0F }
html.theme-violet{ --accent:#7C5CFF; --accent-rgb:124,92,255; --accent-ink:#0B0A0F }
html.theme-pink{ --accent:#FF2E88; --accent-rgb:255,46,136; --accent-ink:#0B0A0F }
html.theme-gold{ --accent:#E7B24C; --accent-rgb:231,178,76; --accent-ink:#0B0A0F }
html.theme-metal{ --accent:#C9CFD6; --accent-rgb:201,207,214; --accent-ink:#0B0A0F }
/* pure black & white: accent = white, key words get an inverted marker highlight */
html.theme-bw{ --accent:#FFFFFF; --accent-rgb:255,255,255; --accent-ink:#0B0A0F }
/* B&W: draw the eye with an outlined (hollow) keyword, no highlight box */
html.theme-bw .accent, html.theme-bw em{ color:transparent; -webkit-text-stroke:1.4px #fff; text-shadow:none; background:none; padding:0 }
html.theme-bw .hero__title .accent{ -webkit-text-stroke:2px #fff }
html.theme-metal .accent{ background:linear-gradient(180deg,#f4f6f8,#c3c9d1 46%,#868d96);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 26px rgba(201,207,214,.35) }
html.theme-metal em{ color:#dfe3e8 }
html.theme-metal .marquee{ background:linear-gradient(180deg,#e9ecef,#b3b9c1); border-color:#c9cfd6 }
html.theme-metal .marquee__track span,html.theme-metal .marquee__track i{ color:#0B0A0F }
html.theme-metal .btn{ background:linear-gradient(180deg,#eef1f4,#c3c9d1) }
html.theme-metal .btn:hover{ box-shadow:0 10px 40px -8px rgba(201,207,214,.45) }
html.theme-metal .wa-float{ background:linear-gradient(180deg,#eef1f4,#c3c9d1); box-shadow:0 12px 34px -8px rgba(201,207,214,.5) }
html.theme-metal .wa-float:hover{ box-shadow:0 18px 44px -8px rgba(201,207,214,.7) }
html.theme-metal .wa-float::after{ border-color:#c9cfd6 }
html.theme-metal .actionbar__btn--wa{ background:linear-gradient(180deg,#eef1f4,#c3c9d1); border-color:#c9cfd6 }
html.theme-metal .wheel__node:hover,html.theme-metal .wheel__node.on{ box-shadow:0 0 34px -6px rgba(201,207,214,.5) }
html.theme-metal .btn:hover{ box-shadow:0 10px 40px -8px rgba(201,207,214,.45) }

/* ============================================================
   CENTERED LAYOUT (everything centred)
   ============================================================ */
.hero__inner{ text-align:center }
.hero__sub{ margin-left:auto; margin-right:auto }
.hero__cta{ justify-content:center }
.hero__meta{ justify-content:center }

.svc{ grid-template-columns:1fr; text-align:center; justify-items:center; row-gap:8px }
.svc:hover{ padding-left:0 }
.svc__obj,.svc__desc{ margin-left:auto; margin-right:auto }
.svc__tags{ justify-content:center }

.stat{ padding-left:0; padding-top:22px; text-align:center }
.stat::before{ top:0; bottom:auto; left:50%; transform:translateX(-50%); width:36px; height:3px }

.foe{ grid-template-columns:1fr; text-align:center; justify-items:center; row-gap:12px }

.icp__item{ text-align:center }
.icp__item::before{ left:50%; transform:translateX(-50%) }

.step{ text-align:center }

.vs__card{ text-align:center }
.vs__them{ padding-left:0 } .vs__them::before{ position:static; content:"✕  " }
.vs__us{ padding-left:0 } .vs__us::before{ position:static; content:"→  " }

.tstm__card{ text-align:center } .tstm__card--big{ align-items:center }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .svc{ grid-template-columns:56px 1fr; row-gap:20px }
  .svc__main,.svc__col{ grid-column:2 }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:44px }
  .stats--3{ grid-template-columns:repeat(3,1fr) }
  .stats .stat{ transform:none !important }
  .method__steps{ grid-template-columns:repeat(2,1fr) }
  .icp{ grid-template-columns:repeat(2,1fr) }
  .cases{ grid-template-columns:1fr 1fr }
  .nav__links{ gap:20px }
}
@media (max-width:760px){
  .nav__links{ display:none }
  .nav .btn--sm{ display:none }
  #lang{ display:none }
  .nav__burger{ display:flex; margin-left:auto }
  .actionbar{ display:flex }
  .wa-float{ bottom:calc(72px + env(safe-area-inset-bottom)); right:16px; width:50px; height:50px }
  .palette{ bottom:calc(74px + env(safe-area-inset-bottom)); max-width:96px }
  .hero{ padding-bottom:120px }
  .hero__meta{ gap:18px 26px }
  .manifesto__foot{ justify-content:flex-start }
  .cases{ grid-template-columns:1fr }
  .form__row{ grid-template-columns:1fr }
  .foot__row{ justify-content:flex-start; gap:12px }
  body{ padding-bottom:0 }
  .tstm__grid{ grid-template-columns:1fr }
  .tstm__card,.tstm__card--big{ grid-column:auto }
  .stats--3{ grid-template-columns:1fr }
  .vs__grid{ grid-template-columns:1fr }
  .icp{ grid-template-columns:1fr }
  .foe{ grid-template-columns:1fr; row-gap:10px }
  /* flywheel: keep it inside the screen on mobile — pull side nodes in, let labels wrap */
  .wheel{ width:min(400px,84vw); margin:34px auto 40px }
  .wheel__node{ padding:6px 9px; gap:1px }
  .wheel__node--r{ left:83% }
  .wheel__node--l{ left:17% }
  .wheel__l{ font-size:11px; white-space:normal; max-width:7.5em; text-align:center; line-height:1.12 }
  .wheel__n{ font-size:9px }
  .wheel__hublabel{ font-size:9px }
  .wheel__cap{ font-size:14px }
  /* a touch more breathing room + no oversized ghost numbers crowding text */
  .manifesto__big{ margin:24px auto 32px }
  .ghost-num{ font-size:clamp(110px,34vw,220px) }
  .foot__big{ font-size:clamp(64px,22vw,120px) }
  .tstm::before{ font-size:80vw; top:-4% }
}
@media (max-width:420px){
  .stats{ grid-template-columns:1fr }
  .method__steps{ grid-template-columns:1fr }
  .svc{ grid-template-columns:1fr; row-gap:14px }
  .svc__main,.svc__col{ grid-column:auto }
  .svc__no{ padding-top:0 }
  .wheel{ width:min(340px,88vw) }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center }
}

/* ============================================================
   TOUCH / MOBILE PERFORMANCE — remove expensive compositing
   (grain overlay, backdrop blurs). These repaint on every scroll
   frame and are the main cause of jank on phones.
   ============================================================ */
@media (hover:none){
  .grain{ display:none }
  .nav.scrolled{ background:#08080bf5; backdrop-filter:none; -webkit-backdrop-filter:none }
  .actionbar{ background:#0a0a0ff5; backdrop-filter:none; -webkit-backdrop-filter:none }
  .palette{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#0e0e13f2 }
  .wa-float{ box-shadow:0 8px 22px -8px rgba(0,0,0,.6) }
  .btn:hover{ box-shadow:none }
  .hero__flag{ opacity:1 }
}