/* ==========================================================================
   Homepage — hero, logo strip, categories, technologies, spotlight, process,
   solutions mosaic, brand marquee, CTA. Loaded only on the homepage.
   ========================================================================== */
.section--tight { padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); }
/* Home page: tighter vertical rhythm between blocks. */
.page-home .section, .page-home .section--tight { padding-block: clamp(.9rem, .6rem + 1vw, 1.6rem); }
.page-home .section-head { margin-block-end: clamp(.75rem, .5rem + .8vw, 1.25rem); }
.center-cta { display: flex; justify-content: center; margin-block-start: clamp(1.5rem, 1.25rem + 1vw, 2.5rem); }
.fade-in { animation: fade var(--t) var(--ease); }

/* ── Hero ── */
.hx { position: relative; overflow: hidden; isolation: isolate; background: #0a0b0d; color: var(--c-on-dark); }
.hx__bg { position: absolute; inset: 0; z-index: -1; }
.hx__city { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%); mask-image: linear-gradient(to top, transparent 0%, #000 45%); }
.hx__grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgb(255 255 255 / 4.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4.5%) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 30% 45%, #000 0%, transparent 75%); }
[dir="ltr"] .hx__grid { -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 0%, transparent 75%); }
.hx__glow { position: absolute; inset: 0; background:
  radial-gradient(40% 50% at 28% 48%, rgb(120 216 80 / 22%) 0%, transparent 70%),
  radial-gradient(35% 40% at 85% 10%, rgb(120 140 170 / 10%) 0%, transparent 70%); }
[dir="ltr"] .hx__glow { transform: scaleX(-1); }
.hx__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 5rem);
  min-height: min(92vh, 920px); padding-block: clamp(5rem, 4rem + 4vw, 8rem) clamp(3.5rem, 3rem + 3vw, 6rem); }
.hx__content > * + * { margin-block-start: 1.75rem; }
.hx__badge { display: inline-flex; align-items: center; gap: .7rem; padding: .35rem .9rem .35rem .45rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 12%); font-size: .85rem; color: #e9e6df;
  transition: background var(--t-fast), border-color var(--t-fast); }
