/* ==========================================================================
   DIGNALS CAPITAL — Master Stylesheet
   ==========================================================================
   Table of Contents:
   1.  Variables (colors, fonts, layout)
   2.  Base reset + body
   3.  Grain overlay
   4.  Animated background shapes (sacred geometry)
   5.  Top market ticker
   6.  Navigation
   7.  Buttons
   8.  Accent text (navy glow)
   9.  Section + headings
   10. Hero (centered text layout)
   11. Hero cities/badge pill
   12. Why Dignals (4-up grid)
   13. Pillars grid (Vision page)
   14. Vision philosophy quote
   15. Evolution rows (daily ritual)
   16. Services grid (instrument cards)
   17. Service card success rate
   18. Stats strip
   19. Plans (pricing)
   20. Contact form
   21. CTA block
   22. Bottom looping strip
   23. Footer
   24. Reveal animations
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Background — pure obsidian */
  --obsidian: #07070a;
  --carbon: #0e0f14;
  --carbon-card: #181a22;

  /* Text */
  --white: #f5f7fa;
  --white-soft: #e4e8ef;
  --white-dim: #9ba3b5;
  --white-mute: #6b7385;

  /* Navy glow (primary accent — used on text, buttons, highlights) */
  --navy-deep: #1e3a8a;
  --navy: #2d5bd1;
  --navy-glow: #4f7cdb;
  --navy-bright: #6fa8ff;

  /* Tiny accents */
  --gold: #c9a24b;
  --emerald: #3fb587;
  --crimson: #e0606b;

  /* Fonts */
  --display: "Archivo", sans-serif;
  --body: "Archivo", sans-serif;
  --mono: "JetBrains Mono", monospace;

  /* Layout */
  --grid-max: 1320px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --ticker-h: 38px;
}

/* ==========================================================================
   2. BASE RESET + BODY
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  color: var(--white);
}

body {
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: var(--obsidian);
  min-height: 100vh;
}

::selection {
  background: var(--navy-glow);
  color: var(--white);
}

/* ==========================================================================
   3. GRAIN OVERLAY
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.62  0 0 0 0 0.78  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 100;
}

@keyframes spin-cw {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin-ccw {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes pulse-fade {
  0%,
  100% {
    opacity: 0.08;
  }
  50% {
    opacity: 0.18;
  }
}
@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(24px, -18px) rotate(60deg);
  }
}
@keyframes drift-2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(-18px, 22px) rotate(-45deg);
  }
}

/* Ensure all content sits above shapes */
.ticker,
.nav,
main,
section,
footer,
.bottom-strip {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   5. TOP MARKET TICKER
   ========================================================================== */
.ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ticker-h);
  background: linear-gradient(180deg, #d4af37 100%);
  border-bottom: 1px solid rgba(120, 90, 30, 0.5);
  box-shadow: 0 0 24px rgba(201, 162, 75, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 60;
}
.ticker__label {
  flex: 0 0 auto;
  height: 100%;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gold);
  color: var(--obsidian);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
}
.ticker__label::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--crimson);
  border-radius: 50%;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

.ticker__track {
  flex: 1;
  overflow: hidden;
}
.ticker__row {
  display: inline-flex;
  gap: 2.8rem;
  white-space: nowrap;
  padding-left: 2.8rem;
  animation: scroll-x 55s linear infinite;
}
@keyframes scroll-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--white-soft);
}
.ticker__item .sym {
  color: var(--white-mute);
}
.ticker__item .up {
  color: var(--emerald);
}
.ticker__item .dn {
  color: var(--crimson);
}

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */
.nav {
  position: fixed;
  top: var(--ticker-h);
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1.2rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(
    to bottom,
    rgba(14, 15, 20, 0.92),
    rgba(14, 15, 20, 0.6)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245, 247, 250, 0.05);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.nav__brand svg {
  width: 28px;
  height: 28px;
}
.nav__brand .dot {
  color: var(--gold);
}

.nav__links {
  display: flex;
  gap: 2.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav__links a {
  color: var(--white-dim);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}
.nav__links a:hover {
  color: var(--white);
}
.nav__links a.active {
  color: var(--navy-bright);
  text-shadow: 0 0 12px rgba(111, 168, 255, 0.5);
}
.nav__links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--navy-glow);
  box-shadow: 0 0 8px var(--navy-glow);
}

.nav__cta {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy-glow);
  padding: 0.7rem 1.3rem;
  text-decoration: none;
  box-shadow:
    0 0 20px rgba(79, 124, 219, 0.28),
    inset 0 0 16px rgba(111, 168, 255, 0.08);
  transition: all 0.35s ease;
}
.nav__cta:hover {
  background: var(--navy-glow);
  box-shadow:
    0 0 32px rgba(79, 124, 219, 0.55),
    0 0 60px rgba(79, 124, 219, 0.2);
}

@media (max-width: 880px) {
  .nav__links {
    display: none;
  }
}
@media (max-width: 520px) {
  .nav__cta {
    padding: 0.6rem 0.9rem;
    font-size: 0.62rem;
  }
}

.page-top {
  height: calc(var(--ticker-h) + 72px);
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */
.btn {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1rem 1.7rem;
  text-decoration: none;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn--primary {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy-glow);
  box-shadow:
    0 0 22px rgba(79, 124, 219, 0.32),
    inset 0 0 18px rgba(111, 168, 255, 0.1);
}
.btn--primary:hover {
  background: var(--navy-glow);
  border-color: var(--navy-bright);
  letter-spacing: 0.26em;
  box-shadow:
    0 0 36px rgba(79, 124, 219, 0.6),
    0 0 70px rgba(79, 124, 219, 0.25);
}
.btn--ghost {
  color: var(--white);
  background: transparent;
  border-color: rgba(245, 247, 250, 0.22);
}
.btn--ghost:hover {
  color: var(--navy-bright);
  border-color: var(--navy-glow);
  text-shadow: 0 0 12px rgba(111, 168, 255, 0.5);
}
.btn .arrow {
  transition: transform 0.3s ease;
}
.btn:hover .arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   8. ACCENT TEXT (navy glow)
   ========================================================================== */
.accent {
  color: var(--navy-bright);
  text-shadow:
    0 0 10px rgba(111, 168, 255, 0.55),
    0 0 24px rgba(79, 124, 219, 0.3),
    0 0 48px rgba(45, 91, 209, 0.15);
}

/* ==========================================================================
   9. SECTION + HEADINGS
   ========================================================================== */
.section {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 6rem var(--gutter);
  position: relative;
}
.section__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 4rem;
  align-items: end;
}
@media (max-width: 820px) {
  .section__head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.section__num {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.88rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy-bright);
  text-shadow: 0 0 12px rgba(111, 168, 255, 0.5);
  margin-bottom: 1.2rem;
}
.section__num::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--navy-glow);
  box-shadow: 0 0 6px var(--navy-glow);
}
.section__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* ==========================================================================
   10. HERO (text-centered layout)
   ========================================================================== */
.hero {
  min-height: calc(100vh - var(--ticker-h) - 72px);
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 5rem var(--gutter) 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero__eyebrow {
  font-family: var(--mono);
  font-size: 0.92rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy-bright);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 2.4rem;
  text-shadow: 0 0 12px rgba(111, 168, 255, 0.5);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--navy-glow);
  box-shadow: 0 0 6px var(--navy-glow);
}
.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--white);
  max-width: 16em;
  margin-bottom: 1.8rem;
}
.hero__lede {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--white-dim);
  max-width: 34em;
  margin: 0 auto 2.6rem;
}
.hero__lede strong {
  color: var(--white);
  font-weight: 500;
}
.hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   11. HERO CITIES / BADGE PILL
   ========================================================================== */
.hero__cities {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  margin-bottom: 2.4rem;
  background: rgba(24, 26, 34, 0.5);
  border: 1px solid rgba(79, 124, 219, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 24px rgba(79, 124, 219, 0.12),
    inset 0 0 18px rgba(79, 124, 219, 0.05);
  position: relative;
  opacity: 0;
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s forwards;
}
.hero__cities::before,
.hero__cities::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--navy-glow),
    transparent
  );
  opacity: 0.6;
  animation: cities-line 4s ease-in-out infinite;
}
.hero__cities::before {
  top: -1px;
}
.hero__cities::after {
  bottom: -1px;
  animation-delay: 2s;
}
@keyframes cities-line {
  0%,
  100% {
    opacity: 0.2;
    width: 30%;
  }
  50% {
    opacity: 0.7;
    width: 80%;
  }
}
.hero__cities__name {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 0 12px rgba(111, 168, 255, 0.45);
}
.hero__cities__dot {
  color: var(--navy-bright);
  font-size: 0.6rem;
  text-shadow: 0 0 10px var(--navy-glow);
  animation: dot-pulse 2.4s ease-in-out infinite;
}
.hero__cities__dot:nth-child(3) {
  animation-delay: 0.4s;
}
.hero__cities__dot:nth-child(5) {
  animation-delay: 0.8s;
}
.hero__cities__dot:nth-child(7) {
  animation-delay: 1.2s;
}
.hero__cities__dot:nth-child(9) {
  animation-delay: 1.6s;
}
@keyframes dot-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
@media (max-width: 540px) {
  .hero__cities {
    gap: 0.5rem;
    padding: 0.6rem 1rem;
  }
  .hero__cities__name {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
  }
}

