/* ==========================================================================
   Enerbot — G2 Pro showcase site
   Design system: custom properties, reset, layout, components, animation
   ========================================================================== */

:root {
  /* Palette — near-black base, warm gradient accent lifted from the Enerbot mark */
  --color-bg: #08090b;
  --color-bg-alt: #0d1013;
  --color-surface: #14171c;
  --color-surface-2: #1b1f26;
  --color-border: #262b33;
  --color-border-soft: #1d2129;

  --color-text: #f3f4f6;
  --color-text-dim: #a1a8b3;
  --color-text-faint: #838b98;
  /* meets 4.5:1 against --color-bg and --color-bg-alt */

  --accent-1: #f3c86e;
  /* muted gold */
  --accent-2: #f7941d;
  /* orange */
  --accent-3: #e2703f;
  /* muted terracotta */
  --accent-gradient: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  --accent-solid: #f7941d;
  --accent-soft-bg: rgba(247, 148, 29, 0.1);
  --accent-ring: rgba(247, 148, 29, 0.45);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container-w: 1240px;
  --header-h: 82px;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);

  --ease-out: cubic-bezier(0.16, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.45s;
  --dur-slow: 0.9s;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

ul {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Focus visibility — keyboard users always get a ring; mouse users don't */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: var(--space-md);
  z-index: 1000;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-md);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
  position: relative;
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

.section-head--center {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: 2px;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  margin-bottom: var(--space-sm);
}

.section-head p {
  color: var(--color-text-dim);
  font-size: 1.05rem;
}

.bg-alt {
  background: var(--color-bg-alt);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn-primary {
  background: var(--accent-gradient);
  color: #17110a;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.015);
}

.btn-primary:active {
  transform: translateY(0) scale(0.99);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  border-color: var(--accent-2);
  background: var(--accent-soft-bg);
  transform: translateY(-2px);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    height var(--dur-med) var(--ease-out);
}

.site-header.is-scrolled {
  height: calc(var(--header-h) - 14px);
  background: rgba(8, 9, 11, 0.82);
  border-bottom-color: var(--color-border-soft);
  backdrop-filter: blur(14px) saturate(140%);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand img {
  height: 48px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-links>a {
  position: relative;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--color-text-dim);
  padding-block: 0.45rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-links>a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent-gradient);
  transition: right var(--dur-med) var(--ease-out);
}

.nav-links>a:hover {
  color: var(--color-text);
}

.nav-links>a:hover::after {
  right: 0;
}

.nav-dropdown {
  position: relative;
}

/* Invisible hit-zone bridging the gap to .nav-dropdown__menu below, so the
   cursor never leaves a hoverable descendant of .nav-dropdown while crossing
   from the toggle to the menu — without it, :hover drops mid-transit and the
   menu starts closing before the cursor arrives. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 20px;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--color-text-dim);
  padding-block: 0.45rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-dropdown__toggle:hover {
  color: var(--color-text);
}

.nav-dropdown__chevron {
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 10;
  width: 300px;
  padding: 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.nav-dropdown__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav-dropdown__item:focus-visible {
  background: var(--accent-soft-bg);
}

/* Scoped to real pointer-hover devices only -- without this guard, tapping
   a link on a touchscreen can leave its :hover tint "stuck" on until some
   other element is tapped, which is what was making a product link look
   like a solid, textless colored box in the mobile menu. */
@media (hover: hover) {
  .nav-dropdown__item:hover {
    background: var(--accent-soft-bg);
  }
}

.nav-dropdown__item-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}

.nav-dropdown__item-desc {
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

/* Category grouping inside the Products dropdown (Solar / Facade) */
.nav-dropdown__group + .nav-dropdown__group {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-soft);
}

.nav-dropdown__group-title {
  padding: 0.2rem 0.75rem 0.3rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header-actions .btn-ghost {
  padding: 0.6rem 1.3rem;
  font-size: 0.86rem;
}

.lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.lang-toggle__btn {
  padding: 0.32rem 0.62rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.lang-toggle__btn:hover {
  color: var(--color-text);
}

.lang-toggle__btn.is-active {
  background: var(--accent-gradient);
  color: #17110a;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transform: scale(1.08);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 7, 8, 0.55) 0%, rgba(7, 8, 9, 0.72) 55%, var(--color-bg) 96%),
    linear-gradient(90deg, rgba(6, 7, 8, 0.55) 0%, rgba(6, 7, 8, 0.15) 45%, rgba(6, 7, 8, 0.55) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding-block: var(--space-2xl);
}

.hero-content .eyebrow {
  color: var(--accent-1);
}

.hero h1 {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  margin-bottom: var(--space-sm);
}

.hero h1 .accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-tagline {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--color-text-dim);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Staged hero entrance — elements start hidden/offset, JS adds .is-loaded to fire */
.hero [data-stage] {
  opacity: 0;
  transform: translateY(22px);
}

.hero.is-loaded [data-stage] {
  animation: stage-in var(--dur-slow) var(--ease-out) forwards;
}

.hero.is-loaded [data-stage="1"] {
  animation-delay: 0.05s;
}

.hero.is-loaded [data-stage="2"] {
  animation-delay: 0.2s;
}

.hero.is-loaded [data-stage="3"] {
  animation-delay: 0.35s;
}

.hero.is-loaded [data-stage="4"] {
  animation-delay: 0.5s;
}

@keyframes stage-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-faint);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
}

.hero.is-loaded .scroll-cue {
  animation: stage-in var(--dur-slow) var(--ease-out) forwards, bob 2.6s ease-in-out 1.4s infinite;
  animation-delay: 0.75s, 1.4s;
}

@keyframes bob {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, 8px);
  }
}

