/* =========================================================
   Crown Bank — Custom Styles (Bootstrap 5 add-on)
   Palette taken from the Crown logo: navy + orange
   ========================================================= */

:root {
  --navy: #14265d;
  --navy-dark: #0c1738;
  --navy-soft: #24397c;
  --orange: #f7941d;
  --orange-dark: #de7d09;
  /* Primary action colour — buttons and active states */
  --brand: #8cb335;
  --brand-dark: #799c2c;
  --brand-ink: #ffffff;   /* text on a solid --brand background */
  --green: #22a45d;
  --purple: #7c3aed;
  --teal: #0ea5a4;
  --red: #e5484d;
  --ink: #101828;
  --dark: #10141b;
  --muted: #64748b;
  --line: #e6eaf2;
  --bg-soft: #f6f8fc;
  --radius: 16px;
  --shadow-sm: 0 4px 16px rgba(20, 38, 93, .06);
  --shadow-md: 0 12px 34px rgba(20, 38, 93, .10);
  --shadow-lg: 0 24px 60px rgba(20, 38, 93, .16);
}

/* Smooth scrolling is applied to the viewport via the root element.
   Note: do NOT move overflow-x below onto <html> — it breaks position: sticky. */
html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
p { color: var(--muted); line-height: 1.75; }
a { text-decoration: none; }
section { scroll-margin-top: 90px; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 10px; padding: .65rem 1.15rem; transition: .25s ease; }

.btn-brand {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 8px 20px rgba(140, 179, 53, .32);
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(140, 179, 53, .42);
}

.btn-outline-navy {
  border: 1.5px solid var(--navy);
  color: var(--navy);
  background: transparent;
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

.btn-ghost {
  background: #fff;
  border: 1px solid rgba(16, 20, 27, .1);
  color: var(--dark);
  box-shadow: 0 6px 20px rgba(16, 20, 27, .06);
}
.btn-ghost:hover { background: var(--dark); color: #fff; border-color: var(--dark); }

/* Fully rounded buttons — used in the header and hero */
.btn-pill { border-radius: 999px; }

.link-arrow { color: var(--orange); font-weight: 700; font-size: .93rem; }
.link-arrow i { transition: transform .25s ease; display: inline-block; }
.link-arrow:hover { color: var(--orange-dark); }
.link-arrow:hover i { transform: translateX(5px); }

/* ---------- Section helpers ---------- */
.section { padding: 68px 0; }
.section-alt { background: var(--bg-soft); }

.section-head { max-width: 660px; margin: 0 auto 40px; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .75rem; }
.section-head p { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: .7rem;
}
.eyebrow--light { color: #ffc46b; }

/* ---------- Navbar (floating pill) ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  padding: 20px 0;
  background: transparent;
  transition: padding .3s ease;
}
.site-nav .container { display: flex; }
.site-nav.scrolled { padding: 12px 0; }

.nav-pill {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  background: #fff;
  border-radius: 999px;
  padding: 9px 12px 9px 28px;
  box-shadow: 0 12px 36px rgba(16, 20, 27, .10), 0 2px 6px rgba(16, 20, 27, .04);
  transition: box-shadow .3s ease;
}

/* Desktop: the whole menu — links and CTA group — sits at the right end */
@media (min-width: 992px) {
  .nav-pill .navbar-nav { flex: 1 1 auto; justify-content: flex-end; }
  .nav-pill .nav-cta { margin-left: .55rem; }
}

/* Eight links plus two CTAs only fit on one line at xxl, so the bar is
   progressively tightened as the container narrows. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .nav-pill { gap: .9rem; padding-left: 20px; }
  .site-nav .nav-link { font-size: .86rem; padding: .42rem .55rem !important; }
  .site-nav .nav-cta .btn { font-size: .84rem; padding: .55rem .9rem; }
  .nav-divider { display: none; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-pill { gap: .6rem; padding: 8px 10px 8px 18px; }
  .site-nav .nav-link { font-size: .8rem; padding: .4rem .4rem !important; }
  .site-nav .nav-cta { gap: .35rem !important; }
  .site-nav .nav-cta .btn { font-size: .78rem; padding: .5rem .8rem; }
  /* The arrow is the first thing to go — the label still reads fine */
  .site-nav .nav-cta .btn-brand i { display: none; }
  .nav-divider { display: none; }
}
.site-nav.scrolled .nav-pill { box-shadow: 0 16px 44px rgba(16, 20, 27, .17); }
.navbar-brand { margin: 0; padding: 0; }

.site-nav .nav-link {
  color: var(--dark);
  font-weight: 600;
  font-size: .85rem;
  padding: .45rem .72rem !important;
  border-radius: 999px;
  transition: .2s ease;
}
.site-nav .nav-link:hover { background: var(--bg-soft); }
/* Tinted (not solid) brand background, so this keeps dark text */
.site-nav .nav-link.active { background: #8cb33554; color: var(--dark); }

.nav-divider { width: 1px; height: 26px; background: var(--line); margin: 0 .35rem; }
.btn-login {
  background: transparent;
  border: 1px solid transparent;
  color: var(--dark);
  font-weight: 600;
}
.btn-login:hover { background: var(--bg-soft); color: var(--dark); }

.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  padding: .35rem .6rem;
  color: var(--navy);
}
.navbar-toggler:focus { box-shadow: none; }

/* Mobile drawer — slides in from the right */
.nav-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--line);
  padding: 16px 22px;
}
.nav-offcanvas .offcanvas-body { padding: 8px 22px 26px; }

