/* ===========================================================
   Star Ai Technology - styles.css  (Brand Light Theme)
   Palette taken straight from the logo:
     Navy #003366 - Orange #FF7A00 - Gold #FFC107 - White
   =========================================================== */

/* -- Google Fonts -- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* -- brand, straight off the logo -- */
  --navy: #003366;
  --navy-deep: #00224A;
  --navy-mid: #0B4C8F;
  --navy-bright: #1E6FD9;
  --orange: #FF7A00;
  --orange-light: #FF9A33;
  --orange-dark: #E56A00;
  --gold: #FFC107;
  --gold-light: #FFD54A;

  /* -- aliases kept so every existing rule still resolves -- */
  --blue: #003366;
  --blue-light: #1E6FD9;
  --blue-dark: #00224A;

  /* -- light surfaces -- */
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-2: #F4F7FC;
  --bg-3: #E8EFF9;
  --card: #FFFFFF;
  --card-solid: #FFFFFF;

  /* -- ink -- */
  --text: #0A2747;
  --muted: #5A7391;

  /* -- lines, shadows, glows -- */
  --border: rgba(0, 51, 102, 0.10);
  --border-hover: rgba(255, 122, 0, 0.45);
  --glow: rgba(0, 51, 102, 0.14);
  --glow-orange: rgba(255, 122, 0, 0.28);
  --glow-gold: rgba(255, 193, 7, 0.30);
  --shadow-sm: 0 2px 10px rgba(0, 51, 102, 0.05);
  --shadow: 0 10px 30px rgba(0, 51, 102, 0.08);
  --shadow-lg: 0 22px 60px rgba(0, 51, 102, 0.14);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: 'Montserrat', 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ── Scroll progress bar ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  z-index: 999;
  transform-origin: left;
  transition: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 14px rgba(255, 122, 0, 0.55);
}

/* ── Layout ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 110px 0; position: relative; z-index: 1; }

/* ── Typography ── */
.eyebrow {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  font-size: 0.76rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
h2.title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  margin: 12px 0 16px;
  line-height: 1.12;
  letter-spacing: -0.5px;
}
.sub {
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 52px;
  font-size: 1.05rem;
  line-height: 1.7;
}
.section-head { text-align: center; }
.grad {
  /* warm end-to-end: a navy-to-orange ramp goes muddy through the middle */
  background: linear-gradient(100deg, #D95F00, #FF8A1E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.accent { color: var(--orange); }

/* ── Background canvas ── */
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── Noise texture overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.022;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════ BUTTONS ══════════════════ */
.btn {
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-family: var(--font);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  opacity: 0;
  transition: var(--transition);
}
.btn:hover::before { opacity: 1; }

.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  color: #fff;
  box-shadow: 0 8px 26px var(--glow-orange), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(255, 122, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-primary:active { transform: translateY(-1px); }

.btn-ghost {
  background: #fff;
  border: 1px solid rgba(0, 51, 102, 0.16);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  border-color: var(--orange);
  background: rgba(255, 122, 0, 0.08);
  transform: translateY(-2px);
}

/* ══════════════════ HEADER / NAV ══════════════════ */
/* Floating glass bar under a full-width glowing orange top line;
   the scroll-progress bar fills over that same line as you scroll. */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 16px clamp(12px, 2.5vw, 28px) 0;
  transition: var(--transition);
}
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    rgba(255, 122, 0, 0.12), var(--orange) 28%, var(--orange-light) 55%, rgba(255, 122, 0, 0.12));
  box-shadow: 0 0 18px rgba(255, 122, 0, 0.55), 0 3px 26px rgba(255, 122, 0, 0.28);
  pointer-events: none;
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
}
header nav.container {
  max-width: 1340px;
  padding: 10px 12px 10px 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  /* defined brand-navy edge, so the bar reads as a crisp object on white */
  border: 1.5px solid var(--navy);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0, 51, 102, 0.12);
  transition: background var(--transition), box-shadow var(--transition);
}
header.scrolled nav.container {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--navy);
  box-shadow: 0 14px 40px rgba(0, 51, 102, 0.18);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}
/* Brand logo — the Star Ai Technology wordmark (assets/starai-logo.svg).
   Height-constrained so it scales cleanly in the header and footer. */
.brand-logo {
  height: 52px;
  width: auto;
  display: block;
  flex: none;
}
@media (max-width: 560px) { .brand-logo { height: 40px; } }

@keyframes spin { to { transform: rotate(360deg); } }

.navlinks {
  display: flex;
  gap: 8px;
  align-items: center;
}
.navlinks a {
  color: #0A2747;
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--transition-fast);
  padding: 8px 13px;
  border-radius: var(--radius-xs);
  position: relative;
}
/* animated underline — glows in on hover, stays for the active link */
.navlinks a::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  box-shadow: 0 0 10px rgba(255, 122, 0, 0.65);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.navlinks a:hover {
  color: var(--orange);
  background: rgba(255, 122, 0, 0.07);
}
.navlinks a:hover::after { transform: scaleX(1); }
.navlinks a.active {
  color: var(--orange);
}
.navlinks a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; gap: 12px; align-items: center; }

/* Get Started — orange outline pill, per the wave-art design */
.nav-cta.btn-primary {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--orange);
  border-radius: 999px;
  color: var(--navy);
  padding: 10px 26px;
}
.nav-cta.btn-primary:hover {
  background: rgba(255, 122, 0, 0.12);
  box-shadow: 0 0 18px rgba(255, 122, 0, 0.25);
  transform: translateY(-2px);
  filter: none;
}

/* Exam portal entry point — orange-tinted so it reads as a separate
   destination, not another marketing anchor link. */
.nav-exam {
  padding: 9px 16px;
  font-size: 0.88rem;
  border-color: rgba(255, 122, 0, 0.35);
  background: rgba(255, 122, 0, 0.07);
}
.nav-exam:hover {
  border-color: var(--orange);
  background: rgba(255, 122, 0, 0.14);
}
/* the mobile menu carries its own copy; hide it on desktop */
.nav-exam-mobile { display: none; }
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.burger span {
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

/* ══════════════════ HERO ══════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 90px;
  position: relative;
  overflow: hidden;
  /* Hero wallpaper, in layers. Drop a photo in as assets/hero-photo.jpg and it
     takes over on its own: a background layer whose file is missing simply does
     not paint, so the brand wave SVG underneath shows through until the photo
     exists. No markup or script change needed either way. */
  background-color: #FFFFFF;
  background-image:
    url('../assets/hero-photo.jpg'),
    url('../assets/hero-bg.svg');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

/* ── hero (split layout: content left, globe artwork right) ── */
.hero2 {
  display: grid;
  grid-template-columns: minmax(320px, 46%) 1fr;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.hero2-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
/* Soft white wash behind the hero copy. The wallpaper's navy wave crops to
   a different height at every window size, so rather than hoping the text
   clears it, the text carries its own light ground. */
.hero2-left::before {
  content: '';
  position: absolute;
  inset: -46px -110px -44px -64px;
  z-index: -1;
  pointer-events: none;
  border-radius: 48px;
  background: radial-gradient(115% 102% at 24% 46%,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.93) 44%,
    rgba(255, 255, 255, 0.62) 72%,
    rgba(255, 255, 255, 0) 100%);
}
.hero2-logo {
  height: clamp(46px, 6vw, 64px);
  width: auto;
  margin-bottom: 30px;
  filter: drop-shadow(0 8px 22px rgba(0, 51, 102, 0.16));
  animation: heroRise 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
}
.hero2-title {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.5px;
  font-family: var(--font-display);
  color: var(--navy);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: heroRise 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}
.hero2-sub {
  margin-top: 22px;
  max-width: 520px;
  color: #2E4E6F;
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  line-height: 1.75;
  animation: heroRise 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
.hero2-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
  animation: heroRise 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.45s both;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  color: #ffffff;
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: 0 8px 30px rgba(255, 122, 0, 0.35), 0 0 24px rgba(255, 122, 0, 0.22);
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}
.btn-hero-primary .arr { transition: transform 0.25s; }
.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 42px rgba(255, 122, 0, 0.5), 0 0 30px rgba(255, 122, 0, 0.3);
  filter: brightness(1.06);
}
.btn-hero-primary:hover .arr { transform: translateX(5px); }

