/* ============================================================
   WE SHARE MEDIA — Design System
   RETRO-FUTURE POP · Core Cyan #00B4D8 · Cyber Yellow #FFEE32
   Hot Pink #FF0054 · Deep Teal #003049 · geometric grotesk
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Retro-Future Pop palette ---- */
  --cyan:        #00B4D8;
  --cyan-600:    #0094B4;
  --cyan-700:    #00718B;
  --cyan-300:    #5BD3EC;
  --cyan-100:    #CDEEF6;
  --cyan-soft:   #E6F8FC;

  --pink:        #FF0054;
  --pink-600:    #DB0048;
  --pink-300:    #FF6695;
  --pink-soft:   #FFE6ED;

  --yellow:      #FFEE32;
  --yellow-600:  #E4D200;
  --yellow-300:  #FFF59B;
  --yellow-soft: #FFFBD2;

  /* ink = Deep Teal base for all dark surfaces */
  --ink:         #003049;
  --ink-800:     #00405F;
  --ink-700:     #0A5876;
  --teal-900:    #00212F;
  --teal-950:    #001824;

  /* neutrals */
  --line:        #E2EAEF;
  --line-2:      #EDF2F6;
  --muted:       #4E6573;
  --muted-2:     #7A8C97;
  --paper:       #FFFFFF;
  --mist:        #EFF5F8;
  --mist-2:      #E2EDF2;

  /* type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Manrope', system-ui, sans-serif;

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 16px;
  --radius-lg: 24px;

  /* fx */
  --shadow-sm: 0 2px 8px rgba(0,48,73,.06), 0 1px 2px rgba(0,48,73,.05);
  --shadow:    0 22px 60px -26px rgba(0,48,73,.34);
  --shadow-cyan: 0 22px 60px -24px rgba(0,180,216,.5);
  --shadow-pink: 0 22px 60px -24px rgba(255,0,84,.4);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- liquid glass system ---- */
  --glass-bg:        rgba(255,255,255,.55);
  --glass-bg-strong: rgba(255,255,255,.7);
  --glass-bg-soft:   rgba(255,255,255,.42);
  --glass-blur:      blur(18px) saturate(1.45);
  --glass-blur-lg:   blur(30px) saturate(1.5);
  --glass-border:    1px solid rgba(255,255,255,.75);
  --glass-hi:        inset 0 1px 0 rgba(255,255,255,.6);
  --glass-shadow:    0 20px 54px -30px rgba(0,48,73,.42);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px; }
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:none; }
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:
    radial-gradient(42% 30% at 100% 2%, rgba(0,180,216,.06), transparent 62%),
    radial-gradient(40% 32% at 0% 30%, rgba(255,0,84,.045), transparent 62%),
    radial-gradient(38% 30% at 92% 70%, rgba(255,238,50,.05), transparent 62%),
    var(--paper);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
::selection{ background:var(--cyan); color:#fff; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(46px, 5.5vw, 80px); }
.section--tight{ padding-block: clamp(32px,4vw,54px); }

/* ---------- type scale ---------- */
.kicker{
  font-family:var(--display); font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; font-size:13px; color:var(--cyan-600);
  display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--cyan); display:inline-block; }
.kicker--center{ justify-content:center; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.02; margin:0;
  letter-spacing:-.02em; }
.display{ font-size:clamp(34px, 5.6vw, 66px); line-height:.96; letter-spacing:-.035em; }
.h-sec{ font-size:clamp(26px, 3.4vw, 42px); line-height:1.02; letter-spacing:-.03em; }
.h-card{ font-size:clamp(19px,1.8vw,24px); line-height:1.1; }
.lead{ font-size:clamp(15.5px,1.2vw,18px); color:var(--muted); max-width:58ch; }
.em-cyan{ color:var(--cyan); }
.outline-txt{ color:transparent; -webkit-text-stroke:2px var(--ink); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:600; font-size:15px; letter-spacing:.01em; padding:13px 22px;
  border-radius:999px; border:1.5px solid transparent; transition:.25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .25s var(--ease); }
.btn--primary{ background:var(--cyan); color:#fff; box-shadow:var(--shadow-cyan); }
.btn--primary:hover{ background:var(--cyan-600); transform:translateY(-2px); }
.btn--primary:hover svg{ transform:translateX(4px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--ink-700); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); }
.btn--lg{ padding:16px 28px; font-size:15.5px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80; height:72px;
  display:flex; align-items:center; transition:.3s var(--ease);
}
.nav__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:28px; }
.nav__logo{ height:32px; width:auto; }
.nav__logo--dark{ display:none; }
.nav__spacer{ flex:1; }
.nav__links{ display:flex; gap:6px; align-items:center; }
.nav__link{
  font-family:var(--display); font-weight:500; font-size:15px; padding:9px 14px;
  border-radius:10px; color:var(--ink); transition:.2s; position:relative;
}
.nav__link:hover{ color:var(--cyan-600); }
.nav__link.is-active{ color:var(--cyan-600); }
.nav__link.is-active::after{ content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:2px; background:var(--cyan); border-radius:2px; }
.nav__tools{ display:flex; align-items:center; gap:12px; }

.home-page .nav__inner{ max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); gap:22px; }
.home-page .nav__logo{ height:38px; }
.home-page .burger{ width:48px; height:48px; border-radius:14px; border-color:rgba(255,255,255,.28); box-shadow:var(--shadow-sm); }
.home-page .burger span,
.home-page .burger span::before,
.home-page .burger span::after{ width:19px; }
.home-page .nav.is-stuck .burger{ width:44px; height:44px; border-radius:13px; }

.lang{
  display:inline-flex; border:1.5px solid var(--line); border-radius:999px; overflow:hidden;
  font-family:var(--display); font-weight:600; font-size:12.5px;
}
.lang button{ background:none; border:0; padding:7px 12px; color:var(--muted-2); letter-spacing:.04em; }
.lang button.is-on{ background:var(--ink); color:#fff; }

/* scrolled state */
.nav.is-stuck{ height:60px; background:rgba(255,255,255,.7); backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.6); box-shadow:0 10px 30px -24px rgba(0,48,73,.45); }
.nav.is-stuck .nav__logo{ height:30px; }

/* nav on dark hero (top, not stuck) */
.nav.on-dark:not(.is-stuck) .nav__link{ color:rgba(255,255,255,.86); }
.nav.on-dark:not(.is-stuck) .nav__link:hover{ color:#fff; }
.nav.on-dark:not(.is-stuck) .nav__logo--light{ display:none; }
.nav.on-dark:not(.is-stuck) .nav__logo--dark{ display:block; }
.nav.on-dark:not(.is-stuck) .lang{ border-color:rgba(255,255,255,.25); }
.nav.on-dark:not(.is-stuck) .lang button{ color:rgba(255,255,255,.65); }
.nav.on-dark:not(.is-stuck) .lang button.is-on{ background:#fff; color:var(--ink); }
.nav.on-dark:not(.is-stuck) .btn--dark{ background:#fff; color:var(--ink); }

.burger{ display:none; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line);
  background:#fff; align-items:center; justify-content:center; }
.burger span{ position:relative; width:18px; height:2px; background:var(--ink); transition:.2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

/* slide-out side drawer */
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:120; width:min(348px, 86vw);
  background:linear-gradient(180deg, rgba(0,48,73,.82), rgba(0,24,36,.9)); color:#fff;
  backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-left:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; padding:22px clamp(22px,5vw,30px) 30px;
  transform:translateX(100%); transition:transform .4s var(--ease);
  box-shadow:-34px 0 90px -44px rgba(0,0,0,.7); overflow-y:auto; }
.drawer.is-open{ transform:translateX(0); }
.drawer__scrim{ position:fixed; inset:0; z-index:110; background:rgba(0,24,36,.52); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease); }
.drawer__scrim.is-open{ opacity:1; visibility:visible; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; }
.drawer__close{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  font-size:24px; line-height:1; width:40px; height:40px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; transition:.2s var(--ease); }
.drawer__close:hover{ background:rgba(255,255,255,.16); }
.drawer__links{ display:flex; flex-direction:column; gap:2px; margin-top:26px; }
.drawer__links a{ font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-.01em;
  padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.1); transition:.2s var(--ease);
  display:flex; align-items:center; justify-content:space-between; }
.drawer__links a::after{ content:"→"; opacity:0; transform:translateX(-6px); transition:.2s var(--ease);
  color:var(--cyan-300); }
.drawer__links a:hover{ color:var(--cyan-300); padding-left:10px; }
.drawer__links a:hover::after{ opacity:1; transform:translateX(0); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; }

/* --- shared chips --- */
.chiprow{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  font-family:var(--display); font-weight:500; font-size:14px; }
.chip--out{ border:1.5px solid var(--line); color:var(--ink); background:#fff; }
.chip--cyan{ background:var(--cyan-soft); color:var(--cyan-700); }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); }