[dir="ltr"] .hx__badge { padding: .35rem .45rem .35rem .9rem; }
.hx__badge:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 24%); }
.hx__badge .icon { width: 16px; height: 16px; color: var(--c-on-dark-muted); }
.hx__badge-tag { padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--c-brand, #78d850); color: #10140f; font-size: .72rem; font-weight: 800; }
.hx__title { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem); font-weight: 850; line-height: 1.22; color: #fff; }
.hx__accent { display: block; padding-block-end: .1em;
  color: var(--c-brand, #78d850); }
.hx__lead { font-size: var(--fs-lead); line-height: 1.95; color: #a7a8ad; max-width: 520px; }
.hx__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hx__stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-block-start: 2rem; margin-block-start: 3rem !important; border-block-start: 1px solid rgb(255 255 255 / 10%); max-width: 600px; }
.hx__stats div { display: flex; flex-direction: column-reverse; }
.hx__stats dd { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 750; color: #fff; line-height: 1.3; }
.hx__stats dt { font-size: var(--fs-caption); color: #8d8f95; }

.hx__visual { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; justify-self: center; }
.hx__halo { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgb(120 216 80 / 38%) 0%, transparent 65%); filter: blur(30px); animation: halo 7s ease-in-out infinite; }
.hx__device { position: relative; width: 100%; height: 100%; animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes halo { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

.glass { background: rgb(28 30 34 / 55%); border: 1px solid rgb(255 255 255 / 13%); border-radius: 20px; color: #fff;
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / 70%), inset 0 1px 0 rgb(255 255 255 / 8%); }
.hx__scene { position: absolute; inset-inline-start: -7%; bottom: 4%; width: min(290px, 62%); padding: 1.1rem 1.2rem 1.2rem; animation: float 9s ease-in-out -3s infinite; }
.hx__scene-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.hx__scene-head strong { display: block; font-size: .98rem; }
.hx__scene-room { font-size: .72rem; color: #9c9ca2; }
.hx__live { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: var(--r-pill); background: rgb(87 199 133 / 14%); color: #7fd6a3; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.hx__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #57c785; box-shadow: 0 0 8px #57c785; }
.hx__row { display: grid; grid-template-columns: 1fr auto; row-gap: .45rem; font-size: .82rem; color: #c8c8cc; }
.hx__row + .hx__row { margin-block-start: .85rem; }
.hx__row b { color: #fff; font-weight: 700; }
.hx__bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 10%); overflow: hidden; }
.hx__bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, #a9824d, #f0d6a6); }
.hx__row--temp { padding-block-start: .85rem; border-block-start: 1px solid rgb(255 255 255 / 8%); align-items: center; }
.hx__row--temp b { font-size: 1.3rem; font-weight: 300; }
.hx__chip { position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; white-space: nowrap; unicode-bidi: isolate; }
.hx__chip .icon { width: 15px; height: 15px; color: #bdeea4; }
.hx__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #bdeea4; box-shadow: 0 0 10px #bdeea4; }
.hx__chip--a { top: 9%; inset-inline-end: 2%; animation: float 8s ease-in-out -1s infinite; }
.hx__chip--b { top: 50%; inset-inline-end: -4%; animation: float 10s ease-in-out -5s infinite; }

/* Hero promises: design & consulting · best price · installation for 5% */
.hx__inner { min-height: min(76vh, 780px); padding-block-end: clamp(2rem, 1.5rem + 2vw, 3rem); }
.hx__props-wrap { padding-block-end: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.hx__props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hx__prop { display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem 1.4rem; border-radius: var(--r-lg); background: rgb(255 255 255 / 5%); }
.hx__prop-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: rgb(120 216 80 / 14%); color: #bdeea4; box-shadow: inset 0 0 0 1px rgb(120 216 80 / 25%); }
.hx__prop-icon .icon { width: 24px; height: 24px; }
.hx__prop-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hx__prop-body strong { font-size: 1.05rem; font-weight: 750; color: #fff; }
.hx__prop-body span { font-size: .86rem; line-height: 1.75; color: #a7a8ad; }
.hx__prop--accent { background: linear-gradient(135deg, rgb(120 216 80 / 16%), rgb(255 255 255 / 4%)); border-color: rgb(120 216 80 / 35%); }
.hx__prop-figure { flex: none; min-width: 52px; font-size: clamp(2.2rem, 1.8rem + 1.2vw, 2.9rem); font-weight: 900; line-height: 1;
  color: var(--c-brand, #78d850); }
@media (max-width: 1024px) { .hx__props { grid-template-columns: 1fr; } }

/* ── Ticker ── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Categories ── */
/* every category on one row: equal columns, compact tiles */
.cat-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .6rem; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .85rem .4rem .9rem; border-radius: var(--r-lg);
  background: radial-gradient(120% 80% at 50% 25%, #fff 0%, var(--c-bg-subtle) 70%);
  border: 1px solid transparent; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); }
.cat-tile:hover { transform: translateY(-4px); border-color: var(--c-border); box-shadow: var(--shadow); }
.cat-tile__img { width: 100%; height: 62px; display: grid; place-items: center; margin-block-end: .35rem; }
.cat-tile__img img { width: 92%; height: 92%; object-fit: contain; transition: transform var(--t-slow) var(--ease); }
/* Schematic category icons */
.cat-icon { width: 54px; height: auto; aspect-ratio: 1; fill: none; stroke: var(--c-ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-slow) var(--ease), stroke var(--t) var(--ease); }
.cat-icon .ci-dot { fill: var(--c-ink); stroke: none; transition: fill var(--t) var(--ease); }
.cat-tile:hover .cat-icon { transform: translateY(-3px) scale(1.05); stroke: var(--c-accent); }
.cat-tile:hover .cat-icon .ci-dot { fill: var(--c-accent); }
.cat-tile__img:has(.cat-icon) { border-radius: var(--r); background: radial-gradient(circle at 50% 45%, #fff 0%, rgb(255 255 255 / 0%) 70%); }
.cat-tile:hover .cat-tile__img img { transform: scale(1.06); }
.cat-tile { text-align: center; }
.cat-tile__name { font-weight: 700; font-size: .92rem; line-height: 1.5; color: var(--c-ink); text-wrap: balance; }
.cat-tile__count { font-size: var(--fs-caption); color: var(--c-muted); }

/* ── Bento technologies ── */

/* ── Spotlight ── */
.spot { position: relative; overflow: hidden; isolation: isolate; color: var(--c-on-dark);
  background: radial-gradient(60% 80% at 25% 50%, #262a30 0%, #0d0e10 70%); padding-block: clamp(1.75rem, 1.4rem + 2vw, 3.5rem); }
[dir="ltr"] .spot { background: radial-gradient(60% 80% at 75% 50%, #262a30 0%, #0d0e10 70%); }
.spot__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); }
.spot__visual { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; display: grid; place-items: center; order: 2; }
.spot__ring { position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgb(120 216 80 / 22%) 0%, transparent 62%);
  box-shadow: inset 0 0 0 1px rgb(120 216 80 / 25%), 0 0 0 36px rgb(255 255 255 / 2.5%), 0 0 0 72px rgb(255 255 255 / 1.5%); }
.spot__visual img { position: relative; width: 80%; filter: drop-shadow(0 40px 50px rgb(0 0 0 / 55%)); transition: transform var(--t-slow) var(--ease); }
.spot__visual:hover img { transform: translateY(-8px) scale(1.02); }
.spot__content > * + * { margin-block-start: 1.4rem; }
.spot .eyebrow { color: #a7a8ad; }
.spot__title { font-size: clamp(2rem, 1.5rem + 2vw, 3.3rem); font-weight: 800; color: #fff; line-height: 1.3; }
.spot__lead { color: #a7a8ad; font-size: var(--fs-lead); line-height: 1.9; max-width: 520px; }
.spot__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid rgb(255 255 255 / 10%); max-width: 520px; }
.spot__specs div { padding-block: 1rem; }
.spot__specs div:nth-child(odd) { padding-inline-end: 1rem; border-inline-end: 1px solid rgb(255 255 255 / 10%); }
.spot__specs div:nth-child(even) { padding-inline-start: 1.25rem; }
.spot__specs div:nth-child(n + 3) { border-block-start: 1px solid rgb(255 255 255 / 10%); }
.spot__specs dt { font-size: var(--fs-caption); color: #8d8f95; }
.spot__specs dd { font-size: 1.15rem; font-weight: 700; color: #fff; }
.spot__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; padding-block-start: .5rem; }
.spot__price .price__main { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.spot__price .price__approx { color: #8d8f95; }

/* ── Segmented tabs ── */
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--c-bg-subtle); flex: none; }
.seg__btn { border: 0; background: transparent; padding: .55rem 1.3rem; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; color: var(--c-muted); transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.seg__btn:hover { color: var(--c-ink); }
.seg__btn[aria-selected="true"] { background: #fff; color: var(--c-ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--c-border); }

/* ── Process ── */
.process { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.process::before { content: ""; position: absolute; top: 24px; inset-inline: 24px; height: 1px; background: linear-gradient(90deg, var(--c-border-strong), var(--c-accent), var(--c-border-strong)); opacity: .7; }
.process__step { position: relative; }
.process__step > * + * { margin-block-start: .6rem; }
.process__num { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1px solid var(--c-accent); color: var(--c-accent); font-weight: 800; font-size: 1.05rem; margin-block-end: 1.1rem; box-shadow: 0 0 0 6px var(--c-bg-subtle); }

/* ── Solutions mosaic ── */
.sol-mosaic { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: repeat(2, 280px); gap: 1rem; }
.sol-tile { position: relative; overflow: hidden; border-radius: var(--r-xl); isolation: isolate; background: var(--c-bg-subtle); }
.sol-tile--1 { grid-row: span 2; }
.sol-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.sol-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(13 13 14 / 82%) 0%, rgb(13 13 14 / 20%) 45%, transparent 70%); }
.sol-tile:hover img { transform: scale(1.05); }
.sol-tile__body { position: absolute; inset-inline: 0; bottom: 0; padding: 1.75rem; display: flex; flex-direction: column; gap: .35rem; color: #fff; }
.sol-tile__body strong { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.7rem); font-weight: 750; }
.sol-tile__body span { font-size: .9rem; color: rgb(255 255 255 / 75%); max-width: 420px; }
.sol-tile__arrow { position: absolute; top: 1.25rem; inset-inline-end: 1.25rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgb(255 255 255 / 85%); color: #16181c; transition: transform var(--t) var(--ease), background var(--t); } /* stays white in dark mode: fixed dark icon */
.sol-tile:hover .sol-tile__arrow { transform: rotate(45deg); background: #fff; }
[dir="ltr"] .sol-tile:hover .sol-tile__arrow { transform: rotate(-45deg); }

/* ── Principles icon ── */
.principle__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-accent-soft); color: var(--c-accent); }
.principle__icon .icon { width: 22px; height: 22px; }

/* ── Brands marquee ── */
.brands-band { padding-block: 2.5rem; border-block: 1px solid var(--c-border); }
.brands-band__title { text-align: center; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; color: var(--c-muted); margin-block-end: 1.5rem; }
.marquee { overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: grid; place-items: center; padding-inline: clamp(1.5rem, 3vw, 3rem); height: 48px; }
.marquee__item img { height: 26px; width: auto; opacity: .5; filter: grayscale(1); transition: opacity var(--t), filter var(--t); }
.marquee__item:hover img { opacity: 1; filter: none; }

/* ── Projects carousel ("stories") ── */
.stories { padding-block: clamp(1.75rem, 1.4rem + 1.6vw, 3rem); overflow: hidden; }
.stories__head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-block-end: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.stories__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 850; line-height: 1.25; color: var(--c-ink); }
/* The track starts aligned with the container and bleeds past the far edge. */
.stories__viewport { --edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: none; cursor: grab; outline: none; }
.stories__viewport::-webkit-scrollbar { display: none; }
.stories__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.stories__viewport.is-dragging .story-card { pointer-events: none; }
.stories__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); }
.stories__track { display: flex; gap: .75rem; width: max-content; padding-inline: var(--edge); }
.stories__slide { width: clamp(260px, 22vw + 120px, 390px); scroll-snap-align: start; flex: none; }
.story-card { display: flex; flex-direction: column; gap: .35rem; user-select: none; -webkit-user-drag: none; }
.story-card__media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #f4f4f3; margin-block-end: 1rem; }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.story-card:hover .story-card__media img { transform: scale(1.04); }
.story-card__sector { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; padding: .25rem .7rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / 90%); font-size: .72rem; font-weight: 700; color: var(--c-ink); box-shadow: var(--shadow-sm); }
.story-card__title { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); font-weight: 700; color: var(--c-ink); line-height: 1.5; }
.story-card__meta { font-size: var(--fs-small); color: var(--c-muted); }
.stories__controls { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 5rem); margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); }
.stories__progress { position: relative; flex: 0 1 700px; height: 2px; background: var(--c-border); border-radius: 2px; }
.stories__thumb { position: absolute; inset-block: -1px; inset-inline-start: var(--offset, 0%); width: var(--size, 30%); border-radius: 2px; background: var(--c-ink); transition: inset-inline-start .15s linear, width .2s; }
.stories__buttons { display: flex; gap: .9rem; flex: none; }
.stories__btn { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--c-border-strong); background: #fff; color: var(--c-ink);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), opacity var(--t-fast); }
.stories__btn:hover:not(:disabled) { border-color: var(--c-ink); }
.stories__btn:disabled { color: var(--c-faint); border-color: var(--c-border); cursor: default; }
.stories__btn .icon { width: 20px; height: 20px; }
@media (max-width: 720px) {
  .stories__head { flex-direction: column; align-items: start; }
  .stories__controls { gap: 1.25rem; }
  .stories__btn { width: 44px; height: 44px; }
}

/* ── Partner brands: fixed two-row checkerboard grid (cells swap brands via app.js) ── */
/* Last block on the home page: no space below, the footer's green line closes the band. */
.logos { padding-block: clamp(.75rem, .5rem + .8vw, 1.25rem) 0; overflow: hidden; }
.logos__title { scroll-margin-top: calc(var(--header-h) + 2rem); text-align: center; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); font-weight: 500; color: var(--c-muted); line-height: 1.6;
  padding-inline: var(--gutter); margin-block-end: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.logos__title strong { font-weight: 800; color: var(--c-ink); }
.logos__band { border-block-start: 3px solid var(--c-brand, #78d850); } /* same green line as the footer below */
.logos__grid { --cols: 8; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
/* Two rows only: cells past 2 × columns wait in the pool (JS) or stay hidden (no JS). */
.logos__cell { position: relative; display: none; height: clamp(64px, 3vw + 44px, 88px); background: #fff; border-inline-end: 1px solid var(--c-border); }
.logos__cell:nth-child(-n + 16) { display: block; }
.logos__cell:nth-child(n + 9) { border-block-start: 1px solid var(--c-border); }
.logos__cell:nth-child(8n) { border-inline-end: 0; }
/* "+" marks where the grid lines cross (between the two rows). */
.logos__cell::after { content: ""; position: absolute; z-index: 2; inset-block-end: -9px; inset-inline-end: -9px; width: 17px; height: 17px; display: none; pointer-events: none;
  background: linear-gradient(var(--c-graphite), var(--c-graphite)) center / 100% 1.5px no-repeat, linear-gradient(var(--c-graphite), var(--c-graphite)) center / 1.5px 100% no-repeat; }
.logos__cell:nth-child(-n + 7)::after { display: block; }
.logos__band { position: relative; }
/* Checkerboard: odd cells in row 1, even cells in row 2. */
.logos__cell:nth-child(-n + 8):nth-child(even), .logos__cell:nth-child(n + 9):nth-child(-n + 16):nth-child(odd) { background: #f4f4f3; }
.logos__link { display: grid; place-items: center; width: 100%; height: 100%; padding: .6rem 1rem; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.logos__link.is-swapping { opacity: 0; transform: scale(.94); }
.logos__cell img { max-width: 78%; max-height: 72%; width: auto; object-fit: contain; transition: transform var(--t) var(--ease), filter var(--t) var(--ease); }
.logos__link:hover img, .logos__link:focus-visible img { transform: scale(1.07); }
.logos__link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -4px; }
.logos__word { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 800; letter-spacing: .01em; color: var(--c-graphite); white-space: nowrap; }
@media (max-width: 1100px) {
  .logos__grid { --cols: 6; }
  .logos__cell:nth-child(-n + 16) { display: none; } .logos__cell:nth-child(-n + 12) { display: block; }
  .logos__cell:nth-child(n + 9) { border-block-start: 0; } .logos__cell:nth-child(n + 7) { border-block-start: 1px solid var(--c-border); }
  .logos__cell:nth-child(8n) { border-inline-end: 1px solid var(--c-border); } .logos__cell:nth-child(6n) { border-inline-end: 0; }
  .logos__cell:nth-child(-n + 7)::after { display: none; } .logos__cell:nth-child(-n + 5)::after { display: block; }
  .logos__cell:nth-child(-n + 8):nth-child(even), .logos__cell:nth-child(n + 9):nth-child(-n + 16):nth-child(odd) { background: #fff; }
  .logos__cell:nth-child(-n + 6):nth-child(even), .logos__cell:nth-child(n + 7):nth-child(-n + 12):nth-child(odd) { background: #f4f4f3; }
}
@media (max-width: 720px) {
  .logos__grid { --cols: 3; }
  .logos__cell:nth-child(-n + 12) { display: none; } .logos__cell:nth-child(-n + 6) { display: block; }
  .logos__cell:nth-child(n + 7) { border-block-start: 0; } .logos__cell:nth-child(n + 4) { border-block-start: 1px solid var(--c-border); }
  .logos__cell:nth-child(6n) { border-inline-end: 1px solid var(--c-border); } .logos__cell:nth-child(3n) { border-inline-end: 0; }
  .logos__cell:nth-child(-n + 5)::after { display: none; } .logos__cell:nth-child(-n + 2)::after { display: block; }
  .logos__cell:nth-child(-n + 6):nth-child(even), .logos__cell:nth-child(n + 7):nth-child(-n + 12):nth-child(odd) { background: #fff; }
  .logos__cell:nth-child(-n + 6):nth-child(even) { background: #f4f4f3; } /* odd column count: even cells form the checkerboard */
  .logos__cell img { max-height: 40px; }
}

/* ── CTA ── */
.cta-x { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: clamp(2.5rem, 2rem + 4vw, 5rem); border-radius: var(--r-xl); background: #0d0e10; color: var(--c-on-dark); }
.cta-x::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 15% 50%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 15% 50%, #000, transparent 70%); }
.cta-x__glow { position: absolute; z-index: -1; width: 520px; height: 520px; inset-inline-end: -120px; top: 50%; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle, rgb(120 216 80 / 35%) 0%, transparent 65%); filter: blur(10px); }
.cta-x h2 { color: #fff; }
.cta-x__text p { color: #a7a8ad; max-width: 540px; margin-block-start: 1rem; line-height: 1.9; }
.cta-x__actions { display: flex; flex-wrap: wrap; gap: .75rem; flex: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  /* eleven columns get too narrow here: the row scrolls sideways instead */
  .cat-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: .25rem 1rem; }
  .cat-tile { flex: 0 0 116px; scroll-snap-align: start; }
  .hx__inner { grid-template-columns: 1fr; min-height: auto; }
  .hx__visual { max-width: 460px; }
  .spot__inner { grid-template-columns: 1fr; }
  .spot__visual { order: 0; max-width: 400px; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process::before { display: none; }
  .cta-x { flex-direction: column; align-items: start; }
}
@media (max-width: 720px) {
  .hx__stats { grid-template-columns: repeat(2, auto); gap: 1.25rem 2.5rem; }
  .hx__actions .btn { flex: 1; }
  .hx__visual { max-width: 340px; }
  .hx__scene { inset-inline-start: -2%; bottom: -4%; width: 200px; padding: .8rem; font-size: .9em; }
  .hx__chip--b { display: none; }
  .hx__chip--b { inset-inline-end: 0; }
  .cat-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) 1rem; scrollbar-width: none; }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-tile { flex: 0 0 31%; }
  .section-head .seg { width: 100%; }
  .seg__btn { flex: 1; }
  .process { grid-template-columns: 1fr; }
  .sol-mosaic { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 260px; }
  .sol-tile--1 { grid-row: auto; }
  .spot__specs { grid-template-columns: 1fr; }
  .spot__specs div:nth-child(odd) { border-inline-end: 0; padding-inline-end: 0; }
  .spot__specs div:nth-child(even) { padding-inline-start: 0; }
  .spot__specs div + div { border-block-start: 1px solid rgb(255 255 255 / 10%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track, .hx__device, .hx__scene, .hx__chip, .hx__halo { animation: none !important; }
}

/* ── Image hero, four banners and product rows (config: content.home) ── */
.home-hero { padding-block: clamp(.75rem, .5rem + 1vw, 1.5rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.home-hero__link { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--c-bg-subtle); box-shadow: var(--shadow-sm); }
.home-hero__img { display: block; width: 100%; height: auto; }
.home-banners { padding-block: clamp(.4rem, .25rem + .6vw, 1rem); }
.home-banners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, .5rem + 1vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.home-banner { display: block; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--c-bg-subtle); }
.home-banner img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.home-banner:hover img { transform: scale(1.04); }
.home-row.section--tight { padding-block: clamp(1rem, .75rem + 1vw, 1.75rem); }
.home-row .section-head { margin-block-end: clamp(1.25rem, 1rem + 1vw, 2rem); }
/* Placeholder until the image file exists */
.home-slot {
  display: grid; place-items: center; aspect-ratio: 1; padding: 1rem; text-align: center;
  font-size: .85rem; font-weight: 600; color: var(--c-muted);
  background: repeating-linear-gradient(45deg, var(--c-bg-subtle) 0 14px, var(--c-surface) 14px 28px);
  border: 1.5px dashed var(--c-border-strong); border-radius: inherit;
}
.home-slot--hero { aspect-ratio: 3 / 1; font-size: 1rem; }
@media (max-width: 720px) { .home-banners__grid { grid-template-columns: minmax(0, 1fr); } }
.home-banner .home-slot { aspect-ratio: 820 / 300; }
@media (max-width: 720px) { .home-slot--hero { aspect-ratio: 1; } .home-hero__link, .home-banner { border-radius: var(--r); } }

/* ── Academy band: cards slide sideways over a curved accent band ── */
.academy-band { padding-block: clamp(.9rem, .7rem + .8vw, 1.5rem) clamp(1rem, .8rem + 1vw, 1.75rem); overflow: hidden; }
.academy-band__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.25rem; }
.academy-band__title { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; font-size: var(--fs-h3); font-weight: 900; color: var(--c-ink); }
.academy-band__title small { flex-basis: 100%; padding-inline-start: 3.25rem; font-size: .85rem; font-weight: 500; color: var(--c-muted); }
.academy-band__icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--c-accent); color: #fff; }
.academy-band__icon .icon { width: 20px; height: 20px; }
.academy-band__nav { display: flex; align-items: center; gap: .35rem; }
.academy-band__nav .icon-btn { border: 1px solid var(--c-border); background: var(--c-surface); }
.academy-band__nav .link { margin-inline-start: .5rem; }
/* The band: an accent strip behind the cards, its long edges curved like a wave */
.academy-band__stage { position: relative; isolation: isolate; }
.academy-band__stage::before {
  content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block: 8% 4%;
  background: linear-gradient(90deg, var(--c-accent), #78d850 50%, var(--c-accent));
  /* concave top and bottom edges */
  -webkit-mask: radial-gradient(140% 70px at 50% 0, transparent 97%, #000 100%) top / 100% 51% no-repeat, radial-gradient(140% 70px at 50% 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
          mask: radial-gradient(140% 70px at 50% 0, transparent 97%, #000 100%) top / 100% 51% no-repeat, radial-gradient(140% 70px at 50% 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
}
.academy-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 1.25rem) / 3.4); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block: 1.25rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.academy-rail::-webkit-scrollbar { display: none; }
/* Mouse drag (app.js): grab cursor; while dragging the rail follows the pointer without smoothing or snapping. */
.academy-rail { cursor: grab; }
.academy-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.academy-rail > .article-card { scroll-snap-align: start; box-shadow: var(--shadow); }
@media (max-width: 1024px) { .academy-rail { grid-auto-columns: calc((100% - 1.25rem) / 2.2); } }
@media (max-width: 640px) { .academy-rail { grid-auto-columns: 82%; gap: .85rem; } .academy-band__nav .icon-btn { display: none; } .academy-band__title small { padding-inline-start: 0; } }
.academy-band__nav.is-static .icon-btn { display: none; }

/* ── Special offers box: warm tinted panel around the product row ── */
.special-box { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-xl); background: linear-gradient(135deg, var(--c-warning-soft), var(--c-accent-soft)); border: 1px solid color-mix(in srgb, var(--c-warning) 18%, transparent); }
.special-box .eyebrow { color: var(--c-warning); }

/* ── Hero slider: slides cross-fade, dots show the autoplay progress ── */
.hero-slider { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--r-lg); background: var(--c-bg-subtle); box-shadow: var(--shadow-sm); touch-action: pan-y; }
.hero-slider__track { position: absolute; inset: 0; }
.hero-slider__slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s; }
.hero-slider__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); z-index: 1; }
.hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; }
.hero-slider__slide.is-active img { transform: scale(1); }
.hero-slider__slide .home-slot { height: 100%; aspect-ratio: auto; border-radius: 0; }
.hero-slider__arrow {
  position: absolute; z-index: 3; inset-block-start: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin-block-start: -23px;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 75%); color: #16181c; cursor: pointer; backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.hero-slider__arrow .icon { width: 22px; height: 22px; }
.hero-slider__arrow--prev { inset-inline-start: 1rem; }
.hero-slider__arrow--next { inset-inline-end: 1rem; }
.hero-slider:hover .hero-slider__arrow, .hero-slider__arrow:focus-visible { opacity: 1; }
.hero-slider__arrow:hover { background: #fff; }
.hero-slider__dots { position: absolute; z-index: 3; inset-block-end: 1rem; inset-inline: 0; display: flex; justify-content: center; gap: .45rem; }
.hero-slider__dots button { position: relative; width: 28px; height: 6px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgb(255 255 255 / 45%); cursor: pointer; overflow: hidden; transition: width var(--t) var(--ease); }
.hero-slider__dots button.is-active { width: 54px; }
.hero-slider__dots button span { position: absolute; inset: 0; transform: scaleX(0); transform-origin: right; background: #fff; }
[dir="ltr"] .hero-slider__dots button span { transform-origin: left; }
.hero-slider__dots button.is-active span { animation: hero-progress var(--hero-delay, 6s) linear forwards; }
.hero-slider.is-paused .hero-slider__dots button.is-active span { animation-play-state: paused; }
@keyframes hero-progress { to { transform: scaleX(1); } }
@media (max-width: 720px) { .hero-slider { border-radius: var(--r); } .hero-slider__arrow { display: none; } .hero-slider__dots { inset-block-end: .6rem; } }
@media (prefers-reduced-motion: reduce) { .hero-slider__slide, .hero-slider__slide img { transition: none; transform: none; } .hero-slider__dots button.is-active span { animation: none; transform: scaleX(1); } }
/* Product rail: four cards in view, slides sideways (special offers) */
.product-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 1rem) / 4); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; padding-block: .25rem; }
.product-rail::-webkit-scrollbar { display: none; }
.product-rail > * { scroll-snap-align: start; min-width: 0; }
@media (max-width: 1024px) { .product-rail { grid-auto-columns: calc((100% - 2 * 1rem) / 3); } }
@media (max-width: 720px) { .product-rail { grid-auto-columns: calc((100% - 1rem) / 2.15); gap: .75rem; } }

/* ── Home: glass header and category bar over a full-width hero ── */
.page-home .site-header:not(.is-scrolled) { background: rgb(255 255 255 / 38%); border-color: rgb(255 255 255 / 40%); }
.page-home .cat-bar:not(.is-floating) .cat-bar__list { background: rgb(255 255 255 / 58%); border-color: rgb(255 255 255 / 55%); box-shadow: 0 8px 30px -12px rgb(0 0 0 / 25%);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.page-home .cat-bar:not(.is-floating) .cat-bar__link { color: var(--c-ink); }
.page-home .cat-bar:not(.is-floating) .cat-bar__link:hover { background: rgb(255 255 255 / 60%); }
.page-home .header-search { background: rgb(255 255 255 / 55%); }
.page-home .site-header.is-scrolled .header-search { background: var(--c-bg-subtle); }

/* The hero slides up under header + category bar (--hero-overlap is measured in app.js) */
.page-home .home-hero { position: relative; z-index: 0; margin-block-start: calc(-1 * var(--hero-overlap, 145px)); padding: 0; }
.page-home .home-hero > .container { max-width: none; padding: 0; }
.page-home .hero-slider { aspect-ratio: auto; height: min(calc(var(--hero-overlap, 145px) + 50vw), 94vh); min-height: calc(var(--hero-overlap, 145px) + 220px); border-radius: 0; box-shadow: none; }
/* A soft shade at the top keeps the glass bars readable on bright photos */
.page-home .hero-slider::before { content: ""; position: absolute; z-index: 2; inset-inline: 0; inset-block-start: 0; height: calc(var(--hero-overlap, 145px) + 40px); background: linear-gradient(rgb(255 255 255 / 25%), transparent); pointer-events: none; }
.page-home .hero-slider__dots { inset-block-end: 1.5rem; }
.page-home .hero-slider__arrow { inset-block-start: calc(50% + var(--hero-overlap, 145px) / 2); }

/* ── Banner discount badge: a red diagonal ribbon across the banner's top-right corner ── */
.home-banner { position: relative; container-type: inline-size; }
.banner-badge {
  position: absolute; z-index: 1; top: 0; right: 0; width: 12.5em; height: 12.5em; overflow: hidden; pointer-events: none;
  font-size: clamp(.5rem, 1.7cqw, .9rem); animation: banner-badge-in .55s var(--ease) both .2s;
}
.banner-badge__inner {
  position: absolute; top: 2.75em; right: -3.9em; width: 17em; transform: rotate(45deg);
  display: flex; align-items: center; justify-content: center; gap: .35em; padding: .5em 0; white-space: nowrap; line-height: 1;
  background: linear-gradient(135deg, #ff5a5f, #d9363e); color: #fff;
  box-shadow: 0 6px 16px -6px rgb(180 30 40 / 70%), inset 0 1px 0 rgb(255 255 255 / 25%), inset 0 -1px 0 rgb(0 0 0 / 12%);
}
.banner-badge__inner small { font-size: 1em; font-weight: 700; opacity: .95; }
.banner-badge__inner strong { order: 1; font-size: 1.3em; font-weight: 900; letter-spacing: -.01em; }
.banner-badge__inner small:last-child { order: 2; }
@keyframes banner-badge-in { from { opacity: 0; transform: translate(10px, -10px); } }
@media (prefers-reduced-motion: reduce) { .banner-badge { animation: none; } }

/* ── Home: category picture tiles ── */
.cat-pics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.cat-pic { position: relative; display: block; overflow: hidden; border-radius: 50%; background: linear-gradient(to right, #a8a8a8, #fefefe); aspect-ratio: 1;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
/* The ring around the zoomed-out picture continues the picture's own grey gradient (touch panels: flat grey). */
.cat-pic:has(img[src*="touch-panels"]) { background: #d9d9d9; }
/* Slightly zoomed out so the title baked into the picture stays inside the circle. */
.cat-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(.9); transition: transform .6s var(--ease); }
.cat-pic:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgb(30 60 20 / 45%); }
.cat-pic:hover img { transform: scale(.94); }
.cat-pic:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
/* Centred at the top: a corner would fall outside the circle. */
.cat-pic__count { position: absolute; inset-block-start: 9%; inset-inline: 0; margin-inline: auto; width: max-content; padding: .2rem .6rem; border-radius: 999px;
  background: rgb(255 255 255 / 85%); color: var(--c-graphite, #333); font-size: .72rem; font-weight: 700; backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.cat-pic:hover .cat-pic__count, .cat-pic:focus-visible .cat-pic__count { opacity: 1; transform: none; }
@media (max-width: 1024px) { .cat-pics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-pic__count { opacity: 1; transform: none; } }

/* Technologies: one compact row of logo tiles */
.tech-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.tech-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1rem 1rem .9rem; border: 1px solid var(--c-border); border-radius: 16px;
  background: var(--c-surface); color: var(--c-ink); text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.tech-tile:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: 0 8px 22px -14px rgb(0 0 0 / 35%); }
.tech-tile__logo { display: grid; place-items: center; width: 44px; height: 44px; margin-block-end: .25rem; border-radius: 12px; background: var(--c-accent-soft); color: var(--c-accent); }
.tech-tile__logo svg { width: 30px; height: 30px; }
.tech-tile__name { font-weight: 800; font-size: 1.05rem; direction: ltr; }
.tech-tile__tagline { font-size: .78rem; line-height: 1.6; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tech-tile__count { display: inline-flex; align-items: center; gap: .3rem; margin-block-start: auto; padding-block-start: .3rem; font-size: .75rem; font-weight: 700; color: var(--c-accent); }
.tech-tile__count .icon { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.tech-tile:hover .tech-tile__count .icon { transform: translateX(-3px); }
[dir="ltr"] .tech-tile:hover .tech-tile__count .icon { transform: translateX(3px); }
@media (max-width: 1100px) { .tech-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tech-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .tech-tile { padding: .85rem; } }

/* ── Home bands: one family of green strips behind the content, like the academy band ──
   Each section gets its own shape (tilted ribbon, soft wave, pill, dotted panel) in the same greens. */
.page-home #main { overflow-x: clip; } /* full-bleed bands reach the viewport edges without a side scroll */
.hband { position: relative; isolation: isolate; }
.hband::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }

/* Discounts: a tilted ribbon, solid green like the academy band. */
.hband--tilt { padding-block: 1.25rem; }
.hband--tilt::before {
  inset-inline: calc(50% - 50vw); inset-block: 14% 4%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-brand, #78d850) 55%, var(--c-accent));
  clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%);
}
.hband--tilt .product-card { box-shadow: var(--shadow); }

/* Brand row and featured products: a soft tint with the academy band's curved edges. */
.hband--wave { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); }
.hband--wave::before {
  inset-inline: calc(50% - 50vw); inset-block: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-brand, #78d850) 22%, var(--c-accent-soft)), color-mix(in srgb, var(--c-brand, #78d850) 42%, var(--c-accent-soft)) 55%, color-mix(in srgb, var(--c-brand, #78d850) 22%, var(--c-accent-soft)));
  -webkit-mask: radial-gradient(140% 60px at 50% 0, transparent 97%, #000 100%) top / 100% 51% no-repeat, radial-gradient(140% 60px at 50% 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
          mask: radial-gradient(140% 60px at 50% 0, transparent 97%, #000 100%) top / 100% 51% no-repeat, radial-gradient(140% 60px at 50% 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
}

/* Categories: a green pill through the circles' centres, the circles strung on it like beads. */
.hband--pill { padding-block: .5rem; }
.hband--pill::before {
  inset-inline: -1rem; inset-block-start: 50%; height: 42%; transform: translateY(-50%); border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-brand, #78d850) 50%, var(--c-accent));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 25%), 0 10px 30px -18px var(--c-accent);
}
@media (max-width: 1024px) { /* several rows of circles: a soft rounded panel instead of one pill */
  .hband--pill { padding: 1rem; }
  .hband--pill::before { inset: 0; height: auto; transform: none; border-radius: var(--r-xl); box-shadow: none;
    background: linear-gradient(135deg, var(--c-accent-soft), color-mix(in srgb, var(--c-brand, #78d850) 30%, var(--c-accent-soft))); }
}

/* Technologies: a rounded panel with a dotted "blueprint" grid and two green glows. */
.hband--grid { padding: clamp(1rem, .75rem + 1vw, 1.5rem); }
.hband--grid::before {
  inset: 0; border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--c-brand, #78d850) 38%, transparent), transparent 42%),
    radial-gradient(circle at 88% 90%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 40%),
    radial-gradient(color-mix(in srgb, var(--c-accent) 32%, transparent) 1.1px, transparent 1.6px) 0 0 / 16px 16px,
    var(--c-accent-soft);
  border: 1px solid color-mix(in srgb, var(--c-brand, #78d850) 30%, transparent);
}

/* ── Deals band ("amazing offers"): green patterned band, top notch, intro card with countdown, white product cards ── */
.deal-band { position: relative; margin-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M-20 60C60 20 120 100 200 70S330 10 420 50 560 120 640 80'/%3E%3Cpath d='M-20 90C70 50 130 130 210 100S340 40 430 80 570 150 640 110'/%3E%3Cpath d='M-20 120C80 80 140 160 220 130S350 70 440 110 580 180 640 140'/%3E%3Cpath d='M-20 200C90 170 160 240 240 210S380 150 470 190 590 250 640 220'/%3E%3Cpath d='M-20 230C100 200 170 270 250 240S390 180 480 220 600 280 640 250'/%3E%3Cellipse cx='500' cy='150' rx='60' ry='28'/%3E%3Cellipse cx='500' cy='150' rx='34' ry='14'/%3E%3Cellipse cx='110' cy='250' rx='48' ry='20'/%3E%3C/g%3E%3C/svg%3E") center / 600px 300px repeat, linear-gradient(120deg, #1d5a12, var(--c-accent) 55%, #2c7a1a); }
.deal-band__notch { position: absolute; inset-block-start: -1px; inset-inline-start: 50%; translate: -50% 0; display: grid; place-items: center;
  width: 64px; height: 26px; border-radius: 0 0 40px 40px; background: var(--c-bg); color: var(--c-accent); }
[dir="rtl"] .deal-band__notch { translate: 50% 0; }
.deal-band__notch .icon { width: 18px; height: 18px; }
.deal-band__inner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.deal-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.25rem 1rem; border-radius: 22px;
  background: var(--c-surface); text-align: center; box-shadow: 0 18px 40px -24px rgb(0 0 0 / 55%); }
.deal-intro__title { display: grid; gap: .1rem; margin: 0; line-height: 1.25; }
.deal-intro__title span { font-size: 1.6rem; font-weight: 900; color: var(--c-accent); }
.deal-intro__title strong { font-size: 1.45rem; font-weight: 900; color: var(--c-ink); }
.deal-intro__pill { display: inline-block; padding: .3rem .9rem; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: .78rem; font-weight: 700; }
.deal-intro__max { margin: 0; font-size: .95rem; color: var(--c-muted); }
.deal-intro__max b { font-size: 1.5rem; font-weight: 900; color: var(--c-accent); }
.deal-timer { display: flex; gap: .4rem; direction: rtl; }
.deal-timer__cell { display: grid; justify-items: center; gap: .15rem; min-width: 40px; padding: .4rem .25rem; border-radius: 10px; background: var(--c-bg-subtle); }
.deal-timer__cell b { font-size: 1.1rem; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.deal-timer__cell small { font-size: .65rem; color: var(--c-muted); }
.deal-intro__nav { display: flex; gap: .4rem; }
.deal-intro__nav .icon-btn { border: 1px solid var(--c-border); background: var(--c-surface); }
.deal-rail { grid-auto-columns: calc((100% - 4 * 1rem) / 4.5); padding-block: .25rem; cursor: grab; } /* 4.5 cards: the half card invites a scroll */
.deal-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.deal-rail .product-card { box-shadow: 0 14px 30px -20px rgb(0 0 0 / 55%); }
@media (max-width: 1100px) { .deal-rail { grid-auto-columns: calc((100% - 3 * 1rem) / 3.5); } }
@media (max-width: 720px) {
  .deal-band__inner { grid-template-columns: 1fr; }
  .deal-intro { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: .9rem 1rem; text-align: start; }
  .deal-intro__title { display: flex; gap: .4rem; }
  .deal-intro__title span, .deal-intro__title strong { font-size: 1.2rem; }
  .deal-rail { grid-auto-columns: 62%; }
}

/* ── Brand band (home): the deals band's sibling — dark graphite, diagonal lines, green glow, intro on the far side, notch at the bottom ── */
.deal-band--brand { background:
    radial-gradient(60% 120% at 85% 50%, color-mix(in srgb, var(--brand, #78d850) 26%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 18px),
    linear-gradient(120deg, #101214, #1c2024 55%, #121417); }
.deal-band--brand .deal-band__inner { grid-template-columns: minmax(0, 1fr) 220px; }
.deal-band--brand .deal-intro { order: 2; }
.deal-band--brand .deal-rail { order: 1; }
.deal-band--brand .deal-band__notch { inset-block-start: auto; inset-block-end: -1px; border-radius: 40px 40px 0 0; }
.deal-intro__logo { display: grid; place-items: center; width: 120px; height: 56px; border-radius: 14px; background: #fff; border: 1px solid var(--c-border); }
.deal-intro__logo img { max-width: 80%; max-height: 60%; width: auto; height: auto; object-fit: contain; }
.deal-band--brand .deal-intro__title span { font-size: 1.05rem; color: var(--c-muted); font-weight: 700; }
.deal-band--brand .deal-intro__title strong { font-size: 1.6rem; }
.deal-intro__count { font-size: .85rem; font-weight: 700; color: var(--c-accent); }
a.deal-intro__pill { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
a.deal-intro__pill .icon { width: 14px; height: 14px; }
a.deal-intro__pill:hover { filter: brightness(1.08); }
@media (max-width: 720px) {
  .deal-band--brand .deal-band__inner { grid-template-columns: 1fr; }
  .deal-band--brand .deal-intro { order: 0; }
  .deal-intro__logo { width: 84px; height: 40px; }
}

/* Deals band: "view all" as an outline link under the timer */
.deal-intro__all { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .9rem; border-radius: 999px; border: 1.5px solid var(--c-accent);
  color: var(--c-accent); font-size: .8rem; font-weight: 700; text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.deal-intro__all:hover { background: var(--c-accent); color: #fff; }
.deal-intro__all .icon { width: 14px; height: 14px; }

/* Brand row intro card: the brand's own colour (config content.home.brand_row_color) */
.deal-band--brand .deal-intro { position: relative; overflow: hidden; justify-content: flex-start; padding-block-start: 1.6rem; gap: .7rem; }
.deal-band--brand .deal-intro::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 6px; background: var(--brand); }
.deal-band--brand .deal-intro__logo { width: 150px; height: 64px; border: 0; background: transparent; }
.deal-band--brand .deal-intro__logo img { max-width: 100%; max-height: 100%; }
.deal-intro__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.deal-intro__badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  background: var(--c-bg-subtle); color: var(--c-graphite); }
.deal-intro__badge .icon { width: 12px; height: 12px; color: var(--c-accent); }
.deal-intro__desc { margin: 0; font-size: .78rem; line-height: 1.8; color: var(--c-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.deal-intro__stats { display: flex; align-items: center; justify-content: center; gap: .6rem; padding-block: .45rem; border-block: 1px solid var(--c-border); width: 100%; font-size: .78rem; color: var(--c-muted); }
.deal-intro__stats b { font-size: 1.15rem; font-weight: 900; color: var(--brand); }
.deal-intro__tech { display: inline-flex; gap: .25rem; }
.deal-intro__tech a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }
.deal-intro__tech svg { width: 18px; height: 18px; }
.deal-band--brand a.deal-intro__pill { background: var(--brand); }
.deal-band--brand .deal-intro__nav .icon-btn:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 720px) {
  .deal-band--brand .deal-intro { flex-direction: column; align-items: center; text-align: center; }
  .deal-band--brand .deal-intro__logo { width: 110px; height: 44px; }
}

/* Brand band variants: cards running left → right from the intro card; intro card on the start side */
.deal-rail--ltr { direction: ltr; }
.deal-rail--ltr > * { direction: rtl; }
.deal-band--brand-start { background:
    radial-gradient(60% 120% at 15% 50%, color-mix(in srgb, var(--brand, #78d850) 26%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 18px),
    linear-gradient(240deg, #101214, #1c2024 55%, #121417); }
.deal-band--brand-start .deal-band__inner { grid-template-columns: 220px minmax(0, 1fr); }
.deal-band--brand-start .deal-intro { order: 0; }
@media (max-width: 720px) { .deal-band--brand-start .deal-band__inner { grid-template-columns: 1fr; } }
.deal-band--brand a.deal-intro__pill { white-space: nowrap; }

/* ── Coded brand banners: brand tint, logo + tagline + CTA on the start side, products on a light stage ── */
.brand-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 4cqw;
  container-type: inline-size; aspect-ratio: 820 / 300; height: 100%; padding: 0 6cqw 0 3cqw; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--c-border)); text-decoration: none; color: var(--c-ink);
  background:
    radial-gradient(circle at 1.5px 1.5px, color-mix(in srgb, var(--brand) 16%, transparent) 1.5px, transparent 0) 0 0 / 18px 18px,
    linear-gradient(110deg, color-mix(in srgb, var(--brand) 9%, var(--c-surface)) 0%, var(--c-surface) 62%);
  transition: border-color var(--t-fast) var(--ease), box-shadow .35s var(--ease), translate .35s var(--ease); }
/* Brand stripe on the start edge */
.brand-banner::before { content: ""; position: absolute; inset-block: 18%; inset-inline-start: 0; width: 5px; border-radius: 0 4px 4px 0; background: var(--brand); }
.brand-banner:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--brand) 60%, transparent); translate: 0 -2px; }
.brand-banner__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2.2cqw; min-width: 0; }
.brand-banner__kicker { padding: .3em .9em; border-radius: 999px; font-size: clamp(.68rem, 2.1cqw, .85rem); font-weight: 800;
  background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.brand-banner__logo { display: block; height: clamp(26px, 7.5cqw, 56px); width: auto; max-width: 100%; object-fit: contain; }
.brand-banner__name { font-size: clamp(1.2rem, 5.5cqw, 2.2rem); font-weight: 900; color: var(--brand); }
.brand-banner__tagline { font-size: clamp(.72rem, 2.3cqw, .95rem); font-weight: 600; color: var(--c-muted); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brand-banner__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-block-start: .4cqw; }
.brand-banner__cta { display: inline-flex; align-items: center; gap: .35em; padding: .55em 1.1em; border-radius: 999px; white-space: nowrap;
  font-size: clamp(.72rem, 2.1cqw, .88rem); font-weight: 800; background: var(--brand); color: #fff; }
.brand-banner__cta .icon { width: 1.1em; height: 1.1em; transition: translate var(--t-fast) var(--ease); }
.brand-banner:hover .brand-banner__cta .icon { translate: -4px 0; }
[dir="ltr"] .brand-banner:hover .brand-banner__cta .icon { translate: 4px 0; }
.brand-banner__off { font-size: clamp(.72rem, 2.1cqw, .88rem); font-weight: 700; color: #e03a43; white-space: nowrap; }
.brand-banner__off b { font-size: 1.35em; font-weight: 900; }
/* Stage: a light disc (in both themes) so white product photos blend in; three products, the first in front */
.brand-banner__stage { position: relative; align-self: stretch; }
.brand-banner__stage::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 92cqw; max-width: 132%; aspect-ratio: 1; translate: 50% -50%;
  border-radius: 50%; background: radial-gradient(circle, #fff 55%, color-mix(in srgb, var(--brand) 10%, #fff) 100%); box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand) 6%, transparent); }
[dir="ltr"] .brand-banner__stage::before { translate: -50% -50%; }
.brand-banner__item { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 46%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply;
  translate: 50% -50%; transition: translate .45s var(--ease), scale .45s var(--ease); }
[dir="ltr"] .brand-banner__item { translate: -50% -50%; }
.brand-banner__item--0 { z-index: 3; width: 58%; }
.brand-banner__item--1 { z-index: 2; inset-inline-start: 18%; scale: .8; }
.brand-banner__item--2 { z-index: 1; inset-inline-start: 82%; scale: .8; }
.brand-banner:hover .brand-banner__item--0 { scale: 1.05; }
.brand-banner:hover .brand-banner__item--1 { inset-inline-start: 14%; }
.brand-banner:hover .brand-banner__item--2 { inset-inline-start: 86%; }
.brand-banner .banner-badge { display: none; }
@media (prefers-reduced-motion: reduce) { .brand-banner, .brand-banner__item { transition: none; } }

/* Category circles, coded: white disc with a soft green rim, product photo blended in, name in the site font */
.cat-pic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: 10% 12% 12%; text-decoration: none; container-type: inline-size;
  background: radial-gradient(circle at 50% 38%, #fff 58%, #eef6ea 100%); box-shadow: inset 0 0 0 1px rgb(60 120 40 / 12%), 0 10px 26px -16px rgb(30 60 20 / 45%); }
.cat-pic:has(img[src*="touch-panels"]) { background: radial-gradient(circle at 50% 38%, #fff 58%, #eef6ea 100%); }
.cat-pic__media { display: block; width: 100%; flex: 1; min-height: 0; }
.cat-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: none; transition: transform .5s var(--ease); }
.cat-pic:hover img { transform: scale(1.07) translateY(-2px); }
.cat-pic__name { font-size: clamp(.72rem, 9cqw, 1rem); font-weight: 800; color: #1b2a16; text-align: center; line-height: 1.4; white-space: nowrap; }
.cat-pic:hover .cat-pic__name { color: var(--c-accent); }

/* Coded banners: tuning — disc sized by the banner height, larger products, dark-mode logo plate, mobile height */
.brand-banner__stage::before { width: auto; height: 116%; max-width: none; }
.brand-banner__item { width: 52%; }
.brand-banner__item--0 { width: 66%; }
.brand-banner__item--1 { inset-inline-start: 20%; }
.brand-banner__item--2 { inset-inline-start: 80%; }
.brand-banner:hover .brand-banner__item--1 { inset-inline-start: 16%; }
.brand-banner:hover .brand-banner__item--2 { inset-inline-start: 84%; }
[data-theme="dark"] .brand-banner__logo { padding: .3em .6em; border-radius: 10px; background: #fff; box-sizing: content-box; }
@media (max-width: 560px) {
  .brand-banner { aspect-ratio: auto; min-height: 168px; padding: 1rem 1.1rem 1rem .5rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .75rem; }
  .brand-banner__text { gap: .45rem; }
  .brand-banner__logo { height: 30px; }
  .brand-banner__tagline { font-size: .74rem; }
  .brand-banner__cta, .brand-banner__off, .brand-banner__kicker { font-size: .72rem; }
}
.brand-banner__text { position: relative; z-index: 4; }

/* ── Technologies: tall dark cards on the illustrations, text at the foot, green count pill ── */
.tech-row { gap: clamp(.6rem, .4rem + .6vw, 1rem); }
.tech-tile { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 4; justify-content: flex-end; align-items: flex-start; text-align: start;
  gap: .3rem; padding: 1rem; border: 0; border-radius: 18px; background: #131518; color: #fff; text-decoration: none;
  box-shadow: 0 14px 30px -20px rgb(10 20 5 / 70%); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tech-tile__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .7s var(--ease); }
.tech-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgb(12 13 15 / 70%) 62%, rgb(12 13 15 / 96%) 100%); }
.tech-tile:hover { border-color: transparent; transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgb(40 110 20 / 75%); }
.tech-tile:hover .tech-tile__art { transform: scale(1.06); }
.tech-tile__logo { position: absolute; inset-block-start: .8rem; inset-inline-start: .8rem; width: 38px; height: 38px; margin: 0; border-radius: 11px;
  background: rgb(255 255 255 / 10%); color: #9be27a; backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%); }
.tech-tile__logo svg { width: 26px; height: 26px; }
.tech-tile__name { font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); color: #fff; }
.tech-tile__tagline { font-size: .76rem; color: rgb(255 255 255 / 72%); }
.tech-tile__count { margin-block-start: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: .72rem; }
.tech-tile:hover .tech-tile__count { filter: brightness(1.08); }
@media (max-width: 1024px) and (min-width: 561px) { .tech-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tech-row { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: .25rem; }
  .tech-row::-webkit-scrollbar { display: none; }
  .tech-tile { scroll-snap-align: start; padding: .85rem; }
}
/* Illustration in the upper part only, fading out above the text */
.tech-tile__art { inset-block-end: auto; height: 66%; object-position: center 38%; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.tech-tile::after { background: linear-gradient(180deg, transparent 55%, rgb(12 13 15 / 55%) 100%); }

/* ── Special offers band: the deals band's light sibling — mint, diagonal "tape" stripes, spark mark, condition tags ── */
/* Same dark graphite band as the brand bands (deal-band--brand), in the site green */
.deal-band--special .deal-intro { justify-content: center; }
.deal-intro__mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-accent); color: #fff;
  box-shadow: 0 10px 22px -10px rgb(61 160 30 / 80%); rotate: -8deg; }
.deal-intro__mark .icon { width: 26px; height: 26px; }
.deal-intro__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.deal-intro__tags li { padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--c-accent-soft); color: var(--c-accent); }
.deal-intro__note { margin: 0; font-size: .78rem; color: var(--c-muted); }
@media (max-width: 720px) { .deal-intro__mark { display: none; } }

/* Minimal line art (white strokes, green accents) on the near-black card */
.tech-tile { background: #111315; }
.tech-tile__art { inset-block-start: 8%; inset-inline: 6%; width: 88%; height: 52%; object-fit: contain; object-position: center; -webkit-mask-image: none; mask-image: none; opacity: .95; }
.tech-tile::after { display: none; }
.tech-tile:hover .tech-tile__art { transform: scale(1.05) translateY(-2px); opacity: 1; }
.tech-tile__logo { display: none; }
.tech-tile__art { inset-block-start: 5%; inset-inline: 4%; width: 92%; height: 58%; }
.tech-tile__art { inset-block-start: 6%; height: 46%; }
/* Tech cards: centred text, larger art, green edge on hover */
.tech-tile { align-items: center; text-align: center; border: 1px solid rgb(255 255 255 / 6%); }
.tech-tile__art { inset-block-start: 4%; inset-inline: 2%; width: 96%; height: 52%; }
.tech-tile__tagline { max-width: 22ch; }
.tech-tile:hover { border-color: rgb(120 216 80 / 45%); box-shadow: 0 0 0 1px rgb(120 216 80 / 25%), 0 22px 40px -22px rgb(40 110 20 / 80%); }
.tech-tile__art { inset-block-start: 5%; height: 43%; }

/* ── Hero posters: two thirds message, one third a discounted product card on an orbit of green shapes ── */
.page-home .hero-slider { height: calc(var(--hero-overlap, 145px) + clamp(400px, 31vw, 500px)); min-height: 0; background: #fff; }
.page-home .hero-slider::before { display: none; }
.hero-slider__dots button { background: rgb(127 127 127 / 35%); }
.hero-slider__dots button span { background: var(--c-accent); }
.hero-slider__arrow { background: rgb(255 255 255 / 85%); box-shadow: 0 6px 18px -8px rgb(0 0 0 / 35%); }

.hero-poster { --ink: #111315; --sub: #5d6460; --line: rgb(17 19 21 / 10%); position: absolute; inset: 0; overflow: hidden; isolation: isolate; color: var(--ink);
  padding-block: calc(var(--hero-overlap, 145px) + .5rem) 2.6rem;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
    #fff; }
/* The grid fades out toward the text */
.hero-poster::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 40%, color-mix(in srgb, var(--bg-fade, #fff) 75%, transparent) 85%); }
[dir="ltr"] .hero-poster::before { background: linear-gradient(-90deg, transparent 0 40%, color-mix(in srgb, var(--bg-fade, #fff) 75%, transparent) 85%); }
[data-theme="dark"] .hero-poster { --ink: #f3f5f2; --sub: #a9b0ab; --line: rgb(255 255 255 / 6%); --bg-fade: #111315; background-color: #111315; }
.hero-poster__inner { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 4rem); }

/* Message */
.hero-poster__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.55rem, 1vw, .9rem); min-width: 0; }
.hero-poster__chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .95rem .4rem .5rem; border-radius: 999px; font-size: clamp(.78rem, .7rem + .3vw, .95rem); font-weight: 800;
  background: rgb(120 216 80 / 16%); color: var(--c-accent); }
.hero-poster__chip .icon { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--c-accent); color: #fff; }
.hero-poster__title { display: flex; flex-wrap: wrap; column-gap: .3em; margin: 0; font-size: clamp(1.8rem, .9rem + 2.7vw, 3.6rem); font-weight: 900; line-height: 1.3; color: var(--ink); }
.hero-poster__title strong { color: var(--c-accent); font-weight: 900; }
.hero-poster__lead { margin: 0; max-width: 52ch; font-size: clamp(.9rem, .8rem + .4vw, 1.15rem); color: var(--sub); line-height: 1.8; }
.hero-poster__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: .2rem 0 0; padding: 0; list-style: none; color: var(--sub); font-size: .88rem; font-weight: 600; }
.hero-poster__facts li { display: flex; align-items: baseline; gap: .35rem; }
.hero-poster__facts li + li { padding-inline-start: 1.6rem; border-inline-start: 1px solid rgb(127 127 127 / 30%); }
.hero-poster__facts b { font-size: 1.5rem; font-weight: 900; color: var(--ink); }
.hero-poster__facts li:last-child b { color: var(--c-accent); }
.hero-poster__steps { display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.hero-poster__steps li { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem .55rem .6rem; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1px rgb(17 19 21 / 8%), 0 10px 24px -18px rgb(17 19 21 / 45%); }
[data-theme="dark"] .hero-poster__steps li { background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
.hero-poster__step-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c-accent); color: #fff; }
.hero-poster__step-icon .icon { width: 20px; height: 20px; }
.hero-poster__steps b { display: block; font-size: .9rem; font-weight: 800; color: var(--ink); }
.hero-poster__steps small { display: block; font-size: .74rem; color: var(--sub); }
.hero-poster__ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: .3rem; }
.hero-poster__btn { display: inline-flex; align-items: center; gap: .45rem; padding: .8rem 1.5rem; border-radius: 999px; font-weight: 800; font-size: clamp(.85rem, .8rem + .2vw, 1rem);
  text-decoration: none; background: var(--c-accent); color: #fff; box-shadow: 0 14px 28px -14px rgb(61 160 30 / 80%); transition: translate .25s var(--ease), filter .25s var(--ease); }
.hero-poster__btn:hover { translate: 0 -2px; filter: brightness(1.06); }
.hero-poster__btn .icon { width: 18px; height: 18px; transition: translate .25s var(--ease); }
.hero-poster__btn:hover .icon--fwd { translate: -4px 0; }
[dir="ltr"] .hero-poster__btn:hover .icon--fwd { translate: 4px 0; }
.hero-poster__btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(120 216 80 / 60%); }
.hero-poster__btn--ghost:hover { background: rgb(120 216 80 / 12%); }
/* Logo · domain, bottom corner of the poster */
.hero-poster__foot { position: absolute; inset-block-end: 1.1rem; inset-inline-start: max(1rem, calc((100% - var(--container, 1280px)) / 2 + 1rem)); display: flex; align-items: center; gap: .8rem;
  font-size: .8rem; font-weight: 600; color: var(--sub); }
.hero-poster__foot img { height: 28px; width: auto; }
.hero-poster__foot span { padding-inline-start: .8rem; border-inline-start: 1px solid rgb(127 127 127 / 35%); }
.hero-poster__logo--light, [data-theme="dark"] .hero-poster__logo:not(.hero-poster__logo--light) { display: none; }
[data-theme="dark"] .hero-poster__logo--light { display: block; }

/* Visual: orbit of green shapes with the deal card in the middle */
.hero-poster__visual { position: relative; align-self: stretch; display: grid; place-items: center; min-height: 0; }
.hero-orbit { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: 50% -50%; width: min(118%, 520px); aspect-ratio: 1; pointer-events: none; }
[dir="ltr"] .hero-orbit { translate: -50% -50%; }
.hero-orbit i { position: absolute; display: block; border-radius: 50%; }
.hero-orbit__glow { inset: 6%; background: radial-gradient(circle, rgb(120 216 80 / 45%), rgb(120 216 80 / 0) 68%); filter: blur(4px); }
.hero-orbit__ring { inset: 4%; border: 2px dashed rgb(90 190 50 / 75%); animation: orbit-spin 60s linear infinite; }
.hero-orbit__ring--in { inset: 17%; border: 1.5px solid rgb(90 190 50 / 60%); animation-duration: 36s; animation-direction: reverse; }
.hero-orbit::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 1px solid rgb(90 190 50 / 30%); }
.hero-orbit__ring::after { content: ""; position: absolute; inset-block-start: 14%; inset-inline-start: 12%; width: 12px; height: 12px; border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 0 6px rgb(120 216 80 / 18%); }
.hero-orbit__ring--in::after { inset-block-start: auto; inset-block-end: 6%; inset-inline-start: 70%; width: 8px; height: 8px; background: #111315; box-shadow: 0 0 0 4px rgb(120 216 80 / 30%); }
[data-theme="dark"] .hero-orbit__ring--in::after { background: #fff; }
.hero-orbit__tile { inset: 22% 20% 22% 24% !important; border-radius: 40px !important; rotate: 10deg;
  background: linear-gradient(140deg, #8ee26a, var(--c-accent) 55%, #2f8f17); box-shadow: 0 30px 60px -28px rgb(47 143 23 / 75%); }
@keyframes orbit-spin { to { rotate: 360deg; } }

/* Deal card */
.hero-deal { position: relative; z-index: 2; display: grid; gap: .35rem; width: min(250px, 92%); padding: .7rem .7rem .9rem; border-radius: 22px; background: #fff; color: #111315; text-decoration: none;
  box-shadow: 0 34px 60px -26px rgb(10 30 5 / 60%), 0 0 0 1px rgb(0 0 0 / 5%); rotate: -3deg; transition: rotate .4s var(--ease), translate .4s var(--ease); }
.hero-deal:hover { rotate: 0deg; translate: 0 -4px; }
.hero-deal__media { position: relative; display: block; aspect-ratio: 1.15; border-radius: 16px; background: #f4f5f4; overflow: hidden; }
.hero-slider__slide .hero-deal__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transform: none; }
.hero-deal__off { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; padding: .25rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 900; background: #e5484d; color: #fff;
  box-shadow: 0 6px 14px -6px rgb(229 72 77 / 80%); }
.hero-deal__label { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; margin-block-start: .2rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800;
  background: #eaf6e3; color: #2f8f17; }
.hero-deal__label .icon { width: 14px; height: 14px; }
.hero-deal__name { font-size: .86rem; font-weight: 800; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-deal .price__note, .hero-deal .price__off { display: none; }
.hero-deal .price__main { font-size: 1.05rem; color: #e5484d; }
.hero-deal .price__was { font-size: .75rem; }

/* Entrance when the slide becomes active */
.hero-slider__slide .hero-poster__text > *, .hero-slider__slide .hero-deal { opacity: 0; translate: 0 16px; }
.hero-slider__slide .hero-orbit__tile { opacity: 0; scale: .85; }
.hero-slider__slide.is-active .hero-poster__text > *, .hero-slider__slide.is-active .hero-deal { opacity: 1; translate: 0 0; transition: opacity .7s var(--ease), translate .7s var(--ease), rotate .4s var(--ease); }
.hero-slider__slide.is-active .hero-orbit__tile { opacity: 1; scale: 1; transition: opacity .8s var(--ease) .1s, scale .9s var(--ease) .1s; }
.hero-slider__slide.is-active .hero-poster__text > :nth-child(2) { transition-delay: .08s; } .hero-slider__slide.is-active .hero-poster__text > :nth-child(3) { transition-delay: .16s; }
.hero-slider__slide.is-active .hero-poster__text > :nth-child(4) { transition-delay: .24s; } .hero-slider__slide.is-active .hero-poster__text > :nth-child(n + 5) { transition-delay: .32s; }
.hero-slider__slide.is-active .hero-deal { transition-delay: .3s, .3s, 0s; }

/* While a dark slide shows, the unscrolled glass header and category bar turn dark with light text */
.hero-dark .page-home .site-header:not(.is-scrolled) { background: rgb(17 19 21 / 45%); border-color: rgb(255 255 255 / 8%); }
.hero-dark .page-home .site-header:not(.is-scrolled) :is(.main-nav__link, .header-tools .icon-btn:not(.header-cart), .theme-toggle, .currency-select__btn, .header-phone, .nav-toggle) { color: #f1f3f0; }
.hero-dark .page-home .site-header:not(.is-scrolled) :is(.theme-toggle, .currency-select__btn) { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 14%); }
.hero-dark .page-home .site-header:not(.is-scrolled) .brand-logo--dark { display: none; }
.hero-dark .page-home .site-header:not(.is-scrolled) .brand-logo--light { display: block; }
.hero-dark .page-home .site-header:not(.is-scrolled) .header-search { background: rgb(255 255 255 / 10%); color: #f1f3f0; }
.hero-dark .page-home .site-header:not(.is-scrolled) .header-search input { color: #f1f3f0; }
.hero-dark .page-home .site-header:not(.is-scrolled) .header-search input::placeholder, .hero-dark .page-home .site-header:not(.is-scrolled) .header-search .icon { color: rgb(241 243 240 / 65%); }
.hero-dark .page-home .cat-bar:not(.is-floating) .cat-bar__list { background: rgb(17 19 21 / 45%); border-color: rgb(255 255 255 / 10%); }
.hero-dark .page-home .cat-bar:not(.is-floating) .cat-bar__link { color: #f1f3f0; }
.hero-dark .page-home .cat-bar:not(.is-floating) .cat-bar__link:hover { background: rgb(255 255 255 / 10%); }
.page-home .site-header, .page-home .cat-bar__list { transition: background .6s var(--ease), border-color .6s var(--ease); }

/* Phones: card on top (compact, horizontal), message below */
@media (max-width: 720px) {
  .page-home .hero-slider { height: calc(var(--hero-overlap, 145px) + 520px); }
  .hero-poster { padding-block: calc(var(--hero-overlap, 145px) + .25rem) 2rem; }
  .hero-poster::before { background: linear-gradient(180deg, transparent 0 15%, var(--bg-fade, #fff) 45%); }
  .hero-poster__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: 170px auto; gap: .9rem; align-items: start; }
  .hero-poster__visual { order: -1; }
  .hero-orbit { width: 300px; }
  .hero-deal { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "media label" "media name" "media price"; align-items: center; column-gap: .7rem; row-gap: .15rem;
    width: min(330px, 94%); padding: .55rem; rotate: 0deg; }
  .hero-deal__media { grid-area: media; aspect-ratio: 1; width: 96px; }
  .hero-deal__label { grid-area: label; margin: 0; } .hero-deal__name { grid-area: name; font-size: .8rem; } .hero-deal__price { grid-area: price; }
  .hero-deal__off { font-size: .7rem; inset-block-start: .3rem; inset-inline-end: .3rem; }
  .hero-poster__text { align-items: center; text-align: center; }
  .hero-poster__title { justify-content: center; font-size: 1.75rem; }
  .hero-poster__lead { font-size: .85rem; max-width: 34ch; }
  .hero-poster--service .hero-poster__lead { display: none; }
  .hero-poster__facts { justify-content: center; gap: .4rem 1rem; font-size: .78rem; }
  .hero-poster__facts li + li { padding-inline-start: 1rem; }
  .hero-poster__facts b { font-size: 1.1rem; }
  .hero-poster__steps { justify-content: center; gap: .4rem; }
  .hero-poster__steps li { padding: .3rem .6rem .3rem .35rem; gap: .4rem; border-radius: 999px; }
  .hero-poster__steps small { display: none; }
  .hero-poster__step-icon { width: 24px; height: 24px; border-radius: 50%; }
  .hero-poster__step-icon .icon { width: 14px; height: 14px; }
  .hero-poster__steps b { font-size: .76rem; }
  .hero-poster__ctas { justify-content: center; }
  .hero-poster__btn { padding: .6rem 1.1rem; }
  .hero-poster__btn--ghost[href^="tel:"], .hero-poster__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit__ring { animation: none; }
  .hero-slider__slide .hero-poster__text > *, .hero-slider__slide .hero-deal, .hero-slider__slide .hero-orbit__tile { opacity: 1; translate: none; scale: none; transition: none; }
}
/* Footer back in the message column; the green tile peeks out under the card */
.hero-poster__foot { position: static; margin-block-start: .5rem; }
.hero-orbit__tile { inset: 34% 12% 10% 30% !important; rotate: 14deg; }
[dir="ltr"] .hero-orbit__tile { inset: 34% 30% 10% 12% !important; rotate: -14deg; }
@media (max-width: 720px) { .hero-orbit__tile, .hero-orbit__ring { display: none; } .hero-orbit { width: 340px; } }
@media (max-width: 720px) { .hero-orbit i.hero-orbit__tile, .hero-orbit i.hero-orbit__ring { display: none; } }

/* ── Hero deal: unmistakable discount — red ribbon on top, big rotated sticker, bold red price ── */
.hero-deal { padding-block-start: 0; overflow: visible; }
.hero-deal__ribbon { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: 0 -.7rem .45rem; padding: .5rem; border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, #e5484d, #ff6b5b); color: #fff; font-size: .9rem; font-weight: 900; letter-spacing: .01em; }
.hero-deal__ribbon .icon { width: 16px; height: 16px; }
.hero-deal__sticker { position: absolute; z-index: 3; inset-block-start: -1.4rem; inset-inline-start: -1.4rem; display: grid; place-items: center; align-content: center;
  width: 88px; height: 88px; border-radius: 50%; background: #e5484d; color: #fff; rotate: -12deg; line-height: 1.05;
  box-shadow: 0 0 0 5px #fff, 0 16px 30px -10px rgb(229 72 77 / 70%); animation: deal-pulse 2.4s ease-in-out infinite; }
.hero-deal__sticker b { font-size: 1.75rem; font-weight: 900; }
.hero-deal__sticker small { font-size: .8rem; font-weight: 800; }
@keyframes deal-pulse { 50% { scale: 1.07; } }
.hero-deal__off, .hero-deal__label { display: none; }
.hero-deal .price__main { font-size: 1.3rem; font-weight: 900; }
.hero-deal .price__was { font-size: .85rem; color: #8a908c; }

/* ── Service poster: on-site installation badge and two tags around the card ── */
.hero-service { position: absolute; z-index: 4; inset-block-end: 8%; inset-inline-end: -4%; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem .7rem .7rem;
  border-radius: 18px; background: #111315; color: #fff; box-shadow: 0 20px 40px -18px rgb(0 0 0 / 60%); animation: hero-bob 5s ease-in-out infinite; }
.hero-service__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--c-accent); color: #fff; }
.hero-service__icon .icon { width: 28px; height: 28px; animation: tool-turn 3s ease-in-out infinite; }
.hero-service b { display: block; font-size: .9rem; font-weight: 900; white-space: nowrap; }
.hero-service small { display: block; font-size: .72rem; color: #a9b0ab; white-space: nowrap; }
.hero-service-tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 800;
  background: #fff; color: #111315; box-shadow: 0 12px 26px -14px rgb(0 0 0 / 45%), inset 0 0 0 1px rgb(17 19 21 / 6%); animation: hero-bob 6s ease-in-out infinite; }
.hero-service-tag .icon { width: 16px; height: 16px; color: var(--c-accent); }
.hero-service-tag--1 { inset-block-start: 10%; inset-inline-end: -8%; animation-delay: -2s; }
.hero-service-tag--2 { inset-block-start: 44%; inset-inline-start: -6%; animation-delay: -4s; }
@keyframes hero-bob { 50% { translate: 0 -6px; } }
@keyframes tool-turn { 0%, 60%, 100% { rotate: 0deg; } 75% { rotate: -25deg; } 88% { rotate: 10deg; } }
@media (max-width: 720px) {
  .hero-deal__ribbon { display: none; }
  .hero-deal__sticker { width: 58px; height: 58px; inset-block-start: -.8rem; inset-inline-start: -.8rem; box-shadow: 0 0 0 3px #fff; }
  .hero-deal__sticker b { font-size: 1.1rem; } .hero-deal__sticker small { font-size: .6rem; }
  .hero-deal { padding-block-start: .55rem; }
  .hero-deal .price__main { font-size: 1.05rem; }
  .hero-service-tag { display: none; }
  .hero-service { inset-block-end: -6%; inset-inline-end: 50%; translate: 50% 0; padding: .4rem .7rem .4rem .4rem; animation: none; }
  [dir="ltr"] .hero-service { translate: -50% 0; }
  .hero-service__icon { width: 32px; height: 32px; } .hero-service__icon .icon { width: 18px; height: 18px; }
  .hero-service b { font-size: .76rem; } .hero-service small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-deal__sticker, .hero-service, .hero-service-tag, .hero-service__icon .icon { animation: none; } }
@media (min-width: 721px) {
  .hero-service { inset-block-end: auto; inset-block-start: 40%; inset-inline-end: auto; inset-inline-start: -12%; }
  .hero-service-tag--1 { inset-block-start: 12%; inset-inline-end: -6%; inset-inline-start: auto; }
  .hero-service-tag--2 { inset-block-start: auto; inset-block-end: 12%; inset-inline-start: auto; inset-inline-end: -4%; }
}
@media (max-width: 720px) { .hero-service, [dir="ltr"] .hero-service { inset-inline: auto; left: 50%; right: auto; translate: -50% 0; inset-block-end: -14%; } }
@media (max-width: 720px) { .hero-poster .hero-service { display: none; } }

/* ── Brand band with tabs (ABB | Schneider): a logo switcher on top of the intro card; colour, intro and rail follow the tab ── */
.deal-intro__panel { display: flex; flex-direction: column; align-items: center; gap: .7rem; width: 100%; }
.deal-band [data-brand-panel][hidden] { display: none; }
.deal-intro__panel:not([hidden]) { animation: brand-panel-in .35s var(--ease) both; }
.deal-rail[data-brand-panel]:not([hidden]) { animation: brand-panel-in .45s var(--ease) both; }
@keyframes brand-panel-in { from { opacity: 0; translate: 0 8px; } }
.brand-band__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-block-end: 1.5rem;
  border-block-end: 1px solid rgb(255 255 255 / 14%); }
.brand-band__heading { display: flex; flex-direction: column; gap: .2rem; padding-block-end: .9rem; }
.brand-band__title { margin: 0; color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 900; }
/* Minimal text tabs: the chosen one in white with the brand's colour underlining it on the divider */
.brand-tabs { display: flex; gap: 1.75rem; }
.brand-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem 0 1rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 1.05rem; font-weight: 800; color: rgb(255 255 255 / 55%); transition: color var(--t-fast) var(--ease); }
.brand-tabs__tab::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tab);
  scale: 0 1; transition: scale var(--t-base, .25s) var(--ease); }
.brand-tabs__off { font-size: .75rem; font-weight: 900; color: #ff6b6b; }
.brand-tabs__tab:hover { color: #fff; }
.brand-tabs__tab:hover::after { scale: .4 1; }
.brand-tabs__tab[aria-selected="true"] { color: #fff; }
.brand-tabs__tab[aria-selected="true"]::after { scale: 1 1; }
.brand-tabs__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 720px) {
  .brand-band__head { margin-block-end: 1rem; }
  .brand-band__heading { padding-block-end: 0; }
  .brand-tabs { width: 100%; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; }
  .brand-tabs__tab { flex: none; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .deal-intro__panel:not([hidden]), .deal-rail[data-brand-panel]:not([hidden]) { animation: none; } }

/* ── Coded brand banners, v2: hero-poster look — white grid, brand-tinted tile + ring behind the products, discount sticker ── */
.brand-banner { --line: color-mix(in srgb, var(--brand) 9%, transparent); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3cqw; padding: 0 5.5cqw 0 2cqw;
  border-color: color-mix(in srgb, var(--brand) 16%, var(--c-border));
  background:
    radial-gradient(55% 90% at 22% 50%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--c-surface); }
[dir="ltr"] .brand-banner { background:
    radial-gradient(55% 90% at 78% 50%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--c-surface); }
/* Grid fades out behind the text */
.brand-banner::before { inset: 0; width: auto; border-radius: 0; z-index: -1; background: linear-gradient(90deg, transparent 35%, var(--c-surface) 75%); }
[dir="ltr"] .brand-banner::before { background: linear-gradient(-90deg, transparent 35%, var(--c-surface) 75%); }
.brand-banner__text { gap: 2.6cqw; }
.brand-banner__kicker { display: inline-flex; align-items: center; gap: .45em; padding: 0; background: none; letter-spacing: .01em; }
.brand-banner__kicker::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--brand) 18%, transparent); }
.brand-banner__logo { height: clamp(28px, 8cqw, 58px); }
.brand-banner__tagline { font-size: clamp(.74rem, 2.4cqw, .98rem); font-weight: 700; color: var(--c-graphite, #3a3f3c); -webkit-line-clamp: 2; max-width: 34ch; }
.brand-banner__cta { margin-block-start: .6cqw; padding: .6em 1.25em; box-shadow: 0 10px 22px -12px var(--brand); }
/* Stage: tilted tile + dashed ring, products on top, nothing clipped */
.brand-banner__stage::before { display: none; }
.brand-banner__ring, .brand-banner__tile { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; aspect-ratio: 1; translate: 50% -50%; pointer-events: none; }
[dir="ltr"] :is(.brand-banner__ring, .brand-banner__tile) { translate: -50% -50%; }
.brand-banner__ring { height: 92%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent); animation: orbit-spin 50s linear infinite; }
.brand-banner__tile { height: 62%; border-radius: 28%; rotate: 12deg; background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 22%, #fff), color-mix(in srgb, var(--brand) 8%, #fff));
  box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--brand) 70%, transparent); transition: rotate .5s var(--ease); }
.brand-banner:hover .brand-banner__tile { rotate: 4deg; }
.brand-banner__item { z-index: 2; mix-blend-mode: multiply; filter: drop-shadow(0 10px 12px rgb(17 19 21 / 14%)); }
.brand-banner__item--0 { z-index: 3; }
/* Discount sticker on the stage */
.brand-banner__sticker { position: absolute; z-index: 5; inset-block-start: 9%; inset-inline-end: 4%; display: grid; place-items: center; align-content: center;
  width: clamp(54px, 15cqw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: #fff; line-height: 1.05; rotate: -10deg;
  box-shadow: 0 0 0 4px #fff, 0 14px 26px -12px var(--brand); }
.brand-banner__sticker b { font-size: clamp(.95rem, 4.4cqw, 1.6rem); font-weight: 900; }
.brand-banner__sticker small { font-size: clamp(.55rem, 1.9cqw, .74rem); font-weight: 800; }
.brand-banner:hover .brand-banner__sticker { scale: 1.06; }
.brand-banner__sticker { transition: scale .35s var(--ease); }
@media (max-width: 560px) {
  .brand-banner { padding: 1rem 1.1rem 1rem .4rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .brand-banner__sticker { width: 56px; inset-block-start: 4%; }
}
@media (prefers-reduced-motion: reduce) { .brand-banner__ring { animation: none; } }
/* v2 tuning: products on a clean white disc (photos stay true), the brand tile peeks out behind it */
.brand-banner__ring { z-index: 1; height: 86%; background: radial-gradient(circle, #fff 62%, color-mix(in srgb, var(--brand) 6%, #fff)); border: 1.5px dashed color-mix(in srgb, var(--brand) 50%, transparent); }
.brand-banner__tile { z-index: 0; height: 80%; rotate: 18deg; background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 26%, #fff), color-mix(in srgb, var(--brand) 6%, #fff)); }
.brand-banner:hover .brand-banner__tile { rotate: 8deg; }
.brand-banner__item { width: 48%; filter: none; }
.brand-banner__item--0 { width: 60%; }
.brand-banner__item { width: 40%; }
.brand-banner__item--0 { width: 54%; }
.brand-banner__item--1 { inset-inline-start: 30%; scale: .78; }
.brand-banner__item--2 { inset-inline-start: 70%; scale: .78; }
.brand-banner:hover .brand-banner__item--1 { inset-inline-start: 27%; }
.brand-banner:hover .brand-banner__item--2 { inset-inline-start: 73%; }


.deal-band--special .deal-intro__title span { font-size: 1.55rem; font-weight: 900; color: var(--c-accent); }
.deal-band--special .deal-intro__title strong { font-size: 1.45rem; color: var(--c-ink); }

/* ── Brand cards: four coded banners in one row (partials/home-brand-cards) ── */
.brand-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, .5rem + 1vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.brand-card { --line: color-mix(in srgb, var(--brand) 9%, transparent); position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--c-border)); color: var(--c-ink); text-decoration: none;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--c-surface);
  transition: border-color var(--t-fast) var(--ease), box-shadow .35s var(--ease), translate .35s var(--ease); }
.brand-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 45%, var(--c-surface) 70%); }
.brand-card:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--brand) 70%, transparent); }
/* Stage */
.brand-card__stage { position: relative; display: block; aspect-ratio: 1 / .78; }
.brand-card__disc, .brand-card__tile { position: absolute; inset-block-start: 52%; inset-inline-start: 50%; aspect-ratio: 1; translate: 50% -50%; }
[dir="ltr"] :is(.brand-card__disc, .brand-card__tile) { translate: -50% -50%; }
.brand-card__disc { z-index: 1; height: 82%; border-radius: 50%; background: radial-gradient(circle, #fff 62%, color-mix(in srgb, var(--brand) 6%, #fff));
  border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent); }
.brand-card__tile { z-index: 0; height: 74%; border-radius: 28%; rotate: 18deg; transition: rotate .5s var(--ease);
  background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 26%, #fff), color-mix(in srgb, var(--brand) 6%, #fff)); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--brand) 70%, transparent); }
.brand-card:hover .brand-card__tile { rotate: 6deg; }
.brand-card__item { position: absolute; z-index: 2; inset-block-start: 52%; inset-inline-start: 50%; width: 34%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply;
  translate: 50% -50%; scale: .8; transition: inset-inline-start .45s var(--ease), scale .45s var(--ease); }
[dir="ltr"] .brand-card__item { translate: -50% -50%; }
.brand-card__item--0 { z-index: 3; width: 46%; scale: 1; }
.brand-card__item--1 { inset-inline-start: 33%; }
.brand-card__item--2 { inset-inline-start: 67%; }
.brand-card:hover .brand-card__item--0 { scale: 1.06; }
.brand-card:hover .brand-card__item--1 { inset-inline-start: 30%; }
.brand-card:hover .brand-card__item--2 { inset-inline-start: 70%; }
.brand-card__sticker { position: absolute; z-index: 5; inset-block-start: 8%; inset-inline-end: 8%; display: grid; place-items: center; align-content: center;
  width: 70px; aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: #fff; line-height: 1.05; rotate: -10deg;
  box-shadow: 0 0 0 4px #fff, 0 14px 26px -12px var(--brand); transition: scale .35s var(--ease); }
.brand-card__sticker b { font-size: 1.25rem; font-weight: 900; }
.brand-card__sticker small { font-size: .62rem; font-weight: 800; }
.brand-card:hover .brand-card__sticker { scale: 1.06; }
/* Body */
.brand-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; flex: 1; padding: .25rem 1.2rem 1.2rem; }
.brand-card__kicker { display: inline-flex; align-items: center; gap: .45em; font-size: .74rem; font-weight: 800; color: var(--brand); }
.brand-card__kicker::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--brand) 18%, transparent); }
.brand-card__logo { display: block; height: 34px; width: auto; max-width: 70%; object-fit: contain; }
.brand-card__name { font-size: 1.4rem; font-weight: 900; color: var(--brand); }
.brand-card__tagline { font-size: .82rem; font-weight: 700; line-height: 1.7; color: var(--c-graphite, #3a3f3c); min-height: 3.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brand-card__cta { display: inline-flex; align-items: center; gap: .35em; margin-block-start: auto; padding: .55em 1.1em; border-radius: 999px; font-size: .8rem; font-weight: 800;
  background: var(--brand); color: #fff; box-shadow: 0 10px 22px -12px var(--brand); }
.brand-card__cta .icon { width: 1.1em; height: 1.1em; transition: translate var(--t-fast) var(--ease); }
.brand-card:hover .brand-card__cta .icon { translate: -4px 0; }
[dir="ltr"] .brand-card:hover .brand-card__cta .icon { translate: 4px 0; }
[data-theme="dark"] .brand-card__logo { padding: .25em .5em; border-radius: 8px; background: #fff; box-sizing: content-box; }
@media (max-width: 1024px) { .brand-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .brand-cards { gap: .6rem; }
  .brand-card__body { padding: .2rem .8rem .9rem; gap: .4rem; }
  .brand-card__logo { height: 24px; }
  .brand-card__tagline { font-size: .72rem; }
  .brand-card__sticker { width: 50px; } .brand-card__sticker b { font-size: .9rem; } .brand-card__sticker small { font-size: .5rem; }
  .brand-card__cta { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .brand-card, .brand-card__item, .brand-card__tile { transition: none; } }
@media (max-width: 560px) {
  .brand-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: .25rem; }
  .brand-cards::-webkit-scrollbar { display: none; }
  .brand-cards > li { scroll-snap-align: start; }
  .brand-card__logo { height: 28px; }
  .brand-card__tagline { font-size: .76rem; }
  .brand-card__sticker { width: 58px; } .brand-card__sticker b { font-size: 1.05rem; } .brand-card__sticker small { font-size: .55rem; }
  .brand-card__cta { font-size: .74rem; white-space: nowrap; }
}


/* The band right after the logo strip sits flush against it */
.logo-strip + .deal-band, .logo-strip + * > .deal-band:first-child { margin-block-start: 0; }
/* Brand tabs: the discount as a red pill that stands out */
.brand-tabs__tab { gap: .55rem; }
.brand-tabs__off { display: inline-flex; align-items: center; padding: .22rem .6rem; border-radius: 999px; background: #e5484d; color: #fff; font-size: .82rem; font-weight: 900;
  line-height: 1.3; box-shadow: 0 6px 14px -6px rgb(229 72 77 / 80%); }
.brand-tabs__tab:not([aria-selected="true"]) .brand-tabs__off { opacity: .85; }
.brand-tabs__tab[aria-selected="true"] .brand-tabs__off { animation: tab-off-pop 2.4s ease-in-out infinite; }
@keyframes tab-off-pop { 50% { scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .brand-tabs__tab[aria-selected="true"] .brand-tabs__off { animation: none; } }

/* ── Technologies: heading + two-column list ── */
.tech-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.tech-list__eyebrow { font-size: .8rem; font-weight: 900; color: var(--c-accent); }
.tech-list__title { margin: .3rem 0 .6rem; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); font-weight: 900; line-height: 1.4; }
.tech-list__text { margin: 0; color: var(--c-muted); font-size: .9rem; line-height: 1.9; }
.tech-list__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.tech-list__row { display: flex; align-items: center; gap: .8rem; padding: .9rem .25rem; border-block-end: 1px solid var(--c-border); color: var(--c-ink); text-decoration: none; }
.tech-list__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--c-accent); }
.tech-list__icon svg { width: 34px; height: 34px; }
.tech-list__name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tech-list__name b { font-size: 1rem; font-weight: 900; transition: color var(--t-fast) var(--ease); }
.tech-list__name small { font-size: .74rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-list__count { font-size: .8rem; font-weight: 800; color: var(--c-muted); }
.tech-list__arrow { width: 16px; height: 16px; color: var(--c-accent); opacity: 0; transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); }
.tech-list__row:hover .tech-list__name b { color: var(--c-accent); }
.tech-list__row:hover .tech-list__arrow { opacity: 1; translate: -4px 0; }
@media (max-width: 900px) { .tech-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tech-list__items { grid-template-columns: 1fr; } }
/* Brand cards: tighter vertically */
.brand-card__stage { aspect-ratio: 1 / .6; margin-block-start: .4rem; }
.brand-card__disc { height: 92%; }
.brand-card__tile { height: 82%; }
.brand-card__item { width: 30%; } .brand-card__item--0 { width: 40%; }
.brand-card__sticker { inset-block-start: 4%; width: 62px; } .brand-card__sticker b { font-size: 1.1rem; }
.brand-card__body { gap: .35rem; padding: .1rem 1.1rem 1rem; }
.brand-card__logo { height: 30px; }
.brand-card__tagline { min-height: 0; }
.brand-card__cta { margin-block-start: .35rem; }
.home-banners:has(.brand-cards) { padding-block: .75rem 0; }
.home-banners:has(.brand-cards) + .deal-band { margin-block-start: 1.25rem; }
/* Brand cards: the same gap above and below */
.home-banners:has(.brand-cards) { padding-block: 0; margin-block: 1.5rem; }
.deal-band:has(+ .home-banners .brand-cards) { margin-block-end: 1.5rem; }
.home-banners:has(.brand-cards) + .deal-band { margin-block-start: 1.5rem; }

/* ── Calm colours: buttons in the site green; the brand colour stays on the logo, strip, sticker and small details ── */
.deal-band--brand a.deal-intro__pill, .brand-card__cta { background: var(--c-accent); box-shadow: 0 10px 22px -12px rgb(58 154 31 / 70%); }
.deal-band--brand .deal-intro__nav .icon-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── Phones: brand-band intro card compact — logo, count and the button on one row, no description ── */
@media (max-width: 720px) {
  .deal-band--brand .deal-intro { padding: .8rem .9rem; gap: .5rem; }
  .deal-band--brand .deal-intro__panel { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
  .deal-band--brand .deal-intro__badges, .deal-band--brand .deal-intro__desc, .deal-band--brand .deal-intro__nav, .deal-band--brand .deal-intro__tech { display: none; }
  .deal-band--brand .deal-intro__logo { width: 96px; height: 36px; }
  .deal-band--brand .deal-intro__stats { width: auto; padding: 0; border: 0; }
  .deal-band--brand a.deal-intro__pill { padding: .4rem .8rem; font-size: .76rem; }
  .deal-band--special .deal-intro { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .deal-band--special .deal-intro__tags, .deal-band--special .deal-intro__note { display: none; }
}

/* ── Closing band: about (SEO text) + CTA, FAQ ── */
.home-about { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-block-start: 1px solid var(--c-border);
  background: radial-gradient(50% 80% at 85% 0%, rgb(120 216 80 / 10%), transparent 70%); }
.home-about__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.home-about__eyebrow { font-size: .8rem; font-weight: 900; color: var(--c-accent); }
.home-about__title { margin: .35rem 0 .75rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 900; line-height: 1.5; }
.home-about__text { margin: 0; color: var(--c-muted); font-size: .92rem; line-height: 2; }
.home-about__points { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .85rem; font-weight: 800; }
.home-about__points li { display: inline-flex; align-items: center; gap: .3rem; }
.home-about__points .icon { width: 16px; height: 16px; color: var(--c-accent); }
.home-about__ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.4rem; }
.home-about__faq-title { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 900; }
.home-about__q { border-block-end: 1px solid var(--c-border); }
.home-about__q summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 0; cursor: pointer; list-style: none; font-weight: 800; font-size: .92rem; }
.home-about__q summary::-webkit-details-marker { display: none; }
.home-about__q summary .icon { flex: none; width: 18px; height: 18px; color: var(--c-muted); transition: rotate var(--t-fast) var(--ease); }
.home-about__q[open] summary .icon { rotate: 180deg; color: var(--c-accent); }
.home-about__q summary:hover { color: var(--c-accent); }
.home-about__q p { margin: 0 0 1rem; color: var(--c-muted); font-size: .86rem; line-height: 1.95; }
@media (max-width: 900px) { .home-about__inner { grid-template-columns: 1fr; } }
.home-about { --ink: var(--c-ink); }

/* Hero deal card: larger (desktop) */
@media (min-width: 721px) {
  .hero-deal { width: min(320px, 96%); padding-inline: .85rem; padding-block-end: 1.05rem; }
  .hero-deal__media { aspect-ratio: 1.1; }
  .hero-deal__name { font-size: 1rem; }
  .hero-deal .price__main { font-size: 1.5rem; }
  .hero-deal__ribbon { font-size: 1rem; margin-inline: -.85rem; }
  .hero-deal__sticker { width: 100px; height: 100px; } .hero-deal__sticker b { font-size: 2rem; }
}
@media (max-width: 720px) {
  .hero-deal { grid-template-columns: 116px minmax(0, 1fr); }
  .hero-deal__media { width: 116px; }
}
@media (min-width: 721px) { .hero-deal__media { aspect-ratio: 1.4; } .hero-deal { gap: .25rem; } }

/* Home: product prices larger and clearer (discounted price in red, old price crossed out above it) */
.page-home .product-card .price__main { --price-size: 1.2rem; font-weight: 900; letter-spacing: -.01em; }
.page-home .product-card .price__was { font-size: .82rem; }
.page-home .product-card .price--discounted .price__main { color: #e5484d; }
@media (max-width: 560px) { .page-home .product-card .price__main { --price-size: 1.02rem; } }
/* Home: card prices (product-card__now / __was) larger; the discounted price in red */
.page-home .product-card__now { font-size: clamp(.95rem, 7.9cqi, 1.22rem); font-weight: 900; }
.page-home .product-card__was { font-size: .92rem; }
.page-home .product-card__was ~ .product-card__now { color: #e5484d; }

/* Academy band: the hero's fine grid over the green strip, plus a soft sheen */
.academy-band__stage::before {
  background:
    radial-gradient(60% 120% at 50% 50%, rgb(255 255 255 / 10%), transparent 70%),
    linear-gradient(rgb(255 255 255 / 10%) 1px, transparent 1px) center / 44px 44px,
    linear-gradient(90deg, rgb(255 255 255 / 10%) 1px, transparent 1px) center / 44px 44px,
    linear-gradient(90deg, var(--c-accent), #78d850 50%, var(--c-accent));
}

/* TRIAL: the hero's fine grid on the dark bands instead of the diagonal lines */
.deal-band--brand { background:
    radial-gradient(60% 120% at 85% 50%, color-mix(in srgb, var(--brand, #78d850) 26%, transparent), transparent 60%),
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px) center top / 44px 44px,
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px) center top / 44px 44px,
    linear-gradient(120deg, #101214, #1c2024 55%, #121417); }
.deal-band--brand-start { background:
    radial-gradient(60% 120% at 15% 50%, color-mix(in srgb, var(--brand, #78d850) 26%, transparent), transparent 60%),
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px) center top / 44px 44px,
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px) center top / 44px 44px,
    linear-gradient(240deg, #101214, #1c2024 55%, #121417); }
/* Brand tabs autoplay: the active tab's underline fills up until the next switch */
[data-brand-tabs].is-autoplay .brand-tabs__tab[aria-selected="true"]::after { transform-origin: right; animation: tab-fill var(--autoplay, 6s) linear both; }
[dir="ltr"] [data-brand-tabs].is-autoplay .brand-tabs__tab[aria-selected="true"]::after { transform-origin: left; }
@keyframes tab-fill { from { scale: 0 1; } to { scale: 1 1; } }
/* Academy band: the green runs down to the bottom of the section (curved top edge only) */
.academy-band { padding-block-end: 0; }
.academy-band__stage { padding-block-end: clamp(1rem, .8rem + 1vw, 1.75rem); }
.academy-band__stage::before { inset-block: 8% 0;
  -webkit-mask: radial-gradient(140% 70px at 50% 0, transparent 97%, #000 100%) top / 100% 100% no-repeat;
          mask: radial-gradient(140% 70px at 50% 0, transparent 97%, #000 100%) top / 100% 100% no-repeat; }
/* Phones: three and a half cards per band row (the half card invites a swipe) */
@media (max-width: 720px) {
  .deal-rail { grid-auto-columns: calc((100% - 3 * .5rem) / 3.5); gap: .5rem; }
}
/* Phones: compact cards in the 3.5-up band rows — no category / part number, small title and price, price above the cart button */
@media (max-width: 720px) {
  .deal-rail .product-card__kicker, .deal-rail .product-card__meta, .deal-rail .product-card__colors, .deal-rail .product-card__actions,
  .deal-rail .product-card__badges > :not(.product-card__off) { display: none; }
  .deal-rail .product-card__off { font-size: .58rem; padding: .1rem .35rem; }
  .deal-rail .product-card__body { padding: .45rem .3rem .25rem; gap: .15rem; }
  .deal-rail .product-card__title { font-size: .7rem; line-height: 1.55; }
  .deal-rail .product-card__buy { flex-direction: column; align-items: stretch; gap: .3rem; margin-inline: .25rem; padding-block: .35rem .3rem; }
  .deal-rail .product-card__cart { width: 100%; height: 28px; border-radius: 8px; }
  .deal-rail .product-card__cart .icon { width: 15px; height: 15px; }
  .deal-rail .product-card__price { align-items: flex-start; }
  .page-home .deal-rail .product-card__now { font-size: .74rem; white-space: normal; line-height: 1.35; }
  .page-home .deal-rail .product-card__was { font-size: .6rem; }
  .deal-rail .product-card__approx { display: none; }
}

/* Phones: all four brand cards at once, 2 × 2, compact */
@media (max-width: 560px) {
  .brand-cards { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: .5rem; padding: 0; }
  .brand-card__stage { aspect-ratio: 1 / .72; margin-block-start: .2rem; }
  .brand-card__sticker { width: 44px; inset-block-start: 2%; inset-inline-end: 4%; box-shadow: 0 0 0 3px #fff; }
  .brand-card__sticker b { font-size: .8rem; } .brand-card__sticker small { font-size: .45rem; }
  .brand-card__body { align-items: center; text-align: center; gap: .25rem; padding: 0 .5rem .7rem; }
  .brand-card__kicker, .brand-card__tagline { display: none; }
  .brand-card__logo { height: 22px; max-width: 80%; }
  .brand-card__cta { margin-block-start: .2rem; padding: .35em .8em; font-size: .66rem; }
}
/* Phones: two and a half article cards in the academy rail, compact (no excerpt) */
@media (max-width: 640px) {
  .academy-rail { grid-auto-columns: calc((100% - 2 * .6rem) / 2.5); gap: .6rem; }
  .academy-rail .article-card__excerpt, .academy-rail .article-card__topic { display: none; }
  .academy-rail .article-card__body { padding: .5rem .45rem .6rem; gap: .3rem; }
  .academy-rail .article-card__title { font-size: .74rem; line-height: 1.6; }
  .academy-rail .article-card__meta { font-size: .6rem; gap: .3rem; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .brand-card { height: auto; }
  .brand-card__stage { aspect-ratio: 1 / .56; margin-block-start: .15rem; }
  .brand-card__disc { height: 94%; } .brand-card__tile { height: 80%; }
  .brand-card__sticker { width: 38px; } .brand-card__sticker b { font-size: .7rem; } .brand-card__sticker small { font-size: .4rem; }
  .brand-card__body { flex: none; gap: .2rem; padding: 0 .4rem .55rem; }
  .brand-card__logo { height: 18px; }
  .brand-card__cta { padding: .3em .7em; font-size: .62rem; box-shadow: none; }
}
.brand-card { padding: 0; }
/* Phones: the three points on one centred row */
@media (max-width: 560px) {
  .home-about__points { flex-wrap: nowrap; justify-content: center; gap: .6rem; font-size: .68rem; white-space: nowrap; }
  .home-about__points .icon { width: 12px; height: 12px; }
  .home-about__points li { gap: .15rem; }
}
/* Phones: technologies as a compact two-column list — icon and name only */
@media (max-width: 560px) {
  .tech-list__text, .tech-list__name small, .tech-list__count { display: none; }
  .tech-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .tech-list__row { padding: .7rem .1rem; gap: .55rem; }
  .tech-list__icon { width: 32px; height: 32px; } .tech-list__icon svg { width: 28px; height: 28px; }
  .tech-list__arrow { opacity: 1; width: 14px; height: 14px; color: var(--c-muted); }
}
/* Phones: academy heading on one tidy row — icon, title and a small "view all" pill; no subtitle */
@media (max-width: 640px) {
  .academy-band__head { margin-block-end: .75rem; gap: .5rem; }
  .academy-band__title { flex-wrap: nowrap; gap: .5rem; font-size: 1.05rem; white-space: nowrap; }
  .academy-band__title small { display: none; }
  .academy-band__icon { width: 34px; height: 34px; }
  .academy-band__nav .link { display: inline-flex; align-items: center; gap: .25rem; padding: .35rem .75rem; border-radius: 999px; white-space: nowrap;
    font-size: .76rem; font-weight: 800; color: var(--c-accent); background: var(--c-accent-soft); text-decoration: none; }
  .academy-band__nav .link .icon { width: 14px; height: 14px; }
}
/* Phones: band intro card on a single row — logo · count · button, vertically centred */
@media (max-width: 720px) {
  .deal-band--brand .deal-intro { padding: .9rem .8rem .7rem; }
  .deal-band--brand .deal-intro__panel { flex-wrap: nowrap; gap: .5rem; }
  .deal-band--brand .deal-intro__logo { flex: none; width: 76px; height: 30px; }
  .deal-band--brand .deal-intro__logo img { object-position: center; }
  .deal-band--brand .deal-intro__stats { flex: 1; justify-content: center; font-size: .72rem; white-space: nowrap; }
  .deal-band--brand .deal-intro__stats b { font-size: 1rem; }
  .deal-band--brand a.deal-intro__pill { flex: none; padding: .38rem .7rem; font-size: .7rem; box-shadow: none; }
  .deal-band--brand a.deal-intro__pill .icon { width: 12px; height: 12px; }
}
/* Phones: brand tabs as equal columns — every brand visible, name on top, small discount pill below */
@media (max-width: 720px) {
  .brand-band__title { font-size: 1.1rem; }
  .brand-band__head { gap: .6rem; }
  .brand-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; overflow: visible; width: 100%; }
  .brand-tabs__tab { flex-direction: column; justify-content: center; gap: .3rem; padding: .3rem .2rem .7rem; min-width: 0; font-size: .82rem; }
  .brand-tabs__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-tabs__off { padding: .12rem .45rem; font-size: .64rem; box-shadow: none; }
}
/* Phones: hero no taller than its content — the height follows the screen width, tighter gaps */
@media (max-width: 720px) {
  .page-home .hero-slider { height: calc(var(--hero-overlap, 145px) + 430px + (430px - 100vw) * .6); }
  .hero-poster__inner { grid-template-rows: 150px auto; gap: .6rem; }
  .page-home .hero-slider__dots { inset-block-end: .7rem; }
}
/* Phones: compact band cards — small brand mark in the corner, shorter image, one-line price */
@media (max-width: 720px) {
  .deal-rail .product-card__media { aspect-ratio: 1 / .82; }
  .deal-rail .product-card__brand { inset-block-start: .3rem; inset-inline-end: .35rem; height: 11px; max-width: 46%; }
  .deal-rail .product-card__brand img { max-height: 11px; width: auto; }
  .deal-rail .product-card__off { inset-block-end: .25rem; }
  .deal-rail .product-card__title { -webkit-line-clamp: 2; min-height: 0; }
  .deal-rail .product-card__buy { padding-block: .3rem .25rem; gap: .25rem; }
  .page-home .deal-rail .product-card__now { font-size: .66rem; white-space: nowrap; }
  .page-home .deal-rail .product-card__was { font-size: .55rem; }
  .deal-rail .product-card__cart { height: 24px; }
}
@media (max-width: 720px) { .page-home .hero-slider { transition: height .45s var(--ease); } }
/* Phones: technologies section — tighter vertical rhythm */
@media (max-width: 560px) {
  .section.section--tight:has(.tech-list) { padding-block: .9rem .6rem; }
  .tech-list { gap: .35rem; }
  .tech-list__title { margin: .1rem 0 0; font-size: 1.15rem; }
  .tech-list__row { padding-block: .45rem; }
  .tech-list__items li:nth-last-child(-n+2) .tech-list__row { border-block-end: 0; }
}
/* Phones: compact hero so the logo strip shows on the first screen too */
@media (max-width: 720px) {
  .hero-poster { padding-block-start: calc(var(--hero-overlap, 145px) + .1rem); }
  .hero-poster__inner { grid-template-rows: 118px auto; gap: .45rem; }
  .hero-orbit { width: 250px; }
  .hero-deal { grid-template-columns: 84px minmax(0, 1fr); padding: .45rem .55rem; }
  .hero-deal__media { width: 84px; }
  .hero-deal__sticker { width: 48px; height: 48px; } .hero-deal__sticker b { font-size: .95rem; } .hero-deal__sticker small { font-size: .52rem; }
  .hero-poster__chip, .hero-poster__lead, .hero-poster__foot { display: none; }
  .hero-poster__title { font-size: 1.55rem; line-height: 1.35; margin: 0; }
  .hero-poster__text { gap: .5rem; }
  .hero-poster__facts { margin: 0; font-size: .74rem; }
  .hero-poster__facts b { font-size: 1rem; }
  .hero-poster__steps { gap: .3rem; }
  .hero-poster__btn { padding: .5rem 1rem; font-size: .82rem; }
  .hero-service { display: none; }
}
@media (max-width: 720px) { .hero-poster { padding-block-start: calc(var(--hero-overlap, 145px) + 1rem); } .hero-deal__sticker { inset-block-start: -.55rem; } }
/* Phones: brand tabs compact — one row, name + small percent side by side */
@media (max-width: 720px) {
  .brand-band__head { margin-block-end: .7rem; }
  .brand-tabs__tab { flex-direction: row; gap: .3rem; padding: .25rem .1rem .55rem; font-size: .76rem; }
  .brand-tabs__off { padding: .05rem .35rem; font-size: .6rem; }
  .brand-tabs__off-word { display: none; }
}
.brand-tabs__off-word { margin-inline-start: .25em; }
/* Brand tabs: the short name (first word, e.g. "Schneider") on phones; the badge never covers it */
.brand-tabs__name--short { display: none; }
@media (max-width: 720px) {
  .brand-tabs__name:not(.brand-tabs__name--short) { display: none; }
  .brand-tabs__name--short { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-tabs__off { flex: none; }
}
/* Phones: band intro as a light row on the dark band — logo plate · count · "view all" link (no white card) */
@media (max-width: 720px) {
  .deal-band--brand .deal-intro { background: transparent; box-shadow: none; border: 0; padding: 0 0 .2rem; overflow: visible; }
  .deal-band--brand .deal-intro::before { display: none; }
  .deal-band--brand .deal-intro__logo { width: 84px; height: 34px; padding: .25rem .5rem; border-radius: 10px; background: #fff; box-sizing: border-box; }
  .deal-band--brand .deal-intro__stats { justify-content: flex-start; color: rgb(255 255 255 / 70%); }
  .deal-band--brand .deal-intro__stats b { color: #fff; }
  .deal-band--brand a.deal-intro__pill { background: transparent; color: #fff; padding: .3rem .1rem; border-bottom: 1.5px solid var(--brand); border-radius: 0; font-size: .74rem; }
  .deal-band--special .deal-intro__title span { font-size: 1.15rem; } .deal-band--special .deal-intro__title strong { font-size: 1.1rem; color: #fff; }
  .deal-band--special .deal-intro__all { color: #fff; border-color: rgb(255 255 255 / 40%); }
}
/* Phones: no heading above the technology list (kept for screen readers and SEO) */
@media (max-width: 560px) {
  .tech-list__eyebrow { display: none; }
  .tech-list__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tech-list { gap: 0; }
}
/* Phones: the technology list sits flush between the dark bands */
@media (max-width: 560px) {
  .section.section--tight:has(.tech-list) { padding-block: .35rem; }
  .deal-band:has(+ .section .tech-list) { margin-block-end: 0; }
  .section:has(.tech-list) + .deal-band { margin-block-start: 0; }
}
/* Phones: logo plate — the logo sits inside with even white margins (no edge-to-edge logos like Tuya's) */
@media (max-width: 720px) {
  .deal-band--brand .deal-intro__logo { display: grid; place-items: center; width: 80px; height: 34px; padding: 6px 10px; }
  .deal-band--brand .deal-intro__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .deal-band--brand .deal-intro__stats { gap: .3rem; align-items: baseline; }
}
/* Phones: dark bands tighter vertically */
@media (max-width: 720px) {
  .deal-band { padding-block: .9rem; }
  .deal-band .deal-band__inner { gap: .6rem; }
  .deal-band--brand .deal-intro { padding-block-end: 0; }
  .brand-band__head { margin-block-end: .5rem; gap: .35rem; }
  .deal-rail { padding-block: 0; }
}
/* Phones: logo plate with a clear white frame around the logo */
@media (max-width: 720px) {
  .deal-band--brand .deal-intro__logo { width: 92px; height: 38px; padding: 7px 14px; border-radius: 12px; box-shadow: 0 6px 16px -10px rgb(0 0 0 / 60%); }
  .deal-band--brand .deal-intro__stats { align-items: center; }
}