/* ============================================================
  BFSI PAGE CSS
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
}

.bfsi-page {
  --bfsi-teal: #2C5964;
  --bfsi-teal-deep: #1A3940;
  --bfsi-orange: #F08830;
  --bfsi-orange-deep: #C96A1F;
  --bfsi-blue: #4F84C4;
  --bfsi-blue-deep: #00539C;
  --bfsi-cream: #f7f5f0;
  --bfsi-ink: #213546;
  --bfsi-muted: #52616f;
  --bfsi-line: rgba(44,89,100,0.14);

  position: relative;
  width: 100%;
  background: var(--bfsi-cream);
  color: var(--bfsi-ink);
  font-family: 'Hind Siliguri', 'Poppins', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.bfsi-page * { box-sizing: border-box; }

.bfsi-page .bfsi-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.bfsi-page h1, .bfsi-page h2, .bfsi-page h3, .bfsi-page h4 {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--bfsi-teal-deep);
}

.bfsi-page p { margin: 0; }

.bfsi-page section { position: relative; }

/* ---------- reveal-on-scroll ---------- */
.bfsi-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.bfsi-reveal.bfsi-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- eyebrow / kicker ---------- */
.bfsi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--bfsi-orange-deep);
  margin-bottom: 14px;
}
.bfsi-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--bfsi-orange);
  display: inline-block;
}

/* ================= HERO ================= */
.bfsi-hero {
  padding: 96px 0 70px;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(240,136,48,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(44,89,100,0.08), transparent 55%),
    var(--bfsi-cream);
}

.bfsi-hero .bfsi-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.bfsi-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--bfsi-line);
  box-shadow: 0 8px 20px rgba(44,89,100,0.10);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--bfsi-teal);
  margin-bottom: 22px;
}
.bfsi-hero-badge .bfsi-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bfsi-orange);
  box-shadow: 0 0 0 0 rgba(240,136,48,.55);
  animation: bfsiPulseDot 2.2s infinite;
}
@keyframes bfsiPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(240,136,48,.55); }
  70% { box-shadow: 0 0 0 9px rgba(240,136,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,136,48,0); }
}

.bfsi-hero h1 {
  font-size: 44px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.3px;
}
.bfsi-hero h1 .bfsi-accent {
  background: linear-gradient(90deg, var(--bfsi-orange), var(--bfsi-orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bfsi-hero p.bfsi-sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 28px;
  color: var(--bfsi-muted);
  max-width: 520px;
}

.bfsi-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.bfsi-btn-primary,
.bfsi-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .35s;
}
.bfsi-btn-primary {
  color: #ffffff;
  background: linear-gradient(90deg, var(--bfsi-teal), var(--bfsi-orange));
  box-shadow: 0 14px 28px rgba(44,89,100,0.30);
}
.bfsi-btn-primary:hover {
  background: linear-gradient(90deg, var(--bfsi-orange), var(--bfsi-teal));
  box-shadow: 0 18px 34px rgba(44,89,100,0.4);
  transform: translateY(-2px);
}
.bfsi-btn-ghost {
  color: var(--bfsi-teal);
  background: transparent;
  border: 1.5px solid var(--bfsi-line);
}
.bfsi-btn-ghost:hover {
  border-color: var(--bfsi-teal);
  background: #ffffff;
}

/* --- hero visual: verification seal (signature element) --- */
.bfsi-seal-wrap {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bfsi-seal-ring {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 2px dashed rgba(44,89,100,0.35);
  animation: bfsiSpin 26s linear infinite;
}
.bfsi-seal-ring.bfsi-ring-2 {
  width: 330px;
  height: 330px;
  border-color: rgba(240,136,48,0.32);
  animation-duration: 34s;
  animation-direction: reverse;
}
@keyframes bfsiSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bfsi-seal-core {
  position: relative;
  width: 208px;
  height: 208px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--bfsi-teal), var(--bfsi-teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 24px 50px rgba(26,57,64,0.35),
    inset 0 2px 0 rgba(255,255,255,0.15);
}
.bfsi-seal-core::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.bfsi-seal-core i {
  font-size: 56px;
  color: var(--bfsi-orange);
}

.bfsi-seal-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,136,48,0.28), transparent 70%);
  filter: blur(18px);
  animation: bfsiGlow 3.4s ease-in-out infinite;
}
@keyframes bfsiGlow {
  0%,100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.bfsi-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #ffffff;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bfsi-teal-deep);
  box-shadow: 0 14px 30px rgba(44,89,100,0.18);
  border: 1px solid var(--bfsi-line);
  animation: bfsiFloat 5s ease-in-out infinite;
}
.bfsi-chip i { color: var(--bfsi-orange); font-size: 13px; }
.bfsi-chip.bfsi-chip-1 { top: 8%; left: -4%; animation-delay: 0s; }
.bfsi-chip.bfsi-chip-2 { bottom: 14%; right: -8%; animation-delay: 1.2s; }
.bfsi-chip.bfsi-chip-3 { bottom: -2%; left: 12%; animation-delay: 2.4s; }
@keyframes bfsiFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .bfsi-hero .bfsi-container { grid-template-columns: 1fr; }
  .bfsi-hero h1 { font-size: 33px; }
  .bfsi-seal-wrap { height: 300px; margin-top: 20px; }
}

/* ---------- perforated ledger divider (signature motif) ---------- */
.bfsi-perf {
  position: relative;
  height: 26px;
  background:
    radial-gradient(circle 5px, transparent 5px, var(--bfsi-cream) 5.5px) 0 -13px / 34px 26px repeat-x,
    var(--bfsi-line-color, transparent);
}
.bfsi-perf::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px dashed rgba(44,89,100,0.3);
}

/* ================= STATS / LEDGER STRIP ================= */
.bfsi-stats {
  padding: 10px 0 70px;
}
.bfsi-ledger {
  background: linear-gradient(120deg, var(--bfsi-teal-deep), var(--bfsi-teal) 55%, var(--bfsi-teal-deep));
  border-radius: 18px;
  padding: 42px 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 26px 55px rgba(26,57,64,0.28);
}
.bfsi-ledger-item {
  text-align: center;
  padding: 8px 18px;
  position: relative;
  color: #ffffff;
}
.bfsi-ledger-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 12%;
  height: 76%;
  border-right: 1.5px dashed rgba(255,255,255,0.28);
}
.bfsi-ledger-num {
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--bfsi-orange);
  line-height: 1;
  margin-bottom: 10px;
}
.bfsi-ledger-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .3px;
  color: rgba(255,255,255,0.82);
}
@media (max-width: 800px) {
  .bfsi-ledger { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .bfsi-ledger-item:nth-child(2)::after { display: none; }
}

/* ================= OVERVIEW ================= */
.bfsi-overview { padding: 20px 0 70px; }
.bfsi-overview .bfsi-container { max-width: 860px; text-align: center; }
.bfsi-overview h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 18px;
}
.bfsi-overview p {
  font-size: 16.5px;
  line-height: 29px;
  color: var(--bfsi-muted);
}

/* ================= CHALLENGES ================= */
.bfsi-challenges { padding: 20px 0 80px; background: #ffffff; }
.bfsi-sec-head {
  max-width: 620px;
  margin: 0 auto 46px;
  text-align: center;
}
.bfsi-sec-head h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.bfsi-sec-head p {
  margin-top: 12px;
  color: var(--bfsi-muted);
  font-size: 15.5px;
  line-height: 24px;
}

.bfsi-chal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.bfsi-chal-card {
  padding: 28px 24px;
  border-radius: 14px;
  background: var(--bfsi-cream);
  border-left: 4px solid var(--bfsi-teal);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.bfsi-chal-card:nth-child(even) { border-left-color: var(--bfsi-orange); }
.bfsi-chal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.bfsi-chal-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--bfsi-teal), var(--bfsi-teal-deep));
  color: #fff;
  font-size: 18px;
  margin-bottom: 16px;
}
.bfsi-chal-card:nth-child(even) .bfsi-chal-icon {
  background: linear-gradient(140deg, var(--bfsi-orange), var(--bfsi-orange-deep));
}
.bfsi-chal-card h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.bfsi-chal-card p {
  font-size: 14px;
  line-height: 22px;
  color: var(--bfsi-muted);
}
@media (max-width: 900px) {
  .bfsi-chal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bfsi-chal-grid { grid-template-columns: 1fr; }
}

/* ================= SOLUTIONS / TABS ================= */
.bfsi-solutions { padding: 80px 0; }

.bfsi-tabbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.bfsi-tab-btn {
  padding: 11px 22px;
  border-radius: 50px;
  border: 1.5px solid var(--bfsi-line);
  background: #ffffff;
  color: var(--bfsi-teal);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}
.bfsi-tab-btn:hover { border-color: var(--bfsi-teal); }
.bfsi-tab-btn.bfsi-active {
  background: linear-gradient(90deg, var(--bfsi-teal), var(--bfsi-teal-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 24px rgba(44,89,100,0.28);
}

.bfsi-tab-panel { display: none; }
.bfsi-tab-panel.bfsi-active {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  animation: bfsiFadeIn .5s ease;
}
@keyframes bfsiFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.bfsi-sol-item {
  display: flex;
  gap: 16px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--bfsi-line);
  border-radius: 12px;
  transition: .3s;
}
.bfsi-sol-item:hover {
  border-color: var(--bfsi-orange);
  box-shadow: 0 16px 32px rgba(44,89,100,0.12);
}
.bfsi-sol-ic {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(240,136,48,0.12);
  color: var(--bfsi-orange-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.bfsi-sol-item h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--bfsi-teal-deep);
}
.bfsi-sol-item p {
  font-size: 13.5px;
  line-height: 21px;
  color: var(--bfsi-muted);
}
@media (max-width: 700px) {
  .bfsi-tab-panel.bfsi-active { grid-template-columns: 1fr; }
}

/* ================= TECH MARQUEE ================= */
.bfsi-tech { padding: 10px 0 80px; }
.bfsi-tech-head { text-align: center; margin-bottom: 30px; }
.bfsi-tech-head h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.bfsi-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bfsi-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: bfsiMarquee 26s linear infinite;
}
.bfsi-marquee-mask:hover .bfsi-marquee-track { animation-play-state: paused; }
@keyframes bfsiMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.bfsi-tech-pill {
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--bfsi-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bfsi-teal);
}

/* ================= CTA BAND ================= */
.bfsi-cta-band {
  position: relative;
  overflow: hidden;
  margin: 0 auto 80px;
  max-width: 1180px;
  border-radius: 20px;
  padding: 54px 48px;
  background: linear-gradient(120deg, var(--bfsi-teal-deep), var(--bfsi-teal) 45%, var(--bfsi-orange-deep));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.bfsi-cta-band::after {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 60%; height: 220%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  animation: bfsiShine 5s ease-in-out infinite;
}
@keyframes bfsiShine {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(220%); }
}
.bfsi-cta-band h2 {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}
.bfsi-cta-band p {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  max-width: 420px;
}
.bfsi-cta-band .bfsi-btn-primary {
  background: #ffffff;
  color: var(--bfsi-teal-deep);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.bfsi-cta-band .bfsi-btn-primary:hover {
  background: var(--bfsi-cream);
  transform: translateY(-2px);
}

/* ================= OTHER INDUSTRIES ================= */
.bfsi-other { padding: 10px 0 90px; background: #ffffff; }
.bfsi-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.bfsi-other-card {
  padding: 30px 26px;
  border-radius: 14px;
  background: var(--bfsi-cream);
  border-top: 3px solid var(--bfsi-teal);
  text-decoration: none;
  display: block;
  transition: .35s;
}
.bfsi-other-card:nth-child(2) { border-top-color: var(--bfsi-orange); }
.bfsi-other-card:nth-child(3) { border-top-color: var(--bfsi-blue); }
.bfsi-other-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.bfsi-other-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--bfsi-teal-deep);
}
.bfsi-other-card p {
  font-size: 14px;
  line-height: 22px;
  color: var(--bfsi-muted);
  margin-bottom: 16px;
}
.bfsi-other-card span {
  font-size: 13px;
  font-weight: 700;
  color: var(--bfsi-orange-deep);
}
@media (max-width: 900px) {
  .bfsi-chal-grid, .bfsi-other-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bfsi-page * { animation: none !important; transition: none !important; }
}


