/* ==========================================================================
   VisLumen — design tokens
   ========================================================================== */
:root {
  --bg-void: #0a1810;
  --bg-deep: #16261c;
  --bg-panel: #1c3524;
  --bg-panel-2: #234030;
  --gold-1: #f3d98a;
  --gold-2: #c99a3f;
  --gold-3: #8a662a;
  --gold-line: rgba(201, 154, 63, 0.32);
  --gold-line-strong: rgba(243, 217, 138, 0.55);
  --ink: #f4efe2;
  --ink-muted: #b9c9bb;
  --ink-faint: #93a895;
  --shadow-deep: 0 30px 60px -20px rgba(0, 0, 0, 0.6);

  --font-display: "Italiana", "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --measure: 62ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: min(1220px, 92vw);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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; }
}

body {
  margin: 0;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold-2); color: var(--bg-void); }

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

a { color: inherit; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-3), var(--gold-2)); border: 3px solid var(--bg-void); border-radius: 8px; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold-1);
  color: var(--bg-void);
  padding: 0.75rem 1.25rem;
  z-index: 999;
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   Whole-page scroll rail — the laser motif carried across the entire scroll
   ========================================================================== */
.scroll-rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(243, 217, 138, 0.08);
  z-index: 90;
}
.scroll-rail-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(var(--page-scroll, 0) * 1%);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  box-shadow: 0 0 10px rgba(243, 217, 138, 0.5);
}
.scroll-rail-bead {
  position: absolute;
  left: 50%;
  top: calc(var(--page-scroll, 0) * 1%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold-1);
  box-shadow: 0 0 14px 4px rgba(255, 90, 77, 0.55);
  transform: translate(-50%, -50%);
}
@media (max-width: 760px) {
  .scroll-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-rail-fill, .scroll-rail-bead { transition: none; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0;
}

p { margin: 0; color: var(--ink-muted); max-width: var(--measure); }

/* subtle marble texture used across panels */
.marble-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(243,217,138,0.06), transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(201,154,63,0.05), transparent 50%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(35deg, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 140px);
  pointer-events: none;
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero [data-reveal] {
  transition-delay: calc(var(--stagger, 0) * 90ms);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.35s;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #1b1204;
  box-shadow: 0 14px 30px -10px rgba(201, 154, 63, 0.45);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(201, 154, 63, 0.6); }
.btn-line {
  border: 1px solid var(--gold-line-strong);
  color: var(--ink);
  background: rgba(243, 217, 138, 0.04);
}
.btn-line:hover { background: rgba(243, 217, 138, 0.1); border-color: var(--gold-1); transform: translateY(-2px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(6, 15, 10, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, background 0.4s;
}
.site-header.is-scrolled {
  background: rgba(6, 15, 10, 0.86);
  border-bottom-color: var(--gold-line);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-mark { flex-shrink: 0; height: 40px; width: auto; filter: drop-shadow(0 0 6px rgba(201, 154, 63, 0.25)); }
.brand-word {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2) 60%, var(--gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-mark { animation: mark-twinkle 3.4s ease-in-out infinite; }
@keyframes mark-twinkle {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(201, 154, 63, 0.25)); }
  50% { filter: drop-shadow(0 0 12px rgba(243, 217, 138, 0.55)); }
}
.main-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav ul li { flex-shrink: 0; }
.main-nav ul a { white-space: nowrap; }
.main-nav a {
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--ink-muted);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.3s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--gold-1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { transform: scaleX(1); }

/* Catalog is a lead-gen CTA, not a content section like its nav siblings
   (2026-08-29 critique: 8 flat nav items read as one undifferentiated
   list). Marking it as a pill keeps it in the same markup/drawer position
   on all 9 pages while visually signalling "action" vs. "page section". */
/* Lives in .header-actions, not .main-nav — a lead-gen CTA is a persistent
   header action, not another item competing in the primary nav's working-
   memory budget (2026-08-30 critique: 8 nav items was one over). Visible at
   every viewport, unlike the rest of the nav which collapses into the
   mobile drawer. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--gold-1);
  border: 1px solid var(--gold-line-strong);
  border-radius: 20px;
  padding: 0.45rem 1rem;
  white-space: nowrap;
  transition: background 0.3s, border-color 0.3s;
}
.nav-cta:hover { background: rgba(243, 217, 138, 0.1); border-color: var(--gold-1); }
@media (max-width: 560px) {
  .nav-cta { padding: 0.45rem 0.8rem; font-size: 0.78rem; }
}

.nav-has-mega { position: relative; }
.nav-has-mega > a::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
  transition: transform 0.3s;
}
.nav-has-mega:hover > a::before { transform: rotate(225deg) translateY(1px); }
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  padding-top: 0.9rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s;
  z-index: 60;
}
.mega-menu-panel {
  padding: 1.1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--gold-line-strong);
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  transform: translateY(6px);
  transition: transform 0.3s var(--ease-out);
}
.nav-has-mega:hover .mega-menu,
.nav-has-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-has-mega:hover .mega-menu-panel,
.nav-has-mega:focus-within .mega-menu-panel {
  transform: translateY(0);
}
.mega-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background 0.25s;
}
.mega-item:hover { background: rgba(243, 217, 138, 0.06); }
.mega-item-media {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(155deg, #f2ead9, #ddd1b4);
}
.mega-item-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; mix-blend-mode: multiply; }
.mega-item span {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-muted);
  white-space: normal;
}
.mega-item:hover span { color: var(--ink); }
@media (max-width: 1180px) {
  .nav-has-mega > a::before { display: none; }
  .mega-menu { display: none; }
}

.header-actions { display: flex; align-items: center; gap: 1.25rem; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--gold-1);
  white-space: nowrap;
  /* Below 1180px this collapses to icon-only (15x15 raw SVG) — pad the tap
     target out to the WCAG 2.5.8 minimum without growing it visually, since
     it's the site's single highest-intent mobile control. 14px measured
     43x43 (1px under) in the 2026-08-30 audit; 15px clears 44x44 with room. */
  padding: 15px;
  margin: -15px;
}
.header-phone svg { flex-shrink: 0; }
@media (max-width: 420px) {
  /* 1.25rem gaps left the phone icon squeezed to 4px on a 375px screen */
  .header-actions { gap: 0.85rem; }
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  /* Icon box alone measured 38x31px against the 44x44 minimum (2026-08-29
     critique) — pad the tap target out like .header-phone above, without
     growing the icon or shifting neighboring header elements. */
  padding: 15px;
  margin: -7px;
  cursor: pointer;
}
.nav-toggle span { width: 22px; height: 1.5px; background: var(--gold-1); display: block; transition: transform 0.3s, opacity 0.3s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding: 7.5rem clamp(1.5rem, 4vw, 4rem) 3.5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(201, 154, 63, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-void) 70%);
}
/* Hero scroll-film scaffolding. The film (poster, then live scrub once armed)
   is the hero's primary visual at every breakpoint and in every mode — it is
   NOT gated behind .is-cinematic, so it's the first thing painted whether or
   not JS ever runs. Only the pin/scrub/chapter mechanics are gated behind
   .is-cinematic, added once a real hero-film source has loaded metadata —
   see script.js. A missing/404 video source still shows the poster image
   (the native <video poster> renders independently of playback support). */
.hero-track, .hero-stage { display: contents; }
.hero-film {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.86) brightness(0.9) contrast(1.05);
}
.hero-film-veil {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,12,8,0.92) 0%, rgba(6,12,8,0.72) 38%, rgba(6,12,8,0.24) 60%, transparent 74%),
    radial-gradient(ellipse 88% 82% at 50% 42%, transparent 18%, rgba(6,12,8,0.42) 62%, var(--bg-void) 100%),
    linear-gradient(180deg, rgba(6,12,8,0.6) 0%, transparent 22%, transparent 68%, var(--bg-void) 100%);
}
/* Below ~760px the hero copy column spans nearly the full width, so the
   desktop veil's left-heavy 90deg gradient leaves its later lines (past
   ~60% width) sitting on undarkened video — confirmed on a live mobile
   screenshot (2026-08-29 critique). This adds a full-width scrim under the
   text at narrow widths instead of retuning the desktop gradient. */
