/* ============================================================================
   EcuTunerx — Section layouts
   ========================================================================== */

/* ============== HERO ============== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 120px; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; z-index: 0; opacity: 0.9; }
.hero__glow { position: absolute; inset: auto -10% -40% -10%; height: 60vh; z-index: 0;
  background: radial-gradient(50% 60% at 50% 100%, rgba(25,230,255,0.12), transparent 70%); pointer-events: none; }
.hero__inner { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 22vw, 320px); gap: var(--sp-6); align-items: center; }
.hero__title { font-size: var(--fs-display); margin: var(--sp-4) 0 var(--sp-5); color: var(--text); text-shadow: 0 2px 40px rgba(0,0,0,0.55); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word { display: inline-block; }
.hero__title em { font-style: normal; color: var(--accent); text-shadow: 0 0 44px rgba(25,230,255,0.5); }
.hero__lead { max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.hero__meta .data-pill b { font-family: var(--font-display); }

/* Hero telemetry HUD panel */
.hud { position: relative; border-radius: var(--r-lg); padding: var(--sp-5); background: var(--glass-2);
  border: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-lg); }
.hud__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.hud__title { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.hud__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hud__cell { border-radius: var(--r-sm); padding: 14px; background: var(--surface); border: 1px solid var(--line); }
.hud__cell .lab { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hud__cell .val { font-family: var(--font-display); font-size: 1.6rem; margin-top: 6px; color: var(--text); }
.hud__cell .val small { font-size: 0.6em; color: var(--muted); }
.hud__cell--accent .val { color: var(--accent); }
.hud__cell--heat .val { color: var(--accent-2); }
.hud__bar { margin-top: var(--sp-4); }
.hud__bar .lab { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.hud__track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hud__fill { height: 100%; width: 72%; background: var(--grad-thermal); box-shadow: 0 0 14px rgba(25,230,255,0.4); }

.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; }
.scroll-cue__line { width: 1px; height: 42px; background: linear-gradient(var(--accent), transparent); }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hud { order: -1; }
}

/* ============== MARQUEE STRIP ============== */
.strip { padding-block: var(--sp-5); border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent); }

/* ============== STATS (metric cards) ============== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

.stat-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
/* top hairline accent + radial glow that wakes on hover */
.stat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--grad-accent); opacity: 0.4; transition: opacity var(--dur); }
.stat-card::after { content: ""; position: absolute; top: -40%; right: -20%; width: 72%; height: 72%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); opacity: 0; transition: opacity var(--dur); pointer-events: none; }
.stat-card:hover { transform: translateY(-6px); border-color: var(--accent); background: var(--glass-2); box-shadow: var(--shadow-lg); }
.stat-card:hover::before { opacity: 1; }
.stat-card:hover::after { opacity: 1; }


.stat__num { font-family: var(--font-display); font-size: clamp(2.3rem, 1.5rem + 2vw, 3.3rem); line-height: 1; color: var(--text); letter-spacing: 0.01em; }
.stat__num .unit { font-size: 0.32em; color: var(--accent); margin-left: 6px; letter-spacing: 0.05em; }
.stat__label { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.stat-card__desc { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }

/* telemetry-style baseline that fills on hover (matches the hero HUD bar) */
.stat-card__bar { margin-top: auto; padding-top: var(--sp-4); }
.stat-card__bar i { display: block; height: 3px; width: 38%; border-radius: 999px; background: var(--grad-thermal); box-shadow: 0 0 12px rgba(25,230,255,0.35); transition: width 0.55s var(--ease-out); }
.stat-card:hover .stat-card__bar i { width: 100%; }

@media (max-width: 1024px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stats { grid-template-columns: 1fr; } }

/* ============== STAGES (interactive) ============== */
.stages__layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-7); align-items: start; }
.stage-rail { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 110px; }
.stage-tab {
  position: relative; display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left;
  padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); transition: border-color var(--dur), background var(--dur), transform var(--dur);
}
.stage-tab:hover { transform: translateX(4px); border-color: var(--line-strong); }
.stage-tab.is-active { border-color: transparent; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-md); }
.stage-tab__no { font-family: var(--font-display); font-size: 1.1rem; width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-2); color: var(--muted); flex: none; transition: color var(--dur), background var(--dur); }
.stage-tab.is-active .stage-tab__no { background: var(--accent); color: var(--accent-ink); }
.stage-tab__meta { display: flex; flex-direction: column; }
.stage-tab__name { font-weight: 600; font-size: 1rem; }
.stage-tab__sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.stage-tab__gain { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
.stage-tab[data-heat="hot"].is-active { box-shadow: inset 0 0 0 1px var(--hot), var(--shadow-md); }
.stage-tab[data-heat="hot"].is-active .stage-tab__no { background: var(--hot); }
.stage-tab[data-heat="hot"].is-active .stage-tab__gain,
.stage-tab[data-heat="amber"].is-active .stage-tab__gain { color: var(--accent-2); }

.stage-panel { position: relative; border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.8rem);
  background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); overflow: hidden; min-height: 460px; }
