:root {
  color: #f7fbff;
  background: #020712;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 4%, rgba(30, 107, 255, 0.22), transparent 28%),
    radial-gradient(circle at 15% 18%, rgba(0, 187, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #020712 0%, #06101f 48%, #020712 100%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 20px; font-size: clamp(38px, 5vw, 72px); line-height: 1.05; letter-spacing: 0; }
h2 { margin-bottom: 16px; font-size: clamp(28px, 3vw, 44px); line-height: 1.12; }
h1 span, h2 span { color: #2388ff; }
h3 { margin-bottom: 8px; color: #fff; }
p, li { color: rgba(236, 244, 255, 0.72); line-height: 1.55; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 18px 34px; border-bottom: 1px solid rgba(115, 150, 210, 0.14);
  background: rgba(2, 7, 18, 0.84); backdrop-filter: blur(18px);
}
.brand img { display: block; width: 168px; }
.main-nav, .header-actions, .hero-actions, .trust-row, .price-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.main-nav { justify-content: center; color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.ghost-link, .secondary-link, .primary-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius: 8px; padding: 0 18px; font-weight: 800;
}
.primary-link { color: #fff; background: linear-gradient(135deg, #007bff, #2447ff); box-shadow: 0 18px 38px rgba(30, 91, 255, 0.32); }
.secondary-link, .ghost-link { border: 1px solid rgba(151, 173, 220, 0.28); background: rgba(255,255,255,0.04); }
.big { min-height: 56px; padding: 0 24px; font-size: 16px; }

.hero {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(560px, 1.18fr);
  align-items: center; gap: 48px; min-height: calc(100vh - 78px); padding: 56px 34px 32px;
}
.hero-copy { max-width: 720px; }
.eyebrow {
  display: inline-flex; margin-bottom: 18px; border: 1px solid rgba(0,123,255,.34);
  border-radius: 999px; padding: 8px 12px; color: #38a7ff; background: rgba(0,123,255,.12);
  font-size: 12px; font-weight: 900; text-transform: uppercase;
}
.hero p { max-width: 650px; font-size: 20px; }
.trust-row { margin-top: 22px; gap: 12px; font-size: 13px; font-weight: 800; }
.trust-row span { border: 1px solid rgba(56,167,255,.22); border-radius: 999px; padding: 7px 10px; background: rgba(7,15,31,.76); }

.hero-shot { position: relative; }
.hero-shot::after {
  content: ""; position: absolute; inset: auto 8% -28px 16%; height: 82px;
  background: radial-gradient(ellipse, rgba(0, 123, 255, .58), transparent 68%); filter: blur(10px);
}
.app-frame {
  position: relative; overflow: hidden; border: 1px solid rgba(127,158,220,.26); border-radius: 16px;
  background: #f8fbff; box-shadow: 0 0 0 10px rgba(255,255,255,.04), 0 40px 110px rgba(0,0,0,.58), 0 0 70px rgba(0,123,255,.34);
}
.tilted { transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); }
.dashboard-mock { color: #0f172a; background: #eef3fa; }
.mock-header {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  min-height: 58px; padding: 10px 14px; border-bottom: 1px solid #d8e2ef; background: #fff;
}
.mock-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 900; white-space: nowrap; }
.mock-brand img { width: 126px; border-radius: 6px; background: #07111f; }
.mock-header nav { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; font-size: 11px; font-weight: 900; color: #101828; }
.mock-header nav span { white-space: nowrap; }
.mock-header nav .active { border: 1px solid #b8d7ff; border-radius: 7px; padding: 8px 11px; color: #155ee8; background: #edf6ff; }
.mock-user { display: flex; align-items: center; gap: 8px; color: #101828; font-size: 12px; font-weight: 900; white-space: nowrap; }
.mock-user i { position: relative; display: block; width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(180deg, #e7eef8, #c8d4e4); }
.mock-user i::after { content: ""; position: absolute; right: 0; top: 1px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 999px; background: #17c964; }
.bell { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #cbd8ea; border-radius: 999px; color: #2563eb; font-size: 10px; }
.mock-page-title {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-bottom: 1px solid #d8e2ef; color: #52657f; background: #eef3fa;
  font-size: 13px;
}
.mock-page-title b { color: #0f172a; font-size: 16px; }
.dashboard-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr); gap: 12px;
  padding: 12px; background: #eef3fa;
}
.dash-card { border: 1px solid #d5deeb; border-radius: 8px; padding: 14px; background: #fff; }
.dash-card h3 { margin-bottom: 2px; color: #0f172a; font-size: 16px; }
.dash-card p { margin-bottom: 10px; color: #667085; font-size: 12px; font-weight: 800; line-height: 1.3; }
.attention-card { grid-column: span 1; }
.chart-card { grid-column: 2; grid-row: 2 / span 2; }
.supplies-card { display: grid; align-content: start; }
.metric-row { display: grid; gap: 8px; }
.metric-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-row.seven { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-row span { display: grid; gap: 4px; min-width: 0; min-height: 64px; border: 1px solid #dfe7f2; border-radius: 7px; padding: 10px; background: #f8fafc; }
.metric-row .wide { grid-column: span 2; }
.metric-row b { color: #2563eb; font-size: 24px; line-height: 1; }
.metric-row small { color: #667085; font-size: 10px; font-weight: 900; line-height: 1.2; }
.chart-card .metric-row { gap: 7px; }
.chart-card .metric-row b { white-space: nowrap; font-size: 22px; }
.chart-card .metric-row small { overflow-wrap: normal; word-break: normal; }
.mock-actions { display: flex; gap: 8px; margin-top: 12px; }
.mock-actions em, .mock-button, .card-head em {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 7px; padding: 0 14px;
  color: #fff; background: #2563eb; font-style: normal; font-size: 12px; font-weight: 900;
}
.mock-button { width: 100%; margin-top: 12px; }
.new-block { margin-top: 12px; border-top: 1px solid #e5ebf3; padding-top: 12px; }
.new-block h3 { font-size: 15px; }
.new-block strong { color: #475467; font-size: 12px; }
.card-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.sales-chart {
  display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; gap: 8px;
  height: 170px; margin-top: 12px; border: 1px solid #dfe7f2; border-radius: 8px; padding: 18px;
  background: repeating-linear-gradient(0deg, #fff 0 39px, #eef3f8 40px), linear-gradient(180deg, #f8fbff, #fff);
}
.sales-chart i { height: 8px; border-radius: 999px; background: #b8dcff; }
.sales-chart .bar { height: 58%; background: linear-gradient(180deg, #2563eb, #35b8f5); box-shadow: 0 8px 20px rgba(37,99,235,.22); }
.sales-chart .high { height: 96%; }
.sales-chart .mid { height: 55%; }
.sales-chart .low { height: 30%; }

.quick-grid, .feature-grid, .faq-grid, .three-columns, .pricing-layout {
  display: grid; gap: 14px;
}
.quick-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 24px 26px; padding: 18px;
  border: 1px solid rgba(117,150,210,.15); border-radius: 12px; background: rgba(7,15,31,.66);
}
.quick-grid article, .feature-grid article, .big-card, .price-card, .trial-card, .faq details {
  border: 1px solid rgba(117,150,210,.16); border-radius: 8px; padding: 20px;
  background: linear-gradient(180deg, rgba(14,28,55,.88), rgba(7,15,31,.78));
}
.quick-grid span {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px;
  border-radius: 8px; color: #38a7ff; background: rgba(37,99,235,.18); font-weight: 900;
}

.split, .flow, .feature-cards, .three-columns, .pricing, .faq, .legal-strip, .final-cta, .content-page {
  margin: 0 24px 26px; border: 1px solid rgba(117,150,210,.15); border-radius: 14px;
  padding: 42px; background: rgba(7,15,31,.66);
}
.split { display: grid; grid-template-columns: .7fr 1.3fr; gap: 34px; align-items: center; }
.check-list { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.check-list li::before { content: "✓"; margin-right: 9px; color: #38a7ff; }
.columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.annotated-shot { position: relative; min-height: 420px; display: grid; place-items: center; }
.compact { width: min(720px, 84%); }
.mini-dashboard { min-height: 330px; }
.small-shot .mock-header { min-height: 46px; padding: 8px 10px; }
.small-shot .mock-brand img { width: 92px; }
.small-shot .mock-header nav { gap: 10px; font-size: 9px; }
.small-shot .mock-page-title { padding: 12px 14px; }
.small-shot .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, .82fr); gap: 8px; padding: 8px; }
.small-shot .dash-card { padding: 10px; }
.small-shot .dash-card h3 { font-size: 13px; }
.small-shot .metric-row span { min-height: 46px; padding: 7px; }
.small-shot .metric-row b { font-size: 18px; }
.small-shot .sales-chart { height: 92px; padding: 10px; gap: 5px; }
.label {
  position: absolute; border: 1px solid rgba(0,123,255,.32); border-radius: 8px; padding: 10px 12px;
  color: #d9ebff; background: rgba(5,13,28,.86); font-size: 13px; font-weight: 900;
}
.label-a { left: 0; top: 70px; }
.label-b { right: 0; top: 90px; }
.label-c { left: 0; bottom: 90px; }
.label-d { right: 0; bottom: 95px; }

.flow h2, .feature-cards h2, .pricing h2, .faq h2 { text-align: center; }
.flow-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.flow-line article { text-align: center; }
.flow-line b { display: inline-grid; place-items: center; width: 70px; height: 70px; border: 1px solid rgba(56,167,255,.32); border-radius: 999px; color: #38a7ff; background: rgba(37,99,235,.18); font-size: 28px; }

.feature-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.feature-shot {
  height: 168px; margin-bottom: 16px; overflow: hidden; border: 1px solid #dbe3ef; border-radius: 8px;
  padding: 10px; color: #0f172a; background: linear-gradient(180deg, #fff, #f7faff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.shot-tabs { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; font-size: 10px; }
.shot-tabs b { color: #101828; }
.shot-tabs span { border-radius: 999px; padding: 4px 7px; color: #155ee8; background: #eef6ff; font-weight: 900; }
.shot-table { display: grid; grid-template-columns: 1fr 34px 34px 38px; gap: 0; border: 1px solid #e3eaf4; border-radius: 7px; overflow: hidden; font-size: 9px; }
.shot-table > * { min-height: 22px; border-bottom: 1px solid #edf2f8; padding: 5px 6px; color: #475467; background: #fff; }
.shot-table > span { color: #667085; background: #f2f6fb; font-weight: 900; }
.shot-table b { color: #101828; font-weight: 900; }
.shot-table em { color: #2563eb; font-style: normal; font-weight: 900; }
.shot-table strong { color: #dc2626; font-weight: 900; }
.product-lines { display: grid; gap: 7px; }
.product-lines p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; border: 1px solid #e3eaf4; border-radius: 7px; padding: 7px; color: #101828; background: #fff; font-size: 10px; }
.product-lines span, .supplier-mini small, .supply-card strong { border-radius: 999px; padding: 4px 7px; color: #039855; background: #ecfdf3; font-weight: 900; }
.product-lines .blue { color: #155ee8; background: #eef6ff; }
.supplier-mini { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 10px; }
.supplier-mini b { color: #101828; }
.supplier-mini small { color: #155ee8; background: #eef6ff; }
.supply-card { border: 1px solid #e3eaf4; border-radius: 8px; padding: 8px; background: #fff; font-size: 10px; }
.supply-card b { color: #101828; }
.supply-card small { float: right; border-radius: 999px; padding: 4px 7px; color: #039855; background: #ecfdf3; font-weight: 900; }
.supply-card p { display: grid; grid-template-columns: 1fr 36px 58px; gap: 6px; margin: 8px 0 0; color: #667085; font-size: 9px; }
.supply-card em { color: #101828; font-style: normal; font-weight: 800; }
.supply-card strong { padding: 3px 5px; font-size: 8px; text-align: center; }
.kanban-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.kanban-mini section { min-height: 118px; border: 1px solid #e3eaf4; border-radius: 8px; padding: 7px; background: #f8fbff; }
.kanban-mini b { display: block; margin-bottom: 6px; color: #2563eb; font-size: 10px; }
.kanban-mini p { margin: 0 0 6px; border-radius: 6px; padding: 6px; color: #101828; background: #fff; font-size: 9px; font-weight: 800; }
.analytic-metrics { display: grid; grid-template-columns: .8fr 1.2fr .8fr; gap: 7px; }
.analytic-metrics span { display: grid; gap: 2px; border: 1px solid #e3eaf4; border-radius: 7px; padding: 8px; background: #fff; }
.analytic-metrics b { color: #2563eb; font-size: 18px; line-height: 1; white-space: nowrap; }
.analytic-metrics small { color: #667085; font-size: 9px; font-weight: 900; }
.mini-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 6px; height: 72px; margin-top: 10px; border: 1px solid #e3eaf4; border-radius: 8px; padding: 10px; background: linear-gradient(180deg, #f8fbff, #fff); }
.mini-bars i { height: 8px; border-radius: 999px; background: #b8dcff; }
.mini-bars .mid { height: 46px; background: linear-gradient(180deg, #2563eb, #35b8f5); }
.mini-bars .high { height: 62px; background: linear-gradient(180deg, #2563eb, #35b8f5); }

.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.big-card h2 { text-align: left; }
.notice { border: 1px solid rgba(56,167,255,.28); border-radius: 8px; padding: 12px; color: #d9ebff; background: rgba(0,123,255,.12); font-weight: 800; }
.backup-visual { display: grid; place-items: center; height: 160px; border-radius: 16px; color: #dcecff; background: linear-gradient(145deg, #1e6fff, #102bc9); font-size: 50px; font-weight: 900; box-shadow: 0 24px 80px rgba(37,99,235,.34); }

.pricing-subtitle { max-width: 720px; margin: -6px auto 24px; text-align: center; }
.pricing-layout { grid-template-columns: minmax(0, 1fr) 420px; align-items: stretch; }
.price-card { display: grid; gap: 22px; }
.price-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(117,150,210,.16); }
.price-top span { display: block; color: #fff; font-size: 24px; font-weight: 900; }
.price-card strong { display: block; color: #fff; font-size: 46px; white-space: nowrap; }
.price-card em { color: rgba(236,244,255,.62); font-size: 18px; font-style: normal; }
.price-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.price-facts span { border: 1px solid rgba(56,167,255,.22); border-radius: 8px; padding: 14px; background: rgba(0,123,255,.08); }
.price-facts b { display: block; color: #38a7ff; font-size: 22px; }
.price-facts small { color: rgba(236,244,255,.72); font-weight: 800; }
.price-card ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; padding: 0; text-align: left; list-style: none; }
.price-card li::before { content: "✓"; margin-right: 8px; color: #38a7ff; }
.trial-card { display: grid; align-content: center; gap: 16px; }
.trial-badge { width: max-content; border: 1px solid rgba(56,167,255,.28); border-radius: 999px; padding: 7px 11px; color: #38a7ff; background: rgba(0,123,255,.1); font-weight: 900; }
.trial-steps { display: grid; gap: 10px; }
.trial-steps span { display: flex; align-items: center; gap: 10px; color: rgba(236,244,255,.82); font-weight: 800; }
.trial-steps b { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px; color: #fff; background: #2563eb; }
.pricing-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.pricing-note span { border: 1px solid rgba(117,150,210,.16); border-radius: 8px; padding: 14px; color: rgba(236,244,255,.8); background: rgba(14,28,55,.66); font-weight: 800; text-align: center; }

.faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq summary { cursor: pointer; color: #fff; font-weight: 900; }
.faq p { margin: 12px 0 0; }
.legal-strip { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 22px; }
.legal-strip a { color: #38a7ff; font-weight: 900; }
.final-cta { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; align-items: center; gap: 28px; }
.final-cta h2 { margin-bottom: 8px; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px 34px; color: rgba(236,244,255,.62); font-size: 13px; }

.content-page { max-width: 980px; margin: 32px auto; }
.content-page h1 { font-size: clamp(32px, 4vw, 52px); }
.content-page section { border-top: 1px solid rgba(117,150,210,.18); padding-top: 22px; margin-top: 22px; }

@media (max-width: 1180px) {
  .site-header, .hero, .split, .pricing-layout, .final-cta { grid-template-columns: 1fr; }
  .main-nav { justify-content: flex-start; overflow-x: auto; }
  .hero { min-height: auto; }
  .tilted { transform: none; }
  .dashboard-grid, .small-shot .dashboard-grid { grid-template-columns: 1fr; }
  .chart-card { grid-column: auto; grid-row: auto; }
  .metric-row.seven { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-row .wide { grid-column: span 1; }
  .quick-grid, .feature-grid, .three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .label { position: static; width: 100%; margin-bottom: 8px; }
  .annotated-shot { gap: 8px; }
  .compact { width: 100%; order: -1; }
}
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr; padding: 16px; }
  .brand img { width: 160px; }
  .main-nav { display: none; }
  .hero, .split, .flow, .feature-cards, .three-columns, .pricing, .faq, .legal-strip, .final-cta, .content-page { margin-left: 12px; margin-right: 12px; padding: 24px 16px; }
  .mock-header { grid-template-columns: 1fr; }
  .mock-header nav { justify-content: flex-start; overflow-x: auto; }
  .mock-page-title { align-items: flex-start; flex-direction: column; }
  .metric-row.three, .metric-row.four, .metric-row.seven { grid-template-columns: 1fr; }
  .sales-chart { height: 140px; gap: 5px; padding: 12px; }
  .price-top { align-items: flex-start; flex-direction: column; }
  .price-facts, .pricing-note { grid-template-columns: 1fr; }
  .quick-grid, .feature-grid, .three-columns, .flow-line, .faq-grid, .price-card ul, .mini-grid, .mini-grid.three { grid-template-columns: 1fr; }
  .mock-card.attention, .mock-card.chart { grid-column: auto; }
  .app-top { overflow-x: auto; }
  .footer { flex-direction: column; padding: 22px 16px; }
}