@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------- DARK HERO (retro-future stage) ---------- */
#hero-dark{ background:var(--teal-900); color:#fff; }
.hv-dark{ position:relative; min-height:min(92vh, 760px); display:flex; align-items:center; overflow:hidden;
  padding-top:clamp(96px,12vh,116px); padding-bottom:clamp(40px,6vh,64px);
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(0,180,216,.22), transparent 55%),
    radial-gradient(90% 70% at -5% 110%, rgba(255,0,84,.16), transparent 55%),
    linear-gradient(160deg, var(--teal-900), var(--teal-950) 70%); }
/* drifting colour orbs */
.hv-dark__glow{ position:absolute; width:680px; height:680px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(0,180,216,.55), transparent 60%);
  right:-200px; top:-180px; filter:blur(40px); mix-blend-mode:screen;
  animation:floatOrb 18s var(--ease) infinite alternate; }
.hv-dark__glow.two{ left:-240px; bottom:-260px; top:auto; right:auto; width:620px; height:620px;
  background:radial-gradient(circle, rgba(255,0,84,.5), transparent 60%);
  animation:floatOrb2 22s var(--ease) infinite alternate; }
.hv-dark__glow.three{ left:46%; top:34%; width:380px; height:380px;
  background:radial-gradient(circle, rgba(255,238,50,.34), transparent 62%);
  animation:floatOrb3 16s var(--ease) infinite alternate; }
@keyframes floatOrb{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-70px,60px) scale(1.12); } }
@keyframes floatOrb2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(80px,-50px) scale(1.15); } }
@keyframes floatOrb3{ from{ transform:translate(0,0) scale(1); opacity:.8; } to{ transform:translate(-50px,-40px) scale(1.25); opacity:1; } }
/* fine grain + subtle grid for depth */
.hv-dark::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 75%);
          mask:radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 75%); }
.hv-dark::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.hv-dark__mark{ position:absolute; right:4%; bottom:-4%; width:min(40vw,440px); opacity:.07; z-index:1; }
.hv-dark__inner{ position:relative; z-index:3; }
.home-page .hv-dark__inner{ width:min(100%, 1240px); padding-inline:clamp(20px,4vw,48px); margin-inline:auto; }
.hv-dark .display{ color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.25); max-width:12ch; }
.hv-dark .em-cyan{
  background:linear-gradient(100deg, var(--cyan-300) 10%, var(--cyan) 40%, var(--pink) 92%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none; }
.hv-dark .lead{ color:rgba(255,255,255,.74); }
.hv-dark .kicker{ color:var(--cyan-300); }
.hv-dark .kicker::before{ background:var(--cyan-300); }
.hv-dark__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hv-dark__stats{ display:flex; gap:28px; flex-wrap:wrap; margin-top:30px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14); }
.hv-dark__stats b{ font-family:var(--display); font-size:clamp(26px,2.8vw,38px); font-weight:700;
  display:block; line-height:1; color:#fff; }
.hv-dark__stats > div:nth-child(1) b em{ color:var(--cyan-300); font-style:normal; }
.hv-dark__stats > div:nth-child(2) b em{ color:var(--pink-300); font-style:normal; }
.hv-dark__stats > div:nth-child(3) b em{ color:var(--yellow); font-style:normal; }
.hv-dark__stats span{ font-size:13.5px; color:rgba(255,255,255,.6); letter-spacing:.02em; }
.hv-dark__grid{
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(280px, .72fr); gap:clamp(28px,4vw,60px);
  align-items:center;
}
.hv-dark__copy{ max-width:660px; }
.hv-dark__media{ justify-self:end; width:min(100%, 330px); display:grid; gap:16px; }
/* hero reel — classy, simple framing (no device chrome) */
.hv-dark__media{ position:relative; }
.hv-dark__media::before{ /* soft accent halo so the reel floats off the stage */
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:118%; height:84%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,180,216,.26), rgba(255,0,84,.08) 62%, transparent 78%);
  filter:blur(38px);
}
.hero-phone{
  position:relative; z-index:1; width:100%;
  border-radius:24px; overflow:hidden;
  box-shadow:0 44px 90px -44px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.09);
  animation:heroPhoneFloat 7s ease-in-out infinite;
}
.hero-phone__frame{
  position:relative; overflow:hidden; border-radius:24px; aspect-ratio:9/16; background:#000;
}
.hero-phone__frame video{ width:100%; height:100%; object-fit:cover; display:block; }
/* whisper-thin top sheen for depth */
.hero-phone__frame::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.07), transparent 14%); }
/* "promo" live badge */
.hero-phone__badge{ position:absolute; left:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px; background:rgba(0,18,28,.42);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.2); color:#fff;
  font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.hero-phone__badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 9px rgba(255,0,84,.9); animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.85); } }
@media (prefers-reduced-motion: reduce){ .hero-phone__badge .dot{ animation:none; } }
@keyframes heroPhoneFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (prefers-reduced-motion: reduce){
  .hv-dark__glow,.hv-dark__glow.two,.hv-dark__glow.three{ animation:none; }
  .hero-phone{ animation:none; }
}

/* ============================================================
   MARQUEE LOGOS / CLIENTS
   ============================================================ */
.clients__rail{ overflow:hidden; margin-top:clamp(30px,4vw,48px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.clients__track{ display:flex; align-items:center; gap:clamp(18px,2.2vw,30px); width:max-content; animation:scrollx 58s linear infinite; }
.clients__rail:hover .clients__track{ animation-play-state:paused; }
.clients__track img{ height:auto; width:auto; max-height:var(--lh,46px); max-width:100%; object-fit:contain;
  transition:transform .35s var(--ease); }
.client-logo:hover img{ filter:grayscale(0); opacity:1; }
.client-fallback{ font-family:var(--display); font-weight:700; font-size:21px; color:var(--muted-2);
  letter-spacing:.02em; white-space:nowrap; }

/* ============================================================
   STATS BAND
   ============================================================ */
.stats{ background:var(--ink); color:#fff; }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.stat{ padding:14px 8px; }
.stat b{ font-family:var(--display); font-weight:700; font-size:clamp(50px,7vw,92px); line-height:.9;
  letter-spacing:-.04em; display:flex; align-items:flex-start; }
.stat b .plus{ color:var(--cyan-300); font-size:.5em; margin-top:.1em; }
.stat > span{ display:block; margin-top:10px; font-size:15px; color:rgba(255,255,255,.62);
  font-family:var(--display); font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.stats--light{ background:var(--mist); color:var(--ink); }
.stats--light .stat > span{ color:var(--muted); }
.stats--light .stat b .plus{ color:var(--cyan); }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-head{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; margin-bottom:46px; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc{ background:var(--glass-bg-strong); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:var(--glass-border); border-radius:var(--radius); padding:30px; box-shadow:var(--glass-hi);
  display:flex; flex-direction:column; gap:14px; transition:.3s var(--ease); position:relative; overflow:hidden; }
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow), var(--glass-hi); border-color:rgba(255,255,255,.9); }
.svc__num{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--cyan-600);
  letter-spacing:.1em; }
.svc__ic{ width:54px; height:54px; border-radius:14px; background:var(--cyan-soft); color:var(--cyan-700);
  display:flex; align-items:center; justify-content:center; }
.svc__ic svg{ width:26px; height:26px; }
.svc h3{ font-size:22px; }
.svc p{ margin:0; color:var(--muted); font-size:15.5px; }
.svc::after{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--cyan); transition:.35s var(--ease); }
.svc:hover::after{ width:100%; }

/* ============================================================
   PROCESS
   ============================================================ */
.proc{ background:var(--mist); }
.proc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:p; }
.proc-video{
  margin:0 0 clamp(30px,4vw,42px);
  border-radius:28px;
  overflow:hidden;
  background:#041822;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  aspect-ratio:16 / 9;
}
.proc-video video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.proc-step{ position:relative; padding-top:30px; }
.proc-step__n{ font-family:var(--display); font-weight:700; font-size:18px; color:#fff;
  width:48px; height:48px; border-radius:14px; background:var(--cyan); display:flex;
  align-items:center; justify-content:center; box-shadow:var(--shadow-cyan); }
.proc-step h3{ font-size:24px; margin:22px 0 10px; }
.proc-step p{ margin:0; color:var(--muted); }
.proc-step__line{ position:absolute; top:54px; left:60px; right:-22px; height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent); }
.proc-step:last-child .proc-step__line{ display:none; }
/* animated pulse travelling along the connector */
.proc-step__line::after{ content:""; position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%;
  transform:translateY(-50%); background:var(--cyan); box-shadow:0 0 12px 2px var(--cyan);
  animation:procFlow 2.8s var(--ease-out) infinite; }
.proc-grid .proc-step:nth-child(2) .proc-step__line::after{ background:var(--pink); box-shadow:0 0 12px 2px var(--pink); animation-delay:.5s; }
@keyframes procFlow{ 0%{ left:-2%; opacity:0; } 12%{ opacity:1; } 80%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .proc-step__line::after{ animation:none; opacity:0; } }

