/* Sections */

/* ---------- hero ---------- */
.hero { padding-block: clamp(112px, 14vw, 150px) clamp(32px, 5vw, 56px); position: relative; overflow-x: clip; }
.hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 720px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 72% 28%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%), radial-gradient(40% 40% at 8% 0%, color-mix(in srgb, var(--gold-soft) 70%, transparent), transparent 70%); }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: clamp(24px, 4vw, 56px); }
.hero__copy { display: grid; gap: 24px; justify-items: start; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { display: grid; gap: 10px; margin-block-start: 4px; }
.trust li { display: flex; gap: 10px; align-items: center; font-weight: 550; font-size: .95rem; }
.trust .i { color: var(--success); width: 18px; height: 18px; stroke-width: 2.25; }

.hero__stage { --cw: clamp(200px, 25vw, 300px); position: relative; height: clamp(380px, 44vw, 540px); perspective: 1200px; perspective-origin: 50% 40%; touch-action: pan-y; }
.stage3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.layer { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; transform-style: preserve-3d;
  transform: translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), var(--tz)) rotateZ(var(--rz)); animation: fly 1s var(--ease-out) var(--dl, 0s) both; }
[dir='rtl'] .layer { inset-inline-start: auto; inset-inline-end: 50%; }
@keyframes fly { from { opacity: 0; transform: translate3d(calc(-50% + var(--tx) + 70px), calc(-50% + var(--ty) + 130px), calc(var(--tz) - 260px)) rotateZ(calc(var(--rz) + 16deg)); } to { opacity: 1; } }
.float { transform-style: preserve-3d; animation: float var(--fd, 7s) ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(-7px) rotateX(1.5deg); } to { transform: translateY(9px) rotateX(-1.5deg); } }
.is-paused .float, .is-paused .layer { animation-play-state: paused; }
.lowend .layer:first-child { display: none; }
.lowend .float { animation: none; }
.ui-badge { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: .9rem; white-space: nowrap; }
.ui-badge--wide { padding: 12px 16px; gap: 16px; }
.ui-badge b { display: block; line-height: 1.1; }
.ui-badge small { color: var(--muted); font-weight: 600; font-size: .72rem; }
.ui-badge__pop { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); font-weight: 800; letter-spacing: -.03em; }
.layer--badge .ui-badge b.num { font-size: 1.25rem; }

.strip { margin-block-start: clamp(36px, 6vw, 72px); padding: clamp(18px, 3vw, 28px); }
.strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.strip__grid li { display: flex; gap: 14px; align-items: flex-start; }
.strip__ic { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--dk-gold) 16%, transparent); color: var(--dk-gold); }
.strip b { display: block; font-size: .98rem; line-height: 1.3; margin-block-end: 3px; }
.strip small { display: block; color: var(--dk-muted); font-size: .85rem; line-height: 1.45; }

/* ---------- features ---------- */
.feat .card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.feat .card .link-more { margin-block-start: auto; }
.feat .ladder, .feat .chips-col, .feat .mini-card { width: 100%; }
.chips-col { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-col .chip b { margin-inline-start: 2px; color: var(--gold-text); }
.mini-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; border-radius: 16px; color: #F5EFE6; font-size: 14px;
  background: linear-gradient(135deg, #2B2520, #0F0D0B); border: 1px solid rgba(255, 255, 255, .08); }
.mini-card small { color: var(--gold-bright); font-weight: 700; }
@media (min-width: 961px) { .feat__mid { transform: translateY(26px); } }

/* ---------- how it works (scroll story) ---------- */
.story { padding-block-end: clamp(48px, 6vw, 80px); overflow-x: clip; }
.story .section-head { margin-block-end: 8px; }
.story__track { height: 380vh; position: relative; }
.story__sticky { position: sticky; inset-block-start: 0; height: 100vh; display: grid; align-items: center; }
.story__grid { display: grid; grid-template-columns: 1fr minmax(300px, 440px) 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; padding-block-start: 56px; }
.story__steps { display: grid; gap: 22px; }
.step { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); position: relative;
  background: color-mix(in srgb, var(--surface) 60%, transparent); transition: background .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease-out); }
