/* ============================================================
   ATMOSLY HOMEPAGE — MIXED (alternating dark / light) OVERRIDE
   Loads LAST, after home.css / home-v2.css / home-v3.css.
   Keeps the page mostly light, but DARKENS selected sections so
   the whole page alternates dark <-> light end to end:
     Hero(L) Audit(L) Ops(L) 2am(D) Workflow(L) Platform(D)
     Tour(L) Stories(D) Versus(L) Pricing(D) FAQ(L) CTA Footer(D)
   Done by re-scoping the token system on the darkened sections,
   so their backgrounds + descendant text/borders flip together.
   Only linked by "Atmosly Homepage 3-mix.html".
   ============================================================ */

/* ---- Scoped dark token set: applied to the sections we darken.
   Because `background: var(--bg)` etc. resolve against these,
   the section bg + every token-based child color flips. ---- */
.stories,
.pricing {
  --bg:        #0A0F1C;
  --bg-tint:   #0E1424;
  --bg-sunken: #070B14;
  --card:      #131A2C;

  --ink-1: #F1F5FC;
  --ink-2: #BFCADD;
  --ink-3: #8A97AE;
  --ink-4: #66728A;
  --ink-5: #2F3A50;

  --line-1: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.065);
  --line-3: rgba(255,255,255,0.04);

  --accent-soft: rgba(46,107,255,0.16);
  --accent-ink:  #A9C2FF;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 16px -4px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 28px 60px -24px rgba(0,0,0,0.7), 0 10px 28px -10px rgba(0,0,0,0.5);

  position: relative;
  overflow: hidden;
}

/* soft glow so the darkened bands match the existing dark sections */
.stories::before,
.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 420px at 82% 6%, rgba(46,107,255,0.16), transparent 60%),
    radial-gradient(680px 420px at 8% 94%, rgba(32,190,242,0.10), transparent 60%);
  pointer-events: none;
}
.stories > .container,
.pricing > .container { position: relative; z-index: 1; }

/* ---- Headings inherit body's already-resolved dark color, so they
   don't pick up the re-scoped --ink-1. Set it explicitly. ---- */
.stories .section-head h2,
.pricing .section-head h2 { color: var(--ink-1); }

/* ---- Hardcoded #fff surfaces inside the darkened sections ---- */

/* STORIES */
.stories .story { background: var(--card); border-color: var(--line-1); }
.stories .story:hover { border-color: rgba(255,255,255,0.18); }
.stories .story-logo { background: rgba(255,255,255,0.05); }
.stories .story-nums > div { background: rgba(255,255,255,0.035); }

/* PRICING */
.pricing .price-card { background: var(--card); border-color: var(--line-1); }
.pricing .price-card.is-featured {
  background: linear-gradient(180deg, rgba(46,107,255,0.12) 0%, var(--card) 100%);
  box-shadow: 0 24px 50px -16px rgba(46,107,255,0.30);
}
.pricing .price-card .btn-sec {
  background: rgba(255,255,255,0.06);
  color: var(--ink-1);
  border-color: var(--line-1);
}
.pricing .price-card .btn-sec:hover { background: rgba(255,255,255,0.12); }