/* ═══════════════════════════════════════════════════════
   DME Express — Voice AI Initiative
   Confidential Executive Pitch System
   Prepared by Ark Fortune
   ═══════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}

/* ── Dark Mode (default) ── */
:root{
--bg:#080C14;--bg2:#0d1117;--bg3:#131822;--bg4:#1a2035;
--border:rgba(245,166,35,0.12);--border2:rgba(245,166,35,0.25);
--text:#E8E6E3;--text2:rgba(232,230,227,0.55);--text3:rgba(232,230,227,0.3);--text-heading:#ffffff;
--accent:#F5A623;--accent2:#D08C1E;--cyan:#4DD0E1;
--red:#EF5350;--green:#66BB6A;--amber:#F5A623;
--code-bg:#0d1117;--card-shadow:none;
--serif:'Cormorant Garamond',Georgia,serif;
--sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ── Light Mode ── */
[data-theme="light"]{
--bg:#f8fafc;--bg2:#ffffff;--bg3:#f1f5f9;--bg4:#e2e8f0;
--border:rgba(245,166,35,0.15);--border2:rgba(245,166,35,0.25);
--text:#1e293b;--text2:#475569;--text3:#64748b;--text-heading:#0f172a;
--accent:#F5A623;--accent2:#D08C1E;--cyan:#0891b2;
--red:#dc2626;--green:#059669;--amber:#d97706;
--code-bg:#f1f5f9;--card-shadow:0 1px 3px rgba(0,0,0,0.06);
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7;font-size:15px;transition:background .25s ease,color .25s ease}
html.no-transition *,html.no-transition *::before,html.no-transition *::after{transition:none!important}

/* ── Confidential Banner ── */
.conf-banner{background:linear-gradient(90deg,rgba(220,38,38,0.15),rgba(220,38,38,0.05));border-bottom:1px solid rgba(220,38,38,0.3);padding:8px 24px;text-align:center;font-size:11px;font-weight:600;color:#f87171;letter-spacing:2px;text-transform:uppercase;position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;gap:8px}
[data-theme="light"] .conf-banner{background:linear-gradient(90deg,rgba(220,38,38,0.08),rgba(220,38,38,0.02));color:#b91c1c}

/* ── Attribution Banner ── */
.attr-banner{background:linear-gradient(90deg,rgba(245,166,35,0.06),rgba(245,166,35,0.02));border-bottom:1px solid rgba(245,166,35,0.1);padding:5px 24px;text-align:center;font-size:10px;font-weight:500;color:rgba(245,166,35,0.5);letter-spacing:1.5px;text-transform:uppercase;position:sticky;top:33px;z-index:100;backdrop-filter:blur(20px)}
.attr-banner strong{color:rgba(245,166,35,0.7);font-weight:600}
[data-theme="light"] .attr-banner{background:linear-gradient(90deg,rgba(245,166,35,0.05),rgba(245,166,35,0.01));color:rgba(160,100,0,0.45)}
[data-theme="light"] .attr-banner strong{color:rgba(160,100,0,0.65)}

/* ── Navigation ── */
nav{background:rgba(13,18,32,0.95);border-bottom:1px solid var(--border);padding:14px 40px;display:flex;align-items:center;gap:24px;position:sticky;top:57px;z-index:99;backdrop-filter:blur(20px);transition:background .25s ease,border-color .25s ease}
[data-theme="light"] nav{background:rgba(255,255,255,0.95)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-title{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--text-heading)}
.nav-divider{width:1px;height:22px;background:var(--border2);flex-shrink:0}
.nav-links{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav-links a{color:var(--text2);text-decoration:none;font-size:13px;font-weight:500;padding:6px 12px;border-radius:8px;transition:all .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--accent);background:rgba(245,166,35,0.08)}

/* ── Theme Toggle ── */
.theme-toggle{display:flex;align-items:center;gap:8px;margin-left:16px;padding-left:16px;border-left:1px solid var(--border)}
.theme-toggle label{font-size:12px;color:var(--text3);cursor:pointer}
.toggle-switch{position:relative;width:44px;height:24px;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--bg3);border:1px solid var(--border2);border-radius:12px;transition:.3s}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:2px;top:2px;background:var(--accent);border-radius:50%;transition:.3s}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}

