:root {
  --bg: #0a0414;
  --bg-2: #0e071c;
  --bg-3: #150b28;
  --card: #1c1035;
  --card-2: #241844;
  --border: #2a1a48;
  --border-bright: #3d2a60;
  --text: #f5f6fb;
  --text-2: #c9c3dd;
  --text-muted: #8b7aa6;
  --primary: #4B1E9B;
  --primary-2: #754CDE;
  --accent: #9C27B0;
  --accent-2: #B86BDF;
  --warn: #ED6C02;
  --danger: #D32F2F;
  --info: #0288D1;
  --success: #2E7D32;
  --ev: #4B1E9B;
  --hybrid: #B86BDF;
  --petrol: #ED6C02;
  --diesel: #0288D1;
  --cng: #F57C00;
  --gradient: linear-gradient(135deg, #6422d6 0%, #6725d8 50%, #754CDE 100%);
  --gradient-ev: linear-gradient(135deg, #4B1E9B 0%, #9C27B0 100%);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 28px rgba(0,0,0,0.45);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(900px 600px at 12% -5%, rgba(75,30,155,0.16), transparent 60%),
              radial-gradient(700px 500px at 95% 8%, rgba(156,39,176,0.12), transparent 60%),
              radial-gradient(800px 500px at 50% 100%, rgba(117,76,222,0.08), transparent 60%); }
.container { max-width:1400px; margin:0 auto; padding:0 24px; }

.topbar { background:rgba(10,4,20,0.92); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; padding:14px 0; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.brand-logo { width:38px; height:38px; background:var(--gradient); border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; color:white; font-size:16px; }
.brand-name { font-weight:800; font-size:17px; }
.brand-sub { font-size:11px; color:var(--text-muted); }
.topbar-meta { display:flex; gap:18px; align-items:center; font-size:12px; color:var(--text-muted); }
.live-dot { width:8px; height:8px; background:var(--accent); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.55;transform:scale(1.3);} }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; background:var(--gradient); color:white; text-decoration:none; font-weight:700; font-size:14px; border-radius:10px; border:0; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(75,30,155,0.30); }
.btn-outline { background:transparent; border:1px solid var(--border-bright); color:var(--text); }
.btn-sm { padding:7px 14px; font-size:12px; }

.banner { background:#0a0414; border-bottom:1px solid var(--border); padding:10px 0; font-size:13px; color:var(--text-2); text-align:center; position: sticky; top: 0; left: 0;z-index: 9999;}
.banner b { color:var(--text); }

.hero { padding:48px 0 32px; }
.hero-tag { display:inline-flex; align-items:center; gap:10px; padding:6px 14px; background:rgba(75,30,155,0.12); border:1px solid rgba(75,30,155,0.32); border-radius:999px; font-size:12px; font-weight:600; color:#9b6fdc; margin-bottom:18px; }
.hero h1 { font-size:48px; line-height:1.08; font-weight:800; letter-spacing:-1.2px; margin-bottom:14px; max-width:980px; }
.hero h1 .gradient { background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-desc { font-size:17px; color:var(--text-2); max-width:820px; }

.view-selector { padding:24px 0; background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:sticky; top:67px; z-index:90; }
.vs-wrap { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.vs-group { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.vs-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:.6px; margin-right:6px; }
.vs-chip { padding:8px 14px; background:var(--card); border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-2); transition:all .15s; }
.vs-chip:hover { border-color:var(--primary); color:var(--text); }
.vs-chip.active { background:var(--gradient); color:white; border-color:transparent; }
.vs-platforms { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); width:100%; }
.vs-platform-chip { padding:6px 12px; background:var(--bg-3); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; color:var(--text-2); transition:all .15s; }
.vs-platform-chip:hover { border-color:var(--platform-color, var(--primary)); color:var(--text); }
.vs-platform-chip.active { background:var(--platform-color); color:white; border-color:transparent; }

.section { padding:48px 0; }
.kpi-row { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:32px; }
.kpi { padding:20px; background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--border); border-radius:14px; position:relative; overflow:hidden; }
.kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient); opacity:.6; }
.kpi-val { font-size:24px; font-weight:800; color:var(--text); letter-spacing:-0.5px; }
.kpi-val .gradient { background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kpi-lbl { font-size:11px; color:var(--text-muted); margin-top:6px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.kpi-delta { font-size:11px; margin-top:4px; font-weight:700; }
.kpi-delta.up { color:var(--success); }
.kpi-delta.down { color:var(--danger); }

.main-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:28px; }
.main-grid.three { grid-template-columns:repeat(3,1fr); }
.card { padding:24px; background:var(--card); border:1px solid var(--border); border-radius:16px; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.card-title { font-size:16px; font-weight:700; margin-bottom:4px; }
.card-sub { font-size:12px; color:var(--text-muted); }
.card-badge { padding:4px 10px; background:rgba(75,30,155,0.12); color:var(--primary-2); border-radius:999px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }

.bars { display:flex; flex-direction:column; gap:11px; }
.bar-row { display:grid; grid-template-columns:170px 1fr 90px; align-items:center; gap:12px; }
.bar-label { font-size:12px; color:var(--text-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { height:22px; background:rgba(255,255,255,0.04); border-radius:6px; overflow:hidden; }
.bar-fill { height:100%; border-radius:6px; background:var(--bar-color, var(--gradient)); display:flex; align-items:center; justify-content:flex-end; padding-right:8px; font-size:10px; color:white; font-weight:700; transition:width 1s cubic-bezier(.16,1,.3,1); min-width:30px; }
.bar-value { font-size:12px; color:var(--text); font-weight:600; text-align:right; }

.donut-wrap { display:flex; align-items:center; gap:24px; }
.donut-svg { width:170px; height:170px; flex-shrink:0; }
.donut-legend { display:flex; flex-direction:column; gap:8px; flex:1; }
.donut-leg { display:flex; align-items:center; gap:10px; font-size:12px; }
.donut-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.donut-name { flex:1; color:var(--text-2); }
.donut-pct { color:var(--text); font-weight:700; }

/* Fuel mix vertical bars */
.fuel-mix { display:flex; align-items:flex-end; justify-content:space-around; gap:8px; height:200px; padding:14px 0; }
.fuel-bar-col { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; }
.fuel-bar-label-top { font-size:11px; color:var(--text); font-weight:700; margin-bottom:4px; }
.fuel-bar-track { flex:1; width:100%; max-width:48px; background:rgba(255,255,255,0.04); border-radius:6px 6px 0 0; display:flex; flex-direction:column-reverse; overflow:hidden; }
.fuel-bar-fill { width:100%; border-radius:6px 6px 0 0; transition:height 1s cubic-bezier(.16,1,.3,1); }
.fuel-bar-name { font-size:10px; color:var(--text-muted); margin-top:8px; text-align:center; font-weight:600; }

/* EV tracker */
.ev-tracker { padding:20px; background:linear-gradient(140deg, rgba(75,30,155,0.08), rgba(156,39,176,0.04)); border-radius:12px; }
.ev-tracker-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ev-tracker-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
.ev-tracker-bigval { font-size:42px; font-weight:800; background:var(--gradient-ev); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-1px; }
.ev-tracker-subtxt { font-size:12px; color:var(--text-muted); }
.ev-stack { display:flex; height:32px; border-radius:8px; overflow:hidden; margin:12px 0; }
.ev-stack-seg { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:white; transition:width 1s cubic-bezier(.16,1,.3,1); }
.ev-stack-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.ev-stack-leg { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2); }
.ev-stack-leg-dot { width:10px; height:10px; border-radius:3px; }

/* Year distribution bars */
.year-dist { display:flex; flex-direction:column; gap:8px; }
.year-row { display:grid; grid-template-columns:90px 1fr 50px; align-items:center; gap:10px; font-size:12px; }
.year-label { color:var(--text-2); font-weight:600; }
.year-track { height:14px; background:rgba(255,255,255,0.04); border-radius:4px; overflow:hidden; }
.year-fill { height:100%; background:linear-gradient(90deg, var(--ev), var(--accent)); border-radius:4px; transition:width 1s cubic-bezier(.16,1,.3,1); }
.year-val { font-size:12px; color:var(--text); font-weight:600; text-align:right; }

/* Transmission donut */
.trans-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.trans-tile { padding:14px 10px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; text-align:center; }
.trans-ic { font-size:22px; margin-bottom:6px; }
.trans-val { font-size:20px; font-weight:800; color:var(--accent-2); }
.trans-lbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:.4px; margin-top:2px; }

/* Color tiles */
.color-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.color-tile { padding:12px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; text-align:center; }
.color-swatch { width:32px; height:32px; border-radius:8px; margin:0 auto 6px; border:2px solid rgba(255,255,255,0.1); }
.color-name { font-size:11px; font-weight:600; color:var(--text-2); }
.color-pct { font-size:13px; font-weight:800; color:var(--text); margin-top:2px; }

/* Dealer vs Private split */
.split-block { padding:20px; background:var(--bg-2); border-radius:12px; }
.split-bar { height:40px; border-radius:10px; overflow:hidden; display:flex; margin-bottom:14px; }
.split-seg { display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:white; transition:width 1s cubic-bezier(.16,1,.3,1); }
.split-dealer { background:linear-gradient(135deg, var(--accent), var(--primary)); }
.split-private { background:linear-gradient(135deg, var(--warn), var(--danger)); }
.split-info { display:flex; justify-content:space-between; font-size:13px; }
.split-info-left { color:var(--accent-2); font-weight:700; }
.split-info-right { color:var(--warn); font-weight:700; }

/* Sample table */
.data-table-wrap { background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-top:24px; }
.dt-head { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.dt-title { font-size:15px; font-weight:700; }
.dt-badge { font-size:11px; padding:4px 10px; background:rgba(75,30,155,0.12); color:var(--accent); border-radius:999px; font-weight:600; }
.dt-scroll { overflow-x:auto; }
.dt { width:100%; border-collapse:collapse; font-size:13px; }
.dt thead th { padding:12px 14px; background:var(--bg-2); text-align:left; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap; }
.dt tbody td { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.04); white-space:nowrap; color:var(--text-2); }
.dt tbody tr:hover { background:rgba(75,30,155,0.04); }
.brand-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; background:rgba(75,30,155,0.12); color:var(--primary-2); }
.fuel-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.fuel-pill.electric { background:rgba(75,30,155,0.18); color:var(--ev); }
.fuel-pill.hybrid { background:rgba(184,107,223,0.18); color:var(--hybrid); }
.fuel-pill.gasoline, .fuel-pill.petrol { background:rgba(237,108,2,0.18); color:var(--petrol); }
.fuel-pill.diesel { background:rgba(2,136,209,0.18); color:var(--diesel); }
.fuel-pill.cng, .fuel-pill.lpg { background:rgba(245,124,0,0.18); color:var(--cng); }
.status-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.status-pill.avail { background:rgba(46,125,50,0.15); color:var(--success); }
.status-pill.res { background:rgba(237,108,2,0.15); color:var(--warn); }

/* Insight callout */
.insight-callout { padding:20px 24px; background:linear-gradient(140deg, rgba(75,30,155,0.10), rgba(156,39,176,0.06)); border:1px solid rgba(75,30,155,0.28); border-radius:14px; margin-bottom:24px; }
.insight-callout-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.insight-callout-ic { width:34px; height:34px; background:var(--gradient); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.insight-callout-title { font-size:13px; font-weight:700; color:var(--primary-2); text-transform:uppercase; letter-spacing:.5px; }
.insight-callout-body { font-size:14px; color:var(--text-2); line-height:1.7; }
.insight-callout-body strong { color:var(--text); }

/* Live feed */
.feed { padding:24px; background:var(--card); border:1px solid var(--border); border-radius:16px; }
.feed-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.feed-title { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; }
.feed-list { display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; padding-right:8px; }
.feed-list::-webkit-scrollbar { width:5px; }
.feed-list::-webkit-scrollbar-thumb { background:var(--border-bright); border-radius:3px; }
.feed-item { padding:10px 12px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; animation:slideIn .35s ease; }
@keyframes slideIn { from { transform:translateY(-6px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.feed-item-text { color:var(--text-2); flex:1; }
.feed-item-text b { color:var(--text); }
.feed-badge { padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700; white-space:nowrap; }
.feed-badge.danger { background:rgba(211,47,47,0.15); color:#ef8a8a; }
.feed-badge.success { background:rgba(46,125,50,0.15); color:#66bb6a; }
.feed-badge.warning { background:rgba(237,108,2,0.15); color:#ffb74d; }
.feed-badge.info { background:rgba(2,136,209,0.15); color:#4fc3f7; }
.feed-badge.ev { background:rgba(75,30,155,0.18); color:var(--ev); }

/* Mid CTA */
.midcta { padding:48px; background:linear-gradient(140deg, rgba(75,30,155,0.16), rgba(156,39,176,0.08)); border:1px solid rgba(75,30,155,0.32); border-radius:20px; text-align:center; margin:48px 0; }
.midcta-tag { display:inline-block; padding:4px 12px; background:rgba(75,30,155,0.16); color:var(--primary-2); border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:14px; }
.midcta h3 { font-size:32px; font-weight:800; letter-spacing:-0.6px; margin-bottom:12px; }
.midcta h3 .gradient { background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.midcta-desc { font-size:16px; color:var(--text-2); max-width:680px; margin:0 auto 24px; }
.midcta-btns { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* ROI */
.roi-block { padding:32px; background:var(--card); border:1px solid var(--border); border-radius:18px; margin-bottom:32px; }
.roi-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.roi-title { font-size:20px; font-weight:800; }
.roi-title .gradient { background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.roi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; }
.roi-field { padding:16px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; }
.roi-field label { font-size:11px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:.5px; display:block; margin-bottom:8px; }
.roi-field input[type=range] { width:100%; }
.roi-field-val { font-size:18px; font-weight:800; color:var(--text); margin-top:4px; }
.roi-results { padding:24px; background:linear-gradient(140deg, rgba(46,125,50,0.10), rgba(156,39,176,0.06)); border:1px solid rgba(75,30,155,0.28); border-radius:12px; }
.roi-results-headline { font-size:13px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:.5px; margin-bottom:8px; }
.roi-savings { font-size:36px; font-weight:800; color:var(--success); }
.roi-breakdown { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.roi-break { font-size:12px; }
.roi-break-lbl { color:var(--text-muted); }
.roi-break-val { font-weight:700; color:var(--text); margin-top:2px; font-size:14px; }

/* AI recs */
.ai-recs { display:flex; flex-direction:column; gap:10px; }

/* Lead magnet */
.lead-magnet { padding:48px; background:linear-gradient(140deg, var(--card) 0%, var(--card-2) 100%); border:1px solid var(--border); border-radius:20px; display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:center; margin:32px 0; }
.lead-title { font-size:28px; font-weight:800; margin-bottom:14px; letter-spacing:-0.5px; }
.lead-title .highlight { background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lead-desc { font-size:15px; color:var(--text-2); margin-bottom:20px; }
.lead-bullets { list-style:none; }
.lead-bullets li { padding:8px 0 8px 28px; font-size:14px; color:var(--text-2); position:relative; }
.lead-bullets li::before { content:'📄'; position:absolute; left:0; }
.lead-pdf { background:var(--gradient-ev); border-radius:14px; padding:32px; text-align:center; }
.lead-pdf-title { font-size:22px; font-weight:800; line-height:1.2; color:white; margin-bottom:18px; }
.lead-pdf-title .h { color:#e0d4ff; }
.lead-pdf-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.lead-pdf-stat { padding:8px 4px; background:rgba(255,255,255,0.12); border-radius:6px; }
.lead-pdf-stat-val { font-size:16px; font-weight:800; color:white; }
.lead-pdf-stat-lbl { font-size:9px; color:rgba(255,255,255,0.85); text-transform:uppercase; font-weight:700; }
.lead-pdf-btn { width:100%; padding:10px; background:white; color:var(--primary); border:0; border-radius:8px; font-weight:800; font-size:13px; cursor:pointer; }

/* Use cases */
.tao { margin:48px 0; }
.tao-head { text-align:center; margin-bottom:32px; }
.tao-tag { display:inline-block; padding:4px 12px; background:rgba(75,30,155,0.10); border:1px solid rgba(75,30,155,0.28); color:#b88eff; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px; }
.tao h2 { font-size:32px; font-weight:800; letter-spacing:-0.5px; margin-bottom:10px; }
.tao h2 .gradient { background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tao-desc { font-size:15px; color:var(--text-2); max-width:680px; margin:0 auto; }
.tao-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tao-card { display: block; padding:24px; background:var(--card); border:1px solid var(--border); border-radius:14px; transition:transform .2s; }
.tao-card:hover { transform:translateY(-3px); border-color:var(--primary); }
.tao-card-ic { font-size:26px; margin-bottom:10px; }
.tao-card-title { font-size:15px; font-weight:700; margin-bottom:6px; }
.tao-card-desc { font-size:13px; color:var(--text-2); }

/* Heatmap */
.heatmap { display:grid; grid-template-columns:80px repeat(7, 1fr); gap:4px; }
.hm-header { font-size:10px; padding:6px; text-align:center; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.hm-cell { padding:14px 6px; border-radius:6px; font-size:12px; font-weight:700; text-align:center; color:var(--text); }
.hm-vlow { background:rgba(255,94,126,0.18); color:#ff8aa3; }
.hm-low { background:rgba(255,181,71,0.18); color:#ffd089; }
.hm-mid { background:rgba(87,179,255,0.18); color:#8acaff; }
.hm-high { background:rgba(46,212,122,0.20); color:#6ee69b; }
.hm-vhigh { background:rgba(46,212,122,0.40); color:white; }

/* Fabric pie */
.fabric-list { display:flex; flex-direction:column; gap:8px; }
.fabric-row { display:grid; grid-template-columns:100px 1fr 50px; align-items:center; gap:10px; font-size:12px; }
.fabric-label { color:var(--text-2); font-weight:500; }
.fabric-track { height:14px; background:rgba(255,255,255,0.04); border-radius:4px; overflow:hidden; }
.fabric-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--purple)); border-radius:4px; transition:width 1s cubic-bezier(.16,1,.3,1); }
.fabric-val { font-size:12px; color:var(--text); font-weight:600; text-align:right; }

/* Sustainable */
.sust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sust-tile { padding:14px 10px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; text-align:center; }
.sust-ic { font-size:22px; margin-bottom:6px; }
.sust-val { font-size:18px; font-weight:800; color:var(--success); }
.sust-lbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:.4px; margin-top:2px; }

/* New arrivals */
.arrivals-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.arrival-tile { padding:18px; background:linear-gradient(140deg, rgba(255,63,108,0.08), rgba(180,108,255,0.04)); border:1px solid rgba(255,63,108,0.20); border-radius:12px; text-align:center; }
.arrival-val { font-size:24px; font-weight:800; color:var(--primary-2); letter-spacing:-0.5px; }
.arrival-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:.4px; margin-top:4px; }

/* Return rate */
.return-rate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.return-tile { padding:14px 10px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; border-left:3px solid var(--return-color, var(--warn)); }
.return-cat { font-size:12px; color:var(--text-2); font-weight:600; margin-bottom:4px; }
.return-pct { font-size:20px; font-weight:800; color:var(--return-color); }

/* Brand deep dive */
.bdd { padding:32px; background:var(--card); border:1px solid var(--border); border-radius:18px; margin-bottom:32px; }
.bdd-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.bdd-title { font-size:18px; font-weight:800; }
.bdd-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bdd-card { padding:16px; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; }
.bdd-metric-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:.5px; }
.bdd-metric-val { font-size:22px; font-weight:800; margin-top:4px; }

/* FAQ + Contact */
.faq-contact { margin:48px 0; }
.faq-side {position: static;}
.faq-side h3 { font-size:24px; font-weight:800; margin-bottom:8px; }
.faq-side-desc { font-size:14px; color:var(--text-2); margin-bottom:20px; }
.faq-side-meta { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); margin-top:14px; }
.faq-list { display:flex; flex-direction:column; gap:10px; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.faq-q { padding:16px 20px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px; }
.faq-q::after { content:'+'; color:#6422d6; font-size:22px; font-weight:600; transition:transform .2s; }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a { padding:0 20px 16px; color:var(--text-2); font-size:13px; display:none; }
.faq-item.open .faq-a { display:block; }

.toast { position:fixed; bottom:20px; right:20px; padding:14px 22px; background:var(--card); border:1px solid var(--border); border-radius:10px; font-size:14px; color:var(--text); box-shadow:0 8px 32px rgba(0,0,0,.5); transform:translateY(120%); transition:transform .3s; z-index:200; }
.toast.show { transform:translateY(0); }
.toast.success { border-color:var(--success); }

@media (max-width:1200px) {
  .kpi-row { grid-template-columns:repeat(3,1fr); }
  .main-grid, .main-grid.three { grid-template-columns:1fr; }
  .roi-grid { grid-template-columns:1fr; }
  .color-grid { grid-template-columns:repeat(3,1fr); }
  .trans-grid { grid-template-columns:repeat(2,1fr); }
  .lead-magnet { grid-template-columns:1fr; }
  .faq-contact { grid-template-columns:1fr; }
  .tao-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
    .hero h1 { font-size:32px; }
    .kpi-row { grid-template-columns:1fr 1fr; }
  .color-grid, .trans-grid { grid-template-columns:1fr 1fr; }
  .tao-grid { grid-template-columns:1fr; }
  .topbar-meta { display:none; }
  .banner {display:none;}
  .view-selector {position: static;}
  .lead-magnet {padding: 20px;}
  .lead-bullets {padding-left: 0;}
}
@media (max-width:600px) {
    .heatmap { grid-template-columns:60px repeat(4,1fr); }
    .sust-grid {grid-template-columns: repeat(2, 1fr);}
    .arrivals-row {grid-template-columns: repeat(2, 1fr);}
    .return-rate-grid {grid-template-columns: repeat(2, 1fr);}
    .bdd-grid {grid-template-columns: repeat(2, 1fr);}
    .midcta {padding:20px;}
}