/* ═══════════════════════════════════════════════════════════════════════════
   CV30 — landing.cv30.app
   Paleta e cea a produsului, luată din deckul de brand:
   ink #192129 · crem #FDFAE2 · lime #D8EE0C · mov #755EF7 · portocaliu #FF940B
   roz #F93586 · teal #2BB5A0. Fonturile sunt cele din aplicație.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:      #192129;
  --ink-2:    #263040;
  --cream:    #FDFAE2;
  --cream-2:  #F6F1D6;
  --lime:     #D8EE0C;
  --violet:   #755EF7;
  --orange:   #FF940B;
  --pink:     #F93586;
  --teal:     #2BB5A0;

  --on-cream:     #192129;
  --on-cream-dim: #5B6472;
  --on-ink:       #FDFAE2;
  --on-ink-dim:   #9AA5B4;

  --display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --radius: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--on-cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 18px; font-weight: 700; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ───────────────────────────── HERO ───────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
  padding-bottom: 0;
}

/* Pete difuze în culorile zonelor — dau adâncime fără să ceară imagini. */
.hero-bg {
  position: absolute; inset: -20% -10% auto -10%; height: 140%;
  background:
    radial-gradient(38rem 26rem at 78% 18%, color-mix(in srgb, var(--violet) 42%, transparent), transparent 70%),
    radial-gradient(30rem 22rem at 12% 8%,  color-mix(in srgb, var(--lime)   20%, transparent), transparent 70%),
    radial-gradient(34rem 24rem at 92% 82%, color-mix(in srgb, var(--pink)   26%, transparent), transparent 70%),
    radial-gradient(26rem 20rem at 30% 92%, color-mix(in srgb, var(--orange) 18%, transparent), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 22px var(--pad) 0;
  max-width: 1240px; margin-inline: auto;
}
.logo svg { height: 34px; width: auto; display: block; }
.logo text, .foot-logo text {
  font-family: var(--display); font-weight: 900; font-size: 34px;
  letter-spacing: -1px;
}
.logo text { fill: var(--cream); }
.foot-logo text { fill: var(--cream); }

.lang {
  font-family: var(--display); font-weight: 900; font-size: 13px;
  letter-spacing: 1px;
  background: transparent; color: var(--on-ink);
  border: 2px solid color-mix(in srgb, var(--cream) 35%, transparent);
  border-radius: 999px; padding: 7px 15px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.lang:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

.hero-inner {
  position: relative; z-index: 2;
  max-width: 1240px; margin-inline: auto;
  padding: clamp(40px, 7vw, 86px) var(--pad) clamp(34px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero-copy { min-width: 0; }

/* Teancul de telefoane din hero — trei ecrane reale, suprapuse și înclinate,
   ca în deckul de brand. Harta stă în față: e ecranul care se explică singur. */
.hero-shots {
  position: relative;
  min-width: 0;
  height: clamp(340px, 42vw, 560px);
  display: flex; align-items: center; justify-content: center;
  padding-inline: clamp(24px, 4vw, 56px);
}
.hero-shots img {
  position: absolute;
  width: clamp(150px, 19vw, 248px);
  border-radius: clamp(18px, 2vw, 30px);
  border: 3px solid #0E141B;
  background: #fff;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.85);
}
/* Decalajele sunt în procente din lățimea unui telefon, nu din container —
   așa teancul rămâne strâns la orice lățime și nu iese din ecran. */
.hero-shots .s1 { transform: rotate(-4deg)  translate(0, 4%);      z-index: 3; }
.hero-shots .s2 { transform: rotate(7deg)   translate(46%, -7%);   z-index: 2; }
.hero-shots .s3 { transform: rotate(-13deg) translate(-46%, -3%);  z-index: 1; opacity: 0.92; }

@media (prefers-reduced-motion: no-preference) {
  .hero-shots img { animation: float 7s ease-in-out infinite; }
  .hero-shots .s2 { animation-delay: -2.3s; }
  .hero-shots .s3 { animation-delay: -4.6s; }
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

.hero h1 {
  font-weight: 900;
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem);
  /* 0.95 tăia circumflexul din „ÎNTR-UN" și sedila din „VIAȚA" — româna are
     semne și deasupra, și dedesubtul liniei de bază. */
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.hero h1 em { font-style: normal; color: var(--lime); }

.lede {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.28rem);
  color: var(--on-ink-dim);
  max-width: 46ch;
  margin-bottom: clamp(26px, 3.4vw, 38px);
}

.pills {
  list-style: none; margin: 0 0 clamp(28px, 3.6vw, 40px); padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pills li {
  font-family: var(--display); font-weight: 900; font-size: 12px;
  letter-spacing: 0.06em;
  background: var(--c); color: var(--ink);
  padding: 7px 13px; border-radius: 999px;
  white-space: nowrap;
}

/* ─────────────────────── butoane de store ─────────────────────── */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }

.store {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--cream); color: var(--ink);
  border: 2px solid var(--cream);
  border-radius: 14px;
  padding: 11px 20px 11px 17px;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, background .14s;
}
.store:hover { transform: translateY(-2px); box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--lime) 90%, transparent); }
.store svg { width: 25px; height: 25px; fill: currentColor; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store small { font-size: 10.5px; letter-spacing: 0.04em; opacity: 0.72; }
.store b { font-family: var(--display); font-weight: 900; font-size: 17px; letter-spacing: -0.01em; }

.stores.light .store { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.stores.light .store:hover { box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--ink) 30%, transparent); }

/* CTA repetat în fiecare zonă — colorat cu culoarea zonei */
.zone-cta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px dashed color-mix(in srgb, var(--c) 45%, transparent);
}
.zone-cta-label {
  font-family: var(--display); font-weight: 900; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-cream-dim);
  margin-right: 2px;
}
.mini-store {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  background: var(--ink); color: var(--cream);
  border-radius: 11px; padding: 9px 14px;
  font-family: var(--display); font-weight: 800; font-size: 13.5px;
  transition: transform .14s ease, background .14s ease, color .14s ease;
}
.mini-store svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.mini-store:hover { transform: translateY(-2px); background: var(--c, var(--lime)); color: var(--ink); }