/* ── Page Header (Hero) ── */
.page-header{padding:70px 48px 56px;text-align:center;position:relative;overflow:hidden}
.page-header::before{content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(245,166,35,0.07),transparent 70%);pointer-events:none}
[data-theme="light"] .page-header::before{background:radial-gradient(circle,rgba(245,166,35,0.04),transparent 70%)}
.page-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(245,166,35,0.08);border:1px solid var(--border2);color:var(--accent);font-size:11px;font-weight:600;padding:5px 16px;border-radius:20px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:24px}
.page-header h1{font-family:var(--serif);font-size:clamp(32px,4.5vw,52px);font-weight:700;color:var(--text-heading);margin-bottom:16px;line-height:1.15}
.page-header h1 span{background:linear-gradient(135deg,var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-header p{color:var(--text2);font-size:17px;max-width:640px;margin:0 auto;line-height:1.8}

/* ── Content ── */
.content{max-width:920px;margin:0 auto;padding:52px 36px}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);margin:52px 0}

h2{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--text-heading);margin-bottom:20px;line-height:1.3}
h3{font-size:17px;font-weight:600;color:var(--text-heading);margin:32px 0 12px}
h4{font-size:15px;font-weight:600;color:var(--text-heading);margin:22px 0 8px}
p{color:var(--text2);margin-bottom:16px;line-height:1.8}
strong{color:var(--text)}

/* ── Sub-Tabs ── */
.tab-group{margin:28px 0}
.sub-tabs{display:flex;gap:4px;margin-bottom:32px;border-bottom:1px solid var(--border);padding-bottom:0;flex-wrap:wrap}
.sub-tab{padding:10px 22px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--sans)}
.sub-tab:hover{color:var(--text)}
.sub-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-content{display:none}
.tab-content.active{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Stat Cards (KPI) ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:32px 0}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:24px 20px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s;box-shadow:var(--card-shadow)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--cyan))}
.stat-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.stat-value{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--text-heading);line-height:1;margin-bottom:6px}
.stat-sub{font-size:12px;color:var(--text2);line-height:1.5}

/* ── Info Cards ── */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:20px 0}
.info-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;transition:border-color .2s;box-shadow:var(--card-shadow)}
.info-card:hover{border-color:var(--border2)}
.info-card-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.info-card-value{font-size:22px;font-weight:700;color:var(--text-heading)}
.info-card-sub{font-size:12px;color:var(--text2);margin-top:4px}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
thead{background:var(--bg3)}
th{text-align:left;padding:11px 16px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border2);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:top}
tr:hover td{background:rgba(245,166,35,0.03)}
td strong{color:var(--text)}

/* ── Callout Boxes ── */
.callout{border-radius:10px;padding:16px 20px;margin:20px 0;font-size:14px;display:flex;gap:12px;align-items:flex-start}
.callout.hipaa{background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.2);color:var(--green)}
.callout.warn{background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.25);color:var(--amber)}
.callout.info{background:rgba(6,182,212,0.06);border:1px solid rgba(6,182,212,0.2);color:var(--cyan)}
.callout.danger{background:rgba(220,38,38,0.06);border:1px solid rgba(220,38,38,0.2);color:var(--red)}
.callout-icon{flex-shrink:0;margin-top:2px}
.callout p{color:inherit;margin:0;font-size:14px}
.callout strong{color:inherit}

