:root{
  --bg:#110507; /* very dark maroon */
  --card:#1a0e0e; /* card / surface */
  --muted:#b97b78; /* muted, warm pinkish */
  --accent:#ef3b36; /* primary app red */
  --accent-2:#13d3b1; /* secondary teal used in app badges */
  --glass: rgba(239,59,54,0.04);
  --nav-height: 110px;
  --maxw:1200px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:40px 24px}
body{
  margin:0;
  padding-top:0;
  background: linear-gradient(180deg,#0e0606 0%, var(--bg) 70%);
  color:#fff8f6;
  -webkit-font-smoothing:antialiased;
}
.nav{backdrop-filter: blur(6px);position:relative;background:transparent;overflow:visible;height:var(--nav-height)}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--nav-height);background:linear-gradient(180deg, rgba(17,6,7,0.75), rgba(17,6,7,0.35));border-bottom:1px solid rgba(239,59,54,0.06);pointer-events:none}
.nav .container{padding:2px 12px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:2}
.brand{display:inline-block;padding:0;margin:0;line-height:0;color:var(--accent)}
.brand{width:140px;height:140px}
.brand-icon{width:100%;height:100%;object-fit:contain;border-radius:8px;display:block}
.nav-links a{color:var(--muted);margin-left:20px;text-decoration:none}
.nav-links a.cta{background:var(--accent);color:#fff;padding:8px 14px;border-radius:12px;font-weight:700}

.hero{padding:24px 0}
.hero-grid{display:grid;grid-template-columns:1fr 480px;gap:28px;align-items:flex-start}
.hero-copy h1{font-size:42px;margin:0 0 12px;line-height:1.03}
.lead{color:var(--muted);max-width:48ch}
.cta-row{margin-top:22px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600;margin-right:12px}
.btn.primary{background:linear-gradient(90deg,var(--accent),#d8443f);color:#fff}
.btn.ghost{border:1px solid rgba(239,59,54,0.06);color:var(--muted);background:transparent}
.trust{margin-top:14px;color:var(--muted);font-size:14px}

.hero-media{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;overflow:visible}
.mockup{position:relative;width:260px;height:520px;border-radius:28px;overflow:hidden;box-shadow:0 18px 50px rgba(239,59,54,0.12), inset 0 1px 0 rgba(255,255,255,0.02);transform:rotate(-8deg);margin-top:0}
.mockup img{width:100%;height:100%;object-fit:cover;display:block}
.mockup-small{position:absolute;right:-40px;bottom:-80px;width:160px;height:320px;border-radius:18px;transform:rotate(6deg);box-shadow:0 12px 40px rgba(239,59,54,0.10)}
.mockup-small-2{position:absolute;left:-40px;top:-60px;width:140px;height:280px;border-radius:18px;transform:rotate(12deg);box-shadow:0 12px 40px rgba(239,59,54,0.10)}

.features{padding:60px 0}
.center{text-align:center}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.feature{background:var(--glass);padding:22px;border-radius:14px;border:1px solid rgba(239,59,54,0.04)}
.feature h3{margin:0 0 8px}
.feature p{margin:0;color:var(--muted)}

.screens{padding:40px 0}
.screens-grid{display:flex;gap:18px;justify-content:center}
.screens-grid img{width:200px;height:420px;object-fit:cover;border-radius:18px;box-shadow:0 18px 50px rgba(239,59,54,0.09)}

.download{background:linear-gradient(90deg, rgba(17,6,7,0.6), rgba(17,6,7,0.3));padding:48px 0;border-top:1px solid rgba(239,59,54,0.03)}
.download-inner{display:flex;align-items:center;justify-content:space-between}
.stores{display:flex;gap:12px}
.store-btn{background:rgba(239,59,54,0.08);padding:12px 16px;border-radius:12px;color:#ffecea;text-decoration:none;font-weight:600}

.footer{padding:18px 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-links a{color:var(--muted);margin-left:16px;text-decoration:none}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-media{min-height:440px}
  .mockup{width:220px;height:440px;transform:none}
  .mockup-small{display:none}
  .mockup-small-2{display:none}
  .features-grid{grid-template-columns:1fr}
  .download-inner{flex-direction:column;gap:18px;text-align:center}
  .footer-inner{flex-direction:column;gap:8px}
}

@media (max-width:420px){
  .container{padding:28px 18px}
  .hero-copy h1{font-size:28px}
}

/* responsive nav heights to match brand sizes */
@media (max-width:900px){
  :root{--nav-height:110px}
}

@media (max-width:480px){
  :root{--nav-height:76px}
}

@media (max-width:420px){
  :root{--nav-height:64px}
}

@media (max-width:900px){
  .brand{width:110px;height:110px}
}

@media (max-width:480px){
  .brand{width:76px;height:76px}
}

@media (max-width:420px){
  .brand{width:64px;height:64px}
}