/* ============================================================
   CREATORS
   ============================================================ */
.creators-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.creators-grid .creator,
.creator-carousel__track .creator{
  border:0; border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm);
  transition:.3s var(--ease); text-align:left; padding:0; color:var(--ink);
}
.creators-grid .creator:hover,
.creator-carousel__track .creator:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.creator__top{
  position:relative; min-height:138px; padding:22px; display:flex; align-items:flex-start; justify-content:space-between;
  background:linear-gradient(135deg, var(--cyan), var(--cyan-700));
}
.creator__top--pink{ background:linear-gradient(135deg, var(--pink), #ff5b8f); }
.creator__top--yellow{ background:linear-gradient(135deg, var(--yellow), #ffd54d); color:var(--ink); }
.creator__avatar{
  width:84px; height:84px; border-radius:50%; object-fit:cover; border:4px solid rgba(255,255,255,.78);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.45);
}
.creator__stat{
  display:inline-flex; align-items:center; padding:10px 12px; border-radius:999px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(8px);
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff;
}
.creator__top--yellow .creator__stat{ background:rgba(255,255,255,.46); color:var(--ink); }
.creator__stat--muted{ background:rgba(0,48,73,.14); color:var(--ink); }
.creator__body{ padding:22px; display:grid; gap:12px; }
.creator__body h3{ font-size:22px; margin:0; }
.creator__body p{ margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.creator__eyebrow{
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan-600);
}
.creator__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.creator__chips span{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:var(--mist);
  font-family:var(--display); font-size:12px; font-weight:600; color:var(--ink);
}

/* ============================================================
   SHARED MEDIA FRAME
   ============================================================ */
.case__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--ink-700),var(--ink)); }
.case__ph img{ width:46%; opacity:.16; }

/* ============================================================
   CREATOR MODAL
   ============================================================ */
body.is-locked{ overflow:hidden; }
.creator-modal{
  position:fixed; inset:0; z-index:160; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.creator-modal[hidden]{ display:none !important; }
.creator-modal__backdrop{
  position:absolute; inset:0; background:rgba(0,18,28,.62);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
/* ---- liquid-glass profile dialog ---- */
.creator-modal__dialog{
  position:relative; width:min(100%, 880px); max-height:92vh; overflow:auto; z-index:1;
  border-radius:30px; border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(34px) saturate(1.6); -webkit-backdrop-filter:blur(34px) saturate(1.6);
  box-shadow:0 50px 120px -50px rgba(0,18,28,.75);
  /* per-creator accent (set via [data-accent]) */
  --m-accent:var(--cyan); --m-deep:var(--cyan-700); --m-soft:var(--cyan-soft); --m-rgb:0,180,216;
  scrollbar-width:none;
}
.creator-modal__dialog::-webkit-scrollbar{ display:none; }
.creator-modal__dialog[data-accent="pink"]{ --m-accent:var(--pink); --m-deep:var(--pink-600); --m-soft:var(--pink-soft); --m-rgb:255,0,84; }
.creator-modal__dialog[data-accent="yellow"]{ --m-accent:var(--yellow); --m-deep:#8a7c00; --m-soft:var(--yellow-soft); --m-rgb:255,210,0; }
.creator-modal__dialog::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px; z-index:4; border-radius:30px 30px 0 0;
  background:linear-gradient(90deg, var(--cyan), var(--pink) 55%, var(--yellow));
}
.creator-modal__close{
  position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; z-index:5;
  border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.18); color:#fff; font-size:24px; line-height:1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:.2s var(--ease);
}
.creator-modal__close:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:rotate(90deg); }

/* cover banner */
.creator-modal__cover{
  position:relative; height:138px; border-radius:30px 30px 0 0; overflow:hidden;
  background:
    radial-gradient(130% 180% at 12% -20%, rgba(var(--m-rgb),.6), transparent 58%),
    radial-gradient(120% 150% at 100% 0%, rgba(0,180,216,.28), transparent 55%),
    linear-gradient(120deg, var(--ink), var(--teal-950));
}
.creator-modal__cover::after{
  content:""; position:absolute; right:-18px; bottom:-34px; width:158px; height:158px; opacity:.12;
  background:url("assets/mark-white.png") no-repeat center/contain;
}

.creator-modal__inner{ padding:0 clamp(20px,3vw,34px) clamp(26px,3vw,34px); }

/* head — centred profile */
.creator-modal__head{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.creator-modal__avatar{
  margin-top:-68px; width:128px; height:128px; border-radius:50%; padding:4px; position:relative; z-index:2;
  background:linear-gradient(135deg, var(--m-accent), rgba(var(--m-rgb),.35));
  box-shadow:0 22px 48px -22px rgba(var(--m-rgb),.8);
}
.creator-modal__avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #fff; display:block; }
.creator-modal__role{
  margin-top:16px; display:inline-flex; align-items:center; padding:7px 13px; border-radius:999px;
  background:var(--m-soft); color:var(--m-deep);
  font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.creator-modal__head h3{ margin-top:13px; font-size:clamp(23px,2.6vw,32px); }
.creator-modal__handle{
  margin-top:6px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2);
}
.creator-modal__head > p{ margin:14px auto 0; color:var(--muted); max-width:50ch; }

/* glass stat tiles */
.creator-modal__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:26px; }
.creator-modal__stat{
  border-radius:18px; padding:16px 14px; text-align:center;
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.7);
}
.creator-modal__stat:first-child{
  background:linear-gradient(165deg, rgba(var(--m-rgb),.20), rgba(255,255,255,.4));
  border-color:rgba(var(--m-rgb),.3);
}
.creator-modal__stat:first-child b{ color:var(--m-deep); }
.creator-modal__stat b{ display:block; font-family:var(--display); font-size:clamp(22px,2.4vw,30px); line-height:1; color:var(--ink); }
.creator-modal__stat span{
  display:block; margin-top:8px; color:var(--muted-2); font-family:var(--display);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.creator-modal__tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; justify-content:center; }
.creator-modal__tags span{
  display:inline-flex; align-items:center; padding:8px 13px; border-radius:999px;
  background:var(--ink); color:#fff; font-family:var(--display); font-size:12px; font-weight:600;
}

/* latest creator video */
.creator-modal__video[hidden]{ display:none !important; }
.creator-modal__video{
  margin-top:22px; padding:18px; border-radius:22px; border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(160deg, rgba(var(--m-rgb),.12), rgba(255,255,255,.42));
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center;
}
.creator-modal__video small{
  display:block; margin-bottom:6px; font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--m-deep);
}
.creator-modal__video-frame{
  position:relative; width:158px; aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  background:var(--teal-950); box-shadow:0 24px 50px -28px rgba(0,48,73,.55); flex:0 0 auto;
}
.creator-modal__video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.creator-modal__video-tag{
  position:absolute; left:10px; bottom:10px; padding:7px 11px; border-radius:999px;
  background:rgba(0,24,36,.72); color:#fff; font-family:var(--display); font-size:10px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.creator-modal__video-copy strong{
  display:block; font-family:var(--display); font-size:18px; color:var(--ink); margin-bottom:6px;
}
.creator-modal__video-copy p{ margin:0; color:var(--muted); font-size:14.5px; }