/* ==========================================================================
   12. WHY DIGNALS (4-up grid)
   ========================================================================== */
.why {
  background: rgba(14, 15, 20, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(245, 247, 250, 0.05);
  border-bottom: 1px solid rgba(245, 247, 250, 0.05);
}
.why__grid {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 5rem var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
@media (max-width: 880px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 520px) {
  .why__grid {
    grid-template-columns: 1fr;
  }
}

.why__item h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  margin: 1rem 0 0.6rem;
}
.why__item p {
  font-size: 0.92rem;
  color: var(--white-dim);
  line-height: 1.6;
}
.why__item .ico {
  width: 32px;
  height: 32px;
  color: var(--navy-bright);
  filter: drop-shadow(0 0 6px rgba(111, 168, 255, 0.5));
}

/* ==========================================================================
   13. PILLARS GRID (Vision page — 6 cards)
   ========================================================================== */
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245, 247, 250, 0.06);
  border: 1px solid rgba(245, 247, 250, 0.06);
}
@media (max-width: 880px) {
  .pillars__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pillars__grid {
    grid-template-columns: 1fr;
  }
}

.pillar {
  background: rgba(24, 26, 34, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2.4rem 1.8rem;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}
.pillar:hover {
  background: rgba(32, 35, 46, 0.85);
  box-shadow: inset 0 0 24px rgba(79, 124, 219, 0.12);
}
.pillar__num {
  display: none;
} /* numbers (P / 01) hidden per client request */
.pillar__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1.2rem;
  color: var(--navy-bright);
  filter: drop-shadow(0 0 8px rgba(111, 168, 255, 0.5));
}
.pillar__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.pillar__desc {
  font-size: 0.9rem;
  color: var(--white-dim);
  line-height: 1.6;
  margin-top: auto;
}

/* ==========================================================================
   14. VISION PHILOSOPHY QUOTE
   ========================================================================== */
.philosophy {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(79, 124, 219, 0.1),
      transparent 50%
    ),
    rgba(14, 15, 20, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(79, 124, 219, 0.15);
  border-bottom: 1px solid rgba(79, 124, 219, 0.15);
  position: relative;
  overflow: hidden;
}
.philosophy__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 7rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 880px) {
  .philosophy__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 5rem var(--gutter);
  }
}
.quote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  padding-left: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.quote::before {
  display: none;
}
/* eyebrow inside quote — "For Traders & Investors." */
.quote__eyebrow {
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy-bright);
  text-shadow: 0 0 10px rgba(111, 168, 255, 0.45);
  margin-bottom: 1.2rem;
  display: block;
}
/* main quote heading text — no extra margin */
.quote__heading {
  display: block;
  margin-bottom: 1.8rem;
}
/* attribution — "Founder, Dignals Capital" */
.quote span {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.84rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 0;
}
.philosophy__body p {
  font-size: 1rem;
  color: var(--white-dim);
  margin-bottom: 1.2rem;
  max-width: 32em;
}
.philosophy__body p strong {
  color: var(--white);
  font-weight: 500;
}

/* ==========================================================================
   15. EVOLUTION ROWS (Daily Ritual)
   ========================================================================== */
.evolution {
  position: relative;
}
.evolution__list {
  border-top: 1px solid rgba(245, 247, 250, 0.08);
}
.evo-row {
  display: grid;
  grid-template-columns: 70px 1fr 2fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(245, 247, 250, 0.08);
  transition: background 0.3s ease;
}
.evo-row:hover {
  background: rgba(79, 124, 219, 0.04);
}
.evo-row__num {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--navy-bright);
  text-shadow: 0 0 8px rgba(111, 168, 255, 0.4);
}
.evo-row__verb {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
}
.evo-row__desc {
  font-size: 0.92rem;
  color: var(--white-dim);
  line-height: 1.55;
}
.evo-row__tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emerald);
  text-align: right;
}
@media (max-width: 820px) {
  .evo-row {
    grid-template-columns: 50px 1fr;
    gap: 1rem 1.4rem;
    padding: 1.6rem 0;
  }
  .evo-row__desc {
    grid-column: 2;
  }
  .evo-row__tag {
    grid-column: 2;
    text-align: left;
  }
}

/* ==========================================================================
   16. SERVICES GRID (instrument cards) — supports both class names
   ========================================================================== */
.ecosystem__intro,
.services__intro {
  max-width: 42em;
  font-size: 1.02rem;
  color: var(--white-dim);
  line-height: 1.65;
  margin-bottom: 3.5rem;
}

.ecosystem__grid,
.services__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.4rem;
  grid-auto-flow: dense;
}
@media (max-width: 980px) {
  .ecosystem__grid,
  .services__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .ecosystem__grid,
  .services__grid {
    grid-template-columns: 1fr;
  }
}

.eco-card {
  position: relative;
  overflow: hidden;
  background: rgba(24, 26, 34, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 247, 250, 0.07);
  padding: 2.2rem 1.8rem;
  min-height: 220px;
  transition:
    border-color 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.eco-card:hover {
  border-color: rgba(79, 124, 219, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(79, 124, 219, 0.15);
}

.eco-card--featured {
  grid-column: 1;
  grid-row: 1 / span 2;
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(111, 168, 255, 0.14),
      transparent 55%
    ),
    radial-gradient(
      circle at 20% 90%,
      rgba(79, 124, 219, 0.1),
      transparent 50%
    ),
    rgba(18, 20, 30, 0.9);
  border: 1px solid rgba(111, 168, 255, 0.3);
  box-shadow:
    0 0 40px rgba(79, 124, 219, 0.12),
    inset 0 0 30px rgba(79, 124, 219, 0.04);
}
@media (max-width: 980px) {
  .eco-card--featured {
    grid-column: auto;
    grid-row: auto;
  }
}

.eco-card__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy-bright);
  text-shadow: 0 0 8px rgba(111, 168, 255, 0.4);
  margin-bottom: 1.4rem;
}
.eco-card__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1px solid var(--navy-bright);
  transform: rotate(45deg);
}
.eco-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 0.8rem;
}
.eco-card--featured .eco-card__title {
  font-size: 2rem;
  line-height: 1.05;
}
.eco-card__desc {
  font-size: 0.92rem;
  color: var(--white-dim);
  line-height: 1.6;
}

/* Decorative corner hexagon — locked to small size in corner */
.eco-card__hex {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  opacity: 0.18;
  color: var(--navy-bright);
  pointer-events: none;
}
.eco-card__hex svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   17. SERVICE CARD SUCCESS RATE
   ========================================================================== */
.eco-card__rate {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0.4rem 0 1.2rem;
  padding-bottom: 1.2rem;
}
.eco-card__rate .accent {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
}
.eco-card--featured .eco-card__rate .accent {
  font-size: 3rem;
}
.eco-card__rate-lbl {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
}

/* ==========================================================================
   18. STATS STRIP
   ========================================================================== */
.stats {
  background: rgba(14, 15, 20, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(245, 247, 250, 0.08);
  border-bottom: 1px solid rgba(245, 247, 250, 0.08);
}
.stats__grid {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 3.5rem var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(245, 247, 250, 0.08);
}
@media (max-width: 820px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat {
  background: rgba(14, 15, 20, 0.9);
  padding: 1.4rem 1.8rem;
  text-align: center;
}
.stat__val {
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy-bright);
  text-shadow: 0 0 16px rgba(111, 168, 255, 0.4);
  margin-bottom: 0.5rem;
}
.stat__lbl {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
}

/* ==========================================================================
   19. PLANS (pricing)
   ========================================================================== */
.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .plans__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

.plan {
  background: rgba(24, 26, 34, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 247, 250, 0.08);
  padding: 2.6rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.plan:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 124, 219, 0.4);
  box-shadow: 0 0 32px rgba(79, 124, 219, 0.15);
}
.plan--featured {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(16, 185, 129, 0.13),
      transparent 60%
    ),
    rgba(24, 26, 34, 0.85);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 36px rgba(16, 185, 129, 0.22);
}
.plan__badge {
  position: absolute;
  top: -1px;
  right: 1.6rem;
  padding: 0.4rem 0.8rem;
  background: #10b981;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}
.plan__name {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy-bright);
  text-shadow: 0 0 8px rgba(111, 168, 255, 0.4);
  margin-bottom: 1.2rem;
}
.plan__duration {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.plan__sub {
  font-size: 0.84rem;
  color: var(--white-dim);
  margin-bottom: 2rem;
}
.plan__price {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #10b981;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
  margin-bottom: 0.4rem;
}
.plan__price-note {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 2rem;
}
.plan__features {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(245, 247, 250, 0.08);
  flex: 1;
}
.plan__features li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--white-dim);
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 8px;
  height: 8px;
  border: 1px solid var(--navy-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--navy-glow);
}

