/* ══════════════════════════════════════════════════════════════
   BEYOND — Full Dark Theme, Cabinet Grotesk + Bricolage Grotesque
   ══════════════════════════════════════════════════════════════ */

/* ─── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-family: 'Cabinet Grotesk', sans-serif;
  background: #111113;
  color: #f0eff5;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  --bg:         #19191C;
  /* --bg2:        #161618; */
  --bg2:        rgba(255, 255, 255, 0.02);
  --surface:    #1c1c1f;
  --surface2:   #242428;
  --border:     rgba(255,255,255,.07);
  --border2:    rgba(255,255,255,.12);
  --text:       #f0eff5;
  --muted:      rgba(236, 234, 248, 0.18);
  --muted2:     rgba(255,255,255,.55);
  --red:        #E8524A;
  /* --red2:       #ff5a42; */
  --yellow:     #f5b731;
  --green:      #22c55e;
  --pink:       #F8B8D4;
  --navy:       #1c2047;
  --w:          1160px;
  --ease:       cubic-bezier(.4,0,.2,1);
  --spring:     cubic-bezier(.34,1.56,.64,1);
}

/* ─── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }

/* ─── SCROLL REVEAL ───────────────────────────────────────────── */
[data-aos] { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-aos="fade-up"]    { transform: translateY(32px); }
[data-aos="fade-left"]  { transform: translateX(32px); }
[data-aos="fade-right"] { transform: translateX(-32px); }
[data-aos].is-visible   { opacity: 1 !important; transform: none !important; }

/* ─── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}
@keyframes floatSlow {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes particle {
  0%   { transform: translateY(100vh); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: .6; }
  100% { transform: translateY(-5vh); opacity: 0; }
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes shimmer {
  from { left: -100%; }
  to   { left: 160%; }
}
@keyframes ringPulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}
@keyframes dealIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes orbFloat1 {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  33%      { transform: translate(10px,-16px) rotate(5deg) scale(1.04); }
  66%      { transform: translate(-7px,-8px) rotate(-3deg) scale(.97); }
}
@keyframes orbFloat2 {
  0%,100% { transform: translate(0,0); }
  40%      { transform: translate(-12px,-14px) rotate(-5deg) scale(1.05); }
  80%      { transform: translate(8px,-6px) rotate(3deg) scale(.96); }
}
@keyframes orbFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(6px,-18px) scale(1.05); }
}
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.floating     { animation: float 6s ease-in-out infinite; }
.floating-slow { animation: floatSlow 9s ease-in-out infinite; }

/* ─── CONTAINER ───────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 1.5rem; }

/* ─── SECTION LABEL ───────────────────────────────────────────── */
.section-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}

/* ══════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 900;
  padding: .9rem 2rem;
  background: transparent;
  transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.nav.scrolled {
  background: rgba(15, 13, 21, 0.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
/* Inner page nav — always opaque, back button always visible */
.nav--inner {
  background: rgba(15, 13, 21, 0.95) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) !important;
}
.nav__back-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .86rem;
  font-weight: 600;
  color: rgba(255,255,255,.62);
  transition: color .2s;
  white-space: nowrap;
}
.nav__back-btn:hover { color: #fff; }
/* Always visible on inner pages — override mobile hide */
.nav--inner .nav__back-btn { display: inline-flex !important; }
.nav__inner {
  max-width: var(--w); margin: 0 auto;
  display: flex; align-items: center; gap: 2rem;
}
.nav__left { margin-right: auto; }
.nav__logo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: -.02em;
  display: inline-block;
}
.logo-dot { color: #e8412a; }

.nav__links { display: flex; gap: 2.2rem; align-items: center; }
.nav__links a {
  font-size: .88rem; font-weight: 500;
  color: var(--muted); position: relative;
  transition: color .25s;
}
.nav__links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: rgba(255,255,255,.6);
  transition: width .3s var(--spring);
}
.nav__links a:hover { color: var(--muted2); }
.nav__links a:hover::after { width: 100%; }
/* Thin vertical separator between link groups */
.nav__sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.14);
  border-radius: 1px;
  flex-shrink: 0;
}
/* Mobile nav section divider */
.mobile-nav__divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: .6rem 0;
}

.nav__cta {
  display: inline-flex; align-items: center; gap: .32em;
  padding: .54rem 1.3rem;
  background: linear-gradient(135deg, #e8412a 0%, #f0613d 55%, #e84c38 100%);
  color: #fff;
  font-size: .86rem; font-weight: 700;
  border-radius: 99px;
  letter-spacing: .01em;
  transition: all .3s var(--spring);
  position: relative; overflow: hidden;
  white-space: nowrap;
  /* Soft inner highlight — glass top edge */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 18px rgba(232,65,42,.32),
    0 1px 0 rgba(0,0,0,.18);
}
/* Shimmer sweep */
.nav__cta::before {
  content: '';
  position: absolute; top: 0; left: -110%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: none;
}
.nav__cta:hover {
  background: linear-gradient(135deg, #f04a32 0%, #f5724e 55%, #f05540 100%);
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 8px 28px rgba(232,65,42,.48),
    0 2px 0 rgba(0,0,0,.22);
}
.nav__cta:hover::before { animation: shimmer .55s ease forwards; }
.nav__cta:active { transform: scale(.97); box-shadow: 0 2px 10px rgba(232,65,42,.3); }
.nav__cta--lg { padding: .85rem 2rem; font-size: 1rem; }

/* ── Hamburger button (mobile only) ── */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .2s;
  cursor: pointer;
}
.nav__hamburger:hover { background: rgba(255,255,255,.10); }
.nav__hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: transform .35s var(--spring), opacity .25s, width .3s;
  transform-origin: center;
}
/* Animated X when open */
.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════
   MOBILE FULLSCREEN NAV PANEL
   ══════════════════════════════════════════════════════════════ */
