/* ===== CSS VARIABLES — SAP Connect Day + BDC Roadmap aliases ===== */
/* PRESENTATION MODE: High-contrast for large stage visibility */
:root{
  /* Short names (used by SAP Connect Day sections) */
  --b:#1a90d0;--t:#22d4c6;--g:#FFB800;--p:#b590ee;
  --bg:#060d1c;--s:#0e1b30;--s2:#162540;--bd:#2e4870;
  --tx:#ffffff;--mu:#d4e8f8;--ac:#88d4ff;--gr:#5ae8a8;--or:#FF9F40;
  /* BDC Roadmap aliases */
  --sap-blue:#1a90d0;--sap-dark:#003459;--sap-gold:#FFB800;
  --sap-teal:#22d4c6;--sap-green:#5CB85C;--sap-orange:#FF8C2A;
  --surface:#0e1b30;--surface2:#162540;--border:#2e4870;
  --text:#ffffff;--muted:#d4e8f8;--accent:#88d4ff;--accent2:#28e8da;
  --gold:#FFB800;--purple:#b590ee;--red:#ff5555;--green:#4ade9e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden;font-size:15px}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:99;background:rgba(5,8,15,.95);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:52px;backdrop-filter:blur(10px)}
.nbrand{display:flex;align-items:center;gap:8px}
.nlogo{width:32px;height:32px;background:var(--b);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem;color:#fff}
.ntitle{font-weight:700;font-size:.95rem}
.nsub{font-size:.68rem;color:var(--mu)}
.nls{display:flex;gap:1px;flex-wrap:wrap}
.na{background:none;border:none;color:var(--mu);font-size:.68rem;padding:4px 8px;cursor:pointer;border-radius:4px;font-family:inherit;transition:all .2s;white-space:nowrap;font-weight:600}
.na:hover,.na.on{color:var(--ac);background:rgba(136,212,255,.15)}
#nprog{position:fixed;top:52px;left:0;height:2px;background:linear-gradient(90deg,var(--b),var(--t));transition:width .3s;z-index:100;width:0%}

/* ===== LAYOUT ===== */
section{min-height:100vh;padding:68px 0 46px;display:flex;flex-direction:column;justify-content:center}
.w{max-width:1100px;margin:0 auto;padding:0 24px;width:100%}
.ww{max-width:1300px;margin:0 auto;padding:0 24px;width:100%}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ac);margin-bottom:7px;font-weight:700}
.tag::before{content:'';width:16px;height:2px;background:var(--ac)}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:800;margin-bottom:11px}
h2 em{font-style:normal;background:linear-gradient(90deg,var(--ac),var(--t));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ld{font-size:1rem;color:var(--mu);line-height:1.7;max-width:640px;margin-bottom:24px}

/* ===== GRID ===== */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
@media(max-width:820px){.g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}.nls{display:none}.w,.ww{padding:0 13px}}
@media(max-width:480px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

/* ===== CARDS ===== */
.c{background:var(--s);border:1px solid var(--bd);border-radius:9px;padding:15px;transition:all .22s;cursor:pointer}
.c:hover{border-color:var(--ac);background:var(--s2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.c h3{font-size:.98rem;font-weight:700;margin-bottom:5px}
.c .d{font-size:.85rem;color:var(--mu);line-height:1.6}
.c .ci{font-size:1.4rem;margin-bottom:7px}
.c-click-hint{font-size:.6rem;color:var(--ac);margin-top:8px;opacity:.7;display:flex;align-items:center;gap:3px}

/* ===== STAT BOXES ===== */
.sb{background:var(--s);border:1px solid var(--bd);border-radius:9px;padding:16px 20px;text-align:center;position:relative;overflow:hidden;transition:all .2s}
.sb:hover{border-color:var(--ac);transform:translateY(-2px)}
.sb::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px}
.sb-b::after{background:var(--b)} .sb-t::after{background:var(--t)} .sb-g::after{background:var(--g)} .sb-gr::after{background:var(--gr)} .sb-p::after{background:var(--p)}
.sv{font-size:2.3rem;font-weight:900;line-height:1}
.svb{color:var(--ac)} .svt{color:var(--t)} .svg{color:var(--g)} .svgr{color:var(--gr)} .svp{color:var(--p)}
.sl{font-size:.72rem;color:var(--mu);text-transform:uppercase;letter-spacing:.07em;margin-top:4px;font-weight:600}
.stat-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.stat-row .sb{flex:1;min-width:120px}

/* ===== HIGHLIGHT BOX ===== */
.hb{background:linear-gradient(135deg,rgba(0,112,173,.1),rgba(31,186,173,.06));border:1px solid rgba(0,112,173,.25);border-radius:9px;padding:15px 19px;margin:11px 0}
.hb .lb{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ac);margin-bottom:5px;font-weight:700}

/* ===== DIVIDER ===== */
.dv{height:1px;background:linear-gradient(90deg,transparent,var(--bd),transparent);margin:20px 0}

/* ===== ARCH / LIST ITEMS ===== */
.al{background:var(--s2);border:1px solid var(--bd);border-radius:7px;padding:8px 12px;margin-bottom:5px;display:flex;align-items:center;gap:10px}
.al:hover{border-color:var(--ac)}
.alb{font-size:.62rem;font-weight:700;text-transform:uppercase;color:var(--ac);min-width:62px}
.ac2{background:rgba(0,112,173,.12);border:1px solid rgba(0,112,173,.22);border-radius:4px;padding:2px 6px;font-size:.63rem;color:var(--tx);display:inline-block;margin:1px}

/* ===== PILLARS ===== */
.pil{background:var(--s);border:1px solid var(--bd);border-radius:9px;padding:14px 10px;text-align:center;transition:all .22s;cursor:pointer}
.pil:hover{border-color:var(--ac);background:var(--s2);transform:translateY(-2px)}
.pn{font-size:1.7rem;font-weight:900;line-height:1}
.pl{font-size:.78rem;font-weight:700;margin:4px 0 2px}
.pd{font-size:.7rem;color:var(--mu);line-height:1.4}

/* ===== TIMELINE ===== */
.tl{position:relative;padding-left:22px}
.tl::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--b),var(--t),transparent)}
.ti{position:relative;margin-bottom:15px;cursor:pointer}
.ti::before{content:'';position:absolute;left:-18px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--t);border:2px solid var(--bg)}
.ti h4{font-size:.94rem;font-weight:700;margin-bottom:2px}
.ti p{font-size:.82rem;color:var(--mu);line-height:1.5}
.ti .wh{font-size:.7rem;color:var(--t);font-weight:700;margin-bottom:2px;text-transform:uppercase;letter-spacing:.07em}