/* ==========================================================================
   Cinematic showcase reveal (scroll-driven, eased in JS — see main.js)
   ========================================================================== */

.showcase {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.showcase-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 0;
  will-change: transform;
}

.showcase-stage {
  padding-block: var(--space-xl);
}

/* The frame reserves empty space around the photo (--callout-space-y above/
   below, --callout-space-x left/right) so leader-line labels can float
   mostly off the image instead of sitting on top of it. Its own max-width
   is set so the content box left after that padding is exactly 950px —
   matching .showcase-visual's own max-width below — so showcase-callouts
   (inset by the same two amounts) always lines up with the photo exactly,
   never wider than it, at the one width this layout renders at. Kept
   comfortably under the 1400px breakpoint below (total ~1270px) so it
   never gets squeezed/overflows on common 1400-1600px laptop viewports. */
.showcase-frame {
  position: relative;
  --callout-space-x: 160px;
  --callout-space-y: 150px;
  max-width: calc(950px + 2 * var(--callout-space-x));
  margin-inline: auto;
  padding-block: var(--callout-space-y);
  padding-inline: var(--callout-space-x);
}

/* Cinematic reveal: the photo itself is the hero element — no device bezel.
   It starts dim/desaturated/slightly scaled down and resolves to full
   clarity as it travels through the viewport (driven by JS in main.js). */
.showcase-visual {
  position: relative;
  z-index: 0;
  max-width: 950px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: scale(0.94);
  filter: brightness(0.5) saturate(0.6);
  will-change: transform, filter;
}

.showcase-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Unclipped layer stacked exactly over the photo's box (see --callout-space-x/y
   above), so a bubble can float mostly in the surrounding space and only
   dip slightly onto the image — never masking the hardware it labels. */
.showcase-callouts {
  position: absolute;
  inset: var(--callout-space-y) var(--callout-space-x);
  z-index: 1;
}

/* Each callout is a plain, zero-size scope for --cx/--cy/--rise: its line
   and bubble children are positioned against .showcase-callouts (the
   nearest positioned ancestor), not against this element. Opacity here
   still fades the whole group together — CSS groups a subtree for opacity
   regardless of the element's own box size. */
.showcase-callout {
  opacity: 0;
  will-change: opacity;
}

.showcase-callout__anchor {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 10px;
  height: 10px;
  background: #f7941d;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(247, 148, 29, 0.9);
  z-index: 5;
}

.showcase-callout__line-v,
.showcase-callout__line-h {
  position: absolute;
  background: rgba(247, 148, 29, 0.9);
  box-shadow: 0 0 8px rgba(247, 148, 29, 0.9);
  z-index: 4;
}

.showcase-callout__line-v { width: 3px; }
.showcase-callout__line-h { height: 3px; }

/* Quadrant: Top-Left (--tl) */
.showcase-callout--tl .showcase-callout__line-v {
  left: calc(var(--cx) - 1.5px);
  top: var(--by);
  height: calc(var(--cy) - var(--by));
}
.showcase-callout--tl .showcase-callout__line-h {
  left: calc(var(--bx) - 16px);
  top: calc(var(--by) - 1.5px);
  width: calc(var(--cx) - var(--bx) + 16px);
}
.showcase-callout--tl .showcase-callout__bubble {
  right: calc(100% - var(--bx) + 12px);
  top: var(--by);
  transform: translateY(-50%);
}

/* Wider than the standard 240px bubble so the Romanian title ("Detectarea
   Marginilor și Întoarcerea Automată") settles into 2 lines instead of 3;
   the English title fits easily either way. */
#showcase-callout-4 .showcase-callout__bubble {
  width: 300px;
}

/* Quadrant: Top-Right (--tr) */
.showcase-callout--tr .showcase-callout__line-v {
  left: calc(var(--cx) - 1.5px);
  top: var(--by);
  height: calc(var(--cy) - var(--by));
}
.showcase-callout--tr .showcase-callout__line-h {
  left: calc(var(--cx) - 1.5px);
  top: calc(var(--by) - 1.5px);
  width: calc(var(--bx) - var(--cx) + 16px);
}
.showcase-callout--tr .showcase-callout__bubble {
  left: calc(var(--bx) + 12px);
  top: var(--by);
  transform: translateY(-50%);
}

