@font-face{font-family:Lilita;src:url('fonts/LilitaOne-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Outfit;src:url('fonts/Outfit.ttf') format('truetype');font-display:swap}
:root{--ink:#112f40;--cream:#fff4d9;--amber:#ffcd55;--showcase-gap:clamp(28px,5vh,48px);color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{height:100svh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#89d9e4 url('art/sky.webp') center bottom/cover no-repeat;color:var(--ink);padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));font-family:Outfit,system-ui,sans-serif}
.showcase{min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--showcase-gap);padding:0 0 12px}
.masthead{display:flex;align-items:center;justify-content:center;gap:20px;flex:none}
.brand{display:flex;align-items:center;justify-content:center;gap:20px}
.app-icon{width:clamp(48px,9vh,84px);height:auto;border:3px solid var(--ink);border-radius:22%;box-shadow:3px 5px 0 var(--ink)}
h1{margin:0;white-space:nowrap;color:var(--cream);font:clamp(38px,5.8vw,80px)/.95 Lilita,sans-serif;letter-spacing:-.025em;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);transform:rotate(-2deg)}
h1 span+span{color:var(--amber)}
.baron{position:relative;width:240px;height:150px;flex:none;pointer-events:none}
.baron img{position:absolute;width:340px;height:255px;max-width:none;left:-43px;top:-55px;filter:drop-shadow(0 12px 9px #112f4033);transform:rotate(-8deg)}
.demo-frame{position:relative;flex:none;width:min(848px,90%,calc((100dvh - 330px - 2*var(--showcase-gap))*20/9));padding:10px;border:3px solid #566d79;border-radius:46px;background:#090f16;box-shadow:0 0 0 2px #102632,inset 0 0 0 2px #263644,0 14px 0 -4px #112f4099,0 22px 35px #112f4033}
.demo-frame::before,.demo-frame::after{content:"";position:absolute;top:-6px;height:3px;background:#243c49;border-radius:3px;pointer-events:none}.demo-frame::before{left:19%;width:8%}.demo-frame::after{left:29%;width:5%}
.phone-screen{position:relative;overflow:hidden;border-radius:34px;background:#080d13}
video{display:block;width:100%;height:auto;aspect-ratio:20/9;object-fit:contain;background:#080d13}
video:focus-visible{outline:4px solid var(--amber);outline-offset:-5px}
.camera-island{position:absolute;top:50%;left:12px;transform:translateY(-50%);width:19px;height:94px;border-radius:18px;background:#010205;box-shadow:0 0 0 1px #17222d;pointer-events:none}
.camera-island::after{content:"";position:absolute;left:6px;top:13px;width:7px;height:7px;border-radius:50%;background:#182a40;box-shadow:inset 0 0 0 2px #0d1723}
.stores{display:flex;justify-content:center;gap:14px;flex:none}
.store-link{display:flex;align-items:center;justify-content:center;gap:11px;min-width:170px;height:52px;padding:0 22px;border:2px solid #496472;border-radius:13px;background:#d8e9e9e6;color:#496472;font-size:19px;font-weight:650;text-decoration:none;white-space:nowrap;cursor:not-allowed;user-select:none;box-shadow:0 3px 0 #49647266}
.store-link svg{width:24px;height:25px;fill:currentColor;flex:none}
footer{display:grid;gap:6px;text-align:center;font-size:13px;line-height:1.4;font-weight:550;color:var(--ink);text-shadow:0 1px 3px var(--cream),0 0 6px var(--cream);padding-top:10px}
.legal-links{display:flex;justify-content:center;gap:20px}.legal-links a{color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.legal-links a:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
@media(max-width:700px){body{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.masthead{flex-direction:column;gap:8px}.brand{gap:13px}.app-icon{width:52px}h1{font-size:clamp(32px,8.7vw,58px)}.baron{width:210px;height:122px}.baron img{width:300px;height:225px;left:-38px;top:-52px}.demo-frame{padding:7px;border-width:2px;border-radius:25px;width:min(92%,calc((100dvh - 330px)*20/9))}.phone-screen{border-radius:17px}.camera-island{left:6px;width:10px;height:45px}.camera-island::after{width:4px;height:4px;left:3px;top:7px}.stores{gap:10px}.store-link{min-width:0;height:46px;padding:0 13px;gap:8px;font-size:16px;border-radius:11px}.store-link svg{width:21px;height:22px}footer{font-size:12px}}
@media(max-height:500px) and (min-width:701px){body{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.showcase{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.5fr);grid-template-rows:minmax(0,1fr) auto;gap:24px 40px;padding-bottom:6px;width:min(1120px,100%);justify-self:center}.masthead{grid-column:1;grid-row:1;flex-direction:column;gap:8px;align-self:end}.brand{gap:11px}.app-icon{width:40px;border-width:2px}h1{font-size:32px;text-shadow:0 3px 0 var(--ink)}.baron{width:190px;height:108px}.baron img{width:270px;height:202.5px;left:-34px;top:-48px}.demo-frame{grid-column:2;grid-row:1/3;width:88%;justify-self:center;padding:7px;border-width:2px;border-radius:27px;align-self:center}.phone-screen{border-radius:19px}.camera-island{left:7px;width:12px;height:58px}.camera-island::after{width:4px;height:4px;left:4px;top:8px}.stores{grid-column:1;grid-row:2;align-self:start;gap:8px;margin-bottom:22px}.store-link{height:40px;min-width:0;padding:0 12px;gap:7px;font-size:14px;border-radius:10px}.store-link svg{width:18px;height:20px}footer{font-size:11px;padding-top:6px}}
@media(max-height:650px) and (max-width:700px){.showcase{gap:24px}.masthead{gap:0}.baron{height:96px;width:170px}.baron img{width:250px;height:187.5px;left:-33px;top:-43px}.demo-frame{width:min(92%,calc((100dvh - 305px)*20/9))}}