/* =========================================
   DESIGN TOKENS — Banking Blue + Emerald (NG VTU)
   ========================================= */
:root{
  /* Core palette */
  --bg:#0b1220;
  --surface:#0f172a;   /* headers / nav / major surfaces */
  --surface-2:#111827; /* cards / panels */
  --text:#e5e7eb;
  --muted:#94a3b8;

  /* Brand */
  --brand:#2563eb;       /* blue-500 */
  --brand-dark:#1d4ed8;  /* blue-600 */
  --accent:#10b981;      /* emerald-500 */
  --brand-gradient: linear-gradient(135deg, var(--brand-dark), var(--brand));

  /* Status */
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  /* UI */
  --border: rgba(148,163,184,0.20);
  --glass: rgba(255,255,255,0.06);
  --card-hover: rgba(255,255,255,0.08);
  --card-shadow: rgba(2,6,23,0.45);
}

/* =========================================
   BASE / RESET
   ========================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body {
  background: var(--bg) no-repeat fixed;
  overflow-x: hidden;
  /* subtle ambient tints */
  background-image:
    radial-gradient(60% 40% at 50% -10%, rgba(37,99,235,0.16), transparent 60%),
    radial-gradient(50% 40% at 95% 110%, rgba(16,185,129,0.12), transparent 60%);
}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  min-height:100vh;
  padding-bottom:70px; /* room for bottom navbar */
}

