@font-face{font-family:"Fira Sans";src:url("/fira.ttf") format("truetype");font-style:normal;font-weight:900;font-display:swap}
@font-face{font-family:Inter;src:url("/inter.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--blue:#262d8d;--white:#fafafa;--orange:#ff7903;--glass:#ffffff33}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blue);color:var(--white);font:400 15px/1.4 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
h1,h2{font-family:"Fira Sans",Arial,sans-serif;font-weight:900;text-transform:uppercase}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #fff;outline-offset:5px}
.hero{overflow:hidden;background:linear-gradient(180deg,oklab(71.1% .041 -.129),oklab(36.1% .007 -.156))}
.hero-stage{position:relative;container-type:inline-size;width:100%;max-width:430px;height:758px;margin-inline:auto;overflow:hidden}
.brand-mark{position:absolute;z-index:3;top:16px;left:50%;display:block;width:118px;height:38px;transform:translateX(-50%);object-fit:contain}
.hello{position:absolute;z-index:2;top:88px;left:0;width:100%;text-align:center;font-size:24px;line-height:19px}
.hero h1{position:absolute;z-index:2;top:119px;left:16px;right:15px;text-align:center;font-size:96px;line-height:92px;letter-spacing:.01em;background:linear-gradient(180deg,#fff 47.5%,#fff9);background-clip:text;color:transparent}
.hero-product{position:absolute;z-index:1;top:291px;left:0;width:100%;height:395px}
.hero-product img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-product:after{position:absolute;right:2.5%;bottom:0;left:4.7%;height:94px;background:linear-gradient(180deg,transparent,oklab(40.9% .012 -.153));content:""}
.bubble{position:absolute;z-index:2;padding:8px 16px;border-radius:999px;background:var(--glass);backdrop-filter:blur(40px);font-size:15px;line-height:19px;white-space:nowrap}
.bubble-one{top:354px;left:27px;font-size:16px}
.bubble-two{top:544px;right:20px}
.bubble-three{top:603px;left:18px}
.hero-action{position:absolute;z-index:3;top:662px;left:0;width:100%;text-align:center}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:24px 52px;border:0;border-radius:30px;background:var(--orange);box-shadow:inset 0 1px 18px 2px #ffeddb80,inset 0 2px #ffffff8c,0 15px 42px #f4753126,0 6px 9px #f4753126,0 4px 10px #0028360d;outline:.5px solid #f47531;outline-offset:-.5px;color:#fff;font:600 16px/16px Inter,Arial,sans-serif;white-space:nowrap;transition:transform .2s,background-color .2s}
.button:hover{transform:translateY(-2px);background:#ff8923}
.examples{padding:32px 0;background:var(--blue)}
.card-list{display:flex;flex-direction:column;gap:16px;width:100%;max-width:360px;margin-inline:auto;padding-inline:16px}
.feature-card{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-radius:56px;background:var(--glass);backdrop-filter:blur(40px)}
.feature-image{display:block;flex:none;width:100%;object-fit:cover;object-position:50%}
.feature-image-coffee{height:210px}
.feature-image-game{height:276px}
.feature-image-ad{height:218px}
.card-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;background:var(--glass);backdrop-filter:blur(40px);text-align:center}
.card-copy{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.card-copy h2,.mini-copy strong{align-self:stretch;background:linear-gradient(137deg,#fff 53%,#ffffffe6 69.26%);background-clip:text;color:transparent;font:900 25.85px/32px "Fira Sans",Arial,sans-serif;text-transform:uppercase}
.card-copy p,.mini-copy span{color:#fafafa;font:400 15px/18.647px Inter,Arial,sans-serif}
.card-button{align-self:stretch;min-height:56px;padding:20px 24px;border-radius:36px}
.feature-card:nth-of-type(2) .card-button{border-radius:30px}
.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini-card{display:flex;min-width:0;flex-direction:column;align-items:center;gap:16px;overflow:hidden;padding:16px;border-radius:40px;background:var(--glass);backdrop-filter:blur(40px);text-align:center;transition:transform .2s,opacity .7s}
.mini-card:hover{transform:translateY(-3px)}
.mini-card>img{display:block;flex:none;width:100%;height:132px;object-fit:cover;object-position:center}
.mini-card:first-child>img{border-radius:24px}
.mini-copy{display:flex;min-height:59px;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.mini-copy strong{font-weight:900}
.mini-action{display:flex;flex:none;align-items:center;justify-content:center;width:100%;height:56px;border-radius:24px;background:var(--orange);box-shadow:inset 0 1px 18px 2px #ffeddb80,inset 0 2px #ffffff8c,0 15px 42px #f4753126,0 6px 9px #f4753126;outline:.5px solid #f47531;outline-offset:-.5px}
.mini-action svg{display:block;flex:none}
.skip-link{position:fixed;z-index:10;top:-100px;left:16px;padding:12px 20px;background:#fff;color:var(--blue)}
.skip-link:focus{top:16px}
.reveal{transition:opacity .7s,transform .7s}
.reveal.awaiting{transform:translateY(20px);opacity:0}
.intro{animation:appear .9s both}
.hero-product.intro{animation-delay:.15s}
.bubble.intro{animation-delay:.35s}
.hero-action.intro{animation-delay:.25s}
@keyframes appear{from{translate:0 16px;opacity:0}to{translate:0 0;opacity:1}}
@supports(width:1cqw){
  .hero-stage{height:210.56cqw}
  .brand-mark{top:4.44cqw;width:32.78cqw;height:10.56cqw}
  .hello{top:24.44cqw;font-size:6.67cqw;line-height:5.28cqw}
  .hero h1{top:33.06cqw;left:4.44cqw;right:4.17cqw;font-size:26.67cqw;line-height:25.56cqw}
  .hero-product{top:80.83cqw;height:109.72cqw}
  .hero-product:after{height:26.11cqw}
  .bubble{padding:2.22cqw 4.44cqw;font-size:4.17cqw;line-height:5.28cqw}
  .bubble-one{top:98.33cqw;left:7.5cqw;font-size:4.44cqw}
  .bubble-two{top:151.11cqw;right:5.56cqw}
  .bubble-three{top:167.5cqw;left:5cqw}
  .hero-action{top:183.89cqw}
  .button{min-height:17.78cqw;padding:6.67cqw 14.44cqw;border-radius:8.33cqw;font-size:4.44cqw;line-height:4.44cqw}
  .card-list{gap:4.44cqw;padding-inline:4.44cqw}
  .feature-card{border-radius:15.56cqw}
  .feature-image-coffee{height:58.33cqw}
  .feature-image-game{height:76.67cqw}
  .feature-image-ad{height:60.56cqw}
  .card-body{gap:6.67cqw;padding:6.67cqw}
  .card-copy{gap:2.22cqw}
  .card-copy h2,.mini-copy strong{font-size:7.18cqw;line-height:8.89cqw}
  .card-copy p,.mini-copy span{font-size:4.17cqw;line-height:5.18cqw}
  .card-button{min-height:15.56cqw;padding:5.56cqw 6.67cqw;border-radius:10cqw}
  .mini-grid{gap:2.22cqw}
  .mini-card{gap:4.44cqw;padding:4.44cqw;border-radius:11.11cqw}
  .mini-card>img{height:36.67cqw}
  .mini-card:first-child>img{border-radius:6.67cqw}
  .mini-copy{min-height:16.39cqw;gap:2.22cqw}
  .mini-action{height:15.56cqw;border-radius:6.67cqw}
  .mini-action svg{width:3.06cqw;height:5cqw}
}
@media(min-width:601px){
  .hero-stage{max-width:1440px;height:900px}
  .brand-mark{top:28px;width:118px;height:38px}
  .hello{top:98px;font-size:28px;line-height:24px}
  .hero h1{top:142px;left:20px;right:20px;font-size:clamp(100px,12vw,170px);line-height:.92;letter-spacing:-.025em}
  .hero-product{top:250px;left:50%;width:min(62vw,600px);height:620px;transform:translateX(-50%)}
  .hero-product:after{left:0;right:0;height:120px}
  .bubble-one{top:348px;left:calc(50% - 330px)}
  .bubble-two{top:565px;right:calc(50% - 320px);left:auto}
  .bubble-three{top:684px;left:calc(50% - 315px)}
  .hero-action{top:790px}
  .button{min-height:64px;padding:24px 52px;border-radius:30px;font-size:16px;line-height:16px}
  .examples{padding:48px 24px 64px}
  .card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%;max-width:1040px;padding:0}
  .feature-card{border-radius:44px}
  .feature-image-coffee{height:clamp(210px,22vw,300px)}
  .feature-image-game{height:clamp(276px,28vw,360px)}
  .mini-grid{grid-column:1/-1;gap:24px}
  .mini-card{padding:24px;border-radius:40px}
  .mini-card>img{height:180px}
  .mini-card:first-child>img{border-radius:24px}
  .mini-copy{min-height:59px;gap:8px}
  .mini-copy strong,.card-copy h2{font-size:30px;line-height:36px}
  .mini-copy span,.card-copy p{font-size:16px;line-height:22px}
  .mini-action{height:64px;border-radius:24px}
  .mini-action svg{width:11px;height:18px}
  .feature-card:last-child{grid-column:1/-1}
  .feature-image-ad{height:clamp(218px,26vw,400px)}
  .card-body{gap:24px;padding:28px}
  .card-button{min-height:56px;padding:20px 32px}
}
@media(min-width:601px) and (max-width:900px){
  .hero-stage{height:860px}
  .hero h1{top:145px;font-size:108px}
  .hero-product{top:270px;width:min(72vw,500px);height:560px}
  .hero-action{top:760px}
  .bubble-one{top:380px;left:calc(50% - 270px)}
  .bubble-two{top:570px;right:calc(50% - 270px)}
  .bubble-three{top:650px;left:calc(50% - 270px)}
  .card-list{max-width:760px}
  .feature-image-coffee{height:220px}
  .feature-image-game{height:280px}
  .mini-card>img{height:150px}
  .feature-image-ad{height:260px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal.awaiting{transform:none;opacity:1}
}