/*==============================================================*/
/* Лендинг FloraID: токены и адаптивная реализация макета Pencil.*/
/*==============================================================*/
@font-face {
    font-display: swap;
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    src: url("/assets/fonts/manrope-variable.ttf") format("truetype");
}

:root {
    --flora-bg: #f4f2ec;
    --flora-surface: #ffffff;
    --flora-ink: #1f4d3a;
    --flora-muted: #6b6f72;
    --flora-line: #e7efe7;
    --flora-accent: #5e8f6a;
    --flora-radius: 10px;
    --flora-radius-lg: 16px;
    --font-heading: "Manrope", Arial, sans-serif;
    --font-ui: "Inter", Arial, sans-serif;
    --font-data: "Geist Mono", monospace;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    background: var(--flora-bg);
    color: var(--flora-ink);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; }

.landing-container { padding-inline: 56px; }

.landing-header {
    background: rgba(244, 242, 236, .92);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(8px);
    transition: border-color .3s ease, background .3s ease;
}

.landing-header.is-scrolled { border-color: rgba(31, 77, 58, .1); }
.flora-navbar { height: 80px; padding: 0; }

.flora-logo {
    align-items: center;
    display: inline-flex;
    text-decoration: none;
}

.flora-logo picture { display: block; line-height: 0; }
.flora-logo__image { display: block; height: auto; width: 166px; }