.stage-panel__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background: radial-gradient(70% 60% at 90% 10%, var(--accent-soft), transparent 60%); transition: background var(--dur); }
.stage-panel__inner { position: relative; z-index: 1; }
.stage-panel__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.stage-panel__name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); letter-spacing: 0.04em; }
.stage-panel__desc { margin-top: var(--sp-4); color: var(--text-dim); max-width: 62ch; line-height: 1.65; }
.stage-gains { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
.gain { border-radius: var(--r-md); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); }
.gain__lab { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gain__val { font-family: var(--font-display); font-size: clamp(1.8rem, 1rem + 2.4vw, 2.8rem); margin-top: 6px; }
.gain__val .plus { color: var(--accent-2); }
.gain__bar { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.gain__fill { height: 100%; width: 0; background: var(--grad-thermal); border-radius: 999px; transition: width 0.9s var(--ease-out); }
.stage-includes { margin-top: var(--sp-6); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.stage-includes li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-dim); font-size: var(--fs-sm); }
.stage-includes svg { flex: none; width: 16px; height: 16px; color: var(--accent); margin-top: 3px; }
.stage-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.stage-panel__price { font-family: var(--font-display); font-size: 1.6rem; }
.stage-panel__price small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); display: block; letter-spacing: 0.08em; }
@media (max-width: 920px) {
  .stages__layout { grid-template-columns: 1fr; }
  .stage-rail { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .stage-rail::-webkit-scrollbar { display: none; }
  .stage-tab { min-width: 230px; }
  .stage-tab__gain { display: none; }
  .stage-gains, .stage-includes { grid-template-columns: 1fr; }
}

/* ============== PROCESS TIMELINE ============== */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); position: relative; }
.process::before { content: ""; position: absolute; top: 30px; left: 6%; right: 6%; height: 1px; background: var(--grad-thermal); opacity: 0.35; }
.step { position: relative; }
.step__no { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); position: relative; z-index: 1; }
.step__no::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent-soft); }
.step h3 { margin-top: var(--sp-4); font-size: 1.15rem; }
.step p { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.step__tag { margin-top: var(--sp-3); }
@media (max-width: 820px) { .process { grid-template-columns: 1fr; gap: var(--sp-6); } .process::before { display: none; } }

/* ============== FEATURES BENTO ============== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); gap: var(--sp-4); }
.bento .card { display: flex; flex-direction: column; padding: var(--sp-5); }
.bento__a { grid-column: span 3; grid-row: span 2; }
.bento__b { grid-column: span 3; }
.bento__c { grid-column: span 3; }
.bento__d { grid-column: span 2; }
.bento__e { grid-column: span 2; }
.bento__f { grid-column: span 2; }
.feature h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.feature p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.feature__big { margin-top: var(--sp-4); }
.feature__big:last-child { margin-top: auto; }
.feature__big .num { font-family: var(--font-display); font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1; }
.mini-graph { margin-top: auto; height: 70px; display: flex; align-items: flex-end; gap: 5px; }
.mini-graph span { flex: 1; background: var(--grad-accent); border-radius: 3px 3px 0 0; opacity: 0.8; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__a { grid-column: span 2; grid-row: auto; }
  .bento__b, .bento__c, .bento__d, .bento__e, .bento__f { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento__a, .bento__b, .bento__c, .bento__d, .bento__e, .bento__f { grid-column: span 1; }
}

/* ============== VEHICLES ============== */
.vehicles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.veh { padding: var(--sp-5); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: border-color var(--dur), transform var(--dur), background var(--dur); }
.veh:hover { transform: translateY(-4px); border-color: var(--accent); background: var(--surface-2); }
.veh__brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; }
.veh__models { margin-top: 10px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }
.veh__tag { margin-top: var(--sp-4); }
.vehicles__note { margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-5); border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid rgba(25,230,255,0.2); }
@media (max-width: 900px) { .vehicles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vehicles__grid { grid-template-columns: 1fr; } }

