/* ==========================================================================
   FEVENT — Marketing surfaces (home, templates, pricing)
   Editorial, airy, the invitation is the hero.
   ========================================================================== */

/* ---------- Hero ---------- */
/* The hero is a still life: a warm wall, a marble top (procedural SVG, images/app/hero-marble.svg) whose
   edge runs slightly uphill to the right, a soft leaf shadow in the top-left corner, and the phone standing on
   the marble with its own shadows (.iphone-shadow). No photos, nothing to licence. */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 96px); background: radial-gradient(70% 60% at 22% 8%, rgba(255,255,255,0.5), transparent 70%), linear-gradient(170deg, #F8F4EE 0%, #EEE6DA 45%, #E1D6C5 100%); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #F8F4ED url(../images/app/hero-marble.svg) center bottom / cover no-repeat;
    /* the table edge: ~84% down on the left, ~64% on the right, feathered over ~3% (depth of field) */
    -webkit-mask-image: linear-gradient(172deg, transparent 70%, #000 72%); mask-image: linear-gradient(172deg, transparent 70%, #000 72%); }
.hero::after { content: ''; position: absolute; left: -90px; top: -90px; width: 560px; height: 470px; z-index: 0; pointer-events: none; background: url(../images/app/hero-leaves.svg) 0 0 / contain no-repeat; filter: blur(12px); opacity: 0.17; transform: rotate(-6deg); }
@media (max-width: 599px) { .hero::after { width: 340px; height: 290px; left: -90px; top: -70px; filter: blur(8px); opacity: 0.16; } }
.hero .container { position: relative; z-index: 1; display: grid; gap: clamp(32px, 6vw, 64px); align-items: center; }
.hero-copy { max-width: 560px; }
.hero-copy h1 { margin-top: var(--sp-4); font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.6rem, 2rem + 3.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.01em; }
.hero-copy h1 em { font-style: italic; color: var(--accent); }
.hero-copy .lead { margin-top: var(--sp-5); max-width: 480px; }
.hero-actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-actions .btn { min-width: 180px; }
.hero-trust { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-small); color: var(--text-3); }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .icon { width: 15px; height: 15px; color: var(--success); }
.hero-visual { position: relative; display: flex; justify-content: center; }
@media (min-width: 960px) { .hero .container { grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); } .hero-visual { justify-content: flex-end; } .hero-copy { padding-right: var(--sp-6); } }