.btn-hero-glass {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 51, 102, 0.28);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.02rem;
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn-hero-glass:hover {
  border-color: var(--navy);
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 51, 102, 0.16);
}

/* ── hero right: animated overlays on the globe artwork ── */
.hero2-right {
  position: relative;
  min-height: 540px;
  pointer-events: none;
}
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 56%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit-ring.r1 {
  width: 380px;
  height: 380px;
  border: 1px dashed rgba(0, 51, 102, 0.18);
  animation: slowSpin 60s linear infinite;
}
.orbit-ring.r2 {
  width: 540px;
  height: 540px;
  border: 1px dotted rgba(255, 122, 0, 0.28);
  animation: slowSpin 90s linear infinite reverse;
}
@keyframes slowSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.streak {
  position: absolute;
  height: 2px;
  width: 240px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--orange-light), transparent);
  box-shadow: 0 0 14px rgba(255, 122, 0, 0.7);
  opacity: 0;
  animation: streakMove 7s linear infinite;
}
.streak.s1 { top: 22%; left: -8%; }
.streak.s2 { top: 52%; left: -14%; width: 320px; animation-delay: 2.4s; }
.streak.s3 { top: 76%; left: -4%; animation-delay: 4.8s; }
@keyframes streakMove {
  0%   { transform: translateX(0) rotate(-7deg); opacity: 0; }
  8%   { opacity: 0.9; }
  55%  { opacity: 0.6; }
  100% { transform: translateX(130%) rotate(-7deg); opacity: 0; }
}
.p-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy-bright);
  box-shadow: 0 0 10px rgba(30, 111, 217, 0.45);
  animation: floatY 6s ease-in-out infinite;
}
.p-dot.d1 { top: 18%; left: 22%; }
.p-dot.d2 { top: 34%; left: 78%; width: 4px; height: 4px; animation-delay: 1.2s; }
.p-dot.d3 { top: 62%; left: 12%; width: 5px; height: 5px; animation-delay: 2.1s; }
.p-dot.d4 { top: 80%; left: 66%; animation-delay: 3s; }
.p-dot.d5 { top: 10%; left: 58%; width: 4px; height: 4px; background: var(--orange); box-shadow: 0 0 10px rgba(255, 122, 0, 0.9); animation-delay: 1.7s; }
.p-dot.d6 { top: 48%; left: 92%; width: 5px; height: 5px; background: var(--orange-light); box-shadow: 0 0 10px rgba(255, 193, 7, 0.9); animation-delay: 3.8s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(-22px); opacity: 0.9; }
}

@media (max-width: 900px) {
  .hero2 { grid-template-columns: 1fr; }
  .hero2-right { display: none; }
  .hero2-left { align-items: center; text-align: center; margin: 0 auto; max-width: 560px; }
  .hero2-left::before {
    inset: -34px -28px -34px -28px;
    background: radial-gradient(108% 100% at 50% 48%,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.92) 52%,
      rgba(255, 255, 255, 0.6) 78%,
      rgba(255, 255, 255, 0) 100%);
  }
  .hero2-cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero2-logo, .hero2-title, .hero2-sub, .hero2-cta,
  .orbit-ring, .streak, .p-dot { animation: none; }
  .streak { opacity: 0.4; }
  .p-dot { opacity: 0.6; }
}
/* Subtle gradient orb behind hero */
.hero::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0,51,102,0.07) 0%, transparent 70%);
  top: 10%;
  left: -10%;
  pointer-events: none;
  z-index: -1;
}
.hero::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,122,0,0.07) 0%, transparent 70%);
  bottom: 10%;
  right: -5%;
  pointer-events: none;
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.5px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 51, 102, 0.1);
  color: #0B4C8F;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 22px;
  border: 1px solid rgba(0, 51, 102, 0.2);
  backdrop-filter: blur(8px);
}
.tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero .lead {
  color: var(--muted);
  max-width: 520px;
  margin: 20px 0 30px;
  font-size: 1.1rem;
  line-height: 1.7;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.chip {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(244, 247, 252, 0.92);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 30px;
  backdrop-filter: blur(8px);
  transition: var(--transition);
}
.chip:hover {
  border-color: var(--border-hover);
  color: var(--text);
  transform: translateY(-2px);
}

/* ── Typing cursor ── */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--orange);
  border-radius: 2px;
  margin-left: 4px;
  animation: cursor-blink 0.8s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Orbit visual ── */
.orb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 440px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.core {
  width: 160px;
  height: 160px;
  border-radius: 36px;
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
  display: grid;
  place-items: center;
  box-shadow: 0 0 80px var(--glow), 0 0 140px rgba(0,51,102,0.15);
  position: relative;
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.1);
  animation: core-pulse 4s ease-in-out infinite;
}
@keyframes core-pulse {
  0%, 100% { box-shadow: 0 0 80px var(--glow), 0 0 140px rgba(0,51,102,0.15); }
  50% { box-shadow: 0 0 100px var(--glow), 0 0 180px rgba(0,51,102,0.2); }
}
.core .core-mark { width: 62%; height: auto; }
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0, 51, 102, 0.12);
}
.ring.r1 { width: 62%; height: 62%; animation: spin 14s linear infinite; }
.ring.r2 { width: 82%; height: 82%; animation: spin 22s linear infinite reverse; }
.ring.r3 { width: 100%; height: 100%; animation: spin 32s linear infinite; }
.star {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 1.4rem;
  filter: drop-shadow(0 0 10px var(--orange));
}
.r1 .star { color: var(--orange); }
.r2 .star { color: var(--blue); }
.r3 .star { color: var(--gold); }