/* ============== PRICING (stage cards) ============== */
/* Value-prop strip above the grid */
.price-props { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); max-width: 1080px; margin: var(--sp-6) auto 0; }
.price-prop { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 240px; max-width: 340px; padding: 14px var(--sp-4); border-radius: var(--r-md); background: var(--glass-2); border: 1px solid var(--glass-border); }
.price-prop__ico { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.price-prop__ico svg { width: 15px; height: 15px; }
.price-prop b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.price-prop span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: stretch; max-width: 1080px; margin: var(--sp-6) auto 0; padding-top: 14px; }

/* Per-card thermal accent — cyan (S1) → amber (S2) → red (S3) */
.price-card { --c: var(--accent); --c-soft: var(--accent-soft); --c-glow: rgba(25,230,255,0.35); }
.price-card[data-heat="amber"] { --c: var(--accent-2); --c-soft: var(--accent-2-soft); --c-glow: rgba(255,106,26,0.35); }
.price-card[data-heat="hot"]   { --c: var(--hot);      --c-soft: var(--hot-soft);      --c-glow: rgba(255,45,85,0.35); }

.price-card { display: flex; flex-direction: column; padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--glass-border); position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur); }
/* thermal hairline along the top + radial wash that wakes on hover */
.price-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); opacity: 0.85; }
.price-card::after { content: ""; position: absolute; top: -30%; right: -25%; width: 75%; height: 75%; background: radial-gradient(circle, var(--c-soft), transparent 70%); opacity: 0.35; transition: opacity var(--dur); pointer-events: none; }
.price-card:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 30px 80px -30px var(--c-glow); }
.price-card:hover::after { opacity: 0.8; }
.price-card.is-featured { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--c), 0 36px 90px -32px var(--c-glow); }
@media (min-width: 861px) { .price-card.is-featured { transform: scale(1.045); z-index: 2; } .price-card.is-featured:hover { transform: scale(1.045) translateY(-6px); } }

.price-card__flag { position: absolute; top: 16px; right: 16px; z-index: 3; }
.price-card__top { display: flex; align-items: center; gap: 14px; }
.price-card__no { font-family: var(--font-display); font-size: 1rem; width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-2); color: var(--c); flex: none; box-shadow: inset 0 0 0 1px var(--c-soft); }
.price-card__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.05em; line-height: 1.1; }
.price-card__sub { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.price-card__amt { font-family: var(--font-display); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.4rem); line-height: 1; margin-top: var(--sp-5); color: var(--text); }
.price-card__amt small { display: block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); letter-spacing: 0.08em; margin-top: 8px; }
.price-card__gain { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--muted); }
.price-card__gain b { font-family: var(--font-display); font-size: 1rem; color: var(--c); letter-spacing: 0; }
.price-card__best { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4); padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-dim); }
.price-card__best span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); flex: none; }
.price-card__list { margin: var(--sp-5) 0; display: flex; flex-direction: column; gap: 11px; }
.price-card__list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.4; }
.price-card__list li:first-child { color: var(--text); font-weight: 600; }
.price-card__list svg { flex: none; width: 16px; height: 16px; color: var(--c); margin-top: 2px; }
.price-card__cta { margin-top: auto; width: 100%; }
@media (max-width: 860px) { .pricing__grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ---- Order page: stage picker (single-select) ---- */
.stage-opts { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.stage-opt { --c: var(--accent); --c-soft: var(--accent-soft); position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  text-align: left; width: 100%; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); cursor: pointer; color: var(--text);
  background: var(--glass); border: 1px solid var(--glass-border); transition: transform var(--dur) var(--ease-out), border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.stage-opt[data-heat="amber"] { --c: var(--accent-2); --c-soft: var(--accent-2-soft); }
.stage-opt[data-heat="hot"]   { --c: var(--hot); --c-soft: var(--hot-soft); }
.stage-opt:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.stage-opt.is-on { border-color: var(--c); background: var(--c-soft); box-shadow: inset 0 0 0 1px var(--c); }
.stage-opt__no { font-family: var(--font-display); font-size: 0.95rem; width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-2); color: var(--c); flex: none; box-shadow: inset 0 0 0 1px var(--c-soft); }
.stage-opt.is-on .stage-opt__no { background: var(--c); color: var(--accent-ink); box-shadow: none; }
.stage-opt__body { min-width: 0; }
.stage-opt__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem; }
.stage-opt__sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; line-height: 1.45; }
.stage-opt__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); flex: none; text-align: right; }
.stage-opt__price small { display: block; font-family: var(--font-mono); font-size: 0.55rem; color: var(--muted); letter-spacing: 0.06em; margin-top: 3px; }
@media (max-width: 520px) { .stage-opt { grid-template-columns: auto 1fr; } .stage-opt__price { grid-column: 2; text-align: left; margin-top: 4px; } }

