/* =====================================================================
   DIGITAL FLOW — SIGNAL FIELD & AMBIENT ARCHITECTURE (BRAND SYSTEM 2026)
   
   Layered Ambient Hierarchy (Refined Carbon Foundation):
   Layer A — Base World: Deep Volcanic Carbon (#1C1D1B)
   Layer B — Architectural Grid: Ultra-quiet, razor-thin blueprint (rgba(244, 240, 231, 0.012), 80px)
   Layer C — Star / Signal Field: Subpixel optical points (180 stars), canonical multi-brand glints
   Layer D — Cursor Constellations: Visible, alive 0.80px lines (~0.45-0.55 alpha)
   Layer E — Content & Floating Islands: Controlled negative space in deep Carbon depth
   
   Brand Chromatic Rules:
   - Base World Foundation: Carbon (#1C1D1B) & Ink (#1D1D1B)
   - Zero pure white: Replaced with Warm White (#F2EEE6) and Cream (#F4F0E7)
   - Canonical 4-Signal System: Acid Green (#B6FF2E), Electric Yellow (#F2FF24),
     Electric Orange (#FF6A1A), Hot Pink (#FF3D9A)
   - Primary CTA Refinement: Refined luxury mineral base with Acid Green perimeter and illuminated live signal
   - Handcrafted wax-pencil editorial gesture for key phrasing
   - Section-level color personality without chromatic chaos
   ===================================================================== */

/* 1. Universal Foundation (Layer A: Deep Volcanic Carbon Base) */
html,
body {
  background-color: #1C1D1B !important;
  color: #F2EEE6;
}

/* 2. Unified Architectural Grid (Layer B: Precise, Ultra-Quiet Blueprint) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(to right, rgba(244, 240, 231, 0.012) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 240, 231, 0.012) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* 3. Persistent Star & Signal Field (Layer C: Canvas 2D) */
.df-signal-field {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* 4. Content Architecture & Layering */
.proto-container {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

/* 5. Section Continuity & Deep Carbon Depth in Empty Space */

/* Opening Scene (Hero -> Connected Orbit) — 100% frozen structure, transparent envelope */
.continuous-scene,
.scene-viewport {
  background-color: transparent !important;
  background: transparent !important;
}

/* Section 02 (Your Business, Specifically) — 100% frozen structure, unboxed floating overview */
.bts,
.bts.ambient-chapter-partial {
  background-color: transparent !important;
  background: transparent !important;
}

/* Remove all residual atmospheric fog, bloom haze, tinted smoke */
.bts__intro::before,
.env-glow,
.env-grid,
.people.ambient-chapter-quiet::before {
  display: none !important;
}

/* Section 03: Human Trust / Meet Digital Flow — Architectural Dossier Island */
.people,
.people.ambient-chapter-quiet {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: clamp(64px, 9vh, 108px) clamp(16px, 4vw, 40px) !important;
  position: relative;
}

.people::before,
.people::after {
  display: none !important;
}

.people__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vh, 4rem) clamp(1.75rem, 4vw, 3.5rem);
  background: rgba(28, 29, 27, 0.90) !important;
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  border: 1px solid rgba(244, 240, 231, 0.09) !important;
  border-radius: 24px;
  box-shadow: 
    0 32px 84px -24px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(244, 240, 231, 0.08) inset !important;
  position: relative;
  z-index: 1;
}

/* Section 04: Three Paths into Your System — Continuous Field Flow with Deep Mineral Backing */
.paths,
.paths.ambient-chapter-structured {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

.path {
  background: #1C1D1B !important;
  border: 1px solid rgba(244, 240, 231, 0.10) !important;
  box-shadow: 0 18px 45px -24px rgba(0, 0, 0, 0.85) !important;
}

.path:hover {
  background: #232522 !important;
  border-color: rgba(244, 240, 231, 0.24) !important;
  box-shadow: 0 24px 52px -20px rgba(0, 0, 0, 0.92) !important;
}

/* Section 05: Meet our Digital Guide — Architectural Foundation */
.agent.ambient-chapter-reentry {
  background: #1C1D1B !important;
  border: 1px solid rgba(244, 240, 231, 0.12) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85) !important;
}

.surface-island--guide-ready,
.agent--visual-break-ready {
  background: rgba(28, 29, 27, 0.92) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(244, 240, 231, 0.12) !important;
  box-shadow: 0 32px 70px -20px rgba(0, 0, 0, 0.92) !important;
}

