:root {
  --bg: #07111f;
  --bg-soft: #0a1728;
  --panel: rgba(14, 29, 48, 0.82);
  --panel-strong: #0f2036;
  --panel-light: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.11);
  --text: #f6f8fb;
  --muted: #9fb0c5;
  --green: #8cc63f;
  --green-2: #5baa3b;
  --yellow: #ffd43b;
  --blue: #3fa7ff;
  --amber: #ffb84d;
  --purple: #a37bff;
  --danger: #ff6b6b;
  --success: #41d69b;
  --shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  --radius: 22px;
  --sidebar: 270px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 10%, rgba(63, 167, 255, .09), transparent 30%),
    radial-gradient(circle at 15% 30%, rgba(140, 198, 63, .08), transparent 28%),
    linear-gradient(180deg, #06101d 0%, #081524 45%, #07111f 100%);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
canvas { max-width: 100%; }

.noise {
  position: fixed;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.ambient {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(130px);
  opacity: .12;
  z-index: -1;
  animation: floatGlow 12s ease-in-out infinite alternate;
}
.ambient-one { background: var(--green); left: 2%; top: 18%; }
.ambient-two { background: var(--blue); right: 2%; top: 48%; animation-delay: -5s; }
@keyframes floatGlow { to { transform: translate3d(40px, -30px, 0) scale(1.12); } }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 24px 18px;
  background: rgba(5, 15, 27, .9);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(24px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 26px;
  transition: transform .3s ease;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(140, 198, 63, .22), rgba(255, 212, 59, .13));
  border: 1px solid rgba(140, 198, 63, .35);
  overflow: hidden;
  flex: 0 0 auto;
}
.brand-mark img { width: 88%; height: 88%; object-fit: contain; }
.brand-fallback { display: none; place-items: center; font-weight: 800; color: var(--yellow); }
.brand strong { display: block; letter-spacing: .05em; font-size: 15px; }
.brand span { color: var(--muted); font-size: 10px; display: block; margin-top: 1px; }
.side-nav { display: grid; gap: 5px; overflow-y: auto; padding-right: 3px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 13px;
  color: #9eafc2;
  font-size: 13px;
  transition: .2s ease;
  position: relative;
}
.nav-link svg { width: 18px; height: 18px; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.05); transform: translateX(2px); }
.nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(140, 198, 63, .18), rgba(140, 198, 63, .04));
  border: 1px solid rgba(140, 198, 63, .18);
}
.nav-link.active::before {
  content: "";
  position: absolute;
  left: -19px;
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: var(--green);
  box-shadow: 0 0 22px rgba(140, 198, 63, .8);
}
.sidebar-card {
  margin-top: auto;
  padding: 17px;
  border: 1px solid rgba(140, 198, 63, .2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(140, 198, 63, .1), rgba(255,255,255,.025));
}
.sidebar-card strong { display: block; font-size: 21px; margin: 5px 0 2px; }
.sidebar-card small { color: var(--muted); font-size: 10px; }
.mini-progress { height: 5px; background: rgba(255,255,255,.08); border-radius: 99px; margin-top: 13px; overflow: hidden; }
.mini-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--yellow)); }

.app-shell { margin-left: var(--sidebar); min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 76px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 17, 31, .8);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.breadcrumb span { color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .16em; display: block; }
.breadcrumb strong { font-size: 14px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.status-pill, .metric-badge, .budget-chip, .tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  border: 1px solid rgba(255,255,255,.1);
}
.status-pill { color: #caffab; background: rgba(140,198,63,.1); border-color: rgba(140,198,63,.22); }
.status-pill svg { width: 14px; }
.ghost-btn, .primary-btn, .secondary-btn, .text-btn, .icon-btn {
  border: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: .2s ease;
}
.ghost-btn { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.055); border: 1px solid var(--line); font-size: 12px; }
.ghost-btn:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.065); border: 1px solid var(--line); }
.icon-btn svg, .ghost-btn svg, .primary-btn svg, .secondary-btn svg { width: 17px; height: 17px; }
.mobile-menu { display: none; }

