/* ═══════════════════════════════════════════════════════════
   GFIB IPTV – main.css  ·  "Cosmic Theater" Design System
   iptvabbonamento.space  ·  v2.0  ·  2026
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&family=Syne:wght@700;800&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Cosmic palette */
  --ocean-950:  #020617;
  --ocean-900:  #050d1f;
  --ocean-800:  #0a1628;
  --ocean-700:  #0f2040;
  --ocean-600:  #102542;

  /* Neon accent gradient: magenta → coral */
  --neon-a:     #d946ef;   /* magenta */
  --neon-b:     #f97316;   /* coral/orange */
  --neon-mid:   #a855f7;   /* violet mid */

  /* Electric blue for secondary */
  --elec:       #38bdf8;
  --elec-dark:  #0ea5e9;

  /* Surfaces */
  --surf-1:     rgba(10,22,40,0.95);
  --surf-2:     rgba(15,32,64,0.6);
  --surf-glass: rgba(255,255,255,0.04);
  --surf-glass2:rgba(217,70,239,0.06);

  /* Borders */
  --border:     rgba(255,255,255,0.07);
  --border-neon:rgba(217,70,239,0.35);
  --border-elec:rgba(56,189,248,0.3);

  /* Text */
  --txt-1:  #f0f6ff;
  --txt-2:  #94a3b8;
  --txt-3:  #475569;

  /* Gradients */
  --grad-neon:    linear-gradient(135deg, var(--neon-a), var(--neon-b));
  --grad-ocean:   linear-gradient(180deg, var(--ocean-900) 0%, var(--ocean-950) 100%);
  --grad-card:    linear-gradient(145deg, rgba(217,70,239,.08), rgba(249,115,22,.04));
  --grad-text:    linear-gradient(120deg, #d946ef 0%, #a855f7 45%, #38bdf8 100%);
  --grad-hero-glow: radial-gradient(ellipse 80% 60% at 20% 40%,rgba(168,85,247,.2) 0%,transparent 70%),
                    radial-gradient(ellipse 50% 40% at 80% 20%,rgba(217,70,239,.15) 0%,transparent 60%),
                    radial-gradient(ellipse 60% 50% at 60% 80%,rgba(56,189,248,.1) 0%,transparent 60%);

  /* Shadows / glow */
  --glow-neon:  0 0 40px rgba(217,70,239,.4), 0 0 80px rgba(217,70,239,.15);
  --glow-coral: 0 0 30px rgba(249,115,22,.4);
  --glow-elec:  0 0 30px rgba(56,189,248,.35);
  --shadow-card:0 8px 40px rgba(0,0,0,.5);

  /* Fonts */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Syne', 'Inter', sans-serif;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur: 0.3s;
  --dur-slow: 0.6s;

  /* Sizing */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill:999px;
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--ocean-950);
  color:var(--txt-1);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--ocean-950)}
::-webkit-scrollbar-thumb{background:var(--neon-a);border-radius:3px}

/* ══════════════════════════════════════════════════════════
   STARFIELD CANVAS BACKGROUND
   ══════════════════════════════════════════════════════════ */
#starfield{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;opacity:.5;
}

/* ── LAYOUT ─────────────────────────────────────────────── */
.container{max-width:1220px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.section{padding:90px 0}
.section-sm{padding:56px 0}

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-size:clamp(1.2rem,3vw,1.6rem)}
h4{font-size:1.1rem}
p{color:var(--txt-2);line-height:1.7}

