/* =========================================================
   INSTAL — design tokens aligned with instal.com
   Bricolage Grotesque + DM Sans · black / white · #00ff00 green · pill buttons
   ========================================================= */
:root{
  /* brand */
  --green:#00ff00;
  --green-2:#02d52e;
  --green-grad:linear-gradient(256deg, #00ff00, #02d52e);
  --green-soft:rgba(0,255,0,0.12);

  /* neutrals */
  --black:#000000;
  --ink:#0a0b11;
  --navy:#15143e;
  --white:#ffffff;
  --cloud:#f4f5f9;
  --slate:#acb3c2;
  --gray:#55575f;

  /* contextual (light by default, flipped in dark sections) */
  --bg:var(--white);
  --fg:var(--black);
  --fg-2:var(--gray);
  --line:rgba(0,0,0,0.10);
  --line-strong:rgba(0,0,0,0.22);
  --card:var(--cloud);

  --font-head:'Bricolage Grotesque', sans-serif;
  --font-body:'DM Sans', sans-serif;
  --head-weight:800;
  --head-tracking:-0.03em;

  --radius:12px;
  --pill:32px;
  --shadow-btn:0 5px 10px rgba(0,0,0,0.25);
  --maxw:1180px;
  --nav-top:14px;
  --nav-bar:64px;
  --nav-h:calc(var(--nav-bar) + var(--nav-top));
  --ease:cubic-bezier(.16,.8,.28,1);
}

/* dark contexts */
.hero,
.pillar--lead,
.band--stats,
.footer,
.legal-hero{
  --bg:var(--ink);
  --fg:var(--white);
  --fg-2:var(--slate);
  --line:rgba(255,255,255,0.12);
  --line-strong:rgba(255,255,255,0.28);
  --card:rgba(255,255,255,0.04);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.disp{
  font-family:var(--font-head);
  font-weight:var(--head-weight);
  letter-spacing:var(--head-tracking);
  line-height:1.06;
  margin:0;
  color:var(--fg);
}

.mono{font-family:var(--font-body);}
/* display elements share the heading face */
.num, .finale-marquee__track, .price-tag__value strong, .contact-form__title, .drive-cell .tag, .fact-card .num, .stat-cell .num{font-family:var(--font-head);}

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

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--green); color:var(--black); padding:10px 16px; border-radius:var(--pill); font-weight:800;
}
.skip-link:focus{left:16px; top:16px;}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:max(var(--nav-top), env(safe-area-inset-top)) 16px 0;
  pointer-events:none;

  /* light glass (over light sections) */
  --nav-fg:var(--black);
  --nav-glass:rgba(255,255,255,0.62);
  --nav-edge:rgba(255,255,255,0.75);
  --nav-ring:rgba(0,0,0,0.06);
  --nav-shadow:0 10px 30px rgba(0,0,0,0.10);
  --nav-menu:rgba(255,255,255,0.96);
}
/* dark glass (over dark sections), toggled by nav.js */
.nav.nav--dark{
  --nav-fg:var(--white);
  --nav-glass:rgba(12,13,19,0.52);
  --nav-edge:rgba(255,255,255,0.14);
  --nav-ring:rgba(0,0,0,0.25);
  --nav-shadow:0 10px 30px rgba(0,0,0,0.35);
  --nav-menu:rgba(14,15,21,0.95);
}
.nav-inner{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  height:var(--nav-bar);
  padding:0 10px 0 24px;
  border-radius:999px;
  color:var(--nav-fg);
  isolation:isolate;
  pointer-events:auto;
  transition:color .35s, height .3s var(--ease);
}
/* the glass lives on its own layer, so the dropdown is not trapped inside it */
.nav-inner::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%),
    var(--nav-glass);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
          backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--nav-edge);
  box-shadow:0 0 0 1px var(--nav-ring), var(--nav-shadow), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:background .35s, border-color .35s, box-shadow .35s;
}
.nav.nav--scrolled .nav-inner::before{box-shadow:0 0 0 1px var(--nav-ring), 0 14px 40px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.35);}
.logo-img--light{display:none !important;}
.nav--dark .logo-img--dark{display:none !important;}
.nav--dark .logo-img--light{display:block !important;}
.logo{display:flex; align-items:center;}
.logo-img{height:30px; width:auto; display:block;}

.nav-links{
  display:flex; align-items:center; gap:2px;
  font-size:0.875rem;
}
.nav-link{
  position:relative;
  padding:8px 10px;
  color:var(--nav-fg);
  font-weight:300;
  white-space:nowrap;
  transition:font-weight .2s;
}
.nav-link::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:0;
  height:3px; border-radius:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after{transform:scaleX(1);}
.nav-link.is-active{font-weight:700;}
.nav-link--ext{display:flex; align-items:center; gap:5px;}
.nav-link--ext::before{
  content:"↗";
  order:2;
  font-size:0.75em;
  opacity:0.6;
}
.nav-cta{
  margin-left:10px;
  padding:8px 26px;
  border-radius:var(--pill);
  background:var(--green-grad);
  color:var(--black) !important;
  font-weight:900;
  font-size:0.875rem;
  white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:var(--shadow-btn);}

.nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--nav-edge);
  background:rgba(255,255,255,0.12);
  color:var(--nav-fg);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  display:block;
  width:16px; height:2px;
  background:var(--nav-fg);
  position:relative;
  transition:transform .25s, opacity .25s;
}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- BRAND RING (the "o" from the logo) ---------- */
.brand-ring{
  position:absolute;
  aspect-ratio:40 / 43;
  background:url("instal-ring.svg") center / contain no-repeat;
  pointer-events:none;
  user-select:none;
  z-index:0;
}

section{position:relative; overflow:hidden; z-index:1; background:var(--bg); color:var(--fg);}

/* ---------- HERO ---------- */
.hero{
  padding:calc(var(--nav-h) + 110px) 0 110px;
  /* full screen, measured with browser bars shown (svh) so it never
     resizes while mobile toolbars slide in and out */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  /* same dark as the 3D lattice, so nothing jumps while it loads */
  background:#050608;
}
/* fallback look, only when the lattice can't run (no WebGL or script failed) */
.hero.no-lattice{
  background:
    radial-gradient(60% 70% at 85% 50%, rgba(0,255,0,0.10), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--black) 100%);
}
.brand-ring--hero{display:none;}
.hero.no-lattice .brand-ring--hero{display:block;}
.brand-ring--hero{
  width:min(50vw, 640px);
  right:-6vw; top:50%;
  transform:translateY(-50%) rotate(-12deg);
  opacity:0.9;
}

.hero-inner{position:relative; z-index:2; width:100%;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.8rem;
  font-weight:600;
  color:var(--white);
  background:rgba(255,255,255,0.08);
  padding:7px 16px;
  border-radius:var(--pill);
  margin-bottom:28px;
}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green);}

.hero h1{
  font-size:clamp(2.4rem, 5.4vw, 4.4rem);
  max-width:15ch;
  margin-bottom:26px;
}
.hero h1 em{font-style:normal; color:var(--green);}
.hero p.lead{
  max-width:50ch;
  font-size:1.15rem;
  font-weight:400;
  line-height:1.3;
  letter-spacing:-0.005em;
  color:rgba(255,255,255,0.8);
  text-wrap:pretty;
  margin:0 0 36px;
}
.hero p.lead strong{color:var(--white); font-weight:700;}
@media (max-width: 720px){
  .hero p.lead{font-size:1.02rem; line-height:1.28; margin-bottom:26px;}
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 32px;
  border-radius:var(--pill);
  font-weight:900;
  font-size:1rem;
  line-height:1.25;
  transition:transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--green-grad); color:var(--black); box-shadow:var(--shadow-btn);}
.btn--primary:hover{box-shadow:0 8px 18px rgba(0,0,0,0.3);}
.btn--ghost{border:2px solid var(--fg); color:var(--fg); padding:10px 30px;}
.btn--ghost:hover{background:var(--fg); color:var(--bg);}

/* ticker */
.ticker{
  padding:15px 0;
  overflow:hidden;
  white-space:nowrap;
  background:var(--green-grad);
  color:var(--black);
}
.ticker-track{
  display:inline-flex;
  gap:44px;
  animation:scrollTicker 26s linear infinite;
}
.ticker-track span{
  font-size:0.92rem;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.ticker-track span::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:var(--black);
}
.ticker-track span b{font-weight:900;}
@keyframes scrollTicker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- BANDS ---------- */
.band{padding:110px 0;}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.95rem;
  font-weight:700;
  color:var(--fg);
  margin-bottom:16px;
}
.kicker::before{
  content:"";
  width:28px; height:4px; border-radius:2px;
  background:var(--green);
}
.band h2{
  font-size:clamp(1.9rem, 3.4vw, 2.4rem);
  max-width:22ch;
  margin-bottom:22px;
}
.band .lede{
  color:var(--fg-2);
  max-width:64ch;
  font-size:1.05rem;
  font-weight:300;
  margin:0 0 16px;
}

.two-col{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:64px;
  align-items:start;
}

/* bento of facts with gradient, counting numbers */
.fact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "tall a"
    "tall b"
    "wide wide";
  gap:14px;
}
.fact-grid > :nth-child(1){grid-area:tall;}
.fact-grid > :nth-child(2){grid-area:a;}
.fact-grid > :nth-child(3){grid-area:b;}
.fact-grid > :nth-child(4){grid-area:wide;}

.fact-card{
  --num-grad:linear-gradient(100deg, #0b5d23 0%, #02a83a 30%, #00d52e 50%, #0b5d23 75%, #02a83a 100%);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  min-height:168px;
  padding:26px 24px;
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  container-type:inline-size;
  background:var(--cloud);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.fact-card::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:radial-gradient(220px circle at var(--sx, 50%) var(--sy, 50%), rgba(0,255,0,0.16), transparent 70%);
  opacity:0;
  transition:opacity .35s;
}
.fact-card > *:not(.fact-ring){position:relative; z-index:1;}
/* light cards: start at the top so numbers and labels line up side by side */
.fact-card:not(.fact-card--dark):not(.fact-card--neon){justify-content:flex-start;}
.fact-card .fact-chips{margin-top:auto; padding-top:6px;}
.fact-card:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05), 0 22px 44px -18px rgba(0,0,0,0.28);}
.fact-card:hover::after{opacity:1;}

.fact-card .num{
  display:block;
  font-weight:900;
  font-size:clamp(2.6rem, 34cqi, 4.4rem);
  line-height:0.95;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  background:var(--num-grad);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:num-sheen 6s ease-in-out infinite;
}
@keyframes num-sheen{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
.fact-card .lab{
  display:block;
  max-width:28ch;
  color:var(--gray);
  font-size:0.92rem;
  line-height:1.45;
}

/* tall dark card */
.fact-card--dark{
  --num-grad:linear-gradient(100deg, #d4ff3a 0%, #00ff00 30%, #02d52e 55%, #d4ff3a 80%, #00ff00 100%);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(0,255,0,0.28), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(2,213,46,0.22), transparent 65%),
    linear-gradient(160deg, #0a0b11, #071a0e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.fact-card--dark .lab{color:var(--slate);}
.fact-card--dark .num{font-size:clamp(2.4rem, 30cqi, 5.4rem);}
.fact-eyebrow{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--green);
}
.fact-ring{
  width:180px;
  top:-40px; right:-50px;
  opacity:0.35;
  transform:rotate(-20deg);
  animation:ring-spin 18s linear infinite;
}
@keyframes ring-spin{to{transform:rotate(340deg);}}

/* wide neon card */
.fact-card--neon{
  --num-grad:linear-gradient(100deg, #000000 0%, #0b3d1c 40%, #000000 70%, #0b3d1c 100%);
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:22px;
  min-height:120px;
  background:
    radial-gradient(60% 120% at 100% 50%, rgba(212,255,58,0.6), transparent 70%),
    var(--green-grad);
  box-shadow:none;
}
.fact-card--neon .num{font-size:clamp(2.6rem, 9cqi, 4.4rem);}
.fact-card--neon .lab{color:rgba(0,0,0,0.78); font-weight:600; font-size:1rem; max-width:24ch;}
.fact-card--neon::after{background:radial-gradient(220px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,0.35), transparent 70%);}
.fact-live{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(0,0,0,0.85);
  color:var(--white);
  font-size:0.78rem;
  font-weight:700;
}
.fact-live__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(0,255,0,0.7);
  animation:live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(0,255,0,0.7)} 100%{box-shadow:0 0 0 10px rgba(0,255,0,0)}}

.fact-chips{display:flex; gap:6px; margin-top:4px;}
.fact-chips span{
  font-size:0.7rem;
  font-weight:800;
  padding:4px 9px;
  border-radius:6px;
  background:var(--white);
  color:var(--black);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
}

@media (max-width: 720px){
  .fact-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "tall tall"
      "a b"
      "wide wide";
  }
  .fact-card{min-height:150px; padding:22px 20px;}
  .fact-card--neon{flex-wrap:wrap; gap:12px 18px;}
  .fact-live{margin-left:0;}
}

