/* ============================================================
   Atlas ONTV 4K — "Luxe Signal"
   Dark cinematic hero (brand entrance) + light premium body.
   ============================================================ */

:root{
  /* --- Brand accent: luxurious purple (used everywhere, dark or light) --- */
  --accent:        #7C4FE0;
  --accent-hi:     #9B78F5;
  --accent-lo:     #5A34B8;
  --accent-soft:   #F1EBFC;   /* light tint for badges/icons on light bg */
  --accent-2:      #17B8A6;   /* secondary teal, used sparingly for contrast */

  /* --- Light theme tokens: the default for everything except hero/header --- */
  --bg:            #FBF9FF;
  --bg-soft:       #F3EEFB;
  --surface:       #FFFFFF;
  --surface-2:     #F6F2FD;
  --border:        rgba(28,16,54,0.09);
  --border-strong: rgba(28,16,54,0.16);

  --text:          #1C1236;
  --text-dim:      #5B5470;
  --text-faint:    #948DA6;

  /* --- Dark chrome tokens: header + hero only --- */
  --hero-bg:            #0F0B1A;
  --hero-surface:       rgba(255,255,255,0.06);
  --hero-border:        rgba(245,241,254,0.12);
  --hero-border-strong: rgba(245,241,254,0.22);
  --hero-text:          #F7F4FF;
  --hero-text-dim:      #C6BCE6;
  --hero-text-faint:    #9084B3;

  --danger:        #E5484D;

  /* --- Type --- */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Work Sans', -apple-system, sans-serif;
  --font-accent:  'Fraunces', serif;

  /* --- Spacing (8px rhythm) --- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1240px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
/*
 * overflow-x: clip (not hidden) -- hidden on only one axis forces the
 * other axis to compute as auto per the CSS Overflow spec, which turns
 * html/body into a scroll container and silently breaks position:sticky
 * everywhere on the page (confirmed: sticky elements just moved 1:1 with
 * scroll instead of holding). clip blocks horizontal overflow the same
 * way (needed for the hero's Ken Burns zoom) without that side effect.
 */
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body{
  margin:0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background: var(--accent); color:#fff; padding:12px 20px; border-radius: 0 0 8px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.wrap-narrow{ max-width: 780px; }

/* ---------- Heading & type scale ---------- */
h1{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(2.6rem, 5vw + 1rem, 4.4rem);
  line-height: 0.98;
  text-transform: uppercase;
}
h1 .h1-sub{
  display:block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--accent-hi);
  margin-top: 0.25em;
}
h2{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 2.6vw + 1rem, 3rem);
  line-height: 1.02;
  margin-bottom: var(--s-4);
}
h3{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
}
.section-eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.section-lede{
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 620px;
  margin-top: var(--s-3);
  margin-bottom: var(--s-7);
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items:center; justify-content:center; gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 48px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--accent-hi), var(--accent-lo));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(124,79,224,0.55);
}
.btn-primary:hover{ box-shadow: 0 10px 32px -6px rgba(124,79,224,0.75); transform: translateY(-2px); }
.btn-ghost{
  background: transparent;
  color: var(--hero-text);
  border: 1px solid var(--hero-border-strong);
}
.btn-ghost:hover{ border-color: var(--accent-hi); color: var(--accent-hi); }
.btn-outline{
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-outline:hover{ border-color: var(--accent); color: var(--accent-lo); }
.btn-lg{ padding: 16px 30px; font-size: 1rem; }
.btn-sm{ padding: 10px 18px; min-height: 40px; font-size: 0.88rem; }
.btn-block{ width:100%; }

/* ---------- Header (always dark chrome) ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(251,249,255,0.86);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 0 var(--border);
}

/* Slim trust/utility strip above the main nav row -- gives the header more
   substance without adding visual weight; hidden on small screens so the
   mobile header stays minimal. */
.header-topbar{
  border-bottom: 1px solid var(--border);
  background: rgba(28,16,54,0.03);
}
.header-topbar-inner{
  display:flex; align-items:center; justify-content:flex-end; gap: var(--s-6);
  height: 34px;
}
.topbar-item{
  display:flex; align-items:center; gap:6px;
  font-size: 0.78rem; font-weight:500; color: var(--text-faint);
}
.topbar-item svg{ width:13px; height:13px; color: var(--accent-hi); flex-shrink:0; }
.topbar-whatsapp{ color: var(--text-dim); transition: color 160ms; }
.topbar-whatsapp:hover{ color: #128C7E; }
.topbar-whatsapp svg{ color: #25D366; }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.logo{ display:flex; align-items:center; gap: 10px; color: var(--text); }
.logo-img{ height: 34px; width:auto; display:block; }
/* Footer sits on the light theme; the logo's wordmark is white, so it needs a
   dark chip behind it to stay legible (same treatment the header gets for free
   from its own dark background). */
.logo-img-footer{
  height: 30px;
  background: var(--hero-bg);
  padding: 8px 14px;
  border-radius: 10px;
}
.logo-mark{ color: var(--accent-hi); display:flex; }
.logo-text{
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}
.logo-accent{ color: var(--accent-hi); }

.main-nav{ display:flex; gap: var(--s-2); }
.main-nav a{
  display:flex; align-items:center;
  font-weight: 500; font-size: 0.92rem; color: var(--text-dim);
  padding: 8px 16px; border-radius: 999px;
  transition: color 160ms, background 160ms;
  position:relative;
}
.main-nav a:hover{ color: var(--accent-lo); background: var(--accent-soft); }
.main-nav a:focus-visible{ outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.header-actions{ display:flex; align-items:center; gap: var(--s-4); }
.header-cta svg{ width:16px; height:16px; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 44px; height: 44px; align-items:center;
}
.nav-toggle span{ width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 200ms, opacity 200ms; }

@media (max-width: 860px){
  .header-topbar{ display:none; }
}

/* ---------- Hero (dark, photographic) ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: var(--s-9) 0 var(--s-10);
  background: var(--hero-bg);
  color: var(--hero-text);
}
.hero-media-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  animation: heroKenBurns 26s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{
  0%{ transform: scale(1) translate3d(0,0,0); }
  100%{ transform: scale(1.09) translate3d(-1%,-1%,0); }
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, var(--hero-bg) 18%, rgba(15,11,26,0.86) 38%, rgba(15,11,26,0.35) 62%, rgba(15,11,26,0.55) 100%),
    linear-gradient(0deg, var(--hero-bg) 0%, transparent 22%, transparent 82%, var(--hero-bg) 100%);
}
.hero-noise{
  position:absolute; inset:0; z-index:2; opacity:0.35; pointer-events:none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.hero-inner{
  position:relative; z-index:3;
  display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-8); align-items:center;
}
.hero-copy{ max-width: 640px; }

.hero-visual{ position:relative; }
.hero-visual-img{
  width:100%; height:auto; border-radius: var(--radius);
  box-shadow: 0 40px 80px -24px rgba(0,0,0,0.6), 0 0 0 1px var(--hero-border);
  animation: heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--accent-hi);
  background: rgba(124,79,224,0.14);
  border: 1px solid rgba(155,120,245,0.35);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: var(--s-5);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--accent-hi); box-shadow: 0 0 10px var(--accent-hi); }

.hero h1{ margin-bottom: var(--s-5); color: var(--hero-text); }
.hero-lede{ color: var(--hero-text-dim); font-size: 1.12rem; max-width: 540px; margin-bottom: var(--s-6); }
.hero-cta{ display:flex; gap: var(--s-4); flex-wrap:wrap; margin-bottom: var(--s-7); }
.hero-trust{ display:flex; flex-direction:column; gap: var(--s-3); }
.hero-trust li{ display:flex; align-items:center; gap:10px; color: var(--hero-text-dim); font-size:0.92rem; }
.hero-trust svg{ color: var(--accent-hi); flex-shrink:0; }

/* Clean channel-guide style strip along the bottom edge of the hero --
   reinforces "TV" without motion/marquee gimmicks. */
.hero-ticker{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap: var(--s-2) var(--s-6);
  padding-top: var(--s-5);
  margin-top: var(--s-8);
  border-top: 1px solid var(--hero-border);
}
.hero-ticker-item{
  font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--hero-text-faint);
}
.hero-ticker-item--accent{ color: var(--accent-hi); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal[data-delay="0"]{ transition-delay: 0ms; }
.reveal[data-delay="1"]{ transition-delay: 90ms; }
.reveal[data-delay="2"]{ transition-delay: 180ms; }
.reveal[data-delay="3"]{ transition-delay: 270ms; }
.reveal[data-delay="4"]{ transition-delay: 360ms; }

/* ---------- Sections generic (light theme) ---------- */
.section{ position:relative; padding: var(--s-9) 0; background: var(--bg); }
.section:nth-of-type(even){ background: var(--bg-soft); }

/* ---------- Devices ---------- */
.device-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5);
}
.device-card{
  position:relative; overflow:hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
  box-shadow: 0 2px 12px -6px rgba(28,16,54,0.08);
  transition: border-color 200ms, transform 200ms var(--ease-out), box-shadow 200ms;
}
.device-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  transform: scaleX(0); transform-origin:left;
  transition: transform 260ms var(--ease-out);
}
.device-card:hover{ border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(124,79,224,0.35); }
.device-card:hover::before{ transform: scaleX(1); }
.device-card-channel{
  position:absolute; top: var(--s-4); right: var(--s-4);
  font-family: var(--font-display); font-size:0.95rem; letter-spacing:0.04em;
  color: var(--text-faint);
}
.device-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 52px; height:52px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: var(--s-4);
}
.device-card h3{ margin-bottom: var(--s-2); }
.device-card p{ color: var(--text-dim); font-size:0.92rem; }