/* ===== DATA PRODUCTS ===== */
.dp{background:var(--s);border:1px solid var(--bd);border-radius:7px;padding:11px;transition:all .2s;position:relative;overflow:hidden;cursor:pointer}
.dp::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--b),var(--t))}
.dp:hover{border-color:var(--t);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.3)}

/* ===== JOULE AGENTS ===== */
.ja{background:rgba(0,0,0,.28);border:1px solid var(--bd);border-radius:7px;padding:9px;display:flex;align-items:center;gap:7px;transition:all .2s}
.ja:hover{border-color:var(--t)}

/* ===== PILLS ===== */
.pill{display:inline-flex;border-radius:16px;padding:2px 8px;font-size:.62rem;font-weight:600}
.pb{background:rgba(0,112,173,.15);color:var(--ac);border:1px solid rgba(0,112,173,.3)}
.pt{background:rgba(31,186,173,.12);color:var(--t);border:1px solid rgba(31,186,173,.25)}
.pg{background:rgba(240,171,0,.12);color:var(--g);border:1px solid rgba(240,171,0,.25)}
.pp{background:rgba(155,114,207,.12);color:var(--p);border:1px solid rgba(155,114,207,.25)}
.sm{display:inline-block;font-size:.56rem;padding:2px 5px;border-radius:3px;margin-top:4px}
.smg{background:rgba(62,207,142,.12);color:var(--gr)}
.smb{background:rgba(77,166,232,.12);color:var(--ac)}
.smr{background:rgba(233,115,12,.12);color:var(--or)}