.mobile-nav {
  /* Hidden off-screen to the right */
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(14, 12, 20, 0.97);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);

  display: flex;
  flex-direction: column;
  padding: 2rem 1.6rem 2.5rem;

  /* Slide + fade out */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.32,1,.56,1), opacity .35s ease;
  will-change: transform, opacity;
}
.mobile-nav.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

/* ── Glass X close button ── */
.mobile-nav__close {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.75);
  transition: background .2s, color .2s, transform .2s;
  cursor: pointer;
}
.mobile-nav__close:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
  transform: rotate(90deg);
}

/* ── Large logo ── */
.mobile-nav__logo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 3.2rem;
  letter-spacing: -.04em;
  color: #fff;
  margin-top: 3.5rem;
  margin-bottom: 2.5rem;
  line-height: 1;
}
.mobile-nav__logo .logo-dot { color: var(--red); }

/* ── Nav links ── */
.mobile-nav__links {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mobile-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  transition: color .2s;
}
.mobile-nav__item:hover { color: #fff; }
.mobile-nav__item:hover .mobile-nav__arrow { border-color: var(--pink); background: rgba(247,37,133,.12); }

/* Pink arrow circle */
.mobile-nav__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(247,37,133,.55);
  color: var(--pink);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}

/* ── CTA at bottom ── */
.mobile-nav__cta {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  padding: .9rem 2rem;
  margin-top: 1.5rem;
}

/* ── Overlay (backdrop dim) ── */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.nav-overlay.active { opacity: 1; pointer-events: all; }


/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero {
  background: #19191C;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 2rem;
  position: relative;
  overflow: hidden;
}
/* Seamless bottom blend — fades hero black into site bg */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 280px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(25, 25, 28, 0.50) 45%,
    rgba(25, 25, 28, 0.88) 72%,
    #19191C 100%
  );
  pointer-events: none;
  z-index: 2;
}
.hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.particle {
  position: absolute; border-radius: 50%;
  animation: particle linear infinite;
}

/* Three.js 3D background canvas */
.hero__3d {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: fadeIn3d 1.8s 0.3s ease forwards;
}
@keyframes fadeIn3d {
  to { opacity: 1; }
}

.hero__text { position: relative;  padding: 80px 0;
 z-index: 1; }

.hero__headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 96px;
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -.04em;
  color: rgb(226, 223, 240);
  margin-bottom: 1.6rem;
  text-align: center;
}

/* Pill badges */
.pill {
  font-family: 'Bricolage Grotesque', sans-serif;
  display: inline-block;
  padding: .1em .36em .14em;
  border-radius: .6em;
  line-height: 1.0;
  font-style: normal;
  font-weight: 800;
  vertical-align: middle;
  letter-spacing: -.03em;
  position: relative;
  overflow: hidden;
}
/* 4-edge glass lines on both pills — fade before rounded corners */
.pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    /* top — bright, fades before corners (pills are very round so fade % is high) */
    linear-gradient(to right,
      transparent 18%,
      rgba(255,255,255,.38) 36%,
      rgba(255,255,255,.52) 50%,
      rgba(255,255,255,.38) 64%,
      transparent 82%),
    /* right */
    linear-gradient(to bottom,
      transparent 22%,
      rgba(255,255,255,.16) 40%,
      rgba(255,255,255,.16) 60%,
      transparent 78%),
    /* bottom */
    linear-gradient(to right,
      transparent 22%,
      rgba(255,255,255,.07) 40%,
      rgba(255,255,255,.07) 60%,
      transparent 78%),
    /* left */
    linear-gradient(to bottom,
      transparent 22%,
      rgba(255,255,255,.16) 40%,
      rgba(255,255,255,.16) 60%,
      transparent 78%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
}
/* Red pill: "pitch." */
.pill--red {
  border: 1px solid rgba(196, 105, 99, 0.38);
  background: #5c1c1c;
  color: #fff;
}
/* Dark navy pill: "find you." */
.pill--navy {
  border: 1px solid rgba(105, 99, 196, 0.38);
  background: #232245;
  color: rgba(255,255,255,.92);
}

.hero__cta-wrap { margin-bottom: 2rem; }

.btn-hero {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 3.2rem;
  background: var(--red); color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1rem;
  /* border: 1px solid rgba(242, 236, 235, 0.38); */
  border-radius: 99px;
  transition: all .3s var(--spring);
  position: relative; overflow: hidden;
  box-shadow: 0 4px 22px rgba(232,65,42,.28);
}
.btn-hero::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.btn-hero:hover { background: var(--red); transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 32px rgba(232,65,42,.45); }
.btn-hero:hover::before { animation: shimmer .5s ease forwards; }
.btn-hero:active { transform: scale(.97); }

/* Hero visual */
.hero__visual {
  position: relative;
  display: inline-block;
  width: min(400px, 86vw);
  z-index: 1;
  margin-top: -3rem;
}

.hero__phone {
  width: 100%;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.65));
}

/* Hero floating cards */
.hero__card {
  position: absolute;
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: 20px;
  backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important;
  z-index: 3;
  white-space: nowrap;
  transition: transform .35s var(--spring), box-shadow .3s, background .3s;
  /* Layered glass shadows */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),        
    inset 0 1px 0 rgba(255,255,255,.25),  
    inset 1px 0 0 rgba(255,255,255,.1),    
    0 20px 40px rgba(0,0,0,.55);           
  overflow: hidden;
}
/* Diagonal light sheen — top-left to centre */
.hero__card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: trsansparent;
  pointer-events: none;
  z-index: 0;
}
/* Top-edge bright highlight line */
.hero__card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}
.hero__card:hover {
  transform: scale(1.05) translateY(-4px);
  background: rgba(25,25,30,.65);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 1px 0 0 rgba(255,255,255,.15),
    0 24px 48px rgba(0,0,0,.7);
}
.hero__card > * { position: relative; z-index: 1; }
.hero__card strong { display: block; font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.95); margin-bottom: .15rem; }
.hero__card span   { font-size: .7rem; color: rgba(255,255,255,.55); display: block; font-family: monospace; letter-spacing: .02em; }

