:root {
  /* Futuristic LET blue palette (aligned with index.php) */
  --brand-maroon: #2563eb;          /* kept name for legacy, now blue */
  --brand-maroon-dark: #1d4ed8;
  --brand-maroon-50: #e0f2fe;
  --brand-maroon-900: #0f172a;
  --brand-tint: #e0f2fe;
  --ink-700: #0f172a;
  --ink-500: #64748b;
  --ring: rgba(37,99,235,.35);
  --card-bg: rgba(255,255,255,0.96);
  --card-border: rgba(148,163,184,0.5);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.25), transparent 55%),
    radial-gradient(circle at bottom right, rgba(37,99,235,0.25), transparent 60%),
    linear-gradient(180deg, #f9fafb 0%, #eff6ff 100%);
  color: var(--ink-700);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.text-maroon{ color:var(--brand-maroon)!important; }
.link-maroon{
  color:var(--brand-maroon);
  text-decoration:none;
  position:relative;
  transition:color .15s ease;
}
.link-maroon::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--brand-maroon),#22d3ee);
  transition:width .2s ease;
}
.link-maroon:hover{
  color:var(--brand-maroon-dark);
  text-decoration:none;
}
.link-maroon:hover::after{
  width:100%;
}

/* ================================
   Navbar – glassy top bar
================================ */
.navbar{
  background:rgba(15,23,42,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(148,163,184,0.45);
}
.navbar .navbar-brand{
  color:#e5f0ff!important;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:.35rem;
}
.navbar .navbar-brand::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #e0f2fe 0, #38bdf8 45%, #1d4ed8 100%);
  box-shadow:0 0 12px rgba(56,189,248,0.7);
}
.navbar .nav-link{
  color:#cbd5f5!important;
  font-weight:500;
  font-size:.92rem;
}
.navbar .nav-link.active,
.navbar .nav-link:hover{
  color:#e0f2fe!important;
}
.btn-login{
  border:1px solid rgba(148,163,184,0.7);
  color:#e5f0ff!important;
  background:rgba(15,23,42,0.9);
  border-radius:999px;
  padding-inline:1.25rem;
  font-size:.9rem;
}
.btn-login:hover{
  background:linear-gradient(135deg,var(--brand-maroon),#22d3ee);
  border-color:transparent;
  color:#0f172a!important;
  box-shadow:0 0 18px rgba(59,130,246,0.55);
}

/* ================================
   Hero (front page / about)
================================ */
.hero{
  background:
    radial-gradient(circle at top right, rgba(59,130,246,0.28), transparent 60%),
    linear-gradient(180deg,#f9fbff 0%, #e0f2fe 65%, #eff6ff 100%);
  padding: 5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg, rgba(148,163,184,0.22) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148,163,184,0.18) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:.18;
  pointer-events:none;
}
.hero .headline{ font-weight:800; color:var(--ink-700); }
.hero .accent{
  background:linear-gradient(120deg,var(--brand-maroon),#22d3ee);
  -webkit-background-clip:text;
  color:transparent;
}

.bg-light-subtle{
  background:linear-gradient(180deg,#eff6ff 0%, #e0f2fe 40%, #f9fafb 100%);
}

/* ================================
   Buttons – pill, gradient
================================ */
.btn-maroon{
  background:linear-gradient(135deg,var(--brand-maroon),#22d3ee);
  border:none;
  color:#0f172a;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(37,99,235,0.35);
  font-weight:600;
}
.btn-maroon:hover{
  background:linear-gradient(135deg,var(--brand-maroon-dark),#22d3ee);
  color:#0b1120;
  box-shadow:0 10px 26px rgba(30,64,175,0.5);
}
.btn-outline-maroon{
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.9);
  color:var(--ink-700);
  background:rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
}
.btn-outline-maroon:hover{
  background:linear-gradient(135deg,var(--brand-maroon),#22d3ee);
  color:#0f172a;
  border-color:transparent;
  box-shadow:0 8px 22px rgba(37,99,235,0.4);
}

a.btn, .btn{ box-shadow:none; }
a.btn:focus, .btn:focus{
  outline:0;
  box-shadow:0 0 0 .2rem var(--ring);
}

/* ================================
   Feature / card sections
================================ */
.feature-card,
.verify-step,
.verification-strip{
  border:1px solid var(--card-border);
  border-radius:1rem;
  background:var(--card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:0 12px 30px rgba(15,23,42,0.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.feature-card:hover,
.verify-step:hover,
.verification-strip:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 40px rgba(15,23,42,0.18);
  border-color: rgba(59,130,246,0.75);
  background:rgba(255,255,255,0.98);
}
.feature-icon{
  width:3rem;
  height:3rem;
  border-radius:.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.7rem;
  color:var(--brand-maroon);
  padding:.6rem;
  background:radial-gradient(circle at 30% 30%, rgba(125,211,252,0.7), rgba(59,130,246,0.1));
  box-shadow:0 0 0 1px rgba(191,219,254,0.8);
}

.hero .border.rounded-4{
  border-color:rgba(148,163,184,0.6) !important;
  background:radial-gradient(circle at top left,rgba(224,242,254,0.85),rgba(255,255,255,0.96));
}

.trust-strip .btn-maroon{
  font-size:.8rem;
  padding-inline:1.4rem;
}

/* ================================
   Trust Strip
================================ */
.trust-strip{
  background:rgba(15,23,42,0.96);
  color:#e5e7eb;
  border-top:1px solid rgba(148,163,184,0.6);
  border-bottom:1px solid rgba(148,163,184,0.6);
  backdrop-filter: blur(14px);
}

/* ================================
   Accordion / FAQ
================================ */
.accordion-button { font-weight: 600; color:#333; }
.accordion-button:not(.collapsed) { color: var(--brand-maroon); background: rgba(122,31,39,.06); }
.accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(122,31,39,.25); }

/* ================================
   Login / Signup Pages
================================ */
.login-section,
.signup-section {
  background: linear-gradient(180deg,#fff,var(--brand-tint));
  padding: 5rem 0;
}
.login-card,
.auth-card {
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
.brand-strip {
  background: linear-gradient(45deg,var(--brand-maroon-900),var(--brand-maroon));
  color: #fff;
  padding: 1rem 1.25rem;
}
.brand-badge { display: inline-flex; gap: .6rem; font-weight: 700; text-transform: uppercase; }
.brand-badge .dot { width: .65rem; height: .65rem; border-radius: 50%; background: #fff; opacity: .85; }

/* Forms */
.form-label { font-weight: 600; }
.form-control:focus { border-color: var(--brand-maroon); box-shadow: 0 0 0 .2rem rgba(122,31,39,.15); }
.helper-links a { color: var(--brand-maroon-dark); text-decoration: none; }
.helper-links a:hover { text-decoration: underline; }
.small-muted { color: #6c757d; font-size: .9rem; }

/* Password strength */
.strength-bar { height: .4rem; border-radius: .25rem; background: #e9ecef; overflow: hidden; }
.strength-fill { height: 100%; width: 0%; transition: width .25s ease; background: #dc3545; }

/* ================================
   Pricing Page
================================ */
.pricing-card {
  border: 1px solid #eee;
  border-radius: 1rem;
  padding: 2rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.10); }
.pricing-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--brand-maroon); color: #fff; font-size: .75rem;
  padding: .35rem .6rem; border-radius: .5rem;
}
.price { font-size: 2.25rem; font-weight: 800; color: var(--brand-maroon); }
.per { color: #6c757d; font-size: .95rem; }
.table thead th { border-bottom: 2px solid #dee2e6; }
.table tbody td { vertical-align: middle; }

/* ================================
   Footer – light blue futuristic
================================ */
.bg-maroon {
  /* repurposed as deep bluish footer background */
  background: rgba(15, 23, 42, 0.92);
}
.footer-section-title {
  font-weight: 600;
  font-size: 1.1rem;
  color:#e0f2fe;
}
.footer-link,
.footer-text,
.footer-icon {
  color:#cbd5e1;
  transition:0.2s ease;
}
.footer-link:hover {
  color:#38bdf8!important;
  text-decoration:underline;
}
.footer-icon:hover {
  color:#38bdf8!important;
  transform:scale(1.1);
  text-shadow:0 0 8px rgba(56,189,248,0.5);
}
.footer-text { font-size:.9rem; }
.footer-bottom {
  border-top:1px solid rgba(148,163,184,0.5);
  background:rgba(15,23,42,0.96);
}

.reveal-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-item.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* Section headings */
.section-title {
  font-weight: 700;
  color: var(--brand-maroon);
  margin-bottom: 1rem;
}
.lead-text { color: #495057; }

/* Info cards */
.info-card {
  border: 1px solid #eee;
  border-radius: 1rem;
  padding: 2rem;
  transition: .3s;
}
.info-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transform: translateY(-3px);
}
.info-icon {
  font-size: 2rem;
  color: var(--brand-maroon);
  margin-bottom: 1rem;
}


/* Responsive question images */
.question-image {
  display: block;
  text-align: center;
  margin: 1em 0;
}
.question-image img {
  display: block;
  margin: 0 auto;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  max-width: 900px !important;  /* cap on very wide screens */
  max-height: 65vh !important;  /* never exceed viewport height */
  transition: all 0.3s ease-in-out;
}
/* Phones */
@media (max-width: 576px) {
  .question-image img { max-width: 100% !important; max-height: 50vh !important; }
}
/* Tablets */
@media (min-width: 577px) and (max-width: 991.98px) {
  .question-image img { max-width: 100% !important; max-height: 55vh !important; }
}
/* Laptops/Desktops */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .question-image img { max-width: 820px !important; max-height: 60vh !important; }
}
/* Large screens/TV */
@media (min-width: 1400px) {
  .question-image img { max-width: 900px !important; max-height: 65vh !important; }
}
/* Ultra-wide desktops: gently reduce image size */
@media (min-width: 1600px) {
  .question-image img { max-width: 720px !important; max-height: 60vh !important; }
}
/* 1920px+ widths: a bit smaller for readability */
@media (min-width: 1920px) {
  .question-image img { max-width: 640px !important; max-height: 55vh !important; }
}
/* Optional: fill mode */
.question-image.crop img { object-fit: cover; }

/* ================================
   Review Schedule (Create) Page
================================ */
.schedule-new .gen-output {
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
}


    /* ============================
       FUTURISTIC FOOTER (LIGHT BLUE)
       ============================ */
    footer {
        background: rgba(15, 23, 42, 0.92); /* deep bluish slate */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(148, 163, 184, 0.35);
        padding: 2rem 0;
        color: #dbeafe; /* light bluish text */
        margin-top: 3rem;
    }

    footer .footer-brand {
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: .06em;
        color: #e0f2fe;
        text-transform: uppercase;
        margin-bottom: .5rem;
    }

    footer .footer-brand span {
        background: linear-gradient(120deg, #2563eb, #22d3ee);
        -webkit-background-clip: text;
        color: transparent;
    }

    footer p,
    footer a {
        color: #cbd5e1;
        font-size: 0.9rem;
    }

    footer a:hover {
        color: #38bdf8;
        text-decoration: underline;
    }

    footer .social-icons a {
        font-size: 1.1rem;
        margin-right: .75rem;
        color: #94a3b8;
        transition: 0.2s ease;
    }

    footer .social-icons a:hover {
        color: #38bdf8;
        text-shadow: 0 0 8px rgba(56,189,248,0.5);
    }

    footer .footer-divider {
        margin: 1.5rem 0;
        height: 1px;
        background: linear-gradient(
            90deg,
            rgba(148,163,184,0),
            rgba(148,163,184,0.4),
            rgba(148,163,184,0)
        );
    }

    footer .copyright {
        color: #94a3b8;
        font-size: 0.85rem;
        margin-top: .5rem;
        text-align: center;
    }

    :root{
      --brand-primary:#2563eb;         /* main blue */
      --brand-primary-600:#1d4ed8;
      --brand-accent:#22d3ee;          /* cyan accent */
      --ink-700:#0f172a;               /* dark slate */
      --ink-500:#64748b;
      --bg-subtle:#e0f2fe;             /* light blue background */
      --ring: rgba(37,99,235,.35);
      --card-bg: rgba(255,255,255,0.96);
      --card-border: rgba(148,163,184,0.5);
    }

    /* Global */
    body{
      min-height:100vh;
      background:
        radial-gradient(circle at top left, rgba(56,189,248,0.25), transparent 55%),
        radial-gradient(circle at bottom right, rgba(37,99,235,0.25), transparent 60%),
        linear-gradient(180deg, #f9fafb 0%, #eff6ff 100%);
      color:var(--ink-700);
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }

    .text-maroon{ color:var(--brand-primary)!important; }
    .link-maroon{
      color:var(--brand-primary);
      text-decoration:none;
      position:relative;
      transition:color .15s ease;
    }
    .link-maroon::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-2px;
      width:0;
      height:2px;
      background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent));
      transition:width .2s ease;
    }
    .link-maroon:hover{
      color:var(--brand-primary-600);
      text-decoration:none;
    }
    .link-maroon:hover::after{
      width:100%;
    }

    /* Navbar – glassy top bar */
    .navbar{
      background:rgba(15,23,42,0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom:1px solid rgba(148,163,184,0.45);
    }
    .navbar-brand{
      color:#e5f0ff;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.9rem;
      display:flex;
      align-items:center;
      gap:.35rem;
    }
    .navbar-brand::before{
      content:"";
      width:18px;
      height:18px;
      border-radius:999px;
      background:radial-gradient(circle at 30% 30%, #e0f2fe 0, #38bdf8 45%, #1d4ed8 100%);
      box-shadow:0 0 12px rgba(56,189,248,0.7);
    }
    .navbar .nav-link{
      color:#cbd5f5;
      font-weight:500;
      font-size:.92rem;
    }
    .navbar .nav-link.active,
    .navbar .nav-link:hover{
      color:#e0f2fe;
    }
    .btn-login{
      border:1px solid rgba(148,163,184,0.7);
      color:#e5f0ff;
      background:rgba(15,23,42,0.9);
      border-radius:999px;
      padding-inline:1.25rem;
      font-size:.9rem;
    }
    .btn-login:hover{
      background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));
      border-color:transparent;
      color:#0f172a;
      box-shadow:0 0 18px rgba(59,130,246,0.55);
    }

    /* Buttons – pill, gradient, slightly glowing */
    .btn-maroon{
      background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));
      border:none;
      color:#0f172a;
      border-radius:999px;
      box-shadow:0 8px 20px rgba(37,99,235,0.35);
      font-weight:600;
    }
    .btn-maroon:hover{
      background:linear-gradient(135deg,var(--brand-primary-600),var(--brand-accent));
      color:#0b1120;
      box-shadow:0 10px 26px rgba(30,64,175,0.5);
    }
    .btn-outline-maroon{
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.9);
      color:var(--ink-700);
      background:rgba(255,255,255,0.9);
      backdrop-filter: blur(10px);
    }
    .btn-outline-maroon:hover{
      background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));
      color:#0f172a;
      border-color:transparent;
      box-shadow:0 8px 22px rgba(37,99,235,0.4);
    }

    a.btn, .btn{ box-shadow:none; }
    a.btn:focus, .btn:focus{
      outline:0;
      box-shadow:0 0 0 .2rem var(--ring);
    }

    /* Hero – soft light-blue gradient with subtle depth */
    .hero{
      background:
        radial-gradient(circle at top right, rgba(59,130,246,0.28), transparent 60%),
        linear-gradient(180deg,#f9fbff 0%, #e0f2fe 65%, #eff6ff 100%);
      padding: clamp(2.5rem, 4vw + 1rem, 5rem) 0;
      position:relative;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(90deg, rgba(148,163,184,0.22) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148,163,184,0.18) 1px, transparent 1px);
      background-size:40px 40px;
      opacity:.18;
      pointer-events:none;
    }
    .hero .container{
      position:relative;
      z-index:1;
    }
    .headline .accent{
      background:linear-gradient(120deg,var(--brand-primary),var(--brand-accent));
      -webkit-background-clip:text;
      color:transparent;
    }

    /* Cards – “glass” style */
    .feature-card,
    .verify-step,
    .verification-strip{
      border:1px solid var(--card-border);
      border-radius:1rem;
      background:var(--card-bg);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow:0 12px 30px rgba(15,23,42,0.10);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }
    .feature-card:hover,
    .verify-step:hover,
    .verification-strip:hover{
      transform: translateY(-3px);
      box-shadow:0 16px 40px rgba(15,23,42,0.18);
      border-color: rgba(59,130,246,0.75);
      background:rgba(255,255,255,0.98);
    }

    .feature-icon{
      font-size:1.7rem;
      color:var(--brand-primary);
      padding:.6rem;
      border-radius:999px;
      background:radial-gradient(circle at 30% 30%, rgba(125,211,252,0.7), rgba(59,130,246,0.1));
      box-shadow:0 0 0 1px rgba(191,219,254,0.8);
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

    .badge.border{
      border:1px solid rgba(148,163,184,0.6);
    }

    /* Trust strip */
    .trust-strip{
      background:rgba(15,23,42,0.96);
      color:#e5e7eb;
      border-top:1px solid rgba(148,163,184,0.6);
      border-bottom:1px solid rgba(148,163,184,0.6);
      backdrop-filter: blur(14px);
    }
    .trust-strip .btn-maroon{
      font-size:.8rem;
      padding-inline:1.4rem;
    }

    /* Sections */
    .bg-light-subtle{
      background:linear-gradient(180deg,#eff6ff 0%, #e0f2fe 40%, #f9fafb 100%);
    }
    section h2{
      letter-spacing:.02em;
    }
    .text-muted{
      color:var(--ink-500) !important;
    }

    /* FAQ */
    .accordion-button{
      background:rgba(15,23,42,0.02);
      color:var(--ink-700);
      font-weight:500;
    }
    .accordion-button:not(.collapsed){
      color:#0b1120;
      background:linear-gradient(90deg,rgba(191,219,254,0.7),rgba(224,242,254,0.9));
      box-shadow:inset 0 -1px 0 rgba(148,163,184,0.35);
    }
    .accordion-item{
      border-radius:1rem;
      overflow:hidden;
      border:1px solid rgba(148,163,184,0.45);
      background:rgba(255,255,255,0.96);
    }

    /* Quick access card */
    .hero .border.rounded-4{
      border-color:rgba(148,163,184,0.6) !important;
      background:radial-gradient(circle at top left,rgba(224,242,254,0.85),rgba(255,255,255,0.96));
    }

    /* Responsive tweaks */
    @media (max-width: 576px){
      .display-5{ font-size:2rem; }
      .lead{ font-size:1.05rem; }
      .navbar-brand{ font-size:.8rem; }
    }

    /* Scroll reveal animation */
    .reveal-item{
      opacity:0;
      transform:translateY(24px);
      transition:opacity .6s ease, transform .6s ease;
    }
    .reveal-item.is-visible{
      opacity:1;
      transform:translateY(0);
    }