/* ==========================================================================
   TvZien — IPTV Nederland
   Design system & stylesheet
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Buttons & pills
   5.  Navigation
   6.  Hero
   7.  Stat counter
   8.  Section headers (centered)
   9.  Logo grids (channels / platforms / sport)
   10. Poster library (moving film & series rails)
   11. Feature cards
   12. Steps
   13. Pricing (dark focus band)
   14. Devices
   15. Reviews
   16. FAQ
   17. Guides
   18. Closing CTA
   19. Footer
   20. WhatsApp float
   21. Legal pages
   22. Accessibility, motion & print
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* ---- Gold -----------------------------------------------------------
     Two golds on purpose. --grad is the bright metallic one and is only
     ever used as a FILL (buttons, badges, numbered discs) with dark text
     on top. --grad-text is deeper, for gradient TEXT on light bands,
     where bright gold would fall under 3:1 contrast. */
  --gold:#D4AF37;
  --gold-light:#F2D479;
  --gold-dark:#A67C1A;
  --gold-deep:#8A6A12;
  --gold-soft:rgba(212,175,55,.12);
  --gold-line:rgba(212,175,55,.26);

  --grad:linear-gradient(135deg,#A67C1A 0%,#EBC964 46%,#D4AF37 100%);
  --grad-hover:linear-gradient(135deg,#8A6A12 0%,#E2BC50 46%,#C29C26 100%);
  --grad-text:linear-gradient(135deg,#E3C263 0%,#F7E6AE 52%,#D4AF37 100%);
  --grad-soft:linear-gradient(135deg,rgba(212,175,55,.18) 0%,rgba(242,212,121,.10) 100%);

  /* Brand — deep teal, the quiet partner to the gold */
  --brand:#D4AF37;
  --brand-600:#C29C26;
  --brand-700:#E8CC74;
  --brand-400:#F2D479;
  --teal:#D4AF37;

  /* Accent */
  --accent:#D4AF37;
  --accent-600:#A67C1A;
  --accent-soft:rgba(212,175,55,.14);

  /* Semantic */
  --ok:#34C58D;
  --ok-600:#2AA877;
  --live:#DC2626;

  /* Ink & neutrals — inverted for the black theme */
  --ink:#F8F3E7;
  --ink-2:#E7DFCC;
  --body:#BEB6A6;
  --muted:#8C8474;

  /* Surfaces — near-black with a warm cast so gold sits naturally */
  --bg:#08070A;
  --bg-alt:#141218;
  --bg-tint:#1D1A22;
  --line:rgba(212,175,55,.16);
  --line-2:rgba(212,175,55,.30);
  --card-glass:rgba(255,255,255,.035);
  --tile:#F6F1E4;

  /* Dark band */
  --dark:#050406;
  --dark-2:#14110A;

  /* ---- Colour bands -------------------------------------------------
     Warm ivory and champagne for the light sections, deep jewel tones
     for the feature sections. --band-fade is the flat colour a marquee
     fades out to, so edge fades always match their band. */
  /* Three blacks: warm (espresso), neutral (onyx), cool (graphite).
     Different enough to separate sections, all unmistakably black. */
  --band-espresso:linear-gradient(165deg,#0B0904 0%,#16120A 48%,#0C0A05 100%);
  --band-espresso-fade:#110E07;

  --band-onyx:linear-gradient(165deg,#050406 0%,#0D0C10 48%,#07060A 100%);
  --band-onyx-fade:#09080C;

  --band-graphite:linear-gradient(165deg,#0D0D11 0%,#18181E 48%,#0F0F14 100%);
  --band-graphite-fade:#131317;

  --band-midnight:var(--band-graphite);
  --band-emerald:var(--band-espresso);
  --band-sapphire:var(--band-onyx);

  --band-fade:var(--band-onyx-fade);

  /* Type */
  --font-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Shape */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;

  /* Elevation */
  --sh-sm:0 1px 2px rgba(11,37,69,.05),0 2px 8px rgba(11,37,69,.04);
  --sh:0 4px 12px rgba(11,37,69,.06),0 12px 28px rgba(11,37,69,.07);
  --sh-md:0 8px 20px rgba(11,37,69,.08),0 20px 44px rgba(11,37,69,.09);
  --sh-lg:0 20px 56px rgba(11,37,69,.16);
  --sh-brand:0 10px 30px rgba(14,116,144,.34);
  --ring:0 0 0 4px rgba(14,116,144,.16);

  /* Rhythm */
  --pad-section:96px;
  --container:1240px;
  --nav-h:88px;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:#08070A;
  background-attachment:fixed;
  color:var(--body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:800;
}

a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
strong{color:var(--ink);font-weight:700}
s{color:var(--muted)}

::selection{background:rgba(14,116,144,.18);color:var(--ink)}

:focus-visible{
  outline:3px solid var(--brand-400);
  outline-offset:3px;
  border-radius:4px;
}

/* Inline icon system (SVG sprite) */
.ico{
  width:1em;height:1em;
  fill:none;stroke:currentColor;
  stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;
}
.ico--fill{fill:currentColor;stroke:none}


/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:28px;
}

section{padding:var(--pad-section) 0}
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ---------- Colour bands ----------
   Every section sits on a gradient, never on flat white. Decorative
   colour orbs sit behind the content on a negative z-index. */
.band-cream,.band-champagne,.band-midnight,.band-emerald,.band-sapphire,
.band-aqua,.band-sky,.band-mint,.band-sun,.band-deep,
.band-light,.band-white{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.band-cream > .container,.band-champagne > .container,
.band-midnight > .container,.band-emerald > .container,.band-sapphire > .container,
.band-aqua > .container,.band-sky > .container,.band-mint > .container,
.band-sun > .container,.band-deep > .container,
.band-light > .container,.band-white > .container{position:relative;z-index:1}

/* ---------- Light bands: ivory & champagne, lit with gold ---------- */
.band-cream{background:var(--band-espresso);--band-fade:var(--band-espresso-fade)}
.band-champagne{background:var(--band-onyx);--band-fade:var(--band-onyx-fade)}

.band-cream::before,.band-champagne::before{
  content:'';
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 52% 50% at 92% 2%,rgba(212,175,55,.20) 0%,transparent 64%),
    radial-gradient(ellipse 46% 48% at 4% 98%,rgba(212,175,55,.12) 0%,transparent 64%),
    radial-gradient(ellipse 40% 34% at 50% 50%,rgba(212,175,55,.05) 0%,transparent 72%);
}

/* a hairline of gold between every light band */
.band-cream::after,.band-champagne::after{
  content:'';
  position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold-line) 22%,var(--gold-line) 78%,transparent);
}

/* ---------- Jewel bands ---------- */
.band-midnight{background:var(--band-midnight);--band-fade:#0C3648}
.band-emerald{background:var(--band-emerald);--band-fade:#0A4536}
.band-sapphire{background:var(--band-sapphire);--band-fade:#0B3A5C}

.band-midnight,.band-emerald,.band-sapphire{color:rgba(255,255,255,.78)}

.band-midnight::before,.band-emerald::before,.band-sapphire::before{
  content:'';
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 50% 46% at 88% 2%,rgba(212,175,55,.24) 0%,transparent 62%),
    radial-gradient(ellipse 44% 44% at 4% 98%,rgba(212,175,55,.16) 0%,transparent 64%),
    radial-gradient(ellipse 40% 36% at 50% 50%,rgba(18,165,148,.14) 0%,transparent 70%);
}
/* gold hairline top and bottom — the "framed" look */
.band-midnight::after,.band-emerald::after,.band-sapphire::after{
  content:'';
  position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.55) 30%,rgba(212,175,55,.55) 70%,transparent);
}

.band-midnight .section-title,.band-emerald .section-title,.band-sapphire .section-title,
.band-midnight .subsection-title,.band-emerald .subsection-title,.band-sapphire .subsection-title,
.band-midnight .rating-score,.band-emerald .rating-score,.band-sapphire .rating-score{color:#fff}

.band-midnight .section-sub,.band-emerald .section-sub,.band-sapphire .section-sub,
.band-midnight .subsection-sub,.band-emerald .subsection-sub,.band-sapphire .subsection-sub,
.band-midnight .rating-count,.band-emerald .rating-count,.band-sapphire .rating-count,
.band-midnight .library-note,.band-emerald .library-note,.band-sapphire .library-note,
.band-midnight .rail-hint,.band-emerald .rail-hint,.band-sapphire .rail-hint{color:rgba(255,255,255,.66)}

.band-midnight .library-note a,.band-emerald .library-note a,.band-sapphire .library-note a{color:var(--gold-light)}

.band-midnight .pill--brand,.band-emerald .pill--brand,.band-sapphire .pill--brand{
  background:rgba(212,175,55,.16);
  border-color:rgba(212,175,55,.42);
  color:var(--gold-light);
}
.band-midnight .poster-title,.band-emerald .poster-title,.band-sapphire .poster-title{color:#fff}
.band-midnight .poster-meta,.band-emerald .poster-meta,.band-sapphire .poster-meta{color:rgba(255,255,255,.6)}
.band-midnight .poster-art,.band-emerald .poster-art,.band-sapphire .poster-art{box-shadow:0 10px 30px rgba(0,0,0,.45)}

.band-midnight .logo-card,.band-emerald .logo-card,.band-sapphire .logo-card{
  background:rgba(255,255,255,.95);
  border-color:rgba(212,175,55,.3);
}
.band-midnight .league-chip,.band-emerald .league-chip,.band-sapphire .league-chip{
  background:rgba(255,255,255,.1);
  border-color:rgba(212,175,55,.3);
  color:#fff;
}
/* cards that sit on a jewel band become glass with a gold edge */
.band-midnight .review-card,.band-emerald .review-card,.band-sapphire .review-card,
.band-midnight .device-card,.band-emerald .device-card,.band-sapphire .device-card,
.band-midnight .feature-card,.band-emerald .feature-card,.band-sapphire .feature-card{
  background:rgba(255,255,255,.07);
  border-color:rgba(212,175,55,.28);
  backdrop-filter:blur(8px);
}
.band-midnight .review-text,.band-emerald .review-text,.band-sapphire .review-text,
.band-midnight .feature-desc,.band-emerald .feature-desc,.band-sapphire .feature-desc{color:rgba(255,255,255,.8)}
.band-midnight .review-name,.band-emerald .review-name,.band-sapphire .review-name,
.band-midnight .feature-title,.band-emerald .feature-title,.band-sapphire .feature-title,
.band-midnight .device-name,.band-emerald .device-name,.band-sapphire .device-name{color:#fff}
.band-midnight .review-city,.band-emerald .review-city,.band-sapphire .review-city,
.band-midnight .device-sub,.band-emerald .device-sub,.band-sapphire .device-sub{color:rgba(255,255,255,.6)}
.band-midnight .device-card:hover,.band-emerald .device-card:hover,.band-sapphire .device-card:hover,
.band-midnight .feature-card:hover,.band-emerald .feature-card:hover,.band-sapphire .feature-card:hover{
  border-color:rgba(212,175,55,.6);
  background:rgba(255,255,255,.11);
}

/* Coloured orbs — these ADD colour rather than washing it out.
   A light white bloom sits only behind the middle, where the text is. */
.band-aqua::before,.band-sky::before,.band-mint::before,.band-sun::before,
.band-light::before,.band-white::before{
  content:'';
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 52% 50% at 92% 2%,rgba(212,175,55,.20) 0%,transparent 64%),
    radial-gradient(ellipse 46% 48% at 4% 98%,rgba(212,175,55,.12) 0%,transparent 64%);
}
.band-aqua::after,.band-sky::after,.band-mint::after,.band-sun::after,
.band-light::after,.band-white::after{
  content:'';
  position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold-line) 22%,var(--gold-line) 78%,transparent);
}
.band-deep::after{
  content:'';
  position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.55) 30%,rgba(212,175,55,.55) 70%,transparent);
}

/* Earlier band names now map onto the ivory / champagne pair, so the blog
   and legal pages pick up the gold theme without touching their markup. */
.band-aqua,.band-mint,.band-light{background:var(--band-espresso);--band-fade:var(--band-espresso-fade)}
.band-sky,.band-sun,.band-white{background:var(--band-onyx);--band-fade:var(--band-onyx-fade)}
.band-deep{background:var(--band-graphite);--band-fade:var(--band-graphite-fade)}
.band-light::before,.band-white::before{
  content:'';
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 40% 44% at 50% 42%,rgba(255,255,255,.55) 0%,transparent 66%),
    radial-gradient(ellipse 42% 48% at 92% 4%,rgba(18,165,148,.32) 0%,transparent 64%),
    radial-gradient(ellipse 38% 44% at 2% 96%,rgba(212,175,55,.20) 0%,transparent 64%);
}