/* drives grid */
.band--drives{--bg:var(--cloud); scroll-margin-top:var(--nav-h);}
.drive-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:48px;
}
.drive-cell{
  background:var(--white);
  border-radius:var(--radius);
  padding:30px 26px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.drive-cell:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.08);}
.drive-cell h3{font-size:1.1rem; margin-bottom:10px;}
.drive-cell p{color:var(--gray); font-size:0.92rem; margin:0;}
.drive-cell{position:relative;}
.drive-cell .tag{
  position:absolute;
  top:26px; right:26px;
  font-size:0.8rem;
  font-weight:800;
  letter-spacing:0.04em;
  color:var(--gray);
  opacity:0.7;
}
.drive-icon{
  display:block;
  width:84px; height:84px;
  margin:-6px 0 14px -8px;
  transition:transform .5s var(--ease);
}
.drive-icon svg{width:100%; height:100%; display:block; overflow:visible;}
.drive-cell:hover .drive-icon{transform:translateY(-6px) rotate(-4deg) scale(1.05);}

/* ---------- EARSUP CO-BRANDED CARD (EarsUp brandbook: Kanit, #4eed5b, #092107, green > teal > blue) ---------- */
@property --eu-angle{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.earsup-card{
  --eu-green:#4eed5b;
  --eu-teal:#40bf90;
  --eu-dark:#133b17;
  --eu-darkest:#092107;
  --eu-blue:#245fff;
  --eu-text:#fcfcfc;
  --eu-mint:#f2fbf1;          /* light surface (EarsUp primaryLight, softened) */
  --eu-ink:#0b2a0e;           /* headings on light */
  --eu-body:#2d4631;          /* body on light, 9.6:1 on the mint */
  --eu-green-ink:#1b8a2a;     /* brand green dark enough for text on light */
  --eu-grad-ink:linear-gradient(90deg, #1c9a2c 0%, #18927a 45%, #245fff 100%);
  --eu-grad:linear-gradient(-41.81deg, #4eed5b 9.769%, #40bf90 30.937%, #245fff 116.77%);
  --eu-grad-x:linear-gradient(90deg, #4eed5b 0%, #40bf90 45%, #245fff 100%);

  position:relative;
  margin-top:56px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(240px, 330px);
  grid-template-areas:"copy story" "marquee marquee";
  align-items:center;
  column-gap:56px;
  padding:56px 64px 0 56px;
  border-radius:28px;
  overflow:hidden;
  isolation:isolate;
  color:var(--eu-ink);
  font-family:'Kanit', sans-serif;
  background:var(--eu-mint);
}
/* rotating gradient edge */
.earsup-card::before{
  content:"";
  position:absolute; inset:0;
  padding:2px;
  border-radius:inherit;
  background:conic-gradient(from var(--eu-angle), #4eed5b, #40bf90, #245fff, #40bf90, #4eed5b);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:3;
  animation:eu-spin 8s linear infinite;
}
@keyframes eu-spin{to{--eu-angle:360deg;}}
/* fine dot pattern, like the EarsUp landing */
.earsup-card::after{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(11,42,14,0.10) 1px, transparent 1.5px);
  background-size:22px 22px;
  -webkit-mask:radial-gradient(70% 90% at 80% 40%, #000, transparent 75%);
          mask:radial-gradient(70% 90% at 80% 40%, #000, transparent 75%);
}
.earsup-glow{position:absolute; z-index:-1; border-radius:50%; pointer-events:none; aspect-ratio:1;}
.earsup-glow--a{width:520px; right:-120px; top:-160px; background:radial-gradient(circle, rgba(78,237,91,0.30), transparent 65%); animation:eu-drift 12s ease-in-out infinite alternate;}
.earsup-glow--b{width:620px; right:-60px; bottom:-300px; background:radial-gradient(circle, rgba(36,95,255,0.18), transparent 65%); animation:eu-drift 15s ease-in-out infinite alternate-reverse;}
@keyframes eu-drift{to{transform:translate(-90px, 50px) scale(1.12);}}

.earsup-copy{grid-area:copy; position:relative; z-index:1; padding-bottom:52px;}
.earsup-brandbar{display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin-bottom:26px;}
.earsup-logo{width:170px; height:auto;}
.earsup-label{
  display:inline-block;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--eu-green-ink);
  border:1px solid rgba(27,138,42,0.35);
  background:rgba(78,237,91,0.14);
  padding:5px 13px;
  border-radius:999px;
}
.earsup-title{
  margin:0;
  font-family:'Kanit', sans-serif;
  font-weight:700;
  font-size:clamp(2rem, 3.6vw, 3rem);
  line-height:1.04;
  letter-spacing:-0.01em;
  color:var(--eu-ink);
  text-wrap:balance;
  max-width:22ch;
}
.eu-grad-text{
  background:var(--eu-grad-ink);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:eu-shimmer 6s ease-in-out infinite alternate;
}
@keyframes eu-shimmer{from{background-position:0% 0;} to{background-position:100% 0;}}
/* the gradient underline from the EarsUp ads, drawn when the card appears */
.earsup-rule{
  display:block;
  width:min(360px, 70%);
  height:4px;
  margin:22px 0 24px;
  border-radius:4px;
  background:var(--eu-grad-x);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s cubic-bezier(.22,.8,.3,1) .35s;
}
.earsup-card.is-visible .earsup-rule{transform:none;}
.earsup-copy p{
  margin:0 0 .9em;
  max-width:27em;   /* ~62 characters per line in Kanit (its "ch" is wider than the average letter) */
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.55;
  color:var(--eu-body);
  text-wrap:pretty;
}
.earsup-copy strong{color:var(--eu-green-ink); font-weight:600;}
.earsup-link{
  display:inline-flex; align-items:center;
  margin-top:12px;
  padding:12px 28px;
  border-radius:999px;
  background:var(--eu-ink);
  color:#fff;
  font-weight:600;
  font-size:1rem;
  transition:transform .2s var(--ease), box-shadow .2s;
}
.earsup-link:hover{transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(36,95,255,0.45), inset 0 -3px 0 #4eed5b;}

/* the rabbit, as an EarsUp story */
.earsup-story{
  grid-area:story;
  position:relative; z-index:1;
  margin:0 0 52px;
  justify-self:center;
  width:100%;
  rotate:3deg;
  transition:rotate .6s var(--ease), scale .6s var(--ease);
}
.earsup-story:hover{rotate:0deg; scale:1.02;}
.earsup-story__frame{
  position:relative;
  aspect-ratio:720/1000;
  border-radius:24px;
  overflow:hidden;
  background:#efedea url("assets/earsup/earsup-dance-poster.webp") center/cover;
  box-shadow:
    0 0 0 2px rgba(78,237,91,0.9),
    0 0 0 7px rgba(78,237,91,0.14),
    0 28px 50px -24px rgba(11,42,14,0.45);
}
.earsup-video{display:block; width:100%; height:100%; object-fit:cover;}
.earsup-story__bar{
  position:absolute; top:12px; left:14px; right:14px;
  height:3px; border-radius:3px;
  background:rgba(9,33,7,0.15);
  overflow:hidden;
}
.earsup-story__bar i{position:absolute; inset:0; background:var(--eu-grad-x); transform:scaleX(0); transform-origin:left;}
.earsup-story__head{
  position:absolute; top:24px; left:14px;
  display:flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:600; color:var(--eu-darkest);
}
.earsup-story__head img{
  width:28px; height:28px; padding:5px 7px;
  object-fit:contain;
  border-radius:50%;
  background:var(--eu-darkest);
  box-shadow:0 0 0 2px #fff;
}
.earsup-star{
  position:absolute;
  height:auto;
  filter:brightness(0) invert(48%) sepia(83%) saturate(620%) hue-rotate(78deg) brightness(.95);
  pointer-events:none;
  z-index:2;
  animation:eu-twinkle 3.2s ease-in-out infinite;
}
.earsup-star--a{width:38px; top:-14px; left:-22px;}
.earsup-star--b{width:22px; top:34%; right:-18px; animation-delay:-1.1s;}
.earsup-star--c{width:16px; bottom:16%; left:-26px; animation-delay:-2.2s;}
@keyframes eu-twinkle{0%,100%{transform:scale(.7) rotate(0deg); opacity:.55;} 50%{transform:scale(1.1) rotate(45deg); opacity:1;}}

/* brand ribbon */
.earsup-marquee{
  grid-area:marquee;
  position:relative; z-index:1;
  margin:0 -64px 0 -56px;
  padding:14px 0;
  overflow:hidden;
  background:var(--eu-grad-x);
  color:var(--eu-darkest);
  -webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.earsup-marquee__track{display:flex; width:max-content; animation:eu-marquee 26s linear infinite;}
.earsup-marquee__track span{
  display:inline-flex; align-items:center; gap:28px;
  padding-right:28px;
  font-size:1.05rem; font-weight:600; white-space:nowrap;
}
.earsup-marquee__track span::after{
  content:""; width:14px; height:14px;
  background:var(--eu-darkest);
  -webkit-mask:url("assets/earsup/earsup-star.webp") center/contain no-repeat;
          mask:url("assets/earsup/earsup-star.webp") center/contain no-repeat;
}
@keyframes eu-marquee{to{transform:translateX(-50%);}}
.earsup-card:hover .earsup-marquee__track{animation-play-state:paused;}

@media (prefers-reduced-motion: reduce){
  .earsup-card::before, .earsup-glow, .eu-grad-text, .earsup-star, .earsup-marquee__track{animation:none;}
  .earsup-rule{transform:none; transition:none;}
}

/* ---------- PILLARS ---------- */
.pillar{
  padding:130px 0;
  scroll-margin-top:var(--nav-h);
}
.pillar .wrap{position:relative; z-index:2;}
.pillar-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:40px;
}
/* pricing model: an informational label, deliberately not button-like */
.price-tag{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
  padding:2px 0 2px 16px;
  border-left:4px solid var(--green);
  color:var(--fg);
  cursor:default;
}
.price-tag__label{
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-2);
}
.price-tag__value{
  font-size:1rem;
  font-weight:300;
  line-height:1.3;
}
.price-tag__value strong{
  font-size:1.6rem;
  font-weight:900;
  margin-right:6px;
  letter-spacing:-0.01em;
}
.pillar h2{font-size:clamp(2.1rem, 4vw, 2.8rem); max-width:16ch;}
.pillar .step-num{
  display:block;
  color:var(--fg-2);
  font-size:0.8rem;
  font-weight:700;
  margin-bottom:10px;
}

.pillar .brand-ring{width:min(38vw, 480px); opacity:0.08;}
.pillar--traffic .brand-ring{bottom:-14vw; left:-10vw; transform:rotate(160deg);}
.pillar--lead{
  /* same recipe as the other dark bands: deep black, two soft green glows */
  background:
    radial-gradient(55% 70% at 100% 0%, rgba(0,255,0,0.10), transparent 65%),
    radial-gradient(45% 70% at 0% 100%, rgba(2,213,46,0.08), transparent 70%),
    linear-gradient(180deg, #0a0b11 0%, var(--black) 100%);
}
.pillar--lead .brand-ring{display:none;}
.pillar--app{--bg:var(--cloud);}
.pillar--app .brand-ring{bottom:-14vw; right:-10vw; transform:rotate(-40deg);}

.pillar .lede{color:var(--fg-2); max-width:62ch; font-size:1.05rem; font-weight:300; margin:0 0 12px;}

.step-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:28px;
}
.step-row.cols-4{grid-template-columns:repeat(4, 1fr);}
.step-card{
  border-radius:var(--radius);
  padding:26px 24px;
  background:var(--card);
  border:1px solid var(--line);
  border-top:4px solid var(--green);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.pillar--traffic .step-card{background:var(--cloud); border-color:transparent; border-top-color:var(--green);}
.pillar--app .step-card{background:var(--white); border-color:transparent; border-top-color:var(--green);}
.step-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.08);}
.step-card h3,
.step-card h4{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.05rem;
  line-height:1.3;
  margin:0 0 10px;
  color:var(--fg);
}
.step-card p{margin:0; color:var(--fg-2); font-size:0.92rem;}

.sub-block{margin-top:56px;}
.sub-block h3{
  font-size:1.25rem;
  margin-bottom:18px;
}

/* store growth engine: three stages linked by arrows, each with its role */
.engine{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:0;}
.engine-step{
  position:relative;
  padding:24px 24px 26px;
  border-radius:20px;
  background:var(--white);
  border:1px solid rgba(10,11,17,0.08);
  box-shadow:0 1px 0 rgba(10,11,17,0.03);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.engine-step:hover{transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(10,11,17,0.18);}
.engine-step h4{font-family:var(--font-head); font-weight:800; font-size:1.6rem; letter-spacing:-0.02em; margin:14px 0 8px; color:var(--fg);}
.engine-step p{margin:0; color:var(--fg-2); font-size:0.92rem; line-height:1.55;}
.engine-role{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 8px; border-radius:999px;
  background:rgba(0,255,0,0.12); color:#0a5a17;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
}
.engine-role svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.engine-step--goal{background:var(--ink); border-color:transparent;}
.engine-step--goal h4{color:var(--white);}
.engine-step--goal p{color:rgba(255,255,255,0.72);}
.engine-step--goal .engine-role{background:var(--green-grad); color:var(--black);}
.engine-link{display:grid; place-items:center; width:56px;}
.engine-link svg{
  width:36px; height:36px; padding:8px; border-radius:50%;
  background:var(--white); border:1px solid rgba(10,11,17,0.10);
  fill:none; stroke:var(--fg); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  box-shadow:0 6px 16px -8px rgba(10,11,17,0.25);
}
.sub-block.is-visible .engine-link svg{animation:engine-nudge 2.4s var(--ease) 1s infinite;}
@keyframes engine-nudge{0%,70%,100%{transform:none;} 80%{transform:translateX(4px);} 90%{transform:none;}}
.engine-note{margin:20px 0 0; max-width:70ch; color:var(--fg-2); font-size:.95rem; line-height:1.6;}
@media (max-width: 900px){
  .engine{grid-template-columns:1fr;}
  .engine-link{width:auto; height:44px;}
  .engine-link svg{transform:rotate(90deg); animation:none !important;}
}

/* impactful formats: schematic previews on a phone */
.fmt-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:10px;}
@media (max-width: 1100px){ .fmt-grid{grid-template-columns:repeat(5, minmax(0, 1fr));} }
@media (max-width: 600px){ .fmt-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;} .fmt-card-item figure{padding:12px 8px 10px; border-radius:14px;} .fmt-card-item figcaption{font-size:.82rem;} }
.fmt-card-item figure{
  margin:0; padding:16px 10px 12px; height:100%; box-sizing:border-box; border-radius:18px;
  background:var(--white); border:1px solid rgba(10,11,17,0.08);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fmt-card-item figure:hover{transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(10,11,17,0.18);}
.fmt-card-item figcaption{font-family:var(--font-head); font-weight:800; font-size:.98rem; letter-spacing:-0.01em; color:var(--fg);}
.fmt-svg{width:100%; max-width:108px; height:auto; display:block;}
.fmt-phone{fill:#f6f7fa; stroke:#d4d8e0; stroke-width:2;}
.fmt-notch{fill:#d4d8e0;}
.fmt-line{fill:#e1e4ea;}
.fmt-line--on{fill:rgba(5,6,8,0.28);}
.fmt-search{fill:#e9ebf0;}
.fmt-card{fill:#fff; stroke:#e1e4ea; stroke-width:1.5;}
.fmt-icon{fill:#dfe2e8;}
.fmt-icon--on{fill:rgba(5,6,8,0.25);}
.fmt-get{fill:#050608;}
.fmt-ad{fill:url(#fmt-grad);}
.fmt-tag{font:800 7px var(--font-body); fill:#050608; letter-spacing:.06em;}
.fmt-dim{fill:rgba(5,6,8,0.45);}
.fmt-close{fill:#fff;}
.fmt-x{stroke:#050608; stroke-width:1.8; stroke-linecap:round;}
.fmt-close--on{fill:rgba(5,6,8,0.25);}
.fmt-x--on{stroke:#050608;}
.fmt-play{fill:#050608;}
.fmt-progress{fill:rgba(5,6,8,0.2);}
.fmt-progress--on{fill:#050608;}
.fmt-on-box{fill:rgba(255,255,255,0.55);}
.fmt-cta{fill:#050608;}
.fmt-card-item figure:hover .fmt-ad{animation:fmt-pulse 1.2s var(--ease);}
@keyframes fmt-pulse{0%,100%{opacity:1;} 40%{opacity:.7;}}
@media (prefers-reduced-motion: reduce){ .sub-block.is-visible .engine-link svg, .fmt-card-item figure:hover .fmt-ad{animation:none;} }

/* ---------- STATS ---------- */
.band--stats{
  background:
    radial-gradient(45% 80% at 0% 100%, rgba(0,255,0,0.10), transparent 70%),
    var(--black);
}
.grad-text{
  font-style:normal;
  background:linear-gradient(100deg, #d4ff3a, #00ff00 40%, #02d52e 70%, #d4ff3a);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:num-sheen 6s ease-in-out infinite;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-top:48px;
}
.stat-cell{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:26px 24px 28px;
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  container-type:inline-size;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(0,255,0,0.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  transition:transform .35s var(--ease);
}
/* gradient hairline border */
.stat-cell::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg, rgba(212,255,58,0.55), rgba(0,255,0,0.12) 35%, rgba(255,255,255,0.04) 60%, rgba(2,213,46,0.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.stat-cell::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(0,255,0,0.16), transparent 70%);
  opacity:0;
  transition:opacity .35s;
}
.stat-cell:hover{transform:translateY(-4px);}
.stat-cell:hover::after{opacity:1;}

.stat-viz{width:124px; height:64px; margin-bottom:14px; overflow:visible;}
.stat-cell .num{
  display:block;
  font-weight:900;
  font-size:clamp(2.4rem, 26cqi, 3.6rem);
  line-height:1;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg, #d4ff3a 0%, #00ff00 30%, #02d52e 55%, #d4ff3a 80%, #00ff00 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:num-sheen 6s ease-in-out infinite;
}
.stat-cell .lab{
  display:block;
  color:var(--slate);
  font-size:0.9rem;
  line-height:1.45;
}

/* mini charts: drawn when the card counts in */
.sv-bar{transform-box:fill-box; transform-origin:bottom; transform:scaleY(0.08);}
.is-in .sv-bar{animation:sv-grow .9s var(--ease) forwards;}
@keyframes sv-grow{to{transform:scaleY(1);}}

.sv-line{stroke-dasharray:100; stroke-dashoffset:100;}
.sv-area{opacity:0;}
.sv-tip{opacity:0; transform-box:fill-box; transform-origin:center;}
.is-in .sv-line{animation:sv-draw 1.4s var(--ease) forwards;}
.is-in .sv-area{animation:sv-fade .8s .7s ease forwards;}
.is-in .sv-tip{animation:sv-fade .3s 1.2s ease forwards, sv-pulse 1.8s 1.5s ease-in-out infinite;}
@keyframes sv-draw{to{stroke-dashoffset:0;}}
@keyframes sv-fade{to{opacity:1;}}
@keyframes sv-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.5)}}

.sv-ring{stroke-dasharray:100; stroke-dashoffset:100;}
.sv-check{stroke-dasharray:100; stroke-dashoffset:100;}
.is-in .sv-ring{animation:sv-draw 1.5s var(--ease) forwards;}
.is-in .sv-check{animation:sv-draw .5s 1.3s ease forwards;}

.sv-seg{opacity:0; transform-box:fill-box; transform-origin:left center; transform:scaleX(0);}
.is-in .sv-seg{animation:sv-seg .45s var(--ease) forwards;}
@keyframes sv-seg{to{opacity:1; transform:scaleX(1);}}

/* ---------- PARTNERS (logo wall, grayscale until hover) ---------- */
.partner-grid{
  list-style:none;
  margin:48px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.partner-grid li{
  display:grid;
  place-items:center;
  height:104px;
  padding:0 28px;
  background:var(--cloud);
  border-radius:var(--radius);
  transition:background .3s, box-shadow .3s;
}
.partner-grid img{
  height:var(--logo-h, 32px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(1) brightness(0.35) contrast(1.2);
  opacity:0.7;
  transition:filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.partner-grid li:hover{background:var(--white); box-shadow:0 10px 26px rgba(0,0,0,0.08);}
.partner-grid li:hover img{filter:none; opacity:1; transform:scale(1.04);}

@media (max-width: 1000px){
  .partner-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width: 720px){
  .partner-grid{grid-template-columns:repeat(2, 1fr); gap:10px;}
  .partner-grid li{height:92px; padding:0 16px;}
  .partner-grid img{height:calc(var(--logo-h, 32px) * 0.85);}
}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--black);
  color:var(--white);
  padding:80px 0 0;
  position:relative;
  z-index:1;
  overflow:hidden;
  overflow:clip; /* clip, not a scroll container: anchor jumps must not scroll it */
}

/* finale: the emotional close */
.finale{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  overflow:clip;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:40px;
  padding:clamp(48px, 7vw, 96px) clamp(28px, 6vw, 80px);
  border-radius:32px;
  background:#050608;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 40px 80px -30px rgba(0,255,0,0.25);
}
.finale::before{ /* grain */
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.08;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.finale::after{ /* pointer spotlight */
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(420px circle at var(--sx, 70%) var(--sy, 40%), rgba(212,255,58,0.18), transparent 70%);
}
.finale-blob{
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
}
.finale-blob--a{
  width:70%; aspect-ratio:1;
  left:-20%; top:-60%;
  background:radial-gradient(circle, rgba(0,255,0,0.55), rgba(0,255,0,0) 65%);
  animation:blob-a 14s ease-in-out infinite alternate;
}
.finale-blob--b{
  width:60%; aspect-ratio:1;
  right:-15%; bottom:-70%;
  background:radial-gradient(circle, rgba(2,213,46,0.6), rgba(2,213,46,0) 65%);
  animation:blob-b 18s ease-in-out infinite alternate;
}
.finale-blob--c{
  width:40%; aspect-ratio:1;
  left:35%; top:10%;
  background:radial-gradient(circle, rgba(212,255,58,0.35), rgba(212,255,58,0) 65%);
  animation:blob-c 12s ease-in-out infinite alternate;
}
@keyframes blob-a{to{transform:translate(18%, 22%) scale(1.15);}}
@keyframes blob-b{to{transform:translate(-20%, -18%) scale(1.1);}}
@keyframes blob-c{to{transform:translate(-30%, 30%) scale(0.85);}}
.finale-ring{
  z-index:0;
  width:min(46vw, 520px);
  right:-8%; top:-35%;
  opacity:0.18;
  animation:ring-spin 30s linear infinite;
}

.finale-inner, .finale-badge{position:relative; z-index:2;}
.finale .kicker{color:var(--white);}
.finale h2{
  font-size:clamp(2.3rem, 5.2vw, 4.4rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  max-width:15ch;
  margin-bottom:22px;
}
.finale-lede{
  max-width:46ch;
  margin:0 0 36px;
  font-size:1.1rem;
  font-weight:300;
  color:rgba(255,255,255,0.78);
}
.finale-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px;}
.btn--xl{padding:18px 40px; font-size:1.1rem;}
.finale-mail{
  font-weight:600;
  color:var(--white);
  border-bottom:2px solid var(--green);
  padding-bottom:2px;
  transition:color .2s;
}
.finale-mail:hover{color:var(--green);}

.finale-badge{
  display:grid;
  place-items:center;
  width:180px; height:180px;
  border-radius:50%;
  color:var(--white);
  background:rgba(255,255,255,0.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);
  transition:transform .4s var(--ease), background .4s;
}
.finale-badge svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  animation:ring-spin 16s linear infinite;
}
.finale-badge text{
  fill:currentColor;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:0.08em;
}
.finale-badge__core{
  display:grid; place-items:center;
  width:84px; height:84px;
  border-radius:50%;
  background:var(--green-grad);
  color:var(--black);
  font-size:2rem;
  font-weight:900;
  box-shadow:0 0 40px rgba(0,255,0,0.45);
  transition:transform .4s var(--ease);
}
.finale-badge:hover{transform:scale(1.05); background:rgba(255,255,255,0.08);}
.finale-badge:hover .finale-badge__core{transform:rotate(45deg) scale(1.08);}
.finale-badge:hover svg{animation-duration:5s;}

/* ---------- CONTACT FORM (inside the finale) ---------- */
.finale:has(.contact-card){
  grid-template-columns:minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items:start;
  gap:56px;
}
.finale:has(.contact-card) h2{font-size:clamp(2.2rem, 4vw, 3.6rem);}
.finale-alt{margin:0; color:rgba(255,255,255,0.7); font-size:0.95rem;}

.contact-card{
  position:relative;
  z-index:2;
  scroll-margin-top:calc(var(--nav-h) + 24px);
  padding:32px;
  border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
          backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.25), 0 30px 60px -25px rgba(0,0,0,0.6);
}
.finale-badge--seal{
  position:absolute;
  top:-56px; right:-40px;
  width:124px; height:124px;
  pointer-events:none;
  background:rgba(5,6,8,0.6);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
}
.finale-badge--seal .finale-badge__core{width:56px; height:56px; font-size:1.4rem;}
.finale-badge--seal text{font-size:11px;}

.contact-form{display:flex; flex-direction:column; gap:16px;}
.contact-form__title{margin:0 0 4px; font-size:1.25rem; font-weight:800; padding-right:70px;}
.cf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.cf-field{display:flex; flex-direction:column; gap:7px; min-width:0; margin:0; padding:0; border:0;}
.cf-field label, .cf-field legend{
  font-size:0.8rem;
  font-weight:600;
  color:rgba(255,255,255,0.78);
  padding:0;
}
.cf-field label span, .cf-consent > span > span{color:var(--green);}
.contact-form input:not([type="checkbox"]):not([type="radio"]),
.contact-form textarea{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--white);
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  padding:13px 14px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.contact-form textarea{resize:vertical; min-height:110px;}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:rgba(255,255,255,0.35);}
.contact-form input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--green);
  background:rgba(0,0,0,0.5);
  box-shadow:0 0 0 4px rgba(0,255,0,0.15);
}
.cf-field.has-error input, .cf-field.has-error textarea{border-color:#ff6b6b;}
.cf-error{margin:0; font-size:0.8rem; font-weight:600; color:#ff8a8a;}

.cf-chips{flex-direction:row; flex-wrap:wrap; gap:8px;}
.cf-chips legend{width:100%; margin-bottom:7px;}
.cf-chip{position:relative; cursor:pointer;}
.cf-chip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer;}
.cf-chip span{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px;
  border-radius:999px;
  font-size:0.88rem;
  font-weight:600;
  color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16);
  transition:background .2s, color .2s, box-shadow .2s;
}
.cf-chip small{font-size:0.7rem; font-weight:800; opacity:0.7;}
.cf-chip:hover span{background:rgba(255,255,255,0.12);}
.cf-chip input:checked + span{background:var(--green-grad); color:var(--black); box-shadow:0 6px 18px rgba(0,255,0,0.25);}
.cf-chip input:focus-visible + span{outline:3px solid var(--green); outline-offset:2px;}

.cf-consent{
  display:flex; align-items:flex-start; gap:12px;
  font-size:0.85rem;
  line-height:1.5;
  color:rgba(255,255,255,0.75);
  cursor:pointer;
}
.cf-consent input{
  flex:0 0 auto;
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px;
  margin:1px 0 0;
  border-radius:6px;
  border:1.5px solid rgba(255,255,255,0.4);
  background:rgba(0,0,0,0.35);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.cf-consent input::after{
  content:"";
  width:10px; height:6px;
  border-left:2.5px solid var(--black);
  border-bottom:2.5px solid var(--black);
  transform:translateY(-1px) rotate(-45deg) scale(0);
  transition:transform .2s var(--ease);
}
.cf-consent input:checked{background:var(--green); border-color:var(--green);}
.cf-consent input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1);}
.cf-consent input:focus-visible{outline:3px solid var(--green); outline-offset:2px;}
.cf-consent a{color:var(--white); font-weight:600; text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:3px;}
.cf-consent.has-error input{border-color:#ff6b6b;}
.cf-consent > span{flex:1; min-width:0;}
.cf-consent .cf-error{flex-basis:100%;}
.cf-consent{flex-wrap:wrap;}

.cf-submit{align-self:flex-start; margin-top:4px; border:0; cursor:pointer; font-family:inherit;}
.cf-submit:disabled{opacity:0.6; cursor:wait;}
.cf-status{margin:0; font-size:0.9rem; font-weight:500; min-height:1.4em;}
.cf-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.cf-status.is-success{color:var(--green);}
.cf-status.is-error{color:#ff8a8a;}

@media (max-width: 900px){
  .finale:has(.contact-card){grid-template-columns:1fr; gap:40px;}
  .finale-badge--seal{top:-50px; right:-10px; width:104px; height:104px;}
  .finale-badge--seal .finale-badge__core{width:48px; height:48px; font-size:1.2rem;}
}
@media (max-width: 720px){
  .contact-card{padding:24px 18px; border-radius:20px;}
  .cf-row{grid-template-columns:1fr;}
  .cf-submit{align-self:stretch; justify-content:center;}
  .finale-badge--seal{display:none;}
  .contact-form__title{padding-right:0;}
}

/* giant outlined marquee */
.finale-marquee{
  margin:72px 0 56px;
  overflow:hidden;
  white-space:nowrap;
  -webkit-mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.finale-marquee__track{
  display:inline-flex;
  gap:0.6em;
  font-size:clamp(3.2rem, 9vw, 8rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-0.02em;
  animation:scrollTicker 32s linear infinite;
}
.finale-marquee__track span{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,0.28);
  display:inline-flex; align-items:center; gap:0.6em;
}
.finale-marquee__track span::after{
  content:"";
  width:0.18em; height:0.18em; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 20px var(--green);
}
.finale-marquee__track .is-grad{
  -webkit-text-stroke:0;
  background:linear-gradient(100deg, #d4ff3a, #00ff00 45%, #02d52e);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}

.footer-cols{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:32px;
  padding:28px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.footer-links{display:flex; flex-wrap:wrap; gap:8px 26px;}
.footer-links a{color:var(--white); font-weight:300; font-size:0.95rem; transition:color .2s;}
.footer-links a:hover{color:var(--green);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 24px;
  padding-top:24px;
  font-size:0.8rem;
  color:var(--slate);
}
.footer-legal{display:flex; flex-wrap:wrap; gap:4px 10px; margin:0;}
.footer-legal span + span::before{
  content:"";
  display:inline-block;
  width:3px; height:3px; border-radius:50%;
  margin-right:10px;
  vertical-align:middle;
  background:rgba(255,255,255,0.3);
}
.footer-policies{display:flex; gap:20px;}
.footer-policies a{color:var(--slate); text-decoration:underline; text-decoration-color:rgba(255,255,255,0.2); text-underline-offset:3px; transition:color .2s, text-decoration-color .2s;}
.footer-policies a:hover{color:var(--white); text-decoration-color:var(--green);}
@media (max-width: 720px){
  .footer-bottom{flex-direction:column; align-items:flex-start;}
}
.footer-logo-img{height:34px; width:auto;}
.footer-wordmark{
  display:block;
  width:calc(100% + 4vw);
  margin:48px -2vw -3.2vw;
  height:auto;
}
.footer-wordmark.reveal{transform:translateY(12%); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);}
.footer-wordmark.reveal.is-visible{transform:none;}

@media (max-width: 900px){
  .finale{grid-template-columns:1fr; gap:36px;}
  .finale-badge{width:140px; height:140px; justify-self:start;}
  .finale-badge__core{width:64px; height:64px; font-size:1.6rem;}
}
@media (max-width: 720px){
  .footer{padding-top:48px;}
  .finale{border-radius:24px; padding:44px 24px;}
  .finale-ctas{flex-direction:column; align-items:flex-start;}
  .btn--xl{padding:16px 32px; font-size:1rem;}
  .finale-marquee{margin:48px 0 36px;}
}

/* ---------- REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{opacity:1; transform:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px){
  .nav-link{padding:8px 7px;}
  .nav-link::after{left:7px; right:7px;}
}

@media (max-width: 900px){
  .two-col{grid-template-columns:1fr; gap:36px;}
  .drive-grid{grid-template-columns:1fr 1fr;}
  .step-row, .step-row.cols-4{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 960px){
  .nav-links{
    position:fixed;
    top:calc(var(--nav-h) + 8px); left:16px; right:16px;
    max-height:calc(100dvh - var(--nav-h) - 24px);
    overflow-y:auto;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0) 40%),
      var(--nav-menu);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
            backdrop-filter:blur(24px) saturate(180%);
    border:1px solid var(--nav-edge);
    border-radius:22px;
    box-shadow:0 0 0 1px var(--nav-ring), 0 24px 50px rgba(0,0,0,0.25);
    pointer-events:auto;
    transform-origin:top center;
    animation:nav-drop .28s var(--ease);
    flex-direction:column;
    align-items:stretch;
    padding:12px;
    gap:2px;
    display:none;
  }
  .nav-links.is-open{display:flex;}
  .nav-link{padding:13px 16px; font-size:1rem;}
  .nav-link::after{left:16px; right:auto; width:28px; bottom:6px;}
  .nav-cta{margin:8px 4px 2px; padding:12px 26px; text-align:center; font-size:1rem;}
  .nav-toggle{display:flex;}
  .nav-inner{padding:0 8px 0 20px;}
}
@keyframes nav-drop{from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:none}}
@media (max-width: 720px){
  :root{--nav-top:10px; --nav-bar:58px;}
  .nav{padding-left:10px; padding-right:10px;}
  .nav-inner{padding:0 7px 0 18px;}
  .logo-img{height:26px;}
  .nav-links{left:10px; right:10px;}
}

@media (max-width: 720px){
  .hero{padding:calc(var(--nav-h) + 40px) 0 56px;}
  .brand-ring--hero{width:90vw; right:-45vw; opacity:0.18;}
  .drive-grid{grid-template-columns:1fr;}
  .step-row, .step-row.cols-4{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .band{padding:80px 0;}
  .pillar{padding:90px 0;}
  .earsup-card{grid-template-columns:1fr; grid-template-areas:"copy" "story" "marquee"; padding:32px 24px 0;}
  .earsup-copy{padding-bottom:36px;}
  .earsup-logo{width:140px;}
  .earsup-story{width:min(260px, 78%); margin-bottom:40px;}
  .earsup-marquee{margin:0 -24px;}
  .footer-cols{flex-direction:column; align-items:flex-start;}
  .wrap{padding:0 20px;}
}

:focus-visible{
  outline:3px solid var(--green);
  outline-offset:3px;
}

/* ---------- LEGAL PAGES ---------- */
.legal-hero{
  padding:calc(var(--nav-h) + 90px) 0 64px;
  background:
    radial-gradient(55% 80% at 95% 10%, rgba(0,255,0,0.12), transparent 65%),
    linear-gradient(180deg, var(--ink), var(--black));
}
.legal-hero::after{
  content:"";
  position:absolute; right:-80px; top:30px;
  width:min(34vw, 360px); aspect-ratio:40 / 43;
  background:url("instal-ring.svg") center / contain no-repeat;
  transform:rotate(-12deg);
  opacity:0.55;
  pointer-events:none;
}
.legal-hero .wrap{position:relative; z-index:1;}
.legal-hero .back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.9rem;
  font-weight:600;
  color:var(--slate);
  margin-bottom:28px;
  transition:color .2s;
}
.legal-hero .back-link:hover{color:var(--green);}
.legal-hero h1{font-size:clamp(2.2rem, 4.6vw, 3.4rem); max-width:20ch;}
.legal-hero .updated{
  margin:18px 0 0;
  color:var(--slate);
  font-size:0.9rem;
  font-weight:500;
}

.legal{padding:70px 0 120px;}
.legal .lang-note{
  color:var(--gray);
  font-size:0.9rem;
  background:var(--cloud);
  border-left:4px solid var(--green);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;
  margin:0 0 48px;
  max-width:70ch;
}
.legal-body{max-width:74ch;}
.legal-body h2{
  font-size:1.4rem;
  margin-top:52px;
  margin-bottom:16px;
}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{
  font-size:1.05rem;
  font-weight:800;
  margin-top:32px;
  margin-bottom:12px;
}
.legal-body p{
  color:#33353b;
  margin:0 0 18px;
  font-size:0.98rem;
}
.legal-body ul, .legal-body ol{
  color:#33353b;
  margin:0 0 18px;
  padding-left:22px;
  font-size:0.98rem;
}
.legal-body li{margin-bottom:10px;}
.legal-body li::marker{color:var(--green-2); font-weight:800;}
.legal-body a{
  color:var(--black);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--green);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.legal-body a:hover{background:var(--green-soft);}
.legal-body strong{color:var(--black); font-weight:700;}
.legal-body table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0 32px;
  font-size:0.9rem;
}
.legal-body th, .legal-body td{
  border:1px solid rgba(0,0,0,0.10);
  padding:12px 14px;
  text-align:left;
  color:#33353b;
}
.legal-body th{
  background:var(--black);
  color:var(--white);
  font-size:0.8rem;
  font-weight:700;
}
.legal-toc{
  border-radius:var(--radius);
  padding:26px 28px;
  margin-bottom:48px;
  background:var(--cloud);
}
.legal-toc h2{margin:0 0 14px; font-size:1.05rem;}
.legal-toc ol{columns:2; gap:24px; margin:0; padding-left:20px; list-style:none; padding-left:0;}
.legal-toc li{margin-bottom:8px; break-inside:avoid;}
.legal-toc a{color:var(--black); font-weight:400; font-size:0.95rem; transition:color .2s;}
.legal-toc a:hover{color:var(--green-2);}

@media (max-width: 720px){
  .legal-toc ol{columns:1;}
  .legal-hero::after{opacity:0.25; right:-120px;}
}

/* ---------- POWERED BY PULL THE RABBIT ---------- */
.powered-by{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:48px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.14);
  color:var(--slate);
  font-size:0.78rem;
  font-weight:500;
  opacity:0.85;
  transition:opacity .2s;
}
.powered-by:hover{opacity:1;}
.powered-by img{height:20px; width:auto;}

/* ---------- HERO LATTICE (interactive WebGL texture) ---------- */
.hero-lattice{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero.has-lattice{background:#050608;}
.hero.has-lattice .hero-lattice{opacity:1;}
.hero.has-lattice .brand-ring--hero{display:none;}
/* keep the copy readable over the moving field */
.hero:not(.no-lattice)::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,6,8,0.92) 0%, rgba(5,6,8,0.72) 34%, rgba(5,6,8,0.15) 62%, rgba(5,6,8,0) 100%),
    linear-gradient(180deg, rgba(5,6,8,0.55) 0%, rgba(5,6,8,0) 22%, rgba(5,6,8,0) 75%, rgba(5,6,8,0.9) 100%);
}
.hero-hint{
  position:absolute;
  right:28px; bottom:22px;
  z-index:2;
  margin:0;
  font-size:0.75rem;
  font-weight:500;
  color:var(--slate);
  opacity:0;
  pointer-events:none;
  transition:opacity .6s;
}
.hero.has-lattice .hero-hint{opacity:0.75;}
@media (hover: none){
  .hero-hint{display:none;}
}
@media (max-width: 720px){
  .hero:not(.no-lattice)::after{
    background:linear-gradient(180deg, rgba(5,6,8,0.45) 0%, rgba(5,6,8,0.68) 45%, rgba(5,6,8,0.82) 100%);
  }
}

/* ---------- GLASS CURSOR ---------- */
.has-glass-cursor.glass-cursor-on,
.has-glass-cursor.glass-cursor-on *{cursor:none !important;}
.has-glass-cursor.glass-cursor-on input:not([type="checkbox"]):not([type="radio"]),
.has-glass-cursor.glass-cursor-on textarea{cursor:text !important;}

.glass-cursor,
.glass-cursor-dot{
  position:fixed;
  top:0; left:0;
  z-index:2147483647;   /* above everything, including the cookie consent banner */
  pointer-events:none;
  opacity:0;
  transition:opacity .25s;
  will-change:transform;
}
.glass-cursor-on .glass-cursor,
.glass-cursor-on .glass-cursor-dot{opacity:1;}

.glass-cursor{
  width:34px; height:34px;
  border-radius:17px;
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0.04) 70%),
    rgba(255,255,255,0.06);
  -webkit-backdrop-filter:saturate(170%) brightness(1.08);
          backdrop-filter:saturate(170%) brightness(1.08);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.08),
    inset 0 1px 1px rgba(255,255,255,0.7),
    inset 0 -6px 14px rgba(0,255,0,0.08),
    0 8px 24px rgba(0,0,0,0.18);
  transition:opacity .25s, background .3s, border-color .3s, box-shadow .3s;
}
.glass-cursor.is-link{
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.04) 40%, rgba(0,255,0,0.06) 80%);
  -webkit-backdrop-filter:saturate(160%) contrast(1.05);
          backdrop-filter:saturate(160%) contrast(1.05);
  border-color:rgba(0,255,0,0.55);
}
/* wrapped around a CTA: a lens with a green edge glow */
.glass-cursor.is-cta{
  background:
    radial-gradient(90% 140% at 20% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0) 70%);
  -webkit-backdrop-filter:saturate(150%) brightness(1.12);
          backdrop-filter:saturate(150%) brightness(1.12);
  border-color:rgba(0,255,0,0.85);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 0 22px rgba(0,255,0,0.45),
    inset 0 1px 1px rgba(255,255,255,0.8),
    inset 0 0 18px rgba(0,255,0,0.18);
}

.glass-cursor-dot{
  width:6px; height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 1.5px rgba(0,0,0,0.7);
  transition:opacity .2s, scale .2s;
}
.glass-cursor-dot.is-hidden{scale:0;}

/* magnetic CTAs (offset set by cursor.js) */
.btn, .nav-cta, .earsup-link{
  translate:var(--mx, 0px) var(--my, 0px);
  transition:transform .2s var(--ease), translate .35s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn.is-magnet, .nav-cta.is-magnet, .earsup-link.is-magnet{transition:transform .2s var(--ease), translate .12s linear, box-shadow .2s, background .2s, border-color .2s, color .2s;}

/* ---------- PILLAR INTRO + ILLUSTRATIONS ---------- */
.pillar-intro{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap:56px;
  align-items:center;
  margin-bottom:12px;
}
.pillar-intro .pillar-head{
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
  margin-bottom:24px;
}
.pillar-art{
  position:relative;
  margin:0;
  aspect-ratio:5 / 4;
  border-radius:24px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(212,255,58,0.22), transparent 60%),
    radial-gradient(80% 70% at 10% 100%, rgba(2,213,46,0.35), transparent 65%),
    linear-gradient(155deg, #0a0b11 0%, #071a0e 55%, #0b3d1c 100%);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}
.pillar-art::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(135deg, rgba(212,255,58,0.8), rgba(0,255,0,0.25) 40%, rgba(255,255,255,0) 60%, rgba(2,213,46,0.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:2;
}
.pillar-svg{display:block; width:100%; height:100%; font-family:var(--font-body);}

/* animations (paused until on screen) */
.pillar-svg *{animation-play-state:paused;}
.pillar-art.is-playing .pillar-svg *{animation-play-state:running;}
.pillar-svg .pa-float,
.pillar-svg .pa-breathe,
.pillar-svg .pa-ripple,
.pillar-svg .pa-tap,
.pillar-svg .pa-shine,
.pillar-svg .pa-drop,
.pillar-svg .pa-card,
.pillar-svg .pa-pop,
.pillar-svg .pa-bounce,
.pillar-svg .pa-done,
.pillar-svg .pa-twinkle{transform-box:fill-box; transform-origin:center;}

.pa-float{animation:pa-float 5s ease-in-out infinite;}
.pa-float--late{animation-delay:-2.5s;}
.pa-float--slow{animation-duration:7s; animation-delay:-1.2s;}
@keyframes pa-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}

.pa-breathe{animation:pa-breathe 6s ease-in-out infinite;}
@keyframes pa-breathe{0%,100%{opacity:.75; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)}}

.pa-flow{animation:pa-flow 1s linear infinite;}
@keyframes pa-flow{to{stroke-dashoffset:-24;}}

.pa-ripple{animation:pa-ripple 2s ease-out infinite;}
.pa-ripple--late{animation-delay:-1s;}
@keyframes pa-ripple{0%{transform:scale(.6); opacity:.95} 100%{transform:scale(2.6); opacity:0}}

.pa-tap{transform-origin:0 0; animation:pa-tap 2s ease-in-out infinite;}
@keyframes pa-tap{0%,100%{transform:translate(0,0)} 40%{transform:translate(-5px,-4px)} 48%{transform:translate(-5px,-4px) scale(.88)} 56%{transform:translate(-5px,-4px)}}

.pa-shine{animation:pa-shine 3.2s ease-in-out infinite;}
@keyframes pa-shine{0%{transform:translateX(0); opacity:0} 20%{opacity:1} 60%{transform:translateX(86px); opacity:0} 100%{transform:translateX(86px); opacity:0}}

.pa-drop{animation:pa-drop 2.4s cubic-bezier(.5,0,.75,.4) infinite;}
@keyframes pa-drop{0%{transform:translateY(0); opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{transform:translateY(84px); opacity:0}}

.pa-card{transform-origin:left center; animation:pa-card 3.2s var(--ease) infinite;}
@keyframes pa-card{0%,14%{opacity:0; transform:translate(-34px,-12px) scale(.7)} 26%{opacity:1; transform:none} 78%{opacity:1; transform:none} 100%{opacity:0; transform:translate(18px,0)}}
.pa-pop{animation:pa-pop 3.2s var(--ease) infinite;}
@keyframes pa-pop{0%,28%{transform:scale(0)} 36%{transform:scale(1.2)} 42%,100%{transform:scale(1)}}

.pa-progress{animation:pa-progress 4s ease-in-out infinite;}
@keyframes pa-progress{0%{stroke-dashoffset:238.8; opacity:1} 60%{stroke-dashoffset:0; opacity:1} 92%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}
.pa-bounce{animation:pa-bounce 1s ease-in-out infinite;}
@keyframes pa-bounce{0%,100%{transform:translateY(-2px)} 50%{transform:translateY(2px)}}
.pa-done{animation:pa-done 4s var(--ease) infinite;}
@keyframes pa-done{0%,58%{transform:scale(0)} 66%{transform:scale(1.18)} 72%,92%{transform:scale(1)} 100%{transform:scale(0)}}
.pa-state{animation:pa-state-a 4s steps(1) infinite;}
.pa-state--b{animation-name:pa-state-b;}
@keyframes pa-state-a{0%{opacity:1} 60%{opacity:0} 100%{opacity:1}}
@keyframes pa-state-b{0%{opacity:0} 60%{opacity:1} 100%{opacity:0}}

.pa-twinkle{animation:pa-twinkle 2.4s ease-in-out infinite;}
.pa-twinkle--b{animation-delay:-.8s;}
.pa-twinkle--c{animation-delay:-1.6s;}
@keyframes pa-twinkle{0%,100%{opacity:.2; transform:scale(.6)} 50%{opacity:1; transform:scale(1.3)}}

@media (max-width: 900px){
  .pillar-intro{grid-template-columns:1fr; gap:32px;}
  .pillar-art{max-width:520px; width:100%;}
}

/* ---------- HERO: part of Pull the Rabbit ---------- */
.hero-parent{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-top:44px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.78);
  font-size:0.92rem;
  font-weight:500;
  transition:color .2s;
}
.hero-parent:hover{color:var(--white);}
.hero-parent__lead{font-weight:700; color:var(--white);}
.hero-parent img{height:42px; width:auto; display:block; margin-top:-4px;}
.hero-parent__tail::before{content:","; margin-left:-10px; margin-right:6px;}
@media (max-width: 720px){
  .hero-parent{margin-top:32px; padding-top:18px; font-size:0.86rem;}
  .hero-parent img{height:38px;}
  .hero-parent__tail{flex-basis:100%;}
  .hero-parent__tail::before{content:none;}
}

/* ---------- HERO: mobile tweaks ---------- */
@media (max-width: 720px){
  .hero-ctas{flex-wrap:nowrap; gap:10px;}
  .hero-ctas .btn{flex:1 1 0; justify-content:center; white-space:nowrap; padding:13px 12px; font-size:0.9rem;}
  .hero-ctas .btn--ghost{padding:11px 10px;}
  .hero:not(.no-lattice)::after{
    background:linear-gradient(180deg, rgba(5,6,8,0.2) 0%, rgba(5,6,8,0.38) 40%, rgba(5,6,8,0.45) 75%, rgba(5,6,8,0.8) 100%);
  }
}

/* mobile: contact card as wide as the floating header (10px from the edges) */
@media (max-width: 720px){
  .footer .wrap:has(.finale){padding-left:10px; padding-right:10px;}
  .finale:has(.contact-card){padding:44px 0 0; gap:32px; border-radius:24px;}
  .finale:has(.contact-card) .finale-inner{padding:0 14px;}
  .finale:has(.contact-card) .contact-card{border-radius:24px; padding:26px 16px;}
}

/* ---------- FX SURFACE: dark bands with drifting gradients + cursor glow (like the finale) ---------- */
.fx-surface{isolation:isolate;}
.fx-surface > .wrap{position:relative; z-index:2;}
.fx-surface .finale-blob{opacity:0.5;}
.fx-surface .finale-blob--a{width:55%; left:-15%; top:-45%;}
.fx-surface .finale-blob--b{width:50%; right:-12%; bottom:-55%;}
.fx-surface .finale-blob--c{width:32%; left:40%; top:15%;}
.fx-surface::before{ /* grain */
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.fx-surface::after{ /* cursor spotlight */
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(480px circle at var(--sx, 78%) var(--sy, 30%), rgba(212,255,58,0.14), transparent 70%);
  transition:background-position .2s;
}

/* ---------- HERO ENTRANCE after the preloader ----------
   The hero text is already painted (fully opaque) under the preloader, so the browser and Google
   count it as visible right away; when the loader opens it only glides up into place. */
html.is-loading .hero-inner > *{transform:translateY(18px);}
html.is-entering .hero-inner > *{animation:hero-in 1s cubic-bezier(.22,.8,.3,1) both;}
html.is-entering .hero-inner > :nth-child(1){animation-delay:.2s;}
html.is-entering .hero-inner > :nth-child(2){animation-delay:.3s;}
html.is-entering .hero-inner > :nth-child(3){animation-delay:.38s;}
html.is-entering .hero-inner > :nth-child(4){animation-delay:.46s;}
@keyframes hero-in{from{transform:translateY(18px);} to{transform:none;}}
html.is-loading .nav-inner{opacity:0; transform:translateY(-12px);}
html.is-entering .nav-inner{animation:nav-in .8s .45s cubic-bezier(.16,.8,.28,1) both;}
@keyframes nav-in{from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:none;}}

/* ---------- TOUCH: no blue tap highlight, softer press feedback ---------- */
html{-webkit-tap-highlight-color:transparent;}
a, button, label, input, textarea, select, [role="button"]{-webkit-tap-highlight-color:transparent;}
/* keep the green focus ring for keyboard users only */
:focus:not(:focus-visible){outline:none;}
.btn:active, .nav-cta:active, .earsup-link:active, .cf-chip:active span, .nav-toggle:active{scale:0.97;}
.btn, .nav-cta, .earsup-link, .nav-toggle{transition-property:transform, translate, scale, box-shadow, background, border-color, color; transition-duration:.2s, .35s, .12s, .2s, .2s, .2s, .2s;}

/* reCAPTCHA (instal.com backend mode): hide Google's floating badge, show the required notice instead */
.grecaptcha-badge{visibility:hidden;}
.cf-legal{display:none; margin:0; font-size:0.72rem; line-height:1.45; color:rgba(255,255,255,0.45);}
.cf-legal a{color:rgba(255,255,255,0.7); text-decoration:underline; text-underline-offset:2px;}
.contact-form[data-mode="instal"] .cf-legal{display:block;}

/* =========================================================
   LEAD GEN PAGE (/lead-gen/)
   ========================================================= */

.hero--lead h1{font-size:clamp(2.2rem, 4.6vw, 3.9rem); max-width:19ch;}

/* journey: centred statement on a living dark band */
.lg-journey{text-align:center; padding:140px 0;}
.lg-journey h2{margin:0 auto 20px; max-width:none; font-size:clamp(2rem, 4vw, 3.2rem);}
.lg-journey .lede{margin:0 auto; max-width:58ch; color:var(--slate); font-size:1.15rem;}

/* home repairs */
.lg-home h2, .lg-benefits h2{text-align:center; margin:0 auto 48px; max-width:none;}
.lg-home__grid{display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr); gap:40px; align-items:center;}
.lg-services{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.lg-service{
  position:relative;
  display:flex; flex-direction:column; gap:6px;
  padding:22px 22px 20px;
  border-radius:20px;
  background:var(--cloud);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.lg-service:hover{transform:translateY(-4px); background:var(--white); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05), 0 22px 44px -18px rgba(0,0,0,0.25);}
.lg-service h3{font-size:1.25rem; margin:4px 0 2px;}
.lg-service p{margin:0 0 10px; color:var(--gray); font-size:0.95rem; line-height:1.45;}
.lg-site{
  align-self:flex-start;
  max-width:100%;
  margin-top:auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:0.76rem; font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);
  transition:background .2s, color .2s, box-shadow .2s;
}
.lg-site::after{content:" ↗"; opacity:.6;}
.lg-site:hover{background:var(--green-grad); box-shadow:none;}
.lg-icon{width:72px; height:72px; margin:-4px 0 6px -6px;}
.lg-service:hover .lg-icon, .lg-check:hover .lg-icon, .lg-benefit:hover .lg-icon, .lg-feature:hover .lg-icon{transform:translateY(-6px) rotate(-4deg) scale(1.05);}

/* collision counsel */
.lg-collision{
  background:
    radial-gradient(55% 70% at 0% 0%, rgba(0,255,0,0.10), transparent 65%),
    linear-gradient(180deg, #0a0b11 0%, var(--black) 100%);
}
.lg-collision__grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center;}
.lg-collision h2{font-size:clamp(2rem, 4vw, 3rem); max-width:14ch; margin-bottom:16px;}
.lg-sub{margin:0 0 30px; font-size:1.2rem; font-weight:500; line-height:1.4; color:rgba(255,255,255,0.8); font-family:var(--font-body); max-width:34ch;}
.lg-badge{
  display:inline-block;
  margin-bottom:18px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--green-grad);
  color:var(--black);
  font-size:0.82rem; font-weight:800;
}

/* qualification grid + features */
.lg-qualify{background:var(--cloud);}
.lg-checks{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.lg-check{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:30px 22px 26px;
  border-radius:20px;
  background:var(--white);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lg-check:hover{transform:translateY(-4px); box-shadow:0 22px 44px -18px rgba(0,0,0,0.22);}
.lg-check .lg-icon{width:86px; height:86px; margin:0 0 6px;}
.lg-check h3{font-size:1.15rem; max-width:18ch; line-height:1.2;}
.lg-features{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
.lg-feature{
  display:flex; align-items:flex-start; gap:18px;
  padding:26px;
  border-radius:20px;
  background:var(--black);
  color:var(--white);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
.lg-feature .lg-icon{flex:0 0 auto; width:78px; height:78px; margin:-4px 0 0 -4px;}
.lg-feature h3{color:var(--white); font-size:1.35rem; margin-bottom:8px;}
.lg-feature p{margin:0; color:var(--slate); font-size:0.98rem; line-height:1.5;}
.lg-feature strong{color:var(--white); font-weight:700;}

/* benefits */
.lg-benefits__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.lg-benefit{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:32px 26px;
  border-radius:20px;
  background:var(--cloud);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.lg-benefit:hover{transform:translateY(-4px); background:var(--white); box-shadow:0 22px 44px -18px rgba(0,0,0,0.22);}
.lg-benefit .lg-icon{width:90px; height:90px; margin:0 0 4px;}
.lg-benefit h3{font-size:1.35rem;}
.lg-benefit p{margin:0; color:var(--gray); max-width:30ch;}

/* why our leads stand out */
.lg-why h2{text-align:center; margin:0 auto 48px; max-width:none;}
.lg-why__grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center;}
.lg-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.lg-steps li{
  display:flex; align-items:center; gap:20px;
  padding:22px 24px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.lg-steps li:hover{transform:translateX(6px); box-shadow:inset 0 0 0 1px rgba(0,255,0,0.35);}
.lg-steps__n{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:56px; height:56px;
  border-radius:16px;
  background:var(--green-grad);
  color:var(--black);
  font-family:var(--font-head);
  font-size:1.6rem; font-weight:800;
  box-shadow:0 10px 24px rgba(0,255,0,0.25);
}
.lg-steps h3{color:var(--white); font-size:1.3rem;}

/* extra motion for the rocket */
.pillar-svg .pa-flame, .pillar-svg .pa-trail{transform-box:fill-box;}
.pa-flame{transform-origin:top center; animation:pa-flame .18s ease-in-out infinite alternate;}
@keyframes pa-flame{from{transform:scaleY(.86) scaleX(.94);} to{transform:scaleY(1.08) scaleX(1.04);}}
.pa-trail{transform-origin:center; animation:pa-trail 2s ease-out infinite;}
@keyframes pa-trail{0%{transform:scale(.4); opacity:0;} 30%{opacity:1;} 100%{transform:scale(1.6) translate(-8px, 10px); opacity:0;}}

@media (max-width: 900px){
  .lg-home__grid, .lg-collision__grid, .lg-why__grid{grid-template-columns:1fr; gap:32px;}
  .lg-checks{grid-template-columns:1fr 1fr;}
  .lg-features, .lg-benefits__grid{grid-template-columns:1fr;}
  .lg-collision .pillar-art, .lg-why .pillar-art{order:2;}
}
@media (max-width: 720px){
  .lg-journey{padding:96px 0;}
  .lg-services{grid-template-columns:1fr;}
  .lg-checks{gap:10px;}
  .lg-check{padding:22px 14px;}
  .lg-check .lg-icon{width:70px; height:70px;}
  .lg-check h3{font-size:1rem;}
  .lg-feature{flex-direction:column; padding:22px;}
}
.lg-journey, .lg-collision, .lg-why{
  --bg:var(--ink);
  --fg:var(--white);
  --fg-2:var(--slate);
  --line:rgba(255,255,255,0.12);
  --line-strong:rgba(255,255,255,0.28);
  --card:rgba(255,255,255,0.04);
  color:var(--white);
}
.lg-journey, .lg-why{
  background:
    radial-gradient(55% 70% at 100% 0%, rgba(0,255,0,0.10), transparent 65%),
    radial-gradient(45% 70% at 0% 100%, rgba(2,213,46,0.08), transparent 70%),
    linear-gradient(180deg, #0a0b11 0%, var(--black) 100%);
}

/* ---------- LEAD GEN HERO: connection network ---------- */
.hero--network{
  background:
    radial-gradient(55% 60% at 78% 45%, rgba(0,255,0,0.09), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgba(2,213,46,0.07), transparent 70%),
    #050608;
}
.hero-network{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero--network.has-network .hero-network{opacity:1;}
.net-chips{position:absolute; inset:0; z-index:1; pointer-events:none;}
.net-chip{
  position:absolute;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px 9px 10px;
  border-radius:999px;
  font-size:0.85rem; font-weight:600;
  color:var(--white);
  background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  -webkit-backdrop-filter:blur(12px) saturate(160%);
          backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18), 0 14px 30px rgba(0,0,0,0.35);
  white-space:nowrap;
  animation:pa-float 6s ease-in-out infinite;
}
.net-chip strong{font-family:var(--font-head); font-size:1.05rem; color:var(--green); margin:0 2px 0 6px;}
.net-chip__icon{
  display:grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--green-grad); color:var(--black);
  font-size:0.8rem; font-weight:900;
}
.net-chip--a{top:24%; right:8%;}
.net-chip--b{top:58%; right:24%; animation-delay:-2s;}
.net-chip--c{top:78%; right:6%; animation-delay:-4s;}
@media (max-width: 1200px){
  .net-chip--b{display:none;}
}
@media (max-width: 720px){
  .net-chip{font-size:0.75rem; padding:7px 12px 7px 8px;}
  .net-chip__icon{width:20px; height:20px;}
  .net-chip--a{top:auto; bottom:17%; right:auto; left:20px;}
  .net-chip--b{display:none;}
  .net-chip--c{top:auto; bottom:9%; right:20px;}
}

/* ---------- LEAD GEN HERO: provider linked to customers ---------- */
.hero--network[data-network="ambient"] .hero-network{opacity:0;}
.hero--network[data-network="ambient"].has-network .hero-network{opacity:.55;}
.lg-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
  gap:32px;
}
.lg-hero__copy{position:relative; z-index:2;}
.lg-hero__art{margin:0; position:relative; z-index:1;}
@media (min-width: 901px){ .lg-hero__art{width:106%;} }
.lg-connect{display:block; width:100%; height:auto; overflow:visible; font-family:var(--font-body);}
/* only the animated groups use their own box as origin (shapes with a transform attribute must keep the SVG default) */
.cn-breathe, .cn-provider, .cn-family, .cn-chain, .cn-sparks path, .cn-reach, .cn-wave-l, .cn-wave-r, .cn-chip{transform-box:fill-box;}
.cn-breathe{transform-origin:center; animation:pa-breathe 6s ease-in-out infinite;}
.cn-provider{transform-origin:bottom center; animation:cn-bob 5s ease-in-out infinite;}
.cn-family{transform-origin:bottom center; animation:cn-bob 5s ease-in-out infinite -2.5s;}
@keyframes cn-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
.cn-chain{transform-origin:center; animation:cn-float 4s ease-in-out infinite;}
@keyframes cn-float{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-8px) rotate(-2deg);}}
/* the two links pull apart and snap back together, sparks fire on contact */
.cn-link-a{animation:cn-snap-a 3.2s cubic-bezier(.6,0,.2,1) infinite;}
.cn-link-b{animation:cn-snap-b 3.2s cubic-bezier(.6,0,.2,1) infinite;}
@keyframes cn-snap-a{0%,18%{transform:translate(-14px, 9px);} 38%,100%{transform:translate(0,0);}}
@keyframes cn-snap-b{0%,18%{transform:translate(14px, -9px);} 38%,100%{transform:translate(0,0);}}
.cn-sparks path{transform-origin:center; opacity:0; animation:cn-spark 3.2s ease-out infinite;}
@keyframes cn-spark{0%,36%{opacity:0; transform:scale(.4);} 42%{opacity:1; transform:scale(1.1);} 70%,100%{opacity:0; transform:scale(1);}}
.cn-reach{transform-origin:20% 10%; animation:cn-reach 3.2s ease-in-out infinite;}
@keyframes cn-reach{0%,100%{transform:rotate(0);} 40%{transform:rotate(-4deg);}}
.cn-wave-l{transform-origin:right bottom; animation:cn-wave 1.4s ease-in-out infinite;}
.cn-wave-r{transform-origin:left bottom; animation:cn-wave 1.4s ease-in-out infinite reverse;}
@keyframes cn-wave{0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(8deg);}}
.cn-chip{transform-origin:center; animation:pa-float 5s ease-in-out infinite -1s;}

@media (max-width: 900px){
  .lg-hero{grid-template-columns:1fr; gap:8px;}
  .lg-hero__art{max-width:520px; width:100%; justify-self:center;}
}
@media (max-width: 720px){
  .hero--lead{padding-bottom:32px;}
  .lg-hero__art{max-width:420px; margin-top:6px;}
}

/* ---------- LEAD GEN HERO: match cards ---------- */
.lg-alt{display:block; width:100%; height:auto; overflow:visible; font-family:var(--font-body);}
.lg-alt .pa-ripple{transform-box:fill-box; transform-origin:center;}
.lgx-feed{animation:lgx-feed 10s linear infinite;}
@keyframes lgx-feed{to{transform:translateY(var(--feed));}}
.lgx-live{transform-box:fill-box; transform-origin:center; animation:live-pulse 1.8s ease-out infinite;}
.lgx-wave rect{transform-box:fill-box; transform-origin:center; animation:lgx-bar 1s ease-in-out infinite alternate;}
.lgx-wave rect:nth-child(2n){animation-delay:-.5s;}
.lgx-wave rect:nth-child(3n){animation-delay:-.25s;}
@keyframes lgx-bar{from{transform:scaleY(.4);} to{transform:scaleY(1.2);}}
.lgx-drift{animation:pa-float 6s ease-in-out infinite;}
.lgx-field{animation:pa-flow 1.2s linear infinite;}
.lgx-orbit{animation:ring-spin 26s linear infinite;}
.lgx-orbit .lgx-orbit-up{animation:ring-spin 26s linear infinite reverse;}
.lgx-orbit-r{animation:ring-spin 30s linear infinite reverse;}
.lgx-orbit-r .lgx-orbit-r-up{animation:ring-spin 30s linear infinite;}
.lgx-beam{animation:pa-flow .8s linear infinite;}
.lgx-shake{transform-box:fill-box; transform-origin:center; animation:lgx-shake 2s ease-in-out infinite;}
@keyframes lgx-shake{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}

/* hero proposals v2 */
.lgx-crash path{transform-box:fill-box; transform-origin:center; animation:cn-spark 2.4s ease-out infinite;}
.lgx-match{transform-box:fill-box; transform-origin:center; animation:lgx-match 5s ease-in-out infinite;}
@keyframes lgx-match{0%,30%{transform:scale(0); opacity:0;} 40%{transform:scale(1.12); opacity:1;} 46%,90%{transform:scale(1); opacity:1;} 100%{transform:scale(0); opacity:0;}}
.lgx-near-l{animation:lgx-near-l 5s ease-in-out infinite;}
.lgx-near-r{animation:lgx-near-r 5s ease-in-out infinite;}
@keyframes lgx-near-l{0%,100%{transform:translateX(-14px);} 35%,80%{transform:translateX(0);}}
@keyframes lgx-near-r{0%,100%{transform:translateX(14px);} 35%,80%{transform:translateX(0);}}

.lc-card{animation:pa-float 7s ease-in-out infinite;}
.lc-bob{transform-box:fill-box; transform-origin:center; animation:lc-bob 3.6s ease-in-out infinite;}
.lc-bob--late{animation-delay:-1.8s;}
@keyframes lc-bob{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-4px) rotate(-1.5deg);}}
.lc-match{transform-box:fill-box; transform-origin:center; animation:lc-match 5s cubic-bezier(.3,1.6,.5,1) infinite;}
@keyframes lc-match{0%,22%{transform:scale(.6); opacity:0;} 32%,92%{transform:scale(1); opacity:1;} 100%{transform:scale(.6); opacity:0;}}
.lc-star{transform-box:fill-box; transform-origin:center; animation:pa-twinkle 2.6s ease-in-out infinite;}
.lc-star--b{animation-delay:-.9s;}
.lc-star--c{animation-delay:-1.7s;}

/* ---------- LEAD GEN CONTACT FORM (behaviour of the instal.com contact page) ---------- */
.lead-contact-form .lc-recaptcha{display:none;}
.lead-contact-form[data-mode="instal"] .cf-legal{display:block;}
.lc-submit-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:4px;}
.lc-submit-row .cf-consent{flex:1 1 220px;}
.lc-submit-row .cf-submit{margin-top:0;}
.lc-feedback{margin:8px 0 0; padding:22px; border-radius:16px; background:rgba(0,255,0,0.08); box-shadow:inset 0 0 0 1px rgba(0,255,0,0.35); color:var(--white); font-size:1.05rem; line-height:1.5;}
.contact-card .lead-contact-form{transition:opacity .3s;}
.contact-card.is-loading .lead-contact-form{opacity:.2;}
.lc-loading{
  position:absolute; left:50%; top:50%;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.15);
  border-top-color:var(--green);
  opacity:0; pointer-events:none;
  transition:opacity .5s;
  animation:ring-spin .8s linear infinite;
}
.contact-card.is-loading .lc-loading{opacity:1;}
@media (max-width: 720px){
  .lc-submit-row .cf-submit{width:100%; justify-content:center;}
}

/* ---------- LANGUAGE SWITCH ---------- */
.lang-switch{
  display:flex; align-items:center; gap:2px;
  margin-left:8px;
  padding:3px;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nav-fg) 20%, transparent);
}
.lang-switch a{
  padding:5px 9px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--nav-fg);
  opacity:.7;
  transition:opacity .2s, background .2s, color .2s;
}
.lang-switch a:hover{opacity:1;}
.lang-switch a[aria-current="true"]{opacity:1; background:var(--green-grad); color:var(--black);}
@media (max-width: 960px){
  .lang-switch{align-self:flex-start; margin:6px 0 4px 12px;}
  .lang-switch a{padding:7px 12px; font-size:0.85rem;}
}

/* ---------- CHINESE: CJK fallback font and calmer tracking ---------- */
:root:lang(zh-Hans){
  --font-head:'Bricolage Grotesque', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body:'DM Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --head-tracking:0;
}
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3{line-height:1.2;}
:lang(zh-Hans) .finale-marquee__track{letter-spacing:0.02em;}

/* ---------- LANGUAGE SWITCH: text cross-fade (no reload) ---------- */
.nav-links > :not(.lang-switch), .hero-inner, main section > .wrap, .footer > .wrap, .finale-marquee{transition:opacity 1.1s cubic-bezier(.45,0,.25,1) .08s;}
html.is-switching .nav-links > :not(.lang-switch),
html.is-switching .hero-inner,
html.is-switching main section > .wrap,
html.is-switching .footer > .wrap,
html.is-switching .finale-marquee{opacity:0; transition:opacity .28s cubic-bezier(.4,0,.6,1);}

/* ---------- THANK YOU PAGE (after the home form) ---------- */
.ty{
  --bg:var(--ink); --fg:var(--white); --fg-2:var(--slate);
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 64px) 0 80px;
  background:linear-gradient(180deg, var(--ink), var(--black));
  color:var(--fg);
  overflow:hidden;
  isolation:isolate;
}
/* one soft light behind the confirmation, it brightens when the request lands */
.ty-glow{position:absolute; z-index:-1; left:50%; top:-28vmax; width:72vmax; aspect-ratio:1; margin-left:-36vmax; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(0,255,0,0.15), transparent 62%);}
.ty-animate .ty-glow{animation:ty-glow 2.4s cubic-bezier(.22,.8,.3,1) both;}
@keyframes ty-glow{0%{opacity:.35; transform:scale(.9);} 70%{opacity:1; transform:scale(1.04);} 100%{opacity:.85; transform:none;}}