/* ---------- Pricing ---------- */
.pricing-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5);
  max-width: 960px; margin: 0 auto;
  align-items: stretch;
}
.price-card{
  position:relative;
  background: linear-gradient(165deg, var(--accent), var(--accent-lo));
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-5) var(--s-5);
  display:flex; flex-direction:column;
  color:#fff;
  box-shadow: 0 20px 40px -22px rgba(90,52,184,0.55);
  transition: transform 220ms var(--ease-out), box-shadow 220ms;
}
.price-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 52px -20px rgba(90,52,184,0.65); }
.price-card-featured{
  background: linear-gradient(165deg, var(--accent-hi), var(--accent));
  box-shadow: 0 28px 56px -20px rgba(90,52,184,0.7);
  transform: scale(1.03);
}
.price-card-featured:hover{ transform: scale(1.03) translateY(-6px); }
.price-badge{
  position:absolute; top:-14px; left: var(--s-5);
  background: linear-gradient(135deg,#FFD86B,#F2B300); color:#3A2400; font-size:0.72rem; font-weight:700;
  padding: 6px 14px; border-radius: 999px; letter-spacing:0.03em;
  box-shadow: 0 6px 16px -6px rgba(242,179,0,0.6);
}
.price-badge-light{ background: rgba(255,255,255,0.92); color: var(--accent-lo); box-shadow:none; }
.price-tagline{ color: rgba(255,255,255,0.75); font-size:0.87rem; margin-top: var(--s-2); }
.price-amount{
  font-family: var(--font-display);
  font-size: 2.8rem;
  margin: var(--s-5) 0;
  font-variant-numeric: tabular-nums;
  display:flex; align-items:baseline; gap:2px;
  color:#fff;
}
.price-amount .currency{ font-size:1.2rem; color:#fff; align-self:flex-start; margin-top:4px; }
.price-amount .cents{ font-size:1.2rem; color: rgba(255,255,255,0.75); }
.price-amount .period{
  font-family: var(--font-body); font-size:0.78rem; color: rgba(255,255,255,0.6); font-weight:500;
  margin-left:4px; text-transform:none;
}
.price-features{ display:flex; flex-direction:column; gap: var(--s-3); margin-bottom: var(--s-5); flex:1; }
.price-features li{
  display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color: rgba(255,255,255,0.92);
}
.price-features li::before{
  content:''; flex-shrink:0; width:17px; height:17px; margin-top:2px; border-radius:50%;
  background: rgba(255,255,255,0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px; background-repeat:no-repeat; background-position:center;
}
.price-devices{
  border-top: 1px solid rgba(255,255,255,0.18); margin-top: var(--s-2); padding-top: var(--s-4); margin-bottom: var(--s-5);
}
.price-devices-label{ display:block; font-size:0.76rem; color: rgba(255,255,255,0.65); margin-bottom: var(--s-3); text-align:center; }
.price-devices-icons{ display:flex; align-items:center; justify-content:center; gap: var(--s-4); flex-wrap:wrap; }
.dev-icon{ display:flex; align-items:center; gap:5px; opacity:0.95; }
.dev-icon-firetv{ color:#FF9900; font-size:0.72rem; font-weight:700; }
.dev-icon-firetv span{ color: rgba(255,255,255,0.85); }

/* Gold CTA — deliberately different from the site's purple CTA for contrast inside purple pricing cards */
.btn-gold{
  background: linear-gradient(135deg,#FFD86B,#F2B300);
  color:#3A2400;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35);
}
.btn-gold:hover{ box-shadow: 0 12px 28px -8px rgba(0,0,0,0.45); transform: translateY(-2px); }

.pricing-note{ text-align:center; color: var(--text-faint); font-size:0.85rem; margin-top: var(--s-7); }

/* ---------- Showcase (Pourquoi + slider) ---------- */
.showcase-head{ text-align:center; max-width: 720px; margin: 0 auto var(--s-8); }
.showcase-head h2{ margin-top: var(--s-4); }
.showcase-head .h1-sub{ font-size: 0.55em; color: var(--accent-lo); }
.showcase-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:600; color: var(--accent-lo);
  background: var(--accent-soft); border: 1px solid rgba(124,79,224,0.25);
  padding: 8px 16px; border-radius: 999px;
}
.showcase-badge svg{ color: var(--accent); }

.showcase-body{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-7); align-items:center; }

/* Slider */
.slider{ position:relative; padding: 0 var(--s-6); }

/* TV-screen bezel: a dark frame + inset "power light" under the slider,
   so the feature preview reads as a television rather than a plain card. */
.slider-viewport{
  overflow:hidden; border-radius: 20px;
  background: var(--hero-bg);
  padding: 10px;
  box-shadow: 0 30px 60px -24px rgba(90,52,184,0.5), 0 0 0 1px var(--hero-border);
}
.slider-viewport::after{ content:''; }
.slider-screen{ border-radius: 12px; overflow:hidden; }
.slider-power{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding: 9px 0 3px;
}
.slider-power .dot{
  width:5px; height:5px; border-radius:50%;
  background: var(--accent-hi); box-shadow: 0 0 6px var(--accent-hi);
}
.slider-power span{ font-size:0.62rem; font-weight:700; letter-spacing:0.12em; color: var(--hero-text-faint); text-transform:uppercase; }
.slider-track{ display:flex; transition: transform 480ms var(--ease-out); }
.slide{
  flex: 0 0 100%;
  background: linear-gradient(155deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo));
  color:#fff; padding: var(--s-5) var(--s-5) var(--s-4);
  min-height: 300px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  position:relative; overflow:hidden;
}
.slide::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(70% 60% at 92% 105%, rgba(255,255,255,0.2), transparent 60%);
}
.slide-glow{
  position:absolute; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  top:-60px; right:-40px; pointer-events:none;
}
.slide-step{
  position:absolute; top: var(--s-4); right: var(--s-4); z-index:1;
  font-size:0.64rem; font-weight:700; letter-spacing:0.06em; color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
}
.slide-icon{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(6px);
  margin-bottom: var(--s-3);
}
.slide-icon svg{ width:19px; height:19px; }
.slide h3{ position:relative; z-index:1; color:#fff; font-size:1.05rem; margin-bottom: var(--s-1); }
.slide p{ position:relative; z-index:1; color: rgba(255,255,255,0.82); font-size:0.78rem; line-height:1.4; max-width: 220px; margin-bottom: var(--s-4); }
.slide-visual{ position:relative; z-index:1; width:100%; max-width: 200px; }

/* Slide 1 — live channel list */
.slide-channels{ display:flex; flex-direction:column; gap:7px; }
.ch-row{ display:flex; align-items:center; gap:7px; }
.ch-dot{ width:5px; height:5px; border-radius:50%; background: rgba(255,255,255,0.5); flex-shrink:0; }
.ch-bar{ height:6px; border-radius:4px; background: rgba(255,255,255,0.28); }
.ch-row-live{ background: rgba(255,255,255,0.14); border-radius:6px; padding:5px 7px; margin:-5px -7px 2px; }
.ch-row-live .ch-dot{ background:#FF5C5C; box-shadow: 0 0 8px #FF5C5C; }
.ch-row-live .ch-bar{ background: rgba(255,255,255,0.75); }
.ch-tag{
  margin-left:auto; font-size:0.52rem; font-weight:800; letter-spacing:0.04em;
  background:#FF5C5C; color:#fff; padding:1px 5px; border-radius:3px; flex-shrink:0;
}

/* Slide 2 — poster grid */
.slide-posters{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:6px; height:72px; }
.poster{ border-radius:6px; background: rgba(255,255,255,0.22); }
.poster-tall{ grid-row: span 2; background: rgba(255,255,255,0.32); }
.poster-play{
  grid-column: span 2; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.5);
}
.poster-play svg{ width:13px; height:13px; }

/* Slide 3 — device stack */
.slide-devices{ height:100px; position:relative; z-index:1; }
.dv{
  position:absolute; border-radius:8px; background: rgba(255,255,255,0.16);
  border: 1.5px solid rgba(255,255,255,0.55);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:5px;
}
.dv-dot{ width:4px; height:4px; border-radius:50%; background:#fff; opacity:0.7; }
.dv-tv{ width:100px; height:66px; left:0; top:6px; }
.dv-tablet{ width:50px; height:66px; left:64px; top:24px; background: rgba(255,255,255,0.24); }
.dv-phone{ width:30px; height:54px; left:98px; top:37px; background: rgba(255,255,255,0.34); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.35); }

/* Slide 4 — replay timeline */
.slide-timeline{ display:flex; flex-direction:column; gap:10px; }
.tl-track{ position:relative; height:6px; border-radius:4px; background: rgba(255,255,255,0.22); }
.tl-fill{ position:absolute; inset:0; width:88%; border-radius:4px; background:#fff; }
.tl-now{
  position:absolute; top:-19px; right:0; font-size:0.56rem; font-weight:700;
  background: rgba(255,255,255,0.18); padding:1px 6px; border-radius:4px; white-space:nowrap;
}

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; z-index:2;
  background: var(--surface); border:1px solid var(--border-strong); color: var(--text);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px -6px rgba(28,16,54,0.3);
  transition: background 160ms, color 160ms, transform 160ms;
}
.slider-arrow:hover{ background: var(--accent); color:#fff; transform: translateY(-50%) scale(1.08); }
.slider-prev{ left: 0; } .slider-next{ right: 0; }
.slider-dots{ display:flex; justify-content:center; gap:9px; margin-top: var(--s-6); }
.slider-dots button{
  width:9px; height:9px; border-radius:50%; background: var(--border-strong); transition: background 160ms, transform 160ms, width 160ms;
}
.slider-dots button[aria-selected="true"]{ background: var(--accent); width:22px; border-radius:5px; }

.showcase-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.showcase-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-5); box-shadow: 0 2px 12px -6px rgba(28,16,54,0.07);
}
.showcase-card .device-icon{ margin-bottom: var(--s-3); width:44px; height:44px; }
.showcase-card h3{ margin-bottom: var(--s-2); font-size:1.02rem; }
.showcase-card p{ color: var(--text-dim); font-size:0.88rem; }

/* ---------- Trust / Why us ---------- */
.trust-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.trust-card{ padding: var(--s-2) 0; }
.trust-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: var(--s-4);
}
.trust-card h3{ margin-bottom: var(--s-2); }
.trust-card p{ color: var(--text-dim); font-size:0.92rem; }

