/* ============================================================
   Loan Experts India — Design System
   Palette derived strictly from the brand logo:
   Blue #393186 · Red #E31F25 · White #FFFFFF
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — sampled from logo */
  --blue: #393186;
  --blue-ink: #14123f;
  --blue-deep: #201b60;
  --blue-mid: #4a41a8;
  --blue-soft: #8f88d6;
  --blue-100: #e9e7f8;
  --blue-50: #f5f4fd;

  --red: #e31f25;
  --red-bright: #ef3a40;
  --red-dark: #b8151b;
  --red-50: #fdecec;

  /* Neutrals */
  --ink: #121128;
  --body: #56546f;
  --muted: #8a889f;
  --line: #e8e7f1;
  --line-soft: #f0eff7;
  --paper: #f7f7fc;
  --white: #fff;

  /* Type */
  --f-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --f-serif: "Newsreader", Georgia, serif;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Elevation — tinted with brand navy, never neutral grey */
  --sh-xs: 0 1px 2px rgba(20, 18, 63, 0.05), 0 2px 6px rgba(20, 18, 63, 0.04);
  --sh-sm: 0 2px 4px rgba(20, 18, 63, 0.04), 0 8px 20px -8px rgba(20, 18, 63, 0.12);
  --sh-md: 0 4px 8px rgba(20, 18, 63, 0.04), 0 18px 40px -16px rgba(20, 18, 63, 0.18);
  --sh-lg: 0 8px 16px rgba(20, 18, 63, 0.05), 0 40px 72px -28px rgba(20, 18, 63, 0.26);
  --sh-red: 0 10px 28px -10px rgba(227, 31, 37, 0.5);
  --sh-blue: 0 10px 28px -10px rgba(57, 49, 134, 0.45);

  /* Rhythm */
  --pad-section: clamp(76px, 8.5vw, 132px);
  /* 5% each side: 5vw holds true from ~400px up to 1440px, with a 20px floor
     on small phones and a 72px ceiling so ultra-wide screens do not sprawl. */
  --gutter: clamp(20px, 5vw, 72px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 84px;
  --topbar-h: 42px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--blue-mid);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--blue); color: #fff; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.6rem, 5vw, 4.15rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  word-spacing: 0.1em;
  font-weight: 800;
}

/* The tight display tracking pulls the word gaps in too, so word-spacing
   buys the gaps back without loosening the letters. */
.h-section {
  font-size: clamp(1.95rem, 3.3vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  word-spacing: 0.12em;
  font-weight: 800;
}

.h-sub {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.025em;
  font-weight: 700;
}

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.75;
  color: var(--body);
}

.serif-quote {
  font-family: var(--f-serif);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* Accent word — the only place red touches a headline */
.accent { color: var(--red); }
.accent-blue { color: var(--blue); }

.underscore {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.underscore::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.03em;
  height: 0.34em;
  background: linear-gradient(90deg, rgba(227, 31, 37, 0.22), rgba(227, 31, 37, 0.05));
  border-radius: 2px;
  z-index: -1;
}

/* ---------- 4. Layout ---------- */
.container { width: min(100% - var(--gutter) * 2, 1220px); margin-inline: auto; }
.container-wide { width: min(100% - var(--gutter) * 2, 1360px); margin-inline: auto; }
.container-narrow { width: min(100% - var(--gutter) * 2, 940px); margin-inline: auto; }

.section { padding-block: var(--pad-section); position: relative; }
.section-tight { padding-block: clamp(56px, 6vw, 88px); }

.sec-head { max-width: 700px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { margin-top: 18px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.sec-head--center .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.eyebrow--light { color: var(--blue-soft); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg:last-child { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--red-bright), var(--red-dark));
  color: #fff;
  box-shadow: var(--sh-red);
}
.btn-primary:hover { box-shadow: 0 16px 34px -10px rgba(227, 31, 37, 0.58); }

.btn-navy {
  background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep));
  color: #fff;
  box-shadow: var(--sh-blue);
}
.btn-navy:hover { box-shadow: 0 16px 34px -10px rgba(57, 49, 134, 0.55); }

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
.btn-ghost:hover { border-color: var(--blue-soft); box-shadow: var(--sh-sm); }

.btn-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}
.btn-light:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.42); }