.hero__card--tl { top: 8%;  left: -22%; animation: float 6s ease-in-out infinite; }
.hero__card--tr { top: 10%; right: -26%; animation: float 5s .6s ease-in-out infinite; }
.hero__card--bl { bottom: 10%; left: -28%; animation: float 7.5s 1.2s ease-in-out infinite; }

.hcard-icon  { font-size: .95rem; flex-shrink: 0; }
.hcard-arrow { font-size: .95rem; color: var(--green); flex-shrink: 0; font-weight: 700; }
.hcard-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.hcard-dot--green { background: var(--green); box-shadow: 0 0 8px var(--green); }

/* Scroll cue */
.hero__scroll {
  position: absolute; bottom: 1.8rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .65rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
}
.scroll-line {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
  animation: scrollLine 2.4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   MARQUEE
   ══════════════════════════════════════════════════════════════ */
.marquee-section {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  padding: .9rem 0;
  overflow: hidden;
}
.marquee-inner {
  display: flex; gap: 3.5rem;
  width: max-content;
  animation: marquee 24s linear infinite;
}
.marquee-section:hover .marquee-inner { animation-play-state: paused; }
.marquee-inner span {
  font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.2);
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; cursor: default;
  transition: color .25s;
}
.marquee-inner span:hover { color: rgba(255,255,255,.55); }

/* ══════════════════════════════════════════════════════════════
   CREATORS
   ══════════════════════════════════════════════════════════════ */
.creators {
  background: var(--bg);
  padding: 5rem 0 4rem;
}
.creators__header { margin-bottom: 2.5rem; }
.creators__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800; color: #fff;
  letter-spacing: -.035em; line-height: 1.1;
}

/* Grid breaks out of .container to span full viewport width */
.creators__grid {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 2.5rem;
  /* Break out of container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Marquee row wrapper — clips overflow, adds left/right edge fades */
.creators__row--marquee {
  overflow: hidden;
  position: relative;
  /* Left & right fade-out masks */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.creators__row--marquee:hover .ccard-track { animation-play-state: paused; }

/* The scrolling track — uses flex, width is content-driven */
.ccard-track {
  display: flex;
  gap: .7rem;
  width: max-content;
  will-change: transform;
}
.ccard-track--left  { animation: ccard-scroll-left  32s linear infinite; }
.ccard-track--right { animation: ccard-scroll-right 32s linear infinite; }

@keyframes ccard-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes ccard-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Creator card — fixed width inside the track */
.ccard {
  background: rgba(22, 22, 26, 0.97);
  border: none;
  border-radius: 14px;
  padding: 1rem .9rem;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .3rem; cursor: pointer;
  transition: all .3s var(--spring);
  position: relative; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  width: 160px;
  flex-shrink: 0;
}
/* Kill old interior sheen */
.ccard::before { display: none; }
/* 4 edge-only gradient lines — fade to transparent before each corner */
.ccard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    /* top — brightest */
    linear-gradient(to right,
      transparent 8%,
      rgba(255,255,255,.36) 24%,
      rgba(255,255,255,.44) 50%,
      rgba(255,255,255,.36) 76%,
      transparent 92%),
    /* right */
    linear-gradient(to bottom,
      transparent 12%,
      rgba(255,255,255,.14) 30%,
      rgba(255,255,255,.14) 70%,
      transparent 88%),
    /* bottom */
    linear-gradient(to right,
      transparent 12%,
      rgba(255,255,255,.05) 32%,
      rgba(255,255,255,.05) 68%,
      transparent 88%),
    /* left */
    linear-gradient(to bottom,
      transparent 12%,
      rgba(255,255,255,.14) 30%,
      rgba(255,255,255,.14) 70%,
      transparent 88%);
  background-size:
    100% 1px,
    1px 100%,
    100% 1px,
    1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
}
.ccard:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
}
/* Highlighted variants — accent-coloured top edge */
.ccard--hl::after {
  background-image:
    linear-gradient(to right, transparent 8%, rgba(34,197,94,.45) 24%, rgba(34,197,94,.55) 50%, rgba(34,197,94,.45) 76%, transparent 92%),
    linear-gradient(to bottom, transparent 12%, rgba(34,197,94,.18) 30%, rgba(34,197,94,.18) 70%, transparent 88%),
    linear-gradient(to right, transparent 12%, rgba(34,197,94,.06) 32%, rgba(34,197,94,.06) 68%, transparent 88%),
    linear-gradient(to bottom, transparent 12%, rgba(34,197,94,.18) 30%, rgba(34,197,94,.18) 70%, transparent 88%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
}
.ccard--hl2::after {
  background-image:
    linear-gradient(to right, transparent 8%, rgba(247,37,133,.40) 24%, rgba(247,37,133,.50) 50%, rgba(247,37,133,.40) 76%, transparent 92%),
    linear-gradient(to bottom, transparent 12%, rgba(247,37,133,.16) 30%, rgba(247,37,133,.16) 70%, transparent 88%),
    linear-gradient(to right, transparent 12%, rgba(247,37,133,.05) 32%, rgba(247,37,133,.05) 68%, transparent 88%),
    linear-gradient(to bottom, transparent 12%, rgba(247,37,133,.16) 30%, rgba(247,37,133,.16) 70%, transparent 88%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
}

.ccard__av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--av); flex-shrink: 0;
  margin-bottom: .1rem; position: relative;
}
/* Photo avatar — overrides the colored circle */
.ccard__av--img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  margin-bottom: .1rem;
  display: block;
  background: #2a2a30;
}
.av-ring {
  position: absolute; inset: -3px;
  border-radius: 50%; border: 2px solid var(--green);
  opacity: .7; animation: ringPulse 2s ease-in-out infinite;
}
.ccard__name  { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.88); line-height: 1.2; }
.ccard__niche {
  font-size: .62rem; font-weight: 700;
  padding: .1rem .5rem; border-radius: 99px;
}
.ccard__fans  { font-size: .63rem; color: var(--muted); font-weight: 500; }

