/* =========================================
   DESIGN TOKENS — Naira Green + Midnight Navy + Gold
   ========================================= */
:root{
  /* Brand */
  --brand: #0ea5a0;           /* Teal 500 (Naira green feel) */
  --brand-dark: #065f46;      /* Emerald 700 */
  --accent: #f59e0b;          /* Amber/Gold 600 (refined gold) */

  /* Background gradient (app shell) */
  --app-bg-start:#0b1220;     /* Midnight navy */
  --app-bg-end:#062c27;       /* Deep teal */

  /* UI surfaces */
  --glass: rgba(255,255,255,0.06);
  --card-hover: rgba(255,255,255,0.10);
  --card-shadow: rgba(0,0,0,0.30);

  /* Gradients */
  --brand-gradient: linear-gradient(135deg, var(--brand-dark), var(--brand));
  --app-gradient: linear-gradient(135deg, var(--app-bg-start), var(--app-bg-end));
}

/* =========================================
   BASE / RESET
   ========================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body {
  background: var(--app-gradient) fixed;
  overflow-x: hidden;
}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#ffffff;
  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(--glass);
  border-radius:1rem;
  border:1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  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 .4s ease both; }

@keyframes pop-in{
  from{ transform:scale(0.92); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

/* =========================================
   CARDS
   ========================================= */
.card{
  background:var(--glass);
  border:none;
  border-radius:1rem;
  box-shadow:0 8px 20px var(--card-shadow);
  cursor:pointer;
  transition:transform .3s cubic-bezier(0.22,1,0.36,1), background .3s cubic-bezier(0.22,1,0.36,1);
  text-align:center;
  padding:1rem;
}
.card:hover{ transform:translateY(-5px) scale(1.03); background:var(--card-hover); }
.card i{ font-size:2rem; margin-bottom:.5rem; transition:transform .3s cubic-bezier(0.22,1,0.36,1); }
.card:hover i{ transform:scale(1.3); }
.card h6{ margin-top:.3rem; font-weight:600; }

/* =========================================
   BUTTONS
   ========================================= */
