:root{
  /* MAIN DARK BACKGROUNDS */
  --bgA: #0a1322;          /* deep navy */
  --bgB: #0d1a2f;          /* midnight navy */
  --bgCard: #121e34;       /* dark card */

  /* CORE COLORS */
  --navy: #12263f;
  --navy-strong: #0b1a2d;
  --navy-light: #1b2f4b;

  --blue-neon: #1a90ff;
  --blue-electric: #007bff;
  --blue-soft: #4dabff;

  --violet-dark: #3e1a6d;
  --violet-neon: #9b4bff;
  --violet-soft: #c89bff;

  --pink-neon: #e84ebf;
  --pink-soft: #ffb3e4;

  --text-light: #e6ebf5;
  --text-muted: #9aa8bf;

  --radius: 14px;
  --shadow-strong: 0 20px 60px rgba(0,0,0,0.55);
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
  --mono: "Inter", system-ui, sans-serif;
}

/* ====================
   BASE + UTILITIES
   ==================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--mono);
  background:linear-gradient(180deg,var(--bgA),var(--bgB));
  color:var(--text-light);
  -webkit-font-smoothing:antialiased;
}

/* IMPORTANT: utility to hide overlays/steps */
.hidden{display:none !important;}

/* small helper so elements that overlay can be pointer-events disabled when hidden */
.wizard.hidden, .overlay-small.hidden { display: none !important; pointer-events: none; }

/* ====================
   HEADER / HERO / CTA
   ==================== */
.topbar{
  padding:18px 0;
  background:rgba(10,15,28,0.65);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.topbar-inner{
  max-width:1200px;margin:auto;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  width:58px;height:58px;border-radius:16px;
  background:linear-gradient(135deg,var(--blue-neon),var(--violet-neon));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:white;
  box-shadow:0 12px 40px rgba(0,153,255,0.35);
}

.hero-wrap{max-width:1200px;margin:auto;padding:34px 22px}
.hero-card{display:flex;gap:32px;flex-wrap:wrap}
.hero-title{font-size:38px;font-weight:900;margin-bottom:10px;color:white}
.hero-lead{color:var(--text-muted);max-width:600px}

/* BUTTONS */
.btn{
  padding:12px 18px;border-radius:12px;font-weight:800;cursor:pointer;
  border:1px solid rgba(255,255,255,0.12);
  background:transparent;
}
.btn-primary{
  background:linear-gradient(90deg,var(--blue-neon),var(--violet-neon));
  color:white;
  box-shadow:0 14px 30px rgba(0,153,255,0.25);
}
.btn-outline{
  background:transparent;color:var(--text-muted);
  border:1px solid rgba(255,255,255,0.25);
}
.btn-ghost{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text-light);
}
.btn-xl{padding:14px 18px;font-size:16px}

/* BADGES / FEATURES */
.badges{display:flex;gap:18px;font-weight:700;margin-top:18px;color:var(--text-muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.feature{
  background:var(--bgCard);
  padding:16px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow-soft);
}
.feature-title{font-weight:900}
.feature-desc{color:var(--text-muted);font-size:13px}

/* CALCULATOR (VIOLET DARK) */
.calc-card{
  background:linear-gradient(180deg,var(--violet-dark),#2c124c);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow-strong);
  padding:18px;border-radius:var(--radius);
  color:white;
}
.calc-title{font-weight:900;font-size:17px;margin-bottom:10px}
.calc-controls{display:flex;gap:8px}
.calc-controls input{
  width:50%;padding:12px;border-radius:10px;
  background:#1a1f35;border:1px solid rgba(255,255,255,0.12);
  color:white;
}
.calc-monthly{font-size:22px;font-weight:900;margin-top:8px;color:#fff}

/* TRUST CARD */
.trust-card{
  margin-top:14px;background:var(--bgCard);padding:16px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.08);box-shadow:var(--shadow-soft)
}
.trust-title{font-weight:900;color:white}
.trust-stars{color:var(--pink-neon);font-size:20px;font-weight:900}

/* TESTIMONIALS */
.testimonials{
  margin-top:26px;display:flex;gap:14px;
}
.test-col{
  background:var(--bgCard);
  padding:16px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.08);
  color:white;box-shadow:var(--shadow-soft)
}
.quote{font-weight:900;font-size:15px}
.who{color:var(--text-muted);margin-top:6px;font-size:13px}

/* ====================
   WIZARD (OVERLAY FORM)
   ==================== */
/* Backdrop */
.wizard{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);z-index:80;padding:20px;
  /* allow clicking on backdrop — JS can listen for clicks on .wizard to close */
  cursor:default;
}