.step h3 { font-size: 1.02rem; margin-block-end: 4px; }
.step p { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.step__n { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; background: var(--gold-soft); color: var(--gold-text); transition: background .3s, color .3s; }
.step.is-done { border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }
.step.is-active { background: var(--surface); border-color: var(--gold); box-shadow: var(--shadow-md); transform: scale(1.02); }
.step.is-active .step__n, .step.is-done .step__n { background: var(--gold); color: var(--on-gold); }
.story__steps--l .step::after, .story__steps--r .step::before { content: ''; position: absolute; inset-block-start: 50%; width: clamp(20px, 3vw, 48px); border-block-start: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent); }
.story__steps--l .step::after { inset-inline-start: 100%; } .story__steps--r .step::before { inset-inline-end: 100%; }

.scene { --pw: clamp(190px, 21vw, 240px); position: relative; height: min(580px, 74vh); perspective: 1100px; }
.scene__phone { position: absolute; inset-inline: 0; inset-block-start: 0; display: grid; justify-items: center; transform-style: preserve-3d; }
.scene .phone { transform: rotateY(-8deg) rotateX(3deg); }
.scene .screen { transition: none; }
.screen--a { opacity: calc(1 - var(--p3, 0)); } .screen--b { opacity: var(--p3, 0); --ringv: calc(.67 + var(--p3, 0) * .11); }
.tapzone { margin-block: auto; text-align: center; display: grid; gap: 8px; justify-items: center; }
.tapzone .i { width: 3em; height: 3em; color: var(--gold-text); padding: .7em; border-radius: 50%; background: var(--gold-soft); animation: pulse 2s ease-in-out infinite; }
.tapzone small { color: var(--muted); font-size: .8em; line-height: 1.4; }
@keyframes pulse { 50% { box-shadow: 0 0 0 .9em color-mix(in srgb, var(--gold) 18%, transparent); } }
.screen__hello { display: grid; line-height: 1.2; } .screen__hello small { color: var(--muted); }
.screen--b { align-items: center; text-align: center; } .screen--b .screen__head { align-self: stretch; }
.screen__next { display: flex; gap: .6em; align-items: center; padding: .7em .9em; border-radius: 14px; background: var(--gold-soft); color: var(--gold-text); font-weight: 650; font-size: .85em; text-align: start; }
.ripple { position: absolute; inset-inline-start: 50%; inset-block-start: 66%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; pointer-events: none; z-index: 4;
  border: 2px solid var(--gold); transform: scale(calc(.2 + var(--p2, 0) * 1.6)); opacity: calc(var(--p2, 0) * (1 - var(--p2, 0)) * 4); }
.scene__card { position: absolute; inset-inline-start: 50%; inset-block-start: 66%; z-index: 5; transform-style: preserve-3d;
  transform: translate3d(calc(-50% + (1 - var(--p1, 0)) * -190px), calc(-50% + (1 - var(--p1, 0)) * 150px), calc(var(--p1, 0) * 60px)) rotateX(calc((1 - var(--p1, 0)) * 55deg)) rotateZ(calc((1 - var(--p1, 0)) * -22deg + var(--p2, 0) * 6deg));
  opacity: calc(min(1, var(--p1, 0) * 4) * (1 - var(--p4, 0))); }
[dir='rtl'] .scene__card { transform: translate3d(calc(50% + (1 - var(--p1, 0)) * 190px), calc(-50% + (1 - var(--p1, 0)) * 150px), calc(var(--p1, 0) * 60px)) rotateX(calc((1 - var(--p1, 0)) * 55deg)) rotateZ(calc((1 - var(--p1, 0)) * 22deg)); }
.scene__tablet { position: absolute; inset-inline-end: -4%; inset-block-end: 0; width: min(310px, 76%); z-index: 6; opacity: var(--p4, 0);
  transform: translate3d(calc((1 - var(--p4, 0)) * 50px), calc((1 - var(--p4, 0)) * 50px), 0) scale(calc(.85 + var(--p4, 0) * .15)); }