/* ===== PROGRESS BARS ===== */
.prog-wrap{background:var(--s2);border-radius:4px;height:8px;margin-top:4px;overflow:hidden;border:1px solid var(--bd)}
.prog-bar{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--b),var(--t));width:0%;transition:width 1.2s ease}

/* ===== COMPARISON PATHS ===== */
.path-card{background:var(--s);border:2px solid var(--bd);border-radius:12px;padding:20px;transition:all .25s;cursor:pointer;position:relative;overflow:hidden}
.path-card:hover,.path-card.selected{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.path-card.selected{border-color:var(--ac)}
.path-card .ph{font-size:1.8rem;margin-bottom:10px}
.path-card .pt{font-size:.85rem;font-weight:800;margin-bottom:5px}
.path-card .pd{font-size:.75rem;color:var(--mu);line-height:1.6}
.path-card .pf{position:absolute;bottom:0;left:0;right:0;height:3px}

/* ===== WHITEBOARD BUTTONS (from bdc-roadmap) ===== */
.wb-btn{background:var(--s);border:1px solid var(--bd);color:var(--tx);padding:7px 14px;border-radius:8px;font-size:.78rem;font-family:inherit;cursor:pointer;font-weight:600;transition:all .2s;white-space:nowrap}
.wb-btn:hover{border-color:var(--ac);color:var(--ac);background:rgba(77,166,232,.08)}
.wb-btn.wb-active{border-color:var(--ac);color:var(--ac);background:rgba(77,166,232,.15)}

/* ===== BDC ROADMAP CLASSES (for pages 3, 4, 8) ===== */
.section-tag{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:12px;font-weight:700}
.section-tag::before{content:'';width:22px;height:2px;background:var(--accent);border-radius:1px}
h2.section-title{font-size:clamp(1.75rem,3.5vw,2.6rem);font-weight:800;line-height:1.2;margin-bottom:16px}
h2.section-title em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--sap-teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-lead{font-size:1.18rem;color:var(--muted);line-height:1.7;max-width:700px;margin-bottom:40px}
.card-grid{display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .25s;cursor:pointer}
.card:hover{border-color:var(--accent);background:var(--surface2);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px}
.ci-blue{background:rgba(0,112,173,.15);color:var(--sap-blue)}
.ci-teal{background:rgba(31,186,173,.15);color:var(--sap-teal)}
.ci-gold{background:rgba(240,171,0,.15);color:var(--gold)}
.ci-purple{background:rgba(155,114,207,.15);color:var(--purple)}
.ci-green{background:rgba(62,207,142,.15);color:var(--green)}
.ci-orange{background:rgba(233,115,12,.15);color:var(--sap-orange)}
.card h3{font-size:1.08rem;font-weight:700;margin-bottom:8px}
.card p{font-size:.93rem;color:var(--muted);line-height:1.65}
.card .tag{display:inline-block;font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:4px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.07em}
.tag-now{background:rgba(62,207,142,.15);color:var(--green);border:1px solid rgba(62,207,142,.3)}
.tag-q1{background:rgba(0,112,173,.15);color:var(--accent);border:1px solid rgba(0,112,173,.3)}
.tag-q2{background:rgba(240,171,0,.15);color:var(--gold);border:1px solid rgba(240,171,0,.3)}
.tag-q3{background:rgba(233,115,12,.15);color:var(--sap-orange);border:1px solid rgba(233,115,12,.3)}
.tag-h1{background:rgba(155,114,207,.15);color:var(--purple);border:1px solid rgba(155,114,207,.3)}
.tag-planned{background:rgba(107,127,160,.1);color:var(--muted);border:1px solid var(--border)}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 28px;flex:1;min-width:160px;text-align:center;position:relative;overflow:hidden}
.stat-box::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px}
.sb-blue::after{background:var(--sap-blue)} .sb-teal::after{background:var(--sap-teal)}
.sb-gold::after{background:var(--gold)} .sb-green::after{background:var(--green)}
.sb-purple::after{background:var(--purple)}
.stat-val{font-size:2.5rem;font-weight:900;line-height:1}
.sv-blue{color:var(--sap-blue)} .sv-teal{color:var(--sap-teal)} .sv-gold{color:var(--gold)}
.sv-green{color:var(--green)} .sv-purple{color:var(--purple)}
.stat-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:5px;font-weight:600}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.two-col.flip{direction:rtl}.two-col.flip > *{direction:ltr}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}
.phase-list{display:flex;flex-direction:column;gap:16px}
.phase-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px;display:flex;gap:20px;align-items:flex-start;transition:all .2s}
.phase-item:hover{border-color:var(--accent);background:var(--surface2)}
.phase-num{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--sap-blue),var(--sap-teal));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0}
.phase-content h4{font-size:1.02rem;font-weight:700;margin-bottom:4px}
.phase-content p{font-size:.9rem;color:var(--muted);line-height:1.55}
.pillar-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:900px){.pillar-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.pillar-row{grid-template-columns:repeat(2,1fr)}}
.pillar{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 16px;text-align:center;transition:all .25s;cursor:default}
.pillar:hover{border-color:var(--accent);background:var(--surface2);transform:translateY(-3px)}
.pillar-icon{font-size:2rem;margin-bottom:10px}
.pillar-num{font-size:2rem;font-weight:900;color:var(--accent);line-height:1}
.pillar-label{font-size:.75rem;font-weight:700;margin:6px 0 4px;color:var(--text)}
.pillar-desc{font-size:.68rem;color:var(--muted);line-height:1.5}
.timeline{position:relative;padding-left:32px}
.timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--sap-blue),var(--sap-teal),transparent)}
.tl-item{position:relative;margin-bottom:28px}
.tl-item::before{content:'';position:absolute;left:-26px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--sap-teal);border:2px solid var(--bg)}
.tl-item h4{font-size:.95rem;font-weight:700;margin-bottom:4px}
.tl-item p{font-size:.83rem;color:var(--muted);line-height:1.55}
.tl-item .when{font-size:.7rem;color:var(--sap-teal);font-weight:700;margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em}
.agent-hub{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;text-align:center;position:relative}
.agents-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:600px;margin:0 auto}
.agent-node{background:var(--surface2);border:1px solid rgba(0,112,173,.3);border-radius:10px;padding:14px 10px;text-align:center;transition:all .2s}
.agent-node:hover{border-color:var(--sap-teal);background:rgba(31,186,173,.08);transform:scale(1.03)}
.dp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:800px){.dp-grid{grid-template-columns:repeat(2,1fr)}}
.dp-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;transition:all .2s;position:relative;overflow:hidden}
.dp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sap-blue),var(--sap-teal))}
.dp-card:hover{border-color:var(--sap-teal);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.dp-icon{font-size:1.4rem;margin-bottom:8px}
.dp-name{font-size:.82rem;font-weight:700;margin-bottom:4px}
.dp-desc{font-size:.7rem;color:var(--muted)}
.dp-badge{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:4px;margin-top:6px;background:rgba(62,207,142,.12);color:var(--green);border:1px solid rgba(62,207,142,.25)}
.roadmap-table{width:100%;border-collapse:collapse}
.roadmap-table th{text-align:left;padding:10px 16px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--border);background:var(--surface2)}
.roadmap-table td{padding:12px 16px;font-size:.82rem;border-bottom:1px solid var(--border);vertical-align:top}
.roadmap-table tr:last-child td{border-bottom:none}
.roadmap-table tr:hover td{background:var(--surface)}
.rt-app{font-weight:700;color:var(--text)}
.rt-sub{font-size:.7rem;color:var(--muted);margin-top:2px}
.rt-chip{display:inline-block;font-size:.65rem;padding:2px 7px;border-radius:4px;font-weight:700;white-space:nowrap}
.arch-diagram{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;position:relative;overflow:hidden}
.arch-layer{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 20px;margin-bottom:10px;display:flex;align-items:center;gap:16px;transition:all .2s}
.arch-layer:hover{border-color:var(--accent)}
.arch-layer-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);min-width:90px}
.arch-layer-items{display:flex;flex-wrap:nowrap;gap:8px}
.arch-chip{background:rgba(0,112,173,.12);border:1px solid rgba(0,112,173,.25);border-radius:6px;padding:4px 10px;font-size:.72rem;color:var(--text)}
.img-panel{border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface2)}
.img-panel img{width:100%;height:auto;display:block;opacity:.95;transition:opacity .2s}
.img-panel:hover img{opacity:1}
.img-caption{padding:10px 14px;font-size:.72rem;color:var(--muted);border-top:1px solid var(--border)}
.joule-showcase{background:linear-gradient(135deg,rgba(0,52,89,.6),rgba(31,186,173,.1));border:1px solid rgba(31,186,173,.3);border-radius:16px;padding:36px}
.joule-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.joule-avatar{width:56px;height:56px;background:linear-gradient(135deg,var(--sap-blue),var(--sap-teal));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.joule-name{font-size:1.4rem;font-weight:800;color:var(--text)}
.joule-role{font-size:.8rem;color:var(--sap-teal);font-weight:600}
.joule-agents{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
@media(max-width:600px){.joule-agents{grid-template-columns:repeat(2,1fr)}}
.ja2{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px;transition:all .2s}
.ja2:hover{border-color:var(--sap-teal);background:rgba(31,186,173,.08)}
.hana-features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
@media(max-width:700px){.hana-features{grid-template-columns:1fr}}
.hf{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px;transition:all .2s}
.hf:hover{border-color:var(--sap-teal);background:var(--surface2)}
.hf-icon{font-size:1.4rem;margin-bottom:8px}
.hf-title{font-size:.88rem;font-weight:700;margin-bottom:4px}
.hf-desc{font-size:.75rem;color:var(--muted);line-height:1.55}
.highlight-box{background:linear-gradient(135deg,rgba(0,112,173,.1),rgba(31,186,173,.06));border:1px solid rgba(0,112,173,.25);border-radius:12px;padding:24px 28px;margin:24px 0}
.highlight-box .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:8px;font-weight:700}
.highlight-box p{font-size:1rem;color:var(--text);line-height:1.65;font-style:italic}
.quote-block{background:linear-gradient(135deg,rgba(0,112,173,.12),rgba(31,186,173,.08));border:1px solid rgba(0,112,173,.3);border-left:4px solid var(--sap-blue);border-radius:0 12px 12px 0;padding:28px 32px}
.quote-block blockquote{font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--text);font-style:italic}
.challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.challenge-list{display:flex;flex-direction:column;gap:14px}
.challenge-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:14px}
.challenge-item .pct{font-size:1.6rem;font-weight:800;color:var(--red);min-width:56px;line-height:1}
.challenge-item .txt{font-size:.85rem;color:var(--muted);line-height:1.5}
.challenge-item .txt strong{color:var(--text);display:block;margin-bottom:2px}
.pill-blue{background:rgba(0,112,173,.15);color:var(--accent);border:1px solid rgba(0,112,173,.3)}
.pill-teal{background:rgba(31,186,173,.12);color:var(--sap-teal);border:1px solid rgba(31,186,173,.25)}
.pill-gold{background:rgba(240,171,0,.12);color:var(--gold);border:1px solid rgba(240,171,0,.25)}
.pill-green{background:rgba(62,207,142,.1);color:var(--green);border:1px solid rgba(62,207,142,.2)}
.pill-purple{background:rgba(155,114,207,.12);color:var(--purple);border:1px solid rgba(155,114,207,.25)}
.btn-primary{background:linear-gradient(135deg,var(--sap-blue),var(--sap-teal));color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .25s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,112,173,.4)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:12px 28px;font-size:.9rem;cursor:pointer;font-family:inherit;transition:all .25s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(77,166,232,.05)}