/* ================================================================
    EDUCATION PAGE CSS
   ================================================================ */

/* html, body {
  margin: 0;
  padding: 0;
} */

.ed-page {
  --ed-teal: #2C5964;
  --ed-teal-deep: #1A3940;
  --ed-orange: #F08830;
  --ed-orange-deep: #C96A1F;
  --ed-blue: #4F84C4;
  --ed-blue-deep: #00539C;
  --ed-cream: #f7f5f0;
  --ed-ink: #213546;
  --ed-muted: #52616f;
  --ed-line: rgba(44,89,100,0.14);

  position: relative;
  width: 100%;
  background: var(--ed-cream);
  color: var(--ed-ink);
  font-family: 'Hind Siliguri', 'Poppins', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.ed-page * { box-sizing: border-box; }

.ed-page .ed-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.ed-page h1, .ed-page h2, .ed-page h3, .ed-page h4 {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--ed-teal-deep);
}
.ed-page p { margin: 0; }
.ed-page section { position: relative; }

/* ---------- reveal-on-scroll ---------- */
.ed-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.ed-reveal.ed-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- eyebrow ---------- */
.ed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ed-orange-deep);
  margin-bottom: 14px;
}
.ed-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--ed-orange);
  display: inline-block;
}

/* ================= HERO ================= */
.ed-hero {
  padding: 96px 0 70px;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(240,136,48,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(44,89,100,0.08), transparent 55%),
    var(--ed-cream);
}
.ed-hero .ed-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.ed-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--ed-line);
  box-shadow: 0 8px 20px rgba(44,89,100,0.10);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--ed-teal);
  margin-bottom: 22px;
}
.ed-hero-badge .ed-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ed-orange);
  box-shadow: 0 0 0 0 rgba(240,136,48,.55);
  animation: edPulseDot 2.2s infinite;
}
@keyframes edPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(240,136,48,.55); }
  70% { box-shadow: 0 0 0 9px rgba(240,136,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,136,48,0); }
}

.ed-hero h1 {
  font-size: 44px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.3px;
}
.ed-hero h1 .ed-accent {
  background: linear-gradient(90deg, var(--ed-orange), var(--ed-orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ed-hero p.ed-sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 28px;
  color: var(--ed-muted);
  max-width: 520px;
}
.ed-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.ed-btn-primary, .ed-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .35s;
}
.ed-btn-primary {
  color: #ffffff;
  background: linear-gradient(90deg, var(--ed-teal), var(--ed-orange));
  box-shadow: 0 14px 28px rgba(44,89,100,0.30);
}
.ed-btn-primary:hover {
  background: linear-gradient(90deg, var(--ed-orange), var(--ed-teal));
  box-shadow: 0 18px 34px rgba(44,89,100,0.4);
  transform: translateY(-2px);
}
.ed-btn-ghost {
  color: var(--ed-teal);
  background: transparent;
  border: 1.5px solid var(--ed-line);
}
.ed-btn-ghost:hover {
  border-color: var(--ed-teal);
  background: #ffffff;
}

/* --- hero visual: live classroom broadcast (signature element) --- */
.ed-scan-wrap {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ed-scan-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px dashed rgba(44,89,100,0.30);
  animation: edSpin 30s linear infinite;
}
.ed-scan-ring.ed-ring-2 {
  width: 250px;
  height: 250px;
  border-color: rgba(240,136,48,0.30);
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes edSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ed-scanner {
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--ed-teal), var(--ed-teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 50px rgba(26,57,64,0.35), inset 0 2px 0 rgba(255,255,255,0.15);
  overflow: hidden;
}
.ed-scanner::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.ed-gear {
  position: relative;
  width: 72px;
  height: 72px;
  color: var(--ed-orange);
  z-index: 1;
  animation: edBob 3.2s ease-in-out infinite;
}
.ed-gear svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes edBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.ed-signal {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(240,136,48,0.7);
  width: 60px;
  height: 60px;
  animation: edPulseWave 2.4s ease-out infinite;
}
.ed-signal.ed-signal-2 { animation-delay: .8s; }
.ed-signal.ed-signal-3 { animation-delay: 1.6s; }
@keyframes edPulseWave {
  0% { width: 60px; height: 60px; opacity: .8; }
  100% { width: 200px; height: 200px; opacity: 0; }
}

.ed-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #ffffff;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ed-teal-deep);
  box-shadow: 0 14px 30px rgba(44,89,100,0.18);
  border: 1px solid var(--ed-line);
  animation: edFloat 5s ease-in-out infinite;
}
.ed-chip i { color: var(--ed-orange); font-size: 13px; }
.ed-chip.ed-chip-1 { top: 6%; left: -8%; animation-delay: 0s; }
.ed-chip.ed-chip-2 { bottom: 12%; right: -10%; animation-delay: 1.2s; }
.ed-chip.ed-chip-3 { bottom: -2%; left: 14%; animation-delay: 2.4s; }
@keyframes edFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .ed-hero .ed-container { grid-template-columns: 1fr; }
  .ed-hero h1 { font-size: 33px; }
  .ed-scan-wrap { height: 300px; margin-top: 20px; }
}

/* ---------- perforated divider ---------- */
.ed-perf {
  position: relative;
  height: 26px;
  background: radial-gradient(circle 5px, transparent 5px, var(--ed-cream) 5.5px) 0 -13px / 34px 26px repeat-x;
}
.ed-perf::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px dashed rgba(44,89,100,0.3);
}

/* ================= OVERVIEW ================= */
.ed-overview { padding: 55px 0 70px; }
.ed-overview .ed-container { max-width: 860px; text-align: center; }
.ed-overview h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 18px;
}
.ed-overview p {
  font-size: 16.5px;
  line-height: 29px;
  color: var(--ed-muted);
}
.ed-overview .ed-product-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--ed-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ed-teal-deep);
}
.ed-overview .ed-product-note i { color: var(--ed-orange); }

/* ================= CHALLENGES ================= */
.ed-challenges { padding: 20px 0 80px; background: #ffffff; }
.ed-sec-head {
  max-width: 620px;
  margin: 0 auto 46px;
  text-align: center;
}
.ed-sec-head h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.ed-sec-head p {
  margin-top: 12px;
  color: var(--ed-muted);
  font-size: 15.5px;
  line-height: 24px;
}
.ed-chal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.ed-chal-card {
  padding: 28px 22px;
  border-radius: 14px;
  background: var(--ed-cream);
  border-left: 4px solid var(--ed-teal);
  transition: transform .35s ease, box-shadow .35s ease;
}
.ed-chal-card:nth-child(even) { border-left-color: var(--ed-orange); }
.ed-chal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.ed-chal-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--ed-teal), var(--ed-teal-deep));
  color: #fff;
  font-size: 18px;
  margin-bottom: 16px;
}
.ed-chal-card:nth-child(even) .ed-chal-icon {
  background: linear-gradient(140deg, var(--ed-orange), var(--ed-orange-deep));
}
.ed-chal-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.ed-chal-card p { font-size: 13.5px; line-height: 21px; color: var(--ed-muted); }
@media (max-width: 900px) { .ed-chal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ed-chal-grid { grid-template-columns: 1fr; } }

/* ================= SOLUTIONS ================= */
.ed-solutions { padding: 80px 0; }
.ed-sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.ed-sol-card {
  padding: 30px 24px;
  background: #ffffff;
  border: 1px solid var(--ed-line);
  border-radius: 14px;
  text-align: center;
  transition: .35s;
}
.ed-sol-card:hover {
  border-color: var(--ed-orange);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.14);
}
.ed-sol-ic {
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ed-teal), var(--ed-orange));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(44,89,100,0.28);
}
.ed-sol-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.ed-sol-card p { font-size: 13.5px; line-height: 21px; color: var(--ed-muted); }
@media (max-width: 900px) { .ed-sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ed-sol-grid { grid-template-columns: 1fr; } }

/* ================= TECH MARQUEE ================= */
.ed-tech { padding: 10px 0 80px; }
.ed-tech-head { text-align: center; margin-bottom: 30px; }
.ed-tech-head h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ed-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ed-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: edMarquee 22s linear infinite;
}
.ed-marquee-mask:hover .ed-marquee-track { animation-play-state: paused; }
@keyframes edMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ed-tech-pill {
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--ed-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ed-teal);
}

/* ================= CTA BAND ================= */
.ed-cta-band {
  position: relative;
  overflow: hidden;
  margin: 0 auto 80px;
  max-width: 1180px;
  border-radius: 20px;
  padding: 54px 48px;
  background: linear-gradient(120deg, var(--ed-teal-deep), var(--ed-teal) 45%, var(--ed-orange-deep));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ed-cta-band::after {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 60%; height: 220%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  animation: edShine 5s ease-in-out infinite;
}
@keyframes edShine {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(220%); }
}
.ed-cta-band h2 { color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.ed-cta-band p { color: rgba(255,255,255,0.85); font-size: 15px; max-width: 420px; }
.ed-cta-band .ed-btn-primary {
  background: #ffffff;
  color: var(--ed-teal-deep);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.ed-cta-band .ed-btn-primary:hover {
  background: var(--ed-cream);
  transform: translateY(-2px);
}

/* ================= OTHER INDUSTRIES ================= */
.ed-other { padding: 10px 0 90px; background: #ffffff; }
.ed-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ed-other-card {
  padding: 30px 26px;
  border-radius: 14px;
  background: var(--ed-cream);
  border-top: 3px solid var(--ed-teal);
  text-decoration: none;
  display: block;
  transition: .35s;
}
.ed-other-card:nth-child(2) { border-top-color: var(--ed-orange); }
.ed-other-card:nth-child(3) { border-top-color: var(--ed-blue); }
.ed-other-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.ed-other-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--ed-teal-deep); }
.ed-other-card p { font-size: 14px; line-height: 22px; color: var(--ed-muted); margin-bottom: 16px; }
.ed-other-card span { font-size: 13px; font-weight: 700; color: var(--ed-orange-deep); }
@media (max-width: 900px) { .ed-other-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .ed-page * { animation: none !important; transition: none !important; }
}


/* ================================================================
   GOV PAGE CSS
   ================================================================ */

/* html, body {
  margin: 0;
  padding: 0;
} */

.gv-page {
  --gv-teal: #2C5964;
  --gv-teal-deep: #1A3940;
  --gv-orange: #F08830;
  --gv-orange-deep: #C96A1F;
  --gv-blue: #4F84C4;
  --gv-blue-deep: #00539C;
  --gv-cream: #f7f5f0;
  --gv-ink: #213546;
  --gv-muted: #52616f;
  --gv-line: rgba(44,89,100,0.14);

  position: relative;
  width: 100%;
  background: var(--gv-cream);
  color: var(--gv-ink);
  font-family: 'Hind Siliguri', 'Poppins', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.gv-page * { box-sizing: border-box; }

.gv-page .gv-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.gv-page h1, .gv-page h2, .gv-page h3, .gv-page h4 {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--gv-teal-deep);
}
.gv-page p { margin: 0; }
.gv-page section { position: relative; }

/* ---------- reveal-on-scroll ---------- */
.gv-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.gv-reveal.gv-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- eyebrow ---------- */
.gv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gv-orange-deep);
  margin-bottom: 14px;
}
.gv-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gv-orange);
  display: inline-block;
}

/* ================= HERO ================= */
.gv-hero {
  padding: 96px 0 70px;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(240,136,48,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(44,89,100,0.08), transparent 55%),
    var(--gv-cream);
}
.gv-hero .gv-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.gv-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--gv-line);
  box-shadow: 0 8px 20px rgba(44,89,100,0.10);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--gv-teal);
  margin-bottom: 22px;
}
.gv-hero-badge .gv-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gv-orange);
  box-shadow: 0 0 0 0 rgba(240,136,48,.55);
  animation: gvPulseDot 2.2s infinite;
}
@keyframes gvPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(240,136,48,.55); }
  70% { box-shadow: 0 0 0 9px rgba(240,136,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,136,48,0); }
}