.tab-main { padding: 12px; display: grid; gap: 10px; align-content: start; position: relative; }
.tab-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .tab-head .chip { padding: 2px 8px; font-size: 10px; }
.tab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tab-stats .stat { padding: 8px 10px; } .tab-stats .stat b { font-size: 1rem; }
.tab-pop { position: absolute; inset-inline-end: 10px; inset-block-start: 38px; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-weight: 800; font-size: 13px; transform: scale(var(--p5, 0)) rotate(-6deg); transform-origin: center; box-shadow: 0 8px 20px color-mix(in srgb, var(--gold) 45%, transparent); }
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block-start: 28px; }

@media (max-width: 960px) {
  /* Phones / tablets: the scene stays pinned under the nav while the four step cards scroll beneath it.
     The step that crosses the line under the scene drives the animation (see scroll-story.js). */
  .story__track { height: auto; }
  .story__sticky { position: static; height: auto; display: block; }
  .story__grid { display: flex; flex-direction: column; gap: 0; padding-block-start: 8px; }
  .scene { order: 1; position: sticky; inset-block-start: 74px; z-index: 5; width: 100%; max-width: 420px; margin-inline: auto; height: clamp(300px, 46vh, 350px); --pw: clamp(124px, 38vw, 170px);
    background: linear-gradient(var(--bg) 88%, transparent); padding-block-end: 8px; }
  .scene .phone { transform: rotateY(-6deg) rotateX(2deg); }
  .story__steps--l { order: 2; margin-block-start: 6vh; } .story__steps--r { order: 3; margin-block-start: 9vh; padding-block-end: 22vh; }
  .story__steps--l .step::after, .story__steps--r .step::before { display: none; }
  .story__steps { gap: 9vh; }
  .scene__card { inset-block-start: 63%; } .scene__card .nfc { --w: 128px !important; } .ripple { inset-block-start: 63%; width: 110px; height: 110px; margin: -55px 0 0 -55px; }
  .scene__tablet { inset-inline-end: 2%; inset-block-end: 10px; width: 300px; transform-origin: 100% 100%;
    transform: translate3d(calc((1 - var(--p4, 0)) * 16px), calc((1 - var(--p4, 0)) * 40px), 0) scale(calc((.85 + var(--p4, 0) * .15) * .7)); }
  [dir='rtl'] .scene__tablet { transform-origin: 0 100%; }
}