main { width: min(1510px, 100%); margin: 0 auto; padding: 0 34px 50px; }
.section { padding: 74px 0 26px; scroll-margin-top: 80px; }
.alt-section {
  position: relative;
}
.alt-section::before {
  content: "";
  position: absolute;
  inset: 28px -34px -20px;
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.003));
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.04);
  z-index: -1;
}
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.section-heading h2 { margin: 6px 0 0; font-size: clamp(25px, 2.4vw, 39px); line-height: 1.25; max-width: 850px; }
.section-heading > p { color: var(--muted); max-width: 410px; margin: 0; font-size: 13px; }
.section-kicker { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .16em; display: flex; align-items: center; gap: 8px; }
.section-kicker > span { width: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--yellow)); }
.eyebrow { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }

.hero-section {
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 46px;
  align-items: center;
  padding-top: 78px;
  position: relative;
}
.hero-section::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 23%;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(140,198,63,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(140,198,63,.025), 0 0 0 110px rgba(63,167,255,.018);
  z-index: -1;
}
.hero-copy h1 { font-size: clamp(42px, 5.1vw, 78px); line-height: 1.02; letter-spacing: -.045em; margin: 17px 0 22px; max-width: 950px; }
.hero-copy h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, var(--green), var(--yellow)); background-clip: text; -webkit-background-clip: text; }
.hero-copy > p { color: #b3c2d3; font-size: 15px; max-width: 780px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.primary-btn, .secondary-btn { min-height: 47px; padding: 0 18px; border-radius: 13px; font-size: 12px; font-weight: 700; }
.primary-btn { color: #07111f; background: linear-gradient(135deg, var(--green), var(--yellow)); box-shadow: 0 10px 35px rgba(140,198,63,.17); }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(140,198,63,.24); }
.secondary-btn { background: rgba(255,255,255,.055); border: 1px solid var(--line); }
.secondary-btn:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-tags span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); }
.hero-tags svg { width: 14px; color: var(--green); }
.hero-command {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(17,36,59,.88), rgba(9,21,37,.84));
  border-radius: 28px;
  padding: 25px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-command::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0 40%, rgba(255,255,255,.035) 50%, transparent 60%); transform: translateX(-100%); animation: sheen 7s infinite; }
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }
.command-head { display: flex; align-items: start; justify-content: space-between; position: relative; z-index: 1; }
.command-head h3 { margin: 5px 0 0; font-size: 21px; }
.live-dot { font-size: 8px; letter-spacing: .14em; color: #caffab; background: rgba(140,198,63,.1); border: 1px solid rgba(140,198,63,.2); padding: 7px 9px; border-radius: 99px; }
.capacity-ring {
  --value: 94;
  width: 196px;
  aspect-ratio: 1;
  margin: 27px auto 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--green) calc(var(--value) * 1%), rgba(255,255,255,.07) 0);
  position: relative;
}
.capacity-ring::before { content:""; position:absolute; inset:13px; border-radius:50%; background: #0c1b2e; border: 1px solid rgba(255,255,255,.09); }
.capacity-ring::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(140,198,63,.12); }
.capacity-ring > div { text-align: center; position: relative; z-index: 1; }
.capacity-ring strong { display: block; font-size: 38px; line-height: 1; }
.capacity-ring span { color: var(--muted); font-size: 9px; }
.command-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; position: relative; z-index:1; }
.command-grid div { padding: 12px 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.03); }
.command-grid span { display: block; color: var(--muted); font-size: 9px; }
.command-grid strong { font-size: 16px; }
.alert-strip { display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:12px; border-radius:12px; color:#ffd1a3; background:rgba(255,184,77,.08); border:1px solid rgba(255,184,77,.14); font-size:10px; }
.alert-strip svg { width:16px; flex:0 0 auto; }

.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: -24px; }
.kpi-card { padding: 17px; border-radius: 17px; background: rgba(255,255,255,.035); border: 1px solid var(--line); display: flex; align-items: center; gap: 13px; box-shadow: 0 15px 40px rgba(0,0,0,.12); }
.kpi-icon { width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.055); }
.kpi-icon svg { width: 20px; }
.kpi-card span { color: var(--muted); font-size: 9px; display: block; }
.kpi-card strong { font-size: 20px; line-height: 1.2; }
.kpi-card small { color: var(--muted); font-size: 8px; margin-left: 5px; }
.accent-green .kpi-icon { color: var(--green); background: rgba(140,198,63,.1); }
.accent-blue .kpi-icon { color: var(--blue); background: rgba(63,167,255,.1); }
.accent-amber .kpi-icon { color: var(--amber); background: rgba(255,184,77,.1); }
.accent-purple .kpi-icon { color: var(--purple); background: rgba(163,123,255,.1); }