.ty-inner{display:flex; flex-direction:column; align-items:center; text-align:center;}
/* the confirmation, inscribed in a square: a light sweeps the grid, then seven cells light up into a check.
   Without .ty-animate (reduced motion, background tab) the finished check is shown as is. */
.ty-sq{display:block; width:clamp(150px, 19vw, 210px); height:auto; margin:0 auto 38px; overflow:visible;}
.ty-sq__grid rect{fill:rgba(255,255,255,0.07);}
.ty-sq__check rect, .ty-sq__glow rect{transform-box:fill-box; transform-origin:center;}
.ty-sq__glow{opacity:.55;}
.ty-animate .ty-sq__grid rect{animation:ty-sweep .8s ease-in-out calc(var(--k) * 45ms + .15s) both;}
@keyframes ty-sweep{0%, 100%{fill:rgba(255,255,255,0.07);} 45%{fill:rgba(0,255,0,0.42);}}
.ty-animate .ty-sq__check rect{animation:ty-cell .5s cubic-bezier(.22,.8,.3,1) calc(var(--i) * 90ms + .8s) both;}
@keyframes ty-cell{0%{opacity:0; transform:scale(.3);} 60%{opacity:1; transform:scale(1.18);} 100%{opacity:1; transform:none;}}
.ty-animate .ty-sq__glow{animation:ty-sq-glow 1.2s cubic-bezier(.22,.8,.3,1) 1.35s both;}
@keyframes ty-sq-glow{0%{opacity:0;} 45%{opacity:.9;} 100%{opacity:.55;}}
.ty-animate .ty-sq__tile{animation:ty-tile 1.2s cubic-bezier(.22,.8,.3,1) 1.35s both;}
@keyframes ty-tile{0%{stroke-width:1.5;} 35%{stroke-width:3;} 100%{stroke-width:1.5;}}