@media (max-width: 760px) {
  .hero-film-veil {
    background:
      linear-gradient(180deg, rgba(6,12,8,0.88) 0%, rgba(6,12,8,0.74) 55%, rgba(6,12,8,0.6) 100%),
      radial-gradient(ellipse 88% 82% at 50% 42%, transparent 12%, rgba(6,12,8,0.5) 62%, var(--bg-void) 100%);
  }
}
/* EM Face's source footage is shot on a bright white studio background
   (unlike every other device clip, which is dark to begin with) — the
   standard veil above is tuned to darken already-dark footage and left the
   white background barely dimmed, with hero text almost illegible over it
   (2026-08-29). Darkens substantially further so the device reads as a
   bright silhouette against the site's emerald-black ground instead of
   sitting on white. */
/* Homepage hero text is back (2026-09-02) — the veil stays to keep it
   legible against the bright device, but the dulling filter is dropped so
   the video's real color (green PCB, gold sparkle) still comes through
   clearly on the side away from the text. */
#acasa .hero-film { filter: none; }

#emface-hero .hero-film { filter: saturate(0.5) brightness(0.55) contrast(1.1); }
#emface-hero .hero-film-veil {
  background:
    linear-gradient(90deg, rgba(6,12,8,.95) 0%, rgba(6,12,8,.85) 42%, rgba(6,12,8,.6) 66%, rgba(6,12,8,.32) 100%),
    radial-gradient(ellipse 90% 85% at 50% 45%, transparent 8%, rgba(6,12,8,.4) 55%, rgba(6,12,8,.8) 100%);
}
@media (max-width: 760px) {
  #emface-hero .hero-film-veil {
    background:
      linear-gradient(180deg, rgba(6,12,8,.92) 0%, rgba(6,12,8,.82) 55%, rgba(6,12,8,.7) 100%),
      radial-gradient(ellipse 88% 82% at 50% 42%, transparent 6%, rgba(6,12,8,.6) 55%, var(--bg-void) 100%);
  }
}
/* EMS corporal's source footage is also shot on a bright light-blue studio
   background, but unlike EM Face the device fills nearly the whole frame at
   close range with little empty background around it. The standard veil's
   radial gradient reaching fully opaque var(--bg-void) by 100% blacks out
   the device itself instead of just dimming empty background (2026-08-30
   framing pass) — it read as a near-black hero with no visible product. Caps
   the radial and vertical darkening at a translucent tint instead of full
   opacity so the device stays visible through the veil. */