/* ─────────────────────────── marquee ─────────────────────────── */
.marquee {
  position: relative; z-index: 2;
  border-top: 2px solid color-mix(in srgb, var(--cream) 16%, transparent);
  background: color-mix(in srgb, var(--ink) 85%, #000);
  overflow: hidden;
  padding: 13px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 16px;
  width: max-content;
  animation: slide 46s linear infinite;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
}
.marquee-track i { color: var(--lime); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ──────────────────────────── ZONE ───────────────────────────── */
.zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
  max-width: 1240px; margin-inline: auto;
  padding: clamp(56px, 8vw, 112px) var(--pad);
}
.zone.alt { direction: rtl; }
.zone.alt > * { direction: ltr; }

.zone-copy { min-width: 0; }

.tag {
  display: inline-block;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  letter-spacing: 0.02em;
  background: var(--c); color: var(--cream);
  padding: 5px 16px 8px;
  border-radius: 10px;
  margin-bottom: 18px;
  /* Marginea neregulată a evidențierii din deck, fără să cerem o imagine. */
  clip-path: polygon(1% 6%, 99% 0%, 100% 92%, 2% 100%);
}
.tag.dark { color: var(--ink); }

.zone h2 {
  font-weight: 900;
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.zone-copy > p {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.14rem);
  color: var(--on-cream-dim);
  max-width: 48ch;
}

.bullets { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; }
.bullets li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--on-cream) 12%, transparent);
}
.bullets li:first-child { border-top: 0; padding-top: 0; }
.bullets b {
  font-family: var(--display); font-weight: 800; font-size: 1.04rem;
}
.bullets span { color: var(--on-cream-dim); font-size: 0.95rem; }

/* O singură captură (Feed, Evenimente): centrată, puțin mai mare. */
.zone-shots.single img { width: min(62%, 268px); transform: rotate(-3deg); }

/* Capturile: două telefoane suprapuse, al doilea puțin mai jos și rotit. */
.zone-shots { position: relative; display: flex; justify-content: center; min-width: 0; }
.zone-shots img {
  width: min(45%, 250px);
  border-radius: 26px;
  border: 3px solid var(--ink);
  box-shadow: 0 18px 44px -18px rgba(25, 33, 41, 0.5);
  background: #fff;
}
.zone-shots img:first-child { transform: rotate(-3deg) translateY(8px); z-index: 2; }
.zone-shots img:last-child  { transform: rotate(3deg) translate(-9%, -10px); }