/* Quadrant: Bottom-Left (--bl) */
.showcase-callout--bl .showcase-callout__line-v {
  left: calc(var(--cx) - 1.5px);
  top: var(--cy);
  height: calc(var(--by) - var(--cy));
}
.showcase-callout--bl .showcase-callout__line-h {
  left: calc(var(--bx) - 16px);
  top: calc(var(--by) - 1.5px);
  width: calc(var(--cx) - var(--bx) + 16px);
}
.showcase-callout--bl .showcase-callout__bubble {
  right: calc(100% - var(--bx) + 12px);
  top: var(--by);
  transform: translateY(-50%);
}

/* Quadrant: Bottom-Right (--br) */
.showcase-callout--br .showcase-callout__line-v {
  left: calc(var(--cx) - 1.5px);
  top: var(--cy);
  height: calc(var(--by) - var(--cy));
}
.showcase-callout--br .showcase-callout__line-h {
  left: calc(var(--cx) - 1.5px);
  top: calc(var(--by) - 1.5px);
  width: calc(var(--bx) - var(--cx) + 16px);
}
.showcase-callout--br .showcase-callout__bubble {
  left: calc(var(--bx) + 12px);
  top: var(--by);
  transform: translateY(-50%);
}

.showcase-callout__bubble {
  position: absolute;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #1d212a, #0e1013);
  border: 1px solid #3d2a14;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.showcase-callout__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--accent-1);
}

.showcase-callout__desc {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}

/* ==========================================================================
   Features
   ========================================================================== */

.grid-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.feature-card {
  background: var(--color-bg-alt);
  padding: var(--space-lg) var(--space-md);
  transition: background var(--dur-med) var(--ease-out);
}

.feature-card:hover {
  background: var(--color-surface);
}

.feature-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft-bg);
  color: var(--accent-2);
  margin-bottom: var(--space-md);
  transition: transform var(--dur-fast) var(--ease-out);
}

.feature-card:hover .feature-icon {
  transform: scale(1.08) rotate(-4deg);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: var(--color-text-dim);
  font-size: 0.95rem;
}

/* ==========================================================================
   Impact / problem banner
   ========================================================================== */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.problem-item {
  padding-inline: var(--space-lg);
}

.problem-item:first-child {
  padding-left: 0;
}

.problem-item:last-child {
  padding-right: 0;
}

.problem-item+.problem-item {
  border-left: 1px solid var(--color-border-soft);
}

.problem-item h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.problem-item p {
  color: var(--color-text-dim);
  font-size: 1.1rem;
  line-height: 1.65;
}

.impact-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft-bg);
  color: var(--accent-2);
  margin-bottom: var(--space-md);
}

.impact-icon svg {
  width: 28px;
  height: 28px;
}

/* ==========================================================================
   Product page intro + gallery selector
   ========================================================================== */

.product-top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.product-info h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin-bottom: var(--space-sm);
}

.product-info p {
  color: var(--color-text-dim);
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
}

.product-highlights {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: var(--space-lg);
}

.package-list {
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: 0;
}

.product-highlights li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-dim);
  font-size: 0.98rem;
}

.product-highlights svg {
  flex-shrink: 0;
  color: var(--accent-2);
}

.product-gallery__main {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.product-gallery__main img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 23, 28, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.product-gallery__nav:hover {
  background: var(--accent-2);
  transform: translateY(-50%) scale(1.06);
}

.product-gallery__nav--prev {
  left: 8px;
}

.product-gallery__nav--next {
  right: 8px;
}

.product-gallery__thumbs {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.product-gallery__thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--color-border-soft);
  background: var(--color-bg-alt);
  opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery__thumb:hover {
  opacity: 1;
}

.product-gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--accent-2);
}

/* ==========================================================================
   Specs
   ========================================================================== */

.spec-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.spec-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--color-surface);
}

.spec-table th,
.spec-table td {
  padding: 0.85rem var(--space-md);
  text-align: left;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.spec-table th[scope="row"] {
  width: 42%;
  font-weight: 500;
  color: var(--color-text-dim);
  white-space: nowrap;
}

.spec-table td {
  color: var(--color-text);
  font-weight: 600;
}

.spec-table tbody tr:not(.spec-table__category):hover {
  background: rgba(255, 255, 255, 0.03);
}

.spec-table__category th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--color-surface-2);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.spec-table tbody tr:first-child th {
  border-top: 0;
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: var(--space-sm);
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
}

.gallery-item.is-wide {
  grid-column: span 2;
}

.gallery-item.is-tall {
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
}

.gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-sm);
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.gallery-item .gallery-label {
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.06);
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay {
  opacity: 1;
}

.gallery-item.is-video .gallery-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(8, 9, 11, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.gallery-item:hover .gallery-play-btn {
  transform: scale(1.1);
  background: var(--accent-2);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(4, 4, 5, 0.9);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-med) var(--ease-out);
}

