:root {
  --bg: #F5F0E8;
  --surface: #FFFFFF;
  --surface2: #EDE7DC;
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.18);
  --text: #1C1612;
  --muted: #7A726A;
  --muted2: #B8B0A8;
  /* ── PALETA DE BRAND ──
     Site-ul (Galateanu) folosește teal; fiecare sub-brand are propria culoare,
     derivată din logo-ul lui: eCubaj = verde-frunză, Cerdac = violet,
     Dar din Dar = verde-jad (logo-ul cu bule verzi). Galdepo (logo negru)
     preia teal-ul site-ului. Fiecare culoare are și tripletul RGB pentru rgba(). */
  --accent: #0F766E;   /* teal pădure — accentul site-ului (fost maro) */
  --accent-rgb: 15, 118, 110;
  --accent-bright: #45C4B4;        /* varianta luminoasă, pentru fundaluri închise */
  --accent-bright-rgb: 69, 196, 180;
  --galdepo: #0F766E;
  --galdepo-rgb: 15, 118, 110;
  --ecubaj: #47821E;               /* verde-frunză, din logo-ul eCubaj */
  --ecubaj-rgb: 71, 130, 30;
  --cerdac: #7C3AED;
  --cerdac-rgb: 124, 58, 237;
  --cerdac-deep: #6D28D9;          /* nuanța închisă, pentru hover */
  --ddd: #23814E;                  /* verde-jad, din logo-ul Dar din Dar */
  --ddd-rgb: 35, 129, 78;
  --radius: 20px;
  --radius-sm: 12px;
}

/* ── TEME PER PAGINĂ — fiecare subpagină își recolorează accentul comun
   (em-urile din titluri, chip-uri, borduri etc.) cu propria culoare de brand.
   Clasa stă pe <body>; pagina principală rămâne pe teal-ul site-ului. */
.theme-galdepo { --accent: var(--galdepo); --accent-rgb: var(--galdepo-rgb); }
.theme-ecubaj  { --accent: var(--ecubaj);  --accent-rgb: var(--ecubaj-rgb); }
.theme-cerdac  { --accent: var(--cerdac);  --accent-rgb: var(--cerdac-rgb); }
.theme-ddd     { --accent: var(--ddd);     --accent-rgb: var(--ddd-rgb); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* pe touch, dublu-tap-ul rapid pe elemente interactive nu mai face zoom
   (ex. butonul + de la bucăți în calculatorul de ofertă); pinch-zoom-ul
   paginii rămâne activ peste tot */
button, a, input, label { touch-action: manipulation; }

/* Visually hidden, still read by search engines and screen readers.
   Used for keyword-rich <h1> headings on pages whose visual title is a logo image. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── GLOBAL ZOOM — reproduce the look of 125% browser zoom on tablet/desktop.
   Scales everything (type, images, spacing, nav) uniformly, exactly like
   Ctrl+scroll. Left off on phones (≤600px), where 1.25× would shrink the
   effective viewport to ~300px and the layout is already tuned small. */
@media (min-width: 601px) {
  html { zoom: 1.25; }
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── NOISE OVERLAY ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
}

/* ── BRAND WORDMARK — sits above the first content block, aligned to grid ── */
/* The row carries the grid alignment; the wordmark + optional rotating role
   tagline (home only) sit side by side, filling the band beside the logo. */
.brand-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 4px;
}
.site-brand {
  display: inline-flex;
  flex-shrink: 0;
  text-decoration: none;
}
.site-brand img {
  height: 84px; width: auto; display: inline-block;
  transition: transform 0.2s, opacity 0.2s;
}
.site-brand:hover img { transform: translateY(-1px); opacity: 0.85; }

/* nav.js injects .brand-row only after first paint, so without a placeholder the
   whole page jumps down when it lands (CLS). Reserve its band up front; nav.js
   adds .has-brand in the same layout pass as the insertion, so the swap is
   shift-free. Heights track .site-brand img (+4px bottom padding) per breakpoint. */
main.page::before { content: ""; display: block; height: 88px; }
main.page.has-brand::before { content: none; }

/* ── BRAND STATEMENT — an editorial lockup beside the wordmark (home only).
   A vertical rule anchors a two-line block: a static role eyebrow above a
   bold headline that rolls cleanly through the brand's statements. Sized and
   vertically centered to balance the 84px wordmark — no boxes, no clutter. */