/* entrance: content is visible by default; it only animates in when the page is actually on screen */
.ty-animate :is(.ty-sq, .ty-title, .ty-lead, .ty-ctas){animation:ty-in .9s cubic-bezier(.22,.8,.3,1) both;}
.ty-animate .ty-sq{animation-duration:.6s;}
.ty-animate .ty-title{animation-delay:.55s;}
.ty-animate .ty-lead{animation-delay:.7s;}
.ty-animate .ty-ctas{animation-delay:.85s;}
@keyframes ty-in{from{opacity:0; transform:translateY(16px);}}

.ty-title{
  margin:0;
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(2.3rem, 5.6vw, 5rem);   /* sized so "Thank you. Request received." stays on one line from tablet up */
  line-height:1;
  letter-spacing:-0.04em;
  text-wrap:balance;
}
.ty-title em{font-style:normal; display:inline-block;}
.ty-lead{max-width:56ch; margin:24px auto 0; font-size:1.15rem; line-height:1.55; color:rgba(255,255,255,0.72); text-wrap:pretty;}

.ty-ctas{display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:40px;}
.ty-ctas .btn--ghost{--fg:var(--white);}
.ty-mail{margin:0; font-size:.98rem; color:rgba(255,255,255,0.6);}
.ty-mail a{color:var(--white); font-weight:600; border-bottom:2px solid var(--green);}