.gradient-text{
  background:var(--grad-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  display:inline;
}

/* ── BADGES ─────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1.2px;
}
.badge-neon{background:rgba(217,70,239,.12);color:var(--neon-a);border:1px solid var(--border-neon)}
.badge-elec{background:rgba(56,189,248,.1);color:var(--elec);border:1px solid var(--border-elec)}
.badge-coral{background:rgba(249,115,22,.12);color:#fb923c;border:1px solid rgba(249,115,22,.3)}
.badge-gold{background:rgba(234,179,8,.1);color:#fbbf24;border:1px solid rgba(234,179,8,.3)}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 28px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:.975rem;font-weight:700;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             opacity var(--dur);
  white-space:nowrap;cursor:pointer;border:none;
}
.btn svg{width:19px;height:19px;flex-shrink:0}
.btn-neon{
  background:var(--grad-neon);color:#fff;
  box-shadow:0 4px 24px rgba(217,70,239,.4);
}
.btn-neon:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--glow-neon)}
.btn-wa{
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
  box-shadow:0 4px 20px rgba(34,197,94,.35);
}
.btn-wa:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(34,197,94,.55)}
.btn-ghost{
  background:var(--surf-glass);color:var(--txt-1);
  border:1px solid var(--border);backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:var(--neon-a);background:var(--surf-glass2);transform:translateY(-2px)}
.btn-elec{
  background:linear-gradient(135deg,var(--elec),var(--elec-dark));color:#fff;
  box-shadow:var(--glow-elec);
}
.btn-elec:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(56,189,248,.55)}
.btn-lg{padding:18px 36px;font-size:1.05rem}
.btn-sm{padding:10px 20px;font-size:.875rem}

/* ══════════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════════ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;
  transition:padding var(--dur) var(--ease),
             background var(--dur) var(--ease),
             border-bottom-color var(--dur);
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  padding:12px 0;
  background:rgba(2,6,23,.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom-color:var(--border);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-logo img{height:42px;width:auto;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  padding:8px 14px;border-radius:var(--r-sm);
  font-size:.875rem;font-weight:500;color:var(--txt-2);
  transition:color var(--dur),background var(--dur);
}
.nav-links a:hover,.nav-links a.active{color:var(--txt-1);background:var(--surf-glass)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{padding:10px 20px;font-size:.85rem}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--txt-1);border-radius:2px;transition:var(--dur)}

/* Mobile Nav */
.mobile-nav{
  display:none;position:fixed;inset:0;z-index:999;
  background:var(--ocean-900);
  padding:96px 24px 40px;
  flex-direction:column;gap:10px;
  overflow-y:auto;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  padding:16px 20px;border-radius:var(--r-md);
  font-size:1.05rem;font-weight:600;color:var(--txt-2);
  border:1px solid var(--border);transition:var(--dur);
}
.mobile-nav a:hover{color:var(--txt-1);border-color:var(--neon-a);background:var(--surf-glass2)}

/* ══════════════════════════════════════════════════════════
   HERO – COSMIC THEATER
   ══════════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:130px 0 80px;overflow:hidden;
}

/* Multi-layer cosmic background */
.hero-cosmos{
  position:absolute;inset:0;z-index:0;
  background:var(--ocean-950);
}
.hero-cosmos::before{
  content:'';position:absolute;inset:0;
  background:var(--grad-hero-glow);
}
/* Animated grid */
.hero-grid{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(56,189,248,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,black 0%,transparent 80%);
  animation:grid-drift 20s linear infinite;
}
@keyframes grid-drift{
  0%{transform:translateY(0)}
  100%{transform:translateY(60px)}
}

/* Orbs */
.orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;z-index:0;
}
.orb-1{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(168,85,247,.25) 0%,transparent 70%);
  top:-200px;left:-150px;
  animation:float-orb 12s ease-in-out infinite;
}
.orb-2{
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(217,70,239,.2) 0%,transparent 70%);
  bottom:-100px;right:-100px;
  animation:float-orb 16s ease-in-out infinite reverse;
}
.orb-3{
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(56,189,248,.15) 0%,transparent 70%);
  top:40%;right:20%;
  animation:float-orb 10s ease-in-out infinite 3s;
}
@keyframes float-orb{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-40px) scale(1.05)}
  66%{transform:translate(-20px,20px) scale(.95)}
}

/* Scan line overlay */
.hero-scanlines{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 2px,
    rgba(56,189,248,.015) 2px,rgba(56,189,248,.015) 4px
  );
}

/* Hero content */
.hero-content{
  position:relative;z-index:2;max-width:760px;
}
.hero-eyebrow{
  display:flex;align-items:center;gap:12px;
  margin-bottom:24px;flex-wrap:wrap;
}
.live-dot{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:700;color:var(--neon-a);
  text-transform:uppercase;letter-spacing:1px;
}
.live-dot::before{
  content:'';display:block;width:8px;height:8px;
  border-radius:50%;background:var(--neon-a);
  box-shadow:0 0 8px var(--neon-a);
  animation:live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}