/* ---------- FAQ / Accordion ---------- */
.accordion-item{ border-bottom: 1px solid var(--border); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding: var(--s-5) 0; text-align:left; font-weight:600; font-size:1.02rem; color: var(--text);
}
.accordion-trigger .chev{ transition: transform 240ms var(--ease-out); color: var(--accent); flex-shrink:0; margin-left: var(--s-4); }
.accordion-trigger[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.accordion-panel{
  max-height:0; overflow:hidden; transition: max-height 320ms var(--ease-out);
}
.accordion-panel p{ color: var(--text-dim); padding-bottom: var(--s-5); max-width: 640px; }
.accordion-panel a{ color: var(--accent); text-decoration: underline; }

/* ---------- CTA band ---------- */
.cta-band{
  padding: var(--s-8) 0;
  background: linear-gradient(120deg, var(--accent-soft), var(--bg) 65%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-band-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap: var(--s-4); }
.cta-band-inner p{ color: var(--text-dim); margin-bottom: var(--s-3); }

/* ---------- Footer (light) ---------- */
.site-footer{ padding: var(--s-8) 0 var(--s-5); background: var(--bg); }
.footer-grid{
  display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6);
  padding-bottom: var(--s-7); border-bottom: 1px solid var(--border);
}
.footer-brand p{ color: var(--text-dim); font-size:0.9rem; margin-top: var(--s-3); max-width: 280px; }
.footer-col h4{ font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom: var(--s-4); }
.footer-col{ display:flex; flex-direction:column; gap: var(--s-3); }
.footer-col a{ color: var(--text-dim); font-size:0.92rem; transition: color 160ms; }
.footer-col a:hover{ color: var(--accent-lo); }
.footer-bottom{
  padding-top: var(--s-5); display:flex; align-items:center; justify-content:space-between; gap: var(--s-4); flex-wrap:wrap;
}
.footer-bottom p{ color: var(--text-faint); font-size:0.85rem; }

/* ---------- Payment icons ---------- */
.payment-icons{ display:flex; align-items:center; gap: var(--s-3); }
.payment-icons .pay-chip{
  display:flex; align-items:center; justify-content:center;
  height: 28px; padding: 0 10px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 0.68rem; font-weight:700; letter-spacing:0.02em;
}
.payment-icons .pay-chip svg{ color: var(--text-dim); }
.payment-icons .pay-secure{ display:flex; align-items:center; gap:6px; color: var(--text-faint); font-size:0.78rem; }
.payment-icons .pay-secure svg{ color: var(--accent); }

/* ---------- Inner-page small hero (light) ---------- */
.page-hero{
  position: relative; overflow:hidden;
  padding: var(--s-8) 0 var(--s-7);
  background:
    radial-gradient(60% 80% at 90% 0%, var(--accent-soft), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:0.85rem; color: var(--text-faint); margin-bottom: var(--s-5);
}
.breadcrumb a{ color: var(--text-dim); transition: color 160ms; }
.breadcrumb a:hover{ color: var(--accent-lo); }
.breadcrumb span[aria-current]{ color: var(--text); }
.page-hero h1{ font-size: clamp(2.2rem, 3.6vw + 1rem, 3.4rem); margin-bottom: var(--s-4); max-width: 780px; color: var(--text); }
.page-hero .hero-lede{ margin-bottom: 0; color: var(--text-dim); }

/* ---------- Steps list (device/install guides) ---------- */
.steps{ counter-reset: step; display:flex; flex-direction:column; gap: var(--s-5); max-width: 720px; }
.step{ position:relative; padding-left: 56px; }
.step::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:0;
  width:40px; height:40px; border-radius:10px;
  background: var(--accent-soft); border: 1px solid rgba(124,79,224,0.3);
  color: var(--accent-lo); font-family: var(--font-display); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ margin-bottom: var(--s-2); }
.step p{ color: var(--text-dim); font-size:0.95rem; }

/* ---------- Prose (blog articles / long-form) ---------- */
.prose{ max-width: 720px; }
.prose h2{ font-family: var(--font-body); text-transform:none; font-weight:700; font-size:1.5rem; margin-top: var(--s-8); margin-bottom: var(--s-3); letter-spacing:0; color: var(--text); }
.prose h3{ margin-top: var(--s-6); margin-bottom: var(--s-2); }
.prose p{ color: var(--text-dim); margin-bottom: var(--s-4); font-size:1.02rem; }
.prose ul, .prose ol{ color: var(--text-dim); margin: 0 0 var(--s-4); padding-left: 1.3em; display:flex; flex-direction:column; gap: var(--s-2); }
.prose ul{ list-style: disc; }
.prose ol{ list-style: decimal; }
.prose strong{ color: var(--text); }
.prose a{ color: var(--accent-lo); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote{
  border-left: 3px solid var(--accent); margin: var(--s-6) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5);
  color: var(--text); font-family: var(--font-accent); font-style:italic; font-size:1.15rem;
}
.article-meta{ display:flex; gap: var(--s-4); align-items:center; color: var(--text-faint); font-size:0.88rem; margin-bottom: var(--s-6); }
.article-meta .tag{
  background: var(--accent-soft); color: var(--accent-lo); border: 1px solid rgba(124,79,224,0.25);
  padding: 4px 12px; border-radius: 999px; font-weight:600; font-size:0.78rem; letter-spacing:0.03em; text-transform:uppercase;
}

/* ---------- Blog index / card grid ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.blog-card{
  display:block; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-6); box-shadow: 0 2px 12px -6px rgba(28,16,54,0.07);
  transition: border-color 200ms, transform 200ms var(--ease-out);
}
.blog-card:hover{ border-color: var(--accent); transform: translateY(-4px); }
.blog-card .tag{
  display:inline-block; background: var(--accent-soft); color: var(--accent-lo); border: 1px solid rgba(124,79,224,0.25);
  padding: 4px 12px; border-radius: 999px; font-weight:600; font-size:0.75rem; letter-spacing:0.03em; text-transform:uppercase;
  margin-bottom: var(--s-4);
}
.blog-card h2{ font-family: var(--font-body); text-transform:none; font-weight:700; font-size:1.3rem; letter-spacing:0; margin-bottom: var(--s-3); color: var(--text); }
.blog-card p{ color: var(--text-dim); font-size:0.95rem; margin-bottom: var(--s-4); }
.blog-card .read-more{ color: var(--accent-lo); font-weight:600; font-size:0.9rem; display:inline-flex; align-items:center; gap:6px; }

/* ---------- Legal / notice ---------- */
.legal-notice{
  display:flex; gap: 12px; align-items:flex-start;
  background: var(--accent-soft); border: 1px solid rgba(124,79,224,0.3);
  border-radius: var(--radius-sm); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-7);
  color: var(--text-dim); font-size:0.92rem; max-width: 720px;
}
.legal-notice svg{ color: var(--accent-lo); flex-shrink:0; margin-top:2px; }

