/* =========================
   Fonts
========================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* =========================
   Base
========================= */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif;
  color: #0b1220;
  background: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* =========================
   Layout — BNS GRID (ЕДИНАЯ)
========================= */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}

.container.narrow {
  max-width: 760px;
}

/* section НЕ влияет на hero */
section {
  padding: 96px 0;
}

/* =========================
   Header — BNS STYLE (FIX)
========================= */

.site-header {
  border-bottom: 1px solid #e6e8ec;
  background: #ffffff;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo a {
  font-weight: 600;
  font-size: 18px;
  color: #0b1220;
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* меню как в BNS — БЕЗ классов */
.site-header nav a {
  margin-left: 32px;
  font-size: 15px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
}

.site-header nav a:hover {
  color: #0b1220;
}

/* =========================
   Case Hero — BNS
========================= */

.case-hero {
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  color: #ffffff;
  padding: 140px 0 120px;
}

.case-meta {
  font-size: 14px;
  color: #9ca3af;
  margin-bottom: 16px;
  font-family: 'IBM Plex Sans', sans-serif;
}

.case-hero h1 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 24px;
}

.case-hero p {
  font-size: 18px;
  color: #c7cdd8;
  max-width: 720px;
  font-family: 'IBM Plex Sans', sans-serif;
}

.hero p {
  max-width: 820px;
  font-size: 20px;
  line-height: 1.6;
  white-space: normal;
}


/* =========================
   Video Page
========================= */

.video-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 32px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  margin-bottom: 32px;
}

.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-text {
  font-size: 17px;
  line-height: 1.7;
  color: #1f2937;
}

.video-text p {
  margin-bottom: 16px;
}

.divider {
  height: 1px;
  background: #e5e7eb;
  margin: 64px 0;
}

/* =========================
   Footer
========================= */

.site-footer {
  border-top: 1px solid #e6e8ec;
  padding: 48px 0;
}

.site-footer p {
  font-size: 14px;
  color: #6b7280;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* =========================
   Insight / Result block (BNS-style)
========================= */

.result-block {
  background: #f8fafc;
  border: 1px solid #e6e8ec;
  border-left: 6px solid #0b1220;
  border-radius: 16px;
  padding: 40px 48px;
  margin: 80px 0;
}

.result-block h3 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0b1220;
}

.result-block ul {
  margin: 0;
  padding-left: 20px;
}

.result-block li {
  margin-bottom: 12px;
  font-size: 16px;
  color: #374151;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* =========================
   Architecture Compare (BNS)
========================= */

.arch-compare {
  margin-top: 80px;
  padding: 48px;
  border: 1px solid #e6e8ec;
  border-radius: 16px;
  background: #f7f9fc;
}

.arch-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.arch-col h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.arch-col ul {
  padding-left: 18px;
}

.arch-col li {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
}

/* акценты */
.arch-before h4 {
  color: #6b7280;
}

.arch-after h4 {
  color: #1d4ed8;
}

.arch-after {
  border-left: 3px solid #1d4ed8;
  padding-left: 32px;
}

/* =========================
   Key Architectural Insights
========================= */

.arch-insights {
  margin-top: 80px;
}

.arch-insights-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}

.arch-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.arch-insight {
  background: #f7f9fc;
  border-left: 4px solid #1d4ed8;
  padding: 24px 28px;
  border-radius: 12px;
}

.arch-insight strong {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  color: #1d4ed8;
}

.arch-insight p {
  font-size: 15px;
  line-height: 1.6;
  color: #1f2937;
}


/* =========================
   Timeline — Variant 1
========================= */

.timeline-block {
  margin-top: 64px;
}

.timeline-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 32px;
}

.timeline {
  position: relative;
  padding: 60px 0 80px;
}

.timeline-line {
  height: 6px;
  background: #c7d2fe;
  border-radius: 4px;
}

.timeline-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 12px;
}

.timeline-point {
  position: absolute;
  top: 46px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
}

.timeline-point::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 auto 6px;
}

.timeline-point.order::before {
  background: #f97316;
}

.timeline-point.open::before {
  background: #0b1220;
}

.timeline-point.confirm::before {
  background: #10b981;
}

.timeline-point.close::before {
  background: #ef4444;
}

.timeline-point .label {
  display: block;
  font-weight: 600;
}

.timeline-point .time {
  display: block;
  color: #64748b;
}

.timeline-window {
  position: absolute;
  top: 30px;
  height: 60px;
  background: rgba(239, 68, 68, 0.85);
  border-radius: 6px;
  color: #fff;
  padding: 8px;
  font-size: 12px;
}

.timeline-window span {
  font-weight: 700;
  display: block;
}

.timeline-window em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.9;
}

.timeline-note {
  margin-top: 32px;
  font-size: 15px;
  color: #374151;
  max-width: 720px;
}

