/* ==========================================================================
   EVA Home — foaia de stil
   ========================================================================== */

:root {
  --ink:        #14161a;
  --ink-2:      #3a3e45;
  --muted:      #6f757e;
  --line:       #e4e1db;
  --line-soft:  #efede8;
  --bg:         #f7f6f3;
  --surface:    #ffffff;
  --surface-2:  #fbfaf8;

  --accent:      #bd5527;
  --accent-dark: #9e441c;
  --accent-soft: #fbeee6;
  --wa:          #1fb455;
  --wa-dark:     #189544;
  --ok:          #1a7f4b;
  --err:         #b3261e;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(20,22,26,.06), 0 2px 6px rgba(20,22,26,.05);
  --shadow:    0 2px 6px rgba(20,22,26,.06), 0 12px 28px rgba(20,22,26,.08);
  --shadow-lg: 0 8px 20px rgba(20,22,26,.10), 0 32px 60px rgba(20,22,26,.14);

  --header-h: 70px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
svg { width: 1em; height: 1em; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.021em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem); }
h3 { font-size: 1.08rem; font-weight: 700; }
p  { margin: 0 0 1em; }

a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

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

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; }

/* ==========================================================================
   Butoane
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 12px 22px; border: 1px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .12s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-lg    { padding: 15px 30px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #000; box-shadow: var(--shadow); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(20,22,26,.03); }

.btn-ghost-light { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); border-color: #fff; }

.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; color: var(--ink-2);
  transition: border-color .15s, color .15s, background .15s;
}
.icon-btn:hover { border-color: var(--ink); color: var(--ink); background: rgba(20,22,26,.03); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.mini {
  padding: 6px 12px; font-size: .8rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mini:hover { border-color: var(--ink); }

/* ==========================================================================
   Antet
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247,246,243,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(247,246,243,.96); }

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 28px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand-mark { width: 34px; height: 34px; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.03rem; font-weight: 800; letter-spacing: -.02em; }
.brand-text small { font-size: .705rem; color: var(--muted); letter-spacing: .02em; }

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  position: relative; text-decoration: none; font-size: .915rem; font-weight: 600;
  color: var(--ink-2); padding: 4px 0; transition: color .15s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav + .header-actions { margin-left: 0; }

.phone-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9rem; font-weight: 700; text-decoration: none; color: var(--ink);
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); transition: border-color .15s;
}
.phone-link:hover { border-color: var(--ink); }
.phone-link svg { width: 16px; height: 16px; color: var(--accent); }

.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  transition: transform .15s var(--ease), background .15s;
}
.cart-btn:hover { background: #000; }
.cart-btn.bump { animation: bump .4s var(--ease); }
@keyframes bump { 0%,100% { transform: scale(1); } 35% { transform: scale(1.16); } }
.cart-btn svg { width: 19px; height: 19px; }
.cart-count {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px;
  display: grid; place-items: center; padding: 0 5px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .72rem; font-weight: 800; border: 2px solid var(--bg);
}

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

.hero { padding: clamp(36px, 5vw, 76px) 0 clamp(40px, 6vw, 88px); }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}

.eyebrow {
  margin: 0 0 12px; font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.hero-copy h1 { margin-bottom: 18px; }
.hero-copy h1 em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(1rem, .95rem + .3vw, 1.14rem); color: var(--ink-2); max-width: 54ch; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 24px; }

.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hero-points li { display: flex; align-items: center; gap: 10px; font-size: .93rem; color: var(--ink-2); font-weight: 500; }
.hero-points svg { width: 18px; height: 18px; flex: none; color: var(--ok); }

.hero-art { position: relative; min-height: 380px; }
.hero-photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--line-soft); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 3/4 este chiar raportul fotografiilor din galerie: asa imaginea principala
   se afiseaza intreaga, fara sa i se taie nimic din compozitie. */
.hero-photo-main { aspect-ratio: 3/4; box-shadow: var(--shadow-lg); }
.hero-photo-a, .hero-photo-b {
  position: absolute; border-radius: var(--r-lg); border: 5px solid var(--bg);
  box-shadow: var(--shadow); overflow: hidden;
}
.hero-photo-a { width: 46%; aspect-ratio: 16/9; left: -9%; bottom: 16%; }
.hero-photo-b { width: 40%; aspect-ratio: 4/3; right: -7%; top: 9%; }

