/* ====================================================
   Axczel Research — Design System Override
   Aligns axczelresearch.com with axczel.com aesthetics:
   cream backgrounds · deep emerald · editorial serif
   ==================================================== */

/* ---- COLOR TOKENS (html.light overrides) ---- */
html.light {
  /* Backgrounds — warm cream instead of white/mint */
  --bg:          #faf7f2;
  --bg-2:        #f5f0e8;
  --bg-3:        #ede7d8;
  --bg-card:     #ffffff;
  --bg-accent:   #e8f4f0;
  --input-bg:    #ffffff;
  --header-bg:   rgba(250, 247, 242, 0.88);

  /* Footer — axczel.com emerald-950/900 */
  --footer-bg:     #0b3a26;
  --footer-border: #14533a;

  /* Text — ink tones from axczel.com */
  --text-primary:   #1a2420;
  --text-secondary: #5a6e67;
  --text-muted:     #8a9e97;

  /* Borders — warmer tone */
  --border-color:   #dce7e3;
  --border-strong:  #c5d8d2;
  --border-primary: #21644c;
  --input-border:   #8a9e97;

  /* Primary accent — axczel.com emerald-800 */
  --primary-text: #21644c;
  --badge-bg:     rgba(255, 255, 255, 0.78);

  /* Emerald scale */
  --e-100: #e8f4f0;
  --e-200: #c5d8d2;
  --e-400: #3d8d6f;

  /* Shadows — emerald-tinted */
  --shadow-xs:         0 1px 2px rgba(11, 58, 38, 0.05);
  --shadow-sm:         0 1px 3px rgba(11, 58, 38, 0.07), 0 1px 2px rgba(11, 58, 38, 0.04);
  --shadow-card:       0 2px 8px rgba(11, 58, 38, 0.06), 0 8px 24px rgba(11, 58, 38, 0.08);
  --shadow-card-hover: 0 12px 30px rgba(12, 94, 58, 0.18), 0 4px 10px rgba(11, 58, 38, 0.06);
  --shadow-lg:         0 24px 56px rgba(11, 58, 38, 0.14), 0 8px 20px rgba(11, 58, 38, 0.06);
  --shadow-header:     0 1px 0 rgba(220, 231, 227, 0.9), 0 6px 24px rgba(11, 58, 38, 0.05);
  --glow:              0 0 0 1px rgba(33, 100, 76, 0.18), 0 10px 36px rgba(33, 100, 76, 0.14);
}

/* ---- FONTS ---- */
body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Mono / badge elements — JetBrains Mono */
.home__sebi-badge,
.section-label,
.footer__sebi-badge,
.footer__col-title,
.footer__copyright,
.footer__reg,
.footer__disclaimer,
.mobile-nav__label,
.contact__sebi-title {
  font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
}

/* ---- FOOTER — parent company link ---- */
.footer__parent-link {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin: 6px 0 0;
  line-height: 1.6;
}