.lightbox-content {
  position: relative;
  max-width: min(1000px, 82vw);
  max-height: 86vh;
  transform: scale(0.94);
  transition: transform var(--dur-med) var(--ease-out);
}

.lightbox.is-open .lightbox-content {
  transform: scale(1);
}

.lightbox-content img,
.lightbox-content video {
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.lightbox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 23, 28, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.lightbox-close:hover {
  background: var(--accent-2);
  transform: scale(1.06);
}

/* Nav arrows are positioned relative to the lightbox overlay itself (not the
   photo), so they stay put at a fixed spot on screen no matter what size or
   aspect ratio the current image is. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20, 23, 28, 0.8);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 1;
}

.lightbox-nav:hover {
  background: var(--accent-2);
  transform: translateY(-50%) scale(1.06);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* ==========================================================================
   Blog (homepage teaser + list/single templates share these classes)
   ========================================================================== */

.grid-blog {
  display: grid;
  /* auto-fill (not auto-fit): keeps the same number of column tracks whether
     3 posts match a filter or 12 do, so cards stay a consistent size instead
     of stretching to fill the row when a category has few results. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

/* Stacked, vertical card: a full-width photo on top with the date/title/tag/
   excerpt underneath — used by the homepage's latest-posts carousel and the
   full blog list alike. */
.blog-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.blog-card__media {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-surface);
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.08);
}

.blog-card__body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.blog-card__date {
  font-size: 0.72rem;
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-card__body h3 {
  font-size: 1rem;
  line-height: 1.3;
}

/* The "white text that turns orange on hover" — the title itself is the link. */
.blog-card__title {
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.blog-card__title:hover,
.blog-card__title:focus-visible {
  color: var(--accent-2);
}

.blog-card__excerpt {
  color: var(--color-text-dim);
  font-size: 0.86rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-empty {
  text-align: center;
  color: var(--color-text-faint);
  padding: var(--space-xl) var(--space-md);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* Homepage "latest posts" carousel: a full-bleed wrapper (breaks out of
   .container) so the prev/next arrows can sit near the actual viewport
   edges, while the card grid inside keeps its own centered .container so
   it lines up with the rest of the page. */
.blog-carousel {
  position: relative;
  width: 100%;
}

.blog-carousel .container {
  padding-inline: calc(var(--space-md) + 48px);
}

.blog-carousel .grid-blog {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.blog-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.blog-carousel__nav--prev {
  left: clamp(4px, 1.5vw, 24px);
}

.blog-carousel__nav--next {
  right: clamp(4px, 1.5vw, 24px);
}

.blog-carousel__nav:hover:not(:disabled) {
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translateY(-50%) scale(1.06);
}

.blog-carousel__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* The base .blog-card is already the stacked photo-on-top layout now, so the
   carousel only needs to bump up type sizes for a slightly more "featured"
   look than the compact /blog/ listing cards use. */
.blog-carousel .blog-card__body {
  gap: 0.5rem;
}

.blog-carousel .blog-card__date {
  font-size: 0.78rem;
}

.blog-carousel .blog-card__body h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.blog-carousel .blog-card__excerpt {
  font-size: 0.94rem;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media (max-width: 980px) {
  .blog-carousel .grid-blog {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-carousel .container {
    padding-inline: calc(var(--space-md) + 40px);
  }
}

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

  .blog-carousel .container {
    padding-inline: calc(var(--space-sm) + 34px);
  }

  .blog-carousel__nav {
    width: 36px;
    height: 36px;
  }

  .blog-carousel__nav--prev {
    left: 4px;
  }

  .blog-carousel__nav--next {
    right: 4px;
  }
}

.blog-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.blog-search__field {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}

.blog-search__field svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-faint);
  pointer-events: none;
}

.blog-search__field input {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1rem 0.75rem 2.6rem;
  color: var(--color-text);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.blog-search__field input:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-soft-bg);
}

.blog-search__meta {
  color: var(--color-text-faint);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.category-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-dim);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.category-filter__pill span {
  color: var(--color-text-faint);
  font-weight: 400;
}

.category-filter__pill:hover {
  border-color: var(--accent-2);
  color: var(--color-text);
}

.category-filter__pill.is-active {
  background: var(--accent-soft-bg);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.category-filter__pill.is-active span {
  color: var(--accent-2);
}

.tag {
  display: inline-flex;
  background: var(--accent-soft-bg);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-2);
  letter-spacing: 0.02em;
}

a.tag:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.blog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Blog list / post page shell (PHP templates reuse header/footer + these) */
.page-hero {
  padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border-soft);
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.page-hero p {
  color: var(--color-text-dim);
  margin-top: var(--space-xs);
}

.post-article {
  max-width: 760px;
  margin-inline: auto;
  /* Top padding must clear the fixed header (--header-h) the same way
     .page-hero/.login-shell/.admin-shell do — without it, the "Back to the
     blog" link (the article's first element) lands underneath the header's
     own hit area and the Products dropdown's hover bridge, making it nearly
     unclickable. */
  padding-top: calc(var(--header-h) + var(--space-xl));
  padding-bottom: var(--space-xl);
}

.post-article__cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border-soft);
}

.post-article__meta {
  color: var(--color-text-faint);
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-article h1 {
  margin-bottom: var(--space-sm);
}

.post-article__lead {
  color: var(--color-text-dim);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.post-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
}

/* Rich-text body — rendered from the admin's Quill editor. Quill's own
   formatting CSS only applies inside the editor (.ql-editor), so this
   duplicates just the handful of format classes the editor's toolbar can
   actually produce (align, size) for the public-facing page. */
.post-article__body {
  color: var(--color-text-dim);
  font-size: 1.05rem;
  line-height: 1.8;
}

.post-article__body p {
  margin-bottom: var(--space-md);
}

.post-article__body h1,
.post-article__body h2,
.post-article__body h3,
.post-article__body h4 {
  color: var(--color-text);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.post-article__body h1 { font-size: 1.8rem; }
.post-article__body h2 { font-size: 1.5rem; }
.post-article__body h3 { font-size: 1.25rem; }
.post-article__body h4 { font-size: 1.1rem; }

.post-article__body ul,
.post-article__body ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.4em;
}

.post-article__body ul { list-style: disc; }
.post-article__body ol { list-style: decimal; }

.post-article__body li {
  margin-bottom: 0.4em;
}

.post-article__body a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

.post-article__body a:hover {
  color: var(--color-text);
}

.post-article__body blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--accent-2);
  background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text);
  font-style: italic;
}