/* Phone device frame */
.device { position: relative; width: min(320px, 82vw); aspect-ratio: 9 / 19; border-radius: 44px; background: #1b1a18; padding: 10px; box-shadow: var(--sh-4), inset 0 0 0 1px rgba(255,255,255,0.08); }
.device::before { content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; background: #1b1a18; border-radius: 14px; z-index: 3; }
.device-screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #fff; position: relative;
    /* rounded overflow:hidden around a scrolling iframe is repainted every frame on mobile WebKit/Blink;
       promote to its own compositor layer and clip with a mask instead → smooth scrolling inside */
    -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; transform: translateZ(0); contain: paint; }
.device-screen iframe { transform: translateZ(0); }
.device-lg { width: min(360px, 86vw); }
.hero-float { position: absolute; background: var(--surface-elev); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 10px 12px; font-size: var(--fs-small); display: flex; align-items: center; gap: 10px; z-index: 4; }
.hero-float strong { display: block; font-size: var(--fs-label); }
.hero-float .icon-tile { width: 36px; height: 36px; }
/* positioned inside .iphone (see the 3D block below): offsets relative to the phone body */
.hero-float.f1 { left: calc(var(--pw) * -0.62); top: 21%; }
.hero-float.f2 { right: calc(var(--pw) * -0.44); bottom: 21%; }
@media (min-width: 1280px) { .hero-float.f2 { right: calc(var(--pw) * -0.56); } }
@media (max-width: 480px) { .hero-float { display: none; } }

/* Mini invitation used inside devices (marketing only) */
.mini {
    --m-bg: #FFFDF7; --m-surface: #FAF5EA; --m-ink: #3A3127; --m-accent: #B08A4A; --m-muted: #8A7B66;
    height: 100%; overflow: hidden; background: var(--m-bg); color: var(--m-ink); font-family: var(--font-sans); position: relative;
}
.mini-scroll { animation: miniScroll 16s var(--ease) infinite; }
@keyframes miniScroll { 0%, 18% { transform: translateY(0); } 38%, 52% { transform: translateY(-34%); } 72%, 86% { transform: translateY(-62%); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mini-scroll { animation: none; } }
.mini-hero { padding: 56px 24px 34px; text-align: center; background: linear-gradient(180deg,#F7EFDE 0%,#FFFDF7 100%); }
.mini-eyebrow { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-accent); font-weight: 600; }
.mini-names { font-family: var(--font-serif); font-size: 34px; line-height: 1.05; margin-top: 14px; font-weight: 500; }
.mini-names em { display: block; font-style: italic; font-size: 22px; color: var(--m-accent); font-weight: 400; margin: 2px 0; }
.mini-rule { width: 56px; height: 1px; background: var(--m-accent); margin: 16px auto; opacity: 0.7; }
.mini-date { font-size: 12px; letter-spacing: 0.06em; }
.mini-section { padding: 22px 22px; border-top: 1px solid rgba(0,0,0,0.05); }
.mini-section h5 { font-family: var(--font-serif); font-size: 17px; font-weight: 500; margin-bottom: 10px; }
.mini-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mini-count div { background: var(--m-surface); border-radius: 8px; padding: 8px 4px; text-align: center; }
.mini-count b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.mini-count span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--m-muted); }
.mini-loc { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; }
.mini-loc .icon { width: 16px; height: 16px; color: var(--m-accent); margin-top: 2px; }
.mini-loc b { display: block; font-size: 13px; }
.mini-loc span { color: var(--m-muted); }
.mini-map { margin-top: 10px; height: 64px; border-radius: 8px; background: linear-gradient(135deg,#E8E3D8,#F2EEE5); position: relative; overflow: hidden; }
.mini-map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px); background-size: 16px 16px; }
.mini-map::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--m-accent); box-shadow: 0 0 0 5px rgba(176,138,74,0.25); transform: translate(-50%,-50%); }
.mini-btn { display: block; text-align: center; margin-top: 12px; padding: 11px; border-radius: 10px; background: var(--m-ink); color: #fff; font-size: 12px; font-weight: 600; }
.mini-rsvp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mini-rsvp div { padding: 12px 8px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); text-align: center; font-size: 12px; font-weight: 600; background: #fff; }
.mini-rsvp div.on { border-color: var(--m-ink); box-shadow: 0 0 0 1px var(--m-ink); }
.mini-field { height: 34px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); margin-top: 8px; background: #fff; display: flex; align-items: center; padding: 0 10px; font-size: 11px; color: var(--m-muted); }

/* ---------- Section frames ---------- */
.section-label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.section-label::before { content: ''; width: 24px; height: 1px; background: var(--accent); }
.section-title { margin-top: var(--sp-3); font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; }
.section-title em { font-style: italic; color: var(--accent); }
.section-intro { margin-top: var(--sp-4); color: var(--text-2); font-size: var(--fs-title); max-width: 560px; }

/* ---------- Statement band ---------- */
.statement { background: var(--ink); color: #fff; padding: clamp(48px, 7vw, 96px) 0; }
.statement p { font-family: var(--font-serif); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.75rem); line-height: 1.25; max-width: 900px; font-weight: 400; }
.statement p em { font-style: italic; color: #D6B27C; }
.statement small { display: block; margin-top: var(--sp-5); font-size: var(--fs-label); color: rgba(255,255,255,0.6); }

/* ---------- Event category cards ---------- */
.cat-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.cat-card .cat-art { aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden; }
.cat-card .cat-art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.cat-card:hover .cat-art img { transform: scale(1.03); }
.cat-card .cat-body { padding: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cat-card h3 { font-size: var(--fs-title); }
.cat-card p { font-size: var(--fs-small); color: var(--text-3); margin-top: 2px; }
.cat-card .icon { color: var(--text-3); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.cat-card:hover .icon { transform: translateX(3px); color: var(--ink); }

/* ---------- How it works ---------- */
.steps { display: grid; gap: var(--sp-6); counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); } }
.step { position: relative; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-serif); font-size: 2.25rem; line-height: 1; color: var(--accent); font-weight: 500; display: block; margin-bottom: var(--sp-4); }
.step h3 { font-size: var(--fs-h3); }
.step p { margin-top: var(--sp-2); color: var(--text-2); }

/* ---------- Template showcase (staggered) ---------- */
.showcase { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); } .showcase > *:nth-child(even) { transform: translateY(var(--sp-8)); } }
.tpl-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.tpl-card:hover { box-shadow: var(--sh-3); border-color: var(--border-strong); }
.tpl-thumb { position: relative; aspect-ratio: 9 / 14; background: var(--surface-2); overflow: hidden; }
.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.tpl-card:hover .tpl-thumb img { transform: scale(1.025); }
.tpl-thumb .tpl-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: var(--sp-4); background: linear-gradient(180deg, transparent 55%, rgba(31,29,26,0.55)); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.tpl-card:hover .tpl-overlay, .tpl-card:focus-within .tpl-overlay { opacity: 1; }
.tpl-overlay .btn { background: #fff; color: var(--ink); border-color: #fff; }
.tpl-body .tpl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
@media (hover: none) { .tpl-thumb .tpl-overlay { display: none; } }
.tpl-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
.tpl-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.tpl-body h3 { font-size: var(--fs-body); font-weight: 600; }
.tpl-body .meta { font-size: var(--fs-small); color: var(--text-3); display: flex; gap: 6px; align-items: center; }
.tpl-body .meta .dot { width: 3px; height: 3px; background: var(--border-strong); }
.tpl-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.tpl-actions .btn { flex: 1; min-width: 0; }
/* Mobile: preview becomes a compact icon button so "Folosește" stays readable */
.tpl-actions .act-preview { flex: 0 0 auto; width: 36px; padding: 0; }
.tpl-actions .act-preview .act-label { display: none; }
.tpl-actions .act-preview .icon { width: 17px; height: 17px; }
@media (min-width: 700px) {
    .tpl-actions .act-preview { flex: 1; width: auto; padding: 0 14px; }
    .tpl-actions .act-preview .act-label { display: inline; }
    .tpl-actions .act-preview .icon { display: none; }
}

/* ---------- Feature groups ---------- */
.features { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.feature .icon-tile { margin-bottom: var(--sp-4); }
.feature h3 { font-size: var(--fs-h3); font-family: var(--font-serif); font-weight: 500; }
.feature h3 span { font-family: var(--font-sans); font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; font-weight: 600; }
.feature ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.feature li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: var(--fs-label); line-height: 1.5; }
.feature li .icon { width: 16px; height: 16px; color: var(--success); margin-top: 3px; }

/* ---------- Interactive demo (RSVP + dashboard mock) ---------- */
.demo { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 960px) { .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); } }
.demo-copy h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.demo-copy p { margin-top: var(--sp-3); color: var(--text-2); }
.demo-copy ul { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.demo-copy li { display: flex; gap: 12px; align-items: flex-start; }
.demo-copy li .icon { color: var(--accent); margin-top: 2px; }
.demo-copy li strong { display: block; font-size: var(--fs-label); }
.demo-copy li span { font-size: var(--fs-small); color: var(--text-2); }
.dash-mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; }
.dash-mock .dm-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.dash-mock .dm-head strong { font-family: var(--font-serif); font-size: var(--fs-title); font-weight: 500; }
.dash-mock .dm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
.dash-mock .dm-stats div { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3); }
.dash-mock .dm-stats b { display: block; font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dash-mock .dm-stats span { font-size: var(--fs-caption); color: var(--text-3); }
.dash-mock .dm-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-label); }
.dash-mock .dm-row .who { flex: 1; min-width: 0; }
.dash-mock .dm-row .who b { display: block; }
.dash-mock .dm-row .who span { font-size: var(--fs-caption); color: var(--text-3); }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: var(--sp-4); align-items: stretch; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); }
.plan.is-recommended { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh-3); }
.plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.plan-name { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.plan-tagline { margin-top: var(--sp-2); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-title); color: var(--ink); }
/* The rule under the price — and the CTA below it — must sit on the same line in every
   card, even when one tagline wraps to fewer lines than the others. Four across, the
   cards share their row tracks via subgrid; in the two-column band a two-line floor on
   the tagline does the same job without fighting the grid's row-gap. */
