/* ========================================================================
   7TRIBES — THE UNITY PLATFORM
   Shared visual foundation for every public 7trb.com route.
   The system uses sophisticated dark environments: burgundy for community,
   bronze for commerce, midnight for technology, forest for circulation, and
   espresso-gold for education. It intentionally preserves page content and
   functional DOM structure while unifying depth, surfaces, typography, and
   responsive behavior.
   ======================================================================== */

:root {
  --unity-ink: #fff6e4;
  --unity-cream: #eadfc8;
  --unity-muted: #c9b898;
  --unity-gold: #e7b852;
  --unity-gold-bright: #ffdd7a;
  --unity-line: rgba(255, 215, 122, 0.24);
  --unity-radius: 18px;
  --unity-radius-lg: 24px;
  --unity-shadow: 0 20px 56px rgba(0, 0, 0, 0.38);
}

body[data-unity-env] {
  --unity-deep: #0d0e12;
  --unity-mid: #171a22;
  --unity-lift: #222633;
  --unity-glow: rgba(231, 184, 82, 0.16);
  background:
    radial-gradient(ellipse 80% 42% at 12% -8%, var(--unity-glow), transparent 62%),
    radial-gradient(ellipse 60% 35% at 96% 52%, rgba(255, 215, 122, 0.055), transparent 72%),
    linear-gradient(160deg, var(--unity-mid) 0%, var(--unity-deep) 52%, #07080a 100%) !important;
  color: var(--unity-ink) !important;
  text-rendering: optimizeLegibility;
}

body[data-unity-env="community"] {
  --unity-deep: #15080c;
  --unity-mid: #291017;
  --unity-lift: #3a1921;
  --unity-glow: rgba(133, 35, 54, 0.29);
}

body[data-unity-env="commerce"] {
  --unity-deep: #130b05;
  --unity-mid: #291508;
  --unity-lift: #3a2110;
  --unity-glow: rgba(160, 89, 29, 0.25);
}

body[data-unity-env="technology"] {
  --unity-deep: #070b17;
  --unity-mid: #101a31;
  --unity-lift: #1a2947;
  --unity-glow: rgba(47, 91, 167, 0.28);
}

body[data-unity-env="circulation"] {
  --unity-deep: #07130d;
  --unity-mid: #10251a;
  --unity-lift: #1b3626;
  --unity-glow: rgba(47, 124, 72, 0.26);
}

body[data-unity-env="education"] {
  --unity-deep: #150d07;
  --unity-mid: #27160c;
  --unity-lift: #382414;
  --unity-glow: rgba(184, 131, 27, 0.23);
}

/* Header, navigation, and mobile drawer */
body[data-unity-env] :is(.top-nav, .topbar, .site-header, .header, header[class*="header"]):not(.drawer-header) {
  background: linear-gradient(100deg, rgba(8, 9, 13, 0.96), color-mix(in srgb, var(--unity-mid) 82%, #030305 18%)) !important;
  border-color: var(--unity-line) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

body[data-unity-env] :is(.mobile-drawer, .drawer, .menu-overlay) {
  border-color: var(--unity-line) !important;
}

body[data-unity-env] :is(.mobile-drawer, .drawer) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--unity-mid) 94%, #050506 6%), var(--unity-deep)) !important;
}

body[data-unity-env] :is(.nav-brand, .brand, .main-nav a, .nav-links a, .top-nav a, .topbar a) {
  color: var(--unity-gold-bright);
}

/* Typography and section environments */
body[data-unity-env] :is(h1, h2, h3, h4, h5, h6, .title, .page-title, .hero-title) {
  color: var(--unity-ink);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
}

body[data-unity-env] :is(.section, section[class*="section"], main > section:not(.hero):not(.hero-banner):not([class*="hero"])) {
  position: relative;
  isolation: isolate;
}

body[data-unity-env] :is(.section, section[class*="section"], main > section:not(.hero):not(.hero-banner):not([class*="hero"]))::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg, rgba(255, 215, 122, 0.025), transparent 40%, color-mix(in srgb, var(--unity-lift) 28%, transparent) 100%);
  border-block: 1px solid rgba(255, 215, 122, 0.065);
}