.gv-hero h1 {
  font-size: 44px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.3px;
}
.gv-hero h1 .gv-accent {
  background: linear-gradient(90deg, var(--gv-orange), var(--gv-orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gv-hero p.gv-sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 28px;
  color: var(--gv-muted);
  max-width: 520px;
}
.gv-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.gv-btn-primary, .gv-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .35s;
}
.gv-btn-primary {
  color: #ffffff;
  background: linear-gradient(90deg, var(--gv-teal), var(--gv-orange));
  box-shadow: 0 14px 28px rgba(44,89,100,0.30);
}
.gv-btn-primary:hover {
  background: linear-gradient(90deg, var(--gv-orange), var(--gv-teal));
  box-shadow: 0 18px 34px rgba(44,89,100,0.4);
  transform: translateY(-2px);
}
.gv-btn-ghost {
  color: var(--gv-teal);
  background: transparent;
  border: 1.5px solid var(--gv-line);
}
.gv-btn-ghost:hover {
  border-color: var(--gv-teal);
  background: #ffffff;
}

/* --- hero visual: live classroom broadcast (signature element) --- */
.gv-scan-wrap {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gv-scan-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px dashed rgba(44,89,100,0.30);
  animation: gvSpin 30s linear infinite;
}
.gv-scan-ring.gv-ring-2 {
  width: 250px;
  height: 250px;
  border-color: rgba(240,136,48,0.30);
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes gvSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.gv-scanner {
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gv-teal), var(--gv-teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 50px rgba(26,57,64,0.35), inset 0 2px 0 rgba(255,255,255,0.15);
  overflow: hidden;
}
.gv-scanner::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.gv-gear {
  position: relative;
  width: 72px;
  height: 72px;
  color: var(--gv-orange);
  z-index: 1;
  animation: gvBob 3.2s ease-in-out infinite;
}
.gv-gear svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes gvBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.gv-signal {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(240,136,48,0.7);
  width: 60px;
  height: 60px;
  animation: gvPulseWave 2.4s ease-out infinite;
}
.gv-signal.gv-signal-2 { animation-delay: .8s; }
.gv-signal.gv-signal-3 { animation-delay: 1.6s; }
@keyframes gvPulseWave {
  0% { width: 60px; height: 60px; opacity: .8; }
  100% { width: 200px; height: 200px; opacity: 0; }
}

.gv-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #ffffff;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gv-teal-deep);
  box-shadow: 0 14px 30px rgba(44,89,100,0.18);
  border: 1px solid var(--gv-line);
  animation: gvFloat 5s ease-in-out infinite;
}
.gv-chip i { color: var(--gv-orange); font-size: 13px; }
.gv-chip.gv-chip-1 { top: 6%; left: -8%; animation-delay: 0s; }
.gv-chip.gv-chip-2 { bottom: 12%; right: -10%; animation-delay: 1.2s; }
.gv-chip.gv-chip-3 { bottom: -2%; left: 14%; animation-delay: 2.4s; }
@keyframes gvFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .gv-hero .gv-container { grid-template-columns: 1fr; }
  .gv-hero h1 { font-size: 33px; }
  .gv-scan-wrap { height: 300px; margin-top: 20px; }
}

/* ---------- perforated divider ---------- */
.gv-perf {
  position: relative;
  height: 26px;
  background: radial-gradient(circle 5px, transparent 5px, var(--gv-cream) 5.5px) 0 -13px / 34px 26px repeat-x;
}
.gv-perf::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px dashed rgba(44,89,100,0.3);
}

/* ================= OVERVIEW ================= */
.gv-overview { padding: 55px 0 70px; }
.gv-overview .gv-container { max-width: 860px; text-align: center; }
.gv-overview h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 18px;
}
.gv-overview p {
  font-size: 16.5px;
  line-height: 29px;
  color: var(--gv-muted);
}
.gv-overview .gv-product-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--gv-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gv-teal-deep);
}
.gv-overview .gv-product-note i { color: var(--gv-orange); }

/* ================= CHALLENGES ================= */
.gv-challenges { padding: 20px 0 80px; background: #ffffff; }
.gv-sec-head {
  max-width: 620px;
  margin: 0 auto 46px;
  text-align: center;
}
.gv-sec-head h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.gv-sec-head p {
  margin-top: 12px;
  color: var(--gv-muted);
  font-size: 15.5px;
  line-height: 24px;
}
.gv-chal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.gv-chal-card {
  padding: 28px 22px;
  border-radius: 14px;
  background: var(--gv-cream);
  border-left: 4px solid var(--gv-teal);
  transition: transform .35s ease, box-shadow .35s ease;
}
.gv-chal-card:nth-child(even) { border-left-color: var(--gv-orange); }
.gv-chal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.gv-chal-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gv-teal), var(--gv-teal-deep));
  color: #fff;
  font-size: 18px;
  margin-bottom: 16px;
}
.gv-chal-card:nth-child(even) .gv-chal-icon {
  background: linear-gradient(140deg, var(--gv-orange), var(--gv-orange-deep));
}
.gv-chal-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.gv-chal-card p { font-size: 13.5px; line-height: 21px; color: var(--gv-muted); }
@media (max-width: 900px) { .gv-chal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gv-chal-grid { grid-template-columns: 1fr; } }

/* ================= SOLUTIONS ================= */
.gv-solutions { padding: 80px 0; }
.gv-sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.gv-sol-card {
  padding: 30px 24px;
  background: #ffffff;
  border: 1px solid var(--gv-line);
  border-radius: 14px;
  text-align: center;
  transition: .35s;
}
.gv-sol-card:hover {
  border-color: var(--gv-orange);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.14);
}
.gv-sol-ic {
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gv-teal), var(--gv-orange));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(44,89,100,0.28);
}
.gv-sol-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.gv-sol-card p { font-size: 13.5px; line-height: 21px; color: var(--gv-muted); }
@media (max-width: 900px) { .gv-sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gv-sol-grid { grid-template-columns: 1fr; } }

/* ================= TECH MARQUEE ================= */
.gv-tech { padding: 10px 0 80px; }
.gv-tech-head { text-align: center; margin-bottom: 30px; }
.gv-tech-head h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.gv-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gv-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: gvMarquee 22s linear infinite;
}
.gv-marquee-mask:hover .gv-marquee-track { animation-play-state: paused; }
@keyframes gvMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.gv-tech-pill {
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--gv-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gv-teal);
}

/* ================= CTA BAND ================= */
.gv-cta-band {
  position: relative;
  overflow: hidden;
  margin: 0 auto 80px;
  max-width: 1180px;
  border-radius: 20px;
  padding: 54px 48px;
  background: linear-gradient(120deg, var(--gv-teal-deep), var(--gv-teal) 45%, var(--gv-orange-deep));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.gv-cta-band::after {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 60%; height: 220%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  animation: gvShine 5s ease-in-out infinite;
}
@keyframes gvShine {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(220%); }
}
.gv-cta-band h2 { color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.gv-cta-band p { color: rgba(255,255,255,0.85); font-size: 15px; max-width: 420px; }
.gv-cta-band .gv-btn-primary {
  background: #ffffff;
  color: var(--gv-teal-deep);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.gv-cta-band .gv-btn-primary:hover {
  background: var(--gv-cream);
  transform: translateY(-2px);
}

/* ================= OTHER INDUSTRIES ================= */
.gv-other { padding: 10px 0 90px; background: #ffffff; }
.gv-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.gv-other-card {
  padding: 30px 26px;
  border-radius: 14px;
  background: var(--gv-cream);
  border-top: 3px solid var(--gv-teal);
  text-decoration: none;
  display: block;
  transition: .35s;
}
.gv-other-card:nth-child(2) { border-top-color: var(--gv-orange); }
.gv-other-card:nth-child(3) { border-top-color: var(--gv-blue); }
.gv-other-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.gv-other-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--gv-teal-deep); }
.gv-other-card p { font-size: 14px; line-height: 22px; color: var(--gv-muted); margin-bottom: 16px; }
.gv-other-card span { font-size: 13px; font-weight: 700; color: var(--gv-orange-deep); }
@media (max-width: 900px) { .gv-other-grid { grid-template-columns: 1fr; } }

@media (prefers-reducgv-motion: reduce) {
  .gv-page * { animation: none !important; transition: none !important; }
}

/* ================================================================
   HI PAGE CSS
   ================================================================ */

/* html, body {
  margin: 0;
  padding: 0;
} */

.hci-page {
  --hci-teal: #2C5964;
  --hci-teal-deep: #1A3940;
  --hci-orange: #F08830;
  --hci-orange-deep: #C96A1F;
  --hci-blue: #4F84C4;
  --hci-blue-deep: #00539C;
  --hci-cream: #f7f5f0;
  --hci-ink: #213546;
  --hci-muted: #52616f;
  --hci-line: rgba(44,89,100,0.14);

  position: relative;
  width: 100%;
  background: var(--hci-cream);
  color: var(--hci-ink);
  font-family: 'Hind Siliguri', 'Poppins', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.hci-page * { box-sizing: border-box; }

.hci-page .hci-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.hci-page h1, .hci-page h2, .hci-page h3, .hci-page h4 {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--hci-teal-deep);
}
.hci-page p { margin: 0; }
.hci-page section { position: relative; }

/* ---------- reveal-on-scroll ---------- */
.hci-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.hci-reveal.hci-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- eyebrow ---------- */
.hci-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--hci-orange-deep);
  margin-bottom: 14px;
}
.hci-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--hci-orange);
  display: inline-block;
}

/* ================= HERO ================= */
.hci-hero {
  padding: 96px 0 70px;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(240,136,48,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(44,89,100,0.08), transparent 55%),
    var(--hci-cream);
}
.hci-hero .hci-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.hci-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--hci-line);
  box-shadow: 0 8px 20px rgba(44,89,100,0.10);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--hci-teal);
  margin-bottom: 22px;
}
.hci-hero-badge .hci-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hci-orange);
  box-shadow: 0 0 0 0 rgba(240,136,48,.55);
  animation: hciPulseDot 2.2s infinite;
}
@keyframes hciPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(240,136,48,.55); }
  70% { box-shadow: 0 0 0 9px rgba(240,136,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,136,48,0); }
}

.hci-hero h1 {
  font-size: 44px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.3px;
}
.hci-hero h1 .hci-accent {
  background: linear-gradient(90deg, var(--hci-orange), var(--hci-orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hci-hero p.hci-sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 28px;
  color: var(--hci-muted);
  max-width: 520px;
}
.hci-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.hci-btn-primary, .hci-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .35s;
}
.hci-btn-primary {
  color: #ffffff;
  background: linear-gradient(90deg, var(--hci-teal), var(--hci-orange));
  box-shadow: 0 14px 28px rgba(44,89,100,0.30);
}
.hci-btn-primary:hover {
  background: linear-gradient(90deg, var(--hci-orange), var(--hci-teal));
  box-shadow: 0 18px 34px rgba(44,89,100,0.4);
  transform: translateY(-2px);
}
.hci-btn-ghost {
  color: var(--hci-teal);
  background: transparent;
  border: 1.5px solid var(--hci-line);
}
.hci-btn-ghost:hover {
  border-color: var(--hci-teal);
  background: #ffffff;
}

/* --- hero visual: vital-sign monitor (signature element) --- */
.hci-vital-wrap {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hci-vital-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px dashed rgba(44,89,100,0.30);
  animation: hciSpin 30s linear infinite;
}
.hci-vital-ring.hci-ring-2 {
  width: 250px;
  height: 250px;
  border-color: rgba(79,132,196,0.34);
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes hciSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.hci-monitor {
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--hci-teal), var(--hci-teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 50px rgba(26,57,64,0.35), inset 0 2px 0 rgba(255,255,255,0.15);
  overflow: hidden;
}
.hci-monitor::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.hci-ecg {
  width: 78%;
  height: auto;
  overflow: visible;
}
.hci-ecg path {
  fill: none;
  stroke: var(--hci-orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: hciDraw 2.6s ease-in-out infinite;
}
@keyframes hciDraw {
  0% { stroke-dashoffset: 340; }
  55% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -340; }
}

.hci-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #ffffff;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hci-teal-deep);
  box-shadow: 0 14px 30px rgba(44,89,100,0.18);
  border: 1px solid var(--hci-line);
  animation: hciFloat 5s ease-in-out infinite;
}
.hci-chip i { color: var(--hci-orange); font-size: 13px; }
.hci-chip.hci-chip-1 { top: 6%; left: -6%; animation-delay: 0s; }
.hci-chip.hci-chip-2 { bottom: 12%; right: -10%; animation-delay: 1.2s; }
.hci-chip.hci-chip-3 { bottom: -2%; left: 14%; animation-delay: 2.4s; }
@keyframes hciFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .hci-hero .hci-container { grid-template-columns: 1fr; }
  .hci-hero h1 { font-size: 33px; }
  .hci-vital-wrap { height: 300px; margin-top: 20px; }
}

