/* High-contrast, accessible styles optimized for older users */
:root{
  --blue:#1976d2;          /* Primary blue */
  --dark-blue:#0d47a1;     /* Deeper blue */
  --red:#d32f2f;           /* Urgency red */
  --green:#2e7d32;         /* Promo green */
  --text:#111;             /* High-contrast text */
  --muted:#666;            /* Secondary text */
  --bg:#fff;               /* Background */
  --box:#8ec4e9;           /* Countdown box */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px; line-height:1.6;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.top-banner{ text-align:center; padding:20px 12px }
.badge-row{display:flex; justify-content:center; gap:8px; margin-bottom:8px}
.badge{max-width:120px; height:auto}
.actual-price{font-weight:700; color:#333; margin:4px 0}
.promo-price{font-weight:800; color:var(--green); margin:4px 0}
.promo-price .naira,.actual-price .naira{font-weight:900}
.hero-img{max-width:420px; width:100%; height:auto; display:block; margin:8px auto 0}
.cta-row{ display:flex; justify-content:center; margin:12px 0 }
.cta-row .btn-primary{ max-width:240px }

.video-section{ position:relative; max-width:720px; margin:0 auto; padding:12px }
.promo-video{ width:100%; border:4px solid var(--dark-blue); border-radius:8px; background:#000 }
.tap-overlay{ position:absolute; inset:auto 12px 12px auto; right:12px; background:rgba(255,255,255,.92); color:#000; padding:8px 12px; border-radius:6px; font-weight:700; display:none }

.guarantee{ text-align:center; padding:18px 12px }
.guarantee h1{ color:var(--dark-blue); font-size:1.6rem; margin:0 0 6px }
.guarantee-text{ color:#fff; background:var(--red); padding:12px; border-radius:6px; font-weight:800; text-transform:uppercase }

.specs{ max-width:720px; margin:0 auto; padding:12px }
.specs h2{ color:var(--dark-blue); font-size:1.25rem; margin:0 0 8px }
.benefits{ padding-left:1.25rem; }
.benefits li{ margin:6px 0 }

.urgency{ text-align:center; padding:16px 12px }
.cod-img{ max-width:360px; width:100%; height:auto; display:block; margin:8px auto }
.warning-img{ max-width:360px; width:100%; height:auto; display:block; margin:8px auto }
.urgency h2{ color:var(--dark-blue); font-size:1.4rem; margin:8px 0 }
.countdown{ display:flex; justify-content:center; gap:10px; max-width:720px; margin:0 auto }
.time-box{ background:var(--box); color:#fff; width:50%; max-width:360px; padding:14px; border-radius:6px }
.time-val{ font-size:2.25rem; font-weight:900; line-height:1.1 }
.time-label{ font-size:.9rem; opacity:.95 }
.remaining{ color:var(--red); font-weight:900; text-transform:uppercase; margin-top:10px }

.order{ max-width:720px; margin:12px auto; padding:12px }
.order h2{ color:var(--dark-blue); font-size:1.4rem; margin:0 0 6px }
.contact{ margin:4px 0 12px }
.contact a{ color:var(--blue); font-weight:700; text-decoration:none }
.form-grid{ display:grid; grid-template-columns:1fr; gap:10px }
.form-grid label{ font-weight:700; }
.form-grid input{ padding:12px; border:2px solid #bbb; border-radius:6px; font-size:1rem }
.form-grid input:invalid{ border-color: var(--red); outline: none }
.form-grid input:focus:invalid{ box-shadow: 0 0 0 3px rgba(211,47,47,.2) }
.form-grid input:valid{ border-color: #8bc34a }
.packages{ margin:12px 0; padding:8px; border:2px solid #ddd; border-radius:6px }
.packages legend{ font-weight:800 }
.pkg{ display:block; margin:8px 0; color:#333 }
.pkg input{ margin-right:8px }
.btn-primary{ width:100%; padding:14px; font-size:1.1rem; font-weight:800; color:#fff; background:var(--green); border:0; border-radius:8px; cursor:pointer }
.btn-primary:hover{ filter:brightness(1.05) }
.privacy{ color:var(--muted); font-size:.95rem; margin-top:8px }

.back-to-top{ position:fixed; right:12px; bottom:12px; width:44px; height:44px; border-radius:8px; border:0; background:#1976d2; color:#fff; font-weight:900; cursor:pointer }

/* Responsive tweaks */
@media (min-width:640px){
  .time-box{ width:280px }
  .video-grid{ grid-template-columns:1fr 1fr }
}
.more-videos{ max-width:720px; margin:0 auto; padding:12px }
.more-videos h2{ color:var(--dark-blue); font-size:1.25rem; margin:6px 0 10px }
.video-grid{ display:grid; grid-template-columns:1fr; gap:12px }
.promo-video.small{ border-width:2px }