/* Section 06: Closing / Conversation — Transparent Flow into Grounded Card */
.close,
.close.ambient-chapter-quiet {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

.close__inner {
  background: rgba(28, 29, 27, 0.88) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(244, 240, 231, 0.10) !important;
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.90) !important;
}

/* Footer Grounding Base */
.foot {
  background-color: #1C1D1B !important;
  border-top: 1px solid rgba(244, 240, 231, 0.08) !important;
  position: relative;
  z-index: 2;
}

/* =====================================================================
   6. HERO SERVICE EYEBROW — ELEGANT EDITORIAL MICROCOPY
   No boxes, no capsules, no backgrounds. Typography-only color carry.
   Sequence: Green -> Yellow -> Neutral -> Orange -> Pink
   ===================================================================== */
.df-capability-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 24px !important;
}

.df-capability-eyebrow span {
  font-family: var(--df-font-mono, "IBM Plex Mono", monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

/* 1. WEBSITES: Acid Green (#B6FF2E) */
.df-capability-eyebrow .eyebrow-item--green {
  color: #B6FF2E !important;
}

/* 2. APPS: Electric Yellow (#F2FF24) */
.df-capability-eyebrow .eyebrow-item--yellow {
  color: #F2FF24 !important;
}

/* 3. MARKETING: Neutral Muted Grey / Warm White System */
.df-capability-eyebrow .eyebrow-item--neutral {
  color: rgba(244, 240, 231, 0.65) !important;
}

/* 4. AUTOMATION: Electric Orange (#FF6A1A) */
.df-capability-eyebrow .eyebrow-item--orange {
  color: #FF6A1A !important;
}

/* 5. CUSTOM SYSTEMS: Hot Pink (#FF3D9A) */
.df-capability-eyebrow .eyebrow-item--pink {
  color: #FF3D9A !important;
}

/* Subtle, Restrained Neutral Separator */
.df-capability-eyebrow .eyebrow-sep {
  color: rgba(244, 240, 231, 0.30) !important;
  font-size: 8px !important;
  user-select: none !important;
  line-height: 1 !important;
}

@media (max-width: 640px) {
  .df-capability-eyebrow {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .df-capability-eyebrow span {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }
  .df-capability-eyebrow .eyebrow-sep {
    font-size: 6px !important;
  }
}

/* =====================================================================
   7. EDITORIAL WAX-PENCIL GESTURE (HANDCRAFTED UNDERLINE)
   Subtle human underline gesture on key phrasing
   ===================================================================== */
.editorial-mark {
  position: relative;
  display: inline;
  white-space: nowrap;
}

.editorial-mark::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -3px;
  height: 7px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.editorial-mark--yellow::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4.5 C 50 1.5, 120 7.5, 199 3.5' stroke='%23F2FF24' stroke-width='2.6' stroke-linecap='round' fill='none' opacity='0.75'/%3E%3C/svg%3E");
}

.editorial-mark--orange::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 3.5 C 60 6.5, 140 1.5, 199 4.5' stroke='%23FF6A1A' stroke-width='2.6' stroke-linecap='round' fill='none' opacity='0.75'/%3E%3C/svg%3E");
}

.editorial-mark--green::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4.5 C 70 2, 130 6.5, 199 3' stroke='%23B6FF2E' stroke-width='2.6' stroke-linecap='round' fill='none' opacity='0.75'/%3E%3C/svg%3E");
}

/* =====================================================================
   7b. LIVE EDITORIAL MARKS & DRAW-ON MOTION ENGINE
   Chalk / Wax-Pencil / Imperfect Underline Tactile Physical Drawing
   ===================================================================== */
.editorial-mark.has-live-mark::after,
.editorial-eyebrow.has-live-mark::after,
.editorial-cue.has-live-mark::after {
  display: none !important;
}

.editorial-mark__svg,
.editorial-eyebrow__svg,
.editorial-cue__svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  display: block;
  opacity: 1;
  transition: opacity 0.50s ease-out;
}

.editorial-mark__svg {
  left: -2px;
  right: -2px;
  bottom: -4px;
  width: calc(100% + 4px);
  height: 9px;
  overflow: visible;
}

.editorial-eyebrow__svg {
  left: -2px;
  right: -6px;
  bottom: -6px;
  width: calc(100% + 8px);
  height: 14px;
  overflow: visible;
}

.editorial-cue__svg {
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 8px;
  overflow: visible;
}

