:root{--bg:#0b1117;--bg2:#0f1720;--card:#0f172a;--text:#e5e7eb;--muted:#9ca3af;--accent:#22c55e;--accent2:#06b6d4;--radius:20px;--container:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Arial, sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:90px 0}.muted{color:var(--muted)}.small{font-size:.9rem}.center{text-align:center}

.site-header{position:sticky;top:0;z-index:70;background:linear-gradient(90deg, rgba(4,7,10,.85), rgba(10,20,28,.85));backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);transition: box-shadow .2s}
.site-header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:900;letter-spacing:.2px}.logo-mark{font-size:22px}
.nav{margin-left:auto}
.nav-list{list-style:none;display:flex;gap:18px;padding:0;margin:0}
.nav-list a{color:var(--text);text-decoration:none;opacity:.9;font-weight:650}
.nav-list a:hover{opacity:1}
.header-actions{display:flex;gap:10px;margin-left:12px}
.cta-btn,.ghost-btn{display:inline-block;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:800;transition:transform .08s, box-shadow .2s, background .2s, color .2s}
.cta-btn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#08130d;box-shadow:0 10px 30px rgba(0,0,0,.35);position:relative;overflow:hidden}
.cta-btn:hover{transform:translateY(-1px)}
.cta-btn::after{content:'';position:absolute;inset:0;transform:skewX(-20deg) translateX(-120%);background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.25), rgba(255,255,255,.0));transition:transform .6s}
.cta-btn:hover::after{transform:skewX(-20deg) translateX(120%)}
.ghost-btn{border:1px solid rgba(255,255,255,.2);color:var(--text);background:transparent}.ghost-btn:hover{border-color:rgba(255,255,255,.4)}
.burger{display:none;background:transparent;border:0;width:38px;height:34px;position:relative;margin-left:auto}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:#e5e7eb;border-radius:2px;transition:transform .2s, opacity .2s}
.burger span:nth-child(1){top:9px}.burger span:nth-child(2){top:16px}.burger span:nth-child(3){top:23px}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger.open span:nth-child(2){opacity:0}.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hero{background-image:var(--hero), radial-gradient(1000px 500px at 70% -10%, #14532d 0%, rgba(20,83,45,0) 55%);background-size:cover,auto;background-position:center,center}
.hero-inner{display:grid;grid-template-columns:1.1fr;align-items:center;gap:20px;padding:64px 0}
.hero-copy h1{font-size:clamp(28px,4.2vw,54px);line-height:1.05;margin:0 0 8px;font-weight:900;letter-spacing:-.2px}
.hero-copy p{font-size:clamp(15px,2vw,19px);color:#cbd5e1;margin:0 0 16px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.countdown{display:flex;gap:12px;margin:10px 0 8px}
.cd-item{background:rgba(255,255,255,.06);padding:10px 14px;border-radius:12px;text-align:center;min-width:84px}
.cd-item .num{font-size:28px;font-weight:900;display:block}.cd-item .lbl{font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.8}

.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:#0b1220}
.marquee-track{display:flex;gap:18px;align-items:center;padding:10px 0;animation:scroll 25s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:24px;opacity:.92}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Promo animated background */
.promo{position:relative;isolation:isolate}
.promo-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-1;opacity:.45;animation:promoSlide 12s infinite linear;filter:blur(1px)}
@keyframes promoSlide{
	0%{background-image:url('../img/promo/bg1.jpg')}
	33%{background-image:url('../img/promo/bg2.jpg')}
	66%{background-image:url('../img/promo/bg3.jpg')}
	100%{background-image:url('../img/promo/bg1.jpg')}
}
.promo-inner{padding:44px 0;text-align:center}
.promo h2{margin:0 0 8px;font-size:clamp(24px,3.8vw,40px)}
.promo .lead{color:#d1d5db;max-width:900px;margin:0 auto 14px}
.promo-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan-card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:22px;overflow:hidden;transition:transform .15s ease, box-shadow .25s, border-color .25s}
.plan-card:hover{transform:translateY(-3px);box-shadow:0 28px 60px rgba(0,0,0,.38);border-color:rgba(34,197,94,.5)}
.plan-head.centered{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:2px 0 6px}
.plan-head h3{margin:0;font-size:22px}
.ribbon{background:linear-gradient(90deg,#22c55e,#06b6d4);color:#052b18;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px}
.features{list-style:none;padding:0;margin:12px 0 0}
.features li{position:relative;padding-left:22px;margin:6px 0;color:#d1d5db}
.features li:before{content:'✓';position:absolute;left:0;top:0;color:#22c55e;font-weight:900}
.block{display:block;text-align:center;margin-top:12px}

.qas .accordion details{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px}
.qas .accordion details+details{margin-top:10px}
.qas .accordion summary{cursor:pointer;font-weight:800}
.qas .accordion p{color:#cbd5e1;margin:8px 0 0}

.features-bloc{background:linear-gradient(180deg,#0a1220,#0b1117);padding:44px 0}
.fgrid-vertical{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ftile-v{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:160px}
.ftile-v img{width:40px;height:40px;opacity:.95}
.ftile-v h3{margin:0;font-size:18px}
.ftile-v p{margin:2px 0 0;color:#cbd5e1;font-size:14px}

[data-fade]{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
[data-fade].in{opacity:1;transform:none}

.site-footer{padding:28px 0 10px;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(0deg, rgba(6,10,14,.85), rgba(6,10,14,.25))}
.footer-cta{text-align:center;margin-bottom:14px}
.footer-cta h3{margin:0 0 10px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-links{list-style:none;display:flex;gap:12px;padding:0;margin:0}

@media(max-width:980px){
	.nav{position:fixed;inset:60px 0 auto 0;background:rgba(8,10,14,.96);backdrop-filter:blur(8px);transform:translateY(-120%);transition:transform .25s; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.06)}
	.nav.open{transform:none}
	.nav-list{flex-direction:column;gap:0}
	.nav-list a{display:block;padding:14px 20px;border-top:1px solid rgba(255,255,255,.06)}
	.burger{display:block}
	.header-actions{margin-left:auto}
	.container{padding:0 16px}
	.hero-inner{padding:44px 0}
	.plans-grid{grid-template-columns:1fr}
	.fgrid-vertical{grid-template-columns:1fr}
	.marquee img{height:22px}
	.cta-btn,.ghost-btn{padding:12px 16px}
}


/* Flags marquee (below channels) */
.marquee-flags { background:#0b1322; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.marquee-flags .marquee-track img { height:22px; opacity:.95 }

/* Promo tighter spacing when used above plans */
.promo-tight .promo-inner{ padding:36px 0; }


/* Section Title (centered, pro) */
.section-title{ text-align:center; margin:40px auto 10px; }
.section-title h2{ margin:0; font-size:clamp(26px,4vw,42px); letter-spacing:-.2px }
.section-title .subtitle{ color:#cbd5e1; margin-top:6px }
.section-title .divider{ width:120px; height:3px; margin:14px auto 0; border-radius:4px; background:linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow:0 8px 30px rgba(0,0,0,.35) }

/* Contact Card */
.contact{ background:linear-gradient(180deg,#0a1220,#0a1118); }
.contact-card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:20px; max-width:980px; margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.35) }
.contact-head{ text-align:center; margin-bottom:14px }
.contact-head h2{ margin:0 0 6px }
.contact-methods{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:8px }
.badge{ display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border:1px solid rgba(255,255,255,.14); border-radius:999px; font-weight:700; color:#e5e7eb; text-decoration:none }
.badge:hover{ border-color:rgba(255,255,255,.32) }

.contact-form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.input, .textarea{ width:100%; background:#0f172a; color:#e5e7eb; border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:12px 14px; outline:none; }
.input:focus, .textarea:focus{ border-color: var(--accent); box-shadow:0 0 0 3px rgba(34,197,94,.15) }
.textarea{ min-height:120px; resize:vertical }
.contact-actions{ margin-top:10px; display:flex; gap:10px; justify-content:center }

@media(max-width:980px){
  .section-title{ margin-top:24px }
  .contact-card{ padding:16px }
  .contact-form .grid-2{ grid-template-columns:1fr; }
}


/* ---------- Mobile-first polish ---------- */
@media (max-width: 980px){
  body{ line-height:1.7 }
  .site-header{ backdrop-filter:blur(14px) saturate(120%); }
  .burger{ width:42px; height:40px }
  .nav{ position:fixed; inset:60px 0 0 0; height:calc(100dvh - 60px); display:grid; place-items:center;
        background:linear-gradient(180deg, rgba(8,10,14,.96), rgba(8,12,18,.94)); }
  .nav-list{ width:min(520px, 92vw); }
  .nav-list a{ font-size:18px; padding:16px 18px; border-top:1px solid rgba(255,255,255,.08); }
  .hero-inner{ padding:40px 0 }
  .hero-copy h1{ font-size: clamp(24px, 6vw, 34px) }
  .hero-copy p{ font-size: 15px }
  .countdown{ gap:8px; flex-wrap:wrap }
  .cd-item{ min-width:78px; padding:10px 12px }
  .marquee .marquee-track{ gap:14px; animation-duration:32s }
  .marquee-flags .marquee-track img{ height:20px }
  .promo .lead{ font-size:15px }
  .promo-actions{ gap:8px }
  .promo-actions .cta-btn, .promo-actions .ghost-btn{ flex:1; text-align:center }
  .plans-grid{ grid-template-columns:1fr; gap:14px }
  .plan-card{ padding:18px }
  .plan-head h3{ font-size:22px }
  .block{ width:100% }
  .fgrid-vertical{ grid-template-columns:1fr; }
  .ftile-v{ min-height:unset; }
  .qas .accordion summary{ font-size:16px }
  .contact-card{ padding:16px }
  .contact-form .grid-2{ grid-template-columns:1fr; gap:10px }
  .input, .textarea{ font-size:16px; padding:14px }
  .contact-actions .cta-btn{ width:100% }
  .footer-inner{ justify-content:center; gap:8px }
}
@media (max-width: 520px){
  .promo-inner{ padding:26px 0 }
  .promo-actions{ flex-direction:column }
  .promo-actions .cta-btn, .promo-actions .ghost-btn{ width:100% }
  .hero-copy h1{ font-size: clamp(22px, 7vw, 30px) }
  .cd-item .num{ font-size:24px }
}
/* Reduce animations for users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation-duration:0.001s; animation-iteration-count:1 }
  [data-fade]{ transition:none }
}

/* Sticky mobile CTA bar */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; display:none; gap:8px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(6,10,14,.9); border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px); z-index:90 }
.sticky-cta .cta-btn, .sticky-cta .ghost-btn{ flex:1; text-align:center; padding:12px 16px }
@media (max-width: 980px){ .sticky-cta{ display:flex } }


/* ---- v6.7 Mobile fixes ---- */
@media (max-width: 980px){
  .container{ padding: 0 14px }
  .site-header .header-inner{ padding:10px 0 }
  .header-actions .cta-btn, .header-actions .ghost-btn{ padding:8px 12px; font-size:14px }
  .hero-inner{ padding:34px 0 22px }
  .hero-copy h1{ font-size: clamp(22px, 6.2vw, 30px) }
  .hero-copy p{ font-size: 14px }
  .countdown{ margin-top:6px }
  .marquee .marquee-track{ gap:12px; padding:8px 0; animation-duration:34s }
  .marquee img{ height:20px }
  .marquee-flags .marquee-track img{ height:18px }
  .section{ padding: 60px 0 }
  .section-title{ margin: 28px auto 6px }
  .plans-grid{ gap:12px }
  .plan-card{ padding:16px; border-radius:18px }
  .ftile-v{ padding:16px }
  .contact-card{ margin-bottom: 18px }
}
@supports (padding: max(0px)){
  body{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* v6.8 header spacing after removing WhatsApp btn */
.header-actions{ gap:8px }
@media(max-width:980px){
  .header-actions{ margin-left:8px }
  .site-header .header-inner{ padding:10px 0 }
}


/* ---- Price tag styling ---- */
.price-tag{ display:inline-flex; align-items:baseline; gap:8px; margin-top:6px; padding:10px 14px;
  border-radius:14px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#06130d; 
  box-shadow:0 18px 40px rgba(0,0,0,.35); font-weight:900 }
.price-tag .only{ font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:.85 }
.price-tag .amount{ font-size:22px; line-height:1 }
.plan-head.centered .price-tag{ margin-top:6px }
@media(max-width:980px){ .price-tag{ padding:10px 12px } .price-tag .amount{ font-size:20px } }


/* ---- v6.10 Mobile centering + hide promo buttons ---- */
@media (max-width:980px){
  .hero-copy{ text-align:center }
  .hero-actions{ justify-content:center }
  .countdown{ justify-content:center }
  /* Hide promo buttons when promo sits under the 'Plans' heading on mobile */
  .promo .promo-actions{ display:none }
  /* Slight space after promo on mobile */
  .promo-tight .promo-inner{ padding-bottom: 18px }
}

/* v6.11 center plan features text */
.plan-card .features{ text-align:center }
.plan-card .features li{ padding-left:0; display:inline-flex; align-items:center; justify-content:center; gap:6px }
.plan-card .features li:before{ position:static; transform:none }


/* helper to show elements only on desktop */
.desktop-only{ display:block }
@media(max-width:980px){ .desktop-only{ display:none !important } }

/* v6.12: Each feature on its own line, centered */
.plan-card .features{ text-align:center }
.plan-card .features li{ display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 0; margin:0 }
.plan-card .features li:before{ position:static }


/* v6.14 — align promo buttons on same level */
.promo .promo-actions{ align-items:center }
.promo .promo-actions .cta-btn,
.promo .promo-actions .ghost-btn{ display:inline-flex; align-items:center; line-height:1 }


/* v6.16 — mobile-centered logo + icon spacing */
.logo{ display:flex; align-items:center; gap:8px }
.logo-ico{ display:inline-flex; align-items:center; justify-content:center }

@media(max-width:980px){
  .header-inner{ position:relative }
  .logo{ position:absolute; left:50%; transform:translateX(-50%); }
}