/* ==========================================================================
   Secțiuni
   ========================================================================== */

.section { padding: clamp(48px, 6vw, 92px) 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }

.section-head { max-width: 640px; margin-bottom: clamp(26px, 3.5vw, 44px); }
.section-lede { color: var(--muted); margin: 12px 0 0; font-size: 1.03rem; }

/* ==========================================================================
   Configurator — aranjare
   ========================================================================== */

.cfg {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 448px);
  gap: clamp(20px, 2.6vw, 38px); align-items: start;
}

.cfg-preview { position: sticky; top: calc(var(--header-h) + 18px); }

.preview-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm);
}

.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}

.viewswitch { display: inline-flex; padding: 3px; background: var(--bg); border-radius: 999px; }
.vs-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border: 0; background: transparent; border-radius: 999px;
  font-size: .87rem; font-weight: 700; color: var(--muted); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s;
}
.vs-btn svg { width: 15px; height: 15px; }
.vs-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.preview-tools { display: flex; gap: 7px; }

.stage {
  position: relative;
  /* Inaltimea vine din desen: o scrie redactorul, dupa cat loc cere covorasul
     la latimea data. Pana se incarca, tinem o valoare de pornire. */
  height: var(--stage-h, 60vh);
  max-height: 70vh;
  transition: height .22s var(--ease);
  /* Fara fundal propriu: planul sta direct pe caseta alba, iar marginea goala
     din jurul covorasului nu se mai vede ca o cutie colorata. */
  background: var(--surface);
}

.stage-2d, .stage-3d { position: absolute; inset: 0; }
.stage-2d canvas { width: 100%; height: 100%; display: block; touch-action: manipulation; }
.viewer { position: absolute; inset: 0; }
.viewer canvas { display: block; width: 100% !important; height: 100% !important; }

.stage-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  margin: 0; padding: 6px 13px; border-radius: 999px;
  background: rgba(20,22,26,.72); color: #fff; font-size: .765rem; font-weight: 600;
  backdrop-filter: blur(6px); pointer-events: none; white-space: nowrap;
  /* Este un indiciu de inceput, nu o eticheta permanenta: pe ecran mic ar
     sta peste covoras tocmai cand vrei sa vezi ce ai schimbat. */
  opacity: 0; animation: hintCycle 5.5s var(--ease) .4s forwards;
}
@keyframes hintCycle {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.quickfacts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0; border-top: 1px solid var(--line-soft); background: var(--surface);
}
.quickfacts > div { padding: 13px 14px; border-right: 1px solid var(--line-soft); }
.quickfacts > div:last-child { border-right: 0; }
.quickfacts dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.quickfacts dd { margin: 3px 0 0; font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
@media (max-width: 520px) {
  .quickfacts { grid-template-columns: repeat(2, 1fr); }
  .quickfacts > div:nth-child(2n) { border-right: 0; }
  .quickfacts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

/* ==========================================================================
   Configurator — controale
   ========================================================================== */

.cfg-options { display: grid; gap: 14px; }

.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
}
.step-title { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; font-size: 1.1rem; font-weight: 800; }
.step-num {
  display: grid; place-items: center; width: 27px; height: 27px; flex: none;
  background: var(--ink); color: #fff; border-radius: 999px; font-size: .82rem; font-weight: 800;
}

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }

.label { display: block; font-size: .83rem; font-weight: 700; margin-bottom: 9px; color: var(--ink); }
.hint { margin: 9px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* Include si `input` fara atribut type (implicit text), altfel campurile
   din formularul de comanda raman la latimea implicita a browserului. */
input:not([type]), input[type="text"], input[type="number"],
input[type="tel"], input[type="email"], input[type="password"],
input[type="search"], textarea {
  width: 100%; padding: 11px 13px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: .95rem; transition: border-color .15s, box-shadow .15s;
}
input:not([type=range]):hover, textarea:hover { border-color: #cfccc5; }
input:not([type=range]):focus, textarea:focus {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,22,26,.09);
}
textarea { resize: vertical; min-height: 62px; }

/* chip-uri pentru dimensiuni uzuale */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 8px 13px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip small { display: block; font-size: .68rem; font-weight: 500; opacity: .65; }

/* comutator segmentat */
.segmented { display: inline-flex; padding: 3px; background: var(--bg); border-radius: var(--r); gap: 3px; }
.seg {
  flex: 1; padding: 9px 16px; border: 0; background: transparent; border-radius: 9px;
  font-size: .87rem; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s;
}
.seg.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* dimensiuni */
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.numfield { display: block; }
.numfield .label { margin-bottom: 7px; }
.numfield input[type="range"] { margin-top: 10px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; margin-top: -7px; border-radius: 999px;
  background: var(--ink); border: 3px solid var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .12s var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: var(--line); }
input[type="range"]::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 999px;
  background: var(--ink); border: 3px solid var(--surface); box-shadow: var(--shadow-sm);
}