/* ==========================================================================
   20. CONTACT FORM
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.form-field {
  margin-bottom: 1.4rem;
}
.form-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-bright);
  text-shadow: 0 0 6px rgba(111, 168, 255, 0.35);
  margin-bottom: 0.5rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgba(24, 26, 34, 0.8);
  border: 1px solid rgba(245, 247, 250, 0.1);
  color: var(--white);
  font-family: var(--body);
  font-size: 0.95rem;
  outline: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--navy-glow);
  box-shadow: 0 0 16px rgba(79, 124, 219, 0.3);
}
.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.contact__info {
  padding-top: 0.5rem;
}
.contact__info h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy-bright);
  text-shadow: 0 0 8px rgba(111, 168, 255, 0.4);
  margin-bottom: 0.6rem;
}
.contact__info .info-row {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(245, 247, 250, 0.06);
}
.contact__info .info-row:last-child {
  border: none;
}
.contact__info .info-row p {
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 0.3rem;
}
.contact__info .info-row span {
  font-size: 0.86rem;
  color: var(--white-dim);
}

/* ==========================================================================
   21. CTA BLOCK
   ========================================================================== */
.cta-block {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 7rem var(--gutter);
  text-align: center;
  position: relative;
}
.cta-block__eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--navy-bright);
  text-shadow: 0 0 10px rgba(111, 168, 255, 0.5);
  margin-bottom: 2rem;
}
.cta-block__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--white);
  max-width: 16em;
  margin: 0 auto 1.6rem;
}
.cta-block__sub {
  font-size: 1.02rem;
  color: var(--white-dim);
  max-width: 36em;
  margin: 0 auto 2.6rem;
}

/* ==========================================================================
   22. BOTTOM LOOPING STRIP
   ========================================================================== */
.bottom-strip {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(14, 15, 20, 0.8) 0%,
    rgba(10, 11, 16, 1) 100%
  );
  border-top: 1px solid rgba(79, 124, 219, 0.2);
  border-bottom: 1px solid rgba(79, 124, 219, 0.2);
  box-shadow: 0 0 30px rgba(79, 124, 219, 0.08);
  overflow: hidden;
}
.bottom-strip::before,
.bottom-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.bottom-strip::before {
  left: 0;
  background: linear-gradient(to right, rgba(10, 11, 16, 1), transparent);
}
.bottom-strip::after {
  right: 0;
  background: linear-gradient(to left, rgba(10, 11, 16, 1), transparent);
}
.bottom-strip__track {
  position: relative;
  padding: 1.4rem 0;
  overflow: hidden;
}
.bottom-strip__row {
  display: inline-flex;
  gap: 2.4rem;
  white-space: nowrap;
  padding-left: 2.4rem;
  animation: scroll-slow 60s linear infinite;
}
@keyframes scroll-slow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.bottom-strip__item {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white);
  text-shadow: 0 0 18px rgba(79, 124, 219, 0.35);
}
.bottom-strip__dot {
  display: inline-flex;
  align-items: center;
  color: var(--navy-bright);
  font-size: 1rem;
  text-shadow: 0 0 12px rgba(111, 168, 255, 0.7);
}
@media (max-width: 720px) {
  .bottom-strip__item {
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   23. FOOTER
   ========================================================================== */
.footer {
  background: rgba(10, 11, 16, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(245, 247, 250, 0.08);
  padding: 4rem var(--gutter) 2rem;
}
.footer__inner {
  max-width: var(--grid-max);
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 820px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 540px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }
}

.footer__brand {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1rem;
}
.footer__brand .dot {
  color: var(--gold);
}
.footer__tag {
  font-size: 0.92rem;
  color: var(--white-dim);
  line-height: 1.6;
  max-width: 24em;
}
.footer__col h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-bright);
  text-shadow: 0 0 8px rgba(111, 168, 255, 0.4);
  margin-bottom: 1.2rem;
}
.footer__col a {
  display: block;
  font-size: 0.9rem;
  color: var(--white-dim);
  text-decoration: none;
  margin-bottom: 0.6rem;
  transition: color 0.3s ease;
}
.footer__col a:hover {
  color: var(--white);
}

.footer__bottom {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 247, 250, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-mute);
}
@media (max-width: 600px) {
  .footer__bottom {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }
}

/* ==========================================================================
   24. REVEAL ANIMATIONS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(2) {
  transition-delay: 0.1s;
}
.reveal:nth-child(3) {
  transition-delay: 0.2s;
}
.reveal:nth-child(4) {
  transition-delay: 0.3s;
}
.reveal:nth-child(5) {
  transition-delay: 0.4s;
}

.hero__eyebrow,
.hero__title,
.hero__lede,
.hero__ctas {
  opacity: 0;
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero__title {
  animation-delay: 0.15s;
}
.hero__lede {
  animation-delay: 0.3s;
}
.hero__ctas {
  animation-delay: 0.45s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   25. "WHAT'S INCLUDED" 6-CARD GRID (Services page)
   ========================================================================== */
.included__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .included__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .included__grid {
    grid-template-columns: 1fr;
  }
}

.included__card {
  background: rgba(24, 26, 34, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 247, 250, 0.07);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition:
    border-color 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.included__card:hover {
  border-color: rgba(79, 124, 219, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(79, 124, 219, 0.12);
}
.included__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 124, 219, 0.1);
  border: 1px solid rgba(79, 124, 219, 0.3);
  color: var(--navy-bright);
  margin-bottom: 0.4rem;
}
.included__icon svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 6px rgba(111, 168, 255, 0.5));
}
.included__title {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--white);
}
.included__desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--white-dim);
}
/* ==========================================================================
   26. PLAN PRICE — STRIKETHROUGH + DISCOUNT BADGE
   ========================================================================== */
.plan__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem 0.9rem;
  margin-bottom: 0.4rem;
}
.plan__price-strike {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--white-mute);
  text-decoration: line-through;
  text-decoration-color: rgba(224, 96, 107, 0.7);
  text-decoration-thickness: 2px;
  letter-spacing: -0.01em;
}
.plan__price-discount {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emerald);
  background: rgba(63, 181, 135, 0.12);
  border: 1px solid rgba(63, 181, 135, 0.4);
  padding: 0.28rem 0.6rem;
  text-shadow: 0 0 8px rgba(63, 181, 135, 0.5);
  box-shadow: 0 0 14px rgba(63, 181, 135, 0.15);
}

/* ==========================================================================
   27. PLAN COUNTDOWN TIMER
   ========================================================================== */
.plan__timer {
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  background: rgba(224, 96, 107, 0.06);
  border: 1px solid rgba(224, 96, 107, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  overflow: hidden;
}
.plan__timer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(224, 96, 107, 0.08),
    transparent
  );
  animation: timer-sweep 3s linear infinite;
}
@keyframes timer-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.plan__timer-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--crimson);
  position: relative;
  z-index: 1;
}
.plan__timer-value {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--white);
  text-shadow: 0 0 12px rgba(224, 96, 107, 0.4);
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}
.plan__timer-sep {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--white-dim);
  margin-right: 0.4rem;
  margin-left: 0.05rem;
}
.plan__timer-sep:last-child {
  margin-right: 0;
}

/* ==========================================================================
   28. CONTACT CARDS (About page)
   ========================================================================== */
.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .contact-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .contact-card-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: rgba(24, 26, 34, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 247, 250, 0.07);
  padding: 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  text-decoration: none;
  transition:
    border-color 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.contact-card:hover {
  border-color: rgba(79, 124, 219, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 0 28px rgba(79, 124, 219, 0.18);
}
.contact-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 124, 219, 0.1);
  border: 1px solid rgba(79, 124, 219, 0.3);
  color: var(--navy-bright);
  margin-bottom: 0.4rem;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.contact-card__icon svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 6px rgba(111, 168, 255, 0.5));
}
.contact-card:hover .contact-card__icon {
  background: rgba(79, 124, 219, 0.2);
  box-shadow: 0 0 18px rgba(79, 124, 219, 0.3);
}
.contact-card__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.contact-card__value {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--white);
  word-break: break-word;
}
/* ==========================================================================
   29. INSTRUMENTS LIST (inside Indian Market featured card)
   ========================================================================== */
.instruments-list {
  margin-top: 0.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(245, 247, 250, 0.08);
}
.instruments-list__heading {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 1rem;
}
.instruments-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.2rem;
}
.instruments-list__items li {
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--white);
  line-height: 1.4;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}
.instruments-list__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 7px;
  height: 7px;
  border: 1px solid var(--navy-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--navy-glow);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.instruments-list__items li:hover {
  color: var(--navy-bright);
  transform: translateX(2px);
  text-shadow: 0 0 10px rgba(111, 168, 255, 0.4);
}
.instruments-list__items li:hover::before {
  background: var(--navy-bright);
  box-shadow: 0 0 12px var(--navy-glow);
}

