/* ===========================================================================
   Crystal IPTV — stylesheet (v5, "premium dark" refresh)
   Design language: deep navy glass, crystal cyan, aurora light behind the fold
   and a faint film grain so the flat areas are not dead flat. Dark-first, since
   IPTV audiences browse at night on TVs and phones.
   Rules that survived the redesign: every interactive target >= 44px on mobile,
   layout works with zero JS, and nothing renders from a third-party host.
   =========================================================================== */

/* ---------- type ----------
   Two self-hosted variable fonts, one request each, both preloaded in header.php.
   Sora carries the display sizes (it has more character at 3rem+), Inter does the
   reading. font-synthesis is off so a missing weight never gets faked and smeared. */
@font-face{
  font-family:'Inter var';
  src:url('/fonts/inter-var.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Sora var';
  src:url('/fonts/sora-var.woff2') format('woff2');
  font-weight:600 800;font-style:normal;font-display:swap;
}
/* ⚠️ Outfit here is SUBSET TO THE ELEVEN LETTERS OF "CrystalIPTV" (C I P T V a l r s t y),
   which is why it is 3 KB instead of 32 KB. It is for the brand lockup and nothing else —
   put it on a heading and every other character silently falls back to Sora. If Outfit is
   ever wanted more widely, re-pull the full latin subset from the Google Fonts CSS2 API
   and drop the &text= parameter. font-display:block so the wordmark never flashes in the
   wrong face; the file is preloaded in header.php and tiny, so there is nothing to see. */
@font-face{
  font-family:'Outfit brand';
  src:url('/fonts/outfit-brand.woff2') format('woff2');
  font-weight:600 800;font-style:normal;font-display:block;
}

:root{
  --bg:#04070E; --surface:#0A1220; --surface2:#0E1B2C; --surface3:#132538;
  --primary:#22D3EE; --primary2:#38BDF8; --ice:#A5F3FC; --deep:#0891B2;
  --text:#E9F5FF; --text2:#C7DEEF; --muted:#8CA5BE;
  --line:rgba(120,200,230,.13); --line2:rgba(120,200,230,.24);
  --ok:#34D399; --warn:#FBBF24;

  --r-sm:12px; --r:18px; --r-lg:26px;
  --sans:'Inter var',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:'Sora var','Inter var',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --brand:'Outfit brand','Sora var','Inter var',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-lg:0 34px 90px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(34,211,238,.20), 0 18px 60px rgba(34,211,238,.13);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--text);background:var(--bg);
  font:400 16.5px/1.68 var(--sans);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;position:relative;overflow-x:clip;
}

/* Aurora: two soft light sources sitting behind everything. Fixed, so it does not
   repaint on scroll, and blurred rather than a hard radial so it reads as light. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(65% 48% at 50% -10%, rgba(34,211,238,.26), transparent 72%),
    radial-gradient(48% 40% at 94% 10%, rgba(56,189,248,.17), transparent 74%),
    radial-gradient(52% 42% at 2% 38%, rgba(8,145,178,.16), transparent 72%),
    linear-gradient(180deg,#071120 0%,var(--bg) 55%);
}
/* Film grain. An inline SVG turbulence, so it costs zero requests. Low opacity on
   purpose: it should stop the large flat panels looking like plastic, not be seen. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- decorative band behind the top of every page ----------
   A gradient wash plus a scattered field of IPTV icons (TV, play, film, football,
   satellite, signal, remote). Every icon is an inline SVG data URI, so the whole
   thing is zero extra requests. It scrolls with the page rather than being fixed,
   which is what makes it read as part of the header instead of wallpaper. */
