/*
 * Homepage alternating theme bands.
 * Page stays dark (no theme toggle on home). Individual sections
 * paint dark / light surfaces with leader-style seams between them.
 */

html[data-route="home"] .theme-toggle {
  display: none !important;
}

html[data-route="home"] #platformHome {
  background: #080b0b;
}

html[data-route="home"] #platformHome::before {
  display: none;
}

html[data-route="home"] .site-ambient {
  opacity: 0.18;
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}

.platform-page .site-main.site-main--banded {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-band {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
}

.home-band-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2 * var(--inplug-page-gutter, 24px)), var(--inplug-page-max, 1240px));
  margin-inline: auto;
}

/* Glowing lime arcs — brand accent only, no new palette */
.home-band-arcs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-band-arcs__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.home-band-arcs__lines {
  animation: home-arcs-drift 26s ease-in-out infinite alternate;
  transform-origin: 72% 45%;
}

.home-band-arcs__bloom {
  animation: home-arcs-pulse 12s ease-in-out infinite alternate;
  transform-origin: 78% 42%;
}

.home-band-arcs__mesh {
  animation: home-arcs-mesh 18s ease-in-out infinite alternate;
  transform-origin: 55% 50%;
}

.home-band-arcs--v2 .home-band-arcs__lines {
  transform-origin: 80% 40%;
}

.home-band-arcs--pricing {
  opacity: 0.72;
}

.home-band-arcs--pricing .home-band-arcs__lines {
  animation-duration: 32s;
}

.home-band-arcs--pricing .home-band-arcs__bloom {
  animation-duration: 16s;
}

@keyframes home-arcs-drift {
  from { transform: translate3d(-0.8%, 0.5%, 0) scale(1.02) rotate(-0.4deg); }
  to { transform: translate3d(1%, -0.7%, 0) scale(1.05) rotate(0.6deg); }
}

@keyframes home-arcs-pulse {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 0.9; transform: scale(1.06); }
}

@keyframes home-arcs-mesh {
  from { opacity: 0.22; transform: translate3d(0, 0, 0); }
  to { opacity: 0.34; transform: translate3d(-0.6%, 0.4%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-band-arcs__lines,
  .home-band-arcs__bloom,
  .home-band-arcs__mesh {
    animation: none;
  }
}

/* —— Dark band (hero / pricing) —— */
.home-band--dark {
  color-scheme: dark;
  background: #080b0b;
  color: #ffffff;
}

.home-band--dark.home-band--hero {
  min-height: min(92vh, 920px);
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(189, 245, 83, 0.05), transparent 62%),
    #080b0b;
}

.home-band--dark.home-band--pricing {
  background-color: #0a0f0e;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 18%, rgba(189, 245, 83, 0.04), transparent 58%),
    linear-gradient(180deg, #070a0a 0%, #0a0f0e 100%);
}

/* —— Light band (products+services / FAQ) —— */
.home-band--light {
  color-scheme: light;
  --site-bg: #f3f6f4;
  --site-panel: #ffffff;
  --site-panel-2: #e8eee9;
  --site-line: #c5d0c8;
  --site-soft-line: #d9e2db;
  --site-muted: #3f5249;
  --site-accent: #9ed42e;
  --site-accent-strong: #8fc420;
  --site-ink: #102018;
  --inplug-accent: #9ed42e;
  --inplug-muted: #3f5249;
  --inplug-ink: #0b1311;
  --inplug-elev-1: 0 8px 24px rgba(18, 35, 27, 0.07);
  --inplug-elev-2: 0 16px 40px rgba(18, 35, 27, 0.1);
  --muted: #3f5249;
  --line: #c5d0c8;
  --soft-line: #d9e2db;
  --card: #ffffff;
  background-color: #f3f6f4;
  background-image: linear-gradient(180deg, #f7faf8 0%, #eef3ef 48%, #f3f6f4 100%);
  color: var(--site-ink);
}

/* Soft internal rule between Products and Services inside one light band */
.home-band-soft-rule {
  height: 1px;
  margin-block: clamp(28px, 4vw, 48px);
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--site-line) 70%, transparent) 18%,
    color-mix(in srgb, var(--site-line) 70%, transparent) 82%,
    transparent 100%
  );
}