/* avertisment: piesa nu mai iese dintr-o singură placă de material */
.join-note {
  margin: -8px 0 20px; padding: 11px 13px;
  background: #fff8e6; border: 1px solid #f0dca8; border-radius: var(--r-sm);
  font-size: .82rem; color: #7a5b12; line-height: 1.55;
}

/* limita impusa de placa de material */
.sheet-note {
  margin: -10px 0 20px; font-size: .79rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.sheet-note::before {
  content: ''; width: 13px; height: 13px; flex: none; opacity: .65;
  background: currentColor;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

/* panoul pragului, sub lățime și lungime */
.cut-panel {
  padding: 16px; margin-bottom: 20px;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r);
  display: grid; gap: 13px;
}
.panel-note { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.55; }

/* modele */
.pattern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pattern-card {
  padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s, transform .12s var(--ease);
}
.pattern-card:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.pattern-card.is-active { border-color: var(--ink); box-shadow: 0 0 0 2.5px rgba(20,22,26,.11); }
.pattern-card canvas { width: 100%; height: 58px; display: block; background: var(--bg); }
.pattern-card span { display: block; padding: 8px 10px; font-size: .82rem; font-weight: 700; }

/* mostre de culoare */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  position: relative; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(20,22,26,.14);
  transition: transform .12s var(--ease), border-color .15s;
}
.swatch:hover { transform: scale(1.09); }
.swatch.is-active { border-color: var(--ink); }
.swatch.is-active::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 11px; height: 6px;
  border-left: 2.5px solid; border-bottom: 2.5px solid; transform: rotate(-45deg) translate(1px, -2px);
  color: var(--swatch-check, #fff);
}

/* paleta reală, fotografiată pe material */
.palette { margin-top: 11px; }
.palette summary {
  cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--accent);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.palette summary::-webkit-details-marker { display: none; }
