/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-family-primary); color: var(--color-text); background: var(--color-white); overflow-x: clip; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Inverter product pages get the blue accent; Basic pages keep the red brand primary */
body[data-range="Inverter"] {
  --color-primary: var(--color-range-inverter);
  --color-primary-hover: var(--color-range-inverter-hover);
  --color-primary-active: var(--color-range-inverter-active);
  --color-primary-soft: var(--color-range-inverter-soft);
  --color-primary-border: var(--color-range-inverter-border);
  --color-primary-rgb: var(--color-range-inverter-rgb);
  --color-badge-inv-text: #9db7ff;
}

/* Hero */
.hero {
  position: relative; min-height: 92vh; padding-top: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 0; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #070c14; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,16,28,.45) 0%, rgba(10,16,28,.15) 40%, rgba(10,16,28,.72) 75%, rgba(10,16,28,.96) 100%); }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--container-main); margin: 0 auto; padding: 0 var(--page-gutter) var(--section-space-compact); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.h-eyebrow { font-size: .68rem; font-weight: var(--font-weight-bold); letter-spacing: .24em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 14px; display: block; }
.h-title { font-size: var(--type-display-page-size); font-weight: var(--font-weight-semibold); line-height: var(--leading-display); color: var(--color-text-on-dark); letter-spacing: var(--tracking-display); margin-bottom: var(--space-2); }
.h-btu { font-size: 1rem; color: rgba(255,255,255,.4); font-weight: 500; margin-bottom: 20px; }
.h-tagline { font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.4; margin-bottom: 10px; }
.h-desc { font-size: .88rem; color: rgba(255,255,255,.52); line-height: 1.75; max-width: 400px; }
.hero-nav-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin-top: 22px; }
.hero-nav-actions .back-link { margin-top: 0; }
.next-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: .88rem; color: #fff;
  background: var(--color-primary);
  border: 1.5px solid rgba(var(--color-primary-rgb), .45);
  border-radius: var(--radius-pill);
  min-height: 44px; padding: 10px 26px;
  transition: background .2s, transform .2s;
}
.next-link:hover { background: var(--color-primary-hover); transform: translateY(-2px); }
@media (max-width: 767px) {
  .hero-nav-actions { flex-direction: column; width: 100%; gap: 12px; }
  .hero-nav-actions .next-link { width: 100%; max-width: 320px; }
}
.hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.h-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.h-badge { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: var(--radius-pill); font-size: .73rem; font-weight: 600; border: 1.5px solid; }
.h-badge--surf { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }
.h-badge--inv { background: rgba(var(--color-primary-rgb),.18); border-color: rgba(var(--color-primary-rgb),.45); color: var(--color-badge-inv-text, #ff8098); }
.h-badge--wifi { background: rgba(30,58,95,.38); border-color: rgba(30,58,95,.75); color: #7eb3ff; }
.h-badge--eco { background: rgba(34,139,34,.14); border-color: rgba(34,139,34,.38); color: #7dde7d; }
.h-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn-p { background: var(--color-primary); color: #fff; border-radius: var(--radius-pill); padding: 14px 30px; font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: 8px; transition: all .25s; }
.btn-p:hover { transform: translateY(-2px); }
/* Product hero WhatsApp CTA — base styles are shared in main.css (.product-whatsapp-cta) */
@media (max-width: 767px) {
  .h-btns { justify-content: center; }
  .h-btns .product-whatsapp-cta { width: calc(100% - 32px); max-width: 340px; height: 64px; padding: 0; font-size: 17px; gap: 0; margin-inline: auto; }
  .h-btns .product-whatsapp-cta__icon { width: 62px; height: 62px; margin-left: -3px; }
  .h-btns .product-whatsapp-cta__icon svg { width: 28px; height: 28px; }
  .h-btns .product-whatsapp-cta__label { padding: 0 20px; }
}
.h-strip { display: flex; gap: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); overflow: hidden; backdrop-filter: blur(10px); }
.h-strip-item { padding: 16px 22px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid rgba(255,255,255,.08); flex: 1; min-width: 0; }
.h-strip-item:last-child { border-right: none; }
.h-strip-val { font-size: .95rem; font-weight: var(--font-weight-bold); color: #fff; white-space: nowrap; }
.h-strip-key { font-size: .62rem; color: rgba(255,255,255,.38); letter-spacing: .1em; text-transform: uppercase; }

/* Shared sections */
section:not(.hero):not(.lifestyle) { padding-block: var(--section-space-standard); }
.container { max-width: var(--container-main); margin: 0 auto; padding-inline: var(--page-gutter); }
.eyebrow { font-size: var(--type-eyebrow-size); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); display: block; }
.s-title { font-size: var(--type-heading-xl-size); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); margin-bottom: var(--space-4); color: var(--color-text); }
.s-sub { font-size: var(--type-body-md-size); color: var(--color-text-muted); max-width: 34rem; line-height: var(--leading-body); margin-bottom: var(--space-14); }

/* Spec card */
.specs { background: var(--color-white); }
.spec-card-wrap { display: grid; grid-template-columns: 1fr 1.45fr; gap: 72px; align-items: start; }
.spec-info { position: sticky; top: 128px; padding-top: 8px; }
.spec-info .eyebrow { display: inline-block; }
.spec-info .s-title { margin-top: 14px; margin-bottom: 12px; }
.spec-info .s-sub { margin-bottom: 28px; }
.spec-hl-list { display: flex; flex-direction: column; gap: 12px; }
.spec-hl-item { display: flex; align-items: center; gap: 12px; font-size: .88rem; font-weight: 500; color: var(--color-text); }
.spec-hl-check { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: rgba(var(--color-primary-rgb),.08); border: 1px solid rgba(var(--color-primary-rgb),.15); display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.sc-card { background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-soft); border: var(--border-subtle); width: 100%; }
.sc-header { background: var(--color-navy); padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; }
.sc-logo-wrap { display: flex; align-items: center; gap: 14px; }
.sc-logo-img { height: 44px; width: auto; }
.sc-logo-text strong { font-size: 1rem; font-weight: var(--font-weight-bold); color: #fff; letter-spacing: .08em; display: block; }
.sc-logo-text span { font-size: .75rem; color: rgba(255,255,255,.45); }
.sc-gamme-badge { background: var(--color-range-basic); color: #fff; border-radius: var(--radius-pill); padding: 5px 14px; font-size: var(--type-technical-label-size); font-weight: var(--font-weight-bold); letter-spacing: .1em; }
.sc-model-bar { background: var(--color-range-basic); padding: 18px 28px; display: flex; justify-content: space-between; align-items: center; }
.sc-card--inverter .sc-gamme-badge, .sc-card--inverter .sc-model-bar, .sc-card--inverter .sc-ipx-badge { background: var(--color-range-inverter); }
.sc-model-label { font-size: var(--type-technical-label-size); font-weight: var(--font-weight-bold); letter-spacing: .16em; color: rgba(255,255,255,.68); text-transform: uppercase; margin-bottom: 4px; }
.sc-model-name { font-size: var(--type-heading-md-size); font-weight: var(--font-weight-bold); color: #fff; letter-spacing: var(--tracking-heading); line-height: 1; }
.sc-unit-refs { text-align: right; font-size: .75rem; color: rgba(255,255,255,.72); line-height: 1.9; }
.sc-section-head { background: var(--color-navy); color: rgba(255,255,255,.55); padding: 10px 28px; font-size: .64rem; font-weight: var(--font-weight-bold); letter-spacing: .2em; text-transform: uppercase; }
.sc-section-head--light { background: var(--color-surface-soft); color: var(--color-text-muted); }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table thead th { padding: 12px 28px; font-size: .64rem; font-weight: var(--font-weight-bold); letter-spacing: .15em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); text-align: left; }
.sc-table tbody tr { border-bottom: 1px solid var(--color-border); transition: background .18s; }
.sc-table tbody tr:last-child { border-bottom: none; }
.sc-table tbody tr:hover { background: var(--color-surface-soft); }
.sc-table td { padding: 16px 28px; }
.sc-row-label { color: var(--color-text-muted); font-size: .85rem; font-weight: 500; }
.sc-table td strong { font-size: 1.05rem; font-weight: var(--font-weight-bold); color: var(--color-text); display: block; }
.sc-unit { font-size: .72rem; color: var(--color-text-muted); }
.sc-sub { font-size: .72rem; color: var(--color-text-muted); display: block; }
.sc-chars-grid { display: grid; grid-template-columns: 1fr 1fr; }
.sc-char-item { padding: 18px 24px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.sc-char-item:nth-child(even) { border-right: none; }
.sc-char-item:nth-last-child(-n+2) { border-bottom: none; }
.sc-char-label { font-size: .72rem; color: var(--color-text-muted); font-weight: 500; margin-bottom: 6px; }
.sc-char-value { font-size: 1.25rem; font-weight: var(--font-weight-bold); color: var(--color-text); }
.sc-bot-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 28px; border-bottom: 1px solid var(--color-border); font-size: .85rem; }
.sc-bot-row:last-child { border-bottom: none; }
.sc-bot-row span:first-child { color: var(--color-text-muted); font-weight: 500; }
.sc-bot-row span:last-child { font-weight: 700; }
.sc-ipx-badge { background: var(--color-primary); color: #fff !important; padding: 4px 14px; border-radius: 6px; font-size: .8rem; font-weight: var(--font-weight-bold); }

/* Lifestyle */
.lifestyle { background: url('../hero-room.webp') center / cover no-repeat; min-height: 480px; display: flex; align-items: flex-end; position: relative; }
.lifestyle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,16,24,.9) 0%, rgba(10,16,24,.35) 55%, transparent 100%); }
.lifestyle .container { position: relative; z-index: 2; padding-bottom: 72px; }
.ls-quote { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; color: #fff; max-width: 600px; line-height: 1.25; margin-bottom: 16px; }
.ls-quote em { color: var(--color-primary); font-style: normal; }
.ls-sub { font-size: .88rem; color: rgba(255,255,255,.5); }

/* Performance */
.performance { background: var(--color-white); overflow: hidden; }
.perf-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(42px, 6vw, 88px); align-items: center; }
.perf-left { position: relative; isolation: isolate; padding: 30px 12px 30px 0; }
.perf-left::before { content: ''; position: absolute; z-index: -1; inset: -34px 0 -34px -34px; opacity: .45; background-image: linear-gradient(rgba(15,27,45,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,27,45,.045) 1px, transparent 1px), radial-gradient(circle at 34% 48%, rgba(167,23,56,.07), transparent 54%); background-size: 34px 34px, 34px 34px, 100% 100%; mask-image: linear-gradient(90deg, #000 0%, transparent 94%); pointer-events: none; }
.perf-capacity { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 24px; color: var(--color-text); white-space: nowrap; }
.perf-capacity span { font-size: var(--type-technical-value-size); font-weight: var(--font-weight-bold); letter-spacing: -.075em; line-height: .82; }
.perf-capacity small { font-size: 1.15rem; font-weight: var(--font-weight-bold); color: #708198; letter-spacing: -.02em; }
.perf-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.perf-tag { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 15px; border-radius: var(--radius-pill); border: 1px solid rgba(15,27,45,.11); background: rgba(245,247,250,.88); color: #66778d; font-size: .74rem; font-weight: var(--font-weight-bold); line-height: 1; }
.perf-tag--energy { color: var(--color-primary); background: rgba(167,23,56,.055); border-color: rgba(167,23,56,.2); }
.perf-tag--technology { color: #274e8b; background: rgba(43,102,232,.055); border-color: rgba(43,102,232,.16); }
.perf-left-desc { max-width: 390px; margin: 0; color: #667a92; font-size: .94rem; line-height: 1.72; }
.perf-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.perf-energy-card { grid-column: 1 / -1; min-height: 286px; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(190px, .75fr); align-items: end; gap: 32px; padding: var(--space-10) var(--space-12); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-xl); color: #fff; background: linear-gradient(90deg, rgba(4,10,25,.98) 0%, rgba(5,12,28,.86) 46%, rgba(21,10,27,.68) 100%), url('../performance/energy-wave.webp') center / cover no-repeat, #071126; }
.perf-energy-card::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 72% 56%, rgba(192,32,76,.22), transparent 36%); pointer-events: none; }
.perf-energy-card--technology { background: linear-gradient(90deg, rgba(3,4,12,.94) 0%, rgba(5,7,18,.74) 44%, rgba(10,4,24,.42) 100%), url('../performance/technology-energy-wave.gif') center / cover no-repeat, #03040c; }
.perf-energy-card--technology::before { background: radial-gradient(circle at 68% 54%, rgba(128,70,255,.28), transparent 42%); }
.perf-energy-copy, .perf-energy-meta { position: relative; z-index: 1; min-width: 0; }
.perf-metric-title { margin: 0; color: #66788f; font-size: .68rem; font-weight: 850; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.perf-energy-card .perf-metric-title { color: rgba(255,255,255,.52); }
.perf-energy-value { margin: 16px 0 8px; color: #fff; font-size: clamp(3.4rem, 6vw, 6rem); font-weight: var(--font-weight-bold); letter-spacing: -.065em; line-height: .88; text-transform: none; }
.perf-energy-card--technology .perf-energy-value { font-size: clamp(2.8rem, 5vw, 4.8rem); letter-spacing: -.045em; }
.perf-energy-detail { margin: 0; color: rgba(255,255,255,.57); font-size: .88rem; line-height: 1.5; }
.perf-energy-meta { align-self: center; justify-self: stretch; text-align: right; }
.perf-energy-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-pill); background: rgba(255,255,255,.09); color: rgba(255,255,255,.84); font-size: .73rem; font-weight: var(--font-weight-bold); letter-spacing: .04em; backdrop-filter: blur(12px); }
.perf-energy-index { margin-top: 30px; }
.perf-energy-track { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }
.perf-energy-track span { display: block; height: 100%; border-radius: inherit; background: rgba(255,255,255,.22); }
.perf-energy-card--rated .perf-energy-track span { width: 100%; background: linear-gradient(90deg, var(--color-primary), #f04a74); }
.perf-energy-index > span { display: block; margin-top: 9px; color: rgba(255,255,255,.43); font-size: .67rem; font-weight: var(--font-weight-semibold); }
.perf-metric-card { min-height: 264px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: var(--card-padding-lg); border: 1px solid rgba(15,27,45,.07); border-radius: var(--radius-xl); background: #f7f8fa; transition: transform .24s ease, box-shadow .3s ease; }
.perf-metric-card:hover { transform: translateY(-2px); box-shadow: 0 18px 45px rgba(15,27,45,.12); z-index: 3; }
.perf-metric-card::before, .perf-metric-card::after { content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.perf-metric-card::before { opacity: .08; background-position: center; background-size: cover; }
.perf-metric-card::after { z-index: -1; background: linear-gradient(105deg, rgba(248,249,251,.99) 0%, rgba(248,249,251,.95) 54%, rgba(248,249,251,.76) 100%); }
.perf-silence-card::before { background-image: url('../performance/silence-mode.webp'); opacity: .045; }
.perf-airflow-card::before { background-image: url('../performance/airflow-macro.webp'); opacity: .13; background-position: 66% center; }
.perf-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; border-radius: var(--radius-md); }
.perf-icon svg { width: 22px; height: 22px; }
.perf-icon--green { color: #179c58; background: #e2f2e9; }
.perf-icon--blue { color: #2564d9; background: #e4ecfb; }
.perf-metric-value { display: flex; align-items: baseline; gap: 7px; margin: 20px 0 12px; color: var(--color-text); white-space: nowrap; }
.perf-metric-value span { font-size: clamp(3rem, 4.2vw, 4.15rem); font-weight: var(--font-weight-bold); letter-spacing: -.065em; line-height: .88; }
.perf-metric-value small { color: #667a92; font-size: .9rem; font-weight: var(--font-weight-bold); }
.perf-metric-desc { margin: auto 0 0; color: #64778e; font-size: .79rem; line-height: 1.55; }

@media(max-width:1100px) {
  .perf-layout { gap: 42px; }
  .perf-energy-card { padding: 38px; }
  .perf-metric-card { padding: 30px; }
}
@media(max-width:900px) {
  .perf-layout { grid-template-columns: 1fr; gap: 46px; }
  .perf-left { max-width: 620px; padding-block: 12px; }
  .perf-left::before { inset: -22px -40px; }
  .perf-left-desc { max-width: 560px; }
}

/* Similar/related products */
.similar { background: var(--color-white); }
.sim-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gap-desktop); }
.sim-card { position: relative; background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-soft); transition: transform var(--duration-base), box-shadow var(--duration-base); height: 100%; }
.sim-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(15,27,45,.12); z-index: 3; }
.sim-visual { position: relative; height: 190px; overflow: hidden; }
.sim-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; aspect-ratio: 16 / 10; }
.sim-card:hover .sim-img { transform: scale(1.06); }
.sim-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,16,24,.45) 0%, transparent 55%); }
.sim-body { padding: var(--card-padding-md); flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.sim-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.sc-b { padding: 3px 10px; border-radius: var(--radius-pill); font-size: .66rem; font-weight: var(--font-weight-bold); letter-spacing: .05em; }
.sc-b--inv { background: rgba(167,23,56,.1); color: var(--color-primary); }
.sc-b--basic { background: rgba(30,58,95,.1); color: var(--color-navy-secondary); }
.sim-btu { font-size: .74rem; color: var(--color-text-muted); font-weight: 500; margin-left: auto; }
.sim-model { font-size: 1.2rem; font-weight: var(--font-weight-bold); }
.sim-surf { font-size: .78rem; color: var(--color-text-muted); }
.sim-link { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 12px; color: var(--color-primary); font-size: .78rem; font-weight: 700; transition: gap .2s; }
.sim-card:hover .sim-link { gap: 9px; }

/* Final CTA */
.final-cta { background: var(--color-surface-soft); padding-block: var(--space-20); }
.final-cta .cta-card { position:relative; overflow:hidden; background: url('../images/product-final-cta-red.webp') center right/cover no-repeat; border-radius: var(--radius-xl); display:flex; align-items:center; min-height:400px; }
.final-cta .cta-card::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(10,4,8,.78) 0%,rgba(10,4,8,.5) 34%,rgba(10,4,8,.08) 72%,transparent 100%); }
.final-cta .cta-card-content { flex:0 0 55%; padding:60px 52px; position:relative; z-index:2; }
.final-cta .cta-brand-tag { display:flex; align-items:center; gap:7px; font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:22px; }
.final-cta .cta-card h2 { font-size:var(--type-heading-lg-size); font-weight:var(--font-weight-medium); color:#fff; margin-bottom:14px; line-height:1.1; letter-spacing:-.04em; }
.final-cta .cta-card .lead { color:rgba(255,255,255,.62); font-size:.92rem; line-height:1.65; margin-bottom:36px; }
.final-cta .cta-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.final-cta .cta-btn-primary { background:var(--color-primary); color:#fff; min-height:var(--control-height-md); border-radius:var(--radius-pill); padding-inline:var(--control-padding-inline); font-weight:var(--font-weight-semibold); font-size:var(--type-button-size); display:inline-flex; align-items:center; gap:8px; transition:opacity .2s,transform .2s; }
.final-cta .cta-btn-primary:hover { opacity:.88; transform:translateY(-2px); }
.final-cta .cta-btn-ghost { border:1.5px solid rgba(255,255,255,.35); color:rgba(255,255,255,.85); min-height:var(--control-height-md); border-radius:var(--radius-pill); padding-inline:var(--control-padding-inline); font-weight:var(--font-weight-semibold); font-size:var(--type-button-size); display:inline-flex; align-items:center; gap:8px; transition:background .2s,border-color .2s; }
.final-cta .cta-btn-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); }
.final-cta .cta-card-visual { display:none; }
.final-cta .cta-card-visual img { width:100%; max-height:360px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 24px 48px rgba(0,0,0,.4)); position:relative; z-index:1; }

/* Canonical visual system */
.specs, .performance, .similar { padding-block: var(--section-space-standard); }
.btn-p, .btn-g, .cta-btn-primary, .cta-btn-ghost { min-height: var(--control-height-md); padding-inline: var(--control-padding-inline); border-radius: var(--radius-pill); }
.sc-card, .perf-energy-card, .perf-metric-card, .sim-card, .final-cta .cta-card { border-radius: var(--radius-xl); }
.sc-table th, .sc-table td { padding-inline: var(--card-padding-md); }
.sim-body { padding: var(--card-padding-md); }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { align-items: flex-start; }
  .h-badges, .h-btns { justify-content: flex-start; }
  .spec-card-wrap { grid-template-columns: 1fr; gap: 40px; }
  .spec-info { position: static; }
  .sim-grid { grid-template-columns: 1fr 1fr; }
  .hero-left, .hero-right { align-items: center; text-align: center; }
  .hero-left { margin-inline: auto; }
  .breadcrumb, .h-badges, .h-btns { justify-content: center; }
  .h-strip { margin-inline: auto; }
  .back-link { justify-content: center; }
}

/* Mobile & tablet (≤1024px): product image on top + overlapping deep-navy content card */
@media (max-width: 1024px) {
  .hero { display: block; min-height: 0; padding: 0; overflow: visible; }
  .hero-bg { position: relative; inset: auto; width: 100%; height: clamp(300px, 54vh, 440px); z-index: 0; }
  .hero-bg::after { display: none; }

  .hero-inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 16px;
    width: calc(100% - 32px); max-width: none;
    margin: -120px auto 0;
    padding: 38px 22px 28px;
    background: rgba(10, 23, 42, 0.9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
  }

  .hero-left { width: 100%; text-align: center; }
  .hero-left .breadcrumb { justify-content: center; }
  .hero-left .back-link { justify-content: center; }
  .h-desc { max-width: 34rem; margin-inline: auto; }

  .hero-right { width: 100%; align-items: center; gap: 18px; }
  .h-badges { justify-content: center; }
  .h-btns { width: 100%; justify-content: center; }
  .h-btns .product-whatsapp-cta { min-width: 0; }

  .h-strip { width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin-inline: auto; }
  .h-strip-item { align-items: center; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* Tablet (768–1024px): same overlapping-card layout, wider card and taller image */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-bg { height: clamp(420px, 58vh, 600px); }
  .hero-inner {
    width: calc(100% - 48px);
    max-width: 910px;
    margin-top: -130px;
    padding: 46px 36px 36px;
  }
}

@media (max-width: 767px) {
  .performance { padding-block: var(--section-space-standard); }
  .perf-layout { gap: 34px; }
  .perf-capacity span { font-size: clamp(3.8rem, 18vw, 5.35rem); }
  .perf-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-tag { justify-content: center; padding-inline: 10px; text-align: center; }
  .perf-left-desc { font-size: .88rem; }
  .perf-metrics { grid-template-columns: 1fr; gap: 14px; }
  .perf-energy-card { grid-column: 1; grid-template-columns: 1fr; min-height: 320px; gap: 28px; padding: 34px 26px; background-position: 58% center; }
  .perf-energy-meta { width: 100%; align-self: end; justify-self: stretch; text-align: left; }
  .perf-metric-card { padding: 28px; }
}

@media (max-width: 600px) {
  .sc-table, .sc-table tbody, .sc-table tr, .sc-table td { display: block; width: 100%; }
  .sc-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .sc-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding: 0; border-bottom: 1px solid var(--color-border); }
  .sc-table td { min-width: 0; padding: 14px 16px; border: 0; }
  .sc-table .sc-row-label { grid-column: 1 / -1; background: var(--color-surface-soft); padding-block: 10px; font-size: .76rem; font-weight: 700; }
  .sc-table td[data-label] { min-height: 78px; }
  .sc-table td[data-label] + td[data-label] { border-left: 1px solid var(--color-border); }
  .sc-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; color: var(--color-text-muted); font-size: .62rem; font-weight: var(--font-weight-bold); letter-spacing: .1em; text-transform: uppercase; }
  .sc-table td strong { font-size: .96rem; }
  .specs, .performance, .similar { padding-block: var(--section-space-mobile); }
  .spec-info { text-align: center; }
  .spec-hl-list { text-align: left; }
  .perf-capacity, .perf-tags { justify-content: center; }
  .perf-left { text-align: center; }
  .perf-left-desc { margin-inline: auto; }
  .perf-energy-card, .perf-metric-card { padding: var(--card-padding-md); }
  .sim-grid { grid-template-columns: 1fr; }
  .sim-body { padding: var(--card-padding-md); text-align: center; }
  .sim-top { justify-content: center; }
  .sim-btu { margin-left: 0; }
  .sim-link { justify-content: center; }
  .final-cta { padding-block: var(--section-space-mobile); }
  .final-cta .cta-card { min-height: auto; border-radius: 28px; background-position: 64% center; }
  .final-cta .cta-card::before { background: linear-gradient(180deg, rgba(10,4,8,.84) 0%, rgba(10,4,8,.66) 54%, rgba(10,4,8,.5) 100%); }
  .final-cta .cta-card-content { flex-basis: 100%; width: 100%; padding: 42px 24px; text-align: left; }
  .final-cta .cta-card h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .final-cta .cta-card .lead { margin-bottom: 26px; font-size: .95rem; }
  .final-cta .cta-card-visual { display: none; }
  .final-cta .cta-buttons { flex-direction: column; justify-content: center; width: 100%; gap: 12px; }
  .final-cta .cta-buttons a { width: 100%; flex: 0 0 auto; justify-content: center; min-height: 54px; white-space: nowrap; }
}

@media (max-width: 1100px) {
  .sim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    margin-inline: 0;
    gap: clamp(18px, 3vw, 28px);
  }

  .sim-card {
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 54px rgba(15, 27, 45, .08);
  }

  .sim-visual {
    height: clamp(190px, 26vw, 250px);
  }

  .sim-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: clamp(22px, 3vw, 30px);
    text-align: left;
  }

  .sim-top {
    justify-content: flex-start;
    margin: 0;
  }

  .sim-btu {
    margin-left: 8px;
    font-size: .82rem;
    color: var(--color-text-muted);
  }

  .sim-model {
    font-size: clamp(1.35rem, 2.7vw, 1.75rem);
    line-height: 1.02;
    letter-spacing: -.04em;
  }

  .sim-surf {
    font-size: .88rem;
  }

  .sim-link {
    align-self: stretch;
    justify-content: center;
    min-height: 52px;
    margin-top: var(--space-3);
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    color: #fff;
    text-align: center;
    font-size: .88rem;
    box-shadow: 0 12px 28px rgba(15, 27, 45, .14);
  }

  .sim-card:has(.sc-b--basic) .sim-link {
    background: linear-gradient(135deg, var(--color-range-basic), #c82249);
  }

  .sim-card:has(.sc-b--inv) .sim-link {
    background: linear-gradient(135deg, var(--color-range-inverter), #1745b8);
  }

  .sim-card:hover .sim-link {
    gap: 5px;
    filter: saturate(1.08) brightness(1.02);
  }

  .sc-b--inv {
    background: var(--color-range-inverter-soft);
    color: var(--color-range-inverter);
  }

  .sc-b--basic {
    background: var(--color-range-basic-soft);
    color: var(--color-range-basic);
  }
}

@media (max-width: 640px) {
  .sim-grid {
    grid-template-columns: 1fr;
  }

  .sim-visual {
    height: clamp(190px, 58vw, 260px);
  }

  .sim-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "model"
      "surface"
      "action";
    padding: 24px;
    text-align: left;
  }

  .sim-top {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .sim-card .sim-model,
  .sim-card .sim-surf {
    text-align: left;
  }

  .sim-link {
    min-height: 54px;
    margin-top: var(--space-3);
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: .88rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  .perf-metric-card { transition: none; }
  .perf-metric-card:hover { transform: none; }
}