.btn-brand{
  background:var(--brand-gradient);
  color:#fff; font-weight:600;
  border:none; border-radius:1rem;
  padding:.6rem 1.2rem;
  display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  transition:transform .3s ease, filter .15s ease;
}
.btn-brand:hover{ transform:scale(1.05); color:#fff; }
.btn-brand:disabled{ opacity:.85; cursor:not-allowed; }

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

.fund-btn{
  background:linear-gradient(135deg,#16a34a,#0ea5a0); /* green -> teal */
  color:#fff; font-weight:600;
  border-radius:1rem; padding:.5rem 1.2rem;
  display:flex; align-items:center; gap:.5rem;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
  transition:transform .3s cubic-bezier(0.22,1,0.36,1), filter .15s ease, color .15s ease;
}
.fund-btn:hover{ transform:scale(1.05); color:#fff; }

/* =========================================
   HEADER (DASHBOARD)
   ========================================= */
.header-bar{
  background:rgba(255,255,255,0.05);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
  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;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.header-left button{
  border:none; background:transparent; color:#fff; font-size:1.5rem;
}
.header-left button:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 85%, transparent);
  outline-offset:2px;
}
.header-center{ display:flex; flex-direction:column; margin-left:1rem; }
.header-center .greeting{ font-size:.9rem; font-weight:400; color:#dddddd; 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,#f59e0b,#fbbf24);
  color:#000;
  padding:.5rem 1rem;
  border-radius:50px;
  font-weight:700; font-size:1rem;
  box-shadow:0 4px 15px rgba(0,0,0,0.3);
}

/* 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(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,0.15);
  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 .3s cubic-bezier(0.22,1,0.36,1);
}
.nav-link i{ font-size:1.25rem; margin-bottom:.2rem; transition:transform .3s cubic-bezier(0.22,1,0.36,1); }
.nav-link:hover, .nav-link.active{ color:var(--accent)!important; }
.nav-link:hover i{ transform:scale(1.2); }

/* =========================================
   OFFCANVAS
   ========================================= */
.offcanvas{
  background:var(--app-gradient);
  border-right:1px solid rgba(255,255,255,0.15);
  color:#fff;
}
.offcanvas-header{
  border-bottom:1px solid rgba(255,255,255,0.15);
  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.1); color:var(--accent); }

/* Offcanvas sticky footer (Sign out at bottom) */
.offcanvas-footer{
  position:sticky; bottom:0;
  background:rgba(255,255,255,0.05);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,0.15);
  padding:1rem;
}
.btn-signout{
  width:100%;
  background:linear-gradient(135deg,#d9534f,#c9302c);
  color:#fff; font-weight:600;
  border:none; border-radius:1rem; padding:.6rem 1rem;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
  transition:transform .3s cubic-bezier(0.22,1,0.36,1), filter .15s ease, color .15s ease;
}
.btn-signout:hover{ transform:scale(1.05); }

/* =========================================
   SUPPORT FAB
   ========================================= */
.support-btn{
  position:fixed; bottom:80px; right:1rem;
  background:var(--accent); color:#000;
  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 .3s cubic-bezier(0.22,1,0.36,1);
}
.support-btn:hover{ transform:scale(1.1); }

/* =========================================
   FORMS: CARD SHELL
   (Input styles consolidated later in "INPUTS")
   ========================================= */
.form-card{
  max-width:600px; margin:0 auto;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:1rem; padding:1.25rem;
}
.form-label{ font-weight:600; }
.help-text{ font-size:.85rem; color:#ffeeee; }

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

/* Transactions */
.tx-item{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:.75rem; padding:.75rem;
}
.status-pill{ padding:.15rem .5rem; border-radius:1rem; font-size:.75rem; }
.status-success{
  background:rgba(25,135,84,0.2);
  border:1px solid rgba(25,135,84,0.35);
  color:#c6e1d4;
}
.status-pending{
  background:rgba(255,193,7,0.2);
  border:1px solid rgba(255,193,7,0.35);
  color:#a67d05;
}
.status-failed{
  background:rgba(220,53,69,0.2);
  border:1px solid rgba(220,53,69,0.35);
  color:#f6cdd1;
}
.status-refunded{
  background:rgba(13,110,253,0.2);
  border:1px solid rgba(13,110,253,0.35);
  color:#c3dbff;
}

/* Site footer */
.site-footer{
  margin:1rem 1rem 6rem;
  border-radius:1rem;
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.15);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  padding:1rem;
}
.footer-title{ font-weight:700; color:var(--accent); margin-bottom:.5rem; }
.footer-text{ color:#f8f9fa; opacity:.95; }
.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:#f9f6ff; border-top:1px solid rgba(255,255,255,.14); }

/* 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:600;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
  transition:transform .3s cubic-bezier(0.22,1,0.36,1);
}
#pinModal button:hover{ transform:scale(1.05); }
#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.8); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

/* =========================================
   ABOUT / HERO / ACCORDION
   ========================================= */
.section-title{ font-weight:700; color:var(--accent); margin-bottom:.75rem; } /* used in about contexts */
.small-muted{ color:#dddddd; font-size:.95rem; }
hr.soft{ border-color:rgba(255,255,255,0.15); }

.hero{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:1rem;
  padding:1.25rem;
}
.pill{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  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.12); }
.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 rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  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.12); }
.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:#f7eaff; }
.badge-fee{
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.2);
  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 rgba(255,255,255,0.15);
  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 themes */