/* On narrow screens, fall back to single column */
@media (max-width: 520px) {
  .instruments-list__items {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   30. PLAN BADGE — "BEST SELLER" VARIANT (emerald)
   ========================================================================== */
.plan__badge--alt {
  background: var(--emerald);
  color: var(--obsidian);
  box-shadow: 0 4px 12px rgba(63, 181, 135, 0.4);
}

/* ==========================================================================
   31. CLIENT REQUEST: GLOBAL CENTERED ALIGNMENT + BIGGER TYPE
   ========================================================================== */

/* Hide all section numbering (extra safety) */
.section__num {
  display: none !important;
}
.section__num::before {
  display: none !important;
}

/* Section heads: stack centrally instead of 2-column grid */
.section__head {
  grid-template-columns: 1fr !important;
  text-align: center;
  justify-items: center;
  margin-bottom: 3.5rem;
}
.section__title {
  text-align: center;
  margin: 0 auto;
}

/* PILLAR CARDS (Vision page) - centered text */
.pillar {
  text-align: center;
  align-items: center;
}
.pillar__icon {
  margin-left: auto;
  margin-right: auto;
}
.pillar__title {
  font-size: 1.35rem;
}
.pillar__desc {
  font-size: 1rem;
}

/* ECO CARDS (Services page) - centered text */
.eco-card {
  text-align: center;
  align-items: center;
}
.eco-card__label {
  justify-content: center;
}
.eco-card__title {
  font-size: 1.7rem;
}
.eco-card--featured .eco-card__title {
  font-size: 2.3rem;
}
.eco-card__desc {
  font-size: 1.02rem;
}
.eco-card__rate {
  justify-content: center;
}

/* INCLUDED CARDS (What's included) - centered */
.included__card {
  text-align: center;
  align-items: center;
}
.included__icon {
  margin-left: auto;
  margin-right: auto;
}
.included__title {
  font-size: 1.1rem;
}
.included__desc {
  font-size: 0.96rem;
}

/* INSTRUMENTS LIST (inside Indian Market card) - center the bullets */
.instruments-list__heading {
  text-align: center;
}
.instruments-list__items {
  justify-items: start;
  max-width: 280px;
  margin: 0 auto;
}

/* EVOLUTION ROWS - center the verbs and descriptions */
.evo-row {
  grid-template-columns: 1fr;
  gap: 0.4rem;
  text-align: center;
  justify-items: center;
  padding: 2.4rem 0;
}
.evo-row__num {
  font-size: 0.85rem;
}
.evo-row__verb {
  font-size: 1.8rem;
}
.evo-row__desc {
  font-size: 1.05rem;
  max-width: 44em;
}
.evo-row__tag {
  text-align: center;
}

/* PLAN CARDS - keep centered */
.plan {
  text-align: center;
  align-items: center;
}
.plan__name {
  width: 100%;
}
.plan__duration {
  font-size: 2rem;
}
.plan__sub {
  font-size: 0.92rem;
}
.plan__price {
  font-size: 2.8rem;
}
.plan__features li {
  text-align: left;
} /* lists read better left */

/* CONTACT CARDS - already centered, just bump text */
.contact-card__value {
  font-size: 1.04rem;
}
.contact-card__label {
  font-size: 0.66rem;
}

/* WHY DIGNALS items - already kinda centered, polish */
.why__item {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.why__item .ico {
  margin-left: auto;
  margin-right: auto;
}
.why__item h3 {
  font-size: 1.25rem;
}
.why__item p {
  font-size: 1rem;
}

/* HERO LEDE - slightly bigger */
.hero__lede {
  font-size: 1.2rem;
  max-width: 38em;
}

/* SECTION TITLE - slightly bigger */
.section__title {
  font-size: clamp(2.1rem, 4.5vw, 3.6rem) !important;
}

/* CTA block - bigger sub */
.cta-block__sub {
  font-size: 1.1rem;
}

/* Reduce big empty section padding so content fills more */
.section {
  padding: 5rem var(--gutter);
}
.philosophy__inner {
  padding: 6rem var(--gutter);
}
.cta-block {
  padding: 6rem var(--gutter);
}

/* PHILOSOPHY (Vision quote) - center it instead of 2-column */
.philosophy__inner {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  gap: 3rem;
}
.quote {
  padding-left: 0;
  padding-top: 2rem;
  text-align: center;
}
.quote::before {
  left: 50%;
  top: 0;
  bottom: auto;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--navy-bright),
    transparent
  );
}
.philosophy__body p {
  margin-left: auto;
  margin-right: auto;
}

/* Body needs relative so absolute child positions correctly */
html,
body {
  position: relative;
}
/* ==========================================================================
   33. RESTORE PLANS + SERVICES ORIGINAL ALIGNMENT
   ========================================================================== */

/* PLAN CARDS — back to left-aligned, badges anchored top-right */
.plan {
  text-align: left;
  align-items: stretch;
}
.plan__badge {
  position: absolute !important;
  top: -1px !important;
  right: 1.6rem !important;
  left: auto !important;
}

/* ECO CARDS — back to left-aligned */
.eco-card {
  text-align: left;
  align-items: stretch;
}
.eco-card__label {
  justify-content: flex-start;
}
.eco-card__rate {
  justify-content: flex-start;
}

/* INSTRUMENTS LIST — give it proper width again so items don't wrap */
.instruments-list__heading {
  text-align: left;
}
.instruments-list__items {
  justify-items: start;
  max-width: 100%;
  margin: 0;
}
/* Center the services intro paragraph (under "Global market, one system") */
.ecosystem__intro,
.services__intro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* ==========================================================================
   34. RESTORE EVO ROWS — original 4-col layout, slightly larger
   ========================================================================== */
.evo-row {
  display: grid;
  grid-template-columns: 90px 1.2fr 2.5fr 1fr;
  gap: 2.4rem;
  text-align: left;
  justify-items: stretch;
  padding: 2.4rem 0;
  align-items: center;
}
.evo-row__num {
  font-size: 0.95rem;
  text-align: left;
}
.evo-row__verb {
  font-size: 1.9rem;
  text-align: left;
}
.evo-row__desc {
  font-size: 1.05rem;
  text-align: left;
  max-width: none;
}
.evo-row__tag {
  text-align: right;
  font-size: 0.78rem;
}
@media (max-width: 820px) {
  .evo-row {
    grid-template-columns: 60px 1fr;
    gap: 1rem 1.4rem;
    padding: 1.8rem 0;
  }
  .evo-row__desc {
    grid-column: 2;
  }
  .evo-row__tag {
    grid-column: 2;
    text-align: left;
  }
}
/* ==========================================================================
   35. EVOLUTION WORD — tilted arrow above final "n"
   ========================================================================== */
.evolution-n {
  position: relative;
  display: inline-block;
}
.evolution-arrow {
  position: absolute;
  top: -1em;
  right: -0.3em;
  width: 0.32em;
  height: 0.32em;
  color: var(--navy-bright);
  filter: drop-shadow(0 0 6px rgba(111, 168, 255, 0.7));
  animation: arrow-float 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes arrow-float {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(2px, -3px);
  }
}
/* Center footer copyright line (after removing city names) */
.footer__bottom {
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   39. TRIAL FORM PAGE
   ========================================================================== */
.trial {
  max-width: 740px;
  margin: 0 auto;
  padding: 4rem var(--gutter) 6rem;
  position: relative;
  z-index: 1;
}
.trial__head {
  text-align: center;
  margin-bottom: 3rem;
}
.trial__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 1rem 0 1.2rem;
}
.trial__lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--white-dim);
  max-width: 32em;
  margin: 0 auto;
}

/* The form "card" — frosted glass container */
.trial__card {
  background: rgba(24, 26, 34, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 247, 250, 0.08);
  padding: 2.6rem;
  box-shadow:
    0 0 36px rgba(79, 124, 219, 0.08),
    inset 0 0 24px rgba(79, 124, 219, 0.03);
}
@media (max-width: 540px) {
  .trial__card {
    padding: 1.8rem 1.4rem;
  }
}

.trial__form {
  display: flex;
  flex-direction: column;
}
.trial__row {
  margin-bottom: 1.4rem;
}
.trial__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 480px) {
  .trial__row--two {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.trial__row .form-field {
  margin-bottom: 0;
}

/* Honeypot — fully hidden from humans, visible to bots */
.trial__honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.trial__legal {
  font-size: 0.78rem;
  color: var(--white-mute);
  line-height: 1.55;
  margin: 0.6rem 0 1.8rem;
  text-align: center;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

.trial__submit {
  width: 100%;
  justify-content: center;
  font-size: 0.82rem;
  padding: 1.15rem 1.4rem;
}
.trial__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Style native date inputs to match dark theme */
.trial input[type="date"] {
  color-scheme: dark;
  font-family: var(--body);
}
.trial input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(2) hue-rotate(180deg) brightness(1.1);
  cursor: pointer;
}

/* Success state — shown after submit */
.trial__success {
  text-align: center;
  padding: 1.5rem 0;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.trial__success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.4rem;
  color: var(--emerald);
  filter: drop-shadow(0 0 16px rgba(63, 181, 135, 0.6));
}
.trial__success-icon svg {
  width: 100%;
  height: 100%;
}
.trial__success-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1rem;
}
.trial__success-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--white-dim);
  max-width: 32em;
  margin: 0 auto;
}

/* ==========================================================================
   40. TAGLINE STRIP — Looping marquee (replaces old bottom-strip)
   ========================================================================== */
