/* ═══════════════════════════════════════════════════════════════════════
   Homepage sections - carrying the hero's material down the page
   ═══════════════════════════════════════════════════════════════════════
   The hero establishes one idea: obsidian with light moving inside it.
   Below the fold that language is continued with three rules.

   1. One continuous ground. The page previously alternated dark / slightly
      -less-dark bands (.bg-2, .grid-bg) to separate sections. Banding is the
      clearest "template" tell there is, and it fights the hero's single deep
      surface. Sections are now separated by the same lilac hairline the hero
      ends on, with light pooling behind each heading instead.

   2. Light weight, large scale. Headings drop from 700 to 300 to match the
      hero. Contrast comes from size and spacing, not from shouting.

   3. Light instead of lift. Cards previously rose on hover - a stock motion.
      They now bloom along their top edge, as though lit from within, which
      is the same idea as the hero surface.

   Loaded after home.page.css and intentionally overrides the older rules.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  --ob-void:   #07070C;
  --ob-indigo: #4F46E5;
  --ob-violet: #7C3AED;
  --ob-lilac:  #A78BFA;
  --ob-ice:    #EEEDFF;
  --ob-mute:   rgba(238, 237, 255, .56);
  --ob-faint:  rgba(238, 237, 255, .34);
  --ob-line:   rgba(238, 237, 255, .08);
}

/* ── One continuous ground ─────────────────────────────────────────── */

body.glow-top { background: var(--ob-void); }

.section,
.section-sm {
  position: relative;
  padding: clamp(84px, 11vw, 148px) 0;
  background: transparent;
}

/* Neutralise the old alternating bands and decorative grids. */
.section.bg-2,
.section.grid-bg,
.section.ai-section {
  background: transparent !important;
  border-top: none !important;
}

.section[style*="background"] { background: transparent !important; }
.section[style*="border-top"] { border-top: none !important; }

/* The one separator: a hairline that catches the light in the middle,
   matching the rule the hero ends on. */
.section + .section::before,
.section + .section-sm::before,
.section-sm + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .26), transparent);
}

/* Light pooling behind each section's heading. */
.section > .container { position: relative; }

.section > .container::before {
  content: '';
  position: absolute;
  top: -12%;
  left: 50%;
  width: 760px;
  height: 380px;
  max-width: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124, 58, 237, .13), transparent 70%);
}

.section > .container > * { position: relative; z-index: 1; }

/* ── Section headings ──────────────────────────────────────────────── */

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-bottom: 20px;
  border: none;
  background: none;
  border-radius: 0;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ob-faint);
}

/* A short rule instead of a pill: it marks the start of a section rather
   than decorating a word. */
.section-tag::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ob-lilac));
}

.text-center .section-tag::after {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--ob-lilac), transparent);
}

.section h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.032em;
  color: var(--ob-ice);
}

.section h2 strong,
.section h2 em {
  font-style: normal;
  font-weight: 600;
  color: var(--ob-lilac);
}

.section .text-muted {
  color: var(--ob-mute);
  line-height: 1.72;
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.glass,
.feature-card {
  position: relative;
  border: 1px solid var(--ob-line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(238, 237, 255, .035), rgba(238, 237, 255, .012));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  transition: border-color .35s ease, background .35s ease;
}

/* Lit from within along the top edge, rather than lifting off the page. */
.glass::after,
.feature-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--ob-lilac), transparent);
  transition: opacity .35s ease;
  pointer-events: none;
}

.glass:hover,
.feature-card:hover {
  transform: none;
  border-color: rgba(167, 139, 250, .26);
  background: linear-gradient(180deg, rgba(238, 237, 255, .06), rgba(238, 237, 255, .02));
  box-shadow: none;
}

.glass:hover::after,
.feature-card:hover::after { opacity: 1; }

.features-grid { gap: 18px; }

.feature-card { padding: 30px 26px; }

/* Thin-stroke marks replace the emoji set: emoji render differently on every
   OS and read as placeholder art at this size. */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border: 1px solid rgba(167, 139, 250, .2);
  border-radius: 11px;
  background: rgba(167, 139, 250, .07);
  color: var(--ob-lilac);
  font-size: 0;
}

.feature-icon svg { width: 19px; height: 19px; }

.feature-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ob-ice);
  margin-bottom: 10px;
}

.feature-card p {
  font-size: .9062rem;
  line-height: 1.68;
  color: var(--ob-mute);
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ob-lilac);
  text-decoration: none;
  opacity: .82;
  transition: opacity .25s ease, gap .25s ease;
}

.feature-card:hover .feature-link { opacity: 1; gap: 10px; }

/* ── Closing call to action ────────────────────────────────────────── */

.cta-strip {
  border-top: 1px solid var(--ob-line);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(124, 58, 237, .16), transparent 70%),
    var(--ob-void) !important;
}

.cta-strip h2 { font-weight: 300; }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .section, .section-sm { padding: 68px 0; }
  .section > .container::before { width: 420px; height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .glass, .feature-card, .feature-link,
  .glass::after, .feature-card::after { transition: none; }
}

/* ── Industry marquee ──────────────────────────────────────────────── */
/* A quiet statement of who this is for. Set in one weight, one colour,
   with the ends dissolving into the page so it reads as ambient context
   rather than a banner demanding to be read. */

.marquee-wrap,
.marquee-section {
  border-top: 1px solid var(--ob-line);
  border-bottom: 1px solid var(--ob-line);
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ob-faint);
  white-space: nowrap;
  transition: color .3s ease;
}

.marquee-item:hover { color: var(--ob-lilac); }

.marquee-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(167, 139, 250, .3);
  margin: 0 26px;
  flex-shrink: 0;
}