/* glass detail blocks */
.creator-modal__body{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.creator-modal__block{
  padding:20px; border-radius:20px; border:1px solid rgba(255,255,255,.65); background:rgba(255,255,255,.45);
}
.creator-modal__block small{
  display:block; margin-bottom:12px; font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.creator-modal__block p{ margin:0; color:var(--muted); }
.creator-modal__links{ display:flex; flex-wrap:wrap; gap:10px; }
.creator-modal__links a{
  display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:13px;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.75); color:var(--ink);
  font-family:var(--display); font-weight:600; transition:.2s var(--ease);
}
.creator-modal__links a:hover{ background:#fff; transform:translateY(-1px); }
.creator-modal__links a span{ color:var(--m-deep); }
.creator-modal__publications{ display:grid; gap:12px; }
.creator-modal__publication{
  display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center;
  border-radius:16px; padding:10px; background:rgba(255,255,255,.55); transition:.2s var(--ease);
}
.creator-modal__publication:hover{ background:#fff; }
.creator-modal__publication img{ width:76px; height:76px; border-radius:13px; object-fit:cover; }
.creator-modal__publication strong{
  display:block; font-family:var(--display); font-size:15px; color:var(--ink);
}
.creator-modal__publication span{ display:block; margin-top:4px; color:var(--muted); font-size:14px; }
.creator-modal__empty{ margin:0; color:var(--muted); font-size:14px; }
.creator-modal__highlights{
  margin:14px 0 0; padding-left:18px; color:var(--muted); display:grid; gap:8px;
}

/* ============================================================
   SPLIT / ABOUT
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); align-items:center; }
.split__media{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:5/6; position:relative; background:var(--mist); }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__media video{ width:100%; height:100%; object-fit:cover; }
.feat-list{ display:flex; flex-direction:column; gap:18px; margin-top:30px; }
.feat{ display:flex; gap:16px; align-items:flex-start; }
.feat__ic{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:var(--cyan-soft);
  color:var(--cyan-700); display:flex; align-items:center; justify-content:center; }
.feat__ic svg{ width:22px; height:22px; }
.feat h4{ font-family:var(--display); font-size:18px; margin:0 0 3px; }
.feat p{ margin:0; color:var(--muted); font-size:15px; }

/* ============================================================
   DUAL CTA (marki / twórcy)
   ============================================================ */
.dual{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dual__card{ border-radius:var(--radius-lg); padding:clamp(32px,4vw,52px); position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:340px; }
.dual__card.brand{ background:var(--mist); }
.dual__card.creator{ background:var(--ink); color:#fff; }
.dual__card .kicker{ color:var(--cyan-600); }
.dual__card.creator .kicker{ color:var(--cyan-300); }
.dual__card.creator .kicker::before{ background:var(--cyan-300); }
.dual__card h3{ font-size:clamp(26px,3vw,38px); margin:18px 0 12px; }
.dual__card p{ color:var(--muted); margin:0 0 26px; max-width:38ch; }
.dual__card.creator p{ color:rgba(255,255,255,.72); }
.dual__card .btn{ margin-top:auto; align-self:flex-start; }
.dual__mark{ position:absolute; right:-30px; bottom:-30px; width:200px; opacity:.07; }
.dual__card.creator .dual__mark{ opacity:.14; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--ink); color:#fff; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.contact .kicker{ color:var(--cyan-300); } .contact .kicker::before{ background:var(--cyan-300); }
.contact h2{ color:#fff; }
.contact__lead{ color:rgba(255,255,255,.7); margin:18px 0 32px; }
.contact__item{ display:flex; gap:16px; align-items:center; padding:18px 0; border-top:1px solid rgba(255,255,255,.12); }
.contact__item svg{ width:22px; height:22px; color:var(--cyan-300); flex:0 0 auto; }
.contact__item small{ display:block; color:rgba(255,255,255,.5); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-family:var(--display); }
.contact__item b{ font-weight:600; font-size:17px; }

.form{ background:#fff; border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,32px); color:var(--ink); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--display); font-weight:600; font-size:12.5px; margin-bottom:8px; letter-spacing:.02em; }
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font:inherit;
  background:var(--mist); transition:.2s; color:var(--ink); }
.field textarea{ min-height:108px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--cyan);
  background:#fff; box-shadow:0 0 0 4px var(--cyan-soft); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form__row--stats{ grid-template-columns:repeat(3,1fr); }
.form__creator{
  margin:0 0 8px; padding:20px; border-radius:20px;
  background:linear-gradient(180deg, rgba(0,180,216,.05), rgba(255,0,84,.04));
  border:1px solid var(--line);
}
.seg{ display:flex; gap:8px; }
.seg input{ display:none; }
.seg label{ flex:1; text-align:center; padding:13px; border:1.5px solid var(--line); border-radius:12px;
  font-family:var(--display); font-weight:600; font-size:14px; transition:.2s; margin:0; cursor:pointer; }
.seg input:checked + label{ background:var(--cyan); color:#fff; border-color:var(--cyan); }
.form__note{ font-size:12.5px; color:var(--muted-2); margin-top:6px; }
.form__ok{ display:none; text-align:center; padding:20px; }
.form__ok.show{ display:block; }
.form__ok .check{ width:60px; height:60px; border-radius:50%; background:var(--cyan-soft); color:var(--cyan-700);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }

/* ============================================================
   CONTACT — "console" form (kontakt.html signature surface)
   Dark teal panel that echoes the hero stage. Inputs charge up
   with a cyan ring on focus.
   ============================================================ */
.contact-page .form--console{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(165deg, var(--ink), var(--teal-950));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 44px 100px -52px rgba(0,0,0,.78);
}
.form--console::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:3;
  background:linear-gradient(90deg, var(--cyan), var(--pink) 55%, var(--yellow)); }
.form--console::after{ content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px;
  border-radius:50%; background:radial-gradient(circle, rgba(0,180,216,.4), transparent 65%);
  filter:blur(26px); pointer-events:none; z-index:0; }
.form--console > *{ position:relative; z-index:1; }

.form--console .form__head{ margin-bottom:24px; }
.form--console .form__head .kicker{ color:var(--cyan-300); }
.form--console .form__head .kicker::before{ background:var(--cyan-300); }
.form--console .form__head h3{ color:#fff; margin-top:12px; max-width:22ch; }

.form--console .field label{ color:var(--cyan-300); letter-spacing:.1em; text-transform:uppercase; font-size:11px; }
.form--console .field input,
.form--console .field textarea,
.form--console .field select{
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.14); color:#fff;
}
.form--console .field input::placeholder,
.form--console .field textarea::placeholder{ color:rgba(255,255,255,.42); }
.form--console .field input:focus,
.form--console .field textarea:focus,
.form--console .field select:focus{
  border-color:var(--cyan); background:rgba(0,180,216,.10);
  box-shadow:0 0 0 4px rgba(0,180,216,.20);
}

.form--console .seg label{ border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.04); }
.form--console .seg input:checked + label{ background:var(--cyan); color:#fff; border-color:var(--cyan);
  box-shadow:0 12px 30px -16px rgba(0,180,216,.8); }

.form--console .form__creator{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); }
.form--console .form__note{ color:rgba(255,255,255,.5); }

.form--console .form__ok .check{ background:rgba(0,180,216,.16); color:var(--cyan-300); }
.form--console .form__ok h3{ color:#fff; }
.form--console .form__ok p{ color:rgba(255,255,255,.7); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:#fff; padding-top:72px; }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.1); }
.foot__logo{ height:40px; margin-bottom:18px; }
.foot p{ color:rgba(255,255,255,.6); font-size:14.5px; max-width:34ch; }
.foot h5{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 16px; }
.foot__col a{ display:block; color:rgba(255,255,255,.78); padding:5px 0; font-size:15px; transition:.2s; }
.foot__col a:hover{ color:var(--cyan-300); }
.foot__bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0;
  color:rgba(255,255,255,.45); font-size:13.5px; flex-wrap:wrap; gap:12px; }
.foot__social{ display:flex; gap:10px; }
.foot__social a{ width:40px; height:40px; border-radius:11px; border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:.25s; }
.foot__social a:hover{ background:var(--cyan); border-color:var(--cyan); transform:translateY(-2px); }
.foot__social svg{ width:18px; height:18px; }

/* ============================================================
   PAGE HEADER (subpages)
   ============================================================ */
.phead{ padding-top:150px; padding-bottom:clamp(40px,5vw,70px); position:relative; overflow:hidden;
  background:
    radial-gradient(58% 70% at 84% -8%, rgba(0,180,216,.16), transparent 60%),
    radial-gradient(46% 64% at -6% 116%, rgba(255,0,84,.12), transparent 60%),
    radial-gradient(40% 50% at 50% -30%, rgba(255,238,50,.10), transparent 60%); }
/* drifting colour orbs — echoes the home hero */
.phead__glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(46px);
  mix-blend-mode:multiply; opacity:.5; }
.phead__glow.one{ width:520px; height:520px; right:-160px; top:-200px;
  background:radial-gradient(circle, rgba(0,180,216,.5), transparent 62%);
  animation:floatOrb 19s var(--ease) infinite alternate; }
.phead__glow.two{ width:460px; height:460px; left:-200px; bottom:-220px;
  background:radial-gradient(circle, rgba(255,0,84,.42), transparent 62%);
  animation:floatOrb2 23s var(--ease) infinite alternate; }
/* faint grid for depth */
.phead::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:linear-gradient(rgba(0,48,73,.05) 1px,transparent 1px),
    linear-gradient(90deg, rgba(0,48,73,.05) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask:radial-gradient(120% 90% at 50% 10%, #000 28%, transparent 72%);
          mask:radial-gradient(120% 90% at 50% 10%, #000 28%, transparent 72%); }
.phead .wrap{ position:relative; z-index:1; }
.phead__mark{ position:absolute; right:-3%; top:30%; width:min(34vw,380px); opacity:.05; transform:rotate(10deg); z-index:0; }
.phead h1{ font-size:clamp(42px,7vw,86px); letter-spacing:-.035em; max-width:16ch; }
.phead .lead{ margin-top:22px; }
@media (prefers-reduced-motion: reduce){
  .phead__glow{ animation:none; }
}
.crumb{ display:flex; gap:8px; font-family:var(--display); font-size:13.5px; color:var(--muted-2); margin-bottom:22px; }
.crumb a:hover{ color:var(--cyan-600); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee__track,.clients__track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RETRO-FUTURE POP \u2014 motion + colour rhythm
   ============================================================ */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--cyan), var(--pink) 55%, var(--yellow));
  transition:transform .08s linear; }

/* magnetic buttons glide smoothly */
.btn--primary,.btn--lg{ will-change:transform; }
.hv-dark__glow{ transition:margin .35s var(--ease-out); }

/* services \u2014 cycle accent colour across the 6 cards */
.svc__ic{ transition:.3s var(--ease); }
.svc-grid .svc:nth-child(3n+2) .svc__ic{ background:var(--pink-soft); color:var(--pink-600); }
.svc-grid .svc:nth-child(3n+3) .svc__ic{ background:var(--yellow-soft); color:#8a7c00; }
.svc-grid .svc:nth-child(3n+2) .svc__num{ color:var(--pink-600); }
.svc-grid .svc:nth-child(3n+3) .svc__num{ color:#8a7c00; }
.svc-grid .svc:nth-child(3n+2)::after{ background:var(--pink); }
.svc-grid .svc:nth-child(3n+3)::after{ background:var(--yellow); }
.svc:hover .svc__ic{ transform:translateY(-2px); background:var(--cyan); color:#fff; }
.svc-grid .svc:nth-child(3n+2):hover .svc__ic{ background:var(--pink); color:#fff; }
.svc-grid .svc:nth-child(3n+3):hover .svc__ic{ background:var(--yellow); color:var(--ink); }

/* dark stats band \u2014 tri-colour plus signs */
.stats__grid .stat:nth-child(1) b .plus{ color:var(--cyan-300); }
.stats__grid .stat:nth-child(2) b .plus{ color:var(--pink-300); }
.stats__grid .stat:nth-child(3) b .plus{ color:var(--yellow); }

/* process \u2014 tri-colour step badges */
.proc-grid .proc-step:nth-child(2) .proc-step__n{ background:var(--pink); box-shadow:var(--shadow-pink); }
.proc-grid .proc-step:nth-child(3) .proc-step__n{ background:var(--yellow); color:var(--ink); box-shadow:0 22px 60px -24px rgba(255,238,50,.55); }
.proc-grid .proc-step:nth-child(2) .proc-step__line{ background:linear-gradient(90deg,var(--pink),transparent); }
.proc-grid .proc-step:nth-child(3) .proc-step__line{ background:linear-gradient(90deg,var(--yellow),transparent); }

/* dual CTA brand card gets a warm pop edge */
.dual__card.brand{ border:1px solid var(--line); }
.dual__card.brand::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--cyan), var(--pink)); }

/* selection + focus rings echo the palette */
::selection{ background:var(--pink); color:#fff; }

/* planner */
.planner{
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(0,180,216,.12), transparent 50%),
    radial-gradient(80% 120% at 0% 100%, rgba(255,0,84,.08), transparent 52%),
    #fff;
}
.planner__head{ margin-bottom:34px; }
.planner__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; }
.planner__panel,
.planner__result{
  border:1px solid var(--line); border-radius:24px; background:#fff; padding:clamp(24px,3vw,34px);
  box-shadow:var(--shadow-sm);
}
.planner__panel{ display:grid; gap:22px; }
.planner__group small,
.planner__result small,
.planner__eyebrow{
  display:block; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:10px;
}
.planner__choices{ display:flex; flex-wrap:wrap; gap:10px; }
.planner__choices button{
  padding:12px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  color:var(--ink); font-family:var(--display); font-size:14px; font-weight:600; transition:.2s var(--ease);
}
.planner__choices button:hover{ border-color:var(--cyan); }
.planner__choices button.is-on{
  border-color:transparent; color:#fff;
  background:linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow:0 14px 34px -18px rgba(0,180,216,.5);
}
.planner__result{
  background:linear-gradient(180deg, rgba(0,48,73,.98), rgba(0,33,47,.98));
  color:#fff; border-color:rgba(255,255,255,.06);
}
.planner__eyebrow{ color:var(--cyan-300); }
.planner__result .h-card{ font-size:clamp(26px,2.6vw,36px); margin-bottom:14px; }
.planner__result > p{ margin:0; color:rgba(255,255,255,.72); font-size:17px; }
.planner__bullets{
  display:grid; gap:18px; margin-top:28px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
}
.planner__bullets p{ margin:0; color:rgba(255,255,255,.86); }
.planner__result .btn{ margin-top:28px; }

/* creators tools */
.creators-tools{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px;
}
.creators-search{ flex:1; max-width:520px; }
.creators-search input{
  width:100%; padding:16px 18px; border:1px solid rgba(255,255,255,.7); border-radius:16px;
  background:var(--glass-bg-strong); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  font:inherit; color:var(--ink); transition:.2s; box-shadow:var(--glass-shadow), var(--glass-hi);
}
.creators-search input:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px var(--cyan-soft);
}
.creators-count{
  flex:0 0 auto; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2);
}
.creators-count span:first-child{ color:var(--cyan-600); }
.creators-empty{ margin:26px 0 0; color:var(--muted); text-align:center; }

/* section helpers */
.section-copy{ max-width:780px; margin-inline:auto; text-align:center; }
.section-cta{ display:flex; justify-content:center; margin-top:34px; }
.section-cta--left{ justify-content:flex-start; }

/* trusted logos */
.trusted{
  position:relative; z-index:4;
  padding-block: clamp(52px,6.5vw,88px);
  background:linear-gradient(180deg, rgba(0,180,216,.05), rgba(255,255,255,0) 72%);
}
/* glass cards — frosted, colourful logos, equal-width slots for even rhythm */
.client-logo{
  flex:0 0 auto; width:clamp(200px,17vw,250px); height:clamp(100px,9vw,122px);
  display:flex; align-items:center; justify-content:center; padding:22px 30px;
  border-radius:24px; background:var(--glass-bg-strong);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:var(--glass-border); box-shadow:0 18px 44px -30px rgba(0,48,73,.34), var(--glass-hi);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.client-logo:hover{ transform:translateY(-5px); box-shadow:0 30px 58px -28px rgba(0,48,73,.36), var(--glass-hi); border-color:rgba(0,180,216,.32); }
.client-logo img{ max-width:100%; max-height:var(--lh,46px); width:auto; height:auto; object-fit:contain; }
/* text wordmark — used until an official logo file is added */
.client-logo--text{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.005em;
  color:var(--muted-2); text-align:center; line-height:1.05; transition:color .3s var(--ease); white-space:nowrap; }
.client-logo--text:hover{ color:var(--ink); }

/* creator discovery clouds */
.creator-cloud{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(20px,2.4vw,34px); align-items:start;
}
/* featured = tidy, evenly spread grid of equal circles (4 per row) */
.creator-cloud--featured{ margin-top:30px; justify-items:center; }
.creator-cloud--featured .creator-bubble{ grid-column:span 3 !important; max-width:230px; }
.creator-cloud--roster{ margin-top:6px; }
.creator-bubble{
  position:relative; display:block; width:100%; aspect-ratio:1 / 1; border-radius:50%; overflow:hidden; border:0;
  padding:0; text-align:center; color:#fff; background:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.creator-bubble:hover{ transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow); }
.creator-bubble__glow{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,24,36,.24) 48%, rgba(0,24,36,.78));
}
.creator-bubble__image,
.creator-bubble__image img{ position:absolute; inset:0; width:100%; height:100%; }
.creator-bubble__image img{ object-fit:cover; }
.creator-bubble__image,
.creator-bubble__meta{
  animation:floatBubble 7.5s ease-in-out infinite;
  animation-delay:var(--float-delay, 0s);
}
.creator-bubble__meta{
  position:absolute; inset:auto 0 0 0; z-index:2; display:grid; gap:4px;
  padding:18px 16px 18px;
}
.creator-bubble__eyebrow{
  font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.82);
}
.creator-bubble strong{
  font-family:var(--display); font-size:22px; line-height:1.02; letter-spacing:-.03em;
}
.creator-bubble small,
.creator-bubble__subline{
  display:block; color:rgba(255,255,255,.8); font-size:13px; line-height:1.3;
}
.creator-bubble small{ font-family:var(--display); font-weight:600; letter-spacing:.04em; }
.creator-bubble__subline{ color:rgba(255,255,255,.68); }
/* colourful halos (poświaty) — box-shadow escapes the circular clip */
.creator-bubble--cyan{ box-shadow:0 16px 44px -22px rgba(0,180,216,.6), 0 0 46px -8px rgba(0,180,216,.42); }
.creator-bubble--pink{ box-shadow:0 16px 44px -22px rgba(255,0,84,.58), 0 0 46px -8px rgba(255,0,84,.4); }
.creator-bubble--yellow{ box-shadow:0 16px 44px -22px rgba(255,210,0,.5), 0 0 46px -8px rgba(255,210,0,.34); }
.creator-bubble--cyan:hover{ box-shadow:0 24px 60px -24px rgba(0,180,216,.75), 0 0 64px -4px rgba(0,180,216,.55); }
.creator-bubble--pink:hover{ box-shadow:0 24px 60px -24px rgba(255,0,84,.72), 0 0 64px -4px rgba(255,0,84,.52); }
.creator-bubble--yellow:hover{ box-shadow:0 24px 60px -24px rgba(255,210,0,.62), 0 0 64px -4px rgba(255,210,0,.46); }
.creator-bubble.is-xl{ grid-column:span 4; }
.creator-bubble.is-lg{ grid-column:span 3; }
.creator-bubble.is-md{ grid-column:span 3; }
.creator-bubble.is-sm{ grid-column:span 2; }
.creator-cloud--roster .creator-bubble.is-lg,
.creator-cloud--roster .creator-bubble.is-md{ grid-column:span 3; }
.creator-cloud--roster .creator-bubble.is-sm{ grid-column:span 2; }
.creator-cloud--roster .creator-bubble strong{ font-size:18px; }
.creator-cloud--roster .creator-bubble__meta{ padding:14px 14px 16px; }
.creator-cloud--featured .creator-bubble strong{ font-size:19px; }
.creator-cloud--featured .creator-bubble__meta{ padding:14px 14px 16px; }

@keyframes floatBubble{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(calc(var(--float-distance, 12px) * -1)); }
}

/* ============================================================
   CREATOR CARDS + CAROUSEL (clean, professional roster UI)
   ============================================================ */
.creator-card{
  appearance:none; border:var(--glass-border); background:var(--glass-bg-strong);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); color:var(--ink);
  border-radius:22px; overflow:hidden; text-align:left; padding:0; cursor:pointer;
  display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.creator-card::before{ content:""; position:absolute; left:0; top:0; right:0; height:4px; z-index:3;
  background:var(--cyan); transition:.3s var(--ease); }
.creator-card--pink::before{ background:var(--pink); }
.creator-card--yellow::before{ background:var(--yellow); }
.creator-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); border-color:transparent; }
.creator-card:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.creator-card__media{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--mist); }
.creator-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.creator-card:hover .creator-card__media img{ transform:scale(1.06); }
.creator-card__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 58%, rgba(0,24,36,.26)); }
.creator-card__badge{ position:absolute; left:12px; top:12px; z-index:2;
  display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(10px) saturate(1.4); -webkit-backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6);
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.creator-card__body{ display:flex; flex-direction:column; gap:5px; padding:16px 16px 6px; }
.creator-card__role{ font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cyan-700); }
.creator-card--pink .creator-card__role{ color:var(--pink-600); }
.creator-card--yellow .creator-card__role{ color:#8a7c00; }
.creator-card__name{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.02em; line-height:1.12; }
.creator-card__handle{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.02em; color:var(--muted-2); }
.creator-card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.creator-card__tags span{ display:inline-flex; padding:5px 9px; border-radius:999px; background:var(--mist);
  font-family:var(--display); font-size:11px; font-weight:600; color:var(--ink); }
.creator-card__cta{ margin-top:auto; padding:12px 16px 16px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.01em; color:var(--cyan-700); }
.creator-card--pink .creator-card__cta{ color:var(--pink-600); }
.creator-card--yellow .creator-card__cta{ color:#8a7c00; }
.creator-card__cta svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.creator-card:hover .creator-card__cta svg{ transform:translateX(4px); }

.creator-carousel{ position:relative; margin-top:30px; }
.creator-carousel__track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 2px 18px; scrollbar-width:none; -ms-overflow-style:none; }
.creator-carousel__track::-webkit-scrollbar{ display:none; }
.creator-carousel__track .creator-card{ flex:0 0 clamp(214px, 22vw, 250px); scroll-snap-align:start; }
.creator-carousel__btn{ position:absolute; top:40%; transform:translateY(-50%); z-index:6;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink);
  display:none; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:.2s var(--ease); }