.hero-title{margin-bottom:24px}
.hero-subtitle{
  font-size:clamp(1rem,2.5vw,1.2rem);
  color:var(--txt-2);margin-bottom:40px;max-width:580px;line-height:1.75;
}

/* ── COUNTDOWN ──────────────────────────────────────────── */
.countdown-unit-bar{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(217,70,239,.08);
  border:1px solid var(--border-neon);
  border-radius:var(--r-md);
  padding:12px 20px;margin-bottom:36px;
  backdrop-filter:blur(12px);
}
.countdown-unit-bar .label{
  font-size:.82rem;font-weight:600;color:var(--neon-a);
  text-transform:uppercase;letter-spacing:.5px;
}
.cd-blocks{display:flex;align-items:center;gap:10px;margin-left:12px}
.cd-block{
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm);padding:8px 14px;text-align:center;min-width:56px;
}
.cd-num{
  display:block;font-family:var(--font-display);font-size:1.5rem;
  font-weight:800;color:#fff;line-height:1;
}
.cd-lbl{display:block;font-size:.6rem;color:var(--txt-3);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
.cd-sep{font-size:1.2rem;font-weight:900;color:var(--neon-a);margin-bottom:4px}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:48px}
.hero-trust{display:flex;flex-wrap:wrap;gap:20px;padding-top:36px;border-top:1px solid var(--border)}
.trust-chip{
  display:flex;align-items:center;gap:8px;
  font-size:.82rem;color:var(--txt-3);
}
.trust-chip .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--grad-neon);flex-shrink:0;
}

/* ── HERO STATS ─────────────────────────────────────────── */
.hero-stats{
  display:flex;gap:48px;flex-wrap:wrap;
  margin-top:56px;padding-top:40px;
  border-top:1px solid var(--border);
}
.stat{text-align:center}
.stat-n{
  font-family:var(--font-display);font-size:2.2rem;font-weight:800;
  background:var(--grad-text);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  display:block;line-height:1;
}
.stat-l{font-size:.75rem;color:var(--txt-3);margin-top:4px;text-transform:uppercase;letter-spacing:.8px}

/* ══════════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════════ */
.sec-hdr{text-align:center;margin-bottom:60px}
.sec-hdr .badge{margin-bottom:14px}
.sec-hdr h2{margin-bottom:16px}
.sec-hdr p{max-width:560px;margin:0 auto;font-size:1.05rem}

/* ══════════════════════════════════════════════════════════
   FLOATING PARTICLES / FEATURE CARDS
   ══════════════════════════════════════════════════════════ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}

/* Glassmorphism feature card */
.feat-card{
  background:var(--surf-glass);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px 28px;
  transition:border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             background var(--dur);
  position:relative;overflow:hidden;
  backdrop-filter:blur(12px);
}
.feat-card::before{
  content:'';position:absolute;inset:0;
  background:var(--grad-card);opacity:0;
  transition:opacity var(--dur);
}
.feat-card:hover{
  border-color:var(--border-neon);
  transform:translateY(-6px);
}
.feat-card:hover::before{opacity:1}
/* Neon top line on hover */
.feat-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-neon);opacity:0;
  transition:opacity var(--dur);border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.feat-card:hover::after{opacity:1}

.feat-icon{
  width:52px;height:52px;border-radius:14px;
  background:rgba(217,70,239,.12);border:1px solid var(--border-neon);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:20px;
  box-shadow:0 0 20px rgba(217,70,239,.15);
}
.feat-card h3{font-size:1.1rem;margin-bottom:10px;position:relative;z-index:1}
.feat-card p{font-size:.9rem;position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════
   CHANNELS STRIP
   ══════════════════════════════════════════════════════════ */
.channels-strip{
  background:linear-gradient(180deg,var(--ocean-900),var(--ocean-800));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:64px 0;overflow:hidden;
}
.channels-scroll-wrap{
  overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);
}
.channels-track{
  display:flex;gap:14px;width:max-content;
  animation:marquee 35s linear infinite;
}
.channels-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ch-tag{
  flex-shrink:0;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:9px 20px;font-size:.85rem;font-weight:500;
  white-space:nowrap;cursor:pointer;
  transition:border-color var(--dur),color var(--dur),box-shadow var(--dur);
}
.ch-tag:hover{border-color:var(--neon-a);color:var(--neon-a);box-shadow:0 0 16px rgba(217,70,239,.2)}