a, a:hover, a:focus{ text-decoration:none; }
.spinner-border-sm{ width:1rem; height:1rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* =========================================
   UTILITIES
   ========================================= */
.glass{
  background:var(--surface-2);
  border-radius:1rem;
  border:1px solid var(--border);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  padding:1rem;
}
.card-link{ color:inherit; }
.text-accent{ color:var(--accent) !important; }
.max-w-500{ max-width:500px; }
.hidden{ display:none !important; }
.animate-pop{ animation:pop-in .35s ease both; }

@keyframes pop-in{
  from{ transform:translateY(8px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* =========================================
   CARDS
   ========================================= */
.card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 8px 20px var(--card-shadow);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  text-align:center;
  padding:1rem;
}
.card:hover{
  transform:translateY(-3px);
  background:var(--card-hover);
  box-shadow:0 12px 28px rgba(2,6,23,0.55);
}
.card i{ font-size:2rem; margin-bottom:.5rem; transition:transform .16s ease; }
.card:hover i{ transform:translateY(-1px); }
.card h6{ margin-top:.3rem; font-weight:600; }

/* =========================================
   BUTTONS
   ========================================= */
.btn-brand{
  background:var(--brand-gradient);
  color:#fff; font-weight:700;
  border:none; border-radius:.9rem;
  padding:.6rem 1.2rem;
  display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 6px 16px rgba(29,78,216,.36);
  transition:transform .15s ease, filter .15s ease;
}
.btn-brand:hover{ transform:translateY(-1px); color:#fff; filter:brightness(1.05); }
.btn-brand:disabled{ opacity:.85; cursor:not-allowed; }

.btn-neutral{
  background:#e5e7eb; color:#0f172a;
  border:none; border-radius:.9rem; padding:.6rem 1rem;
  font-weight:600;
}
.btn-neutral:hover{ filter:brightness(1.03); }

.fund-btn{
  background:linear-gradient(135deg, var(--brand-dark), var(--accent));
  color:#fff; font-weight:700;
  border-radius:1rem; padding:.5rem 1.2rem;
  display:flex; align-items:center; gap:.5rem;
  box-shadow:0 8px 20px rgba(17,24,39,0.35);
  transition:transform .18s ease, filter .15s ease, color .15s ease;
}
.fund-btn:hover{ transform:translateY(-1px); color:#fff; }

/* =========================================
   HEADER (DASHBOARD)
   ========================================= */
.header-bar{
  background:var(--surface);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:1rem 1rem 0 0;
  padding:1rem 1.5rem;
  margin-bottom:1rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.header-left button{
  border:none; background:transparent; color:#fff; font-size:1.5rem;
}
.header-left button:focus-visible{
  outline:2px solid rgba(16,185,129,0.85);
  outline-offset:2px;
}
.header-center{ display:flex; flex-direction:column; margin-left:1rem; }
.header-center .greeting{ font-size:.9rem; font-weight:400; color:var(--muted); margin:0; }
.header-center .username{ font-size:1.4rem; font-weight:700; color:var(--accent); margin:0; cursor:pointer; }
.header-right{ display:flex; align-items:center; gap:1rem; }
.balance-badge{
  background:linear-gradient(135deg, var(--brand), var(--accent));
  color:#fff;
  padding:.5rem 1rem;
  border-radius:50px;
  font-weight:800; font-size:1rem;
  box-shadow:0 4px 15px rgba(17,24,39,0.35);
}

/* Responsive header tweaks */
@media (max-width:576px){
  .header-bar{ flex-direction:column; align-items:flex-start; }
  .header-left, .header-right{ justify-content:flex-start; }
  .header-right{ margin-top:.5rem; width:100%; justify-content:space-between; }
}

/* =========================================
   BOTTOM NAVBAR
   ========================================= */
.navbar-bottom{
  position:fixed; bottom:0; left:0; right:0;
  background:var(--surface);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  z-index:1030; display:flex; justify-content:space-around; padding:.6rem 0;
  height:70px;
}
.nav-link{
  color:#fff!important; display:flex; flex-direction:column; align-items:center;
  font-size:.75rem; transition:color .18s ease;
}
.nav-link i{ font-size:1.25rem; margin-bottom:.2rem; transition:transform .16s ease; }
.nav-link:hover, .nav-link.active{ color:var(--accent)!important; }
.nav-link:hover i{ transform:translateY(-1px); }

/* =========================================
   OFFCANVAS
   ========================================= */
.offcanvas{
  background:var(--surface);
  border-right:1px solid var(--border);
  color:#fff;
}
.offcanvas-header{
  border-bottom:1px solid var(--border);
  margin-bottom:1rem;
}
.offcanvas h6{
  font-weight:700; margin-top:1rem; margin-bottom:.5rem; color:var(--accent);
}
.offcanvas ul{ padding-left:0; margin-bottom:1rem; }
.offcanvas ul li{ margin-bottom:.5rem; list-style:none; }
.offcanvas ul li a{
  display:flex; align-items:center; gap:.7rem;
  color:#fff; padding:.5rem 1rem;
  border-radius:.5rem; transition:background .15s ease, color .15s ease;
}
.offcanvas ul li a:hover{ background:rgba(255,255,255,0.06); color:var(--accent); }

/* Offcanvas sticky footer (Sign out at bottom) */
.offcanvas-footer{
  position:sticky; bottom:0;
  background:var(--surface-2);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
  padding:1rem;
}
.btn-signout{
  width:100%;
  background:linear-gradient(135deg,#d9534f,#c9302c);
  color:#fff; font-weight:700;
  border:none; border-radius:1rem; padding:.6rem 1rem;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  transition:transform .18s ease, filter .15s ease, color .15s ease;
}
.btn-signout:hover{ transform:translateY(-1px); }

/* =========================================
   SUPPORT FAB
   ========================================= */
.support-btn{
  position:fixed; bottom:80px; right:1rem;
  background:var(--accent); color:#012318;
  border:none; border-radius:50%;
  width:60px; height:60px; font-size:1.5rem;
  display:flex; justify-content:center; align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  cursor:pointer; transition:transform .18s ease;
}
.support-btn:hover{ transform:scale(1.05); }

/* =========================================
   FORMS: CARD SHELL
   ========================================= */
.form-card{
  max-width:600px; margin:0 auto;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:1rem; padding:1.25rem;
}
.form-label{ font-weight:600; }
.help-text{ font-size:.85rem; color:var(--muted); }

/* =========================================
   CONTENT ELEMENTS
   ========================================= */
.quote{
  font-size:.9rem; background:rgba(255,255,255,0.06);
  border:1px dashed var(--border);
  padding:.6rem; border-radius:.6rem;
}
.badge-soft{
  background:rgba(255,255,255,0.08);
  border:1px solid var(--border);
  color:#fff;
}

/* Transactions */
.tx-item{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  border-radius:.75rem; padding:.75rem;
}
.status-pill{ padding:.15rem .5rem; border-radius:1rem; font-size:.75rem; }
.status-success{
  background:rgba(34,197,94,0.14);
  border:1px solid rgba(34,197,94,0.35);
  color:#cff6dc;
}
.status-pending{
  background:rgba(245,158,11,0.14);
  border:1px solid rgba(245,158,11,0.35);
  color:#f7e2b8;
}
.status-failed{
  background:rgba(239,68,68,0.16);
  border:1px solid rgba(239,68,68,0.35);
  color:#ffd7d9;
}
.status-refunded{
  background:rgba(59,130,246,0.16);
  border:1px solid rgba(59,130,246,0.35);
  color:#d6e6ff;
}

/* Site footer */
.site-footer{
  margin:1rem 1rem 6rem;
  border-radius:1rem;
  background:var(--surface);
  border:1px solid var(--border);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:1rem;
}
.footer-title{ font-weight:700; color:var(--accent); margin-bottom:.5rem; }
.footer-text{ color:var(--text); opacity:.92; }
.footer-list{ padding-left:0; margin:0; }
.footer-list li{ list-style:none; }
.footer-list a{ color:#fff; }
.footer-list a:hover{ color:var(--accent); }
.footer{ text-align:center; color:#cfd8e3; border-top:1px solid var(--border); }

/* Alerts */
.alert a{ color:inherit; text-decoration:none; font-weight:600; }

/* =========================================
   PIN MODAL (custom)
   ========================================= */
#pinModal{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.6);
  justify-content:center; align-items:center;
  z-index:2000;
}
#pinModal .modal-content{
  background:#ffffff; color:#000000;
  padding:20px; border-radius:8px; text-align:center;
  animation:pin-pop-in .3s cubic-bezier(0.22,1,0.36,1);
  max-width:340px; width:90%;
}
#pinModal input{
  width:100%; padding:10px 12px; margin-top:8px;
  border-radius:6px; border:1px solid #ddd;
}
#pinModal button{
  margin-top:10px; width:100%;
  background:var(--brand-gradient);
  color:#fff; border:none; border-radius:1rem; padding:10px 14px; font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
  transition:transform .18s ease;
}
#pinModal button:hover{ transform:translateY(-1px); }
#pinError{ color:#dc3545; margin-top:10px; }
#successMessage{
  position:fixed; bottom:20px; right:20px;
  background:#4CAF50; color:#fff; padding:15px 20px;
  border-radius:6px; z-index:2000;
}
@keyframes pin-pop-in{
  from{ transform:scale(0.98); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

/* =========================================
   ABOUT / HERO / ACCORDION
   ========================================= */
.section-title{ font-weight:700; color:var(--accent); margin-bottom:.75rem; }
.small-muted{ color:var(--muted); font-size:.95rem; }
hr.soft{ border-color:var(--border); }

.hero{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
}
.pill{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--border);
  margin-right:.4rem; margin-bottom:.3rem;
}

.accordion-button{ background:rgba(255,255,255,0.06); color:#fff; }
.accordion-button:not(.collapsed){ color:var(--accent); background:rgba(255,255,255,0.08); }
.accordion-body{ background:rgba(255,255,255,0.06); color:#fff; }

/* =========================================
   AIRTIME-TO-CASH / NETWORK CARDS
   ========================================= */
.net-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap:16px; margin-bottom:12px;
}
.net-card{
  position:relative;
  width:100%; text-align:left;
  padding:14px; border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color:#fff; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  transition:transform .16s ease, box-shadow .16s ease, outline-color .16s ease, background .16s ease;
  will-change:transform;
}
.net-card:hover{ transform: translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.28); background: rgba(255,255,255,.08); }
.net-card.active{ outline:2px solid var(--accent); background:rgba(255,255,255,0.10); }
.net-card.disabled{ opacity:.5; cursor:not-allowed; }
.net-logo,
.net-card .logo{
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#000; background:rgba(255,255,255,.18);
}
.net-card .t{ font-weight:800; font-size:1.06rem; }
.net-card small{ opacity:.95; color:#e9e7ff; }
.badge-fee{
  background:rgba(255,255,255,0.10);
  border:1px solid var(--border);
  color:#fff;
}
.info-line{ font-size:.95rem; color:#e9e9e9; }
.code-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; border-radius:.5rem;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--border);
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  color:#fff;
}
.step-list{ margin:0; padding-left:1rem; }
.step-list li{ margin-bottom:.35rem; }

/* Network color accents (subtle) */
.net-card.mtn    { border-color: rgba(245,158,11,.45); box-shadow: inset 0 0 0 1px rgba(245,158,11,.18); }
.net-card.airtel { border-color: rgba(239,68,68,.45);  box-shadow: inset 0 0 0 1px rgba(239,68,68,.18); }
.net-card.glo    { border-color: rgba(16,185,129,.45); box-shadow: inset 0 0 0 1px rgba(16,185,129,.18); }
.net-card.nmobile{ border-color: rgba(59,130,246,.45); box-shadow: inset 0 0 0 1px rgba(59,130,246,.18); }
.net-card.smile  { border-color: rgba(37,99,235,.45); box-shadow: inset 0 0 0 1px rgba(37,99,235,.18); }

/* =========================================
   DATA PLANS
   ========================================= */
.data-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap:16px;
}
.data-card{
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  padding:14px;
  aspect-ratio: 1 / 1;
  display:grid; grid-template-rows: auto 1fr auto;
  align-items:start; overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  will-change: transform; text-align:left;
}
.data-card:hover{ transform: translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.30); background: var(--card-hover); }
.plan-name{
  font-weight:700; font-size:.95rem; color:#fff; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.plan-meta{
  font-size:.78rem; color:#e9e7ff; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.plan-price{ font-weight:800; color:var(--accent); font-size:1.05rem; }
.network-tag{
  display:inline-block; padding:.15rem .6rem; border-radius:6px;
  background:rgba(0,0,0,.22); font-size:.72rem; color:#fff; margin-right:.4rem;
}
.data-card .mt-3{ margin-top:auto !important; }

.skeleton{
  overflow:hidden; background: rgba(255,255,255,.07);
  border:1px solid var(--border);
  border-radius:12px; height:auto;
  aspect-ratio: 1 / 1; position:relative;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ to { transform: translateX(100%); } }
.center-note{ text-align:center; padding:20px; color:#f6eaff; opacity:.92; }

@media (max-width:420px){
  .data-card{ aspect-ratio: 4 / 3; }
  .skeleton { aspect-ratio: 4 / 3; }
}

/* Chips */
.type-chips .chip{
  display:inline-flex; gap:.35rem; align-items:center;
  background: var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:.35rem .75rem; margin:0 .4rem .4rem 0;
  cursor:pointer; transition:.18s ease; color:#fff;
}
.type-chips .chip:hover{ background: var(--card-hover); }
.type-chips .chip.active{ background: rgba(255,255,255,.10); color: var(--accent); border-color: rgba(255,255,255,.28); }

/* Radio-card highlight */
.btn-check:checked + .card,
.data-card.selected{
  outline:2px solid var(--accent);
  background: rgba(255,255,255,0.10);
  transform: translateY(-2px);
}

/* =========================================
   GENERIC MODAL OVERLAY
   ========================================= */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.6);
  display:none; align-items:center; justify-content:center;
  z-index:2000;
}
.modal-overlay.open{ display:flex; animation:fade-in .2s ease; }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }

.modal-card{
  background:#ffffff; color:#000;
  border-radius:1rem; padding:1rem 1rem 1.2rem;
  width:min(480px, 92vw);
  box-shadow:0 12px 24px rgba(0,0,0,.25);
  transform:translateY(6px);
  animation:card-pop .25s ease forwards;
}
@keyframes card-pop{ from{ transform:translateY(12px); opacity:.85 } to{ transform:translateY(0); opacity:1 } }
.modal-hero{
  width:100%; height:160px;
  border-radius:.75rem;
  overflow:hidden; margin-bottom:.5rem;
  background:var(--brand-gradient);
  display:flex; align-items:center; justify-content:center;
}
.modal-hero lottie-player{ width:160px; height:160px; }

/* Floating toast */
.toast-floating{
  position:fixed; bottom:20px; right:20px;
  background:#1f2937; color:#fff;
  padding:.75rem 1rem; border-radius:.75rem;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index:2100; min-width:220px;
}

/* =========================================
   LANDING (blobs, header, hero, stats, etc.)
   ========================================= */
.blob,.blob2{
  position:fixed; z-index:0; filter:blur(60px); opacity:.26; pointer-events:none;
  animation:float 12s ease-in-out infinite;
}
.blob{
  width:380px; height:380px;
  background:radial-gradient(circle at 30% 30%, rgba(37,99,235,.40), transparent 60%);
  top:-120px; right:-80px;
}
.blob2{
  width:340px; height:340px;
  background:radial-gradient(circle at 60% 60%, rgba(16,185,129,.32), transparent 60%);
  bottom:-120px; left:-80px; animation-duration:16s;
}
@keyframes float{ 0%{transform:translateY(0)} 50%{transform:translateY(18px)} 100%{transform:translateY(0)} }

.landing-header{
  margin:16px auto 10px; padding:12px 14px; border-radius:14px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:42px; height:42px; border-radius:10px; }
.brand-title{ font-weight:800; letter-spacing:.2px; }
.brand-sub{ color:#cbd5e1; font-weight:600; }

.btn-ghost{
  background:transparent; border:1px solid var(--border);
  color:#fff; border-radius:11px; padding:.6rem 1rem; font-weight:700;
}
.btn-ghost:hover{ background:rgba(255,255,255,.08); }

.hero-box{ position:relative; box-shadow:0 16px 42px rgba(0,0,0,.35); }
.gradient-text{
  background:linear-gradient(135deg,#fff,#d1ffe6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ribbon{
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg, rgba(37,99,235,.20), rgba(16,185,129,.15));
  border:1px solid rgba(148,163,184,.35); padding:.25rem .6rem;
  border-radius:999px; color:#fff; font-weight:800;
}
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }

.hero-anim lottie-player{ width:100%; height:240px; }
.stats{ display:flex; gap:12px; }
.stat{
  flex:1 1 140px; background:rgba(255,255,255,.08); border:1px solid var(--border);
  border-radius:14px; padding:10px 12px;
}
.stat .value{ font-weight:900; font-size:1.5rem; }

.trustbar{ position:relative; overflow:hidden; }
.marquee{
  display:inline-flex; gap:18px; white-space:nowrap; animation:marq 18s linear infinite;
}
.marquee span{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:700;
  background:rgba(255,255,255,.10); border:1px solid var(--border);
}
@keyframes marq{ 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } }

.section{ margin:18px auto; position:relative; z-index:1; }
.section-title{ font-weight:900; color:#eafaff; letter-spacing:.2px; margin-bottom:.55rem; } /* general sections */
.card .icon-xl{ font-size:2rem; }

.step{ display:flex; gap:14px; align-items:flex-start; }
.step .num{
  background:var(--brand-gradient);
  color:#fff; font-weight:900; width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 8px rgba(0,0,0,.25);
}

.testimonials{
  display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
}
.t-item{
  scroll-snap-align:start; min-width:320px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:16px; padding:16px; box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

.ripple{ position:relative; overflow:hidden; }
.ripple::after{
  content:""; position:absolute; inset:0; border-radius:inherit; transform:scale(0);
  background:rgba(255,255,255,.2); opacity:0;
}
.ripple:active::after{ animation:rip .5s ease; }
@keyframes rip{ 0%{transform:scale(0); opacity:.7} 100%{transform:scale(1.6); opacity:0} }

.code-sample{
  white-space:pre-wrap; font-size:.9rem; color:#fff; background:rgba(0,0,0,.28);
  border:1px solid var(--border); border-radius:12px; padding:12px;
}

/* Responsive (landing) */
@media (max-width:576px){
  .landing-header{ flex-direction:column; align-items:flex-start; }
  .cta{ width:100%; display:flex; gap:10px; flex-wrap:wrap; }
}

/* =========================================
   AUTH PAGES & ANIMATIONS
   ========================================= */
.auth-page {
  background: var(--bg) fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-image:
    radial-gradient(60% 40% at 50% -10%, rgba(37,99,235,0.14), transparent 60%),
    radial-gradient(50% 40% at 95% 110%, rgba(16,185,129,0.10), transparent 60%);
}
/* Keep content above animated layers */
.auth-page .header-min,
.auth-page main,
.auth-page footer {
  position: relative;
  z-index: 2;
}

/* Header (minimal) */
.header-min {
  background: var(--surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1rem;
}
.header-links a {
  color:#fff; text-decoration:none; margin-left:1rem; font-weight:500; opacity:.9;
}
.header-links a:hover { color: var(--accent) }
/* Scoped brand image size to avoid overriding landing header */
.header-min .brand img { width: 28px; height: 28px; border-radius: 6px }

/* Auth layout */
.auth-page main { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 2rem 1rem; }
.auth-wrap { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 992px) {
  .auth-wrap { grid-template-columns: 1fr 1fr; align-items: center; }
}
.auth-hero,
.auth-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 8px 24px var(--card-shadow);
}
.auth-hero h1 {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  margin: 0 0 .5rem;
  color: var(--accent);
  font-weight: 800;
}
.auth-hero p { margin: .25rem 0; opacity: .95 }
.bullets { margin-top: .75rem; }
.bullets li { margin-bottom: .4rem }

/* Reveal on load */
.reveal-up { opacity: 0; transform: translateY(12px); animation: revealUp .6s ease .05s forwards; }
.reveal-up:nth-of-type(2) { animation-delay: .12s; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0) } }

/* Floating orbs */
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  filter: blur(50px); opacity: .22;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, rgba(16,185,129,0.0) 60%),
              radial-gradient(circle at 70% 70%, var(--brand) 0%, rgba(37,99,235,0.0) 60%);
  animation: floaty 18s ease-in-out infinite alternate;
}
.orb-1 { top: -80px; left: -120px; }
.orb-2 { right: -140px; bottom: -100px; animation-duration: 22s; }
.orb-3 { left: 20%; bottom: 10%; animation-duration: 26s; }
@keyframes floaty {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(20px,-14px) scale(1.05); }
  100% { transform: translate(-12px,18px) scale(1); }
}

