:root {
    --ink: #17221f;
    --muted: #6e7773;
    --paper: #f2f4ef;
    --surface: #fbfcf9;
    --line: #d9ded8;
    --accent: #216a52;
    --blue: #2b87c8;
    --home-page: #f7faef;
    --home-card: #fff;
    --home-card-soft: #f8faf1;
    --home-text: #171717;
    --home-hint: #777a70;
    --home-green: #6dbb35;
    --home-black: #111;
    --home-lime: #d6f78a;
    --home-calm: #e3f7a7;
    --home-border: rgba(17, 17, 17, .08);
    --home-protein: #e8fbc6;
    --home-fat: #ffe8cc;
    --home-carb: #dff1f7;
    --home-fat-color: #f39a2e;
    --home-carb-color: #4aa3d8;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-ui);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

button, input, output { font: inherit; }
button { color: inherit; }

.site-header,
.intro,
.product-story,
.page-footer {
    width: min(1360px, calc(100% - 64px));
    margin-inline: auto;
}

.site-header {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
}

.brand-logo { width: 32px; height: 32px; display: block; border-radius: 9px; object-fit: cover; }

.header-actions { display: flex; align-items: center; gap: 9px; }
.header-action { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; text-decoration: none; }
.header-action svg { width: 18px; height: 18px; }
.header-github { width: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; }
.header-telegram { gap: 8px; padding: 0 18px; border-radius: 999px; color: #fff; background: var(--blue); font-size: 13px; font-weight: 720; cursor: default; }
.header-telegram svg { width: 17px; height: 17px; }

.intro { padding: 96px 0 118px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 22px; color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.intro h1 { max-width: 980px; margin: 0; font-size: clamp(56px, 6vw, 86px); font-weight: 590; letter-spacing: -.065em; line-height: .98; }
.intro h1 span { display: block; }
.hero-reveal { will-change: transform, opacity; }
.intro-copy { max-width: 500px; margin: 38px 0 0; color: var(--muted); font-size: 19px; line-height: 1.55; }
.mobile-hero-actions,
.mobile-story-intro,
.mobile-step-description { display: none; }

.product-story {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(390px, 42fr);
    gap: clamp(48px, 6vw, 96px);
    padding-top: 72px;
}

.demo-column { min-width: 0; }

.demo-sticky {
    position: sticky;
    top: 24px;
    min-height: calc(100vh - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e4df;
    border-radius: 38px;
    background: #e7ebe5;
    overflow: hidden;
}

.demo-caption {
    position: absolute;
    z-index: 2;
    top: 28px;
    left: 32px;
    right: 32px;
    display: flex;
    justify-content: space-between;
    color: #606a65;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.demo-count b { color: var(--ink); }
.phone-motion { position: relative; z-index: 1; width: 339.2px; height: 716.8px; will-change: transform, opacity; }

.phone {
    position: relative;
    pointer-events: none;
    width: 424px;
    height: 896px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 64px;
    background: linear-gradient(145deg, #38403d, #111513 34%, #242a27 72%, #0e1110);
    box-shadow: 0 42px 92px rgba(30, 44, 39, .24), 0 10px 24px rgba(30, 44, 39, .14), inset 0 0 0 1px rgba(255,255,255,.16);
    transform: scale(.8);
    transform-origin: top left;
}

.phone::before { content: ""; position: absolute; z-index: 60; inset: 4px; border: 1px solid rgba(255,255,255,.15); border-radius: 59px; pointer-events: none; }

.phone-topbar {
    position: absolute;
    z-index: 30;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 60px;
    pointer-events: none;
}

.phone-topbar::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    border-radius: 53px 53px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.1) 58%, transparent);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    mask-image: linear-gradient(#000 0 68%, transparent 100%);
    -webkit-mask-image: linear-gradient(#000 0 68%, transparent 100%);
}

.phone-statusbar-art { position: relative; z-index: 2; width: 402px; height: 60px; display: block; }

.phone-island {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 50%;
    width: 112px;
    height: 31px;
    border-radius: 18px;
    background: #111;
    transform: translateX(-50%);
}

.phone-screen { position: relative; width: 402px; height: 874px; border-radius: 53px; background: var(--home-page); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); overflow: hidden; }
.phone-stage { position: absolute; top: 0; left: 0; width: 304px; height: 660.925px; transform: scale(1.322368421); transform-origin: top left; }
.phone-home-indicator { position: absolute; z-index: 50; left: 50%; bottom: 18px; width: 148px; height: 5px; border-radius: 999px; background: #111; transform: translateX(-50%); pointer-events: none; }
.tg-layer, .ft-app { position: absolute; inset: 0; }
.ft-app { font-family: var(--font-ui); }
.ft-app svg { display: block; }

/* Telegram layer */
.tg-layer { z-index: 5; background: #eef1f4; overflow: hidden; }
.tg-header { position: absolute; z-index: 2; top: 42px; left: 9px; right: 9px; height: 38px; display: flex; align-items: center; justify-content: space-between; }
.tg-back, .tg-chat-title { height: 36px; background: rgba(255,255,255,.94); box-shadow: 0 3px 10px rgba(38,52,58,.08); }
.tg-back { flex: 0 0 36px; display: grid; place-items: center; padding: 0 2px 3px 0; color: var(--blue); border-radius: 999px; font-size: 25px; line-height: 1; }
.tg-chat-title { min-width: 0; max-width: 154px; flex: 0 1 154px; display: grid; place-content: center; justify-items: center; gap: 1px; padding: 0 12px; border-radius: 999px; }
.tg-chat-title strong { overflow: hidden; max-width: 100%; font-size: 10px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.tg-chat-title small { color: #7a8589; font-size: 7px; line-height: 1.1; }
.tg-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; padding: 3px; border: 2px solid rgba(255,255,255,.94); border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(38,52,58,.1); overflow: hidden; }
.tg-avatar img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.tg-message { position: absolute; z-index: 2; top: calc(48% - 90px); left: 21px; right: 21px; padding: 17px 16px; border-radius: 22px; background: #fff; box-shadow: 0 6px 18px rgba(38,52,58,.08); }
.tg-capabilities strong { display: block; font-size: 12px; line-height: 1.3; }
.tg-capabilities p { margin: 10px 0 0; color: #59666c; font-size: 9.5px; line-height: 1.5; }
.tg-actions { position: absolute; z-index: 3; left: 21px; right: 21px; bottom: 18px; }
.tg-start { width: 100%; min-height: 45px; border: 0; border-radius: 999px; color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(43,135,200,.16); font-size: 11px; font-weight: 750; }

.demo-pointer { position: absolute; z-index: 40; width: 30px; height: 30px; display: grid; place-items: center; opacity: 0; border: 1px solid rgba(33,106,82,.35); border-radius: 50%; background: rgba(255,255,255,.82); pointer-events: none; }
.demo-pointer i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.tg-pointer { left: calc(50% - 15px); top: -41px; }

/* Production-derived Caloric Analytics Tracker home */
.ft-app { z-index: 4; color: var(--home-text); background: var(--home-page); visibility: hidden; }
.ft-home { height: 100%; padding: 54px 13px 88px; overflow: hidden; }
.ft-home-header { height: 36px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ft-home-header h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.ft-profile { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--home-card); }
.ft-profile svg { width: 18px; height: 18px; }

.ft-progress-card { height: 159px; padding: 13px 14px 11px; border-radius: 24px; background: var(--home-card); overflow: hidden; }
.ft-progress-head { display: flex; align-items: flex-start; justify-content: space-between; }
.ft-progress-head > span { display: grid; gap: 4px; }
.ft-progress-head strong { font-family: var(--font-display); font-size: 13px; font-weight: 800; line-height: 1.08; }
.ft-progress-head small { color: var(--home-hint); font-size: 9px; line-height: 1.25; }
.ft-completion { min-width: 44px; min-height: 27px; display: flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 11px; background: var(--home-lime); font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap; }
.ft-calories-panel { height: 98px; display: flex; align-items: flex-end; gap: 9px; margin-top: 4px; }
.ft-gauge { position: relative; flex: 1; min-width: 0; }
.ft-gauge svg { display: block; width: 100%; }
.ft-gauge path { fill: none; stroke: var(--home-border); stroke-linecap: round; stroke-width: 13; }
.ft-gauge .ft-gauge-value { stroke: var(--home-green); stroke-dasharray: var(--day-progress) 100; }
.ft-gauge > span { position: absolute; left: 50%; bottom: 9px; display: grid; justify-items: center; transform: translateX(-50%); }
.ft-gauge > span strong { font-size: 18px; line-height: 1; }
.ft-gauge > span small { margin-top: 3px; color: var(--home-hint); font-size: 7px; }
.ft-balance { flex: 0 0 62px; display: grid; gap: 6px; padding-bottom: 10px; }
.ft-balance > span { display: grid; gap: 2px; }
.ft-balance strong { font-size: 10px; line-height: 1.05; white-space: nowrap; }
.ft-balance strong > small { margin-left: 2px; font-size: 7px; font-weight: 500; }
.ft-balance > span > small { color: var(--home-hint); font-size: 8px; line-height: 1.15; }
.ft-balance > span:last-child strong { color: var(--home-green); }
.ft-balance i { height: 1px; background: var(--home-border); }

.ft-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.ft-macro { position: relative; min-width: 0; height: 48px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 6px 11px; border-radius: 17px; background: var(--home-protein); }
.ft-macro.ft-fat { background: var(--home-fat); }
.ft-macro.ft-carbs { background: var(--home-carb); }
.ft-macro-icon { width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; border-radius: 9px; color: var(--home-green); background: rgba(255,255,255,.62); }
.ft-fat .ft-macro-icon { color: var(--home-fat-color); }
.ft-carbs .ft-macro-icon { color: var(--home-carb-color); }
.ft-macro-icon svg { width: 13px; height: 13px; }
.ft-macro > span:nth-child(2) { min-width: 0; flex: 0 1 auto; display: grid; align-content: center; gap: 2px; }
.ft-macro > span:nth-child(2) strong { overflow: hidden; font-size: 8px; line-height: 1; text-overflow: ellipsis; }
.ft-macro > span:nth-child(2) small { color: var(--home-hint); font-size: 7px; line-height: 1; white-space: nowrap; }
.ft-macro > i { position: absolute; left: 9px; right: 9px; bottom: 9px; height: 4px; border-radius: 5px; background: var(--home-border); overflow: hidden; }
.ft-macro > i b { display: block; width: 53%; height: 100%; border-radius: inherit; background: var(--home-green); }
.ft-fat > i b { width: 43%; background: var(--home-fat-color); }
.ft-carbs > i b { width: 40%; background: var(--home-carb-color); }

.ft-insight { min-height: 39px; display: grid; grid-template-columns: 23px 1fr 18px; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 9px; border-radius: 17px; background: var(--home-calm); }
.ft-insight > span { width: 23px; height: 23px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--home-black); }
.ft-insight > span svg { width: 13px; height: 13px; }
.ft-insight p { display: grid; gap: 2px; margin: 0; }
.ft-insight p strong { font-family: var(--font-display); font-size: 9px; line-height: 1.2; }
.ft-insight p small { color: var(--home-hint); font-size: 7px; line-height: 1.25; }
.ft-insight > svg { width: 16px; height: 16px; justify-self: center; transform: rotate(-90deg); }

.ft-meals { margin-top: 10px; }
.ft-meals h3 { margin: 0 0 7px; font-family: var(--font-display); font-size: 11px; font-weight: 800; line-height: 1.15; }
.ft-meal-list { display: grid; gap: 4px; }
[data-meal="breakfast"] { order: 1; }
[data-meal="lunch"] { order: 2; }
.ft-new-meal { order: 3; }
[data-meal="dinner"] { order: 4; }
[data-meal="snacks"] { order: 5; }
.ft-meal { height: 28px; display: grid; grid-template-columns: 21px minmax(0,1fr) auto 16px; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 14px; background: var(--home-card); }
.ft-meal.is-current { height: 40px; grid-template-columns: 27px minmax(0,1fr) auto 18px; padding: 6px 8px; border-radius: 17px; background: var(--home-calm); }
.ft-meal-icon { width: 21px; height: 21px; display: grid; place-items: center; color: var(--home-green); border-radius: 50%; background: var(--home-card-soft); }
.ft-meal.is-current .ft-meal-icon { width: 27px; height: 27px; color: #fff; background: var(--home-black); }
.ft-meal-icon svg { width: 13px; height: 13px; }
.ft-meal.is-current .ft-meal-icon svg { width: 17px; height: 17px; }
.ft-meal > strong, .ft-meal > span:nth-child(2) > strong { font-size: 8.5px; line-height: 1.15; }
.ft-meal.is-current > span:nth-child(2) { display: grid; gap: 1px; }
.ft-meal.is-current > span:nth-child(2) > strong { font-size: 10.5px; }
.ft-meal-count { display: none; color: var(--home-hint); font-size: 7px; line-height: 1.15; }
.ft-meal > span:nth-last-child(2) { color: var(--home-hint); font-size: 7px; line-height: 1.15; white-space: nowrap; }
.ft-meal > span:nth-last-child(2) b { color: var(--home-text); font-size: 8.5px; }
.ft-meal.is-current > span:nth-last-child(2) b { font-size: 11px; }
.ft-meal > svg { width: 14px; height: 14px; justify-self: center; color: var(--home-green); }

.ft-new-meal { height: 0; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 7px; padding-inline: 6px; opacity: 0; border: 1px solid var(--home-border); border-radius: 12px; background: var(--home-card); overflow: hidden; }
.ft-new-meal > span { min-width: 0; display: grid; gap: 2px; }
.ft-new-meal > span strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ft-new-meal > span small { color: var(--home-hint); font-size: 6px; }
.ft-new-meal > span:last-child { justify-items: end; }
.ft-food-thumb { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--home-lime); overflow: hidden; }
.ft-food-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ft-tabbar { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 8px; height: 60px; display: flex; align-items: stretch; gap: 4px; padding: 7px; border: 1px solid var(--home-border); border-radius: 27px; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(0,0,0,.07); }
.ft-tab { flex: 1; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--home-hint); border-radius: 20px; }
.ft-tab.is-active { color: var(--home-text); background: color-mix(in srgb, #b8ed4a 42%, #fff); }
.ft-tab.is-active svg { color: var(--home-green); }
.ft-tab-gap { margin-left: 54px; }
.ft-tab svg { width: 19px; height: 19px; }
.ft-tab small { font-size: 8.5px; line-height: 1; }
.ft-fab { position: absolute; z-index: 8; left: 50%; bottom: 22px; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 3px solid var(--home-page); border-radius: 50%; color: #fff; background: var(--home-black); transform: translateX(-50%); }
.ft-fab span { position: relative; width: 19px; height: 19px; }
.ft-fab span::before, .ft-fab span::after { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%); }
.ft-fab span::before { width: 19px; height: 2px; }
.ft-fab span::after { width: 2px; height: 19px; }
.fab-pointer { left: calc(50% - 15px); bottom: 79px; }

/* Production-derived draft, photo and AI layers */
.ft-scrim { position: absolute; z-index: 10; inset: 0; visibility: hidden; background: rgba(17,17,17,.28); opacity: 0; }
.ft-draft { position: absolute; z-index: 11; inset: 0; visibility: hidden; background: #fff; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.ft-draft::-webkit-scrollbar { display: none; }
.ft-photo-hero { position: relative; height: 282px; display: grid; place-items: center; padding: 40px 13px 22px; background: var(--home-lime); overflow: hidden; }
.ft-back { position: absolute; z-index: 7; top: 39px; left: 13px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.76); }
.ft-back svg { width: 17px; height: 17px; }
.ft-upload { width: 250px; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px; border: 1px dashed rgba(17,17,17,.18); border-radius: 24px; background: rgba(255,255,255,.46); text-align: center; }
.ft-upload > span { width: 43px; height: 43px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--home-black); }
.ft-upload svg { width: 23px; height: 23px; }
.ft-upload strong { font-size: 13px; }
.ft-upload small { max-width: 185px; color: rgba(17,17,17,.58); font-size: 9px; line-height: 1.35; }
.ft-dish-photo { position: absolute; inset: 0; opacity: 0; background: transparent; overflow: hidden; }
.ft-dish-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 34%, rgba(0,0,0,.16)); pointer-events: none; }
.ft-dish-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 48%; transform-origin: center; }
.dish-art { position: relative; width: 150px; height: 150px; display: block; border: 14px solid #fff; border-radius: 50%; background: radial-gradient(circle at 28% 28%, #84c45b 0 9%, transparent 10%), radial-gradient(circle at 70% 34%, #ef6543 0 8%, transparent 9%), radial-gradient(circle at 34% 72%, #6fa943 0 12%, transparent 13%), #b7d46b; box-shadow: 0 16px 32px rgba(0,0,0,.22); }
.dish-art i { position: absolute; width: 74px; height: 25px; border-radius: 999px; background: linear-gradient(135deg,#f3aa61,#fff1d2 62%,#cb7835); box-shadow: inset 7px 0 rgba(86,48,20,.12); }
.dish-art i:nth-child(1) { top: 39px; left: 26px; transform: rotate(24deg); }
.dish-art i:nth-child(2) { top: 74px; left: 37px; transform: rotate(-13deg); }
.dish-art i:nth-child(3) { width: 26px; height: 26px; top: 21px; right: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 35%,#ffb548 0 12%,#f2552b 13%); box-shadow: none; }
.ft-food-thumb .dish-art { width: 34px; height: 34px; border-width: 3px; box-shadow: none; }
.ft-food-thumb .dish-art i { width: 17px; height: 6px; }
.ft-food-thumb .dish-art i:nth-child(1) { top: 8px; left: 5px; }
.ft-food-thumb .dish-art i:nth-child(2) { top: 17px; left: 8px; }
.ft-food-thumb .dish-art i:nth-child(3) { width: 6px; height: 6px; top: 5px; right: 3px; }

.ft-analysis-overlay { position: absolute; inset: 0; opacity: 0; background: rgba(7,13,9,.38); }
.ft-scan-line { position: absolute; left: 18px; right: 18px; top: 20%; height: 2px; opacity: 0; background: #9cff76; box-shadow: 0 0 14px #9cff76, 0 8px 20px rgba(156,255,118,.55); }
.ft-marker { position: absolute; width: 44px; height: 36px; opacity: 0; border: 1px solid rgba(190,255,159,.9); border-radius: 6px; }
.marker-one { top: 76px; left: 70px; }
.marker-two { top: 112px; right: 55px; }
.marker-three { bottom: 38px; left: 122px; width: 36px; height: 30px; }

.ft-draft-card { position: relative; z-index: 4; min-height: 392px; margin-top: -13px; padding: 18px 14px 24px; border-radius: 24px 24px 0 0; background: #fff; }
.ft-draft-card > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 7px; }
.ft-draft-card > header > span { display: grid; gap: 3px; }
.ft-draft-card header small { color: var(--home-hint); font-size: 8px; }
.ft-draft-card header strong { font-family: var(--font-display); font-size: 15px; }
.ft-draft-heading { min-width: 0; }
.ft-draft-title { position: relative; min-height: 18px; display: block; min-width: 170px; }
.ft-draft-title strong { position: absolute; inset: 0 auto auto 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-title-filled { opacity: 0; }
.ft-total { font-size: 13px; white-space: nowrap; }
.ft-total span:empty::before { content: "0"; }
.ft-scan-action { position: relative; width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 7px; padding: 8px 10px; overflow: hidden; border: 0; border-radius: 14px; color: var(--home-green); background: color-mix(in srgb, var(--home-green) 12%, #fff); font-size: 9px; font-weight: 760; }
.ft-scan-action svg { width: 15px; height: 15px; flex: 0 0 auto; }
.scan-action-loading { position: absolute; left: 0; right: 0; opacity: 0; text-align: center; }
.ft-analysis-status { height: 0; display: grid; gap: 5px; opacity: 0; overflow: hidden; }
.ft-analysis-status { position: relative; }
.ft-analysis-status span { color: var(--home-green); font-size: 8px; font-weight: 700; }
.analysis-copy-done { position: absolute; top: 0; left: 0; opacity: 0; }
.ft-analysis-status > i { height: 4px; border-radius: 5px; background: var(--home-border); overflow: hidden; }
.ft-analysis-status > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--home-green); }
.ft-draft-caption { margin: 0 0 4px; color: var(--home-hint); font-size: 7.5px; font-weight: 650; }
.ft-draft-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.ft-draft-summary > span { min-height: 34px; display: grid; align-content: center; justify-items: center; gap: 3px; padding: 6px 4px; border-radius: 13px; background: var(--home-card-soft); }
.ft-draft-summary strong { font-size: 10px; }
.ft-draft-summary strong:empty::before { content: "0"; }
.ft-draft-summary small { color: var(--home-hint); font-size: 7px; }
.ft-fields { display: grid; grid-template-columns: 1fr 72px; gap: 6px; margin-top: 7px; }
.ft-field { min-width: 0; display: grid; gap: 4px; }
.ft-field > span { color: var(--home-hint); font-size: 8px; font-weight: 650; }
.ft-field input, .ft-field output { width: 100%; min-height: 33px; display: flex; align-items: center; padding: 7px 9px; border: 0; border-radius: 13px; outline: 0; background: var(--home-card-soft); color: var(--home-text); font-size: 9px; font-weight: 650; }
.ft-field input::placeholder { color: #999b9c; opacity: 1; }
.ft-field output:empty::before { content: attr(data-placeholder); color: #999b9c; }
.ft-name { grid-column: 1 / -1; }
.ft-name input { font-size: 10px; }
.ft-portion-stepper { min-height: 33px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-radius: 13px; background: var(--home-card-soft); }
.ft-portion-stepper i { color: #63c82b; font-size: 16px; font-style: normal; text-align: center; }
.ft-portion-stepper output { min-height: 0; justify-content: center; padding: 0; background: transparent; color: var(--home-text); font-size: 12px; }
.ft-kbju-caption { margin-top: 7px; }
.ft-kbju-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ft-kbju-fields .ft-field > span { text-align: center; }
.ft-kbju-fields .ft-field output { justify-content: center; padding-inline: 3px; }
.ft-save-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 7px; margin-top: 12px; }
.ft-save { min-height: 40px; border: 0; border-radius: 15px; color: var(--home-hint); background: var(--home-card-soft); font-size: 11px; font-weight: 760; }
.ft-save i { display: none; font-size: 16px; font-style: normal; }
.ft-meal-picker { position: relative; min-height: 40px; padding: 0; border: 0; border-radius: 15px; color: #fff; background: #63c82b; }
.ft-meal-picker i { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); }
.save-pointer { left: calc(50% - 15px); bottom: 47px; }
.ft-extra-products { margin-top: 18px; }
.ft-extra-products > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ft-extra-products h3 { margin: 0; font-size: 15px; line-height: 1.15; }
.ft-extra-products header span { color: var(--home-hint); font-size: 9px; font-weight: 650; }
.ft-extra-products > button { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border: 0; border-radius: 18px; background: var(--home-card-soft); text-align: left; }
.ft-extra-products > button > span { min-width: 0; display: grid; gap: 3px; }
.ft-extra-products > button strong { font-size: 11px; }
.ft-extra-products > button small { overflow: hidden; color: var(--home-hint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ft-extra-products > button > i { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 13px; color: #63c82b; background: rgba(99,200,43,.12); font-size: 21px; font-style: normal; }

.steps-column { padding-bottom: 12vh; }
.steps-intro { min-height: 28vh; padding: 11vh 0 32px; }
.steps-intro h2 { max-width: 430px; margin: 0; font-size: clamp(38px, 4vw, 58px); font-weight: 580; letter-spacing: -.055em; line-height: 1.02; }
.story-step { position: relative; min-height: 88vh; color: #8e9692; border-left: 1px solid #ccd2cc; transition: color .2s ease, border-color .2s ease; }
.step-copy { position: sticky; top: 6vh; height: 88vh; display: flex; flex-direction: column; justify-content: center; padding: 64px 16px 64px 58px; }
.story-step::before { content: ""; position: absolute; left: -2px; top: calc(50% - 20px); width: 3px; height: 40px; border-radius: 4px; background: transparent; }
.story-step.is-active { color: var(--ink); border-left-color: #a8b3ac; }
.story-step.is-active::before { background: var(--accent); }
.step-number { margin-bottom: 20px; color: inherit; font-size: 11px; font-weight: 750; letter-spacing: .11em; }
.story-step h3 { max-width: 520px; margin: 0; font-size: clamp(32px, 3.1vw, 48px); font-weight: 580; letter-spacing: -.045em; line-height: 1.03; }
.story-step p { min-height: 3.1em; max-width: 520px; margin: 18px 0 0; color: inherit; font-size: 17px; line-height: 1.55; }
.page-footer { min-height: 180px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); font-size: 13px; }
.page-footer span:first-child { color: var(--ink); font-size: 18px; font-weight: 700; }

@media (max-width: 980px) {
    .site-header, .intro, .product-story, .page-footer { width: min(100% - 36px,720px); }
    .intro { padding: 72px 0 84px; }
    .intro h1 { font-size: clamp(46px,11vw,72px); }
    .product-story { grid-template-columns: 1fr; gap: 0; }
    .demo-sticky { top: 12px; z-index: 3; min-height: auto; height: 62vh; border-radius: 28px; }
    .phone-motion { width: 233.2px; height: 492.8px; }
    .phone { transform: scale(.55); }
    .demo-caption { top: 20px; left: 22px; right: 22px; }
    .steps-intro { min-height: 38vh; padding-top: 18vh; }
    .story-step { min-height: 88vh; }
    .step-copy { padding-left: 36px; }
}

@media (max-width: 768px) {
    .site-header,
    .intro,
    .page-footer { width: min(100% - 36px, 560px); }

    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        width: 100%;
        padding-inline: 18px;
        background: rgba(242, 244, 239, .92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .header-actions { display: none; }
    .intro { padding: 52px 0 64px; }
    .intro h1 { font-size: clamp(42px, 12vw, 62px); }
    .intro-copy { margin-top: 28px; font-size: 17px; line-height: 1.5; }

    .mobile-hero-actions {
        display: grid;
        gap: 10px;
        margin-top: 32px;
    }

    .mobile-telegram,
    .mobile-github {
        width: 100%;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 20px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 720;
        text-decoration: none;
    }

    .mobile-telegram {
        color: #fff;
        border: 0;
        background: var(--blue);
    }

    .mobile-github {
        color: var(--ink);
        border: 1px solid var(--line);
        background: transparent;
    }

    .mobile-telegram svg,
    .mobile-github svg { width: 19px; height: 19px; }

    .product-story {
        width: 100%;
        display: block;
        padding-top: 0;
        padding-bottom: 28vh;
        padding-bottom: 28svh;
    }

    .mobile-story-intro {
        width: min(100% - 36px, 560px);
        min-height: 30vh;
        min-height: 30svh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-inline: auto;
        padding: 32px 2px 16px;
    }

    .mobile-story-intro h2 {
        max-width: 430px;
        margin: 0;
        font-size: clamp(32px, 10vw, 46px);
        font-weight: 580;
        letter-spacing: -.055em;
        line-height: 1.02;
    }

    .mobile-story-start {
        width: 100%;
        min-height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        padding: 0 20px;
        color: #fff;
        border-radius: 999px;
        background: var(--accent);
        font-size: 14px;
        font-weight: 720;
        text-decoration: none;
    }

    .demo-column { display: contents; }

    .demo-sticky {
        top: 38vh;
        top: 38svh;
        z-index: 20;
        width: min(calc(100% - 32px), 410px);
        height: calc(62vh - 8px);
        height: calc(62svh - 8px);
        min-height: 0;
        align-items: flex-start;
        margin-inline: auto;
        margin-bottom: -28vh;
        margin-bottom: -28svh;
        padding-top: 8px;
        border-radius: 26px;
        transition: opacity .28s ease;
    }

    .product-story.is-demo-locked .demo-sticky {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .demo-caption {
        top: auto;
        left: auto;
        right: 14px;
        bottom: 14px;
        width: auto;
        padding: 7px 10px;
        border-radius: 999px;
        color: #59635e;
        background: rgba(251, 252, 249, .84);
        box-shadow: 0 4px 14px rgba(30, 44, 39, .08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        letter-spacing: .06em;
    }

    .demo-caption > span:first-child { display: none; }
    .phone-motion { width: 237.44px; height: 501.76px; }

    .phone {
        transform: scale(.56);
        box-shadow: 0 20px 44px rgba(30, 44, 39, .16), 0 5px 14px rgba(30, 44, 39, .1), inset 0 0 0 1px rgba(255,255,255,.16);
    }

    .steps-column {
        width: min(100% - 36px, 560px);
        margin-inline: auto;
        padding-bottom: 8svh;
    }

    .steps-intro { display: none; }

    .story-step {
        min-height: 68vh;
        min-height: 68svh;
        scroll-margin-top: 40px;
        border-left: 0;
    }

    .story-step::before { display: none; }

    .step-copy {
        position: sticky;
        top: max(88px, 10vh);
        top: max(88px, 10svh);
        width: 100%;
        height: auto;
        min-height: 0;
        justify-content: flex-start;
        padding: 0 2px 56px;
        opacity: 0;
        transition: opacity .2s ease;
    }

    .story-step.is-active .step-copy { opacity: 1; }
    .step-number { display: block; margin-bottom: 20px; }
    .story-step h3 { min-height: 0; max-width: 520px; font-size: clamp(29px, 8vw, 36px); letter-spacing: -.04em; line-height: 1.04; }
    .story-step p { max-width: 520px; margin-top: 16px; font-size: 16px; line-height: 1.55; }
    .desktop-step-description { display: none; }
    .mobile-step-description { display: inline; }
}

@media (max-width: 420px) {
    .phone-motion { width: 220.48px; height: 465.92px; }
    .phone { transform: scale(.52); }
}

@media (max-width: 380px) {
    .phone-motion { width: 203.52px; height: 430.08px; }
    .phone { transform: scale(.48); }
}

@media (max-width: 340px) {
    .phone-motion { width: 186.56px; height: 394.24px; }
    .phone { transform: scale(.44); }
}

@media (max-width: 420px) and (max-height: 740px) {
    .demo-sticky {
        top: 42vh;
        top: 42svh;
        height: calc(58vh - 8px);
        height: calc(58svh - 8px);
    }

    .phone-motion { width: 169.6px; height: 358.4px; }
    .phone { transform: scale(.4); }
}

@media (max-width: 420px) and (max-height: 620px) {
    .demo-sticky {
        top: 46vh;
        top: 46svh;
        height: calc(54vh - 8px);
        height: calc(54svh - 8px);
    }

    .phone-motion { width: 135.68px; height: 286.72px; }
    .phone { transform: scale(.32); }
}

@media (max-width: 560px) {
    .site-header { height: 76px; }
    .brand { font-size: 15px; }
    .brand-logo { width: 28px; height: 28px; border-radius: 8px; }
    .header-telegram { min-height: 38px; padding-inline: 13px; }
    .header-telegram span { display: none; }
    .header-github { width: 38px; min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .story-step,
    .step-copy { transition: none; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .demo-sticky { transition-duration: .12s; }
    .phone-motion { transform-style: flat; }
    .phone { box-shadow: 0 12px 26px rgba(30, 44, 39, .12), inset 0 0 0 1px rgba(255,255,255,.16); }
}