@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400;500;600;700&f[]=satoshi@300;400;500;600;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:#0e0e13;
  --ink-soft:#1e1e2a;
  --ink-muted:#6e6e82;
  --surface:#fafafc;
  --surface-alt:#f2f1f6;
  --card:#fff;
  --violet-950:#2e1065;
  --violet-900:#4c1d95;
  --violet-800:#5b21b6;
  --violet-700:#6d28d9;
  --violet-600:#7c3aed;
  --violet-500:#8b5cf6;
  --violet-400:#a78bfa;
  --violet-300:#c4b5fd;
  --violet-200:#ddd6fe;
  --violet-100:#ede9fe;
  --violet-50:#f5f3ff;
  --magenta:#c026d3;
  --cyan:#06b6d4;
  --emerald:#10b981;
  --border:#e5e4eb;
  --border-light:rgba(255,255,255,.1);
  --white:#fff;
  --radius:12px;
  --radius-lg:20px;
  --radius-xl:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:'Clash Display',system-ui,sans-serif;
  --font-body:'Satoshi',system-ui,sans-serif;
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--ink);background:var(--surface);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.wrap-lg{max-width:1320px;margin:0 auto;padding:0 32px}

/* ═══════════════════════════════════════
   PRELOADER
   ═══════════════════════════════════════ */
#preloader{
  position:fixed;inset:0;z-index:99999;
  background:var(--violet-950);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;
  transition:opacity .6s var(--ease),visibility .6s;
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pre-logo{height:100px;animation:prePulse 1.4s ease-in-out infinite}
@keyframes prePulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.pre-track{width:180px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.pre-fill{height:100%;width:0;background:linear-gradient(90deg,var(--violet-400),var(--magenta));border-radius:2px;animation:preFill 2s var(--ease) forwards}
@keyframes preFill{to{width:100%}}

/* ═══════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  background:linear-gradient(135deg,var(--violet-950) 0%,#1a0a3e 50%,var(--violet-900) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:0;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.nav.scrolled{
  background:rgba(30,10,70,.72);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom-color:rgba(139,92,246,.15);
  box-shadow:0 4px 40px rgba(46,16,101,.35),0 1px 0 rgba(139,92,246,.1) inset;
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:110px}
.nav-logo{height:64px}
.nav-center{display:flex;align-items:center;gap:40px}
.nav-center a{font-size:1.05rem;font-weight:500;color:rgba(255,255,255,.65);transition:color .25s}
.nav-center a:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:20px}

/* Language switcher */
.lang-switch{display:flex;align-items:center;gap:6px;position:relative}
.lang-btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:8px 14px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  font-size:.84rem;font-weight:600;color:rgba(255,255,255,.75);
  transition:all .25s;font-family:var(--font-body);
}
.lang-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.lang-btn.active{background:rgba(139,92,246,.25);border-color:var(--violet-500);color:#fff}
.lang-btn img{width:22px;height:16px;border-radius:2px;object-fit:cover}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:.95rem;font-weight:600;
  padding:13px 28px;border-radius:10px;cursor:pointer;border:none;
  transition:all .3s var(--ease);white-space:nowrap;
}
.btn-white{background:#fff;color:var(--violet-900)}
.btn-white:hover{background:var(--violet-100);transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,0,0,.15)}
.btn-violet{background:var(--violet-600);color:#fff;border:1px solid rgba(255,255,255,.15)}
.btn-violet:hover{background:var(--violet-500);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--violet-900);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--violet-600);color:var(--violet-700)}
.btn-ghost-w{background:transparent;color:rgba(255,255,255,.8);border:1.5px solid rgba(255,255,255,.2)}
.btn-ghost-w:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35)}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;z-index:9001}
.burger i{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)}
.burger.on i:nth-child(1){transform:rotate(45deg) translate(4px,5px)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:rotate(-45deg) translate(4px,-5px)}

/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero{
  position:relative;
  background:linear-gradient(160deg,var(--violet-950) 0%,#1a0a3e 30%,var(--violet-900) 60%,#2d1066 100%);
  padding:180px 0 120px;
  overflow:hidden;
  color:#fff;
}

/* Animated grid */
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(139,92,246,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black,transparent);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black,transparent);
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{to{background-position:64px 64px}}