.niche--fashion   { background: rgba(232,65,42,.18);   color: #f07060; }
.niche--fitness   { background: rgba(34,197,94,.15);   color: #4ade80; }
.niche--beauty    { background: rgba(247,37,133,.15);  color: #f472b6; }
.niche--tech      { background: rgba(245,183,49,.18);  color: #fbbf24; }
.niche--wellness  { background: rgba(96,165,250,.15);  color: #93c5fd; }
.niche--gaming    { background: rgba(192,38,211,.15);  color: #e879f9; }
.niche--food      { background: rgba(251,146,60,.15);  color: #fb923c; }
.niche--lifestyle { background: rgba(52,211,153,.15);  color: #34d399; }
.niche--travel    { background: rgba(45,212,191,.15);  color: #2dd4bf; }
.niche--finance   { background: rgba(99,102,241,.15);  color: #818cf8; }

/* Stats */
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 3rem;
}
.stat-card {
  position: relative;
  background: rgba(22, 22, 26, 0.97);
  border: none;
  border-radius: 20px;
  padding: 2rem 1.6rem;
  overflow: hidden;
  transition: all .35s var(--spring);
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
}

/* Kill old sheen */
.stat-card::before { display: none; }

/* 4 edge-only gradient lines — fade to transparent before each corner */
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    /* top — brightest, fades before corners */
    linear-gradient(to right,
      transparent 6%,
      rgba(255,255,255,.38) 22%,
      rgba(255,255,255,.46) 50%,
      rgba(255,255,255,.38) 78%,
      transparent 94%),
    /* right — medium, fades before corners */
    linear-gradient(to bottom,
      transparent 10%,
      rgba(255,255,255,.16) 28%,
      rgba(255,255,255,.16) 72%,
      transparent 90%),
    /* bottom — barely visible */
    linear-gradient(to right,
      transparent 10%,
      rgba(255,255,255,.06) 30%,
      rgba(255,255,255,.06) 70%,
      transparent 90%),
    /* left — medium, fades before corners */
    linear-gradient(to bottom,
      transparent 10%,
      rgba(255,255,255,.16) 28%,
      rgba(255,255,255,.16) 72%,
      transparent 90%);
  background-size:
    100% 1px,   /* top */
    1px 100%,   /* right */
    100% 1px,   /* bottom */
    1px 100%;   /* left */
  background-position:
    top,
    right,
    bottom,
    left;
  background-repeat: no-repeat;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 52px rgba(0,0,0,.38);
}

.stat-num {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
  margin-bottom: .5rem;
  position: relative; z-index: 1;
}
.stat--yellow { color: var(--yellow); }
.stat--green  { color: var(--green); }
.stat--pink   { color: var(--pink); }
.stat-lbl     { font-size: .8rem; color: var(--muted); font-weight: 500; position: relative; z-index: 1; }



/* Niche pills */
.niches { display: flex; flex-direction: column; gap: .9rem; }
.niches__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.npill {
  padding: .42rem 1.1rem;
  border-radius: 99px;
  font-size: .8rem; font-weight: 700;
  transition: all .3s var(--spring);
}
.npill:hover { transform: translateY(-4px) scale(1.07); }
.npill--fashion  { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color:#FFCA18; }
.npill--fitness  { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);  color:#E8524A; }
.npill--beauty   { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);  color:#F8B8D4; }
.npill--tech     { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);    color:#6963C4; }
.npill--travel   { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);  color:#18B86A; }
.npill--food     { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);   color:#ECEAF8; }
.npill--gaming   { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);  color:#FFCA18; }
.npill--wellness { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);  color:#E8524A; }
.npill--finance  { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);  color:#F8B8D4; }
.npill--lifestyle{ background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);  color:#6963C4; }

/* ══════════════════════════════════════════════════════════════
   FEATURE SECTIONS (ALL DARK)
   ══════════════════════════════════════════════════════════════ */
.fsec {
  padding: 7rem 1.5rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fsec2{
  background: var(--bg);
  padding: 1em 0em 2em 0em;
}

.fsec::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 75% at 15% 50%, rgba(123,47,247,.06) 0%, transparent 70%);
}
.fsec--flip::before {
  background: radial-gradient(ellipse 55% 75% at 85% 50%, rgba(232,65,42,.06) 0%, transparent 70%);
}

.fsec__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
}
.fsec--flip .fsec__inner {
  /* image goes right, text stays left */
}

.fsec__circle-img {
  width: min(460px, 100%);
  height: min(460px, 100%);
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.5));
  transition: transform .45s var(--spring);
}
.fsec__circle-img:hover { transform: scale(1.04) rotate(1.5deg) !important; }

.fsec__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin-bottom: 1.1rem;
}
.accent-yellow { color: var(--yellow); }
.accent-red    { color: var(--red); }
/* .accent-muted  { color: rgba(255,255,255,.35); } */

.fsec__body {
  font-size: .96rem; color: var(--muted2);
  line-height: 1.78; margin-bottom: 2rem;
  max-width: 430px;
}

/* Collab UI panel */
.ui-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
  display: flex; flex-direction: column; gap: .85rem;
  max-width: 340px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.ui-panel__label {
  font-size: .63rem; font-weight: 700;
  color: var(--muted); letter-spacing: .14em; text-transform: uppercase;
}
.ui-row {
  display: flex; align-items: center; gap: .85rem;
  transition: transform .25s var(--spring);
}
.ui-row:hover { transform: translateX(5px); }
.ui-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
}
.ui-name { flex: 1; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.85); }
.ui-stat { font-size: .82rem; font-weight: 700; }
.ui-stat--green { color: var(--green); text-shadow: 0 0 12px rgba(34,197,94,.4); }
.ui-stat--pink { color: var(--pink); text-shadow: 0 0 12px rgba(34,197,94,.4); }

/* Deal cards */
.deal-stack { display: flex; flex-direction: column; gap: .7rem; max-width: 420px; }
.deal-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,.04);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all .32s var(--spring);
  position: relative; overflow: hidden;
  /* Layered glass shadows */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),        /* outer glass rim */
    inset 0 1px 0 rgba(255,255,255,.15),     /* inner top highlight */
    0 6px 24px rgba(0,0,0,.32);             /* depth */
}
/* Diagonal light sheen — top-left to centre */
.deal-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    130deg,
    rgba(255,255,255,.09) 0%,
    rgba(255,255,255,.025) 38%,
    transparent 58%
  );
  pointer-events: none;
}
/* Top-edge highlight line */
.deal-card::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.38) 35%,
    rgba(255,255,255,.58) 50%,
    rgba(255,255,255,.38) 65%,
    transparent
  );
  pointer-events: none;
}
.deal-card:hover {
  transform: translateX(7px);
  background: rgba(255,255,255,.07);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 36px rgba(0,0,0,.42);
}
.deal-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #fff; flex-shrink: 0;
  position: relative; z-index: 1;
}
.deal-av--g { background: linear-gradient(135deg,#0a3a1a,#05220f); border: 1px solid rgba(34,197,94,.2); }
.deal-av--f { background: linear-gradient(135deg,#3a1a2a,#220a17); border: 1px solid rgba(247,37,133,.2); }
.deal-info { flex: 1; position: relative; z-index: 1; }
.deal-info strong { display: block; font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: .15rem; }
.deal-info span   { font-size: .72rem; color: var(--muted); }
.deal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0;
  position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   BRANDS / SOCIAL PROOF
   ══════════════════════════════════════════════════════════════ */
.brands-proof {
  background: var(--bg);
  padding: 6rem 1.5rem;
}
.brands-proof__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 3.5rem;
}
.brands-proof__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800; color: #fff;
  letter-spacing: -.03em; line-height: 1.1;
  margin-bottom: .9rem;
}
/* Pink accent on the "A" */
.brands-proof__a {
  color: var(--pink);
}
.brands-proof__body { font-size: .96rem; color: var(--muted2); line-height: 1.75; margin-bottom: 1.6rem; max-width: 400px; }

/* ── Brand Record Box ── */
.brand-record {
  position: relative;
  background: rgba(18,18,22,.97);
  border: none;
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  overflow: hidden;
  max-width: 380px;
  /* Same 4-edge glass as stat/creator cards */
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
/* 4-edge glass lines */
.brand-record::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(to right, transparent 6%, rgba(255,255,255,.34) 22%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.34) 78%, transparent 94%),
    linear-gradient(to bottom, transparent 10%, rgba(255,255,255,.13) 28%, rgba(255,255,255,.13) 72%, transparent 90%),
    linear-gradient(to right, transparent 10%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.05) 70%, transparent 90%),
    linear-gradient(to bottom, transparent 10%, rgba(255,255,255,.13) 28%, rgba(255,255,255,.13) 72%, transparent 90%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
}
.brand-record__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .7rem;
  position: relative; z-index: 1;
}
.brand-record__row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 0;
  /* border-top: 1px solid rgba(255,255,255,.06); */
  position: relative; z-index: 1;
}
.brand-record__check {
  font-size: .8rem;
  color: #22c55e;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.brand-record__name {
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  flex: 1;
}
.brand-record__verified {
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  font-weight: 500;
  letter-spacing: .02em;
}