.grid { display: grid; gap: 18px; }
.grid.two-thirds { grid-template-columns: 1.45fr .75fr; }
.grid.half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.stats-six { grid-template-columns: repeat(6, minmax(0,1fr)); margin-bottom: 18px; }
.panel {
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(15,32,54,.92), rgba(10,23,40,.86));
  border: 1px solid rgba(255,255,255,.09);
  padding: 21px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.panel-head h3 { margin: 4px 0 0; font-size: 17px; }
.metric-badge { color: #b9d7f4; background: rgba(63,167,255,.08); border-color: rgba(63,167,255,.14); }
.metric-badge.danger { color: #ffb8b8; background: rgba(255,107,107,.08); border-color: rgba(255,107,107,.16); }
.metric-badge.success { color: #acf2d6; background: rgba(65,214,155,.08); border-color: rgba(65,214,155,.16); }
.chart-wrap { position: relative; min-height: 310px; }
.chart-wrap.chart-lg { min-height: 355px; }

.milestone-list { display: grid; gap: 14px; }
.milestone { display: grid; grid-template-columns: 68px 1fr; gap: 13px; align-items: start; position: relative; padding-bottom: 6px; }
.milestone:not(:last-child)::after { content:""; position:absolute; left:33px; top:46px; bottom:-12px; width:1px; background: var(--line); }
.milestone-date { width: 66px; height: 39px; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid var(--line); font-weight:700; font-size:11px; }
.milestone.active .milestone-date { color:#cbffae; border-color:rgba(140,198,63,.22); background:rgba(140,198,63,.08); }
.milestone.warning .milestone-date { color:#ffd59d; border-color:rgba(255,184,77,.22); background:rgba(255,184,77,.08); }
.milestone.danger .milestone-date { color:#ffb5b5; border-color:rgba(255,107,107,.22); background:rgba(255,107,107,.08); }
.milestone strong { font-size: 12px; }
.milestone p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.insight-box { display:flex; gap:11px; margin-top:18px; padding:14px; border-radius:14px; background:rgba(255,212,59,.055); border:1px solid rgba(255,212,59,.13); color:#e7dca5; }
.insight-box svg { width:18px; color:var(--yellow); flex:0 0 auto; }
.insight-box p { margin:0; font-size:10px; }
.mini-stat { padding: 18px; border-radius: 17px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.mini-stat span { color:var(--muted); font-size:10px; display:block; }
.mini-stat strong { font-size:27px; display:inline-block; margin:4px 6px 0 0; }
.mini-stat small { color:var(--muted); font-size:9px; }

.metric-tile { padding:17px 14px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.metric-tile span { display:block; color:var(--muted); font-size:9px; }
.metric-tile strong { display:block; font-size:22px; margin:4px 0 0; }
.metric-tile small { color:var(--green); font-size:8px; }
.diagnosis-list { display:grid; gap:10px; }
.diagnosis { display:flex; gap:11px; align-items:flex-start; padding:13px; border-radius:13px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.diagnosis svg { width:18px; flex:0 0 auto; margin-top:1px; }
.diagnosis.good svg { color:var(--success); }
.diagnosis.bad svg { color:var(--danger); }
.diagnosis strong { font-size:11px; }
.diagnosis p { margin:2px 0 0; color:var(--muted); font-size:9px; }

.budget-hero { display:grid; grid-template-columns:1.2fr .8fr auto; align-items:center; gap:22px; padding:25px; border-radius:24px; background:linear-gradient(120deg, rgba(140,198,63,.14), rgba(63,167,255,.08) 55%, rgba(255,255,255,.03)); border:1px solid rgba(140,198,63,.2); box-shadow:var(--shadow); margin-bottom:18px; }
.budget-main strong { display:block; font-size:clamp(38px,4.3vw,66px); letter-spacing:-.04em; line-height:1.15; color:transparent; background:linear-gradient(100deg,var(--green),var(--yellow)); background-clip:text; -webkit-background-clip:text; }
.budget-main sup { font-size:.42em; }
.budget-main p { color:var(--muted); margin:2px 0 0; font-size:11px; }
.budget-reserve { padding:17px 19px; border-radius:17px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.budget-reserve span { color:var(--muted); display:block; font-size:9px; }
.budget-reserve strong { display:block; font-size:21px; margin:3px 0; }
.budget-reserve small { color:var(--muted); font-size:9px; }
.budget-lock { display:flex; align-items:center; gap:10px; padding:15px; border-left:1px solid var(--line); color:var(--muted); font-size:9px; }
.budget-lock svg { color:var(--green); }
.budget-lock strong { color:#fff; font-size:15px; }
.phase-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.phase-card { position:relative; overflow:hidden; padding:22px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.phase-card::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; right:-45px; top:-45px; background:rgba(140,198,63,.08); }
.phase-number { position:absolute; right:18px; top:12px; color:rgba(255,255,255,.08); font-size:45px; font-weight:800; line-height:1; }
.phase-card > span { color:var(--green); font-size:9px; font-weight:700; letter-spacing:.08em; }
.phase-card h3 { font-size:16px; margin:9px 0 13px; max-width:220px; }
.phase-card > strong { font-size:25px; }
.phase-card > small { color:var(--muted); font-size:9px; margin-left:7px; }
.phase-card ul, .campaign-card ul, .roadmap-item ul { padding:0; margin:15px 0 0; list-style:none; display:grid; gap:7px; }
.phase-card li, .campaign-card li, .roadmap-item li { color:var(--muted); font-size:9px; padding-left:15px; position:relative; }
.phase-card li::before, .campaign-card li::before, .roadmap-item li::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--green); position:absolute; left:0; top:6px; }
.simulator { margin-top:18px; }
.simulator-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; }
.controls { display:grid; gap:13px; }
.controls label { display:grid; grid-template-columns:1fr auto; gap:6px 12px; color:#dbe6f2; font-size:10px; }
.controls output { color:var(--green); font-weight:700; }
.controls input { grid-column:1/-1; width:100%; accent-color:var(--green); }
.scenario-results { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-content:start; }
.scenario-results > div { padding:14px; border-radius:13px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.scenario-results span { display:block; color:var(--muted); font-size:9px; }
.scenario-results strong { font-size:22px; }
.scenario-results .result-highlight { background:linear-gradient(135deg,rgba(140,198,63,.13),rgba(255,212,59,.07)); border-color:rgba(140,198,63,.2); }
.goal-meter { grid-column:1/-1; height:10px; padding:0!important; overflow:hidden; border-radius:99px!important; }
.goal-meter span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--green),var(--yellow)); transition:width .35s ease; }
.scenario-results > small { grid-column:1/-1; color:var(--muted); font-size:9px; }

.campaign-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.campaign-card { padding:20px; border-radius:19px; background:rgba(255,255,255,.035); border:1px solid var(--line); transition:.25s ease; }
.campaign-card:hover { transform:translateY(-5px); border-color:rgba(140,198,63,.28); box-shadow:0 18px 45px rgba(0,0,0,.2); }
.campaign-card.featured { background:linear-gradient(145deg,rgba(140,198,63,.12),rgba(255,255,255,.03)); border-color:rgba(140,198,63,.22); }
.campaign-top { display:flex; justify-content:space-between; align-items:center; }
.campaign-icon { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--green); background:rgba(140,198,63,.09); }
.campaign-icon svg { width:20px; }
.budget-chip { color:#d8ffc0; background:rgba(140,198,63,.07); border-color:rgba(140,198,63,.15); }
.campaign-card h3 { font-size:15px; margin:16px 0 6px; }
.campaign-card > p { color:var(--muted); font-size:9px; min-height:43px; }
.campaign-kpis { display:flex; justify-content:space-between; align-items:end; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.campaign-kpis span { color:var(--muted); font-size:8px; }
.campaign-kpis strong { font-size:11px; color:var(--green); }
.strategy-banner { margin-top:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:15px; border-radius:16px; background:rgba(255,107,107,.055); border:1px solid rgba(255,107,107,.13); }
.strategy-banner > div { display:flex; align-items:center; gap:8px; margin-right:8px; color:#ffbcbc; font-size:10px; }
.strategy-banner svg { width:17px; }
.strategy-banner > span { padding:6px 9px; border-radius:8px; color:#c9aeb0; background:rgba(255,255,255,.035); font-size:8px; }

.tabs { border-radius:22px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(15,32,54,.9),rgba(9,22,38,.86)); overflow:hidden; }
.tab-buttons { display:flex; gap:5px; padding:10px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); overflow:auto; }
.tab-btn { color:var(--muted); background:transparent; border:0; padding:10px 14px; border-radius:10px; font-size:10px; font-weight:700; white-space:nowrap; }
.tab-btn.active { color:#07111f; background:linear-gradient(135deg,var(--green),var(--yellow)); }
.tab-panel { display:none; padding:24px; min-height:210px; }
.tab-panel.active { display:block; animation:fadeTab .25s ease; }
@keyframes fadeTab { from { opacity:0; transform:translateY(6px); } }
.keyword-cloud, .negative-grid { display:flex; flex-wrap:wrap; align-content:flex-start; gap:10px; }
.keyword-cloud span, .negative-grid span { padding:10px 13px; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:#c2d0df; font-size:10px; }
.keyword-cloud span.hot { color:#d6ffc0; border-color:rgba(140,198,63,.2); background:rgba(140,198,63,.08); }
.negative-grid span { color:#ffc3c3; background:rgba(255,107,107,.06); border-color:rgba(255,107,107,.13); }
.tab-panel > small { display:block; color:var(--muted); margin-top:14px; font-size:9px; }
.copy-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ad-copy { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:13px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.ad-copy > span { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--green); background:rgba(140,198,63,.08); font-size:9px; }
.ad-copy strong { font-size:10px; }
.copy-btn { width:30px; height:30px; border:0; border-radius:9px; display:grid; place-items:center; color:var(--muted); background:rgba(255,255,255,.05); }
.copy-btn:hover { color:#fff; background:rgba(255,255,255,.1); }
.copy-btn svg { width:14px; }
.description-list { display:grid; gap:11px; }
.description-card { padding:15px; border-radius:13px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.description-card span { color:var(--green); font-size:8px; font-weight:700; }
.description-card p { margin:6px 0 0; color:#d0dce8; font-size:10px; }


.sla-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:7px; }
.sla-flow > div { text-align:center; padding:13px 7px; border-radius:13px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.sla-flow > svg { width:15px; color:var(--green); }
.sla-flow span { color:var(--green); font-size:8px; display:block; }
.sla-flow strong { font-size:10px; display:block; }
.sla-flow small { color:var(--muted); font-size:7px; }
.question-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.question-list span { padding:6px 8px; border-radius:8px; color:#b9c8d8; background:rgba(255,255,255,.035); font-size:8px; }
.tracking-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.tracking-grid article { padding:16px; border-radius:15px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.tracking-grid svg { width:19px; color:var(--green); margin-bottom:12px; }
.tracking-grid span { color:var(--muted); display:block; font-size:8px; }
.tracking-grid strong { font-size:10px; }
.north-star { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:18px; padding:22px; border-radius:20px; background:linear-gradient(115deg,rgba(140,198,63,.13),rgba(63,167,255,.08)); border:1px solid rgba(140,198,63,.18); }
.north-star h3 { margin:4px 0 0; font-size:19px; }
.north-star > div > span { color:var(--green); font-size:8px; font-weight:700; letter-spacing:.12em; }
.formula { display:flex; align-items:center; gap:11px; flex-wrap:wrap; justify-content:flex-end; }
.formula span { padding:9px 11px; border-radius:10px; color:var(--muted); background:rgba(255,255,255,.05); font-size:9px; }
.formula b { color:var(--green); }
.formula strong { color:var(--yellow); font-size:14px; }

.roadmap { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:15px; }
.roadmap-line { position:absolute; left:5%; right:5%; top:17px; height:2px; background:linear-gradient(90deg,var(--green),var(--blue)); opacity:.35; }
.roadmap-item { position:relative; padding-top:38px; }
.roadmap-dot { position:absolute; top:8px; left:8px; width:19px; height:19px; border-radius:50%; background:#0b1b2e; border:5px solid var(--green); box-shadow:0 0 0 5px rgba(140,198,63,.08); }
.roadmap-time { color:var(--green); font-size:8px; font-weight:700; letter-spacing:.1em; }
.roadmap-item h3 { font-size:13px; margin:8px 0 0; }
.checkpoint-table { margin-top:25px; border-radius:18px; border:1px solid var(--line); overflow:hidden; }
.table-row { display:grid; grid-template-columns:150px 1fr 170px; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.06); font-size:9px; }
.table-row:last-child { border-bottom:0; }
.table-row strong { font-size:10px; }
.table-row > span:nth-child(2) { color:var(--muted); }
.table-head { background:rgba(255,255,255,.04); color:var(--muted); font-weight:700; }
.tag { width:max-content; }
.tag.success { color:#aef1d6; background:rgba(65,214,155,.07); border-color:rgba(65,214,155,.14); }
.tag.warning { color:#ffdaac; background:rgba(255,184,77,.07); border-color:rgba(255,184,77,.14); }
.tag.primary { color:#c0e1ff; background:rgba(63,167,255,.07); border-color:rgba(63,167,255,.14); }
.tag.danger { color:#ffc1c1; background:rgba(255,107,107,.07); border-color:rgba(255,107,107,.14); }

.risk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.risk-card { padding:20px; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.risk-card > span { font-size:8px; font-weight:700; letter-spacing:.1em; }
.risk-card svg { display:block; width:22px; margin:17px 0; }
.risk-card h3 { font-size:13px; }
.risk-card p { color:var(--muted); font-size:9px; min-height:60px; }
.risk-card strong { display:block; font-size:9px; line-height:1.6; }
.risk-card.high > span, .risk-card.high svg { color:var(--danger); }
.risk-card.medium > span, .risk-card.medium svg { color:var(--amber); }
.approval-card { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; margin-top:18px; padding:24px; border-radius:22px; background:linear-gradient(120deg,rgba(140,198,63,.14),rgba(255,212,59,.06),rgba(63,167,255,.06)); border:1px solid rgba(140,198,63,.22); box-shadow:var(--shadow); }
.approval-icon { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; color:var(--green); background:rgba(140,198,63,.1); }
.approval-icon svg { width:28px; }
.approval-card h3 { margin:4px 0 6px; font-size:18px; }
.approval-card p { margin:0; color:var(--muted); font-size:10px; }
.approval-checks { display:grid; gap:7px; }
.approval-checks span { display:flex; align-items:center; gap:7px; color:#d9e5ef; font-size:9px; }
.approval-checks svg { width:14px; color:var(--green); }

footer { display:flex; justify-content:space-between; gap:25px; align-items:center; padding:34px 0 0; margin-top:50px; border-top:1px solid var(--line); }
footer strong { display:block; font-size:10px; letter-spacing:.06em; }
footer span { color:var(--muted); font-size:8px; }
.footer-links { display:flex; gap:10px; flex-wrap:wrap; }
.footer-links a { display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:9px; color:var(--muted); background:rgba(255,255,255,.035); border:1px solid var(--line); font-size:8px; }
.footer-links svg { width:12px; }

.toast { position:fixed; right:25px; bottom:25px; z-index:120; display:flex; gap:8px; align-items:center; padding:11px 14px; border-radius:11px; color:#d7ffea; background:#113a2d; border:1px solid rgba(65,214,155,.3); transform:translateY(25px); opacity:0; pointer-events:none; transition:.25s ease; font-size:10px; }
.toast.show { transform:none; opacity:1; }
.toast svg { width:16px; color:var(--success); }

@media (max-width: 1250px) {
  :root { --sidebar: 235px; }
  .grid.stats-six { grid-template-columns: repeat(3,1fr); }
  .campaign-grid, .risk-grid { grid-template-columns: repeat(2,1fr); }
  .hero-copy h1 { font-size: 54px; }
  .roadmap { grid-template-columns: repeat(3,1fr); }
  .roadmap-line { display:none; }
}

@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); width: 270px; box-shadow: 30px 0 80px rgba(0,0,0,.5); }
  .sidebar.open { transform: translateX(0); }
  .app-shell { margin-left:0; }
  .mobile-menu { display:inline-flex; }
  .topbar { padding:0 20px; }
  main { padding-left:20px; padding-right:20px; }
  .hero-section { grid-template-columns:1fr; min-height:auto; }
  .hero-command { max-width:640px; }
  .kpi-strip { grid-template-columns:repeat(2,1fr); margin-top:20px; }
  .grid.two-thirds, .simulator-grid { grid-template-columns:1fr; }
  .phase-cards, .tracking-grid { grid-template-columns:repeat(2,1fr); }
  .budget-hero { grid-template-columns:1fr 1fr; }
  .budget-lock { border-left:0; border-top:1px solid var(--line); grid-column:1/-1; }
  .north-star, footer { align-items:flex-start; flex-direction:column; }
  .formula { justify-content:flex-start; }
}

@media (max-width: 680px) {
  .top-actions .status-pill { display:none; }
  .ghost-btn { width:38px; padding:0; font-size:0; height:38px; }
  .breadcrumb strong { font-size:11px; }
  .section { padding-top:58px; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:10px; }
  .hero-section { padding-top:58px; }
  .hero-copy h1 { font-size:42px; }
  .hero-copy > p { font-size:13px; }
  .kpi-strip, .grid.half, .grid.three, .grid.stats-six, .phase-cards, .campaign-grid, .tracking-grid, .risk-grid { grid-template-columns:1fr; }
  .kpi-card { min-height:83px; }
  .budget-hero { grid-template-columns:1fr; }
  .budget-lock { grid-column:auto; }
  .copy-grid { grid-template-columns:1fr; }
  .sla-flow { grid-template-columns:1fr; }
  .sla-flow > svg { transform:rotate(90deg); margin:auto; }
  .roadmap { grid-template-columns:1fr; }
  .table-row { grid-template-columns:1fr; gap:5px; }
  .table-head { display:none; }
  .approval-card { grid-template-columns:1fr; }
  .approval-checks { grid-template-columns:repeat(3,1fr); }
  .scenario-results { grid-template-columns:1fr; }
  .goal-meter, .scenario-results > small { grid-column:auto; }
  .mock-content { padding:27px; }
  .mock-content h3 { font-size:25px; }
}

@media print {
  body { background:#fff; color:#142333; }
  .sidebar, .topbar, .ambient, .noise, .hero-actions, .copy-btn, .toast { display:none!important; }
  .app-shell { margin:0; }
  main { padding:0 18px; max-width:none; }
  .section { padding:26px 0 10px; page-break-inside:avoid; }
  .panel, .kpi-card, .metric-tile, .phase-card, .campaign-card, .risk-card, .tabs, .budget-hero, .approval-card, .north-star, .checkpoint-table, .tracking-grid article, .mini-stat { background:#fff!important; color:#142333; border-color:#ccd5df; box-shadow:none; }
  .muted, .section-heading > p, .panel p, .campaign-card p, .risk-card p, footer span, .metric-tile span, .kpi-card span, .kpi-card small { color:#536579!important; }
  .hero-copy h1 { color:#142333; font-size:48px; }
  .hero-copy h1 em, .budget-main strong { color:#4c8b2d; -webkit-text-fill-color:#4c8b2d; }
  .hero-command { background:#f6f8fa; color:#142333; box-shadow:none; }
  .capacity-ring::before { background:#fff; }
  footer { color:#142333; }
}