.palette summary::after {
  content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.palette[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.palette img { margin-top: 11px; border-radius: var(--r); border: 1px solid var(--line); }

/* liste de opțiuni cu radio */
.option-rows { display: grid; gap: 8px; }
.option-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, background .15s;
}
.option-row:hover { border-color: var(--ink-2); }
.option-row.is-active { border-color: var(--ink); background: var(--surface-2); }
.option-row input { position: absolute; opacity: 0; pointer-events: none; }
.option-dot {
  flex: none; width: 19px; height: 19px; margin-top: 2px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.option-row.is-active .option-dot { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--ink); }
.option-text { flex: 1; min-width: 0; }
.option-text b { display: block; font-size: .91rem; font-weight: 700; }
.option-text small { display: block; font-size: .795rem; color: var(--muted); line-height: 1.45; margin-top: 1px; }
.option-price { flex: none; font-size: .85rem; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ==========================================================================
   Caseta de preț

   Sta lipita de marginea de jos a coloanei de optiuni cat timp clientul
   configureaza, deci fiecare pixel pe inaltime este luat de la ce se vede
   din covoras si din optiuni. Tot ce nu este pretul, cantitatea sau
   butonul de comanda a fost scos de aici sau pus sub defalcare.
   ========================================================================== */

.pricebox {
  position: sticky; bottom: 14px;
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: 13px 15px; box-shadow: var(--shadow-lg);
}

.pricebox-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 9px;
}
.price-main { min-width: 0; }
.price-value {
  display: block; font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1;
}
.price-note {
  display: block; font-size: .745rem; opacity: .6; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.breakdown { margin-bottom: 9px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 7px; }
.breakdown summary {
  cursor: pointer; font-size: .78rem; font-weight: 700; opacity: .72;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.breakdown summary::-webkit-details-marker { display: none; }
.breakdown summary::before {
  content: '+'; display: grid; place-items: center; width: 16px; height: 16px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 5px; font-size: .78rem;
}
.breakdown[open] summary::before { content: '−'; }
.breakdown ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.breakdown li { display: flex; justify-content: space-between; gap: 14px; font-size: .8rem; }
.breakdown li span { opacity: .72; min-width: 0; }
.breakdown li em { font-style: normal; opacity: .5; display: block; font-size: .73rem; }
.breakdown li b { font-weight: 700; white-space: nowrap; }
.breakdown-note {
  margin: 11px 0 0; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .73rem; opacity: .55; line-height: 1.5;
}

/* Butonul principal ia tot spatiul; WhatsApp ramane alaturi, cu eticheta scurta. */
.pricebox-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pricebox-actions .btn { padding: 11px 18px; }
.pricebox-actions .btn-wa { width: auto; padding: 11px 16px; }
.pricebox .btn-primary { background: #fff; color: var(--ink); }
.pricebox .btn-primary:hover { background: #f0eeea; }

.cfg-error {
  margin: 0 0 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: rgba(255,120,110,.16); color: #ffc9c4; font-size: .82rem; font-weight: 600;
}

/* ==========================================================================
   Avantaje, galerie, pași, FAQ
   ========================================================================== */

/* filmul de la intrare: pe verticala, ca pe telefon */
.why-grid { display: grid; gap: clamp(20px, 3vw, 34px); }

.video-frame {
  position: relative;
  /* Inaltimea porneste de la ecran, nu de la latime: un film 9:16 lasat sa
     creasca dupa latime ar ocupa singur tot telefonul. */
  height: min(52vh, 420px); aspect-ratio: 9 / 16; justify-self: center;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--line-soft); box-shadow: var(--shadow);
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20,22,26,.62); color: #fff; backdrop-filter: blur(4px);
  transition: transform .18s var(--ease), background .18s;
}
.video-play:hover { background: rgba(20,22,26,.8); transform: scale(1.06); }
.video-play svg { width: 26px; height: 26px; margin-left: 3px; }

.video-words h3 { margin-bottom: 10px; font-size: clamp(1.1rem, 2.2vw, 1.45rem); }
.video-words p { margin: 0 0 18px; color: var(--muted); line-height: 1.65; max-width: 52ch; }

/* Pe ecran lat filmul sta in stanga pe toata inaltimea sectiunii, iar textul
   si fisele trec langa el. Altfel ar ramane o coloana inalta si goala. */
@media (min-width: 1080px) {
  .why-grid {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 46px); align-items: start;
  }
  /* Filmul se intinde pe toata inaltimea sectiunii, alaturi de text si fise.
     Latimea e fixa, iar imaginea se decupeaza pe margini — mai bine decat o
     coloana inalta pe jumatate goala. */
  .video-frame {
    grid-row: span 2; align-self: stretch; justify-self: start;
    width: clamp(270px, 25vw, 350px); height: auto; aspect-ratio: auto;
  }
  .video-words { align-self: center; }
  .video-words h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
  .video-words p { max-width: 56ch; font-size: 1.02rem; }
  .why-grid .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .why-grid { justify-items: center; text-align: center; }
  .video-frame { height: min(46vh, 360px); }
  .video-words p { margin-inline: auto; }
}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.feature { padding: 24px; background: var(--bg); border-radius: var(--r-lg); border: 1px solid var(--line-soft); }
.feature-icon {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
  background: var(--accent-soft); color: var(--accent); border-radius: 12px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 7px; }
.feature p { margin: 0; font-size: .91rem; color: var(--muted); line-height: 1.6; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; grid-auto-flow: dense; }
.g-item { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--line-soft); aspect-ratio: 4/3; }
.g-tall { grid-row: span 2; aspect-ratio: 3/4; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.g-item:hover img { transform: scale(1.045); }
.g-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 12px;
  background: linear-gradient(transparent, rgba(20,22,26,.8));
  color: #fff; font-size: .8rem; font-weight: 700;
}

.steps-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; counter-reset: s; }
.steps-flow li { padding: 24px; background: var(--bg); border-radius: var(--r-lg); border: 1px solid var(--line-soft); }
.flow-num {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px;
  background: var(--ink); color: #fff; border-radius: 999px; font-weight: 800; font-size: .92rem;
}
.steps-flow h3 { margin-bottom: 7px; }
.steps-flow p { margin: 0; font-size: .91rem; color: var(--muted); line-height: 1.6; }