/* ---------- perforated divider ---------- */
.hci-perf {
  position: relative;
  height: 26px;
  background: radial-gradient(circle 5px, transparent 5px, var(--hci-cream) 5.5px) 0 -13px / 34px 26px repeat-x;
}
.hci-perf::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px dashed rgba(44,89,100,0.3);
}

/* ================= OVERVIEW ================= */
.hci-overview { padding: 55px 0 70px; }
.hci-overview .hci-container { max-width: 860px; text-align: center; }
.hci-overview h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 18px;
}
.hci-overview p {
  font-size: 16.5px;
  line-height: 29px;
  color: var(--hci-muted);
}
.hci-overview .hci-product-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--hci-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hci-teal-deep);
}
.hci-overview .hci-product-note i { color: var(--hci-orange); }

/* ================= CHALLENGES ================= */
.hci-challenges { padding: 20px 0 80px; background: #ffffff; }
.hci-sec-head {
  max-width: 620px;
  margin: 0 auto 46px;
  text-align: center;
}
.hci-sec-head h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.hci-sec-head p {
  margin-top: 12px;
  color: var(--hci-muted);
  font-size: 15.5px;
  line-height: 24px;
}
.hci-chal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.hci-chal-card {
  padding: 28px 22px;
  border-radius: 14px;
  background: var(--hci-cream);
  border-left: 4px solid var(--hci-teal);
  transition: transform .35s ease, box-shadow .35s ease;
}
.hci-chal-card:nth-child(even) { border-left-color: var(--hci-orange); }
.hci-chal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.hci-chal-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--hci-teal), var(--hci-teal-deep));
  color: #fff;
  font-size: 18px;
  margin-bottom: 16px;
}
.hci-chal-card:nth-child(even) .hci-chal-icon {
  background: linear-gradient(140deg, var(--hci-orange), var(--hci-orange-deep));
}
.hci-chal-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.hci-chal-card p { font-size: 13.5px; line-height: 21px; color: var(--hci-muted); }
@media (max-width: 900px) { .hci-chal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hci-chal-grid { grid-template-columns: 1fr; } }

/* ================= SOLUTIONS ================= */
.hci-solutions { padding: 80px 0; }
.hci-sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.hci-sol-card {
  padding: 30px 24px;
  background: #ffffff;
  border: 1px solid var(--hci-line);
  border-radius: 14px;
  text-align: center;
  transition: .35s;
}
.hci-sol-card:hover {
  border-color: var(--hci-orange);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.14);
}
.hci-sol-ic {
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hci-teal), var(--hci-orange));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(44,89,100,0.28);
}
.hci-sol-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.hci-sol-card p { font-size: 13.5px; line-height: 21px; color: var(--hci-muted); }
@media (max-width: 900px) { .hci-sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hci-sol-grid { grid-template-columns: 1fr; } }

/* ================= TECH MARQUEE ================= */
.hci-tech { padding: 10px 0 80px; }
.hci-tech-head { text-align: center; margin-bottom: 30px; }
.hci-tech-head h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.hci-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hci-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: hciMarquee 22s linear infinite;
}
.hci-marquee-mask:hover .hci-marquee-track { animation-play-state: paused; }
@keyframes hciMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hci-tech-pill {
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--hci-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hci-teal);
}

/* ================= CTA BAND ================= */
.hci-cta-band {
  position: relative;
  overflow: hidden;
  margin: 0 auto 80px;
  max-width: 1180px;
  border-radius: 20px;
  padding: 54px 48px;
  background: linear-gradient(120deg, var(--hci-teal-deep), var(--hci-teal) 45%, var(--hci-orange-deep));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hci-cta-band::after {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 60%; height: 220%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  animation: hciShine 5s ease-in-out infinite;
}
@keyframes hciShine {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(220%); }
}
.hci-cta-band h2 { color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.hci-cta-band p { color: rgba(255,255,255,0.85); font-size: 15px; max-width: 420px; }
.hci-cta-band .hci-btn-primary {
  background: #ffffff;
  color: var(--hci-teal-deep);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.hci-cta-band .hci-btn-primary:hover {
  background: var(--hci-cream);
  transform: translateY(-2px);
}

/* ================= OTHER INDUSTRIES ================= */
.hci-other { padding: 10px 0 90px; background: #ffffff; }
.hci-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.hci-other-card {
  padding: 30px 26px;
  border-radius: 14px;
  background: var(--hci-cream);
  border-top: 3px solid var(--hci-teal);
  text-decoration: none;
  display: block;
  transition: .35s;
}
.hci-other-card:nth-child(2) { border-top-color: var(--hci-orange); }
.hci-other-card:nth-child(3) { border-top-color: var(--hci-blue); }
.hci-other-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.hci-other-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--hci-teal-deep); }
.hci-other-card p { font-size: 14px; line-height: 22px; color: var(--hci-muted); margin-bottom: 16px; }
.hci-other-card span { font-size: 13px; font-weight: 700; color: var(--hci-orange-deep); }
@media (max-width: 900px) { .hci-other-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .hci-page * { animation: none !important; transition: none !important; }
}


/* ================================================================
   MANUFACTURING PAGE CSS
   ================================================================ */

/* html, body {
  margin: 0;
  padding: 0;
} */

.mf-page {
  --mf-teal: #2C5964;
  --mf-teal-deep: #1A3940;
  --mf-orange: #F08830;
  --mf-orange-deep: #C96A1F;
  --mf-blue: #4F84C4;
  --mf-blue-deep: #00539C;
  --mf-cream: #f7f5f0;
  --mf-ink: #213546;
  --mf-muted: #52616f;
  --mf-line: rgba(44,89,100,0.14);

  position: relative;
  width: 100%;
  background: var(--mf-cream);
  color: var(--mf-ink);
  font-family: 'Hind Siliguri', 'Poppins', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.mf-page * { box-sizing: border-box; }

.mf-page .mf-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.mf-page h1, .mf-page h2, .mf-page h3, .mf-page h4 {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--mf-teal-deep);
}
.mf-page p { margin: 0; }
.mf-page section { position: relative; }

/* ---------- reveal-on-scroll ---------- */
.mf-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.mf-reveal.mf-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- eyebrow ---------- */
.mf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mf-orange-deep);
  margin-bottom: 14px;
}
.mf-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--mf-orange);
  display: inline-block;
}

/* ================= HERO ================= */
.mf-hero {
  padding: 96px 0 70px;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(240,136,48,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(44,89,100,0.08), transparent 55%),
    var(--mf-cream);
}
.mf-hero .mf-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.mf-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--mf-line);
  box-shadow: 0 8px 20px rgba(44,89,100,0.10);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--mf-teal);
  margin-bottom: 22px;
}
.mf-hero-badge .mf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mf-orange);
  box-shadow: 0 0 0 0 rgba(240,136,48,.55);
  animation: mfPulseDot 2.2s infinite;
}
@keyframes mfPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(240,136,48,.55); }
  70% { box-shadow: 0 0 0 9px rgba(240,136,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,136,48,0); }
}

.mf-hero h1 {
  font-size: 44px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.3px;
}
.mf-hero h1 .mf-accent {
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mf-hero p.mf-sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 28px;
  color: var(--mf-muted);
  max-width: 520px;
}
.mf-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.mf-btn-primary, .mf-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .35s;
}
.mf-btn-primary {
  color: #ffffff;
  background: linear-gradient(90deg, var(--mf-teal), var(--mf-orange));
  box-shadow: 0 14px 28px rgba(44,89,100,0.30);
}
.mf-btn-primary:hover {
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-teal));
  box-shadow: 0 18px 34px rgba(44,89,100,0.4);
  transform: translateY(-2px);
}
.mf-btn-ghost {
  color: var(--mf-teal);
  background: transparent;
  border: 1.5px solid var(--mf-line);
}
.mf-btn-ghost:hover {
  border-color: var(--mf-teal);
  background: #ffffff;
}

/* --- hero visual: IoT gear pulse (signature element) --- */
.mf-scan-wrap {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mf-scan-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px dashed rgba(44,89,100,0.30);
  animation: mfSpin 30s linear infinite;
}
.mf-scan-ring.mf-ring-2 {
  width: 250px;
  height: 250px;
  border-color: rgba(240,136,48,0.30);
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes mfSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.mf-scanner {
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--mf-teal), var(--mf-teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 50px rgba(26,57,64,0.35), inset 0 2px 0 rgba(255,255,255,0.15);
  overflow: hidden;
}
.mf-scanner::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.mf-gear {
  position: relative;
  width: 84px;
  height: 84px;
  color: var(--mf-orange);
  animation: mfGearTurn 8s linear infinite;
  z-index: 1;
}
.mf-gear svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes mfGearTurn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.mf-signal {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(240,136,48,0.7);
  width: 60px;
  height: 60px;
  animation: mfPulseWave 2.4s ease-out infinite;
}
.mf-signal.mf-signal-2 { animation-delay: .8s; }
.mf-signal.mf-signal-3 { animation-delay: 1.6s; }
@keyframes mfPulseWave {
  0% { width: 60px; height: 60px; opacity: .8; }
  100% { width: 200px; height: 200px; opacity: 0; }
}

.mf-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #ffffff;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mf-teal-deep);
  box-shadow: 0 14px 30px rgba(44,89,100,0.18);
  border: 1px solid var(--mf-line);
  animation: mfFloat 5s ease-in-out infinite;
}
.mf-chip i { color: var(--mf-orange); font-size: 13px; }
.mf-chip.mf-chip-1 { top: 6%; left: -8%; animation-delay: 0s; }
.mf-chip.mf-chip-2 { bottom: 12%; right: -10%; animation-delay: 1.2s; }
.mf-chip.mf-chip-3 { bottom: -2%; left: 14%; animation-delay: 2.4s; }
@keyframes mfFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .mf-hero .mf-container { grid-template-columns: 1fr; }
  .mf-hero h1 { font-size: 33px; }
  .mf-scan-wrap { height: 300px; margin-top: 20px; }
}

/* ---------- perforated divider ---------- */
.mf-perf {
  position: relative;
  height: 26px;
  background: radial-gradient(circle 5px, transparent 5px, var(--mf-cream) 5.5px) 0 -13px / 34px 26px repeat-x;
}
.mf-perf::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px dashed rgba(44,89,100,0.3);
}

/* ================= OVERVIEW ================= */
.mf-overview { padding: 55px 0 70px; }
.mf-overview .mf-container { max-width: 860px; text-align: center; }
.mf-overview h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 18px;
}
.mf-overview p {
  font-size: 16.5px;
  line-height: 29px;
  color: var(--mf-muted);
}
.mf-overview .mf-product-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--mf-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mf-teal-deep);
}
.mf-overview .mf-product-note i { color: var(--mf-orange); }

