/*
Theme Name: iManage Socially Pro
Author: ChatGPT
Version: 1.0
Description: WordPress theme converted from provided HTML.
Text Domain: imanage-socially-pro
*/


/* ═══════════════════════════════════════════
   BRAND PALETTE — Logo Burgundy + Champagne Gold + Soft Cream
═══════════════════════════════════════════ */
:root {
  /* Core brand from logo */
  --bur: #7a0d24;
  --bur-mid: #9b1030;
  --bur-light: #c4405a;
  --bur-glow: rgba(154,16,48,0.4);
  --gold: #c9a84c;
  --gold-light: #e8cc7a;
  --gold-pale: #f5e8c0;

  /* Theme — warm cream/rose tones, not dark */
  --bg: #fdf6f0;
  --bg2: #f8ede4;
  --bg3: #f2ddd0;
  --surface: #ffffff;
  --surface2: rgba(255,255,255,0.7);

  /* Text */
  --ink: #1c0a0f;
  --ink2: #4a2030;
  --ink3: #8a5a68;
  --white: #ffffff;

  /* Accents */
  --rose: #e8637a;
  --peach: #f5a08a;
  --sage: #7aab8a;
  --sky: #6aa8c9;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --shadow: 0 8px 40px rgba(122,13,36,0.12);
  --shadow-lg: 0 20px 80px rgba(122,13,36,0.18);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--font-body); font-weight:300; overflow-x:hidden; }

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 60px; display:flex; align-items:center; justify-content:space-between;
  transition:all 0.5s var(--ease);
}
nav.scrolled {
  background:rgba(253,246,240,0.94); backdrop-filter:blur(24px);
  padding:14px 60px; box-shadow:0 1px 30px rgba(122,13,36,0.08);
  border-bottom:1px solid rgba(201,168,76,0.15);
}
.nav-logo { font-family:var(--font-display); font-size:1.45rem; font-weight:700; color:var(--bur); text-decoration:none; letter-spacing:0.02em; display:flex; align-items:center; gap:2px; }
.nav-logo span { color:var(--gold); }
.nav-links { display:flex; gap:32px; align-items:center; list-style:none; }
.nav-links a { font-size:0.78rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink2); text-decoration:none; transition:color 0.3s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1.5px; background:var(--gold); transition:width 0.3s; }
.nav-links a:hover { color:var(--bur); }
.nav-links a:hover::after { width:100%; }
.nav-cta { background:linear-gradient(135deg,var(--bur),var(--bur-light)) !important; color:var(--white) !important; padding:10px 26px; border-radius:40px !important; font-weight:600 !important; box-shadow:0 4px 20px rgba(122,13,36,0.3); transition:transform 0.3s, box-shadow 0.3s !important; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(122,13,36,0.4) !important; }
.nav-cta::after { display:none !important; }

/* Page tabs nav */
.page-tabs { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:999; display:flex; gap:6px; background:rgba(253,246,240,0.9); backdrop-filter:blur(20px); padding:8px; border-radius:50px; border:1px solid rgba(201,168,76,0.2); box-shadow:0 4px 30px rgba(122,13,36,0.1); transition:all 0.5s; }
.page-tab { padding:8px 22px; border-radius:40px; border:none; background:transparent; font-family:var(--font-body); font-size:0.75rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink2); cursor:pointer; transition:all 0.3s; }
.page-tab.active { background:var(--bur); color:var(--white); box-shadow:0 4px 16px rgba(122,13,36,0.3); }
.page-tab:hover:not(.active) { color:var(--bur); background:rgba(122,13,36,0.06); }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; z-index:1001; cursor:pointer; }
.hamburger span { display:block; width:24px; height:1.5px; background:var(--bur); transition:all 0.35s; transform-origin:center; }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; inset:0; z-index:999; background:rgba(253,246,240,0.98); backdrop-filter:blur(30px); flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-family:var(--font-display); font-size:2rem; font-weight:400; color:var(--ink); text-decoration:none; transition:color 0.3s; }
.mobile-menu a:hover { color:var(--bur); }

/* ═══════════════════════════════════════════
   PAGE SECTIONS (tab-based pages)
═══════════════════════════════════════════ */
.page { display:none; animation:pageFadeIn 0.6s var(--ease-out) forwards; }
.page.active { display:block; }
@keyframes pageFadeIn { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
#hero {
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:160px 40px 100px; position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(154,16,48,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(201,168,76,0.1) 0%, transparent 60%),
    linear-gradient(170deg, var(--bg) 0%, var(--bg2) 50%, #f0e4da 100%);
}
/* Animated decorative circles */
.hero-deco { position:absolute; border-radius:50%; pointer-events:none; }
.deco1 { width:500px; height:500px; top:-100px; right:-100px; background:radial-gradient(circle, rgba(154,16,48,0.07), transparent 70%); animation:decoFloat 12s ease-in-out infinite; }
.deco2 { width:300px; height:300px; bottom:50px; left:-80px; background:radial-gradient(circle, rgba(201,168,76,0.1), transparent 70%); animation:decoFloat 9s ease-in-out 3s infinite reverse; }
.deco3 { width:180px; height:180px; top:30%; right:12%; background:radial-gradient(circle, rgba(232,99,122,0.1), transparent 70%); animation:decoFloat 7s ease-in-out 1s infinite; }
@keyframes decoFloat { 0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-20px,-30px) scale(1.04);} }