/* ---------- Deep band: dark, saturated, cinematic ---------- */
.band-deep{
  background:var(--band-deep);
  color:rgba(255,255,255,.8);
  --band-fade:#07486E;
}
.band-deep::before{
  content:'';
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 50% 46% at 88% 2%,rgba(212,175,55,.24) 0%,transparent 62%),
    radial-gradient(ellipse 44% 44% at 4% 98%,rgba(212,175,55,.16) 0%,transparent 64%),
    radial-gradient(ellipse 40% 36% at 50% 50%,rgba(18,165,148,.14) 0%,transparent 70%);
}
.band-deep .section-title,
.band-deep .subsection-title{color:#fff}
.band-deep .section-sub,
.band-deep .subsection-sub{color:rgba(255,255,255,.68)}
.band-deep .pill--brand{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}
.band-deep .poster-title{color:#fff}
.band-deep .poster-meta{color:rgba(255,255,255,.62)}
.band-deep .library-note,
.band-deep .rail-hint{color:rgba(255,255,255,.68)}
.band-deep .library-note a{color:var(--gold-light)}
.band-deep .poster-art{box-shadow:0 10px 30px rgba(0,0,0,.42)}
.band-deep .poster:hover .poster-art{box-shadow:0 24px 56px rgba(0,0,0,.55)}
.band-deep .logo-card{
  background:rgba(255,255,255,.95);
  border-color:rgba(212,175,55,.3);
}
.band-deep .league-chip{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}


/* ==========================================================================
   4. BUTTONS & PILLS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);
  font-weight:700;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease;
}
.btn .ico{width:1.1em;height:1.1em}

.btn--sm{padding:10px 20px;font-size:.875rem}
.btn--md{padding:13px 26px;font-size:.95rem}
.btn--lg{padding:16px 32px;font-size:1rem}
.btn--block{width:100%}

.btn--primary{
  background:var(--grad);
  color:#0A2233;
  box-shadow:var(--sh-brand);
  border:1px solid rgba(255,255,255,.35);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(14,116,144,.45);background:var(--grad-hover)}

.btn--ghost{
  background:rgba(255,255,255,.05);
  color:var(--ink);
  border:1.5px solid rgba(212,175,55,.35);
  box-shadow:var(--sh-sm);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-light);background:rgba(212,175,55,.1);transform:translateY(-2px)}

.btn--outline{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--line-2);
}
.btn--outline:hover{border-color:var(--brand);color:var(--brand)}

.btn--wa{background:#25D366;color:#fff;box-shadow:0 8px 26px rgba(37,211,102,.36)}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(37,211,102,.5);background:#20bd5a}

.btn--white{background:var(--grad);color:#0A0A0B;box-shadow:0 10px 30px rgba(166,124,26,.4)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(166,124,26,.55);background:var(--grad-hover)}

.btn--glass{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
}
.btn--glass:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}

/* Small status pill */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;
  border-radius:999px;
  font-size:.78rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.pill--brand{
  background:var(--grad-soft);
  border:1px solid rgba(14,116,144,.24);
  color:var(--brand-700);
}
.pill .ico{width:1.05em;height:1.05em}


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:200;
  background:rgba(6,5,8,.82);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(212,175,55,.26);
  transition:box-shadow .25s ease,background .25s ease;
}
.nav.is-stuck{box-shadow:0 8px 30px rgba(0,0,0,.6);background:rgba(5,4,6,.94)}

.nav-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:28px;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;
}

/* --- Brand lockup: deliberately large & wide --- */
.brand{
  display:flex;align-items:center;gap:15px;
  flex-shrink:0;
  transition:transform .2s ease;
}
.brand:hover{transform:translateY(-1px)}

.brand-mark{
  width:58px;height:58px;
  flex-shrink:0;
  border-radius:18px;
  object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(212,175,55,.28));
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2),filter .35s ease;
}
.brand:hover .brand-mark{
  transform:scale(1.06) rotate(-3deg);
  filter:drop-shadow(0 8px 20px rgba(212,175,55,.42));
}

.brand-copy{display:flex;flex-direction:column;justify-content:center;gap:2px}

