/* ========================
   HERO — Pure Editorial B&W
   Sumip-inspired: clean center,
   brand logos, then project images peeking.
   ======================== */

.hero {
  min-height: clamp(760px, 100svh, 940px);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #0F0F0E;
}

/* Abstract texture overlay */
.hero__texture {
  position: absolute;
  inset: 0;
  background-image: url('https://cdn-ilehjed.nitrocdn.com/APYgFrAmgaYxgqxKiSwZYQlzBEmspbRH/assets/images/optimized/rev-8e7c8b2/www.hogarcontrols.com/wp-content/themes/hogar/assets/img/abstract-bg.webp');
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

/* Hairline dot grid & Radial Glow */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 120vw;
  max-width: 1400px;
  height: 800px;
  background: radial-gradient(40% 60% at 50% 50%, rgba(0, 168, 107, 0.12) 0%, rgba(0, 168, 107, 0) 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── Top: centered content ── */
.hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: clamp(6.25rem, 11svh, 8.5rem);
  padding-bottom: clamp(10.5rem, 22vw, 15rem);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  gap: clamp(0.9rem, 2svh, 1.35rem);
}

/* ── Badge ── */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  padding: 6px 16px 6px 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.62);
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}

.hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0,168,107,0.55);
  animation: badge-pulse 2.2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.8); }
}

/* ── Headline ── */
.hero__headline {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5.8vw, 5.25rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.0;
  color: #FAFAF8;
  margin: 0;
}

.hero__headline-static {
  display: block;
  color: rgba(255,255,255,0.42);
  font-weight: 600;
  margin-bottom: 0.08em;
}

.hero__headline-animated-wrap {
  display: block;
  height: clamp(2.8rem, 6.2vw, 5.6rem);
}

.hero__headline-animated {
  color: #FAFAF8;
  font-weight: 800;
}

.hero__cursor {
  display: inline-block;
  width: clamp(2.5px, 0.35vw, 4px);
  height: 0.85em;
  background: var(--color-accent);
  margin-left: 3px;
  vertical-align: baseline;
  position: relative;
  top: 0.05em;
  border-radius: 2px;
  animation: cursor-blink 1.1s step-start infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Services marquee ── */
.hero__services {
  width: min(680px, 90vw);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.7s 0.2s cubic-bezier(0.16,1,0.3,1);
}

.hero__services.visible { opacity: 1; transform: translateY(0); }

.hero__services-track {
  display: flex;
  gap: 0.55rem;
  width: max-content;
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hero__service-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.32rem 0.75rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 0.725rem;
  font-weight: 600;
  color: rgba(255,255,255,0.58);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.hero__service-chip-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ── Subtext ── */
.hero__sub {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  max-width: 30rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.hero__sub.visible { opacity: 1; transform: translateY(0); }

/* ── CTAs ── */
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s 0.12s cubic-bezier(0.16,1,0.3,1), transform 0.8s 0.12s cubic-bezier(0.16,1,0.3,1);
}

.hero__ctas.visible { opacity: 1; transform: translateY(0); }

/* ── Meta ── */
.hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.38);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s 0.22s cubic-bezier(0.16,1,0.3,1), transform 0.8s 0.22s cubic-bezier(0.16,1,0.3,1);
}

.hero__meta.visible { opacity: 1; transform: translateY(0); }

/* ── Brand logos ── */
/* ── Brands Section ───────────────────────────── */
.brands-section {
  background: linear-gradient(to bottom, #0F0F0E 0%, #0F0F0E 40px, var(--color-bg) 120px);
  padding-top: clamp(80px, 11vw, 120px);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-top: none;
}

.brands-section__header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.brands-section .section-label {
  color: var(--color-text-muted);
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.08);
}

.brands-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin: 0.3rem 0 0.4rem;
}

.brands-section__sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

.brands-category {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.brands-category__label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.brands-category__label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.28);
  white-space: nowrap;
  flex-shrink: 0;
}

.brands-category__rule {
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.07);
  transform-origin: center;
}