/* —— Leader-style seam between dark ↔ light bands —— */
.home-band-seam {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  height: clamp(40px, 5vw, 64px);
  margin: 0;
  pointer-events: none;
  overflow: visible;
  background: linear-gradient(
    180deg,
    var(--seam-from, #080b0b) 0%,
    color-mix(in srgb, var(--seam-from, #080b0b) 55%, var(--seam-to, #f3f6f4)) 48%,
    var(--seam-to, #f3f6f4) 100%
  );
}

.home-band-seam__rule {
  position: relative;
  z-index: 1;
  display: block;
  width: min(220px, 42vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #bdf553 40%, transparent) 18%,
    #bdf553 50%,
    color-mix(in srgb, #bdf553 40%, transparent) 82%,
    transparent 100%
  );
  opacity: 0.85;
}

.home-band-seam__rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: #bdf553;
  box-shadow: 0 0 14px color-mix(in srgb, #bdf553 55%, transparent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.home-band-seam--to-light {
  --seam-from: #080b0b;
  --seam-to: #f3f6f4;
}

.home-band-seam--to-dark {
  --seam-from: #f3f6f4;
  --seam-to: #080b0b;
}

/* —— Light band: Products —— */
.home-band--light .products-eco-title,
.home-band--light .platform-page .products-eco .products-eco-title,
.platform-page .home-band--light .products-eco .products-eco-title {
  color: var(--site-ink) !important;
}

.home-band--light .products-eco-tabs {
  background: color-mix(in srgb, #ffffff 92%, #e8ecea);
  border-color: color-mix(in srgb, var(--site-line) 90%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 60%, transparent);
}

.home-band--light .products-eco-tab {
  color: var(--site-ink);
}

.home-band--light .products-eco-tab:hover {
  color: var(--site-ink);
}

.home-band--light .products-eco-tab:not(.is-active) .products-eco-tab-icon {
  color: var(--site-ink);
}

.home-band--light .products-eco-tab.is-active,
.home-band--light .products-eco-tab.is-active:hover {
  background: var(--site-accent);
  color: #0b1311;
  -webkit-text-fill-color: #0b1311;
}

.home-band--light .products-eco-product-title,
.home-band--light .products-eco-copy h3 {
  color: var(--site-ink);
}

.home-band--light .products-eco-desc {
  color: var(--site-muted);
}

.home-band--light .products-eco-feature:hover,
.home-band--light .products-eco-feature.is-active {
  background: color-mix(in srgb, var(--site-ink) 5%, transparent);
}

.home-band--light .products-eco-feature-icon {
  color: var(--site-ink);
  background: transparent;
}

.home-band--light .products-eco-feature-arrow {
  color: var(--site-muted);
}

.home-band--light .products-eco-feature.is-active .products-eco-feature-arrow {
  color: var(--site-ink);
}

.home-band--light .products-eco-feature-copy strong {
  color: var(--site-ink);
}

.home-band--light .products-eco-cta--ghost {
  color: var(--site-ink);
}

.home-band--light .products-eco-window {
  border-color: color-mix(in srgb, #c9d2cd 70%, transparent);
  background: #ffffff;
  box-shadow:
    0 24px 48px rgba(16, 28, 22, 0.12),
    0 6px 18px rgba(16, 28, 22, 0.08);
}

.home-band--light .products-eco-mock-frame {
  background: #f4f6f5;
}

.home-band--light .products-eco-nav {
  border-color: #0b1311;
  background: #0b1311;
  color: #ffffff;
}

.home-band--light .products-eco-nav:hover {
  border-color: #0b1311;
  background: #16201c;
  color: #ffffff;
}

.home-band--light .products-eco-caption strong {
  color: var(--site-ink);
}

/* —— Light band: Services —— */
.home-band--light .services-bento-copy h2,
.home-band--light .services-bento-copy h1 {
  color: var(--site-ink);
}

.home-band--light .services-lead,
.home-band--light .services-bento-copy .services-lead {
  color: var(--site-muted);
}

.home-band--light .service-tile {
  background: var(--site-panel);
  border-color: var(--site-soft-line);
  box-shadow: var(--inplug-elev-1);
}

.home-band--light .service-tile h2,
.home-band--light .service-tile h3 {
  color: var(--site-ink);
}

.home-band--light .service-tile > p {
  color: var(--site-muted);
}

.home-band--light .service-tile-num {
  color: color-mix(in srgb, var(--site-muted) 70%, transparent);
}

.home-band--light .service-tile-link {
  color: var(--site-ink);
}

.home-band--light .services-bento-cta {
  background: #f3f5f4;
  border-color: color-mix(in srgb, var(--site-line) 80%, transparent);
  border-left-color: var(--site-accent);
}

.home-band--light .services-bento-cta-icon {
  color: #1a211e;
}

.home-band--light .services-bento-cta-title {
  color: var(--site-ink);
}

.home-band--light .services-bento-cta-text {
  color: var(--site-muted);
}

/* —— Light band: FAQ —— */
.home-band--light .section-title-accent,
.home-band--light .section-heading h2,
.platform-page .home-band--light .section-title-accent,
.platform-page .home-band--light .section-heading h2 {
  color: var(--site-ink) !important;
}

.home-band--light .faq-list {
  border-top-color: var(--site-line);
}

.home-band--light .faq-list details {
  border-bottom-color: var(--site-line);
}

.home-band--light .faq-list summary {
  color: var(--site-ink);
}

.home-band--light .faq-list p {
  color: var(--site-muted);
}

/* —— Light footer (continues FAQ band) —— */
.home-band--light .site-footer {
  width: 100%;
  margin-inline: 0;
  margin-top: clamp(28px, 4vw, 48px);
  padding-block: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid color-mix(in srgb, var(--site-line) 72%, transparent);
  color: var(--site-muted);
}

.home-band--light .site-footer a {
  color: var(--site-muted);
}

.home-band--light .site-footer a:hover,
.home-band--light .site-footer a:focus-visible {
  color: var(--site-ink);
}

.home-band--light .footer-brand .inplug-logo,
.home-band--light .site-footer .inplug-logo,
html[data-theme="dark"] .home-band--light .footer-brand .inplug-logo,
html[data-theme="dark"] .home-band--light .site-footer .inplug-logo,
:root[data-theme="dark"] .home-band--light .footer-brand .inplug-logo,
:root[data-theme="dark"] .home-band--light .site-footer .inplug-logo {
  background-image: url("/assets/brand/INPLUG_logo_dark.png?v=13");
}

/* —— Dark pricing stays crisp on its band —— */
.home-band--dark .section-title-accent,
.home-band--dark .section-heading h2,
.platform-page .home-band--dark .section-title-accent {
  color: #ffffff;
}

.home-band--dark .pricing-lead {
  color: var(--site-muted, #9faeaa);
}

/* Nav: frosted dark chrome over both bands while on home */
html[data-route="home"] #platformHome .platform-nav {
  background: color-mix(in srgb, rgba(8, 11, 11, 0.82) 92%, transparent);
  border-bottom-color: color-mix(in srgb, #2a3533 72%, transparent);
  color: #ffffff;
}

html[data-route="home"] #platformHome .platform-nav .site-nav-links a,
html[data-route="home"] #platformHome .platform-nav .site-nav-trigger {
  color: color-mix(in srgb, #ffffff 88%, transparent);
}

html[data-route="home"] #platformHome .platform-nav.is-stuck {
  background: color-mix(in srgb, rgba(8, 11, 11, 0.94) 94%, transparent);
  border-bottom-color: color-mix(in srgb, #bdf553 18%, #2a3533);
}

@media (prefers-reduced-motion: reduce) {
  .home-band-seam__rule,
  .home-band-seam__rule::before {
    box-shadow: none;
    opacity: 0.55;
  }
}