.tagline-strip {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(14, 15, 20, 0.8) 0%,
    rgba(10, 11, 16, 1) 100%
  );
  border-top: 1px solid rgba(79, 124, 219, 0.2);
  border-bottom: 1px solid rgba(79, 124, 219, 0.2);
  box-shadow: 0 0 30px rgba(79, 124, 219, 0.08);
  overflow: hidden;
}
.tagline-strip::before,
.tagline-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.tagline-strip::before {
  left: 0;
  background: linear-gradient(to right, rgba(10, 11, 16, 1), transparent);
}
.tagline-strip::after {
  right: 0;
  background: linear-gradient(to left, rgba(10, 11, 16, 1), transparent);
}
.tagline-strip__track {
  position: relative;
  padding: 1.4rem 0;
  overflow: hidden;
}
.tagline-strip__row {
  display: inline-flex;
  gap: 2.4rem;
  white-space: nowrap;
  padding-left: 2.4rem;
  animation: tagline-scroll 240s linear infinite;
}
@keyframes tagline-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.tagline-strip__text {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
  text-shadow: 0 0 18px rgba(79, 124, 219, 0.35);
}
.tagline-strip__dot {
  display: inline-flex;
  align-items: center;
  color: var(--navy-bright);
  font-size: 1rem;
  text-shadow: 0 0 12px rgba(111, 168, 255, 0.7);
}
@media (max-width: 720px) {
  .tagline-strip__text {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   41. CLIENT REQUEST V3: HERO ONE-LINE HEADLINE
   ========================================================================== */
.hero__title--oneline {
  white-space: nowrap;
  font-size: clamp(1.4rem, 4.8vw, 4rem);
  letter-spacing: -0.025em;
}
@media (max-width: 880px) {
  .hero__title--oneline {
    white-space: normal;
    font-size: clamp(2rem, 7vw, 3.5rem);
  }
}

/* ==========================================================================
   42. CLIENT REQUEST V3: TWO-LINE BUTTONS (Get Full Access ₹9 / For 6 Days Only)
   ========================================================================== */

/* Primary / Ghost two-line buttons */
.btn--twoline {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.95rem 1.6rem !important;
  line-height: 1.15;
  position: relative;
}
.btn--twoline .btn__top {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.btn--twoline .btn__bottom {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white-soft);
  opacity: 0.85;
}
.btn--twoline .arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.btn--twoline.btn--ghost .btn__top {
  color: var(--white);
}
.btn--twoline.btn--ghost .btn__bottom {
  color: var(--white-dim);
}

@media (max-width: 480px) {
  .btn--twoline .btn__top {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
  .btn--twoline .btn__bottom {
    font-size: 0.58rem;
    letter-spacing: 0.24em;
  }
  .btn--twoline .arrow {
    display: none;
  }
}

/* Nav CTA two-line variant */
.nav__cta--twoline {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.55rem 1.1rem !important;
  line-height: 1.1;
  text-align: center;
}
.nav__cta--twoline .nav__cta__top {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.nav__cta--twoline .nav__cta__bottom {
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white-soft);
  opacity: 0.85;
}
@media (max-width: 540px) {
  .nav__cta--twoline {
    padding: 0.45rem 0.7rem !important;
  }
  .nav__cta--twoline .nav__cta__top {
    font-size: 0.54rem;
    letter-spacing: 0.1em;
  }
  .nav__cta--twoline .nav__cta__bottom {
    font-size: 0.46rem;
    letter-spacing: 0.18em;
  }
}

/* ==========================================================================
   44. CLIENT REQUEST V3: TICKER — names-only variant
   ========================================================================== */
.ticker--names {
  padding: 0;
}
.ticker--names .ticker__row {
  animation-duration: 180s; /* adjusted for ~236 items */
  gap: 3rem;
}
.ticker--names .ticker__item {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--obsidian);
  text-transform: uppercase;
}
.ticker--names .sym {
  color: var(--obsidian);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   45. CLIENT REQUEST V3: INSTRUMENTS LIST — single column variant
   ========================================================================== */
.instruments-list__items--single {
  grid-template-columns: 1fr !important;
}

/* ==========================================================================
   46. CLIENT REQUEST V3: PLANS PAGE — ₹9 TRIAL BANNER
   ========================================================================== */
.plans__trial-banner {
  margin: 2.4rem auto 0;
  max-width: 900px;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.4rem 2.4rem;
  background: linear-gradient(
    135deg,
    rgba(79, 124, 219, 0.12),
    rgba(63, 181, 135, 0.08)
  );
  border: 1px solid rgba(79, 124, 219, 0.35);
  box-shadow:
    0 0 24px rgba(79, 124, 219, 0.18),
    inset 0 0 18px rgba(79, 124, 219, 0.06);
  position: relative;
  overflow: hidden;
}
.plans__trial-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(79, 124, 219, 0.1),
    transparent
  );
  animation: trial-banner-sweep 4s linear infinite;
}
@keyframes trial-banner-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.plans__trial-banner > * {
  position: relative;
  z-index: 1;
}
.plans__trial-banner__label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-bright);
  background: rgba(79, 124, 219, 0.18);
  padding: 0.4rem 0.9rem;
}
.plans__trial-banner__text {
  font-size: 1.1rem;
  color: var(--white-soft);
}
.plans__trial-banner__cta {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy-glow);
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 0 14px rgba(79, 124, 219, 0.3);
  transition: all 0.3s ease;
}
.plans__trial-banner__cta:hover {
  background: var(--navy-glow);
  letter-spacing: 0.22em;
}
/* ==========================================================================
   49. CLIENT REQUEST V3: CENTER CONTENT INSIDE PLAN + ECO CARDS
   (boxes stay where they are — only inner content gets centered)
   ========================================================================== */

/* SERVICES CARDS — center inner content */
.eco-card {
  text-align: center !important;
  align-items: center !important;
}
.eco-card__rate {
  justify-content: center !important;
}
.eco-card__rate::after,
.eco-card__rate::before {
  margin-left: auto;
  margin-right: auto;
}

/* The instruments list inside the Indian Market card */
.instruments-list__heading {
  text-align: center !important;
}
.instruments-list__items--single {
  display: inline-block !important;
  text-align: left; /* keep bullets aligned within the list */
  margin: 0 auto !important;
}
.instruments-list {
  text-align: center; /* center the whole list block within the card */
}

/* PLANS CARDS — center inner content */
.plan {
  text-align: center !important;
  align-items: center !important;
}
.plan__price-row {
  justify-content: center !important;
}
.plan__features {
  display: inline-block;
  text-align: left; /* bullets still read better left-aligned within the list */
  margin: 0 auto 2rem !important;
}
.plan__badge {
  /* keep top-right anchor for badges, don't recenter */
  left: auto !important;
  right: 1.6rem !important;
}
.plan .btn,
.plan__timer {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   51. CLIENT REQUEST V4 + V5 — comprehensive overrides
   (Append at end so these win over any earlier rules)
   ========================================================================== */

/* ---- BIG ₹9 buttons ---- */
.btn--ninerupee {
  position: relative;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  padding: 1.3rem 2.4rem !important;
  margin-bottom: 2.4rem !important;
  min-width: 280px;
  justify-content: center;
}
.btn--ninerupee .btn__line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.btn--ninerupee .btn__rupee {
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}
.btn--primary.btn--ninerupee .btn__rupee {
  color: #fff;
}
.btn--ninerupee::after {
  content: "For 6 Days Only";
  position: absolute;
  left: 50%;
  bottom: -1.8rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--white-dim);
  opacity: 0.85;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .btn--ninerupee {
    font-size: 0.78rem !important;
    padding: 1.1rem 1.6rem !important;
    min-width: 220px;
  }
  .btn--ninerupee::after {
    font-size: 0.56rem;
    letter-spacing: 0.26em;
  }
}
.hero__ctas .btn--ninerupee {
  font-size: 1.05rem !important;
  padding: 1.55rem 3rem !important;
  min-width: 320px;
}
.hero__ctas {
  justify-content: center;
}

/* ---- Infinity SVG icon ---- */
.stat__val--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  color: var(--navy-bright);
  filter: drop-shadow(0 0 16px rgba(111, 168, 255, 0.4));
}
.stat__val--icon svg {
  width: 72px;
  height: auto;
}

