:root {
  --bg: hsl(220 24% 97.5%);
  --surface: #fff;
  --surface-2: hsl(220 24% 98.5%);
  --surface-3: hsl(220 20% 96%);
  --border: hsl(220 16% 90%);
  --border-2: hsl(220 16% 84%);
  --text-1: hsl(222 30% 14%);
  --text-2: hsl(220 14% 36%);
  --text-3: hsl(220 11% 46%);
  --brand: hsl(233 60% 50%);
  --brand-hover: hsl(233 60% 44%);
  --brand-soft: hsl(233 70% 96%);
  --ok: hsl(154 56% 30%);
  --ok-soft: hsl(154 48% 94%);
  --shadow: 0 16px 48px hsl(222 30% 14% / .08), 0 2px 8px hsl(222 30% 14% / .04);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --container: 1160px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: hsl(224 16% 9%);
  --surface: hsl(224 14% 12%);
  --surface-2: hsl(224 13% 14.5%);
  --surface-3: hsl(224 12% 18%);
  --border: hsl(224 11% 21%);
  --border-2: hsl(224 11% 28%);
  --text-1: hsl(220 22% 95%);
  --text-2: hsl(220 13% 74%);
  --text-3: hsl(220 11% 62%);
  --brand: hsl(232 86% 74%);
  --brand-hover: hsl(232 86% 80%);
  --brand-soft: hsl(232 34% 21%);
  --ok: hsl(152 56% 62%);
  --ok-soft: hsl(154 28% 18%);
  --shadow: 0 18px 52px hsl(0 0% 0% / .35);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text-1);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::selection { background: var(--brand-soft); color: var(--text-1); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid hsl(233 60% 50% / .28);
  outline-offset: 2px;
}
.skip { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); background: var(--brand); color: white; padding: 8px 14px; border-radius: 8px; }
.skip:focus { transform: none; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.muted { color: var(--text-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.section-kicker { color: var(--text-3); font-size: 13px; font-weight: 600; letter-spacing: .02em; }

.site-header { position: sticky; top: 0; z-index: 20; padding: 16px 0 2px; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 96%, transparent) 72%, transparent); }
.nav { position: relative; min-height: 74px; padding: 10px 12px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 22px; overflow: visible; border: 1px solid color-mix(in srgb, var(--border-2) 58%, transparent); border-radius: 28px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--brand-soft)), color-mix(in srgb, var(--surface-2) 96%, transparent)); box-shadow: 0 18px 50px hsl(222 35% 12% / .09), inset 0 1px 0 hsl(0 0% 100% / .72); backdrop-filter: blur(22px) saturate(1.2); }
.nav::before { content: ""; position: absolute; inset: 1px 18% auto; height: 1px; background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .85), transparent); pointer-events: none; }
.nav > * { position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 750; letter-spacing: -.025em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: transparent; font-size: 0; background: url("assets/logo.svg") center / cover no-repeat; box-shadow: 0 8px 18px hsl(233 60% 50% / .18); }
.brand-mark > svg { display: none; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.nav-links > a { min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 11px; transition: color .18s ease, background-color .18s ease; }
.nav-links > a:hover, .nav-links > a[aria-current="page"] { color: var(--text-1); background: color-mix(in srgb, var(--surface-3) 78%, transparent); }
.solutions-menu { position: relative; }
.nav-trigger { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--border-2) 72%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text-1); font: inherit; font-weight: 650; box-shadow: 0 5px 14px hsl(222 30% 14% / .05), inset 0 1px 0 hsl(0 0% 100% / .7); transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; appearance: none; }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: var(--surface); box-shadow: 0 8px 20px hsl(222 30% 14% / .09); transform: translateY(-1px); }
.nav-chevron { transition: transform .18s ease; }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.solutions-panel { position: absolute; top: calc(100% + 16px); left: 50%; width: min(540px, calc(100vw - 40px)); padding: 20px; border: 1px solid color-mix(in srgb, var(--border-2) 72%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 32px 90px hsl(222 35% 10% / .2), 0 5px 18px hsl(222 35% 10% / .08), inset 0 1px 0 hsl(0 0% 100% / .72); backdrop-filter: blur(24px); transform: translateX(-50%); color: var(--text-1); }
.solutions-panel:not([hidden]) { animation: solutions-in .16s ease-out; }
.solutions-panel-head { margin: -6px -6px 8px; padding: 14px 14px 18px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 16px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--surface-2) 90%, transparent)); }
.solutions-panel-head span { color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.solutions-panel-head p { margin-top: 5px; color: var(--text-2); font-size: 13px; }
.solutions-list { display: grid; gap: 5px; padding-block: 8px 12px; }
.solution-link { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; align-items: center; gap: 13px; padding: 11px; border: 1px solid transparent; border-radius: 14px; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.solution-link:hover, .solution-link:focus-visible { color: var(--text-1); border-color: var(--border); background: var(--surface-2); transform: translateX(3px); }
.solution-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; color: var(--brand); background: linear-gradient(145deg, var(--surface), var(--brand-soft)); box-shadow: 0 5px 12px hsl(222 30% 14% / .05); }
.solution-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.solution-link strong, .solution-link small { display: block; }
.solution-link strong { font-size: 14px; font-weight: 650; }
.solution-link small { margin-top: 2px; overflow: hidden; color: var(--text-2); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.solution-arrow { color: var(--text-3); transition: transform .18s ease, color .18s ease; }
.solution-link:hover .solution-arrow, .solution-link:focus-visible .solution-arrow { color: var(--brand); transform: translateX(2px); }
.solutions-actions { margin: 0 -20px -20px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); border-radius: 0 0 22px 22px; background: var(--surface-2); }
.solutions-actions a { color: var(--text-2); font-size: 13px; font-weight: 650; }
.solutions-actions a:hover { color: var(--brand); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.icon-btn, .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--border-2) 72%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 5px 14px hsl(222 30% 14% / .05); transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.icon-btn:hover, .menu-btn:hover { border-color: color-mix(in srgb, var(--brand) 42%, var(--border)); background: var(--surface); transform: translateY(-1px); }
.menu-btn { display: none; }
.nav-actions .btn { min-height: 46px; padding-inline: 19px; border-radius: 14px; font-size: 13px; font-weight: 700; }
.nav-actions .btn:not(.btn-primary) { background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 5px 14px hsl(222 30% 14% / .05); }
.nav-actions .btn-primary { padding-inline: 23px; border-color: transparent; background: linear-gradient(135deg, hsl(224 84% 58%), hsl(233 66% 49%)); box-shadow: 0 10px 24px hsl(233 60% 50% / .28), inset 0 1px 0 hsl(0 0% 100% / .24); }
.nav-actions .btn-primary:hover { border-color: transparent; background: linear-gradient(135deg, hsl(224 84% 53%), hsl(233 66% 44%)); box-shadow: 0 13px 30px hsl(233 60% 50% / .34); }
.btn { min-height: 42px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); border-color: var(--brand); }
.btn svg { transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { color: white; border-color: hsl(233 60% 50%); background: hsl(233 60% 50%); box-shadow: 0 8px 18px hsl(233 60% 50% / .2); }
.btn-primary:hover { background: hsl(233 60% 44%); }
.btn-lg { min-height: 50px; padding-inline: 24px; }

/* Hero yüksekliği EKRANA BAĞLIDIR: 900px yüksekliğinde bir dizüstünde
   başlık ve ürün vitrini birlikte görünür kalmalı, uzun ekranlarda ise
   nefes alan bir üst boşluk oluşmalı. */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 7vh, 86px) 0 clamp(64px, 9vh, 108px); }