/* ══════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════ */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;align-items:start;
}
.pricing-card{
  background:var(--surf-glass);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:40px 32px;
  transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur);
  position:relative;overflow:hidden;
  backdrop-filter:blur(16px);
}
.pricing-card.featured{
  border-color:var(--border-neon);
  background:linear-gradient(145deg,rgba(217,70,239,.08),rgba(168,85,247,.04));
  transform:scale(1.04);
  box-shadow:var(--glow-neon);
}
.pricing-card:not(.featured):hover{
  transform:translateY(-6px);border-color:rgba(217,70,239,.2);
}
/* Glowing top stripe for featured */
.pricing-card.featured::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-neon);
}
.feat-badge{
  position:absolute;top:0;left:50%;transform:translate(-50%,0);
  background:var(--grad-neon);color:#fff;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  padding:6px 20px;border-radius:0 0 14px 14px;
}
.plan-name{
  font-size:.8rem;font-weight:700;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;
}
.plan-price{
  font-family:var(--font-display);font-size:3.6rem;font-weight:800;
  color:var(--txt-1);line-height:1;margin-bottom:6px;display:flex;align-items:flex-start;gap:4px;
}
.plan-price .euro{font-size:1.8rem;margin-top:8px;color:var(--txt-2)}
.plan-sub{font-size:.82rem;color:var(--txt-3);margin-bottom:28px}
.plan-divider{border:none;border-top:1px solid var(--border);margin:24px 0}
.plan-features{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.plan-feat{display:flex;align-items:center;gap:10px;font-size:.9rem}
.plan-feat .ck{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;color:#22c55e;
}
.pricing-card .btn{width:100%;justify-content:center}

/* ══════════════════════════════════════════════════════════
   PAYMENT BANNER
   ══════════════════════════════════════════════════════════ */
.pay-banner{
  background:linear-gradient(180deg,var(--ocean-900),var(--ocean-800));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:48px 0;
}
.pay-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.pay-text h3{font-size:1.25rem;margin-bottom:8px}
.pay-img{max-height:46px;width:auto}

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════ */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi-card{
  background:var(--surf-glass);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:30px;
  backdrop-filter:blur(12px);
  transition:transform var(--dur),border-color var(--dur);
}
.testi-card:hover{transform:translateY(-4px);border-color:rgba(217,70,239,.25)}
.stars{font-size:.95rem;color:#fbbf24;letter-spacing:2px;margin-bottom:14px}
.testi-body{font-size:.92rem;font-style:italic;color:var(--txt-2);margin-bottom:22px;line-height:1.65}
.testi-author{display:flex;align-items:center;gap:12px}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--grad-neon);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.9rem;color:#fff;flex-shrink:0;
}
.author-name{font-weight:700;font-size:.9rem}
.author-loc{font-size:.78rem;color:var(--txt-3)}