#ems-hero .hero-film { filter: saturate(0.7) brightness(0.78) contrast(1.08); }
#ems-hero .hero-film-veil {
  background:
    linear-gradient(90deg, rgba(6,12,8,0.94) 0%, rgba(6,12,8,0.8) 34%, rgba(6,12,8,0.4) 56%, rgba(6,12,8,0.1) 72%, transparent 86%),
    radial-gradient(ellipse 95% 90% at 55% 46%, transparent 28%, rgba(6,12,8,0.22) 68%, rgba(6,12,8,0.58) 100%),
    linear-gradient(180deg, rgba(6,12,8,0.55) 0%, transparent 24%, transparent 70%, rgba(6,12,8,0.5) 100%);
}
@media (max-width: 760px) {
  #ems-hero .hero-film-veil {
    background:
      linear-gradient(180deg, rgba(6,12,8,0.86) 0%, rgba(6,12,8,0.62) 55%, rgba(6,12,8,0.55) 100%),
      radial-gradient(ellipse 88% 82% at 50% 42%, transparent 22%, rgba(6,12,8,0.3) 62%, rgba(6,12,8,0.55) 100%);
  }
}
/* Fades in only near the end of the cinematic track (set inline by
   script.js) so the hand-off into the next section is a deliberate darken
   rather than a hard cut the instant the pin releases. */
.hero-film-outro {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bg-void);
  opacity: 0;
}
.hero-chapters {
  position: static;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 620px;
  margin-top: 1.8rem;
}
.hero-chapter {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.hero-chapter-kicker {
  flex: 0 0 auto;
  min-width: 9.5ch;
  font-family: var(--font-display);
  color: var(--gold-1);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.hero.is-cinematic { display: block; min-height: 0; padding: 0; overflow: visible; }
.hero.is-cinematic .hero-track { display: block; position: relative; height: 185vh; }
.hero.is-cinematic .hero-stage {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding: 7.5rem clamp(1.5rem, 4vw, 4rem) 3.5rem;
}
/* Text opacity (.hero-content / .trust-strip) and the outro darken
   (.hero-film-veil's extra opacity near track end) are set directly as
   inline styles every frame in script.js, scrubbed from the same eased
   scroll progress that drives the video's currentTime — not a fixed-duration
   CSS transition — so both feel tied to the scroll gesture instead of
   firing as a quick flash. */
.hero.is-cinematic.is-film-in .hero-content { pointer-events: none; }
.hero.is-cinematic .hero-chapters {
  position: absolute;
  left: clamp(3rem, 12vw, 9rem);
  right: 6%;
  top: 54%;
  bottom: auto;
  padding: 0;
  margin: 0;
  display: block;
}
.hero.is-cinematic .hero-chapter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 460px;
  opacity: 0;
}
/* The video content behind this slot isn't always dark here — this clip's
   own screen close-up runs bright/busy right where the caption sits, and a
   text-shadow alone (the original treatment) disappeared into it on mobile
   (2026-08-30, client-reported: "arata groaznic, nu se vede nimic"). A
   scrim panel makes the caption legible regardless of what's playing
   behind it, not just tuned for one clip. */
.hero.is-cinematic .hero-chapter-inner {
  background: rgba(6, 15, 10, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  padding: 1.1rem 1.4rem;
}
.hero.is-cinematic .hero-chapter .hero-chapter-kicker {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--gold-line-strong);
}
.hero.is-cinematic .hero-chapter .hero-chapter-text {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 42ch;
}
@media (max-width: 760px) {
  .hero.is-cinematic .hero-track { height: 145vh; }
}

.main-nav a.is-chapter-active { color: var(--ink); }
.main-nav a.is-chapter-active::after { transform: scaleX(1); }


.hero-content { position: relative; z-index: 1; max-width: 760px; }
.hero-tagline {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--gold-1);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin-bottom: 1.4rem;
  text-shadow: -1.5px -1.5px 0 rgba(0,0,0,0.85), 1.5px -1.5px 0 rgba(0,0,0,0.85), -1.5px 1.5px 0 rgba(0,0,0,0.85), 1.5px 1.5px 0 rgba(0,0,0,0.85), 0 2px 20px rgba(0, 0, 0, 0.55);
}
.hero-title {
  font-size: clamp(2.2rem, 4.4vw, 3.7rem);
  line-height: 1.08;
  max-width: 15ch;
  margin-bottom: 1.3rem;
  text-wrap: balance;
  text-shadow: -2px -2px 0 rgba(0,0,0,0.85), 2px -2px 0 rgba(0,0,0,0.85), -2px 2px 0 rgba(0,0,0,0.85), 2px 2px 0 rgba(0,0,0,0.85), 0 3px 28px rgba(0, 0, 0, 0.6);
}
.hero-sub {
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 54ch;
  margin-bottom: 1.9rem;
  text-shadow: -1.5px -1.5px 0 rgba(0,0,0,0.85), 1.5px -1.5px 0 rgba(0,0,0,0.85), -1.5px 1.5px 0 rgba(0,0,0,0.85), 1.5px 1.5px 0 rgba(0,0,0,0.85), 0 2px 18px rgba(0, 0, 0, 0.6);
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.trust-strip {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 1.6rem;
  margin: 2.2rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--gold-line);
  max-width: 980px;
}
.trust-strip li {
  padding: 0 1.6rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-muted);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
  border-right: 1px solid var(--gold-line);
}
.trust-strip li:last-child { border-right: none; }
@media (max-width: 860px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-strip li { padding: 0 1.6rem 1rem 0; border-bottom: 1px solid var(--gold-line); }
  .trust-strip li:nth-child(2n) { border-right: none; }
  .trust-strip li:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}