.page-decor{
  position:absolute;top:0;left:0;right:0;height:min(880px,96vh);
  z-index:0;pointer-events:none;overflow:hidden;
  /* gradient wash first, then the icon field on top of it */
  background-image:
    /* TV */            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3'/%3E%3C/svg%3E"),
    /* play */          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.2l6 3.8-6 3.8z'/%3E%3C/svg%3E"),
    /* film */          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5F3FC' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M7 4v16M17 4v16M2 12h20'/%3E%3C/svg%3E"),
    /* football */      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.6l4 2.9-1.5 4.7h-5L8 9.5z'/%3E%3C/svg%3E"),
    /* satellite */     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20A12 12 0 0 1 16 8'/%3E%3Ccircle cx='6' cy='18' r='2.2'/%3E%3Cpath d='M14.5 3.5l6 6'/%3E%3C/svg%3E"),
    /* signal */        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5F3FC' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9a12 12 0 0 1 16 0M7.5 12.6a7 7 0 0 1 9 0'/%3E%3Ccircle cx='12' cy='17' r='1.3'/%3E%3C/svg%3E"),
    /* remote */        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='20' rx='3'/%3E%3Ccircle cx='12' cy='6.5' r='1'/%3E%3Cpath d='M10.2 11h3.6M10.2 14h3.6'/%3E%3C/svg%3E"),
    /* gradient wash */ linear-gradient(180deg,rgba(34,211,238,.22) 0%,rgba(56,189,248,.10) 32%,rgba(8,145,178,.04) 60%,transparent 82%);
  background-repeat:no-repeat;
  /* Positions are deliberately kept to the outer margins: anything landing between
     roughly 26% and 74% would sit under the headline and the lead paragraph. */
  background-position:
     4% 20%,  92% 15%,  12% 63%,  88% 60%,  87% 79%,  7% 40%,  95% 44%,  0 0;
  background-size:
     58px, 42px, 50px, 36px, 56px, 40px, 30px, 100% 100%;
  opacity:.6;
  animation:decor-drift 26s ease-in-out infinite alternate;
}
/* Second, offset field so the pattern does not read as seven lonely icons. */
.page-decor::after{
  content:"";position:absolute;inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5F3FC' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.2l6 3.8-6 3.8z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9a12 12 0 0 1 16 0M7.5 12.6a7 7 0 0 1 9 0'/%3E%3Ccircle cx='12' cy='17' r='1.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M7 4v16M17 4v16M2 12h20'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  /* second field: two in the strip behind the nav, two low and wide */
  background-position: 22% 13%, 78% 12%, 18% 84%, 62% 90%;
  background-size: 30px, 26px, 44px, 26px;
  opacity:.6;
  animation:decor-drift 34s ease-in-out infinite alternate-reverse;
}
@keyframes decor-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-16px,0)}
}
/* The header and the page content both sit above the decoration. */
main{position:relative;z-index:1}