.brand-statement {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  min-width: 0;
}
.brand-statement-rule {
  flex: none;
  width: 2px;
  height: 60px;
  border-radius: 2px;
  background: linear-gradient(to bottom,
    transparent, var(--muted2) 20%, var(--muted2) 80%, transparent);
}
.brand-statement-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.brand-eyebrow {
  font-size: clamp(10.5px, 0.82vw, 13px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* the rotating headline rolls inside a clean slot clipped to exactly one line */
.brand-roll {
  display: block;
  height: 1.4em;
  overflow: hidden;
  font-size: clamp(20px, 2.1vw, 31px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--text);
}
.brand-roll-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  /* gentle mechanical overshoot, then settle */
  transition: transform 0.6s cubic-bezier(0.22, 1.18, 0.30, 1);
}
.brand-roll-line {
  display: block;
  height: 1.4em;       /* must match .brand-roll height + STEP in nav.js */
  line-height: 1.4em;
  white-space: nowrap;
}
.brand-roll-line em { font-style: normal; color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .brand-roll-track { transition: none; }
}

/* ── BRAND SIGNATURE — handwritten 'Andrei' pinned to the far-right of the
   header band, balancing the wordmark. Draws itself in left→right on load. */
.brand-sign {
  flex: none;
  margin-left: auto;                      /* float toward the right of the band */
  margin-right: clamp(32px, 4vw, 84px);   /* …with breathing room off the edge */
  display: flex;
  align-items: center;
  padding-left: clamp(16px, 2vw, 32px);
}
.brand-sign-name {
  font-family: 'Caveat', cursive;
  font-size: clamp(42px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 0.9;
  padding-right: 0.14em;          /* room for Caveat's slanted overhang */
  color: var(--text);
  transform: rotate(-4deg);
  transform-origin: left center;
  /* writing reveal — clip extends past the box so the overhang isn't cut.
     Loops: write in, hold, wipe out, repeat (clip stays open past the glyphs). */
  clip-path: inset(-0.4em 100% -0.4em -0.2em);
  animation: sign-loop 11s 0.45s linear infinite;
}
@keyframes sign-loop {
  0%   { clip-path: inset(-0.4em 100% -0.4em -0.2em); opacity: 1; animation-timing-function: cubic-bezier(0.62, 0, 0.36, 1); }
  13%  { clip-path: inset(-0.4em -0.35em -0.4em -0.2em); opacity: 1; }   /* written in (~1.4s) */
  86%  { clip-path: inset(-0.4em -0.35em -0.4em -0.2em); opacity: 1; }   /* hold */
  100% { clip-path: inset(-0.4em -0.35em -0.4em -0.2em); opacity: 0; }   /* fade out, then loop restarts hidden */
}
@media (prefers-reduced-motion: reduce) {
  .brand-sign-name { animation: none; clip-path: none; }
}

/* ── PILL NAV — vertical icon rail, fixed left-center ── */
.pill-nav {
  position: fixed; left: 24px; top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex; flex-direction: column; gap: 8px;
  background: none; border: none; box-shadow: none;
  padding: 0; width: auto; max-width: none; overflow: visible;
}

.pill-nav a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  text-decoration: none; color: var(--text);
  height: 80px; width: 80px; border-radius: 40px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.1);
  padding: 0 18px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease;
  will-change: width;
}
/* hover / keyboard focus: expand + subtle top→bottom gradient (transparent → soft shadow) */
.pill-nav a:hover,
.pill-nav a:focus-visible {
  width: 240px;
  background-color: rgba(255,255,255,0.98);
  background-image: linear-gradient(to bottom, transparent 25%, rgba(0,0,0,0.12) 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
}

/* active: softer brand-colored pulse ring */
.pill-nav a.active {
  background: rgba(255,255,255,0.96);
  border-color: transparent;
  --nav-glow: rgba(var(--accent-rgb),0.32);
  animation: nav-ring 2.8s ease-out infinite;
}
.pill-nav a.active .nav-logo { filter: none; }
.pill-nav a.active:hover,
.pill-nav a.active:focus-visible {
  width: 240px; animation: none;
  background-color: rgba(255,255,255,0.98);
  background-image: linear-gradient(to bottom, transparent 25%, rgba(0,0,0,0.12) 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
}

/* per-brand pulse colors — softened */
.pill-nav a.active[href="galdepo.html"]   { --nav-glow: rgba(var(--galdepo-rgb),0.4); }
.pill-nav a.active[href="ecubaj.html"]    { --nav-glow: rgba(var(--ecubaj-rgb),0.35); }
.pill-nav a.active[href="cerdac.html"]    { --nav-glow: rgba(var(--cerdac-rgb),0.35); }
.pill-nav a.active[href="dardindar.html"] { --nav-glow: rgba(var(--ddd-rgb),0.4); }

@keyframes nav-ring {
  0%   { box-shadow: 0 0 0 0 var(--nav-glow), 0 4px 16px rgba(0,0,0,0.08); }
  65%  { box-shadow: 0 0 0 13px rgba(0,0,0,0), 0 4px 16px rgba(0,0,0,0.08); }
  100% { box-shadow: 0 0 0 13px rgba(0,0,0,0), 0 4px 16px rgba(0,0,0,0.08); }
}

/* ── icon logos (default/collapsed state) ── */
.pill-nav a .nav-logo {
  height: 42px; width: auto; max-width: 44px;
  object-fit: contain; display: block; flex-shrink: 0;
}
.pill-nav a[href="galdepo.html"]   .nav-logo { height: 46px; }
.pill-nav a[href="ecubaj.html"]    .nav-logo { height: 46px; max-width: 48px; }
.pill-nav a[href="cerdac.html"]    .nav-logo { height: 42px; }
.pill-nav a[href="dardindar.html"] .nav-logo { height: 46px; }
.nav-home-logo { height: 42px; width: 42px; object-fit: contain; display: block; flex-shrink: 0; }

/* ── LOGO SWAP — full selector beats .nav-logo display:block ── */
/* hide full logo at rest */
.pill-nav a .nav-logo.nav-logo-full,
.pill-nav a .nav-home-logo.nav-logo-full { display: none; }
/* on hover / focus: hide icon, reveal full brand logo */
.pill-nav a:hover .nav-logo.nav-logo-icon,
.pill-nav a:focus-visible .nav-logo.nav-logo-icon,
.pill-nav a:hover .nav-home-logo.nav-logo-icon,
.pill-nav a:focus-visible .nav-home-logo.nav-logo-icon { display: none; }
.pill-nav a:hover .nav-logo.nav-logo-full,
.pill-nav a:focus-visible .nav-logo.nav-logo-full,
.pill-nav a:hover .nav-home-logo.nav-logo-full,
.pill-nav a:focus-visible .nav-home-logo.nav-logo-full { display: block; }

/* ── full/brand logos (expanded hover state) ── */
.pill-nav a .nav-logo.nav-logo-full {
  height: 36px; width: auto; max-width: 170px; object-fit: contain; flex-shrink: 0;
}
.pill-nav a[href="galdepo.html"]   .nav-logo.nav-logo-full { height: 30px; }
.pill-nav a[href="ecubaj.html"]    .nav-logo.nav-logo-full { height: 40px; }
.pill-nav a[href="cerdac.html"]    .nav-logo.nav-logo-full { height: 36px; }
.pill-nav a[href="dardindar.html"] .nav-logo.nav-logo-full { height: 36px; }
.pill-nav a .nav-home-logo.nav-logo-full { height: 38px; width: auto; max-width: 170px; object-fit: contain; flex-shrink: 0; }

.pill-nav a .nav-text { display: none; }
.nav-home-text { display: none; }

/* home link — inherits the same pill style as other links (no overrides needed) */

/* scrolled class added by JS. On desktop the sidebar layout is unchanged on
   scroll, so we intentionally add NO overrides here: re-asserting the default
   width/height would tie `:hover` on specificity and (being later in the file)
   win it, locking the pill at 80px and breaking hover-expand once scrolled.
   The compact-on-scroll behavior lives in the responsive media queries below. */

/* ── PAGES ── */
.page { padding-top: 16px; min-height: 100vh; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── HOME PAGE: BENTO GRID ── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 12px;
  padding: 24px 24px 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.bento-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.bento-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.09);
}
/* card-level anchors (hero stat, reel, link tiles) behave like the cards they
   replaced — no default link underline/blue, and a pointer cursor */
a.bento-card { color: inherit; text-decoration: none; cursor: pointer; }
a.bento-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── HERO CARD (bento, 2/3 width × 2 rows) ── */
.bento-hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  min-height: clamp(640px, 52vw, 800px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  position: relative;
}
.bento-hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 100%;
}
.bento-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,6,0.8) 0%, rgba(10,8,6,0.34) 50%, rgba(10,8,6,0.0) 85%);
}
.hero-content { position: relative; z-index: 1; text-align: right; }
.hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px; padding: 5px 14px;
  font-size: 12px; color: rgba(255,255,255,0.75);
  margin-bottom: 20px; backdrop-filter: blur(8px);
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #FF3B30; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.hero-name {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 800; line-height: 0.92;
  letter-spacing: -0.03em;
  color: #F5F0E8;
  margin-bottom: 16px;
  /* umbră moale ca numele (mai ales tealul) să rămână lizibil peste poză */
  text-shadow: 0 2px 18px rgba(10,8,6,0.55), 0 1px 3px rgba(10,8,6,0.4);
}
.hero-name em { font-style: normal; color: var(--accent-bright); }
.hero-bio {
  font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.6;
  max-width: 480px; margin-bottom: 28px; margin-left: auto;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.btn-primary {
  background: #F5F0E8; color: #1C1612;
  border: none; border-radius: 100px;
  padding: 11px 26px; font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.btn-primary:hover { background: var(--accent-bright); color: #1C1612; }
.btn-ghost {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 100px;
  padding: 11px 26px; font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.2); }

/* TikTok header card — section title + social proof + equalizer + follow CTA */
.bento-tiktok-stat {
  grid-column: 1 / 4;
  min-height: 128px;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 38px);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, #20191A 0%, #0B0809 100%);
}
/* soft neon aurora (cyan + magenta) that slowly drifts behind the content */
.bento-tiktok-stat::before {
  content: '';
  position: absolute; inset: -25%; z-index: -1;
  background:
    radial-gradient(closest-side, rgba(37,244,238,0.20), transparent 70%),
    radial-gradient(closest-side, rgba(254,44,85,0.22), transparent 70%);
  background-size: 65% 65%, 60% 60%;
  background-position: 82% 5%, 8% 105%;
  background-repeat: no-repeat;
  filter: blur(10px);
  animation: tiktok-aurora 6s ease-in-out infinite alternate;
}
@keyframes tiktok-aurora {
  0%   { background-position: 95% -5%, -5% 115%; }
  100% { background-position: 40% 40%,  50% 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-tiktok-stat::before { animation: none; }
}
.bento-tiktok-stat > * { position: relative; z-index: 1; }

/* idle sound-equalizer — bars dance to a looping rhythm in TikTok neon.
   In the banner it fills toward the right, just before the CTA. */
.tiktok-eq {
  flex: none;
  width: clamp(130px, 18vw, 240px);
  height: 46px;
  display: flex; align-items: flex-end; gap: 4px;
}
.tiktok-eq span {
  flex: 1; min-width: 2px; height: 100%; border-radius: 3px;
  transform-origin: bottom; transform: scaleY(0.3);
  background: linear-gradient(180deg, #25F4EE 0%, #FE2C55 100%);
  box-shadow: 0 0 8px rgba(37,244,238,0.25);
  animation: eq-bounce 1s ease-in-out infinite;
}
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.22); }
  50%      { transform: scaleY(1); }
}
/* stagger durations + offsets so the row reads as organic, not synced */
.tiktok-eq span:nth-child(3n)   { animation-duration: 1.35s; }
.tiktok-eq span:nth-child(3n+1) { animation-duration: 0.8s; }
.tiktok-eq span:nth-child(4n)   { animation-duration: 1.7s; }
.tiktok-eq span:nth-child(2n)   { animation-delay: -0.45s; }
.tiktok-eq span:nth-child(3n+2) { animation-delay: -0.85s; }
.tiktok-eq span:nth-child(5n)   { animation-delay: -0.2s; }
@media (prefers-reduced-motion: reduce) {
  .tiktok-eq span { animation: none; }
  .tiktok-eq span:nth-child(2n) { transform: scaleY(0.6); }
  .tiktok-eq span:nth-child(3n) { transform: scaleY(0.85); }
  .tiktok-eq span:nth-child(4n) { transform: scaleY(0.45); }
}