/* Glow orbs */
.hero-glow-1,.hero-glow-2,.hero-glow-3{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
.hero-glow-1{width:600px;height:600px;background:rgba(139,92,246,.2);top:-15%;right:-8%;animation:orbFloat 20s ease-in-out infinite}
.hero-glow-2{width:400px;height:400px;background:rgba(192,38,211,.15);bottom:-10%;left:5%;animation:orbFloat 24s ease-in-out infinite reverse}
.hero-glow-3{width:300px;height:300px;background:rgba(6,182,212,.08);top:50%;left:40%;animation:orbFloat 18s ease-in-out infinite 5s}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(20px,-15px)}66%{transform:translate(-15px,20px)}}

/* Particles */
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(167,139,250,.4);
  animation:particleUp linear infinite;
}
@keyframes particleUp{
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-100vh) scale(0);opacity:0}
}

.hero-inner{position:relative;z-index:2}
.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}

.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  font-size:.78rem;font-weight:600;color:var(--violet-300);
  margin-bottom:28px;backdrop-filter:blur(8px);
}
.hero-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);animation:dotPulse 2s ease infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}

.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:700;line-height:1.08;letter-spacing:-.03em;
  margin-bottom:24px;
}
.hero h1 em{font-style:normal;color:var(--violet-300)}

.hero-desc{font-size:1.12rem;color:rgba(255,255,255,.6);max-width:500px;line-height:1.72;margin-bottom:36px;font-weight:300}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Hero image mosaic */
.hero-visual{position:relative}
.hero-img-main{
  width:100%;border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.35);
  aspect-ratio:4/3;object-fit:cover;
}
.hero-float-card{
  position:absolute;
  background:rgba(20,10,40,.75);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  padding:16px 20px;
  display:flex;align-items:center;gap:12px;
  animation:floatCard 6s ease-in-out infinite;
}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-float-card.c1{bottom:40px;left:-24px;animation-delay:0s}
.hero-float-card.c2{top:40px;right:-20px;animation-delay:-3s}
.hfc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hfc-icon svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hfc-icon.green{background:rgba(16,185,129,.2)}
.hfc-icon.blue{background:rgba(6,182,212,.2)}
.hfc-text{font-size:.82rem;font-weight:600;color:#fff}
.hfc-sub{font-size:.72rem;color:rgba(255,255,255,.5);font-weight:400}

/* ═══════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════ */
.trust-bar{padding:52px 0;border-bottom:1px solid var(--border)}
.trust-row{display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--ink-muted);font-weight:500}
.trust-item strong{color:var(--ink);font-weight:700;font-size:1.4rem;font-family:var(--font-display)}

/* ═══════════════════════════════════════
   SECTION SHARED
   ═══════════════════════════════════════ */
.sec-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--violet-600);margin-bottom:12px;
}
.sec-heading{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw,2.8rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:16px;
}
.sec-desc{font-size:1.05rem;line-height:1.7;color:var(--ink-muted);max-width:560px}

/* Dark section variants */
.dark-sec{background:var(--ink);color:#fff}
.dark-sec .sec-label{color:var(--violet-400)}
.dark-sec .sec-desc{color:#9a99ae}

/* ═══════════════════════════════════════
   VIDEO SECTION
   ═══════════════════════════════════════ */
.video-sec{padding:120px 0;background:var(--surface-alt)}
.video-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.video-wrap{
  border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,0,.08);
  aspect-ratio:16/9;position:relative;
  border:1px solid var(--border);
  cursor:pointer;
  background:#0e0e13;
}
.video-wrap iframe{width:100%;height:100%;border:none}
.video-thumb{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .5s}
.video-wrap:hover .video-thumb{transform:scale(1.04);filter:brightness(.75)}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:68px;height:68px;
  background:none;border:none;cursor:pointer;
  transition:transform .35s var(--ease);
  z-index:2;padding:0;
}
.video-play svg{width:68px;height:68px}
.video-wrap:hover .video-play{transform:translate(-50%,-50%) scale(1.12)}

/* ═══════════════════════════════════════
   CHANNELS — WhatsApp, RCS, SMS, Email
   ═══════════════════════════════════════ */
.channels-sec{padding:120px 0}
.channels-head{text-align:center;margin-bottom:80px}
.channels-head .sec-desc{margin:0 auto}