/* Floating geometry */
.geo-shape { position:absolute; pointer-events:none; }
.geo1 { width:60px; height:60px; border:1.5px solid rgba(201,168,76,0.3); border-radius:12px; top:22%; left:8%; animation:geoSpin 20s linear infinite; }
.geo2 { width:40px; height:40px; border:1.5px solid rgba(122,13,36,0.2); border-radius:50%; top:60%; right:8%; animation:geoSpin 14s linear reverse infinite; }
.geo3 { width:80px; height:2px; background:linear-gradient(to right, transparent, var(--gold), transparent); top:35%; left:5%; animation:geoFade 4s ease-in-out infinite; }
@keyframes geoSpin { from{transform:rotate(0deg);}to{transform:rotate(360deg);} }
@keyframes geoFade { 0%,100%{opacity:0.3;}50%{opacity:0.8;} }

/* Particles */
.particle { position:absolute; border-radius:50%; pointer-events:none; animation:partFloat linear infinite; z-index:0; }
@keyframes partFloat { 0%{opacity:0;transform:translateY(0);}10%{opacity:1;}90%{opacity:0.5;}100%{opacity:0;transform:translateY(-100vh);} }

.hero-eyebrow { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--bur-light); margin-bottom:24px; display:flex; align-items:center; gap:16px; justify-content:center; position:relative; z-index:1; opacity:0; animation:fadeUp 0.8s 0.3s forwards; }
.eyebrow-line { width:36px; height:1px; background:var(--gold); }

.hero-title { font-family:var(--font-display); font-size:clamp(3.2rem,8vw,8rem); font-weight:700; line-height:1.0; margin-bottom:8px; position:relative; z-index:1; opacity:0; animation:fadeUp 0.9s 0.5s forwards; color:var(--ink); }
.hero-title em { font-style:italic; color:var(--bur); }
.hero-title .gold { color:var(--gold); }
.glitch { display:inline-block; position:relative; }
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; top:0; left:0; }
.glitch::before { color:var(--rose); animation:glitch1 6s infinite; opacity:0.5; clip-path:polygon(0 0,100% 0,100% 35%,0 35%); }
.glitch::after { color:var(--gold-light); animation:glitch2 6s infinite; opacity:0.4; clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%); }
@keyframes glitch1 { 0%,90%,100%{transform:none;}92%{transform:translate(-3px,1px);}96%{transform:translate(3px,-1px);} }
@keyframes glitch2 { 0%,90%,100%{transform:none;}93%{transform:translate(3px,2px);}97%{transform:translate(-3px,-2px);} }

.hero-typing { font-family:var(--font-display); font-size:clamp(1.6rem,4.5vw,4rem); font-weight:400; font-style:italic; color:var(--bur-mid); min-height:1.2em; margin-bottom:28px; position:relative; z-index:1; opacity:0; animation:fadeUp 0.9s 0.7s forwards; }
#typing-text { border-right:2px solid var(--bur); padding-right:4px; animation:blink 0.9s infinite; }
@keyframes blink { 0%,100%{border-color:var(--bur);}50%{border-color:transparent;} }

.hero-sub { font-size:clamp(0.95rem,2vw,1.1rem); color:var(--ink2); font-weight:300; max-width:540px; line-height:1.9; margin:0 auto 48px; position:relative; z-index:1; opacity:0; animation:fadeUp 0.9s 0.9s forwards; }

.hero-btns { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; position:relative; z-index:1; opacity:0; animation:fadeUp 0.9s 1.1s forwards; }
.btn-primary { padding:16px 46px; background:linear-gradient(135deg,var(--bur),var(--bur-light)); color:var(--white); border:none; border-radius:50px; font-family:var(--font-body); font-size:0.82rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; display:inline-block; box-shadow:0 6px 30px rgba(122,13,36,0.35); transition:all 0.35s var(--ease-out); position:relative; overflow:hidden; cursor:pointer; }
.btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 50px rgba(122,13,36,0.45); }
.btn-outline { padding:16px 46px; background:transparent; color:var(--bur); border:1.5px solid var(--bur); border-radius:50px; font-family:var(--font-body); font-size:0.82rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; display:inline-block; transition:all 0.35s var(--ease-out); }
.btn-outline:hover { background:var(--bur); color:var(--white); transform:translateY(-3px); box-shadow:0 10px 36px rgba(122,13,36,0.25); }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-light)) !important; color:var(--ink) !important; box-shadow:0 6px 30px rgba(201,168,76,0.4) !important; }
.btn-gold:hover { box-shadow:0 14px 50px rgba(201,168,76,0.55) !important; }

/* Floating metric cards */
.hero-metrics { position:absolute; right:max(30px,4vw); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; opacity:0; animation:fadeUp 1s 1.4s forwards; z-index:2; }
.metric-card { background:var(--surface); border:1px solid rgba(201,168,76,0.25); border-radius:14px; padding:16px 22px; text-align:center; backdrop-filter:blur(16px); min-width:130px; box-shadow:var(--shadow); transition:all 0.3s; }
.metric-card:hover { transform:scale(1.04); box-shadow:var(--shadow-lg); }
.metric-card .m-num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--bur); line-height:1; }
.metric-card .m-lbl { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink3); margin-top:5px; }
.metric-badge { background:rgba(122,186,130,0.12); border:1px solid rgba(122,186,130,0.35); padding:8px 16px; border-radius:40px; font-family:var(--font-mono); font-size:0.62rem; color:var(--sage); letter-spacing:0.1em; display:inline-flex; align-items:center; gap:8px; }
.metric-dot { width:7px; height:7px; border-radius:50%; background:var(--sage); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(1.5);} }