.net-card.mtn    { background: linear-gradient(135deg,#ffdb3b,#ffc1073d); color:#000; }
.net-card.mtn .logo{ background:#00000015; color:#000; }
.net-card.airtel { background: linear-gradient(135deg,#ff4242,#ff6a6a3d); }
.net-card.glo    { background: linear-gradient(135deg,#00b35f,#00b35f3d); }
.net-card.nmobile{ background: linear-gradient(135deg,#8bc34a,#9ccc653d); }
.net-card.smile  { background: linear-gradient(135deg,#59c36a,#59c36a3d); }

/* =========================================
   DATA PLANS
   ========================================= */
.data-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap:16px;
}
.data-card{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  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(-4px); box-shadow:0 16px 32px rgba(0,0,0,.30); background: rgba(255,255,255,0.08); }
.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,.18); 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 rgba(255,255,255,.12);
  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(--glass); border:1px solid rgba(255,255,255,.15);
  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,.2); color: var(--accent); border-color: rgba(255,255,255,.35); }

/* Radio-card highlight */
.btn-check:checked + .card,
.data-card.selected{
  outline:2px solid var(--accent);
  background: rgba(255,255,255,0.12);
  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 (unified across pages) */
.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:.30; pointer-events:none;
  animation:float 12s ease-in-out infinite;
}
.blob{
  width:380px; height:380px;
  background:radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent) 60%, white), transparent 60%);
  top:-120px; right:-80px;
}
.blob2{
  width:340px; height:340px;
  background:radial-gradient(circle at 60% 60%, color-mix(in oklab, var(--brand) 55%, white), 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:#d8f3ea; font-weight:600; }

.btn-ghost{
  background:transparent; border:1px solid rgba(255,255,255,.25);
  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,#fde68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ribbon{
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(255,255,255,.15));
  border:1px solid rgba(255,255,255,.3); 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,.12); border:1px solid rgba(255,255,255,.2);
  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,.12); border:1px solid rgba(255,255,255,.25);
}
@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:var(--accent); 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(--glass); border:1px solid rgba(255,255,255,.15);
  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,.25); 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 rgba(255,255,255,.2); 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(--app-gradient) fixed;
  color: #fff;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
/* 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: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.15);
  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(--glass);
  border: 1px solid rgba(255,255,255,.15);
  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(255,215,0,0.0) 60%),
              radial-gradient(circle at 70% 70%, var(--brand) 0%, rgba(127,0,255,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 glass/dark surfaces */
.form-control,
.form-select {
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: .8rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form-control::placeholder,
.form-select::placeholder {
  color: #e5e7eb; opacity: 1;
}
.form-control:hover,
.form-select:hover {
  border-color: rgba(255,255,255,0.55);
}
.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(245,158,11,0.25);
}

/* Input group */
.input-group {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: .8rem;
  overflow: hidden;
}
.input-group .form-control,
.input-group .form-select {
  background: transparent;
  border: 0;
  color: #fff;
}
.input-group .form-control::placeholder { color: #e5e7eb; opacity: 1; }
.input-group .input-group-text {
  background: transparent;
  border: 0;
  color: #fff;
}
.input-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.25);
}

/* Auth cards keep dark inputs */
.auth-card .form-control,
.auth-card .form-select {
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: .8rem;
}
.auth-card .form-control::placeholder { color:#e5e7eb; opacity:1; }
.auth-card .input-group-text { background: rgba(255,255,255,0.08); border: 0; color: #fff; }
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.25);
}

/* White modals switch to 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(245,158,11,0.25);
}

/* Optional wrapper to make a whole row glow */
.field {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: .8rem;
  padding: .35rem;
}
.field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.25);
}
.field .form-control,
.field .form-select { background: transparent; border: 0; color: #fff; }
.field .form-control::placeholder { color: #e5e7eb; 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.10) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* =========================================
   VISIBILITY + CONTRAST UPLIFT
   Paste after your current CSS
   ========================================= */

/* 1) Stronger text tokens (used everywhere) */
:root{
  --text-strong: #ffffff;   /* pure white for headings/important text */
  --text:        #f8fafc;   /* near-white body text on dark backgrounds */
  --text-muted:  #d1d5db;   /* muted but readable on dark backgrounds */

  /* Make surfaces a bit more opaque so text stands out on them */
  --glass:       rgba(255,255,255,0.10);  /* was ~0.06 */
  --card-hover:  rgba(255,255,255,0.18);  /* subtle lift on hover */
}

/* 2) Global typography + smoothing */
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body{
  color: var(--text);
  line-height: 1.6;
  letter-spacing: 0.005em;
}
p, li { color: var(--text); }
small, .help-text, .small-muted { color: var(--text-muted) !important; }

/* 3) Headings: brighter so they pop */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* 4) Cards and glass surfaces: slightly denser for contrast */
.card{
  background: var(--glass);
}
.card:hover{
  background: var(--card-hover);
}
.form-card,
.hero,
.site-footer,
.auth-card,
.auth-hero,
.t-item {
  background: var(--glass);
  border-color: rgba(255,255,255,0.18);
}

/* 5) Inputs: clearer placeholders and borders */
.form-control::placeholder,
.form-select::placeholder { color:#cbd5e1; opacity:1; }
.input-group .form-control::placeholder { color:#cbd5e1; opacity:1; }
.form-control,
.form-select {
  border-color: rgba(255,255,255,0.45);
}
.form-control:hover,
.form-select:hover {
  border-color: rgba(255,255,255,0.65);
}

/* 6) Navigation and header text clarity */
.header-center .greeting{ color:#e5e7eb; }
.nav-link{ color:#f8fafc !important; }
.nav-link:hover, .nav-link.active{ color:var(--accent) !important; }

/* 7) Data/Network cards: ensure readable body text */
.net-card small{ color:#e7eef7; opacity:1; }
.plan-meta{ color:#e5e7ff; }

/* 8) Text over images/video: helper class to add a soft shadow */
.text-on-image{
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* 9) Optional: scrim overlay if text sits on busy backgrounds */
.scrim::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35));
  pointer-events:none; border-radius: inherit;
}

/* 10) Prefer high contrast if the user asks for it */
@media (prefers-contrast: more){
  :root{
    --glass: rgba(255,255,255,0.14);
    --card-hover: rgba(255,255,255,0.22);
  }
  body{ color:#ffffff; }
  .form-control, .form-select{ border-color:#ffffff; }
  .nav-link{ color:#ffffff !important; }
  .small-muted, .help-text{ color:#e5e7eb !important; }
}

/* 11) Content width utility for long paragraphs (readability) */
.content-readable{
  max-width: 72ch;
}


/* === Notifications (bell + badge) === */
.notif-bell{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem; color:#fff; cursor:pointer;
  background: var(--glass);
  border:1px solid rgba(255,255,255,.18);
  padding:.45rem .65rem; border-radius:12px;
  transition: transform .2s ease, background .2s ease;
}
.notif-bell:hover{ background: var(--card-hover); transform: translateY(-1px); }

.notif-badge{
  position:absolute; top:-6px; right:-6px;
  background: linear-gradient(135deg,#ef4444,#f59e0b);
  color:#000; font-weight:800; font-size:.72rem; line-height:1;
  border:2px solid rgba(0,0,0,.25);
  padding:.25rem .4rem; border-radius:999px; min-width:20px; text-align:center;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}

/* Wiggle + ping until opened */
.notif-bell.alerting i{ animation: bell-wiggle .9s ease-in-out infinite; }
.notif-bell.alerting::after{
  content:""; position:absolute; width:8px; height:8px; right:2px; top:2px; border-radius:50%;
  background: #f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,.7); animation: ping 1.6s infinite;
}
@keyframes bell-wiggle{
  0%,100%{ transform: rotate(0) }
  20%{ transform: rotate(12deg) }
  40%{ transform: rotate(-10deg) }
  60%{ transform: rotate(8deg) }
  80%{ transform: rotate(-6deg) }
}
@keyframes ping{
  0%{ box-shadow: 0 0 0 0 rgba(245,158,11,.7) }
  80%{ box-shadow: 0 0 0 10px rgba(245,158,11,0) }
  100%{ box-shadow: 0 0 0 0 rgba(245,158,11,0) }
}

/* Dropdown panel */
.notif-panel{
  position: fixed; right:1rem; top:84px;
  width:min(420px, 92vw);
  background: var(--glass);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 1rem; padding: .75rem;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
  z-index: 2000;
}
.notif-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem; }
.notif-list{ display:flex; flex-direction:column; gap:.5rem; max-height:60vh; overflow:auto; }
.notif-item{
  display:flex; gap:.6rem; align-items:flex-start;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:.75rem; padding:.6rem .7rem;
}
.notif-item.unread{ outline:2px solid var(--accent); background: rgba(255,255,255,.12); }
.notif-item .time{ font-size:.78rem; color:var(--text-muted) }

/* Slide-in Important Banner */
.priority-banner{
  position: relative; z-index: 1;
  margin: .5rem 1rem 0; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 50%, #fff), rgba(255,255,255,.14));
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.35);
  transform: translateY(-10px); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.priority-banner.show{ transform: translateY(0); opacity:1; pointer-events:auto; }
.pb-inner{ display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; color:#111; }
.pb-inner i{ color:#111; }
.pb-dismiss{ margin-left:auto; }

/* Marquee left -> right */
.pb-marquee{ position:relative; flex:1; overflow:hidden; }
.pb-track{
  display:inline-flex; gap:2rem; white-space:nowrap;
  animation: pbScroll 16s linear infinite reverse;
}
.pb-track:hover{ animation-play-state: paused; }
@keyframes pbScroll{ 0%{ transform: translateX(-50%) } 100%{ transform: translateX(0%) } }
.pb-track .pb-dup::before{ content: attr(data-dup) }

/* Helpers */
.hidden{ display:none !important; }

/* Keep bell at absolute top-right on small screens */
@media (max-width: 576px){
  #notifBtn{
    position: fixed; top: 10px; right: 10px; z-index: 2100;
  }
  .notif-panel{ top: 60px; right: 8px; }
}