/* ============================================================
   VOID — Design System v2
   Big, bold, colorful — built from the actual brand colors of
   the platforms Void grows: Instagram, Facebook, YouTube,
   LinkedIn, WhatsApp. White canvas, huge type, punchy gradient.
   ============================================================ */

:root{
  --bg:          #FFFFFF;
  --bg-soft:     #F6F5FC;
  --bg-dark:     #120E1C;
  --ink:         #14121F;
  --ink-dim:     #64616F;
  --ink-faint:   #9997A3;
  --line:        #E9E7F2;
  --line-strong: #D8D5E6;

  /* Signature gradient — Instagram-style, used as the brand's primary identity */
  --grad: linear-gradient(120deg,#833AB4 0%,#C13584 28%,#E1306C 52%,#F56040 74%,#FCAF45 100%);
  --grad-soft: linear-gradient(120deg,rgba(131,58,180,0.10) 0%,rgba(225,48,108,0.10) 50%,rgba(252,175,69,0.10) 100%);

  /* Real platform brand colors — used generously, not just as accents */
  --ig:  #E1306C;
  --ig2: #833AB4;
  --fb:  #1877F2;
  --yt:  #FF0000;
  --li:  #0A66C2;
  --wa:  #25D366;
  --sun: #FFB800;

  --f-display: 'Space Grotesk', sans-serif;
  --f-body: 'Outfit', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--bg);}
body{
  background:transparent;
  color:var(--ink);
  font-family:var(--f-body);
  overflow-x:hidden;
  position:relative;
}
/* the site breathes: two soft color fields drift and shift hue forever */
body::before, body::after{
  content:''; position:fixed; z-index:-1; border-radius:50%;
  filter:blur(90px); pointer-events:none;
}
body::before{
  width:62vw; height:62vw; left:-20vw; top:-20vw;
  background:radial-gradient(circle, rgba(225,48,108,0.16), transparent 65%);
  animation:ambientA 26s ease-in-out infinite alternate;
}
body::after{
  width:56vw; height:56vw; right:-18vw; bottom:-18vw;
  background:radial-gradient(circle, rgba(252,175,69,0.2), transparent 65%);
  animation:ambientB 34s ease-in-out infinite alternate;
}
@keyframes ambientA{
  0%{transform:translate(0,0) scale(1); filter:blur(90px) hue-rotate(0deg);}
  100%{transform:translate(16vw,12vh) scale(1.18); filter:blur(90px) hue-rotate(45deg);}
}
@keyframes ambientB{
  0%{transform:translate(0,0) scale(1); filter:blur(90px) hue-rotate(0deg);}
  100%{transform:translate(-14vw,-14vh) scale(1.12); filter:blur(90px) hue-rotate(-55deg);}
}

::selection{background:var(--ig); color:#fff;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg-soft);}
::-webkit-scrollbar-thumb{background:var(--grad); border-radius:4px;}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:2px solid var(--ig); outline-offset:3px;}

.wrap{max-width:1280px; margin:0 auto; padding-left:6%; padding-right:6%;}

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:1000;
  width:min(1200px, 92%);
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 9px 9px 22px;
  background:linear-gradient(135deg, rgba(18,10,28,0.74) 0%, rgba(26,14,40,0.68) 50%, rgba(20,10,32,0.74) 100%);
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:20px;
  box-shadow:0 12px 40px -14px rgba(20,10,35,0.6), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.1);
}
nav::before{
  content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 30%, transparent 60%);
}
.nav-logo{position:relative; z-index:1; display:inline-flex; align-items:center; height:32px;}
.nav-logo img{height:29px; width:auto; display:block; transition:transform 0.5s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 2px 10px rgba(225,48,108,0.35));}
.nav-logo:hover img{transform:scale(1.06);}
.nav-links{display:flex; align-items:center; gap:0.2rem; position:relative; z-index:1;}
.nav-links a{
  font-family:var(--f-body); font-size:0.88rem; font-weight:500;
  color:rgba(255,255,255,0.78); transition:color 0.25s, background 0.25s;
  padding:9px 15px; border-radius:12px;
}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,0.10);}
.nav-links a.active{color:#fff; background:rgba(255,255,255,0.14);}
.nav-cta{
  background:#fff !important; color:var(--ink) !important;
  padding:10px 22px !important; border-radius:12px !important;
  font-weight:700 !important; box-shadow:0 6px 18px -4px rgba(0,0,0,0.4);
  transition:transform 0.25s, box-shadow 0.25s;
  margin-left:0.4rem;
}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(0,0,0,0.55); background:#fff !important;}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001; background:none; border:none;}
.hamburger span{width:24px;height:2.5px;background:#fff;border-radius:2px;transition:0.3s;}
.mobile-menu{
  position:fixed; inset:0; background:var(--bg); z-index:999;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:1.5rem; padding:0 8%;
  transform:translateX(100%); transition:transform 0.4s ease;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{
  font-family:var(--f-display); font-weight:700; font-size:2.3rem; color:var(--ink);
}
.mobile-menu a.mm-cta{
  font-family:var(--f-body); font-size:1rem;
  background:var(--grad); color:#fff; padding:14px 28px; border-radius:100px;
  font-weight:700; margin-top:0.5rem; display:inline-block;
}

@media(max-width:860px){
  nav{padding:9px 10px 9px 18px; border-radius:18px;}
  .nav-links{display:none;}
  .hamburger{display:flex; margin-right:4px;}
}

/* ============================================================
   BADGES / EYEBROWS — colorful pill labels (replaces old REC tag)
   ============================================================ */
.eyebrow, .vf-rec{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-size:0.8rem; font-weight:700; letter-spacing:0.3px;
  color:var(--ig); background:rgba(225,48,108,0.09);
  padding:8px 16px; border-radius:100px; margin-bottom:1.2rem;
  text-transform:none;
}
.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad);}
.vf-rec-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);flex-shrink:0;animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.8);}}

/* neutralize the old viewfinder corner-bracket component */
.viewfinder{position:relative; border-radius:24px; overflow:hidden;}
.vf-corner{display:none;}
.timecode{font-family:var(--f-display); font-weight:700;}

/* ============================================================
   TYPOGRAPHY / SECTION HEADERS
   ============================================================ */