/* ---------- card customizer ---------- */
.cz { display: grid; grid-template-columns: minmax(300px, 430px) 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.cz__panel { display: grid; gap: 22px; min-width: 0; }
.cz__logo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.swatches button, .swatch-custom { width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); position: relative; transition: transform .2s var(--ease-out), box-shadow .2s; }
.swatches button:hover, .swatch-custom:hover { transform: scale(1.1); }
.swatches button[aria-checked='true'], .swatch-custom.is-on { box-shadow: 0 0 0 2px var(--gold); }
.swatch-custom { background: conic-gradient(#e0b25a, #c8553d, #7a2331, #24334f, #1f4a3a, #e0b25a); cursor: pointer; overflow: hidden; }
.swatch-custom input { position: absolute; inset: -8px; opacity: 0; cursor: pointer; width: 60px; height: 60px; }
.cz__sim { display: flex; align-items: center; gap: 16px; padding-block-start: 18px; border-block-start: 1px solid var(--border); }
.cz__sim-copy { display: grid; gap: 8px; justify-items: start; }
.cz__stage { --czw: clamp(220px, 32vw, 400px); min-width: 0; position: relative; display: grid; place-items: center; min-height: clamp(340px, 40vw, 480px); }
.cz__scene { position: relative; perspective: 1400px; cursor: grab; padding: 48px 32px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cz__scene.drag { cursor: grabbing; }
.cz__scene .nfc { transform: rotateX(var(--crx, 6deg)) rotateY(var(--cry, -14deg)); transition: none; will-change: transform; }
.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.cz__hint { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .85rem; font-weight: 600; margin-block-start: 6px; }
#czMark img { width: 100%; height: 100%; object-fit: contain; border-radius: 22%; background: rgba(255, 255, 255, .92); padding: 2px; }
.muted { color: var(--muted); font-size: .85rem; }
.on-dark .muted { color: var(--dk-muted); }

/* ---------- formats ---------- */
.fmt__c { display: grid; gap: 12px; justify-items: start; align-content: start; min-height: 176px; transition: transform .3s var(--ease-out), border-color .2s; }
.fmt__c:hover { transform: translateY(-4px); border-color: var(--gold); }
@media (min-width: 961px) { .fmt__c:nth-child(4n+2), .fmt__c:nth-child(4n+4) { margin-block-start: 16px; } }
.banner { margin-block-start: clamp(36px, 5vw, 64px); padding: clamp(24px, 4vw, 52px); display: grid; gap: 28px;
  background: radial-gradient(700px 300px at 0% 0%, color-mix(in srgb, var(--dk-gold) 14%, transparent), transparent 65%), var(--dk-bg); }
.banner__head h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-block-end: 8px; }
.banner__head p { color: var(--dk-muted); max-width: 56ch; }
.banner__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.banner .card { display: grid; gap: 12px; align-content: start; background: var(--dk-surface); }
.eyebrow-s { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-gold); font-weight: 700; }
@media (max-width: 860px) { .banner__grid { grid-template-columns: 1fr; } }

/* ---------- why ---------- */
.why__c { display: grid; gap: 10px; align-content: start; }
.why__n { font-size: 3.2rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
@media (min-width: 961px) { .why__c:nth-child(3n+2) { transform: translateY(20px); } }
.center-cta { display: flex; justify-content: center; margin-block-start: clamp(40px, 5vw, 64px); }

/* ---------- WhatsApp ---------- */
.wa { display: grid; grid-template-columns: minmax(250px, 340px) 1fr; gap: clamp(32px, 7vw, 110px); align-items: center; }
.wa__phone { --wpw: clamp(220px, 22vw, 270px); justify-self: center; perspective: 1000px; }
.wa__phone .phone { transform: rotateY(14deg) rotateZ(-3deg); }
[dir='rtl'] .wa__phone .phone { transform: rotateY(-14deg) rotateZ(3deg); }
.wa .phone__screen { color: #1b2a14; } [data-theme='dark'] .wa .phone__screen { color: #e8f3e0; }
.wa .screen__head { color: inherit; }
.wa-avatar { width: 2em; height: 2em; border-radius: 50%; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.wa-bubble--2 { align-self: flex-start; max-width: 62%; }
.wa__copy { display: grid; gap: 18px; justify-items: start; }
.wa__copy > p { color: var(--dk-muted); max-width: 52ch; }
.seglist { display: grid; gap: 12px; width: 100%; margin-block-start: 6px; }
.seglist li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--dk-border); background: var(--dk-surface); transition: border-color .2s, transform .25s var(--ease-out); }
.seglist li:hover { border-color: color-mix(in srgb, var(--dk-gold) 55%, transparent); transform: translateX(4px); }
.seglist b { display: block; font-size: .98rem; } .seglist small { color: var(--dk-muted); font-size: .85rem; }
.seglist__n { font-size: 1.6rem; font-weight: 800; color: var(--dk-gold); letter-spacing: -.03em; }
.note { display: flex; gap: 10px; align-items: flex-start; color: var(--dk-muted); font-size: .88rem; }
.note .i { color: var(--dk-gold); margin-block-start: 2px; }

/* ---------- staff ---------- */
.staff { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.staff__copy { display: grid; gap: 18px; justify-items: start; }
.staff__copy > p { color: var(--muted); max-width: 46ch; }
.checks { display: grid; gap: 12px; margin-block-start: 6px; }
.checks li { display: flex; gap: 12px; align-items: center; font-weight: 550; }
.checks--sm { gap: 10px; font-size: .94rem; }
.check { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--gold-soft); color: var(--gold-text); display: grid; place-items: center; }
.check .i { width: 14px; height: 14px; stroke-width: 2.5; }
.on-dark .check, .on-dark-checks .check { background: color-mix(in srgb, var(--dk-gold) 20%, transparent); color: var(--dk-gold); }
.staff__visual { position: relative; padding-block-end: 36px; }
.terminal { border-radius: var(--r-lg); border: 1px solid var(--dk-border); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--dk-bg); }
.terminal::before { display: none; }
.terminal__bar { display: flex; gap: 7px; align-items: center; padding: 12px 16px; border-block-end: 1px solid var(--dk-border); color: var(--dk-muted); font-size: .8rem; font-weight: 600; }
.terminal__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--dk-surface-2); border: 1px solid var(--dk-border); }
.terminal__bar span { margin-inline-start: 8px; }
.terminal__body { padding: clamp(16px, 2.4vw, 26px); display: grid; gap: 18px; }
.terminal__who { display: flex; gap: 12px; align-items: center; } .terminal__who small { display: block; color: var(--dk-muted); font-size: .8rem; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--dk-gold); color: var(--on-gold); display: grid; place-items: center; font-weight: 800; font-size: .82rem; flex: none; }
.terminal__mid { display: flex; gap: 22px; align-items: center; } .terminal__mid .ladder { flex: 1; }
.terminal__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.alert { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; font-size: .82rem; font-weight: 600; color: #F0A19D; background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.pin { position: absolute; inset-inline-end: -8px; inset-block-end: 0; width: 184px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--dk-border); box-shadow: var(--shadow-lg); background: var(--dk-bg); text-align: center; }
.pin small { color: var(--dk-muted); font-weight: 600; font-size: .75rem; }
.pin::before { display: none; }

/* ---------- ROI ---------- */
.roi { display: grid; grid-template-columns: 1fr minmax(300px, 470px); gap: clamp(28px, 5vw, 80px); align-items: center; }
.roi__copy { display: grid; gap: 14px; justify-items: start; } .roi__copy > p { color: var(--dk-muted); max-width: 48ch; }
.roi__out { margin-block: 14px 4px; padding: 24px 28px; border-radius: var(--r-lg); background: var(--dk-surface); border: 1px solid var(--dk-border); display: grid; gap: 4px; width: 100%; max-width: 480px; }
.roi__out small { color: var(--dk-muted); font-weight: 600; }
.roi__num { display: flex; align-items: baseline; gap: 10px; color: var(--dk-gold); }
.roi__num b { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.roi__num span { font-size: 1.1rem; font-weight: 700; }
.roi__form { display: grid; gap: 22px; }
.roi__form .field label { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.roi__form .field label b { color: var(--dk-gold); }

/* ---------- pricing: card tiers + subscription per barber + budget estimator ---------- */
.pricing { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
.pricing .card { display: grid; gap: 14px; align-content: start; }
.tiers { display: grid; gap: 8px; margin-block: 4px; }
.tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); transition: border-color .25s, background .25s, transform .25s var(--ease-out); }
.tiers li.is-on { border-color: var(--gold); background: var(--gold-soft); transform: translateX(4px); box-shadow: inset 0 0 0 1px var(--gold); }
[dir='rtl'] .tiers li.is-on { transform: translateX(-4px); }
.tiers__range { font-weight: 650; }
.tiers__price { white-space: nowrap; }
.tiers__price b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tiers__price small { color: var(--muted); font-weight: 600; }
.tiers li.is-on .tiers__price small { color: var(--gold-text); }
.pricing__sub { background: var(--dk-bg); color: var(--dk-text); border-color: var(--gold); box-shadow: var(--shadow-lg); }
.pricing__sub p { color: var(--dk-muted); }
.pricing__sub .check { background: color-mix(in srgb, var(--dk-gold) 20%, transparent); color: var(--dk-gold); }
.price-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-big b { font-size: clamp(2.8rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--dk-gold); }
.price-big span { font-weight: 700; font-size: 1.1rem; }
.price-big small { color: var(--dk-muted); font-weight: 600; }
.estimator { margin-block-start: 20px; display: grid; gap: 22px; justify-items: start; }
.estimator__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; width: 100%; }
.estimator .field label { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.estimator .field label b { color: var(--gold-text); }
.estimator__out { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.estimator__out > div { padding: 14px 18px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); display: grid; gap: 4px; }
.estimator__out dt { font-size: .8rem; font-weight: 600; color: var(--muted); }
.estimator__out dd { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.estimator__out b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.estimator__out small { color: var(--muted); font-weight: 600; font-size: .78rem; }
.estimator__out .is-total { background: var(--dk-bg); border-color: var(--gold); }
.estimator__out .is-total dt { color: var(--dk-muted); } .estimator__out .is-total dd { color: var(--dk-gold); }
.center-note { text-align: center; color: var(--muted); font-size: .85rem; margin-block-start: 22px; }
@media (max-width: 860px) {
  .pricing, .estimator__grid { grid-template-columns: minmax(0, 1fr); }
  .estimator__out { grid-template-columns: minmax(0, 1fr); }
  .estimator .btn { width: 100%; }
}

/* ---------- social proof (only rendered if config.clients has entries) ---------- */
.eyebrow-title { text-align: center; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-block-end: 24px; font-weight: 700; }
.social__row { display: flex; flex-wrap: wrap; gap: 28px 40px; justify-content: center; align-items: center; }
.social__row img { height: 40px; width: auto; opacity: .75; filter: grayscale(1); transition: opacity .2s, filter .2s; } .social__row a:hover img { opacity: 1; filter: none; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq .section-head { margin-block-end: 28px; }
.acc h3 { font-size: inherit; letter-spacing: 0; }

/* ---------- final CTA ---------- */
.cta { display: grid; grid-template-columns: 1fr minmax(320px, 500px); gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 5vw, 72px); align-items: center;
  background: radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--dk-gold) 18%, transparent), transparent 60%), var(--dk-bg); }