/* =========================
   Architecture / Cases
========================= */

.cases {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 24px;
}

.cases h1 {
  font-size: 42px;
  margin-bottom: 64px;
}

.case {
  margin-bottom: 96px;
}

.case h2 {
  font-size: 28px;
  margin-bottom: 6px;
}

.case .subtitle {
  color: #64748b;
  font-size: 15px;
  margin-bottom: 24px;
}

/* Layout */

.flow {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Nodes */

.node {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 14px;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}

/* Hover = динамика */

.node:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
  border-color: #22c55e;
  background: #ecfdf5;
}

/* Primary node */

.node.primary {
  border-color: #22c55e;
  background: #ecfdf5;
  font-weight: 600;
}

/* Secondary */

.node.muted {
  background: #fafafa;
  color: #64748b;
}

/* ===================================== */
/* OZON SCHEMA — GRID BASED (FIXED) */
/* ===================================== */

.ozon-diagram {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.ozon-root {
  background: #cfdceb;
  padding: 16px 32px;
  border-radius: 6px;
  border: 1px solid #9fb3c8;
  font-weight: 600;
}

/* FIRST LEVEL */

.ozon-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1000px;
}

.ozon-node {
  background: #e3f1df;
  border: 1px solid #a6caa0;
  padding: 14px 20px;
  border-radius: 6px;
  text-align: center;
}

/* CHILD LEVEL */

.ozon-children-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  width: 600px;
}

.ozon-children-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ozon-child {
  background: #ffffff;
  border: 1px solid #d1d5db;
  padding: 12px 20px;
  border-radius: 6px;
  text-align: center;
}

/* ===================================== */
/* STRATEGY ARCHITECTURE STYLE          */
/* ===================================== */

.strategy-arch {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.arch-layer {
  border-top: 1px solid #e5e7eb;
  padding-top: 32px;
}

.layer-title {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 28px;
  font-weight: 600;
}

.layer-content {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.layer-content.center {
  justify-content: center;
}

.layer-content.row {
  justify-content: space-between;
}

.layer-content.narrow {
  max-width: 800px;
  margin: 0 auto;
  justify-content: center;
}

.arch-box {
  padding: 16px 24px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  font-size: 14px;
  min-width: 180px;
  text-align: center;
  transition: all .15s ease;
}

.arch-box:hover {
  border-color: #0f172a;
  transform: translateY(-2px);
}

.arch-box.core {
  font-weight: 600;
  font-size: 15px;
  border-color: #0f172a;
}

.arch-box.small {
  font-size: 13px;
  min-width: 200px;
}

/* ===== Slides Block ===== */

.slides-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-top:40px;
}

.slide-card{
  border:1px solid var(--border-light);
  border-radius:14px;
  background:#ffffff;
  overflow:hidden;
  transition:all .2s ease;
}

.slide-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.slide-placeholder{
  height:200px;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#64748b;
}

.slide-caption{
  padding:16px 20px;
  font-size:14px;
  color:#475569;
}


/* ===== Risk Block ===== */

.risk-block{
  background:#fff1f2;
  border:1px solid #fecdd3;
  border-radius:16px;
  padding:32px;
  margin-top:48px;
}

.risk-block h3{
  margin-top:0;
  color:#991b1b;
}

.risk-list{
  margin-top:16px;
}

.risk-list li{
  margin-bottom:10px;
}

/* ===== Documents Block ===== */

.docs-grid{
display:grid;
grid-template-columns:1fr;
gap:40px;
margin-top:48px;
}

.doc-card{
border:1px solid var(--border-light);
border-radius:18px;
background:#ffffff;
overflow:hidden;
box-shadow:0 20px 50px rgba(15,23,42,.06);
transition:.25s ease;
}

.doc-card:hover{
transform:translateY(-6px);
box-shadow:0 30px 70px rgba(15,23,42,.12);
}

.doc-card img{
width:100%;
display:block;
}

.doc-caption{
padding:24px 32px;
font-size:16px;
color:var(--text-muted);
}

.slides-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:40px;
margin-top:48px;
}

.slide-card{
border:1px solid var(--border-light);
border-radius:18px;
background:#fff;
overflow:hidden;
transition:.2s ease;
}

.slide-card:hover{
transform:translateY(-4px);
box-shadow:0 20px 60px rgba(15,23,42,.08);
}

.slide-card img{
width:100%;
display:block;
cursor:pointer;
}

.slide-caption{
padding:20px;
font-weight:500;
color:#475569;
}

/* Sticky Navigation */

.sticky-nav{
position:sticky;
top:0;
background:#ffffff;
border-bottom:1px solid var(--border-light);
z-index:1000;
}

.nav-inner{
display:flex;
gap:40px;
height:60px;
align-items:center;
}