img{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--ice)}
::selection{background:rgba(34,211,238,.28);color:#fff}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:6px}

/* text-wrap:balance stops a long centred heading dropping one lonely word onto the
   last line; `pretty` does the same job for body copy. Both degrade silently. */
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;margin:0 0 .6em;font-weight:700;letter-spacing:-.032em;text-wrap:balance}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.5em}
strong{color:#fff;font-weight:600}
section{scroll-margin-top:90px}

.wrap{width:min(1200px,92%);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--primary);color:#04202b;padding:10px 16px;border-radius:8px;z-index:99}

/* ---------- shared bits ---------- */
.h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.04em;font-weight:700}
.h2{font-size:clamp(1.65rem,3.6vw,2.6rem);margin-bottom:.7em;letter-spacing:-.035em}
.h3{font-size:clamp(1.15rem,2vw,1.45rem)}
.lead{font-size:clamp(1.05rem,1.55vw,1.2rem);color:var(--text2);max-width:68ch;line-height:1.68;text-wrap:pretty}
.muted{color:var(--muted)}
.center{text-align:center}
.center>.h2{max-width:26ch;margin-inline:auto}
.center>.lead{margin-inline:auto}
.section{padding:clamp(52px,6.6vw,96px) 0}
.section--tight{padding:clamp(36px,5vw,64px) 0}
.section--alt{position:relative;background:linear-gradient(180deg,rgba(19,37,56,.42),rgba(4,7,14,0))}
.section--alt::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2),transparent);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ice);background:rgba(34,211,238,.07);
  border:1px solid var(--line2);padding:7px 15px;border-radius:999px;margin-bottom:20px;
  backdrop-filter:blur(6px);
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:50px;padding:14px 28px;border-radius:999px;
  font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.btn-primary{
  background:linear-gradient(135deg,var(--ice) 0%,var(--primary) 45%,var(--primary2) 100%);
  color:#04222D;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 10px 34px rgba(34,211,238,.28);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 46px rgba(34,211,238,.42);color:#04222D}
.btn-ghost{background:rgba(255,255,255,.035);border-color:var(--line2);color:var(--text);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(34,211,238,.09);border-color:rgba(34,211,238,.4);transform:translateY(-2px);color:#fff}
.btn-block{display:flex;width:100%}
.btn-nav{min-height:42px;padding:10px 22px;background:linear-gradient(135deg,var(--ice),var(--primary2));color:#04222D;font-size:.93rem;box-shadow:0 6px 20px rgba(34,211,238,.26)}
.btn-nav:hover{color:#04222D}
/* sheen that crosses a primary button on hover */
.btn-primary::after,.btn-nav::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transition:transform .6s var(--ease);
}
.btn-primary:hover::after,.btn-nav:hover::after{transform:translateX(120%)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(11,26,44,.72) 0%,rgba(4,7,14,.5) 100%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-head.is-stuck{
  background:linear-gradient(180deg,rgba(9,22,38,.95) 0%,rgba(4,7,14,.9) 100%);
  border-bottom-color:transparent;box-shadow:0 10px 40px rgba(0,0,0,.5);
}
/* cyan hairline under the header — brighter in the middle, fading at both edges */
.site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.45),transparent);
  opacity:0;transition:opacity .3s var(--ease);
}
.site-head.is-stuck::after{opacity:1}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;transition:padding .3s var(--ease)}
.site-head.is-stuck .head-inner{padding:10px 0}