.trust-strip strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-1); font-weight: 400; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65); }

.scroll-cue {
  position: fixed;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1px solid var(--gold-line-strong);
  border-radius: 12px;
  z-index: 5;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.scroll-cue.is-hidden { opacity: 0; }
.hero.is-cinematic .scroll-cue {
  left: auto;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: 2.4rem;
  transform: none;
}
.scroll-cue span {
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 8px;
  background: var(--gold-1);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue {
  0% { top: 6px; opacity: 1; }
  70% { top: 18px; opacity: 0; }
  100% { top: 18px; opacity: 0; }
}

/* ==========================================================================
   Section shell
   ========================================================================== */
section { position: relative; padding: 7rem clamp(1.5rem, 4vw, 4rem); }
.section-head { max-width: 760px; margin-bottom: 3.5rem; }
.section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.2; margin-bottom: 1rem; }
.section-head p { font-size: 1.02rem; }

/* drawn gold rule under revealed section headings — a consistent thread across the page */
.section-head h2::after,
.about-copy h2::after {
  content: "";
  display: block;
  margin-top: 1.1rem;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out) 0.15s;
}
.section-head.is-visible h2::after,
.about-copy.is-visible h2::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .section-head h2::after, .about-copy h2::after { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   Lasers (flagship trio)
   ========================================================================== */
.lasers { background: var(--bg-void); padding-top: 3.5rem; }
.laser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 1100px) {
  .laser-grid { grid-template-columns: repeat(4, 1fr); }
  .laser-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .laser-card { padding: 1.5rem; gap: 1.1rem; }
  .laser-card h3 { font-size: 1.3rem; }
}
@media (max-width: 720px) { .laser-grid { grid-template-columns: 1fr; } }

.laser-card {
  background: linear-gradient(155deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}
.laser-card:hover { border-color: var(--gold-line-strong); transform: translateY(-4px); }
.laser-card--elite {
  border-color: var(--gold-line-strong);
  background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel) 60%);
}
.laser-tag {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1b1204;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  z-index: 1;
}
.laser-tag--tier {
  color: var(--gold-1);
  background: rgba(10, 24, 16, 0.82);
  border: 1px solid var(--gold-line-strong);
  backdrop-filter: blur(2px);
}
/* Cards with no .laser-card-media (e.g. treatment-mode cards) have nothing
   pushing the body below the absolutely-positioned .laser-tag — the tag sits
   directly over the heading's top-right corner and clips it when the
   heading wraps to 2 lines. Cards WITH media are unaffected since the media
   block already occupies that space in normal flow. */
.laser-tag + .laser-card-body { margin-top: 2.4rem; }
.laser-card-media { width: 100%; }
.photo-plate {
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(155deg, #f2ead9, #ddd1b4);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
}
.photo-plate img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; }
.laser-card-media img[src*="laser-elite"] { object-position: center 30%; }
.laser-card-media img[src*="k27-hero"] { object-position: center 15%; }
.laser-card-media img[src*="kc30-hero"] { object-position: center 15%; }
.laser-card-media img[src*="laser-glide-full"] { object-position: center 43%; }
.laser-card-body { display: flex; flex-direction: column; flex: 1; }
.laser-card h3 { font-size: 1.6rem; margin-bottom: 0.7rem; }
.laser-card h3 a { color: inherit; text-decoration: none; }
.laser-card h3 a:hover { color: var(--gold-1); }
.laser-card-body .manifest-link {
  margin-top: 1.1rem;
  align-self: flex-start;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
/* Cards with no spec-list (just heading + description + link) vary in
   description line-count, so the link lands at a different height card to
   card in the same row — pin it to the card's bottom edge instead so every
   "Detalii" link sits on one shared baseline (2026-08-30). Scoped to the
   direct laser-desc + manifest-link pairing so family cards, whose link
   follows an already-bottom-pinned .spec-list--compact, are untouched. */
.laser-card-body > .laser-desc + .manifest-link { margin-top: auto; }
.laser-desc { font-size: 0.94rem; margin-bottom: 1.2rem; }
.laser-desc a { color: var(--gold-1); text-decoration: underline; text-underline-offset: 3px; }

.spec-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1.5rem;
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gold-line);
}
.spec-list--compact { grid-template-columns: repeat(2, 1fr); }
.laser-card-body .spec-list--compact { margin-top: auto; }
.spec-list dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 0.2rem; }
.spec-list dd { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--ink); }