/* ================= CHALLENGES ================= */
.mf-challenges { padding: 20px 0 80px; background: #ffffff; }
.mf-sec-head {
  max-width: 620px;
  margin: 0 auto 46px;
  text-align: center;
}
.mf-sec-head h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.mf-sec-head p {
  margin-top: 12px;
  color: var(--mf-muted);
  font-size: 15.5px;
  line-height: 24px;
}
.mf-chal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.mf-chal-card {
  padding: 28px 22px;
  border-radius: 14px;
  background: var(--mf-cream);
  border-left: 4px solid var(--mf-teal);
  transition: transform .35s ease, box-shadow .35s ease;
}
.mf-chal-card:nth-child(even) { border-left-color: var(--mf-orange); }
.mf-chal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.mf-chal-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--mf-teal), var(--mf-teal-deep));
  color: #fff;
  font-size: 18px;
  margin-bottom: 16px;
}
.mf-chal-card:nth-child(even) .mf-chal-icon {
  background: linear-gradient(140deg, var(--mf-orange), var(--mf-orange-deep));
}
.mf-chal-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.mf-chal-card p { font-size: 13.5px; line-height: 21px; color: var(--mf-muted); }
@media (max-width: 900px) { .mf-chal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mf-chal-grid { grid-template-columns: 1fr; } }

/* ================= SOLUTIONS ================= */
.mf-solutions { padding: 80px 0; }
.mf-sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.mf-sol-card {
  padding: 30px 24px;
  background: #ffffff;
  border: 1px solid var(--mf-line);
  border-radius: 14px;
  text-align: center;
  transition: .35s;
}
.mf-sol-card:hover {
  border-color: var(--mf-orange);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.14);
}
.mf-sol-ic {
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mf-teal), var(--mf-orange));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(44,89,100,0.28);
}
.mf-sol-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.mf-sol-card p { font-size: 13.5px; line-height: 21px; color: var(--mf-muted); }
@media (max-width: 900px) { .mf-sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mf-sol-grid { grid-template-columns: 1fr; } }

/* ================= TECH MARQUEE ================= */
.mf-tech { padding: 10px 0 80px; }
.mf-tech-head { text-align: center; margin-bottom: 30px; }
.mf-tech-head h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mf-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mf-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: mfMarquee 22s linear infinite;
}
.mf-marquee-mask:hover .mf-marquee-track { animation-play-state: paused; }
@keyframes mfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.mf-tech-pill {
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--mf-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mf-teal);
}

/* ================= CTA BAND ================= */
.mf-cta-band {
  position: relative;
  overflow: hidden;
  margin: 0 auto 80px;
  max-width: 1180px;
  border-radius: 20px;
  padding: 54px 48px;
  background: linear-gradient(120deg, var(--mf-teal-deep), var(--mf-teal) 45%, var(--mf-orange-deep));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mf-cta-band::after {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 60%; height: 220%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  animation: mfShine 5s ease-in-out infinite;
}
@keyframes mfShine {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(220%); }
}
.mf-cta-band h2 { color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.mf-cta-band p { color: rgba(255,255,255,0.85); font-size: 15px; max-width: 420px; }
.mf-cta-band .mf-btn-primary {
  background: #ffffff;
  color: var(--mf-teal-deep);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.mf-cta-band .mf-btn-primary:hover {
  background: var(--mf-cream);
  transform: translateY(-2px);
}

/* ================= OTHER INDUSTRIES ================= */
.mf-other { padding: 10px 0 90px; background: #ffffff; }
.mf-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mf-other-card {
  padding: 30px 26px;
  border-radius: 14px;
  background: var(--mf-cream);
  border-top: 3px solid var(--mf-teal);
  text-decoration: none;
  display: block;
  transition: .35s;
}
.mf-other-card:nth-child(2) { border-top-color: var(--mf-orange); }
.mf-other-card:nth-child(3) { border-top-color: var(--mf-blue); }
.mf-other-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.mf-other-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--mf-teal-deep); }
.mf-other-card p { font-size: 14px; line-height: 22px; color: var(--mf-muted); margin-bottom: 16px; }
.mf-other-card span { font-size: 13px; font-weight: 700; color: var(--mf-orange-deep); }
@media (max-width: 900px) { .mf-other-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .mf-page * { animation: none !important; transition: none !important; }
}


/* ================================================================
   RETAIL & E-COMMERCE PAGE CSS
   ================================================================ */

/* html, body {
  margin: 0;
  padding: 0;
} */

.rt-page {
  --rt-teal: #2C5964;
  --rt-teal-deep: #1A3940;
  --rt-orange: #F08830;
  --rt-orange-deep: #C96A1F;
  --rt-blue: #4F84C4;
  --rt-blue-deep: #00539C;
  --rt-cream: #f7f5f0;
  --rt-ink: #213546;
  --rt-muted: #52616f;
  --rt-line: rgba(44,89,100,0.14);

  position: relative;
  width: 100%;
  background: var(--rt-cream);
  color: var(--rt-ink);
  font-family: 'Hind Siliguri', 'Poppins', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.rt-page * { box-sizing: border-box; }

.rt-page .rt-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.rt-page h1, .rt-page h2, .rt-page h3, .rt-page h4 {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--rt-teal-deep);
}
.rt-page p { margin: 0; }
.rt-page section { position: relative; }

/* ---------- reveal-on-scroll ---------- */
.rt-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.rt-reveal.rt-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- eyebrow ---------- */
.rt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--rt-orange-deep);
  margin-bottom: 14px;
}
.rt-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--rt-orange);
  display: inline-block;
}

/* ================= HERO ================= */
.rt-hero {
  padding: 96px 0 70px;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(240,136,48,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(44,89,100,0.08), transparent 55%),
    var(--rt-cream);
}
.rt-hero .rt-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.rt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--rt-line);
  box-shadow: 0 8px 20px rgba(44,89,100,0.10);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--rt-teal);
  margin-bottom: 22px;
}
.rt-hero-badge .rt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rt-orange);
  box-shadow: 0 0 0 0 rgba(240,136,48,.55);
  animation: rtPulseDot 2.2s infinite;
}
@keyframes rtPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(240,136,48,.55); }
  70% { box-shadow: 0 0 0 9px rgba(240,136,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,136,48,0); }
}

.rt-hero h1 {
  font-size: 44px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.3px;
}
.rt-hero h1 .rt-accent {
  background: linear-gradient(90deg, var(--rt-orange), var(--rt-orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.rt-hero p.rt-sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 28px;
  color: var(--rt-muted);
  max-width: 520px;
}
.rt-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.rt-btn-primary, .rt-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .35s;
}
.rt-btn-primary {
  color: #ffffff;
  background: linear-gradient(90deg, var(--rt-teal), var(--rt-orange));
  box-shadow: 0 14px 28px rgba(44,89,100,0.30);
}
.rt-btn-primary:hover {
  background: linear-gradient(90deg, var(--rt-orange), var(--rt-teal));
  box-shadow: 0 18px 34px rgba(44,89,100,0.4);
  transform: translateY(-2px);
}
.rt-btn-ghost {
  color: var(--rt-teal);
  background: transparent;
  border: 1.5px solid var(--rt-line);
}
.rt-btn-ghost:hover {
  border-color: var(--rt-teal);
  background: #ffffff;
}

/* --- hero visual: shopping cart + barcode scan (signature element) --- */
.rt-cart-wrap {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rt-cart-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px dashed rgba(44,89,100,0.30);
  animation: rtSpin 30s linear infinite;
}
.rt-cart-ring.rt-ring-2 {
  width: 250px;
  height: 250px;
  border-color: rgba(79,132,196,0.34);
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes rtSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rt-cart-core {
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--rt-teal), var(--rt-teal-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 50px rgba(26,57,64,0.35), inset 0 2px 0 rgba(255,255,255,0.15);
}
.rt-cart-core::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.rt-cart-core i {
  font-size: 64px;
  color: var(--rt-orange);
  animation: rtCartBounce 2.6s ease-in-out infinite;
}
@keyframes rtCartBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-4deg); }
}
.rt-cart-badge {
  position: absolute;
  top: 26%;
  right: 24%;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 50%;
  background: var(--rt-orange);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(240,136,48,0.45);
}

/* barcode scan strip beneath the cart */
.rt-scan-track {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 34px;
  overflow: hidden;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid var(--rt-line);
  box-shadow: 0 10px 22px rgba(44,89,100,0.16);
}
.rt-scan-bars {
  position: absolute;
  inset: 6px 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--rt-teal-deep) 0, var(--rt-teal-deep) 2px,
    transparent 2px, transparent 5px,
    var(--rt-teal-deep) 5px, var(--rt-teal-deep) 8px,
    transparent 8px, transparent 11px,
    var(--rt-teal-deep) 11px, var(--rt-teal-deep) 12px,
    transparent 12px, transparent 16px
  );
  opacity: 0.85;
}
.rt-scan-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--rt-orange);
  box-shadow: 0 0 10px 2px rgba(240,136,48,0.7);
  animation: rtScan 2.4s ease-in-out infinite;
}
@keyframes rtScan {
  0% { left: 4%; }
  50% { left: 92%; }
  100% { left: 4%; }
}

.rt-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #ffffff;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rt-teal-deep);
  box-shadow: 0 14px 30px rgba(44,89,100,0.18);
  border: 1px solid var(--rt-line);
  animation: rtFloat 5s ease-in-out infinite;
}
.rt-chip i { color: var(--rt-orange); font-size: 13px; }
.rt-chip.rt-chip-1 { top: 6%; left: -6%; animation-delay: 0s; }
.rt-chip.rt-chip-2 { bottom: 20%; right: -12%; animation-delay: 1.2s; }
.rt-chip.rt-chip-3 { bottom: -4%; left: 12%; animation-delay: 2.4s; }
@keyframes rtFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .rt-hero .rt-container { grid-template-columns: 1fr; }
  .rt-hero h1 { font-size: 33px; }
  .rt-cart-wrap { height: 300px; margin-top: 20px; }
}

/* ---------- perforated divider ---------- */
.rt-perf {
  position: relative;
  height: 26px;
  background: radial-gradient(circle 5px, transparent 5px, var(--rt-cream) 5.5px) 0 -13px / 34px 26px repeat-x;
}
.rt-perf::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1.5px dashed rgba(44,89,100,0.3);
}

/* ================= OVERVIEW ================= */
.rt-overview { padding: 55px 0 70px; }
.rt-overview .rt-container { max-width: 860px; text-align: center; }
.rt-overview h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 18px;
}
.rt-overview p {
  font-size: 16.5px;
  line-height: 29px;
  color: var(--rt-muted);
}
.rt-overview .rt-product-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--rt-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rt-teal-deep);
}
.rt-overview .rt-product-note i { color: var(--rt-orange); }

/* ================= CHALLENGES ================= */
.rt-challenges { padding: 20px 0 80px; background: #ffffff; }
.rt-sec-head {
  max-width: 620px;
  margin: 0 auto 46px;
  text-align: center;
}
.rt-sec-head h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.rt-sec-head p {
  margin-top: 12px;
  color: var(--rt-muted);
  font-size: 15.5px;
  line-height: 24px;
}
.rt-chal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.rt-chal-card {
  padding: 28px 22px;
  border-radius: 14px;
  background: var(--rt-cream);
  border-left: 4px solid var(--rt-teal);
  transition: transform .35s ease, box-shadow .35s ease;
}
.rt-chal-card:nth-child(even) { border-left-color: var(--rt-orange); }
.rt-chal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.rt-chal-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--rt-teal), var(--rt-teal-deep));
  color: #fff;
  font-size: 18px;
  margin-bottom: 16px;
}
.rt-chal-card:nth-child(even) .rt-chal-icon {
  background: linear-gradient(140deg, var(--rt-orange), var(--rt-orange-deep));
}
.rt-chal-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.rt-chal-card p { font-size: 13.5px; line-height: 21px; color: var(--rt-muted); }
@media (max-width: 900px) { .rt-chal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rt-chal-grid { grid-template-columns: 1fr; } }