/* ===== CHALLENGE ITEMS ANIMATION ===== */
@keyframes ch-slide-in{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:translateX(0)}}
.challenge-list .challenge-item{opacity:0;transform:translateX(90px);pointer-events:none}
.challenge-list .challenge-item.ch-visible{animation:ch-slide-in .65s cubic-bezier(.2,.8,.3,1) both;pointer-events:auto}
#ch-next-btn{margin-top:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(77,166,232,.12);border:1px solid rgba(77,166,232,.35);color:var(--accent);border-radius:8px;padding:9px 18px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;letter-spacing:.04em}
#ch-next-btn:hover{background:rgba(77,166,232,.22);border-color:var(--accent)}
#ch-next-btn:disabled{opacity:.35;cursor:default;pointer-events:none}

/* ===== INTERACTIVE DETAIL MODALS ===== */
.detail-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .3s ease;padding:20px}
.detail-modal.open{opacity:1;pointer-events:auto}
.dm-inner{position:relative;max-width:720px;width:100%;background:#0a0f1e;border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.8);max-height:88vh;overflow-y:auto}
.dm-header{padding:16px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#0a0f1e;z-index:2}
.dm-title{font-size:1rem;font-weight:800;color:var(--tx);display:flex;align-items:center;gap:10px}
.dm-close{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:inherit}
.dm-close:hover{background:rgba(255,255,255,.18);color:#fff}
.dm-body{padding:28px}

/* ===== ANIMATED COUNTERS ===== */
.count-num{transition:all .3s}

/* ===== HERO SECTION ===== */
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,112,173,.2);border:1px solid rgba(0,112,173,.4);border-radius:20px;padding:5px 14px;font-size:.75rem;color:var(--ac);letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}
.hero-eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--ac);display:inline-block;animation:pu 2s infinite}
@keyframes pu{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border-radius:10px;overflow:hidden;margin-top:40px;max-width:640px}
.hs{background:var(--s);padding:16px;text-align:center}
.hs-val{font-size:1.65rem;font-weight:900;color:var(--ac)}
.hs-lab{font-size:.7rem;color:var(--mu);text-transform:uppercase;letter-spacing:.07em;margin-top:2px;font-weight:600}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hero-cta button{background:linear-gradient(135deg,var(--b),var(--t));color:#fff;border:none;border-radius:7px;padding:10px 22px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .25s}
.hero-cta button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,112,173,.4)}
.hero-cta button.outline{background:transparent;border:1px solid var(--bd);color:var(--tx)}
.hero-cta button.outline:hover{border-color:var(--ac);color:var(--ac)}