/* ══════════════════ REVEAL ANIMATION ══════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal:nth-child(6) { transition-delay: 0.5s; }

/* ══════════════════ GRIDS & CARDS ══════════════════ */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,51,102,0.10), transparent);
}
.card h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 16px 0 10px; color: var(--navy); }
.card p { color: var(--muted); font-size: 0.95rem; line-height: 1.65; }

.ico {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(255,193,7,0.20), rgba(255,122,0,0.08));
  border: 1px solid rgba(255,122,0,0.18);
  transition: var(--transition);
}
.about-grid .mv { text-align: left; }
.about-grid .ico { margin-bottom: 8px; }

/* ── Service cards with premium hover ── */
.service-card {
  cursor: default;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}
.service-card:hover .ico {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 8px 20px var(--glow-orange);
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0), rgba(255, 122, 0, 0.07), transparent 42%);
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}
.service-card:hover::after { opacity: 1; }
.service-card ul {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.service-card ul li {
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-fast);
}
.service-card:hover ul li { color: var(--text); }
.service-card ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
  box-shadow: 0 0 8px var(--glow-orange);
}

/* ══════════════════ STATS SECTION ══════════════════ */
.stats-section {
  padding: 80px 0;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-item {
  text-align: center;
  padding: 32px 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--navy), var(--orange), var(--gold));
  opacity: 0;
  transition: var(--transition);
}
.stat-item:hover::before { opacity: 1; }
.stat-item:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
}
.stat-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  background: linear-gradient(120deg, var(--navy), var(--navy-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.stat-label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 6px;
}

/* ══════════════════ WHY CHOOSE US ══════════════════ */
.why-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  cursor: default;
}
.why-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.why-card .tick {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(255,193,7,0.22), rgba(255,122,0,0.08));
  color: var(--orange-dark);
  flex: none;
  border: 1px solid rgba(255,122,0,0.18);
  transition: var(--transition);
}
.why-card:hover .tick {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--glow-orange);
}
.why-card h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; color: var(--navy); }

/* ══════════════════ TECH MARQUEE ══════════════════ */
.tech-section {
  padding: 70px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tech-section .section-head { margin-bottom: 40px; }
.marquee-track {
  display: flex;
  animation: marquee 55s linear infinite; /* 32 badges: keeps the old scroll speed */
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-inner {
  display: flex;
  gap: 48px;
  align-items: center;
  padding: 0 24px;
}
.tech-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 40px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  transition: var(--transition);
  cursor: default;
  box-shadow: var(--shadow-sm);
}
.tech-badge:hover {
  border-color: var(--border-hover);
  color: var(--orange-dark);
  transform: scale(1.05);
  box-shadow: var(--shadow);
}
.tech-badge .tech-icon {
  font-size: 1.3rem;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Fade edges */
.marquee-wrapper {
  position: relative;
}
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg), transparent);
}

/* ══════════════════ TESTIMONIALS ══════════════════ */
.testimonials-section {
  padding: 110px 0;
  position: relative;
  z-index: 1;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}
.testimonial-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 8rem;
  font-family: Georgia, serif;
  color: rgba(0, 51, 102, 0.055);
  line-height: 1;
  pointer-events: none;
}
.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 0.9rem;
}
.testimonial-text {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-bright));
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  flex: none;
}
.testimonial-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
}
.testimonial-role {
  color: var(--muted);
  font-size: 0.82rem;
}

/* ══════════════════ CONTACT ══════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--muted);
}
.field input, .field textarea {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 51, 102, 0.16);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--font);
  transition: var(--transition);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.14);
}
.field input::placeholder, .field textarea::placeholder {
  color: rgba(90, 115, 145, 0.6);
}
.contact-info { list-style: none; }
.contact-info li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
}
.contact-info .ico { flex: none; }
.contact-info a { color: var(--navy-mid); font-weight: 600; transition: var(--transition-fast); }
.contact-info a:hover { color: var(--orange); }

.socials { display: flex; flex-wrap: wrap; gap: 12px; }
.socials a {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(0, 51, 102, 0.14);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  transition: var(--transition);
  font-weight: 700;
  cursor: pointer;
}
.socials a:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
  background: rgba(255, 122, 0, 0.08);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 122, 0, 0.22);
}

.success { display: none; text-align: center; padding: 30px; }
.success.show { display: block; animation: pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1); }
.success p { color: var(--muted); }
@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-bright));
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.check svg { width: 40px; height: 40px; }
.check svg path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw 0.6s 0.2s forwards ease;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ══════════════════ CTA BANNER ══════════════════ */
.cta-banner {
  padding: 100px 0;
  position: relative;
  z-index: 1;
  text-align: center;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 51, 102, 0.05), rgba(255, 193, 7, 0.10));
  z-index: -1;
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--navy);
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.cta-banner p {
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 34px;
  font-size: 1.05rem;
}
.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════ FOOTER ══════════════════ */
footer {
  background: var(--navy-deep);
  color: #EAF1FA;
  border-top: 3px solid var(--orange);
  padding: 56px 0 30px;
  position: relative;
  z-index: 1;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.5fr;
  gap: 36px 40px;
  align-items: start;
  margin-bottom: 36px;
}
.foot-grid a {
  color: rgba(234, 241, 250, 0.72);
  display: block;
  margin-bottom: 10px;
  font-size: 0.92rem;
  transition: var(--transition-fast);
}
.foot-grid .brand a { display: flex; margin: 0; }
.foot-grid a:hover { color: var(--gold); transform: translateX(3px); }
.foot-grid h4 { font-family: var(--font-display); margin-bottom: 16px; font-size: 1rem; color: #fff; }
.foot-about {
  color: rgba(234, 241, 250, 0.66);
  max-width: 340px;
  font-size: 0.92rem;
  margin-top: 14px;
  line-height: 1.65;
}
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(234, 241, 250, 0.6);
  font-size: 0.85rem;
}

/* ══════════════════ FLOATING ELEMENTS ══════════════════ */
/* WhatsApp float */
.float-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  display: grid;
  place-items: center;
  z-index: 60;
  box-shadow: 0 8px 30px rgba(255, 122, 0, 0.45);
  animation: wa-pulse 2.4s infinite;
  transition: var(--transition);
}
.float-wa:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(255, 122, 0, 0.6);
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0.5); }
  70% { box-shadow: 0 0 0 18px rgba(255, 122, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0); }
}
.float-wa svg { width: 30px; height: 30px; fill: #fff; }

/* Back to top */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: #fff;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  z-index: 60;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--navy);
  transition: var(--transition);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  box-shadow: var(--shadow);
}
.back-to-top.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.back-to-top:hover {
  color: var(--orange-dark);
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px var(--glow-orange);
}

/* ══════════════════ CUSTOM CURSOR ══════════════════ */
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--navy);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: width 0.2s, height 0.2s, background 0.2s;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(0, 51, 102, 0.35);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transition: width 0.3s, height 0.3s, border-color 0.3s;
  transform: translate(-50%, -50%);
}
.cursor-dot.hover {
  width: 14px;
  height: 14px;
  background: var(--orange);
}
.cursor-ring.hover {
  width: 50px;
  height: 50px;
  border-color: rgba(255, 122, 0, 0.55);
}

