/* ════════════════════════════════════════════════════════════
   CYBERCARD — FULL LIGHT MODE
   Overrides global.css + landing.css + coming-soon.css
   Drop this file in /css/ and add it as the LAST stylesheet
   on both index.html and coming-soon.html
   ════════════════════════════════════════════════════════════ */

/* ── Root colour tokens ── */
:root {
  --bg:            #F5F7FF;
  --bg2:           #EBF0FF;
  --bg3:           #DDE6FF;
  --surface:       #FFFFFF;
  --surface2:      #F0F4FF;
  --border:        rgba(26,110,255,0.11);
  --border-bright: rgba(26,110,255,0.28);

  --cyan:          #1A6EFF;
  --cyan-dim:      rgba(26,110,255,0.08);
  --cyan-glow:     rgba(26,110,255,0.22);
  --cyan-deep:     #0044CC;

  --gold:          #B85C00;
  --gold-dim:      rgba(184,92,0,0.09);
  --gold-glow:     rgba(184,92,0,0.20);

  --blue:          #1A6EFF;
  --blue-dim:      rgba(26,110,255,0.09);

  --text:          #08102B;
  --text2:         #3A4870;
  --text3:         #8892B8;
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--text);
}

/* Grain overlay — soften on light */
body::after { opacity: 0.012; }

/* Scrollbar */
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(26,110,255,0.18); }

/* Gradient text — richer on light bg */
.grad-text {
  background: linear-gradient(135deg, #1A6EFF 0%, #00B4D8 50%, #0044CC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ════ NAV ════ */
#nav {
  background: rgba(245,247,255,0.88);
  border-bottom: 1px solid rgba(26,110,255,0.10);
  box-shadow: none;
}
#nav.scrolled {
  box-shadow: 0 4px 28px rgba(26,110,255,0.08);
}
.nav-logo-name { color: var(--text); }
.nav-logo-name span { color: var(--cyan); }
.nav-logo-mark svg { filter: drop-shadow(0 0 8px rgba(26,110,255,0.20)); }

.btn-ghost { color: var(--text2); }
.btn-ghost:hover { color: var(--text); background: rgba(26,110,255,0.06); }

.btn-outline {
  color: var(--text2);
  border-color: rgba(26,110,255,0.18);
}
.btn-outline:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
}

.hamburger span { background: var(--text); }

/* Mobile menu */
.mobile-menu {
  background: rgba(245,247,255,0.98);
  border-bottom: 1px solid rgba(26,110,255,0.10);
}
.mobile-menu button { color: var(--text2); }
.mobile-menu button:hover { color: var(--cyan); }
.mobile-menu .m-divider { background: var(--border); }

/* ════ HERO ════ */
#hero { background: var(--bg); }

.hero-grid {
  background-image:
    linear-gradient(rgba(26,110,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,110,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-radial-1 { background: radial-gradient(circle, rgba(26,110,255,0.10) 0%, transparent 65%); }
.hero-radial-2 { background: radial-gradient(circle, rgba(0,180,216,0.08) 0%, transparent 65%); }
.hero-radial-3 { background: radial-gradient(ellipse, rgba(184,92,0,0.05) 0%, transparent 70%); }

.hero-scan { background: linear-gradient(90deg, transparent, rgba(26,110,255,0.15), transparent); }

/* Hero badge */
.hero-badge {
  background: rgba(26,110,255,0.07);
  border-color: rgba(26,110,255,0.20);
  color: var(--cyan);
}
.badge-dot { background: var(--cyan); }

.hero-title  { color: var(--text); }
.hero-desc   { color: var(--text2); }

/* Stats */
.hero-stats  { border-top-color: var(--border); }
.hero-stat-num   { color: var(--text); }
.hero-stat-label { color: var(--text3); }
.stat-divider    { background: var(--border); }

/* Cards glow */
.hero-cards-glow {
  background: radial-gradient(ellipse, rgba(26,110,255,0.10) 0%, transparent 70%);
}

/* ── Step connector circles ── */
.step-connector {
  background: var(--bg2);
  border-color: var(--border-bright);
  color: var(--cyan);
}

/* ════ CARD TYPES STRIP ════ */
#card-types {
  background: rgba(26,110,255,0.02);
  border-color: var(--border);
}
.chip-label { color: var(--text3); }
.chip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text2);
  box-shadow: 0 1px 4px rgba(26,110,255,0.04);
}
.chip:hover {
  border-color: var(--border-bright);
  color: var(--cyan);
  background: var(--cyan-dim);
}