.brand-word{
  font-family:var(--font-display);
  font-size:2.1rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
  color:var(--ink);
}
.brand-word .tv{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-tag{
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}

/* --- Links --- */
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.nav-links a{
  display:block;
  padding:9px 8px;
  border-radius:10px;
  font-size:.86rem;
  font-weight:600;
  color:var(--body);
  white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.nav-links a:hover{color:var(--gold-light);background:rgba(212,175,55,.10)}

.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* --- Mobile toggle --- */
.nav-toggle{
  display:none;
  width:46px;height:46px;
  align-items:center;justify-content:center;
  border-radius:12px;
  border:1.5px solid rgba(212,175,55,.35);
  color:var(--gold-light);
  background:rgba(255,255,255,.05);
}
.nav-toggle .ico{width:22px;height:22px}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}

.nav-mobile{
  display:none;
  border-top:1px solid rgba(212,175,55,.22);
  background:rgba(6,5,8,.97);
  backdrop-filter:blur(18px);
  padding:18px 28px 26px;
}
.nav-mobile.is-open{display:block}
.nav-mobile ul{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.nav-mobile a{
  display:block;padding:13px 14px;border-radius:12px;
  font-weight:600;color:var(--ink);font-size:1rem;
}
.nav-mobile a:hover{background:var(--bg-tint);color:var(--brand)}
.nav-mobile .nav-mobile-cta{display:flex;flex-direction:column;gap:10px}


/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  padding:0;
  /* Aurora: four colour washes over a tinted base. Light enough that the
     headline keeps its dark ink, saturated enough to read as colour. */
  background:
    radial-gradient(ellipse 58% 62% at 84% 6%,rgba(212,175,55,.30) 0%,transparent 64%),
    radial-gradient(ellipse 52% 58% at 4% 14%,rgba(212,175,55,.16) 0%,transparent 66%),
    radial-gradient(ellipse 56% 54% at 74% 100%,rgba(212,175,55,.20) 0%,transparent 64%),
    radial-gradient(ellipse 46% 48% at 0% 98%,rgba(166,124,26,.18) 0%,transparent 66%),
    linear-gradient(168deg,#0B0904 0%,#100E0A 44%,#070609 100%);
}
.hero::after{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(212,175,55,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,175,55,.09) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 0%,transparent 75%);
  pointer-events:none;
}

/* Cursor-tracking spotlight (positions come from main.js) */
.hero::before{
  content:'';
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(
    460px circle at var(--mx,50%) var(--my,40%),
    rgba(212,175,55,.34) 0%,
    rgba(242,212,121,.18) 34%,
    transparent 68%
  );
}
.hero.is-pointing::before{opacity:1}

.hero-layout{
  position:relative;z-index:1;
  max-width:var(--container);
  margin-inline:auto;
  padding:76px 28px 88px;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:68px;
  align-items:center;
}

.hero h1{
  font-size:clamp(2.5rem,4.4vw,3.9rem);
  line-height:1.05;
  letter-spacing:-.035em;
  margin:24px 0 20px;
}
.hero h1 .grad{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-lead{
  font-size:1.075rem;
  color:var(--body);
  max-width:520px;
  margin-bottom:34px;
}

.hero-ctas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}

.hero-checks{
  display:flex;gap:12px 26px;flex-wrap:wrap;
  font-size:.88rem;font-weight:600;color:var(--ink-2);
  margin-bottom:42px;
}
.hero-checks li{display:flex;align-items:center;gap:9px}
.hero-checks .ico{
  width:20px;height:20px;
  padding:3px;
  border-radius:50%;
  background:rgba(16,185,129,.14);
  color:var(--ok-600);
  stroke-width:2.6;
}

.hero-stats{
  display:flex;gap:44px;flex-wrap:wrap;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.hero-stat dt{
  font-family:var(--font-display);
  font-size:2rem;font-weight:800;
  color:var(--ink);line-height:1;
  letter-spacing:-.03em;
}
.hero-stat dd{font-size:.82rem;color:var(--muted);margin-top:6px;font-weight:500}

/* --- Poster mosaic --- */
.hero-art{display:flex;align-items:center;justify-content:center}
.mosaic-wrap{position:relative;width:100%;max-width:470px}

.mosaic{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}
.mosaic-tile{
  position:relative;
  aspect-ratio:2/3;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--sh-md);
  background:var(--bg-tint);
}
.mosaic-tile img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.mosaic-tile:hover img{transform:scale(1.07)}
.mosaic-tile::after{
  content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(11,37,69,.07);
  border-radius:14px;pointer-events:none;
}

.float-chip{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:10px;
  background:#FBF7EC;
  border:1px solid rgba(212,175,55,.45);
  border-radius:999px;
  padding:9px 18px 9px 10px;
  font-size:.82rem;font-weight:700;
  color:#14110A;
  box-shadow:0 10px 30px rgba(11,37,69,.16);
  white-space:nowrap;
}
.float-chip__icon{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
}
.float-chip__icon .ico{width:15px;height:15px;stroke-width:2.6}
.float-chip--ok .float-chip__icon{background:var(--ok)}
.float-chip--fast .float-chip__icon{background:var(--accent)}
.float-chip--tl{top:-20px;left:-14px}
.float-chip--br{bottom:-20px;right:-14px}


/* ==========================================================================
   7. STAT COUNTER
   ========================================================================== */
.counter{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#0A0806 0%,#151109 38%,#0D0B07 72%,#0A0806 100%);
  border-block:1px solid rgba(212,175,55,.28);
  padding:46px 0;
}
.counter::before{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 30% 120% at 18% 50%,rgba(212,175,55,.22) 0%,transparent 70%),
    radial-gradient(ellipse 30% 120% at 82% 50%,rgba(14,116,144,.14) 0%,transparent 70%);
}
.counter > .container{position:relative;z-index:1}
.counter-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  text-align:center;
}
.counter-num{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,3vw,2.6rem);
  font-weight:800;
  letter-spacing:-.03em;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.1;
}
.counter-label{font-size:.86rem;color:var(--muted);margin-top:8px;font-weight:500}


/* ==========================================================================
   8. SECTION HEADERS — always centered
   ========================================================================== */
.section-head{
  text-align:center;
  max-width:730px;
  margin:0 auto 56px;
}
.section-head .pill{margin-bottom:18px}

.section-title{
  font-size:clamp(1.75rem,3.1vw,2.55rem);
  letter-spacing:-.03em;
  margin-bottom:16px;
}
/* a short gold rule under every section title */
.section-head .section-title::after{
  content:"";
  display:block;
  width:64px;height:2px;
  margin:18px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--gold-light) 50%,var(--gold) 75%,transparent);
}
.section-sub{
  font-size:1.03rem;
  color:var(--body);
  margin-inline:auto;
  max-width:620px;
}

.subsection-head{
  text-align:center;
  margin:64px auto 32px;
}
.subsection-head:first-of-type{margin-top:8px}
.subsection-title{
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.subsection-sub{font-size:.9rem;color:var(--muted);margin-top:7px}


/* ==========================================================================
   9. LOGO GRIDS
   ========================================================================== */
.logo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:14px;
}
.logo-card{
  background:var(--tile);
  border:1px solid rgba(212,175,55,.28);
  border-radius:var(--r);
  height:98px;
  display:flex;align-items:center;justify-content:center;
  padding:18px 16px;
  box-shadow:var(--sh-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.logo-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-md);
  border-color:rgba(212,175,55,.55);
}
.logo-card img,.logo-card svg{
  max-height:42px;max-width:118px;
  width:auto;object-fit:contain;
  opacity:.92;
  transition:opacity .22s ease;
}
.logo-card:hover img,.logo-card:hover svg{opacity:1}

/* Typographic channel marks — used where no safe logo asset exists.
   Each is just a styled wordmark on the existing .logo-card tile. */
.text-logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.text-logo--pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 14px;
  border-radius:8px;
  color:#fff;
  font-size:.92rem;
}