/* ---- Services: cards stay LEFT-aligned, instruments list in 2-col grid ---- */
.eco-card {
  text-align: left !important;
  align-items: stretch !important;
}
.eco-card__rate {
  justify-content: flex-start !important;
}
.eco-card__label {
  justify-content: flex-start !important;
}
.instruments-list__heading {
  text-align: left !important;
}
.instruments-list__items--grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(var(--rows, 4), auto) !important;
  gap: 0.75rem 1.8rem !important;
  margin: 0 !important;
}
.instruments-list__items--grid li {
  font-size: 0.95rem !important;
  padding-left: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.instruments-list__items--grid li::before {
  top: 0.5rem !important;
  width: 8px !important;
  height: 8px !important;
}
.instruments-list {
  text-align: left !important;
  margin-bottom: 1.6rem;
}
@media (max-width: 600px) {
  .instruments-list__items--grid {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-template-rows: none !important;
  }
}

/* Plans cards stay LEFT-aligned */
.plan {
  text-align: left !important;
  align-items: stretch !important;
}
.plan__price-row {
  justify-content: flex-start !important;
}
.plan__features {
  display: block !important;
  text-align: left !important;
  margin: 0 0 2rem !important;
}
.plan .btn,
.plan__timer {
  margin-left: 0;
  margin-right: 0;
}

/* ---- Plans banner at top of page ---- */
.plans__banner-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 0;
  position: relative;
  z-index: 1;
}
.plans__trial-banner--top {
  margin: 0 auto;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.2rem 1.8rem;
  background: linear-gradient(
    135deg,
    rgba(79, 124, 219, 0.18),
    rgba(63, 181, 135, 0.12)
  );
  border: 1px solid rgba(79, 124, 219, 0.45);
  box-shadow:
    0 0 32px rgba(79, 124, 219, 0.25),
    inset 0 0 20px rgba(79, 124, 219, 0.08);
}

/* ---- Precision Conviction Evolution: one line on macbook+ ---- */
.hero__title--oneline-mb {
  font-size: clamp(2rem, 6vw, 4.4rem) !important;
  white-space: nowrap;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
@media (max-width: 1100px) {
  .hero__title--oneline-mb {
    white-space: normal;
    font-size: clamp(2rem, 6vw, 3.4rem) !important;
  }
}
/* Infinity icon as image */
.infinity-img {
  width: 85px;
  height: auto;
  display: block;
  /* turn black PNG into navy blue to match brand */
  filter: brightness(0) saturate(100%) invert(63%) sepia(57%) saturate(584%)
    hue-rotate(190deg) brightness(101%) contrast(91%)
    drop-shadow(0 0 14px rgba(111, 168, 255, 0.5));
}
/* ==========================================================================
   FIX: Plan card buttons — proper alignment for narrow widths
   ========================================================================== */

/* Inside plan cards specifically, make button content stay on one line */
.plan .btn--ninerupee {
  width: 100% !important;
  min-width: 0 !important;
  padding: 1.1rem 1.2rem !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-align: center;
}

.plan .btn--ninerupee .btn__line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.4em;
  width: 100%;
}

.plan .btn--ninerupee .btn__rupee {
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Hide the arrow inside plan card buttons — it takes up too much horizontal space */
.plan .btn--ninerupee .arrow {
  display: none;
}

/* "For 6 Days Only" label below button — pull it closer */
.plan .btn--ninerupee::after {
  bottom: -1.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
}

/* On very narrow widths, allow text to shrink further */
@media (max-width: 1100px) {
  .plan .btn--ninerupee {
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    padding: 1rem 0.8rem !important;
  }
  .plan .btn--ninerupee .btn__rupee {
    font-size: 1.55em;
  }
}

/* For the featured (middle) card which has slightly more room, keep arrow but tiny */
.plan--featured .btn--ninerupee {
  padding-right: 2rem !important;
}

/* ==========================================================================
   52. CLIENT REQUEST V6 — bigger logo, bigger type, less empty space,
       hero brand line, aligned same-size bg shapes, Title Case everywhere.
       (Appended last so it wins over earlier sections.)
   ========================================================================== */

/* ---- (4) TITLE CASE: capitalise the first letter of every word ---- */
/* Inherits down to all readable content; explicit ALL-CAPS labels stay caps
   (still "first letter capital", so compliant) */
body {
  text-transform: capitalize;
}

/* ---- (1) BIGGER LOGO (nav + footer wordmark) ---- */
.nav__brand {
  font-size: 1.5rem;
  gap: 0.85rem;
}
.nav__brand svg {
  width: 42px;
  height: 42px;
}
.footer__brand {
  font-size: 2rem;
}

/* ---- (2)+(6) WIDER LAYOUT + BIGGER TYPE + LESS EMPTY SPACE ---- */
:root {
  --grid-max: 1480px;
}

/* (3) Hero brand line — designed two-tone wordmark lockup */
.hero__brandline {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8.4vw, 6.6rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  margin: 0.6rem 0 2rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.32em;
}
/* "DIGNALS" — solid, metallic vertical gradient + soft glow */
.hero__brandline .bl-1 {
  background: linear-gradient(180deg, #ffffff 0%, #dce8ff 48%, #9dbdf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(111, 168, 255, 0.35));
}
/* "SYSTEM" — hollow, outlined in navy glow with a soft halo */
.hero__brandline .bl-2 {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgba(111, 168, 255, 0.9);
  text-shadow: 0 0 24px rgba(79, 124, 219, 0.45);
}
/* thin accent line seating the wordmark above the headline */
.hero__brandline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.7rem;
  transform: translateX(-50%);
  width: clamp(120px, 22vw, 280px);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--navy-bright),
    transparent
  );
  box-shadow: 0 0 10px rgba(111, 168, 255, 0.6);
  opacity: 0.85;
}
@media (max-width: 600px) {
  .hero__brandline .bl-2 {
    -webkit-text-stroke-width: 1.4px;
  }
}

/* Hero — kill the huge dead vertical space, enlarge text */
.hero {
  min-height: auto;
  padding: 3rem var(--gutter) 4rem;
}
.hero__eyebrow {
  margin-bottom: 1.4rem;
}
.hero__title--oneline {
  font-size: clamp(1.3rem, 4.1vw, 3.4rem);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.hero__lede {
  font-size: 1.35rem;
  max-width: 44em;
  margin-bottom: 2.2rem;
}

/* Trim section padding so content fills more of the screen */
.section {
  padding: 3.5rem var(--gutter);
}
.why__grid {
  padding: 3.5rem var(--gutter);
  gap: 2rem;
}
.philosophy__inner {
  padding: 4rem var(--gutter);
}
.cta-block {
  padding: 4.5rem var(--gutter);
}
.stats__grid {
  padding: 2.8rem var(--gutter);
}

/* Bump up section / card / stat type */
.section__title {
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
}
.why__item h3 {
  font-size: 1.5rem;
}
.why__item p {
  font-size: 1.12rem;
}
.cta-block__title {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
}
.cta-block__sub {
  font-size: 1.25rem;
}
.stat__val {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
}
.stat__lbl {
  font-size: 0.8rem;
}

/* ==========================================================================
   PLANS: Subscribe Now button — emerald
   ========================================================================== */
.btn--subscribe-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.5rem;
  margin-top: 0.8rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #10b981;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.1);
}
.btn--subscribe-now:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: #10b981;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.3);
  color: #fff;
}

/* Hide plan timers */
.plan__timer {
  display: none !important;
}

/* ===========================================================================
   38. BACKGROUND SHAPES (clean rewrite — 4 PNG shapes, no overlap)
   --------------------------------------------------------------------------- */

.bg-shapes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* overflow visible so drop-shadow glow doesn't get clipped at viewport edges */
  overflow: visible;
}

.bg-shape {
  position: absolute;
  width: 190px;
  height: 190px;
  opacity: 0.38;
  filter: drop-shadow(0 0 10px rgba(111, 168, 255, 0.5))
    drop-shadow(0 0 22px rgba(79, 124, 219, 0.28))
    drop-shadow(0 0 42px rgba(111, 168, 255, 0.14));
}

.bg-shape img {
  width: 100%;
  height: 100%;
  display: block;
}

/* TOP RIGHT — Shape 1 (Sri Yantra) */
.bg-shape--yantra {
  top: 140px;
  right: 60px;
}
.bg-shape--yantra img {
  animation: spin-cw 45s linear infinite;
}

/* TOP LEFT — Shape 3 (Octahedron) */
.bg-shape--merkaba {
  top: 140px;
  left: 60px;
}
.bg-shape--merkaba img {
  animation: spin-cw 55s linear infinite;
}

/* BOTTOM LEFT — Shape 2 (8-point star) */
.bg-shape--ring {
  bottom: 80px;
  left: 60px;
}
.bg-shape--ring img {
  animation: spin-ccw 50s linear infinite;
}

/* BOTTOM RIGHT — Shape 4 (Flower of Life) */
.bg-shape--flower {
  bottom: 80px;
  right: 60px;
}
.bg-shape--flower img {
  animation: spin-ccw 45s linear infinite;
}

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

/* Larger screens (iMac, 4K) — slightly bigger shapes, pulled further from corners */
@media (min-width: 1600px) {
  .bg-shape {
    width: 220px;
    height: 220px;
  }
  .bg-shape--yantra,
  .bg-shape--merkaba {
    top: 150px;
  }
  .bg-shape--yantra,
  .bg-shape--flower {
    right: 80px;
  }
  .bg-shape--merkaba,
  .bg-shape--ring {
    left: 80px;
  }
}

/* Tablet — smaller, tighter to corners */
@media (max-width: 1100px) {
  .bg-shape {
    width: 150px;
    height: 150px;
    opacity: 0.34;
  }
  .bg-shape--yantra,
  .bg-shape--merkaba {
    top: 130px;
  }
  .bg-shape--yantra,
  .bg-shape--flower {
    right: 36px;
  }
  .bg-shape--merkaba,
  .bg-shape--ring {
    left: 36px;
  }
}