/* ==========================================================================
   About
   ========================================================================== */
.about { background: var(--bg-deep); }
.about-copy { max-width: 680px; }
.about-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.25; margin-bottom: 1.3rem; max-width: 18ch; }
.about-copy > p:first-of-type { font-size: 1.02rem; margin-bottom: 2.2rem; }
.about-people { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; margin-bottom: 2.2rem; }
@media (max-width: 640px) { .about-people { grid-template-columns: 1fr; } }
.person {
  position: relative;
  padding-left: 1.3rem;
  transition: transform 0.4s var(--ease-out);
}
.person::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--gold-line-strong);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.7s var(--ease-out);
  transition-delay: calc(var(--row-stagger, 0) * 140ms + 0.2s);
}
.person.is-visible::before { transform: scaleY(1); }
.person:hover { transform: translateX(4px); }
.person-role { display: block; font-family: var(--font-display); color: var(--gold-1); font-size: 1.15rem; margin-bottom: 0.4rem; }
.person p { font-size: 0.94rem; }
@media (prefers-reduced-motion: reduce) {
  .person::before { transition: none; transform: scaleY(1); }
}
.about-note { font-style: normal; color: var(--ink); font-size: 1rem; border-top: 1px solid var(--gold-line); padding-top: 1.4rem; }

/* ==========================================================================
   Business
   ========================================================================== */
.business { background: var(--bg-void); }
.business-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 3rem;
  max-width: 1180px;
  border-top: 1px solid var(--gold-line);
}
.business-row {
  padding: 2rem 0;
  border-bottom: 1px solid var(--gold-line);
}
.business-row:not(:last-child) { border-right: 1px solid var(--gold-line); padding-right: 3rem; }
.business-row h3 { font-size: 1.3rem; margin-bottom: 0.8rem; }
@media (max-width: 860px) {
  .business-rows { grid-template-columns: 1fr; }
  .business-row:not(:last-child) { border-right: none; padding-right: 0; }
}
.business-row p { font-size: 0.94rem; }

/* ==========================================================================
   Device manifest
   ========================================================================== */
.devices { background: var(--bg-deep); }
.devices--medical { background: var(--bg-void); }
.manifest { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gold-line); }
.manifest-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 1.75rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gold-line);
  transition: background 0.35s;
}
.manifest-item[data-reveal] {
  transition-delay: calc(var(--row-stagger, 0) * 90ms);
}
.manifest-item:hover { background: rgba(243, 217, 138, 0.03); }
.manifest-photo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(155deg, #f2ead9, #ddd1b4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.manifest-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; mix-blend-mode: multiply; }
.manifest-photo img[src*="ndyag"] { object-position: 30% center; }
.manifest-photo img[src*="co2-microneedle-handle"] { object-position: center; }
.manifest-photo img[src*="laser-pro-application"] { object-position: center 60%; }
.manifest-photo img[src*="sphere-application"] { object-position: 35% 45%; }
.manifest-text h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.manifest-text h3 a { color: inherit; text-decoration: none; }
.manifest-text h3 a:hover { color: var(--gold-1); }
.manifest-text p { font-size: 0.92rem; margin: 0; }
.manifest-spec, .manifest-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-1);
  white-space: nowrap;
  text-align: right;
}
.manifest-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-line-strong);
  transition: text-decoration-color 0.25s;
}
.manifest-link:hover { text-decoration-color: var(--gold-1); }
.manifest-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
@media (max-width: 720px) {
  .manifest-item { grid-template-columns: 48px 1fr; }
  .manifest-photo { width: 48px; height: 48px; }
  .manifest-spec, .manifest-link, .manifest-meta { grid-column: 2; text-align: left; margin-top: 0.4rem; align-items: flex-start; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--bg-deep); }
.faq-list { max-width: 820px; border-top: 1px solid var(--gold-line); }
.faq-item { border-bottom: 1px solid var(--gold-line); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  background: none;
  border: none;
  padding: 1.5rem 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
}
.faq-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--gold-1);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-out), opacity 0.35s;
}
.faq-icon::before { width: 14px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 14px; }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.faq-answer > p {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  padding-bottom: 1.5rem;
  font-size: 0.96rem;
  max-width: 70ch;
  transition: visibility 0.45s;
}
.faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }
.faq-question[aria-expanded="true"] + .faq-answer > p { visibility: visible; }