/* Sport variant — slightly denser */
.logo-grid--sport{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.logo-grid--sport .logo-card{height:88px}
.logo-grid--sport .logo-card img,.logo-grid--sport .logo-card svg{max-height:36px;max-width:104px}

/* --- Moving logo rail (sport) --- */
.logo-rail{
  position:relative;
  overflow:hidden;
  padding:6px 0;
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.logo-rail + .logo-rail{margin-top:14px}

/* Spacing sits on the cards (not flex gap) so both duplicated halves
   are exactly equal width and the -50% loop is seamless. */
.logo-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:rail-left 32s linear infinite;
}
.logo-track--reverse{
  animation-name:rail-right;
  animation-duration:37s;
}

.logo-track .logo-card{
  flex:0 0 180px;
  width:180px;
  height:96px;
  margin-right:14px;
}
.logo-track .logo-card img{max-height:44px;max-width:128px}

/* --- Big sport posters --- */
.sport-posters{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:64px;
}

.sport-poster{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:24px;
  aspect-ratio:3/4;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:34px 30px 32px;
  color:#fff;
  box-shadow:var(--sh-md);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease;
}
.sport-poster:hover{transform:translateY(-9px);box-shadow:var(--sh-lg)}

/* The photograph itself */
.sp-photo{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.sport-poster:hover .sp-photo{transform:scale(1.07)}

/* brand tint so the three cards read as one set */
.sport-poster::before{
  content:'';
  position:absolute;inset:0;z-index:-2;
  mix-blend-mode:multiply;
}
.sport-poster--realmadrid::before{background:linear-gradient(165deg,rgba(11,37,69,.30) 0%,rgba(180,150,40,.38) 100%)}
.sport-poster--barcelona::before{background:linear-gradient(165deg,rgba(0,45,98,.38) 0%,rgba(165,0,68,.42) 100%)}
.sport-poster--atletico::before{background:linear-gradient(165deg,rgba(11,37,69,.30) 0%,rgba(180,30,40,.40) 100%)}

/* scrim so the type always reads over the photo */
.sport-poster::after{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(
    180deg,
    rgba(8,26,48,.34) 0%,
    rgba(8,26,48,.06) 26%,
    rgba(8,26,48,.62) 62%,
    rgba(6,20,38,.93) 100%
  );
}

.sp-live{
  position:absolute;top:22px;left:26px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(8px);
  border-radius:999px;
  padding:6px 14px;
  font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}
.sp-live .dot{
  width:7px;height:7px;border-radius:50%;
  background:#FF4D4F;
  box-shadow:0 0 0 3px rgba(255,77,79,.3);
  animation:blink 1.6s ease-in-out infinite;
}

.sp-kicker{
  display:inline-block;
  font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin-bottom:10px;
}
.sp-title{
  font-size:clamp(1.5rem,2.4vw,2.05rem);
  color:#fff;
  letter-spacing:-.03em;
  margin-bottom:10px;
}
.sp-desc{
  font-size:.875rem;
  color:rgba(255,255,255,.82);
  line-height:1.6;
  margin-bottom:18px;
}
.sp-meta{
  display:flex;flex-wrap:wrap;gap:8px;
}
.sp-meta li{
  font-size:.72rem;font-weight:700;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:5px 12px;
  color:#fff;
}

@media(max-width:900px){
  .sport-posters{grid-template-columns:1fr;gap:20px;margin-top:48px}
  .sport-poster{aspect-ratio:4/3;padding:30px 26px}
}
@media(max-width:540px){
  .sport-poster{aspect-ratio:3/4;padding:26px 22px}
}

/* Competition marquee under sport */
.league-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:40px;
}
.league-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 18px;
  font-size:.84rem;font-weight:600;
  color:var(--ink-2);
  box-shadow:var(--sh-sm);
}
.league-chip .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 3px rgba(239,68,68,.16);
  animation:blink 1.8s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}


/* ==========================================================================
   10. POSTER LIBRARY — the big films & series grid
   ========================================================================== */
/* Moving rail: a grid of posters that scrolls continuously */
.poster-rail{
  position:relative;
  overflow:hidden;
  padding:10px 0 6px;
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
/* No flex `gap` here on purpose: the spacing lives on each card as
   margin-right so the two duplicated halves are exactly equal in width
   and the -50% loop is perfectly seamless. */
.poster-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:rail-left 26s linear infinite;
}
.poster-track--reverse{
  animation-name:rail-right;
  animation-duration:29s;
}