.section-head{max-width:680px; margin-bottom:3.2rem;}
.section-title{
  font-family:var(--f-display); font-weight:700; font-size:clamp(2.3rem,5vw,3.8rem);
  line-height:1.05; margin-bottom:1.1rem; letter-spacing:-1px; color:var(--ink);
}
.section-title em{
  font-style:normal; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-desc{color:var(--ink-dim); font-size:1.08rem; line-height:1.75; max-width:560px;}

section{padding:120px 0; position:relative;}
@media(max-width:768px){section{padding:80px 0;}}

.section-alt{
  background:linear-gradient(180deg, rgba(246,245,252,0) 0%, rgba(246,245,252,0.75) 12%, rgba(246,245,252,0.75) 88%, rgba(246,245,252,0) 100%);
}
.section-dark{background:var(--bg-dark); color:#fff;}
.section-dark .ink-dim, .section-dark .section-desc{color:rgba(255,255,255,0.65);}
.section-dark .section-title{color:#fff;}

/* Decorative blurred gradient blobs for energy */
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35; pointer-events:none; z-index:0;}
.blob-1{width:420px;height:420px;background:var(--ig);top:-120px;left:-120px;}
.blob-2{width:380px;height:380px;background:var(--sun);bottom:-100px;right:-80px;opacity:0.25;}
.blob-3{width:320px;height:320px;background:var(--fb);top:20%;right:10%;opacity:0.15;}

/* ============================================================
   BUTTONS — refined, premium
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:0.95rem; font-weight:600;
  padding:16px 30px; border-radius:14px; border:1.5px solid transparent;
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, background 0.3s, border-color 0.3s;
  cursor:pointer; position:relative; overflow:hidden;
}
.btn::after{
  content:'\2192'; font-size:1.05em; line-height:1;
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::after{transform:translateX(5px);}
.btn::before{
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.22), transparent);
  transform:skewX(-20deg); transition:left 0.6s ease;
}
.btn:hover::before{left:130%;}
.btn-primary{background:var(--ink); color:#fff; box-shadow:0 10px 26px -8px rgba(20,18,31,0.45);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 36px -10px rgba(20,18,31,0.55);}
.btn-outline{border-color:var(--line-strong); color:var(--ink); background:#fff;}
.btn-outline::before{display:none;}
.btn-outline:hover{border-color:var(--ink); transform:translateY(-3px); box-shadow:0 12px 26px -12px rgba(20,18,31,0.25);}
.btn-wa{background:var(--wa); color:#fff; box-shadow:0 10px 26px -8px rgba(37,211,102,0.45);}
.btn-wa:hover{transform:translateY(-3px); box-shadow:0 18px 36px -10px rgba(37,211,102,0.5);}
.btn-light{background:#fff; color:var(--ink); box-shadow:0 10px 26px -8px rgba(0,0,0,0.3);}
.btn-light:hover{transform:translateY(-3px);}

/* ============================================================
   PLATFORM ICON CHIPS — literal social icons, front and center
   ============================================================ */
.platform-row{display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap;}
.platform-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px; box-shadow:0 6px 18px rgba(20,18,31,0.08);
  transition:transform 0.3s;
}
.platform-chip:hover{transform:translateY(-4px) rotate(-4deg);}
.platform-chip svg{width:28px;height:28px;}
.platform-chip.ig{background:var(--grad);}
.platform-chip.fb{background:var(--fb);}
.platform-chip.yt{background:var(--yt);}
.platform-chip.li{background:var(--li);}
.platform-chip.wa{background:var(--wa);}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{padding:180px 0 190px; position:relative; overflow:visible;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:4rem; align-items:center; position:relative; z-index:1;}
.hero-grid > [data-stagger]{position:relative;}
.hero-title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(3.2rem,8vw,6.4rem); line-height:0.96; letter-spacing:-2px;
  margin-bottom:1.6rem; color:var(--ink);
}
.hero-title .line2{
  display:block; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-desc{color:var(--ink-dim); font-size:1.2rem; line-height:1.75; max-width:480px; margin-bottom:2rem;}
.hero-btns{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem;}
.hero-stats{display:grid; grid-template-columns:repeat(4,auto); gap:2.4rem;}
.hero-stat-num{font-family:var(--f-display); font-size:1.8rem; font-weight:700; color:var(--ink); display:block;}
.hero-stat-label{font-family:var(--f-body); font-size:0.75rem; font-weight:600; color:var(--ink-faint);}

.hero-hud{
  background:#fff; border:1px solid var(--line); border-radius:28px;
  padding:2.4rem; position:relative; box-shadow:0 30px 60px -20px rgba(20,18,31,0.18);
}
.hero-hud-counter{
  font-family:var(--f-display); font-size:clamp(2.6rem,5vw,3.6rem); font-weight:700;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-1px; margin:0.8rem 0 0.3rem;
}
.hero-hud-label{font-family:var(--f-body); font-size:0.85rem; font-weight:600; color:var(--ink-dim);}
.hero-hud-divider{height:1px; background:var(--line); margin:1.6rem 0;}
.hero-hud-mini{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem;}
.hero-hud-mini-num{font-family:var(--f-display); font-size:1.3rem; font-weight:700; color:var(--ink);}
.hero-hud-mini-label{font-family:var(--f-body); font-size:0.72rem; font-weight:600; color:var(--ink-faint);}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-stats{grid-template-columns:repeat(2,auto);}
}

/* Marquee strip */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; overflow:hidden; white-space:nowrap; background:rgba(246,245,252,0.7);
}
.marquee-track{display:inline-flex; gap:2.8rem; animation:scroll 32s linear infinite;}
.marquee-item{font-family:var(--f-body); font-size:0.92rem; font-weight:600; color:var(--ink-dim);}
.marquee-item b{background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   PAGE HERO (secondary pages)
   ============================================================ */
.page-hero{padding:165px 0 80px; text-align:left; position:relative; overflow:hidden;}
.page-hero-bg{display:none;}
.page-hero-title{font-family:var(--f-display); font-weight:700; font-size:clamp(3rem,7.5vw,5.6rem); line-height:0.98; letter-spacing:-2px; margin-bottom:1.3rem; position:relative; color:var(--ink);}
.page-hero-title em{font-style:normal; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.page-hero-desc{color:var(--ink-dim); font-size:1.15rem; line-height:1.8; max-width:620px; position:relative;}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.service-card{background:#fff; padding:2.6rem 2.1rem; position:relative; transition:transform 0.3s,box-shadow 0.3s; border-radius:22px; border:1px solid var(--line); box-shadow:0 4px 16px rgba(20,18,31,0.04);}
.service-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -12px rgba(20,18,31,0.14);}
.service-num{
  font-family:var(--f-display); font-weight:700; font-size:0.9rem; margin-bottom:1.4rem; display:inline-flex;
  width:38px; height:38px; align-items:center; justify-content:center; border-radius:12px;
  background:var(--grad-soft); color:var(--ig);
}
.service-title{font-family:var(--f-display); font-size:1.35rem; font-weight:700; margin-bottom:0.7rem; color:var(--ink);}
.service-desc{color:var(--ink-dim); font-size:0.95rem; line-height:1.7;}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr;}}