/* Mobile — only keep diagonal pair (top-right + bottom-left) for cleaner look */
@media (max-width: 720px) {
  .bg-shape {
    width: 120px;
    height: 120px;
    opacity: 0.3;
  }
  .bg-shape--yantra {
    top: 110px;
    right: 20px;
  }
  .bg-shape--ring {
    bottom: 50px;
    left: 20px;
  }
  .bg-shape--merkaba,
  .bg-shape--flower {
    display: none;
  }
}

/* ==========================================================================
   52. MOBILE FIX — Hamburger menu, sizing fixes, perf
   Appended last so it wins over earlier rules.
   ========================================================================== */

/* ---- HAMBURGER BUTTON (hidden on desktop, visible mobile) ---- */
.nav__hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(245, 247, 250, 0.15);
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 4px;
  transition: border-color 0.2s ease;
}
.nav__hamburger:hover {
  border-color: rgba(111, 168, 255, 0.5);
}
.nav__hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--white);
  transition: all 0.2s ease;
}

/* ---- MOBILE DRAWER ---- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0.3s,
    opacity 0.3s;
  pointer-events: none;
}
.mobile-drawer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: linear-gradient(180deg, #0e0f14 0%, #07070a 100%);
  border-left: 1px solid rgba(111, 168, 255, 0.2);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  padding: 1.5rem 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow-y: auto;
}
.mobile-drawer.is-open .mobile-drawer__panel {
  transform: translateX(0);
}
.mobile-drawer__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(245, 247, 250, 0.12);
  color: var(--white);
  cursor: pointer;
  border-radius: 4px;
  padding: 10px;
}
.mobile-drawer__close svg {
  width: 100%;
  height: 100%;
}
.mobile-drawer__brand {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin: 1.4rem 0 2.4rem;
}
.mobile-drawer__brand .dot {
  color: var(--navy-bright);
}
.mobile-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mobile-drawer__links a {
  display: block;
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-soft);
  text-decoration: none;
  padding: 0.95rem 0.5rem;
  border-bottom: 1px solid rgba(245, 247, 250, 0.06);
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.mobile-drawer__links a:hover,
.mobile-drawer__links a:active {
  color: var(--navy-bright);
  padding-left: 0.9rem;
}
.mobile-drawer__cta {
  margin-top: auto;
  padding: 1.1rem 1.2rem;
  background: var(--navy);
  border: 1px solid var(--navy-glow);
  color: var(--white);
  text-decoration: none;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 0 20px rgba(79, 124, 219, 0.35);
}
.mobile-drawer__cta-sub {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  opacity: 0.75;
  font-weight: 500;
}

/* ==========================================================================
   MOBILE BREAKPOINT — show hamburger, hide nav links + CTA, fix everything
   ========================================================================== */