.post-article__body hr {
  border: 0;
  border-top: 1px solid var(--color-border-soft);
  margin: var(--space-lg) 0;
}

.post-article__body strong,
.post-article__body b {
  color: var(--color-text);
  font-weight: 700;
}

.post-article__body pre,
.post-article__body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.post-article__body code {
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}

.post-article__body pre {
  padding: var(--space-sm) var(--space-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

.post-article__body pre code {
  padding: 0;
  background: none;
}

.post-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-block: var(--space-md);
}

.post-article__body .ql-align-center { text-align: center; }
.post-article__body .ql-align-right { text-align: right; }
.post-article__body .ql-align-justify { text-align: justify; }

.post-article__body .ql-size-small { font-size: 0.75em; }
.post-article__body .ql-size-large { font-size: 1.5em; }
.post-article__body .ql-size-huge { font-size: 2.5em; }

.post-article__body [class*="ql-indent-"] { margin-left: 3em; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent-2);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* ==========================================================================
   Contact / Request form
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-2xl);
  align-items: start;
}

.contact-info h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: var(--space-sm);
}

.contact-info p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-lg);
}

.contact-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-point {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.contact-point .feature-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.contact-point h4 {
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.contact-point p {
  color: var(--color-text-dim);
  font-size: 0.92rem;
  margin: 0;
}

.contact-form {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.form-row {
  margin-bottom: var(--space-md);
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text-dim);
}

.form-row input,
.form-row textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-soft-bg);
}

.form-row textarea {
  resize: vertical;
  min-height: 120px;
}

.form-note {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  margin-top: var(--space-sm);
}

/* Honeypot field — off-screen, not display:none (keeps it "visible" to naive bots) */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  margin-bottom: var(--space-md);
}

.form-status.is-visible {
  display: flex;
}

.form-status.is-success {
  background: rgba(58, 191, 130, 0.12);
  color: #7fe3ac;
  border: 1px solid rgba(58, 191, 130, 0.3);
}

.form-status.is-error {
  background: rgba(240, 90, 90, 0.12);
  color: #ff9d9d;
  border: 1px solid rgba(240, 90, 90, 0.3);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-border-soft);
  padding-block: var(--space-xl) var(--space-lg);
  background: var(--color-bg-alt);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand img {
  height: 52px;
  width: auto;
  margin-bottom: var(--space-md);
}

.footer-brand p {
  color: var(--color-text-faint);
  font-size: 0.92rem;
  max-width: 34ch;
}

.footer-col h5 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-sm);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col a {
  color: var(--color-text-dim);
  font-size: 0.94rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--accent-2);
}

/* Mandatory Romanian consumer-protection badges (ANPC SAL/SOL) — a plain
   row of two linked images sitting between the main footer columns and the
   copyright line. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-soft);
}

.footer-legal img {
  display: block;
  height: 40px;
  width: auto;
  border-radius: 4px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-soft);
  font-size: 0.85rem;
  color: var(--color-text-faint);
}

.admin-link {
  color: var(--color-text-faint);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.admin-link:hover {
  color: var(--color-text-dim);
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Admin (login + dashboard) — minimal, reuses core components above
   ========================================================================== */