body[data-unity-env] :is(.section, section[class*="section"], main > section:not(.hero):not(.hero-banner):not([class*="hero"])):nth-of-type(even)::after {
  background: linear-gradient(112deg, color-mix(in srgb, var(--unity-lift) 36%, transparent), transparent 55%, rgba(255, 215, 122, 0.035));
}

body[data-unity-env] :is(p, li, td, th, label, .muted, .subtitle, .lede, .hint, .meta) {
  color: var(--unity-cream);
}

body[data-unity-env] :is(a:not(.btn), .link, .eco-map-link) {
  color: var(--unity-gold-bright);
}

/* Reusable content surfaces */
body[data-unity-env] :is(.card, .box, .panel, .surface, .info-card, .summary-card, .product-card, .business-card, .ecosystem-card, .roadmap-card, .callout, .accordion, details, .nuru-info, .metric, .stat, .kpi, .cta-panel, .hero-card, .section-box, .join-panel, .profile-preview, .cart-panel, .lane, .frame-wrap, .contract-box) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--unity-lift) 72%, #090a0d 28%), color-mix(in srgb, var(--unity-mid) 84%, #050506 16%)) !important;
  border-color: var(--unity-line) !important;
  box-shadow: var(--unity-shadow);
}

body[data-unity-env] :is(.card, .box, .panel, .surface, .info-card, .summary-card, .product-card, .business-card, .ecosystem-card, .roadmap-card, .callout, .accordion, details, .nuru-info, .metric, .stat, .kpi, .cta-panel, .hero-card, .section-box, .join-panel, .profile-preview, .cart-panel, .lane, .frame-wrap, .contract-box):hover {
  border-color: rgba(255, 221, 122, 0.46) !important;
}

/* Button family */
body[data-unity-env] :is(.btn, .btn-primary, .gold, .primary, .buy-btn, .hero-btn, .invest-btn) {
  border-color: rgba(255, 221, 122, 0.55) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.24), 0 0 18px rgba(231, 184, 82, 0.1);
}