/* ================= SOLUTIONS ================= */
.rt-solutions { padding: 80px 0; }
.rt-sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.rt-sol-card {
  padding: 30px 24px;
  background: #ffffff;
  border: 1px solid var(--rt-line);
  border-radius: 14px;
  text-align: center;
  transition: .35s;
}
.rt-sol-card:hover {
  border-color: var(--rt-orange);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.14);
}
.rt-sol-ic {
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rt-teal), var(--rt-orange));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(44,89,100,0.28);
}
.rt-sol-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.rt-sol-card p { font-size: 13.5px; line-height: 21px; color: var(--rt-muted); }
@media (max-width: 900px) { .rt-sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rt-sol-grid { grid-template-columns: 1fr; } }

/* ================= TECH MARQUEE ================= */
.rt-tech { padding: 10px 0 80px; }
.rt-tech-head { text-align: center; margin-bottom: 30px; }
.rt-tech-head h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rt-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rt-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: rtMarquee 22s linear infinite;
}
.rt-marquee-mask:hover .rt-marquee-track { animation-play-state: paused; }
@keyframes rtMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.rt-tech-pill {
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 50px;
  background: #ffffff;
  border: 1px solid var(--rt-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rt-teal);
}

/* ================= CTA BAND ================= */
.rt-cta-band {
  position: relative;
  overflow: hidden;
  margin: 0 auto 80px;
  max-width: 1180px;
  border-radius: 20px;
  padding: 54px 48px;
  background: linear-gradient(120deg, var(--rt-teal-deep), var(--rt-teal) 45%, var(--rt-orange-deep));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rt-cta-band::after {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 60%; height: 220%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  animation: rtShine 5s ease-in-out infinite;
}
@keyframes rtShine {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(220%); }
}
.rt-cta-band h2 { color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.rt-cta-band p { color: rgba(255,255,255,0.85); font-size: 15px; max-width: 420px; }
.rt-cta-band .rt-btn-primary {
  background: #ffffff;
  color: var(--rt-teal-deep);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.rt-cta-band .rt-btn-primary:hover {
  background: var(--rt-cream);
  transform: translateY(-2px);
}

/* ================= OTHER INDUSTRIES ================= */
.rt-other { padding: 10px 0 90px; background: #ffffff; }
.rt-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.rt-other-card {
  padding: 30px 26px;
  border-radius: 14px;
  background: var(--rt-cream);
  border-top: 3px solid var(--rt-teal);
  text-decoration: none;
  display: block;
  transition: .35s;
}
.rt-other-card:nth-child(2) { border-top-color: var(--rt-orange); }
.rt-other-card:nth-child(3) { border-top-color: var(--rt-blue); }
.rt-other-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(44,89,100,0.16);
}
.rt-other-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--rt-teal-deep); }
.rt-other-card p { font-size: 14px; line-height: 22px; color: var(--rt-muted); margin-bottom: 16px; }
.rt-other-card span { font-size: 13px; font-weight: 700; color: var(--rt-orange-deep); }
@media (max-width: 900px) { .rt-other-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .rt-page * { animation: none !important; transition: none !important; }
}





/* ============================================================
   MySoftSYS Digital Growth Starter — Funnel Page Styles
   All variables below are scoped to .fn-wrapper (NOT :root) and
   prefixed with "--fn-" on purpose: css/style.css already defines
   its own global :root variables (--orange, --blue, --bg, --muted,
   etc.) used site-wide. Keeping funnel's palette scoped + prefixed
   means this file can be merged into custom.css without overriding
   or being overridden by those site-wide variables on other pages.
     --fn-dark   #2C5964
     --fn-navy   #1A3940
     --fn-orange #F08830
     --fn-blue   #4F84C4
     --fn-bluedk #00539C
     --fn-text   #213546
     --fn-bg     #f7f5f0
     --fn-muted  #4a5568
   ============================================================ */

.fn-wrapper {
    --fn-dark: #2C5964;
    --fn-navy: #1A3940;
    --fn-orange: #F08830;
    --fn-blue: #4F84C4;
    --fn-bluedk: #00539C;
    --fn-text: #213546;
    --fn-bg: #f7f5f0;
    --fn-muted: #4a5568;
    --fn-grad: linear-gradient(90deg, #2C5964, #F08830);
    --fn-grad-soft: linear-gradient(160deg, #ffffff 0%, #eef4f8 100%);

    position: relative;
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    background: var(--fn-bg);
    color: var(--fn-text);
    font-family: 'Poppins', 'Hind Siliguri', sans-serif;
    overflow-x: hidden;
}

.fn-wrapper h1,
.fn-wrapper h2,
.fn-wrapper h3,
.fn-wrapper h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    color: var(--fn-text);
}

/* ===================== Buttons ===================== */
.fn-btn {
    display: inline-block;
    padding: 13px 34px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    background: var(--fn-grad);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(44, 89, 100, .28);
    transition: .4s;
}
.fn-btn:hover {
    background: linear-gradient(90deg, #F08830, #2C5964);
    box-shadow: 0 18px 30px rgba(44, 89, 100, .4);
    color: #ffffff;
    text-decoration: none;
}
.fn-btn-orange {
    background: linear-gradient(90deg, #F08830, #2C5964);
}
.fn-btn-orange:hover {
    background: linear-gradient(90deg, #2C5964, #F08830);
}
.fn-btn-outline {
    background: transparent;
    color: var(--fn-dark);
    border: 2px solid var(--fn-dark);
    box-shadow: none;
}
.fn-btn-outline:hover {
    background: var(--fn-dark);
    color: #ffffff;
    box-shadow: none;
}
.fn-btn-outline-light {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: none;
}
.fn-btn-outline-light:hover {
    background: #ffffff;
    color: var(--fn-dark);
}
.fn-btn-sm { padding: 9px 22px; font-size: 12px; }
.fn-btn-lg { padding: 16px 46px; font-size: 16px; }
.fn-btn-block { display: block; width: 100%; text-align: center; }

/* ===================== Top Bar ===================== */
.fn-topbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #ececec;
    transition: box-shadow .3s, padding .3s;
}
.fn-topbar.fn-scrolled {
    box-shadow: 0 6px 22px rgba(26, 57, 64, .14);
}
.fn-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}
.fn-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.fn-brand img {
    width: 42px;
    height: 42px;
    margin-right: 10px;
}
.fn-brand span {
    font-size: 20px;
    font-weight: 800;
    color: var(--fn-dark);
}
.fn-topbar-cta .fn-btn {
    box-shadow: none;
}

/* ===================== Sections ===================== */
.fn-section {
    position: relative;
    width: 100%;
    padding: 70px 0;
}
.fn-section-light {
    background: #ffffff;
}
.fn-section-dark {
    background: linear-gradient(135deg, #2C5964 0%, #1A3940 100%);
    color: #ffffff;
}
.fn-section-dark h2,
.fn-section-dark h3,
.fn-section-dark p {
    color: #ffffff;
}
.fn-section-header {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}
.fn-section-header h2 {
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.fn-section-header h2::after {
    content: "";
    position: absolute;
    width: 64px;
    height: 4px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    background: linear-gradient(to left, #2C5964, #F08830, #1A3940);
}
.fn-section-header p {
    font-size: 16px;
    color: var(--fn-muted);
    line-height: 26px;
}
.fn-section-header-light h2::after {
    background: linear-gradient(to left, #F08830, #ffffff, #F08830);
}
.fn-section-header-light p {
    color: rgba(255, 255, 255, .82);
}
.fn-quote {
    font-style: italic;
    font-weight: 500;
    color: var(--fn-orange) !important;
}

/* ===================== Hero ===================== */
.fn-hero {
    position: relative;
    padding: 35px 0 80px;
    background:
        radial-gradient(circle at 85% 15%, rgba(240, 136, 48, .12), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(44, 89, 100, .12), transparent 45%),
        linear-gradient(160deg, #faf8f3 0%, #eef4f8 100%);
}
.fn-eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fn-orange);
    margin-bottom: 14px;
}
.fn-eyebrow-light {
    color: var(--fn-orange);
}
.fn-hero-title {
    font-size: 46px;
    line-height: 1.12;
    font-weight: 900;
    margin: 0 0 8px;
}
.fn-hero-title span {
    color: var(--fn-orange);
}
.fn-hero-sub {
    font-size: 22px;
    font-weight: 700;
    color: var(--fn-dark);
    margin: 0 0 18px;
}
.fn-hero-text {
    font-size: 17px;
    line-height: 28px;
    color: var(--fn-muted);
    max-width: 560px;
    margin-bottom: 26px;
}
.fn-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}
.fn-trust-line {
    font-size: 14px;
    color: var(--fn-dark);
    font-weight: 500;
    margin: 0;
}
.fn-trust-line i {
    color: var(--fn-orange);
    margin-right: 6px;
}

/* Hero card */
.fn-hero-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 38px 32px;
    text-align: center;
    border: 1px solid rgba(44, 89, 100, .14);
    box-shadow: 0 26px 54px rgba(26, 57, 64, .22);
}
.fn-hero-card-price {
    font-weight: 900;
    color: var(--fn-dark);
    line-height: 1;
}
.fn-hero-card-price .fn-rupee {
    font-size: 34px;
    vertical-align: super;
    color: var(--fn-orange);
}
.fn-hero-card-price .fn-amount {
    font-size: 64px;
}
.fn-hero-card-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fn-muted);
    margin: 6px 0 22px;
}
.fn-hero-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    text-align: left;
}
.fn-hero-card-list li {
    padding: 8px 0 8px 30px;
    position: relative;
    font-size: 15px;
    color: var(--fn-text);
}
.fn-hero-card-list li i {
    position: absolute;
    left: 0;
    top: 10px;
    color: var(--fn-orange);
}

/* ===================== Overview Pillars ===================== */
.fn-pillar-card {
    background: var(--fn-grad-soft);
    border: 1px solid rgba(44, 89, 100, .14);
    border-radius: 18px;
    padding: 38px 28px;
    text-align: center;
    height: 100%;
    box-shadow: 0 22px 48px rgba(44, 89, 100, .12);
    transition: transform .4s, box-shadow .4s;
}
.fn-pillar-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(44, 89, 100, .22);
}
.fn-pillar-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #ffffff;
    background: linear-gradient(135deg, #2C5964, #4F84C4);
    box-shadow: 0 12px 26px rgba(44, 89, 100, .35);
}
.fn-pillar-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fn-dark);
    margin-bottom: 12px;
}
.fn-pillar-card p {
    font-size: 15px;
    color: var(--fn-muted);
    line-height: 24px;
    margin: 0;
}

/* ===================== Pillar Heads ===================== */
.fn-pillar-head {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
}
.fn-pillar-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--fn-grad);
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 16px;
}
.fn-pillar-head h2 {
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.fn-pillar-head p {
    font-size: 16px;
    color: var(--fn-muted);
    line-height: 26px;
}

/* ===================== Subheads & chips ===================== */
.fn-subhead {
    font-size: 22px;
    font-weight: 700;
    color: var(--fn-dark);
    margin: 30px 0 8px;
    position: relative;
    padding-left: 16px;
}
.fn-subhead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 5px;
    border-radius: 4px;
    background: var(--fn-grad);
}
.fn-lead-text {
    font-size: 16px;
    margin-bottom: 12px;
}
.fn-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.fn-chip {
    display: inline-block;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fn-dark);
    background: #ffffff;
    border: 1px solid rgba(44, 89, 100, .2);
    border-radius: 30px;
}

/* ===================== Feature lists ===================== */
.fn-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.fn-feature-list li {
    position: relative;
    padding: 8px 0 8px 32px;
    font-size: 15px;
    color: var(--fn-text);
    line-height: 22px;
}
.fn-feature-list li i {
    position: absolute;
    left: 0;
    top: 10px;
    color: var(--fn-orange);
    font-size: 15px;
}
.fn-feature-list-light li {
    color: #000000;
}
.fn-feature-list-light li i {
    color: var(--fn-orange);
}

