:root {
  --bg: #f5f2ea; --bg-2: #ece8dc; --surface: #fbfaf5; --line: rgba(31, 42, 34, 0.12);
  --fg: #1f2a22; --muted: #6d776f;
  --accent: #3d5a45; --accent-2: #e27396; --accent-3: #f2c14e; --on-accent: #fff; --curtain: #3d5a45;
  --font-display: 'Cormorant Garamond', Georgia, serif; --radius: 22px;
  color-scheme: light;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }
h1 em, h2 em { color: var(--accent-2); font-style: italic; font-weight: 500; }
.h-lg { font-size: clamp(42px, 6vw, 92px); }
.btn:hover { color: #fff; }
.btn::before { background: var(--accent-2); }
.field input, .field textarea, .field select { background: #fff; }

.fl-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 70px; overflow: hidden; }
.fl-draw { position: absolute; left: 38%; top: 50%; height: 88%; transform: translateY(-50%); opacity: 0.55; pointer-events: none; }
.fl-draw path, .fl-draw circle { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.fl-draw .fl-petal { stroke: var(--accent-2); }
.fl-draw .fl-dot { fill: var(--accent-3); stroke: none; }
.fl-hero__in { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.fl-kicker { font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: var(--accent); margin-bottom: 20px; }
.fl-title { font-size: clamp(56px, 7.6vw, 124px); line-height: 0.95; display: grid; margin-bottom: 28px; }
.fl-title em { font-style: italic; color: var(--accent-2); font-weight: 500; }
.fl-hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 32px; flex-wrap: wrap; }
.fl-note { font-weight: 700; color: var(--muted); }
.fl-hero__img { aspect-ratio: 4 / 5; border-radius: 30px 200px 30px 30px; box-shadow: 0 40px 80px rgba(31, 42, 34, 0.18); }
@media (max-width: 900px) { .fl-hero__in { grid-template-columns: 1fr; } .fl-draw { left: auto; right: -20%; opacity: 0.35; } }

.fl-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fl-card { display: grid; gap: 12px; }
.fl-card .d-img { aspect-ratio: 3 / 4; border-radius: 18px; }
.fl-card img { transition: transform 1.2s var(--ease); }
.fl-card:hover img { transform: scale(1.07); }
.fl-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fl-card h3 { font-size: 28px; }
.fl-card p { color: var(--muted); font-size: 14px; }
.fl-card b { font-size: 17px; color: var(--accent); white-space: nowrap; }
.fl-add { padding: 12px; border-radius: 100px; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; transition: 0.3s; }
.fl-add:hover { background: var(--accent); color: #fff; }
@media (max-width: 980px) { .fl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fl-card__row { flex-direction: column; gap: 2px; } .fl-card h3 { font-size: 22px; } .fl-cards { gap: 12px; } }

.fl-how { background: var(--accent); color: #f5f2ea; --muted: #b9c6bc; --line: rgba(255, 255, 255, 0.15); }
.fl-how .eyebrow { color: #b9c6bc; }
.fl-how h2 em { color: var(--accent-3); }
.fl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fl-steps > div { padding: 34px; border-radius: var(--radius); border: 1px solid var(--line); display: grid; gap: 10px; }
.fl-steps span { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--accent-3); font-style: italic; }
.fl-steps h3 { font-size: 30px; }
.fl-steps p { color: var(--muted); }
@media (max-width: 860px) { .fl-steps { grid-template-columns: 1fr; } }

.fl-system { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.fl-dash__body { padding: 18px; background: #f7f7f3; display: grid; gap: 14px; font-family: var(--font-body); }
.fl-dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fl-dash__kpis div { background: #fff; border-radius: 12px; padding: 12px; }
.fl-dash__kpis small, .fl-dash__main small { display: block; font-size: 11px; color: #888; margin-bottom: 4px; }
.fl-dash__kpis b { font-size: 18px; }
.fl-dash__kpis b.ok { color: #2e9a52; }
.fl-dash__main { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.fl-dash__chart, .fl-dash__stock { background: #fff; border-radius: 12px; padding: 14px; }
.fl-dash__chart svg { width: 100%; height: 150px; }
.fl-line { fill: none; stroke: #e27396; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.fl-area { fill: rgba(226, 115, 150, 0.12); }
.fl-dash__stock { display: grid; gap: 10px; align-content: start; font-size: 12px; }
.fl-dash__stock div { display: grid; gap: 4px; }
.fl-dash__stock i { display: block; height: 7px; border-radius: 7px; background: linear-gradient(90deg, #3d5a45 var(--w), #eceee9 var(--w)); }
.fl-dash__stock i.low { background: linear-gradient(90deg, #e27396 var(--w), #eceee9 var(--w)); }
.fl-feats { margin-top: 0; }
@media (max-width: 980px) { .fl-system { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .fl-dash__kpis { grid-template-columns: 1fr 1fr; } .fl-dash__main { grid-template-columns: 1fr; } }
.demo-bar { background: rgba(31, 42, 34, 0.88); }