/* ===== AGENDA CARDS ===== */
.agenda-num{font-size:1.6rem;font-weight:900;color:var(--ac);margin-bottom:6px}
.agenda-time{font-size:.72rem;color:var(--t);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}

/* ===== CHALLENGE BARS (BW Landscape) ===== */
.ch-bar-item{background:var(--s);border:1px solid var(--bd);border-radius:9px;padding:14px 16px;cursor:pointer;transition:all .2s}
.ch-bar-item:hover{border-color:var(--ac);background:var(--s2)}
.ch-bar-pct{font-size:1.7rem;font-weight:900;margin-bottom:4px}
.ch-bar-lbl{font-size:.88rem;font-weight:700;margin-bottom:2px}
.ch-bar-desc{font-size:.8rem;color:var(--mu);margin-bottom:8px}

/* ===== COMPARISON TABLE ===== */
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:10px;overflow:hidden;border:1px solid var(--bd)}
.cmp-table th{background:var(--s2);padding:12px 14px;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);border-bottom:1px solid var(--bd);font-weight:700}
.cmp-table td{padding:11px 14px;font-size:.86rem;border-bottom:1px solid var(--bd)}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table tr:hover td{background:var(--s)}
.cmp-yes{color:var(--gr)}
.cmp-no{color:var(--mu);opacity:.5}
.cmp-part{color:var(--g)}