/* ══════════════════ BLOG ══════════════════ */
.blog-card { display: flex; flex-direction: column; gap: 14px; }
.blog-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange-dark);
  background: rgba(255, 193, 7, 0.16);
  border: 1px solid rgba(255, 122, 0, 0.3);
  padding: 5px 12px;
  border-radius: 999px;
}
.blog-card h3 { font-family: var(--font-display); font-size: 1.16rem; line-height: 1.35; color: var(--navy); }
.blog-card p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.blog-more { color: var(--orange-dark); font-weight: 700; transition: var(--transition-fast); }
.blog-card:hover .blog-more { transform: translateX(4px); }
/* the link stretches over the whole card, so a click anywhere opens the article */
.blog-more::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.blog-card { cursor: pointer; }
/* featured article: full row on top, so seven cards read 1 + 3 + 3 */
.blog-featured { grid-column: 1 / -1; border-left: 4px solid var(--orange); }
.blog-featured h3 { font-size: 1.4rem; }
.blog-featured p { max-width: 760px; flex: none; }

/* ── Section dividers (decorative gradient lines) ── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 51, 102, 0.14), transparent);
  border: none;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ══════════════════ RESPONSIVE ══════════════════ */
/* small laptops: seven links + two buttons need a tighter pill */
@media (max-width: 1240px) and (min-width: 901px) {
  .brand-logo { height: 34px; }
  .navlinks { gap: 2px; }
  .navlinks a { padding: 8px 9px; font-size: 0.84rem; }
  .navlinks a::after { left: 9px; right: 9px; }
  .nav-exam { padding: 8px 12px; font-size: 0.8rem; }
  .nav-cta.btn-primary { padding: 9px 18px; font-size: 0.88rem; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .orb-stage { order: -1; max-width: 280px; }
  .hero-cta, .hero-highlights { justify-content: center; }
  .tag { margin: 0 auto 22px; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .g3, .g2, .contact-grid, .foot-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .nav-cta, .nav-exam { display: none; }
  /* set apart from the anchor links above — it leaves the marketing site */
  .nav-exam-mobile {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .nav-exam-mobile a {
    color: var(--orange);
    font-weight: 700;
    background: rgba(255, 122, 0, 0.08);
    border: 1px solid rgba(255, 122, 0, 0.28);
  }
  .burger { display: flex; }
  .navlinks {
    position: fixed;
    /* clears the floating glass pill (16px offset + bar height) */
    inset: calc(92px + var(--topbar-h)) 14px auto 14px;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    padding: 20px 24px;
    border: 1.5px solid var(--navy);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 51, 102, 0.18);
    transform: translateY(-160%);
    transition: var(--transition);
    gap: 4px;
  }
  .navlinks.show { transform: none; }
  .navlinks a { padding: 12px 16px; width: 100%; border-radius: var(--radius-xs); }
  .cursor-dot, .cursor-ring { display: none !important; }
}
@media (max-width: 560px) {
  .g3, .g2, .contact-grid, .foot-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  section { padding: 80px 0; }
  .hero h1 { font-size: 2rem; }
}


/* ── footer socials ──
   `.foot-grid a` and `.socials a` have equal specificity, so the later
   footer rule was winning and painting the glyphs footer-light on a white
   chip. Pin the footer variant explicitly. */
footer .socials a {
  display: grid;
  place-items: center;
  margin: 0;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
footer .socials a:hover {
  color: var(--navy);
  background: #FFFFFF;
  border-color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}


/* ── Exam Portal, now the last entry in the footer's Services column ──
   Given its own pill so it reads as a separate destination rather than
   another in-page anchor. */
.foot-grid a.foot-exam {
  /* flex + fit-content so each portal pill takes its own row */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.42);
}
.foot-grid a.foot-exam:hover {
  color: var(--navy-deep);
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.28);
}


/* ── footer Services column ──
   Eight service links plus two portal pills made this column twice as tall
   as the brand and Company columns, which left a large empty block in the
   footer. Flow the links in two sub-columns so all three columns end at
   about the same depth; the heading still spans the full width. */
.foot-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  align-content: start;
}
.foot-services h4 { grid-column: 1 / -1; }
.foot-services a { margin-bottom: 12px; }
/* the two portal pills share one full-width row below the service links */
.foot-portals {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.foot-grid .foot-portals a.foot-exam { margin: 0; }
@media (max-width: 900px) and (min-width: 561px) {
  /* the footer drops to two columns here, so Services lands on its own row:
     let it span the full width and run three abreast instead of leaving
     half the row empty */
  .foot-services { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* the fixed WhatsApp button sits over the bottom-right corner, so stack
     the copyright line to the left instead of running text underneath it */
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 76px; }
}
@media (max-width: 560px) {
  .foot-services { grid-template-columns: 1fr; }
}


/* ══════════════════ ICONS ══════════════════
   Inline stroke icons replacing the old emoji. They draw in currentColor,
   so each one takes the colour of the tile or link it sits in. */
.ic { width: 24px; height: 24px; display: block; flex: none; }

/* service + about + contact tiles */
.ico .ic { width: 26px; height: 26px; color: var(--orange-dark); }
.contact-info .ico .ic { width: 23px; height: 23px; }

/* why-choose-us ticks already set their own colour */
.why-card .tick .ic { width: 24px; height: 24px; }

/* technology marquee */
.tech-badge .tech-icon { display: grid; place-items: center; }
.tech-badge .tech-icon .ic { width: 20px; height: 20px; color: var(--navy-mid); }
.tech-badge:hover .tech-icon .ic { color: var(--orange-dark); }

/* social buttons — brand glyphs, slightly smaller than the line icons */
.socials a .ic { width: 19px; height: 19px; }

/* the footer's Exam Portal pill */
.foot-grid a.foot-exam .ic { width: 17px; height: 17px; }


/* ══════════════════ APPLICATION CATALOGUE ══════════════════
   Compact tiles rather than full service cards: this is a long list of
   named products, so the name has to stay the loudest thing in each row. */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.app-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.app-ico {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.20), rgba(255, 122, 0, 0.08));
  border: 1px solid rgba(255, 122, 0, 0.18);
  transition: var(--transition);
}
.app-ico .ic { width: 22px; height: 22px; color: var(--orange-dark); }
.app-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--navy);
}
.app-item:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: 0 14px 32px rgba(0, 51, 102, 0.10);
}
.app-item:hover .app-ico { transform: scale(1.08) rotate(-5deg); }

/* the closing tile is a link through to the contact form */
.app-more {
  background: linear-gradient(135deg, rgba(0, 51, 102, 0.05), rgba(255, 122, 0, 0.06));
  border-style: dashed;
  border-color: rgba(255, 122, 0, 0.40);
}
.app-more .app-name { color: var(--orange-dark); }