/* ============== TESTIMONIALS ============== */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.quote { padding: var(--sp-6); }
.quote__stars { color: var(--accent-2); letter-spacing: 3px; font-size: 0.9rem; }
.quote__text { margin-top: var(--sp-4); color: var(--text-dim); line-height: 1.65; }
.quote__who { margin-top: var(--sp-5); display: flex; align-items: center; gap: 12px; }
.quote__av { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-accent); display: grid; place-items: center; font-family: var(--font-display); font-size: 0.9rem; color: var(--accent-ink); }
.quote__name { font-weight: 600; font-size: var(--fs-sm); }
.quote__meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); letter-spacing: 0.06em; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ============== CTA BAND ============== */
.cta-band { position: relative; border-radius: var(--r-xl); padding: clamp(2.5rem, 1.5rem + 5vw, 6rem); overflow: hidden; text-align: center;
  background: radial-gradient(80% 120% at 50% 0%, rgba(25,230,255,0.12), transparent 60%), var(--surface); border: 1px solid var(--glass-border); }
.cta-band::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--grad-thermal); }
.cta-band .h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .lead { margin: var(--sp-5) auto var(--sp-6); }
.cta-band__btns { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ============== FOOTER ============== */
.footer { border-top: 1px solid var(--line); padding-block: var(--sp-7) var(--sp-5); margin-top: var(--sp-7); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-6); }
.footer__brand .brand { font-size: 1.2rem; }
.footer__tag { margin-top: var(--sp-4); color: var(--muted); max-width: 36ch; font-size: var(--fs-sm); line-height: 1.6; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4); }
.footer__col a { display: block; padding: 6px 0; color: var(--text-dim); font-size: var(--fs-sm); transition: color var(--dur); }
.footer__col a:hover { color: var(--accent); }
.footer__bottom { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.footer__legal { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); max-width: 80ch; line-height: 1.6; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-dim); transition: color var(--dur), border-color var(--dur), transform var(--dur); }
.footer__socials a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
.footer__socials svg { width: 18px; height: 18px; }
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; } }

/* ============== TUNABILITY CHECKER (homepage) ============== */
.checker { padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.checker__form { display: flex; gap: 12px; flex-wrap: wrap; }
.checker__input { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; margin: 0; }
.checker__input .lead-ico { position: absolute; left: 18px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.checker__input input { width: 100%; padding: 18px 92px 18px 50px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); font-family: var(--font-mono); letter-spacing: 0.04em; transition: border-color var(--dur), box-shadow var(--dur); }
.checker__input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.checker__input input::placeholder { color: var(--faint); letter-spacing: 0; }
.checker__hint { position: absolute; right: 20px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); }
.checker__form .btn { padding-inline: 30px; }
.checker__result { margin-top: var(--sp-5); }