.footer--slim{padding:0;}
.footer--slim .footer-bottom{margin-top:0; padding:24px 0 28px;}

@media (max-width: 760px){
  .ty{padding:calc(var(--nav-h) + 40px) 0 56px;}
  .ty-sq{margin-bottom:30px;}
}

/* ---------- 404 (reuses the thank you page layout) ---------- */
.nf-ctas{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px;}
.nf-ctas .btn--ghost{--fg:var(--white);}

/* ---------- COOKIE CONSENT (Cookie-Script, loaded by GTM): restyled to the site ----------
   Same choices as before (accept all, decline all, categories, close = decline, link to the policy),
   but as a card in the corner that does not block the page, shown only after the preloader. */
html body #cookiescript_injected_wrapper{
  background:transparent !important;
  inset:auto 24px 24px auto !important;
  width:auto !important; height:auto !important;
  pointer-events:none;
}
html body #cookiescript_injected{
  pointer-events:auto;
  position:fixed !important;
  inset:auto auto 24px 24px !important;
  transform:none !important;
  width:min(440px, calc(100vw - 48px)) !important;
  max-width:none !important; max-height:calc(100svh - 48px) !important;
  padding:24px 24px 18px !important;
  border-radius:24px !important;
  background:rgba(12,13,18,0.92) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,255,0,0.06) !important;
  font-family:var(--font-body) !important;
  color:var(--white) !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important; flex-wrap:nowrap !important;
}
html:not(.is-loading) body #cookiescript_injected{animation:cs-in .7s cubic-bezier(.22,.8,.3,1) .9s both;}
@keyframes cs-in{from{opacity:0; translate:0 16px;}}
html.is-loading body #cookiescript_injected_wrapper,
html.is-loading body #cookiescript_badge{visibility:hidden !important; opacity:0 !important;}