/* left: section title (light, on the dark card) + identity & live follower proof */
.ttf-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bento-tiktok-stat .feed-eyebrow { color: rgba(245,240,232,0.62); }
.bento-tiktok-stat .feed-title { color: #F5F0E8; margin-top: 4px; }
.ttf-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-top: 8px; font-size: 14px; color: rgba(245,240,232,0.58);
}
.ttf-icon {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,240,232,0.08); border: 1px solid rgba(245,240,232,0.12);
  color: #F5F0E8;
}
.ttf-handle { color: rgba(245,240,232,0.85); font-weight: 600; text-decoration: none; }
.ttf-handle:hover { color: #F5F0E8; text-decoration: underline; }
.ttf-dot { color: rgba(245,240,232,0.3); }
.ttf-followers .tiktok-num { color: var(--accent-bright); font-weight: 700; }
.tiktok-num { font-variant-numeric: tabular-nums; }   /* steady width while counting */

/* right: equalizer + follow CTA */
.ttf-aside { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 36px); flex: none; }
.ttf-cta {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  background: #F5F0E8; color: #1C1612;
  border-radius: 100px; padding: 12px 24px;
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.ttf-cta:hover { background: var(--accent-bright); transform: translateY(-1px); }

/* ── LOCALIZATION CARD — warm, light counterpart to the dark TikTok card.
   A mini stylized-map snippet (dotted texture) with a softly pulsing pin. ── */
.bento-locale {
  grid-column: 3 / 4; grid-row: 1 / 2;
  min-height: 150px;
  position: relative; overflow: hidden;
  background: var(--surface);
}
/* the live map (Google embed) fills the card; clicks handled by the link */
.locale-map {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  pointer-events: none;
  filter: saturate(0.92) contrast(0.97);
}
/* faded panel at the top keeps the heading legible over the map */
.locale-scrim {
  position: absolute; left: 0; right: 0; top: 0; height: 64%; z-index: 600;
  background: linear-gradient(to bottom,
    var(--surface) 24%, rgba(255,255,255,0.78) 52%, rgba(255,255,255,0));
  pointer-events: none;
}
.locale-body {
  position: absolute; top: 0; left: 0; right: 0; z-index: 650;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.locale-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.locale-place {
  font-size: clamp(20px, 1.6vw, 25px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--text);
}
.locale-place em { font-style: normal; color: var(--accent); }
.locale-coords {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.locale-link {
  margin-top: 6px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.locale-link span { transition: transform 0.2s ease; }
.locale-link:hover span { transform: translateX(3px); }

/* pulsing marker at the map centre (Google centres the queried place) */
.locale-ping {
  position: absolute; left: 50%; top: 50%; z-index: 620;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent); border: 2px solid #fff;
  pointer-events: none;
  animation: locale-pulse 2.6s ease-out infinite;
}
@keyframes locale-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.5); }
  70%  { box-shadow: 0 0 0 24px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}
@media (prefers-reduced-motion: reduce) {
  .locale-ping { animation: none; }
}
/* TikTok reel card */
.bento-reel {
  grid-column: 3 / 4; grid-row: 2 / 3;
  min-height: 200px;
  position: relative; overflow: hidden; cursor: pointer;
}
.bento-reel img { width: 100%; height: 100%; object-fit: cover; }
.reel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
}
.play-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.reel-views { font-size: 12px; color: rgba(255,255,255,0.85); }
.reel-yt-badge {
  position: absolute; top: 16px; left: 16px;
  background: #FF0000; color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  padding: 9px 20px; border-radius: 100px;
  box-shadow: 0 4px 16px rgba(255,0,0,0.5);
}

/* TikTok auto-feed — header card sits above the embed card (both full width) */
.bento-tiktok-head {
  grid-column: 1 / 4;
  padding: 28px;
}
/* ── TIKTOK VIDEO CAROUSEL ──
   Full content-width strip of individual TikTok embeds, slid by assets/carousel.js. */
.tiktok-carousel {
  grid-column: 1 / 4;
  position: relative;
  width: 100%;
  min-width: 0;            /* allow this grid item to shrink below its content */
  display: flex; align-items: center; gap: 10px;
}
/* min-width:0 lets the flex viewport shrink below the track's min-content so
   overflow:hidden can clip it — without it the carousel forces the whole grid
   column to the full track width (~1844px) and breaks every card's layout. */
.tc-viewport { flex: 1; min-width: 0; overflow: hidden; }
.tc-track {
  display: flex; gap: 16px;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tc-slide { flex: 0 0 auto; width: 325px; }
.tc-player {
  width: 325px; height: 575px;
  border: 0; border-radius: 16px; display: block;
  background: #000;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* arrows */
.tc-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 26px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: background 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s;
  z-index: 2;
}
.tc-arrow:hover { background: var(--text); color: #F5F0E8; border-color: var(--text); transform: scale(1.06); }
.tc-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* dots */
.tc-dots {
  position: absolute; left: 0; right: 0; bottom: -26px;
  display: flex; justify-content: center; gap: 7px;
}
.tc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted2); border: none; padding: 0; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.tc-dot.active { background: var(--accent); transform: scale(1.3); }

.feed-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.feed-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.feed-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  margin-top: 8px;
}
.feed-link {
  font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}
.feed-link:hover { text-decoration: underline; }

/* ── PAGE LINK TILES (Galdepo · eCubaj · Cerdac · Dar din Dar) ──
   Vibrant, full-color brand tiles laid out as a 2×2 block, each filled
   with its own brand gradient and marked with a themed line glyph.
   Each tile sets --brand / --brand-deep inline. */
.links-grid {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bento-link {
  min-height: 260px;
  padding: 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 14px;
  cursor: pointer; text-decoration: none; color: #fff;
  isolation: isolate;
  border: none;
  background: #1C1612;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  will-change: transform;
}
.bento-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.28);
}

/* background photo */
.bento-link .tile-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.35s ease-out;
  will-change: transform;
}
.bento-link:hover .tile-bg { transform: scale(1.04); }

/* brand-color tint + darken-to-bottom overlay for legibility */
.bento-link .tile-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,8,6,0) 0%, rgba(10,8,6,0.45) 50%, rgba(10,8,6,0.92) 100%),
    linear-gradient(150deg, color-mix(in srgb, var(--brand) 55%, transparent) 0%, transparent 60%);
  pointer-events: none;
}

/* brand icon top-left, white rounded chip */
.bento-link .tile-logo {
  position: absolute; top: 20px; left: 20px;
  width: 58px; height: 58px;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 18px;
  object-fit: contain;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  transition: transform 0.2s ease;
  will-change: transform;
}
.bento-link:hover .tile-logo { transform: scale(1.05); }

.tile-body { display: flex; flex-direction: column; gap: 6px; }

.link-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}
.link-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 80%, transparent);
}
.link-name {
  font-size: 30px; font-weight: 800; line-height: 1.05;
  letter-spacing: -0.025em; color: #fff;
}
.link-desc { font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.55; max-width: 90%; }
.link-go {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: var(--brand);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px; padding: 8px 16px;
  transition: gap 0.2s ease, transform 0.2s ease;
}
.bento-link:hover .link-go {
  gap: 11px;
  transform: translateY(-1px);
}
.link-arrow {
  position: absolute; top: 22px; right: 22px;
  font-size: 18px; color: rgba(255,255,255,0.8);
  transition: transform 0.2s, color 0.2s;
}
.bento-link:hover .link-arrow { transform: translate(3px,-3px); color: #fff; }

/* Products section header */
.bento-products-head {
  grid-column: 1 / 4;
  padding: 28px;
}
.products-head-desc {
  font-size: 14px; color: var(--muted);
  max-width: 440px; line-height: 1.6; margin-top: 6px;
}

/* Quote card */
.bento-quote {
  grid-column: 1 / 4;
  padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.07) 0%, rgba(var(--accent-rgb),0.02) 100%);
  border-color: rgba(var(--accent-rgb),0.18);
  position: relative; overflow: hidden;
}
.quote-deco {
  font-size: 160px; line-height: 0.7;
  color: var(--accent); opacity: 0.25;
  font-family: Georgia, serif; font-weight: 700;
  margin-bottom: 8px; display: block;
  pointer-events: none; user-select: none;
}
.quote-text {
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 600; line-height: 1.35;
  letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 20px; max-width: 860px;
}
.quote-attr { font-size: 13px; color: var(--muted); }

/* Stats row */
.bento-stats {
  grid-column: 1 / 4;
  padding: 28px 36px;
  display: flex; flex-direction: column; gap: 20px;
}
.stats-intro { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.stats-desc { font-size: 13px; color: var(--muted); }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}

/* Closing CTA — dark brown card, centered column */
.bento-cta-final {
  grid-column: 1 / 4;
  padding: 64px 48px;
  background: linear-gradient(135deg, #1C1612 0%, #2C2018 60%, #1C1612 100%);
  border-color: transparent;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 28px;
  position: relative; overflow: hidden;
}
.bento-cta-final::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(640px 420px at 50% 110%, rgba(var(--accent-bright-rgb),0.18), transparent 70%);
  pointer-events: none;
}
.bento-cta-final > * { position: relative; z-index: 1; }
.cta-final-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta-final-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800; line-height: 0.92;
  letter-spacing: -0.04em; color: #F5F0E8;
  margin: 6px 0 4px;
}
.cta-final-title em { font-style: normal; color: var(--accent-bright); }
.cta-final-desc {
  font-size: 15px; color: rgba(245,240,232,0.6);
  line-height: 1.65; max-width: 520px;
}