/* ===================== Boxes ===================== */
.fn-box {
    background: var(--fn-grad-soft);
    border: 1px solid rgba(44, 89, 100, .14);
    border-radius: 18px;
    padding: 34px 30px;
    height: 100%;
    box-shadow: 0 18px 40px rgba(44, 89, 100, .12);
}
.fn-box-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #2C5964, #4F84C4);
}
.fn-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fn-dark);
    margin-bottom: 16px;
}

/* ===================== Key Benefit ===================== */
.fn-keybenefit {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    padding: 22px 26px;
    background: linear-gradient(135deg, #2C5964, #1A3940);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(26, 57, 64, .25);
}
.fn-keybenefit i {
    font-size: 26px;
    color: var(--fn-orange);
    flex-shrink: 0;
}
.fn-keybenefit p {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
}

/* ===================== Launch Benefit ===================== */
.fn-launch-benefit {
    background: linear-gradient(135deg, #F08830, #2C5964);
    border-radius: 18px;
    padding: 38px 32px;
    height: 100%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 20px 44px rgba(44, 89, 100, .3);
}
.fn-launch-badge {
    display: inline-block;
    align-self: flex-start;
    background: #ffffff;
    color: var(--fn-orange);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
}
.fn-launch-benefit h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 14px;
}
.fn-launch-included {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 18px;
}
.fn-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(255, 255, 255, .12);
    padding: 14px 16px;
    border-radius: 12px;
}
.fn-note i {
    color: #ffffff;
    margin-top: 3px;
}
.fn-note p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
    line-height: 22px;
}

/* ===================== Problem ===================== */
.fn-problem-list {
    margin-bottom: 25px;
}
.fn-problem-item {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    height: 100%;
    margin-bottom: 20px;
}
.fn-problem-item i {
    display: block;
    font-size: 26px;
    color: var(--fn-orange);
    margin-bottom: 12px;
}
.fn-problem-item p {
    margin: 0;
    font-size: 15px;
    color: #ffffff;
    line-height: 22px;
}
.fn-solution-box {
    background: rgba(255, 255, 255, .1);
    border-left: 5px solid var(--fn-orange);
    border-radius: 12px;
    padding: 24px 28px;
}
.fn-solution-box p {
    margin: 0;
    font-size: 17px;
    color: #ffffff;
    line-height: 26px;
}
.fn-solution-box strong {
    color: var(--fn-orange);
}

/* ===================== Industry / Who is this for ===================== */
.fn-tier-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--fn-orange);
    background: rgba(240, 136, 48, .12);
    border: 1px solid rgba(240, 136, 48, .4);
    padding: 8px 20px;
    border-radius: 30px;
    margin-bottom: 20px;
}
.fn-tier-badge-alt {
    color: var(--fn-blue);
    background: rgba(79, 132, 196, .12);
    border-color: rgba(79, 132, 196, .4);
}
.fn-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.fn-industry-card {
    background: #ffffff;
    border: 1px solid rgba(44, 89, 100, .14);
    border-radius: 18px;
    padding: 28px 26px;
    box-shadow: 0 16px 36px rgba(44, 89, 100, .1);
    transition: transform .35s, box-shadow .35s;
}
.fn-industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 52px rgba(44, 89, 100, .2);
}
.fn-industry-wide {
    grid-column: 1 / -1;
}
.fn-industry-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--fn-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fn-industry-card h3 i {
    color: var(--fn-orange);
}
.fn-industry-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fn-industry-card ul li {
    padding: 6px 0 6px 22px;
    position: relative;
    font-size: 15px;
    color: var(--fn-text);
}
.fn-industry-card ul li::before {
    content: "\f105";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--fn-orange);
}

/* ===================== Tier 1 industry cards — image/visual placeholder ===================== */
.fn-tier1-grid .fn-industry-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #2C5964 0%, #3f7a87 55%, #F08830 150%);
    border: 1px solid rgba(44, 89, 100, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fn-tier1-grid .fn-industry-media-icon {
    font-size: 46px;
    line-height: 1;
    color: rgba(255, 255, 255, .92);
}
.fn-tier1-grid .fn-industry-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fn-tier1-grid .fn-industry-wide .fn-industry-media {
    aspect-ratio: 5 / 1;
}
@media (max-width: 767.98px) {
    .fn-tier1-grid .fn-industry-wide .fn-industry-media { aspect-ratio: 3 / 1; }
}

/* ===================== Why cards ===================== */
.fn-why-card {
    background: #ffffff;
    border: 1px solid rgba(44, 89, 100, .14);
    border-radius: 18px;
    padding: 34px 28px;
    height: 100%;
    text-align: center;
    box-shadow: 0 16px 36px rgba(44, 89, 100, .1);
    transition: transform .35s, box-shadow .35s;
    margin-bottom: 24px;
}
.fn-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 52px rgba(44, 89, 100, .2);
}
.fn-why-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ffffff;
    background: linear-gradient(135deg, #2C5964, #1A3940);
    box-shadow: 0 12px 26px rgba(44, 89, 100, .3);
}
.fn-why-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--fn-dark);
    margin-bottom: 10px;
}
.fn-why-card p {
    font-size: 14px;
    color: var(--fn-muted);
    line-height: 22px;
    margin: 0;
}

/* ===================== What you get ===================== */
.fn-get-card {
    background: var(--fn-grad-soft);
    border: 1px solid rgba(44, 89, 100, .14);
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
    height: 100%;
    margin-bottom: 24px;
    box-shadow: 0 14px 30px rgba(44, 89, 100, .1);
    transition: transform .35s, box-shadow .35s;
}
.fn-get-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(44, 89, 100, .2);
}
.fn-get-card i {
    font-size: 32px;
    color: var(--fn-orange);
    margin-bottom: 14px;
}
.fn-get-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--fn-dark);
    margin-bottom: 8px;
}
.fn-get-card p {
    font-size: 14px;
    color: var(--fn-muted);
    line-height: 22px;
    margin: 0;
}

/* ===================== Journey ===================== */
.fn-journey {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}
.fn-journey-step {
    flex: 1 1 240px;
    max-width: 300px;
    background: #ffffff;
    border: 1px solid rgba(44, 89, 100, .14);
    border-radius: 18px;
    padding: 34px 26px;
    text-align: center;
    box-shadow: 0 16px 36px rgba(44, 89, 100, .12);
}
.fn-journey-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    background: var(--fn-grad);
}
.fn-journey-step h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--fn-dark);
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.fn-journey-step p {
    font-size: 14px;
    color: var(--fn-muted);
    line-height: 22px;
    margin: 0;
}
.fn-journey-arrow {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: var(--fn-orange);
}
.fn-journey-msg {
    text-align: center;
    background: rgba(44, 89, 100, .06);
    border-radius: 14px;
    padding: 22px;
}
.fn-journey-msg p {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--fn-dark);
}

/* ===================== Offer ===================== */
.fn-offer {
    background: linear-gradient(135deg, #2C5964 0%, #1A3940 100%);
    padding: 80px 0;
}
.fn-offer-box {
    max-width: 880px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 50px 44px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
}
.fn-offer-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--fn-orange);
    margin-bottom: 14px;
}
.fn-offer-box h2 {
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--fn-dark);
    margin-bottom: 14px;
}
.fn-offer-price {
    font-weight: 900;
    color: var(--fn-dark);
    line-height: 1;
    margin: 6px 0;
}
.fn-offer-price .fn-rupee {
    font-size: 38px;
    vertical-align: super;
    color: var(--fn-orange);
}
.fn-offer-price .fn-amount {
    font-size: 72px;
}
.fn-offer-price-light .fn-rupee,
.fn-offer-price-light .fn-amount {
    color: #ffffff;
}
.fn-offer-sub {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fn-muted);
    margin-bottom: 18px;
}
.fn-offer-desc {
    font-size: 16px;
    color: var(--fn-muted);
    line-height: 26px;
    max-width: 620px;
    margin: 0 auto 26px;
}
.fn-offer-includes {
    text-align: left;
    background: var(--fn-bg);
    border-radius: 16px;
    padding: 24px 30px;
    margin-bottom: 22px;
}
.fn-offer-avail {
    font-size: 14px;
    font-weight: 500;
    color: var(--fn-dark);
    margin-bottom: 24px;
}
.fn-offer-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ===================== Final / Urgency ===================== */
.fn-final {
    text-align: center;
    padding: 80px 0;
}
.fn-final-list {
    font-size: 18px;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 12px;
}
.fn-final-pill {
    font-size: 22px;
    color: var(--fn-orange);
    margin-bottom: 30px;
}
.fn-final-pill strong {
    color: var(--fn-orange);
}
.fn-final-cta {
    margin-top: 10px;
}
.fn-final-support {
    margin-top: 18px;
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
}

/* ===================== Lead Form ===================== */
.fn-form-wrap {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(44, 89, 100, .14);
    border-radius: 22px;
    padding: 44px 40px;
    box-shadow: 0 24px 50px rgba(44, 89, 100, .14);
}
.fn-lead-form {
    margin-top: 30px;
}
.fn-field {
    margin-bottom: 18px;
}
.fn-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fn-dark);
    margin-bottom: 7px;
}
.fn-field input,
.fn-field select,
.fn-field textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    color: var(--fn-text);
    background: #fafafa;
    border: 1px solid #d8dee3;
    border-radius: 10px;
    transition: border-color .3s, box-shadow .3s;
}
.fn-field input:focus,
.fn-field select:focus,
.fn-field textarea:focus {
    outline: none;
    border-color: var(--fn-orange);
    box-shadow: 0 0 0 3px rgba(240, 136, 48, .18);
    background: #ffffff;
}
.fn-field textarea {
    resize: vertical;
}
.fn-form-note {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fn-orange);
    text-align: center;
    min-height: 20px;
}

/* Thank you greeting (pure CSS checkbox toggle) */
.fn-thanks-toggle {
    display: none;
}
.fn-thankyou {
    display: none;
    text-align: center;
    padding: 30px 10px;
    animation: fnPop .45s ease;
}
.fn-thanks-toggle:checked ~ .fn-lead-form {
    display: none;
}
.fn-thanks-toggle:checked ~ .fn-thankyou {
    display: block;
}
@keyframes fnPop {
    0% { opacity: 0; transform: scale(.92); }
    100% { opacity: 1; transform: scale(1); }
}
.fn-thankyou-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #ffffff;
    background: linear-gradient(135deg, #2C5964, #4F84C4);
    box-shadow: 0 14px 30px rgba(44, 89, 100, .4);
}
.fn-thankyou h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--fn-dark);
    margin-bottom: 12px;
}
.fn-thankyou p {
    font-size: 16px;
    line-height: 26px;
    color: var(--fn-muted);
    max-width: 540px;
    margin: 0 auto 24px;
}
.fn-thankyou p strong {
    color: var(--fn-orange);
}

/* ===================== FAQ ===================== */
.fn-faq {
    max-width: 820px;
    margin: 0 auto;
}
.fn-faq-item {
    background: #ffffff;
    border: 1px solid rgba(44, 89, 100, .16);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}
.fn-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--fn-text);
    background: #ffffff;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background .3s, color .3s;
}
.fn-faq-q i {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--fn-orange);
    transition: transform .3s;
}
.fn-faq-item.fn-open .fn-faq-q {
    background: var(--fn-grad);
    color: #ffffff;
}
.fn-faq-item.fn-open .fn-faq-q i {
    color: #ffffff;
    transform: rotate(45deg);
}
.fn-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}
.fn-faq-a p {
    padding: 0 22px 20px;
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--fn-muted);
}

/* ===================== Final Positioning ===================== */
.fn-final-pos {
    background: var(--fn-grad);
    padding: 80px 0;
}
.fn-final-pos-box {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.fn-final-pos-box h2 {
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 16px;
}
.fn-final-pos-sub {
    font-size: 18px;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 18px;
    font-weight: 500;
}
.fn-final-pos-tag {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 26px;
}

/* ===================== Footer ===================== */
.fn-footer {
    background: #142a30;
    color: rgba(255, 255, 255, .8);
    padding: 50px 0 0;
}
.fn-footer-logo {
    width: 56px;
    margin-bottom: 16px;
}
.fn-footer p {
    font-size: 14px;
    line-height: 22px;
}
.fn-footer-contact p {
    margin-bottom: 10px;
}
.fn-footer-contact i {
    color: var(--fn-orange);
    margin-right: 8px;
    width: 18px;
}
.fn-copyright {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 30px;
    padding: 18px 0;
    text-align: center;
}
.fn-copyright p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}
.fn-copyright a {
    color: var(--fn-orange);
    text-decoration: none;
}