@media (max-width: 560px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-item { padding: 13px 15px; gap: 12px; }
  .app-ico { width: 38px; height: 38px; }
}


/* ── application tiles: three colour families off the logo ──
   The grid runs 19 tiles deep, so a single accent made it read as one flat
   block. navy = people & operations, orange = commerce, gold = health,
   travel and lifestyle. Only the icon tile and the hover edge change; every
   name stays navy so legibility is identical across all three. */
.app-item.c-navy .app-ico {
  background: linear-gradient(135deg, rgba(30, 111, 217, 0.16), rgba(0, 51, 102, 0.06));
  border-color: rgba(0, 51, 102, 0.20);
}
.app-item.c-navy .app-ico .ic { color: var(--navy-mid); }
.app-item.c-navy:hover {
  border-color: rgba(11, 76, 143, 0.42);
  box-shadow: 0 14px 32px rgba(0, 51, 102, 0.13);
}

.app-item.c-orange .app-ico {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.19), rgba(255, 122, 0, 0.05));
  border-color: rgba(255, 122, 0, 0.24);
}
.app-item.c-orange .app-ico .ic { color: var(--orange-dark); }
.app-item.c-orange:hover {
  border-color: var(--border-hover);
  box-shadow: 0 14px 32px rgba(255, 122, 0, 0.16);
}

.app-item.c-gold .app-ico {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.30), rgba(255, 193, 7, 0.07));
  border-color: rgba(255, 193, 7, 0.42);
}
/* deep gold: #FFC107 itself is unreadable at 22px on a pale gold wash */
.app-item.c-gold .app-ico .ic { color: #A85F00; }
.app-item.c-gold:hover {
  border-color: rgba(214, 158, 0, 0.60);
  box-shadow: 0 14px 32px rgba(255, 193, 7, 0.22);
}


/* ── service card icon tiles: one family per card ──
   Same three families as the application tiles, plus "plain": a neutral tile
   for the cards that carry a real product logo, which keeps its own colours. */
.service-card.c-navy .ico {
  background: linear-gradient(135deg, rgba(30, 111, 217, 0.16), rgba(0, 51, 102, 0.06));
  border-color: rgba(0, 51, 102, 0.20);
}
.service-card.c-navy .ico .ic { color: var(--navy-mid); }
.service-card.c-navy:hover .ico { box-shadow: 0 8px 20px rgba(0, 51, 102, 0.20); }

.service-card.c-gold .ico {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.30), rgba(255, 193, 7, 0.07));
  border-color: rgba(255, 193, 7, 0.42);
}
.service-card.c-gold .ico .ic { color: #A85F00; }
.service-card.c-gold:hover .ico { box-shadow: 0 8px 20px rgba(255, 193, 7, 0.30); }

/* neutral tile so a product logo's own colours stay true */
.service-card.c-plain .ico {
  background: linear-gradient(135deg, rgba(0, 51, 102, 0.06), rgba(0, 51, 102, 0.02));
  border-color: rgba(0, 51, 102, 0.12);
}
.service-card.c-plain:hover .ico { box-shadow: 0 8px 20px rgba(0, 51, 102, 0.12); }

/* brand marks are filled artwork, so give them a touch more room */
.tech-badge .tech-icon .ic { width: 21px; height: 21px; }


/* ══════════════════ SECTION BORDERS ══════════════════
   Every content section now sits in its own bordered panel, in the same brand
   navy as the floating nav bar, with a navy → orange → gold hairline across
   the top edge so the border reads as brand colour rather than a plain rule.
   The hero keeps its full-bleed wallpaper and takes no panel. */
section:not(.hero) > .container {
  position: relative;
  border: 1.5px solid rgba(0, 51, 102, 0.20);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 38px rgba(0, 51, 102, 0.06);
  padding: 56px 40px;
  overflow: hidden;
}
/* the brand hairline along the top of each panel */
section:not(.hero) > .container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-bright) 34%, var(--orange) 72%, var(--gold) 100%);
  pointer-events: none;
}
/* the panel supplies the breathing room now, so the section needs less */
section:not(.hero) { padding: 52px 0; }
.stats-section { padding: 52px 0; border-top: 0; border-bottom: 0; }
.tech-section, .testimonials-section, .cta-banner { padding: 52px 0; }
/* the marquee bleeds past the panel edge by design */
.tech-section > .container { overflow: hidden; }

/* the divider between sections is redundant beside a bordered panel */
.section-divider { display: none; }

@media (max-width: 900px) {
  section:not(.hero) > .container { padding: 44px 26px; border-radius: 22px; }
}
@media (max-width: 560px) {
  section:not(.hero) > .container { padding: 34px 18px; border-radius: 18px; }
  section:not(.hero) { padding: 26px 0; }
}


/* ── tech marquee band ──
   The marquee is a full-bleed strip with fade-outs at both edges, so it is
   the one section that must NOT sit in a rounded panel: clipping it to 1200px
   kills the effect and strands the track below an empty box. It gets the
   brand border as full-width rules instead. */
section.tech-section:not(.hero) > .container {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0 24px;
  overflow: visible;
}
section.tech-section:not(.hero) > .container::after { content: none; }
section.tech-section {
  border-top: 3px solid transparent;
  border-bottom: 1.5px solid rgba(0, 51, 102, 0.20);
  border-image: linear-gradient(90deg, var(--navy) 0%, var(--navy-bright) 34%, var(--orange) 72%, var(--gold) 100%) 1;
  border-left: 0;
  border-right: 0;
  background: rgba(255, 255, 255, 0.55);
  padding: 40px 0 34px;
}

/* ── spacing: the panels carry the separation now, so the old 110px section
   padding stacked on top of panel padding left dead bands between sections ── */
section:not(.hero) { padding: 34px 0; }
.stats-section, .testimonials-section, .cta-banner { padding: 34px 0; }
section:not(.hero):not(.tech-section) > .container { padding: 44px 40px; }
.sub { margin-bottom: 34px; }
h2.title { margin: 10px 0 14px; }

@media (max-width: 900px) {
  section:not(.hero):not(.tech-section) > .container { padding: 36px 24px; }
  section:not(.hero) { padding: 22px 0; }
  .tech-section { margin-inline: 20px; }
}
@media (max-width: 560px) {
  section:not(.hero):not(.tech-section) > .container { padding: 28px 17px; }
  section:not(.hero) { padding: 16px 0; }
  .sub { margin-bottom: 26px; }
}


/* ══════════════════ UTILITY TOP BAR ══════════════════
   A dark strip above the nav carrying the things people look for first:
   reach, hours, and the exam portal. Navy rather than black so it reads as
   the same brand as the footer. Its height drives the hero's top padding and
   the mobile menu offset through --topbar-h, so nothing has to be re-guessed. */
:root { --topbar-h: 40px; }

header { padding: 0; }
.nav-shell { padding: 14px clamp(12px, 2.5vw, 28px) 0; }