.creator-carousel.has-overflow .creator-carousel__btn{ display:flex; }
.creator-carousel__btn svg{ width:22px; height:22px; }
.creator-carousel__btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-50%) scale(1.06); }
.creator-carousel__btn[disabled]{ opacity:0; pointer-events:none; }
.creator-carousel__btn--prev{ left:-22px; }
.creator-carousel__btn--next{ right:-22px; }

/* roster page: same cards in a responsive grid */
.creator-cloud.creator-cloud--roster{ display:grid;
  grid-template-columns:repeat(auto-fill, minmax(166px, 1fr)); gap:18px; align-items:stretch; }

/* campaign highlight */
.campaigns-highlight{
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(0,180,216,.08), transparent 50%),
    radial-gradient(90% 120% at 0% 100%, rgba(255,0,84,.06), transparent 55%),
    #fff;
}
.campaign-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); }
.campaign-card{
  border-radius:28px; overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-height:100%;
}
.campaign-card__media{ position:relative; aspect-ratio:9/16; background:var(--teal-950); }
.campaign-card__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.campaign-card__tag{
  position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center;
  padding:9px 13px; border-radius:999px; background:rgba(0,24,36,.72); color:#fff;
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.campaign-card__body{ padding:22px; display:grid; gap:14px; height:100%; }
.campaign-card__eyebrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
}
.campaign-card__body p{ margin:0; color:var(--muted); }
.campaign-card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
.campaign-card__actions .btn{ flex:1 1 180px; justify-content:center; }
.campaign-page-intro{ margin-bottom:24px; }
.campaign-grid--page{ margin-bottom:28px; }