.faq { display: grid; gap: 8px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0 18px; transition: border-color .15s;
}
.faq details[open] { border-color: var(--ink-2); }
.faq summary {
  padding: 16px 30px 16px 0; cursor: pointer; font-weight: 700; font-size: .96rem;
  list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq p { margin: 0; padding: 0 0 18px; font-size: .93rem; color: var(--muted); line-height: 1.7; }

/* ==========================================================================
   Bandă de contact
   ========================================================================== */

.cta-band { background: var(--ink); color: #fff; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-inner h2 { margin-bottom: 10px; }
.cta-inner p { margin: 0; opacity: .72; max-width: 46ch; }
.cta-actions { display: flex; gap: 11px; flex-wrap: wrap; }

/* ==========================================================================
   Subsol
   ========================================================================== */

.site-footer { background: #0e1013; color: rgba(255,255,255,.72); padding: 52px 0 26px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; padding-bottom: 34px; }
.footer-brand strong { display: block; color: #fff; font-size: 1.15rem; font-weight: 800; }
.footer-brand p { margin: 5px 0 0; font-size: .87rem; }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 13px; }
.footer-col p { margin: 0 0 7px; font-size: .89rem; }
.footer-col a { text-decoration: none; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
  font-size: .8rem; color: rgba(255,255,255,.45);
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   Coș lateral
   ========================================================================== */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(20,22,26,.42);
  backdrop-filter: blur(2px); opacity: 0; transition: opacity .28s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(430px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg); box-shadow: var(--shadow-lg);
  transform: translateX(102%); transition: transform .34s var(--ease);
}
.drawer.is-open { transform: none; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.drawer-head h2 { font-size: 1.15rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; overscroll-behavior: contain; }
.cart-empty { color: var(--muted); font-size: .92rem; text-align: center; padding: 48px 20px; }

.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cart-item {
  display: grid; grid-template-columns: 78px 1fr; gap: 13px; padding: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.cart-thumb { width: 78px; height: 78px; border-radius: 9px; object-fit: cover; background: var(--line-soft); }
.cart-info { min-width: 0; }
.cart-info h3 { font-size: .92rem; margin-bottom: 3px; }
.cart-spec { margin: 0; font-size: .775rem; color: var(--muted); line-height: 1.55; }
.cart-sketch {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 5px 0 0; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: .72rem; font-weight: 800;
}
.cart-sketch::before { content: '✓'; }
.cart-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.cart-price { font-weight: 800; font-size: .95rem; }
.cart-actions { display: flex; align-items: center; gap: 4px; }
.cart-qty {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px;
}
.cart-qty button { width: 25px; height: 25px; border: 0; background: transparent; cursor: pointer; border-radius: 999px; font-weight: 700; }
.cart-qty button:hover { background: var(--bg); }
.cart-qty span { min-width: 20px; text-align: center; font-size: .84rem; font-weight: 700; }
.cart-remove { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 5px; border-radius: 7px; }
.cart-remove:hover { color: var(--err); background: rgba(179,38,30,.07); }
.cart-remove svg { width: 16px; height: 16px; }

.drawer-foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); background: var(--surface); display: grid; gap: 9px; }
.cart-totals { display: grid; gap: 6px; margin-bottom: 4px; }
.cart-totals div { display: flex; justify-content: space-between; font-size: .88rem; color: var(--muted); }
.cart-totals div.is-total { font-size: 1.1rem; font-weight: 800; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--line); }

/* ==========================================================================
   Fereastra de finalizare
   ========================================================================== */

.modal {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  padding: 20px; background: rgba(20,22,26,.5); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s var(--ease);
  overflow-y: auto;
}
.modal.is-open { opacity: 1; }
.modal-card {
  width: min(940px, 100%); max-height: min(92vh, 900px);
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.985); transition: transform .3s var(--ease);
  overflow: hidden;
}
.modal.is-open .modal-card { transform: none; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.modal-head h2 { font-size: 1.2rem; }

.checkout { overflow-y: auto; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.checkout-main { padding: 22px; display: grid; gap: 16px; }
.checkout-side {
  padding: 22px; background: var(--surface); border-left: 1px solid var(--line);
  display: grid; gap: 10px; align-content: start;
}

.co-block { border: 0; padding: 0; margin: 0; }
.co-block legend {
  padding: 0; margin-bottom: 11px; font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.co-field { display: block; margin-bottom: 11px; }
.co-field > span { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px; }
.co-field small { display: block; margin-top: 4px; font-size: .75rem; color: var(--muted); }
.co-field.has-error input, .co-field.has-error textarea { border-color: var(--err); }

.plan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.plan-card {
  padding: 14px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, background .15s;
}
.plan-card:hover { border-color: var(--ink-2); }
.plan-card.is-active { border-color: var(--ink); background: var(--surface-2); }
.plan-card b { display: block; font-size: .93rem; }
.plan-card .plan-amount { display: block; font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; margin: 5px 0 3px; }
.plan-card small { display: block; font-size: .765rem; color: var(--muted); line-height: 1.45; }

.co-summary { display: grid; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.co-summary .co-line { display: flex; justify-content: space-between; gap: 12px; font-size: .87rem; color: var(--muted); }
.co-summary .co-line b { color: var(--ink); font-weight: 700; }
.co-summary .co-line.is-total { font-size: 1.02rem; font-weight: 800; color: var(--ink); padding-top: 9px; border-top: 1px solid var(--line); }
.co-summary .co-line.is-paynow b { color: var(--accent); font-size: 1.2rem; }
.co-summary .co-items { display: grid; gap: 5px; font-size: .8rem; color: var(--muted); }

.co-error { margin: 0; padding: 10px 13px; background: #fdeceb; color: var(--err); border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; }
.co-provider {
  display: flex; align-items: center; gap: 7px;
  margin: 4px 0 0; font-size: .78rem; font-weight: 700; color: var(--ok);
}
.co-provider::before {
  content: ''; width: 13px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.5v6c0 4.7 3.4 9 8 10.5 4.6-1.5 8-5.8 8-10.5v-6z'/%3E%3C/svg%3E");
  mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.5v6c0 4.7 3.4 9 8 10.5 4.6-1.5 8-5.8 8-10.5v-6z'/%3E%3C/svg%3E");
}
.co-legal { margin: 4px 0 0; font-size: .74rem; color: var(--muted); line-height: 1.55; }
.co-demo { margin: 0; padding: 10px 13px; background: #fff8e6; border: 1px solid #f0dca8; border-radius: var(--r-sm); font-size: .78rem; color: #7a5b12; line-height: 1.5; }

/* ==========================================================================
   Lupa pentru galerie
   ========================================================================== */

.g-item { cursor: zoom-in; }
.g-item::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(20,22,26,.18); opacity: 0;
  transition: opacity .2s var(--ease); pointer-events: none;
}
.g-item:hover::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 140;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(8px, 2vw, 24px); padding: clamp(12px, 3vw, 40px);
  background: rgba(14,16,19,.94); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s var(--ease);
}
.lightbox.is-open { opacity: 1; }

.lb-frame {
  grid-column: 2; margin: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lb-frame img {
  max-width: 100%; max-height: calc(100vh - 150px);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-lg); background: #1c1f24;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: scale(.97); transition: transform .25s var(--ease);
}
.lightbox.is-open .lb-frame img { transform: none; }
.lb-frame figcaption {
  color: rgba(255,255,255,.82); font-size: .9rem; font-weight: 600;
  text-align: center; max-width: 60ch;
}

.lb-close, .lb-nav {
  display: grid; place-items: center; flex: none;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.1);
  transition: background .15s, transform .12s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-nav:active { transform: scale(.94); }

.lb-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; }
.lb-close svg { width: 20px; height: 20px; }
.lb-nav { width: 48px; height: 48px; }
.lb-nav svg { width: 24px; height: 24px; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }

@media (max-width: 620px) {
  /* Pe telefon se schimba fotografia prin glisare, nu prin butoane. */
  .lb-nav { display: none; }
  .lightbox { grid-template-columns: 1fr; }
  .lb-frame { grid-column: 1; }
  .lb-frame img { max-height: calc(100vh - 170px); }
}

/* ==========================================================================
   Notificare
   ========================================================================== */

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 130;
  transform: translate(-50%, 20px); opacity: 0;
  padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .89rem; font-weight: 700;
  box-shadow: var(--shadow-lg); transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Adaptare pe ecrane mici
   ========================================================================== */

@media (max-width: 1080px) {
  .nav { display: none; }

  /* Pe ecran ingust, covorasul ramane lipit sus cat timp derulezi optiunile:
     altfel alegi culoarea sau dimensiunea fara sa vezi ce se intampla.

     `.cfg` devine bloc, nu grila: intr-o grila pe o coloana fiecare element
     sta in propriul rand, iar lipirea nu are pe unde sa se miste. */
  .cfg { display: block; }

  .cfg-preview {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    margin-bottom: 14px;
  }
  .preview-card {
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    border-top: 0;
    box-shadow: 0 10px 22px -12px rgba(20,22,26,.3);
  }
  /* Inaltime legata de ecran, nu de latime. Scena sta lipita in capul paginii
     cat timp se lucreaza la covoras, deci fiecare pixel al ei este un pixel
     luat optiunilor de dedesubt: o tinem pe la un sfert de ecran. */
  .stage { max-height: 42vh; }

  /* Bara de deasupra scenei se subtiaza si ea — pe telefon are de purtat doar
     „2D / 3D” si butonul de trimitere. */
  /* Campurile cu cifra si cursor: eticheta si cifra pe acelasi rand, cursorul
     dedesubt. Unul peste altul ar cere trei randuri pentru fiecare masura si
     ar impinge restul optiunilor afara din ecran. */
  .numfield {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 4px 10px;
  }
  .numfield .label { margin: 0; }
  .numfield input[type="number"] {
    width: 86px; padding: 8px 10px; text-align: center; font-weight: 700;
  }
  .numfield input[type="range"] { grid-column: 1 / -1; margin-top: 2px; }
  .dims { gap: 10px; margin-bottom: 16px; }
  .cut-panel { padding: 14px; gap: 10px; }

  .preview-toolbar { padding: 7px 10px; gap: 8px; }
  .vs-btn { padding: 6px 13px; font-size: .84rem; gap: 5px; }
  .icon-btn { width: 33px; height: 33px; }

  /* Cifrele sunt utile, dar nu merita sa ocupe permanent o treime din ecran —
     dimensiunile se vad oricum in campurile de dedesubt. */
  .quickfacts { display: none; }

  /* Cand atingi un camp, browserul il aduce in ecran — dar l-ar aseza sub
     previzualizarea lipita, unde nu se vede. Ii lasam loc deasupra. */
  .cfg-options input,
  .cfg-options select,
  .cfg-options textarea,
  .step { scroll-margin-top: calc(var(--header-h) + min(38vh, 330px) + 62px); }

  /* Pe telefon caseta de pret sta lipita de marginea de jos si acopera tot
     timpul o parte din pagina. De aceea aici trece pe un singur rand —
     pret si butoane — si renunta la defalcarea pretului. */
  .pricebox {
    bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .breakdown { display: none; }

  .pricebox-top { flex: 0 1 auto; gap: 8px; margin: 0; }
  .price-value { font-size: 1.12rem; }
  .price-note { font-size: .68rem; margin-top: 0; }

  /* Butonul principal ia restul randului; sub 130px ar deveni ilizibil,
     asa ca atunci intreg grupul trece pe randul urmator. */
  .pricebox-actions { flex: 1 1 130px; gap: 6px; }
  .pricebox-actions .btn { padding: 11px 12px; font-size: .86rem; }
  .pricebox-actions .wa-label { display: none; }
  .pricebox-actions .btn-wa { padding: 11px 13px; }

  .cfg-error { flex-basis: 100%; margin: 0; padding: 7px 11px; font-size: .78rem; }
}

/* Pe ecranele inguste pretul pe metru patrat nu merita randul lui: se vede
   oricum in pagina, iar aici ar impinge butonul sub prag. */
@media (max-width: 400px) {
  .price-note { display: none; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { max-width: 460px; margin: 0 auto; min-height: 0; }
  .hero-photo-a { left: -4%; }
  .hero-photo-b { right: -4%; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-side { border-left: 0; border-top: 1px solid var(--line); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  #shapeKind .seg { padding: 9px 8px; font-size: .82rem; }
  .phone-link span { display: none; }
  .phone-link { padding: 9px; }
  .dims, .co-row, .plan-options { grid-template-columns: 1fr; }
  .pattern-grid { grid-template-columns: 1fr 1fr; }
  .hero-photo-a, .hero-photo-b { display: none; }
  .step { padding: 18px 16px; }
  .footer-inner { grid-template-columns: 1fr; gap: 26px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .g-tall { grid-row: span 1; aspect-ratio: 4/3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .stage-hint { opacity: 0; visibility: hidden; }
}