.landing-nav { gap: 28px; }
.landing-nav .nav-link { color: var(--flora-ink); font-size: 13px; font-weight: 500; padding: 10px 0 !important; position: relative; }
.landing-nav .nav-link::after { background: var(--flora-accent); bottom: 3px; content: ""; height: 1px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; width: 100%; }
.landing-nav .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.btn { align-items: center; border-radius: 8px; display: inline-flex; font-weight: 600; gap: 9px; justify-content: center; }
.btn svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.btn-forest { background: var(--flora-ink); border-color: var(--flora-ink); color: #fff; }
.btn-forest:hover, .btn-forest:focus { background: #163b2d; border-color: #163b2d; color: #fff; transform: translateY(-1px); }
.btn-login { font-size: 13px; height: 42px; padding-inline: 16px; }
.btn-outline-flora { border: 1px solid var(--flora-line); color: var(--flora-ink); }
.btn-outline-flora:hover { background: var(--flora-line); border-color: var(--flora-line); color: var(--flora-ink); }
.btn-light-flora { background: #fff; border-color: #fff; color: var(--flora-ink); }
.btn-light-flora:hover { background: var(--flora-line); border-color: var(--flora-line); color: var(--flora-ink); transform: translateY(-1px); }
.btn-lg { font-size: 14px; height: 50px; padding: 0 20px; }

.flora-menu { border: 1px solid var(--flora-line); border-radius: 7px; display: none; height: 36px; padding: 8px; width: 36px; }
.flora-menu:focus { box-shadow: none; }
.flora-menu span { background: var(--flora-ink); display: block; height: 1px; margin: 4px 0; width: 18px; }

/* Первый экран. */
.hero-section { min-height: 720px; }
.hero-container { padding-bottom: 60px; padding-top: 70px; }
.hero-row { gap: 40px; min-height: 590px; }
.hero-row > [class*="col-"] { width: calc(50% - 20px); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; }
.section-kicker, .section-index { font-family: var(--font-data); font-size: 11px; text-transform: uppercase; }
.hero-kicker { align-items: center; display: flex; font-family: var(--font-ui); font-weight: 700; gap: 8px; letter-spacing: 1.1px; }
.pulse-dot { background: var(--flora-ink); border-radius: 50%; height: 8px; position: relative; width: 8px; }
.pulse-dot::after { animation: pulse 2.2s infinite; border: 1px solid var(--flora-ink); border-radius: inherit; content: ""; inset: -5px; position: absolute; }
.hero-copy h1 { font-family: var(--font-heading); font-size: clamp(58px, 5.3vw, 76px); font-weight: 500; letter-spacing: -2.8px; line-height: .96; margin: 24px 0; }
.hero-lead { font-size: 18px; line-height: 1.45; margin: 0; max-width: 590px; }
.hero-actions { display: flex; gap: 10px; margin-top: 24px; }

.hero-visual-wrap { min-height: 590px; }
.hero-visual { background: var(--flora-line); border-radius: 220px 220px var(--flora-radius-lg) var(--flora-radius-lg); height: 100%; overflow: hidden; position: relative; }
.specimen-stage { height: 100%; inset: 0; overflow: hidden; position: absolute; width: 100%; }
.specimen-slide { height: 100%; inset: 0; opacity: 0; pointer-events: none; position: absolute; transform: translate3d(-110%, 0, 0); will-change: transform, opacity; }
.specimen-slide-current { opacity: 1; transform: translate3d(0, 0, 0); }
.specimen-image { height: calc(100% - 34px); left: 48px; object-fit: contain; object-position: center bottom; opacity: 1; position: absolute; top: 34px; width: calc(100% - 96px); }
.is-visible .specimen-slide-current .specimen-image { animation: specimen-reveal 1.15s .18s cubic-bezier(.2,.7,.2,1) both; }

.plant-card, .observation-window { background: rgba(244, 242, 236, .95); border-radius: 9px; position: absolute; }
.plant-card { bottom: 28px; display: flex; flex-direction: column; left: 24px; padding: 13px 15px; width: 238px; }
.plant-card em { font-family: var(--font-heading); font-size: 20px; }
.plant-card span { font-family: var(--font-data); font-size: 10px; margin-top: 4px; }
.plant-card strong { align-items: center; display: flex; font-size: 10px; font-weight: 600; margin-top: 8px; }
.plant-card strong i { background: var(--flora-ink); border-radius: 50%; height: 6px; margin-right: 6px; width: 6px; }
.observation-window { right: 20px; top: 50%; padding: 11px 13px; transform: translateY(-50%); }
.observation-window span { color: var(--flora-accent); display: block; font-size: 8px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.observation-window strong { display: block; font-family: var(--font-heading); font-size: 18px; font-weight: 400; margin-top: 3px; }

/* Полоса фактов. */
.trust-strip { background: var(--flora-ink); color: #fff; }
.trust-item { display: flex; flex-direction: column; height: 120px; justify-content: center; padding: 0 22px; }
.trust-item + .trust-item { border-left: 1px solid var(--flora-accent); }
.trust-item strong { font-family: var(--font-heading); font-size: 18px; font-weight: 500; }
.trust-item small { color: var(--flora-line); font-size: 11px; margin-top: 6px; }

/* Общая геометрия секций. */
.landing-section { padding: 80px 0; }
.section-heading { margin-bottom: 50px; }
.section-index { color: var(--flora-ink); margin-bottom: 18px; }
.section-index-light { color: var(--flora-accent); }
.section-index-muted { color: var(--flora-muted); }
.landing-section h2, .final-cta h2 { font-family: var(--font-heading); font-size: 52px; font-weight: 500; letter-spacing: -1.8px; line-height: 1.02; margin: 0; }
.section-heading p, .map-copy > p, .pheno-copy > p, .reliability-copy > p { font-size: 16px; line-height: 1.5; margin: 0; }

/* Последовательность работы. */
.workflow { border-bottom: 1px solid var(--flora-line); border-top: 1px solid var(--flora-line); min-height: 412px; }
.workflow-step { display: flex; flex-direction: column; gap: 18px; height: 412px; overflow: hidden; padding: 28px 24px; position: relative; }
.workflow-step + .workflow-step { border-left: 1px solid var(--flora-line); }
.workflow-step-active { background: var(--flora-line); }
.workflow-meta { align-items: center; display: flex; justify-content: space-between; }.workflow-meta > span { color: var(--flora-muted); font-family: var(--font-data); font-size: 12px; }.workflow-meta i { align-items: center; background: var(--flora-line); border-radius: 50%; display: flex; height: 38px; justify-content: center; width: 38px; }.workflow-step-active .workflow-meta i { background: var(--flora-ink); }.workflow-meta svg { fill: none; height: 17px; stroke: var(--flora-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 17px; }.workflow-step-active .workflow-meta svg { stroke: #fff; }
.workflow-copy { display: flex; flex-direction: column; gap: 18px; }
.workflow-step h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 500; line-height: 1.1; margin: 0; }
.workflow-step p { font-size: 14px; line-height: 1.55; margin: 0; }
.workflow-visual { bottom: 0; height: 168px; left: 24px; opacity: 0; overflow: hidden; position: absolute; right: 24px; transform: translateY(18px) scale(.96); }.workflow-visual img { display: block; height: 100%; object-fit: contain; width: 100%; }.workflow-arrow { display: none; }
.workflow-step.is-visible .workflow-visual { animation: workflow-visual-in .9s calc(var(--workflow-delay) + .2s) both cubic-bezier(.2,.7,.2,1); }.workflow-step.is-visible .workflow-visual img { animation: workflow-drift 6s calc(var(--workflow-delay) + 1.1s) ease-in-out infinite alternate; }

/* Демонстрация карты. */
.map-section { background: var(--flora-ink); color: #fff; }
.map-row { min-height: 660px; }
.map-copy { padding-right: 45px; }
.map-copy h2 { margin-bottom: 24px; }
.map-copy > p { color: var(--flora-line); }
.map-layers { margin-top: 36px; }
.map-layers li { align-items: center; display: flex; font-size: 13px; gap: 11px; margin-top: 16px; }
.map-layers i { border: 1px solid var(--flora-accent); border-radius: 3px; height: 13px; width: 13px; }
.map-layers li:first-child i { background: var(--flora-accent); }

.garden-map { background: var(--flora-bg); border-radius: var(--flora-radius-lg); height: 660px; margin-left: auto; max-width: 828px; overflow: hidden; position: relative; }
.garden-map-picture { display: block; height: 100%; opacity: 0; transform: translateY(18px) scale(.985); width: 100%; }.garden-map-picture img { display: block; height: 100%; object-fit: contain; transform: translate3d(0,0,0); width: 100%; }.reveal.is-visible .garden-map-picture { animation: garden-map-in 1s .16s both cubic-bezier(.2,.7,.2,1); }.reveal.is-visible .garden-map-picture img { animation: garden-map-breathe 8s 1.2s ease-in-out infinite alternate; }

/* Фенологический цикл. */
.pheno-row { min-height: 556px; }
.season-cycle { height: 556px; margin: auto; max-width: 590px; position: relative; }
.season-wheel { height: 420px; left: 0; position: absolute; top: 0; width: 336px; }
.season-orbit { background: var(--flora-line); border-radius: 50%; height: 320px; left: 8px; position: absolute; top: 74px; width: 320px; }
.season-middle { background: var(--flora-bg); border: 1px solid var(--flora-line); border-radius: 50%; height: 220px; left: 58px; position: absolute; top: 124px; width: 220px; }
.season-axis { background: var(--flora-line); display: block; opacity: 0; position: absolute; transform: scale(0); }
.season-axis-horizontal { height: 1px; left: 58px; top: 233px; transform-origin: left; width: 220px; }
.season-axis-vertical { height: 220px; left: 168px; top: 124px; transform-origin: top; width: 1px; }
.season-center { align-items: center; background: var(--flora-ink); border-radius: 50%; color: #fff; display: flex; flex-direction: column; height: 96px; justify-content: center; left: 120px; position: absolute; top: 186px; transform: scale(.72); width: 96px; z-index: 2; }
.season-center span { color: var(--flora-line); font-family: var(--font-data); font-size: 9px; font-weight: 700; text-transform: uppercase; }.season-center strong { font-family: var(--font-heading); font-size: 31px; font-weight: 500; line-height: 1; margin-top: 5px; }
.phase { align-items: center; background: var(--flora-bg); border-radius: 7px; display: flex; font-size: 10px; font-weight: 650; gap: 6px; opacity: 0; padding: 7px 10px; position: absolute; transform: translateY(8px); white-space: nowrap; z-index: 4; }
.phase i { background: var(--flora-ink); border-radius: 50%; height: 7px; width: 7px; }.phase-vegetation { left: 10px; top: 40px; }.phase-flowering { left: 226px; top: 78px; }.phase-flowering i, .phase-rest i { background: var(--flora-muted); }.phase-fruiting { left: 204px; top: 370px; }.phase-fruiting i { background: var(--flora-accent); }.phase-rest { left: 18px; top: 368px; }.phase-mobile-text { display: none; }
.season-badge { align-items: center; background: #fff; border: 1px solid var(--flora-line); border-radius: 50%; display: flex; flex-direction: column; height: 44px; justify-content: center; opacity: 0; position: absolute; transform: scale(.6); width: 44px; z-index: 3; }
.season-badge svg { fill: none; height: 17px; stroke: var(--flora-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 17px; }.season-badge span { font-size: 7px; font-weight: 700; line-height: 1; margin-top: 2px; }.season-spring { left: 34px; top: 144px; }.season-summer { left: 246px; top: 144px; }.season-autumn { left: 246px; top: 286px; }.season-winter { left: 34px; top: 286px; }.season-badge.is-current { background: var(--flora-ink); color: #fff; }.season-badge.is-current svg { stroke: #fff; }
.season-now { align-items: center; background: var(--flora-line); border: 1px solid var(--flora-ink); border-radius: 7px; display: flex; gap: 7px; height: 42px; left: 91px; opacity: 0; padding: 0 9px; position: absolute; top: 305px; transform: translateY(8px); width: 150px; z-index: 4; }.season-now svg { fill: none; flex: 0 0 15px; height: 15px; stroke: var(--flora-ink); stroke-width: 1.5; width: 15px; }.season-now span { display: flex; flex-direction: column; font-size: 8px; font-weight: 600; line-height: 1.15; }.season-now b { font-size: 7px; font-weight: 750; text-transform: uppercase; }

/* Правая часть анимационного макета: наблюдаемость, статистика и очередь полевых задач. */
.phenology-dashboard { background: #fff; border: 1px solid var(--flora-line); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; height: 532px; opacity: 0; padding: 12px; position: absolute; right: 12px; top: 12px; transform: translateX(18px); width: 238px; }
.phenology-dashboard header h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 500; line-height: 1.1; margin: 0; }.phenology-dashboard header p { color: var(--flora-muted); font-size: 7px; line-height: 1.2; margin: 3px 0 0; }
.heatmap-months, .heatmap-row { display: grid; gap: 2px; grid-template-columns: 54px repeat(12, 1fr); }.heatmap-months { align-items: center; height: 14px; }.heatmap-months b { color: var(--flora-muted); font-family: var(--font-data); font-size: 6px; font-weight: 400; text-align: center; }
.heatmap { display: flex; flex-direction: column; gap: 4px; }.heatmap-row { align-items: center; height: 18px; }.heatmap-row em { font-size: 7px; font-weight: 600; overflow: hidden; white-space: nowrap; }.heatmap-row span { background: var(--flora-line); border-radius: 2px; height: 18px; transform: scaleY(.15); transform-origin: bottom; }.heatmap-row .watch { background: var(--flora-accent); }.heatmap-row .peak { background: var(--flora-ink); }
.heatmap-legend { align-items: center; color: var(--flora-muted); display: flex; font-size: 6px; gap: 9px; height: 18px; }.heatmap-legend span { align-items: center; display: flex; gap: 4px; }.heatmap-legend i { background: var(--flora-line); border-radius: 2px; height: 8px; width: 8px; }.heatmap-legend span:nth-child(2) i { background: var(--flora-accent); }.heatmap-legend span:nth-child(3) i { background: var(--flora-ink); }
.season-stats { background: var(--flora-bg); border-radius: 8px; height: 104px; padding: 8px 10px; }.season-stats-head { display: flex; font-family: var(--font-data); font-size: 7px; font-weight: 700; justify-content: space-between; text-transform: uppercase; }.season-bars { align-items: end; display: flex; gap: 8px; height: 72px; padding-top: 6px; }.season-bars i { background: var(--flora-accent); border-radius: 3px 3px 0 0; display: block; flex: 1; height: 0; position: relative; }.season-bars i.active { background: var(--flora-ink); }.season-bars small { bottom: -12px; color: var(--flora-muted); font-family: var(--font-ui); font-size: 6px; font-style: normal; left: 0; position: absolute; text-align: center; width: 100%; }
.observation-alert { align-items: center; background: var(--flora-line); border-radius: 8px; display: flex; gap: 8px; height: 50px; padding: 0 10px; }.observation-alert-icon { align-items: center; background: var(--flora-ink); border-radius: 50%; color: #fff; display: flex; flex: 0 0 28px; height: 28px; justify-content: center; }.observation-alert-icon svg { fill: none; height: 14px; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 14px; }.observation-alert > span:last-child { display: flex; flex-direction: column; }.observation-alert b { font-size: 9px; }.observation-alert em { font-size: 7px; margin-top: 2px; }
.capture-queue { background: var(--flora-bg); border-radius: 8px; display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 8px; }.capture-queue > strong { color: var(--flora-muted); font-family: var(--font-data); font-size: 7px; text-transform: uppercase; }.capture-queue > div { align-items: center; display: flex; flex: 1; gap: 7px; }.capture-queue > div + div { border-top: 1px solid var(--flora-line); }.capture-queue i { align-items: center; background: var(--flora-line); border-radius: 6px; display: flex; flex: 0 0 24px; height: 24px; justify-content: center; }.capture-queue i svg { fill: none; height: 12px; stroke: var(--flora-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 12px; }.capture-queue span { display: flex; flex-direction: column; }.capture-queue b { font-size: 7px; font-style: italic; }.capture-queue small { color: var(--flora-muted); font-size: 6px; }
.phenology-mobile-note { display: none; }

/* Внутренние слои запускаются после появления общего блока в области просмотра. */
.reveal.is-visible .season-orbit { animation: season-ring-in .85s .05s both cubic-bezier(.2,.7,.2,1); }.reveal.is-visible .season-middle { animation: season-ring-in .75s .16s both cubic-bezier(.2,.7,.2,1); }.reveal.is-visible .season-center { animation: season-center-in .65s .3s both cubic-bezier(.2,.7,.2,1); }.reveal.is-visible .season-axis { animation: season-axis-in .55s .42s both ease; }.reveal.is-visible .season-badge { animation: season-item-in .45s var(--season-delay, .48s) both cubic-bezier(.2,.7,.2,1); }.season-summer { --season-delay: .56s; }.season-autumn { --season-delay: .64s; }.season-winter { --season-delay: .72s; }.reveal.is-visible .phase { animation: season-label-in .5s var(--phase-delay, .5s) both ease; }.phase-flowering { --phase-delay: .58s; }.phase-fruiting { --phase-delay: .66s; }.phase-rest { --phase-delay: .74s; }.reveal.is-visible .season-now { animation: season-label-in .55s .85s both ease; }.reveal.is-visible .phenology-dashboard { animation: dashboard-in .7s .25s both cubic-bezier(.2,.7,.2,1); }.reveal.is-visible .heatmap-row span { animation: heat-cell-in .42s var(--cell-delay, .72s) both ease; }.heatmap-row:nth-child(2) span { --cell-delay: .78s; }.heatmap-row:nth-child(3) span { --cell-delay: .84s; }.heatmap-row:nth-child(4) span { --cell-delay: .9s; }.reveal.is-visible .season-bars i { animation: season-bar-in .75s 1s both cubic-bezier(.2,.7,.2,1); }
.pheno-copy { padding-left: 35px; }.pheno-copy h2 { margin-bottom: 22px; }.smart-note { align-items: center; background: var(--flora-line); border-radius: 9px; display: flex; font-size: 12px; font-weight: 600; gap: 10px; margin-top: 24px; padding: 14px 16px; }.smart-note svg { fill: none; flex: 0 0 18px; height: 18px; stroke: var(--flora-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 18px; }

/* История определения. */
.reliability-row { min-height: 564px; }.reliability-copy { padding-right: 38px; }.reliability-copy h2 { font-size: 58px; margin-bottom: 22px; }.reliability-copy blockquote { border-left: 2px solid var(--flora-line); font-family: var(--font-heading); font-size: 18px; line-height: 1.35; margin: 28px 0 0; padding-left: 18px; }
.history-card { border: 1px solid var(--flora-line); border-radius: 14px; min-height: 564px; padding: 24px; }
.history-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }.history-header h3 { font-family: var(--font-heading); font-size: 23px; font-weight: 400; margin: 0; }.history-header span { color: var(--flora-muted); display: block; font-family: var(--font-data); font-size: 10px; margin-top: 3px; }.history-header b { align-items: center; background: var(--flora-line); border-radius: 6px; display: flex; font-size: 9px; gap: 5px; padding: 6px 8px; }.history-header b svg { fill: none; height: 13px; stroke: var(--flora-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; }
.history-event { display: flex; gap: 14px; min-height: 112px; }.history-event > i { align-items: center; background: var(--flora-line); border-radius: 50%; display: flex; flex: 0 0 30px; height: 30px; justify-content: center; position: relative; }.history-event > i svg { fill: none; height: 14px; stroke: var(--flora-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 14px; }.history-event:not(:nth-last-child(2)) > i::after { background: var(--flora-line); content: ""; height: 82px; left: 50%; position: absolute; top: 30px; width: 1px; }.history-event > div { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }.history-event time { color: var(--flora-muted); font-family: var(--font-data); font-size: 9px; }.history-event strong { font-size: 13px; }.history-event span { font-size: 11px; }
.source-row { display: flex; gap: 8px; }.source-row > div { background: var(--flora-line); border-radius: 7px; display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 11px; }.source-row b { font-family: var(--font-data); font-size: 9px; text-transform: uppercase; }.source-row > div:last-child b { color: var(--flora-accent); }.source-row span { font-size: 9px; }

/* Финальный призыв и подвал. */
.final-cta { align-items: center; background: var(--flora-ink); color: #fff; display: flex; height: 520px; justify-content: center; overflow: hidden; position: relative; text-align: center; }
.final-floral { inset: 0; overflow: hidden; pointer-events: none; position: absolute; }.final-floral-side { height: 100%; opacity: 0; overflow: hidden; position: absolute; top: 0; width: 50%; }.final-floral-left { left: 0; transform: translateX(-105%); }.final-floral-right { right: 0; transform: translateX(105%); }.final-floral-side img { display: block; height: 100%; object-fit: fill; position: absolute; top: 0; width: 200%; }.final-floral-left img { left: 0; }.final-floral-right img { right: 0; }.final-floral.is-visible .final-floral-left { animation: cta-floral-left-in 1.15s both cubic-bezier(.16,.75,.22,1); }.final-floral.is-visible .final-floral-right { animation: cta-floral-right-in 1.15s .1s both cubic-bezier(.16,.75,.22,1); }.final-floral.is-visible .final-floral-side img { animation: cta-floral-drift 9s 1.25s ease-in-out infinite alternate; }
.final-word { bottom: 8px; color: rgba(255,255,255,.07); font-family: var(--font-heading); font-size: min(14vw, 190px); font-weight: 700; left: 50%; letter-spacing: -8px; line-height: .8; position: absolute; transform: translateX(-50%); white-space: nowrap; }
.final-content { align-items: center; display: flex; flex-direction: column; max-width: 820px; position: relative; z-index: 1; }.final-content h2 { font-size: 48px; margin: 0 0 18px; }.final-content p { color: var(--flora-line); font-size: 15px; margin-bottom: 22px; }
.landing-footer { background: var(--flora-ink); color: #fff; }.footer-inner { align-items: center; display: flex; height: 200px; justify-content: space-between; }.footer-brand { display: flex; flex-direction: column; gap: 6px; }.footer-brand img { filter: brightness(0) invert(1); display: block; height: auto; width: 118px; }.footer-brand span { color: var(--flora-accent); font-size: 11px; }.landing-footer nav { display: flex; gap: 28px; }.landing-footer a { color: var(--flora-line); font-size: 11px; text-decoration: none; }.landing-footer a:hover { color: #fff; }.landing-footer small { color: var(--flora-accent); font-family: var(--font-data); font-size: 10px; }

/* Появление блоков при прокрутке. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease var(--delay, 0s), transform .75s cubic-bezier(.2,.7,.2,1) var(--delay, 0s); }
.reveal-left { transform: translateX(-32px); }.reveal-right { transform: translateX(32px); }.reveal.is-visible { opacity: 1; transform: translate(0, 0); }

@keyframes pulse { 0%,100% { opacity: 0; transform: scale(.7); } 45% { opacity: .45; transform: scale(1.2); } }
@keyframes specimen-reveal { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes map-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(107,111,114,.45); } 50% { box-shadow: 0 0 0 8px rgba(107,111,114,0); } }
@keyframes garden-map-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes garden-map-breathe { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-3px,0) scale(1.004); } }
@keyframes season-ring-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes season-center-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes season-axis-in { to { opacity: 1; transform: scale(1); } }
@keyframes season-item-in { to { opacity: 1; transform: scale(1); } }
@keyframes season-label-in { to { opacity: 1; transform: translateY(0); } }
@keyframes dashboard-in { to { opacity: 1; transform: translateX(0); } }
@keyframes heat-cell-in { to { transform: scaleY(1); } }
@keyframes season-bar-in { to { height: var(--bar); } }
@keyframes workflow-visual-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes workflow-drift { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes cta-floral-left-in { to { opacity: 1; transform: translateX(0); } }
@keyframes cta-floral-right-in { to { opacity: 1; transform: translateX(0); } }
@keyframes cta-floral-drift { from { margin-top: 0; } to { margin-top: -4px; } }

@media (max-width: 991.98px) {
    .landing-container { padding-inline: 28px; }
    .hero-row { gap: 28px; }.hero-row > [class*="col-"] { width: 100%; }.hero-copy { min-height: 460px; }.hero-visual-wrap { min-height: 560px; }
    .map-copy { margin-bottom: 38px; padding-right: 0; }.garden-map { height: 570px; max-width: none; }.pheno-copy { padding-left: calc(var(--bs-gutter-x) * .5); }.reliability-copy { margin-bottom: 32px; padding-right: 0; }
}

@media (max-width: 767.98px) {
    html { scroll-padding-top: 64px; }
    .landing-container { padding-inline: 16px; }
    .flora-navbar { height: 64px; }.flora-logo__image { height: auto; width: 132px; }.btn-login { font-size: 11px; height: 36px; padding-inline: 12px; }.btn-login svg { height: 14px; width: 14px; }.flora-menu { display: block; }
    .navbar-collapse { background: var(--flora-bg); border-bottom: 1px solid var(--flora-line); left: 0; padding: 14px 16px 18px; position: absolute; top: 64px; width: 100%; }.landing-nav { gap: 4px; }

    .hero-section { min-height: 760px; }.hero-container { padding-bottom: 28px; padding-top: 40px; }.hero-row { gap: 24px; min-height: 668px; }.hero-copy { min-height: auto; }.hero-kicker { font-size: 9px; letter-spacing: .65px; }.pulse-dot { height: 7px; width: 7px; }.hero-copy h1 { font-size: 44px; letter-spacing: -1.2px; margin: 17px 0; }.hero-lead { font-size: 15px; line-height: 1.45; }.hero-actions { margin-top: 17px; }.btn-lg { font-size: 13px; height: 46px; }.access-note { color: var(--flora-muted); font-size: 9px; margin-top: 10px; }.hero-visual-wrap { min-height: 326px; }.hero-visual { border-radius: 130px 130px 12px 12px; }.specimen-image { height: calc(100% - 16px); left: 8px; top: 16px; width: calc(100% - 16px); }.plant-card { bottom: 14px; left: 12px; padding: 9px 10px; width: 190px; }.plant-card em { font-size: 16px; }.plant-card span { color: var(--flora-ink); font-size: 8px; }.plant-card strong { display: none; }.observation-window { padding: 8px 9px; right: 10px; top: 56%; }.observation-window span { font-size: 7px; }.observation-window strong { font-size: 13px; }

    .trust-strip { height: 250px; }.trust-item { align-items: center; flex-direction: row; gap: 12px; height: 52px; justify-content: flex-start; padding: 0; }.trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--flora-accent); }.trust-item span { color: var(--flora-accent); font-family: var(--font-data); font-size: 9px; }.trust-item strong { font-size: 17px; }
    .landing-section { padding: 52px 0; }.section-index { font-size: 9px; margin-bottom: 12px; }.landing-section h2 { font-size: 36px; letter-spacing: -.6px; }.section-heading { margin-bottom: 28px; }.section-heading p, .map-copy > p, .pheno-copy > p, .reliability-copy > p { font-size: 13px; line-height: 1.5; }.section-heading p { font-size: 14px; margin-top: 12px; }
    .features-section { min-height: 950px; }.workflow { border: 0; display: flex; gap: 8px; min-height: 662px; }.workflow-step { align-items: center; border: 0; border-radius: 9px; display: grid; gap: 12px; grid-template-columns: 36px minmax(0, 1fr) 16px; height: 159.5px; min-height: 0; padding: 16px; }.workflow-step + .workflow-step { border-left: 0; }.workflow-step-active { background: var(--flora-line); }.workflow-meta { display: block; }.workflow-meta > span { align-items: center; background: #fff; border-radius: 50%; display: flex; font-size: 10px; font-weight: 700; height: 36px; justify-content: center; width: 36px; }.workflow-step-active .workflow-meta > span { background: var(--flora-ink); color: #fff; }.workflow-meta i, .workflow-visual { display: none; }.workflow-copy { gap: 5px; }.workflow-step h3 { font-size: 19px; line-height: 1.15; }.workflow-step p { font-size: 11px; line-height: 1.35; padding: 0; }.workflow-arrow { display: block; fill: none; height: 16px; stroke: var(--flora-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 16px; }
    .map-section { min-height: 730px; }.map-copy { margin-bottom: 26px; }.map-copy h2 { margin-bottom: 12px; }.garden-map { aspect-ratio: 828 / 660; border-radius: 12px; height: auto; }.garden-map-picture { height: 100%; }
    .phenology-section { min-height: 0; padding-bottom: 52px; padding-top: 52px; }.phenology-section .pheno-row { min-height: 0; }.pheno-copy { margin-bottom: 32px; }.pheno-copy h2 { margin-bottom: 12px; }.pheno-copy .smart-note { display: none; }.season-cycle { height: 370px; max-width: 358px; }.season-wheel { height: 278px; width: 358px; }.phenology-dashboard, .season-axis, .season-badge, .season-now { display: none; }.season-orbit { height: 270px; left: 44px; top: 8px; width: 270px; }.season-middle { height: 170px; left: 94px; top: 58px; width: 170px; }.season-center { height: 88px; left: 135px; top: 99px; width: 88px; }.season-center span { font-size: 8px; }.season-center strong { font-size: 29px; margin-top: 5px; }.phase { font-size: 8px; gap: 5px; padding: 6px 8px; }.phase i { height: 6px; width: 6px; }.phase-vegetation { left: 44px; top: 27px; }.phase-flowering { left: auto; right: 53px; top: 56px; }.phase-fruiting { left: auto; right: 52px; top: 226px; }.phase-rest { left: 36px; top: 226px; }.phase-desktop-text { display: none; }.phase-mobile-text { display: inline; }.phenology-mobile-note { align-items: center; background: var(--flora-line); border-radius: 8px; bottom: 0; display: flex; font-size: 10px; font-weight: 600; gap: 8px; height: 70px; left: 0; padding: 11px; position: absolute; width: 358px; }.phenology-mobile-note svg { fill: none; flex: 0 0 16px; height: 16px; stroke: var(--flora-accent); stroke-width: 1.5; width: 16px; }
    .reliability-section { min-height: 670px; }.reliability-copy { margin-bottom: 24px; }.reliability-copy h2 { font-size: 38px; margin-bottom: 12px; }.history-card { border-radius: 10px; min-height: 394px; padding: 16px; }.history-header { margin-bottom: 14px; }.history-header h3 { font-size: 18px; }.history-header span { font-size: 8px; }.history-header b { display: none; }.history-event { gap: 10px; min-height: 73px; }.history-event > i { flex-basis: 24px; height: 24px; }.history-event:not(:nth-last-child(2)) > i::after { height: 53px; top: 24px; }.history-event time { font-size: 8px; }.history-event strong { font-size: 10px; }.history-event span { font-size: 9px; }.history-event > div { gap: 3px; }.source-row > div { padding: 8px; }.source-row b, .source-row span { font-size: 8px; }
    .final-cta { height: 420px; padding: 0 16px; }.final-floral { display: none; }.final-content h2 { font-size: 34px; }.final-content p { font-size: 12px; max-width: 300px; }.final-word { bottom: 22px; font-size: 76px; letter-spacing: -4px; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 18px; height: 180px; justify-content: flex-start; padding-block: 28px; }.footer-brand { gap: 5px; }.footer-brand img { width: 100px; }.footer-brand span { font-size: 9px; }.landing-footer nav { gap: 0; justify-content: space-between; width: 100%; }.landing-footer a { font-size: 9px; }.landing-footer small { font-size: 8px; }
    .reveal-left, .reveal-right { transform: translateY(22px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-delay: 0ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* Auth modal — светлая editorial-композиция Pencil, адаптивная для mobile. */
.auth-backdrop { background: rgba(21,38,29,.56); inset: 0; position: fixed; z-index: 1040; backdrop-filter: blur(8px); }
.auth-modal { background: #f7f5ef; border: 1px solid rgba(31,77,58,.16); border-radius: 18px; box-shadow: 0 28px 90px rgba(15,38,26,.28); color: var(--flora-ink); left: 50%; max-width: 460px; padding: 46px 44px 40px; position: fixed; top: 50%; transform: translate(-50%,-50%); width: calc(100% - 32px); z-index: 1041; }
.auth-modal[hidden], .auth-backdrop[hidden] { display: none; }.auth-close { background: transparent; border: 0; color: var(--flora-muted); font-size: 29px; line-height: 1; position: absolute; right: 18px; top: 14px; }.auth-kicker { color: var(--flora-accent); font-family: var(--font-data); font-size: 10px; letter-spacing: .12em; margin-bottom: 16px; }.auth-modal h2 { font-family: var(--font-heading); font-size: 38px; font-weight: 400; letter-spacing: -.04em; margin: 0 0 8px; }.auth-subtitle { color: var(--flora-muted); font-size: 13px; margin-bottom: 28px; }.auth-form { display: grid; gap: 16px; }.auth-form label { color: var(--flora-muted); display: grid; font-size: 11px; gap: 7px; letter-spacing: .05em; text-transform: uppercase; }.auth-form input { background: #fff; border: 1px solid var(--flora-line); border-radius: 7px; color: var(--flora-ink); font-size: 14px; letter-spacing: 0; outline: 0; padding: 13px 14px; text-transform: none; transition: border-color .2s, box-shadow .2s; }.auth-form input:focus { border-color: var(--flora-accent); box-shadow: 0 0 0 3px rgba(107,111,114,.14); }.auth-submit { border: 0; justify-content: space-between; margin-top: 6px; width: 100%; }.auth-submit span { font-size: 19px; }.auth-link { background: transparent; border: 0; color: var(--flora-muted); font-size: 12px; justify-self: center; text-decoration: underline; text-underline-offset: 3px; }.auth-message { color: #a3422f; font-size: 12px; min-height: 18px; text-align: center; }.auth-open { overflow: hidden; }
@media (max-width: 575.98px) { .auth-modal { border-radius: 16px; bottom: 0; max-width: none; padding: 34px 24px 28px; top: auto; transform: translateX(-50%); width: 100%; }.auth-modal h2 { font-size: 31px; }.auth-subtitle { margin-bottom: 22px; } }