/* ==========================================================================
   Catalog
   ========================================================================== */
.catalog { background: var(--bg-void); }
.catalog-inner {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--gold-line-strong);
  background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel) 55%, var(--bg-void));
  padding: 4.5rem clamp(1.75rem, 5vw, 5rem);
}
.catalog-veil { opacity: 0.7; }
.catalog-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(243, 217, 138, 0.16) 48%, rgba(255, 246, 217, 0.3) 50%, rgba(243, 217, 138, 0.16) 52%, transparent 62%);
  transform: translateX(-140%);
  pointer-events: none;
}
.catalog-inner.is-visible::after {
  animation: catalog-sweep 1.7s var(--ease-out) 0.25s 1 both;
}
@keyframes catalog-sweep {
  from { transform: translateX(-140%); }
  to { transform: translateX(140%); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-inner.is-visible::after { animation: none; display: none; }
}
.catalog-content { position: relative; z-index: 1; max-width: 720px; }
.catalog-content h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1.1rem; }
.catalog-content p { font-size: 1.02rem; margin-bottom: 2rem; }
.catalog-categories { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 2.4rem; }
.catalog-categories span {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border: 1px solid var(--gold-line-strong);
  border-radius: 20px;
  color: var(--gold-1);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { background: var(--bg-deep); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  padding: 2rem;
  transition: border-color 0.35s, transform 0.35s var(--ease-out);
}
.contact-card:hover { border-color: var(--gold-line-strong); transform: translateY(-3px); }
.contact-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.9rem; }
.contact-value { font-family: var(--font-display); font-size: 1.4rem; text-decoration: none; color: var(--ink); }
a.contact-value:hover { color: var(--gold-1); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--bg-void); border-top: 1px solid var(--gold-line); padding: 3.5rem clamp(1.5rem, 4vw, 4rem) 0; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-mark { height: 56px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.85rem; }
.footer-legal-note { color: var(--ink-faint); font-size: 0.78rem; margin-top: 0.4rem; }
.footer-legal { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.legal-badge {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  border: 1px solid var(--gold-line);
  border-radius: 3px;
  padding: 0.85rem 1.1rem;
  min-width: 180px;
  transition: border-color 0.3s;
}
.legal-badge:hover { border-color: var(--gold-line-strong); }
.legal-badge-title { font-size: 0.72rem; color: var(--ink-muted); line-height: 1.35; }
.legal-badge-cta { font-size: 0.72rem; font-weight: 700; color: var(--gold-1); letter-spacing: 0.04em; }
.footer-bottom { border-top: 1px solid var(--gold-line); padding: 1.4rem 0; text-align: center; }
.footer-bottom p { margin: 0 auto; font-size: 0.78rem; color: var(--ink-faint); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; margin-bottom: 0.9rem; }
.footer-links a { font-size: 0.78rem; color: var(--ink-faint); text-decoration: none; }
.footer-links a:hover { color: var(--gold-1); }

/* ==========================================================================
   Pagini legale (termeni, confidențialitate, cookie-uri, retur, garanție, finanțare)
   ========================================================================== */
.legal-content {
  max-width: 760px;
  padding-top: 9rem;
}
.legal-content h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 0.6rem; }
.legal-content .legal-updated { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 3rem; }
.legal-content h2 { font-size: 1.3rem; margin: 2.6rem 0 1rem; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { font-size: 0.96rem; line-height: 1.7; margin-bottom: 1.1rem; }
.legal-content ul { margin: 0 0 1.1rem; padding-left: 1.3rem; color: var(--ink-muted); }
.legal-content li { font-size: 0.96rem; line-height: 1.7; margin-bottom: 0.5rem; }
.legal-content a { color: var(--gold-1); text-decoration: underline; text-underline-offset: 3px; }
.legal-content strong { color: var(--ink); }
.legal-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.legal-content th, .legal-content td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--gold-line); font-size: 0.9rem; }
.legal-content th { color: var(--ink-faint); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; }

/* ==========================================================================
   Responsive nav
   ========================================================================== */
@media (max-width: 1180px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    height: 100vh;
    background: rgba(8, 20, 14, 0.98);
    border-left: 1px solid var(--gold-line);
    padding: 6.5rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease-out);
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 1.6rem; }
  .main-nav a { font-size: 1.05rem; }
  .header-phone span { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 760px) {
  .scroll-cue { display: none; }
}