/* Fallback: if live mark is not initialized, keep SVG hidden */
.editorial-mark:not(.has-live-mark) .editorial-mark__svg,
.editorial-eyebrow:not(.has-live-mark) .editorial-eyebrow__svg,
.editorial-cue:not(.has-live-mark) .editorial-cue__svg {
  display: none !important;
}

/* Redraw Sequence: Soft Dissolve before physically redrawing (People only) */
.people.is-fading .editorial-mark__svg {
  opacity: 0 !important;
}

/* Instant hidden reset for the next drawing pass */
.is-reset .df-mask-path,
.is-reset .df-mask-path--hero,
.is-reset .df-mask-path--people {
  transition: none !important;
  stroke-dashoffset: 200 !important;
}
.is-reset .df-mask-path--eyebrow-primary,
.is-reset .df-mask-path--eyebrow-secondary {
  transition: none !important;
  stroke-dashoffset: 250 !important;
}
.is-reset .df-mask-path--cue {
  transition: none !important;
  stroke-dashoffset: 170 !important;
}

/* Mask path stroke-dashoffset transitions (Hero & People: approved unhurried tactile drawing) */
.df-mask-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.40s cubic-bezier(0.25, 0.08, 0.25, 1.0);
}

.df-mask-path--hero {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.92s cubic-bezier(0.25, 0.08, 0.25, 1.0);
}

.df-mask-path--people {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.65s cubic-bezier(0.25, 0.08, 0.25, 1.0);
}

/* Section 02 Forward Draw Base (0.85s - 1.0s territory) */
.df-mask-path--eyebrow-primary {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  transition: stroke-dashoffset 0.92s cubic-bezier(0.25, 0.08, 0.25, 1.0);
}

.df-mask-path--eyebrow-secondary {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  transition: stroke-dashoffset 0.78s cubic-bezier(0.25, 0.08, 0.25, 1.0) 0.16s;
}

.df-mask-path--cue {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  transition: stroke-dashoffset 0.88s cubic-bezier(0.25, 0.08, 0.25, 1.0);
}

/* Triggered Forward Draw State: Stroke travels across from Left to Right */
.is-drawn:not(.is-undrawing) .df-mask-path--eyebrow-primary,
.is-drawn:not(.is-undrawing) .df-mask-path--eyebrow-secondary,
.is-drawn:not(.is-undrawing) .df-mask-path--cue,
.is-drawn:not(.is-undrawing) .df-mask-path--hero,
.is-drawn .df-mask-path,
.is-drawn .df-mask-path--people {
  stroke-dashoffset: 0 !important;
}

/* Section 02 & Hero Reverse Undraw: Physical retraction from Right to Left (No fade-out) */
.is-undrawing .df-mask-path--hero {
  stroke-dashoffset: 200 !important;
  transition: stroke-dashoffset 0.80s cubic-bezier(0.25, 0.08, 0.25, 1.0) !important;
}

.is-undrawing .df-mask-path--eyebrow-secondary {
  stroke-dashoffset: 250 !important;
  transition: stroke-dashoffset 0.65s cubic-bezier(0.25, 0.08, 0.25, 1.0) 0s !important;
}

.is-undrawing .df-mask-path--eyebrow-primary {
  stroke-dashoffset: 250 !important;
  transition: stroke-dashoffset 0.78s cubic-bezier(0.25, 0.08, 0.25, 1.0) 0.10s !important;
}

.is-undrawing .df-mask-path--cue {
  stroke-dashoffset: 170 !important;
  transition: stroke-dashoffset 0.78s cubic-bezier(0.25, 0.08, 0.25, 1.0) !important;
}

/* Mobile: Tastefully calibrated without losing physical hand-drawn quality */
@media (max-width: 640px) {
  .df-mask-path--hero {
    transition-duration: 0.85s;
  }
  .is-undrawing .df-mask-path--hero {
    transition-duration: 0.75s !important;
  }
  .df-mask-path--eyebrow-primary {
    transition-duration: 0.85s;
  }
  .df-mask-path--eyebrow-secondary {
    transition-duration: 0.70s;
    transition-delay: 0.12s;
  }
  .df-mask-path--cue {
    transition-duration: 0.80s;
  }
  .is-undrawing .df-mask-path--eyebrow-secondary {
    transition-duration: 0.55s !important;
  }
  .is-undrawing .df-mask-path--eyebrow-primary {
    transition-duration: 0.70s !important;
    transition-delay: 0.08s !important;
  }
  .is-undrawing .df-mask-path--cue {
    transition-duration: 0.70s !important;
  }
  .df-mask-path--people {
    transition-duration: 1.40s;
  }
}