.hero-scroll { position:absolute; bottom:35px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; animation:fadeUp 1s 1.8s forwards; z-index:2; }
.scroll-line { width:1px; height:55px; background:linear-gradient(to bottom,var(--bur),transparent); animation:scrollAnim 2.4s infinite; }
@keyframes scrollAnim { 0%{transform:scaleY(0);transform-origin:top;opacity:1;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;opacity:0;} }
.scroll-txt { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.2em; color:var(--ink3); text-transform:uppercase; }

@keyframes fadeUp { from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);} }

/* ═══════════════════════════════════════════
   STATS BAND
═══════════════════════════════════════════ */
#stats { display:grid; grid-template-columns:repeat(4,1fr); background:var(--bur); position:relative; z-index:2; }
.stat-item { padding:48px 32px; text-align:center; border-right:1px solid rgba(255,255,255,0.12); position:relative; overflow:hidden; transition:background 0.3s; }
.stat-item:last-child { border-right:none; }
.stat-item::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.04),transparent); opacity:0; transition:opacity 0.4s; }
.stat-item:hover::before { opacity:1; }
.stat-num { font-family:var(--font-display); font-size:clamp(2.4rem,4.5vw,3.8rem); font-weight:700; color:var(--gold-light); line-height:1; margin-bottom:10px; display:flex; align-items:baseline; justify-content:center; gap:2px; }
.stat-suf { font-size:0.55em; color:rgba(232,204,122,0.7); }
.stat-label { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.55); }

/* ═══════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════ */
.marquee-band { overflow:hidden; padding:16px 0; background:var(--bg2); border-bottom:1px solid rgba(201,168,76,0.15); position:relative; z-index:2; }
.marquee-track { display:flex; width:max-content; }
.marquee-track.fwd { animation:marqueeL 30s linear infinite; }
.marquee-track.rev { animation:marqueeR 24s linear infinite; }
.marquee-item { white-space:nowrap; padding:0 36px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink3); display:flex; align-items:center; gap:36px; }
.marquee-item::after { content:'✦'; color:var(--gold); font-size:0.5rem; opacity:0.7; }
@keyframes marqueeL { 0%{transform:translateX(0);}100%{transform:translateX(-50%);} }
@keyframes marqueeR { 0%{transform:translateX(-50%);}100%{transform:translateX(0);} }

/* ═══════════════════════════════════════════
   SHARED SECTION STYLES
═══════════════════════════════════════════ */
section { position:relative; z-index:2; }
.section-wrap { padding:100px 60px; }
.section-label { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:flex; align-items:center; gap:14px; }
.section-label::before { content:''; display:block; width:32px; height:1.5px; background:var(--gold); }
.section-title { font-family:var(--font-display); font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:700; line-height:1.08; color:var(--ink); }
.section-title em { font-style:italic; color:var(--bur); }
.section-title .gold { color:var(--gold); }

.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-30px); transition:opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-left.visible { opacity:1; transform:translateX(0); }

/* ═══════════════════════════════════════════
   SERVICES PAGE
═══════════════════════════════════════════ */
#services-page { background:var(--bg); }
.services-intro { text-align:center; max-width:650px; margin:0 auto 70px; }
.services-intro p { font-size:1.05rem; color:var(--ink2); line-height:1.85; margin-top:20px; }
.services-intro .section-label { justify-content:center; }
.services-intro .section-label::before { display:none; }

.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card {
  background:var(--surface); border:1px solid rgba(201,168,76,0.2); border-radius:20px;
  padding:44px 36px; position:relative; overflow:hidden; transition:all 0.45s var(--ease-out);
  box-shadow:0 2px 20px rgba(122,13,36,0.05);
}
.service-card::before { content:''; position:absolute; left:0; top:0; width:3px; height:0; background:linear-gradient(to bottom,var(--gold),var(--bur)); transition:height 0.5s var(--ease-out); border-radius:0 0 3px 3px; }
.service-card:hover::before { height:100%; }
.service-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:rgba(122,13,36,0.2); }
.service-icon { font-size:2.6rem; margin-bottom:20px; display:block; transition:transform 0.3s; }
.service-card:hover .service-icon { transform:scale(1.12); }
.service-num { font-family:var(--font-mono); font-size:0.62rem; color:var(--gold); letter-spacing:0.2em; margin-bottom:14px; }
.service-name { font-family:var(--font-display); font-size:1.5rem; font-weight:700; margin-bottom:12px; line-height:1.25; color:var(--ink); }
.service-desc { font-size:0.9rem; color:var(--ink2); line-height:1.85; }
.service-features { margin-top:22px; display:flex; flex-direction:column; gap:9px; }
.service-features li { font-family:var(--font-mono); font-size:0.67rem; letter-spacing:0.06em; color:var(--bur-mid); list-style:none; display:flex; align-items:center; gap:10px; }
.service-features li::before { content:'→'; color:var(--gold); font-size:0.7rem; }