.channel-block{
  display:grid;grid-template-columns:1fr 1fr;
  gap:72px;align-items:center;
  padding:80px 0;
  border-top:1px solid var(--border);
}
.channel-block:first-of-type{border-top:none;padding-top:0}
.channel-block.reverse .ch-visual{order:-1}

.ch-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px;border-radius:100px;
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:20px;
}
.ch-tag.whatsapp{background:#dcfce7;color:#15803d}
.ch-tag.rcs{background:#dbeafe;color:#1d4ed8}
.ch-tag.sms{background:#fef3c7;color:#92400e}
.ch-tag.email{background:#fce7f3;color:#9d174d}

.ch-title{font-family:var(--font-display);font-size:1.8rem;font-weight:700;letter-spacing:-.02em;margin-bottom:16px;line-height:1.2}
.ch-desc{font-size:1rem;color:var(--ink-muted);line-height:1.7;margin-bottom:28px}

.ch-features{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.ch-feat{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;color:var(--ink-soft)}
.ch-feat-check{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.ch-feat-check svg{width:13px;height:13px;stroke-width:2.5}
.ch-feat-check.green{background:#dcfce7}
.ch-feat-check.green svg{stroke:#15803d}
.ch-feat-check.blue{background:#dbeafe}
.ch-feat-check.blue svg{stroke:#1d4ed8}
.ch-feat-check.amber{background:#fef3c7}
.ch-feat-check.amber svg{stroke:#92400e}
.ch-feat-check.pink{background:#fce7f3}
.ch-feat-check.pink svg{stroke:#9d174d}

.ch-visual{position:relative}
.ch-img{
  width:100%;border-radius:var(--radius-xl);
  box-shadow:0 12px 48px rgba(0,0,0,.06);
  border:1px solid var(--border);
  aspect-ratio:4/3;object-fit:cover;
}

/* ═══════════════════════════════════════
   PRODUCTS BENTO (DARK)
   ═══════════════════════════════════════ */
.products-sec{background:var(--ink);color:#fff;padding:120px 0;position:relative;overflow:hidden}
.products-sec::before{
  content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(109,40,217,.1),transparent 65%);
  pointer-events:none;
}
.products-head{margin-bottom:64px}

/* Carousel */
.carousel-wrap{position:relative}
.carousel-track{
  display:flex;gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:8px;
}
.carousel-track::-webkit-scrollbar{display:none}

.p-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg);padding:36px 32px;
  transition:all .35s var(--ease);display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  flex:0 0 calc(33.333% - 14px);
  scroll-snap-align:start;
  min-width:0;
}
.p-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(139,92,246,.06),transparent 60%);
  opacity:0;transition:opacity .35s;
}
.p-card:hover::before{opacity:1}
.p-card:hover{border-color:rgba(139,92,246,.25);transform:translateY(-3px)}


.p-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;position:relative;z-index:1}
.p-logo-wrap{height:36px;display:flex;align-items:center}
.p-logo-wrap img{height:30px;width:auto;object-fit:contain}
.p-text-logo{font-family:var(--font-display);font-size:1rem;font-weight:600;color:#fff}

.p-status{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:100px}
.p-status.live{background:rgba(16,185,129,.12);color:#4ade80}
.p-status.soon{background:rgba(255,255,255,.06);color:#6b7280}

.p-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin-bottom:8px;position:relative;z-index:1}
.p-card .p-url{font-size:.78rem;color:var(--violet-400);font-weight:500;margin-bottom:12px;position:relative;z-index:1}
.p-card p{font-size:.88rem;color:#9a99ae;line-height:1.65;flex-grow:1;position:relative;z-index:1}
.p-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-size:.84rem;font-weight:600;color:var(--violet-400);
  transition:gap .25s,color .25s;position:relative;z-index:1;
}
.p-link:hover{color:var(--violet-300);gap:10px}
.p-link svg{width:14px;height:14px}

.p-screenshot{
  margin-top:20px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  position:relative;z-index:1;
  aspect-ratio:16/10;
  cursor:zoom-in;
}
.p-screenshot img{
  width:100%;height:100%;object-fit:cover;object-position:top left;display:block;
  transition:transform .5s var(--ease);
  image-rendering:auto;
}
.p-card:hover .p-screenshot img{transform:scale(1.03)}
.p-screenshot-expand{
  position:absolute;bottom:10px;right:10px;
  width:32px;height:32px;border-radius:8px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s var(--ease);
  pointer-events:none;
}
.p-screenshot-expand svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-screenshot:hover .p-screenshot-expand{opacity:1}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:99998;
  background:rgba(0,0,0,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s;
  cursor:zoom-out;
  padding:40px;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{
  max-width:92vw;max-height:88vh;object-fit:contain;
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  transform:scale(.92);
  transition:transform .4s var(--ease);
}
.lightbox.open img{transform:scale(1)}
.lightbox-close{
  position:absolute;top:20px;right:24px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .25s;
}
.lightbox-close:hover{background:rgba(255,255,255,.15)}
.lightbox-close svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lightbox-caption{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:.86rem;color:rgba(255,255,255,.6);
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  padding:8px 20px;border-radius:100px;
  white-space:nowrap;font-weight:500;
}

/* Carousel nav */
.carousel-nav{display:flex;align-items:center;gap:12px;margin-top:36px;justify-content:center}
.carousel-btn{
  width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .25s var(--ease);
  font-family:var(--font-body);font-size:0;
}
.carousel-btn:hover{background:rgba(139,92,246,.15);border-color:var(--violet-500);color:#fff}
.carousel-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carousel-dots{display:flex;gap:8px;align-items:center}
.carousel-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.15);border:none;cursor:pointer;
  transition:all .3s var(--ease);padding:0;
}
.carousel-dot.active{background:var(--violet-500);width:24px;border-radius:4px}

/* ═══════════════════════════════════════
   ABOUT SECTION
   ═══════════════════════════════════════ */
.about-sec{padding:120px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-img{
  width:100%;border-radius:var(--radius-xl);aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 16px 56px rgba(0,0,0,.07);border:1px solid var(--border);
}
.about-metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.a-m{padding:24px 20px;background:var(--surface-alt);border-radius:var(--radius);border:1px solid var(--border)}
.a-m-val{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--violet-800);letter-spacing:-.02em}
.a-m-label{font-size:.82rem;color:var(--ink-muted);margin-top:2px}

/* ═══════════════════════════════════════
   CTA BAND
   ═══════════════════════════════════════ */
.cta-band{
  background:linear-gradient(135deg,var(--violet-950),var(--violet-900));
  padding:88px 0;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;top:-50%;right:-20%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(192,38,211,.15),transparent 60%);pointer-events:none;
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;z-index:1}
.cta-inner h2{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:#fff;letter-spacing:-.02em;max-width:500px}
.cta-inner p{font-size:.95rem;color:rgba(255,255,255,.55);max-width:500px;margin-top:8px}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:80px 0 40px;border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:2.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand{margin-bottom:16px}
.footer-brand img{height:36px}
.footer-info{font-size:.82rem;line-height:1.8;color:rgba(255,255,255,.4)}
.footer-info strong{display:block;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:4px}
.footer h6{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-bottom:18px}
.footer-links a{display:block;font-size:.86rem;color:rgba(255,255,255,.45);padding:5px 0;transition:color .2s,transform .2s}
.footer-links a:hover{color:var(--violet-400);transform:translateX(3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:28px;display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:rgba(255,255,255,.3)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{color:rgba(255,255,255,.3);transition:color .2s}
.footer-legal a:hover{color:var(--violet-400)}

/* Differentials grid */
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ═══════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}
.rv-d5{transition-delay:.4s}
.rv-d6{transition-delay:.48s}
.rv-d7{transition-delay:.56s}

/* ═══════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════ */
.mobile-only{display:none}
.desktop-only{display:flex}
.mobile-cta{display:none}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:1024px){
  .hero-layout{grid-template-columns:1fr;gap:48px}
  .hero-visual{max-width:560px;margin:0 auto}
  .video-layout{grid-template-columns:1fr;gap:40px}
  .channel-block{grid-template-columns:1fr;gap:40px}
  .channel-block.reverse .ch-visual{order:0}
  .ch-visual{max-width:560px}
  .p-card{flex:0 0 calc(50% - 10px)}
  .about-grid{grid-template-columns:1fr;gap:48px}
  .about-img{max-width:560px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:768px){
  .wrap,.wrap-lg{padding:0 20px}
  .desktop-only{display:none !important}
  .mobile-only{display:flex !important}
  .mobile-cta{display:inline-flex !important;width:100%;justify-content:center;margin-top:8px}
  .nav-center{
    position:fixed;top:0;right:-100%;width:82%;max-width:340px;height:100vh;
    flex-direction:column;justify-content:center;gap:20px;padding:40px;
    background:rgba(15,5,35,.97);backdrop-filter:blur(24px);
    border-left:1px solid rgba(255,255,255,.08);
    transition:right .45s var(--ease);z-index:9000;
  }
  .nav-center.open{right:0}
  .nav-center a{font-size:1.05rem;color:rgba(255,255,255,.75)}
  .nav-right .btn-white{display:none}
  .burger{display:flex}
  .p-card{flex:0 0 calc(100% - 16px);min-width:calc(100% - 16px)}
  .hero{padding:140px 0 72px}
  .hero-float-card{display:none}

  /* ── Hide hero unsplash image on mobile ── */
  .hero-visual{display:none !important}

  /* ── Trust bar: 2x2 grid, centered ── */
  .trust-bar{padding:36px 0}
  .trust-row{
    display:grid !important;grid-template-columns:1fr 1fr;
    gap:20px 32px;justify-items:center;text-align:center;
  }
  .trust-item{flex-direction:column;gap:4px}
  .trust-item strong{font-size:1.6rem}

  /* ── Video: reorder so video is above CTA ── */
  .video-layout{display:flex !important;flex-direction:column;gap:32px}
  .video-layout > div:first-child{
    display:flex;flex-direction:column;order:1;
  }
  .video-layout > div:last-child{order:0}

  /* ── Channels: image after title, before desc ── */
  .channel-block{
    display:flex !important;flex-direction:column;gap:0;padding:48px 0;
  }
  .channel-block > .rv{display:contents}
  .ch-tag{order:1;margin-bottom:12px}
  .ch-title{order:2;margin-bottom:16px}
  .ch-visual{order:3 !important;margin-bottom:20px;max-width:100%}
  .ch-desc{order:4;margin-bottom:20px}
  .ch-features{order:5;margin-bottom:24px}
  .channel-block .btn{order:6}

  .about-metrics{grid-template-columns:1fr}
  .diff-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
  .cta-inner{flex-direction:column;text-align:center}
  section,.channels-sec,.products-sec,.video-sec,.about-sec{padding:80px 0}
  .channels-head{margin-bottom:48px}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column;width:100%}
  .btn{width:100%;justify-content:center}
  .diff-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════
   META BUSINESS PARTNER SECTION
   ═══════════════════════════════════════ */
.meta-partner-sec {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #00050f 0%, #001a3a 40%, #002a5c 70%, #001020 100%);
  padding: 120px 0 100px;
  color: #fff;
}

.meta-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(24, 119, 242, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 119, 242, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  animation: metaGridDrift 25s linear infinite;
}
@keyframes metaGridDrift { to { background-position: 56px 56px; } }

.meta-orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.meta-orb-1 { width: 700px; height: 700px; background: rgba(24,119,242,.12); top: -20%; right: -15%; animation: metaOrb 22s ease-in-out infinite; }
.meta-orb-2 { width: 450px; height: 450px; background: rgba(37,211,102,.07); bottom: -15%; left: -10%; animation: metaOrb 28s ease-in-out infinite reverse; }
.meta-orb-3 { width: 350px; height: 350px; background: rgba(0,132,255,.09); top: 40%; left: 35%; animation: metaOrb 18s ease-in-out infinite 4s; }
@keyframes metaOrb { 0%,100%{transform:translate(0,0)} 33%{transform:translate(30px,-20px)} 66%{transform:translate(-20px,25px)} }

.meta-partner-inner { position: relative; z-index: 2; }

/* Badge top */
.meta-badge-row { display: flex; justify-content: center; margin-bottom: 56px; }
.meta-official-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 22px; border-radius: 100px;
  background: rgba(24,119,242,.12);
  border: 1px solid rgba(24,119,242,.3);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #6eb8ff;
  backdrop-filter: blur(12px);
}
.meta-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #1877F2;
  box-shadow: 0 0 0 0 rgba(24,119,242,.5);
  animation: metaDotPulse 2s ease infinite;
}
@keyframes metaDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(24,119,242,.5); }
  50% { box-shadow: 0 0 0 7px rgba(24,119,242,0); }
}

/* Layout */
.meta-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Content side */
.meta-content {}

.meta-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 24px;
}
.meta-heading em {
  font-style: normal;
  background: linear-gradient(90deg, #1877F2, #42a5f5, #25D366);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.meta-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 40px;
  font-weight: 300;
}

/* Features */
.meta-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}

.meta-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  transition: all .3s var(--ease);
}
.meta-feat:hover {
  background: rgba(24,119,242,.1);
  border-color: rgba(24,119,242,.25);
  transform: translateY(-2px);
}

.meta-feat-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(24,119,242,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #6eb8ff;
}
.meta-feat-icon svg { width: 16px; height: 16px; }
.meta-feat-icon.shield { background: rgba(37,211,102,.15); color: #25D366; }
.meta-feat-icon.rocket { background: rgba(255,186,0,.12); color: #ffba00; }
.meta-feat-icon.check { background: rgba(99,200,255,.15); color: #63c8ff; }

.meta-feat-title { font-size: .84rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.meta-feat-sub { font-size: .75rem; color: rgba(255,255,255,.45); }

/* CTA button */
.btn-meta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: 10px;
  background: linear-gradient(135deg, #1877F2 0%, #0a5fc4 100%);
  color: #fff;
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.15);
  transition: all .3s var(--ease);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(24,119,242,.35);
}
.btn-meta:hover {
  background: linear-gradient(135deg, #2484ff 0%, #1060d0 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(24,119,242,.5);
}

/* Visual side */
.meta-visual { position: relative; display: flex; flex-direction: column; gap: 20px; }

.meta-card-main {
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}

.meta-card-glow {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(24,119,242,.25) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: metaGlowPulse 4s ease-in-out infinite;
}
@keyframes metaGlowPulse {
  0%,100% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.meta-logo-img {
  width: 200px;
  filter: drop-shadow(0 8px 24px rgba(24,119,242,.3));
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
}

.meta-card-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 100px;
  background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.25);
  font-size: .78rem; font-weight: 600; color: #4adf85;
  position: relative; z-index: 1;
}
.meta-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #25D366;
  animation: metaDotPulse 2s ease infinite;
}

/* Floating cards */
.meta-float {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  animation: metaFloat 6s ease-in-out infinite;
  z-index: 3;
}
.meta-float-1 { top: 12%; right: -20px; animation-delay: 0s; }
.meta-float-2 { bottom: 22%; left: -20px; animation-delay: -3s; }
@keyframes metaFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.meta-float-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(37,211,102,.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.meta-float-icon.blue { background: rgba(24,119,242,.15); }
.meta-float-label { font-size: .72rem; color: rgba(255,255,255,.5); }
.meta-float-val { font-size: .9rem; font-weight: 700; color: #fff; }

/* Channels strip */
.meta-channels-strip {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 20px 24px;
  backdrop-filter: blur(8px);
}
.meta-channels-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 14px;
}
.meta-channels-list { display: flex; flex-direction: column; gap: 10px; }
.meta-ch-item {
  display: flex; align-items: center; gap: 10px;
  font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.75);
}
.meta-ch-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.meta-ch-dot.wa { background: #25D366; box-shadow: 0 0 8px rgba(37,211,102,.5); }
.meta-ch-dot.ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.meta-ch-dot.fb { background: #1877F2; box-shadow: 0 0 8px rgba(24,119,242,.5); }
.meta-ch-dot.ads { background: #ff6b35; box-shadow: 0 0 8px rgba(255,107,53,.5); }

/* Responsive */
@media(max-width:1024px) {
  .meta-layout { grid-template-columns: 1fr; gap: 60px; }
  .meta-float { display: none; }
}
@media(max-width:768px) {
  .meta-partner-sec { padding: 80px 0; }
  .meta-heading { font-size: 1.8rem; }
  .meta-features { grid-template-columns: 1fr; }
  .meta-card-main { padding: 32px 24px; }
  .meta-logo-img { width: 160px; }
}

/* ═══════════════════════════════════════
   FOOTER META BADGE
   ═══════════════════════════════════════ */
.footer-mega-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.footer-mega-row strong {
  font-size: inherit;
}
.footer-meta-badge {
  height: 36px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  opacity: .9;
  flex-shrink: 0;
  transition: opacity .2s;
}
.footer-meta-badge:hover { opacity: 1; }