.nav-drawer-foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nav-drawer-foot > a {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}
.nav-drawer-foot > a i { color: var(--orange); margin-right: 8px; }
.nav-drawer-foot .social-row a {
  background: var(--bg-soft);
  color: var(--navy);
  width: 36px; height: 36px;
}
.nav-drawer-foot .social-row a:hover { background: var(--orange); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 720px;
  background: radial-gradient(115% 95% at 72% 5%, #f8f9f7 0%, #eef0ec 52%, #e3e6e1 100%);
  padding: 122px 0 96px;
  overflow: hidden;
}
.hero-copy { max-width: 780px; }

/* Background video + readability scrim.
   The scrim is heaviest on the left so the headline stays legible
   whatever the video frame happens to be showing. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(96deg, #fff 0%, rgba(241, 243, 239, .96) 38%, rgba(255, 255, 255, 0.74) 54%, rgba(103, 180, 25, 0) 68%, rgba(0, 0, 0, 0) 80%);
}
.hero > .container { position: relative; z-index: 2; }

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: #fff;
  border: 1px solid rgba(16, 20, 27, .07);
  color: var(--dark);
  padding: 9px 20px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(16, 20, 27, .06);
}
.pill-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2.5px solid var(--brand);
  flex: 0 0 auto;
}

.hero-title {
  color: var(--dark);
  font-size: clamp(2.6rem, 6.1vw, 4.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  margin-bottom: 1.5rem;
}
.hero-sub {
  color: #4b535e;
  font-size: 1.12rem;
  max-width: 600px;
  margin-bottom: 0;
}

/* The floating card + rocks visual now comes from the hero video,
   so the old CSS card mockup and its floating chips are gone. */

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--rot, 0deg)); }
}

