/* ═══════════════════════════════════════════════════════════════════
   ASTAA — section themes
   Loads AFTER style.css. Every section gets its own ground so no two
   neighbours look alike, and every component that can land on a dark
   ground gets a variant here under `.on-dark`.

   Page rhythm (top to bottom):
     hero      photo         dark
     marquee   ink strip     dark
     about     sand          light
     platform  navy          dark
     features  royal blue    dark
     hajj      photo         dark
     reach     sand          light
     pricing   near-black    dark
     ecosystem mist          light
     cta       photo         dark
     contact   white         light
     footer    near-black    dark
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sand: #f7edda;
  --sand-2: #f2e3ca;
  --mist: #e9eff8;
  --navy: #08203a;
  --royal: #123c82;
  --ink-deep: #0a1220;
}

/* ───────── 1. SECTION GROUNDS ───────── */
.sec--sand {
  background:
    radial-gradient(900px 460px at 82% 0%, rgba(196, 136, 26, 0.16), transparent 62%),
    radial-gradient(700px 420px at 10% 100%, rgba(21, 82, 201, 0.07), transparent 62%),
    var(--sand);
}

.sec--mist {
  background:
    radial-gradient(760px 420px at 50% 0%, rgba(255, 255, 255, 0.9), transparent 62%),
    var(--mist);
}

.sec--white {
  background: #fff;
}

.sec--navy {
  background:
    radial-gradient(900px 520px at 78% 10%, rgba(46, 123, 240, 0.18), transparent 62%),
    radial-gradient(700px 460px at 12% 92%, rgba(196, 136, 26, 0.09), transparent 62%),
    var(--navy);
}

.sec--blue {
  background:
    radial-gradient(880px 520px at 20% 0%, rgba(96, 162, 255, 0.22), transparent 62%),
    radial-gradient(760px 480px at 88% 96%, rgba(10, 25, 60, 0.55), transparent 62%),
    var(--royal);
}

.sec--ink {
  background:
    radial-gradient(820px 500px at 50% -6%, rgba(46, 123, 240, 0.2), transparent 64%),
    radial-gradient(620px 420px at 88% 100%, rgba(196, 136, 26, 0.12), transparent 62%),
    var(--ink-deep);
}

/* a faint dot field gives the dark grounds texture instead of flat colour */
.sec--navy,
.sec--blue,
.sec--ink {
  position: relative;
  isolation: isolate;
}

.sec--navy::before,
.sec--blue::before,
.sec--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
}

/* ───────── 2. CHAPTER DIVIDERS ───────── */
/* A hairline of light at the top of every solid block. It reads as a seam
   between chapters without needing angled or curved cutouts. */
.sec--sand::after,
.sec--mist::after,
.sec--white::after,
.sec--navy::after,
.sec--blue::after,
.sec--ink::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(196, 136, 26, 0.55) 22%, rgba(46, 123, 240, 0.5) 62%, transparent);
}

/* ───────── 3. NUMBERED EYEBROWS ───────── */
.eyebrow {
  gap: 0.6rem;
  padding-left: 0.42rem;
}

.eyebrow i {
  display: inline-grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding-inline: 0.3rem;
  border-radius: var(--r-full);
  background: linear-gradient(140deg, var(--brand-deep), var(--brand-2));
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.on-dark .eyebrow i {
  background: linear-gradient(140deg, var(--gold), var(--gold-2));
  color: #16110a;
}

/* ───────── 4. TYPE ON DARK ───────── */
.on-dark {
  color: rgba(255, 255, 255, 0.72);
}

.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: #fff;
}

.on-dark h2 em,
.on-dark h3 em {
  color: var(--gold-2);
}

.on-dark .section-lede {
  color: rgba(255, 255, 255, 0.68);
}

.on-dark .eyebrow {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.on-dark .link-arrow {
  color: var(--gold-2);
}

.on-dark .link-arrow:hover {
  color: #fff;
}

.on-dark .ticks li {
  color: rgba(255, 255, 255, 0.86);
}

.on-dark .ticks .ic {
  background: rgba(255, 255, 255, 0.14);
  color: #7ce0b0;
}

/* ───────── 5. BUTTONS ───────── */
.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 55%, #f0c265 100%);
  color: #1a1206;
  box-shadow: 0 16px 34px -10px rgba(196, 136, 26, 0.55);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 46px -12px rgba(196, 136, 26, 0.62);
}

.on-dark .btn-outline {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.on-dark .btn-outline:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ───────── 6. CARDS ON DARK ───────── */
.on-dark .feature,
.on-dark .plan {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
}

.on-dark .feature:hover,
.on-dark .plan:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.8);
}

.on-dark .feature::before {
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.13), transparent 65%);
}