/* ── SOCIAL ROW (closing CTA) — centered, light theme ── */
.social-row {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}
.social-btn {
  --brand: var(--text);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  width: 100px; height: 100px;
  border-radius: 26px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.25s, background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.social-btn svg { width: 30px; height: 30px; display: block; }
.social-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.25s;
}
.social-btn:hover {
  transform: translateY(-4px);
  background: #FFFFFF;
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--brand) 28%, transparent);
}
.social-btn:hover .social-label { color: var(--brand); }
.social-tiktok    { --brand: #010101; }
.social-youtube   { --brand: #FF0000; }
.social-instagram { --brand: #E1306C; }
.social-facebook  { --brand: #1877F2; }

/* ── FOOTER SOCIAL ICONS ── */
.footer-social { display: flex; gap: 14px; align-items: center; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s, background 0.2s, transform 0.2s;
}
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-social a:hover {
  color: var(--text); background: rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
/* Stats row — now defined above near quote/products sections */
.stat-item {
  padding: 0 28px; text-align: center;
  border-right: 1px solid var(--border);
}
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { border-right: none; }
.stat-num {
  font-size: 36px; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; color: var(--text);
}
.stat-unit { color: var(--accent); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ── SECTION HEADER ── */
.section-header {
  padding: 60px 0 32px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border);
  padding: 5px 14px; border-radius: 100px;
  margin-bottom: 16px;
}
.section-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800; line-height: 1.05;   /* la 0.95 rândurile se suprapuneau pe titlurile pe două linii */
  letter-spacing: -0.04em;
}
.section-title em { font-style: normal; color: var(--accent); }
/* intro paragraph that follows a section header */
.section-lead { font-size: 16px; color: var(--muted); line-height: 1.7; max-width: 760px; margin-bottom: 8px; }
/* small disclaimer tucked under a table */
.price-note { font-size: 12px; color: var(--muted2); margin: -44px 0 60px; }

/* ── INNER PAGE HERO — contained split card ──
   A brand-tinted text panel beside the page's key visual, living inside the
   1200px column like every other block (replaces the old full-bleed band).
   Per-page accent comes from the --brand / --brand-rgb modifier classes. */
.hero-split {
  --brand: var(--accent);
  --brand-rgb: var(--accent-rgb);
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: stretch;
  margin: 20px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  min-height: clamp(380px, 42vw, 460px);
}
.hero-split.galdepo { --brand: var(--galdepo); --brand-rgb: var(--galdepo-rgb); }
/* galdepo: hero mai scund — pagina intră direct în calculatorul de ofertă */
.hero-split.galdepo { min-height: clamp(280px, 26vw, 330px); }
.hero-split.galdepo .hero-split-panel { padding: clamp(24px, 3.2vw, 40px) clamp(28px, 4.5vw, 60px); }
.hero-split.ecubaj  { --brand: var(--ecubaj);  --brand-rgb: var(--ecubaj-rgb); }
.hero-split.cerdac  { --brand: var(--cerdac);  --brand-rgb: var(--cerdac-rgb); }
.hero-split.ddd     { --brand: var(--ddd);     --brand-rgb: var(--ddd-rgb); }

.hero-split-panel {
  padding: clamp(28px, 4.5vw, 60px);
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(115% 95% at 0% 0%, rgba(var(--brand-rgb), 0.13), transparent 60%),
    linear-gradient(160deg, rgba(var(--brand-rgb), 0.07), rgba(var(--brand-rgb), 0.012));
}
.hero-split-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand);
  background: rgba(var(--brand-rgb), 0.10);
  border: 1px solid rgba(var(--brand-rgb), 0.30);
  padding: 6px 14px; border-radius: 100px; margin-bottom: 22px;
}
.hero-split-logo {
  height: clamp(40px, 5.5vw, 58px); width: auto; max-width: min(100%, 340px);
  object-fit: contain; object-position: left; display: block;
}
/* DDD uses the two-bubble emblem (not a thin wordmark) — size by width so it
   reads at a comfortable badge scale rather than a tiny strip */
.hero-split.ddd .hero-split-logo { height: auto; width: clamp(180px, 22vw, 240px); max-width: 80%; }
.hero-split-title {
  font-size: clamp(42px, 6vw, 68px); font-weight: 800;
  line-height: 0.95; letter-spacing: -0.04em; color: var(--text);
}
.hero-split-title em { font-style: normal; color: var(--brand); }
.hero-split-sub {
  font-size: clamp(15px, 1.5vw, 17px); color: var(--muted);
  line-height: 1.6; margin-top: 18px; max-width: 46ch;
}
.hero-split-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-split-ctas a { text-decoration: none; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 100px; padding: 12px 26px;
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.hero-cta-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 6px 20px rgba(var(--brand-rgb), 0.32);
}
.hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(var(--brand-rgb), 0.42); }
.hero-cta-ghost {
  background: rgba(var(--brand-rgb), 0.08); color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), 0.28);
}
.hero-cta-ghost:hover { background: rgba(var(--brand-rgb), 0.14); }
/* WhatsApp — the primary order channel; brand-green so it's instantly recognized */
.hero-cta-whatsapp {
  background: #25D366; color: #fff;
  box-shadow: 0 6px 20px rgba(37,211,102,0.32);
}
.hero-cta-whatsapp:hover { transform: translateY(-2px); background: #1ebe5a; box-shadow: 0 10px 28px rgba(37,211,102,0.42); }
.hero-cta svg { width: 17px; height: 17px; flex-shrink: 0; }

.hero-split-visual { position: relative; min-height: 240px; background: rgba(var(--brand-rgb), 0.05); }
/* absolute, ca proporția naturală a pozei să nu umfle cardul peste min-height-ul componentei */
.hero-split-visual:not(.contain) > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* contained variant — app screenshot / phone floats on a brand wash */
.hero-split-visual.contain {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(85% 75% at 65% 28%, rgba(var(--brand-rgb), 0.20), transparent 70%),
    rgba(var(--brand-rgb), 0.06);
}
.hero-split-visual.contain > img {
  width: auto; height: auto; max-height: 360px; max-width: 100%;
  object-fit: contain; border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
}
/* anchored in-page targets clear the mobile top nav when scrolled to */
[id] { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }

/* ── GALDEPO PAGE ── */
.products-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding-bottom: 60px;
}
.product-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.product-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),0.3); box-shadow: 0 12px 40px rgba(0,0,0,0.09); }
.product-img { height: 200px; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
/* pozele cu subiectul în afara centrului: mutăm fereastra de crop
   (low = subiectul e jos, high = sus, ex. logoul de pe baloții de scândură) */
.product-img img.crop-low { object-position: 50% 68%; }
.product-img img.crop-high { object-position: 50% 20%; }
.product-card:hover .product-img img { transform: scale(1.06); }
.product-body { padding: 24px; }
.product-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.product-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.product-price {
  font-size: 22px; font-weight: 800; color: var(--galdepo);
  letter-spacing: -0.03em;
}
.product-price span { font-size: 13px; font-weight: 400; color: var(--muted); }

/* „Direct de la sursă" — panou de pitch brand-tintat + două cadre de proces
   cu legendă suprapusă și pas numerotat, în limbajul tile-urilor de pe index */
.source-grid {
  display: grid; grid-template-columns: 1.1fr 1.35fr 0.95fr; gap: 12px;
  margin-top: 24px; padding-bottom: 60px;
}
.source-pitch {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.09) 0%, rgba(var(--accent-rgb),0.02) 100%);
  border: 1px solid rgba(var(--accent-rgb),0.15);
  border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.source-pitch h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.source-pitch p { font-size: 14px; color: var(--muted); line-height: 1.7; }
.source-pitch .source-punch {
  font-weight: 800; color: var(--accent);
  font-size: clamp(17px, 1.8vw, 21px); line-height: 1.45; letter-spacing: -0.01em;
}
.source-card {
  position: relative; margin: 0; min-height: 400px;
  border-radius: var(--radius); overflow: hidden;
}
.source-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.5s;
}
.source-card:hover img { transform: scale(1.05); }
.source-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 48px 18px 16px;
  background: linear-gradient(180deg, rgba(10,8,6,0) 0%, rgba(10,8,6,0.78) 100%);
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 10px;
}
.source-no {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
}

