@font-face{font-family:'GT Haptik';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/gt-haptik/GT-Haptik-Regular.woff2') format('woff2')}
@font-face{font-family:'GT Haptik';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/gt-haptik/GT-Haptik-Regular-Oblique.woff2') format('woff2')}
@font-face{font-family:'GT Haptik';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/gt-haptik/GT-Haptik-Bold.woff2') format('woff2')}
@font-face{font-family:'GT Haptik';font-style:italic;font-weight:700;font-display:swap;src:url('/assets/fonts/gt-haptik/GT-Haptik-Bold-Oblique.woff2') format('woff2')}
@font-face{font-family:'GT Haptik';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/gt-haptik/GT-Haptik-Black.woff2') format('woff2')}
@font-face{font-family:'GT Haptik';font-style:italic;font-weight:900;font-display:swap;src:url('/assets/fonts/gt-haptik/GT-Haptik-Black-Oblique.woff2') format('woff2')}
:root{--accent:#fddb6b;--muted:#94969d;--bg:#000}
body{background:#000;font-family:'GT Haptik',Arial,sans-serif}
.reference-header{position:fixed;inset:0 0 auto;z-index:100;height:84px;border-bottom:1px solid #ffffff18;background:#000b;backdrop-filter:blur(16px)}
.reference-nav{max-width:1160px;margin:auto;height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.reference-nav .brand img{width:156px;height:auto}.reference-nav .nav-links{display:flex;gap:40px}.reference-nav .nav-links a{font-size:18px;color:#94969d;font-weight:500}.reference-nav .nav-links a:hover{color:white}
.reference-button{display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:16px 25px;border:1px solid #ffed9d;border-radius:13px;background:#fddb6b;color:#000!important;font-size:18px;font-weight:600;line-height:1.4;text-decoration:none;transition:background .2s,transform .2s}
.reference-button:hover{background:#ffe99d;transform:translateY(-2px)}.reference-nav .reference-button{min-height:58px;padding:15px 20px;font-size:16px}
.reference-hero{position:relative;margin:84px auto 0;min-height:990px;overflow:hidden;isolation:isolate;background:#000;text-align:center}
.reference-intro{position:relative;z-index:2;padding-top:44px;pointer-events:none}.reference-intro a{pointer-events:auto}
.reference-pill{display:inline-flex;align-items:center;gap:9px;background:#19191b;border:1px solid #ffffff08;border-radius:99px;min-height:45px;padding:8px 13px;color:white;font-size:16px;font-weight:400}
.reference-intro h1{margin:17px auto 18px;font-family:'GT Haptik',Arial,sans-serif;font-size:60px;line-height:1.2;font-weight:700;letter-spacing:-1.5px;color:white}
.reference-intro>p{font-size:20px;color:#94969d;line-height:1.5;margin:18px 0 30px}
.reference-platforms{display:flex;align-items:center;justify-content:center;gap:12px;color:#88898f;margin-top:30px;font-size:16px}
.platform-pill{display:inline-flex;align-items:center;gap:12px;padding:11px 16px;border-radius:99px;border:1px solid #222;background:#101011;color:#d4d4d6}.platform-pill i{height:20px;border-left:1px solid #444}
.reference-phones{position:absolute;inset:0;max-width:1160px;margin:auto;pointer-events:none;z-index:1;mask-image:linear-gradient(#000 65%,transparent 98%)}
.ref-phone{position:absolute;width:252px;aspect-ratio:823/1663;border-radius:17% / 8%;background:#1b1b1b;isolation:isolate;--angle:0deg;--roll:0deg;transform:perspective(1000px) rotateY(var(--angle)) rotateZ(var(--roll));animation:phone-float 4.5s ease-in-out 1 both}
.ref-phone .phone-screen{position:absolute;inset:1.2% 4.3%;width:91.4%;height:97.6%;object-fit:fill;border-radius:14% / 6.7%;display:block}
.ref-phone .phone-frame{position:absolute;inset:0;width:100%;height:100%;display:block}
.ref-left{left:36px;top:200px;width:238px;--angle:25deg;--roll:1.5deg;animation-delay:-2s}
.ref-right{right:36px;top:200px;width:238px;--angle:-25deg;--roll:-1.5deg;animation-delay:-4s}
.ref-center{left:calc(50% - 126px);top:437px}

@keyframes phone-float{0%,100%{transform:perspective(1000px) rotateY(var(--angle)) rotateZ(var(--roll)) translateY(0)}50%{transform:perspective(1000px) rotateY(var(--angle)) rotateZ(var(--roll)) translateY(-9px)}}

@media(max-width:1200px){.reference-nav{margin-inline:32px}.reference-nav .nav-links{gap:24px}.ref-left{left:28px}.ref-right{right:28px}}
@media(max-width:900px){.reference-nav .nav-links{display:none}.reference-nav .nav-links.open{display:flex;position:absolute;top:83px;left:0;right:0;flex-direction:column;background:#080808;padding:25px;gap:24px;border-bottom:1px solid #222}.reference-nav .menu-button{display:flex}.reference-nav .nav-cta{margin-left:auto}.reference-intro h1{font-size:50px}.reference-hero{min-height:1030px}.reference-phones{top:320px;max-width:760px;mask-image:linear-gradient(#000 64%,transparent 96%)}.ref-left,.ref-right{top:180px;width:210px}.ref-center{top:240px;width:230px;left:calc(50% - 115px)}}
@media(max-width:600px){.reference-header{height:74px}.reference-nav{margin-inline:20px;gap:16px}.reference-nav .brand img{width:126px}.reference-nav .reference-button{font-size:13px;min-height:42px;padding:10px 12px;border-radius:10px}.reference-nav .nav-links.open{top:73px}.reference-hero{margin-top:74px;min-height:825px}.reference-intro{padding:38px 20px 0}.reference-pill{font-size:13px;min-height:39px}.reference-pill img{width:20px;height:20px}.reference-intro h1{font-size:44px;letter-spacing:-1px;line-height:1.12;max-width:380px;margin-top:24px}.reference-intro>p{font-size:18px;margin:20px 0 25px}.reference-button{font-size:16px;min-height:54px;padding:14px 23px}.reference-platforms{font-size:13px;gap:7px;margin-top:26px}.platform-pill{gap:8px;padding:9px 11px}.reference-phones{top:365px;max-width:430px;mask-image:linear-gradient(#000 68%,transparent 100%)}.ref-left,.ref-right{width:29%;top:60px}.ref-left{left:3%;--angle:18deg}.ref-right{right:3%;--angle:-18deg}.ref-center{top:120px;width:31%;left:34.5%}}
@media(prefers-reduced-motion:reduce){.ref-phone{animation:none}.reference-button{transition:none}}

@media(max-width:360px){.reference-nav{margin-inline:14px;gap:10px}.reference-nav .brand img{width:110px}.reference-nav .reference-button{padding:9px 10px;font-size:12px}.reference-intro h1{font-size:40px}.reference-platforms{gap:6px;font-size:12px}}