:root{
  /* Corporate palette in a dark glass style */
  /* Use a brighter blue so accent text stays readable on dark glass */
  --primary:#5ea0ff;
  --primary-2:#2e6fe6;

  /* Replace red CTA with a confident blue (red can read as “warning”) */
  --cta:#2f7cf6;
  --cta-2:#2563eb;

  /* Softer contrast (less “neon” on dark) */
  --ink:rgba(247,249,255,.94);            /* primary text */
  --muted:rgba(226,232,255,.72);
  --bg:#090d18;             /* dark base */
  --surface:rgba(255,255,255,.065); /* glass */
  --border:rgba(255,255,255,.12);
  --card-top:rgba(255,255,255,.08);

  --shadow:0 26px 90px -52px rgba(0,0,0,.75);
  --shadow-sm:0 18px 60px -44px rgba(0,0,0,.65);
}

html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% 10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(1100px 650px at 86% 18%, rgba(16,185,129,.14), transparent 58%),
    radial-gradient(900px 520px at 55% 88%, rgba(31,60,136,.14), transparent 62%),
    var(--bg);
}

/* Bootstrap text utility overrides for dark theme (keeps HTML unchanged) */
.text-secondary{color:var(--muted) !important}
.text-dark{color:var(--ink) !important}
.bg-white{background:var(--surface) !important}
.lead{color:var(--muted)}

/* ---------- Navbar ---------- */
.navbar{
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(7,10,18,.60) !important;
  border-bottom:1px solid var(--border);
}
.navbar .navbar-toggler{border-color:rgba(255,255,255,.18)}
.navbar .navbar-toggler-icon{filter:invert(1) opacity(.85)}
.navbar .navbar-brand,
.navbar .nav-link{color:rgba(238,242,255,.86) !important}
.navbar .nav-link:hover{color:#ffffff !important}
.navbar .navbar-brand{
  font-weight:700;
  letter-spacing:-.02em;
}
.nav-link{font-weight:500}
.nav-link.active{color:#ffffff !important}

/* Slightly larger tap targets on small screens */
@media (max-width:576px){
  .navbar .nav-link{padding-top:.65rem; padding-bottom:.65rem}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:transparent;
  border-bottom:1px solid var(--border);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.62;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(99,102,241,.22), transparent 56%),
    radial-gradient(700px 420px at 82% 0%, rgba(16,185,129,.14), transparent 62%),
    radial-gradient(520px 320px at 55% 40%, rgba(230,57,70,.085), transparent 62%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  /* Soft texture only (no screenshot imagery) */
  background:
    radial-gradient(closest-side at 18% 24%, rgba(255,255,255,.14), transparent 62%),
    radial-gradient(closest-side at 86% 52%, rgba(31,60,136,.18), transparent 60%),
    radial-gradient(closest-side at 70% 18%, rgba(16,185,129,.10), transparent 62%);
}
@media (max-width: 992px){
  .hero::after{opacity:.18}
}
.hero-card{
  background:linear-gradient(180deg, var(--card-top), rgba(255,255,255,.045));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:1.25rem;
  backdrop-filter:blur(18px);
}

/* ---------- Sections & cards ---------- */
.section{
  padding:4rem 0;
  background:transparent;
  border-top:1px solid rgba(255,255,255,.06);
}
.section.section-alt{background:transparent}
@media (max-width:576px){.section{padding:3.25rem 0}}

.section-title{letter-spacing:-.03em}
.eyebrow{color:var(--muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.85rem}

.card-elevated{
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  border-radius:1.25rem;
  background:linear-gradient(180deg, var(--card-top), rgba(255,255,255,.05));
  backdrop-filter:blur(16px);
}
.icon-badge{
  width:46px; height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.9rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(238,242,255,.90);
  flex:0 0 auto;
}

.icon-badge i{
  font-size:1.1rem;
  line-height:1;
}

/* ---------- Buttons ---------- */
.btn-brand{
  /* CTA button (accent) */
  /* Solid color (no gradient) */
  background:var(--cta);
  border-color:rgba(255,255,255,.10);
  color:#fff !important;
  border-radius:.95rem;
  padding:.78rem 1.05rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.btn-brand:hover{background:var(--cta-2); border-color:rgba(255,255,255,.18)}
.btn-brand:active{transform:translateY(1px)}

/* Subtle focus ring for keyboard users */
.btn:focus-visible, .btn-brand:focus-visible, .btn-primarybrand:focus-visible, .btn-soft:focus-visible{
  outline:none;
  box-shadow:0 0 0 .22rem rgba(230,57,70,.22), 0 18px 50px -34px rgba(2,6,23,.55);
}

.btn-primarybrand{
  background:linear-gradient(180deg, #2a4aa0, var(--primary));
  border-color:rgba(255,255,255,.12);
  color:#fff !important;
  border-radius:.95rem;
  padding:.78rem 1.05rem;
  font-weight:600;
}
.btn-primarybrand:hover{background:linear-gradient(180deg, #3559b8, var(--primary-2)); border-color:rgba(255,255,255,.16)}

.btn-brand, .btn-primarybrand{box-shadow:0 16px 42px -28px rgba(0,0,0,.78)}
.btn-brand.btn-lg, .btn-primarybrand.btn-lg{padding:.9rem 1.15rem; border-radius:.9rem}
.btn-soft{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:rgba(247,249,255,.92);
  border-radius:.95rem;
  padding:.72rem 1rem;
  font-weight:600;
}
.btn-soft:hover{background:rgba(255,255,255,.11)}

/* Bootstrap outline secondary on dark: keep corporate and readable */
.btn-outline-secondary{
  border-color:rgba(255,255,255,.18) !important;
  color:rgba(247,249,255,.86) !important;
  border-radius:.95rem;
  padding:.72rem 1rem;
  font-weight:600;
}
.btn-outline-secondary:hover{background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.24) !important}

/* ---------- CTA band ---------- */
.cta-band{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:1.25rem;
  backdrop-filter:blur(18px);
}

/* ---------- Footer ---------- */
footer{
  background:rgba(7,10,18,.45);
  border-top:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
}
.footer-small{color:var(--muted)}

/* ---------- Micro-interactions ---------- */
.lift{
  transition:transform .18s ease, box-shadow .18s ease;
}
.lift:hover{transform:translateY(-3px); box-shadow:0 22px 60px -34px rgba(2,6,23,.45)}

/* Dark-mode separators */
hr{border-color:rgba(255,255,255,.10) !important}


.link-underline{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .25s ease;
  /* Avoid harsh default link blue on dark backgrounds */
  color:rgba(226,232,255,.78);
}
.link-underline:hover{background-size:100% 2px}

/* On hover, brighten slightly (still not neon-blue) */
a.link-underline:hover{color:rgba(247,249,255,.92)}

/* Slightly soften default headings contrast */
h1,h2,h3{color:rgba(247,249,255,.93)}

/* Form controls on dark glass */
.form-control{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:rgba(247,249,255,.92) !important;
}
.form-control::placeholder{color:rgba(226,232,255,.58) !important}
.form-control:focus{box-shadow:0 0 0 .2rem rgba(31,60,136,.22) !important}