.price-table {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 60px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.price-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 16px 28px; border-bottom: 1px solid var(--border);
  align-items: center; font-size: 14px;
}
.price-row:last-child { border-bottom: none; }
.price-row.header { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface2); }
.price-amount { font-weight: 700; color: var(--galdepo); }

.contact-band {
  --brand: var(--galdepo); --brand-rgb: var(--galdepo-rgb);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08) 0%, rgba(var(--accent-rgb),0.02) 100%);
  border: 1px solid rgba(var(--accent-rgb),0.15);
  border-radius: var(--radius); padding: 40px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 60px; gap: 24px; flex-wrap: wrap;
}
.contact-text h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.contact-text p { font-size: 14px; color: var(--muted); }
.contact-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-ctas a { text-decoration: none; }

/* ── OFFER CALCULATOR (GALDEPO) ── */
.offer-wrap {
  /* .hero-cta-primary/ghost paint with --brand, which only page bands define — set it here too */
  --brand: var(--galdepo); --brand-rgb: var(--galdepo-rgb);
  margin-bottom: 60px;
}
/* the card renders from first paint with skeleton chips holding its final height
   (anti-CLS); if the price catalog fails to load, the card stays in place (dimmed,
   inert) and the error note floats over it, so nothing below moves */
.offer-wrap { position: relative; }
.offer-wrap.offer-failed .offer-card {
  opacity: 0.35; filter: grayscale(1);
  pointer-events: none; user-select: none;
}
.offer-wrap.offer-failed .offer-chip.offer-skel { animation: none; }
.offer-wrap .offer-error {
  position: absolute; z-index: 2;
  top: 28px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 32px), 560px);
  /* opaque backing under the red tint — it sits on top of the dimmed card */
  background: linear-gradient(rgba(179,38,30,0.06), rgba(179,38,30,0.06)), var(--surface);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
/* skeleton chips: same box as real chips, invisible placeholder text for width */
.offer-chip.offer-skel {
  pointer-events: none;
  user-select: none;
  color: transparent;
  animation: offer-skel-pulse 1.1s ease-in-out infinite alternate;
}
.offer-chip.offer-skel span { color: transparent; }
@keyframes offer-skel-pulse { from { opacity: 0.45; } to { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .offer-chip.offer-skel { animation: none; opacity: 0.6; }
}
.offer-error {
  font-size: 14px; line-height: 1.6; padding: 20px 24px;
  background: rgba(179,38,30,0.06); border: 1px solid rgba(179,38,30,0.25);
  border-radius: var(--radius-sm);
}
.offer-error a { color: var(--galdepo); font-weight: 600; }

.offer-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.offer-step { margin-bottom: 24px; }
.offer-step-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.offer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-chip {
  font-family: 'Outfit', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--text); background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; min-height: 44px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.offer-chip span { font-size: 11px; font-weight: 400; color: var(--muted); }
.offer-chip:hover { border-color: rgba(var(--accent-rgb),0.35); }
.offer-chip.selected {
  background: rgba(var(--accent-rgb),0.10); border-color: var(--galdepo);
  color: var(--galdepo); box-shadow: inset 0 0 0 1px var(--galdepo);
}
.offer-chip.selected span { color: rgba(var(--accent-rgb),0.75); }

.offer-custom { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.offer-custom[hidden] { display: none; } /* display:flex would otherwise defeat the hidden attribute */
.offer-custom label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  display: flex; flex-direction: column; gap: 6px;
}
.offer-custom input, .offer-qty input {
  font-family: 'Outfit', sans-serif; font-size: 15px; color: var(--text);
  padding: 10px 12px; width: 130px; background: var(--surface);
  border: 1px solid var(--border-hover); border-radius: var(--radius-sm);
}
.offer-custom input:focus, .offer-qty input:focus { outline: 2px solid var(--galdepo); outline-offset: 1px; }

.offer-qty { display: flex; align-items: center; gap: 8px; }
.offer-qty input { width: 90px; text-align: center; }
.offer-qty button {
  width: 44px; height: 44px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-hover); background: var(--surface2);
  font-size: 20px; font-weight: 700; color: var(--text); line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}
.offer-qty button:hover { background: rgba(var(--accent-rgb),0.10); border-color: rgba(var(--accent-rgb),0.35); }

.offer-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 20px;
}
.offer-live { font-size: 15px; color: var(--muted); }
.offer-live strong { color: var(--galdepo); font-weight: 800; }
#offer-add:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
#offer-add.added { background: #0B5C50; }

.offer-summary {
  margin-top: 16px; padding: 28px;
  background: var(--surface); border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.offer-summary h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.offer-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.offer-row-info { flex: 1; font-size: 14px; line-height: 1.4; }
.offer-row-info span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.offer-row-price { font-weight: 700; color: var(--galdepo); white-space: nowrap; }
.offer-row-del {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--muted); font-size: 13px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.offer-row-del:hover { color: #b3261e; border-color: rgba(179,38,30,0.4); background: rgba(179,38,30,0.06); }
.offer-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; padding: 16px 0 0; font-size: 15px;
}
.offer-total-lei { font-size: 26px; font-weight: 800; color: var(--galdepo); letter-spacing: -0.02em; }
.offer-summary .price-note { margin: 8px 0 20px; }
.offer-send { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.offer-clear {
  background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto;
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--muted); text-decoration: underline;
}
.offer-clear:hover { color: var(--text); }

/* ── ECUBAJ PAGE ── */
.ecubaj-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  padding: 48px 0 60px; align-items: center;
}
.phone-photo { width: 300px; max-width: 100%; margin: 0 auto; position: relative; }
.phone-photo img {
  width: 100%; height: auto; display: block;
  border-radius: 38px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.06);
}
.phone-photo .phone-badge {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  background: var(--ecubaj); color: #fff; font-size: 12px; font-weight: 700;
  padding: 7px 18px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(var(--ecubaj-rgb),0.4);
}

.ecubaj-info { padding-top: 12px; }
.ecubaj-info .section-title { font-size: clamp(30px, 4vw, 40px); margin-bottom: 8px; }
.ecubaj-subline { color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.feature-list { list-style: none; margin: 20px 0 32px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; line-height: 1.5;
}
.feature-list li:last-child { border-bottom: none; }
.feature-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(var(--ecubaj-rgb),0.1); border: 1px solid rgba(var(--ecubaj-rgb),0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.feature-text strong { display: block; font-weight: 600; margin-bottom: 2px; }
.feature-text span { color: var(--muted); }

.store-btns { display: flex; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.store-btn {
  flex: 1; min-width: 180px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; cursor: pointer;
}
.store-btn:hover { border-color: rgba(var(--ecubaj-rgb),0.3); background: rgba(var(--ecubaj-rgb),0.05); box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.store-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; }
.store-glyph { display: block; width: 26px; height: 26px; }
.store-glyph.apple { width: 23px; height: 28px; fill: var(--text); }
.store-text .store-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.store-text .store-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }

.shots-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 60px; }
.shots-strip img {
  width: 100%; height: auto; border-radius: var(--radius-sm); display: block;
  border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 60px; }
.review-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.review-stars { color: #D4880A; font-size: 14px; margin-bottom: 10px; }
.review-text { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.review-author { font-size: 12px; font-weight: 600; color: var(--text); }

/* ── CERDAC PAGE ── */
.cerdac-hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 0; align-items: stretch; }
/* gallery stretches to the pitch column's height */
.cerdac-gallery { height: 100%; }
.gallery-main { height: 100%; min-height: 300px; border-radius: 16px; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

/* filmstrip carousel: fixed-height slides, natural widths, snap scrolling */
.cerdac-carousel { position: relative; margin: 8px 0 60px; }
.carousel-track {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 4px 18px; cursor: grab;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel-slide {
  flex: 0 0 auto; margin: 0; scroll-snap-align: center;
  border-radius: 16px; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.carousel-slide img {
  height: clamp(280px, 38vw, 440px); width: auto; display: block;
  user-select: none; -webkit-user-drag: none;
}
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--cerdac);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  transition: opacity 0.25s, box-shadow 0.25s, transform 0.15s;
}
.carousel-arrow:hover { box-shadow: 0 8px 26px rgba(0,0,0,0.2); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.94); }
.carousel-prev { left: -10px; }
.carousel-next { right: -10px; }
.carousel-arrow.is-disabled { opacity: 0.35; cursor: default; }

.premium-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(var(--cerdac-rgb),0.08); border: 1px solid rgba(var(--cerdac-rgb),0.22);
  border-radius: 100px; padding: 6px 16px;
  font-size: 12px; font-weight: 600; color: var(--cerdac);
  margin-bottom: 24px;
}
.cerdac-title { font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 20px; }
.cerdac-title em { font-style: normal; color: var(--cerdac); }

.cerdac-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 32px; }
.attr-chip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 18px;
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.attr-icon { font-size: 20px; }