@media (max-width: 560px) {
  section { padding: 3.5rem 1.25rem; }
  .hero { padding-top: 7.5rem; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip li { border-right: none; border-bottom: 1px solid var(--gold-line); padding: 0 0 1rem; }
  .trust-strip li:last-child { border-bottom: none; padding-bottom: 0; }

  .laser-card { padding: 1.25rem; gap: 1rem; }
  .photo-plate { aspect-ratio: 16 / 8; }
  .laser-card h3 { font-size: 1.35rem; }
  .laser-desc { font-size: 0.9rem; margin-bottom: 0.9rem; }

  .contact-card { padding: 1.25rem; }
  .catalog-inner { padding: 2.5rem 1.5rem; }
}

/* ==========================================================================
   Device detail pages (hifu.html and future per-device pages)
   ========================================================================== */
.device-hero {
  position: relative;
  padding: 9.5rem clamp(1.5rem, 4vw, 4rem) 4rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(201, 154, 63, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-void) 70%);
}
.device-back {
  display: inline-block;
  color: var(--ink-faint);
  font-size: 0.86rem;
  text-decoration: none;
  margin-bottom: 2rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  transition: color 0.3s;
}
.device-back:hover { color: var(--gold-1); }
.device-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.device-hero-media { aspect-ratio: 4 / 5; }
/* .photo-plate's default object-fit:cover crops into these floor-standing
   units at a tight 4:5 ratio (screen/base cut off) — contain keeps the
   whole device visible, same fix already applied to .device-split-media. */
.device-hero-media.photo-plate img { object-fit: contain; }
.device-hero-copy h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}
@media (max-width: 860px) {
  .device-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  /* product shots are 4:5 portraits — a wide box shrank the device to a sliver */
  .device-hero-media { aspect-ratio: 4 / 5; width: 100%; max-width: 440px; margin-inline: auto; }
}

.device-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: 1180px;
}
.device-split-media {
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(155deg, #f2ead9, #ddd1b4);
  aspect-ratio: 4 / 5;
  position: sticky;
  top: 6.5rem;
  margin: 0;
}
/* contain, not cover: these are tall floor-standing units shot at varying
   crops, and this box's fixed 4:5 aspect doesn't match any of them — cover
   was cropping into screens/bases on the taller ones. contain guarantees the
   full device always shows; source images are cropped tight to the device
   itself (2026-08-30) so the letterboxing this introduces stays minimal. */
.device-split-media img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 900px) {
  .device-split { grid-template-columns: minmax(0, 1fr); }
  .device-split-media { position: static; aspect-ratio: 4 / 5; width: 100%; max-width: 440px; margin-inline: auto; order: -1; }
}
/* Stand-in for .device-split-media on pages without a second product photo
   for this section — a few oversized stat callouts instead of an image. */
.device-callout {
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 6.5rem;
  background: linear-gradient(155deg, var(--bg-panel), var(--bg-panel-2));
}
.device-callout div + div { border-top: 1px solid var(--gold-line); padding-top: 1.5rem; }
.device-callout strong { display: block; font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; color: var(--gold-1); line-height: 1.1; margin-bottom: 0.4rem; }
.device-callout span { font-size: 0.86rem; color: var(--ink-muted); }
@media (max-width: 900px) { .device-callout { position: static; flex-direction: row; flex-wrap: wrap; } .device-callout div { flex: 1 1 45%; } .device-callout div + div { border-top: none; padding-top: 0; } }
.device-theory {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.device-full-specs {
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
  border-top: 1px solid var(--gold-line);
  padding-top: 1.4rem;
}
@media (max-width: 640px) { .device-full-specs { grid-template-columns: repeat(2, 1fr); } }

.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.results-item {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: var(--bg-panel);
}
.results-item { aspect-ratio: 4 / 3; }
.results-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.results-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .results-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .results-grid { grid-template-columns: 1fr; } }

/* Before/after comparison photos: no forced crop, image keeps its own ratio */
.results-grid--stack { grid-template-columns: 1fr; gap: 1rem; max-width: 900px; }
.results-grid--stack .results-item { aspect-ratio: auto; }
.results-grid--stack .results-item img { height: auto; object-fit: contain; }

.contra-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: 0.9rem;
}
.contra-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.96rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.contra-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-2);
}

/* ==========================================================================
   ROI calculator (afacerea-ta)
   ========================================================================== */
.roi-calc {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  border-top: 1px solid var(--gold-line);
  padding-top: 3.5rem;
}
@media (max-width: 900px) { .roi-calc { grid-template-columns: minmax(0, 1fr); } }
.roi-calc > * { min-width: 0; }

.roi-controls h2, .roi-controls h3 { font-size: 1.3rem; margin-bottom: 0.5rem; font-weight: 400; }
.roi-controls > p { font-size: 0.94rem; margin-bottom: 2rem; }

.roi-field { margin-bottom: 1.6rem; }
.roi-field-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.roi-field label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.roi-field output { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-1); }

.roi-field select {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--gold-line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border-radius: 3px;
}

input[type="range"].roi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--gold-line);
  border-radius: 2px;
  outline: none;
}
input[type="range"].roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  box-shadow: 0 4px 14px -4px rgba(201, 154, 63, 0.7);
  cursor: pointer;
  border: 2px solid var(--bg-void);
}
input[type="range"].roi-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  box-shadow: 0 4px 14px -4px rgba(201, 154, 63, 0.7);
  cursor: pointer;
  border: 2px solid var(--bg-void);
}