.topbar {
  background: var(--navy-deep);
  color: #CBDCF0;
  font-size: 0.82rem;
  line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.topbar-inner {
  max-width: 1340px;
  margin: 0 auto;
  min-height: var(--topbar-h);
  padding: 0 clamp(14px, 2.5vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-right { gap: 20px; }

.tb-flag {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--gold); font-weight: 700; white-space: nowrap;
}
.tb-flag .ic { width: 15px; height: 15px; color: var(--orange-light); }
.tb-sep { width: 1px; height: 15px; background: rgba(255, 255, 255, 0.20); }
.tb-hours { color: rgba(203, 220, 240, 0.86); white-space: nowrap; }

.tb-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: #DCE8F7; white-space: nowrap;
  transition: color var(--transition-fast);
}
.tb-link .ic { width: 15px; height: 15px; flex: none; }
.tb-link:hover { color: var(--gold); }
/* the portal leaves the marketing site, so it is set apart */
.tb-exam { color: var(--gold); font-weight: 700; }
.tb-exam:hover { color: var(--gold-light); }

/* the hero sits under a fixed header that is now taller */
.hero { padding-top: calc(90px + var(--topbar-h)); }

@media (max-width: 1100px) {
  /* the email is the longest item and the least tapped on a phone */
  .tb-mail { display: none; }
}
@media (max-width: 860px) {
  .tb-sep, .tb-hours { display: none; }
}
@media (max-width: 620px) {
  :root { --topbar-h: 36px; }
  .topbar { font-size: 0.76rem; }
  .topbar-inner { justify-content: center; gap: 14px; }
  .tb-flag { display: none; }
}


/* ── mobile menu: hide it properly ──
   The sheet was hidden with translateY(-160%), which only cleared the screen
   because of where it used to sit. The taller header pushed it down and 30px
   of the closed menu began peeking over the utility strip. Drive it off by
   its own height plus a margin, and take it out of sight entirely so no
   future header change can make it peek again. */
@media (max-width: 900px) {
  .navlinks {
    transform: translateY(calc(-100% - 220px));
    visibility: hidden;
    transition: transform var(--transition), visibility 0s linear 0.35s;
  }
  .navlinks.show {
    transform: none;
    visibility: visible;
    transition: transform var(--transition), visibility 0s;
  }
}


/* ── both numbers in the strip, one icon between them ──
   Each number stays its own tap target; the icon labels the pair so the
   phone glyph is not repeated. The exam portal link is gone from here —
   it lives in the footer Services column. */
.tb-phones {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #DCE8F7;
  white-space: nowrap;
}
.tb-phones .ic { width: 15px; height: 15px; flex: none; }
.tb-phones a { color: inherit; transition: color var(--transition-fast); }
.tb-phones a:hover { color: var(--gold); }
.tb-dot { color: rgba(203, 220, 240, 0.45); }

@media (max-width: 620px) {
  /* two numbers plus padding still fit a 360px screen at this size */
  .tb-phones { gap: 6px; }
  .topbar-inner { padding: 0 12px; }
}


/* ══════════════════ DARK HERO BAND ══════════════════
   A photographic banner under the header, then a dark block carrying the
   headline, buttons and capability pills. Only the hero is dark — every
   section below keeps the light panels. The band's photo layer is optional:
   a background layer whose file is missing does not paint, so the brand
   artwork (assets/hero-band.svg) shows through until a photo is added. */
.hero-dark {
  display: block;
  min-height: 0;
  padding-top: 0;
  background: linear-gradient(180deg, #001C3F 0%, #00224A 42%, #00152F 100%);
  overflow: hidden;
}
.hero-dark .hero-photo {
  margin-top: calc(74px + var(--topbar-h));
  height: clamp(190px, 31vh, 340px);
  background-color: #001C3F;
  background-image:
    url('../assets/hero-photo.jpg'),
    url('../assets/hero-band.svg');
  background-size: cover, cover;
  background-position: center 42%, center center;
  background-repeat: no-repeat, no-repeat;
  position: relative;
}
/* the photo fades into the copy block so there is no hard seam */
.hero-dark .hero-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(0, 28, 63, 0) 0%, rgba(0, 28, 63, 0.72) 58%, #00224A 100%);
}
.hero-dark .hero2 { padding: 52px 0 66px; align-items: start; }

/* the white wash behind the copy belongs to the light hero only */
.hero-dark .hero2-left::before { content: none; }

.hero-dark .hero2-logo { margin-bottom: 22px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45)); }
.hero2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--orange-light);
  margin-bottom: 14px;
  animation: heroRise 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}
.hero2-eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
.hero-dark .hero2-title { color: #FFFFFF; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.hero2-accent { color: var(--orange); }
.hero-dark .hero2-sub { color: #B9CCE2; max-width: 560px; }

.hero-dark .btn-hero-glass {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
}
.hero-dark .btn-hero-glass:hover {
  border-color: var(--orange);
  background: rgba(255, 122, 0, 0.16);
  color: #FFFFFF;
}

/* capability pills under the buttons */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  list-style: none;
  animation: heroRise 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}
.hero-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #E4EDF8;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: var(--transition-fast);
}
.hero-pills li:hover {
  border-color: rgba(255, 122, 0, 0.55);
  background: rgba(255, 122, 0, 0.12);
}
.hero-pills .ic { width: 15px; height: 15px; color: var(--orange-light); flex: none; }

/* the animated orbit overlays read as light-on-dark now */
.hero-dark .orbit-ring { border-color: rgba(127, 176, 232, 0.22); }
.hero-dark .streak { opacity: 0.7; }

@media (max-width: 900px) {
  .hero-dark .hero2 { padding: 38px 0 50px; }
  .hero-dark .hero-photo { height: clamp(150px, 24vh, 240px); }
  .hero-pills { margin-top: 24px; gap: 8px; }
  .hero-pills li { font-size: 0.8rem; padding: 7px 13px 7px 10px; }
}


/* ── dark hero proportions ──
   The reference leads with the eyebrow, not a second logo: the lockup is
   already in the nav bar a few pixels above, so repeating it cost height and
   read as a duplicate. A wider copy column then lands the headline on two
   or three lines instead of four. */
.hero-dark .hero2-logo { display: none; }
.hero-dark .hero2 { grid-template-columns: minmax(320px, 58%) 1fr; gap: 28px; }
.hero-dark .hero2-title { font-size: clamp(2.2rem, 4.1vw, 3.5rem); letter-spacing: -1.2px; }
.hero-dark .hero2-eyebrow { margin-top: 4px; }

@media (max-width: 900px) {
  .hero-dark .hero2 { grid-template-columns: 1fr; }
}


/* ── hero photograph framing ──
   assets/hero-photo.jpg is the wall-mounted lockup shot. Its logo sits in the
   upper-middle of the frame, so the band is cropped from 34% down rather than
   centred, which would cut the wordmark in half. The photo is bright, so the
   fade into the navy copy block starts higher and runs deeper than it does
   over the dark brand artwork. */
