/* ---------- VARIABLES ---------- */
:root{
  --red: #d62828;
  --red-dark: #a31b1b;
  --bg: #ffffff;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #111827;
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 8px 30px rgba(16,24,40,0.06);
  --container: 1200px;
}

body { font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); background:var(--bg); margin:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* dark */
body.dark { --bg:#071018; --card:#0f1720; --muted:#9aa1ab; --text:#e6eef8; }

/* container */
.container{ width:90%; max-width:var(--container); margin:0 auto; }

/* Navbar logo */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nav-logo {
    width: 150px;
    height: 80px;
    object-fit: contain;
    border-radius: 3px;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nav-text, #111);
}

/* Mobile nav fix */
@media (max-width: 768px) {
    .nav-logo {
        width: 100px;
        height: 80px;
    }
    .brand-name {
        font-size: 1rem;
    }
}

/* NAV */
#navbar{ position:fixed; top:0; left:0; width:100%; z-index:999; transition:padding .28s, box-shadow .28s; background: rgba(255,255,255,0.8); backdrop-filter: blur(6px); padding:18px 0; box-sizing:border-box; }
body.dark #navbar{ background: rgba(8,10,12,0.7); }
#navbar.shrink { padding:8px 0; box-shadow: var(--shadow); }

.nav-wrapper{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo{ font-weight:700; font-size:20px; color:var(--red); display:flex; align-items:center; gap:8px; }
.logo-dot{ width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 6px 18px rgba(214,40,40,0.12); }

nav ul{ display:flex; gap:18px; list-style:none; align-items:center; padding-left:0; margin:0; }
nav a{ color:var(--text); text-decoration:none; font-weight:600; font-size:0.95rem; }
body.dark nav a{ color:var(--text); }
nav a:hover{ color:var(--red); }

.nav-actions{ display:flex; gap:10px; align-items:center; }
.theme-btn{ background:transparent; border:0; font-size:18px; cursor:pointer; padding:6px 8px; }
.btn-login{ background:#444; color:#fff; border-radius:8px; padding:8px 12px; text-decoration:none; font-weight:700; }
.btn-login:hover{ background:#222; }
.nav-btn{ background:var(--red); color:#fff; border-radius:8px; padding:9px 14px; border:0; font-weight:700; cursor:pointer; }
.nav-btn:hover{ background:var(--red-dark); }

/* HERO */
.hero-section{ position:relative; height:86vh; min-height:480px; overflow:hidden; display:flex; align-items:center; }
.hero-track{ position:absolute; inset:0; display:flex; height:100%; }
.hero-slide{ min-width:100%; height:100%; background-size:cover; background-position:center; opacity:0; animation:heroFade 28s linear infinite; }
.hero-slide:nth-child(1){ animation-delay:0s }
.hero-slide:nth-child(2){ animation-delay:7s }
.hero-slide:nth-child(3){ animation-delay:14s }
.hero-slide:nth-child(4){ animation-delay:21s }
@keyframes heroFade{ 0%{opacity:0} 5%{opacity:1} 25%{opacity:1} 30%{opacity:0} 100%{opacity:0} }

.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.35)); pointer-events:none; }
.hero-content{ position:relative; z-index:5; color:white; max-width:760px; margin-left:6%; text-shadow:0 6px 20px rgba(0,0,0,0.45); }
.hero-content h1{ font-size:clamp(1.6rem, 3.6vw, 2.8rem); margin:0 0 12px 0; line-height:1.05; }
.hero-content p{ font-weight:300; margin:0 0 16px 0; }
.cta{ display:inline-block; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:700; margin-right:10px; }
.cta.primary{ background:var(--red); color:#fff; }
.cta.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.18); color:#fff; }

/* SECTION */
.section{ padding:72px 0; }
.section-head{ text-align:center; margin-bottom:28px; }
.muted{ color:var(--muted); }

/* PROMO */
.promo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.promo-card{ background:var(--card); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.promo-img{ height:160px; background-size:cover; background-position:center; }
.promo-body{ padding:14px; }

/* FEATURES */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature-box{ background:var(--card); padding:18px; border-radius:12px; text-align:center; box-shadow:var(--shadow); }
.feature-box .icon{ font-size:22px; margin-bottom:8px; color:var(--red); }

/* CAROUSEL (Packages) */
.carousel-wrap{ overflow:hidden; }
.carousel{ width:100%; overflow:visible; }
.carousel-track{ display:flex; gap:18px; align-items:stretch; transition:transform .5s cubic-bezier(.22,.9,.27,1); will-change:transform; }
.card{ flex:0 0 300px; background:var(--card); border-radius:12px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; position:relative; }
.card .speed{ font-size:1.4rem; font-weight:800; color:var(--red); }
.tagline{ color:var(--muted); font-style:italic; font-size:.95rem; }
.specs{ list-style:none; padding:0; margin:8px 0 0 0; color:var(--muted); }
.btn-select{ margin-top:auto; background:var(--red); color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700; }
.btn-select:hover{ background:var(--red-dark); }
.highlight{ border:2px solid var(--red); }
.badge{ position:absolute; top:-8px; right:-8px; background:var(--red); color:#fff; padding:6px 10px; border-radius:8px; font-weight:700; }

/* responsive: show fewer columns on small screens and make carousel vertical fallback */
@media (max-width:900px){
  .promo-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .promo-grid{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .carousel-track{ display:block; }
  .card{ width:100%; margin-bottom:16px; }
}

/* TESTIMONI */
.testi-wrap{ overflow:hidden; }
.testi-track{ display:flex; gap:18px; align-items:stretch; transform:translateX(0); transition:transform .6s ease; }
.testi{ background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow); min-width:240px; }

/* FAQ */
.faq-list{ display:grid; gap:12px; max-width:900px; margin:0 auto; }
.faq{ background:var(--card); padding:12px 16px; border-radius:10px; box-shadow:var(--shadow); }

/* FOOTER */
.site-footer{ background:#07121a; color:#dbe7ee; padding:40px 0 24px 0; margin-top:40px; }
.footer-grid{ display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; }
.footer-col h4{ margin-bottom:8px; }
.footer-bottom{ text-align:center; margin-top:16px; opacity:0.85; }

/* MODAL */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); z-index:99999; padding:20px; }
.modal.show{ display:flex; }
.modal-inner{ background:var(--card); padding:18px; border-radius:10px; width:100%; max-width:720px; box-shadow:var(--shadow); color:var(--text); }
.modal-close{ position:absolute; right:26px; top:26px; border:0; background:transparent; font-size:22px; cursor:pointer; }
.reg-form .row{ display:flex; gap:12px; margin-bottom:12px; }
.reg-form label{ display:block; width:100%; font-weight:600; font-size:0.9rem; color:var(--muted); }
.reg-form input, .reg-form textarea, .reg-form select{ width:100%; padding:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); background:transparent; color:var(--text); box-sizing:border-box; }

/* modal actions */
.actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

/* WHATSAPP FAB */
.whatsapp-fab{ position:fixed; right:18px; bottom:18px; background:linear-gradient(180deg,var(--red),var(--red-dark)); color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:0 12px 30px rgba(214,40,40,0.18); z-index:99999; text-decoration:none; }
/* Floating WhatsApp Button */
.floating-wa {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 72px;
    height: 72px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.20);
    z-index: 9999;
    animation: floatWA 3s ease-in-out infinite;
    cursor: pointer;
    transition: transform .25s ease;
    overflow: hidden;
}

.floating-wa:hover {
    transform: scale(1.14);
}

.wa-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    pointer-events: none;
}

/* Floating Up-Down Animation */
@keyframes floatWA {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}


/* AOS */
[data-aos]{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
[data-aos].show{ opacity:1; transform:none; }