/* New service card — highlighted */
.service-card.featured { background:linear-gradient(135deg,var(--bur),#b01838); color:var(--white); border-color:transparent; }
.service-card.featured .service-name { color:var(--white); }
.service-card.featured .service-desc { color:rgba(255,255,255,0.75); }
.service-card.featured .service-num { color:var(--gold-light); }
.service-card.featured .service-features li { color:rgba(255,255,255,0.85); }
.service-card.featured .service-features li::before { color:var(--gold-light); }
.service-card.featured::before { display:none; }
.service-card.featured:hover { box-shadow:0 20px 60px rgba(122,13,36,0.45); }

/* ═══════════════════════════════════════════
   RESULTS
═══════════════════════════════════════════ */
#results { background:var(--bg2); }
.results-header { text-align:center; margin-bottom:70px; }
.results-header .section-label { justify-content:center; }
.results-header .section-label::before { display:none; }
.results-header p { color:var(--ink2); font-size:1rem; margin-top:18px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.85; }

.results-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:880px; margin:0 auto 60px; }
.result-card { background:var(--surface); border:1px solid rgba(201,168,76,0.2); border-radius:18px; padding:32px 28px; position:relative; overflow:hidden; transition:all 0.4s var(--ease-out); box-shadow:0 2px 20px rgba(122,13,36,0.05); }
.result-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(122,13,36,0.2); }
.result-platform { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink3); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.platform-dot { width:8px; height:8px; border-radius:50%; }
.platform-dot.fb { background:#1877f2; }
.platform-dot.ig { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.platform-dot.tt { background:#ff0050; }
.platform-dot.gg { background:#4285f4; }
.platform-dot.em { background:var(--bur); }
.result-client { font-family:var(--font-display); font-size:1.45rem; font-weight:700; margin-bottom:18px; color:var(--ink); }
.result-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.r-metric { text-align:center; }
.r-metric-num { font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:var(--bur); line-height:1; }
.r-metric-num.green { color:var(--sage); }
.r-metric-num.gold { color:var(--gold); }
.r-metric-label { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink3); margin-top:5px; }
.result-period { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; color:rgba(70,30,50,0.3); text-transform:uppercase; margin-top:14px; border-top:1px solid rgba(201,168,76,0.15); padding-top:12px; }

.results-showcase { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(201,168,76,0.15); border:1px solid rgba(201,168,76,0.2); border-radius:18px; overflow:hidden; }
.showcase-item { background:var(--surface); padding:40px 24px; text-align:center; transition:background 0.3s; }
.showcase-item:hover { background:var(--bg2); }
.showcase-big { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3.2rem); font-weight:700; line-height:1; color:var(--bur); }
.showcase-big.gold { color:var(--gold); }
.showcase-big.green { color:var(--sage); }
.showcase-big.rose { color:var(--rose); }
.showcase-label { font-family:var(--font-mono); font-size:0.63rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink3); margin-top:10px; }

/* ═══════════════════════════════════════════
   CLIENTS
═══════════════════════════════════════════ */
#clients { background:var(--bg); }
.clients-intro p { font-size:1rem; color:var(--ink2); line-height:1.85; margin-top:20px; }

.client-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:50px; }
.client-card { background:var(--surface); border:1px solid rgba(201,168,76,0.15); border-radius:16px; padding:28px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; transition:all 0.4s; box-shadow:0 1px 12px rgba(122,13,36,0.04); }
.client-card:hover { box-shadow:var(--shadow); transform:translateY(-4px); border-color:rgba(201,168,76,0.4); }
.client-flag { font-size:1.5rem; }
.client-icon { font-size:1.8rem; }
.client-name { font-size:0.75rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); }
.client-type { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.08em; color:var(--bur-light); text-transform:uppercase; }

.worldwide-strip { display:flex; align-items:center; justify-content:center; gap:16px; padding:28px 60px; background:var(--bg2); border-top:1px solid rgba(201,168,76,0.1); border-bottom:1px solid rgba(201,168,76,0.1); flex-wrap:wrap; margin-top:50px; }
.w-badge { display:flex; align-items:center; gap:7px; padding:7px 16px; border:1px solid rgba(122,13,36,0.15); border-radius:40px; font-size:0.73rem; color:var(--ink2); transition:all 0.3s; }
.w-badge:hover { border-color:var(--bur); color:var(--bur); background:rgba(122,13,36,0.04); }

/* ═══════════════════════════════════════════
   PORTFOLIO PAGE (standalone tab)
═══════════════════════════════════════════ */
#portfolio-page { background:var(--bg); }
.portfolio-hero { padding:120px 60px 60px; background:linear-gradient(170deg, var(--bg) 0%, var(--bg2) 100%); text-align:center; }
.portfolio-hero .section-label { justify-content:center; }
.portfolio-hero .section-label::before { display:none; }
.portfolio-hero p { font-size:1.05rem; color:var(--ink2); line-height:1.85; max-width:560px; margin:18px auto 0; }

.port-filter-bar { display:flex; gap:10px; justify-content:center; padding:0 60px 50px; flex-wrap:wrap; }
.filter-btn { padding:10px 24px; border-radius:40px; border:1.5px solid rgba(122,13,36,0.2); background:transparent; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink2); cursor:pointer; transition:all 0.3s; }
.filter-btn:hover,.filter-btn.active { border-color:var(--bur); background:var(--bur); color:var(--white); }

/* Portfolio grid */
.portfolio-section { padding:0 60px 80px; }
.port-section-title { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--ink); margin-bottom:30px; display:flex; align-items:center; gap:16px; }
.port-section-title::after { content:''; flex:1; height:1px; background:linear-gradient(to right, rgba(201,168,76,0.4), transparent); }