/* ── CERDAC CONFIGURATOR ── */
.cfg-wrap { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; margin: 24px 0 60px; }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfg-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.cfg-base {
  grid-column: 1 / -1; flex-direction: row;
  border-color: rgba(var(--cerdac-rgb),0.35);
  background: linear-gradient(120deg, rgba(var(--cerdac-rgb),0.06), rgba(var(--cerdac-rgb),0.015));
}
.cfg-base .cfg-img { flex: 0 0 42%; aspect-ratio: auto; min-height: 200px; }
.cfg-included {
  display: inline-block; align-self: flex-start;
  background: var(--cerdac); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 100px; padding: 4px 12px; margin-bottom: 12px;
}
.cfg-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.cfg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s; }
.cfg-addon { cursor: pointer; position: relative; transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s; }
.cfg-addon:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.cfg-addon:hover .cfg-img img { transform: scale(1.05); }
.cfg-addon:focus-within { outline: 2px solid rgba(var(--cerdac-rgb),0.6); outline-offset: 2px; }
.cfg-addon.selected {
  border-color: rgba(var(--cerdac-rgb),0.6);
  box-shadow: 0 0 0 3px rgba(var(--cerdac-rgb),0.16), 0 12px 30px rgba(0,0,0,0.08);
}
.cfg-check {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.85); color: transparent; border: 2px solid rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cfg-addon.selected .cfg-check { background: var(--cerdac); color: #fff; border-color: var(--cerdac); animation: cfg-pop 0.3s; }
@keyframes cfg-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.cfg-body { padding: 14px 16px 16px; display: flex; flex-direction: column; }
.cfg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cfg-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.cfg-price { color: var(--cerdac); font-weight: 800; font-size: 15px; white-space: nowrap; }
.cfg-desc { font-size: 13px; color: var(--muted); line-height: 1.55; }
.cfg-qty { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.cfg-qty[hidden] { display: none; }
.cfg-qty-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: auto; }
.cfg-qty button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface2); font-size: 16px; font-weight: 700; color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.cfg-qty button:hover { border-color: rgba(var(--cerdac-rgb),0.4); background: rgba(var(--cerdac-rgb),0.07); }
.cfg-qty-n { min-width: 20px; text-align: center; font-weight: 800; font-size: 15px; }
.cfg-summary {
  position: sticky; top: 110px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.09);
}
.cfg-summary-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.cfg-list { list-style: none; margin: 0 0 4px; }
.cfg-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 0; border-bottom: 1px dashed var(--border);
  font-size: 14px; animation: cfg-in 0.25s;
}
@keyframes cfg-in { from { opacity: 0; transform: translateX(-6px); } }
.cfg-li-name { color: var(--text); }
.cfg-li-base .cfg-li-name { font-weight: 600; }
.cfg-li-price { color: var(--muted); white-space: nowrap; margin-left: auto; }
.cfg-li-x { border: none; background: none; color: var(--muted2); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 6px; }
.cfg-li-x:hover { color: #B4231F; background: rgba(180,35,31,0.08); }
.cfg-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; font-size: 14px; color: var(--muted); }
.cfg-total strong { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.cfg-send {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; padding: 15px 18px; border-radius: 14px;
  background: #25D366; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(37,211,102,0.35);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.cfg-send:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(37,211,102,0.45); background: #1FC65B; }
.cfg-send svg { width: 20px; height: 20px; flex-shrink: 0; }
.cfg-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 12px; }
/* sticky order bar, phones only (shown via .visible under the 900px query);
   cât timp e vizibilă, body poartă .cfg-bar-on și fab-ul de WhatsApp se retrage */
.cfg-bar {
  position: fixed; left: 32px; right: 32px; bottom: 14px; z-index: 70;
  display: none; align-items: center; gap: 10px;
  background: var(--cerdac); color: #fff; border: none; border-radius: 100px;
  padding: 12px 20px; font-size: 14px; cursor: pointer;
}
.cfg-bar-label { opacity: 0.85; }
.cfg-bar-total { font-size: 17px; font-weight: 800; }
.cfg-bar-go { margin-left: auto; font-weight: 700; }

.order-cta {
  --brand: var(--cerdac); --brand-rgb: var(--cerdac-rgb);
  background: linear-gradient(135deg, rgba(var(--cerdac-rgb),0.07), rgba(var(--cerdac-rgb),0.02));
  border: 1px solid rgba(var(--cerdac-rgb),0.18); border-radius: var(--radius);
  padding: 48px; text-align: center; margin-bottom: 60px;
}
.order-cta h3 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
.order-cta p { font-size: 15px; color: var(--muted); margin-bottom: 32px; }
.order-cta-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.order-cta-ctas a { text-decoration: none; }
.btn-cerdac {
  background: var(--cerdac); color: white;
  border: none; border-radius: 100px; padding: 14px 40px;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(var(--cerdac-rgb),0.35);
  text-decoration: none; display: inline-block;
}
.btn-cerdac:hover { background: var(--cerdac-deep); box-shadow: 0 6px 28px rgba(var(--cerdac-rgb),0.45); }

.cerdac-lead { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.cerdac-price {
  border-left: 3px solid var(--cerdac);
  padding: 16px 20px; background: rgba(var(--cerdac-rgb),0.05);
  border-radius: 0 12px 12px 0; margin-bottom: 28px;
}
.cerdac-price-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--cerdac); margin-bottom: 6px; }
.cerdac-price-value { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.cerdac-price-value span { font-size: 15px; font-weight: 400; color: var(--muted); }
.cerdac-price-note { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ── DAR DIN DAR PAGE ── */
.ddd-mission {
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px;
  align-items: start; margin: 64px 0 72px;
}
.ddd-mission-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ddd); margin-bottom: 16px;
}
.ddd-mission-text { font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.ddd-mission-desc { font-size: 15px; color: var(--muted); line-height: 1.7; }

.ddd-stats { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.ddd-stat {
  flex: 1; min-width: 120px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ddd-stat-num { font-size: 28px; font-weight: 800; color: var(--ddd); letter-spacing: -0.02em; }
.ddd-stat-label { font-size: 12px; color: var(--muted); }

.merch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 60px;
}
.merch-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.merch-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),0.25); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
.merch-img { height: 240px; overflow: hidden; }
.merch-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.merch-card:hover .merch-img img { transform: scale(1.05); }
.merch-img.contain { display: flex; align-items: center; justify-content: center; background: var(--surface2); }
.merch-img.contain img { object-fit: contain; padding: 36px; transition: transform 0.5s; }
.merch-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.merch-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.02em; }
.merch-desc { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
/* footer pinned to the bottom so price + button align across cards regardless
   of how many lines the description takes */
.merch-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.merch-price { font-size: 20px; font-weight: 800; color: var(--ddd); letter-spacing: -0.03em; }
.merch-buy {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--ddd);
  background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: 100px; padding: 6px 14px; cursor: pointer;
  text-decoration: none; transition: all 0.2s;
}
.merch-buy svg { width: 14px; height: 14px; flex-shrink: 0; }
.merch-buy:hover { background: rgba(var(--accent-rgb),0.16); }

/* ── DDD PRE-LANSARE — activă cât timp <body> are clasa .ddd-prelaunch ──
   Badge „în curând" pe produse, prețuri ascunse și panou explicativ sub
   titlul colecției. La lansare se șterge doar clasa de pe <body>
   (dardindar.html); regulile de aici rămân inerte. */
.prelaunch-note { display: none; }
.ddd-prelaunch .prelaunch-note {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.09) 0%, rgba(var(--accent-rgb),0.02) 100%);
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px;
}
.prelaunch-note-icon { font-size: 26px; line-height: 1; }
.prelaunch-note strong { display: block; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 4px; }
.prelaunch-note p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.ddd-prelaunch .merch-img { position: relative; }
.ddd-prelaunch .merch-img::after {
  content: "în curând"; position: absolute; top: 12px; left: 12px;
  background: var(--ddd); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; transform: rotate(-2deg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
/* prețurile nu se afișează până la lansare; butonul rămâne aliniat dreapta */
.ddd-prelaunch .merch-price { display: none; }
.ddd-prelaunch .merch-footer { justify-content: flex-end; }

/* ── REUSABLE CTA PANEL — centered call-to-action band, brandable ── */
.cta-panel {
  --brand: var(--accent); --brand-rgb: var(--accent-rgb);
  background: linear-gradient(135deg, rgba(var(--brand-rgb),0.08), rgba(var(--brand-rgb),0.02));
  border: 1px solid rgba(var(--brand-rgb),0.16);
  border-radius: var(--radius); padding: clamp(32px, 5vw, 48px);
  text-align: center; margin-bottom: 60px;
}
.cta-panel.ddd { --brand: var(--ddd); --brand-rgb: var(--ddd-rgb); }
.cta-panel-icon { font-size: 48px; margin-bottom: 16px; }
.cta-panel h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
.cta-panel p { font-size: 15px; color: var(--muted); max-width: 480px; margin: 0 auto 28px; }
.cta-panel .store-btns { justify-content: center; align-items: center; margin-bottom: 0; }
.cta-panel .store-btn { flex: 0 0 auto; min-width: 0; }

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
  background: var(--surface);
  position: relative; z-index: 1;
}
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 24px;
}
.footer-brand {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
}
.footer-brand em { font-style: normal; color: var(--accent); }
.footer-logo { height: 30px; width: auto; flex-shrink: 0; }
.footer-by { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a {
  font-size: 13px; color: var(--muted); text-decoration: none;
  transition: color 0.2s; cursor: pointer;
}
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 12px; color: var(--muted2); }