/* ════ FEATURES ════ */
#features {
  background: linear-gradient(180deg, transparent 0%, var(--bg2) 15%, var(--bg2) 85%, transparent 100%);
}
.feat-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(26,110,255,0.04);
}
.feat-card::before {
  background: radial-gradient(circle at 20% 20%, rgba(26,110,255,0.06), transparent 60%);
}
.feat-card:hover {
  border-color: var(--border-bright);
  box-shadow: 0 14px 40px rgba(26,110,255,0.10);
}
.feat-icon-wrap {
  background: rgba(26,110,255,0.07);
  border-color: rgba(26,110,255,0.15);
}
.feat-title { color: var(--text); }
.feat-desc  { color: var(--text2); }

/* ════ HOW IT WORKS ════ */
#how { background: var(--bg); }
.how-bg-line {
  background: linear-gradient(90deg, transparent, var(--border), var(--border-bright), var(--border), transparent);
}
.how-step {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(26,110,255,0.04);
}
.how-step:hover {
  border-color: var(--border-bright);
  box-shadow: 0 8px 28px rgba(26,110,255,0.09);
}
.step-num {
  background: linear-gradient(180deg, rgba(26,110,255,0.20) 0%, transparent 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.step-icon-wrap {
  background: linear-gradient(135deg, rgba(26,110,255,0.08), rgba(26,110,255,0.05));
  border-color: rgba(26,110,255,0.20);
  box-shadow: 0 0 20px rgba(26,110,255,0.08);
}
.step-title { color: var(--text); }
.step-desc  { color: var(--text2); }

/* ════ PRICING ════ */
#pricing {
  background: linear-gradient(180deg, transparent 0%, var(--bg2) 15%, var(--bg2) 85%, transparent 100%);
}
.pricing-toggle { color: var(--text2); }
.toggle-label.active { color: var(--text); }

.plan-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 2px 16px rgba(26,110,255,0.04);
}
.plan-card.popular {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 20px 60px rgba(26,110,255,0.10);
}
.plan-card:hover { box-shadow: 0 24px 60px rgba(26,110,255,0.12); }
.plan-card.popular:hover { box-shadow: 0 0 0 1px var(--cyan), 0 24px 60px rgba(26,110,255,0.18); }

