:root{--bg:#02030a;--text:#f8f8ff;--muted:#a8aec6;--pink:#ff2f9e;--purple:#8a49ff;--blue:#4b8dff;--line:rgba(145,117,255,.28)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button{font:inherit}
#stage{width:100vw;height:100vh;display:grid;place-items:center;padding:2vh 2.5vw;perspective:1600px;transition:opacity .16s ease}
.slide{position:relative;isolation:isolate;width:min(94vw,calc(94vh * 1.4142857));aspect-ratio:297/210;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 82% 18%,rgba(138,73,255,.18),transparent 31%),radial-gradient(circle at 12% 86%,rgba(255,47,158,.11),transparent 27%),linear-gradient(135deg,#070914 0%,#0b0f22 54%,#070812 100%);box-shadow:0 34px 90px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.06);animation:enter .22s ease}
.slide::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.25),transparent 82%)}
@keyframes enter{from{opacity:.7;transform:scale(.997)}to{opacity:1;transform:none}}
.canvas{position:absolute;inset:0;z-index:2;padding:4.8% 5.2% 4.5%;display:flex;flex-direction:column;min-height:0}
.eyebrow{font-size:clamp(10px,.88vw,16px);text-transform:uppercase;letter-spacing:.17em;color:#bbc2dd;margin-bottom:1.1%;font-weight:800;white-space:nowrap}.eyebrow .part{color:var(--pink)}
.h1{margin:0;font-size:clamp(34px,4.2vw,76px);line-height:.96;letter-spacing:-.042em;font-weight:900;max-width:84%}.h2{margin:0;font-size:clamp(28px,3.05vw,54px);line-height:1.02;letter-spacing:-.035em;font-weight:860}.lead{margin:1.2% 0 0;max-width:78%;font-size:clamp(14px,1.3vw,23px);color:#c8cee0;line-height:1.34}.gradient{background:linear-gradient(92deg,#fff 0%,#d9c9ff 20%,#a75aff 52%,#ff2f9e 78%,#ff8d55 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.pink{color:var(--pink)}.purple{color:#ae6cff}.blue{color:var(--blue)}.green{color:#2bd984}.orange{color:#ff9f43}
.logo{width:17%;max-height:8%;object-fit:contain;object-position:left center;margin-bottom:2.6%}.logo.small{width:12.5%;margin-bottom:1.6%}
.grid{display:grid;gap:1.4%}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(145deg,rgba(18,23,45,.94),rgba(8,11,25,.94));border:1px solid var(--line);border-radius:18px;padding:3.8%;box-shadow:inset 0 1px rgba(255,255,255,.03);min-width:0}.card h3{margin:0 0 2%;font-size:clamp(15px,1.45vw,25px);line-height:1.08}.card p{margin:0;color:var(--muted);font-size:clamp(10px,.92vw,16px);line-height:1.38}.card .num{font-size:clamp(30px,3.6vw,60px);line-height:1;font-weight:900;margin-bottom:2%}.card .tag{display:inline-flex;padding:.45em .8em;border-radius:999px;color:#fff;background:rgba(138,73,255,.18);border:1px solid rgba(138,73,255,.46);font-size:clamp(9px,.7vw,13px);font-weight:800}
.split{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:3.8%;align-items:stretch;min-height:0;padding-top:1.4%}.split.wide-right{grid-template-columns:.76fr 1.24fr}.split.wide-left{grid-template-columns:1.16fr .84fr}.copy{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center}.visual{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:1%}.visual>.frame{width:100%;max-height:100%}
.screenshot{display:block;max-width:100%;max-height:100%;border-radius:16px;object-fit:contain}.screenshot.desktop{width:auto;height:auto;max-width:100%;max-height:58vh}.screenshot.phone{width:auto;height:auto;max-width:100%;max-height:66vh;border-radius:28px;filter:drop-shadow(0 22px 34px rgba(0,0,0,.52))}.screenshot.chart{width:auto;height:auto;max-width:100%;max-height:62vh;object-fit:contain}
.frame{position:relative;padding:1%;border-radius:20px;background:linear-gradient(135deg,rgba(138,73,255,.18),rgba(255,47,158,.06));border:1px solid rgba(167,108,255,.34);box-shadow:0 22px 60px rgba(0,0,0,.26);overflow:hidden;display:flex;align-items:center;justify-content:center}.frame img{display:block;width:auto;height:auto;max-width:100%;max-height:56vh;border-radius:12px;object-fit:contain}
.phone-row{flex:1;display:flex;align-items:center;justify-content:center;gap:2.2%;min-height:0;padding-top:.8%}.phone-row img{height:auto;max-height:62vh;max-width:27%;object-fit:contain;filter:drop-shadow(0 24px 32px rgba(0,0,0,.55))}.phone-row img:nth-child(2){max-height:68vh}
.ad-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1.5%;margin-top:1.8%!important}.ad-grid .card{padding:1.5%;display:flex;flex-direction:column;min-height:0;overflow:hidden}.ad-grid .card h3{margin:0 0 .8%;font-size:clamp(13px,1.18vw,20px)}.ad-grid .card img{width:100%;height:100%;max-height:none;min-height:0;object-fit:contain;border-radius:12px;box-shadow:none}
.bullets{list-style:none;margin:3.5% 0 0;padding:0;display:grid;gap:1.15vh}.bullets li{display:flex;gap:.8em;align-items:flex-start;color:#d8dced;font-size:clamp(12px,1.08vw,19px);line-height:1.32}.bullets li::before{content:"";flex:0 0 .52em;width:.52em;height:.52em;border-radius:50%;margin-top:.42em;background:linear-gradient(135deg,var(--blue),var(--pink));box-shadow:0 0 16px rgba(255,47,158,.4)}
.stat-strip{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.15%}.stat{padding:1.9% 2.4%;background:rgba(7,10,23,.84);border:1px solid rgba(138,73,255,.28);border-radius:16px}.stat strong{display:block;font-size:clamp(22px,2.35vw,42px);line-height:1;margin-bottom:4px}.stat span{color:var(--muted);font-size:clamp(9px,.82vw,15px)}
.big-quote{max-width:88%;font-size:clamp(30px,4.15vw,70px);font-weight:900;line-height:1;letter-spacing:-.045em}.subquote{margin-top:1.8%;font-size:clamp(14px,1.4vw,24px);line-height:1.4;color:#c9cee2;max-width:72%}
.section-cover .canvas{justify-content:center}.section-cover .h1{max-width:76%}.section-cover::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(3,5,14,.97) 0%,rgba(3,5,14,.82) 48%,rgba(3,5,14,.18) 100%),var(--cover) center/cover no-repeat;pointer-events:none}
.full-graphic .canvas{padding:4.2% 4.6% 3.8%;align-items:center;justify-content:center}.full-graphic img{width:92%;height:auto;max-width:92%;max-height:82%;object-fit:contain;border-radius:18px;box-shadow:0 26px 70px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.05)}.full-graphic .eyebrow{position:absolute;left:4.8%;top:4.2%;z-index:2;background:rgba(4,6,16,.82);padding:.5em .75em;border-radius:999px}.full-graphic .page-no{z-index:3}
.footer-note{position:absolute;left:5.2%;bottom:3.1%;color:#777f9d;font-size:clamp(8px,.7vw,12px)}.page-no{position:absolute;right:3.4%;top:3%;color:rgba(255,255,255,.32);font-weight:800;font-size:clamp(9px,.72vw,14px);letter-spacing:.1em}
#controls,#sections{position:fixed;z-index:50;opacity:.06;transition:.18s ease}#controls:hover,#sections:hover{opacity:1}#controls{right:18px;bottom:16px;display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;background:rgba(6,8,18,.88);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px)}#controls button{width:34px;height:34px;border:0;border-radius:50%;color:#fff;background:#1a1f37;cursor:pointer}#counter{min-width:62px;text-align:center;font-size:12px;color:#b5bbd2}#sections{left:18px;bottom:16px;display:flex;gap:6px;padding:7px;border-radius:999px;background:rgba(6,8,18,.88);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px)}#sections button{border:0;border-radius:999px;padding:8px 12px;background:transparent;color:#969ebc;cursor:pointer;font-size:12px}#sections button.active{background:#242a47;color:#fff}
@media(max-width:900px){#stage{padding:1.5vh 1vw}.slide{width:98vw}.h1{font-size:clamp(28px,7vw,52px)}.h2{font-size:clamp(24px,5vw,42px)}#sections{display:none}}
@page{size:A4 landscape;margin:0}@media print{html,body{overflow:visible;background:#fff}#controls,#sections{display:none}#stage{display:block;padding:0;width:auto;height:auto}.slide{width:297mm;height:210mm;aspect-ratio:auto;box-shadow:none;border-radius:0;page-break-after:always}}

/* Physical device presentation frames */
.device-phone{position:relative;display:inline-flex;align-items:center;justify-content:center;width:auto;height:min(64vh,520px);padding:9px;border-radius:38px;background:linear-gradient(145deg,#2b2e36 0%,#090a0f 35%,#161923 100%);border:1px solid rgba(255,255,255,.16);box-shadow:0 28px 55px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.035);overflow:hidden;flex:0 0 auto}
.device-phone::before{content:"";position:absolute;left:-3px;top:22%;width:3px;height:11%;border-radius:3px 0 0 3px;background:#2d3139;box-shadow:0 38px 0 #2d3139}
.device-phone::after{content:"";position:absolute;right:-3px;top:29%;width:3px;height:16%;border-radius:0 3px 3px 0;background:#2d3139}
.device-phone-island{position:absolute;z-index:4;top:13px;left:50%;transform:translateX(-50%);width:26%;height:17px;background:#05060a;border-radius:999px;box-shadow:0 1px 0 rgba(255,255,255,.05)}
.device-phone .device-screen{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:29px;box-shadow:none;background:#050611}
.phone-row .device-phone{height:min(55vh,450px);padding:7px;border-radius:32px}
.phone-row .device-phone.featured{height:min(61vh,495px);transform:translateY(-1.5%)}
.phone-row .device-phone-island{top:10px;height:14px}

.device-laptop{position:relative;width:min(100%,760px);display:flex;flex-direction:column;align-items:center;justify-content:center;filter:drop-shadow(0 24px 34px rgba(0,0,0,.48));transform:perspective(1200px) rotateX(.2deg)}
.laptop-lid{position:relative;width:92%;padding:9px 9px 11px;border-radius:15px 15px 9px 9px;background:linear-gradient(145deg,#383b43,#101117 55%,#242731);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.laptop-camera{position:absolute;z-index:3;top:3px;left:50%;width:5px;height:5px;transform:translateX(-50%);background:#07080c;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.laptop-screen{width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#050611;box-shadow:0 0 0 1px rgba(255,255,255,.035)}
.laptop-screen .device-screen{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;border-radius:0;background:#050611}
.laptop-base{position:relative;width:100%;height:18px;margin-top:-1px;background:linear-gradient(#b7bbc2,#737982 38%,#484e57 62%,#9da2aa);clip-path:polygon(4% 0,96% 0,100% 73%,97% 100%,3% 100%,0 73%);box-shadow:inset 0 1px rgba(255,255,255,.65)}
.laptop-base::after{content:"";position:absolute;left:46%;right:46%;top:0;height:5px;border-radius:0 0 5px 5px;background:#626873;box-shadow:inset 0 1px rgba(0,0,0,.35)}
.device-laptop.hero-laptop{width:min(76%,900px)}
.device-laptop.hero-laptop .laptop-screen{width:100%}

/* Map marker legend uses the exact category marker artwork + canonical category colors */
.map-slide{grid-template-columns:1.16fr .84fr;gap:3%}
.map-slide .copy{justify-content:flex-start;padding-top:1.5%}
.map-slide .lead{max-width:92%;font-size:clamp(12px,1.05vw,18px)}
.marker-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 9px;margin-top:3%;max-width:96%;align-content:start}
.marker-item{display:grid;grid-template-columns:30px 9px minmax(0,1fr);align-items:center;gap:7px;min-height:38px;padding:5px 8px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(10,13,28,.72)}
.marker-item img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.35))}
.marker-item .marker-dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 12px currentColor}
.marker-item b{font-size:clamp(9px,.76vw,13px);line-height:1.12;color:#e8eaf5;white-space:normal}
.map-phone .device-phone{height:min(66vh,535px)}

@media(max-width:900px){.marker-legend{gap:4px}.marker-item{grid-template-columns:24px 7px 1fr;padding:4px 6px}.marker-item img{width:24px;height:24px}.device-phone{height:min(61vh,440px)}.device-laptop{width:100%}}
