@font-face{font-family:"Aeonik TRIAL";src:url("/portfolio/fonts/AeonikTRIAL-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Aeonik TRIAL";src:url("/portfolio/fonts/AeonikTRIAL-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Aeonik TRIAL";src:url("/portfolio/fonts/AeonikTRIAL-Bold.otf") format("opentype");font-weight:700;font-display:swap}
:root{--pink:#f91748;--ink:#fff;--sans:"Aeonik TRIAL","Helvetica Neue",Arial,sans-serif;--serif:"Cormorant Infant",Georgia,serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#0f171b}body{margin:0;overflow-x:hidden;color:var(--ink);font-family:var(--sans);background:#0f171b}a{color:inherit;text-decoration:none}img{display:block}.case-nav{position:fixed;z-index:1000;top:40px;left:max(calc((100vw - 1920px * var(--case-scale,1))/2 + 70px * var(--case-scale,1)),3.65vw);right:max(calc((100vw - 1920px * var(--case-scale,1))/2 + 70px * var(--case-scale,1)),3.65vw);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}.case-nav>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:7px;width:max-content}.brand img:first-child{width:29px}.brand img:last-child{width:93px}.case-nav nav{display:flex;padding:7px;border:1px solid rgba(255,255,255,.96);border-radius:100px;background:rgba(255,243,243,.5);backdrop-filter:blur(18px)}.case-nav nav a{padding:8px 12px;border-radius:34px;color:#333;font:400 16px/1 var(--serif);transition:.25s}.case-nav nav a.active{color:var(--pink);background:#fff;font-weight:700}.nav-actions{justify-self:end;display:flex;align-items:center;gap:24px}.home-link{display:flex;align-items:center;gap:8px;padding:13px 20px;border-radius:29px;background:var(--pink);font:700 17px/1 var(--serif)}.home-link img{width:20px;height:20px;transform:rotate(180deg)}.language{display:flex;align-items:center;gap:4px;padding:2px 2px 2px 5px;border:0;border-radius:99px;color:#fff;background:var(--pink);font:700 16px/1 var(--serif);cursor:pointer}.language i{width:16px;height:16px;border-radius:50%;background:#fff}.language:focus-visible{outline:2px solid #fff;outline-offset:3px}.reading-progress{position:fixed;z-index:999;left:0;top:0;width:100%;height:3px;background:rgba(249,23,72,.08)}.reading-progress i{display:block;width:var(--progress,0%);height:100%;background:var(--pink);box-shadow:0 0 12px rgba(249,23,72,.55)}
.ai-screen{position:relative;width:1920px;height:1080px;min-height:1080px;margin-inline:auto;overflow:hidden;zoom:var(--case-scale,1)}.cover{background:#160d0d}.cover-art{position:absolute;left:0;top:0;width:1920px;height:941px;object-fit:cover}.cover-band{position:absolute;left:0;right:0;bottom:0;height:137px;padding:24px 70px;display:flex;flex-direction:column;gap:22px;background:var(--pink)}.cover-band>div{display:flex;align-items:center;gap:10px}.cover-band i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#111;background:#fff;font:normal 23px/1 sans-serif}.cover-band strong{font:700 31px/1 var(--sans)}.cover-band p{margin:0;font:400 24px/1.15 var(--sans)}
.continuous-story{position:relative;background:#0f171b url("assets/ai-case-bg-3-8.webp") center top/1920px 6543px no-repeat}.continuous-story .ai-screen{background:transparent}.screen-head{position:absolute;z-index:5;left:70px;top:115px;width:1780px}.screen-head h2{display:flex;align-items:center;gap:10px;margin:0;font:700 31px/1 var(--sans)}.screen-head h2 i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#111;background:#fff;font:normal 23px/1 sans-serif}.screen-head>p{margin:22px 0 0;font:400 24px/1.15 var(--sans)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .9s var(--ease)}.reveal.is-visible{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.compare-copy{position:absolute;left:70px;top:203px;width:604px}.compare-copy p{margin:0 0 42px;width:544px;font:400 24px/1.13 var(--sans)}.compare-copy p:nth-child(2){width:520px}.compare-copy p:nth-child(3){width:604px}.phone-compare{position:absolute;left:796px;top:135px;width:982px;display:flex;justify-content:space-between}.phone-compare figure{width:411.34px;margin:0;display:flex;flex-direction:column;align-items:center;gap:20px}.phone-compare figcaption{box-sizing:border-box;padding:0 20px;border-radius:30px;color:#777;background:#f2f2f2;font:500 30px/36px var(--serif)}.phone-compare figure:last-child figcaption{color:var(--pink);background:#ffe6ec}.device{position:relative;width:411.34px;height:850px;overflow:hidden;border-radius:77px;background:#f2f5ff}.device-screen{position:absolute;z-index:1;left:4.2%;top:1.55%;width:91.6%;height:96.4%;object-fit:fill;border-radius:60px}.device-screen.long{object-fit:cover;object-position:top}.device-frame{position:absolute;z-index:2;left:-55.54%;top:-1.07%;width:211.07%;height:102.14%;object-fit:fill;pointer-events:none}
.detail-column{position:absolute;top:186px;height:850px}.detail-column .device{position:absolute;left:0;top:0}.detail-left{left:70px;width:837px}.detail-right{left:1014px;width:837px}.detail-column .lower .device-screen.shifted{height:185%;object-position:50% 39%}.callouts{position:absolute;color:#fff}.left-callouts{left:491px;top:211px;width:345px}.right-callouts{left:491px;top:72px;width:345px}.callouts article{position:absolute;width:345px}.left-callouts article:nth-child(2){top:304px}.right-callouts article:nth-child(2){top:264px}.right-callouts article:nth-child(3){top:528px}.callouts b{display:block;color:var(--pink);font:700 24px/1.1 var(--sans)}.callouts p{margin:16px 0 0;font:400 24px/1.13 var(--sans)}.guide{position:absolute;z-index:4;width:113px;height:32px}.guide:before{content:"";position:absolute;left:0;top:15px;width:81px;border-top:3px dashed var(--pink)}.guide i{position:absolute;right:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 8px rgba(249,23,72,.12),0 0 24px rgba(249,23,72,.72)}.detail-left .g1{left:376px;top:203px}.detail-left .g2{left:376px;top:513px}.detail-right .g3{left:376px;top:184px}.detail-right .g4{left:376px;top:342px}.detail-right .g5{left:376px;top:615px}
.guide-panel{position:absolute;left:70px;top:254px;width:1780px;height:758px;border-radius:40px;background:#eff2ff;display:grid;place-items:center;color:#333}.guide-panel p{font:300 24px var(--sans)}.finale-devices{position:absolute;left:190px;top:-126px;width:1540px;height:1155px;object-fit:fill}.final-copy{position:absolute;left:0;right:0;bottom:90px;text-align:center}.final-copy h2{margin:0 0 28px;font:500 48px var(--serif)}.final-copy p{font:400 30px var(--serif)}.final-copy i{display:inline-block;width:10px;height:10px;margin:0 48px;border-radius:50%;background:#fff}

.guide-flow{position:absolute;left:70px;top:254px;width:1780px;height:758px;overflow:hidden;border-radius:40px;background:#eff2ff}.guide-flow img{position:absolute;left:-70px;top:-254px;width:1920px;height:1080px;max-width:none}.heatmap-copy{position:absolute;left:100px;top:302px;width:704px}.heatmap-copy h2{display:flex;align-items:center;gap:10px;margin:0 0 48px;font:700 31px/1 var(--sans)}.heatmap-copy h2 i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#111;background:#fff;font:normal 23px/1 sans-serif}.heatmap-copy p{margin:0 0 45px;font:400 24px/1.12 var(--sans)}.heatmap-phones{position:absolute;left:957px;top:155px;display:flex;gap:72px}.heatmap-phones img{width:429px;height:842px;object-fit:cover;border-radius:66px}.forecast{position:absolute;left:70px;top:254px;width:1230px;height:785px;padding:31px 48px;border-radius:48px;background:linear-gradient(125deg,rgba(17,25,29,.94),rgba(6,9,11,.94))}.forecast h3{margin:0 0 35px;font:700 31px/1 var(--sans)}.forecast-row{display:grid;grid-template-columns:216px 670px 102px;align-items:center;margin:0 0 22px;font-size:24px}.forecast-row>i{position:relative;height:12px;border-radius:8px;background:#f1f1f1;overflow:hidden}.forecast-row>i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill);border-radius:inherit;background:var(--pink)}.forecast-row b{color:var(--pink);font:300 31px/1 var(--sans);text-align:right}.forecast>p{margin:0 0 35px;font:400 23px/1.15 var(--sans)}.forecast-metrics{display:grid;grid-template-columns:262px 330px 1fr}.forecast-metrics strong{display:block;margin-bottom:8px;font:300 58px/1 var(--sans)}.forecast-metrics span{font:300 22px/1.15 var(--sans)}.verification-phone{position:absolute;left:1379px;top:205px;width:411px;height:850px;overflow:hidden;border-radius:77px}.verification-phone img:first-child{position:absolute;z-index:1;left:4.2%;top:1.55%;width:91.6%;height:96.4%;object-fit:cover;object-position:top;border-radius:60px}.verification-phone img:last-child{position:absolute;z-index:2;left:-55.54%;top:-1.07%;width:211.07%;height:102.14%;object-fit:fill}
@media(max-width:800px){.case-nav{top:14px;left:16px;right:16px;grid-template-columns:1fr auto}.case-nav nav,.language{display:none}.brand img:first-child{width:28px}.brand img:last-child{width:88px}.home-link{padding:10px 14px;font-size:12px}.ai-screen{width:100%;height:auto;min-height:100svh;zoom:1}.cover{min-height:calc(100vw * .563 + 128px)}.cover-art{width:100%;height:auto;aspect-ratio:3840/1882;object-fit:cover}.cover-band{top:calc(100vw * .4901);bottom:auto;height:auto;min-height:128px;padding:20px 22px;gap:14px}.cover-band strong{font-size:24px}.cover-band i{width:34px;height:34px}.cover-band p{font-size:15px;line-height:1.35}.continuous-story{background-size:auto 600svh}.structure-compare,.structure-detail{padding:92px 22px 60px}.screen-head{position:relative;left:auto;top:auto;width:auto}.screen-head h2{font-size:25px}.screen-head h2 i{width:34px;height:34px}.compare-copy{position:relative;left:auto;top:auto;width:auto;margin-top:48px}.compare-copy p,.compare-copy p:nth-child(n){width:auto;font-size:17px;line-height:1.4;margin-bottom:24px}.phone-compare{position:relative;left:auto;top:auto;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}.phone-compare figure{width:100%;gap:12px}.phone-compare figcaption{font-size:20px;line-height:30px}.device{width:100%;height:auto;aspect-ratio:411.34/850;border-radius:14vw}.structure-detail{min-height:210svh}.detail-column{position:relative;left:auto;top:auto;width:100%;height:900px;margin-top:45px}.detail-right{margin-top:40px}.detail-column .device{width:48%;border-radius:9vw}.callouts{left:54%;width:46%}.callouts article{width:100%}.callouts b,.callouts p{font-size:16px}.guide{display:none}.guide-page,.heatmap-page,.verification-page,.finale{min-height:100svh}.guide-panel{left:22px;right:22px;top:200px;width:auto;height:65svh}}

/* Figma checkpoint: the TO-BE article detail is intentionally a lower crop of the long screen. */
.detail-column .device.lower .device-screen.shifted{top:-570px;height:1572px;object-position:top}

/* Heatmap exports already contain both framed phones; split the two variants without duplicating frames. */
.heatmap-phones{left:957px;top:155px;width:887px;height:842px;display:block;overflow:hidden}.heatmap-phones img{position:absolute;top:0;left:0;width:887px;height:842px;object-fit:fill;border-radius:0}.heatmap-phones img:first-child{clip-path:inset(0 50% 0 0)}.heatmap-phones img:last-child{clip-path:inset(0 0 0 50%)}

.heatmap-phones img:only-child{clip-path:none}

/* Keep the high-resolution screens tucked beneath the exported device bezel. */
.device,.verification-phone{background:transparent;isolation:isolate}
.device-screen,.verification-phone img:first-child{left:3.7%;top:1.15%;width:92.6%;height:97.2%;border-radius:64px;clip-path:inset(0 round 64px);transform:translateZ(0)}
.detail-column .device.lower .device-screen.shifted{left:3.7%;width:92.6%;border-radius:64px;clip-path:inset(0 round 64px)}

/* Verification bars rise in sequence with a subtle brand-colour gradient. */
.forecast-row>i:after{background:linear-gradient(90deg,#ff4a74 0%,var(--pink) 48%,#ff8aa4 100%);box-shadow:0 0 14px rgba(249,23,72,.55);transform:scaleX(0);transform-origin:left;transition:transform 1.15s var(--ease);transition-delay:var(--bar-delay,0ms)}
.forecast.is-visible .forecast-row>i:after{transform:scaleX(1)}
.forecast-row:nth-of-type(2){--bar-delay:80ms}.forecast-row:nth-of-type(3){--bar-delay:150ms}.forecast-row:nth-of-type(4){--bar-delay:220ms}.forecast-row:nth-of-type(5){--bar-delay:290ms}.forecast-row:nth-of-type(6){--bar-delay:360ms}.forecast-row:nth-of-type(7){--bar-delay:430ms}.forecast-row:nth-of-type(8){--bar-delay:500ms}
.forecast-row b,.forecast-metrics strong{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.forecast-row>i:after{transform:none;transition:none}}