/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */
.faq-section{background:linear-gradient(180deg,var(--ocean-900),var(--ocean-950))}
.faq-wrap{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:var(--surf-glass);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;backdrop-filter:blur(12px);
  transition:border-color var(--dur);
}
.faq-item.open{border-color:var(--border-neon)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;cursor:pointer;
  font-weight:600;font-size:.96rem;gap:16px;
}
.faq-ico{
  width:28px;height:28px;flex-shrink:0;border-radius:50%;
  background:rgba(217,70,239,.12);border:1px solid var(--border-neon);
  display:flex;align-items:center;justify-content:center;
  color:var(--neon-a);font-size:.9rem;font-weight:700;
  transition:transform var(--dur) var(--ease-spring),background var(--dur);
}
.faq-item.open .faq-ico{transform:rotate(45deg);background:var(--neon-a);color:#fff;border-color:var(--neon-a)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .4s ease-in-out}
.faq-ans p{font-size:.92rem;color:var(--txt-2);padding:0 24px 20px;}
.faq-item.open .faq-ans{max-height:500px} /* Large enough to handle mobile text wrapping */

/* ══════════════════════════════════════════════════════════
   BLOG CARDS
   ══════════════════════════════════════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{
  background:var(--surf-glass);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--dur),border-color var(--dur),box-shadow var(--dur);
  backdrop-filter:blur(8px);display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);border-color:rgba(217,70,239,.25);box-shadow:var(--shadow-card)}
.blog-thumb{
  height:176px;display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--ocean-700),var(--ocean-900));
}
.blog-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(2,6,23,.8));
}
.blog-body{padding:24px;flex:1;display:flex;flex-direction:column}
.blog-meta{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.blog-cat{font-size:.72rem;font-weight:700;color:var(--neon-a);text-transform:uppercase;letter-spacing:1px}
.blog-date{font-size:.75rem;color:var(--txt-3)}
.blog-card h3{font-size:.98rem;margin-bottom:10px;line-height:1.4;font-family:var(--font-body);font-weight:700}
.blog-card p{font-size:.86rem;line-height:1.55;flex:1}
.read-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.82rem;font-weight:700;color:var(--neon-a);
  margin-top:16px;transition:gap var(--dur);
}
.blog-card:hover .read-more{gap:10px}

/* ══════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════ */
.cta-band{
  position:relative;overflow:hidden;
  padding:90px 0;text-align:center;
  border-top:1px solid rgba(217,70,239,.15);
  border-bottom:1px solid rgba(217,70,239,.15);
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(168,85,247,.12) 0%,transparent 70%);
}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{margin-bottom:16px}
.cta-band p{max-width:520px;margin:0 auto 36px;font-size:1.05rem}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.footer{
  background:#020614;border-top:1px solid var(--border);
  padding:64px 0 32px;
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:48px;
}
.footer-brand p{font-size:.87rem;color:var(--txt-3);margin-top:16px;max-width:280px;line-height:1.7}
.footer-logo{height:38px;width:auto}
.ft-col h4{
  font-size:.8rem;font-weight:700;color:var(--txt-1);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;
}
.ft-col ul{display:flex;flex-direction:column;gap:10px}
.ft-col ul li a{
  font-size:.855rem;color:var(--txt-3);
  transition:color var(--dur),padding-left var(--dur);
}
.ft-col ul li a:hover{color:var(--neon-a);padding-left:4px}
.footer-social{display:flex;gap:8px;margin-top:20px}
.soc-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:var(--surf-glass);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--txt-3);transition:var(--dur);
}
.soc-btn:hover{border-color:var(--neon-a);color:var(--neon-a);background:rgba(217,70,239,.1)}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:28px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.footer-bottom p,.footer-bottom a{font-size:.8rem;color:var(--txt-3)}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a:hover{color:var(--neon-a)}

/* ══════════════════════════════════════════════════════════
   FLOATING WA BUTTON
   .wa-float      = used by index.html (new)
   .whatsapp-float = used by all inner pages (legacy alias)
   ══════════════════════════════════════════════════════════ */
.wa-float,
.whatsapp-float {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: 0 6px 28px rgba(34, 197, 94, .45);
  animation: wa-bounce 3.5s ease-in-out infinite;
  transition: transform var(--dur), box-shadow var(--dur);
  /* Hard-stop any width/height bleed */
  max-width: 60px !important;
  max-height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  flex-shrink: 0;
}
.wa-float:hover,
.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 10px 36px rgba(34, 197, 94, .65);
  animation: none;
}
/* SVG icon — constrained inside the 60px circle */
.wa-float svg,
.whatsapp-float svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex-shrink: 0;
  color: #fff;
  fill: #fff;
  display: block;
}
/* Tooltip (only on .wa-float variant) */
.wa-tip {
  position: absolute;
  right: 68px;
  background: var(--surf-1);
  color: var(--txt-1);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur);
}
.wa-float:hover .wa-tip { opacity: 1; }

@keyframes wa-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ══════════════════════════════════════════════════════════
   SOCIAL PROOF POPUP
   ══════════════════════════════════════════════════════════ */