@media (max-width: 880px) {
  /* Show hamburger, hide desktop nav__cta */
  .nav__hamburger {
    display: inline-flex;
  }
  .nav__cta--twoline,
  .nav__cta {
    display: none !important;
  }

  /* Nav less padding on mobile */
  .nav {
    padding: 0.7rem var(--gutter) !important;
  }
  .nav__brand {
    font-size: 1.05rem !important;
  }
  .nav__brand svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ==========================================================================
   HERO + LAYOUT — comprehensive mobile sizing
   ========================================================================== */
@media (max-width: 720px) {
  /* HERO — calm down the sizes */
  .hero {
    padding: 2.5rem var(--gutter) 3.5rem !important;
    min-height: auto !important;
  }
  .hero__eyebrow {
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 1rem !important;
  }
  .hero__brandline {
    font-size: clamp(1.8rem, 9vw, 3rem) !important;
    margin: 0.4rem 0 1.2rem !important;
    letter-spacing: 0.02em !important;
  }
  .hero__title,
  .hero__title--oneline,
  .hero__title--oneline-mb {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    white-space: normal !important;
    line-height: 1.12 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 1.2rem !important;
  }
  .hero__lede {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin-bottom: 2rem !important;
  }

  /* ₹9 BUTTON — must fit, no horizontal scroll */
  .btn--ninerupee {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    padding: 1rem 1.2rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 2rem !important;
  }
  .hero__ctas .btn--ninerupee {
    padding: 1.15rem 1.4rem !important;
    font-size: 0.82rem !important;
    min-width: 0 !important;
    max-width: 340px !important;
  }
  .btn--ninerupee .btn__rupee {
    font-size: 1.5em !important;
  }
  .btn--ninerupee .arrow {
    font-size: 0.9em !important;
    margin-left: 0.4em !important;
  }
  .btn--ninerupee::after {
    font-size: 0.56rem !important;
    letter-spacing: 0.22em !important;
    bottom: -1.5rem !important;
  }

  /* SECTIONS — cut padding way down */
  .section {
    padding: 3.5rem var(--gutter) !important;
  }

  /* STATS — single column on small phones */
  .stats__grid {
    padding: 2rem var(--gutter) !important;
  }

  /* PLANS — already stacks, just tighten */
  .plan {
    padding: 2rem 1.4rem !important;
  }
  .plan__price {
    font-size: 2.2rem !important;
  }

  /* SECTION TITLES — smaller on mobile */
  .section__title,
  .trial__title,
  .cta-block__title {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    line-height: 1.15 !important;
  }

  /* FOOTER — tighten */
  .footer__inner {
    margin-bottom: 2rem !important;
    gap: 1.8rem !important;
  }
  .footer__brand {
    font-size: 1.2rem !important;
  }

  /* SERVICES cards on mobile */
  .eco-card {
    padding: 1.8rem 1.4rem !important;
    min-height: auto !important;
  }
}

@media (max-width: 540px) {
  /* STATS — single column on very small phones */
  .stats__grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hide ALL bg shapes on tiny phones for clean look + perf */
  .bg-shape--flower,
  .bg-shape--merkaba {
    display: none !important;
  }
  .bg-shape {
    width: 90px !important;
    height: 90px !important;
    opacity: 0.22 !important;
  }
  .bg-shape--yantra {
    top: 90px !important;
    right: 10px !important;
  }
  .bg-shape--ring {
    bottom: 40px !important;
    left: 10px !important;
  }

  /* Make Limited Offer banner stack nicely */
  .plans__trial-banner,
  .plans__trial-banner--top {
    flex-direction: column !important;
    gap: 0.8rem !important;
    padding: 1.2rem 1rem !important;
    text-align: center;
  }
  .plans__trial-banner__text {
    font-size: 0.88rem !important;
  }
}

/* ==========================================================================
   PERFORMANCE — disable shape animations on mobile + reduced-motion
   ========================================================================== */
@media (max-width: 720px) {
  .bg-shape img {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY — minimum touch target sizes on mobile
   ========================================================================== */
@media (max-width: 880px) {
  .nav__links a,
  .footer__col a,
  .footer__bottom a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Prevent horizontal scroll from any overflow */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}
/* ==========================================================================
   53. MOBILE FIX — Bigger, softer bg shapes that don't clip
   ========================================================================== */
@media (max-width: 540px) {
  .bg-shape {
    width: 200px !important;
    height: 200px !important;
    opacity: 0.2 !important;
  }
  .bg-shape--yantra {
    top: 180px !important;
    right: 30px !important;
  }
  .bg-shape--ring {
    bottom: 80px !important;
    left: 30px !important;
  }
}

/* Even smaller phones (iPhone SE, Galaxy A series ~360px) — slightly smaller */
@media (max-width: 380px) {
  .bg-shape {
    width: 170px !important;
    height: 170px !important;
    opacity: 0.1 !important;
  }
  .bg-shape--yantra {
    top: 170px !important;
    right: 20px !important;
  }
  .bg-shape--ring {
    bottom: 60px !important;
    left: 20px !important;
  }
}
@media (max-width: 720px) {
  .bg-shape img {
    animation: none !important;
  }
}
/* ==========================================================================
   54. FORM SELECT DROPDOWN (matches site theme)
   ========================================================================== */
.select-wrap {
  position: relative;
  display: block;
}

.form-field--select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background: rgba(14, 15, 20, 0.6);
  border: 1px solid rgba(245, 247, 250, 0.12);
  color: var(--white);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 1rem 2.8rem 1rem 1.1rem;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

.form-field--select select:hover {
  border-color: rgba(111, 168, 255, 0.4);
  background: rgba(14, 15, 20, 0.85);
}

.form-field--select select:focus {
  border-color: var(--navy-bright);
  box-shadow:
    0 0 0 2px rgba(111, 168, 255, 0.15),
    0 0 18px rgba(79, 124, 219, 0.18);
  background: rgba(14, 15, 20, 0.95);
}

.form-field--select select:invalid {
  color: var(--white-dim);
}

.form-field--select select option {
  background: #0e0f14;
  color: var(--white);
  padding: 0.8rem;
}

.form-field--select select option[value=""] {
  color: var(--white-dim);
}

.select-arrow {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 7px;
  color: var(--navy-bright);
  pointer-events: none;
  transition: transform 0.25s ease;
}

.form-field--select:focus-within .select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--white);
}
/* ==========================================================================
   55. FIX — Spacing between Occupation and dropdown field
   ========================================================================== */
.form-field--select {
  margin-top: 1.6rem;
}

/* ==========================================================================
   56. FINAL TICKER CLEANUP — Remove gold, single border line, clean look
   ========================================================================== */
.ticker {
  background: rgba(
    7,
    7,
    10,
    0.92
  ) !important; /* obsidian dark, slight transparency */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(245, 247, 250, 0.08) !important; /* single subtle line */
  border-top: none !important;
  box-shadow: none !important; /* no gold glow */
}

/* Remove the ticker__label if present (the "Live Market" badge with red dot) */
.ticker__label,
.ticker__label::before {
  display: none !important;
}

/* Trading symbols — light white-soft text on dark background */
.ticker--names .ticker__item {
  font-family: var(--mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  color: var(--white-soft) !important;
  text-transform: uppercase !important;
}
.ticker--names .ticker__item .sym {
  color: var(--white-soft) !important;
  text-shadow: 0 0 8px rgba(111, 168, 255, 0.18);
}

/* Adjust scroll speed for 35x2=70 items */
.ticker--names .ticker__row {
  animation-duration: 130s !important;
  gap: 3rem !important;
}

/* Mobile: smaller text in ticker */
@media (max-width: 720px) {
  .ticker--names .ticker__item {
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
  }
  .ticker--names .ticker__row {
    gap: 2rem !important;
    animation-duration: 110s !important;
  }
}
@media (max-width: 480px) {
  .ticker--names .ticker__item {
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
  }
}
/* ==========================================================================
   57. GOLD THEME — Shapes + Ticker (bright vibrant gold like reference)
   ========================================================================== */

/* Brighter gold variables */
:root {
  --gold-main: #f0c14b;
  --gold-bright: #ffd966;
  --gold-deep: #c9a24b;
}

/* ---- BACKGROUND SHAPES — bright gold tint + warm glow ---- */
.bg-shape img {
  /* Brighter gold conversion — more yellow, less brown */
  filter: brightness(0) saturate(100%) invert(82%) sepia(40%) saturate(900%)
    hue-rotate(355deg) brightness(105%) contrast(95%);
}
.bg-shape {
  filter: drop-shadow(0 0 10px rgba(240, 193, 75, 0.7))
    drop-shadow(0 0 28px rgba(240, 193, 75, 0.4))
    drop-shadow(0 0 56px rgba(255, 217, 102, 0.22)) !important;
  opacity: 0.72 !important;
}

/* ---- TICKER — Bright gold borders + bright gold text ---- */
.ticker {
  background: rgba(7, 7, 10, 0.95) !important;
  border-top: 1px solid var(--gold-main) !important;
  border-bottom: 1px solid var(--gold-main) !important;
  box-shadow:
    0 0 22px rgba(240, 193, 75, 0.35),
    inset 0 0 14px rgba(240, 193, 75, 0.1) !important;
}

.ticker--names .ticker__item,
.ticker--names .ticker__item .sym {
  color: var(--gold-main) !important;
  text-shadow:
    0 0 10px rgba(240, 193, 75, 0.6),
    0 0 20px rgba(240, 193, 75, 0.25) !important;
  font-weight: 600 !important;
}
/* ==========================================================================
   58. REMOVE GLOW from all blue accent text (across every page)
   ========================================================================== */
.accent,
.section__title .accent,
.hero__title .accent,
.cta-block__title .accent,
.trial__title .accent,
span.accent,
strong.accent {
  text-shadow: none !important;
}
/* ==========================================================================
   59. REMOVE ALL GOLD GLOWS (keep gold color, just no glow)
   ========================================================================== */

/* Background shapes — gold color stays, drop-shadow glow removed */
.bg-shape {
  filter: none !important;
}

/* Ticker — gold borders stay, box-shadow glow removed */
.ticker {
  box-shadow: none !important;
}

/* Ticker text — gold color stays, text-shadow glow removed */
.ticker--names .ticker__item,
.ticker--names .ticker__item .sym {
  text-shadow: none !important;
}
/* ==========================================================================
   60. MOBILE — Lower opacity on gold shapes only
   ========================================================================== */
@media (max-width: 720px) {
  .bg-shape {
    opacity: 0.4 !important;
  }
}
/* ==========================================================================
   61. MOBILE DRAWER — Gold theme to match brand
   ========================================================================== */

/* Drawer brand "Dignals." */
.mobile-drawer__brand {
  color: #f0c14b !important;
}
.mobile-drawer__brand .dot {
  color: #f0c14b !important;
}

/* Drawer link text — gold */
.mobile-drawer__links a {
  color: #f0c14b !important;
}
.mobile-drawer__links a:hover,
.mobile-drawer__links a:active {
  color: #ffd966 !important;
}

/* The hamburger icon lines (☰) — gold */
.nav__hamburger {
  border-color: rgba(240, 193, 75, 0.4) !important;
}
.nav__hamburger span {
  background: #f0c14b !important;
}
.nav__hamburger:hover {
  border-color: rgba(240, 193, 75, 0.7) !important;
}

/* Drawer close button — gold border */
.mobile-drawer__close {
  border-color: rgba(240, 193, 75, 0.3) !important;
  color: #f0c14b !important;
}
/* ==========================================================================
   62. FOOTER FIX — Each link on its own line on mobile
   ========================================================================== */
@media (max-width: 720px) {
  .footer__col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem !important;
    margin-bottom: 1.4rem !important;
  }
  .footer__col a {
    display: block !important;
    padding: 0.2rem 0 !important;
    line-height: 1.5 !important;
  }
  .footer__col h4,
  .footer__col-title {
    margin-bottom: 0.8rem !important;
  }
  .footer__inner {
    gap: 2rem !important;
  }
}

/* ==========================================================================
   63. HAMBURGER MENU — Image icon, tinted gold
   ========================================================================== */
.nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* The menu image — white PNG turned gold via filter */
.nav__hamburger-img {
  width: 42px;
  height: auto;
  display: block;
  /* white -> gold #f0c14b */
  filter: brightness(0) saturate(100%) invert(82%) sepia(40%) saturate(900%)
    hue-rotate(355deg) brightness(105%) contrast(95%);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.nav__hamburger:hover .nav__hamburger-img,
.nav__hamburger:active .nav__hamburger-img {
  opacity: 0.8;
  transform: scale(0.96);
}

/* Show only on mobile */
@media (max-width: 880px) {
  .nav__hamburger {
    display: inline-flex !important;
  }
}
@media (max-width: 400px) {
  .nav__hamburger-img {
    width: 38px;
  }
}
/* ==========================================================================
   64. MOBILE — Fix ₹ button text wrapping (fit on one line, cleaner)
   ========================================================================== */
@media (max-width: 720px) {
  .btn--ninerupee {
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    padding: 1.1rem 1rem !important;
    line-height: 1.3 !important;
    text-align: center;
  }
  .btn--ninerupee .btn__line {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35em;
  }
  .btn--ninerupee .btn__rupee {
    font-size: 1.4em !important;
  }
  /* Hide the arrow on mobile — saves horizontal space */
  .btn--ninerupee .arrow {
    display: none !important;
  }
}

/* Very small phones — shrink a touch more so it stays on one line */
@media (max-width: 400px) {
  .btn--ninerupee {
    font-size: 0.64rem !important;
    letter-spacing: 0.04em !important;
    padding: 1rem 0.7rem !important;
  }
  .btn--ninerupee .btn__rupee {
    font-size: 1.35em !important;
  }
}
/* ==========================================================================
   65. MOBILE — Force ₹ button text onto ONE line, all devices
   ========================================================================== */
@media (max-width: 720px) {
  .btn--ninerupee {
    width: auto !important;
    max-width: 92vw !important;
    padding: 1.1rem 1.4rem !important;
    white-space: nowrap !important; /* never wrap */
    overflow: hidden;
  }
  .btn--ninerupee .btn__line {
    display: inline-flex !important;
    flex-wrap: nowrap !important; /* keep on one line */
    white-space: nowrap !important;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
  }
  .btn--ninerupee .btn__rupee {
    font-size: 1.4em !important;
    white-space: nowrap !important;
  }
  .btn--ninerupee .arrow {
    display: none !important; /* hide arrow, save space */
  }
}

/* Scale font down slightly on narrower phones so it still fits one line */
@media (max-width: 430px) {
  .btn--ninerupee .btn__line {
    font-size: 0.64rem !important;
    letter-spacing: 0.03em !important;
  }
  .btn--ninerupee .btn__rupee {
    font-size: 1.35em !important;
  }
}
@media (max-width: 380px) {
  .btn--ninerupee .btn__line {
    font-size: 0.58rem !important;
    letter-spacing: 0.02em !important;
  }
}
/* ==========================================================================
   66. MOBILE — Restore "For X Days" text below button (was clipped)
   ========================================================================== */
@media (max-width: 720px) {
  .btn--ninerupee {
    overflow: visible !important; /* let the ::after text show below */
    margin-bottom: 2.4rem !important; /* room for the text underneath */
  }
  .btn--ninerupee::after {
    display: block !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.28em !important;
    bottom: -1.7rem !important;
  }
}