/* Particles canvas */
#bgParticles { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .28; }

/* Reduced motion (auth) */
@media (prefers-reduced-motion: reduce) {
  .reveal-up { animation: none; opacity: 1; transform: none; }
  .bg-orbs, #bgParticles { display: none !important; }
  .auth-card { transform: none !important; }
}

/* =========================================
   INPUTS (UNIFIED + ACCESSIBLE)
   ========================================= */

/* Global baseline for inputs on dark surfaces */
.form-control,
.form-select {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: .8rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form-control::placeholder,
.form-select::placeholder {
  color: var(--muted); opacity: 1;
}
.form-control:hover,
.form-select:hover {
  border-color: rgba(255,255,255,0.32);
}
.form-control:focus,
.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}

/* Input group */
.input-group {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--border);
  border-radius: .8rem;
  overflow: hidden;
}
.input-group .form-control,
.input-group .form-select {
  background: transparent;
  border: 0;
  color: var(--text);
}
.input-group .form-control::placeholder { color: var(--muted); opacity: 1; }
.input-group .input-group-text {
  background: transparent;
  border: 0;
  color: var(--text);
}
.input-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}

/* Auth dark inputs */
.auth-card .form-control,
.auth-card .form-select {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: .8rem;
}
.auth-card .form-control::placeholder { color:var(--muted); opacity:1; }
.auth-card .input-group-text { background: rgba(255,255,255,0.06); border: 0; color: var(--text); }
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}