@media (min-width: 720px) { .plans .plan-tagline { min-height: calc(2 * var(--lh-normal) * 1em); } }
@supports (grid-template-rows: subgrid) {
    @media (min-width: 1100px) {
        .plans { row-gap: 0; }
        .plans > .plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
        .plans .plan-tagline { min-height: 0; }
    }
}
.plan-price { margin-top: var(--sp-5); display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.plan-price span { color: var(--text-2); font-size: var(--fs-label); }
.plan-validity { font-size: var(--fs-small); color: var(--text-3); margin-top: 6px; }
.plan-features { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); display: grid; gap: 10px; flex: 1; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-label); color: var(--text); line-height: 1.45; }
.plan-features li .icon { width: 16px; height: 16px; color: var(--success); margin-top: 3px; flex: none; }
.plan-features li.off { color: var(--text-3); }
.plan-features li.off .icon { color: var(--border-strong); }
.plan .btn { margin-top: var(--sp-6); }

/* Comparison (desktop table / mobile grouped) */
.compare-table { display: none; }
@media (min-width: 860px) {
    .compare-table { display: table; }
    .compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--fs-label); vertical-align: middle; }
    .compare-table th { font-weight: 600; }
    .compare-table thead th { font-size: var(--fs-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); border-bottom-width: 2px; }
    .compare-table thead th small { display: block; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--text-3); margin-top: 2px; }
    .compare-table td:not(:first-child), .compare-table th:not(:first-child) { text-align: center; width: 17%; }
    .compare-table .group td { background: var(--surface-2); font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding-block: 10px; }
    .compare-table .rec { background: rgba(139,94,52,0.04); }
}
.compare-mobile { display: grid; gap: var(--sp-3); }
@media (min-width: 860px) { .compare-mobile { display: none; } }
.compare-mobile details { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.compare-mobile summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); font-weight: 600; min-height: 52px; }
.compare-mobile summary::-webkit-details-marker { display: none; }
.compare-mobile summary .icon { transition: transform var(--dur-2) var(--ease); color: var(--text-3); }
.compare-mobile details[open] summary .icon { transform: rotate(180deg); }
.compare-mobile .cm-row { display: grid; grid-template-columns: 1.15fr repeat(var(--cm-cols, 3), minmax(0, 1fr)); gap: 4px; padding: 10px var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-caption); align-items: center; }
.compare-mobile .cm-row > span:first-child { color: var(--text-2); }
.compare-mobile .cm-row > span:not(:first-child) { text-align: center; font-weight: 500; hyphens: auto; display: flex; align-items: center; justify-content: center; }
/* the check/minus icons are display:block (global reset) — keep them centred in their column, mobile and desktop */
.compare-mobile .cm-row .icon, .compare-table td .icon { display: inline-block; vertical-align: middle; margin-inline: auto; }.compare-mobile .cm-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-3); background: var(--surface-2); }
.yes { color: var(--success); display: inline-flex; }
.no { color: var(--border-strong); display: inline-flex; }

/* FAQ */
.faq { display: grid; gap: var(--sp-2); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; font-weight: 600; font-size: var(--fs-title); min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 var(--sp-5); color: var(--text-2); max-width: 720px; line-height: var(--lh-relaxed); }