/* ===================== Scroll Progress ===================== */
.fn-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1200;
    background: rgba(44, 89, 100, .08);
}
.fn-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--fn-grad);
    transition: width .15s ease-out;
}
/* keyboard focus visibility */
.fn-btn:focus-visible {
    outline: 3px solid rgba(240, 136, 48, .6);
    outline-offset: 2px;
}
/* JS-driven submission (replaces the old checkbox hack) */
.fn-form-wrap.submitted .fn-lead-form { display: none; }
.fn-form-wrap.submitted .fn-thankyou { display: block; }

/* ===================== Website Plan Selector ===================== */
.fn-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
    margin: 14px auto 0;
    max-width: 1100px;
}
.fn-plans-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(44, 89, 100, .12);
    border-radius: 22px;
    padding: 40px 34px 34px;
    box-shadow: 0 10px 30px rgba(44, 89, 100, .08);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    text-align: center;
    cursor: pointer;
}
.fn-plans-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 58px rgba(44, 89, 100, .16);
    border-color: rgba(240, 136, 48, .45);
}
.fn-plans-card--featured {
    background: linear-gradient(180deg, #ffffff 0%, #fff6ec 100%);
    border: 2px solid var(--fn-orange);
    box-shadow: 0 22px 54px rgba(240, 136, 48, .22);
}
.fn-plans-card--selected {
    border: 2px solid var(--fn-orange);
    box-shadow: 0 26px 60px rgba(240, 136, 48, .28);
    transform: translateY(-6px);
}
.fn-plans-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(90deg, #F08830, #E9711B);
    padding: 6px 16px;
    border-radius: 30px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(240, 136, 48, .35);
}
.fn-plans-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--fn-dark);
    margin-bottom: 8px;
}
.fn-plan-price { font-weight: 900; color: var(--fn-dark); line-height: 1; margin: 4px 0; }
.fn-plans-card .fn-plan-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    margin: 4px 0;
}
.fn-plan-price .fn-rupee { color: var(--fn-orange); vertical-align: baseline; }
.fn-plans-card .fn-plan-price .fn-rupee {
    font-size: 34px;
    line-height: 1;
    vertical-align: baseline;
}
.fn-plans-card .fn-plan-price .fn-amount {
    font-size: 52px;
    letter-spacing: -1px;
    line-height: 1;
}
.fn-plans-sub {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--fn-muted);
    margin-bottom: 18px;
}
.fn-plans-value {
    font-size: 14px;
    color: #5a6b72;
    line-height: 22px;
    min-height: 44px;
    margin-bottom: 20px;
}
.fn-plans-feature-head {
    font-size: 13px;
    font-weight: 700;
    color: var(--fn-orange);
    text-align: left;
    margin: 6px 0 4px;
}
.fn-plans-card .fn-feature-list {
    text-align: left;
    margin: 0 0 24px;
    padding-top: 20px;
    border-top: 1px dashed rgba(44, 89, 100, .16);
    flex-grow: 1;
    list-style: none;
}
.fn-plans-card .fn-feature-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 21px;
    color: #3f5159;
    padding: 6px 0;
}
.fn-plans-card .fn-feature-list li i {
    position: static;
    color: var(--fn-orange);
    font-size: 15px;
    line-height: 21px;
    width: 18px;
    flex-shrink: 0;
    text-align: center;
}
.fn-plans-card .fn-feature-preview { margin-bottom: 0; }
.fn-plans-extra {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease;
}
.fn-plans-card.is-open .fn-plans-extra { max-height: 1400px; }
.fn-plans-extra .fn-feature-list { margin: 0 0 20px; padding-top: 12px; flex-grow: 0; }
.fn-plans-toggle {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px auto 18px;
    background: none;
    border: none;
    color: var(--fn-orange);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
}
.fn-plans-toggle i { font-size: 12px; transition: transform .3s ease; }
.fn-plans-card.is-open .fn-plans-toggle i { transform: rotate(180deg); }

/* Custom plan — detailed, chart-style full-width card */
.fn-custom-plan-wrap { margin-top: 26px; }
.fn-custom-plan-card {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
    padding: 30px 32px;
}
.fn-custom-plan-card .fn-plans-name { margin-bottom: 6px; }
.fn-custom-plan-card .fn-plans-sub { margin-bottom: 12px; }
.fn-custom-plan-card .fn-plans-value { min-height: 0; margin-bottom: 14px; }
.fn-custom-combined {
    columns: 2;
    column-gap: 32px;
    border-top: none;
    padding-top: 0;
    margin-bottom: 2px;
}
.fn-custom-combined li { break-inside: avoid; }
.fn-custom-plan-card .fn-plans-extra .fn-custom-combined {
    border-top: 1px dashed rgba(44, 89, 100, .16);
    padding-top: 14px;
    margin-top: 2px;
}
.fn-custom-plan-card .fn-plans-toggle { margin-bottom: 14px; }
.fn-custom-plan-card .fn-plans-choose { max-width: none; margin-top: 4px; }

/* ===================== Industries We Serve ===================== */
.fn-industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 12px;
}
.fn-industry-tile {
    background: #ffffff;
    border: 1px solid rgba(44, 89, 100, .12);
    border-radius: 16px;
    padding: 26px 18px;
    text-align: center;
    box-shadow: 0 10px 24px rgba(44, 89, 100, .08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.fn-industry-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(44, 89, 100, .16);
    border-color: rgba(240, 136, 48, .45);
}
.fn-industry-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, #2C5964, #3f7a87);
    box-shadow: 0 8px 18px rgba(44, 89, 100, .2);
}
.fn-industry-tile-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--fn-dark);
    line-height: 1.35;
}

.fn-plans-choose {
    margin-top: auto;
    display: block;
    padding: 13px 18px;
    background: linear-gradient(90deg, #F08830, #E9711B);
    color: #ffffff;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: 0 12px 24px rgba(240, 136, 48, .28);
    transition: transform .25s ease, box-shadow .25s ease;
}
.fn-plans-card:hover .fn-plans-choose {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(240, 136, 48, .36);
}
.fn-plans-check {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fn-orange);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 8px 16px rgba(240, 136, 48, .35);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .25s ease, transform .25s ease;
}
.fn-plans-card--selected .fn-plans-check {
    opacity: 1;
    transform: scale(1);
}
.fn-plans-actions {
    text-align: center;
    margin-top: 44px;
}
.fn-plans-actions .fn-btn { min-width: 280px; }
#fnPlanContinue.is-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Selected plan summary (inside lead form) */
.fn-selected-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--fn-grad-soft);
    border: 1px solid rgba(44, 89, 100, .16);
    border-left: 4px solid var(--fn-orange);
    border-radius: 14px;
    padding: 16px 22px;
    margin: 6px 0 26px;
}
.fn-selected-plan-info { display: flex; flex-direction: column; gap: 2px; }
.fn-selected-plan-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fn-orange);
}
.fn-selected-plan-name { font-size: 17px; color: var(--fn-dark); }
.fn-selected-plan-meta { font-size: 14px; color: var(--fn-muted); }
.fn-selected-plan-change {
    font-size: 14px;
    font-weight: 600;
    color: var(--fn-dark);
    text-decoration: underline;
    white-space: nowrap;
}
.fn-custom-fields { margin-bottom: 18px; }

/* ===================== Responsive ===================== */
@media (max-width: 991.98px) {
    .fn-plans-grid { grid-template-columns: repeat(3, 1fr); }
    .fn-plans-card { padding: 32px 22px 28px; }
    .fn-plans-card .fn-plan-price .fn-amount { font-size: 46px; }
    .fn-hero-title { font-size: 38px; }
    .fn-industry-grid { grid-template-columns: repeat(2, 1fr); }
    .fn-industries-grid { grid-template-columns: repeat(3, 1fr); }
    .fn-journey-arrow { transform: rotate(90deg); }
}
@media (max-width: 767.98px) {
    .fn-section { padding: 50px 0; }
    .fn-hero { padding: 50px 0 60px; }
    .fn-hero-title { font-size: 32px; }
    .fn-hero-sub { font-size: 19px; }
    .fn-hero-cta .fn-btn { width: 100%; text-align: center; }
    .fn-industry-grid { grid-template-columns: 1fr; }
    .fn-industries-grid { grid-template-columns: repeat(2, 1fr); }
    .fn-offer-box { padding: 40px 24px; }
    .fn-offer-price .fn-amount { font-size: 56px; }
    .fn-form-wrap { padding: 30px 22px; }
    .fn-journey-step { max-width: 100%; }
    .fn-final-pos-box h2 { font-size: 26px; }

    .fn-plans-grid { grid-template-columns: 1fr; gap: 22px; max-width: 460px; }
    .fn-plans-card { padding: 34px 24px 28px; }
    .fn-plans-name { font-size: 20px; }
    .fn-plans-card .fn-plan-price .fn-amount { font-size: 46px; }
    .fn-plans-actions .fn-btn { min-width: 0; width: 100%; }
    .fn-custom-plan-card { padding: 30px 22px; }
    .fn-custom-combined { columns: 1; }
}
@media (max-width: 575.98px) {
    .fn-topbar-cta { display: none; }
    .fn-section-header h2 { font-size: 26px; }

    .fn-plans-card { padding: 30px 20px 26px; }
    .fn-plans-card .fn-plan-price .fn-rupee { font-size: 22px; }
    .fn-plans-card .fn-plan-price .fn-amount { font-size: 42px; }
    .fn-plans-actions .fn-btn { width: 100%; }
}
.fn-padding-fix{
    padding-bottom: 10px;
}








/* All rules are scoped under .dlp-wrapper and every class is prefixed
   with "dlp-" so this stylesheet cannot leak into or clash with the
   rest of the page it gets dropped into. Nothing here touches body,
   html, or any un-prefixed element/class selector. */

.dlp-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Poppins', 'Hind Siliguri', sans-serif;
}

.dlp-wrapper * {
  box-sizing: border-box;
}

.dlp-wrapper .dlp-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  text-align: center;
}

.dlp-wrapper .dlp-price {
  font-size: 31px;
  font-weight: 800;
  color: #2C5964;
  margin: 0;
}

.dlp-wrapper .dlp-package-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #2C5964;
  margin: 4px 0 28px;
}

.dlp-wrapper .dlp-features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  text-align: left;
}

.dlp-wrapper .dlp-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #213546;
  font-size: 15px;
  margin-bottom: 16px;
}

.dlp-wrapper .dlp-tick {
  color: #F08830;
  font-weight: bold;
}

.dlp-wrapper .dlp-form-area {
  position: relative;
  overflow: hidden;
  transition: height 0.4s ease;
}

.dlp-wrapper .dlp-thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 0 4px;
}

.dlp-wrapper .dlp-thankyou-title {
  color: #2C5964;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
}

.dlp-wrapper .dlp-thankyou-msg {
  color: #213546;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dlp-wrapper .dlp-form-group {
  text-align: left;
  margin-bottom: 16px;
}

.dlp-wrapper .dlp-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2C5964;
  margin-bottom: 6px;
}

.dlp-wrapper .dlp-form-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8dee3;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.dlp-wrapper .dlp-form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8dee3;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
}

.dlp-wrapper .dlp-form-group input:focus,
.dlp-wrapper .dlp-form-group textarea:focus {
  border-color: #F08830;
}

.dlp-wrapper .dlp-cta-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #F08830, #2C5964);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dlp-wrapper .dlp-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(240, 136, 48, 0.35);
}

.dlp-wrapper .dlp-error-msg {
  color: #c0392b;
  font-size: 13px;
  margin: -6px 0 10px;
  min-height: 16px;
}