.hero::before { content: ""; position: absolute; width: 640px; height: 640px; top: -340px; left: 50%; border-radius: 50%; background: hsl(233 80% 65% / .12); filter: blur(10px); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 56px; }
.hero h1, .page-hero h1 { margin-top: 18px; max-width: 720px; font-size: clamp(42px, 6vw, 68px); line-height: 1.04; letter-spacing: -.055em; }
.hero-copy { margin-top: 24px; max-width: 600px; color: var(--text-2); font-size: 19px; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--text-3); font-size: 13px; }
.hero-note span { color: var(--ok); font-weight: 700; }
.trust-line { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 22px; color: var(--text-3); font-size: 12px; }
.trust-line span { display: inline-flex; align-items: center; gap: 7px; }
.trust-line svg { color: var(--ok); }
.product-window { position: relative; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 30px 80px hsl(222 35% 12% / .12), 0 8px 24px hsl(222 35% 12% / .06); transform: perspective(1100px) rotateY(-2deg) rotateX(1deg); }
.product-window::before { content: ""; position: absolute; z-index: -1; inset: 8% -4% -5% 12%; border-radius: 28px; background: hsl(233 70% 58% / .12); filter: blur(32px); }
.product-window::after { content: ""; position: absolute; z-index: -2; inset: -52px -38px 9% 14%; border-radius: 48% 48% 28px 28px; background: linear-gradient(145deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 50%, transparent)); }
.product-window { animation: window-in .65s cubic-bezier(.22,.61,.36,1) both; }
.window-bar { display: flex; align-items: center; justify-content: space-between; padding: 5px 5px 14px; color: var(--text-3); font-size: 12px; }
.dots { display: flex; gap: 5px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); }
/* Ürün vitrini: küçülüp oyuncak görünmemeli, büyüyüp ekranı da yutmamalı.
   Alt sınır içeriğin (4 KPI + grafik + kritik stok) sıkışmadığı ölçüdür. */