@keyframes rail-left{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes rail-right{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}

.poster{
  flex:0 0 206px;
  width:206px;
  margin-right:22px;
}

.rail-hint{
  text-align:center;
  margin-top:14px;
  font-size:.78rem;
  color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.rail-hint .ico{width:14px;height:14px}

.poster-art{
  position:relative;
  aspect-ratio:2/3;
  border-radius:18px;
  overflow:hidden;
  background:var(--bg-tint);
  box-shadow:var(--sh);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.poster-art img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.poster-art::after{
  content:'';position:absolute;inset:0;
  border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(11,37,69,.08);
  pointer-events:none;
}
.poster:hover .poster-art{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.poster:hover .poster-art img{transform:scale(1.08)}

.poster-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  background:rgba(11,37,69,.72);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:.66rem;font-weight:800;
  letter-spacing:.07em;
  padding:5px 10px;
  border-radius:7px;
}
.poster-tag--new{background:linear-gradient(135deg,#1D7FE0,#12C7C0)}

.poster-play{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(11,37,69,.1) 0%,rgba(11,37,69,.62) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.poster:hover .poster-play{opacity:1}
.poster-play span{
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  transform:scale(.82);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.poster:hover .poster-play span{transform:scale(1)}
.poster-play .ico{width:22px;height:22px;margin-left:3px}

.poster-body{padding:15px 3px 0;text-align:center}
.poster-title{
  font-size:.96rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.poster-meta{
  font-size:.775rem;
  color:var(--muted);
  margin-top:4px;
  font-weight:500;
}

.library-note{
  text-align:center;
  margin-top:52px;
  font-size:.92rem;
  color:var(--muted);
}
.library-note a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}


/* ==========================================================================
   11. FEATURE CARDS
   ========================================================================== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
}
.feature-card{
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 30px;
  box-shadow:var(--sh-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.feature-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-md);
  border-color:rgba(212,175,55,.55);
}
.feature-icon{
  width:52px;height:52px;
  border-radius:15px;
  background:var(--grad-soft);
  border:1px solid rgba(14,116,144,.16);
  color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.feature-icon .ico{width:24px;height:24px}
.feature-title{font-size:1.08rem;font-weight:700;margin-bottom:10px}
.feature-desc{font-size:.9rem;color:var(--body);line-height:1.68}


/* ==========================================================================
   12. STEPS
   ========================================================================== */
.step-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:24px;
  position:relative;
}
.step-card{
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:38px 30px;
  text-align:center;
  box-shadow:var(--sh-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.step-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.step-num{
  width:54px;height:54px;
  border-radius:50%;
  background:var(--grad);
  color:#0A2233;
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;
  box-shadow:var(--sh-brand);
}
.step-title{font-size:1.06rem;font-weight:700;margin-bottom:10px}
.step-desc{font-size:.9rem;color:var(--body);line-height:1.68}


/* ==========================================================================
   13. PRICING — dark focus band
   ========================================================================== */
.pricing{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 58% 48% at 50% 0%,rgba(212,175,55,.28) 0%,transparent 62%),
    radial-gradient(ellipse 44% 40% at 88% 96%,rgba(212,175,55,.18) 0%,transparent 64%),
    radial-gradient(ellipse 40% 38% at 8% 90%,rgba(166,124,26,.16) 0%,transparent 66%),
    linear-gradient(175deg,#050406 0%,#14110A 52%,#060508 100%);
  color:rgba(255,255,255,.8);
}
.pricing::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:58px 58px;
  pointer-events:none;
}
.pricing > *{position:relative;z-index:1}

.pricing .section-title{color:#fff}
.pricing .section-sub{color:rgba(255,255,255,.66)}
.pricing .pill--brand{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:#fff;
}

/* Countdown strip */
.countdown{
  display:flex;justify-content:center;
  margin-bottom:44px;
}
.countdown-inner{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  border-radius:16px;
  padding:14px 26px;
  font-size:.92rem;
  color:rgba(255,255,255,.82);
}
.countdown-label{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);font-weight:700;
}
.countdown-label .ico{width:17px;height:17px}
#countdown-timer{
  font-family:var(--font-display);
  font-weight:800;
  color:#fff;
  background:rgba(212,175,55,.18);
  border:1px solid rgba(212,175,55,.32);
  border-radius:8px;
  padding:2px 10px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* Cards */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1080px;
  margin-inline:auto;
  align-items:center;
}

.plan{
  position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(212,175,55,.24);
  border-radius:var(--r-xl);
  padding:38px 32px 34px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.plan:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.6);border-color:rgba(212,175,55,.5)}

.plan-ribbon{
  position:absolute;top:-15px;left:50%;
  transform:translateX(-50%);
  padding:6px 18px;
  border-radius:999px;
  font-size:.71rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.plan-ribbon--save{background:linear-gradient(135deg,#2AA877,#166B4C);border:1px solid rgba(212,175,55,.3)}
.plan-ribbon--best{background:linear-gradient(135deg,#1E8FA8,#0C5670);border:1px solid rgba(212,175,55,.3)}
.plan-ribbon--pop{
  background:linear-gradient(135deg,#141109,#050406);
  color:var(--gold-light);
  box-shadow:0 8px 24px rgba(7,32,47,.55);
  border:1px solid rgba(212,175,55,.5);
}

.plan-name{
  font-family:var(--font-display);
  font-size:1.2rem;font-weight:800;
  color:var(--ink);
  margin-bottom:5px;
}
.plan-sub{font-size:.85rem;color:var(--muted);margin-bottom:22px}
.plan-tagline{
  display:inline-block;
  font-size:.76rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand);
  margin-bottom:18px;
}

.plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.plan-amount{
  font-family:var(--font-display);
  font-size:2.8rem;font-weight:800;
  color:var(--ink);
  letter-spacing:-.04em;
  line-height:1;
}
.plan-period{font-size:.85rem;color:var(--muted);font-weight:500}
.plan-was{font-size:.8rem;color:var(--muted);margin-bottom:4px}
.plan-note{font-size:.82rem;color:var(--body);font-weight:600;margin-bottom:26px}

.plan-features{display:flex;flex-direction:column;gap:11px;margin-bottom:30px}
.plan-features li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:.875rem;
  color:var(--body);
  line-height:1.5;
}
.plan-features .ico{
  width:17px;height:17px;
  margin-top:3px;
  color:var(--ok);
  stroke-width:2.8;
}
.plan-badge-18{
  display:inline-flex;align-items:center;
  font-size:.66rem;font-weight:800;
  background:var(--bg-tint);
  border:1px solid var(--line-2);
  color:var(--muted);
  border-radius:5px;
  padding:1px 6px;
  margin-left:5px;
  letter-spacing:.03em;
}

.plan-foot{
  text-align:center;
  margin-top:13px;
  font-size:.75rem;
  color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.plan-foot .ico{width:13px;height:13px}

/* --- The middle card: visually distinct --- */
.plan--featured{
  background:linear-gradient(165deg,#C9A227 0%,#F1D57C 46%,#B8912A 100%);
  border:1px solid rgba(255,255,255,.58);
  color:#1A2A3A;
  transform:scale(1.055);
  z-index:2;
  box-shadow:0 30px 74px rgba(166,124,26,.48),0 0 0 1px rgba(255,255,255,.3) inset;
}
.plan--featured:hover{transform:scale(1.055) translateY(-6px);box-shadow:0 38px 86px rgba(166,124,26,.6)}
.plan--featured .plan-name{color:#0A2233}
.plan--featured .plan-sub{color:rgba(10,34,51,.64)}
.plan--featured .plan-tagline{color:#6B4E06}
.plan--featured .plan-amount{color:#0A2233}
.plan--featured .plan-period{color:rgba(10,34,51,.66)}
.plan--featured .plan-note{color:rgba(10,34,51,.82)}
.plan--featured .plan-features li{color:#1A2A3A}
.plan--featured .plan-features .ico{color:#0A5C46}
.plan--featured .plan-badge-18{
  background:rgba(10,34,51,.1);
  border-color:rgba(10,34,51,.22);
  color:rgba(10,34,51,.72);
}
.plan--featured .plan-foot{color:rgba(10,34,51,.72)}
.plan--featured .btn--white{background:#0A0A0B;color:var(--gold-light);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.plan--featured .btn--white:hover{background:#17140D;color:#F7E6AE}

/* Trust row below the plans */
.pay-row{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:12px;
  margin-top:52px;
}
/* Real payment-brand marks need their native white background to read
   correctly — Visa blue, the Mastercard circles, PayPal blue, Bizum teal
   are all drawn for a light backdrop. */
.pay-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:#FBF7EC;
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  padding:0 18px;
  height:42px;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  transition:transform .2s ease;
}
.pay-chip:hover{transform:translateY(-2px)}
.pay-chip img{height:19px;width:auto;display:block}

/* The one non-logo chip ("secure payment") keeps the translucent style */
.pay-chip--text{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  padding:9px 16px;
  height:auto;
  font-size:.8rem;font-weight:600;
  color:rgba(255,255,255,.86);
  box-shadow:none;
}
.pay-chip--text:hover{transform:none}
.pay-chip--text .ico{width:15px;height:15px;color:var(--accent)}


/* ==========================================================================
   6b. SPAIN COMPETITIONS BANNER
   A dedicated strip right under the hero, coloured with the Spanish flag's
   red-gold-red so the "this is a Spain site" read is immediate, not just
   implied by the copy.
   ========================================================================== */
.spain-banner{
  position:relative;
  overflow:hidden;
  padding:0;
  background:linear-gradient(165deg,#14110A 0%,#0B0904 55%,#050406 100%);
  border-top:3px solid #C60B1E;
  border-bottom:3px solid #C60B1E;
}
.spain-banner::before{
  content:'';
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 50% 60% at 90% 0%,rgba(198,11,30,.22) 0%,transparent 62%),
    radial-gradient(ellipse 46% 56% at 6% 100%,rgba(212,175,55,.24) 0%,transparent 64%);
}
.spain-banner-inner{
  position:relative;z-index:1;
  padding:44px 0 40px;
}
.spain-banner-head{
  display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.spain-flag-chip{
  display:inline-flex;flex-direction:column;
  width:30px;height:20px;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  flex-shrink:0;
}
.spain-flag-chip span{display:block;flex:1}
.spain-flag-chip span:nth-child(1),.spain-flag-chip span:nth-child(3){background:#C60B1E;flex:1}
.spain-flag-chip span:nth-child(2){background:#FFC400;flex:2}
.spain-banner-title{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:800;
  color:#fff;
  letter-spacing:-.02em;
}
.spain-banner-title .accent{color:var(--gold-light)}
.spain-banner-sub{
  font-size:.92rem;
  color:rgba(255,255,255,.62);
  margin-top:4px;
}

.competition-row{
  display:flex;flex-wrap:wrap;gap:14px;
}
.competition-card{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(212,175,55,.24);
  border-radius:14px;
  padding:16px 20px;
  flex:1 1 220px;
  min-width:220px;
  transition:border-color .22s ease,transform .22s ease,background .22s ease;
}
.competition-card:hover{
  border-color:rgba(212,175,55,.55);
  background:rgba(212,175,55,.06);
  transform:translateY(-3px);
}
/* Real competition logos sit on a light tile so their native colours
   (drawn for a white background) stay correct on the dark banner. */
.competition-badge{
  width:56px;height:56px;
  border-radius:50%;
  flex-shrink:0;
  background:#FBF7EC;
  padding:9px;
  box-sizing:border-box;
  object-fit:contain;
  box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.competition-card:hover .competition-badge{transform:scale(1.08) rotate(-3deg)}
.competition-name{font-size:.92rem;font-weight:700;color:#fff}
.competition-meta{font-size:.76rem;color:rgba(255,255,255,.56);margin-top:2px}

@media(max-width:720px){
  .spain-banner-inner{padding:36px 0 32px}
  .competition-card{flex:1 1 100%;min-width:0}
}


/* ==========================================================================
   13b. FAMILY PACKAGE
   ========================================================================== */
.family-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  border-radius:28px;
  padding:46px 50px;
  color:#14110A;
  background:linear-gradient(138deg,#B8912A 0%,#EBC964 26%,#F7E6AE 48%,#D4AF37 72%,#A67C1A 100%);
  box-shadow:0 26px 64px rgba(166,124,26,.42);
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:48px;
  align-items:center;
}
.family-card::before{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.22) 0 2px,transparent 2px 26px);
}
.family-card::after{
  content:'';
  position:absolute;z-index:-1;
  width:460px;height:460px;border-radius:50%;
  right:-140px;top:-190px;
  background:radial-gradient(circle,rgba(255,255,255,.42) 0%,transparent 66%);
}

.family-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#0A0806;
  color:var(--gold-light);
  border:1px solid rgba(20,17,10,.5);
  border-radius:999px;
  padding:7px 16px;
  font-size:.72rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:18px;
  box-shadow:0 8px 22px rgba(20,17,10,.4);
}
.family-badge .ico{width:14px;height:14px}

.family-name{
  font-size:clamp(1.7rem,3vw,2.3rem);
  color:#0A0806;
  letter-spacing:-.03em;
  margin-bottom:12px;
}
.family-desc{
  font-size:.97rem;
  color:rgba(16,13,6,.82);
  line-height:1.7;
  margin-bottom:24px;
  max-width:440px;
}
.family-price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.family-amount{
  font-family:var(--font-display);
  font-size:clamp(2.8rem,5vw,3.6rem);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
  color:#0A0806;
}
.family-period{font-size:.95rem;color:rgba(16,13,6,.7);font-weight:500}
.family-note{font-size:.85rem;color:rgba(16,13,6,.72);margin-bottom:28px}

.family-screens{
  display:flex;gap:10px;
  margin-bottom:26px;
}
.family-screen{
  width:54px;height:40px;
  border-radius:8px;
  border:2px solid rgba(20,17,10,.45);
  background:rgba(20,17,10,.18);
  display:flex;align-items:center;justify-content:center;
  color:#0A0806;
}
.family-screen .ico{width:15px;height:15px}
.family-screen:nth-child(2){animation-delay:.4s}
.family-screen:nth-child(3){animation-delay:.8s}
.family-screen:nth-child(4){animation-delay:1.2s}
.family-screen{animation:screen-glow 3.2s ease-in-out infinite}
@keyframes screen-glow{
  0%,100%{background:rgba(20,17,10,.16);border-color:rgba(20,17,10,.4)}
  50%{background:rgba(20,17,10,.34);border-color:rgba(20,17,10,.7)}
}

.family-panel{
  background:rgba(9,8,5,.9);
  border:1px solid rgba(20,17,10,.5);
  box-shadow:0 14px 34px rgba(20,17,10,.34);
  border-radius:20px;
  padding:30px 28px;
}
.family-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 18px;
  margin-bottom:26px;
}
.family-features li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:.86rem;
  color:rgba(248,243,231,.94);
  line-height:1.45;
}
.family-features .ico{
  width:16px;height:16px;
  margin-top:2px;
  color:var(--gold-light);
  stroke-width:2.8;
}
.family-foot{
  text-align:center;
  margin-top:13px;
  font-size:.76rem;
  color:rgba(248,243,231,.7);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.family-foot .ico{width:13px;height:13px}

@media(max-width:940px){
  .family-card{grid-template-columns:1fr;gap:32px;padding:36px 28px}
  .family-desc{max-width:none}
}
@media(max-width:540px){
  .family-card{padding:30px 22px;border-radius:22px}
  .family-features{grid-template-columns:1fr}
  .family-panel{padding:24px 20px}
  .family-screen{width:46px;height:34px}
}


/* ==========================================================================
   14. DEVICES
   ========================================================================== */
.device-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(156px,1fr));
  gap:14px;
}
.device-card{
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 16px 20px;
  text-align:center;
  box-shadow:var(--sh-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.device-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-md);
  border-color:rgba(212,175,55,.55);
}
.device-img{
  height:50px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  background:var(--tile);
  border-radius:10px;
  padding:6px 10px;
}
.device-img img{max-height:48px;max-width:74px;width:auto;object-fit:contain}
.device-name{font-size:.87rem;font-weight:700;color:var(--ink);margin-bottom:3px}
.device-sub{font-size:.74rem;color:var(--muted)}


/* ==========================================================================
   15. REVIEWS
   ========================================================================== */
.rating-summary{text-align:center;margin-bottom:46px}
.rating-score{
  font-family:var(--font-display);
  font-size:3.2rem;font-weight:800;
  color:var(--ink);
  letter-spacing:-.04em;
  line-height:1;
}
.rating-stars{
  display:flex;justify-content:center;gap:4px;
  color:var(--accent);
  margin:12px 0 8px;
}
.rating-stars .ico{width:22px;height:22px}
.rating-count{font-size:.88rem;color:var(--muted)}

.marquee{position:relative;overflow:hidden;padding:6px 0}
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--band-fade,var(--bg)) 10%,transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--band-fade,var(--bg)) 10%,transparent)}

.marquee-track{
  display:flex;gap:18px;width:max-content;
  animation:scroll-x 68s linear infinite;
}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.review-card{
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 26px;
  width:340px;
  flex-shrink:0;
  box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;
}
.review-stars{display:flex;gap:3px;color:var(--accent);margin-bottom:14px}
.review-stars .ico{width:15px;height:15px}
.review-text{
  font-size:.9rem;color:var(--body);line-height:1.68;
  margin-bottom:20px;flex:1;
}
.review-author{display:flex;align-items:center;gap:12px}
.review-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--grad);
  color:#0A2233;
  font-family:var(--font-display);
  font-size:.86rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.review-name{font-size:.88rem;font-weight:700;color:var(--ink)}
.review-city{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.review-city .ico{width:12px;height:12px;color:var(--ok)}


/* ==========================================================================
   16. FAQ
   ========================================================================== */
.faq-list{
  max-width:820px;
  margin-inline:auto;
  display:flex;flex-direction:column;gap:12px;
}
.faq-item{
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:border-color .22s ease,box-shadow .22s ease;
}
.faq-item.is-open{border-color:rgba(212,175,55,.55);box-shadow:var(--sh)}

.faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 26px;
  text-align:left;
  font-family:var(--font-display);
  font-size:1rem;font-weight:700;
  color:var(--ink);
  transition:color .2s ease;
}
.faq-q:hover{color:var(--brand)}
.faq-icon{
  width:30px;height:30px;flex-shrink:0;
  border-radius:9px;
  background:var(--grad-soft);
  color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),background .22s ease,color .22s ease;
}
.faq-icon .ico{width:16px;height:16px;stroke-width:2.4}
.faq-item.is-open .faq-icon{transform:rotate(135deg);background:var(--grad);color:#0A2233}

.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .34s cubic-bezier(.4,0,.2,1);
}
.faq-item.is-open .faq-a{max-height:460px}
.faq-a-inner{
  padding:0 26px 24px;
  font-size:.92rem;
  color:var(--body);
  line-height:1.75;
}


/* ==========================================================================
   17. GUIDES
   ========================================================================== */
.guide-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(278px,1fr));
  gap:20px;
}
.guide-card{
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 26px;
  box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.guide-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-md);
  border-color:rgba(212,175,55,.55);
}
.guide-tag{
  align-self:flex-start;
  font-size:.69rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-700);
  background:var(--grad-soft);
  border:1px solid rgba(14,116,144,.18);
  border-radius:999px;
  padding:4px 12px;
  margin-bottom:16px;
}
.guide-title{font-size:1rem;font-weight:700;line-height:1.42;margin-bottom:10px}
.guide-desc{font-size:.865rem;color:var(--body);line-height:1.65;margin-bottom:20px;flex:1}
.guide-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.guide-time{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.guide-time .ico{width:13px;height:13px}
.guide-link{
  font-size:.83rem;font-weight:700;color:var(--brand);
  display:flex;align-items:center;gap:6px;
}
.guide-link .ico{width:15px;height:15px;transition:transform .22s ease}
.guide-card:hover .guide-link .ico{transform:translateX(4px)}


/* ==========================================================================
   18. CLOSING CTA
   ========================================================================== */
.cta{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 48% 72% at 86% 4%,rgba(212,175,55,.34) 0%,transparent 62%),
    radial-gradient(ellipse 44% 66% at 8% 98%,rgba(166,124,26,.24) 0%,transparent 62%),
    radial-gradient(ellipse 60% 90% at 50% 0%,rgba(212,175,55,.08) 0%,transparent 60%),
    linear-gradient(128deg,#050406 0%,#15110A 52%,#070609 100%);
  color:#fff;
  text-align:center;
}
.cta h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.7rem);margin-bottom:18px}
.cta p{
  font-size:1.05rem;
  color:rgba(255,255,255,.86);
  max-width:600px;
  margin:0 auto 38px;
}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.cta-badges{
  display:flex;gap:12px 26px;justify-content:center;flex-wrap:wrap;
  font-size:.86rem;color:rgba(255,255,255,.9);font-weight:500;
}
.cta-badges li{display:flex;align-items:center;gap:8px}
.cta-badges .ico{width:17px;height:17px;color:#fff;stroke-width:2.6}
.cta-contact{
  margin-top:30px;
  font-size:.9rem;
  color:rgba(255,255,255,.8);
}
.cta-contact a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 44% 60% at 88% 0%,rgba(212,175,55,.18) 0%,transparent 64%),
    radial-gradient(ellipse 40% 56% at 6% 100%,rgba(166,124,26,.14) 0%,transparent 64%),
    linear-gradient(165deg,#050406 0%,#0E0C08 100%);
  color:rgba(255,255,255,.66);
  padding:76px 0 34px;
}
.footer > .container{position:relative;z-index:1}
.footer-top{
  display:grid;
  grid-template-columns:2.1fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:54px;
}
.footer-brand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.footer-brand img{width:48px;height:48px;border-radius:14px;object-fit:contain}
.footer-word{
  font-family:var(--font-display);
  font-size:1.7rem;font-weight:800;color:#fff;
  letter-spacing:-.04em;line-height:1;
}
.footer-word .tv{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.footer-desc{
  font-size:.875rem;
  line-height:1.75;
  max-width:360px;
  margin-bottom:24px;
}
.footer-pay{display:flex;gap:8px;flex-wrap:wrap}
.footer-pay-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:#FBF7EC;
  border:1px solid rgba(0,0,0,.06);
  border-radius:8px;
  padding:8px 13px;
}
.footer-pay-chip img{height:14px;width:auto;display:block}
.footer-col h3{
  font-family:var(--font-display);
  font-size:.8rem;font-weight:800;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.11em;
  margin-bottom:18px;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px}
.footer-col a{
  font-size:.86rem;
  color:rgba(255,255,255,.62);
  transition:color .18s ease;
  display:inline-flex;align-items:center;gap:8px;
}
.footer-col a:hover{color:#fff}
.footer-col .ico{width:14px;height:14px;color:var(--brand-400)}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
  font-size:.8rem;
}
.footer-legal{display:flex;gap:22px;flex-wrap:wrap}
.footer-legal a:hover{color:#fff}
.footer-disclaimer{
  margin-top:24px;
  font-size:.74rem;
  line-height:1.75;
  color:rgba(255,255,255,.36);
}


/* ==========================================================================
   20. WHATSAPP FLOAT
   ========================================================================== */
.wa-dock{
  position:fixed;bottom:26px;right:26px;z-index:900;
  display:flex;align-items:center;gap:12px;
  flex-direction:row-reverse;
}

.wa-float{
  position:relative;
  width:66px;height:66px;
  border-radius:50%;
  background:linear-gradient(145deg,#3BE07C 0%,#25D366 48%,#12A150 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(18,161,80,.45),0 2px 6px rgba(0,0,0,.16);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s ease;
  animation:wa-bob 3.4s ease-in-out infinite;
}
.wa-float svg{
  width:34px;height:34px;fill:#fff;
  position:relative;z-index:2;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3);
}
.wa-float:hover{
  transform:scale(1.09) rotate(-4deg);
  box-shadow:0 16px 42px rgba(18,161,80,.6),0 3px 10px rgba(0,0,0,.2);
  animation-play-state:paused;
}
.wa-float:hover svg{transform:scale(1.08) rotate(4deg)}
.wa-float:active{transform:scale(.96)}

/* two expanding halo rings */
.wa-float::before,
.wa-float::after{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:wa-ripple 2.6s cubic-bezier(.2,.6,.3,1) infinite;
  pointer-events:none;
}
.wa-float::after{animation-delay:1.3s}

/* unread-style pulse dot */
.wa-badge{
  position:absolute;top:2px;right:2px;z-index:3;
  width:16px;height:16px;
  border-radius:50%;
  background:#FF4D4F;
  border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  animation:wa-pop 2.6s ease-in-out infinite;
}

/* slide-in invitation bubble */
.wa-tip{
  background:#141109;
  border:1px solid rgba(212,175,55,.35);
  color:var(--ink);
  font-size:.85rem;font-weight:600;
  padding:11px 17px;
  border-radius:14px 14px 4px 14px;
  box-shadow:0 10px 30px rgba(11,37,69,.16);
  white-space:nowrap;
  opacity:0;
  transform:translateX(14px) scale(.94);
  transform-origin:right center;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.9,.3,1.2);
  pointer-events:none;
}
.wa-tip b{display:block;font-size:.74rem;font-weight:600;color:var(--muted);margin-top:2px}
.wa-dock:hover .wa-tip,
.wa-dock:focus-within .wa-tip{opacity:1;transform:translateX(0) scale(1)}

@keyframes wa-ripple{
  0%{transform:scale(1);opacity:.75}
  100%{transform:scale(1.75);opacity:0}
}
@keyframes wa-bob{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}
@keyframes wa-pop{
  0%,72%,100%{transform:scale(1);opacity:1}
  80%{transform:scale(1.35);opacity:.85}
  88%{transform:scale(1);opacity:1}
}

/* WhatsApp button in the header */
.btn--wa-nav{
  background:linear-gradient(135deg,#3BE07C,#12A150);
  box-shadow:0 6px 18px rgba(18,161,80,.32);
}
.btn--wa-nav:hover{
  background:linear-gradient(135deg,#34D673,#0E8F46);
  box-shadow:0 10px 26px rgba(18,161,80,.45);
}


/* ==========================================================================
   21. LEGAL PAGES
   ========================================================================== */
.legal-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 56% 76% at 50% 0%,rgba(212,175,55,.30) 0%,transparent 62%),
    radial-gradient(ellipse 40% 60% at 92% 96%,rgba(212,175,55,.18) 0%,transparent 64%),
    radial-gradient(ellipse 40% 58% at 4% 92%,rgba(166,124,26,.16) 0%,transparent 64%),
    linear-gradient(170deg,#050406 0%,#14110A 100%);
  color:rgba(255,255,255,.78);
  padding:72px 0 68px;
  text-align:center;
}
.legal-hero > .container{position:relative;z-index:1}
.legal-hero .pill{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  margin-bottom:20px;
}
.legal-hero h1{
  color:#fff;
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:14px;
}
.legal-hero p{max-width:620px;margin-inline:auto;font-size:1rem}

.legal-wrap{
  display:grid;
  grid-template-columns:268px 1fr;
  gap:52px;
  align-items:start;
  padding:64px 0 88px;
}
.legal-toc{
  position:sticky;
  top:calc(var(--nav-h) + 24px);
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 22px;
  box-shadow:var(--sh-sm);
}
.legal-toc h2{
  font-size:.78rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);
  margin-bottom:16px;
}
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:700;
  color:var(--brand);
  margin-bottom:22px;
  transition:gap .2s ease;
}
.back-link .ico{width:15px;height:15px;transform:rotate(180deg)}
.back-link:hover{gap:12px}
.legal-toc ol{
  counter-reset:toc;
  display:flex;flex-direction:column;gap:3px;
}
.legal-toc ol li{counter-increment:toc}
.legal-toc ol a::before{
  content:counter(toc,decimal-leading-zero);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--muted);
  margin-right:10px;
  font-size:.76rem;
}
.legal-toc ul{display:flex;flex-direction:column;gap:3px}
.legal-toc a{
  display:block;
  font-size:.85rem;
  color:var(--body);
  padding:8px 12px;
  border-radius:9px;
  transition:background .18s ease,color .18s ease;
}
.legal-toc a:hover{background:var(--bg-tint);color:var(--brand)}

.legal-content{
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:44px 46px;
  box-shadow:var(--sh-sm);
}
.legal-date{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--grad-soft);
  border:1px solid rgba(14,116,144,.18);
  border-radius:999px;
  padding:8px 18px;
  font-size:.82rem;font-weight:600;
  color:var(--brand-700);
  margin-bottom:34px;
}
.legal-date .ico{width:15px;height:15px}

.legal-section{scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal-section + .legal-section{
  margin-top:40px;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.legal-section h2{
  display:flex;align-items:center;gap:14px;
  font-size:1.3rem;
  margin-bottom:18px;
}
.sec-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:11px;
  background:var(--grad);
  color:#0A2233;
  font-size:.82rem;font-weight:800;
  flex-shrink:0;
}
.legal-section h3{
  font-size:1rem;
  margin:26px 0 10px;
}
.legal-section p{margin-bottom:14px;font-size:.94rem;line-height:1.78}
.legal-section ul{
  display:flex;flex-direction:column;gap:10px;
  margin:0 0 18px;
}
.legal-section ul li{
  position:relative;
  padding-left:26px;
  font-size:.94rem;
  line-height:1.72;
}
.legal-section ul li::before{
  content:'';
  position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--brand);
}
.legal-section ol{
  counter-reset:step;
  display:flex;flex-direction:column;gap:11px;
  margin:0 0 18px;
}
.legal-section ol li{
  counter-increment:step;
  position:relative;
  padding-left:40px;
  font-size:.94rem;
  line-height:1.72;
}
.legal-section ol li::before{
  content:counter(step);
  position:absolute;left:0;top:.08em;
  width:26px;height:26px;
  border-radius:8px;
  background:var(--grad);
  color:#0A2233;
  font-size:.72rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.legal-section a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal-callout{
  background:var(--grad-soft);
  border:1px solid rgba(14,116,144,.18);
  border-left:4px solid var(--brand);
  border-radius:var(--r);
  padding:20px 24px;
  margin:22px 0;
  font-size:.92rem;
}
.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 22px;
  font-size:.88rem;
}
.legal-table th,.legal-table td{
  text-align:left;
  padding:13px 16px;
  border:1px solid var(--line);
}
.legal-table th{
  background:var(--bg-tint);
  color:var(--ink);
  font-weight:700;
}

/* Highlighted note boxes */
.info-box{
  display:flex;flex-direction:column;gap:7px;
  background:var(--grad-soft);
  border:1px solid rgba(14,116,144,.18);
  border-left:4px solid var(--brand);
  border-radius:var(--r);
  padding:20px 24px;
  margin:22px 0;
}
.info-box strong{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:.95rem;
  color:var(--ink);
}
.info-box strong .ico{width:18px;height:18px;color:var(--brand);flex-shrink:0}
.info-box p{margin:0;font-size:.9rem;line-height:1.72}

.info-box--ok{
  background:rgba(16,185,129,.07);
  border-color:rgba(16,185,129,.22);
  border-left-color:var(--ok);
}
.info-box--ok strong .ico{color:var(--ok-600)}

.info-box--warn{
  background:rgba(212,175,55,.08);
  border-color:rgba(212,175,55,.24);
  border-left-color:var(--accent);
}
.info-box--warn strong .ico{color:var(--accent-600)}

/* Contact cards inside legal pages */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin:22px 0;
}
.contact-card{
  display:flex;flex-direction:column;gap:5px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px 20px 18px;
  transition:border-color .2s ease,transform .2s ease;
}
.contact-card:hover{border-color:rgba(212,175,55,.55);transform:translateY(-3px)}
.contact-card .icon{
  width:38px;height:38px;
  border-radius:11px;
  background:var(--grad-soft);
  border:1px solid rgba(14,116,144,.16);
  color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.contact-card .icon .ico{width:18px;height:18px}
.contact-card strong{font-size:.8rem;color:var(--ink);font-weight:700}
.contact-card a,.contact-card span{font-size:.85rem;color:var(--body);word-break:break-word}
.contact-card a{color:var(--brand);font-weight:600;text-decoration:none}
.contact-card a:hover{text-decoration:underline}


/* ==========================================================================
   21b. BLOG & ARTICLES
   ========================================================================== */
.post-meta{
  display:flex;align-items:center;justify-content:center;
  gap:10px 18px;flex-wrap:wrap;
  margin-top:20px;
  font-size:.83rem;
  color:rgba(255,255,255,.72);
}
.post-meta span{display:inline-flex;align-items:center;gap:7px}
.post-meta .ico{width:15px;height:15px}
.post-meta .sep{opacity:.4}

/* Short answer box at the top of every article — the bit an AI
   assistant or a featured snippet is most likely to lift. */
.answer-box{
  background:var(--grad-soft);
  border:1px solid rgba(14,116,144,.22);
  border-left:4px solid var(--brand);
  border-radius:var(--r);
  padding:22px 26px;
  margin-bottom:34px;
}
.answer-box h2{
  display:flex;align-items:center;gap:10px;
  font-size:.8rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--brand-700);
  margin-bottom:10px;
}
.answer-box h2 .ico{width:16px;height:16px}
.answer-box p{font-size:1rem;line-height:1.7;color:var(--ink-2);margin:0}

