:root{
  --bg:#050d14;
  --bg-2:#081320;
  --panel:#0b1622;
  --card:#0e1a28;
  --text:#f7f8f8;
  --muted:#adb1b8;
  --blue:#8b9dff;
  --line:rgba(255,255,255,.09);
  --pill:#f4f5f6;
  --maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
a{color:inherit;text-decoration:none}

/* genflow uses Inter Tight for the logo/headings, Montserrat for body */
.nav__word,.footer__word,.hero__title,.big-title,.huge-title,.section__center-title,
.stat__num,.infra__sub,.card h3,.client__row h3,.case h3,.office h3,.creator__name{
  font-family:'Inter Tight','Montserrat',system-ui,sans-serif;
}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:center;align-items:center;
  padding:22px 0;
  transition:background .3s ease,padding .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(5,7,13,.82);
  backdrop-filter:blur(14px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.nav__logo{display:flex;align-items:center;gap:12px}
.nav__mark{width:34px;height:34px;border-radius:50%}
.nav__word{font-weight:800;letter-spacing:.32em;font-size:20px;padding-left:.32em}

/* HERO */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  background:
    radial-gradient(120% 80% at 50% -10%, #16203c 0%, var(--bg) 55%),
    var(--bg);
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.28;filter:saturate(1.1);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 35%, #000 30%, transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 35%, #000 30%, transparent 85%);
  pointer-events:none;
}
.hero__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(122,162,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(5,7,13,.2), var(--bg) 92%);
  pointer-events:none;
}
.hero__inner{text-align:center;padding-top:120px;padding-bottom:80px;position:relative;z-index:2}
.hero__title{
  font-weight:700;
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.05;
  letter-spacing:-.02em;
  max-width:20ch;margin:0 auto 24px;
}
.hero__sub{
  color:var(--muted);
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.5;
  max-width:62ch;margin:0 auto 38px;
}

/* PILL BUTTON */
.pill{
  display:inline-flex;align-items:center;justify-content:space-between;gap:40px;
  background:var(--pill);color:#0a0e1a;
  font-weight:500;font-size:18px;
  padding:18px 30px;border-radius:100px;
  min-width:300px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.pill svg{flex:none}
.pill:hover{transform:translateY(-3px);background:#fff;box-shadow:0 16px 50px rgba(122,162,255,.25)}
.pill--dark{background:#161c2e;color:var(--text);box-shadow:none;min-width:0;gap:20px;padding:14px 24px;font-size:15px}
.pill--dark:hover{background:#1c2440}
.pill--big{min-width:340px;padding:24px 34px;font-size:20px}

/* SECTIONS */
.section{padding:92px 0;position:relative}
.section--tight{padding:60px 0}
.section__center-title{
  text-align:center;font-weight:600;font-size:clamp(20px,2vw,24px);
  margin-bottom:44px;letter-spacing:0;
}
.eyebrow{color:var(--blue);font-weight:600;letter-spacing:.12em;font-size:14px;margin-bottom:18px}
.eyebrow--center{text-align:center}
.big-title{font-weight:700;font-size:clamp(32px,5vw,64px);letter-spacing:-.02em;line-height:1.06}
.huge-title{font-weight:700;font-size:clamp(34px,5vw,64px);letter-spacing:-.02em;line-height:1.08;text-align:center;max-width:17ch;margin:0 auto}

/* MARQUEE */
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;gap:26px;width:max-content;animation:scroll 38s linear infinite}
.marquee--slow .marquee__track{animation-duration:55s}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* creator photo cards — full image with name + stats overlaid (genflow style) */
.creator{flex:none;width:280px;height:380px;border-radius:25px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--c1,#6a5cff),var(--c2,#28c0ff))}
.creator::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,13,20,0) 38%,rgba(5,13,20,.55) 70%,rgba(5,13,20,.86) 100%)}
.creator__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;text-align:center}
.creator__name{display:block;color:#fff;font-weight:600;font-size:19px;margin-bottom:12px;letter-spacing:.01em}
.creator__stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.creator__stats span{display:inline-flex;align-items:center;color:#fff;font-weight:500;font-size:14px;
  padding-left:22px;background-repeat:no-repeat;background-position:left center;background-size:16px 16px}
.s-ig{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><rect x='2.5' y='2.5' width='19' height='19' rx='5.5'/><circle cx='12' cy='12' r='4.5'/><circle cx='17.5' cy='6.5' r='1.2' fill='white' stroke='none'/></svg>")}
.s-yt{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2' y='5' width='20' height='14' rx='4.5' fill='white'/><path d='M10 8.7l5.5 3.3-5.5 3.3z' fill='%23050d14'/></svg>")}
.s-tt{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M14.5 3c.3 2.1 1.6 3.6 3.9 3.8V9.3c-1.4 0-2.7-.4-3.9-1.1v5.9a4.7 4.7 0 1 1-4-4.6v2.6a2.2 2.2 0 1 0 1.6 2.1V3z'/></svg>")}
.marquee__track--logos{gap:70px;align-items:center}
.logo-word{font-weight:800;font-size:26px;color:#cdd4e6;opacity:.7;letter-spacing:.04em;white-space:nowrap}

/* NUMBERS */
.numbers{background:linear-gradient(180deg,var(--bg) 0%,#04060b 100%)}
.numbers__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:60px}
.numbers__head .big-title{max-width:14ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{position:relative;padding-left:32px}
/* vertical neon divider line at the left of each stat */
.stat::before{content:"";position:absolute;left:0;top:2px;width:2px;height:80px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(150,185,255,.35) 100%);
  box-shadow:0 0 10px 1px rgba(170,200,255,.65),0 0 24px 3px rgba(120,160,255,.35);
  animation:neonLine 3.5s ease-in-out infinite}
/* soft circular glow bloom around the line */
.stat::after{content:"";position:absolute;left:-40px;top:6px;width:100px;height:100px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle, rgba(150,190,255,.20), transparent 66%);
  filter:blur(6px);animation:neonLine 3.5s ease-in-out infinite}
.stat:nth-child(2)::before,.stat:nth-child(2)::after{animation-delay:.4s}
.stat:nth-child(3)::before,.stat:nth-child(3)::after{animation-delay:.8s}
.stat:nth-child(4)::before,.stat:nth-child(4)::after{animation-delay:1.2s}
.stat__num{display:block;font-weight:700;font-size:clamp(48px,6vw,80px);letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#e2e6ee 58%,#cdd2de 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat__num .suf{font-weight:700;
  background:linear-gradient(180deg,#aab0c0 0%,#5b6279 68%,#474e63 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{color:var(--muted);font-size:18px;font-weight:500;margin-top:16px;display:block}
@keyframes neonLine{0%,100%{opacity:.7}50%{opacity:1}}

/* INFRA */
.infra{background:#040810;overflow:hidden}
/* big horizon circle with a bright rim along the top curve */
.infra__arc{
  position:absolute;left:50%;top:30px;transform:translateX(-50%);
  width:min(2600px,220vw);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(22,32,58,.6) 0%, rgba(12,20,36,.25) 40%, transparent 56%);
  border:1px solid rgba(160,180,245,.20);
  box-shadow:0 0 90px rgba(120,150,255,.10);
  pointer-events:none;z-index:0;
}
.infra .container{position:relative;z-index:2}
.infra__lead{color:var(--muted);text-align:center;max-width:62ch;margin:24px auto 0;font-size:17px;line-height:1.55}
.infra__sub{text-align:center;font-weight:700;font-size:clamp(22px,2.6vw,32px);max-width:22ch;margin:54px auto 44px;line-height:1.2}
.infra__sub em{color:var(--blue);font-style:normal}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;max-width:1120px;margin:0 auto}
.check{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.07);border-radius:100px;padding:14px 24px;
}
.check i{flex:none;width:16px;height:16px;display:inline-block;position:relative}
.check i::after{content:"";position:absolute;left:5px;top:0;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check span{font-weight:500;font-size:16px;white-space:nowrap}

/* ANIMATED BROWSER MOCKUP */
.mockup{position:relative;z-index:3;max-width:900px;margin:48px auto 0;
  border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.10);
  background:#0b1018;box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02)}
.mockup__bar{display:flex;align-items:center;gap:8px;padding:13px 18px;
  background:#0e141f;border-bottom:1px solid rgba(255,255,255,.06)}
.mockup__bar i{width:11px;height:11px;border-radius:50%;background:#39414f}
.mockup__bar i:nth-child(1){background:#ff5f57}
.mockup__bar i:nth-child(2){background:#febc2e}
.mockup__bar i:nth-child(3){background:#28c840}
.mockup__url{margin-left:14px;font-size:12px;color:#7a8294;background:#070b12;padding:5px 16px;border-radius:6px}
.mockup__screen{height:380px;overflow:hidden;position:relative}
.mockup__scroll{display:flex;flex-direction:column;animation:siteScroll 18s linear infinite}
.mockup:hover .mockup__scroll{animation-play-state:paused}
@keyframes siteScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.site{flex:none;height:380px;background-color:#eef1f7;position:relative;border-bottom:8px solid #0b1018}
.site::before{content:"";position:absolute;inset:0;background:
  linear-gradient(#ffffff,#ffffff) 0 0/100% 40px no-repeat,
  var(--hero,linear-gradient(135deg,#6a5cff,#28c0ff)) 0 40px/100% 190px no-repeat}
.site::after{content:"";position:absolute;left:9%;right:9%;top:258px;height:96px;
  background:repeating-linear-gradient(#d3d9e6 0 9px, transparent 9px 30px)}
.site--a{--hero:linear-gradient(135deg,#6a5cff,#28c0ff)}
.site--b{--hero:linear-gradient(135deg,#ff5c8a,#ff9a3c)}
.site--c{--hero:linear-gradient(135deg,#21d4a8,#2b8fff)}

/* SERVICES — bento layout (genflow): text on top, graphic peeking from bottom */
.services__lead{color:var(--muted);max-width:60ch;margin:20px auto 50px;font-size:17px;line-height:1.55;text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  position:relative;overflow:hidden;min-height:400px;
  background:linear-gradient(180deg,#0e1a28,#0a131e);
  border:1px solid var(--line);border-radius:36px;padding:42px 40px 0;
  display:flex;flex-direction:column;
  transition:transform .3s ease,border-color .3s ease;
}
.card:nth-child(1),.card:nth-child(4){grid-column:span 2}
.card:hover{transform:translateY(-6px);border-color:rgba(139,157,255,.35)}
.card__head{text-align:center;max-width:50ch;margin:0 auto}
.card h3{font-size:24px;font-weight:700;margin-bottom:12px}
.card p{color:var(--muted);font-size:15px;line-height:1.55}
.card__art{margin-top:auto;display:flex;justify-content:center;gap:16px;padding-top:32px}
/* wide card: row of site-thumbnail mockups peeking up from the bottom */
.art--row{align-items:flex-end}
.thumb{width:172px;height:150px;flex:none;border-radius:13px 13px 0 0;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 -6px 26px rgba(0,0,0,.32)}
.thumb::before{content:"";position:absolute;left:12px;right:12px;top:12px;height:7px;border-radius:4px;background:rgba(255,255,255,.9)}
.thumb::after{content:"";position:absolute;left:12px;right:46px;top:62%;height:6px;border-radius:3px;
  background:rgba(255,255,255,.75);box-shadow:0 14px 0 rgba(255,255,255,.5),0 28px 0 rgba(255,255,255,.32)}
/* narrow card: phone mockups peeking up */
.art--phones{align-items:flex-end;gap:14px}
.phone{width:98px;height:185px;flex:none;border-radius:20px 20px 0 0;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--c1),var(--c2));border:3px solid #0a0f18;border-bottom:none;
  box-shadow:0 -6px 26px rgba(0,0,0,.38)}
.phone::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:9px;width:30px;height:5px;border-radius:3px;background:rgba(255,255,255,.65)}
.card p{color:var(--muted);font-size:16px}

/* CARD VARIANTS */
.cards--3{grid-template-columns:repeat(3,1fr)}
.card .creator__stats{margin-top:18px}
.card .creator__stats span{font-size:18px}

/* CLIENT CARDS — light product card + avatar/name/stats below (genflow) */
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.client{transition:transform .3s ease}
.client:hover{transform:translateY(-6px)}
.client__card{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:1/1;
  background:linear-gradient(180deg,#eef1f6,#dde2ea)}
.client__device{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:46%;height:80%;border-radius:24px 24px 0 0;overflow:hidden;
  background:linear-gradient(160deg,var(--c1,#6a5cff),var(--c2,#28c0ff));
  border:5px solid #0e131c;border-bottom:none;box-shadow:0 16px 40px rgba(0,0,0,.22)}
.client__device::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:10px;
  width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.6)}
.client__row{display:flex;align-items:center;gap:13px;margin-top:18px}
.client__avatar{flex:none;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--c1,#6a5cff),var(--c2,#28c0ff))}
.client__row h3{color:#fff;font-size:18px;font-weight:600;margin-bottom:5px}
.client__row .creator__stats span{font-size:14px}

/* CASE STUDIES — image grid (genflow) */
.cases .big-title{margin-bottom:6px}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.case{transition:transform .3s ease}
.case:hover{transform:translateY(-6px)}
.case__img{display:block;aspect-ratio:1/1;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,var(--c1,#5b6cff),var(--c2,#28c0ff))}
.case h3{font-size:20px;font-weight:600;margin-top:16px}

/* MANAGEMENT */
.mgmt__inner{max-width:860px;margin:0 auto;text-align:center}
.mgmt__text{color:var(--muted);font-size:17px;margin:22px auto 0;line-height:1.6;max-width:70ch}
.mgmt__banner{margin-top:50px;height:440px;border-radius:28px;overflow:hidden;position:relative;
  background:linear-gradient(120deg,#6a5cff 0%,#ec4899 45%,#ff9a3c 100%)}
.mgmt__banner::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 50% -10%, rgba(255,255,255,.18), transparent 55%)}

/* OFFICES */
.office-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px}
.office{background:var(--panel);border:1px solid var(--line);border-radius:25px;padding:30px;
  transition:transform .3s ease,border-color .3s ease}
.office:hover{transform:translateY(-6px);border-color:rgba(122,162,255,.3)}
.office h3{font-size:22px;font-weight:700;margin-bottom:12px}
.office p{color:var(--muted);font-size:15px}

/* ALT INFRA */
.infra--alt{background:#070b14}
.infra--alt .infra__lead{margin-bottom:56px}
/* feature cards with icon + top neon bar (genflow "Create your own brand") */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1160px;margin:0 auto}
.feat{position:relative;overflow:hidden;text-align:left;border-radius:22px;padding:44px 40px 46px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06)}
/* neon bar at the top-left corner, above the icon */
.feat__bar{position:absolute;top:0;left:44px;width:60px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#cdd9ff,rgba(205,217,255,.2));box-shadow:0 0 14px rgba(170,200,255,.8)}
.feat__icon{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:20px;
  margin-bottom:30px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.feat__icon svg{width:40px;height:40px}
.feat p{color:#e7ecf3;font-size:16px;font-weight:500;line-height:1.55;max-width:30ch;margin:0}

/* CONTACT */
.contact{background:radial-gradient(120% 70% at 50% 120%, #16203c 0%, #04060b 60%)}
.contact__inner{text-align:center}
.contact__sub{color:var(--muted);font-size:18px;max-width:50ch;margin:24px auto 40px}

/* FOOTER */
.footer{position:relative;border-top:1px solid var(--line);padding:72px 0 36px;background:var(--bg)}
/* neon accent bar at the top-left of the footer */
.footer::before{content:"";position:absolute;top:-1px;left:24px;width:120px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#cdd9ff,rgba(205,217,255,.15));box-shadow:0 0 16px rgba(170,200,255,.8)}
.footer__inner{display:flex;justify-content:space-between;align-items:flex-start;gap:50px;flex-wrap:wrap}
.footer__left{max-width:46ch}
.footer__word{display:block;font-weight:800;letter-spacing:.16em;font-size:clamp(28px,4vw,46px);line-height:1}
.footer__tag{color:var(--muted);font-size:16px;line-height:1.55;margin-top:20px}
.footer__links{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.footer__links a{color:var(--muted);font-weight:500;transition:color .2s}
.footer__links a:hover{color:#fff}
.footer__copy{color:#5c6480;font-size:14px;margin-top:54px}

/* REVEAL ANIMATION */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:860px){
  .stats{grid-template-columns:1fr 1fr;gap:36px 20px}
  .check-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .card:nth-child(1),.card:nth-child(4){grid-column:span 1}
  .card{min-height:300px}
  .cards--3{grid-template-columns:1fr}
  .client-grid{grid-template-columns:1fr 1fr}
  .case-grid{grid-template-columns:1fr 1fr}
  .mockup__screen,.site,.site::before{height:300px}
  .numbers__head{align-items:flex-start}
  .office-grid{grid-template-columns:1fr 1fr}
  .check-grid--3{grid-template-columns:1fr}
  .check span{white-space:normal}
}
@media(max-width:640px){
  /* feature cards stack into a single readable column */
  .feat-grid{grid-template-columns:1fr;gap:18px;max-width:420px}
  /* Keep the image cards two-up: full-width 1:1 squares are far too tall on a phone
     and read as oversized boxes. Two columns halves them and keeps the boxes even. */
  .client-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
  .case-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
  .office-grid{grid-template-columns:1fr;gap:16px}
  /* numbers: keep 2x2 but shrink so big figures fit */
  .stats{gap:30px 18px}
  .stat__num{font-size:clamp(34px,11vw,44px)}
  .stat::before{height:60px}
  .stat::after{width:80px;height:80px}
  .stat__label{font-size:15px;margin-top:10px}
  /* feature cards: tighter padding */
  .feat{padding:36px 28px 32px}
  .feat__icon{width:72px;height:72px;margin-bottom:22px}
  /* bento service cards: shorter, smaller graphics */
  .card{min-height:auto;padding:34px 28px 0;border-radius:28px}
  /* wide cards carry a row of four thumbnails — shrink them and tighten the gap so the
     whole row fits inside the card instead of being clipped off both edges, which made
     the wide cards look broken next to the narrow ones. */
  .card__art{padding-top:26px}
  .art--row{gap:8px}
  .thumb{width:68px;height:88px}
  .phone{width:84px;height:150px}
  /* trim the smaller stat/name text inside image cards now that they are narrower */
  .client__row h3{font-size:16px}
  .client__row .creator__stats span{font-size:13px}
  .case h3{font-size:17px;margin-top:12px}
  /* footer stacks */
  .footer__inner{gap:36px}
  .footer__copy{margin-top:36px}
}
@media(max-width:560px){
  /* Pills were stretching full-width with desktop padding, so the "See More" buttons
     dominated the screen. Size them to their content with tighter padding/gap instead. */
  .pill{min-width:0;width:auto;max-width:100%;gap:18px;font-size:15px;padding:13px 24px}
  .pill svg{width:14px;height:14px}
  .pill--big{min-width:0;font-size:15px;padding:13px 24px}
  .section{padding:74px 0}
  .section--tight{padding:48px 0}
  .creator{width:240px;height:330px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee__track{animation:none}
  .stat::before,.stat::after{animation:none;opacity:.85}
  html{scroll-behavior:auto}
}