.port-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:60px; }
.port-item { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--bg2); transition:all 0.4s var(--ease-out); box-shadow:0 2px 20px rgba(122,13,36,0.08); cursor:pointer; }
.port-item.wide { grid-column:span 2; aspect-ratio:16/7; }
.port-item.tall { grid-row:span 2; aspect-ratio:3/4; }
.port-item:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.port-mock { width:100%; height:100%; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform 0.6s var(--ease); }
.port-item:hover .port-mock { transform:scale(1.06); }
.port-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(28,10,15,0.88) 0%, transparent 55%); opacity:0; transition:opacity 0.4s; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; }
.port-item:hover .port-overlay { opacity:1; }
.port-cat { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-light); margin-bottom:6px; }
.port-title { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--white); }
.port-client { font-size:0.78rem; color:rgba(255,255,255,0.65); margin-top:4px; }

/* Portfolio mock designs */
.mock-graphic { background:linear-gradient(135deg, #3d0a14, #7a1428); display:flex; align-items:center; justify-content:center; }
.mock-graphic-inner { text-align:center; padding:24px; }
.mock-g-logo { width:70px; height:70px; border-radius:16px; background:linear-gradient(135deg,var(--gold),var(--gold-light)); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--bur); }
.mock-g-name { font-family:var(--font-display); font-size:1.1rem; color:var(--white); font-style:italic; }
.mock-g-tagline { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.2em; color:rgba(255,255,255,0.5); text-transform:uppercase; margin-top:6px; }

.mock-insta { background:linear-gradient(135deg, #1a0a2e, #2d1254); display:flex; align-items:center; justify-content:center; }
.mock-insta-inner { text-align:center; padding:20px; width:100%; }
.mock-insta-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.mock-insta-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--bur),var(--rose)); flex-shrink:0; }
.mock-insta-username { font-family:var(--font-mono); font-size:0.62rem; color:var(--white); font-weight:500; }
.mock-insta-image { width:100%; height:90px; background:linear-gradient(135deg,var(--bur-mid),var(--rose),var(--gold)); border-radius:8px; margin-bottom:10px; }
.mock-insta-caption { font-size:0.68rem; color:rgba(255,255,255,0.7); text-align:left; line-height:1.5; }
.mock-insta-likes { font-family:var(--font-mono); font-size:0.6rem; color:rgba(255,255,255,0.45); text-align:left; margin-top:6px; }

.mock-fb-ad { background:var(--surface); padding:20px; display:flex; flex-direction:column; gap:10px; }
.mock-fb-header { display:flex; align-items:center; gap:8px; }
.mock-fb-page-icon { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--bur),var(--rose)); }
.mock-fb-page-name { font-size:0.75rem; font-weight:600; color:var(--ink); }
.mock-fb-sponsored { font-size:0.58rem; color:var(--ink3); }
.mock-fb-ad-image { width:100%; height:100px; background:linear-gradient(135deg,var(--bur),var(--gold)); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.mock-fb-ad-image span { font-family:var(--font-display); font-size:1.4rem; font-style:italic; color:var(--white); font-weight:700; }
.mock-fb-cta { background:var(--bur); color:var(--white); border:none; padding:8px 16px; border-radius:6px; font-size:0.72rem; font-weight:600; text-align:center; cursor:pointer; }

.mock-results { background:var(--surface); padding:24px; display:flex; flex-direction:column; gap:14px; }
.mock-results-title { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--ink); }
.mock-bar-row { display:flex; align-items:center; gap:10px; }
.mock-bar-label { font-family:var(--font-mono); font-size:0.62rem; color:var(--ink3); width:80px; flex-shrink:0; text-transform:uppercase; letter-spacing:0.06em; }
.mock-bar-track { flex:1; height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.mock-bar-fill { height:100%; border-radius:4px; animation:barGrow 1.5s ease-out forwards; }
.mock-bar-val { font-family:var(--font-mono); font-size:0.65rem; font-weight:500; color:var(--ink); width:44px; text-align:right; }
@keyframes barGrow { from{width:0;}to{width:var(--pct);} }

.mock-email { background:var(--surface); padding:20px; }
.mock-email-subject { font-weight:600; font-size:0.85rem; color:var(--ink); margin-bottom:6px; }
.mock-email-meta { font-family:var(--font-mono); font-size:0.6rem; color:var(--ink3); margin-bottom:14px; display:flex; gap:14px; }
.mock-email-stat { text-align:center; }
.mock-email-stat .val { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--bur); }
.mock-email-stat .lab { font-family:var(--font-mono); font-size:0.58rem; color:var(--ink3); text-transform:uppercase; letter-spacing:0.1em; }
.mock-email-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }

.mock-review { background:linear-gradient(135deg,var(--bg),var(--bg2)); padding:24px; }
.mock-stars { color:var(--gold); font-size:1.1rem; margin-bottom:10px; }
.mock-review-text { font-family:var(--font-display); font-size:0.92rem; font-style:italic; color:var(--ink); line-height:1.7; }
.mock-reviewer { margin-top:14px; display:flex; align-items:center; gap:10px; }
.mock-reviewer-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--bur),var(--rose)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.8rem; color:var(--white); }
.mock-reviewer-name { font-size:0.8rem; font-weight:600; color:var(--ink); }
.mock-reviewer-handle { font-family:var(--font-mono); font-size:0.6rem; color:var(--ink3); }