.login-shell {
  padding-top: calc(var(--header-h) + var(--space-xl));
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.login-card {
  max-width: 420px;
  width: 100%;
}

.login-card h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: var(--space-lg);
}

.admin-shell {
  padding-top: calc(var(--header-h) + var(--space-xl));
  min-height: 70vh;
}

.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.admin-head p {
  color: var(--color-text-dim);
}

.admin-grid {
  display: grid;
  grid-template-columns: 1.7fr 0.85fr;
  gap: var(--space-2xl);
  align-items: start;
}

.admin-form-wrap--standalone {
  max-width: 820px;
  margin-inline: auto;
}

.admin-categories__title,
.admin-post-list__title {
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
}

.admin-empty-hint {
  color: var(--color-text-faint);
  font-size: 0.9rem;
}

.form-row__hint {
  font-weight: 400;
  color: var(--color-text-faint);
}

.form-section-title {
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}

/* Post editor's English/Romanian content switch — visually matches the
   site's .lang-toggle in the nav, but kept as separate classes/markup so
   main.js's site-wide language listener (which targets .lang-toggle__btn)
   never picks these buttons up. */
.post-lang-toggle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.admin-lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.admin-lang-toggle__btn {
  padding: 0.32rem 0.62rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-faint);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.admin-lang-toggle__btn:hover {
  color: var(--color-text);
}

.admin-lang-toggle__btn.is-active {
  background: var(--accent-gradient);
  color: #17110a;
}

.meta-description-input {
  min-height: 80px;
}

.excerpt-input {
  min-height: 70px;
}

.post-form__cancel {
  margin-top: var(--space-sm);
}

.cover-preview {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.cover-preview img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-soft);
}

.cover-preview span {
  font-size: 0.85rem;
  color: var(--color-text-faint);
}

.cover-preview__new-thumb {
  display: block;
  margin-top: var(--space-xs);
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-2);
}

.admin-post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.admin-post-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}

.admin-post-list img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.admin-post-list__info {
  min-width: 0;
  flex: 1;
}

.admin-post-list .title {
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-post-list .date {
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

.admin-post-list .date a {
  color: var(--accent-2);
}

.admin-post-list__actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.admin-post-list__actions form {
  display: flex;
}

.admin-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-dim);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.admin-icon-btn:hover {
  color: var(--color-text);
  border-color: var(--accent-2);
  background: var(--accent-soft-bg);
}

.admin-icon-btn--danger:hover {
  color: #ff9d9d;
  border-color: rgba(240, 90, 90, 0.4);
  background: rgba(240, 90, 90, 0.12);
}

.admin-categories {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin-bottom: var(--space-lg);
  max-width: 420px;
}

.admin-categories__title {
  font-size: 1rem;
}

.admin-categories__add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.admin-categories__add input[type="text"] {
  flex: 1;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  color: var(--color-text);
  font-size: 0.85rem;
}

.admin-categories__add .btn {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.category-pills li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.35rem 0.25rem 0.7rem;
  font-size: 0.8rem;
  color: var(--color-text-dim);
}

.category-pills__delete-form {
  display: flex;
}

.category-pills__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--color-text-faint);
  font-size: 1rem;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.category-pills__delete:hover {
  background: rgba(240, 90, 90, 0.15);
  color: #ff9d9d;
}

.category-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.category-checklist__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-text-dim);
  cursor: pointer;
}

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

/* ==========================================================================
   Admin post editor (Quill) — dark-theme overrides + custom controls.
   Quill's snow theme assumes a light page (dark icon strokes, white pickers/
   tooltips), so every color it sets needs an override here to match the
   site's dark theme; layout/behavior (toolbar, pickers, tooltip) is untouched.
   ========================================================================== */

.editor-shell {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.editor-toolbar.ql-toolbar.ql-snow {
  background: var(--color-surface-2);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0;
}

.editor-toolbar__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ql-snow .ql-stroke,
.ql-snow .ql-stroke-miter {
  stroke: var(--color-text-dim);
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: var(--color-text-dim);
}

.ql-snow .ql-picker {
  color: var(--color-text-dim);
}

.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: var(--accent-2);
}

.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
  stroke: var(--accent-2);
}

.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill {
  fill: var(--accent-2);
}

.ql-toolbar.ql-snow .ql-picker-options {
  background: var(--color-surface);
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: var(--color-border) !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--color-text);
}

.ql-snow .ql-picker-options .ql-picker-item {
  color: var(--color-text-dim);
}

.ql-snow .ql-picker-options .ql-picker-item:hover {
  color: var(--accent-2);
}

.ql-snow .ql-tooltip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
  z-index: 20;
}

.ql-snow .ql-tooltip input[type="text"] {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
}

.ql-snow a {
  color: var(--accent-2);
}

.ql-snow .ql-tooltip a.ql-action::after,
.ql-snow .ql-tooltip a.ql-remove::before {
  color: var(--color-text-dim);
}