.popular-tag {
  background: var(--cyan);
  color: #FFFFFF;
}
.plan-tier     { color: var(--text2); }
.plan-currency { color: var(--text2); }
.plan-amount   { color: var(--text); }
.plan-period   { color: var(--text3); }
.plan-prints   { color: var(--text3); border-bottom-color: var(--border); }
.plan-prints strong { color: var(--cyan); }
.plan-feature  { color: var(--text2); }
.plan-check {
  background: rgba(26,110,255,0.08);
  border-color: rgba(26,110,255,0.20);
  color: var(--cyan);
}
.plan-btn.primary {
  background: linear-gradient(135deg, var(--cyan), #0044CC);
  color: #FFFFFF;
}
.plan-btn.primary:hover { box-shadow: 0 8px 32px rgba(26,110,255,0.28); }
.plan-btn.secondary {
  border-color: var(--border);
  color: var(--text2);
}
.plan-btn.secondary:hover {
  border-color: var(--border-bright);
  color: var(--cyan);
  background: var(--cyan-dim);
}

/* skeleton in light */
.skeleton {
  background: linear-gradient(90deg, #e8eeff 25%, #f0f4ff 50%, #e8eeff 75%);
  background-size: 200% 100%;
}

/* ════ TRUST ════ */
#trust { border-color: var(--border); }
.trust-icon-wrap {
  background: var(--surface2);
  border-color: var(--border);
  box-shadow: 0 1px 6px rgba(26,110,255,0.04);
}
.trust-name { color: var(--text); }
.trust-sub  { color: var(--text3); }

/* ════ CTA BANNER ════ */
#cta-banner { background: var(--bg); }
.cta-orb {
  background: radial-gradient(ellipse, rgba(26,110,255,0.07) 0%, transparent 70%);
}
.cta-title { color: var(--text); }
.cta-sub   { color: var(--text2); }

/* ════ FOOTER ════ */
#footer {
  background: var(--bg2);
  border-top-color: var(--border);
}
.footer-brand-desc { color: var(--text2); }
.footer-address    { color: var(--text3); }
.footer-col-title  { color: var(--text3); }
.footer-link       { color: var(--text2); }
.footer-link:hover { color: var(--cyan); }
.footer-link.whatsapp:hover { color: #128C7E; }
.footer-bottom  { border-top-color: var(--border); }
.footer-copy    { color: var(--text3); }
.footer-tagline-small { color: var(--text3); }

/* ════ COMING SOON PAGE ════ */
#coming-soon-page {
  background: var(--bg);
}

.cs-bg { background: var(--bg); }

.cs-grid {
  background-image:
    linear-gradient(rgba(26,110,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,110,255,0.055) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cs-orb-1 { background: radial-gradient(circle, rgba(26,110,255,0.09) 0%, transparent 65%); }
.cs-orb-2 { background: radial-gradient(circle, rgba(0,180,216,0.06) 0%, transparent 65%); }

.particle { background: var(--cyan); }

/* Printer */
.printer-body {
  background: linear-gradient(180deg, #E4EBFF 0%, #CDD9FF 100%);
  border-color: rgba(26,110,255,0.18);
  box-shadow:
    0 6px 30px rgba(26,110,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 0 0 1px rgba(26,110,255,0.06);
}
.printer-model { color: rgba(8,16,43,0.28); }
.printer-indicator {
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(26,110,255,0.50);
}
.printer-vent span { background: rgba(26,110,255,0.14); }
.printer-slot {
  background: #B8C8F0;
  box-shadow: inset 0 2px 6px rgba(26,110,255,0.12);
}

/* Logo */
.cs-site-logo svg { filter: drop-shadow(0 0 8px rgba(26,110,255,0.22)); }
.cs-site-name { color: var(--text); }
.cs-site-name span { color: var(--cyan); }

/* Status badge */
.cs-status-badge {
  background: rgba(26,110,255,0.07);
  border-color: rgba(26,110,255,0.22);
  color: var(--cyan);
}
.cs-status-dot {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(26,110,255,0.45);
}

/* Text */
.cs-headline { color: var(--text); }
.cs-desc     { color: var(--text2); }

/* Notify */
.cs-notify-label { color: var(--text3); }
.cs-notify-input {
  background: #FFFFFF;
  border-color: rgba(26,110,255,0.16);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(26,110,255,0.05);
}
.cs-notify-input::placeholder { color: #A0AECE; }
.cs-notify-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(26,110,255,0.10);
}
.cs-notify-btn {
  background: linear-gradient(135deg, #1A6EFF, #0044CC);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(26,110,255,0.22);
}
.cs-notify-btn:hover { box-shadow: 0 8px 28px rgba(26,110,255,0.32); }

.cs-notify-success {
  background: rgba(26,110,255,0.06);
  border-color: rgba(26,110,255,0.18);
  color: var(--cyan);
}

/* Support */
.cs-support-label { color: var(--text3); }
.cs-support-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text2);
  box-shadow: 0 1px 4px rgba(26,110,255,0.05);
}
.cs-support-btn:hover {
  border-color: var(--border-bright);
  color: var(--cyan);
  background: var(--cyan-dim);
}
.cs-support-btn.wa:hover {
  border-color: rgba(18,140,126,0.35);
  color: #128C7E;
  background: rgba(18,140,126,0.06);
}

/* Admin + footer */
.cs-admin-note { color: var(--text3); }
.cs-admin-note a { color: var(--cyan); }
.cs-foot { color: var(--text3); }