/* Panel */
.wizard-panel{
  background:linear-gradient(180deg,#10253f,#081828);
  padding:22px;border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 40px 120px rgba(0,0,0,0.65);
  width:100%;max-width:680px;
  position:relative;
}

/* Close button: more visible / larger tap target */
.wizard-panel .wizard-close{
  position:absolute;
  right:16px;
  top:12px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  color:var(--text-muted);
  border:1px solid rgba(255,255,255,0.08);
}

/* Header & text */
.wizard-title{color:white;font-weight:900;font-size:20px}
.wizard-sub{color:var(--text-muted)}

/* PROGRESS BAR */
.wizard-progress{height:8px;background:#1b2940;border-radius:10px;margin:16px 0}
.progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--blue-neon),var(--pink-neon));
  border-radius:10px;
  transition:width .3s ease;
}

/* steps inputs (navy theme) */
.label{font-weight:800;margin-bottom:8px;color:white}
.wizard-form input, .wizard-form select{
  width:100%;padding:14px;border-radius:12px;color:white;
  background:#152238;border:1px solid rgba(255,255,255,0.15);
  margin-bottom:10px;box-shadow:inset 0 0 10px rgba(0,0,0,0.35)
}
.wizard-controls{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.wizard-right{display:flex;align-items:center;gap:12px}

/* make steps visually hidden using .hidden (JS toggles) */
#wizard .step.hidden { display:none !important; }

/* ====================
   LOGIN OVERLAY (SMALL)
   ==================== */
.overlay-small{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);z-index:90;
}
.overlay-small-panel{
  width:100%;max-width:420px;padding:20px;
  background:linear-gradient(180deg,#101d2e,#0c1626);
  border-radius:16px;box-shadow:var(--shadow-strong);
  border:1px solid rgba(255,255,255,0.12);
}
.small-form input{
  width:100%;padding:12px;border-radius:10px;margin-top:8px;
  color:white;background:#152238;border:1px solid rgba(255,255,255,0.15)
}

/* ====================
   APPLICATION CARDS
   ==================== */
.app-card{
  background:#101b2d;padding:14px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  color:white;margin-top:12px;box-shadow:var(--shadow-soft)
}
.app-title{font-weight:900}

.status-badge{padding:6px 12px;border-radius:999px;font-weight:900;font-size:13px}
.status-pending{background:#4c4c12;color:#fff}
.status-approved{background:#0e5d32;color:white}
.status-rejected{background:#8c1a32;color:white}
.status-hold{background:#28306d;color:white}

/* TOAST */
.toast{
  position:fixed;right:20px;bottom:20px;
  background:linear-gradient(90deg,var(--violet-neon),var(--pink-neon));
  color:white;padding:14px 20px;border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,0.45);
  opacity:0;transform:translateY(10px);transition:all .3s
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.hidden{display:block;opacity:0}

/* ====================
   RESPONSVIE
   ==================== */
@media(max-width:980px){
  .hero-card{flex-direction:column}
  .hero-right{width:100%}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .feature-grid{grid-template-columns:1fr}
  .wizard-panel{padding:16px}
  .calc-controls{flex-direction:column}
}
/* SITE FOOTER — sticky and responsive */
.site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40; /* below the wizard (z-index:80) so modals still overlay */
  background:linear-gradient(180deg, rgba(10,15,28,0.9), rgba(13,20,33,0.85));
  border-top:1px solid rgba(255,255,255,0.04);
  padding:10px 18px;
  backdrop-filter: blur(6px);
}
.site-footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 12px;
}
.footer-left .footer-brand{ font-weight:900; color:var(--text-light); font-size:15px; }
.footer-left .footer-note{ color:var(--text-muted); font-size:13px; margin-top:2px; }

.footer-contact{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.contact-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.04);
  text-decoration:none;
  color:var(--text-light);
}
.contact-item:hover{ transform:translateY(-2px); transition:all .12s ease; }

/* ensure content above footer isn't hidden — add bottom padding to main wrappers */
.hero-wrap, .admin-wrap, .card, .hero-card, #loggedInView { padding-bottom:72px; }

/* small screens: stack */
@media(max-width:640px){
  .site-footer-inner{ flex-direction:column; align-items:flex-start; gap:8px; }
  .footer-contact{ width:100%; justify-content:flex-start; }
  .contact-item{ padding:8px 10px; font-size:14px; }
}
/* ===== Trust badges & guarantee ribbons ===== */
.trust-badges-row{
  display:flex;
  gap:12px;
  margin-top:18px;
  align-items:center;
  flex-wrap:wrap;
}
.trust-badge{
  display:flex;
  gap:10px;
  align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);
  box-shadow:var(--shadow-soft);
  min-width:200px;
}
.badge-icon{ flex:0 0 28px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.35); }
.badge-text{ display:flex;flex-direction:column; }
.badge-title{ font-weight:900; color:var(--text-light); font-size:14px; }
.badge-sub{ color:var(--text-muted); font-size:12px; margin-top:2px; }