.brands-proof__image { display: flex; justify-content: center; align-items: center; }
.brands-proof__image img {
  max-width: 380px;
  width: 100%;
  filter: drop-shadow(0 20px 44px rgba(0,0,0,.4));
  transition: transform .45s var(--spring);
}
.brands-proof__image img:hover { transform: scale(1.04) rotate(-1.5deg); }

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO SECTION
   ══════════════════════════════════════════════════════════════ */
.portfolio-sec {
  background: var(--bg2);
  padding: 6rem 1.5rem;
  overflow: hidden;
}
.portfolio-sec__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 4rem;
}

/* Title — "A portfolio built to speak for you" */
.portfolio-sec__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}
/* The leading "A" in lavender/purple gradient */
.portfolio-sec__a {
  background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* font-style: italic; */
}

.portfolio-sec__body {
  font-size: .96rem;
  color: var(--muted2);
  line-height: 1.78;
  max-width: 400px;
  margin-bottom: 2rem;
}

/* URL preview card */
.portfolio-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: border-color .3s, background .3s;
}
.portfolio-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(167,139,250,.25);
}
.portfolio-card__url {
  font-family: 'Cabinet Grotesk', monospace;
  font-size: .85rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .01em;
}
.portfolio-card__tags {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.pc-tag {
  padding: .28rem .85rem;
  background: rgba(167,139,250,.15);
  border: 1px solid rgba(167,139,250,.25);
  color: #c4b5fd;
  font-size: .76rem;
  font-weight: 700;
  border-radius: 99px;
  font-family: 'Cabinet Grotesk', sans-serif;
  transition: background .25s;
}
.pc-tag:hover {
  background: rgba(167,139,250,.28);
}
.portfolio-card__views {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 700;
  color: #22c55e;
  font-family: 'Cabinet Grotesk', sans-serif;
}

/* Right image */
.portfolio-sec__img-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
.portfolio-sec__img {
  width: 100%;
  max-width: 520px;
  border-radius: 18px;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.55));
  transition: transform .5s var(--spring), filter .4s;
}
.portfolio-sec__img:hover {
  transform: scale(1.025) translateY(-8px);
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.65));
}

/* ══════════════════════════════════════════════════════════════
   DMS SECTION
   ══════════════════════════════════════════════════════════════ */
.dms-sec {
  background: var(--bg);
  padding: 6rem 1.5rem;
  overflow: hidden;
}
.dms-sec__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 5rem;
}

/* Left image col */
.dms-sec__img-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Actual image */
.dms-img {
  width: 100%;
  max-width: 480px;
  display: block;
  filter: drop-shadow(0 32px 64px rgba(0,0,0,.55));
  transition: transform .5s var(--spring), filter .4s;
}
.dms-img:hover {
  transform: scale(1.025) translateY(-8px);
  filter: drop-shadow(0 44px 80px rgba(0,0,0,.65));
}