.hero-dark .hero-photo { background-position: center 34%, center center; }
.hero-dark .hero-photo::after {
  height: 58%;
  background: linear-gradient(180deg,
    rgba(0, 28, 63, 0) 0%,
    rgba(0, 28, 63, 0.30) 34%,
    rgba(0, 28, 63, 0.82) 70%,
    #00224A 100%);
}


/* ── photograph framing, second pass ──
   At 295px the band showed only 36% of a 16:9 photo, cropping into the
   wordmark and losing the office scene entirely. A taller band with the crop
   started higher shows the lockup whole, plus the plant and window that give
   the shot its context. The fade is shallower to match, so the photo's own
   tagline is not swallowed. */
.hero-dark .hero-photo {
  height: clamp(250px, 38vh, 430px);
  background-position: center 28%, center center;
}
.hero-dark .hero-photo::after {
  height: 38%;
  background: linear-gradient(180deg,
    rgba(0, 28, 63, 0) 0%,
    rgba(0, 28, 63, 0.34) 42%,
    rgba(0, 28, 63, 0.86) 78%,
    #00224A 100%);
}
@media (max-width: 900px) {
  .hero-dark .hero-photo { height: clamp(180px, 28vh, 280px); }
}


/* ══════════════════ DARK FEATURE SECTION ══════════════════
   A section that inverts to near-black while its neighbours stay light, so
   the photograph inside it reads as a framed piece rather than floating on
   white. Near-black here is a very dark navy, not a neutral black, so it
   still belongs to the logo's hue family. */
/* specificity note: this has to out-rank `section:not(.hero) > .container`,
   which is (0,2,1) - hence the element qualifier and the :not() here. */
section.section-dark:not(.hero) > .container {
  background: linear-gradient(180deg, #0A0F17 0%, #0B1220 55%, #081018 100%);
  border-color: rgba(127, 176, 232, 0.20);
  box-shadow: 0 18px 50px rgba(0, 12, 28, 0.30);
}
.section-dark .title { color: #FFFFFF; }
.section-dark .sub { color: #A9BCD2; }
.section-dark .eyebrow { color: var(--orange-light); }
.section-dark .eyebrow::before { background: var(--orange); }

/* the mission and vision cards, inverted to sit on the dark ground */
.section-dark .card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(127, 176, 232, 0.18);
  box-shadow: none;
}
.section-dark .card::before {
  background: linear-gradient(90deg, transparent, rgba(127, 176, 232, 0.22), transparent);
}
.section-dark .card h3 { color: #FFFFFF; }
.section-dark .card p { color: #A9BCD2; }
.section-dark .card:hover {
  border-color: rgba(255, 122, 0, 0.45);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
}

/* the photograph, framed */
.about-shot {
  margin: 0 0 34px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(127, 176, 232, 0.22);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
  line-height: 0;
}
.about-shot img { width: 100%; height: auto; display: block; }

@media (max-width: 560px) {
  .about-shot { border-radius: 14px; margin-bottom: 26px; }
}


/* ── photograph framing, third pass: keep the crop stable at any width ──
   A pixel-capped band height was the bug. `cover` scales the photo to the
   window width, so at 1900px the band showed only 40% of its height and cut
   "TECHNOLOGY" and the tagline off the bottom of the lockup. Sizing the band
   in vw keeps the visible fraction constant at every width, and 35% down is
   the one position that fits the whole lockup inside it. */
.hero-dark .hero-photo {
  height: clamp(250px, 24vw, 560px);
  background-position: center 35%, center center;
}
@media (max-width: 900px) {
  /* below this the whole photo height fits, so `cover` crops the sides
     instead and the band can be shorter */
  .hero-dark .hero-photo { height: clamp(170px, 34vw, 300px); }
}


/* ── larger brand lockup ──
   The logo was sized to sit inside the nav pill without growing it; at 52px
   the wordmark read small against the 7 nav links. Stepped up across every
   breakpoint, with the pill's vertical padding trimmed so the bar height
   barely changes. */
.brand-logo { height: 68px; }
header nav.container { padding: 6px 12px 6px 18px; }
@media (max-width: 1240px) and (min-width: 901px) {
  .brand-logo { height: 58px; }
}
@media (max-width: 900px) {
  .brand-logo { height: 54px; }
}
@media (max-width: 560px) {
  .brand-logo { height: 46px; }
}
/* footer lockup keeps its own scale */
footer .brand-logo { height: 58px; }


/* ── full-height banner ──
   The band now runs at the photo's own 16:9 ratio (56.25vw), so nothing is
   cropped at all up to about 1530px wide — the whole scene reads, desk and
   window included. Past that a cap keeps it from swallowing the fold, and
   the 35% anchor decides what goes. The fade is short now: at this height it
   would otherwise cover the desk, and the photo's own dark right-hand side
   already meets the navy block cleanly. */
.hero-dark .hero-photo {
  height: min(56.25vw, 860px);
  background-position: center 35%, center center;
}
.hero-dark .hero-photo::after {
  height: 14%;
  background: linear-gradient(180deg,
    rgba(0, 28, 63, 0) 0%,
    rgba(0, 28, 63, 0.45) 55%,
    #00224A 100%);
}
@media (max-width: 900px) {
  /* 56.25vw is already short here, so no cap and no crop */
  .hero-dark .hero-photo { height: 56.25vw; }
}


/* ══════════════════ FLAT HEADER BAR ══════════════════
   The floating rounded pill is replaced by a full-width white bar sitting
   flush under the utility strip, with the content still centred on the same
   1340px measure. --navbar-h carries the bar's height so the hero banner
   below it does not have to re-guess the offset. */
:root { --navbar-h: 84px; }

.nav-shell {
  padding: 0;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0, 51, 102, 0.12);
  box-shadow: 0 2px 14px rgba(0, 51, 102, 0.06);
  transition: box-shadow var(--transition);
}
header.scrolled .nav-shell { box-shadow: 0 4px 20px rgba(0, 51, 102, 0.13); }

/* strip the pill treatment off the bar itself */
header nav.container,
header.scrolled nav.container {
  max-width: 1340px;
  padding: 8px 24px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: var(--navbar-h);
}

/* solid orange call to action, as on the reference */
.nav-cta.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  color: #FFFFFF;
  border: 0;
  border-radius: 12px;
  padding: 13px 30px;
  box-shadow: 0 6px 18px rgba(255, 122, 0, 0.30);
}
.nav-cta.btn-primary:hover {
  background: linear-gradient(135deg, var(--orange-dark), var(--orange));
  box-shadow: 0 10px 26px rgba(255, 122, 0, 0.42);
  transform: translateY(-2px);
}

/* the banner now starts right under a flush bar, not a floating pill */
/* +1px for the bar's bottom border, or the banner slips under it */
.hero-dark .hero-photo { margin-top: calc(var(--topbar-h) + var(--navbar-h) + 1px); }

/* the mobile sheet hangs off the bar's bottom edge */
@media (max-width: 900px) {
  :root { --navbar-h: 72px; }
  .navlinks { inset: calc(var(--topbar-h) + var(--navbar-h) + 8px) 14px auto 14px; }
}
@media (max-width: 560px) {
  :root { --navbar-h: 66px; }
  header nav.container, header.scrolled nav.container { padding: 6px 16px; }
}


/* ── anchor landing offset ──
   The header is fixed, so jumping to #services scrolled the section to y=0 —
   underneath the bar — and clipped its heading. scroll-margin-top parks every
   anchor target just clear of the utility strip plus the nav bar. Derived
   from the same two variables, so it stays correct if either changes. */
section[id],
[id^="apps"],
.hero[id] {
  scroll-margin-top: calc(var(--topbar-h) + var(--navbar-h) + 12px);
}
@media (max-width: 900px) {
  section[id] { scroll-margin-top: calc(var(--topbar-h) + var(--navbar-h) + 8px); }
}


/* ── tighter vertical rhythm ──
   With the anchor offset in place the headings cleared the bar by 120-140px,
   which read as dead space on arrival. Panel and section padding come down
   together so the gap between panels stays balanced with the gap inside them. */
section:not(.hero) { padding: 20px 0; }
.stats-section, .testimonials-section, .cta-banner { padding: 20px 0; }
section:not(.hero):not(.tech-section) > .container { padding: 32px 40px; }
section[id] { scroll-margin-top: calc(var(--topbar-h) + var(--navbar-h) + 4px); }
.sub { margin-bottom: 28px; }

@media (max-width: 900px) {
  section:not(.hero) { padding: 14px 0; }
  section:not(.hero):not(.tech-section) > .container { padding: 28px 22px; }
  section[id] { scroll-margin-top: calc(var(--topbar-h) + var(--navbar-h) + 4px); }
}
@media (max-width: 560px) {
  section:not(.hero) { padding: 10px 0; }
  section:not(.hero):not(.tech-section) > .container { padding: 24px 16px; }
  .sub { margin-bottom: 22px; }
}


/* ── header scale, dialled back ──
   68px logo in an 84px bar pushed the fixed header to 125px including the
   utility strip, which ate the top of the page on arrival. Brought down to a
   54px lockup in a 68px bar — still clearly bigger than the 52px it started
   at, but 16px shallower overall. Anchor offsets track --navbar-h, so the
   landing positions follow automatically. */
:root { --navbar-h: 68px; }
.brand-logo { height: 54px; }
header nav.container,
header.scrolled nav.container { padding: 6px 22px; min-height: var(--navbar-h); }
.nav-cta.btn-primary { padding: 11px 26px; }
footer .brand-logo { height: 54px; }

@media (max-width: 1240px) and (min-width: 901px) {
  .brand-logo { height: 48px; }
}
@media (max-width: 900px) {
  :root { --navbar-h: 62px; }
  .brand-logo { height: 46px; }
}
@media (max-width: 560px) {
  :root { --navbar-h: 56px; }
  .brand-logo { height: 40px; }
  header nav.container, header.scrolled nav.container { padding: 5px 15px; }
}


/* ══════════════════ LEGIBILITY PASS ══════════════════
   From the audit: small orange type on white sat at 2.6-3.3:1 where AA asks
   for 4.5, and the gold testimonial stars measured 1.63:1 — effectively
   invisible on a white card. #A85F00 is the same warm hue at 4.88:1, so the
   brand reads the same and the text can actually be read. The big orange
   display type (headings, buttons, hero accents) is untouched: it is large
   enough to clear the 3:1 bar and it carries the brand. */
.eyebrow { color: #A85F00; }
.eyebrow::before { background: var(--orange); }
/* on the dark panels the light orange is correct and already passing */
.section-dark .eyebrow, .hero-dark .eyebrow { color: var(--orange-light); }

/* the five-star ratings: the single strongest sales signal on the page */
.stars, .rating, .testimonial-stars, .t-stars { color: #A85F00; }

/* small orange links and labels on white */
.blog-more, .read-more, .app-more .app-name { color: #A85F00; }
.foot-bottom a { color: #A85F00; }

/* blog category tag: orange on a pale gold chip measured 3.02:1 on a white
   card, the one genuine light-ground failure left. Deepened one step. */
.blog-tag { color: #8F5000; }


/* ══════════════════ BUTTON FILL: THE LAST CONTRAST FIX ══════════════════
   White on the old #FF7A00 -> #FF9A33 gradient measured 2.61 and 2.12:1
   against a 4.5 requirement — every primary CTA on the site. Both ends of
   this replacement pass at any text size (5.02 and 4.60:1), so small buttons
   in the exam portal are covered too, not just the large hero ones. It is
   the same warm hue, two steps deeper. The logo, headings and hero accents
   keep #FF7A00 untouched. */
:root {
  --btn-fill-a: #B94F00;   /* white on this: 5.02:1 */
  --btn-fill-b: #C25400;   /* white on this: 4.60:1 */
}

.btn-primary,
.btn-hero-primary,
.nav-cta.btn-primary {
  background: linear-gradient(135deg, var(--btn-fill-a), var(--btn-fill-b));
  color: #FFFFFF;
}
.btn-primary:hover,
.nav-cta.btn-primary:hover {
  background: linear-gradient(135deg, #A44600, var(--btn-fill-a));
}
.btn-hero-primary:hover {
  background: linear-gradient(135deg, #A44600, var(--btn-fill-a));
  filter: none;   /* brightness() would undo the contrast gain */
}

/* the orange glow around the buttons still reads as brand orange */
.btn-primary { box-shadow: 0 8px 26px rgba(185, 79, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-hero-primary { box-shadow: 0 8px 30px rgba(185, 79, 0, 0.34), 0 0 24px rgba(255, 122, 0, 0.18); }
.nav-cta.btn-primary { box-shadow: 0 6px 18px rgba(185, 79, 0, 0.28); }

/* shown only if the contact form fails to send */
.form-error {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-xs);
  background: rgba(200, 30, 30, 0.08);
  border: 1px solid rgba(200, 30, 30, 0.30);
  color: #A31515;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── Support Team number ── */
.tb-label { color: #FFD54A; font-weight: 700; margin-right: 2px; }
.contact-note { display: inline-block; margin-top: 2px; font-size: 0.85rem; color: var(--muted); }
.foot-bottom a { color: inherit; font-weight: 600; }
.foot-bottom a:hover { color: var(--orange-light); }

/* ── Contact form: honeypot, WhatsApp / email actions ── */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error p { margin: 0; }
.fallback-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn-wa, .btn-mail {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px; font-weight: 700; font-size: 0.92rem;
  transition: var(--transition-fast); cursor: pointer;
}
.btn-wa { background: #1DA851; color: #fff; box-shadow: 0 8px 22px rgba(29, 168, 81, 0.28); }
.btn-wa:hover { background: #178A43; transform: translateY(-2px); }
.btn-mail { background: #fff; color: var(--navy); border: 1px solid var(--border); }
.btn-mail:hover { border-color: var(--orange); color: var(--orange-dark); }
.success .btn-wa { margin-top: 18px; }