/* White modals: light inputs for contrast */
.modal-card .form-control,
.modal-card .form-select {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  color: #111;
  border-radius: .8rem;
}
.modal-card .form-control::placeholder { color:#6b7280; opacity:1; }
.modal-card .input-group {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: .8rem;
  overflow: hidden;
}
.modal-card .input-group .form-control,
.modal-card .input-group .form-select { background: transparent; border:0; color:#111; }
.modal-card .input-group .form-control::placeholder { color:#6b7280; opacity:1; }
.modal-card .input-group .input-group-text { background: #fff; border-left: 1px solid #e5e7eb; color: #111; }
.modal-card .form-control:focus,
.modal-card .form-select:focus,
.modal-card .input-group:focus-within {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}

/* Optional wrapper to make a whole row glow */
.field {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--border);
  border-radius: .8rem;
  padding: .35rem;
}
.field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}
.field .form-control,
.field .form-select { background: transparent; border: 0; color: var(--text); }
.field .form-control::placeholder { color: var(--muted); opacity: 1; }

/* Better text contrast inside white modals */
.modal-card { color:#000; }
.modal-card .form-label { color:#222; }
.modal-card .small-muted { color:#6b7280 !important; }

/* Autofill fix (Chrome/Edge) */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset;
  transition: background-color 9999s ease-in-out 0s;
}