.sp-popup{
  position:fixed;bottom:100px;left:20px;z-index:998;
  background:var(--surf-1);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-card);max-width:320px;
  transform:translateX(-380px);
  transition:transform .5s var(--ease-spring);
}
.sp-popup.show{transform:translateX(0)}
.sp-popup-ava{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--grad-neon);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
}
.sp-popup strong{display:block;font-size:.84rem;color:var(--txt-1)}
.sp-popup span{font-size:.76rem;color:var(--txt-3)}
.sp-popup time{display:block;font-size:.7rem;color:var(--txt-3);margin-top:2px}

/* ══════════════════════════════════════════════════════════
   INNER PAGE HERO (other pages)
   ══════════════════════════════════════════════════════════ */
.page-hero{
  padding:140px 0 64px;position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 30% 50%,rgba(168,85,247,.1) 0%,transparent 60%);
}
.page-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--border)}

/* ══════════════════════════════════════════════════════════
   CONTACT / LEGAL / POST
   ══════════════════════════════════════════════════════════ */
.contact-form-wrapper{
  background:var(--surf-glass);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:40px;backdrop-filter:blur(12px);
}
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:.86rem;font-weight:600;margin-bottom:8px;color:var(--txt-2)}
.form-input,.form-select,.form-textarea{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:13px 16px;
  color:var(--txt-1);font-family:var(--font-body);font-size:.95rem;outline:none;
  transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--neon-a);
  background:rgba(217,70,239,.05);
  box-shadow:0 0 0 3px rgba(217,70,239,.12);
}
.form-textarea{resize:vertical;min-height:128px}
.form-select option{background:var(--ocean-800)}

.legal-content{
  max-width:820px;margin:0 auto;background:var(--surf-glass);
  border:1px solid var(--border);border-radius:var(--r-xl);padding:48px;
  backdrop-filter:blur(12px);
}
.legal-content h2{font-size:1.35rem;margin-top:36px;margin-bottom:12px;font-family:var(--font-body);font-weight:700}
.legal-content p{font-size:.93rem;margin-bottom:14px;line-height:1.75}
.legal-content ul{padding-left:20px;margin-bottom:14px}
.legal-content ul li{font-size:.92rem;color:var(--txt-2);margin-bottom:6px;list-style:disc;line-height:1.65}
.legal-date{font-size:.82rem;color:var(--txt-3);margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}

.post-content h2{font-size:1.5rem;margin:32px 0 14px;font-family:var(--font-body);font-weight:700}
.post-content h3{font-size:1.2rem;margin:24px 0 10px;font-family:var(--font-body);font-weight:600}
.post-content p{font-size:.97rem;margin-bottom:18px;line-height:1.8}
.post-content ul,.post-content ol{padding-left:24px;margin-bottom:18px}
.post-content li{font-size:.95rem;color:var(--txt-2);margin-bottom:8px;line-height:1.65;list-style:disc}
.post-content ol li{list-style:decimal}
.highlight-box{
  background:rgba(217,70,239,.07);
  border-left:3px solid var(--neon-a);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:18px 22px;margin:24px 0;
}
.post-meta{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--border)}
.post-meta-item{display:flex;align-items:center;gap:6px;font-size:.83rem;color:var(--txt-3)}

/* ══════════════════════════════════════════════════════════
   AOS – ANIMATE ON SCROLL
   ══════════════════════════════════════════════════════════ */
.aos{opacity:0;transform:translateY(28px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.aos.visible{opacity:1;transform:none}
.aos-delay-1{transition-delay:.1s}
.aos-delay-2{transition-delay:.2s}
.aos-delay-3{transition-delay:.3s}
.aos-delay-4{transition-delay:.4s}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .pricing-grid{grid-template-columns:1fr 1fr}
  .pricing-card.featured{transform:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .section{padding:64px 0}
  .container{padding:0 16px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .pricing-grid,.testi-grid,.blog-grid{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;text-align:center}
  .legal-content,.contact-form-wrapper{padding:24px 18px}
  .countdown-unit-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .pay-inner{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  h1{font-size:2.1rem}
  .btn-lg{padding:15px 26px;font-size:1rem}
  .hero{padding:106px 0 64px}
  .wa-float{bottom:18px;right:16px;width:52px;height:52px}
  .sp-popup{max-width:calc(100vw - 32px);left:16px}
  .cta-btns{flex-direction:column;align-items:center}
}