/* ===== SCROLL ANIMATIONS ===== */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== SLIDE NAV ===== */
#slide-nav{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:6px;background:rgba(5,8,15,.92);backdrop-filter:blur(16px);border:1px solid var(--bd);border-radius:50px;padding:7px 14px;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.sn-btn{background:none;border:none;color:var(--mu);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s;font-family:inherit}
.sn-btn:hover{color:var(--ac);background:rgba(136,212,255,.15)}
.sn-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
#slide-counter{font-size:.82rem;font-weight:700;color:var(--tx);min-width:48px;text-align:center}
.sn-div{width:1px;height:14px;background:var(--bd)}
@keyframes slide-flash{0%{opacity:.3}100%{opacity:0}}
#slide-flash{position:fixed;inset:0;pointer-events:none;z-index:9998;background:rgba(77,166,232,.08);opacity:0}
#slide-flash.active{animation:slide-flash .35s ease-out forwards}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ac)}
/* container alias for bdc-roadmap-2026 sections */
.container{max-width:1100px;margin:0 auto;padding:0 24px;width:100%}

/* ===== VIDEO MODAL PANELS (BDC Connect) ===== */
.bdc-panel{position:fixed;inset:0;z-index:10005;opacity:0;pointer-events:none;transition:opacity .3s ease}
.bdc-panel.active{opacity:1;pointer-events:auto}
.bdc-overlay{position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bdc-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);width:90%;max-width:720px;max-height:85vh;background:linear-gradient(135deg,#0a1020 0%,#0d1626 100%);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.7);overflow-y:auto;padding:40px 36px;transition:transform .35s cubic-bezier(0.16,1,0.3,1)}
.bdc-panel.active .bdc-content{transform:translate(-50%,-50%) scale(1)}
.bdc-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:inherit;line-height:1;z-index:1}
.bdc-close:hover{background:rgba(255,255,255,.15);color:#fff;transform:rotate(90deg)}
.bdc-header{margin-bottom:28px;padding-bottom:20px}
.bdc-badge-display{display:inline-block;padding:8px 18px;border-radius:8px;margin-bottom:12px}
.bdc-badge-text{color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em}
.bdc-title{font-size:1.8rem;font-weight:900;color:#e8edf5;margin-bottom:8px;line-height:1.2}
.bdc-subtitle{font-size:.95rem;font-weight:600}
.bdc-section{margin-bottom:24px}
.bdc-section-title{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;padding-bottom:8px}
.bdc-text{font-size:.9rem;color:#b8c2d4;line-height:1.75;margin-bottom:12px}
.bdc-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0}
.bdc-feature{background:rgba(79,142,247,.08);border:1px solid rgba(79,142,247,.2);border-radius:10px;padding:16px;transition:all .2s}
.bdc-feature:hover{background:rgba(79,142,247,.15);border-color:rgba(79,142,247,.4);transform:translateY(-2px)}
.bdc-feature-icon{font-size:1.8rem;margin-bottom:8px}
.bdc-feature-title{font-weight:700;margin-bottom:6px;font-size:.85rem}
.bdc-feature-text{font-size:.78rem;color:#8892a4;line-height:1.5}
.bdc-databricks .bdc-content{border:2px solid rgba(255,54,33,.5)}
.bdc-databricks .bdc-badge-display{background:#FF3621;border:2px solid #ff6b59}
.bdc-databricks .bdc-header{border-bottom:2px solid rgba(255,54,33,.3)}
.bdc-databricks .bdc-subtitle{color:#ff6b59}
.bdc-databricks .bdc-section-title{color:#ff6b59;border-bottom:1px solid rgba(255,54,33,.2)}
.bdc-snowflake .bdc-content{border:2px solid rgba(41,181,232,.5)}
.bdc-snowflake .bdc-badge-display{background:#29B5E8;border:2px solid #5ec9f0}
.bdc-snowflake .bdc-header{border-bottom:2px solid rgba(41,181,232,.3)}
.bdc-snowflake .bdc-subtitle{color:#5ec9f0}
.bdc-snowflake .bdc-section-title{color:#5ec9f0;border-bottom:1px solid rgba(41,181,232,.2)}
@media(max-width:768px){.bdc-content{width:95%;padding:32px 24px}.bdc-title{font-size:1.4rem}.bdc-features{grid-template-columns:1fr}}

/* ===== AI & BW NEURAL NETWORK ANIMATION ===== */
/* Outer nodes - faster pulsing with glow */
@keyframes ai-node-pulse {
  0%, 100% { 
    opacity: 0.7; 
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.4));
  }
  50% { 
    opacity: 1; 
    transform: scale(1.35);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.95)) drop-shadow(0 0 12px rgba(101,48,184,0.7));
  }
}

/* Center node (main AI brain) - intense pulsing with bright glow */
@keyframes ai-node-pulse-center {
  0%, 100% { 
    opacity: 0.9; 
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
  }
  25% {
    opacity: 1;
    transform: scale(1.45);
    filter: drop-shadow(0 0 16px rgba(255,255,255,1)) drop-shadow(0 0 20px rgba(101,48,184,0.9));
  }
  50% { 
    opacity: 0.95; 
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.7));
  }
  75% {
    opacity: 1;
    transform: scale(1.5);
    filter: drop-shadow(0 0 18px rgba(255,255,255,1)) drop-shadow(0 0 24px rgba(101,48,184,1));
  }
}

/* Connection lines - fast traveling signals */
@keyframes ai-line-flow {
  0% { 
    stroke-dashoffset: 50;
    opacity: 0.3;
    stroke-width: 1.5;
  }
  40% {
    opacity: 1;
    stroke-width: 2.5;
  }
  100% { 
    stroke-dashoffset: 0;
    opacity: 0.3;
    stroke-width: 1.5;
  }
}

/* Rotating glow around entire network */
@keyframes ai-network-glow {
  0% {
    filter: drop-shadow(0 0 8px rgba(101,48,184,0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(101,48,184,0.7)) drop-shadow(0 0 30px rgba(255,255,255,0.3));
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(101,48,184,0.3));
  }
}

/* Apply animations to AI box SVG elements */
.focus-box svg#ai-neural-net {
  animation: ai-network-glow 4s ease-in-out infinite;
}

.focus-box svg#ai-neural-net circle {
  animation: ai-node-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
}

/* Center node gets special treatment - the "AI brain" */
.focus-box svg#ai-neural-net circle.ai-center-node {
  animation: ai-node-pulse-center 2s ease-in-out infinite;
}