/* Placeholder — shows when image file is missing */
.dms-placeholder {
  position: relative;
  width: 100%;
  max-width: 480px;
}
.dms-placeholder--empty .dms-img {
  display: none;
}
.dms-placeholder__label {
  display: none;
}
.dms-placeholder--empty .dms-placeholder__label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
  aspect-ratio: 4/5;
  border: 2px dashed rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
  padding: 2rem;
}
.dms-placeholder__label code {
  background: rgba(255,255,255,.08);
  padding: .15em .5em;
  border-radius: 6px;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}

/* Right text col */
.dms-sec__text {
  max-width: 480px;
}
.dms-sec__num {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .1em;
  margin-bottom: 1.1rem;
  font-family: 'Cabinet Grotesk', sans-serif;
}
.dms-sec__title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 1.3rem;
}
/* "DMs" — green, matching reference */
.dms-sec__dm {
  font-style: normal;
  font-weight: 800;
  color: var(--green);
}
.dms-sec__body {
  font-size: .92rem;
  color: rgba(255,255,255,.42);
  line-height: 1.75;
  max-width: 360px;
  font-weight: 400;
  font-family: 'Cabinet Grotesk', sans-serif;
  margin-bottom: 1.6rem;
}

/* ── Collab notification cards — stacked deck ── */
.collab-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 440px;
  margin-top: 1.8rem;
}

.collab-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.1rem;
  background: rgba(24, 25, 22, 0.98);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s var(--spring);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* Stack layers — each card progressively narrower */
.collab-card:nth-child(1) {
  z-index: 3;
  margin: 0;
}
.collab-card:nth-child(2) {
  z-index: 2;
  margin: -17px 14px 0;
  opacity: .82;
}
.collab-card:nth-child(3) {
  z-index: 1;
  margin: -17px 28px 0;
  opacity: .62;
}

/* 4-edge glass lines */
.collab-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(to right, transparent 7%, rgba(255,255,255,.28) 22%, rgba(255,255,255,.36) 50%, rgba(255,255,255,.28) 78%, transparent 93%),
    linear-gradient(to bottom, transparent 12%, rgba(255,255,255,.11) 30%, rgba(255,255,255,.11) 70%, transparent 88%),
    linear-gradient(to right, transparent 12%, rgba(255,255,255,.04) 32%, rgba(255,255,255,.04) 68%, transparent 88%),
    linear-gradient(to bottom, transparent 12%, rgba(255,255,255,.11) 30%, rgba(255,255,255,.11) 70%, transparent 88%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
}
.collab-card:hover { transform: translateX(4px); }

/* Active / highlighted card (card 1) — green tinted glass */
.collab-card--active {
  background: rgba(20,28,22,.99);
}
.collab-card--active::after {
  background-image:
    linear-gradient(to right, transparent 7%, rgba(34,197,94,.26) 22%, rgba(34,197,94,.34) 50%, rgba(34,197,94,.26) 78%, transparent 93%),
    linear-gradient(to bottom, transparent 12%, rgba(34,197,94,.10) 30%, rgba(34,197,94,.10) 70%, transparent 88%),
    linear-gradient(to right, transparent 12%, rgba(34,197,94,.04) 32%, rgba(34,197,94,.04) 68%, transparent 88%),
    linear-gradient(to bottom, transparent 12%, rgba(34,197,94,.10) 30%, rgba(34,197,94,.10) 70%, transparent 88%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
}

/* Dot indicators */
.collab-card__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.collab-card__dot--green { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); }
.collab-card__dot--red   { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.5); }
.collab-card__dot--right { margin-left: auto; }

/* Avatar circle */
.collab-card__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
.collab-card__avatar--sm {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.08);
}

/* Text body */
.collab-card__body {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  flex: 1;
  min-width: 0;
  position: relative; z-index: 1;
}
.collab-card__top {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.collab-card__title {
  font-size: .84rem;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collab-card__sub {
  font-size: .72rem;
  color: rgba(255,255,255,.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "just now" green badge */
.collab-card__badge {
  font-size: .62rem;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34,197,94,.12);
  padding: .08em .45em;
  border-radius: 99px;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid rgba(34,197,94,.22);
}
/* Timestamp */
.collab-card__time {
  font-size: .68rem;
  color: rgba(255,255,255,.28);
  flex-shrink: 0;
  position: relative; z-index: 1;
}


/* ══════════════════════════════════════════════════════════════
   APP SECTION
   ══════════════════════════════════════════════════════════════ */
.app-sec {
  background: var(--bg2);
  padding: 6rem 1.5rem;
  position: relative; overflow: hidden;
}
.app-sec::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 70% 50%, rgba(123,47,247,.07) 0%, transparent 70%);
}
.app-sec__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 5rem;
  position: relative; z-index: 1;
}
.app-sec__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800; color: #fff;
  letter-spacing: -.03em; line-height: 1.1;
  margin-bottom: 1rem;
}
.app-sec__title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--red), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.app-sec__body { font-size: .96rem; color: var(--muted2); line-height: 1.78; margin-bottom: 2rem; max-width: 430px; }

.app-features { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.app-feat { display: flex; align-items: flex-start; gap: .85rem; }
.app-feat__icon { color: var(--red); font-size: .88rem; flex-shrink: 0; margin-top: .2rem; }
.app-feat strong { display: block; font-size: .92rem; font-weight: 700; color: rgba(255,255,255,.88); margin-bottom: .2rem; }
.app-feat span { font-size: .82rem; color: var(--muted); }

.app-badges { display: flex; gap: .7rem; flex-wrap: wrap; }
.app-badge {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  transition: all .3s var(--spring);
}
.app-badge:hover { border-color: var(--border2); background: var(--surface2); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.app-badge div { display: flex; flex-direction: column; }
.app-badge small { font-size: .68rem; color: var(--muted); }
.app-badge strong { font-size: .88rem; font-weight: 700; }

.app-sec__right { position: relative; display: flex; justify-content: center; align-items: center; }
.app-phone-glow {
  position: absolute;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(123,47,247,.3) 0%, transparent 70%);
  border-radius: 50%; filter: blur(50px); pointer-events: none;
}
.app-phone-img {
  max-height: 560px; width: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   GROWTH — CREATOR BUBBLE CLUSTER
   ══════════════════════════════════════════════════════════════ */
.growth {
  background: var(--bg2);
  padding: 6rem 1.5rem;
  overflow: hidden;
}
.growth__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: 3rem;
  min-height: 480px;
}

/* Left text */
.growth__num { display: none; }
.growth__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: 1.1rem;
}
.growth__body {
  font-size: .95rem;
  color: var(--muted2);
  line-height: 1.78;
  max-width: 340px;
  margin-bottom: 1.8rem;
}