/* Final CTA */
.cta-final { background: var(--surface-2); border-top: 1px solid var(--border); padding: clamp(56px, 8vw, 112px) 0; text-align: center; }
.cta-final h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
.cta-final p { margin: var(--sp-4) auto 0; color: var(--text-2); max-width: 520px; font-size: var(--fs-title); }
.cta-final .actions { margin-top: var(--sp-8); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Template gallery page ---------- */
/* One compact head: the title on the left, the filters on the right, a count line
   under both. The old page spent a screen and a half on prose before the first
   card; a catalogue is sold by its cards, not by its introduction. */
.gal-head { padding: clamp(28px, 4vw, 44px) 0 0; }
.gal-head-row { display: flex; flex-direction: column; gap: var(--sp-4); }
.gal-title h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.05; letter-spacing: -0.01em; }
.gal-title p { color: var(--text-2); margin-top: var(--sp-2); max-width: 560px; font-size: var(--fs-body); }
.gal-filters { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.gal-filters .chips { flex: 1 1 auto; padding-block: 2px; padding-right: var(--sp-2); }
/* chip-urile derulează orizontal pe telefon; ultimul nu trebuie să pară tăiat de butonul de favorite */
@media (max-width: 700px) { .gal-filters .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }
.gal-filters .chip { min-height: 40px; padding: 0 16px; }
.mood-select { position: relative; flex: none; display: inline-flex; align-items: center; }
.mood-select select {
    appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 38px 0 16px; max-width: 220px;
    border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
    font: inherit; font-size: var(--fs-label); font-weight: 500; color: var(--text); cursor: pointer;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: border-color var(--dur-1) var(--ease);
}
.mood-select select:hover { border-color: var(--border-strong); }
.mood-select select:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.mood-select.is-set select { border-color: var(--ink); }
.mood-select .icon { position: absolute; right: 13px; width: 16px; height: 16px; pointer-events: none; color: var(--text-2); }
.gal-filters .fav-toggle { flex: none; width: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.gal-filters .fav-toggle.is-active { background: #FBEFF1; border-color: #B4566A; color: #B4566A; }
.gal-filters .fav-toggle.is-active .icon { fill: currentColor; }
/* On a phone the season picker collapses to its chevron: the native picker still
   opens, and the chips keep the width. */
@media (max-width: 899px) {
    .mood-select select { width: 40px; padding: 0; color: transparent; }
    .mood-select .icon { right: 11px; color: var(--ink); }
}
@media (min-width: 900px) {
    .gal-head-row { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); }
    .gal-filters { flex: none; max-width: 64%; justify-content: flex-end; }
    .gal-filters .chips { flex: none; }
}
.gal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--text-3); }
.gal-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
@media (max-width: 599px) { .gal-meta .sep { display: none; } .gal-meta > span:last-child { flex-basis: 100%; } }
.gal-meta a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.gal-meta a:hover { color: var(--ink); }
.gallery-count { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; }

/* Panoul-mostră din pagina de organizare: câteva cifre din aplicație, ca să se vadă la ce te uiți. */
.pl-peek { justify-self: center; width: min(360px, 100%); background: var(--surface-elev); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--sh-3); padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.pl-peek-head { font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.pl-peek-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pl-peek-kpis div { background: var(--surface-2); border-radius: var(--r-md); padding: 10px 12px; }
.pl-peek-kpis b { display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.pl-peek-kpis span { display: block; font-size: var(--fs-caption); color: var(--text-3); margin-top: 2px; }
.pl-peek-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-small); color: var(--text-2); border-top: 1px solid var(--border); padding-top: 8px; }
.pl-peek-row span:last-child { color: var(--accent); white-space: nowrap; }

/* Secțiunea scurtă de pe pagina principală: text pe stânga, cardul de masă pe dreapta. */
.gal-home { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 900px) { .gal-home { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); } }
.gal-home-list { display: grid; gap: var(--sp-3); }
.gal-home-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.gal-home-list .icon { width: 18px; height: 18px; color: var(--success); flex: none; margin-top: 3px; }

/* ---------- Cardul de masă cu QR (pagina galeriei foto) ----------
   Nu e o poză, e chiar cardul pe care îl vor primi invitații pe masă. */
.gq-card { justify-self: center; width: min(320px, 100%); background: var(--surface-elev); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: var(--sh-3); padding: clamp(20px, 3vw, 28px); text-align: center; display: grid; gap: 10px; transform: rotate(-1.4deg); }
.gq-eyebrow { font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.gq-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.gq-qr { display: block; width: min(190px, 62%); margin: 6px auto 0; padding: 10px; background: #fff; border-radius: 12px; border: 1px solid var(--border); }
.gq-qr svg { display: block; width: 100%; height: auto; }
.gq-note { font-size: var(--fs-small); color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .gq-card { transform: none; } }

/* ---------- ȘINA DE SECȚIUNI (pagina de modele) ----------
   Ascunsă în afara ecranului, cu mânerul la vedere pe marginea din dreapta; se deschide
   la atingere. Aceeași sticlă ca bara de sus, ca să pară parte din aceeași aplicație. */
.rail { --rail-w: 216px; position: fixed; right: 0; top: 50%; z-index: 44; display: flex; align-items: center; flex-direction: row-reverse;
    transform: translate(var(--rail-w), -50%); transition: transform .32s var(--ease); }
.rail.is-open { transform: translate(0, -50%); }
.rail[hidden] { display: none; }
.rail-body { width: var(--rail-w); max-height: min(66vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    background: rgba(255,255,255,0.78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--border); border-right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: var(--sh-3);
    padding: 8px; display: grid; gap: 2px; }
.rail-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent;
    border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--text); cursor: pointer; min-height: 38px; }
.rail-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item .n { font-size: var(--fs-caption); color: var(--text-3); }
.rail-item:hover { background: rgba(31,29,26,0.06); }
.rail-item.is-current { background: var(--ink); color: #fff; }
.rail-item.is-current .n { color: rgba(255,255,255,0.7); }
.rail-item.is-other { color: var(--text-2); }
.rail-sep { display: block; height: 1px; background: var(--border); margin: 6px 8px; }
.rail-handle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    width: 30px; padding: 14px 0; border: 1px solid var(--border); border-right: 0; border-radius: 12px 0 0 12px;
    background: rgba(255,255,255,0.78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    color: var(--text-2); box-shadow: var(--sh-2); }
.rail-handle .icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.rail.is-open .rail-handle .icon { transform: rotate(180deg); }
.rail-handle-label { writing-mode: vertical-rl; font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; }
.rail-handle:hover { color: var(--ink); }
@media (max-width: 560px) { .rail { --rail-w: 190px; } .rail-body { max-height: 60vh; } }
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } .rail-handle .icon { transition: none; } }