.cta__copy { display: grid; gap: 16px; align-content: center; } .cta__copy > p { color: var(--dk-muted); font-size: 1.05rem; }
.cta__copy h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.cta__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cta__form .btn, .cta__alt, .cta__ok { grid-column: 1 / -1; }
.cta .field label { color: var(--dk-text); } .cta .err { color: #F08B87; }
.cta__alt { text-align: center; } .cta__alt a { display: inline-flex; gap: 8px; align-items: center; color: var(--dk-muted); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.cta__ok { display: flex; gap: 14px; padding: 16px; border-radius: var(--r-md); background: rgba(46, 158, 107, .14); border: 1px solid rgba(46, 158, 107, .4); }
.cta__ok .i { color: #5FD3A0; } .cta__ok p { color: var(--dk-muted); font-size: .9rem; } .cta__ok a { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { --cw: clamp(190px, 50vw, 260px); height: clamp(360px, 90vw, 460px); margin-block-start: 8px; }
  .strip__grid { grid-template-columns: repeat(2, 1fr); }
  .cz, .wa, .staff, .roi, .cta { grid-template-columns: minmax(0, 1fr); }
  .cz__stage { order: -1; }
  .staff__visual { padding-block-end: 0; }
  .pin { position: relative; inset: auto; margin: 16px auto 0; }
}
@media (max-width: 560px) {
  .strip__grid { grid-template-columns: 1fr; }
  .cta__form { grid-template-columns: 1fr; }
  .terminal__mid { flex-direction: column; align-items: stretch; }
  .hero__stage { height: 400px; }
  .layer--badge { display: none; }
}

/* ---------- 404 + legal pages ---------- */
.nf { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 60px; }
.nf__card { --cw: clamp(240px, 70vw, 340px); perspective: 1000px; margin-block-end: 36px; display: grid; place-items: center; }
.nf h1 { font-size: clamp(3rem, 9vw, 6rem); } .nf p { color: var(--muted); margin-block: 10px 28px; }
.legal { max-width: 760px; margin-inline: auto; padding: 140px var(--gutter) 80px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-block-end: 20px; } .legal h2 { font-size: 1.3rem; margin-block: 2em .5em; } .legal p, .legal li { color: var(--muted); } .legal ul { list-style: disc; padding-inline-start: 1.2em; display: grid; gap: 6px; }
.review-note { padding: 14px 18px; border-radius: var(--r-md); background: var(--gold-soft); color: var(--gold-text); font-weight: 600; font-size: .92rem; margin-block-end: 24px; }

@media (max-width: 560px) {
  .cz__stage { --czw: min(260px, 74vw); }
  .cz__scene { padding: 36px 6px; }
}

@media (max-width: 620px) {
  .fmt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fmt__c { min-height: 0; padding: 16px; gap: 10px; }
  .fmt__c h3 { font-size: .98rem; }
  .fmt__c .chip { font-size: .76rem; }
}