:root{
  --teal:#00C2C7;
  --navy:#0B1D3A;
  --gold:#FFC857;
  --light:#F8F9FA;
  --text-dark:#1C1F23;

  /* Sizing variables to enforce logo rule */
  --nav-link-height: 45px;   /* desktop baseline */
  --logo-height: calc(var(--nav-link-height) * 2);
}

html{scroll-behavior:smooth;}
body{
  font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text-dark);
}

/* Headings */
h1,h2,h3,h4,h5,h6,.section-title{
  font-family:'Poppins', 'Open Sans', sans-serif;
  font-weight:700;
  color:var(--text-dark);
}

.bg-navy{ background-color: var(--navy) !important; }
.btn-teal{
  --bs-btn-bg: var(--teal);
  --bs-btn-border-color: var(--teal);
  --bs-btn-hover-bg: #00b0b5;
  --bs-btn-hover-border-color: #00b0b5;
  --bs-btn-color: #0b1d3a;
  --bs-btn-hover-color: #0b1d3a;
  border-radius: .75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.btn-outline-light{ border-width:2px; border-radius:.75rem; }

/* Navbar & Logo Rule */
.navbar{ padding-top: 0; padding-bottom: 0; }
.navbar .nav-link{
  color: #e5ebf5;
  padding-top: calc((var(--nav-link-height) - 1rem)/2);
  padding-bottom: calc((var(--nav-link-height) - 1rem)/2);
  /* assume ~1rem line height to hit overall height */
  font-size: 1rem;
}
.navbar .nav-link:hover,.navbar .nav-link.active{ color: #fff; }
.navbar-brand .brand-logo{
  height: var(--logo-height);
  width: auto;
}
.navbar-brand .brand-text{
  font-family:'Poppins', 'Open Sans', sans-serif;
  font-weight:700;
  color:#fff;
  line-height:1;
  display:inline-flex;
  align-items:center;
}
/* Keep brand vertically aligned */
.navbar-brand{ display:flex; align-items:center; gap:.5rem; }

/* Mobile/tablet scaling */
@media (max-width: 991.98px){
  :root{ --nav-link-height: 34px; }
  .navbar-brand .brand-text{ font-size:1rem; }
}
@media (max-width: 575.98px){
  :root{ --nav-link-height: 28px; }
  .navbar-brand .brand-text{ font-size:.95rem; }
}

/* Hero */
.hero-section{
  position: relative;
  background: linear-gradient(135deg, rgba(11,29,58,.95), rgba(11,29,58,.85));
  isolation: isolate;
}
.hero-illustration{ border-radius: 1rem; }
.hero-bg-layer{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 300px at 80% -20%, rgba(0,194,199,.25), transparent);
  z-index:-1;
}

/* Cards */
.bg-light-alt{ background: var(--light); }
.feature-card, .step-card{ border:0; border-radius:1rem; }
.feature-icon{ width:64px; height:64px; }
.step-card{ position:relative; overflow:hidden; }
.step-number{
  position:absolute; top:.75rem; left:.75rem;
  background: var(--gold); color:#212529;
  width: 42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:700;
}
.step-img{ border-top-left-radius:1rem; border-top-right-radius:1rem; }

/* CTA Banner */
.cta-banner{ background: #09162e; }
.cta-banner .cta-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25;
  filter: saturate(1.1) contrast(1.05);
}
.cta-banner .overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,29,58,.5), rgba(11,29,58,.7));
}

/* Testimonials */
.testi-avatar{ width:96px; height:96px; object-fit:cover; }
.stars{ color:#FFC857; font-size:1.1rem; letter-spacing:.1rem; }

/* Footer */
.footer-link{ color:#cbd3e1; text-decoration:none; }
.footer-link:hover{ color:#fff; text-decoration:underline; }

/* Forms */
.form-control:focus, .form-select:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 .25rem rgba(0,194,199,.25);
}

/* AOS tweaks */
[data-aos]{ transition-property: transform, opacity !important; }

/* Accessibility */
:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---- Readability Improvements (Hero) ---- */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6{
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.hero-section .lead,
.hero-section p{
  color:#f1f6ff;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Slightly lighter hero gradient for better contrast */
.hero-section{
  background: linear-gradient(135deg, rgba(11,29,58,.90), rgba(11,29,58,.78));
}
/* ---- CTA Banner Readability & Visual Lift ---- */
.cta-banner h2,
.cta-banner p{
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.cta-banner .cta-bg{          /* show more of the image */
  opacity:.45;
}

.cta-banner .overlay{         /* lighter navy gradient */
  background: linear-gradient(180deg,
    rgba(11,29,58,.28),
    rgba(11,29,58,.42)
  );
}

/* subtle glass panel behind text (only where supported) */
@supports (backdrop-filter: blur(2px)){
  .cta-banner .container{
    background: rgba(11,29,58,.22);
    backdrop-filter: blur(2px) saturate(130%);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
  }
}

/* little lift on the CTA button for contrast */
.cta-banner .btn-teal{
  box-shadow: 0 10px 24px rgba(0,194,199,.28);
}
/* ---- CTA Banner: sharper image, same readability ---- */
.cta-banner .cta-bg{
  opacity:.80;                 /* show more of the image (from .45) */
}

.cta-banner .overlay{
  /* lighter, center-clear vignette instead of heavy wash */
  background: radial-gradient(120% 80% at 50% 35%,
    rgba(11,29,58,.10) 0%,
    rgba(11,29,58,.22) 60%,
    rgba(11,29,58,.32) 100%
  );
}

/* remove blur; keep a subtle tinted panel only */
.cta-banner .container{
  background: rgba(11,29,58,.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* keep text crisp on lighter background */
.cta-banner h2,
.cta-banner p{
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.cta-banner .btn-teal{ box-shadow: 0 10px 24px rgba(0,194,199,.28); }
/* Blog card thumbnails (centralized) */
.blog-card-img{
  width: 100%;
  height: 220px;        /* matches all cards */
  object-fit: cover;    /* neat crop without distortion */
  display: block;
  border-top-left-radius: .5rem;   /* aligns with Bootstrap card radius */
  border-top-right-radius: .5rem;
}

/* Optional: slightly taller on large screens, shorter on phones */
@media (min-width: 992px){
  .blog-card-img{ height: 240px; }
}
@media (max-width: 575.98px){
  .blog-card-img{ height: 200px; }
}
/* Blog sidebar callout */
.ai-callout {
  background: linear-gradient(180deg, #f1f8ff 0%, #e8f2ff 100%);
  border: 2px solid #0a66c2;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 62, 138, 0.12);
}
.ai-callout h3 {
  color: #023e8a;
  font-weight: 700;
}
.ai-callout .lead {
  font-size: 0.98rem;
}
.ai-callout ul {
  margin-left: 1rem;
}
.ai-callout li + li {
  margin-top: .6rem;
}
.ai-callout .lesson {
  background:#fff;
  border:1px dashed #0a66c2;
  border-radius:12px;
  padding:.75rem .9rem;
}
@media (min-width: 992px){
  .ai-sticky { position: sticky; top: 90px; }
}