.btn-white { background: #fff; color: var(--blue-ink); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45); }

.btn-sm { padding: 11px 22px; font-size: 0.875rem; }
.btn-lg { padding: 18px 36px; font-size: 1rem; }

/* Text link with sliding arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--blue);
  transition: gap 0.35s var(--ease), color 0.3s ease;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.link-arrow:hover { gap: 12px; color: var(--red); }

/* ---------- 6. Icon chips ---------- */
.icon-chip {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  flex: none;
  background: linear-gradient(150deg, var(--blue-50), #fff);
  border: 1px solid var(--line);
  color: var(--blue);
  box-shadow: var(--sh-xs);
  transition: transform 0.4s var(--ease), background 0.4s ease, color 0.4s ease,
    border-color 0.4s ease, box-shadow 0.4s var(--ease);
}
.icon-chip svg { width: 26px; height: 26px; }
.icon-chip--red { background: linear-gradient(150deg, var(--red-50), #fff); color: var(--red); }
.icon-chip--solid {
  background: linear-gradient(140deg, var(--blue-mid), var(--blue-deep));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sh-blue);
}
.icon-chip--glass {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(8px);
}

/* ---------- 7. Surfaces & decoration ---------- */
.bg-paper { background: var(--paper); }
.bg-tint { background: linear-gradient(180deg, #fff 0%, var(--blue-50) 55%, #fff 100%); }

.bg-navy {
  background:
    radial-gradient(1000px 520px at 82% -8%, rgba(74, 65, 168, 0.5), transparent 62%),
    radial-gradient(760px 460px at 6% 108%, rgba(227, 31, 37, 0.16), transparent 60%),
    linear-gradient(160deg, #1a1650 0%, var(--blue-ink) 58%, #0e0d2c 100%);
  color: rgba(255, 255, 255, 0.72);
}
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }

/* Fine dot grid — used sparingly behind hero / dark bands */
.dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.05;
  pointer-events: none;
}

/* Hairline rule with a red tick */
.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  position: relative;
}
.rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}

/* Soft ambient blob */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 8. Rating stars ---------- */
.stars { display: inline-flex; gap: 2px; color: #f5a623; }
.stars svg { width: 15px; height: 15px; }
.stars--blue { color: var(--blue); }

/* ---------- 9. Top utility bar ---------- */
.topbar {
  background: var(--blue-ink);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8125rem;
  position: relative;
  z-index: 60;
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 42px;
}
.topbar__group { display: flex; align-items: center; gap: 26px; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; transition: color 0.25s ease; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; color: var(--blue-soft); flex: none; }
.topbar__socials { display: flex; gap: 6px; }
.topbar__socials a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
}
.topbar__socials a:hover { background: var(--red); }
.topbar__socials svg { width: 12px; height: 12px; color: inherit; }

/* ---------- 10. Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.4s var(--ease), border-color 0.4s ease, background 0.4s ease;
}
.nav.is-stuck {
  box-shadow: 0 1px 0 rgba(20, 18, 63, 0.06), 0 10px 34px -18px rgba(20, 18, 63, 0.28);
  border-bottom-color: rgba(232, 231, 241, 0.9);
  background: rgba(255, 255, 255, 0.94);
}
.nav__in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.nav__logo { display: flex; align-items: center; flex: none; }
/* logo-mark.png is the artwork trimmed out of the original square canvas,
   so it needs no object-fit cropping and carries its own 2.46:1 ratio. */
.nav__logo img {
  width: 168px;
  height: auto;
  aspect-ratio: 2.46 / 1;
  display: block;
  transition: transform 0.4s var(--ease);
}
.nav__logo:hover img { transform: scale(1.03); }

.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  white-space: nowrap;
  transition: color 0.25s ease, background-color 0.25s ease;
}
/* The indicator is a brand gradient that wipes in from the centre. It is the
   only colour on the bar at rest, which keeps the row formal rather than busy. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--red));
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--blue); background: var(--blue-50); }
.nav__link:hover::after, .nav__item.is-open > .nav__link::after { transform: scaleX(1); }

/* Current page */
.nav__link.is-active { color: var(--blue); }
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link .caret { width: 12px; height: 12px; color: var(--muted); transition: transform 0.35s var(--ease); }
.nav__item.is-open .caret { transform: rotate(180deg); }
.nav__item { position: relative; }

.nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__call { display: flex; align-items: center; gap: 11px; padding-right: 4px; }
.nav__call .icon-chip { width: 42px; height: 42px; border-radius: 12px; }
.nav__call svg { width: 19px; height: 19px; }
.nav__call > span > span { display: block; font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; line-height: 1.4; }
.nav__call strong { font-family: var(--f-display); font-size: 0.9375rem; color: var(--ink); letter-spacing: -0.01em; }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  width: min(92vw, 860px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease), visibility 0.3s;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  translate: -50% 0;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  rotate: 45deg;
  border-radius: 2px 0 0 0;
}
.mega__col-title {
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.mega__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  transition: background-color 0.25s ease;
}
.mega__link:hover { background: var(--blue-50); }
.mega__link i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  background: var(--blue-50);
  color: var(--blue);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mega__link:hover i { background: var(--blue); color: #fff; }
.mega__link i svg { width: 18px; height: 18px; }
.mega__link b {
  font-family: var(--f-display);
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Burger */
.burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--blue-50), #fff);
  box-shadow: var(--sh-xs);
  place-items: center;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.35s var(--ease), transform 0.3s var(--ease);
}
.burger:hover { border-color: var(--blue-soft); box-shadow: var(--sh-sm); }
.burger:active { transform: scale(0.95); }