.brands-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.brand-card {
  width: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.9rem;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  cursor: default;
  box-shadow:
    0 1px 4px rgba(0,0,0,0.04),
    0 1px 0 rgba(255,255,255,0.9) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 260ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 260ms cubic-bezier(0.16,1,0.3,1),
    transform 260ms cubic-bezier(0.16,1,0.3,1),
    background 260ms ease;
  will-change: transform;
}

.brand-card:hover {
  background: #FFFFFF;
  border-color: rgba(0,168,107,0.22);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.09),
    0 0 0 1px rgba(0,168,107,0.10),
    0 1px 0 rgba(255,255,255,0.9) inset;
  transform: translateY(-5px) scale(1.02);
}

.brand-card:active {
  transform: translateY(-2px) scale(0.99);
}

.brand-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
}

.brand-card__logo-wrap img {
  max-height: 36px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(0.3) opacity(0.82);
  transition: transform 260ms cubic-bezier(0.16,1,0.3,1), filter 260ms ease;
}

.brand-card:hover .brand-card__logo-wrap img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.06);
}


@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


@keyframes badge-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Float keyframes ── */
@keyframes float-a {
  0%   { transform: translate(0px, 0px) rotate(0deg);    box-shadow: 0 12px 28px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04); }
  25%  { transform: translate(5px, -12px) rotate(0.5deg); box-shadow: 0 20px 36px rgba(0,0,0,0.09), 0 4px 8px rgba(0,0,0,0.05); }
  55%  { transform: translate(-4px, -20px) rotate(-0.4deg); box-shadow: 0 24px 40px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.05); }
  80%  { transform: translate(-7px, -9px) rotate(0.2deg);  box-shadow: 0 18px 32px rgba(0,0,0,0.08), 0 3px 7px rgba(0,0,0,0.04); }
  100% { transform: translate(0px, 0px) rotate(0deg);    box-shadow: 0 12px 28px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04); }
}
@keyframes float-b {
  0%   { transform: translate(0px, 0px) rotate(0deg);     box-shadow: 0 12px 28px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04); }
  30%  { transform: translate(-6px, -14px) rotate(-0.6deg); box-shadow: 0 22px 38px rgba(0,0,0,0.10), 0 4px 9px rgba(0,0,0,0.05); }
  65%  { transform: translate(6px, -22px) rotate(0.4deg);  box-shadow: 0 26px 44px rgba(0,0,0,0.11), 0 5px 10px rgba(0,0,0,0.05); }
  85%  { transform: translate(8px, -8px) rotate(-0.2deg);  box-shadow: 0 18px 30px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.04); }
  100% { transform: translate(0px, 0px) rotate(0deg);     box-shadow: 0 12px 28px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04); }
}
@keyframes float-c {
  0%   { transform: translate(0px, 0px) rotate(0deg);    box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
  33%  { transform: translate(7px, -13px) rotate(0.5deg); box-shadow: 0 16px 30px rgba(0,0,0,0.09); }
  66%  { transform: translate(-5px, -20px) rotate(-0.3deg); box-shadow: 0 20px 34px rgba(0,0,0,0.10); }
  100% { transform: translate(0px, 0px) rotate(0deg);    box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
}
@keyframes float-d {
  0%   { transform: translate(0px, 0px) rotate(0deg);     box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
  40%  { transform: translate(-9px, -10px) rotate(-0.7deg); box-shadow: 0 18px 32px rgba(0,0,0,0.09); }
  70%  { transform: translate(4px, -18px) rotate(0.4deg);  box-shadow: 0 20px 36px rgba(0,0,0,0.10); }
  100% { transform: translate(0px, 0px) rotate(0deg);     box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
}
@keyframes float-e {
  0%   { transform: translate(0px, 0px) rotate(0deg);    box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
  20%  { transform: translate(4px, -8px) rotate(0.3deg); box-shadow: 0 14px 26px rgba(0,0,0,0.08); }
  55%  { transform: translate(-6px, -17px) rotate(-0.5deg); box-shadow: 0 20px 34px rgba(0,0,0,0.10); }
  80%  { transform: translate(3px, -11px) rotate(0.2deg); box-shadow: 0 16px 28px rgba(0,0,0,0.08); }
  100% { transform: translate(0px, 0px) rotate(0deg);    box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
}

/* ── Floating badges — base card ── */
.hero__floating {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.08rem, 0.2vw, 0.14rem);
  padding: clamp(0.55rem, 0.9vw, 0.76rem) clamp(0.7rem, 1.1vw, 0.9rem);
  border-radius: clamp(0.7rem, 1.2vw, 0.95rem);
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.18);
  min-width: clamp(5.5rem, 8vw, 7.5rem);
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

.hero__floating-title {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FAFAF8;
}

.hero__floating-copy {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255,255,255,0.5);
}

.hero__floating-pin {
  position: absolute;
  top: 0;
  left: 0.82rem;
  transform: translateY(-48%);
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 18px rgba(0,0,0,0.3);
}

.hero__floating-pin--weather {
  background: linear-gradient(180deg, #ffd96a, #f2b51f);
  color: #8c5600;
  z-index: 2;
}

.hero__floating-pin--weather svg {
  display: block;
}

.hero__floating-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.08rem;
}

.hero__floating-mark-line {
  width: 1.25rem;
  height: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05));
}

.hero__floating-mark-dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8e7e3, #9a9a96);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hero__floating--left {
  left: max(2rem, calc(50% - 37rem));
  top: 26%;
  padding-top: clamp(0.7rem, 1vw, 0.96rem);
  border-color: rgba(229,178,44,0.28);
  animation: badge-fade-in 1.2s ease-out forwards, float-a 7s ease-in-out infinite;
  animation-delay: 0s;
}

.hero__floating--right {
  right: max(2rem, calc(50% - 37rem));
  top: 22%;
  animation: badge-fade-in 1.2s ease-out forwards, float-b 8.5s ease-in-out infinite;
  animation-delay: 0s, -2s;
}

/* ── Floating pill (horizontal) ── */
.hero__pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 7px);
  padding: clamp(5px, 0.5vw, 7px) clamp(10px, 1.2vw, 15px) clamp(5px, 0.5vw, 7px) clamp(6px, 0.7vw, 9px);
  border-radius: 100px;
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  font-family: var(--font-heading);
  font-size: clamp(0.55rem, 0.8vw, 0.72rem);
  font-weight: 600;
  color: #FAFAF8;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