/* ── YOUR NETWORK card ── */
.network-card {
  position: relative;
  max-width: 340px;
  background: rgba(18,18,22,.97);
  border: none;
  border-radius: 14px;
  padding: 1rem 1.25rem 1.1rem;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.network-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(to right, transparent 6%, rgba(255,255,255,.32) 22%, rgba(255,255,255,.40) 50%, rgba(255,255,255,.32) 78%, transparent 94%),
    linear-gradient(to bottom, transparent 10%, rgba(255,255,255,.13) 28%, rgba(255,255,255,.13) 72%, transparent 90%),
    linear-gradient(to right, transparent 10%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.05) 70%, transparent 90%),
    linear-gradient(to bottom, transparent 10%, rgba(255,255,255,.13) 28%, rgba(255,255,255,.13) 72%, transparent 90%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
}
.network-card__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  margin-bottom: .75rem;
  position: relative; z-index: 1;
}
/* Overlapping avatar row */
.network-card__avatars {
  display: flex;
  align-items: center;
  margin-bottom: .6rem;
  position: relative; z-index: 1;
}
.nav-av {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(18,18,22,.97);
  flex-shrink: 0;
  margin-left: -8px;
}
.nav-av:first-child { margin-left: 0; }
.nav-av--count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 28px;
  height: 28px;
  border-radius: 99px;
  padding: 0 .5em;
  font-size: .6rem;
  font-weight: 700;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
  border: 2px solid rgba(18,18,22,.97);
}
.network-card__sub {
  font-size: .72rem;
  color: rgba(255,255,255,.32);
  position: relative; z-index: 1;
}


/* Right cluster container */
.growth__cluster {
  position: relative;
  width: 100%;
  height: 460px;
}

/* ── Shared bubble base ── */
.bubble {
  position: absolute;
  width:  var(--s);
  height: var(--s);
  top:    var(--t);
  left:   var(--l);
  border-radius: 50%;
  animation: bubbleFloat var(--dur, 7s) var(--delay, 0s) ease-in-out infinite;
  will-change: transform;
}

@keyframes bubbleFloat {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  33%      { transform: translateY(-10px) rotate(2deg); }
  66%      { transform: translateY(-5px) rotate(-1.5deg); }
}

/* ── Avatar circles ── */
.bubble.av {
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.12);
  background: var(--surface2);
  transition: transform .35s var(--spring), box-shadow .3s;
  cursor: pointer;
}
.bubble.av:hover {
  transform: scale(1.12) !important;
  animation-play-state: paused;
  z-index: 10;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
.bubble.av img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Center hero avatar — yellow/gold ring */
.bubble.av--center {
  border: 3px solid #f5b731;
  box-shadow: 0 0 0 3px rgba(245,183,49,.25), 0 16px 40px rgba(0,0,0,.5);
  z-index: 2;
}
.bubble.av--center:hover {
  box-shadow: 0 0 0 5px rgba(245,183,49,.35), 0 20px 50px rgba(0,0,0,.6);
}

/* ── Decorative dot circles ── */
.bubble.dot {
  animation: bubbleFloat var(--dur, 7s) var(--delay, 0s) ease-in-out infinite alternate;
  opacity: .9;
}

/* ── Follower count badges ── */
.growth-badge {
  position: absolute;
  top:  var(--t);
  left: var(--l);
  padding: .22rem .65rem;
  background: #f5b731;
  color: #111;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .7rem;
  font-weight: 800;
  border-radius: 99px;
  white-space: nowrap;
  z-index: 5;
  animation: badgeFloat 5s ease-in-out infinite;
  box-shadow: 0 4px 14px rgba(245,183,49,.35);
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ══════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════ */
.faq {
  /* background: var(--bg); */
  padding: 7rem 1.5rem;
}
.faq__head { text-align: center; margin-bottom: 4rem; }
.faq__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800; color: #fff;
  letter-spacing: -.04em; margin-bottom: .75rem;
  line-height: 1.05;
}
.faq__title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--red), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.faq__sub { font-size: .94rem; color: rgba(255,255,255,.4); }

.faq__list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }

.faq__item {
  position: relative;
  border: none;
  border-radius: 14px;
  background: rgba(18,18,22,.97);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .3s;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
/* 4-edge glass lines on each FAQ item */
/* .faq__item::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right, transparent 5%, rgba(255,255,255,.26) 20%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.26) 80%, transparent 95%),
    linear-gradient(to bottom, transparent 12%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.10) 70%, transparent 88%),
    linear-gradient(to right, transparent 12%, rgba(255,255,255,.04) 30%, rgba(255,255,255,.04) 70%, transparent 88%),
    linear-gradient(to bottom, transparent 12%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.10) 70%, transparent 88%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
} */
/* .faq__item.open { box-shadow: 0 4px 24px rgba(232,65,42,.08); } */
/* .faq__item.open::before {
  background-image:
    linear-gradient(to right, transparent 5%, rgba(232,65,42,.30) 20%, rgba(232,65,42,.38) 50%, rgba(232,65,42,.30) 80%, transparent 95%),
    linear-gradient(to bottom, transparent 12%, rgba(232,65,42,.12) 30%, rgba(232,65,42,.12) 70%, transparent 88%),
    linear-gradient(to right, transparent 12%, rgba(232,65,42,.04) 30%, rgba(232,65,42,.04) 70%, transparent 88%),
    linear-gradient(to bottom, transparent 12%, rgba(232,65,42,.12) 30%, rgba(232,65,42,.12) 70%, transparent 88%);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  background-repeat: no-repeat;
} */

.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem;
  font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.78);
  text-align: left; gap: 1rem; transition: color .2s;
  position: relative; z-index: 2;
}
.faq__q:hover { color: #fff; }
.faq__icon {
  font-size: 1.15rem; color: rgba(255,255,255,.35);
  transition: transform .35s var(--spring), color .25s;
  line-height: 1; flex-shrink: 0;
}
.faq__item.open .faq__icon { transform: rotate(45deg); color: var(--red); }

.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); position: relative; z-index: 2; }
.faq__a p { padding: 0 1.5rem 1.3rem; font-size: .91rem; color: rgba(255,255,255,.45); line-height: 1.78; }
.faq__item.open .faq__a { max-height: 300px; }


