/* ==========================================================================
   useplaya.com — hand-built replacement for the Framer site
   Breakpoints: desktop ≥1200px · below that a single stacked layout
   ========================================================================== */

@font-face{font-family:"Codec Pro";src:url("../fonts/CodecPro-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Codec Pro";src:url("../fonts/CodecPro-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/Switzer-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#f5f5f5;
  --ink:#1c1c1c;
  --white:#fff;
  --off:#f5f5f5;
  --red:#ff454e;
  --red-hover:#ff4726;
  --gold:#f7b900;
  --grey:#6e6e6e;
  --footer:#0e0e0e;
  --display:"Codec Pro","Inter",system-ui,-apple-system,sans-serif;
  --ui:"Open Runde","Inter",system-ui,-apple-system,sans-serif;
  --container:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:#160707;color:var(--white);font-family:var(--ui);font-size:16px;line-height:1.4;overflow-x:hidden}
h1,h2,p{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}}

/* ---------- Custom cursor (the red arrow that follows the mouse) ---------- */
.cursor{position:fixed;top:0;left:0;z-index:13;width:26px;height:26px;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- Header (fixed, transparent) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:4;padding:22px 40px}
.site-header .inner{max-width:var(--container);margin:0 auto;padding:37px 40px}
.site-header .logo{display:inline-flex;align-items:center;min-height:26px}
.site-header .logo img{height:32px;width:auto}
@media (max-width:1199px){.site-header{padding:22px 20px}.site-header .inner{padding:37px 20px}}
@media (max-width:809px){.site-header{padding:22px 12px}.site-header .inner{padding:37px 12px}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#160707}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:121%;height:100%;max-width:none;object-fit:cover;object-position:center;margin-left:-10.375%}
.hero .inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;min-height:100vh;min-height:100svh;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.hero-content{display:flex;flex-direction:column;gap:33px;padding-top:40px;max-width:520px}
.headline{display:flex;flex-direction:column;gap:28px}
.text-block{display:flex;flex-direction:column;gap:12px}
.app-icon{width:64px;height:64px;padding:0;border-radius:16px;transform:rotate(-12deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.app-icon:hover{transform:rotate(0deg) scale(1.05)}
.app-icon img{width:100%;height:100%;border-radius:16px;object-fit:cover;box-shadow:0 0 16px rgba(255,69,78,.55),0 0 40px rgba(255,69,78,.4),0 0 80px rgba(255,69,78,.25)}
.hero h1{font-family:var(--display);font-weight:800;font-size:60px;line-height:1.1em;letter-spacing:-.04em;color:var(--white)}
.hero .sub{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.2em;letter-spacing:-.02em;color:var(--white);max-width:482px;text-wrap:balance}
.hero .sub strong{font-weight:800}
.ratings{display:flex;align-items:stretch;gap:24px;padding:13px 0}
.rating{display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.rating .row{display:flex;align-items:center;gap:4px}
.rating .row img{width:33px;height:33px;object-fit:contain}
.rating .row svg{width:26px;height:26px;fill:var(--gold)}
.rating .label{font-family:var(--ui);font-weight:700;font-size:10px;line-height:1.6em;text-transform:uppercase;color:var(--white)}
.divider{width:2px;border-radius:5px;background:var(--white);align-self:stretch}
.store-buttons{display:flex;align-items:center;gap:14px;height:50px}
.store-buttons a,.store-buttons span{display:block;height:50px;transition:transform .3s ease,opacity .3s}
.store-buttons a:hover{transform:translateY(-2px)}
.store-buttons img{height:50px;width:auto;object-fit:contain}
.phone{flex:none;width:480px;height:720px;margin-right:-40px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.phone img{width:100%;height:100%;object-fit:contain}

/* appear */
.appear{opacity:0;transform:translateY(12px);animation:appear .8s cubic-bezier(.2,.65,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes appear{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.appear{animation:none;opacity:1;transform:none}}

@media (max-width:1199px){
  .hero .inner{flex-direction:column;justify-content:flex-start;align-items:center;gap:0;padding:180px 20px 0}
  .hero-content{align-items:center;text-align:center;padding:0 0 58px;gap:33px;max-width:100%}
  .headline{align-items:center;width:100%;max-width:390px}
  .text-block{align-items:center}
  .app-icon{width:64px;height:64px;padding:0;border-radius:16px}
  .hero .sub{max-width:100%}
  .ratings{flex-direction:column;align-items:center;gap:20px;padding:0}
  .divider{display:none}
  .rating{align-items:center}
  .store-buttons{flex-direction:column;height:auto;gap:12px}
  .phone{width:min(497px,100%);height:auto;aspect-ratio:497/745;margin:0 0 -6vh}
}
@media (max-width:809px){
  .hero .inner{padding:150px 12px 0}
  .hero h1{font-size:44px}
  .hero .sub{font-size:20px}
}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:2;background:var(--footer);color:var(--white)}
.site-footer .inner{max-width:1040px;margin:0 auto;min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.footer-links{display:flex;align-items:center;gap:20px}
.footer-link{position:relative;display:block;height:25px;overflow:hidden;font-family:var(--ui);font-weight:600;font-size:16px;line-height:1.6em;letter-spacing:-.01em;color:var(--off)}
.footer-link span{display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.footer-link span+span{color:var(--red-hover)}
.footer-link:hover span{transform:translateY(-25px)}
.footer-right{display:flex;align-items:flex-end;gap:18px}
.footer-note{font-family:var(--ui);font-weight:700;font-size:10px;line-height:1.6em;text-transform:uppercase;opacity:.66;color:var(--off)}
.footer-credit{display:inline-flex;align-items:center;gap:8px;font-family:"Switzer",var(--ui);font-weight:500;font-size:14px;letter-spacing:-.02em;line-height:1.4em}
.footer-credit img{height:14px;width:auto;object-fit:contain;transition:opacity .25s}
.footer-credit:hover img{opacity:.8}
@media (max-width:1199px){
  .site-footer .inner{flex-direction:column;justify-content:center;min-height:106px;padding:16px 20px;gap:6px;width:79%}
  .footer-links{gap:13px;padding:9px 0;flex-wrap:wrap;justify-content:center}
  .footer-right{width:100%;justify-content:center;flex-wrap:wrap;gap:12px 18px}
}
@media (max-width:809px){.footer-link{font-size:14px;line-height:1.8em}}