.burger span {
  display: block;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--blue);
  transition: transform 0.4s var(--ease), opacity 0.2s ease, width 0.4s var(--ease), background-color 0.3s ease;
}
.burger span + span { margin-top: 5px; }
/* the short middle bar in brand red is what makes it read as a mark, not a default icon */
.burger span:nth-child(2) { width: 14px; background: var(--red); }
.burger:hover span:nth-child(2) { width: 20px; }

.burger.is-active { background: linear-gradient(150deg, var(--blue), var(--blue-mid)); border-color: transparent; box-shadow: var(--sh-blue); }
.burger.is-active span { background: #fff; width: 20px; }
.burger.is-active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 400px);
  background: #fff;
  z-index: 110;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  overflow-y: auto;
  padding: 22px 22px 40px;
  box-shadow: var(--sh-lg);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.drawer__head img { width: 150px; height: auto; aspect-ratio: 2.46 / 1; display: block; }
.drawer__close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; }
.drawer__close svg { width: 18px; height: 18px; }
.drawer__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 4px 15px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-align: left;
  transition: color 0.25s ease, padding-left 0.3s var(--ease);
}
/* Brand accent bar, mirroring the underline on the desktop bar. */
.drawer__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--red));
  transform: translateY(-50%);
  transition: height 0.3s var(--ease);
}
.drawer__link:hover { color: var(--blue); padding-left: 18px; }
.drawer__link:hover::before { height: 22px; }
.drawer__link.is-active { color: var(--blue); }
.drawer__link.is-active::before { height: 22px; }
.drawer__link svg { width: 16px; height: 16px; color: var(--muted); transition: transform 0.35s var(--ease); }
.drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--blue); }
.drawer__panel { display: grid; overflow: hidden; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.drawer__panel > div { min-height: 0; }
.drawer__panel.is-open { grid-template-rows: 1fr; }
.drawer__panel a { display: block; padding: 11px 4px 11px 18px; font-size: 0.9375rem; color: var(--body); border-left: 2px solid var(--line); margin-left: 4px; }
.drawer__panel a:hover { color: var(--blue); border-left-color: var(--red); }
.drawer__sub {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 4px 6px 18px;
}
.drawer__cta { margin-top: 26px; display: grid; gap: 12px; }
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 17, 40, 0.5);
  backdrop-filter: blur(3px);
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* ---------- 11. Footer ---------- */
.footer { position: relative; overflow: hidden; padding-top: clamp(64px, 7vw, 96px); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.25fr;
  gap: 48px 40px;
  padding-bottom: 56px;
}
.footer__logo {
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  display: inline-block;
  margin-bottom: 10px;
}
.footer__logo img {
  width: 268px;
  height: auto;
  aspect-ratio: 2.46 / 1;
  object-fit: cover;
  object-position: center 44%;
}
.footer p { font-size: 0.9375rem; line-height: 1.8; color: rgba(255, 255, 255, 0.6); }
.footer__title {
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__title::before { content: ""; width: 18px; height: 2px; background: var(--red); border-radius: 2px; }
.footer__links { display: grid; gap: 13px; }
.footer__links a {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.62);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color 0.25s ease, gap 0.3s var(--ease);
}
.footer__links a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex: none;
  transition: background-color 0.25s ease;
}
.footer__links a:hover { color: #fff; gap: 13px; }
.footer__links a:hover::before { background: var(--red); }

.footer__contact { display: grid; gap: 20px; }
.footer__contact li { display: flex; gap: 14px; }
.footer__contact i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--blue-soft);
}
.footer__contact i svg { width: 17px; height: 17px; }
.footer__contact span { display: block; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); font-weight: 600; margin-bottom: 3px; }
.footer__contact a, .footer__contact address {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
  font-style: normal;
  line-height: 1.6;
  transition: color 0.25s ease;
}
.footer__contact a:hover { color: #fff; }

.footer__socials { display: flex; gap: 10px; margin-top: 26px; }
.footer__socials a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.35s var(--ease), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer__socials a svg { width: 17px; height: 17px; }
.footer__socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }

.footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.footer__trust-item { display: flex; align-items: center; gap: 11px; font-size: 0.8438rem; color: rgba(255, 255, 255, 0.66); }
.footer__trust-item svg { width: 19px; height: 19px; color: var(--blue-soft); flex: none; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding: 24px 0 30px;
  font-size: 0.8438rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__bottom a:hover { color: #fff; }

/* ---------- 12. Floating actions ---------- */
.floats { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: grid; gap: 12px; justify-items: center; }
.float-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--sh-md);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.float-btn:hover { transform: translateY(-3px) scale(1.04); }
.float-btn svg { width: 26px; height: 26px; }
.float-wa { background: linear-gradient(140deg, #4a41a8, #201b60); }
.float-top {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--line);
  width: 46px;
  height: 46px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}
.float-top svg { width: 19px; height: 19px; }
.float-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- 13. Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 14. Responsive — nav & footer ---------- */
@media (min-width: 1181px) and (max-width: 1365px) {
  .nav__logo img { width: 152px; }
  .nav__in { gap: 14px; }
  .nav__menu { gap: 0; }
  .nav__link { padding: 10px 10px; }
}

@media (max-width: 1180px) {
  .nav__menu, .nav__call { display: none; }
  .burger { display: grid; }
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
  .topbar__group--left { display: none; }
  .topbar__in { justify-content: space-between; }
}
@media (max-width: 620px) {
  :root { --nav-h: 68px; --topbar-h: 0px; }
  .nav__logo img { width: 138px; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn { padding: 14px 24px; }
  .topbar { display: none; }
  .floats { right: 14px; bottom: 14px; }
}

/* On small phones the enlarged logo and the nav CTA no longer fit side by
   side — the header needs 460px for both — so the CTA drops out and the drawer
   carries its own "Apply Now" button. */
@media (max-width: 480px) {
  .nav__actions .btn { display: none; }
}


/* ---------- 15. Navigation — small screens ----------
   At phone widths the logo, the Apply Now button and the burger were competing
   for the same row and the burger was being pushed past the viewport edge.
   The row tightens progressively, and below 400px the button drops out
   entirely — the drawer already carries an Apply Now call to action. */
@media (max-width: 720px) {
  .nav__in { gap: 12px; }
  .nav__actions { gap: 8px; }
  .nav__actions .btn { padding: 11px 18px; font-size: 0.8438rem; }
}

@media (max-width: 520px) {
  .nav__logo img { width: 124px; }
  .nav__actions .btn { padding: 10px 15px; font-size: 0.8125rem; }
  .burger { width: 42px; height: 42px; border-radius: 12px; }
  .burger span { width: 18px; }
  .burger span:nth-child(2) { width: 12px; }
  .burger.is-active span { width: 18px; }
}

/* The CTA is already hidden at 480px, so the logo can take back some width. */
@media (max-width: 400px) {
  .nav__logo img { width: 132px; }
}

/* Smallest phones last, so it actually wins the cascade against the 520/400
   steps above rather than being overridden by them. */
@media (max-width: 360px) {
  .nav__logo img { width: 116px; }
  .burger { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------------------
   <picture> wrappers for the AVIF/WebP-with-JPEG-fallback banners.
   Every media box below sizes its <img> with width/height:100%, which resolves
   against the box itself. Dropping the <picture> out of the box tree with
   display:contents keeps that intact, so adding a WebP source changes nothing
   about layout.
   --------------------------------------------------------------------------- */
.hslide__media picture,
.phero__media picture,
.svc2-card__media picture,
.corp2__media picture { display: contents; }