.hero__pill-icon {
  width: clamp(1.1rem, 1.6vw, 1.4rem);
  height: clamp(1.1rem, 1.6vw, 1.4rem);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: clamp(0.6rem, 0.9vw, 0.76rem);
}

.hero__pill-icon--green  { background: rgba(0,168,107,0.12); color: var(--color-accent); }
.hero__pill-icon--dark   { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.hero__pill-icon--amber  { background: rgba(255,185,0,0.14); color: #c47a00; }
.hero__pill-icon--blue   { background: rgba(59,130,246,0.12); color: #2563eb; }

.hero__pill-sub {
  font-family: var(--font-body);
  font-size: clamp(0.48rem, 0.65vw, 0.62rem);
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  display: block;
  line-height: 1;
  margin-top: 1px;
}

.hero__pill--speed {
  left: max(4rem, calc(50% - 40rem));
  top: 42%;
  animation: badge-fade-in 1.2s ease-out forwards, float-e 7.8s ease-in-out infinite;
  animation-delay: 0s, -0.8s;
}

.hero__pill--installs {
  left: max(3rem, calc(50% - 32rem));
  top: 58%;
  animation: badge-fade-in 1.2s ease-out forwards, float-c 6.5s ease-in-out infinite;
  animation-delay: 0s, -1s;
}

.hero__pill--support {
  right: max(4rem, calc(50% - 38rem));
  top: 38%;
  animation: badge-fade-in 1.2s ease-out forwards, float-a 6s ease-in-out infinite;
  animation-delay: 0s, -4s;
}

.hero__pill--control {
  right: max(3rem, calc(50% - 30rem));
  top: 55%;
  animation: badge-fade-in 1.2s ease-out forwards, float-d 9s ease-in-out infinite;
  animation-delay: 0s, -3.5s;
}

/* ── Gallery: project images peeking from the bottom ── */
.hero__gallery {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: clamp(0.5rem, 0.8vw, 0.875rem);
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
  transform: translateY(34%);
}

/* ── Card ── */
.hero__card {
  flex: 1;
  min-width: 0;
  height: clamp(220px, 26vw, 320px);
  border-radius: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #E8E7E3;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 8px 32px rgba(0,0,0,0.10);
  transition:
    transform  380ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Alternating tilt + subtle staircase heights (pyramid: outer shortest → center tallest) */
.hero__card:nth-child(1) { transform: rotate(-0.85deg); height: clamp(205px, 24vw, 270px); }
.hero__card:nth-child(2) { transform: rotate(0.45deg);  height: clamp(220px, 26vw, 295px); }
.hero__card:nth-child(3) { transform: rotate(-0.2deg); flex: 1.2; height: clamp(240px, 29vw, 325px); }
.hero__card:nth-child(4) { transform: rotate(0.55deg);  height: clamp(220px, 26vw, 295px); }
.hero__card:nth-child(5) { transform: rotate(-0.45deg); height: clamp(205px, 24vw, 270px); }

.hero__card:hover {
  transform: translateY(-10px) rotate(0deg) scale(1.015) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.07),
    0 22px 48px rgba(0,0,0,0.16);
  z-index: 10;
}

/* Image */
.hero__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
              filter  480ms ease;
}

.hero__card:hover img {
  transform: scale(1.08);
  filter: grayscale(0%);
}

/* Dark-to-transparent gradient over image */
.hero__card-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.08) 45%, transparent 68%);
}