/* Accessibility: Prefers Reduced Motion (Strictly Static) */
@media (prefers-reduced-motion: reduce) {
  .editorial-mark__svg,
  .editorial-eyebrow__svg,
  .editorial-cue__svg,
  .df-mask-path,
  .df-mask-path--hero,
  .df-mask-path--eyebrow-primary,
  .df-mask-path--eyebrow-secondary,
  .df-mask-path--cue,
  .df-mask-path--people {
    transition: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}

/* =====================================================================
   8. SECTION CHROMATIC PERSONALITY & INDEX NUMBER MAPPING
   ===================================================================== */
.eyebrow,
.bts .eyebrow,
.people .eyebrow,
.paths .eyebrow,
.close .eyebrow {
  color: var(--df-text-muted, rgba(244, 240, 231, 0.70)) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
}

/* =====================================================================
   SECTION 02 EDITORIAL TEXT ACCENTS ("HOW WE CAN HELP")
   - Handcrafted blackboard chalk marking (imperfect, lightly distressed)
   - Brand signals: Acid Green + Electric Yellow chalk mark + Electric Orange cue
   - Increased breathing room, visibility, and editorial presence
   ===================================================================== */

/* 1. "HOW WE CAN HELP" Label */
.editorial-eyebrow {
  display: inline-block !important;
  font-family: var(--df-font-mono, "IBM Plex Mono", monospace) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--df-signal-green, #B6FF2E) !important;
  margin: 0 0 24px 0 !important;
  position: relative !important;
  padding-bottom: 8px !important;
}

/* Handcrafted Blackboard Chalk Underline */
.editorial-eyebrow::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -6px;
  bottom: -6px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 16' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 42 4.5, 92 10, 142 6 C 182 3, 218 8.3, 244 5.3' stroke='%23F2FF24' stroke-width='2.6' stroke-linecap='round' stroke-dasharray='48 2 28 1.5 58 2.5 35 1' fill='none' opacity='0.90'/%3E%3Cpath d='M16 10 C 55 7.3, 102 11, 152 8.5 C 190 6.3, 222 9.3, 242 7' stroke='%23F2FF24' stroke-width='1.2' stroke-linecap='round' stroke-dasharray='22 6 34 4 28 5' fill='none' opacity='0.55'/%3E%3C/svg%3E");
}

/* 2. Main Headline: Elegant, Crisp & High-Contrast */
.editorial-title {
  color: var(--df-cream, #F4F0E7) !important;
  letter-spacing: -0.025em !important;
}

/* 3. Supporting Paragraph: Warm, Readable & Balanced */
.editorial-result {
  color: rgba(244, 240, 231, 0.84) !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.55 !important;
  margin-bottom: 30px !important;
}

/* 4. "SCROLL TO DISCOVER ↓": Clearer Editorial Presence & Micro-Signal (Overview State Only) */
.editorial-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--df-font-mono, "IBM Plex Mono", monospace) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--df-signal-orange, #FF6A1A) !important;
  margin: 0 !important;
  position: relative !important;
  padding-bottom: 6px !important;
}

.editorial-cue[style*="display: none"] {
  display: none !important;
}

.editorial-cue::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--df-signal-orange, #FF6A1A);
  box-shadow: 0 0 8px rgba(255, 106, 26, 0.75);
}

.editorial-cue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 10' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 35 3, 80 6.5, 125 4.5 C 145 3.2, 162 4.8, 168 4' stroke='%23FF6A1A' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='35 2 20 1 45 2' fill='none' opacity='0.80'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .editorial-eyebrow {
    font-size: 11px !important;
    margin-bottom: 16px !important;
  }
  .editorial-cue {
    font-size: 10.5px !important;
  }
}