/* Stagger the node animations for wave effect - faster cascade */
.focus-box svg#ai-neural-net circle:nth-child(2) { animation-delay: 0s; }
.focus-box svg#ai-neural-net circle:nth-child(3) { animation-delay: 0.08s; }
.focus-box svg#ai-neural-net circle:nth-child(4) { animation-delay: 0.16s; }
.focus-box svg#ai-neural-net circle:nth-child(5) { animation-delay: 0.24s; }
.focus-box svg#ai-neural-net circle:nth-child(6) { animation-delay: 0.32s; }
.focus-box svg#ai-neural-net circle:nth-child(7) { animation-delay: 0.4s; }
.focus-box svg#ai-neural-net circle:nth-child(8) { animation-delay: 0.48s; }
.focus-box svg#ai-neural-net circle:nth-child(9) { animation-delay: 0.56s; }
.focus-box svg#ai-neural-net circle:nth-child(10) { animation-delay: 0.64s; }

/* Animate connection lines with fast traveling signals */
.focus-box svg#ai-neural-net line {
  stroke-dasharray: 20 20;
  animation: ai-line-flow 2s linear infinite;
  transform-origin: center;
}

/* Stagger line animations - create signal cascade */
.focus-box svg#ai-neural-net line:nth-child(n+11):nth-child(-n+22) { animation-delay: 0s; }
.focus-box svg#ai-neural-net line:nth-child(n+12):nth-child(-n+22) { animation-delay: 0.15s; }
.focus-box svg#ai-neural-net line:nth-child(n+13):nth-child(-n+22) { animation-delay: 0.3s; }
.focus-box svg#ai-neural-net line:nth-child(n+14):nth-child(-n+22) { animation-delay: 0.45s; }
.focus-box svg#ai-neural-net line:nth-child(n+15):nth-child(-n+22) { animation-delay: 0.6s; }
.focus-box svg#ai-neural-net line:nth-child(n+16):nth-child(-n+22) { animation-delay: 0.75s; }