/* split contact */
.contact--split{ padding-bottom:clamp(72px,9vw,120px); }
.contact-head{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:end; margin-bottom:28px;
}
.contact-info-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px;
}
.contact-info-grid .contact__item{
  border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:18px; background:rgba(255,255,255,.04);
}
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-card__head{ margin-bottom:20px; }
.contact-card__head .kicker{ color:var(--cyan-600); }
.contact-card__head .kicker::before{ background:var(--cyan); }

/* roster page */
.roster-intro .stats__grid{ gap:18px; }
.roster-stats .stat{
  padding:26px 24px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.roster-stats .stat > span{ color:var(--muted); }
.roster-stats .stat b{ color:var(--ink); }
.split--roster-cta{ align-items:center; }
.split__media--video{ aspect-ratio:4/5; background:#000; }

/* publications */
.pub-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pub-grid--lg{ grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); }
.pub-card{
  border-radius:28px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); display:flex; flex-direction:column; min-height:100%;
  transition:.3s var(--ease);
}
.pub-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.pub-card__media{ position:relative; display:block; aspect-ratio:16/11; background:var(--mist); overflow:hidden; }
.pub-card__media img{ width:100%; height:100%; object-fit:cover; transition:.5s var(--ease); }
.pub-card:hover .pub-card__media img{ transform:scale(1.04); }
/* video reels — vertical, looping (like campaign highlights) */
.pub-card__media--video{ aspect-ratio:9/16; background:var(--teal-950); }
.pub-card__media--video video{ width:100%; height:100%; object-fit:cover; display:block; }
.pub-card__play{ position:absolute; right:12px; bottom:12px; z-index:2; width:34px; height:34px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(0,24,36,.6); backdrop-filter:blur(4px); color:#fff; opacity:.9; transition:.25s var(--ease); }
.pub-card__play svg{ width:15px; height:15px; margin-left:1px; }
.pub-card:hover .pub-card__play{ opacity:0; transform:scale(.9); }
.pub-card__body{ padding:22px; display:grid; gap:14px; height:100%; }
.pub-card__eyebrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
}
.pub-card__body p{ margin:0; color:var(--muted); }
.pub-card__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pub-card__chips span{
  display:inline-flex; align-items:center; padding:8px 11px; border-radius:999px; background:var(--mist);
  font-family:var(--display); font-size:12px; font-weight:600; color:var(--ink);
}
.pub-card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
.pub-card__actions .btn{ flex:1 1 220px; justify-content:center; }
.pub-card--compact .pub-card__actions .btn{ flex:1 1 180px; }

/* feed now */
.feed-now{
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(0,180,216,.08), transparent 50%),
    radial-gradient(90% 120% at 0% 100%, rgba(255,0,84,.06), transparent 55%),
    #fff;
}
.feed-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feed-card{
  border-radius:24px; border:1px solid var(--line); background:#fff; padding:24px;
  box-shadow:var(--shadow-sm); min-height:280px; display:flex; flex-direction:column; gap:14px;
  transition:.3s var(--ease); position:relative; overflow:hidden;
}
.feed-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow));
}
.feed-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.feed-card__meta{
  display:block; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan-600);
}
.feed-card p{ margin:0; color:var(--muted); }
.feed-card__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.feed-card__chips span{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  background:var(--mist); color:var(--ink); font-family:var(--display); font-size:12px; font-weight:600;
}
.feed-card--dark{
  background:linear-gradient(180deg, rgba(0,48,73,.98), rgba(0,33,47,.98));
  border-color:rgba(255,255,255,.06); color:#fff;
}
.feed-card--dark::before{ background:linear-gradient(90deg, var(--cyan), var(--pink)); }
.feed-card--dark .feed-card__meta{ color:var(--cyan-300); }
.feed-card--dark p{ color:rgba(255,255,255,.72); }
.feed-card--dark .feed-card__chips span{
  background:rgba(255,255,255,.08); color:#fff;
}