.roi-result {
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  padding: 1.75rem;
  background: linear-gradient(155deg, var(--bg-panel), var(--bg-panel-2));
  position: sticky;
  top: 6.5rem;
}
.roi-result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--gold-line); }
.roi-result-row:last-of-type { border-bottom: none; }
.roi-result-row span:first-child { font-size: 0.86rem; color: var(--ink-muted); }
.roi-result-row strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-1); font-weight: 400; }
.roi-chart-wrap { margin-top: 1.4rem; height: 140px; }
@media (max-width: 900px) { .roi-result { position: static; } }

/* ==========================================================================
   Comparație aparate
   ========================================================================== */
.compare-toggle {
  position: absolute;
  top: 1.4rem; left: 1.4rem;
  z-index: 2;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 24, 16, 0.82);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s;
}
.compare-toggle:hover { border-color: var(--gold-line-strong); }
.compare-toggle input { accent-color: var(--gold-1); width: 14px; height: 14px; margin: 0; }
.compare-toggle-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.laser-card.is-comparing { border-color: var(--gold-line-strong); }

.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 140%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(10, 24, 16, 0.96);
  border: 1px solid var(--gold-line-strong);
  border-radius: 40px;
  padding: 0.7rem 0.9rem 0.7rem 1.4rem;
  box-shadow: var(--shadow-deep);
  transition: transform 0.4s var(--ease-out);
}
.compare-bar.is-visible { transform: translate(-50%, 0); }
.compare-bar span { font-size: 0.88rem; color: var(--ink-muted); }
.compare-bar span strong { color: var(--gold-1); }

.compare-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 14, 9, 0.88);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.compare-modal.is-open { opacity: 1; pointer-events: auto; }
.compare-modal-panel {
  background: linear-gradient(155deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--gold-line-strong);
  border-radius: 4px;
  max-width: 920px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  position: relative;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.35s var(--ease-out);
}
.compare-modal.is-open .compare-modal-panel { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .compare-modal-panel { transition: none; transform: none; }
}
.compare-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}
.compare-modal-panel h3 { font-size: 1.6rem; margin-bottom: 1.6rem; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--gold-line); font-size: 0.9rem; }
.compare-table th { color: var(--ink-faint); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; font-weight: 700; }
.compare-table td:first-child, .compare-table th:first-child { color: var(--ink-muted); }
.compare-table td { color: var(--ink); font-weight: 600; }
.compare-table tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Filtre catalog (secțiuni aparatură)
   ========================================================================== */
.device-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 2.2rem;
}
.device-filter {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--gold-line);
  border-radius: 20px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.device-filter:hover { border-color: var(--gold-line-strong); color: var(--ink); }
.device-filter.is-active {
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #1b1204;
  border-color: transparent;
}
.laser-card.is-filtering-out { opacity: 0; transform: scale(0.94); pointer-events: none; }
.laser-card.is-filtered-out { display: none; }
@media (prefers-reduced-motion: reduce) {
  .laser-card.is-filtering-out { transition: none; }
}

/* ==========================================================================
   Formular de contact
   ========================================================================== */
.contact-form {
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: linear-gradient(155deg, var(--bg-panel), var(--bg-panel-2));
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.3rem;
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.form-field { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.form-field label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg-void);
  border: 1px solid var(--gold-line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border-radius: 3px;
  transition: border-color 0.3s;
  width: 100%;
  min-width: 0;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--gold-1); }
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field.has-error input, .form-field.has-error textarea { border-color: #d16a5a; }
.form-error { font-size: 0.76rem; color: #e08a7c; min-height: 1em; }
.form-submit-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.form-status { font-size: 0.86rem; color: var(--gold-1); }

/* ==========================================================================
   Beam cursor accent (hero)
   ========================================================================== */

/* ---------- Catalog 2026 alignment ---------- */
.mega-menu--wide { width: 780px; }
.mega-menu--wide .mega-menu-panel { grid-template-columns: repeat(4, 1fr); }
.mega-menu--wide .mega-item-media { aspect-ratio: 16 / 10; }
.mega-menu--wide .mega-item-media img { mix-blend-mode: multiply; object-fit: contain; }
.laser-grid--more { margin-top: 1.4rem; }
.anchor-alias { display: block; position: relative; top: -90px; visibility: hidden; }
.spec-note { font-size: 0.78rem; line-height: 1.5; color: var(--ink-faint); margin-top: 0.9rem; }
.spec-note--medical { color: var(--gold-2); font-weight: 600; }
.photo-plate img[src*="/vl/"] { object-fit: contain; }
@media (max-width: 900px) {
  .mega-menu--wide { width: auto; }
  .mega-menu--wide .mega-menu-panel { grid-template-columns: repeat(2, 1fr); }
}
/* header: keep the wordmark clear of the nav on mid-size desktops */
.brand { flex-shrink: 0; }
@media (max-width: 1480px) and (min-width: 1181px) {
  .main-nav ul { gap: 1.05rem; }
  .main-nav a { font-size: 0.8rem; }
  .header-phone span { display: none; }
}