.checker-loading { display: flex; align-items: center; gap: 14px; padding: var(--sp-4); color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.06em; }
.checker-loading .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.verdict { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 18px; align-items: center; padding: var(--sp-5); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); position: relative; overflow: hidden; animation: ostepIn .4s var(--ease-out); }
.verdict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.verdict--yes::before { background: var(--grad-thermal); }
.verdict--no::before { background: var(--hot); }
.verdict__icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.verdict--yes .verdict__icon { background: var(--accent-soft); color: var(--accent); }
.verdict--no .verdict__icon { background: var(--hot-soft); color: var(--hot); }
.verdict__icon svg { width: 28px; height: 28px; }
.verdict__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.15rem; color: var(--text); }
.verdict__car { color: var(--text-dim); margin-top: 4px; font-size: var(--fs-sm); }
.verdict__badges { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.verdict__cta { flex: none; }
.verdict__specs { grid-column: 1 / -1; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px 26px; }
.verdict__spec { display: flex; flex-direction: column; gap: 3px; }
.verdict__spec i { font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.verdict__spec b { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.verdict__note { grid-column: 1 / -1; margin-top: 12px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 660px) { .verdict { grid-template-columns: auto 1fr; } .verdict__cta { grid-column: 1 / -1; margin-top: 8px; } .verdict__cta .btn { width: 100%; } }

/* ============== DISCLAIMER STRIP ============== */
.disclaimer { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); border-radius: var(--r-md); background: var(--hot-soft); border: 1px solid rgba(255,45,85,0.22); }
.disclaimer svg { flex: none; width: 22px; height: 22px; color: var(--hot); margin-top: 2px; }
.disclaimer p { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.6; }
.disclaimer strong { color: var(--text); }

/* ============== COMPARISON TABLE ============== */
.cmp { margin-top: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.cmp__head, .cmp__row { display: grid; grid-template-columns: 1.3fr 1.18fr 1fr 1fr; }
.cmp__row { border-top: 1px solid var(--line); transition: background var(--dur); }
.cmp__row:hover { background: rgba(255,255,255,0.025); }
.cmp__feat { display: flex; align-items: center; padding: 16px 20px; font-weight: 600; color: var(--text); font-size: var(--fs-sm); }
.cmp__head .cmp__feat { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; color: var(--muted); }
.cmp__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; padding: 16px 12px; text-align: center; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.64rem; color: var(--muted); }
.cmp__cell { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 14px; text-align: center; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; }
.cmp__cell svg { width: 16px; height: 16px; flex: none; }
.cmp__brand { font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.03em; color: var(--text); text-transform: none; }
.cmp__brand b { color: var(--accent); }
.cmp__badge { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--accent-ink); background: var(--accent); padding: 3px 9px; border-radius: var(--r-pill); }
/* EcuTunerx column — highlighted band */
.cmp__col--us, .cmp__cell--us { background: var(--accent-soft); color: var(--text); box-shadow: inset 1px 0 0 rgba(25,230,255,0.30), inset -1px 0 0 rgba(25,230,255,0.30); }
.cmp__col--us { color: var(--accent); box-shadow: inset 1px 0 0 rgba(25,230,255,0.45), inset -1px 0 0 rgba(25,230,255,0.45), inset 0 2px 0 var(--accent); }
.cmp__cell--us { font-weight: 600; color: var(--text); }
.cmp__cell--us svg { color: var(--accent); }
.cmp__row:last-child .cmp__cell--us { box-shadow: inset 1px 0 0 rgba(25,230,255,0.30), inset -1px 0 0 rgba(25,230,255,0.30), inset 0 -2px 0 rgba(25,230,255,0.45); }
.cmp__col--local, .cmp__cell--local { color: var(--muted); }
.cmp__note { margin-top: var(--sp-4); font-size: var(--fs-xs); max-width: 660px; margin-inline: auto; line-height: 1.6; }

@media (max-width: 860px) {
  .cmp__head, .cmp__row { grid-template-columns: 1.1fr 1fr 1fr; }
  .cmp__col--local, .cmp__cell--local { display: none; }
  .cmp__feat { padding: 13px 14px; }
  .cmp__cell { font-size: var(--fs-xs); padding: 12px 8px; line-height: 1.45; }
  .cmp__brand { font-size: 0.8rem; }
}
@media (max-width: 460px) {
  .cmp__head, .cmp__row { grid-template-columns: 1fr 0.9fr 0.9fr; }
  .cmp__feat { font-size: var(--fs-xs); }
}