/* ============================================================
   SUBPAGE EXTRAS
   ============================================================ */
/* services detail rows */
.svc-row{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center;
  padding:30px 0; border-top:1px solid var(--line); }
.svc-row:hover .svc-row__n{ color:var(--cyan); }
.svc-row__n{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4vw,56px);
  color:var(--mist-2); letter-spacing:-.04em; transition:.3s; line-height:1; }
.svc-row__main h3{ font-size:clamp(24px,2.6vw,34px); }
.svc-row__main p{ margin:8px 0 0; color:var(--muted); max-width:60ch; }
.svc-row__tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width:240px; }
.svc-row__tags .chip--out{ font-size:13px; padding:7px 12px; }

/* values grid */
.values{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.value{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.value__ic{ width:50px; height:50px; border-radius:13px; background:var(--cyan-soft); color:var(--cyan-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.value__ic svg{ width:25px; height:25px; }
.value h3{ font-size:21px; } .value p{ margin:8px 0 0; color:var(--muted); font-size:15px; }

/* case filter */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.filters button{ padding:11px 20px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  font-family:var(--display); font-weight:600; font-size:14px; color:var(--muted); transition:.2s; }
.filters button.on{
  background:linear-gradient(90deg, var(--cyan), var(--pink));
  color:#fff; border-color:transparent; box-shadow:0 16px 34px -18px rgba(0,180,216,.46);
}
/* big quote */
.quote{ font-family:var(--display); font-weight:700; font-size:clamp(26px,3.6vw,46px);
  line-height:1.18; letter-spacing:-.02em; max-width:20ch; }
.quote .em-cyan{ }

/* map */
.mapwrap{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; background:var(--mist);
  border:1px solid var(--line); position:relative; }
.mapwrap iframe{ width:100%; height:100%; border:0; filter:grayscale(.3) }

@media (max-width: 860px){
  .svc-row{ grid-template-columns:1fr; gap:10px; }
  .svc-row__tags{ justify-content:flex-start; max-width:none; }
  .values{ grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .svc-grid,.proc-grid{ grid-template-columns:repeat(2,1fr); }
  .creators-grid{ grid-template-columns:repeat(3,1fr); }
  .feed-grid{ grid-template-columns:repeat(2,1fr); }
  .pub-grid{ grid-template-columns:repeat(2,1fr); }
  .pub-grid--lg{ grid-template-columns:repeat(2,1fr); }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .proc-step__line{ display:none; }
  .planner__grid{ grid-template-columns:1fr; }
  .creator-modal__body{ grid-template-columns:1fr; }
  /* stacked hero — left-aligned text, centred reel below (clean & airy) */
  .hv-dark{ min-height:auto; }
  .hv-dark__grid{ grid-template-columns:1fr; gap:clamp(34px,6vw,52px); }
  .hv-dark__copy{ max-width:none; }
  .hv-dark .display{ max-width:16ch; }
  .hv-dark__media{ justify-self:center; width:min(100%, 340px); }
  .creator-cloud--featured .creator-bubble{ grid-column:span 4 !important; }
}
@media (max-width: 860px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .split,.contact-grid,.dual,.svc-head,.contact-head,.contact-split{ grid-template-columns:1fr; }
  .campaign-grid{ grid-template-columns:1fr; max-width:400px; margin-inline:auto; }
  .contact-info-grid{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:1fr; gap:8px; text-align:center; }
  .stat b{ justify-content:center; }
  .creators-tools{ flex-direction:column; align-items:stretch; }
  .creators-count{ text-align:left; }
  .home-page .nav__inner{ padding-inline:20px; }
  .home-page .nav__logo{ height:38px; }
  .creator-modal{ padding:12px; }
  .creator-modal__stats{ grid-template-columns:repeat(2,1fr); }
  .creator-carousel__track{ grid-auto-columns:minmax(240px, 82vw); }
  .creator-cloud{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px; }
  .creator-cloud .creator-bubble.is-xl,
  .creator-cloud .creator-bubble.is-lg,
  .creator-cloud .creator-bubble.is-md{ grid-column:span 3; }
  .creator-cloud .creator-bubble.is-sm{ grid-column:span 2; }
  .hero-phone{ max-width:360px; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .svc-grid,.proc-grid{ grid-template-columns:1fr; }
  .svc{ padding:24px; }
  .creators-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .feed-grid{ grid-template-columns:1fr; }
  .pub-grid{ grid-template-columns:1fr; }
  .pub-grid--lg{ grid-template-columns:1fr; max-width:400px; margin-inline:auto; }
  .form__row{ grid-template-columns:1fr; }
  .form__row--stats{ grid-template-columns:1fr; }
  .planner__choices button{ width:100%; }
  .home-page .btn--dark{ display:none; }
  .home-page .burger{ width:52px; height:52px; }
  .proc-video{ border-radius:22px; }
  .creators-grid .creator{ border-radius:22px; }
  .creator__top{ min-height:124px; }
  .creator__avatar{ width:72px; height:72px; }
  .campaign-card__actions .btn,
  .pub-card__actions .btn{ flex-basis:100%; }
  .client-logo{ width:clamp(150px,50vw,184px); height:92px; padding:16px 22px; border-radius:20px; }
  .client-logo img{ max-height:calc(var(--lh,46px) * .92); max-width:100%; }
  .hv-dark{ padding-top:94px; padding-bottom:44px; }
  .hv-dark .display{ max-width:none; }
  .hv-dark__cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .hv-dark__cta .btn{ width:100%; justify-content:center; }
  .hv-dark__stats{ gap:16px 20px; margin-top:26px; padding-top:20px; }
  .hero-phone{ width:100%; max-width:300px; }
  .creator-cloud{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .creator-cloud .creator-bubble{ grid-column:span 1 !important; border-radius:34px; aspect-ratio:4 / 5; }
  .creator-cloud--featured .creator-bubble{ max-width:none; }
  .creator-carousel__btn{ display:none !important; }
  .creator-carousel__track .creator-card{ flex-basis:74vw; }
  .creator-modal__video{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .creator-modal__video-frame{ width:150px; }
  .creator-bubble strong{ font-size:18px; }
  .creator-bubble__meta{ padding:14px 12px 14px; }
  .creator-bubble__subline{ display:none; }
  .pub-card--compact .pub-card__actions .btn{ font-size:12.5px; padding:9px 12px; }
}

/* ============================================================
   INTRO / LOADING SCREEN
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% -10%, #0b4257, var(--teal-950) 72%);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.intro::after{ /* faint grid texture */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask:radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
          mask:radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
}
.intro.is-done{ opacity:0; visibility:hidden; }
.intro__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:24px; text-align:center; animation:introRise .8s var(--ease-out) both; }
.intro__mark{ width:64px; height:64px; display:block; }
.intro__mark img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 12px 32px rgba(0,180,216,.45)); animation:introPulse 2.4s ease-in-out infinite; }
.intro__logo{ height:28px; width:auto; opacity:.95; }
.intro__bar{ width:min(240px,62vw); height:4px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12); }
.intro__bar i{ display:block; width:0; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--pink) 55%, var(--yellow));
  box-shadow:0 0 18px rgba(0,180,216,.5);
  transition:width 2.35s cubic-bezier(.5,.05,.2,1); }
.intro__slogan{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.72); transition:opacity .25s var(--ease); min-height:1.2em; }
@keyframes introRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes introPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }

/* ============================================================
   KAMPANIE — compact reel gallery + colour wash
   ============================================================ */
.campaigns-page{ background:
  radial-gradient(70% 45% at 100% 0%, rgba(0,180,216,.09), transparent 55%),
  radial-gradient(60% 45% at 0% 26%, rgba(255,0,84,.06), transparent 55%),
  radial-gradient(60% 45% at 100% 100%, rgba(255,238,50,.06), transparent 55%),
  var(--paper); }
/* TikTok-style reel tiles — full-bleed video + glass caption */
.pub-grid--lg{ grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.reel-tile{ position:relative; display:block; aspect-ratio:9/16; border-radius:20px; overflow:hidden;
  background:var(--teal-950); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.reel-tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.reel-tile:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.reel-tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel-tile::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:3; background:var(--cyan); }
.reel-tile--pink::before{ background:var(--pink); }
.reel-tile--yellow::before{ background:var(--yellow); }
.reel-tile::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:58%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,18,28,.62)); }
.reel-tile__play{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3); opacity:.85; transition:.25s var(--ease); }
.reel-tile__play svg{ width:18px; height:18px; margin-left:2px; }
.reel-tile:hover .reel-tile__play{ opacity:1; transform:translate(-50%,-50%) scale(1.1); background:rgba(255,255,255,.28); }
.reel-tile__overlay{ position:absolute; left:8px; right:8px; bottom:8px; z-index:3; padding:11px 13px; border-radius:14px;
  background:rgba(0,18,28,.4); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16); display:flex; flex-direction:column; gap:2px; }