/* The row of doors under the collections: the classic models, the simple
   invitations and the customer's own design — all three products on one screen. */
.gal-more { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 800px) { .gal-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more-card { position: relative; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2), transform var(--dur-2) var(--ease); }
.more-card:hover { box-shadow: var(--sh-3); border-color: var(--border-strong); transform: translateY(-2px); }
.more-card .icon-tile { width: 52px; height: 52px; border-radius: 50%; }
.more-card .icon-tile .icon { width: 24px; height: 24px; }
.more-body { flex: 1 1 auto; min-width: 0; }
.more-card h3 { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.more-card p { font-size: var(--fs-small); color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.more-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.more-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the door */
.more-card p a { position: relative; z-index: 1; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.more-arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink); transition: background var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease); }
.more-arrow .icon { width: 18px; height: 18px; }
.more-card:hover .more-arrow { background: var(--ink); color: #fff; transform: translateX(2px); }

/* Section head of a filtered gallery section (classic models): title + its own count */
.gallery-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); }
.gallery-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* rândul-teaser de pe pagina colecțiilor: cinci modele, restul pe modele-clasice.html */
@media (min-width: 1100px) { .gallery-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gallery-empty { grid-column: 1 / -1; }

/* Preview page */
.preview-bar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding-top: var(--safe-top); }
.preview-bar .container { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.preview-bar .who { min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
.preview-bar .who strong { font-size: var(--fs-label); }
.preview-bar .who span { font-size: var(--fs-caption); color: var(--text-3); }
.preview-stage { background: var(--surface-2); min-height: calc(100dvh - 56px); }
.preview-frame { width: 100%; height: calc(100dvh - 56px - var(--safe-top)); border: 0; display: block; background: #fff; }
@media (min-width: 900px) {
    .preview-stage { display: grid; grid-template-columns: 1fr 360px; }
    .preview-frame-wrap { padding: var(--sp-8) var(--sp-6); display: flex; justify-content: center; align-items: flex-start; }
    .preview-frame { max-width: 460px; height: min(860px, calc(100vh - 56px - 64px)); border-radius: 36px; border: 10px solid #1b1a18; box-shadow: var(--sh-4); }
    .preview-side { border-left: 1px solid var(--border); background: var(--surface); padding: var(--sp-8) var(--sp-6); position: sticky; top: 56px; height: calc(100vh - 56px); overflow: auto; }
}
.preview-side h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1.75rem; }
.preview-side .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.preview-side .tags span { font-size: var(--fs-caption); padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); }
.preview-side p { color: var(--text-2); margin-top: var(--sp-4); }
.preview-side .swatches { display: flex; gap: 8px; margin-top: var(--sp-4); }
.preview-side .swatches span { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); }
.preview-sticky { position: sticky; bottom: 0; z-index: 40; padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + var(--safe-bottom)); background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); display: flex; gap: var(--sp-2); }
.preview-sticky .btn { flex: 1; }
@media (min-width: 900px) { .preview-sticky { display: none; } }


/* ---------- Template Engine 2.0 — family (collection) cards ---------- */
.fam-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }
/* The gallery page: three across at most, the same as the homepage — big cards,
   so the laptop-and-phone showcase is read as a picture, not as a thumbnail. */
.fam-grid-5 { gap: var(--sp-5); }
@media (min-width: 800px) { .fam-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* two columns: the 3D showcase wants the room */
@media (min-width: 1100px) { .fam-grid-5 { gap: var(--sp-6); } }
.fam-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-1); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2); }
.fam-card:hover { box-shadow: var(--sh-3); border-color: var(--border-strong); transform: translateY(-2px); }
.fam-card.is-highlight { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--sh-3); }
/* The hero is a laptop-and-phone showcase, which is a landscape composition —
   the old portrait crop would have cut the devices in half. 4:3 is the ratio the
   mockup is generated at, so `contain` is never needed and nothing is trimmed. */
.fam-visual { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }   /* the showcase photograph's ratio (images/app/showcase-frame.json: 1536 × 864) */
.fam-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--dur-3) var(--ease), opacity .3s; }
.fam-card:hover .fam-visual img { transform: scale(1.03); }
/* Over the showcase: the heart top-left, the badges top-right — the stage is
   quiet in both corners, the screen starts lower. Frosted so they sit on any theme. */