/* The wordmark is the one place --brand (Outfit) is used. Outfit runs wider and rounder
   than Sora, so the tracking is a touch looser than the old -.04em or the letters crowd. */
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--brand);font-weight:700;font-size:1.2rem;letter-spacing:-.03em;color:var(--text)}
.brand:hover{color:var(--text)}
.brand-txt2{font-weight:800;background:linear-gradient(135deg,var(--ice),var(--primary2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:.16em}
.brand-mark{filter:drop-shadow(0 4px 14px rgba(34,211,238,.5));transition:transform .3s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}

.nav{display:flex;align-items:center;gap:2px}
.nav a{position:relative;padding:10px 14px;border-radius:10px;color:var(--text2);font-size:.93rem;font-weight:500;transition:color .18s var(--ease)}
.nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--ice),var(--primary2));
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current=page]{color:#fff}
.nav a[aria-current=page]::after{transform:scaleX(1)}
/* Same specificity trap that hit the footer CTA: `.nav a` (0,0,1,1) outranks
   `.btn-nav` (0,0,1,0), so "Buy Now" was painting muted blue-grey on its own cyan
   gradient. Any button dropped inside a scoped `<nav> a` block needs this. */
.nav a.btn-nav,.nav a.btn-nav:hover{color:#04222D}
.nav a.btn-nav::after{transform:translateX(-120%)}
.nav a.btn-nav:hover::after{transform:translateX(120%)}
.navtoggle,.burger{display:none}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;padding:clamp(60px,8vw,116px) 0 clamp(40px,5vw,68px)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;position:relative}
.hero-grid--solo{grid-template-columns:1fr;text-align:center;justify-items:center}
.hero-grid--solo .lead{margin-inline:auto}
.hero-grid--solo .hero-cta,.hero-grid--solo .hero-trust{justify-content:center}
.hero h1{margin-bottom:.4em}
.grad{background:linear-gradient(135deg,var(--ice) 0%,var(--primary) 42%,var(--primary2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 24px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--muted);font-size:.9rem;list-style:none;padding:0;margin:0}
.hero-trust li{margin:0;display:inline-flex;align-items:center}
.hero-trust li::before{content:"✓";color:var(--primary);font-weight:700;margin-right:.5em}

/* Bento stat row: deliberately uneven columns so it reads as a designed panel
   rather than four identical boxes. Same markup, no HTML change needed. */
.stat-row{display:grid;grid-template-columns:1.25fr 1.25fr 1fr 1fr;gap:14px;margin-top:clamp(34px,5vw,58px)}
.stat{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(19,37,56,.85),rgba(10,18,32,.6));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px;text-align:center;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.stat::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(165,243,252,.5),transparent)}
.stat:hover{transform:translateY(-3px);border-color:var(--line2)}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.04em;
  background:linear-gradient(135deg,#fff,var(--ice) 55%,var(--primary2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.8rem;color:var(--muted);letter-spacing:.02em}

/* the glass "device" panel next to the hero copy (setup page) */
.hero-panel{background:linear-gradient(165deg,rgba(34,211,238,.10),rgba(10,18,32,.9));border:1px solid var(--line2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.hero-panel h2{font-size:1.05rem;margin-bottom:14px;color:var(--ice)}
.panel-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(140,165,190,.18);font-size:.94rem}
.panel-row:last-of-type{border-bottom:0}
.panel-row b{color:#fff}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(19,37,56,.62),rgba(10,18,32,.62));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease);
}
/* top highlight line — the cheap trick that makes a flat card look lit */
.card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(165,243,252,.45),transparent);opacity:.7;transition:opacity .3s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.32);box-shadow:var(--glow)}
.card:hover::before{opacity:1}
.card h3{color:#fff;font-size:1.14rem;margin-bottom:.55em}
.card p{color:var(--text2)}
.card p:last-child{margin-bottom:0}
.card-ico{
  width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(150deg,rgba(34,211,238,.18),rgba(56,189,248,.06));
  border:1px solid var(--line2);font-size:1.4rem;margin-bottom:18px;
  box-shadow:0 8px 24px rgba(34,211,238,.10);
}

/* ---------- pricing ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.plan-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(175deg,rgba(19,37,56,.8),rgba(10,18,32,.92));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 24px;text-align:center;
  transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease);
}
.plan-card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(165,243,252,.4),transparent)}
.plan-card:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--shadow-lg)}
.plan-card--popular{
  border-color:rgba(34,211,238,.42);
  background:linear-gradient(175deg,rgba(34,211,238,.10),rgba(10,18,32,.95));
  box-shadow:0 0 0 1px rgba(34,211,238,.22),0 26px 70px rgba(34,211,238,.15);
}
.plan-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--ice),var(--primary2));color:#04222D;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 24px rgba(34,211,238,.35);
}
.plan-name{font-size:1rem;color:var(--ice);margin-bottom:.4em;font-weight:600;letter-spacing:.01em;font-family:var(--sans)}
.plan-price{font-family:var(--display);font-size:3.1rem;font-weight:700;line-height:1;margin:.08em 0 .12em;letter-spacing:-.05em;color:#fff}
.plan-price .cur{font-size:1.35rem;vertical-align:super;margin-right:2px;color:var(--muted);font-weight:600}
.plan-pm{color:var(--muted);font-size:.88rem;margin-bottom:.45em}
.plan-save{display:inline-block;font-size:.75rem;font-weight:600;color:var(--ok);background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.26);padding:5px 13px;border-radius:999px;margin-bottom:18px}
.plan-save--none{visibility:hidden;background:none;border-color:transparent}
.plan-list{list-style:none;padding:0;margin:18px 0 24px;text-align:left;font-size:.91rem;flex:1}
.plan-list li{padding-left:1.6em;position:relative;color:var(--text2);margin-bottom:.55em}
.plan-list li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700}
.btn-plan{width:100%;background:rgba(34,211,238,.10);border-color:var(--line2);color:var(--text)}
.plan-card--popular .btn-plan,.btn-plan:hover{background:linear-gradient(135deg,var(--ice),var(--primary2));color:#04222D;box-shadow:0 10px 30px rgba(34,211,238,.3)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{
  position:relative;background:linear-gradient(165deg,rgba(19,37,56,.5),rgba(10,18,32,.5));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 22px 22px;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.step:hover{transform:translateY(-4px);border-color:var(--line2)}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;top:-17px;left:22px;
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  font-family:var(--display);font-weight:700;font-size:1rem;
  background:linear-gradient(135deg,var(--ice),var(--primary2));color:#04222D;
  box-shadow:0 10px 26px rgba(34,211,238,.32);
}
.step h3{font-size:1.02rem;margin-top:8px;margin-bottom:.5em}
.step p{margin:0;font-size:.93rem;color:var(--text2)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(165deg,rgba(19,37,56,.5),rgba(10,18,32,.5))}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:16px 18px;text-align:left;border-bottom:1px solid rgba(140,165,190,.12);font-size:.94rem}
th{background:rgba(34,211,238,.06);color:var(--ice);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:0}
td{color:var(--text2)}
td strong{color:#fff}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none;margin:0 0 1.2em}
.chips li{
  background:rgba(34,211,238,.06);border:1px solid var(--line);border-radius:999px;
  padding:9px 17px;font-size:.88rem;color:var(--text2);margin:0;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.chips li:hover{background:rgba(34,211,238,.12);border-color:var(--line2);transform:translateY(-2px)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:920px;margin-inline:auto}
.faq-item{
  background:linear-gradient(165deg,rgba(19,37,56,.5),rgba(10,18,32,.6));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.faq-item[open]{border-color:var(--line2);background:linear-gradient(165deg,rgba(19,37,56,.75),rgba(10,18,32,.7))}
.faq-item summary{
  cursor:pointer;padding:19px 56px 19px 22px;font-weight:600;color:#fff;
  list-style:none;position:relative;min-height:44px;font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq-item summary:hover{background:rgba(34,211,238,.05)}
.faq-a{padding:0 22px 20px;color:var(--text2);font-size:.95rem}
.faq-a p:last-child{margin-bottom:0}

/* ---------- breadcrumbs ---------- */
.crumbs{padding:20px 0 0;font-size:.85rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.crumbs li{margin:0}
.crumbs li+li::before{content:"›";margin-right:8px;color:rgba(140,165,190,.55)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--primary)}
.crumbs [aria-current]{color:var(--text2)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(135deg,rgba(34,211,238,.13),rgba(56,189,248,.05));
  border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(34px,4.5vw,60px);
}
.cta-band::before{
  content:"";position:absolute;inset:-60% 20% auto;height:180%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(34,211,238,.16),transparent 70%);
}
.cta-band>*{position:relative}
.cta-band h2{margin-bottom:.45em}
.cta-band p{max-width:58ch;margin-inline:auto;color:var(--text2)}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}