/* Chickn Dip'n showcase */
.mock-chickn { background:linear-gradient(135deg, #1a1000, #3d2800); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
.mock-chickn-logo { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#ff9500,#ff5500); display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
.mock-chickn-name { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:#ff9500; }
.mock-chickn-tag { font-family:var(--font-mono); font-size:0.62rem; color:rgba(255,149,0,0.5); letter-spacing:0.2em; text-transform:uppercase; }

/* ═══════════════════════════════════════════
   REVIEWS
═══════════════════════════════════════════ */
#reviews { background:var(--bg2); }
.reviews-header { text-align:center; margin-bottom:60px; }
.reviews-header .section-label { justify-content:center; }
.reviews-header .section-label::before { display:none; }

.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.review-card { background:var(--surface); border:1px solid rgba(201,168,76,0.2); border-radius:18px; padding:34px; position:relative; overflow:hidden; transition:all 0.4s var(--ease-out); box-shadow:0 2px 16px rgba(122,13,36,0.05); }
.review-card::before { content:'"'; position:absolute; top:-20px; right:18px; font-family:var(--font-display); font-size:9rem; color:rgba(201,168,76,0.08); font-style:normal; line-height:1; pointer-events:none; }
.review-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:rgba(201,168,76,0.4); }
.review-stars { display:flex; gap:4px; margin-bottom:16px; }
.star { color:var(--gold); font-size:0.85rem; }
.review-text { font-family:var(--font-display); font-size:1rem; color:var(--ink); line-height:1.8; font-style:italic; margin-bottom:24px; }
.review-author { display:flex; align-items:center; gap:14px; }
.review-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; border:2px solid rgba(201,168,76,0.3); flex-shrink:0; }
.review-info h5 { font-size:0.85rem; font-weight:600; letter-spacing:0.04em; color:var(--ink); }
.review-info span { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--bur-light); display:flex; align-items:center; gap:7px; margin-top:4px; }

/* ═══════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════ */
#process { background:var(--bg); }
.process-container { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:center; }
.process-intro p { font-size:1rem; color:var(--ink2); line-height:1.85; margin-top:20px; }
.process-steps { display:flex; flex-direction:column; gap:0; }
.process-step { padding:26px 0; border-bottom:1px solid rgba(201,168,76,0.15); display:grid; grid-template-columns:54px 1fr; gap:22px; align-items:start; transition:all 0.3s; }
.process-step:last-child { border-bottom:none; }
.process-step:hover { padding-left:8px; }
.step-num { font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:rgba(122,13,36,0.12); line-height:1; }
.step-content h4 { font-family:var(--font-display); font-size:1.35rem; font-weight:700; margin-bottom:7px; transition:color 0.3s; color:var(--ink); }
.process-step:hover .step-content h4 { color:var(--bur); }
.step-content p { font-size:0.88rem; color:var(--ink2); line-height:1.8; }

/* ═══════════════════════════════════════════
   PRICING
═══════════════════════════════════════════ */
#pricing { background:var(--bg2); }
.pricing-header { text-align:center; margin-bottom:60px; }
.pricing-header .section-label { justify-content:center; }
.pricing-header .section-label::before { display:none; }
.pricing-header p { color:var(--ink2); max-width:480px; margin:16px auto 0; line-height:1.85; }

.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.price-card { background:var(--surface); border:1px solid rgba(201,168,76,0.2); border-radius:20px; padding:38px 28px; position:relative; overflow:hidden; transition:all 0.45s var(--ease-out); box-shadow:0 2px 16px rgba(122,13,36,0.05); }
.price-card.popular { border-color:var(--bur); background:linear-gradient(170deg,var(--bur),#a0172c); color:var(--white); }
.price-card.popular::before { content:'Most Popular'; position:absolute; top:0; right:0; background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--ink); font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; padding:6px 18px; border-radius:0 20px 0 14px; }
.price-card:not(.popular):hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(122,13,36,0.25); }
.price-card.popular:hover { transform:translateY(-6px); box-shadow:0 24px 70px rgba(122,13,36,0.45); }
.price-tier { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.price-card.popular .price-tier { color:var(--gold-light); }
.price-name { font-family:var(--font-display); font-size:1.6rem; font-weight:700; margin-bottom:16px; color:var(--ink); }
.price-card.popular .price-name { color:var(--white); }
.price-amount { font-family:var(--font-display); font-size:3.2rem; font-weight:700; color:var(--bur); line-height:1; display:flex; align-items:flex-start; gap:4px; }
.price-card.popular .price-amount { color:var(--gold-light); }
.currency { font-size:1.4rem; padding-top:12px; }
.price-period { font-family:var(--font-mono); font-size:0.65rem; color:var(--ink3); letter-spacing:0.12em; margin-bottom:22px; }
.price-card.popular .price-period { color:rgba(255,255,255,0.55); }
.price-divider { height:1px; background:rgba(201,168,76,0.2); margin-bottom:22px; }
.price-card.popular .price-divider { background:rgba(255,255,255,0.15); }
.price-features { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.price-feature { font-size:0.83rem; color:var(--ink2); display:flex; align-items:flex-start; gap:10px; line-height:1.4; }
.price-feature::before { content:'✓'; color:var(--gold); font-weight:700; flex-shrink:0; }
.price-feature.na { color:var(--ink3); opacity:0.45; }
.price-feature.na::before { content:'—'; color:var(--ink3); }
.price-card.popular .price-feature { color:rgba(255,255,255,0.8); }
.price-card.popular .price-feature.na { color:rgba(255,255,255,0.3); }
.price-btn { display:block; padding:14px 24px; border-radius:40px; text-align:center; font-family:var(--font-body); font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; transition:all 0.3s; background:rgba(122,13,36,0.08); color:var(--bur); border:1.5px solid rgba(122,13,36,0.2); cursor:pointer; }
.price-card.popular .price-btn { background:var(--gold); color:var(--ink); border-color:transparent; box-shadow:0 4px 20px rgba(201,168,76,0.4); }
.price-btn:hover { transform:translateY(-2px); }
.price-card:not(.popular) .price-btn:hover { background:var(--bur); color:var(--white); border-color:transparent; box-shadow:0 6px 24px rgba(122,13,36,0.3); }
.price-card.popular .price-btn:hover { box-shadow:0 8px 32px rgba(201,168,76,0.6); }

/* WhatsApp pricing button */
.price-wa-btns { display:flex; flex-direction:column; gap:10px; }
.price-wa { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:40px; background:#25d366; color:#fff; font-size:0.76rem; font-weight:600; text-decoration:none; transition:all 0.3s; box-shadow:0 4px 16px rgba(37,211,102,0.3); }
.price-wa:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,0.45); }
.price-card.popular .price-wa { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); }

/* ═══════════════════════════════════════════
   CTA + INQUIRY FORM
═══════════════════════════════════════════ */
#cta { background:var(--bur); overflow:hidden; position:relative; }
.cta-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 80% 50%,rgba(201,168,76,0.12),transparent), radial-gradient(ellipse 40% 60% at 10% 80%,rgba(255,100,120,0.08),transparent); pointer-events:none; }
.cta-orb { position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.04),transparent 70%); top:-100px; right:-100px; animation:decoFloat 10s ease-in-out infinite; }

.cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:100px 60px; position:relative; z-index:1; }
.cta-left { }
.cta-eyebrow { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px; }
.cta-title { font-family:var(--font-display); font-size:clamp(2.4rem,5vw,4.2rem); font-weight:700; line-height:1.08; color:var(--white); margin-bottom:20px; }
.cta-title em { font-style:italic; color:var(--gold-light); }
.cta-sub { font-size:1rem; color:rgba(255,255,255,0.7); line-height:1.85; margin-bottom:32px; }
.cta-btns-row { display:flex; gap:14px; flex-wrap:wrap; }
.btn-wa { display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:50px; background:#25d366; color:#fff; font-family:var(--font-body); font-size:0.8rem; font-weight:600; letter-spacing:0.06em; text-decoration:none; transition:all 0.3s; box-shadow:0 4px 20px rgba(37,211,102,0.4); cursor:pointer; }
.btn-wa:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(37,211,102,0.55); }

/* Inquiry form */
.inquiry-form { background:var(--surface); border-radius:24px; padding:44px 38px; box-shadow:0 20px 80px rgba(0,0,0,0.25); }
.inquiry-form h3 { font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.inquiry-form p { font-size:0.88rem; color:var(--ink3); margin-bottom:28px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.form-group label { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink3); }
.form-group input,.form-group select,.form-group textarea {
  padding:12px 16px; border:1.5px solid rgba(201,168,76,0.25); border-radius:10px;
  background:var(--bg); font-family:var(--font-body); font-size:0.88rem; color:var(--ink);
  transition:border-color 0.3s, box-shadow 0.3s; outline:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color:var(--bur); box-shadow:0 0 0 3px rgba(122,13,36,0.08);
}
.form-group textarea { resize:vertical; min-height:90px; }
.form-submit { width:100%; padding:16px; border-radius:50px; background:linear-gradient(135deg,var(--bur),var(--bur-light)); color:var(--white); border:none; font-family:var(--font-body); font-size:0.88rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:all 0.35s; box-shadow:0 6px 28px rgba(122,13,36,0.3); }
.form-submit:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(122,13,36,0.45); }
.form-success { text-align:center; padding:30px 20px; display:none; }
.form-success .check { font-size:3rem; margin-bottom:12px; }
.form-success h4 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--bur); }
.form-success p { color:var(--ink3); margin-top:8px; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer { background:var(--ink); color:var(--white); padding:80px 60px 36px; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:50px; margin-bottom:60px; }
.footer-brand h3 { font-family:var(--font-display); font-size:1.8rem; font-weight:700; margin-bottom:12px; }
.footer-brand h3 span { color:var(--gold); }
.footer-brand p { font-size:0.88rem; color:rgba(255,255,255,0.45); line-height:1.85; max-width:280px; margin-bottom:24px; }
.footer-socials { display:flex; gap:12px; }
.social-icon { width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1rem; transition:all 0.3s; }
.social-icon:hover { background:var(--bur); border-color:var(--bur); transform:translateY(-2px); }
footer h4 { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
footer ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
footer ul li a { font-size:0.86rem; color:rgba(255,255,255,0.45); text-decoration:none; transition:color 0.3s; }
footer ul li a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:30px; display:flex; align-items:center; justify-content:space-between; }
.footer-bottom p { font-size:0.8rem; color:rgba(255,255,255,0.3); }

/* ═══════════════════════════════════════════
   ANIMATED TICKER / MOVING TEXT
═══════════════════════════════════════════ */
.ticker-wrap { overflow:hidden; padding:22px 0; background:linear-gradient(135deg,var(--bur),var(--bur-mid)); }
.ticker { display:flex; width:max-content; animation:marqueeL 20s linear infinite; }
.ticker-item { font-family:var(--font-display); font-size:1.3rem; font-style:italic; font-weight:400; color:rgba(255,255,255,0.7); white-space:nowrap; padding:0 50px; display:flex; align-items:center; gap:50px; }
.ticker-item .sep { color:var(--gold); font-style:normal; font-size:0.8rem; }

/* ═══════════════════════════════════════════
   VIDEO PLACEHOLDER / REEL SHOWCASE
═══════════════════════════════════════════ */
.reel-section { padding:80px 60px; background:var(--bg2); }
.reel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:50px; }
.reel-card { aspect-ratio:9/16; background:var(--bur); border-radius:16px; overflow:hidden; position:relative; cursor:pointer; transition:all 0.4s var(--ease-out); }
.reel-card:hover { transform:scale(1.03); box-shadow:var(--shadow-lg); }
.reel-bg { position:absolute; inset:0; }
.reel-play { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(28,10,15,0.3); transition:background 0.3s; }
.reel-card:hover .reel-play { background:rgba(28,10,15,0.5); }
.reel-play-btn { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; transition:transform 0.3s; }
.reel-card:hover .reel-play-btn { transform:scale(1.12); }
.reel-play-btn::after { content:''; border-style:solid; border-width:10px 0 10px 18px; border-color:transparent transparent transparent var(--bur); margin-left:4px; }
.reel-label { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.8); }
.reel-bg1 { background:linear-gradient(135deg, #7a0d24, #c4405a); }
.reel-bg2 { background:linear-gradient(135deg, #1a1000, #7a5000); }
.reel-bg3 { background:linear-gradient(135deg, #0a1a30, #1a4080); }
.reel-bg4 { background:linear-gradient(135deg, #1a0a30, #5a1880); }
.reel-bars { display:flex; gap:3px; align-items:flex-end; height:24px; }
.reel-bar { width:4px; background:rgba(255,255,255,0.5); border-radius:2px; animation:barBounce 1.2s ease-in-out infinite; }
.reel-bar:nth-child(2){animation-delay:0.1s;background:var(--gold);}
.reel-bar:nth-child(3){animation-delay:0.22s;}
.reel-bar:nth-child(4){animation-delay:0.3s;background:rgba(255,200,100,0.6);}
.reel-bar:nth-child(5){animation-delay:0.12s;}
@keyframes barBounce { 0%,100%{height:5px;}50%{height:22px;} }

/* ═══════════════════════════════════════════
   ANIMATED TEXT BAND
═══════════════════════════════════════════ */
.floaty-text { position:relative; overflow:hidden; padding:60px 0; background:var(--bg); }
.floaty-inner { display:flex; gap:80px; align-items:center; }
.floaty-big { font-family:var(--font-display); font-size:clamp(4rem,10vw,9rem); font-weight:700; color:rgba(122,13,36,0.06); white-space:nowrap; letter-spacing:-0.02em; animation:floatyScroll 18s linear infinite; }
.floaty-accent { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.4rem); font-weight:700; font-style:italic; color:var(--bur); white-space:nowrap; text-align:center; z-index:2; }
@keyframes floatyScroll { from{transform:translateX(0);}to{transform:translateX(-50%);} }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:1100px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { grid-template-columns:repeat(2,1fr); }
  .cta-grid { grid-template-columns:1fr; gap:50px; }
  .client-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px) {
  nav { padding:18px 28px; }
  nav.scrolled { padding:13px 28px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .page-tabs { display:none; }
  .section-wrap { padding:70px 28px; }
  .hero-metrics { display:none; }
  .process-container { grid-template-columns:1fr; gap:50px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
  .results-grid { grid-template-columns:1fr; }
  .results-showcase { grid-template-columns:repeat(2,1fr); }
  #stats { grid-template-columns:repeat(2,1fr); }
  .reel-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .portfolio-section { padding:0 28px 60px; }
  .port-grid { grid-template-columns:1fr 1fr; }
  .port-item.wide { grid-column:span 1; aspect-ratio:4/3; }
}
@media (max-width:600px) {
  .services-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .client-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-hero { padding:80px 28px 40px; }
  .port-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  #stats { grid-template-columns:repeat(2,1fr); }
  .reel-grid { grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════
   WHATSAPP FLOAT
═══════════════════════════════════════════ */
#wa-float {
  position:fixed; bottom:32px; right:32px; z-index:8500;
  display:flex; align-items:center; gap:10px;
  background:#25d366; color:#fff; text-decoration:none;
  padding:13px 22px 13px 16px; border-radius:50px;
  font-family:var(--font-body); font-size:0.82rem; font-weight:600; letter-spacing:0.05em;
  box-shadow:0 6px 28px rgba(37,211,102,0.5); transition:all 0.3s;
}
#wa-float:hover { background:#1ebe5d; transform:translateY(-3px); box-shadow:0 12px 40px rgba(37,211,102,0.6); }
@media (max-width:600px) { #wa-float span { display:none; } #wa-float { padding:13px 14px; } }

/* Pulse ring on WA */
#wa-float::before { content:''; position:absolute; inset:0; border-radius:50px; border:2px solid #25d366; animation:waPulse 2.5s infinite; }
@keyframes waPulse { 0%{transform:scale(1);opacity:0.8;}100%{transform:scale(1.18);opacity:0;} }