body[data-unity-env] :is(.btn:not(.ghost):not(.btn-ghost), .btn-primary, .gold, .primary, .buy-btn, .hero-btn, .invest-btn) {
  background: linear-gradient(110deg, var(--unity-gold-bright), var(--unity-gold) 48%, #b67b1d) !important;
  color: #160d03 !important;
}

body[data-unity-env] :is(.btn.ghost, .btn-ghost, .secondary, .outline) {
  background: rgba(0, 0, 0, 0.18) !important;
  color: var(--unity-ink) !important;
  border-color: rgba(255, 215, 122, 0.32) !important;
}

body[data-unity-env] :is(.btn, button, .buy-btn, .hero-btn, .invest-btn):hover {
  transform: translateY(-2px);
}

/* Forms, data views, and truthful empty states */
body[data-unity-env] :is(input, select, textarea) {
  background: rgba(4, 5, 7, 0.62) !important;
  color: var(--unity-ink) !important;
  border-color: rgba(255, 215, 122, 0.24) !important;
  border-radius: 12px;
}

body[data-unity-env] :is(input, select, textarea):focus {
  outline: 2px solid rgba(255, 215, 122, 0.7);
  outline-offset: 2px;
}

body[data-unity-env] :is(table, thead, tbody, tr, th, td) {
  border-color: rgba(255, 215, 122, 0.14) !important;
}

body[data-unity-env] thead {
  background: color-mix(in srgb, var(--unity-lift) 78%, #050506 22%);
}

body[data-unity-env] :is(.empty, .empty-state, .unavailable, .zero-state) {
  border: 1px dashed rgba(255, 215, 122, 0.26);
  background: rgba(0, 0, 0, 0.18);
  color: var(--unity-muted);
}

/* Footer */
body[data-unity-env] :is(footer, .footer, .premium-footer) {
  background: linear-gradient(160deg, rgba(4, 5, 7, 0.94), color-mix(in srgb, var(--unity-deep) 84%, #030303 16%)) !important;
  border-color: rgba(255, 215, 122, 0.16) !important;
}

/* Mobile containment */
@media (max-width: 768px) {
  body[data-unity-env] :is(.section, section[class*="section"], main > section:not(.hero):not(.hero-banner):not([class*="hero"])) {
    padding-inline: 0;
  }
  body[data-unity-env] :is(.card, .box, .panel, .surface, .info-card, .summary-card, .product-card, .business-card, .ecosystem-card, .roadmap-card, .callout, .accordion, details, .nuru-info, .metric, .stat, .kpi, .cta-panel, .hero-card, .section-box, .join-panel, .profile-preview, .cart-panel, .lane, .frame-wrap, .contract-box) {
    border-radius: 16px;
  }
  body[data-unity-env] table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  body[data-unity-env] :is(.controls, .actions, .btn-group, .filter-row, .filters) {
    min-width: 0;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-unity-env] * { transition-duration: 0.01ms !important; }
}

/* ========================================================================
   HOMEPAGE ATMOSPHERE REFINEMENT
   Preserves the existing Unity Platform structure while making each journey
   phase visually distinct through restrained, low-saturation dark layers.
   ======================================================================== */
body[data-unity-env="education"] main > .section {
  overflow: hidden;
  border-top: 1px solid rgba(255, 221, 122, 0.09);
  border-bottom: 1px solid rgba(0, 0, 0, 0.32);
  background-color: #0b0a09;
}

body[data-unity-env="education"] .unity-platform-section {
  background:
    radial-gradient(ellipse 64% 75% at 82% 20%, rgba(177, 101, 26, 0.18), transparent 67%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(231, 184, 82, 0.09), transparent 70%),
    linear-gradient(132deg, #12100f 0%, #21160d 50%, #0c0b0a 100%) !important;
}

body[data-unity-env="education"] .struggle-section {
  background:
    radial-gradient(ellipse 64% 55% at 8% 20%, rgba(132, 75, 37, 0.17), transparent 70%),
    linear-gradient(145deg, #21150d 0%, #15100d 51%, #0d0c0c 100%) !important;
}

body[data-unity-env="education"] .organize-section {
  background:
    radial-gradient(ellipse 62% 56% at 52% 30%, rgba(47, 91, 167, 0.19), transparent 68%),
    linear-gradient(145deg, #080d1b 0%, #10182a 50%, #0a0c13 100%) !important;
}

body[data-unity-env="education"] .build-section {
  background:
    radial-gradient(ellipse 54% 60% at 88% 28%, rgba(169, 93, 27, 0.19), transparent 68%),
    linear-gradient(132deg, #160e08 0%, #2b190d 48%, #0e0c0a 100%) !important;
}

body[data-unity-env="education"] .circulate-section {
  background:
    radial-gradient(circle at 50% 47%, rgba(231, 184, 82, 0.16), transparent 31%),
    radial-gradient(ellipse 88% 72% at 52% 58%, rgba(34, 108, 61, 0.20), transparent 72%),
    linear-gradient(145deg, #08130d 0%, #11261a 54%, #080d0a 100%) !important;
}

body[data-unity-env="education"] .ecosystem-map-section {
  background:
    radial-gradient(circle at 50% 32%, rgba(231, 184, 82, 0.17), transparent 32%),
    radial-gradient(ellipse 78% 68% at 8% 88%, rgba(33, 62, 120, 0.18), transparent 70%),
    linear-gradient(145deg, #080b14 0%, #10182a 50%, #090a0e 100%) !important;
}

body[data-unity-env="education"] .role-section {
  background:
    radial-gradient(ellipse 68% 60% at 84% 20%, rgba(126, 35, 57, 0.22), transparent 70%),
    linear-gradient(145deg, #180a10 0%, #2b111b 51%, #100a0d 100%) !important;
}

body[data-unity-env="education"] .blueprint-section {
  background:
    radial-gradient(ellipse 40% 64% at 36% 45%, rgba(255, 218, 127, 0.17), transparent 65%),
    radial-gradient(ellipse 55% 54% at 90% 18%, rgba(180, 111, 25, 0.15), transparent 69%),
    linear-gradient(145deg, #1f150b 0%, #2a1b0d 49%, #100c09 100%) !important;
}

body[data-unity-env="education"] .simulator-section {
  background:
    radial-gradient(ellipse 60% 64% at 76% 18%, rgba(49, 94, 174, 0.18), transparent 70%),
    linear-gradient(145deg, #090d19 0%, #111c30 50%, #0a0c12 100%) !important;
}

body[data-unity-env="education"] .detroit-section {
  background:
    radial-gradient(ellipse 60% 58% at 14% 22%, rgba(126, 33, 54, 0.21), transparent 70%),
    radial-gradient(ellipse 46% 54% at 92% 78%, rgba(166, 96, 29, 0.15), transparent 72%),
    linear-gradient(145deg, #180a10 0%, #2c1516 51%, #120b0c 100%) !important;
}

body[data-unity-env="education"] .closing-section {
  background:
    radial-gradient(ellipse 70% 90% at 50% 10%, rgba(255, 211, 110, 0.25), transparent 68%),
    radial-gradient(ellipse 80% 68% at 82% 80%, rgba(163, 88, 20, 0.20), transparent 70%),
    linear-gradient(145deg, #2e1b0d 0%, #191109 52%, #0c0907 100%) !important;
}

body[data-unity-env="education"] main > .section::before {
  content: "";
  position: absolute;
  inset: auto 7% -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 221, 122, 0.46), transparent);
  pointer-events: none;
}

body[data-unity-env="education"] :is(.premium-card, .build-card, .role-card, .ecosystem-card, .chapter-card, .simulator-panel, .detroit-stat, .layer-card) {
  background: linear-gradient(145deg, rgba(255, 248, 230, 0.075), rgba(8, 8, 10, 0.56)) !important;
  border: 1px solid rgba(232, 188, 98, 0.32) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 241, 202, 0.06);
}

body[data-unity-env="education"] :is(.premium-card, .build-card, .role-card, .ecosystem-card, .chapter-card, .simulator-panel, .detroit-stat, .layer-card):hover {
  border-color: rgba(255, 221, 122, 0.54) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34), 0 0 24px rgba(231, 184, 82, 0.08);
}

@media (max-width: 640px) {
  body[data-unity-env="education"] :is(.premium-cards-grid, .build-cards-grid, .role-cards-grid, .ecosystem-grid, .ecosystem-map-grid, .detroit-stats, .blueprint-chapters) {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-unity-env="education"] :is(.premium-card, .build-card, .role-card, .ecosystem-card, .chapter-card, .simulator-panel, .detroit-stat, .layer-card) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Shared fallback footer for legacy public pages that do not contain one. */
.site-standard-footer {
  position: relative;
  margin-top: clamp(42px, 7vw, 88px);
  border-top: 1px solid rgba(202, 151, 66, .28);
  background: linear-gradient(145deg, rgba(31, 18, 9, .98), rgba(6, 7, 12, .99));
  color: var(--unity-cream, #f6ead2);
}
.site-standard-footer::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 122, .7), transparent);
}
.site-standard-footer-inner {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 30px 0 28px;
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr) auto;
  gap: 20px;
  align-items: center;
}
.site-standard-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--unity-gold, #ffdd7a);
  font-weight: 850;
  letter-spacing: .08em;
  text-decoration: none;
}
.site-standard-footer-brand img { width: 30px; height: 30px; object-fit: contain; }
.site-standard-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.site-standard-footer nav a { color: rgba(246, 234, 210, .75); font-size: .86rem; text-decoration: none; }
.site-standard-footer nav a:hover, .site-standard-footer nav a:focus-visible { color: var(--unity-gold, #ffdd7a); }
.site-standard-footer p { margin: 0; color: rgba(246, 234, 210, .55); font-size: .78rem; white-space: nowrap; }
@media (max-width: 720px) {
  .site-standard-footer-inner { width: min(100% - 32px, 560px); grid-template-columns: 1fr; padding: 26px 0 24px; text-align: center; }
  .site-standard-footer-brand, .site-standard-footer nav { justify-content: center; }
  .site-standard-footer p { white-space: normal; }
}