.footer__axczel-link {
  color: #9fd4bc;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ---- HERO BACKGROUNDS — cream start instead of white ---- */
/* Only home and contact heroes hardcode #ffffff; others inherit body bg */
.home__hero {
  background:
    radial-gradient(42% 55% at 12% 8%,  rgba(33, 100, 76, 0.09) 0, transparent 60%),
    radial-gradient(45% 55% at 90% 14%, rgba(47, 122, 95, 0.07) 0, transparent 58%),
    radial-gradient(70% 60% at 50% 118%, rgba(20, 83, 58, 0.06) 0, transparent 60%),
    linear-gradient(180deg, #faf7f2 0%, var(--bg-2) 100%);
}

.contact__hero {
  background:
    radial-gradient(42% 55% at 12% 8%,  rgba(33, 100, 76, 0.09) 0, transparent 60%),
    radial-gradient(45% 55% at 90% 14%, rgba(47, 122, 95, 0.07) 0, transparent 58%),
    radial-gradient(70% 60% at 50% 118%, rgba(20, 83, 58, 0.06) 0, transparent 60%),
    linear-gradient(180deg, #faf7f2 0%, var(--bg-2) 100%);
}

/* ---- HERO TITLE — solid deeper emerald instead of gradient text ---- */
.home__hero-title span,
.contact__hero-title span,
.legal__hero-title span,
.investor__hero-title span {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #21644c;
}

/* ---- GLOW OVERLAY — muted tint ---- */
html.light .glow-overlay {
  background: radial-gradient(circle at 50% -20%, rgba(33, 100, 76, 0.07) 0, transparent 70%);
}
html.light .glow-overlay:after {
  opacity: 0.04;
}

/* ---- SECTION LABEL — deeper emerald line ---- */
.section-label:before {
  background: linear-gradient(90deg, #21644c, #3d8d6f);
}

/* ---- SERVICE CARDS ---- */
.home__service-card:after {
  background: linear-gradient(90deg, #14533a, #2f7a5f);
}

.home__service-icon {
  background: linear-gradient(135deg, #e8f4f0, #f0f8f5);
  border-color: #c5d8d2;
}

.home__service-icon .material-symbols-outlined {
  color: #21644c;
}

/* ---- CTA CARD — axczel.com dark emerald ---- */
.home__cta-card {
  background: linear-gradient(140deg, #0b3a26, #04180e);
}

/* ---- BUTTONS — deeper emerald to match axczel.com ---- */
.home__btn-primary,
.header__btn-cta,
.mobile-nav__btn-cta,
.reset-modal__btn,
.contact__form-submit {
  background: linear-gradient(135deg, #14533a, #21644c);
  border-color: #0b3a26;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 18px rgba(11,58,38,0.22);
}

.home__btn-primary:hover,
.header__btn-cta:hover,
.mobile-nav__btn-cta:hover,
.reset-modal__btn:hover,
.contact__form-submit:hover {
  background: linear-gradient(135deg, #0b3a26, #14533a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 28px rgba(11,58,38,0.30);
}

/* ---- SECONDARY BUTTON hover ---- */
.home__btn-secondary:hover {
  background: var(--bg-accent);
  border-color: #3d8d6f;
}

/* ---- FOOTER — axczel.com emerald accent for hover/reg ---- */
html.light .footer .footer__col-link:hover,
html.light .footer .footer__reg span {
  color: #9fd4bc;
}

/* ---- NAV ACTIVE STATE — deeper emerald ---- */
html.light .header .header__nav-link.active {
  color: #21644c;
  background: #e8f4f0;
}

html.light .header .header__nav-link:focus:not(.active),
html.light .header .header__nav-link:hover:not(.active) {
  color: var(--text-primary);
  background: var(--bg-accent);
}

/* ---- ALT SECTION BACKGROUNDS — cream tones ---- */
html.light .section--alt,
html.light [class*=__section]:nth-child(2n) {
  background: linear-gradient(180deg, var(--bg-3) 0, var(--bg-accent) 100%);
}

/* ---- MOBILE NAV — cream background ---- */
html.light .mobile-nav {
  background: #faf7f2;
  box-shadow: -4px 0 28px rgba(11, 58, 38, 0.10);
}

/* ---- INPUT FOCUS — deeper emerald ring ---- */
html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #21644c;
  box-shadow: 0 0 0 3px rgba(33, 100, 76, 0.14);
}

.header__login-input:focus,
.mobile-nav__login-input:focus,
.phone-login__otp-box:focus {
  border-color: #21644c;
  box-shadow: 0 0 0 3px rgba(33, 100, 76, 0.12);
}

/* ---- PING DOT — deeper emerald ---- */
.ping-dot__outer { background: #21644c; }
.ping-dot__inner { background: #14533a; }

/* ---- PRELAUNCH NOTICE ---- */
.prelaunch-notice {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 28px;
  background: #e8f4f0;
  border: 1.5px solid #21644c;
  color: #14533a;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 10px;
  line-height: 1.6;
  text-align: left;
  transform-origin: 50% -8px;
  animation: notice-sway 6s ease-in-out infinite, notice-glow 2.8s ease-in-out infinite;
}

.prelaunch-notice .material-symbols-outlined {
  font-size: 17px;
  color: #21644c;
  flex-shrink: 0;
  margin-top: 1px;
}

@keyframes notice-sway {
  0%   { transform: rotate(-0.7deg) translateY(0px);    }
  30%  { transform: rotate( 0.8deg) translateY(-1.5px); }
  65%  { transform: rotate(-0.5deg) translateY( 0.5px); }
  100% { transform: rotate(-0.7deg) translateY(0px);    }
}

@keyframes notice-glow {
  0%, 100% {
    box-shadow:
      0 0  6px rgba(33, 100, 76, 0.30),
      0 0 14px rgba(33, 100, 76, 0.18),
      0 4px 14px rgba(11,  58, 38, 0.10);
  }
  50% {
    box-shadow:
      0 0 10px rgba(33, 100, 76, 0.55),
      0 0 24px rgba(33, 100, 76, 0.30),
      0 0 40px rgba(33, 100, 76, 0.14),
      0 4px 14px rgba(11,  58, 38, 0.10);
  }
}

/* ---- FOCUS INDICATORS ---- */
:focus-visible {
  outline-color: #21644c;
}