.editor-body {
  background: var(--color-bg-alt);
}

.editor-body.ql-container.ql-snow {
  border: 0;
  font-family: var(--font-body);
  font-size: 1rem;
}

.editor-body .ql-editor {
  min-height: 560px;
  color: var(--color-text);
  padding: var(--space-md);
}

.editor-body .ql-editor.ql-blank::before {
  color: var(--color-text-faint);
  font-style: normal;
}

.editor-source {
  display: block;
  width: 100%;
  min-height: 560px;
  background: var(--color-bg-alt);
  color: var(--color-text-dim);
  border: 0;
  padding: var(--space-md);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  resize: vertical;
}

.editor-shell__meta {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem var(--space-md);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface-2);
}

.editor-image-count {
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

.editor-source-toggle,
.editor-fullscreen-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-dim);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.editor-fullscreen-toggle {
  width: 28px;
  padding: 0;
}

.editor-source-toggle:hover,
.editor-fullscreen-toggle:hover,
.editor-source-toggle.is-active,
.editor-fullscreen-toggle.is-active {
  color: var(--accent-2);
  background: var(--accent-soft-bg);
}

.ql-toolbar.ql-snow button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.editor-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 500;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.editor-shell.is-fullscreen .editor-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.editor-shell.is-fullscreen .editor-body .ql-editor {
  flex: 1;
  min-height: 0;
}

.editor-shell.is-fullscreen .editor-source {
  flex: 1;
  min-height: 0;
}

@media (max-width: 640px) {
  .editor-body .ql-editor,
  .editor-source {
    min-height: 360px;
  }
}

/* ==========================================================================
   Scroll-reveal utility (paired with IntersectionObserver in main.js)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .product-top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .grid-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .problem-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .problem-item {
    padding-inline: 0;
  }

  .problem-item+.problem-item {
    border-left: 0;
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-lg);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .grid-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .gallery-item.is-wide {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  :root {
    --space-2xl: 4rem;
    --space-3xl: 5.5rem;
  }

  .nav-links,
  .header-actions .btn-ghost {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links.is-open {
    display: flex;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    /* Height comes from content (no bottom:0) so the panel is only ever as
       tall as its links require; capped + scrollable so it can never run
       past the bottom of the screen on a short viewport. */
    max-height: calc(100vh - var(--header-h));
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    background: rgba(8, 9, 11, 0.98);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--color-border-soft);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  /* The header shrinks by 14px once scrolled (.site-header.is-scrolled);
     without this, the open mobile panel would still start at the taller,
     un-scrolled offset and leave a gap under the header showing the page
     behind it -- i.e. it would only line up correctly at the very top of
     the page. */
  .site-header.is-scrolled .nav-links.is-open {
    top: calc(var(--header-h) - 14px);
  }

  .nav-links.is-open a {
    font-size: 1.15rem;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown::before {
    display: none;
  }

  .nav-dropdown__toggle {
    width: 100%;
    justify-content: space-between;
    font-size: 1.15rem;
  }

  /* Mobile Products panel: title + blurb share one row ("F2 - High-rise
     facade cleaning") instead of the desktop's stacked two-line card, so
     each product still only takes up a single line of the panel. */
  .nav-dropdown__item {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0;
  }

  .nav-dropdown__item-title {
    flex-shrink: 0;
  }

  .nav-dropdown__item-desc {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-dropdown__item-desc::before {
    content: " - ";
  }

  .nav-dropdown__menu {
    position: static;
    transform: none;
    z-index: auto;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0 0 0 0.75rem;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    /* No transition here on purpose: .nav-links.is-open now sizes itself to
       content (see above), so animating this max-height would force the
       whole panel to reflow every frame while it's also compositing a
       backdrop-filter blur -- that combination is what was rendering as a
       stuck/blank tint instead of the product names. Snapping instantly
       avoids the double-reflow entirely. */
  }

  .nav-dropdown__menu.is-open {
    /* Tall enough for two category groups (Solar, Facade), each a label +
       2 title-only items now that .nav-dropdown__item-desc is hidden above. */
    max-height: 280px;
  }

  /* The desktop rule (.nav-dropdown:hover .nav-dropdown__menu,
     .nav-dropdown:focus-within .nav-dropdown__menu, .nav-dropdown__menu.is-open)
     sets transform: translateX(-50%) translateY(0) and isn't gated by any
     media query, so on mobile it was still winning the cascade over the
     plain ".nav-dropdown__menu { transform: none }" reset above (higher
     specificity, and tapping the toggle button also triggers :focus-within).
     That shifted this statically-positioned mobile panel half its own width
     to the left, pushing every product link off the edge of the screen --
     repeating the exact same selector list here, later in the stylesheet,
     wins the tie on specificity and actually fixes it. */
  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu,
  .nav-dropdown__menu.is-open {
    transform: none;
  }

  .grid-features {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .grid-gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }

  .lightbox-prev,
  .lightbox-next {
    /* Kept visible on mobile as requested */
  }

  .grid-gallery .gallery-item:nth-child(n+4) {
    display: none;
  }
  .grid-gallery .gallery-item:nth-child(3) img {
    filter: blur(8px);
    opacity: 0.8;
    transform: scale(1.1);
  }
  .grid-gallery .gallery-item:nth-child(3) .gallery-overlay {
    display: none;
  }
  .gallery-mobile-more {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-weight: 600;
    font-size: 1.25rem;
    z-index: 10;
  }
}

/* Below this, the photo itself (viewport minus the fixed 160px of callout
   room on each side) gets narrow enough that the two bottom bubbles
   (--cx: 30%/68%, each 240px wide) start crowding each other. Bubbles drop
   into a plain list below the photo instead: always visible, no lines,
   no overlap risk. */
@media (max-width: 1400px) {

  .showcase-frame {
    padding-block: 0;
    padding-inline: 0;
  }

  .showcase-callouts {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .showcase-callout {
    opacity: 1 !important;
  }

  .showcase-callout__line-v, .showcase-callout__line-h, .showcase-callout__anchor { display: none; }

  .showcase-callout__bubble {
    position: static;
    width: auto;
    transform: none !important;
  }

  .showcase-callout__title {
    font-size: 1.3rem;
  }

  .showcase-callout__desc {
    font-size: 1.05rem;
  }

  #showcase-callout-5 {
    margin-top: var(--space-xl);
  }
}

/* Mobile + tablet only: callout-4's bubble is fixed at 300px on desktop (see
   the #showcase-callout-4 rule above) so its Romanian title wraps to 2 lines
   instead of 3 — but that fixed width fights the stacked-list layout below,
   making it visibly narrower/wider than the other 4 bubbles. Reset it to
   auto here so all 5 match. Also float the first two callouts above the
   photo instead of below it. */
@media (max-width: 980px) {
  #showcase-callout-4 .showcase-callout__bubble {
    width: auto;
  }

  .showcase-frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .showcase-visual {
    order: 2;
    margin-block: var(--space-sm);
  }

  .showcase-callouts {
    display: contents;
  }

  #showcase-callout-1,
  #showcase-callout-2 {
    order: 1;
  }

  #showcase-callout-3,
  #showcase-callout-4,
  #showcase-callout-5 {
    order: 3;
  }

  #showcase-callout-5 {
    margin-top: 0;
  }

  /* .showcase-frame sits outside .container (full-bleed photo), so its
     padding-inline is reset to 0 above — without this the stacked bubbles
     would run edge-to-edge with the screen. Give them the same inset as
     the rest of the site's content instead. */
  .showcase-callout__bubble {
    margin-inline: var(--space-md);
  }
}

