/* landing.css — úvodná (marketingová) stránka FitPear, LEN pre web.
 * Načítava sa iba na webe (v index.php pod !FITPEAR_NATIVE) → v natívnom
 * balíku tento súbor ani markup neexistujú.
 *
 * Všetko je scoped pod #view-landing a má pevné (tmavé) farby, takže
 * prepínanie témy appky (data-theme) sem nezasahuje. Dizajn je 1:1 podľa
 * zdrojového návrhu (FitPear Landing): bg #1a1816, mätová #8ed4a0,
 * broskyňová #e9a87e, bento mriežka, hero s náhľadom appky, glow za kurzorom.
 */

#view-landing {
  position: relative;
  display: none;                /* .view.active ho prepne na block (override flexu nižšie) */
  color: #f3eee5;
  background: #1a1816;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Landing nie je flex-stĺpec ako ostatné view — chce normálny tok + scroll. */
#view-landing.active { display: block; }

/* Pozadie a glow vrstvy */
.lnd-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% -8%, rgba(142,212,160,.07), transparent 60%),
    radial-gradient(50% 40% at 12% 12%, rgba(233,168,126,.045), transparent 60%);
}
.lnd-glow {
  position: fixed; top: 0; left: 0; width: 480px; height: 480px;
  margin: -240px 0 0 -240px; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .6s; will-change: transform;
  background: radial-gradient(circle, rgba(142,212,160,.11), rgba(142,212,160,.04) 38%, transparent 62%);
}
.lnd-wrap {
  position: relative; z-index: 2;
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
}

/* Tlačidlá */
.lnd-btn {
  font-weight: 600; font-size: 14px; border-radius: 13px; padding: 12px 24px;
  cursor: pointer; white-space: nowrap; border: 1px solid transparent;
  font-family: inherit; color: inherit;
}
.lnd-btn--sm { font-size: 13px; border-radius: 13px; padding: 8px 16px; }
.lnd-btn--primary {
  background: #8ed4a0; color: #11301d; border-color: transparent;
  transition: filter .2s, transform .15s;
}
.lnd-btn--primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.lnd-btn--ghost {
  background: transparent; color: #f3eee5; border: 1px solid #34302a;
  transition: border-color .2s, background .2s;
}
.lnd-btn--ghost:hover { border-color: rgba(245,238,229,.26); background: rgba(245,238,229,.03); }