.on-dark .feature p,
.on-dark .plan-head p {
  color: rgba(255, 255, 255, 0.66);
}

.on-dark .f-icon,
.on-dark .plan-mark {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.on-dark .feature:hover .f-icon {
  background: linear-gradient(150deg, var(--gold), var(--gold-2));
  color: #1a1206;
}

/* ───────── 7. PRICING ON DARK ───────── */
.on-dark .plan-list {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.on-dark .plan-list li {
  color: rgba(255, 255, 255, 0.76);
}

.on-dark .plan-list .ic {
  background: rgba(124, 224, 176, 0.16);
  color: #7ce0b0;
}

.on-dark .plan-list li.inherit {
  color: #fff;
}

.on-dark .plan-list li.inherit .ic {
  background: rgba(227, 169, 63, 0.2);
  color: var(--gold-2);
}

.on-dark .plan-seats {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
}

.on-dark .plan-count {
  color: rgba(255, 255, 255, 0.5);
}

.on-dark .plan.is-popular {
  background: linear-gradient(180deg, rgba(227, 169, 63, 0.16), rgba(255, 255, 255, 0.05));
  border-color: rgba(227, 169, 63, 0.55);
  box-shadow: 0 30px 66px -22px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(227, 169, 63, 0.2);
}

.on-dark .plan-mark.gold {
  border-color: rgba(227, 169, 63, 0.42);
  background: rgba(227, 169, 63, 0.18);
  color: var(--gold-2);
}

/* ───────── 8. PLATFORM SHOWCASE ON DARK ───────── */
/* the app window itself stays light — it is a product screenshot */
.on-dark .showcase-tabs {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.on-dark .tab {
  color: rgba(255, 255, 255, 0.72);
}

.on-dark .tab:hover {
  color: #fff;
}

.on-dark .tab.is-active {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #1a1206;
  box-shadow: 0 14px 30px -10px rgba(196, 136, 26, 0.6);
}

.on-dark .window {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.85);
}

/* ───────── 9. MARQUEE STRIP ───────── */
.marquee-wrap {
  border-block: 0;
  background: var(--ink-deep);
}

.marquee-track span {
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}

.marquee-track i {
  color: var(--gold-2);
  opacity: 0.75;
}

/* ───────── 10. LIGHT SECTIONS — small adjustments ───────── */
/* cards need a touch more definition on sand than they did on near-white */
.sec--sand .pillar,
.sec--sand .map-card,
.sec--sand .split,
.sec--mist .eco-node {
  border-color: rgba(11, 27, 48, 0.1);
  box-shadow: 0 16px 40px -18px rgba(58, 40, 12, 0.3);
}

.sec--sand .pillar:hover,
.sec--mist .eco-node:hover {
  box-shadow: 0 26px 56px -20px rgba(58, 40, 12, 0.38);
}

/* ───────── 11. FOOTER — closes the page on dark ───────── */
.footer {
  border-top: 0;
  background:
    radial-gradient(760px 420px at 20% 0%, rgba(46, 123, 240, 0.16), transparent 62%),
    var(--ink-deep);
  color: rgba(255, 255, 255, 0.66);
}

.footer .logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
}

.footer-col h4 {
  color: #fff;
}

.footer-col a,
.footer-static {
  color: rgba(255, 255, 255, 0.62);
}

.footer-col a:hover {
  color: var(--gold-2);
}

.footer-static {
  color: rgba(255, 255, 255, 0.42);
}

.footer-social a {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.footer-social a:hover {
  color: var(--gold-2);
  border-color: rgba(227, 169, 63, 0.45);
  background: rgba(227, 169, 63, 0.12);
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.42);
}

/* ───────── 12. NAVBAR OVER THE DARK HERO ───────── */
/* Pull the hero up so its photograph runs behind the sticky bar — otherwise
   the bar sits on the page ground above the photo and the light-on-light
   nav links disappear. */
.hero {
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem));
}

/* until the user scrolls, the bar floats on the hero photograph */
.navbar:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
}

.navbar:not(.is-stuck) .nav-links a {
  color: rgba(255, 255, 255, 0.86);
}

.navbar:not(.is-stuck) .nav-links a:hover,
.navbar:not(.is-stuck) .nav-links a.is-active {
  color: #fff;
}

.navbar:not(.is-stuck) .nav-links a::after {
  background: var(--gold-2);
}

.navbar:not(.is-stuck) .nav-logo .logo-img {
  filter: brightness(0) invert(1);
}

.navbar:not(.is-stuck) .nav-call {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  backdrop-filter: blur(10px);
}

.navbar:not(.is-stuck) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.navbar:not(.is-stuck) .nav-toggle span {
  background: #fff;
}