@media (max-width: 520px) {
  .grid-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .gallery-item.is-wide {
    grid-column: span 1;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   Reduced motion — required: disable/soften all non-essential animation
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero [data-stage] {
    opacity: 1;
    transform: none;
  }

  .scroll-cue {
    animation: none !important;
    opacity: 1;
  }

  .showcase-visual {
    transform: none !important;
    filter: none !important;
  }

  .showcase-callout {
    opacity: 1 !important;
    --rise: 0px;
  }

  .showcase-head {
    transform: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-media img {
    transform: none;
  }
}
/* ==========================================================================
   Comparison Table
   ========================================================================== */

.compare-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  background: var(--color-surface);
}
.compare-table th,
.compare-table td {
  padding: 1rem var(--space-md);
  text-align: left;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--color-border-soft);
  width: 33.33%;
}
.compare-table th {
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface-2);
}
.compare-table td:first-child {
  font-weight: 500;
  color: var(--color-text-dim);
}
.compare-table td:nth-child(2),
.compare-table td:nth-child(3) {
  font-weight: 600;
}
.compare-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.compare-table th:nth-child(2),
.compare-table th:nth-child(3),
.compare-table td:nth-child(2),
.compare-table td:nth-child(3) {
  text-align: center;
}
.compare-table svg {
  display: inline-block;
  vertical-align: middle;
}

/* Mobile: both tables share .spec-table-wrap's overflow-x: auto, and each
   table itself has a min-width (560/600px) wider than a phone screen, which
   is what forces the horizontal swipe. table-layout: fixed makes the browser
   respect the column widths already set above (42% / 33.33% each) and wrap
   text into them instead of stretching the row to fit unbroken content —
   applies to every page's specs table since they all share this class. */
@media (max-width: 760px) {
  .spec-table,
  .compare-table {
    min-width: 0;
    table-layout: fixed;
  }

  .spec-table th,
  .spec-table td {
    padding: 0.7rem 0.6rem;
    font-size: 0.85rem;
  }

  .spec-table th[scope="row"] {
    white-space: normal;
  }

  .compare-table th,
  .compare-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 761px) {
  .gallery-mobile-more {
    display: none;
  }
}