/* ── Architecture Flow ── */
.arch-diagram{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:32px;margin:24px 0;box-shadow:var(--card-shadow)}
.arch-flow{display:flex;flex-direction:column;gap:8px;align-items:center}
.arch-node{background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:14px 28px;text-align:center;min-width:280px;transition:all .2s}
.arch-node:hover{border-color:var(--accent);transform:scale(1.01)}
.arch-node-title{font-weight:600;color:var(--text-heading);font-size:14px}
.arch-node-sub{font-size:12px;color:var(--text3);margin-top:3px}
.arch-node.secure{border-color:rgba(16,185,129,0.4);background:rgba(16,185,129,0.05)}
.arch-node.edge{border-color:rgba(6,182,212,0.4);background:rgba(6,182,212,0.05)}
.arch-node.danger{border-color:rgba(220,38,38,0.4);background:rgba(220,38,38,0.05)}
.arch-node.accent{border-color:rgba(245,166,35,0.4);background:rgba(245,166,35,0.05)}
.arch-arrow{color:var(--text3);font-size:22px;line-height:1}

/* ── Comparison Cards ── */
.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:28px 0}
.comparison-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:26px;box-shadow:var(--card-shadow);transition:transform .2s,border-color .2s}
.comparison-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.comparison-card.highlight{border-color:rgba(102,187,106,0.4);background:linear-gradient(180deg,rgba(102,187,106,0.04),var(--bg2))}
.comparison-card.dim{border-color:rgba(239,83,80,0.3)}
.comparison-card-header{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.comparison-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--border)}
.comparison-row:last-child{border-bottom:none;padding-bottom:0}
.comparison-label{font-size:13px;color:var(--text2)}
.comparison-value{font-size:15px;font-weight:700}

/* ── Mock Bar Charts ── */
.mock-chart{display:flex;align-items:flex-end;gap:16px;height:180px;padding:24px 0 36px;border-bottom:1px solid var(--border);margin:24px 0}
.mock-bar{flex:1;border-radius:6px 6px 0 0;position:relative;min-width:40px;transition:height 1s cubic-bezier(0.4,0,0.2,1)}
.mock-bar.amber{background:linear-gradient(to top,rgba(245,166,35,0.2),var(--accent))}
.mock-bar.green{background:linear-gradient(to top,rgba(102,187,106,0.2),var(--green))}
.mock-bar.red{background:linear-gradient(to top,rgba(239,83,80,0.15),var(--red))}
.mock-bar.cyan{background:linear-gradient(to top,rgba(77,208,225,0.15),var(--cyan))}
.mock-bar::after{content:attr(data-val);position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}
.mock-bar-label{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;color:var(--text3);white-space:nowrap;text-align:center}

/* ── ROI Progress Bars ── */
.roi-scenario{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:22px;margin:14px 0;box-shadow:var(--card-shadow);transition:border-color .2s}
.roi-scenario:hover{border-color:var(--border2)}
.roi-scenario-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.roi-scenario-label{font-weight:600;color:var(--text);font-size:14px}
.roi-scenario-value{font-weight:700;color:var(--accent);font-size:18px}
.roi-track{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-bottom:8px}
.roi-fill{height:100%;border-radius:4px;transition:width 1.2s ease}
.roi-fill.amber{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.roi-fill.green{background:linear-gradient(90deg,#16a34a,var(--green))}
.roi-fill.cyan{background:linear-gradient(90deg,#0891b2,var(--cyan))}
.roi-sub{font-size:12px;color:var(--text3)}

/* ── Phase Timeline ── */
.phase-block{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:28px;margin:20px 0;position:relative;overflow:hidden;box-shadow:var(--card-shadow);transition:border-color .2s}
.phase-block:hover{border-color:var(--border2)}
.phase-block::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px}
.phase-block.p1::before{background:var(--accent)}
.phase-block.p2::before{background:var(--cyan)}
.phase-block.p3::before{background:var(--green)}
.phase-block.ongoing::before{background:var(--text3)}
.phase-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.phase-meta{}
.phase-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 12px;border-radius:20px;margin-bottom:8px}
.phase-tag.p1{background:rgba(245,166,35,0.12);color:var(--accent)}
.phase-tag.p2{background:rgba(77,208,225,0.1);color:var(--cyan)}
.phase-tag.p3{background:rgba(102,187,106,0.1);color:var(--green)}
.phase-tag.ongoing{background:var(--bg3);color:var(--text3)}
.phase-title{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--text-heading)}
.phase-duration{text-align:right;flex-shrink:0}
.phase-duration-val{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--text-heading);line-height:1}
.phase-duration-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.phase-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.phase-stat{background:var(--bg3);border-radius:10px;padding:14px;text-align:center}
.phase-stat-val{font-size:20px;font-weight:700;color:var(--text-heading);margin-bottom:4px}
.phase-stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.phase-milestones{list-style:none;padding:0}
.phase-milestones li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text2)}
.phase-milestones li:last-child{border-bottom:none}
.mile-week{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;min-width:52px;padding-top:2px}
.mile-task{flex:1}
.mile-task strong{color:var(--text);display:block;font-size:13px}
.mile-task span{font-size:12px;color:var(--text3)}
.gate-box{background:rgba(245,166,35,0.05);border:1px solid rgba(245,166,35,0.2);border-radius:10px;padding:16px 20px;margin-top:20px;display:flex;gap:12px;align-items:flex-start}
.gate-box-icon{flex-shrink:0;margin-top:2px}
.gate-box-text{font-size:13px;color:var(--text2)}
.gate-box-text strong{color:var(--accent);display:block;margin-bottom:4px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}