/* Card label — slides up on hover */
.hero__card-label {
  position: absolute;
  bottom: 0.875rem;
  left: 0.875rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.90);
  opacity: 0.88;
  transform: translateY(0);
  transition: opacity 240ms ease, transform 240ms ease;
  white-space: nowrap;
}

.hero__card:hover .hero__card-label {
  opacity: 1;
}

/* Smart status chips on centre card — always visible */
.hero__smart-chips {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 3;
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.625rem;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateX(8px);
  animation: chip-slide 450ms cubic-bezier(0.16,1,0.3,1) forwards;
}

.hero__chip:nth-child(1) { animation-delay: 900ms;  }
.hero__chip:nth-child(2) { animation-delay: 1100ms; }
.hero__chip:nth-child(3) { animation-delay: 1300ms; }

@keyframes chip-slide {
  to { opacity: 1; transform: translateX(0); }
}

.hero__chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ── Dark pill CTA ── */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.65rem;
  background: #FAFAF8;
  color: #0F0F0E;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: none;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.08) inset;
  transition: background 220ms ease,
              transform  220ms ease,
              box-shadow 220ms ease;
}

.btn-dark:hover {
  background: #FFFFFF;
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(0,0,0,0.30);
}

.btn-dark:active { transform: scale(1.0); box-shadow: none; }

/* ── Green pill CTA (hero primary) ── */
.btn-green {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.875rem;
  background: var(--color-accent);
  color: #062211;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: none;
  transition: background 220ms ease,
              transform  220ms ease,
              box-shadow 220ms ease;
}

.btn-green:hover {
  background: var(--color-accent-dark);
  color: #FFFFFF;
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(0, 168, 107, 0.30);
}

.btn-green:active { transform: scale(1.0); box-shadow: none; }

/* ── Text link CTA ── */
.btn-link {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 200ms ease, gap 200ms ease;
}

.btn-link:hover {
  color: #FAFAF8;
  gap: 0.45rem;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .hero__floating,
  .hero__pill { display: none; }

  .hero__gallery {
    gap: 0.4rem;
    padding: 0 0.75rem;
    transform: translateY(46%);
  }
  .hero__card:nth-child(1),
  .hero__card:nth-child(5) { display: none; }
  .hero__card:nth-child(3) { flex: 1.3; }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .hero__floating--left { left: 1.5rem; }
  .hero__floating--right { right: 1.5rem; }
  .hero__pill--speed { left: 1.5rem; }
  .hero__pill--installs { left: 1rem; }
  .hero__pill--support { right: 1.5rem; }
  .hero__pill--control { right: 1rem; }
}