/* Navigácia */
.lnd-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0; flex-wrap: wrap;
}
.lnd-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.lnd-brand svg { display: inline-flex; }
.lnd-nav-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lnd-langs {
  display: flex; gap: 2px; background: #211e1b; border: 1px solid #34302a;
  border-radius: 12px; padding: 3px;
}
.lnd-lang {
  font-size: 12px; font-weight: 600; letter-spacing: .3px; border: none;
  border-radius: 9px; padding: 6px 10px; cursor: pointer; transition: .2s;
  background: transparent; color: #6c675f; font-family: inherit;
}
.lnd-lang.is-active { color: #8ed4a0; background: #2c3b31; }

/* Hero */
.lnd-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 52px; align-items: center; padding: 44px 0 76px;
}
.lnd-hero-copy { animation: fpSlide .7s ease both; }
.lnd-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(142,212,160,.1); color: #8ed4a0; font-size: 12px;
  font-weight: 600; letter-spacing: .4px; padding: 6px 12px;
  border-radius: 999px; margin-bottom: 20px;
}
.lnd-eyebrow-dot { width: 6px; height: 6px; border-radius: 999px; background: #8ed4a0; }
.lnd-h1 {
  font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; line-height: 1.04;
  letter-spacing: -.03em; margin: 0 0 18px;
}
.lnd-h1-hl { color: #8ed4a0; }
.lnd-sub {
  font-size: clamp(16px, 1.5vw, 19px); color: #9b948a; max-width: 42ch; margin: 0 0 28px;
}
.lnd-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lnd-trust { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6c675f; }
.lnd-trust-free { color: #8ed4a0; font-weight: 600; }

/* Náhľad appky (mock) — celý je dekoratívny (aria-hidden). pointer-events:none
   je dôležité: glow je position:absolute a inak by sa vykreslil NAD statickými
   tlačidlami v navigácii a kradol by im kliknutia. */
.lnd-mock-shell { position: relative; animation: fpSlide .8s ease .1s both; pointer-events: none; }
.lnd-mock-glow {
  position: absolute; inset: -30% -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 42% at 54% 46%, rgba(142,212,160,.12), transparent 80%);
  filter: blur(28px);
}
.lnd-mock {
  position: relative; z-index: 1; background: #262320; border: 1px solid #34302a;
  border-radius: 24px; padding: 22px; transform: rotate(-2.2deg);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}
.lnd-mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.lnd-mock-id { display: flex; align-items: center; gap: 10px; }
.lnd-mock-ava { width: 34px; height: 34px; border-radius: 10px; background: #1f2a23; display: grid; place-items: center; }
.lnd-mock-greet { font-size: 14px; font-weight: 600; }
.lnd-mock-date { font-size: 11px; color: #9b948a; }
.lnd-mock-streak {
  display: inline-flex; align-items: center; gap: 5px; background: #3a2a1c;
  color: #e9a87e; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
}
.lnd-mock-ring-row { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.lnd-ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.lnd-ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.lnd-ring-num { font-size: 25px; font-weight: 700; line-height: 1; }
.lnd-ring-label { font-size: 10px; color: #e9a87e; margin-top: 2px; }
.lnd-ring-arc {
  stroke-dasharray: 295; stroke-dashoffset: 295;
  transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);
}
.lnd-ring.is-in .lnd-ring-arc { stroke-dashoffset: 92; }
.lnd-macros { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.lnd-macro-top { display: flex; justify-content: space-between; font-size: 11px; color: #9b948a; margin-bottom: 4px; }
.lnd-macro-bar { height: 5px; background: #34302a; border-radius: 3px; overflow: hidden; }
.lnd-macro-fill { display: block; height: 100%; border-radius: 3px; }
.lnd-mock-meal {
  display: flex; align-items: center; justify-content: space-between;
  background: #211e1b; border-radius: 12px; padding: 11px 14px; margin-bottom: 14px;
}
.lnd-meal-left { display: flex; align-items: center; gap: 10px; }
.lnd-meal-ic { width: 30px; height: 30px; border-radius: 8px; background: #2f2b25; display: grid; place-items: center; font-size: 13px; }
.lnd-meal-name { font-size: 13px; font-weight: 600; }
.lnd-meal-sub { font-size: 11px; color: #9b948a; }
.lnd-meal-kcal { font-size: 13px; font-weight: 600; }
.lnd-mock-add { text-align: center; background: #8ed4a0; color: #11301d; font-weight: 600; font-size: 13px; padding: 11px; border-radius: 12px; }

/* Sekcia funkcií */
.lnd-feat-head-wrap { max-width: 560px; margin: 0 0 32px; animation: fpSlide .6s ease both; }
.lnd-feat-kicker { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: #e9a87e; font-weight: 600; }
.lnd-feat-head { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 10px 0 0; }

/* Bento mriežka */
.lnd-bento { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 96px; }
.lnd-card {
  position: relative; overflow: hidden; background: #262320; border: 1px solid #34302a;
  border-radius: 20px; padding: 28px; transition: transform .2s ease, border-color .3s;
  animation: fpSlide .6s ease both;
}
.lnd-card--wide { flex: 1 1 58%; min-width: 300px; }
.lnd-card--narrow { flex: 1 1 28%; min-width: 240px; }
.lnd-card:hover { transform: translateY(-3px); }
.lnd-card.lnd-card--mint:hover { border-color: rgba(142,212,160,.28); }
.lnd-card.lnd-card--peach:hover { border-color: rgba(233,168,126,.28); }
.lnd-card-ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 19px; margin-bottom: 16px;
}
.lnd-card-ic--mint { background: rgba(142,212,160,.1); color: #8ed4a0; }
.lnd-card-ic--peach { background: rgba(233,168,126,.1); color: #e9a87e; }
.lnd-card-h { font-size: 19px; font-weight: 700; margin: 0 0 9px; letter-spacing: -.01em; }
.lnd-card-p { font-size: 14px; color: #9b948a; line-height: 1.6; margin: 0; }

.lnd-stats { display: flex; gap: 28px; margin-top: 20px; flex-wrap: wrap; }
.lnd-stat-num { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.lnd-stat-num--mint { color: #8ed4a0; }
.lnd-stat-label { font-size: 12px; color: #9b948a; margin-top: 6px; }

.lnd-barcode { display: flex; gap: 3px; align-items: flex-end; height: 42px; margin-top: 18px; opacity: .5; }
.lnd-bc { flex: 1; background: #f3eee5; border-radius: 1px; }

.lnd-pills { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.lnd-pill { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.lnd-pill--light { background: rgba(111,168,181,.14); color: #9cc6d0; }
.lnd-pill--bal { background: rgba(142,212,160,.14); color: #8ed4a0; }
.lnd-pill--full { background: rgba(233,168,126,.14); color: #e9a87e; }

.lnd-chips { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.lnd-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #f3eee5;
  background: #211e1b; border: 1px solid #34302a; border-radius: 999px; padding: 8px 14px;
}
.lnd-chip svg { display: inline-flex; }

.lnd-week { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.lnd-week-bars { display: flex; gap: 8px; align-items: flex-end; height: 84px; flex: 1; min-width: 200px; }
.lnd-wb { flex: 1; border-radius: 5px 5px 0 0; opacity: .85; height: 8%; transition: height 1s cubic-bezier(.2,.7,.2,1); }
.lnd-week-head { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.lnd-week-msg { font-size: 14px; color: #9b948a; max-width: 24ch; }

/* Filozofia */
.lnd-philo { text-align: center; max-width: 680px; margin: 0 auto; padding: 0 0 96px; animation: fpSlide .6s ease both; }
.lnd-philo-q { font-size: clamp(23px, 3vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.lnd-philo-em { color: #e9a87e; }
.lnd-philo-b { color: #9b948a; margin: 20px auto 0; font-size: 16px; max-width: 48ch; }

/* Záverečné CTA */
.lnd-final-sec { padding-bottom: 24px; }
.lnd-final {
  position: relative; overflow: hidden; text-align: center; background: #262320;
  border: 1px solid #34302a; border-radius: 24px; padding: 60px 32px;
}
.lnd-final-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(142,212,160,.1), transparent 60%);
}
.lnd-final-h { position: relative; font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.lnd-final-p { position: relative; color: #9b948a; margin: 0 0 26px; font-size: 16px; }
.lnd-final .lnd-btn { position: relative; }

/* Pätička */
.lnd-foot { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: #6c675f; padding: 44px 0 52px; }
.lnd-foot a { color: #6c675f; text-decoration: none; transition: color .2s; }
.lnd-foot a:hover { color: #8ed4a0; }

/* Animácie a a11y */
@keyframes fpSlide { from { transform: translateY(16px); } to { transform: none; } }
#view-landing :focus-visible { outline: 2px solid #8ed4a0; outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  #view-landing *,
  #view-landing .lnd-card,
  #view-landing .lnd-ring-arc,
  #view-landing .lnd-wb {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .lnd-glow { display: none !important; }
}