/* ---------- Sector strip (overlaps the hero) ---------- */
.sectors-section {
  position: relative;
  z-index: 5;
  margin-top: -74px;
  padding: 0 10px;
}
.sector-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.sector-card {
  display: grid;
  grid-template-columns: .78fr 1.38fr 1.1fr;
  gap: 14px;
  min-height: 322px;
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(16, 20, 27, .05);
}
.sector-card--1 { background: linear-gradient(128deg, #fdfdfd 0%, #fdeef1 100%); }
.sector-card--2 { background: linear-gradient(128deg, #fdfdfd 0%, #efeafb 100%); }
.sector-card--3 { background: linear-gradient(128deg, #fdfdfd 0%, #e9eefb 100%); }

.sector-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.sector-head h3 {
  font-size: 1.16rem;
  line-height: 1.25;
  color: var(--dark);
  margin: 0;
}
.sector-arrow {
  font-size: 1.45rem;
  line-height: 1;
  color: var(--dark);
  align-self: flex-start;
  transition: transform .25s ease;
}
.sector-arrow:hover { color: var(--dark); transform: translateX(6px); }

.sector-stat {
  background: #fff;
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.sector-num {
  /* Never break a figure across lines — the size is tuned so the longest
     value ("₹4,800 Cr") still fits the panel at every 3-column width. */
  white-space: nowrap;
  font-size: clamp(1.25rem, 1.55vw, 2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--dark);
  line-height: 1.05;
}
.sector-label { font-size: .93rem; color: #5b636e; line-height: 1.45; }

.sector-media { border-radius: 14px; overflow: hidden; }
.sector-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- About (stat pills around a centred block) ---------- */
.about-section {
  position: relative;
  background: #f2f6ea;
  padding: 62px 0 66px;
  overflow: hidden;
}
.about-grid {
  display: grid;
  /* minmax(0, …) — plain 1fr has an auto minimum, so a wide nowrap pill
     would stretch its column and make the two images different sizes. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "tl   .     tr"
    "img1 copy  img2"
    "bl   .     br";
  align-items: center;
  gap: 44px 34px;
}

.stat-pill--tl { grid-area: tl; justify-self: start; }
.stat-pill--tr { grid-area: tr; justify-self: end; }
.stat-pill--bl { grid-area: bl; justify-self: start; }
.stat-pill--br { grid-area: br; justify-self: end; }
.about-img--left { grid-area: img1; }
.about-copy { grid-area: copy; }
.about-img--right { grid-area: img2; }

.stat-pill {
  display: flex;
  align-items: center;
  max-width: 100%;
  background: #fff;
  border-radius: 999px;
  padding: 10px 6px;
  box-shadow: 0 10px 30px rgba(16, 20, 27, .07);
}
.stat-pill__label {
  padding: 0 20px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dark);
}
/* The figure sits in a taller capsule that overhangs the pill top and bottom */
.stat-pill__num {
  margin: -22px 0;
  padding: 24px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f3ec 100%);
  box-shadow: 0 10px 26px rgba(16, 20, 27, .08);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--dark);
  white-space: nowrap;
}

.about-img {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(16, 20, 27, .09);
}
.about-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.about-copy { text-align: center; max-width: 520px; margin: 0 auto; }
.about-copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--dark);
  margin: 0 0 1rem;
}
.about-copy p { max-width: 460px; margin: 0 auto 1.9rem; }

/* ---------- Card functions (dark panel) ---------- */
.cards-section { padding: 44px 0; }

.cards-panel {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background: #08090a;
  padding: 42px;
}
/* Diagonal light leak in the top-left corner (img/shadow.svg) */
.panel-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 520px;
  max-width: 72%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.cards-panel__head { position: relative; z-index: 1; text-align: center; }
.badge-dark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.pill-dot--light { border-color: #fff; }

.cards-panel__head h2 {
  color: #fff;
  font-size: clamp(2rem, 3.7vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 1.1rem;
}
.cards-panel__head p {
  color: rgba(255, 255, 255, .58);
  max-width: 560px;
  margin: 0 auto;
  font-size: 1rem;
}

.fn-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.fn-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(169, 217, 79, .22);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(169, 217, 79, .10), transparent 55%),
    linear-gradient(160deg, #141613 0%, #0c0e0c 100%);
  transition: border-color .3s ease, transform .3s ease;
}
.fn-card:hover { border-color: rgba(169, 217, 79, .5); transform: translateY(-4px); }

.fn-icon { color: #a9d94f; font-size: 2rem; line-height: 1; }
.fn-card h3 { color: #fff; font-size: 1.28rem; margin: 0 0 .6rem; letter-spacing: -.02em; }
.fn-card p { color: rgba(255, 255, 255, .55); font-size: .93rem; margin: 0; }

/* ---------- Industries (scroll-driven scatter → grid) ----------
   A 300vh track pins its content; JS reads scroll progress through the
   track and drives each card's translate + scale, so the six cards drift
   apart and then converge into an aligned grid. */
.ind-section { background: #f1f3ee; }
.ind-track { position: relative; height: 300vh; }
.ind-sticky { position: sticky; top: 108px; padding: 26px 0; }
.ind-wrapper { position: relative; }

.ind-center {
  position: absolute;
  inset: 0;
  /* Above .ind-grid, otherwise the card grid paints over the CTA and eats the click */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
/* The CTA only accepts clicks while the block is actually visible, so a
   faded-out button never blocks the card links underneath it. */
.ind-center .btn { pointer-events: none; }
.ind-center.is-active .btn { pointer-events: auto; }
.ind-tagline {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 1rem;
}
.ind-tagline i { width: 26px; height: 2px; background: var(--brand); display: block; }
.ind-center h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--dark);
  margin: 0 0 1.6rem;
}

.ind-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
}

.ind-card {
  height: 100%;
  padding: 6px;
  background: #fff;
  border-radius: 12px;
  will-change: transform;
}
/* Matching the reference: each card grows from a different anchor point */
.ind-card[data-card="2"] { transform-origin: 50% 0; }
.ind-card[data-card="4"] { transform-origin: 0 0; }
.ind-card[data-card="5"] { transform-origin: 50% 100%; }
.ind-card[data-card="6"] { transform-origin: 100% 0; }

.ind-card__inner {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(#f7f7f7, #fefefe);
  padding: 42px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ind-icon {
  display: grid;
  place-items: center;
  width: 98px;
  height: 68px;
  margin-bottom: 22px;
  border: 1px solid rgba(197, 197, 197, .45);
  font-size: 1.5rem;
  color: var(--brand-dark);
  position: relative;
}
/* Small corner ticks around the icon frame */


.ind-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dark);
  margin: 0 0 .9rem;
}
.ind-card p {
  font-size: 1rem;
  max-width: 400px;
  margin: 0 0 1.1rem;
}
.ind-link {
  margin-top: auto;
  color: var(--brand-dark);
  font-weight: 700;
  font-size: .93rem;
}
.ind-link i { display: inline-block; transition: transform .25s ease; }
.ind-link:hover { color: var(--brand); }
.ind-link:hover i { transform: translateX(5px); }

/* ---------- Why Crown (editorial split — deliberately box-free) ----------
   The sections directly above and below are both grids of icon cards, so a
   third card grid here read as filler. This one carries its six claims as a
   numbered list against a sticky headline column, and folds the proof
   figures into that column instead of trailing them underneath. */
.why-layout {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

/* Sticky so the headline and the numbers stay in view while the list scrolls */
.why-anchor { position: sticky; top: 124px; }
.why-anchor h2 {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--dark);
  margin: 0 0 1rem;
}
.why-anchor > p { max-width: 400px; margin-bottom: 2.5rem; }

.why-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 30px;

}
/* A rule above each figure instead of a card around it */
.why-fig { border-top: 2px solid #10141b1f; padding-top: 12px; }
.why-fig__num {
  display: block;
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.why-fig__label {
  display: block;
  margin-top: 7px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
}

.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.why-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: start;
  padding: 25px 18px 25px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, box-shadow .3s ease;
}
/* Hover lifts the row onto white and marks it with a brand rule on the left */
.why-row:hover { background: #fff; box-shadow: inset 3px 0 0 var(--brand); }
.why-row__idx {
  padding-top: .2rem;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.why-row:hover .why-row__idx { color: var(--brand-dark); }
.why-row h3 {
  font-size: 1.16rem;
  letter-spacing: -.02em;
  color: var(--dark);
  margin: 0 0 .45rem;
}
.why-row p { font-size: .94rem; margin: 0; }

@media (max-width: 991.98px) {
  .why-layout { grid-template-columns: 1fr; gap: 38px; }
  .why-anchor { position: static; }
  .why-anchor > p { max-width: 620px; }
  .why-figs { max-width: none; grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

@media (max-width: 575.98px) {
  .why-figs { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .why-row { grid-template-columns: 42px minmax(0, 1fr); padding: 20px 10px 20px 12px; }
  .why-row h3 { font-size: 1.05rem; }
  .why-row p { font-size: .9rem; }
}

/* ---------- Pricing (segmented switch + lifted plan panel) ----------
   The plans ride on a white panel over the soft grey section, so the
   featured card can lift clear of the surface instead of just changing
   colour. Palette follows the brand green, not the older navy/orange. */
.pricing-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 34px 40px 34px;
  box-shadow: var(--shadow-sm);
}

/* Segmented switch — one track, the active tab slides into brand green */
.price-switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 0 0 52px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  list-style: none;
}
.price-switch .nav-link {
  border: 0;
  border-radius: 999px;
  padding: .62rem 1.55rem;
  font-size: .93rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
  transition: .25s ease;
}
.price-switch .nav-link:hover { color: var(--dark); }
.price-switch .nav-link.active {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 6px 16px rgba(140, 179, 53, .32);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(140, 179, 53, .45);
}

.price-name {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 14px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.price-amount span {
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}
.price-meta { font-size: .86rem; color: var(--muted); margin: 11px 0 0; }

.price-feat {
  list-style: none;
  padding: 20px 0 0;
  margin: 22px 0 26px;
  border-top: 1px solid var(--line);
  flex-grow: 1;
}
.price-feat li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: .92rem;
  color: var(--ink);
}
.price-feat i {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: .22rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .6rem;
  background: rgba(140, 179, 53, .16);
  color: var(--brand-dark);
}

/* Featured plan — brand green, lifted out of the panel */
.price-card--featured {
  background: linear-gradient(165deg, #9dc245 0%, var(--brand) 46%, #6f9328 100%);
  border-color: transparent;
  box-shadow: 0 26px 54px rgba(140, 179, 53, .34);
}
.price-card--featured .price-name { color: rgba(255, 255, 255, .82); }
.price-card--featured .price-amount { color: #fff; }
.price-card--featured .price-amount span,
.price-card--featured .price-meta { color: rgba(255, 255, 255, .8); }
.price-card--featured .price-feat { border-top-color: rgba(255, 255, 255, .3); }
.price-card--featured .price-feat li { color: #fff; }
.price-card--featured .price-feat i { background: rgba(255, 255, 255, .22); color: #fff; }
.price-card--featured .btn {
  background: #fff;
  border-color: #fff;
  color: var(--brand-dark);
  box-shadow: 0 10px 24px rgba(12, 23, 56, .18);
}
.price-card--featured .btn:hover { background: var(--dark); border-color: var(--dark); color: #fff; }

/* Ribbon straddles the top edge of the featured card */
.price-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Only lift on desktop — on stacked layouts it just looks misaligned */
@media (min-width: 992px) {
  .price-card--featured { transform: translateY(-14px); }
  .price-card--featured:hover { transform: translateY(-20px); }
}

/* Everything-included strip under the plans */
.price-included {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px dashed var(--line);
}
.price-included b { font-size: .9rem; color: var(--dark); }
.price-included span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
}
.price-included i { color: var(--brand-dark); }

/* FD rate table */
.rate-table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}
.rate-table { margin: 0; }
.rate-table thead th {
  background: var(--dark);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 16px 22px;
  border: 0;
}
.rate-table td {
  padding: 15px 22px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  border-color: var(--line);
}
.rate-table tbody tr.highlight { background: rgba(140, 179, 53, .1); }
.rate-table tbody tr.highlight td { font-weight: 700; color: var(--dark); }

.rate-note { padding-left: 12px; }
.rate-note h4 { font-size: 1.5rem; color: var(--dark); margin-bottom: .7rem; }
.rate-note .price-feat { border-top: 0; padding-top: 0; margin: 18px 0 24px; }

@media (max-width: 991.98px) {
  .pricing-panel { padding: 34px 22px 32px; border-radius: 26px; }
  .price-switch { margin-bottom: 40px; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 26px; }
}

@media (max-width: 575.98px) {
  .pricing-panel { padding: 26px 16px 26px; border-radius: 22px; }
  .price-switch { display: flex; width: 100%; flex-direction: column; border-radius: 22px; }
  .price-switch .nav-link { width: 100%; }
  .price-amount { font-size: 2.2rem; }
}

/* ---------- App section ---------- */
.app-section {
  background: linear-gradient(140deg, var(--navy-dark), var(--navy) 60%, #1d3070);
  padding: 68px 0;
  position: relative;
  overflow: hidden;
}
.app-section::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(247, 148, 29, .35), transparent 70%);
  right: -120px; bottom: -180px;
  filter: blur(60px);
}
.app-text { color: rgba(255, 255, 255, .78); max-width: 520px; }
.app-list li { color: rgba(255, 255, 255, .88); padding: 6px 0; font-size: .96rem; }
.app-list i { color: var(--orange); margin-right: .6rem; }

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: var(--navy);
  border-radius: 12px;
  padding: 10px 20px;
  transition: .25s;
}
.store-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0, 0, 0, .3); color: var(--navy); }
.store-btn i { font-size: 1.7rem; }
.store-btn span { display: flex; flex-direction: column; font-weight: 700; line-height: 1.2; }
.store-btn small { font-size: .65rem; font-weight: 600; color: var(--muted); }

/* Phone mockup */
.phone-wrap { display: flex; justify-content: center; position: relative; z-index: 2; }
.phone {
  width: 300px;
  height: 590px;
  background: #0a1230;
  border-radius: 42px;
  padding: 12px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .12);
  position: relative;
  animation: floaty 7s ease-in-out infinite;
}
.phone__notch {
  width: 120px; height: 22px;
  background: #0a1230;
  border-radius: 0 0 14px 14px;
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.phone__screen {
  background: #f4f6fb;
  border-radius: 32px;
  height: 100%;
  overflow: hidden;
  padding: 34px 18px 18px;
}
.ps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ps-head small { color: var(--muted); font-size: .7rem; display: block; }
.ps-head strong { color: var(--navy); font-size: .95rem; }
.ps-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
}
.ps-balance {
  background: linear-gradient(135deg, var(--navy), #2a4291);
  border-radius: 18px;
  padding: 18px;
  color: #fff;
  margin-bottom: 16px;
}
.ps-balance small { font-size: .68rem; opacity: .7; }
.ps-balance h4 { color: #fff; font-size: 1.5rem; margin: 4px 0 6px; }
.ps-balance span { font-size: .7rem; opacity: .65; }

.ps-actions { display: flex; justify-content: space-between; margin-bottom: 18px; }
.ps-actions > div {
  flex: 1;
  text-align: center;
  font-size: .66rem;
  color: var(--navy);
  font-weight: 600;
}
.ps-actions i {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin: 0 auto 5px;
  border-radius: 12px;
  background: #fff;
  color: var(--orange);
  font-size: 1.05rem;
  box-shadow: var(--shadow-sm);
}
.ps-list { background: #fff; border-radius: 16px; padding: 6px 12px; }
.ps-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ps-item:last-child { border-bottom: 0; }
.ps-item div { flex-grow: 1; line-height: 1.25; }
.ps-item strong { font-size: .8rem; color: var(--navy); display: block; }
.ps-item small { font-size: .66rem; color: var(--muted); }
.ps-item b { font-size: .8rem; color: var(--ink); }
.ps-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: .85rem; }
.ps-ic--g { background: rgba(34, 164, 93, .12); color: var(--green); }
.ps-ic--o { background: rgba(247, 148, 29, .14); color: var(--orange); }
.ps-ic--b { background: rgba(20, 38, 93, .1); color: var(--navy); }

/* ---------- How it works / Steps ---------- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
}

/* dotted rail behind the cards + orange progress fill */
.steps-line {
  position: absolute;
  top: 56px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #dbe2ef 0 8px, transparent 8px 16px);
  z-index: 0;
}
.steps-line i {
  display: block;
  position: absolute;
  left: 0; top: 0;
  height: 2px;
  width: 0;
  background: var(--orange);
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
}

.step-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
  cursor: pointer;
  transition: .35s ease;
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.step-num {
  position: absolute;
  top: 16px; right: 22px;
  font-size: 1.7rem;
  font-weight: 800;
  color: #eef1f8;
  letter-spacing: -.04em;
  transition: .35s ease;
}
.step-icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: grid; place-items: center;
  font-size: 1.35rem;
  background: rgba(20, 38, 93, .08);
  color: var(--navy);
  transition: .35s ease;
}
.step-card h5 { font-size: 1.08rem; margin: 18px 0 8px; }
.step-card p { font-size: .9rem; margin-bottom: 16px; }
.step-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--orange-dark);
  background: rgba(247, 148, 29, .12);
  padding: 5px 13px;
  border-radius: 30px;
  transition: .35s ease;
}

.step-card.active {
  background: linear-gradient(160deg, var(--navy-dark), var(--navy));
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.step-card.active .step-num { color: rgba(255, 255, 255, .13); }
.step-card.active .step-icon { background: var(--orange); color: #fff; }
.step-card.active h5 { color: #fff; }
.step-card.active p { color: rgba(255, 255, 255, .75); }
.step-card.active .step-time { background: rgba(255, 255, 255, .14); color: #ffc46b; }

.steps-foot {
  margin-top: 34px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
}
.steps-foot h6 { font-size: 1rem; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-chips span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.doc-chips i { color: var(--green); }

/* ---------- FAQ ---------- */
.faq-accordion .accordion-item {
  border: 1px solid var(--line);
  border-radius: 14px !important;
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
}
.faq-accordion .accordion-button {
  font-weight: 700;
  color: var(--navy);
  padding: 20px 24px;
  font-size: 1rem;
  background: #fff;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--orange);
  background: #fff;
  box-shadow: none;
}
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-accordion .accordion-button::after {
  background-image: none;
  content: "\f4fe";
  font-family: "bootstrap-icons";
  transform: none;
  font-size: 1rem;
  color: var(--orange);
  transition: transform .25s;
}
.faq-accordion .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.faq-accordion .accordion-body { padding: 0 24px 22px; color: var(--muted); font-size: .95rem; line-height: 1.75; }

/* ---------- Contact ---------- */
.contact-info {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 26px;
  height: 100%;
}
.ci-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.ci-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ci-item:first-child { padding-top: 0; }
.ci-item h6 { font-size: .95rem; margin-bottom: 4px; }
.ci-item p { margin: 0; font-size: .9rem; color: var(--ink); line-height: 1.6; }
.ci-item small { color: var(--muted); font-size: .78rem; }

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px;
  box-shadow: var(--shadow-sm);
}
.form-label { font-weight: 600; font-size: .88rem; color: var(--navy); margin-bottom: .4rem; }
.form-control, .form-select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem .9rem;
  font-size: .94rem;
  background-color: #fbfcfe;
}
.form-control:focus, .form-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(247, 148, 29, .15);
  background-color: #fff;
}
.input-group-text { background: #f1f4fa; border: 1px solid var(--line); border-right: 0; font-weight: 600; color: var(--navy); border-radius: 10px 0 0 10px; }
.form-check-input:checked { background-color: var(--orange); border-color: var(--orange); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(247, 148, 29, .15); border-color: var(--orange); }
.form-check-label { font-size: .86rem; color: var(--muted); }
.form-note { font-size: .82rem; color: var(--muted); }

/* ---------- CTA banner (inset video card) ----------
   A full-bleed video card inset from the page edges. The scrim is heaviest
   at the top and bottom so the headline and button stay readable whatever
   frame the video happens to be on. */
.cta-section { padding: 8px 12px 52px; }

.cta-banner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  padding: 92px 24px;
  border-radius: 30px;
  overflow: hidden;
  text-align: center;
  background: #0c0e0c; /* shows through if the video fails to load */
}
.cta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  z-index: 0;
  pointer-events: none;
}
.cta-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 10, .58) 0%, rgba(8, 9, 10, .26) 45%, rgba(8, 9, 10, .66) 100%);
}
.cta-inner { position: relative; z-index: 2; max-width: 780px; }

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 8px 20px;
  margin-bottom: 1.7rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
}
.cta-badge i { display: block; width: 14px; height: 2px; background: rgba(255, 255, 255, .8); }

.cta-title {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 1.1rem;
}
.cta-sub {
  color: rgba(255, 255, 255, .86);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto 2.2rem;
}

/* White pill with the arrow sitting in its own brand-green disc */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .55rem .55rem .55rem 1.6rem;
  background: #fff;
  border: 1px solid #fff;
  color: var(--brand-dark);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.btn-cta:hover, .btn-cta:focus {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
  transform: translateY(-2px);
}
.btn-cta i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .88rem;
  transition: transform .25s ease;
}
.btn-cta:hover i { transform: translateX(3px); }

@media (max-width: 767.98px) {
  .cta-section { padding: 6px 10px 40px; }
  .cta-banner { min-height: 440px; padding: 64px 18px; border-radius: 22px; }
  .cta-sub { font-size: .98rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, .68);
  padding: 70px 0 0;
}
.site-footer h6 {
  color: #fff;
  font-size: .95rem;
  margin-bottom: 18px;
  letter-spacing: .02em;
}
.footer-logo { height: 56px; width: auto; max-width: 100%; background: #fff; padding: 10px 18px; border-radius: 12px; }
.footer-about { font-size: .9rem; color: rgba(255, 255, 255, .6); line-height: 1.8; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(255, 255, 255, .65); font-size: .9rem; transition: .2s; }
.footer-links a:hover { color: var(--brand); padding-left: 4px; }

.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: grid; place-items: center;
  transition: .25s;
}
.social-row a:hover { background: var(--brand); transform: translateY(-3px); }

.newsletter { display: flex; gap: 8px; }
.newsletter .form-control {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
}
.newsletter .form-control::placeholder { color: rgba(255, 255, 255, .45); }
.newsletter .btn { padding: .7rem 1.1rem; }
.news-msg { display: block; margin-top: 8px; font-size: .8rem; color: #6ee7a8; }

.footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.footer-contact a { color: inherit; transition: color .2s ease; }
.footer-contact a:hover { color: var(--brand); }
.footer-contact i { color: var(--brand); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 20px;
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}
.footer-bottom a { color: rgba(255, 255, 255, .55); }
.footer-bottom a:hover { color: var(--brand); }

/* ---------- Toast ---------- */
#successToast { background: var(--dark); color: #fff; border: 0; }
#successToast .toast-body i { color: #4ade80; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone { animation: none; }
}

/* ---------- Responsive ---------- */

/* Below 1200px the three-across strip squeezes the stat panel too far for
   "₹4,800 Cr" to fit on one line, so stack the cards from here. */
@media (max-width: 1199.98px) {
  .sectors-section { margin-top: -50px; }
  .sector-strip { grid-template-columns: 1fr; gap: 12px; }
  .sector-card { grid-template-columns: 1fr 1.15fr; min-height: 250px; }
  .sector-head {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sector-arrow { align-self: center; }
  .sector-num { font-size: 2rem; }

  /* Two columns: pills pair up, copy spans, images pair up */
  .about-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "tl   tr"
      "copy copy"
      "img1 img2"
      "bl   br";
    gap: 32px 20px;
  }
  .about-copy { max-width: 620px; }
}

@media (max-width: 991.98px) {
  .section { padding: 50px 0; }
  .hero { padding: 116px 0 74px; }
  /* Stacked layout — text sits over the full width, so scrim top-down */
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(241, 243, 239, .96) 0%,
      rgba(241, 243, 239, .92) 42%,
      rgba(241, 243, 239, .66) 75%,
      rgba(241, 243, 239, .5) 100%);
  }

  .site-nav { padding: 14px 0; }
  .site-nav.scrolled { padding: 10px 0; }
  .nav-pill { justify-content: space-between; gap: 1rem; padding: 10px 12px 10px 20px; }

  .nav-offcanvas { width: 310px !important; max-width: 85vw; }
  .site-nav .navbar-nav .nav-link {
    padding: .85rem .2rem !important;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .site-nav .navbar-nav .nav-link:hover,
  .site-nav .navbar-nav .nav-link.active { background: transparent; }
  .site-nav .navbar-nav .nav-link.active { color: var(--brand-dark); }
  .site-nav .nav-cta { flex-direction: column; gap: 10px !important; margin-top: 22px; }
  .site-nav .nav-cta .btn { width: 100%; padding: .72rem 1rem; font-size: .95rem; justify-content: center; }
  .site-nav .nav-cta .btn-login { border-color: var(--line); }

  .rate-note { padding-left: 0; margin-top: 24px; }
  .cards-section { padding: 50px 0; }
  .cards-panel { padding: 42px 24px 46px; border-radius: 26px; }
  .fn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
  .fn-card { min-height: 0; gap: 32px; }
  .fn-card:last-child { grid-column: 1 / -1; }

  /* No pinning below lg — plain stacked layout, no scroll choreography */
  .ind-track { height: auto; }
  .ind-sticky { position: static; padding: 50px 0; }
  .ind-center {
    position: static;
    opacity: 1;
    transform: none !important;
    margin-bottom: 40px;
    pointer-events: auto;
  }
  .ind-center .btn { pointer-events: auto; }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-card { transform: none !important; }
  .ind-card__inner { padding: 32px 18px; }
  .ind-icon { width: 76px; height: 54px; margin-bottom: 18px; font-size: 1.3rem; }
  .ind-card h3 { font-size: 1.15rem; }
  .ind-card p { font-size: .93rem; }

  .steps-row { grid-template-columns: repeat(2, 1fr); }
  .steps-line { display: none; }
  .step-card.active { transform: none; }
  .step-card.active:hover { transform: translateY(-4px); }
}

@media (max-width: 767.98px) {
  .about-section { padding: 46px 0 50px; }
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "img1" "img2" "tl" "tr" "bl" "br";
    gap: 22px;
  }
  .stat-pill {
    justify-self: stretch;
    justify-content: space-between;
    gap: 10px;
  }
  .stat-pill__label { padding: 0 14px; font-size: .9rem; }
  .stat-pill__num { font-size: 1.45rem; padding: 20px 22px; margin: -16px 0; }

  .fn-grid { grid-template-columns: 1fr; }
  .fn-card:last-child { grid-column: auto; }
}

@media (max-width: 575.98px) {
  .section { padding: 38px 0; }
  .section-head { margin-bottom: 28px; }
  .hero { padding: 106px 0 62px; min-height: 540px; }
  .contact-form { padding: 24px 20px; }
  .cards-panel { padding: 34px 18px 38px; border-radius: 22px; }
  .ind-sticky { padding: 38px 0; }
  .ind-grid { grid-template-columns: 1fr; }
  .ind-center { margin-bottom: 30px; }
  .steps-row { grid-template-columns: 1fr; }
  .steps-foot { padding: 22px 20px; }
  .steps-foot .btn { width: 100%; }
  .phone { width: 265px; height: 540px; }
  .sectors-section { margin-top: -36px; padding: 0 12px; }
  .sector-card { grid-template-columns: 1fr; padding: 18px; min-height: 0; }
  .sector-media { height: 190px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* =========================================================
   Compact pass — tablet and mobile
   Below lg the page runs tighter across the board: section
   rhythm, box padding and type each step down a level, and
   again at the sm and xs breakpoints. Kept as one block at
   the end of the file so it lands after every component rule.
   ========================================================= */

/* ---------- Tablet (< 992px) ---------- */
@media (max-width: 991.98px) {
  /* Section rhythm */
  .section { padding: 42px 0; }
  .cards-section { padding: 42px 0; }
  .ind-sticky { padding: 42px 0; }
  .about-section { padding: 44px 0 46px; }
  .hero { padding: 104px 0 62px; min-height: 620px; }
  .cta-section { padding: 6px 10px 34px; }
  .site-footer { padding: 48px 0 0; }

  .section-head { margin-bottom: 30px; }
  .section-head h2 { font-size: 1.62rem; }
  .section-head p { font-size: .92rem; }

  /* Menu type */
  .site-nav .navbar-nav .nav-link { font-size: .92rem; padding: .7rem .2rem !important; }
  .site-nav .nav-cta { margin-top: 18px; }
  .site-nav .nav-cta .btn { font-size: .88rem; padding: .62rem 1rem; }
  .nav-drawer-foot { margin-top: 22px; padding-top: 16px; }
  .nav-drawer-foot > a { font-size: .85rem; }

  /* Headings and body copy */
  .hero-title { font-size: 2.3rem; margin-bottom: 1.1rem; }
  .hero-sub { font-size: .98rem; }
  .pill-badge { font-size: .82rem; padding: 7px 16px; }
  .about-copy h2,
  .cards-panel__head h2,
  .ind-center h2,
  .why-anchor h2 { font-size: 1.72rem; }
  .cards-panel__head p { font-size: .92rem; }
  .cta-title { font-size: 1.95rem; }
  .cta-sub { font-size: .96rem; margin-bottom: 1.8rem; }
  .cta-badge { font-size: .84rem; padding: 7px 16px; margin-bottom: 1.2rem; }

  /* Box padding */
  .btn { padding: .6rem 1.05rem; }
  .sector-card { padding: 18px; }
  .cards-panel { padding: 34px 20px 38px; }
  .fn-grid { margin-top: 32px; }
  .fn-card { padding: 22px; gap: 26px; }
  .ind-card__inner { padding: 26px 16px; }
  .ind-center { margin-bottom: 30px; }
  .why-row { padding: 20px 12px; }
  .step-card { padding: 22px 18px; }
  .steps-foot { margin-top: 26px; padding: 22px; }
  .pricing-panel { padding: 28px 18px 26px; }
  .price-card { padding: 26px 22px; }
  .price-switch { margin-bottom: 32px; }
  .rate-table thead th { padding: 13px 16px; }
  .rate-table td { padding: 12px 16px; }
  .cta-banner { min-height: 420px; padding: 56px 18px; }
  .contact-info, .contact-form { padding: 24px 20px; }
  .faq-accordion .accordion-button { padding: 16px 18px; font-size: .95rem; }
  .faq-accordion .accordion-body { padding: 0 18px 18px; font-size: .9rem; }

  /* Numbers and small type */
  .price-amount { font-size: 2.1rem; }
  .price-feat li { font-size: .88rem; }
  .why-fig__num { font-size: 1.5rem; }
  .why-row h3 { font-size: 1.06rem; }
  .why-row p { font-size: .9rem; }
  .step-card h5 { font-size: 1rem; }
  .step-card p { font-size: .86rem; }
  .footer-about, .footer-contact { font-size: .86rem; }
}

/* ---------- Small tablet / large phone (< 768px) ---------- */
@media (max-width: 767.98px) {
  .section { padding: 36px 0; }
  .cards-section { padding: 36px 0; }
  .ind-sticky { padding: 36px 0; }
  .section-head { margin-bottom: 26px; }
  .section-head h2 { font-size: 1.5rem; }

  .hero-title { font-size: 2.05rem; }
  .about-copy h2,
  .cards-panel__head h2,
  .ind-center h2,
  .why-anchor h2 { font-size: 1.58rem; }
  .cta-title { font-size: 1.78rem; }
}

/* ---------- Phone (< 576px) ---------- */
@media (max-width: 575.98px) {
  /* Section rhythm */
  .section { padding: 30px 0; }
  .cards-section { padding: 30px 0; }
  .ind-sticky { padding: 30px 0; }
  .about-section { padding: 34px 0 36px; }
  .hero { padding: 96px 0 52px; min-height: 470px; }
  .cta-section { padding: 6px 8px 26px; }
  .site-footer { padding: 38px 0 0; }

  .section-head { margin-bottom: 22px; }
  .section-head h2 { font-size: 1.34rem; }
  .section-head p { font-size: .88rem; }
  .eyebrow { font-size: .72rem; }

  /* Menu type */
  .site-nav .navbar-nav .nav-link { font-size: .88rem; padding: .62rem .2rem !important; }
  .site-nav .nav-cta .btn { font-size: .85rem; padding: .58rem .9rem; }
  .nav-offcanvas { width: 280px !important; }

  /* Headings and body copy */
  .hero-title { font-size: 1.85rem; margin-bottom: .9rem; }
  .hero-sub { font-size: .92rem; }
  .pill-badge { font-size: .78rem; padding: 6px 14px; }
  .about-copy h2,
  .cards-panel__head h2,
  .ind-center h2,
  .why-anchor h2 { font-size: 1.42rem; }
  .cards-panel__head p, .about-copy p { font-size: .88rem; }
  .cta-title { font-size: 1.55rem; }
  .cta-sub { font-size: .9rem; margin-bottom: 1.5rem; }
  .cta-badge { font-size: .78rem; padding: 6px 13px; }

  /* Box padding */
  .btn { padding: .55rem .95rem; font-size: .92rem; }
  .btn-cta { padding: .45rem .45rem .45rem 1.2rem; gap: .7rem; }
  .btn-cta i { width: 30px; height: 30px; }
  .sector-card { padding: 15px; }
  .cards-panel { padding: 26px 14px 30px; }
  .fn-grid { margin-top: 24px; }
  .fn-card { padding: 18px; gap: 20px; }
  .ind-card__inner { padding: 22px 14px; }
  .ind-center { margin-bottom: 24px; }
  .why-row { padding: 16px 8px 16px 10px; }
  .step-card { padding: 18px 16px; }
  .steps-foot { margin-top: 22px; padding: 18px 16px; }
  .pricing-panel { padding: 20px 12px 22px; }
  .price-card { padding: 22px 18px; }
  .price-switch { margin-bottom: 26px; }
  .rate-table thead th { padding: 11px 13px; font-size: .72rem; }
  .rate-table td { padding: 11px 13px; font-size: .88rem; }
  .cta-banner { min-height: 360px; padding: 44px 14px; border-radius: 20px; }
  .faq-accordion .accordion-button { padding: 14px 16px; font-size: .9rem; }
  .faq-accordion .accordion-body { padding: 0 16px 16px; font-size: .87rem; }

  /* Numbers and small type */
  .price-amount { font-size: 1.9rem; }
  .price-name { font-size: .74rem; }
  .price-meta, .price-feat li { font-size: .86rem; }
  .why-fig__num { font-size: 1.35rem; }
  .why-fig__label { font-size: .78rem; }
  .why-row h3 { font-size: 1rem; }
  .why-row p { font-size: .87rem; }
  .why-row__idx { font-size: .85rem; }
  .sector-num { font-size: 1.7rem; }
  .sector-label { font-size: .82rem; }
  .stat-pill__num { font-size: 1.3rem; padding: 16px 18px; }
  .stat-pill__label { font-size: .84rem; }
  .fn-card h3 { font-size: 1.12rem; }
  .fn-card p { font-size: .87rem; }
  .ind-card h3 { font-size: 1.06rem; }
  .ind-card p { font-size: .88rem; }
  .price-included span, .doc-chips span { font-size: .8rem; }

  /* Footer */
  .footer-logo { height: 46px; padding: 8px 14px; }
  .footer-about, .footer-contact { font-size: .84rem; }
  .site-footer h6 { font-size: .9rem; margin-bottom: 14px; }
  .footer-bottom { font-size: .8rem; padding: 18px 0; }
}