/* ---------- Empty state (avis page) ---------- */
.empty-state{
  text-align:center; max-width: 480px; margin: 0 auto; padding: var(--s-8) var(--s-5);
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.empty-state .empty-icon{
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background: var(--accent-soft); color: var(--accent); margin-bottom: var(--s-5);
}
.empty-state h3{ margin-bottom: var(--s-3); }
.empty-state p{ color: var(--text-dim); font-size:0.95rem; }

/* ---------- Support contact cards ---------- */
.contact-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.contact-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: var(--s-6);
  text-align:center; box-shadow: 0 2px 12px -6px rgba(28,16,54,0.07);
}
.contact-card .device-icon{ margin: 0 auto var(--s-4); }
.contact-card h3{ margin-bottom: var(--s-2); }
.contact-card p{ color: var(--text-dim); font-size:0.92rem; margin-bottom: var(--s-5); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .device-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .showcase-body{ grid-template-columns: minmax(0, 1fr); }
  .hero-inner{ grid-template-columns: minmax(0, 1fr); }
  .hero-visual{ max-width: 440px; margin: 0 auto; order:-1; }
}
@media (max-width: 860px){
  .main-nav{
    position:fixed; inset: 76px 0 0 0; height: calc(100dvh - 76px);
    background: var(--bg); flex-direction:column; padding: var(--s-6) var(--s-5);
    gap: var(--s-5); transform: translateX(100%); transition: transform 280ms var(--ease-out);
    border-top: 1px solid var(--border); box-shadow: 0 12px 24px -12px rgba(28,16,54,0.15);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav a{ font-size: 1.2rem; color: var(--text-dim); }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 640px){
  .device-grid{ grid-template-columns: minmax(0, 1fr); }
  .trust-grid{ grid-template-columns: minmax(0, 1fr); }
  .pricing-grid{ grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .blog-grid{ grid-template-columns: minmax(0, 1fr); }
  .contact-grid{ grid-template-columns: minmax(0, 1fr); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .showcase-grid{ grid-template-columns: minmax(0, 1fr); }
  .slide{ padding: var(--s-6) var(--s-5); min-height: 320px; }
  .slide-visual{ max-width: 240px; }
}
@media (prefers-reduced-motion: reduce){
  .slider-track{ transition: none; }
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position: fixed;
  right: 20px; bottom: 20px; z-index: 300;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px -6px rgba(0,0,0,0.4);
  transition: transform 200ms var(--ease-out), box-shadow 200ms;
}
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 32px -6px rgba(0,0,0,0.5); }
.whatsapp-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border: 2px solid #25D366; opacity:0.6;
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{
  0%{ transform: scale(1); opacity:0.6; }
  100%{ transform: scale(1.55); opacity:0; }
}
@media (max-width: 640px){
  .whatsapp-float{ right:14px; bottom:14px; width:52px; height:52px; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float::before{ animation:none; display:none; }
}

/* ---------- Cookie consent banner ---------- */
.atlas-cookie-banner{
  position: fixed; left:0; right:0; bottom:0; z-index: 400;
  background: var(--hero-bg);
  border-top: 1px solid var(--hero-border);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
}
.atlas-cookie-banner-inner{
  max-width: var(--container); margin: 0 auto;
  padding: var(--s-4) var(--s-5);
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-5);
  flex-wrap:wrap;
}
.atlas-cookie-banner p{
  margin:0; color: var(--hero-text-dim); font-size:0.86rem; line-height:1.5; max-width:640px;
}
.atlas-cookie-banner p a{ color: var(--accent-hi); text-decoration: underline; text-underline-offset:2px; }
.atlas-cookie-actions{ display:flex; gap: var(--s-3); flex-shrink:0; }
.atlas-cookie-actions .btn-outline{ border-color: var(--hero-border-strong); color: var(--hero-text); }
.atlas-cookie-actions .btn-outline:hover{ border-color: var(--accent-hi); color: var(--accent-hi); }

/* Keep the WhatsApp button from overlapping the banner while it's shown. */
body:has(.atlas-cookie-banner:not([hidden])) .whatsapp-float{ bottom: 96px; }
@media (max-width: 640px){
  .atlas-cookie-banner-inner{ padding: var(--s-4); }
  body:has(.atlas-cookie-banner:not([hidden])) .whatsapp-float{ bottom: 148px; }
}