.nav-link{
font-size:14px;
color:var(--text-muted);
position:relative;
padding-bottom:6px;
}

.nav-link.active{
color:var(--text-main);
font-weight:600;
}

.nav-link.active::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:2px;
background:var(--text-main);
}

.docs-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:40px;
margin-top:60px;
}

.doc-card img{
width:100%;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
transition:.3s ease;
}

.doc-card img:hover{
transform:scale(1.02);
}

/* =====================================
   MAIN PAGE — CASE VISUAL ENHANCEMENTS
===================================== */

/* --- Tier hierarchy --- */

.tier-1 .case-card{
background:linear-gradient(145deg,#ffffff 0%,#f3f6ff 100%);
border:1px solid #e5eaf5;
position:relative;
overflow:hidden;
}

.tier-1 .case-card::after{
content:"";
position:absolute;
top:0;
right:0;
width:120px;
height:120px;
background:radial-gradient(circle at top right,rgba(37,99,235,.15),transparent 70%);
pointer-events:none;
}

/* --- Case level indicator --- */

.case-card{
position:relative;
transition:
transform .3s cubic-bezier(.2,.8,.2,1),
box-shadow .3s ease,
background .3s ease;
}

.case-card::before{
position:absolute;
top:20px;
right:24px;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:#64748b;
opacity:0;
transition:opacity .25s ease;
}

.tier-1 .case-card::before{content:"Core Platform";}
.tier-2 .case-card::before{content:"Scale";}
.tier-3 .case-card::before{content:"Transformation";}

.case-card:hover::before{
opacity:1;
}

/* --- Light motion --- */

.case-card:hover{
transform:translateY(-8px);
box-shadow:0 30px 70px rgba(15,23,42,.12);
}

/* smooth entrance */

.case-card{
opacity:0;
transform:translateY(20px);
animation:fadeUp .6s ease forwards;
}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* ===== NAV subtle hover + active ===== */

nav a{
position:relative;
transition:color .2s ease;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:linear-gradient(90deg,#1e293b,#334155);
transition:width .25s ease;
border-radius:2px;
}

/* hover эффект */
nav a:hover{
color:#0f172a;
}

nav a:hover::after{
width:100%;
}

/* active состояние */
nav a.active{
color:#0f172a;
font-weight:600;
}

nav a.active::after{
width:100%;
}

/* =========================
   Ozon — Subtle Strategic Accent
========================= */

.case-card.ozon{
background:
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border:1px solid #e2e8f0;
position:relative;
}

.case-card.ozon::before{
content:"";
position:absolute;
inset:0;
border-radius:24px;
background:linear-gradient(135deg, rgba(15,23,42,0.03), rgba(15,23,42,0.06));
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}

.case-card.ozon:hover::before{
opacity:1;
}

.case-card.ozon:hover{
box-shadow:0 30px 80px rgba(15,23,42,.12);
}

nav a.active{
color:var(--text-main);
font-weight:600;
position:relative;
}

nav a.active::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:100%;
height:2px;
background:var(--text-main);
}

.main-nav a{
position:relative;
padding-bottom:6px;
}

.main-nav a.active{
color:#0f172a;
font-weight:600;
}

.main-nav a.active::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:100%;
height:2px;
background:#0f172a;
}

.metrics-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:60px;
margin-top:60px;
}

.metric{
min-width:0;
}

.metric-value{
font-size:42px;
font-weight:700;
margin-bottom:14px;
white-space:nowrap;
}

.metric-title{
font-weight:600;
margin-bottom:8px;
font-size:16px;
}

.metric-desc{
font-size:14px;
color:var(--text-muted);
line-height:1.5;
}

.case-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:60px;
margin-top:60px;
}

.case-card{
background:#fff;
border-radius:22px;
overflow:hidden;
border:1px solid #e5e7eb;
transition:.35s ease;
cursor:pointer;
}

.case-card:hover{
transform:translateY(-10px);
box-shadow:0 30px 70px rgba(15,23,42,.12);
}

.case-card img{
width:100%;
height:auto;
display:block;
transition:transform .6s ease;
}

.case-card:hover img{
transform:scale(1.05);
}

.case-caption{
padding:24px 26px 30px;
}

.case-caption h3{
margin:0 0 12px;
font-size:20px;
}

.case-caption p{
margin:0;
font-size:14px;
color:#64748b;
line-height:1.6;
}

/* ================= SUB NAV ================= */

.sub-nav{
background:#f8fafc;
border-bottom:1px solid #e5e7eb;
}

.sub-nav-inner{
display:flex;
gap:40px;
height:64px;
align-items:center;
font-size:15px;
color:#64748b;
}

.sub-nav a{
position:relative;
padding-bottom:4px;
}