.fam-badges { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: calc(100% - 60px); }
.fam-badges .badge { background: rgba(255,255,255,0.88); color: var(--ink); box-shadow: var(--sh-1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fam-badges .badge-ink { background: rgba(31,29,26,0.84); color: #fff; }
.fam-badges .badge-new { background: var(--accent); color: #fff; }
.fam-fav { position: absolute; top: 10px; left: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-1); transition: color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease); }
.fam-fav:hover { color: var(--ink); transform: scale(1.06); }
.fam-fav .icon { width: 16px; height: 16px; }
.fam-fav.is-on { color: #B4566A; border-color: #EBC7CF; background: #FBEFF1; }
.fam-fav.is-on .icon { fill: currentColor; }
.fam-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; }
.fam-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.fam-head h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.005em; }
.fam-n { font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
.fam-types { font-size: var(--fs-caption); color: var(--text-3); letter-spacing: 0.01em; }
.fam-tagline { font-size: var(--fs-small); color: var(--text-2); line-height: 1.5; }
.fam-themes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.fam-sw { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: border-color var(--dur-1), background var(--dur-1); }
.fam-sw i { width: 16px; height: 16px; border-radius: 50%; background: var(--sw-bg); border: 1px solid rgba(0,0,0,0.08); position: relative; }
.fam-sw i::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--sw-ac); }
.fam-sw:hover, .fam-sw.is-on { border-color: var(--ink); color: var(--ink); }
.fam-sw.is-on { background: var(--surface-2); }
.fam-sw.fam-more { padding: 3px 9px; font-weight: 600; }
.fam-actions { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); } /* always at the bottom of the card, whatever the theme count */
.fam-actions .btn { flex: 1; border-radius: var(--r-md); }
.attr-landing { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.attr-landing > div { flex: 1 1 280px; }

/* ---------- Homepage: live theme switcher in a 3D iPhone 17 Pro Max ----------
   The phone is a real CSS 3D object, not a flat frame: 40 stacked rounded slices
   (.iphone-body i) give the body its 8.75 mm depth and rounded corners when seen
   from the side, four planes (.iphone-side) carry the brushed-aluminium sides, and
   the front face holds the live invitation iframe. Every dimension derives from
   --pw (device width, 78 mm = 320 px) so the whole thing scales as one piece.
   Rotation: --rx (lean back), --ry (turn; negative shows the right edge with the
   side button + Camera Control), --rz (in-plane tilt, clockwise). */
.hero-live { --pw: min(320px, 78vw); --rx: 8deg; --ry: -26deg; --rz: 13deg; --sa: -11deg;
    --w: var(--pw); --h: calc(var(--pw) * 2.095); --d: calc(var(--pw) * 0.112); --r: calc(var(--pw) * 0.165); --bz: calc(var(--pw) * 0.03); --rs: calc(var(--r) - var(--bz));
    position: relative; width: calc(var(--pw) * 1.42); margin: 0 auto; padding-top: calc(var(--pw) * 0.06); }
.hero-live iframe { width: 100%; height: 100%; border: 0; display: block; background: #111; }
.iphone-stage { position: relative; width: var(--w); height: var(--h); margin: 0 auto; perspective: calc(var(--pw) * 5.5); perspective-origin: 50% 35%; }
.iphone { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
/* body: slices from the back (-d/2) to just behind the front face */
.iphone-body { position: absolute; inset: 0; transform-style: preserve-3d; }
/* each slice is fattened by 0.6px (spread shadow, same colour) so the anti-aliased rims overlap and the corners read as one brushed surface */
.iphone-body i { position: absolute; inset: 0; border-radius: var(--r); color: #2b2b30; background: currentColor; box-shadow: 0 0 0 0.6px currentColor; transform: translateZ(calc(var(--d) * (var(--i) / 40 - 0.5))); }
.iphone-body i:nth-child(1), .iphone-body i:nth-child(40) { color: #5b5b62; }
.iphone-body i:nth-child(2), .iphone-body i:nth-child(39) { color: #4c4c52; }
.iphone-body i:nth-child(3), .iphone-body i:nth-child(38) { color: #414147; }
.iphone-body i:nth-child(4), .iphone-body i:nth-child(37) { color: #38383d; }
.iphone-body i:nth-child(5), .iphone-body i:nth-child(36) { color: #323237; }
.iphone-body i:nth-child(6), .iphone-body i:nth-child(35) { color: #2e2e33; }
/* sides: flat planes over the straight runs; the slices show through at the corners */
.iphone-side { position: absolute; transform-origin: 0 0; backface-visibility: hidden; --edge: #6d6d75 0%, #3d3d43 10%, #2a2a2f 42%, #2e2e34 62%, #3f3f45 90%, #5a5a61 100%; }
.iphone-side.s-r { left: 100%; top: var(--r); bottom: var(--r); width: var(--d); transform: translateZ(calc(var(--d) / 2)) rotateY(90deg); background: linear-gradient(90deg, var(--edge)); }
.iphone-side.s-l { left: 0; top: var(--r); bottom: var(--r); width: var(--d); transform: translateZ(calc(var(--d) / -2)) rotateY(-90deg); background: linear-gradient(270deg, var(--edge)); }
.iphone-side.s-b { top: 100%; left: var(--r); right: var(--r); height: var(--d); transform: translateZ(calc(var(--d) / 2)) rotateX(-90deg); background: linear-gradient(180deg, var(--edge)); }
.iphone-side.s-t { bottom: 100%; left: var(--r); right: var(--r); height: var(--d); transform-origin: 0 100%; transform: translateZ(calc(var(--d) / 2)) rotateX(90deg); background: linear-gradient(0deg, var(--edge)); }
/* bottom edge details: USB-C port + speaker/mic holes */
.iphone-side.s-b::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--pw) * 0.11); height: calc(var(--d) * 0.36); transform: translate(-50%, -50%); border-radius: 999px; background: #0d0d10; box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.22), 0 0 0 0.5px rgba(0,0,0,0.6); }
.iphone-side.s-b::after { content: ''; position: absolute; top: 50%; left: 8%; right: 8%; height: calc(var(--d) * 0.2); transform: translateY(-50%); background: radial-gradient(circle, #101013 34%, transparent 38%) 0 0 / calc(var(--pw) * 0.03) 100% repeat-x; -webkit-mask: linear-gradient(90deg, #000 0 26%, transparent 26% 74%, #000 74%); mask: linear-gradient(90deg, #000 0 26%, transparent 26% 74%, #000 74%); }
/* buttons on the right edge: side button + Camera Control, sitting 1.6 px proud of the frame */
.iphone-btn { position: absolute; left: 100%; width: calc(var(--d) * 0.52); transform-origin: 0 0; border-radius: calc(var(--d) * 0.18); background: linear-gradient(90deg, #797981 0%, #45454c 22%, #37373d 50%, #45454c 78%, #6e6e76 100%); box-shadow: 0 0 1px 0.6px rgba(0,0,0,0.6); transform: translateX(1.6px) translateZ(calc(var(--d) * 0.26)) rotateY(90deg); }
.iphone-btn.b-side { top: 24.5%; height: 12.3%; }
.iphone-btn.b-cam { top: 50.5%; height: 6.2%; }
/* front face: polished rim around the black glass, then the screen */
.iphone-front { position: absolute; inset: 0; border-radius: var(--r); transform: translateZ(calc(var(--d) / 2)); border: 1.5px solid transparent; background: linear-gradient(#08080a, #08080a) padding-box, linear-gradient(160deg, #b0b0b8 0%, #5a5a61 28%, #8a8a92 52%, #4a4a51 78%, #9a9aa2 100%) border-box; }
.iphone-screen { position: absolute; inset: var(--bz); border-radius: var(--rs); overflow: hidden; background: #111;
    -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; transform: translateZ(0); contain: paint; }
.iphone-island { position: absolute; left: 50%; top: calc(var(--bz) + var(--pw) * 0.022); width: calc(var(--pw) * 0.27); height: calc(var(--pw) * 0.075); transform: translateX(-50%); border-radius: 999px; background: #050507; z-index: 3; pointer-events: none; }
.iphone-island::after { content: ''; position: absolute; right: calc(var(--pw) * 0.02); top: 50%; width: calc(var(--pw) * 0.036); height: calc(var(--pw) * 0.036); transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2c2f3b, #0a0a10 62%); }
.iphone-status { position: absolute; left: var(--bz); right: var(--bz); top: var(--bz); height: calc(var(--pw) * 0.115); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--pw) * 0.085) 0 calc(var(--pw) * 0.1); font: 600 calc(var(--pw) * 0.05)/1 -apple-system, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; letter-spacing: -0.01em; color: #fff; z-index: 3; pointer-events: none; }
.iphone-status .st-icons { display: inline-flex; align-items: center; gap: calc(var(--pw) * 0.016); }
.iphone-status svg { height: calc(var(--pw) * 0.036); width: auto; fill: currentColor; display: block; }
.iphone[data-scheme="light"] .iphone-status { color: #121212; }
.iphone-glare { position: absolute; inset: var(--bz); border-radius: var(--rs); z-index: 2; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 18%, rgba(255,255,255,0) 36%), linear-gradient(295deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 28%); }
/* floating cards: children of .iphone, so they share its tilt, perspective and parallax; lifted ~30px off the glass */
.iphone .hero-float { width: max-content; pointer-events: none; transform: translateZ(calc(var(--d) / 2 + var(--pw) * 0.09)); box-shadow: 0 10px 24px rgba(31,29,26,0.22), 0 2px 6px rgba(31,29,26,0.12); }
/* it stands on the marble, lit from the top-left (like the leaf shadow): the cast shadow is the phone's silhouette
   projected onto the table - a flat, elongated smear that starts at the base and runs to the right and down, never up
   the wall - plus a tight contact shadow hugging the bottom edge. Both are rotated with the phone's in-plane tilt. */
.iphone-shadow { position: absolute; pointer-events: none; }
/* The cast shadow is a long band lying on the marble: light comes from the lower left, so it starts under the base
   and climbs to the upper right (--sa, parallel to the table edge) for ~3 phone widths - the hero clips it at the
   viewport edge, which is the point - softening only a little with distance. transform-origin is the phone's base
   centre in the element's own coordinates; the translate() moves that point to where the tilted phone's base really is
   (the phone rotates by --rz about its centre, half a height above the base). */
.iphone-shadow.ambient { left: -20%; right: -330%; top: 55%; bottom: -32%; transform-origin: 15.6% 51.7%; filter: blur(calc(var(--pw) * 0.03));
    transform: translate(calc(var(--h) / -2 * sin(var(--rz))), calc(var(--h) / 2 * (cos(var(--rz)) - 1))) rotate(var(--sa));
    background:
        radial-gradient(12% 14% at 15.6% 56%, rgba(31,29,26,0.55), rgba(31,29,26,0.3) 50%, transparent 78%),
        linear-gradient(90deg, transparent 0, transparent 9%, rgba(31,29,26,0.5) 14%, rgba(31,29,26,0.48) 38%, rgba(31,29,26,0.36) 70%, rgba(31,29,26,0.3) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 55%, #000 66%, transparent 76%); mask-image: linear-gradient(180deg, transparent 50%, #000 55%, #000 66%, transparent 76%); }
.iphone-shadow.contact { left: -6%; right: -12%; bottom: -6%; height: 11%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(31,29,26,0.6), rgba(31,29,26,0.22) 45%, transparent 72%); filter: blur(calc(var(--pw) * 0.035)); transform: rotate(var(--rz)) translate(calc(var(--pw) * 0.06), calc(var(--pw) * 0.03)); }
@media (max-width: 599px) { .hero-live { --pw: min(300px, 72vw); --rx: 6deg; --ry: -18deg; --rz: 9deg; --sa: -8deg; width: 100%; } }
.hero-themes { display: flex; justify-content: center; gap: 8px; margin-top: calc(var(--pw, 320px) * 0.2); flex-wrap: wrap; position: relative; z-index: 2; }
.hero-themes button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-small); font-weight: 500; cursor: pointer; color: var(--text); }
.hero-themes button i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw-bg); border: 1px solid rgba(0,0,0,0.08); position: relative; }
.hero-themes button i::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--sw-ac); }
.hero-themes button.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.hero-themes small { flex-basis: 100%; text-align: center; color: var(--text-3); font-size: var(--fs-caption); }

/* ---------- Homepage: "Cum funcționează" still life ----------
   Four iPhones built from the same 3D parts as the hero phone (see the 3D block above; the parts are injected
   by a script in index.html), with gentler angles: the first turned toward the centre, the second frontal and
   nearest, the third turned the other way, the fourth turned a little more and set further back. They stand on
   a cream table with silk ribbons behind them and a sealed envelope by the steps (photos, images/app/how/).
   --pu is the base phone width; every phone derives its own --pw from it. */
.how { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F6F2EC 0%, #F1ECE4 100%); }
.how .container { position: relative; z-index: 1; }
.how-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.how-bg i { position: absolute; display: block; background-position: center; background-size: cover; background-repeat: no-repeat; mix-blend-mode: multiply; }
.how-bg-ribbons { left: 31%; top: 2%; width: 44%; aspect-ratio: 1300 / 1730; background-image: url(../images/app/how/bg-ribbons.jpg); transform: rotate(-34deg);
    -webkit-mask-image: radial-gradient(ellipse 48% 46% at 50% 50%, #000 40%, transparent 70%); mask-image: radial-gradient(ellipse 48% 46% at 50% 50%, #000 40%, transparent 70%); }
.how-bg-envelope { right: -2%; bottom: -7%; width: 30%; aspect-ratio: 1100 / 1197; background-image: url(../images/app/how/bg-envelope.jpg); transform: rotate(-6deg);
    -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 52%, #000 44%, transparent 76%); mask-image: radial-gradient(ellipse 52% 50% at 50% 52%, #000 44%, transparent 76%); }
.how-top { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; margin-bottom: clamp(40px, 6vw, 72px); }
.how-top .section-head { margin-bottom: 0; max-width: 460px; }
@media (min-width: 1000px) { .how-top { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.how-stage { --pu: clamp(120px, 12.4vw, 176px); display: flex; align-items: flex-end; justify-content: center; padding: calc(var(--pu) * 0.2) 0 calc(var(--pu) * 0.16); }
.how-phone { flex: none; margin: 0; position: relative; z-index: var(--z, 1); margin-inline: calc(var(--pw) * 0.01);
    --w: var(--pw); --h: calc(var(--pw) * 2.095); --d: calc(var(--pw) * 0.112); --r: calc(var(--pw) * 0.165); --bz: calc(var(--pw) * 0.03); --rs: calc(var(--r) - var(--bz));
    transform: translateY(var(--dy, 0px)); }
.how-phone .iphone-stage { perspective: calc(var(--pw) * 7); perspective-origin: 50% 40%; }
.how-phone .iphone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: #F8F6F1; }
/* one soft contact shadow per phone; deeper for the phone that stands nearest */
.how-phone::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: calc(var(--pw) * -0.06); height: calc(var(--pw) * 0.16); border-radius: 50%; z-index: -1;
    background: radial-gradient(ellipse at 50% 50%, rgba(31,29,26,0.42), rgba(31,29,26,0.16) 46%, transparent 72%); filter: blur(calc(var(--pw) * 0.05)); transform: translateY(var(--pw) * 0); }
.how-phone.p1 { --pw: var(--pu); --rx: 3deg; --ry: 17deg; --rz: 0deg; --dy: calc(var(--pu) * 0.12); --z: 1; }
.how-phone.p2 { --pw: calc(var(--pu) * 1.22); --rx: 2deg; --ry: 0deg; --rz: 0deg; --dy: 0px; --z: 3; }
.how-phone.p3 { --pw: calc(var(--pu) * 1.04); --rx: 3deg; --ry: -12deg; --rz: 0deg; --dy: calc(var(--pu) * 0.1); --z: 2; }
.how-phone.p4 { --pw: calc(var(--pu) * 0.94); --rx: 3deg; --ry: -19deg; --rz: 0deg; --dy: calc(var(--pu) * 0.2); --z: 1; }
.how .steps { max-width: 980px; }
.how .step { border-top: 0; padding-top: 0; }
.step-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.55); color: var(--ink); margin-bottom: var(--sp-4); }
.step-icon .icon { width: 22px; height: 22px; }
@media (max-width: 999px) {
    /* Pe telefon rândul se plimbă doar stânga–dreapta: degetul pus pe telefoane nu mai
       mișcă pagina sus-jos și nici nu mai declanșează gestul de back al browserului. */
    .how-stage { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--sp-5); margin-inline: calc(var(--sp-5) * -1); padding-bottom: calc(var(--pu) * 0.28); }
    .how-stage::-webkit-scrollbar { display: none; }
    .how-phone { scroll-snap-align: center; }
    .how-bg-ribbons { left: 30%; top: 8%; width: 90%; }
    .how-bg-envelope { width: 50%; right: -16%; bottom: -10%; }
}