/* Inline conversion block inside an article */
.prose-cta{
  position:relative;overflow:hidden;
  border:1px solid rgba(212,175,55,.35);
  border-radius:20px;
  background:linear-gradient(132deg,#0A0806 0%,#1A1509 46%,#0B0A06 100%);
  color:#fff;
  padding:32px 34px;
  margin:38px 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
}
.prose-cta::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.06) 0 2px,transparent 2px 28px);
  pointer-events:none;
}
.prose-cta > *{position:relative;z-index:1}
.prose-cta h3{color:#fff;font-size:1.2rem;margin-bottom:7px}
.prose-cta p{color:rgba(255,255,255,.84);font-size:.9rem;margin:0;max-width:430px}

/* Related posts */
.related{
  margin-top:56px;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.related h2{font-size:1.15rem;margin-bottom:20px}
.related-list{display:grid;gap:12px}
.related-list a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px 20px;
  font-size:.92rem;font-weight:600;
  color:var(--ink);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.related-list a:hover{
  border-color:rgba(212,175,55,.55);
  background:rgba(212,175,55,.10);
  transform:translateX(4px);
}
.related-list .ico{width:16px;height:16px;color:var(--brand);flex-shrink:0}

/* Blog index cards (anchor version of .guide-card) */
a.guide-card{color:inherit}
a.guide-card:hover .guide-title{color:var(--brand)}
.guide-title{transition:color .2s ease}

.blog-lead{
  max-width:760px;
  margin:0 auto 20px;
  text-align:center;
  font-size:1.03rem;
  color:var(--body);
}

/* FAQ page category blocks */
.faq-cat{margin-top:52px}
.faq-cat:first-of-type{margin-top:0}
.faq-cat > h2{
  display:flex;align-items:center;gap:12px;
  font-size:1.2rem;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.faq-cat > h2 .ico{
  width:34px;height:34px;padding:8px;
  border-radius:10px;
  background:var(--grad-soft);
  color:var(--brand);
  flex-shrink:0;
}
.faq-jump{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  margin-bottom:48px;
}
.faq-jump a{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 18px;
  font-size:.85rem;font-weight:600;
  color:var(--ink-2);
  box-shadow:var(--sh-sm);
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.faq-jump a:hover{border-color:rgba(212,175,55,.6);color:var(--brand);transform:translateY(-2px)}
.faq-jump .ico{width:15px;height:15px;color:var(--brand)}

@media(max-width:720px){
  .prose-cta{padding:26px 22px;flex-direction:column;align-items:flex-start}
  .prose-cta .btn{width:100%}
}


/* ==========================================================================
   22. ACCESSIBILITY, MOTION & RESPONSIVE
   ========================================================================== */
/* ---------- Cursor-reactive motion ----------
   main.js writes --mx / --my (percentages, per card) and
   --px / --py (-1…1, page-wide pointer offset). All decorative. */
.feature-card,
.guide-card,
.step-card,
.device-card,
.logo-card,
.plan{position:relative}

.feature-card::after,
.guide-card::after,
.step-card::after,
.device-card::after,
.logo-card::after{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(
    220px circle at var(--mx,50%) var(--my,50%),
    rgba(14,116,144,.15) 0%,
    rgba(18,165,148,.08) 40%,
    transparent 68%
  );
}
.feature-card:hover::after,
.guide-card:hover::after,
.step-card:hover::after,
.device-card:hover::after,
.logo-card:hover::after{opacity:1}

/* Pointer parallax on the hero artwork */
.mosaic{
  transform:translate3d(calc(var(--px,0) * 9px),calc(var(--py,0) * 9px),0);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.float-chip{
  transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px),0);
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}

@media(hover:none){
  .mosaic,.float-chip{transform:none}
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--grad);color:#0A0A0B;
  padding:12px 22px;border-radius:0 0 10px 0;
  font-weight:700;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* ---------- Breakpoints ---------- */
@media(max-width:1180px){
  .hero-layout{gap:48px}
}

/* The nav has eight links; collapse to the hamburger before they can
   overflow or wrap onto a second line. */
@media(max-width:1240px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-actions .btn--wa-nav span,
  .nav-actions .btn--wa-nav{font-size:.83rem}
}

@media(max-width:1040px){
  :root{--pad-section:76px}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .legal-wrap{grid-template-columns:1fr;gap:32px}
  .legal-toc{position:static}
}

@media(max-width:940px){
  .hero-layout{grid-template-columns:1fr;padding:52px 28px 72px;gap:52px}
  .hero-art{order:-1}
  .mosaic-wrap{max-width:400px;margin-inline:auto}
  .hero-lead{margin-inline:auto}
  .plan-grid{grid-template-columns:1fr;max-width:440px;gap:30px}
  .plan--featured{transform:none;order:-1}
  .plan--featured:hover{transform:translateY(-6px)}
  .counter-grid{grid-template-columns:repeat(2,1fr);gap:34px}
}

@media(max-width:860px){
  .poster{flex:0 0 176px;width:176px;margin-right:18px}
  .legal-content{padding:34px 26px}
}

@media(max-width:720px){
  :root{--nav-h:76px;--pad-section:64px}
  .container,.nav-inner,.hero-layout{padding-inline:20px}
  .brand-mark{width:48px;height:48px;border-radius:14px}
  .brand-word{font-size:1.7rem}
  .brand-tag{font-size:.58rem;letter-spacing:.28em}
  .hero h1{font-size:2.2rem}
  .hero-stats{gap:28px}
  .hero-stat dt{font-size:1.6rem}
  .float-chip{font-size:.75rem;padding:8px 14px 8px 8px}
  .float-chip--tl{left:-6px}
  .float-chip--br{right:-6px}
  .review-card{width:290px}
  .footer-top{grid-template-columns:1fr;gap:36px}
  .footer-bottom{justify-content:center;text-align:center}
  .legal-section h2{font-size:1.15rem;gap:11px}
}

@media(max-width:540px){
  .poster{flex:0 0 146px;width:146px;margin-right:14px}
  .poster-art{border-radius:14px}
  .brand-tag{display:none}
  .brand-word{font-size:1.55rem}
  .logo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .logo-card{height:80px}
  .device-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
  .hero-ctas .btn{width:100%}
  .cta-btns .btn{width:100%}
  .wa-float{width:56px;height:56px;bottom:18px;right:18px}
  .plan{padding:32px 24px 28px}
  .legal-content{padding:28px 20px}
  .legal-section h2{flex-direction:row;align-items:flex-start}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .marquee-track,.poster-track,.logo-track{animation:none;transform:none}
  .poster-rail,.logo-rail{overflow-x:auto}
  
  .hero::before{display:none}
  .mosaic,.float-chip,.sp-photo{transform:none!important}
  .wa-float{animation:none}
  .wa-float::before,.wa-float::after,.wa-badge{display:none}
}

/* ---------- Print ---------- */
@media print{
  .nav,.wa-float,.cta,.marquee,.hero-art,.nav-mobile{display:none!important}
  body{background:#fff;color:#000}
  .legal-content,.legal-toc{border:none;box-shadow:none;padding:0}
  a{text-decoration:underline}
}