/* Guarantee ribbons (floating) */
.guarantee-ribbons{ position:relative; pointer-events:none; }
.ribbon{
  position:absolute;
  top:-10px;
  transform:rotate(-6deg);
  box-shadow:0 8px 30px rgba(0,0,0,0.45);
  border-radius:8px;
  overflow:visible;
  pointer-events:auto;
}
.ribbon-left{ left:12px; background: linear-gradient(90deg,var(--blue-neon),var(--violet-neon)); color:white; padding:8px 12px; }
.ribbon-right{ right:12px; top:8px; transform:rotate(6deg); background: linear-gradient(90deg,var(--violet-neon),var(--pink-neon)); color:white; padding:8px 12px; }

.ribbon-inner{ display:flex;flex-direction:column; align-items:flex-start; gap:2px; min-width:140px; }
.ribbon-line{ font-weight:800; font-size:11px; opacity:0.95; color:rgba(255,255,255,0.95); }
.ribbon-main{ font-weight:900; font-size:13px; letter-spacing:0.2px; }

/* ensure ribbons sit above hero-right card but below modals */
.hero-card .guarantee-ribbons{ z-index:30; }

/* responsive adjustments */
@media(max-width:980px){
  .trust-badge{ min-width:160px; padding:10px; }
  .ribbon-left, .ribbon-right{ display:none; } /* hide ribbons on small screens for clarity */
}
.logo-img-wrap {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0, 153, 255, 0.35);
  background: linear-gradient(135deg, var(--blue-neon), var(--violet-neon));
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ===== Footer center links & small layout tweaks ===== */
.footer-center-links{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:45;
  margin-left:auto;
  margin-right:auto;
}

/* centered link buttons (Terms/Privacy) */
.link-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.08);
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  color:var(--text-light);
  cursor:pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.link-btn:hover{
  transform:translateY(-3px);
  transition:all .14s ease;
  border-color: rgba(255,255,255,0.14);
}

/* ensure footer spacing */
.hero-wrap, #loggedInView, .card { padding-bottom: 100px; }

/* ensure footer layout on narrow screens */
@media(max-width:640px){
  .site-footer-inner{ flex-direction:column; align-items:flex-start; gap:10px; padding:12px; }
  .footer-contact{ order:2; width:100%; display:flex; gap:8px; }
  .footer-center-links{ order:3; width:100%; justify-content:flex-start; }
  .footer-left{ order:1; }
}