html body #cookiescript_injected #cookiescript_header{
  font-family:var(--font-head) !important; font-size:1.2rem !important; font-weight:800 !important;
  letter-spacing:-0.01em !important; line-height:1.2 !important; text-align:left !important;
  color:var(--white) !important; margin:0 32px 8px 0 !important; padding:0 !important;
}
html body #cookiescript_injected #cookiescript_description{
  font-size:.9rem !important; line-height:1.5 !important; color:rgba(255,255,255,0.72) !important;
  text-align:left !important; margin:0 0 16px !important; padding:0 !important;
}
html body #cookiescript_injected #cookiescript_description a,
html body #cookiescript_injected #cookiescript_readmore{
  color:var(--white) !important; font-weight:600 !important; text-decoration:none !important;
  border-bottom:2px solid var(--green) !important; margin-left:4px !important;
}
html body #cookiescript_injected .cookiescript_pre_header{position:absolute !important; top:14px !important; right:14px !important; margin:0 !important;}
html body #cookiescript_injected #cookiescript_close{
  width:32px !important; height:32px !important; line-height:30px !important; border-radius:50% !important;
  text-align:center !important; font-size:20px !important; color:rgba(255,255,255,0.7) !important;
  background:rgba(255,255,255,0.06) !important; transition:background .2s, color .2s !important;
}
html body #cookiescript_injected #cookiescript_close:hover{background:rgba(255,255,255,0.14) !important; color:var(--white) !important;}