/* ---------- prose ---------- */
.prose{max-width:76ch}
.prose h2{margin-top:1.7em}
.prose h3{margin-top:1.5em;color:var(--ice);font-size:1.15rem}
.prose p{color:var(--text2)}
.prose ul li{color:var(--text2)}

/* ---------- footer ---------- */
.site-foot{
  margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,18,32,.75),rgba(4,7,14,1));
  padding-top:clamp(44px,5vw,68px);position:relative;
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:38px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-h{font-family:var(--display);font-size:.92rem;color:#fff;margin:0 0 8px;letter-spacing:-.01em}
.foot-col a{color:var(--muted);font-size:.93rem}
.foot-col a:hover{color:var(--primary)}
.foot-col a.btn-primary{color:#04222D}
.foot-txt{color:var(--muted);font-size:.92rem;margin:0}
.brand--foot{margin-bottom:8px}
.foot-base{border-top:1px solid rgba(140,165,190,.1);padding:22px 0 30px;color:var(--muted);font-size:.85rem}
.foot-base p{margin:0 0 8px}
.foot-legal{font-size:.79rem;line-height:1.65;opacity:.72;max-width:95ch}

/* ---------- floating WhatsApp ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#04240f;
  box-shadow:0 12px 34px rgba(37,211,102,.4);transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.wa-float:hover{transform:scale(1.09) translateY(-2px);box-shadow:0 18px 44px rgba(37,211,102,.5);color:#04240f}

/* ---------- scroll reveal ----------
   Guarded behind .has-reveal, which script.js adds. Without JS nothing is hidden. */
.has-reveal .card,.has-reveal .plan-card,.has-reveal .step,.has-reveal .stat,.has-reveal .cta-band{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.has-reveal .is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-panel{order:-1}
  .grid-4,.plan-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border:1px solid var(--line2);border-radius:13px;cursor:pointer;padding:0 11px;background:rgba(34,211,238,.07)}
  .burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:.25s var(--ease)}
  .navtoggle:checked~.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked~.burger span:nth-child(2){opacity:0}
  .navtoggle:checked~.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
       background:rgba(4,7,14,.97);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);
       padding:12px;display:none;box-shadow:var(--shadow-lg)}
  .navtoggle:checked~.nav{display:flex}
  .nav a{padding:14px 14px;font-size:1rem}
  .nav a::after{display:none}
  .nav a[aria-current=page]{background:rgba(34,211,238,.12);border-radius:10px}
  .btn-nav{margin-top:8px}
  .head-inner{position:relative}
  .site-head.is-stuck .head-inner{padding:12px 0}

  /* --- tap targets (measured at 390px, see the mobile audit) --- */
  .brand{min-height:44px}
  .foot-col{gap:0}
  /* :not(.btn) — the footer CTA already carries its own min-height. */
  .foot-col a:not(.btn){display:flex;align-items:center;min-height:44px;padding:2px 0}
  .foot-col .foot-txt{margin-bottom:6px}
  .crumbs{padding-top:12px}
  .crumbs ol{gap:4px 8px}
  .crumbs a{display:inline-flex;align-items:center;min-height:36px;padding:0 2px}
  .crumbs [aria-current]{display:inline-flex;align-items:center;min-height:36px}

  /* --- links inside body copy must not rely on colour alone --- */
  .lead a,.card p a,.faq-a a,.prose a,.step p a,.muted a,td a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  a,button,summary,label{-webkit-tap-highlight-color:rgba(34,211,238,.18)}

  /* --- less scrolling for the same content --- */
  .section{padding:44px 0}
  .section--tight{padding:32px 0}
  .hero{padding:40px 0 32px}
  .card{padding:22px}
  .card-ico{width:42px;height:42px;margin-bottom:13px}
  .step{padding:26px 20px 20px}
  .eyebrow{margin-bottom:16px}
  .h2{margin-bottom:.6em}
  .foot-legal{font-size:.82rem;opacity:.85}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4,.plan-grid,.steps{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:12px}
  .stat{padding:20px 14px;border-radius:var(--r)}
  .foot-grid{grid-template-columns:1fr}
  .wa-float{width:54px;height:54px;right:14px;bottom:14px}

  .plan-card{padding:26px 20px}
  .plan-price{font-size:2.7rem}
  .plan-list{margin:14px 0 20px;font-size:.9rem}
  .plan-list li{margin-bottom:.34em}

  .hero-cta{gap:10px;margin:24px 0 20px}
  .hero-cta .btn,.cta-actions .btn{width:100%}
  .cta-actions{gap:10px}
  .site-foot{padding-bottom:80px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .page-decor,.page-decor::after{transform:none}
  .has-reveal .card,.has-reveal .plan-card,.has-reveal .step,.has-reveal .stat,.has-reveal .cta-band{opacity:1;transform:none}
}

@media (max-width:860px){
  .page-decor{height:min(560px,70vh);opacity:.4;
    background-position:2% 16%,94% 12%,6% 58%,92% 54%,84% 30%,4% 38%,97% 42%,0 0;
    background-size:40px,28px,34px,24px,38px,26px,22px,100% 100%}
  .page-decor::after{opacity:.42;background-position:16% 6%,82% 5%,8% 80%,90% 80%;background-size:24px,20px,30px,18px}
}