/* ============================================================================
   HOME V6 — "Energy Marquee" top section
   Only the hero (CTA banner + capability marquee + wide pack carousel) is
   styled here; everything below the hero reuses home_v5.css.
   ========================================================================== */
.v6-hero{
  --v6-indigo:#4f46e5; --v6-violet:#7c3aed; --v6-deep:#312e81;
  --v6-amber:#f59e0b; --v6-pink:#ec4899; --v6-teal:#0d9488;
  position:relative; color:#fff; isolation:isolate;
  background:
    radial-gradient(1100px 360px at 82% -12%, rgba(236,72,153,.30), transparent 60%),
    radial-gradient(960px 320px at 8% -4%, rgba(13,148,136,.26), transparent 55%),
    linear-gradient(135deg, var(--v6-deep) 0%, #241a52 52%, #3b1e63 100%);
}
.v6-hero__inner{max-width:min(1400px,94vw); margin:0 auto; padding:0 clamp(16px,3vw,28px)}

/* ---- top full-width CTA banner ---- */
.v6-banner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.v6-banner__ann{font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:10px; margin:0}
.v6-banner__spark{
  font-weight:800;
  background:linear-gradient(135deg,var(--v6-amber),var(--v6-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.v6-ctas{display:flex; gap:12px; flex-wrap:wrap}
.v6-cta{
  font-family:inherit; font-weight:700; font-size:15px; line-height:1;
  border:0; border-radius:12px; padding:13px 20px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:transform .08s ease, filter .15s ease, box-shadow .15s;
}
.v6-cta:active{transform:translateY(1px)}
/* `.xl a { color: inherit }` (home_v5.css) would otherwise repaint these; scope
   under .xl so the button colours win on specificity. */
.xl .v6-cta--primary{background:#fff; color:var(--v6-deep); box-shadow:0 10px 24px rgba(0,0,0,.22)}
.v6-cta--primary:hover{filter:brightness(1.03)}
.xl .v6-cta--soft{background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.v6-cta--soft:hover{background:rgba(255,255,255,.22)}
.v6-cta__tag{font-weight:600; font-size:11px; opacity:.85}
.v6-cta:focus-visible, .v6-dot:focus-visible, .v6-arrow:focus-visible{outline:3px solid #ffd9a8; outline-offset:2px}

/* ---- headline + capability marquee ---- */
.v6-head{padding:40px 0 6px; text-align:center}
.v6-eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; font-size:12px; color:#ffd9a8;
}
.v6-title{
  font-size:clamp(28px,4.4vw,46px); font-weight:800; letter-spacing:-.02em;
  margin:12px auto 8px; max-width:18ch; text-wrap:balance; line-height:1.08;
}
.v6-sub{color:rgba(255,255,255,.84); max-width:60ch; margin:0 auto; font-size:16px}

/* single-line slogan, stretched to fill the width */
.v6-title--slogan{
  max-width:none; white-space:nowrap; margin:8px auto 4px;
  font-size:clamp(30px,6.4vw,74px); line-height:1.05;
}
@media (max-width:560px){
  .v6-title--slogan{white-space:normal; font-size:clamp(28px,9vw,40px)}
}

.v6-marquee{
  margin:24px 0 4px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.v6-marquee__track{display:flex; gap:12px; width:max-content; animation:v6scroll 30s linear infinite}
.v6-marquee:hover .v6-marquee__track{animation-play-state:paused}
.v6-chip{
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:9px 16px; font-weight:600; font-size:14.5px;
}
.v6-chip__ic{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:15px;
  background:rgba(255,255,255,.16);
}
@keyframes v6scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .v6-marquee__track{animation:none; flex-wrap:wrap; width:auto; justify-content:center}
}

/* ---- wide pack carousel ---- */
.v6-caro{padding:28px 0 46px}
.v6-caro__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.v6-caro__head h2{font-size:clamp(18px,2.4vw,23px); font-weight:700; margin:0; color:#fff}
.v6-caro__nav{display:flex; gap:8px}
.v6-arrow{
  width:40px; height:40px; border-radius:12px; cursor:pointer; font-size:17px; line-height:1;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); color:#fff;
}
.v6-arrow:hover{background:rgba(255,255,255,.2)}

.v6-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px 8px; scrollbar-width:none; -ms-overflow-style:none;
}
.v6-track::-webkit-scrollbar{display:none}
.v6-card{
  flex:0 0 calc((100% - 3*18px)/4); scroll-snap-align:start;
  display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden;
  background:#fff; color:#1e2140; border-radius:16px; padding:18px;
  box-shadow:0 14px 30px rgba(15,10,45,.28);
}
.v6-card::before{content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,var(--v6-indigo),var(--v6-violet))}
.v6-card--featured{outline:2px solid rgba(245,158,11,.55)}
.v6-card__ribbon{
  align-self:flex-start; margin-top:4px; font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#6b6f8a; background:#f1f1fb; border:1px solid #e4e3f4; border-radius:999px; padding:4px 10px;
}
.v6-card__ribbon--star{color:#b45309; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.4)}
.v6-card__name{font-size:17px; font-weight:700; line-height:1.25; margin:2px 0 0}
.v6-card__spec{color:#5b6478; font-size:13px; margin:0}
.v6-card__list{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.v6-card__list li{font-size:12.5px; color:#3c4257; display:flex; gap:7px; align-items:flex-start; line-height:1.4}
.v6-card__list li i{color:var(--v6-indigo); margin-top:2px; font-size:11px}
.v6-card__price{margin-top:auto; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; padding-top:6px}
.v6-card__cur{font-family:"IBM Plex Mono",monospace; font-size:12px; color:#5b6478; font-weight:600}
.v6-card__amt{font-family:"IBM Plex Mono",monospace; font-size:24px; font-weight:600; color:#1e2140}
.v6-card__per{flex-basis:100%; font-size:11.5px; color:#5b6478}
.v6-card .xl-btn--buy{margin-top:4px}
.xl .v6-card__alt{text-align:center; font-size:12.5px; font-weight:600; color:var(--v6-indigo); text-decoration:none; margin-top:2px; display:block}
.v6-card__alt:hover{text-decoration:underline}
.v6-card--empty{flex:0 0 100%; align-items:stretch; text-align:center}

.v6-dots{display:flex; gap:6px; justify-content:center; margin-top:16px}
.v6-dot{width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.34)}
.v6-dot.is-on{width:22px; border-radius:999px; background:#fff}

/* loading shimmer before /products answers */
.v6-hero--loading .v6-track{min-height:230px}

/* ---- responsive ---- */
@media (max-width:1100px){ .v6-card{flex-basis:calc((100% - 2*18px)/3)} }
@media (max-width:820px){
  .v6-card{flex-basis:calc((100% - 18px)/2)}
  .v6-banner{justify-content:center; text-align:center}
  .v6-banner__ann{width:100%; justify-content:center}
  .v6-ctas{width:100%; justify-content:center}
}
@media (max-width:560px){
  .v6-card{flex-basis:86%}
  .v6-ctas .v6-cta{flex:1 1 0; justify-content:center}
}

/* ============================================================================
   Uniform light page. One light background across the whole page; every content
   section spans the same width as the hero carousel; and the final CTA uses the
   same light surface as the other sections (rather than a dark panel).
   Scoped to .v6-page (home_v6 only).
   ========================================================================== */
.xl.v6-page{ background:#f3f4fa; }

/* Match every content section's width to the hero carousel: min(1400px, 94vw). */
.v6-page .xl-wrap{ max-width:min(1400px,94vw); }

/* Keep the section backgrounds uniform (drop the stats strip's card fill + dark
   top rule so it reads the same as the rest of the page). */
.v6-page .xl-stats{ background:transparent; border:0; }

/* Final CTA — same light surface as the other sections (was a dark panel). The
   buttons switch from the on-ink variants to the standard light ones in the HTML. */
.v6-page .xl-final__panel{ background:var(--card); color:var(--ink); border:1px solid var(--line); }
.v6-page .xl-final__panel h2{ color:var(--ink); }
.v6-page .xl-final__panel p{ color:var(--muted); }
.v6-page .xl-final__panel a.xl-textlink{ color:var(--indigo); }