/* ── WHATSAPP FLOATING BUTTON ── */
.whatsapp-fab {
  position: fixed; bottom: 44px; right: 44px; z-index: 998;
  height: 58px; width: 58px; border-radius: 29px;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px; gap: 0; overflow: hidden;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.18);
  text-decoration: none;
  transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s,
              opacity 0.25s, transform 0.25s;
  animation: whatsapp-ring 2.8s ease-out infinite;
}
/* bara de total a configuratorului e pe ecran: fab-ul se retrage să nu se calce */
body.cfg-bar-on .whatsapp-fab { opacity: 0; transform: scale(0.5); pointer-events: none; }
.whatsapp-fab svg { width: 30px; height: 30px; fill: #fff; flex-shrink: 0; }
/* label collapses to zero width so the icon stays centered in the circle;
   on hover it expands and the whole label+icon group is centered (no left gap) */
.whatsapp-fab-label {
  color: #fff; font-size: 13px; font-weight: 600;
  white-space: nowrap; opacity: 0; max-width: 0; overflow: hidden;
  transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s, margin 0.35s;
}
/* expandarea pe hover doar pe dispozitive cu cursor real: pe touch, :hover
   rămâne „lipit" după tap și butonul stătea blocat în starea expandată */
@media (hover: hover) and (pointer: fine) {
  .whatsapp-fab:hover {
    width: 240px;
    animation: none;
    box-shadow: 0 6px 28px rgba(37,211,102,0.55), 0 2px 12px rgba(0,0,0,0.22);
  }
  .whatsapp-fab:hover .whatsapp-fab-label { opacity: 1; max-width: 200px; margin-right: 10px; }
}
@keyframes whatsapp-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.55), 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.18); }
  65%  { box-shadow: 0 0 0 16px rgba(37,211,102,0), 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.18); }
  100% { box-shadow: 0 0 0 16px rgba(37,211,102,0), 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.18); }
}

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s, transform 0.6s; }
.reveal.visible { opacity: 1; transform: none; }
/* vizitatorii cu "reduce motion" primesc conținutul direct, fără fade/slide */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── RESPONSIVE ──
   Mobile-first refinement layered on top of the desktop layout above.
   Breakpoints: 1024 (small laptop) · 900 (tablet) · 600 (phone) · 400 (small phone).
   NOTE: every new component/page must stay responsive across these breakpoints. */

/* Global safeguards so nothing overflows the viewport on any screen */
img, svg, video { max-width: 100%; }

/* Small laptop / large tablet */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
  .bento-grid { padding: 24px 20px 48px; }
  .ecubaj-layout, .cerdac-hero-content { gap: 32px; }
  .ddd-mission { gap: 32px; }
  .cfg-wrap { grid-template-columns: minmax(0,1fr) 300px; }
}