/* categories: three compact chips */
html body #cookiescript_injected #cookiescript_checkboxs{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:8px !important;
  justify-content:flex-start !important; margin:0 0 18px !important; padding:0 !important; border:0 !important;
}
html body #cookiescript_injected .cookiescript_checkbox{
  display:flex !important; flex-direction:row !important; align-items:center !important; gap:6px !important;
  margin:0 !important; padding:6px 12px 6px 6px !important; border:1px solid rgba(255,255,255,0.12) !important;
  border-radius:999px !important; background:rgba(255,255,255,0.04) !important; flex:0 0 auto !important; min-width:0 !important;
  width:auto !important; height:auto !important;
}
html body #cookiescript_injected .cookiescript_checkbox_label{margin:0 !important; padding:0 !important;}
html body #cookiescript_injected .cookiescript_checkbox_text{
  font-family:var(--font-body) !important; font-size:.82rem !important; font-weight:600 !important;
  text-transform:none !important; letter-spacing:0 !important; color:rgba(255,255,255,0.88) !important;
}
html body #cookiescript_injected .mdc-checkbox{margin:0 !important; padding:0 !important; width:18px !important; height:18px !important; flex:0 0 18px !important;}
html body #cookiescript_injected .mdc-checkbox__background{top:0 !important; left:0 !important; width:18px !important; height:18px !important;}
html body #cookiescript_injected .mdc-checkbox__native-control{top:0 !important; left:0 !important; width:18px !important; height:18px !important;}
html body #cookiescript_injected .mdc-checkbox__background{border-color:rgba(255,255,255,0.4) !important; border-radius:6px !important;}
html body #cookiescript_injected .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background{
  background:var(--green) !important; border-color:var(--green) !important;
}
html body #cookiescript_injected .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background path{stroke:var(--black) !important;}