/* Process timeline — animated: gradient line draws in, steps cascade */
.process-timeline{position:relative; padding-left:2px;}
.process-track{
  position:absolute; left:19px; top:10px; bottom:10px; width:3px; border-radius:2px;
  background:linear-gradient(180deg,#833AB4,#E1306C,#FCAF45);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.4s cubic-bezier(.6,.05,.2,1);
}
.process-timeline.animate .process-track{transform:scaleY(1);}
.process-step{
  position:relative; padding-left:3.6rem; padding-bottom:3rem;
  opacity:0; transform:translateX(-22px);
  transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.process-timeline.animate .process-step{opacity:1; transform:translateX(0);}
.process-timeline.animate .process-step:nth-child(2){transition-delay:0.15s;}
.process-timeline.animate .process-step:nth-child(3){transition-delay:0.45s;}
.process-timeline.animate .process-step:nth-child(4){transition-delay:0.75s;}
.process-step:last-child{padding-bottom:0;}
.process-step::before{
  content:''; position:absolute; left:4px; top:0; width:32px; height:32px; border-radius:50%;
  background:var(--grad); box-shadow:0 0 0 6px #fff, 0 6px 16px rgba(225,48,108,0.4);
  transform:scale(0);
  transition:transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.process-timeline.animate .process-step::before{transform:scale(1);}
.process-timeline.animate .process-step:nth-child(3)::before{transition-delay:0.5s;}
.process-timeline.animate .process-step:nth-child(4)::before{transition-delay:0.8s;}
.process-step::after{
  content:''; position:absolute; left:12px; top:8px; width:16px; height:16px; border-radius:50%;
  background:var(--grad); opacity:0; z-index:-1;
}
.process-timeline.animate .process-step::after{animation:ringPulse 2.4s ease-out infinite;}
.process-track::before{
  content:''; position:absolute; left:50%; transform:translateX(-50%); top:0;
  width:11px; height:11px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px rgba(225,48,108,0.6), 0 0 16px rgba(225,48,108,0.9);
  opacity:0;
}
.process-timeline.animate .process-track::before{animation:travelPulse 3.4s ease-in-out infinite 1.6s;}
@keyframes travelPulse{0%{top:0;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{top:calc(100% - 11px);opacity:0;}}
.process-step:hover .process-title{background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
@keyframes ringPulse{0%{transform:scale(1);opacity:0.5;}70%{transform:scale(2.6);opacity:0;}100%{opacity:0;}}
.process-month{
  display:inline-flex; align-items:center; font-family:var(--f-display); font-weight:700; font-size:0.72rem;
  background:var(--grad); color:#fff; padding:6px 14px; border-radius:100px;
  letter-spacing:0.5px; margin-bottom:0.7rem; box-shadow:0 6px 16px -6px rgba(225,48,108,0.5);
}
.process-title{font-family:var(--f-display); font-weight:700; font-size:1.6rem; margin-bottom:0.6rem; color:var(--ink);}
.process-desc{color:var(--ink-dim); line-height:1.75; max-width:560px;}

/* ============================================================
   PLATFORMS (services page detail grid)
   ============================================================ */
.platforms-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem;}
.platform-card{border:1px solid var(--line); border-radius:22px; padding:2.4rem 1.4rem; text-align:center; transition:transform 0.3s,box-shadow 0.3s; background:#fff;}
.platform-card:hover{transform:translateY(-8px); box-shadow:0 20px 40px -12px rgba(20,18,31,0.14);}
.platform-logo{width:52px;height:52px;margin:0 auto 1.1rem;}
.platform-name{font-family:var(--f-display); font-weight:700; font-size:1.25rem; margin-bottom:0.5rem;}
.platform-card.ig .platform-name{background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.platform-card.fb .platform-name{color:var(--fb);}
.platform-card.yt .platform-name{color:var(--yt);}
.platform-card.li .platform-name{color:var(--li);}
.platform-desc{color:var(--ink-dim); font-size:0.88rem; line-height:1.6;}
@media(max-width:768px){.platforms-grid{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   CASE STUDIES (work page + home preview)
   ============================================================ */
.cs-list{display:flex; flex-direction:column; gap:1.4rem;}
.cs-card{background:#fff; padding:3rem; border-radius:26px; border:1px solid var(--line); box-shadow:0 4px 20px rgba(20,18,31,0.04);}
.cs-top{display:flex; align-items:center; gap:1.2rem; margin-bottom:2rem; flex-wrap:wrap;}
.cs-pfp{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 2px var(--line);}
.cs-pfp-init{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;background:var(--grad);color:#fff;}
.cs-name{font-family:var(--f-display); font-weight:700; font-size:1.35rem; color:var(--ink);}
.cs-platform{font-family:var(--f-body); font-size:0.82rem; color:var(--ink-dim); font-weight:600;}
.cs-view-btn{margin-left:auto; font-family:var(--f-body); font-size:0.82rem; font-weight:700; text-transform:none; border:2px solid var(--line-strong); padding:9px 18px; border-radius:100px; transition:border-color 0.25s,color 0.25s,background 0.25s;}
.cs-view-btn:hover{border-color:var(--ig); color:var(--ig); background:var(--grad-soft);}
.cs-grid-body{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;}
.cs-lbl{font-family:var(--f-display); font-weight:700; font-size:0.8rem; color:var(--ig); margin-bottom:0.6rem;}
.cs-body-text{color:var(--ink-dim); font-size:0.97rem; line-height:1.75; margin-bottom:1.6rem;}
.cs-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1rem;}
.cs-pill{border:1px solid var(--line); border-radius:16px; padding:1.1rem 0.8rem; text-align:center; background:var(--bg-soft);}
.cs-pill-val{font-family:var(--f-display); font-size:1.3rem; font-weight:700; display:block; color:var(--ink);}
.cs-pill-lbl{font-family:var(--f-body); font-size:0.68rem; font-weight:600; color:var(--ink-faint);}
@media(max-width:800px){.cs-grid-body{grid-template-columns:1fr;} .cs-stats{grid-template-columns:repeat(2,1fr);} .cs-card{padding:2rem 1.4rem;}}

/* Home preview (compact) cards */
.cs-preview-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.cs-preview-card{background:#fff; padding:2.1rem; transition:transform 0.3s,box-shadow 0.3s; border-radius:22px; border:1px solid var(--line); box-shadow:0 4px 16px rgba(20,18,31,0.04);}
.cs-preview-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -12px rgba(20,18,31,0.14);}
.cs-preview-top{display:flex; align-items:center; gap:0.9rem; margin-bottom:1.2rem;}
.cs-preview-name{font-family:var(--f-display); font-weight:700; font-size:1.1rem;}
.cs-preview-platform{font-family:var(--f-body); font-size:0.72rem; color:var(--ink-dim); font-weight:600;}
.cs-preview-story{color:var(--ink-dim); font-size:0.88rem; line-height:1.65; margin-bottom:1.3rem;}
.cs-preview-stats{display:flex; gap:1.4rem; margin-bottom:1.3rem;}
.cs-preview-stat-val{font-family:var(--f-display); font-weight:700; font-size:1.05rem; display:block; color:var(--ink);}
.cs-preview-stat-lbl{font-family:var(--f-body); font-size:0.62rem; font-weight:600; text-transform:uppercase; color:var(--ink-faint);}
.cs-preview-link{font-family:var(--f-body); font-size:0.78rem; font-weight:700; color:var(--ig);}
@media(max-width:900px){.cs-preview-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.cs-preview-grid{grid-template-columns:1fr;}}

/* ============================================================
   RESULTS / VIRAL PROOF
   ============================================================ */
.viral-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-bottom:3rem;}
.viral-card{
  border:1px solid var(--line); border-radius:22px; padding:2rem 1.4rem; position:relative;
  background:#fff; overflow:hidden;
  transition:transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s, border-color 0.45s;
}
.viral-card::before{
  content:''; position:absolute; top:-70px; left:50%; transform:translateX(-50%);
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(225,48,108,0.16) 0%, transparent 70%);
  opacity:0; transition:opacity 0.5s;
}
.viral-card:hover{transform:translateY(-10px) rotate(-1.2deg) scale(1.02); box-shadow:0 30px 60px -18px rgba(20,18,31,0.22); border-color:transparent;}
.viral-card:hover::before{opacity:1;}
.viral-play{
  position:relative; width:46px; height:46px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
  box-shadow:0 10px 22px -8px rgba(225,48,108,0.55);
}
.viral-play svg{width:16px; height:16px; fill:#fff; margin-left:2px; position:relative; z-index:1;}
.viral-play::before, .viral-play::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(225,48,108,0.5);
  animation:playRipple 2.2s ease-out infinite;
}
.viral-play::after{animation-delay:1.1s;}
@keyframes playRipple{0%{transform:scale(1);opacity:0.8;}100%{transform:scale(1.9);opacity:0;}}
.viral-views{
  font-family:var(--f-display); font-size:2.3rem; font-weight:700; position:relative;
  background:var(--grad); background-size:220% 220%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmerText 5s ease-in-out infinite;
}
.viral-views-label{color:var(--ink-dim); font-size:0.82rem; margin:0.4rem 0 1.1rem; font-weight:500; position:relative;}
.viral-platform{font-family:var(--f-body); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--ig); margin-bottom:0.9rem; position:relative;}
.viral-watch{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--f-body);
  font-size:0.78rem; font-weight:700; color:var(--ig);
  background:var(--grad-soft); border-radius:100px; padding:8px 16px; position:relative;
  transition:transform 0.3s, box-shadow 0.3s;
}
.viral-watch:hover{transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(225,48,108,0.4);}
.viral-watch svg{width:11px;height:11px;fill:currentColor;}
@media(max-width:900px){.viral-grid{grid-template-columns:repeat(2,1fr);}}
.numbers-showcase{border-radius:32px; padding:3.6rem; text-align:center; position:relative; overflow:hidden; background:var(--grad); color:#fff;}
.big-number{font-family:var(--f-display); font-size:clamp(3.2rem,9vw,6rem); font-weight:700; position:relative; letter-spacing:-2px; color:#fff;}
.big-number-label{color:rgba(255,255,255,0.85); font-size:0.92rem; position:relative; margin-top:0.5rem; font-weight:600;}
@media(max-width:900px){.viral-grid{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{display:flex; flex-direction:column; gap:1rem;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;}
.faq-q{padding:1.7rem 1.9rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; font-weight:700; font-size:1.02rem; font-family:var(--f-display);}
.faq-icon{font-family:var(--f-display); color:#fff; background:var(--grad); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 0.3s; font-size:1.1rem;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height 0.35s ease, padding 0.35s ease; color:var(--ink-dim); font-size:0.96rem; line-height:1.75; padding:0 1.9rem;}
.faq-item.open .faq-a{max-height:400px; padding:0 1.9rem 1.9rem;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap{max-width:760px;}
.contact-tagline{font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,4vw,2.7rem); color:var(--ink-dim); margin-bottom:2.8rem; line-height:1.3;}
.contact-tagline em{font-style:normal; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.contact-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; margin-bottom:2.8rem;}
.contact-card{border:1px solid var(--line); border-radius:22px; padding:1.9rem 1.6rem; transition:transform 0.3s,box-shadow 0.3s; background:#fff;}
.contact-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -12px rgba(20,18,31,0.14);}
.contact-icon{width:24px;height:24px;color:var(--ig);margin-bottom:0.9rem;display:block;}
.contact-card-label{font-family:var(--f-body); color:var(--ink-faint); font-size:0.72rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:0.5rem;}
.contact-card-value{font-size:0.98rem; font-weight:700; font-family:var(--f-display);}
.cta-buttons{display:flex; gap:1rem; flex-wrap:wrap;}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem;}
.blog-card{background:#fff; padding:2.5rem; display:flex; flex-direction:column; transition:transform 0.3s,box-shadow 0.3s; border-radius:24px; border:1px solid var(--line); box-shadow:0 4px 16px rgba(20,18,31,0.04);}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -12px rgba(20,18,31,0.14);}
.blog-cat{font-family:var(--f-body); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:1rem; display:inline-block;}
.blog-title{font-family:var(--f-display); font-weight:700; font-size:1.4rem; line-height:1.3; margin-bottom:0.8rem; color:var(--ink);}
.blog-excerpt{color:var(--ink-dim); font-size:0.9rem; line-height:1.7; margin-bottom:1.6rem; flex-grow:1;}
.blog-foot{display:flex; justify-content:space-between; align-items:center; padding-top:1.3rem; border-top:1px solid var(--line);}
.blog-meta{font-family:var(--f-body); font-size:0.72rem; color:var(--ink-faint); font-weight:600;}
.blog-read{font-family:var(--f-body); font-size:0.78rem; font-weight:700; color:var(--ig);}
@media(max-width:800px){.blog-grid{grid-template-columns:1fr;}}

/* Individual blog post */
.post-meta-row{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.6rem;}
.post-back{font-family:var(--f-body); font-size:0.85rem; font-weight:700; color:var(--ink-dim); display:flex; align-items:center; gap:8px; margin-bottom:1.4rem; transition:color 0.25s; width:fit-content;}
.post-back:hover{color:var(--ig);}
.post-body{max-width:700px; padding:0 0 100px;}
.post-body p{color:var(--ink-dim); font-size:1.08rem; line-height:1.9; margin-bottom:1.5rem;}
.post-body h3{font-family:var(--f-display); font-size:1.65rem; font-weight:700; margin:2.4rem 0 1rem; color:var(--ink);}
.post-cta{margin-top:3rem; border-radius:28px; padding:2.6rem; text-align:center; background:var(--grad); color:#fff;}
.post-cta p{color:rgba(255,255,255,0.9); margin-bottom:1.4rem; font-weight:600; font-size:1.05rem;}
.post-cta .btn-primary{background:#fff; color:var(--ig); box-shadow:none;}
.post-cta .btn-primary:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,0.2);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--bg-dark); color:#fff; padding:70px 0 40px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:3rem; flex-wrap:wrap; margin-bottom:3rem;}
.footer-logo{font-family:var(--f-display); font-weight:700; font-size:1.8rem; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.footer-desc{color:rgba(255,255,255,0.55); font-size:0.85rem; line-height:1.7; margin-top:0.8rem; max-width:280px;}
.footer-links{display:flex; gap:2.5rem; flex-wrap:wrap;}
.footer-col-title{font-family:var(--f-body); font-size:0.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:1rem;}
.footer-col a{display:block; color:rgba(255,255,255,0.7); font-size:0.92rem; margin-bottom:0.7rem; transition:color 0.25s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding-top:1.8rem; font-family:var(--f-body); font-size:0.78rem; color:rgba(255,255,255,0.4); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem;}

/* ============================================================
   FADE-UP REVEAL
   ============================================================ */
.fade-up{transition:opacity 0.7s ease, transform 0.7s ease;}
html.js .fade-up:not(.visible){opacity:0; transform:translateY(24px);}
.fade-up.visible{opacity:1; transform:translateY(0);}

/* ============================================================
   PREMIUM ANIMATION SYSTEM
   ============================================================ */
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes floatY2{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(40px,-30px) scale(1.08);}66%{transform:translate(-30px,25px) scale(0.95);}}
@keyframes shimmerText{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes eqBar{0%,100%{transform:scaleY(0.35);}50%{transform:scaleY(1);}}
.blob{animation:blobDrift 18s ease-in-out infinite;}
.blob-2{animation-duration:24s; animation-delay:-8s;}

.hero-title .line2{
  background:var(--grad); background-size:220% 220%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmerText 7s ease-in-out infinite;
}

/* Staggered reveal: JS assigns incremental delays to .fade-up children of [data-stagger] */

/* ============================================================
   HERO PHONE MOCKUP
   ============================================================ */
.hero-visual{position:relative; display:flex; justify-content:center; padding:1rem 0;}
.phone-wrap{animation:floatY2 7s ease-in-out infinite; perspective:900px;}
.phone{
  width:min(300px, 76vw); aspect-ratio:9/19; border-radius:46px;
  background:var(--ink); padding:11px; position:relative; z-index:2;
  box-shadow:0 50px 90px -30px rgba(20,18,31,0.5), 0 0 0 1.5px rgba(20,18,31,0.08);
  transition:transform 0.2s ease-out;
}
.phone-notch{position:absolute; top:22px; left:50%; transform:translateX(-50%); width:34%; height:22px; background:var(--ink); border-radius:100px; z-index:3;}
.phone-screen{
  width:100%; height:100%; border-radius:37px; overflow:hidden; position:relative;
  background:linear-gradient(160deg,#833AB4 0%,#C13584 30%,#E1306C 55%,#F56040 80%,#FCAF45 100%);
  display:flex; flex-direction:column;
}
.reel-top{display:flex; justify-content:space-between; align-items:center; padding:52px 18px 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:1.05rem;}
.reel-top svg{width:22px;height:22px;stroke:#fff;}
.reel-center{flex:1; display:flex; align-items:center; justify-content:center; position:relative;}
.reel-eq{display:flex; gap:5px; align-items:flex-end; height:64px;}
.reel-eq span{width:7px; border-radius:4px; background:rgba(255,255,255,0.92); height:100%; transform-origin:bottom; animation:eqBar 1.1s ease-in-out infinite;}
.reel-eq span:nth-child(2){animation-delay:0.12s;} .reel-eq span:nth-child(3){animation-delay:0.28s;}
.reel-eq span:nth-child(4){animation-delay:0.07s;} .reel-eq span:nth-child(5){animation-delay:0.35s;}
.reel-eq span:nth-child(6){animation-delay:0.18s;} .reel-eq span:nth-child(7){animation-delay:0.42s;}
.reel-side{position:absolute; right:14px; bottom:110px; display:flex; flex-direction:column; gap:20px; align-items:center;}
.reel-side .act{display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; font-size:0.62rem; font-weight:700;}
.reel-side svg{width:26px;height:26px;fill:#fff;}
.reel-bottom{padding:0 18px 26px; color:#fff;}
.reel-user{display:flex; align-items:center; gap:9px; margin-bottom:9px;}
.reel-user img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff;}
.reel-user b{font-size:0.82rem; font-weight:700;}
.reel-follow{font-size:0.62rem; font-weight:700; border:1.5px solid rgba(255,255,255,0.8); border-radius:8px; padding:4px 10px;}
.reel-caption{font-size:0.72rem; opacity:0.92; line-height:1.45;}
.reel-progress{position:absolute; bottom:10px; left:18px; right:18px; height:3px; border-radius:2px; background:rgba(255,255,255,0.3); overflow:hidden;}
.reel-progress i{position:absolute; inset:0; width:62%; background:#fff; border-radius:2px;}

.float-chip{
  position:absolute; z-index:3; background:#fff; border-radius:18px;
  box-shadow:0 20px 44px -14px rgba(20,18,31,0.28); border:1px solid var(--line);
  padding:14px 18px; display:flex; align-items:center; gap:11px;
  animation:floatY 6s ease-in-out infinite;
}
.float-chip .fc-ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.float-chip .fc-num{font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.1;}
.float-chip .fc-lbl{font-size:0.68rem; font-weight:600; color:var(--ink-faint);}
.chip-views{top:14%; left:-4%; animation-delay:-2s;}
.chip-followers{bottom:16%; right:-6%; animation-delay:-4.5s;}
.chip-sold{top:52%; left:-12%; animation-delay:-1s;}
@media(max-width:900px){
  .chip-views{left:0;} .chip-followers{right:0;} .chip-sold{left:0; top:auto; bottom:-2%;}
}

/* ============================================================
   RESULTS WALL — compact cards, small sharp avatars
   ============================================================ */
.results-wall{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem;}
.result-card{
  border-radius:22px; background:#fff; border:1px solid var(--line);
  padding:1.7rem 1.8rem; box-shadow:0 4px 16px rgba(20,18,31,0.05);
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s;
}
.result-card:hover{transform:translateY(-8px); box-shadow:0 28px 54px -18px rgba(20,18,31,0.2);}
.result-top{display:flex; align-items:center; gap:0.95rem; margin-bottom:1.2rem;}
.result-pfp{width:48px; height:48px; border-radius:14px; object-fit:cover; box-shadow:0 0 0 2px var(--line); flex-shrink:0;}
.result-name{font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.2;}
.result-platform-tag{font-size:0.7rem; font-weight:700; color:var(--ink-faint); display:flex; align-items:center; gap:6px; margin-top:3px;}
.result-platform-tag i{width:7px;height:7px;border-radius:50%;background:var(--grad);display:inline-block;}
.result-transform{display:flex; align-items:baseline; gap:9px; font-family:var(--f-display); font-weight:700;}
.result-from{font-size:1rem; color:var(--ink-faint); text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--ig);}
.result-arrow{color:var(--ig); font-size:1rem;}
.result-to{font-size:1.85rem; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.result-metric{font-size:0.78rem; font-weight:600; color:var(--ink-faint); margin-top:0.3rem;}
@media(max-width:900px){.results-wall{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.results-wall{grid-template-columns:1fr;}}

/* ============================================================
   GROWTH SYSTEM — done-for-you protocol cards with imagery
   ============================================================ */
.system-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.system-card{
  border-radius:24px; overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(20,18,31,0.05);
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s;
}
.system-card:hover{transform:translateY(-8px); box-shadow:0 28px 54px -18px rgba(20,18,31,0.2);}
.system-img{position:relative; aspect-ratio:16/9.5; overflow:hidden;}
.system-img img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(.2,.8,.2,1);}
.system-card:hover .system-img img{transform:scale(1.07);}
.system-num{
  position:absolute; bottom:-19px; left:1.6rem; width:46px; height:46px; border-radius:14px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:0.95rem; color:var(--ig);
  box-shadow:0 10px 24px -8px rgba(20,18,31,0.25); z-index:2;
}
.system-body{padding:2.1rem 1.6rem 1.8rem;}
.system-title{font-family:var(--f-display); font-weight:700; font-size:1.25rem; color:var(--ink); margin-bottom:0.55rem;}
.system-desc{color:var(--ink-dim); font-size:0.92rem; line-height:1.7;}
@media(max-width:900px){.system-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.system-grid{grid-template-columns:1fr;}}

/* ============================================================
   CLIENT CHIPS — floating client cards around the hero phone
   ============================================================ */
.client-chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:11px;
  background:#fff; border:1px solid var(--line); border-radius:17px; padding:11px 15px;
  box-shadow:0 18px 40px -16px rgba(20,18,31,0.28);
  animation:floatY 6.5s ease-in-out infinite;
  transition:transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s;
  cursor:default;
}
.client-chip img{width:36px;height:36px;border-radius:11px;object-fit:cover;flex-shrink:0;}
.cc-name{font-family:var(--f-display); font-weight:700; font-size:0.82rem; color:var(--ink); line-height:1.15; white-space:nowrap;}
.cc-followers{font-size:0.72rem; font-weight:700; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap;}
.cc-extra{display:block; font-size:0.64rem; font-weight:600; color:var(--ink-faint); max-height:0; opacity:0; overflow:hidden; transition:max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease; white-space:nowrap;}
.client-chip:hover{transform:scale(1.14) translateY(-5px); box-shadow:0 30px 60px -18px rgba(20,18,31,0.4); z-index:6; animation-play-state:paused;}
.client-chip:hover .cc-extra{max-height:22px; opacity:1; margin-top:3px;}
.cchip-1{top:9%; left:-7%; animation-delay:-1.5s;}
.cchip-2{top:36%; right:-11%; animation-delay:-3.5s;}
.cchip-3{bottom:24%; left:-13%; animation-delay:-5s;}
.cchip-4{bottom:3%; right:-4%; animation-delay:-2.5s;}
@media(max-width:900px){
  .cchip-1{left:0;} .cchip-2{right:0;} .cchip-3{left:0;} .cchip-4{right:0; bottom:-2%;}
}

/* ============================================================
   STICKY SCROLL STEPS — one scroll reveals the next step
   ============================================================ */
.sticky-steps{position:relative;}
.steps-viewport{
  position:sticky; top:0; min-height:100vh; display:flex; align-items:center;
  overflow:hidden;
}
.steps-bg-num{
  position:absolute; right:2%; top:50%; transform:translateY(-50%);
  font-family:var(--f-display); font-weight:700; font-size:clamp(11rem,26vw,23rem);
  line-height:1; color:var(--bg-soft); z-index:0; user-select:none; pointer-events:none;
  transition:all 0.3s;
}
.steps-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:3.5rem; align-items:center; position:relative; z-index:1; width:100%;}
.steps-progress{display:flex; align-items:center; gap:1.1rem; margin-top:2.4rem; max-width:340px;}
.steps-count{font-family:var(--f-display); font-weight:700; font-size:0.95rem; color:var(--ink); white-space:nowrap;}
.steps-bar{flex:1; height:4px; background:var(--line); border-radius:3px; overflow:hidden;}
.steps-bar i{display:block; height:100%; width:0%; background:var(--grad); border-radius:3px; transition:width 0.25s ease;}
.steps-stack{position:relative; min-height:300px;}
.step-item{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(48px);
  transition:opacity 0.55s ease, transform 0.55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.step-item.active{opacity:1; transform:none; pointer-events:auto;}
.step-item.passed{opacity:0; transform:translateY(-48px);}
.step-tag{
  display:inline-flex; width:fit-content; align-items:center; gap:8px;
  background:var(--grad-soft); color:var(--ig); border-radius:11px; padding:7px 14px;
  font-size:0.76rem; font-weight:700; margin-bottom:1.1rem;
}
.step-title{font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,3.2vw,2.6rem); letter-spacing:-0.5px; color:var(--ink); margin-bottom:0.9rem;}
.step-desc{color:var(--ink-dim); font-size:1.08rem; line-height:1.85; max-width:500px;}
@media(max-width:900px){
  .steps-grid{grid-template-columns:1fr; gap:2rem;}
  .steps-stack{min-height:340px;}
  .steps-bg-num{top:12%; transform:none; font-size:9rem; opacity:0.7;}
}

/* ============================================================
   CONTACT PAGE — gradient panel, interactive rows, floating deco
   ============================================================ */
.contact-panel-wrap{position:relative; margin-top:1rem;}
.contact-panel{
  position:relative; border-radius:32px; background:var(--grad); color:#fff;
  padding:clamp(2rem,5vw,3.4rem); overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(225,48,108,0.45);
}
.cp-glow{position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,0.18); filter:blur(80px); top:-160px; right:-120px; pointer-events:none;}
.cp-glow2{position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(20,18,31,0.25); filter:blur(90px); bottom:-140px; left:-80px; pointer-events:none;}
.contact-rows{position:relative; display:flex; flex-direction:column;}
.contact-row{
  display:flex; align-items:center; gap:1.3rem; padding:1.5rem 0;
  border-bottom:1px solid rgba(255,255,255,0.28); color:#fff;
  transition:padding-left 0.35s cubic-bezier(.2,.8,.2,1);
}
.contact-row:last-child{border-bottom:none;}
.contact-row:hover{padding-left:14px;}
.cr-ico{width:50px; height:50px; border-radius:15px; background:rgba(255,255,255,0.2); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cr-ico svg{width:22px; height:22px; stroke:#fff;}
.cr-label{font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; opacity:0.8;}
.cr-value{font-family:var(--f-display); font-weight:700; font-size:clamp(1.05rem,2.6vw,1.55rem); line-height:1.25;}
.cr-arrow{margin-left:auto; font-size:1.4rem; opacity:0; transform:translateX(-10px); transition:opacity 0.35s, transform 0.35s;}
.contact-row:hover .cr-arrow{opacity:1; transform:none;}
.contact-panel-cta{position:relative; display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem;}
.contact-float{position:absolute; z-index:4; animation:floatY 6s ease-in-out infinite;}
.cfloat-1{top:-26px; right:8%; animation-delay:-2s;}
.cfloat-2{bottom:-26px; left:6%; animation-delay:-4s;}
.cfloat-3{top:32%; left:-26px; animation-delay:-1s;}
@media(max-width:700px){.cfloat-3{display:none;}}

/* ============================================================
   SERVICES — six step system rows
   ============================================================ */
.svc-steps{display:flex; flex-direction:column;}
.svc-step{
  display:grid; grid-template-columns:96px 1fr auto; gap:1.8rem; align-items:center;
  padding:2.2rem 0.5rem; border-bottom:1px solid var(--line);
  transition:transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.35s;
  border-radius:14px;
}
.svc-step:hover{transform:translateX(10px); background:var(--bg-soft);}
.svc-num{
  font-family:var(--f-display); font-weight:700; font-size:2.2rem; text-align:center;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.svc-title{font-family:var(--f-display); font-weight:700; font-size:1.45rem; color:var(--ink); margin-bottom:0.45rem;}
.svc-desc{color:var(--ink-dim); font-size:0.96rem; line-height:1.75; max-width:660px;}
.svc-arrow{font-size:1.5rem; color:var(--ink-faint); opacity:0; transform:translateX(-8px); transition:opacity 0.35s, transform 0.35s; padding-right:1rem;}
.svc-step:hover .svc-arrow{opacity:1; transform:none; color:var(--ig);}
@media(max-width:700px){
  .svc-step{grid-template-columns:64px 1fr; gap:1.1rem;}
  .svc-arrow{display:none;}
  .svc-num{font-size:1.7rem;}
}

/* ============================================================
   PHONE — Instagram search tab
   ============================================================ */
.search-screen{background:#fff; color:var(--ink);}
.ig-search-head{padding:56px 14px 10px;}
.ig-search-bar{
  display:flex; align-items:center; gap:9px; background:#F0EFF4; border-radius:12px;
  padding:10px 13px; font-size:0.82rem; font-weight:600; color:var(--ink-dim);
}
.ig-search-bar svg{width:15px;height:15px;stroke:var(--ink-dim);flex-shrink:0;}
.ig-search-bar .cursor{display:inline-block;width:1.5px;height:14px;background:var(--ig);animation:blink 1.1s step-end infinite;}
.ig-search-logo{height:12px; width:auto; display:inline-block; vertical-align:middle; padding:4px 6px; background:linear-gradient(135deg,#1a0f26,#2a1440); border-radius:6px; box-sizing:content-box;}
@keyframes blink{50%{opacity:0;}}
.ig-search-label{padding:12px 16px 6px; font-size:0.72rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.5px;}
.ig-rows{flex:1; overflow:hidden; display:flex; flex-direction:column;}
.ig-row{
  display:flex; align-items:center; gap:10px; padding:9px 14px; border:none; background:none;
  text-align:left; cursor:pointer; width:100%;
  transition:background 0.3s, transform 0.3s;
}
.ig-row img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1.5px var(--line);}
.ig-row.active img{box-shadow:0 0 0 2px #fff, 0 0 0 4px #E1306C;}
.igr-text{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.igr-text b{font-size:0.8rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.igr-text span{font-size:0.68rem; font-weight:500; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.igr-view{
  margin-left:auto; font-size:0.64rem; font-weight:700; color:var(--ig);
  background:var(--grad-soft); border-radius:8px; padding:5px 10px; flex-shrink:0;
  opacity:0; transform:translateX(6px); transition:opacity 0.3s, transform 0.3s;
}
.ig-row.active{background:linear-gradient(90deg, rgba(225,48,108,0.07), rgba(252,175,69,0.07)); transform:translateX(3px);}
.ig-row.active .igr-view{opacity:1; transform:none;}
.ig-bottom{
  display:flex; justify-content:space-around; align-items:center; padding:11px 8px 24px;
  border-top:1px solid var(--line);
}
.ig-bottom svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.9;opacity:0.55;}
.ig-bottom .ib-active svg{opacity:1; stroke:url(#navGrad);}
.ig-bottom img{width:22px;height:22px;border-radius:50%;object-fit:cover;opacity:0.8;}

/* Popup card outside the phone */
.search-popup{
  position:absolute; z-index:6; top:14%; left:-24%;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.15rem 1.3rem;
  box-shadow:0 26px 56px -18px rgba(20,18,31,0.32);
  display:flex; align-items:center; gap:0.95rem; min-width:250px;
  opacity:0; transform:scale(0.6) translateY(14px); pointer-events:none;
}
.search-popup.show{
  animation:popupIn 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes popupIn{
  from{opacity:0; transform:scale(0.6) translateY(14px);}
  to{opacity:1; transform:scale(1) translateY(0);}
}
.search-popup::after{
  content:''; position:absolute; right:-7px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:14px; height:14px; background:#fff; border-top:1px solid var(--line); border-right:1px solid var(--line);
}
.sp-img{width:52px;height:52px;border-radius:16px;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 2px var(--line);}
.sp-name{font-family:var(--f-display); font-weight:700; font-size:0.95rem; color:var(--ink); line-height:1.2;}
.sp-handle{font-size:0.68rem; font-weight:600; color:var(--ink-faint);}
.sp-followers{font-family:var(--f-display); font-weight:700; font-size:0.92rem; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-top:2px;}
.sp-extra{font-size:0.66rem; font-weight:600; color:var(--ink-faint);}
@media(max-width:900px){
  .search-popup{left:0; top:-6px; min-width:220px;}
  .search-popup::after{right:auto; left:24px; top:auto; bottom:-7px; transform:rotate(135deg);}
}

/* ============================================================
   NEXT BANNER — replaces the big counter block
   ============================================================ */
.ns-float{position:absolute; animation:floatY 6s ease-in-out infinite; z-index:1;}
.nsf-1{top:-20px; left:6%; animation-delay:-2s;}
.nsf-2{bottom:-20px; right:7%; animation-delay:-4s;}
.nsf-3{top:20%; right:3%; animation-delay:-1s;}
.ns-title{
  font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,5vw,3.4rem);
  letter-spacing:-1px; color:#fff; position:relative; line-height:1.05;
}
.ns-sub{color:rgba(255,255,255,0.88); font-size:1.02rem; font-weight:500; margin:1rem auto 1.8rem; max-width:520px; position:relative; line-height:1.7;}
@media(max-width:700px){.nsf-3{display:none;}}

/* ============================================================
   SCRIBBLES — handwritten creative-agency annotations
   ============================================================ */
.scribble{font-family:'Caveat', cursive; font-weight:700; color:var(--ig); line-height:1.1;}
.hero-visual{position:relative;}
.story-arrow{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-150px; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
}
.story-arrow .scribble{font-size:1.8rem; transform:rotate(-4deg); white-space:nowrap;}
.story-arrow-svg{width:56px; height:140px;}
.story-arrow-svg path{stroke:var(--ig); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.sa-line{stroke-dasharray:200; stroke-dashoffset:200;}
.sa-head{stroke-dasharray:60; stroke-dashoffset:60;}
/* draw as it enters view, then keep a gentle live pulse while scrolling */
.hero-visual.visible .sa-line{animation:drawArrow 1.3s ease forwards 0.3s, arrowBob 2.4s ease-in-out infinite 1.8s;}
.hero-visual.visible .sa-head{animation:drawArrow 0.5s ease forwards 1.4s, arrowBob 2.4s ease-in-out infinite 1.8s;}
@keyframes drawArrow{to{stroke-dashoffset:0;}}
@keyframes arrowBob{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
.story-arrow-svg{animation:arrowGlow 2.4s ease-in-out infinite;}
@keyframes arrowGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(225,48,108,0));}50%{filter:drop-shadow(0 3px 8px rgba(225,48,108,0.45));}}
@media(max-width:900px){.story-arrow{bottom:-130px;}}

/* ============================================================
   NEXT BANNER v2 — creative studio wall, not an AI gradient box
   ============================================================ */
.next-banner{
  position:relative; border-radius:34px; background:var(--ink); color:#fff;
  padding:4.6rem 2rem; text-align:center; overflow:hidden;
}
.nb-blob{position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none;}
.nb-blob-1{width:340px;height:340px;background:rgba(225,48,108,0.4);top:-120px;left:-80px;animation:blobDrift 20s ease-in-out infinite;}
.nb-blob-2{width:300px;height:300px;background:rgba(131,58,180,0.45);bottom:-110px;right:-60px;animation:blobDrift 26s ease-in-out infinite reverse;}
.nb-title{
  font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,6vw,4.2rem);
  letter-spacing:-1.5px; line-height:1.05; position:relative;
}
.nb-mark{position:relative; display:inline-block; background:var(--grad); background-size:200% 200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmerText 6s ease-in-out infinite;}
.nb-mark svg{position:absolute; left:-4%; bottom:-14px; width:108%; height:16px; overflow:visible;}
.nb-mark svg path{stroke:#FCAF45; stroke-width:4; fill:none; stroke-linecap:round;}
.nb-sub{color:rgba(255,255,255,0.75); font-size:1.02rem; font-weight:500; margin:1.4rem auto 2rem; max-width:480px; position:relative; line-height:1.7;}
.polaroid{
  position:absolute; background:#fff; padding:7px 7px 6px; border-radius:6px;
  box-shadow:0 20px 44px -12px rgba(0,0,0,0.55); z-index:2;
}
.polaroid img{width:76px; height:76px; object-fit:cover; border-radius:3px; display:block;}
.polaroid .scribble{color:var(--ink); font-size:1.05rem; display:block; text-align:center; margin-top:2px;}
.polaroid::before{
  content:''; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-5deg);
  width:52px; height:19px; background:rgba(252,175,69,0.45); border-radius:2px;
}
.pol-1{left:7%; top:16%; transform:rotate(-8deg); animation:floatY 7s ease-in-out infinite;}
.pol-2{right:7%; bottom:13%; transform:rotate(7deg); animation:floatY2 6s ease-in-out infinite;}
.nb-note{position:absolute; right:13%; top:16%; font-size:1.5rem; color:#FCAF45; transform:rotate(9deg); animation:floatY2 5.5s ease-in-out infinite;}
@media(max-width:760px){.polaroid,.nb-note{display:none;}}

/* ============================================================
   SERVICES — draw-on icons + outlined numbers that fill
   ============================================================ */
.svc-step{grid-template-columns:84px 56px 1fr auto;}
.svc-icon{width:46px; height:46px; flex-shrink:0; justify-self:center;}
.svc-icon path, .svc-icon circle, .svc-icon rect, .svc-icon line, .svc-icon polyline{
  stroke:url(#svcGrad); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:300; stroke-dashoffset:300;
}
.svc-step.visible .svc-icon path, .svc-step.visible .svc-icon circle, .svc-step.visible .svc-icon rect,
.svc-step.visible .svc-icon line, .svc-step.visible .svc-icon polyline{
  animation:drawLine 1.4s ease forwards 0.25s;
}
@keyframes drawLine{to{stroke-dashoffset:0;}}
.svc-num{
  font-size:2.5rem; color:transparent;
  -webkit-text-stroke:1.6px #E1306C; text-stroke:1.6px #E1306C;
  background:none; -webkit-text-fill-color:transparent;
  transition:transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.svc-step:hover .svc-num{
  -webkit-text-stroke:0px transparent;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  transform:rotate(-7deg) scale(1.18);
}
@media(max-width:700px){
  .svc-step{grid-template-columns:56px 44px 1fr;}
  .svc-icon{width:36px;height:36px;}
  .svc-num{font-size:1.8rem;}
}