.dash { min-height: clamp(500px, 58vh, 670px); padding: 22px; border-radius: 13px; background: var(--bg); border: 1px solid var(--border); }
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(12px, 1.6vh, 20px); }
.dash-head strong { font-size: 15px; }
.preview-label { padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text-3); font-size: 9px; font-weight: 600; letter-spacing: .01em; }
.status { padding: 4px 9px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.metric { min-width: 0; padding: clamp(12px, 1.4vh, 16px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.metric:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: 0 8px 20px hsl(222 30% 14% / .06); }
.metric span { color: var(--text-3); font-size: 11px; }
.metric strong { display: block; overflow: hidden; margin-top: 6px; font-size: 21px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.metric small { display: block; overflow: hidden; margin-top: 4px; color: var(--text-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.metric .metric-up { color: var(--ok); }
.metric-alert strong { color: hsl(2 70% 45%); }
.metric-warn strong { color: hsl(30 90% 34%); }
.chart { height: 150px; margin-top: 10px; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.chart svg { width: 100%; height: 100%; }
.hero-sales-chart { height: clamp(190px, 24vh, 285px); margin-top: 14px; padding: 10px; }
.hero-chart-head { position: absolute; z-index: 1; top: 14px; left: 16px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; color: var(--text-3); font-size: 11px; }
.hero-chart-head div { display: grid; }
.hero-chart-head strong { margin-top: 2px; color: var(--text-1); font-size: 16px; font-weight: 600; }
.hero-chart-head .metric-up { color: var(--ok); font-weight: 600; }
.hero-months { font-size: 10px; }
.chart .chart-line { stroke-dasharray: 800; stroke-dashoffset: 800; animation: draw-line 1.4s .2s ease forwards; }
.hero-support { margin-top: 14px; padding: clamp(12px, 1.4vh, 16px); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.hero-support-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-support-head div { display: grid; }
.hero-support-head div span { color: var(--text-3); font-size: 10px; }
.hero-support-head strong { font-size: 13px; }
.hero-support-head > span { padding: 4px 7px; border-radius: 6px; background: hsl(30 90% 94%); color: hsl(30 90% 34%); font-size: 9px; font-weight: 700; }
.hero-stock-list { display: grid; gap: 10px; margin-top: 14px; }
.hero-stock-list > div { display: grid; grid-template-columns: minmax(120px, 1.2fr) 1fr 50px; align-items: center; gap: 12px; }
.hero-stock-list span, .hero-stock-list strong { font-size: 10px; }
.hero-stock-list strong { text-align: right; }
.activity { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.activity div { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 12px; color: var(--text-2); }

.analytics-section { position: relative; background: var(--surface); border-block: 1px solid var(--border); }
.analytics-toolbar { min-height: 60px; margin-bottom: 14px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.analytics-toolbar > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.analytics-toolbar strong { font-size: 13px; }
.analytics-toolbar div > span:last-child { overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); animation: soft-pulse 2.8s ease-in-out infinite; }
.period-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 11px; white-space: nowrap; }
.showcase-tabs { width: min(100%, 900px); margin: 0 auto 18px; padding: 5px; display: flex; gap: 4px; overflow-x: auto; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); scrollbar-width: none; }
.showcase-tabs::-webkit-scrollbar { display: none; }
.showcase-tab { min-height: 36px; padding: 0 13px; flex: 1 0 auto; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.showcase-tab:hover { color: var(--text-1); background: var(--surface-3); }
.showcase-tab.is-active { color: var(--text-1); background: var(--surface); box-shadow: 0 1px 3px hsl(222 30% 14% / .08); }
.analytics-grid { width: min(100%, 900px); margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 14px; }
.analytics-card { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.analytics-card:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: 0 14px 34px hsl(222 30% 14% / .06); }
.analytics-wide, .analytics-full { grid-column: 1 / -1; }
.analytics-card[hidden] { display: none; }
.showcase-card.is-active { animation: showcase-in .28s ease both; }
.analytics-head { min-height: 46px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.analytics-head > div:first-child > span { color: var(--text-3); font-size: 11px; }
.analytics-head h3 { margin-top: 2px; font-size: 15px; letter-spacing: -.015em; }
.analytics-value { text-align: right; }
.analytics-value strong { display: block; font-size: 17px; letter-spacing: -.025em; }
.analytics-value span { font-size: 10px; }
.positive { color: var(--ok); }
.chart-legend { display: flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 10px; white-space: nowrap; }
.chart-legend i { width: 7px; height: 7px; margin-left: 6px; border-radius: 2px; }
.legend-income { background: hsl(154 56% 42%); }
.legend-expense { background: hsl(30 78% 54%); }
.legend-net { background: var(--brand); }
.plot { width: 100%; min-height: 220px; margin-top: 12px; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.grid-lines { fill: none; stroke: var(--border); stroke-width: 1; }
.axis-labels, .month-labels { fill: var(--text-3); font-size: 9px; }
.month-labels text { text-anchor: middle; }
/* Çizgi rengi ARTIK PAYLAŞILAN kuralda. Daha önce yalnızca .analytics-card
   altında tanımlıydı; o blok kaldırılınca hero grafiği renksiz kalıyordu. */
.chart-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.income-line { stroke: hsl(154 56% 38%); stroke-width: 2.5; }
.expense-line { stroke: hsl(30 78% 54%); stroke-width: 2.5; }
.net-line { stroke: var(--brand); stroke-width: 3; }
.animate-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw-line 1.6s .15s ease forwards; }
.chart-points circle { fill: var(--surface); stroke: var(--brand); stroke-width: 3; cursor: crosshair; transition: r .16s ease, fill .16s ease; }
.chart-points circle:hover { r: 8px; fill: var(--brand); }
.net-points circle { fill: var(--bg); }
.chart-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.chart-summary span { padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.chart-summary small { display: block; color: var(--text-3); font-size: 10px; }
.chart-summary strong { display: block; margin-top: 3px; font-size: 14px; }
.donut-layout { min-height: 250px; display: grid; grid-template-columns: minmax(160px, .9fr) 1.1fr; align-items: center; gap: 20px; }
.donut { position: relative; display: grid; place-items: center; }
.donut svg { width: min(100%, 210px); transform: rotate(-90deg); }
.donut-track, .donut-segment { fill: none; stroke-width: 24; }
.donut-track { stroke: var(--surface-3); }
.donut-segment { stroke-linecap: butt; cursor: crosshair; transform-origin: center; transition: stroke-width .18s ease, opacity .18s ease; }
.donut-segment:hover { stroke-width: 30; opacity: .9; }
.seg-one { stroke: var(--brand); stroke-dasharray: 196.5 427.3; stroke-dashoffset: 0; }
.seg-two { stroke: hsl(209 80% 52%); stroke-dasharray: 145.3 427.3; stroke-dashoffset: -196.5; }
.seg-three { stroke: hsl(154 56% 42%); stroke-dasharray: 85.5 427.3; stroke-dashoffset: -341.8; }
.donut > div { position: absolute; display: grid; text-align: center; }
.donut > div strong { font-size: 20px; letter-spacing: -.03em; }
.donut > div span { color: var(--text-3); font-size: 10px; }
.donut-legend { display: grid; gap: 12px; }
.donut-legend span { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; }
.donut-legend i { width: 8px; height: 8px; border-radius: 2px; }
.donut-legend b { font-weight: 500; }
.donut-legend em { color: var(--text-3); font-style: normal; }
.dot-one { background: var(--brand); }.dot-two { background: hsl(209 80% 52%); }.dot-three { background: hsl(154 56% 42%); }
.columns rect { fill: color-mix(in srgb, var(--brand) 78%, white); cursor: crosshair; transform-box: fill-box; transform-origin: bottom; animation: grow-bar .8s ease both; transition: fill .18s ease, transform .18s ease; }
.columns rect:nth-child(2) { animation-delay: .08s; }.columns rect:nth-child(3) { animation-delay: .16s; }.columns rect:nth-child(4) { animation-delay: .24s; }.columns rect:nth-child(5) { animation-delay: .32s; }.columns rect:nth-child(6) { animation-delay: .4s; }
.columns rect:hover { fill: var(--brand); transform: scaleY(1.03); }
.alert-count { padding: 5px 8px; border-radius: 6px; background: hsl(2 84% 96%); color: hsl(2 70% 45%); font-size: 11px; }
.stock-list { display: grid; gap: 17px; margin-top: 19px; }
.stock-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) 1fr 42px; align-items: center; gap: 14px; }
.stock-row > div:first-child strong { display: block; font-size: 12px; }
.stock-row > div:first-child span { color: var(--text-3); font-size: 10px; }
.progress { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.progress i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(2 70% 52%), hsl(30 88% 54%)); transform-origin: left; animation: grow-progress .9s ease both; }
.stock-row em { color: hsl(2 70% 45%); font-size: 9px; font-style: normal; text-align: right; }
.risk-chart { display: grid; gap: 18px; margin-top: 26px; }
.risk-row { display: grid; grid-template-columns: 112px 1fr 56px; align-items: center; gap: 12px; }
.risk-row span { color: var(--text-2); font-size: 11px; }
.risk-row > div { height: 10px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.risk-row i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--bar); transform-origin: left; animation: grow-progress .9s ease both; }
.risk-row strong { font-size: 11px; text-align: right; }
.combo-chart { min-height: 230px; }
.combo-bars rect { transform-box: fill-box; transform-origin: bottom; animation: grow-bar .8s ease both; }
.income-bars rect { fill: hsl(154 56% 42% / .75); }
.expense-bars rect { fill: hsl(30 78% 54% / .68); }
.chart-tooltip { position: fixed; z-index: 100; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--text-1); color: var(--surface); box-shadow: var(--shadow); font-size: 11px; white-space: nowrap; transition: opacity .12s ease; }
.chart-tooltip.show { opacity: 1; }

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes grow-bar { from { transform: scaleY(0); opacity: .25; } to { transform: scaleY(1); opacity: 1; } }
@keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes showcase-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.section { padding: 88px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { max-width: 680px; margin-bottom: 42px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section h2, .cta h2 { margin-top: 12px; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.04em; }
.section-head p { margin-top: 14px; color: var(--text-2); }
.product-overview-section { overflow: hidden; background: var(--surface); border-block: 1px solid var(--border); }
.product-overview-section .section-head { max-width: 760px; margin-bottom: 28px; }
.overview-stage { position: relative; min-height: 690px; margin-top: 12px; }
.overview-stage::before, .overview-stage::after { content: ""; position: absolute; z-index: 0; width: 240px; height: 240px; border-radius: 46px; background: linear-gradient(145deg, hsl(211 90% 63% / .78), hsl(233 75% 54% / .88)); transform: rotate(18deg); filter: saturate(.9); }
.overview-stage::before { left: -160px; top: 210px; }
.overview-stage::after { right: -175px; top: 70px; transform: rotate(-22deg); }
.overview-screen { position: absolute; z-index: 2; top: 72px; left: 50%; width: min(650px, 55%); padding: 10px; border: 8px solid hsl(225 36% 18%); border-radius: 28px; background: var(--surface); box-shadow: 0 32px 75px hsl(222 32% 12% / .2); transform: translateX(-50%); }
.overview-screen::before { content: ""; position: absolute; z-index: -1; inset: -12px; border-radius: 32px; background: linear-gradient(140deg, hsl(211 92% 60%), hsl(233 70% 36%)); }
.overview-screen-bar { min-height: 42px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.overview-screen-bar .brand-mark { width: 24px; height: 24px; border-radius: 7px; }
.overview-screen-bar strong { font-size: 12px; }
.overview-screen-bar > span:last-child { margin-left: auto; color: var(--text-3); font-size: 10px; }
.overview-app { min-height: 350px; display: grid; grid-template-columns: 52px 1fr; background: var(--bg); }
.overview-sidebar { padding: 18px 12px; display: grid; align-content: start; gap: 15px; border-right: 1px solid var(--border); background: var(--surface); }
.overview-sidebar i { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-3); }
.overview-sidebar i:first-child { background: var(--brand); }
.overview-content { padding: 22px; }
.overview-content-head { display: flex; align-items: center; justify-content: space-between; }
.overview-content-head div { display: grid; }
.overview-content-head small, .overview-mini-kpis small { color: var(--text-3); font-size: 9px; }
.overview-content-head strong { font-size: 15px; }
.overview-content-head > span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-3); font-size: 9px; background: var(--surface); }
.overview-mini-kpis { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.overview-mini-kpis div { padding: 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.overview-mini-kpis strong { display: block; margin-top: 4px; font-size: 13px; }
.overview-chart { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--brand); }
.overview-chart > span { color: var(--text-2); font-size: 10px; font-weight: 600; }
.overview-chart svg { width: 100%; height: 145px; margin-top: 4px; }
.overview-feature { position: absolute; z-index: 4; width: 242px; min-height: 104px; padding: 16px; display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: 12px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 14px 38px hsl(222 30% 14% / .1); backdrop-filter: blur(12px); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.overview-feature:hover { z-index: 5; border-color: var(--border-2); box-shadow: 0 20px 48px hsl(222 30% 14% / .15); transform: translateY(-4px); }
.overview-feature .feature-icon { width: 40px; height: 40px; }
.overview-feature h3 { font-size: 14px; letter-spacing: -.015em; }
.overview-feature p { margin-top: 4px; color: var(--text-2); font-size: 12px; line-height: 1.4; }
.overview-feature-1 { left: 0; top: 116px; }
.overview-feature-2 { left: 18px; top: 292px; }
.overview-feature-3 { right: 0; top: 116px; }
.overview-feature-4 { right: 18px; top: 292px; }
.overview-feature-5 { left: 180px; bottom: 16px; }
.overview-feature-6 { right: 180px; bottom: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: .2s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: 0 12px 30px hsl(222 30% 14% / .05); }
.feature-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.feature-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-card h3 { margin-top: 18px; font-size: 17px; }
.feature-card p { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.feature-card[id], section[id], .product-window[id] { scroll-margin-top: 88px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.trust-item { padding: 30px; }
.trust-item + .trust-item { border-left: 1px solid var(--border); }
.trust-item strong { display: block; margin-bottom: 6px; }
.trust-item p { color: var(--text-2); font-size: 14px; }
.trust-grid-four { grid-template-columns: repeat(2, 1fr); gap: 14px; border: 0; overflow: visible; background: transparent; }
.trust-grid-four .trust-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.trust-grid-four .trust-item + .trust-item { border-left: 1px solid var(--border); }
.split-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) .72fr; align-items: end; gap: 72px; }
.split-head p { padding-bottom: 4px; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 0; border-radius: var(--radius-lg); background: linear-gradient(135deg, hsl(228 48% 15%), hsl(233 55% 27%)); color: white; box-shadow: 0 24px 60px hsl(228 45% 14% / .2); overflow: hidden; }
.flow-step { position: relative; min-height: 220px; padding: 30px; }
.flow-step + .flow-step { border-left: 1px solid hsl(0 0% 100% / .14); }
.flow-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; }
.flow-step h3 { margin-top: 28px; font-size: 19px; letter-spacing: -.025em; }
.flow-step p { margin-top: 9px; color: hsl(0 0% 100% / .68); font-size: 14px; }
.flow-step::after { content: "→"; position: absolute; z-index: 2; top: 34px; right: -12px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid hsl(0 0% 100% / .18); border-radius: 50%; background: hsl(233 48% 22%); color: hsl(0 0% 100% / .7); font-size: 12px; }
.flow-step:last-child::after { display: none; }
.proof { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.proof-copy h2 { margin-top: 12px; }
.proof-list { display: grid; gap: 14px; margin-top: 28px; }
.proof-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.proof-check { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.proof-item strong { display: block; font-size: 14px; }
.proof-item p { margin-top: 3px; color: var(--text-2); font-size: 13px; }
.mini-ui { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.mini-ui-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 16px; }
.mini-ui-head span { color: var(--text-3); font-size: 12px; }
.mini-list { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.mini-row { min-height: 57px; padding: 11px 14px; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; background: var(--surface); }
.mini-row + .mini-row { border-top: 1px solid var(--border); }
.mini-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 700; }
.mini-row strong { display: block; font-size: 13px; }
.mini-row small { color: var(--text-3); }
.mini-amount { font-size: 13px; font-weight: 600; }
.micro-note { margin-top: 12px; display: flex; justify-content: space-between; color: var(--text-3); font-size: 11px; }
.pricing-approach { padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: 0 18px 50px hsl(222 30% 14% / .05); }
.pricing-approach h2 { max-width: 720px; }
.pricing-approach p { max-width: 720px; margin-top: 14px; color: var(--text-2); }
.pricing-approach .btn { max-width: 300px; text-align: center; }
.cta { padding: 46px; border-radius: var(--radius-lg); background: hsl(233 60% 50%); color: white; display: flex; align-items: center; justify-content: space-between; gap: 30px; box-shadow: 0 22px 60px hsl(233 60% 50% / .22); }
.cta p { margin-top: 10px; color: hsl(0 0% 100% / .76); }
.cta .btn { background: white; color: hsl(233 60% 42%); border-color: white; white-space: nowrap; }

.page-hero { padding: 82px 0 54px; text-align: center; }
.page-hero h1 { margin-inline: auto; font-size: clamp(38px, 5vw, 56px); }
.page-hero p { max-width: 640px; margin: 18px auto 0; color: var(--text-2); font-size: 18px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card { position: relative; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.price-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow); }
.popular { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--brand); color: white; border-radius: 99px; padding: 5px 12px; font-size: 11px; font-weight: 700; }
.price { margin: 22px 0 4px; font-size: 38px; font-weight: 700; letter-spacing: -.04em; }
.price small { font-size: 14px; font-weight: 500; color: var(--text-3); }
.price-list { display: grid; gap: 12px; margin: 26px 0; padding: 22px 0; border-block: 1px solid var(--border); list-style: none; }
.price-list li { display: flex; gap: 9px; font-size: 14px; color: var(--text-2); }
.price-list li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.price-card .btn { width: 100%; }
.billing-note { margin-top: 24px; text-align: center; color: var(--text-3); font-size: 13px; }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside { padding: 52px; background: hsl(233 43% 16%); color: white; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; }
.auth-aside::after { content: ""; position: absolute; width: 520px; height: 520px; right: -260px; bottom: -240px; border: 1px solid hsl(0 0% 100% / .14); border-radius: 50%; box-shadow: 0 0 0 90px hsl(0 0% 100% / .03), 0 0 0 180px hsl(0 0% 100% / .02); }
.auth-aside .brand { position: relative; z-index: 1; }
.auth-message { max-width: 500px; position: relative; z-index: 1; }
.auth-message h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.06; letter-spacing: -.05em; }
.auth-message p { margin-top: 18px; color: hsl(0 0% 100% / .68); font-size: 17px; }
.auth-foot { color: hsl(0 0% 100% / .5); font-size: 12px; position: relative; z-index: 1; }
.auth-main { padding: 40px; display: grid; place-items: center; background: var(--bg); }
.auth-card { width: min(100%, 430px); padding: 38px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.auth-card h2 { font-size: 28px; letter-spacing: -.035em; }
.auth-card > p { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.form { display: grid; gap: 18px; margin-top: 28px; }
.field { display: grid; gap: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { font-size: 13px; font-weight: 600; }
input, textarea, select { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); outline: none; }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px hsl(233 60% 50% / .12); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 54px; }
.password-toggle { position: absolute; right: 7px; top: 7px; height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--text-3); font-size: 12px; }
.form-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text-2); }
.check input { width: 16px; min-height: 16px; accent-color: var(--brand); }
.link { color: var(--brand); font-weight: 600; }
.form .btn { width: 100%; }
.auth-switch { margin-top: 22px; text-align: center; color: var(--text-2); font-size: 13px; }
.form-message { display: none; padding: 10px 12px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 13px; }
.form-message.show { display: block; }

.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.contact-details { display: grid; gap: 16px; margin-top: 30px; }
.contact-item { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.contact-item span { display: block; color: var(--text-3); font-size: 12px; }
.contact-item strong { display: block; margin-top: 4px; font-size: 14px; }
.form-card { padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.faq-question { width: 100%; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 0; background: transparent; text-align: left; font-weight: 600; }
.faq-question span:last-child { color: var(--brand); font-size: 22px; font-weight: 400; transition: transform .2s; }
.faq-answer { max-height: 0; overflow: hidden; color: var(--text-2); transition: max-height .25s ease; }
.faq-answer[hidden] { display: none; }
.faq-answer p { padding: 0 22px 20px; }
.faq-item.open .faq-answer { max-height: 180px; }
.faq-item.open .faq-question span:last-child { transform: rotate(45deg); }

.site-footer { padding: 56px 0 28px; border-top: 1px solid var(--border); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { max-width: 330px; margin-top: 14px; color: var(--text-2); font-size: 14px; }
.footer-col strong { font-size: 13px; }
.footer-col { display: grid; align-content: start; gap: 11px; }
.footer-col a { color: var(--text-2); font-size: 13px; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--text-3); font-size: 12px; }

@keyframes window-in {
  from { opacity: 0; transform: perspective(1100px) rotateY(-2deg) rotateX(1deg) translateY(18px); }
  to { opacity: 1; transform: perspective(1100px) rotateY(-2deg) rotateX(1deg) translateY(0); }
}
@keyframes soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(154 56% 30% / 0); }
  50% { box-shadow: 0 0 0 5px hsl(154 56% 30% / .08); }
}
@keyframes solutions-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.status { animation: soft-pulse 2.8s ease-in-out infinite; }

@media (max-width: 900px) {
  .nav-links { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; max-height: calc(100vh - 104px); overflow-y: auto; padding: 18px; flex-direction: column; align-items: stretch; gap: 4px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 10px; border-radius: 7px; }
  .solutions-menu { width: 100%; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 10px; }
  .solutions-panel { position: static; width: 100%; margin-top: 4px; padding: 8px; border-radius: 10px; box-shadow: none; transform: none; background: var(--surface-2); }
  .solutions-panel:not([hidden]) { animation: mobile-solutions-in .16s ease-out; }
  .solutions-panel-head { display: none; }
  .solutions-list { padding: 0; }
  .solution-link { grid-template-columns: 34px minmax(0, 1fr); padding: 9px; }
  .solution-icon { width: 34px; height: 34px; border-color: transparent; background: var(--surface); }
  .solution-link small, .solution-arrow { display: none; }
  .solutions-actions { margin: 6px -8px -8px; padding: 12px 14px; border-radius: 0 0 10px 10px; }
  .menu-btn { display: grid; }
  .nav-actions .btn:not(.btn-primary) { display: none; }
  .hero { padding-top: 72px; }
  .hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 50px; }
  .overview-stage { min-height: 0; margin-top: 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .overview-stage::before, .overview-stage::after { display: none; }
  .overview-screen { position: relative; top: auto; left: auto; width: 100%; grid-column: 1 / -1; margin-bottom: 12px; transform: none; }
  .overview-feature { position: static; width: auto; min-height: 104px; }
  .overview-feature:hover { transform: translateY(-2px); }
  .split-head { grid-template-columns: 1fr; gap: 12px; }
  .feature-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-approach { grid-template-columns: 1fr; gap: 26px; padding: 36px; }
  .proof { grid-template-columns: 1fr; }
  .analytics-card { padding: 18px; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { min-height: 300px; padding: 34px; }
  .auth-message { margin: 58px 0 20px; }
  .auth-foot { display: none; }
}
@keyframes mobile-solutions-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .site-header .btn-primary { display: none; }
  .nav { min-height: 62px; }
  .nav-links { top: calc(100% + 8px); left: 0; right: 0; }
  .hero { padding: 58px 0 64px; }
  .hero h1, .page-hero h1 { font-size: 40px; }
  .hero-copy { font-size: 17px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .product-window { transform: none; padding: 8px; }
  .product-window::after { inset: -24px -12px 12% 10%; }
  .dash { min-height: 0; padding: 12px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric { padding: 12px; }
  .metric strong { font-size: 17px; }
  .hero-sales-chart { height: 250px; }
  .hero-support { padding: 14px; }
  .hero-stock-list > div { grid-template-columns: minmax(105px, 1fr) .8fr 42px; gap: 8px; }
  .analytics-toolbar { padding-inline: 12px; }
  .analytics-toolbar div > span:last-child { display: none; }
  .analytics-grid { grid-template-columns: 1fr; gap: 12px; }
  .analytics-wide, .analytics-full { grid-column: auto; }
  .analytics-card { padding: 16px; }
  .analytics-head { gap: 10px; }
  .analytics-value strong { font-size: 15px; }
  .plot { min-height: 170px; }
  .donut-layout { grid-template-columns: minmax(140px, .9fr) 1.1fr; gap: 10px; }
  .stock-row { grid-template-columns: minmax(112px, 1fr) .8fr 38px; gap: 8px; }
  .risk-row { grid-template-columns: 90px 1fr 48px; gap: 8px; }
  .section { padding: 64px 0; }
  .overview-stage { grid-template-columns: 1fr; }
  .overview-screen { grid-column: auto; padding: 5px; border-width: 5px; border-radius: 20px; }
  .overview-screen::before { inset: -8px; border-radius: 22px; }
  .overview-app { grid-template-columns: 1fr; }
  .overview-sidebar { display: none; }
  .overview-content { padding: 14px; }
  .overview-mini-kpis { grid-template-columns: 1fr 1fr; }
  .overview-mini-kpis div:last-child { grid-column: 1 / -1; }
  .overview-chart svg { height: 118px; }
  .feature-grid, .pricing-grid, .trust-grid, .footer-grid { grid-template-columns: 1fr; }
  .pricing-approach { padding: 26px 22px; }
  .pricing-approach .btn { width: 100%; max-width: none; }
  .flow { grid-template-columns: 1fr; }
  .flow-step { min-height: auto; }
  .flow-step + .flow-step { border-left: 0; border-top: 1px solid hsl(0 0% 100% / .14); }
  .flow-step::after { top: auto; right: 30px; bottom: -12px; transform: rotate(90deg); }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--border); }
  .cta { padding: 30px; flex-direction: column; align-items: flex-start; }
  .auth-aside { min-height: 230px; padding: 24px; }
  .auth-message { margin: 38px 0 6px; }
  .auth-message h1 { font-size: 34px; }
  .auth-message p { display: none; }
  .auth-main { padding: 22px 14px; place-items: start center; }
  .auth-card { padding: 26px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .form-meta { align-items: flex-start; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* Shared public navigation used by product, pricing, FAQ and contact pages */
.site-header{padding-top:10px;background:linear-gradient(to bottom,rgba(255,255,255,.97) 70%,transparent)}
.public-nav{min-height:72px;padding:10px 12px 10px 18px;border-color:#e9eef7;border-radius:999px;background:rgba(245,248,255,.94);box-shadow:0 12px 38px rgba(16,24,40,.08);backdrop-filter:blur(20px)}
.public-nav .brand{font-size:17px}.public-nav .brand-mark{width:36px;height:32px;border-radius:0;background:none;box-shadow:none}.public-nav .brand-mark>svg{width:32px;height:24px;display:block;fill:none;stroke:#111827;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter}
.public-nav-links{gap:2px;color:#344054;font-size:14px}.public-nav-links>a,.public-trigger{height:44px;min-height:44px;padding:0 12px;display:flex;align-items:center;border:0;border-radius:999px;background:transparent;color:#344054;font-size:14px;font-weight:650;transition:.18s}
.public-nav-links>a:hover,.public-trigger:hover,.public-trigger[aria-expanded="true"]{background:#fff;color:#101828}
.public-dropdown{position:static}.public-trigger{gap:7px;cursor:pointer}.public-trigger>span{font-size:16px;transition:.18s}.public-trigger[aria-expanded="true"]>span{transform:rotate(180deg)}
.public-panel{position:absolute;z-index:30;top:calc(100% + 10px);left:50%;width:min(850px,calc(100vw - 48px));padding:12px;display:grid;grid-template-columns:250px 1fr;border:1px solid #e4e7ec;border-radius:22px;background:rgba(255,255,255,.99);box-shadow:0 32px 80px rgba(16,24,40,.18),0 8px 22px rgba(16,24,40,.08);transform:translateX(-50%);color:#101828;backdrop-filter:blur(24px)}
.public-panel[hidden]{display:none}.public-panel-intro{padding:24px;border-radius:15px;background:linear-gradient(150deg,#f2f7ff,#eef4ff 62%,#e7efff)}.public-panel-intro>span{display:block;color:#1570ef;font-size:10px;font-weight:800;letter-spacing:.12em}.public-panel-intro>strong{display:block;margin-top:18px;font-size:20px;line-height:1.25;letter-spacing:-.035em}.public-panel-intro>small{display:block;margin-top:11px;color:#667085;font-size:12px;line-height:1.55}
.public-panel-grid{padding:5px 7px;display:grid;grid-template-columns:1fr 1fr;gap:3px}.public-panel-grid>a{min-height:70px;padding:10px;display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;border:1px solid transparent;border-radius:13px;transition:.18s}.public-panel-grid>a:hover{border-color:#e4e7ec;background:#f8faff;transform:translateY(-1px)}.public-panel-grid>a>i{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#eef4ff;color:#1570ef;font-size:11px;font-style:normal;font-weight:800}.public-panel-grid strong,.public-panel-grid small{display:block}.public-panel-grid strong{font-size:13px}.public-panel-grid small{margin-top:4px;color:#667085;font-size:10px}
.public-panel-foot{grid-column:1/-1;margin:2px -2px -2px;padding:14px 18px 3px;display:flex;justify-content:space-between;border-top:1px solid #eaecf0;color:#667085;font-size:11px}.public-panel-foot>span{display:flex;align-items:center;gap:8px}.public-panel-foot>span i{width:7px;height:7px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 4px #ecfdf3}.public-panel-foot>a{color:#1570ef;font-weight:700}
.public-nav .nav-actions .btn{min-height:44px;border-radius:999px}.public-nav .nav-actions .btn-primary{background:#1570ef;box-shadow:0 10px 24px rgba(21,112,239,.2)}.public-login{background:#fff!important;border-color:#d5d7da!important}.public-nav .menu-btn{border:0;border-radius:50%;background:transparent;box-shadow:none}.public-nav .menu-btn span{width:20px;height:2px;margin:2px;display:block;background:#101828}

@media(max-width:900px){
  .public-nav{border-radius:22px}.public-nav-links{padding:12px}.public-nav-links>a,.public-trigger{width:100%;justify-content:space-between;border-radius:10px}.public-dropdown{position:relative}.public-panel{position:static;width:100%;margin:4px 0 8px;padding:8px;display:block;border-radius:13px;box-shadow:none;transform:none}.public-panel-intro,.public-panel-foot{display:none}.public-panel-grid{grid-template-columns:1fr 1fr;padding:0}.public-panel-grid>a{min-height:58px;padding:8px;grid-template-columns:34px 1fr}.public-panel-grid>a>i{width:34px;height:34px}.public-panel-grid small{display:none}.public-login{display:none!important}
}
@media(max-width:640px){
  .public-nav{min-height:62px;padding:8px 10px 8px 13px}.public-nav .brand{font-size:15px}.public-nav .brand-mark{width:30px}.public-nav .brand-mark>svg{width:28px}.public-panel-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .product-window, .status, .live-dot, .showcase-card, .animate-line, .chart-line, .columns rect, .combo-bars rect, .progress i, .risk-row i, .solutions-panel { animation: none !important; }
  .animate-line, .chart-line { stroke-dashoffset: 0; }
}

/* ============================================================================
   DOKUNMATİK CİHAZLAR
   ============================================================================
   Yalnızca kaba işaretçili (parmak) cihazlarda uygulanır: masaüstünde
   bağlantı listelerinin yoğunluğu korunur, telefonda hedefler büyür.
   Ölçüldü: bu kural olmadan footer bağlantıları 20px yükseklikteydi.
   ========================================================================== */
@media (pointer: coarse) {
  .footer-col a,
  .footer-bottom a,
  .nav-links > a,
  .solutions-actions a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .solution-link { min-height: 56px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .icon-btn, .menu-btn { min-height: 44px; min-width: 44px; }
  .faq-question { min-height: 56px; }
}

/* Ayrı çözüm sayfaları */
.solution-hero{padding:96px 0 80px;background:radial-gradient(circle at 82% 18%,rgba(71,80,214,.13),transparent 30%),linear-gradient(180deg,var(--surface-soft),var(--bg))}
.solution-breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:52px;color:var(--muted);font-size:.88rem}
.solution-breadcrumb a{color:inherit;text-decoration:none}.solution-breadcrumb a:hover{color:var(--primary)}
.solution-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:84px;align-items:center}
.solution-hero h1{max-width:760px;margin:18px 0 22px;font-size:clamp(2.8rem,5.2vw,5.3rem);line-height:.98;letter-spacing:-.065em}
.solution-hero p{max-width:660px;color:var(--muted);font-size:1.12rem;line-height:1.75}
.solution-visual{overflow:hidden;min-height:430px;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 32px 80px rgba(24,29,70,.14);transform:perspective(1200px) rotateY(-4deg) rotateX(1deg)}
.solution-visual-top{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.solution-visual-top span:first-child{font-weight:800;color:var(--text)}
.solution-visual-body{padding:34px}
.solution-stat{display:grid;gap:10px;padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,var(--surface),var(--surface-soft))}
.solution-stat small,.solution-stat span{color:var(--muted)}.solution-stat strong{font-size:2.6rem;letter-spacing:-.045em}.solution-stat span{font-size:.82rem}
.solution-lines{display:grid;gap:15px;margin-top:28px}.solution-lines i{height:18px;border-radius:99px;background:linear-gradient(90deg,rgba(71,80,214,.22),rgba(71,80,214,.05))}
.solution-lines i:nth-child(2){width:78%}.solution-lines i:nth-child(3){width:91%}.solution-lines i:nth-child(4){width:62%}
.detail-nav{position:sticky;top:96px;z-index:20;border-block:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px)}
.detail-nav .container{display:flex;gap:36px;overflow:auto}.detail-nav a{flex:none;padding:20px 0;color:var(--muted);font-size:.9rem;font-weight:700;text-decoration:none}.detail-nav a:hover{color:var(--primary)}
.detail-copy{max-width:850px;text-align:center}.detail-copy h2{margin:18px auto;font-size:clamp(2.2rem,4vw,4rem);line-height:1.06;letter-spacing:-.05em}.detail-copy p{color:var(--muted);font-size:1.1rem;line-height:1.8}
.detail-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.detail-cap-card{min-height:260px;padding:32px;border:1px solid var(--line);border-radius:24px;background:var(--surface);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.detail-cap-card:hover{transform:translateY(-5px);border-color:rgba(71,80,214,.35);box-shadow:0 20px 50px rgba(24,29,70,.09)}
.detail-card-number{display:block;margin-bottom:48px;color:var(--primary);font-size:.82rem;font-weight:800}.detail-cap-card h3{font-size:1.25rem}.detail-cap-card p{margin-top:12px;color:var(--muted);line-height:1.7}
.detail-value{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}.detail-value h2{margin-top:18px;font-size:clamp(2.2rem,4vw,3.9rem);line-height:1.05;letter-spacing:-.05em}.detail-value-list{display:grid;gap:0;border-top:1px solid var(--line)}.detail-value-list p{padding:24px 0;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.7}.detail-value-list strong{color:var(--text)}
.detail-faq{max-width:820px}.detail-faq h2{margin:18px 0;font-size:clamp(2rem,3.4vw,3.3rem);letter-spacing:-.04em}.detail-faq p{color:var(--muted);font-size:1.08rem;line-height:1.8}
@media(max-width:900px){.solution-hero{padding:64px 0}.solution-hero-grid{grid-template-columns:1fr;gap:44px}.solution-visual{min-height:360px;transform:none}.detail-nav{top:76px}.detail-cap-grid{grid-template-columns:1fr}.detail-cap-card{min-height:auto}.detail-card-number{margin-bottom:30px}.detail-value{grid-template-columns:1fr;gap:42px}}
@media(max-width:640px){.solution-hero{padding:38px 0 56px}.solution-breadcrumb{margin-bottom:34px}.solution-hero h1{font-size:2.65rem}.solution-visual{min-height:310px;border-radius:20px}.solution-visual-body{padding:20px}.solution-stat{padding:22px}.detail-nav .container{gap:24px}.detail-nav a{padding:16px 0}.detail-cap-card{padding:25px}}