/* Tablet */
@media (max-width: 900px) {
  /* nav collapses to a centered top bar here, so the wordmark band narrows —
     drop the editorial statement to keep the header clean and aligned */
  .brand-statement { display: none; }

  /* ── MOBILE NAV: uniform icon chips in a centered top bar ──
     The vertical desktop rail collapses to one horizontal row of equal-size
     circular icon buttons. nav.js renders image logos only, so this is a
     logo-based bar (no text). 5 chips fit ~320px without horizontal scroll. */
  .pill-nav {
    --nav-shrink: 0.84;
    flex-direction: row; align-items: center; justify-content: center;
    left: 50%; top: 14px; transform: translateX(-50%);
    transform-origin: top center;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(0,0,0,0.08); border-radius: 999px;
    padding: 6px; gap: 6px;
    width: auto; max-width: calc(100vw - 24px);
    overflow: visible;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .pill-nav a {
    flex: 0 0 auto;
    height: 50px; width: 50px; min-width: 0; border-radius: 50%;
    padding: 0; gap: 0; overflow: hidden;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    animation: none;
  }
  /* No hover-expand on touch: keep chips fixed; just a subtle press/focus tint.
     Mirror :focus-visible so the desktop expand rules don't blow the chip up. */
  .pill-nav a:hover,
  .pill-nav a:focus-visible {
    width: 50px; background: rgba(0,0,0,0.05); box-shadow: none;
    background-image: none;
  }
  /* Active page: calm brand-colored ring (no infinite pulse on mobile). */
  .pill-nav a.active,
  .pill-nav a.active:hover,
  .pill-nav a.active:focus-visible {
    width: 50px; animation: none;
    background: rgba(0,0,0,0.035);
    box-shadow: inset 0 0 0 2px var(--nav-glow);
  }
  /* Show ONLY the compact icon, normalized to one size inside the circle.
     Selectors carry 4 classes (0,4,1) so they beat both the per-brand height
     rules (0,3,1) and the hover/focus logo-swap rules — the full wordmark
     logo must never appear on mobile (no room, and no hover to trigger it). */
  .pill-nav a[href] .nav-logo.nav-logo-icon,
  .pill-nav a[href] .nav-home-logo.nav-logo-icon {
    width: 64%; height: 64%; max-width: 32px; max-height: 32px;
    object-fit: contain; display: block;
  }
  .pill-nav a[href] .nav-logo.nav-logo-full,
  .pill-nav a[href] .nav-home-logo.nav-logo-full { display: none; }
  /* Scroll: shrink the whole bar a touch via transform ONLY. Scaling is
     paint-level and excluded from Cumulative Layout Shift; changing
     width/height/top/padding here shifted the chips on every scroll past the
     threshold and was the page's single biggest CLS source (scroll never
     counts as "recent input", so those shifts are always scored). */
  .pill-nav.scrolled {
    transform: translateX(-50%) translateY(-4px) scale(var(--nav-shrink));
    background: rgba(255,255,255,0.9);
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  }
  .page { padding-top: 80px; }

  .bento-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; }
  .bento-hero { grid-column: 1/3; grid-row: auto; min-height: 340px; padding: 28px; }
  .bento-tiktok-stat { grid-column: 1/3; grid-row: auto; }  /* banner stays full width */
  .bento-locale { grid-column: auto; grid-row: auto; }
  .bento-reel { grid-column: auto; grid-row: auto; }
  .bento-quote { grid-column: 1/3; }
  .bento-tiktok-head { grid-column: 1/3; padding: 24px; }
  .tiktok-carousel { grid-column: 1/3; }
  .links-grid { grid-column: 1/3; gap: 8px; }
  .bento-stats { grid-column: 1/3; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 16px 0; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { padding-left: 0; }
  .bento-products-head { grid-column: 1/3; }
  .bento-cta-final { grid-column: 1/3; padding: 48px 32px; }
  .products-grid, .merch-grid { grid-template-columns: 1fr 1fr; }
  /* pitch-ul trece deasupra, pe toată lățimea; pozele rămân pereche dedesubt */
  .source-grid { grid-template-columns: 1fr 1fr; }
  .source-pitch { grid-column: 1 / -1; }
  .source-card { min-height: 300px; }
  .ecubaj-layout, .cerdac-hero-content, .ddd-mission { grid-template-columns: 1fr; }
  /* stacked layout: the gallery no longer tracks the pitch column's height,
     so give the main photo a natural portrait crop instead */
  .gallery-main { height: auto; min-height: 0; aspect-ratio: 4/5; }
  /* configurator stacks: summary follows the cards, phone bar takes over */
  .cfg-wrap { grid-template-columns: 1fr; }
  .cfg-summary { position: static; }
  .cfg-bar.visible { display: flex; }
  .reviews-grid { grid-template-columns: 1fr; }
  /* hero stacks: visual on top, brand panel below */
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split-visual { order: -1; min-height: 260px; max-height: 320px; }
  .hero-split-visual.contain { min-height: 0; max-height: none; padding: 28px 28px 32px; }
  .hero-split-visual.contain > img { max-height: 300px; }
  .section-header { padding: 48px 0 24px; }
}

/* Phone */
@media (max-width: 600px) {
  /* chip-uri generoase înainte de scroll (5 × 58px + spații = ~318px, ok de la
     ~360px în sus; sub 400px scad la 52px); la scroll bara se strânge vizual
     (scale ~46/58) fără să schimbe layout-ul — vezi nota CLS de la 900px */
  .pill-nav { --nav-shrink: 0.79; top: 12px; padding: 5px; gap: 4px; }
  .pill-nav a,
  .pill-nav a:hover,
  .pill-nav a:focus-visible { height: 58px; width: 58px; }
  .pill-nav a.active,
  .pill-nav a.active:hover,
  .pill-nav a.active:focus-visible { width: 58px; }
  .pill-nav a[href] .nav-logo.nav-logo-icon,
  .pill-nav a[href] .nav-home-logo.nav-logo-icon { max-width: 38px; max-height: 38px; }
  .page { padding-top: 96px; }
  /* pe telefon rândul de brand conține doar logo-ul — îl centrăm sub meniu */
  .brand-row { justify-content: center; }
  .container { padding: 0 16px; }
  /* signature gets too tight beside the wordmark on phones — hide it */
  .brand-sign { display: none; }
  /* wordmark is ~4.7:1, so its 84px height = ~394px wide and overflows phones.
     shrink it so it fits within the brand-row padding without clipping. */
  .site-brand img { height: 64px; }
  main.page::before { height: 68px; }

  .bento-grid { grid-template-columns: 1fr; padding: 14px; }
  .bento-hero, .bento-tiktok-stat, .bento-locale, .bento-reel, .bento-quote,
  .bento-tiktok-head, .tiktok-carousel, .links-grid, .bento-stats,
  .bento-products-head, .bento-cta-final { grid-column: auto; grid-row: auto; }
  .bento-tiktok-head { padding: 22px 18px; }
  /* TikTok header stacks on phones: text block, then eq + CTA in a row below */
  .bento-tiktok-stat { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ttf-aside { width: 100%; justify-content: space-between; }
  .tiktok-eq { width: auto; flex: 1 1 auto; max-width: 58%; }
  /* arrows tuck closer on phones; dots give the bottom room */
  .tiktok-carousel { gap: 4px; }
  .tc-arrow { width: 38px; height: 38px; font-size: 22px; }
  .links-grid { grid-template-columns: 1fr; }
  .bento-hero { min-height: 300px; padding: 24px; }
  /* hero mai aerisit pe telefon: rămâne doar numele + butoanele (bio-ul e
     ascuns vizual, dar rămâne în DOM pentru SEO), totul puțin mai compact.
     Numele stă SUS și butoanele JOS, ca să nu acopere textul din fotografie. */
  .hero-bio { display: none; }
  .hero-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
  .hero-name { font-size: clamp(36px, 11vw, 46px); margin-bottom: 0; }
  /* numele stă sus, unde poza nu are umbrire — oglindim discret gradientul
     și în partea de sus (umbra literelor vine din regula de bază) */
  .bento-hero::after {
    background:
      linear-gradient(to top, rgba(10,8,6,0.8) 0%, rgba(10,8,6,0.28) 45%, rgba(10,8,6,0) 80%),
      linear-gradient(to bottom, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.22) 32%, rgba(10,8,6,0) 55%);
  }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { padding: 10px 20px; font-size: 13px; }
  .bento-quote { padding: 28px 24px; }
  .quote-deco { font-size: 100px; }
  .bento-stats { padding: 24px; gap: 16px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 16px 0; }
  .bento-cta-final { padding: 40px 20px; gap: 20px; }
  /* cele 4 cartonașe social: grilă 2×2 uniformă în loc de 3+1 dezechilibrat */
  .social-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; width: 100%; max-width: 340px;
  }
  .social-btn { width: 100%; height: 84px; }
  .stat-item { padding: 0 16px; }

  .products-grid, .merch-grid { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: 1fr; }
  .source-card { min-height: 240px; }
  /* capturile din aplicație devin un carusel orizontal cu snap (o poză pe ecran,
     următoarea se întrezărește), în loc de trei poze stivuite una sub alta */
  .shots-strip {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .shots-strip::-webkit-scrollbar { display: none; }
  .shots-strip img { flex: 0 0 76%; width: 76%; scroll-snap-align: center; }
  .reviews-grid { grid-template-columns: 1fr; }
  .cerdac-attrs { grid-template-columns: 1fr; }
  .store-btns { flex-direction: column; }
  .store-btn { min-width: 0; }

  .hero-split-visual { min-height: 220px; max-height: 280px; }
  .hero-split-visual.contain > img { max-height: 260px; }

  .price-row { grid-template-columns: 1fr 1fr; gap: 4px; padding: 14px 18px; }
  .price-row.header .price-col-3, .price-row .price-col-3,
  .price-row.header .price-col-4, .price-row .price-col-4 { display: none; }

  /* offer calculator: full-width controls, stacked action row */
  .offer-card, .offer-summary { padding: 20px; }
  /* chip-urile devin grilă cu lățimi egale — nu mai variază după conținut;
     produsele (nume + preț pe două rânduri) stau câte unul pe rând */
  .offer-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #offer-products { grid-template-columns: 1fr; }
  .offer-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .offer-actions .hero-cta { justify-content: center; }
  .offer-custom { gap: 10px; }
  .offer-custom label { flex: 1 1 45%; }
  .offer-custom input { width: 100%; min-width: 0; }
  .offer-send { flex-direction: column; align-items: stretch; }
  .offer-send .hero-cta { justify-content: center; }
  .offer-clear { margin: 0 auto; }

  .contact-band, .order-cta { padding: 28px; }
  .order-cta { padding: 32px 24px; }
  .contact-band { flex-direction: column; align-items: flex-start; }
  .contact-ctas { width: 100%; }

  /* ── RITM VERTICAL UNIFORM ──
     Pe desktop blocurile lasă 60px sub ele și titlurile de secțiune încă 48px
     deasupra — pe telefon se adunau goluri de ~108px, inegale între pagini.
     Standardizăm: 32px sub fiecare bloc + 32px deasupra titlului următor. */
  .section-header { padding: 32px 0 20px; }
  .offer-wrap, .merch-grid, .reviews-grid, .contact-band,
  .order-cta, .cta-panel, .shots-strip { margin-bottom: 32px; }
  .products-grid, .source-grid { padding-bottom: 32px; }
  .cfg-wrap { margin: 16px 0 32px; }
  .cfg-grid { grid-template-columns: 1fr; }
  .cfg-base { flex-direction: column; }
  .cfg-base .cfg-img { flex: none; aspect-ratio: 16/10; min-height: 0; }
  .cfg-summary { padding: 18px 16px 16px; }
  .ecubaj-layout { padding: 28px 0 40px; }
  .cerdac-hero-content { padding: 28px 0; }
  /* pe telefon caruselul se derulează cu degetul — săgețile doar încurcă */
  .cerdac-carousel { margin-bottom: 32px; }
  .carousel-arrow { display: none; }
  .carousel-slide img { height: clamp(240px, 68vw, 320px); }
  .carousel-track {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .ddd-mission { margin: 36px 0 44px; }

  /* footer: totul centrat pe o coloană, nu înșirat la stânga */
  .footer-inner { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-links { gap: 12px 16px; justify-content: center; }
  .footer-social { justify-content: center; }
}

/* Small phone */
@media (max-width: 400px) {
  .site-brand img { height: 52px; }
  main.page::before { height: 56px; }
  /* 5 chip-uri de 58px nu mai încap sub ~360px — revenim la 52px */
  .pill-nav a,
  .pill-nav a:hover,
  .pill-nav a:focus-visible,
  .pill-nav a.active,
  .pill-nav a.active:hover,
  .pill-nav a.active:focus-visible { height: 52px; width: 52px; }
  .pill-nav a[href] .nav-logo.nav-logo-icon,
  .pill-nav a[href] .nav-home-logo.nav-logo-icon { max-width: 34px; max-height: 34px; }
  .page { padding-top: 88px; }
  .hero-name { font-size: clamp(32px, 11vw, 40px); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); padding: 16px 0; }
  .stat-item:last-child { border-bottom: none; }
  .shots-strip img { flex-basis: 84%; width: 84%; }
  .offer-chip { padding: 9px 12px; font-size: 13px; }
  .offer-row { flex-wrap: wrap; }
  .offer-row-price { margin-left: auto; }
  .tiktok-followers { font-size: 48px; }
  .tc-slide { width: 280px; }
  .tc-player { width: 280px; height: 496px; }
}