/* buttons: accept and decline with the same size and weight */
html body #cookiescript_injected #cookiescript_buttons{
  display:flex !important; flex-direction:row-reverse !important; gap:10px !important;
  justify-content:flex-start !important; margin:0 0 12px !important; width:100% !important; order:0;
}
html body #cookiescript_injected #cookiescript_buttons > div{
  box-sizing:border-box !important; height:46px !important; line-height:42px !important; border:2px solid transparent !important;
  flex:1 1 0 !important; margin:0 !important; min-width:0 !important; padding:0 16px !important;
  border-radius:999px !important; text-align:center !important;
  font-family:var(--font-head) !important; font-size:.9rem !important; font-weight:800 !important;
  text-transform:none !important; letter-spacing:0 !important; transition:transform .2s, box-shadow .2s, background .2s !important;
}
html body #cookiescript_injected #cookiescript_buttons > #cookiescript_accept{background:var(--green-grad) !important; color:var(--black) !important;}
html body #cookiescript_injected #cookiescript_buttons > #cookiescript_reject,
html body #cookiescript_injected #cookiescript_buttons > #cookiescript_save{
  background:transparent !important; color:var(--white) !important; border-color:rgba(255,255,255,0.85) !important;
}
html body #cookiescript_injected #cookiescript_buttons > div:hover{transform:translateY(-1px);}
html body #cookiescript_injected #cookiescript_manage_wrap{margin:0 !important; text-align:left !important; align-self:flex-start !important; width:auto !important;}
html body #cookiescript_injected #cookiescript_manage{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  font-size:.8rem !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important;
  color:rgba(255,255,255,0.6) !important;
}
html body #cookiescript_injected #cookiescript_manageicon .cookiescript_gear{fill:rgba(255,255,255,0.6) !important;}
html body #cookiescript_injected #cookiescript_cookietablewrap{max-height:40svh !important; overflow:auto !important;}

/* the "Cookie settings" button that stays after a choice */
html body #cookiescript_badge{
  left:16px !important; bottom:16px !important; border-radius:999px !important;
  background:rgba(12,13,18,0.86) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.12) !important; box-shadow:0 10px 30px -12px rgba(0,0,0,0.6) !important;
}
html body #cookiescript_badgetext{
  font-family:var(--font-body) !important; font-size:.75rem !important; font-weight:600 !important;
  text-transform:none !important; letter-spacing:0 !important; color:rgba(255,255,255,0.85) !important;
}

@media (max-width: 600px){
  html body #cookiescript_injected{inset:auto 12px 12px 12px !important; width:auto !important; padding:20px 18px 14px !important; border-radius:20px !important;}
}
@media (prefers-reduced-motion: reduce){ html body #cookiescript_injected{animation:none !important;} }

/* footer legal data: one item per line on phones (no separator dots at the start of a line) */
@media (max-width: 600px){
  .footer-legal{flex-direction:column; gap:3px;}
  .footer-legal span + span::before{display:none;}
}