.sub-nav a:hover{
color:#0f172a;
}

.sub-nav a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:#0f172a;
transition:.2s ease;
}

.sub-nav a:hover::after{
width:100%;
}

html{
scroll-behavior:smooth;
}

.video-wrapper{
border-radius:24px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.08);
margin-top:40px;
}

video{
width:100%;
display:block;
}

.video-wrapper{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.06);
  margin-bottom:30px;
}

.anchor-nav{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.services-wrapper{
margin-top:80px;
}

.services-title{
background:#f97316;
color:#fff;
text-align:center;
padding:20px;
font-size:20px;
font-weight:600;
border-radius:12px;
margin-bottom:50px;
}

.services-header{
display:grid;
grid-template-columns:1fr 1fr 2fr;
gap:20px;
font-weight:600;
margin-bottom:30px;
}

.services-header div{
background:#16a34a;
color:#fff;
padding:14px;
border-radius:8px;
text-align:center;
}

.service-row{
display:grid;
grid-template-columns:1fr 1fr 2fr;
gap:20px;
align-items:center;
padding:30px 0;
border-bottom:1px solid #e5e7eb;
}

.service-name{
background:#f97316;
color:#fff;
padding:14px;
border-radius:8px;
text-align:center;
font-weight:600;
}

.service-result{
display:flex;
justify-content:center;
}

.service-result span{
background:#dc2626;
color:#fff;
width:90px;
height:90px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-weight:700;
font-size:18px;
}

.service-desc ul{
margin:0;
padding-left:18px;
}

.service-desc li{
margin-bottom:6px;
}

/* Адаптив */

@media(max-width:900px){
.services-header,
.service-row{
grid-template-columns:1fr;
text-align:center;
}
.service-result{
margin:20px 0;
}
}

.graph-container {
  width: 100%;
  height: 900px;
  overflow: hidden;
  border-radius: 16px;
  background: #f5f6f8;
}

.calculator {
  position: fixed;
  left: 20px;
  top: 160px;
  width: 340px;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  z-index: 1000;
  transition: height 0.3s ease;
}

.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#toggleCalc {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  font-size: 18px;
}

.calculator.collapsed #calcBody {
  display: none;
}

/* ===============================
   MARKETING MODEL COLORS
================================= */

.green{
  color:#0a8f3c;
  font-weight:600;
}

.blue{
  color:#1e6bd6;
  font-weight:600;
}

.red{
  color:#d62828;
  font-weight:600;
}

.table-scroll{
  overflow-x:auto;
  width:100%;
}

.channel table{
  min-width:1200px;
}

.site-header{
  position:sticky;
  top:0;
  background:#ffffff;
  border-bottom:1px solid #e6e8ec;
  z-index:1000;
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:64px;
}

.logo{
  font-weight:700;
  font-size:18px;
}

.nav a{
  margin-left:28px;
  color:#4b5563;
  text-decoration:none;
  font-weight:500;
}

.nav a:hover{
  color:#111827;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.section{
  padding:60px 0;
}

.site-header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid #e6e8ec;
  z-index:1000;
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:64px;
}

.logo{
  font-weight:700;
  font-size:18px;
}

.nav a{
  margin-left:28px;
  color:#4b5563;
  text-decoration:none;
  font-weight:500;
}

.nav a:hover{
  color:#111827;
}

.timeline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 28px;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  background: #0b1220;
  border-radius: 50%;
}

.timeline-line {
  flex: 1;
  height: 1px;
  background: #e6e8eb;
}

.timeline-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  letter-spacing: .02em;
}

/* PRODUCT METRICS */

.metrics-section{
margin:50px 0;
}

.metrics-title{
font-size:20px;
font-weight:600;
margin-bottom:16px;
}

.metrics-text{
max-width:900px;
color:#4b5563;
line-height:1.7;
margin-bottom:30px;
}

.metrics-pyramid{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
margin-bottom:50px;
}

.pyramid-level{
color:white;
padding:16px 28px;
border-radius:10px;
font-weight:600;
text-align:center;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.level-revenue{
background:#0b1220;
width:220px;
}

.level-orders{
background:#1e293b;
width:260px;
}

.level-traffic{
background:#334155;
width:300px;
}

.level-channels{
background:#475569;
width:340px;
}

.level-sub{
font-size:12px;
font-weight:400;
opacity:.85;
margin-top:4px;
}

.metrics-flow{
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin:40px 0;
}

.metric-card{
background:#f8fafc;
border:1px solid #e6e8eb;
border-radius:12px;
padding:20px;
width:180px;
text-align:center;
}

.metric-card strong{
display:block;
margin-bottom:6px;
}

.metric-arrow{
font-size:22px;
color:#64748b;
}

.metric-economics{
background:#ecfdf5;
border:1px solid #10b981;
}