/* ──────────────────────── BAZAR + GRUPURI ────────────────────── */
.duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  max-width: 1240px; margin-inline: auto;
  padding: 0 var(--pad) clamp(56px, 8vw, 100px);
}
.duo article {
  background: var(--cream-2);
  border-radius: var(--radius);
  padding: clamp(24px, 3.2vw, 38px);
  border-bottom: 6px solid var(--c);
}
.duo h3 {
  font-weight: 900; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.18; margin-bottom: 12px; letter-spacing: -0.01em;
}
.duo p { color: var(--on-cream-dim); }
.duo .tag { font-size: 1rem; padding: 3px 13px 5px; margin-bottom: 14px; }
.duo .zone-cta { margin-top: 22px; padding-top: 18px; }

/* ───────────────────────────── CTA ───────────────────────────── */
.cta {
  background: var(--lime);
  color: var(--ink);
  text-align: center;
  padding: clamp(56px, 8vw, 104px) var(--pad);
}
.cta h2 {
  font-weight: 900;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 1.12; letter-spacing: -0.02em;
  max-width: 18ch; margin-inline: auto; margin-bottom: 14px;
}
.cta p { font-size: 1.08rem; opacity: 0.78; max-width: 46ch; margin-inline: auto; }
/* A doua linie („Gratuit. Pe iPhone și Android.”) e o notă, nu o frază de
   sine stătătoare — mai mică și mai discretă decât descrierea de deasupra. */
.cta .cta-sub { font-size: 0.95rem; opacity: 0.62; margin-top: 8px; margin-bottom: 30px; }
.cta .stores { justify-content: center; }

/* ─────────────────────── bara fixă pe mobil ──────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  align-items: center; gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  border-top: 2px solid var(--lime);
  backdrop-filter: blur(8px);
  transform: translateY(105%);
  transition: transform .26s cubic-bezier(.22, .9, .3, 1);
}
.sticky-cta > span {
  font-family: var(--display); font-weight: 900; font-size: 12px;
  color: var(--cream); letter-spacing: 0.04em;
  flex: 1; min-width: 0;
}
.sticky-cta .mini-store {
  background: var(--cream); color: var(--ink);
  padding: 8px 11px; font-size: 12.5px; flex: none;
}
.sticky-cta .mini-store:hover { background: var(--lime); }
.sticky-cta.on { transform: translateY(0); }

@media (max-width: 760px) {
  .sticky-cta:not([hidden]) { display: flex; }
  body { padding-bottom: 66px; }
}

/* ──────────────────────────── FOOTER ─────────────────────────── */
footer {
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(40px, 5vw, 64px) var(--pad) 28px;
}
.foot-inner {
  max-width: 1240px; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 32px 60px;
  justify-content: space-between; align-items: flex-start;
}
.foot-logo { height: 30px; width: auto; display: block; margin-bottom: 10px; }
.foot-brand p { color: var(--on-ink-dim); font-size: 0.94rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.foot-links a {
  color: var(--on-ink-dim); text-decoration: none; font-size: 0.94rem;
  border-bottom: 1px solid transparent; transition: color .14s, border-color .14s;
}
.foot-links a:hover { color: var(--lime); border-bottom-color: var(--lime); }
.copy {
  max-width: 1240px; margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  color: color-mix(in srgb, var(--on-ink-dim) 80%, transparent);
  font-size: 0.85rem;
}

/* ───────────────────────── responsive ────────────────────────── */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 10px; }
  .hero-shots { height: clamp(300px, 64vw, 420px); order: 2; margin-top: 8px; }
  .hero-shots img { width: clamp(140px, 29vw, 200px); }
}

@media (max-width: 900px) {
  .zone { grid-template-columns: 1fr; gap: 34px; }
  .zone.alt { direction: ltr; }
  .zone-shots { order: 2; }
  .zone-shots img { width: min(44%, 210px); }
}

@media (max-width: 520px) {
  .store { padding: 10px 16px 10px 14px; flex: 1 1 100%; justify-content: center; }
  .pills li { font-size: 11px; padding: 6px 11px; }
  .zone-cta-label { flex: 1 1 100%; margin-bottom: -2px; }
  .mini-store { flex: 1 1 0; justify-content: center; }
}

/* Animație de intrare — pornește din starea VIZIBILĂ, ca pagina să se vadă
   întreagă chiar dacă JS-ul nu rulează niciodată. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.in { opacity: 1; transform: none; }
}