.reel-tile__brand{ font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; line-height:1.15; }
.reel-tile__creator{ font-size:12px; color:rgba(255,255,255,.8); line-height:1.2; }

/* creator filter pills (liquid glass) */
.creator-pills{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 16px; margin-bottom:4px;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-mask:linear-gradient(90deg,#000 94%,transparent); }
.creator-pills::-webkit-scrollbar{ display:none; }
.creator-pill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; padding:6px 16px 6px 6px; border-radius:999px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7); font-family:var(--display); font-weight:600; font-size:13px; color:var(--ink);
  white-space:nowrap; transition:.2s var(--ease); box-shadow:var(--shadow-sm); }
.creator-pill img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.creator-pill:hover{ background:#fff; transform:translateY(-2px); }
.creator-pill.is-on{ background:var(--ink); color:#fff; border-color:transparent;
  box-shadow:0 14px 30px -16px rgba(0,48,73,.5); }
.creator-pill.is-on img{ box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.creator-pill svg{ width:14px; height:14px; flex:0 0 auto; }
/* "Wyróżnione" — highlighted gradient pill */
.creator-pill--featured{ padding:11px 18px; background:linear-gradient(90deg, var(--cyan), var(--pink)); color:#fff; border-color:transparent; }
.creator-pill--featured:hover{ background:linear-gradient(90deg, var(--cyan), var(--pink)); filter:brightness(1.06); transform:translateY(-2px); }
.creator-pill--featured.is-on{ background:linear-gradient(90deg, var(--cyan), var(--pink)); color:#fff; box-shadow:0 14px 32px -16px rgba(255,0,84,.55); }
.reel-empty{ grid-column:1 / -1; text-align:center; color:var(--muted); padding:44px 0; }

/* ============================================================
   CONTACT — minimal liquid-glass form
   ============================================================ */
.contact-page #form{ position:relative; overflow:hidden; }
.contact-page #form::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55% 50% at 100% 0%, rgba(0,180,216,.13), transparent 55%),
            radial-gradient(50% 50% at 0% 100%, rgba(255,0,84,.08), transparent 55%); }
.contact-page #form > .wrap{ position:relative; z-index:1; }
/* home contact section — same treatment as kontakt */
.contact-block{ position:relative; overflow:hidden; }
.contact-block::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55% 50% at 100% 0%, rgba(0,180,216,.12), transparent 55%),
            radial-gradient(50% 50% at 0% 100%, rgba(255,0,84,.08), transparent 55%); }
.contact-block > .wrap{ position:relative; z-index:1; }
.form--glass{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(26px) saturate(1.4); -webkit-backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius-lg);
  box-shadow:0 44px 100px -54px rgba(0,48,73,.45);
}
.form--glass .form__head{ margin-bottom:22px; }
.form--glass .form__head .kicker{ color:var(--cyan-600); }
.form--glass .form__head h3{ color:var(--ink); }
.form--glass .field label{ color:var(--muted); font-size:12px; letter-spacing:.01em; text-transform:none; }
.form--glass .field input,.form--glass .field textarea,.form--glass .field select{
  background:rgba(255,255,255,.66); border:1.5px solid rgba(0,48,73,.1); border-radius:13px; color:var(--ink); }
.form--glass .field input::placeholder,.form--glass .field textarea::placeholder{ color:var(--muted-2); }
.form--glass .field input:focus,.form--glass .field textarea:focus,.form--glass .field select:focus{
  border-color:var(--cyan); background:#fff; box-shadow:0 0 0 4px var(--cyan-soft); }
.form--glass .seg label{ background:rgba(255,255,255,.5); border-color:rgba(0,48,73,.12); color:var(--ink); }
.form--glass .seg input:checked + label{ background:var(--cyan); color:#fff; border-color:var(--cyan);
  box-shadow:0 12px 28px -16px rgba(0,180,216,.7); }
.form--glass .form__creator{ background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.6); }
.form--glass .form__note{ color:var(--muted-2); }
/* full-width form */
.form--glass.form--wide{ width:100%; max-width:940px; margin-inline:auto; padding:clamp(26px,3.2vw,42px); }
.seg--lg label{ padding:15px; font-size:14.5px; }
/* toggle → twórca = pink theme */
.form--glass.is-creator .form__head .kicker{ color:var(--pink-600); }
.form--glass.is-creator .form__head .kicker::before{ background:var(--pink); }
.form--glass.is-creator .seg input:checked + label{ background:var(--pink); border-color:var(--pink);
  box-shadow:0 12px 28px -16px rgba(255,0,84,.7); }
.form--glass.is-creator .field input:focus,
.form--glass.is-creator .field textarea:focus,
.form--glass.is-creator .field select:focus{ border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-soft); }
.form--glass.is-creator .btn--primary{ background:var(--pink); box-shadow:var(--shadow-pink); }
.form--glass.is-creator .btn--primary:hover{ background:var(--pink-600); }
.form--glass.is-creator .form__creator{ background:linear-gradient(180deg, rgba(255,0,84,.06), rgba(255,255,255,.35)); }

/* contact info strip */
.contact-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; max-width:940px; margin-inline:auto; }
.contact-chip{ display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:18px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7); transition:.2s var(--ease); }
a.contact-chip:hover{ background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.contact-chip svg{ width:20px; height:20px; color:var(--cyan-600); flex:0 0 auto; }
.contact-chip small{ display:block; font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.contact-chip b{ display:block; font-size:13.5px; color:var(--ink); margin-top:2px; word-break:break-word; }

/* creator form — selectable chips + follower slider */
.chips-select{ display:flex; flex-wrap:wrap; gap:8px; }
.chips-select button{ padding:9px 15px; border-radius:999px; border:1.5px solid rgba(0,48,73,.12);
  background:rgba(255,255,255,.55); font-family:var(--display); font-weight:600; font-size:13px; color:var(--ink); transition:.18s var(--ease); }
.chips-select button:hover{ border-color:var(--cyan); }
.chips-select button.is-on{ background:var(--cyan); color:#fff; border-color:var(--cyan); box-shadow:0 10px 24px -14px rgba(0,180,216,.7); }
.is-creator .chips-select button:hover{ border-color:var(--pink); }
.is-creator .chips-select button.is-on{ background:var(--pink); border-color:var(--pink); box-shadow:0 10px 24px -14px rgba(255,0,84,.7); }
.field--range label{ display:flex; align-items:baseline; justify-content:space-between; }
.field--range label b{ font-family:var(--display); font-size:16px; color:var(--cyan-700); }
.is-creator .field--range label b{ color:var(--pink-600); }
input[type="range"][data-range],
.form--glass input[type="range"][data-range]:focus{ -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:linear-gradient(90deg, var(--cyan), var(--pink)); outline:none; padding:0; border:0;
  margin-top:6px; box-shadow:none; }
.is-creator input[type="range"][data-range]{ background:linear-gradient(90deg, var(--pink), var(--cyan)); }
input[type="range"][data-range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px;
  border-radius:50%; background:#fff; border:2px solid var(--cyan); box-shadow:0 4px 12px rgba(0,48,73,.3); cursor:pointer; }
.is-creator input[type="range"][data-range]::-webkit-slider-thumb{ border-color:var(--pink); }
input[type="range"][data-range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff;
  border:2px solid var(--cyan); box-shadow:0 4px 12px rgba(0,48,73,.3); cursor:pointer; }
.is-creator input[type="range"][data-range]::-moz-range-thumb{ border-color:var(--pink); }

@media (max-width:860px){ .contact-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .contact-strip{ grid-template-columns:1fr; } }

/* ============================================================
   SUBTLE MOTION — modal entrance, tile hover
   ============================================================ */
@keyframes modalPop{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes modalFade{ from{ opacity:0; } to{ opacity:1; } }
.creator-modal:not([hidden]) .creator-modal__dialog{ animation:modalPop .42s var(--ease-out) both; }
.creator-modal:not([hidden]) .creator-modal__backdrop{ animation:modalFade .32s var(--ease) both; }
.creator-modal__stat{ transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.creator-modal__stat:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -22px rgba(0,48,73,.4); }
@media (prefers-reduced-motion: reduce){
  .intro__mark img{ animation:none; }
  .intro__bar i{ transition:none; width:100% !important; }
  .creator-modal:not([hidden]) .creator-modal__dialog,
  .creator-modal:not([hidden]) .creator-modal__backdrop{ animation:none; }
}