/* ── Competitor Table ── */
.comp-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:24px 0}
.comp-row{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 22px;display:flex;align-items:center;gap:20px;box-shadow:var(--card-shadow);transition:border-color .2s}
.comp-row:hover{border-color:var(--border2)}
.comp-name{font-weight:600;color:var(--text-heading);font-size:15px;min-width:200px}
.comp-status{display:flex;align-items:center;gap:8px;flex:1}
.comp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.comp-dot.active{background:var(--red)}
.comp-dot.warning{background:var(--amber)}
.comp-dot.open{background:var(--green)}
.comp-detail{font-size:13px;color:var(--text2)}

/* ── Feature List ── */
ul.feature-list{list-style:none;padding:0;margin:16px 0}
ul.feature-list li{padding:8px 0 8px 24px;position:relative;color:var(--text2);font-size:14px;border-bottom:1px solid var(--border)}
ul.feature-list li:last-child{border-bottom:none}
ul.feature-list li::before{content:'';position:absolute;left:0;top:16px;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.6}

/* ── Text utilities ── */
.text-red{color:var(--red)}.text-green{color:var(--green)}.text-amber{color:var(--amber)}.text-cyan{color:var(--cyan)}
.text-center{text-align:center}.text-sm{font-size:13px}.text-xs{font-size:11px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}

/* ── Chapter Index Cards ── */
.chapter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:32px 0}
.chapter-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:24px;text-decoration:none;transition:all .25s;display:block;position:relative;overflow:hidden;box-shadow:var(--card-shadow)}
.chapter-card::after{content:'→';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--text3);transition:all .25s}
.chapter-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.chapter-card:hover::after{right:16px;color:var(--accent)}
.chapter-num{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:10px}
.chapter-title{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--text-heading);margin-bottom:8px}
.chapter-desc{font-size:13px;color:var(--text3);line-height:1.6}

/* ── Footer ── */
footer{text-align:center;padding:44px 36px;border-top:1px solid var(--border);color:var(--text3);font-size:12px;margin-top:52px}
footer a{color:var(--accent);text-decoration:none}
footer p{margin-bottom:6px}

/* ── Print ── */
@media print{.conf-banner,nav,.theme-toggle{display:none}body{background:#fff;color:#111}.content{padding:20px 0}}

/* ── Responsive ── */
@media(max-width:768px){
nav{padding:10px 16px;flex-wrap:wrap;gap:12px;top:52px}
.nav-links{gap:0;flex-wrap:wrap}
.page-header{padding:44px 20px 36px}
.content{padding:36px 18px}
.sub-tabs{overflow-x:auto;flex-wrap:nowrap}
.theme-toggle{margin-left:auto;padding-left:12px}
.phase-header{flex-direction:column}
.phase-duration{text-align:left}
.stat-grid{grid-template-columns:repeat(2,1fr)}
.mock-chart{height:140px}
.comp-row{flex-direction:column;align-items:flex-start;gap:10px}
.comp-name{min-width:unset}
}