/* ══════════════════════════════════════════════════════════════
   FOOTER CTA
   ══════════════════════════════════════════════════════════════ */
.ftcta {
  background: var(--bg);
  padding: 5rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative; overflow: hidden;
}
/* subtle red glow behind image */
.ftcta__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 45% 70% at 75% 50%, rgba(232,65,42,.09) 0%, transparent 65%);
  pointer-events: none;
}
.ftcta__inner {
  display: grid; grid-template-columns: 1fr 0.85fr;
  align-items: center; gap: 4rem;
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
}
.ftcta__text { }
.ftcta__headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.045em; line-height: 1.0;
  margin-bottom: 1.8rem;
  color: var(--muted);
}
.ftcta__dim { color: rgba(255,255,255,.25); }
.ftcta__white { color: #fff; }
.ftcta__picked {
  color: var(--red);
  -webkit-text-fill-color: var(--red);
}

/* Buttons row */
.ftcta__btns {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Primary CTA inherits nav__cta--lg — no changes needed */
/* Ghost "See how it works" button */
.ftcta__ghost {
  display: inline-flex; align-items: center;
  padding: .75rem 1.6rem;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.75);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .9rem; font-weight: 600;
  transition: border-color .25s, background .25s, color .25s;
  white-space: nowrap;
}
.ftcta__ghost:hover {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.09);
  color: #fff;
}

/* Image column — rounded card exactly like reference */
.ftcta__img-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ftcta__card {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.ftcta__card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,.07);
  position: relative;
}
.footer__bar { padding: 0; }
.footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  padding: 1.2rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
.footer__logo {
  font-size: .95rem;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  letter-spacing: -.02em;
}
.footer__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
}
.footer__nav a {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  transition: color .22s;
}
.footer__nav a:hover { color: rgba(255,255,255,.75); }
.footer__copy {
  font-size: .76rem;
  color: rgba(255,255,255,.28);
}

/* Mobile: stack logo+copyright on one row, nav centered below */
@media (max-width: 600px) {
  .footer__bar-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 1.4rem;
    gap: .75rem;
  }
  .footer__nav {
    gap: .5rem 1.1rem;
  }
  .footer__copy {
    font-size: .72rem;
  }
}


/* ── CURSOR GLOW ─────────────────────────────────────────────── */
.cursor-glow {
  position: fixed; width: 300px; height: 300px; border-radius: 50%;
  pointer-events: none; z-index: 9990;
  background: radial-gradient(circle, rgba(232,65,42,.05) 0%, transparent 70%);
  transform: translate(-50%,-50%);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Cards slightly narrower on tablet */
  .ccard { width: 145px; }
}
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }

  .hero__card--tl { left: -4%; font-size: .75rem; }
  .hero__card--tr { right: -4%; font-size: .75rem; }
  .hero__card--bl { left: -4%; font-size: .75rem; }

  .fsec__inner,
  .brands-proof__inner,
  .portfolio-sec__inner,
  .dms-sec__inner,
  .app-sec__inner,
  .growth__inner,
  .ftcta__inner {
    grid-template-columns: 1fr; gap: 3rem;
  }
  .growth__cluster { height: 380px; }
  .fsec--flip .fsec__img-col { order: -1; }
  .fsec__circle-img { width: min(340px,90%); height: min(340px,90%); margin: 0 auto; }
  .stats-grid { grid-template-columns: 1fr; gap: .75rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .ftcta__img-col { justify-content: center; }
  .ftcta__card { width: min(380px, 90%); }
  .creative__orbs { height: 320px; }

  /* Tablet: moderate spacing */
  .stats-section, .brands-proof, .portfolio-sec,
  .app-sec, .faq, .ftcta { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .dms-sec  { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .growth   { padding-top: 4rem;   padding-bottom: 4rem; }
}
@media (max-width: 600px) {
  .hero__headline { font-size: clamp(2rem, 9.5vw, 3rem); letter-spacing: -.025em; line-height: 1.0; }
  /* Narrower cards + slower scroll on mobile */
  .ccard { width: 130px; }
  .ccard-track--left  { animation-duration: 24s; }
  .ccard-track--right { animation-duration: 24s; }
  /* .hero__card { display: none; } */
  .footer__cols { grid-template-columns: 1fr 1fr; }

  /* Mobile: tight even spacing throughout */
  .stats-section, .brands-proof, .portfolio-sec,
  .dms-sec, .app-sec, .growth, .faq, .ftcta {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .marquee-section { padding: 2rem 0; }
  .fsec     { padding: 3rem 1.2rem; }
  .portfolio-card { max-width: 100%; }
  .footer__inner { padding: 2.5rem 1.2rem; }
  /* Brands proof — keep image, make it compact */
  .brands-proof__image { display: flex; }
  .brands-proof__image img { max-width: 260px; width: 85%; }
  .brands-proof__inner { gap: 1.5rem; }
  .brands-proof__body { margin-bottom: 1rem; }
}