/* Section Indexes: Distinctive Brand Signal per Chapter */
.bts .eyebrow__index {
  color: var(--df-signal-yellow, #F2FF24) !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

.people .eyebrow__index {
  color: var(--df-signal-orange, #FF6A1A) !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

.paths .eyebrow__index {
  color: var(--df-signal-pink, #FF3D9A) !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

.agent .eyebrow__index {
  color: var(--df-signal-yellow, #F2FF24) !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

.close .eyebrow__index {
  color: var(--df-signal-green, #B6FF2E) !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

/* Section 02: Sector Cards Subtle Signals */
article.card[data-sector="health"] .card__cue {
  color: var(--df-signal-green, #B6FF2E) !important;
}
article.card[data-sector="health"]:hover {
  border-color: rgba(182, 255, 46, 0.40) !important;
}

article.card[data-sector="restaurants"] .card__cue {
  color: var(--df-signal-orange, #FF6A1A) !important;
}
article.card[data-sector="restaurants"]:hover {
  border-color: rgba(255, 106, 26, 0.40) !important;
}

article.card[data-sector="trades"] .card__cue {
  color: var(--df-signal-yellow, #F2FF24) !important;
}
article.card[data-sector="trades"]:hover {
  border-color: rgba(242, 255, 36, 0.40) !important;
}

article.card[data-sector="shops"] .card__cue {
  color: var(--df-signal-pink, #FF3D9A) !important;
}
article.card[data-sector="shops"]:hover {
  border-color: rgba(255, 61, 154, 0.40) !important;
}

article.card[data-sector="professional"] .card__cue {
  color: var(--df-cream, #F4F0E7) !important;
}
article.card[data-sector="professional"]:hover {
  border-color: rgba(244, 240, 231, 0.35) !important;
}

/* Section 03: Principle Card Accent Bars */
.people.is-revealed .principles li:nth-child(1)::before {
  background: var(--df-signal-green, #B6FF2E) !important;
}
.people.is-revealed .principles li:nth-child(2)::before {
  background: var(--df-signal-orange, #FF6A1A) !important;
}
.people.is-revealed .principles li:nth-child(3)::before {
  background: var(--df-signal-yellow, #F2FF24) !important;
}

/* Section 04: Path Buttons & Accents */
.paths .path:last-child .btn--ghost:hover {
  border-color: rgba(242, 255, 36, 0.50) !important;
  color: #F2FF24 !important;
}

/* Section 05: Guide Dialogue Accents */
.agent__preview-label {
  color: var(--df-signal-orange, #FF6A1A) !important;
}
.agent__next-label {
  color: var(--df-signal-yellow, #F2FF24) !important;
}
.agent__msg--guide {
  background: rgba(24, 25, 23, 0.90) !important;
  border: 1px solid rgba(244, 240, 231, 0.12) !important;
}
.agent__msg--guide .agent__who {
  color: var(--df-signal-green, #B6FF2E) !important;
}

/* =====================================================================
   9. LUXURY PRIMARY CTA BUTTON ALIGNMENT
   Dark mineral base + Acid Green illuminated perimeter + live signal
   ===================================================================== */
.nav__cta {
  background: linear-gradient(135deg, rgba(182, 255, 46, 0.12) 0%, rgba(29, 29, 27, 0.94) 80%) !important;
  color: #F4F0E7 !important;
  border: 1.2px solid rgba(182, 255, 46, 0.70) !important;
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.50), 
    0 0 10px -2px rgba(182, 255, 46, 0.20) !important;
  gap: 6px !important;
}
.nav__cta::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #B6FF2E;
  box-shadow: 0 0 6px #B6FF2E;
}
.nav__cta:hover {
  background: linear-gradient(135deg, rgba(182, 255, 46, 0.22) 0%, rgba(29, 29, 27, 0.98) 80%) !important;
  border-color: rgba(182, 255, 46, 0.95) !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.70), 
    0 0 16px -2px rgba(182, 255, 46, 0.35) !important;
}

.close .btn--primary,
.path .btn--primary,
.agent .btn--primary {
  background: linear-gradient(135deg, rgba(182, 255, 46, 0.12) 0%, rgba(29, 29, 27, 0.94) 80%) !important;
  color: #F4F0E7 !important;
  border: 1.5px solid rgba(182, 255, 46, 0.75) !important;
  box-shadow: 
    0 4px 20px -2px rgba(0, 0, 0, 0.70), 
    0 0 16px -4px rgba(182, 255, 46, 0.25) !important;
  gap: 8px !important;
}
.close .btn--primary::before,
.path .btn--primary::before,
.agent .btn--primary::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B6FF2E;
  box-shadow: 0 0 8px #B6FF2E;
}
.close .btn--primary:hover,
.path .btn--primary:hover,
.agent .btn--primary:hover {
  background: linear-gradient(135deg, rgba(182, 255, 46, 0.22) 0%, rgba(29, 29, 27, 0.96) 80%) !important;
  border-color: rgba(182, 255, 46, 0.95) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 
    0 8px 24px -2px rgba(0, 0, 0, 0.85), 
    0 0 20px -2px rgba(182, 255, 46, 0.35) !important;
}

/* 10. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .df-signal-field {
    opacity: 0.4;
  }
}