:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#fff;background:#020b2b;font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}
html{height:100vh;height:var(--app-height,100svh);overflow:hidden;overflow:clip;overscroll-behavior:none;overflow-anchor:none}
body{position:relative;margin:0;width:100%;height:100%;overflow:hidden;overflow:clip;overscroll-behavior:none;overflow-anchor:none}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid #bad0ff;outline-offset:5px}
.landing{--phone-width:min(37vw,73dvh);position:relative;isolation:isolate;width:100%;height:100vh;height:var(--app-height,100svh);overflow:hidden;background:radial-gradient(ellipse at 49% 110%,#075aee 0%,#0733a3 23%,#051b63 49%,#020b2c 82%)}
.ambient{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 0 50%,#0455f6aa,transparent 42%),radial-gradient(ellipse at 100% 45%,#084ff4aa,transparent 41%);pointer-events:none}
.device{position:absolute;z-index:-1;bottom:0;width:var(--phone-width);height:100%;pointer-events:none}
.device img{position:absolute;bottom:0;display:block;width:100%;height:auto}
.device-left{left:-1.5%}
.device-right{right:-1.5%}
/* This cutout has a 90px transparent tail below the phone. Keep the visible
   phone and glove flush with the viewport, at their natural aspect ratio. */
.device-right img{bottom:calc(var(--phone-width) * -.083);clip-path:inset(0 0 6.2% 0)}
.brand-block{position:absolute;left:50%;top:27%;transform:translateX(-50%);width:40%;text-align:center}
.brand-icon{display:block;width:clamp(80px,14dvh,135px);height:clamp(80px,14dvh,135px);object-fit:contain;margin:0 auto 14px}
h1{font-size:clamp(23px,2.3vw,38px);font-weight:400;letter-spacing:.22em;line-height:1.2;margin:0 0 8px;padding-left:.22em;white-space:nowrap}
.tagline{margin:0;color:#bfc9ed;font-size:clamp(15px,1.25vw,21px);line-height:1.4}
.downloads{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px;height:62px}
.store-badge{appearance:none;display:block;flex:none;background:none;border:0;padding:0;margin:0;opacity:1;cursor:default;height:62px}
.store-badge img{display:block;width:auto;height:100%;max-width:none}
.apple-badge{height:52px}
.google-badge{height:77px;margin-left:-10px;margin-right:-10px}
.legal{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:42%;text-align:center;color:#c0cbee}
.legal nav{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.legal a{font-size:14px;line-height:1.5;padding:4px 0}
.legal a:hover{color:white}
.legal small{display:block;font-size:12px;margin-top:5px;color:#8fa9df}
@media(max-width:900px) and (orientation:portrait){
 .landing{display:flex;flex-direction:column;align-items:center;padding-top:max(20px,env(safe-area-inset-top));background:radial-gradient(ellipse at 50% 90%,#0861f7 0%,#063bad 32%,#03164c 64%,#020b2b 100%)}
 .brand-block{position:relative;top:auto;left:auto;transform:none;width:100%;padding:0 16px;flex:none;order:1}
 .brand-icon{width:clamp(74px,12dvh,106px);height:clamp(74px,12dvh,106px);margin-bottom:10px}
 h1{font-size:clamp(23px,5.7vw,32px);letter-spacing:.18em;margin-bottom:7px}
 .tagline{font-size:clamp(15px,3.6vw,19px)}
 .downloads{margin-top:24px;gap:8px;height:50px}
 .apple-badge{height:45px}
 .google-badge{height:67px;margin-left:-10px;margin-right:-10px}
 .legal{position:relative;top:auto;bottom:auto;left:auto;transform:none;width:100%;padding:0 12px;margin-top:18px;flex:none;order:2;z-index:2}
 .legal nav{gap:18px}
 .legal a{font-size:13px;padding:4px 0}
 .legal small{font-size:12px;margin-top:4px}
 .device-left{display:none}
 .device-right{position:relative;top:auto;bottom:auto;left:auto;right:auto;order:3;flex:1;min-height:0;height:auto;width:min(112%,580px);margin-top:12px;z-index:-1}
 .device-right img{position:absolute;left:0;top:0;bottom:auto;width:100%;height:auto;clip-path:inset(0 0 6.2% 0)}
 .ambient{background:radial-gradient(ellipse at 50% 90%,#0471ff88,transparent 65%)}
}
@media(max-width:360px) and (orientation:portrait){
 h1{font-size:22px}.downloads{gap:6px}.apple-badge{height:40px}.google-badge{height:59px}.legal nav{gap:14px}
}
@media(orientation:portrait) and (max-height:650px){
 .landing{padding-top:max(12px,env(safe-area-inset-top))}.brand-icon{width:70px;height:70px;margin-bottom:5px}h1{font-size:22px}.tagline{font-size:15px}.downloads{margin-top:17px;height:44px}.apple-badge{height:40px}.google-badge{height:59px}.legal{margin-top:12px}.device-right{margin-top:4px}
}
@media(orientation:landscape) and (max-height:600px){
 .landing{--phone-width:min(31vw,68dvh)}.brand-block{top:13%;width:43%}.brand-icon{width:18dvh;height:18dvh;margin-bottom:6px}h1{font-size:clamp(20px,2.8vw,30px)}.tagline{font-size:14px}.downloads{margin-top:18px;gap:8px;height:44px}.apple-badge{height:40px}.google-badge{height:59px}.legal{bottom:max(12px,env(safe-area-inset-bottom));width:45%}.legal nav{gap:14px}.legal a{font-size:13px}.legal small{font-size:12px}
}
/* Directional light behind the devices, with a darker central plane. */
.landing{background:radial-gradient(ellipse at 50% 100%,#073697 0%,#041846 40%,#020a25 80%)}
.ambient{background:radial-gradient(ellipse at 13% 24%,#096eff80 0%,#0640d04d 17%,transparent 40%),radial-gradient(ellipse at 86% 20%,#147dff80 0%,#074bde4d 16%,transparent 40%),radial-gradient(ellipse at 50% 76%,#074ccc33,transparent 55%)}
.ambient::before{content:"";position:absolute;inset:-12%;background:linear-gradient(113deg,transparent 5%,#0061ff08 9%,#087cff66 13%,#0355ff1f 19%,transparent 29%),linear-gradient(253deg,transparent 8%,#0b68ff08 13%,#147dff55 17%,#0243e51a 23%,transparent 34%);filter:blur(26px);opacity:.85}
.ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 34%,#02092266 0%,transparent 42%),radial-gradient(ellipse at 50% 52%,transparent 30%,#01071b44 75%,#01061acc 110%)}
.device::before{content:"";position:absolute;z-index:0;bottom:-10%;left:-16%;width:132%;height:110%;background:radial-gradient(ellipse at 49% 26%,#0574ff80 0%,#0754fa40 24%,transparent 61%);filter:blur(28px)}
.device::after{content:"";position:absolute;z-index:0;top:calc(100% - var(--phone-width) * 1.22);left:12%;width:76%;height:22%;background:radial-gradient(ellipse at 50% 45%,#42baff88 0%,#006aff55 30%,transparent 72%);filter:blur(20px)}
.device img{z-index:1;filter:drop-shadow(0 -2px 6px #249fffaa) drop-shadow(0 0 22px #006eff99) drop-shadow(0 0 52px #0645ff66)}
.brand-icon{filter:drop-shadow(0 0 20px #276eff22)}
@media(max-width:900px) and (orientation:portrait){
 .landing{background:radial-gradient(ellipse at 50% 82%,#062f86 0%,#041742 44%,#020a25 85%)}
 .ambient{background:radial-gradient(ellipse at 50% 63%,#087cff77 0%,#084cce33 28%,transparent 60%),radial-gradient(ellipse at 15% 88%,#004bef33,transparent 45%)}
 .ambient::before{inset:0;background:linear-gradient(122deg,transparent 25%,#0765ff22 37%,#087cff44 44%,transparent 58%);filter:blur(28px);opacity:.75}
 .ambient::after{background:radial-gradient(ellipse at 50% 64%,transparent 22%,#02082155 72%,#010617bb 112%)}
 .device-right::before{top:-8%;bottom:auto;left:-15%;width:130%;height:130%;background:radial-gradient(ellipse at 49% 19%,#178affaa 0%,#075bff66 23%,transparent 61%);filter:blur(24px)}
 .device-right::after{top:-2%;left:10%;width:80%;height:45%;background:radial-gradient(ellipse at 50% 24%,#48baff88 0%,#006aff55 35%,transparent 75%);filter:blur(18px)}
 .device img{filter:drop-shadow(0 -2px 5px #42b0ffbb) drop-shadow(0 0 18px #006eff99) drop-shadow(0 0 38px #0645ff66)}
}
/* Cloud texture supplies the atmospheric depth; CSS light stays localized. */
.landing{background:radial-gradient(ellipse at 50% 100%,#03215b 0%,#020a25 75%)}
.ambient{background:#020a25 url('/assets/atmosphere-v8.webp') center center/cover no-repeat;opacity:.88;filter:none;inset:0}
.ambient::before{display:none}
.ambient::after{background:radial-gradient(ellipse at 50% 38%,#02092233 0%,transparent 42%),radial-gradient(ellipse at 50% 50%,transparent 40%,#01071b66 100%)}
.device::before{opacity:.68}
.device::after{opacity:.65}
.device img{filter:drop-shadow(0 -2px 5px #269cff99)}
.device-right img{filter:none;clip-path:inset(3.3% 0 6.2% 0)}
/* Display the original symbol directly from the supplied brand lockup.
   The containing window crops it; the image is never stretched. */
.brand-icon{position:relative;overflow:hidden;width:clamp(68px,11.89dvh,114.62px);height:clamp(80px,14dvh,135px);object-fit:unset}
.brand-original{display:block;width:675%;height:auto;max-width:none}
@media(max-width:900px) and (orientation:portrait){
 .landing{background:#020a25}
 .ambient{background:#020a25 url('/assets/atmosphere-v8.webp') 23% center/auto 100% no-repeat;opacity:.82;filter:none}
 .ambient::after{background:linear-gradient(to bottom,#020a25b3 0%,#020a2566 30%,transparent 63%),radial-gradient(ellipse at 50% 64%,transparent 32%,#02082166 100%)}
 .brand-icon{width:clamp(43.981px,7.133dvh,63px);height:clamp(51.8px,8.4dvh,74.2px)}
 .device img{filter:drop-shadow(0 -2px 5px #269cff99)}
 .device-right img{filter:none;clip-path:inset(3.3% 0 6.2% 0)}
}
@media(orientation:portrait) and (max-height:650px){.brand-icon{width:41.601px;height:49px}}
@media(orientation:landscape) and (max-height:600px){.brand-icon{width:15.28dvh;height:18dvh}}
/* Mobile-first atmosphere and the second requested logo size reduction. */
@media(max-width:900px) and (orientation:portrait){
 .ambient{opacity:1;background-position:23% top}
 .ambient::after{background:linear-gradient(to bottom,#020a2573 0%,#020a2533 30%,transparent 63%),radial-gradient(ellipse at 50% 64%,transparent 42%,#0208214d 100%)}
 .brand-icon{width:clamp(35.1848px,5.7064dvh,50.4px);height:clamp(41.44px,6.72dvh,59.36px)}
}
@media(orientation:portrait) and (max-height:650px){.brand-icon{width:33.2808px;height:39.2px}}
@media(max-width:900px) and (orientation:landscape) and (max-height:600px){.brand-icon{width:12.224dvh;height:14.4dvh}}

@media(max-width:900px) and (orientation:portrait){.brand-icon{width:clamp(31.66632px,5.13576dvh,45.36px);height:clamp(37.296px,6.048dvh,53.424px);top:4px}}
@media(max-width:900px) and (orientation:portrait) and (max-height:650px){.brand-icon{width:29.95272px;height:35.28px}}
@media(max-width:900px) and (orientation:landscape) and (max-height:600px){.brand-icon{width:11.0016dvh;height:12.96dvh;top:4px}}
