*{box-sizing:border-box;margin:0;padding:0}

:root{
  --brand-pink:  #EC5E59;
  --brand-orange:#F07A52;
  --brand-amber: #F39518;
  --brand-yellow:#F9B741;
  --brand-gradient: linear-gradient(90deg, var(--brand-pink), var(--brand-orange), var(--brand-yellow));
}

body{
  font-family:'Inter',sans-serif;
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 30%, rgba(236,94,89,0.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(243,149,24,0.22), transparent 45%),
    linear-gradient(135deg,#0f0a1a,#0a0814);
  color:white;
  overflow-x:hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #141414; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #F39518; }

/* HERO */
.hero-container{
  display:flex;
  min-height:calc(100vh - 64px);
  align-items:center;
  justify-content:center;
  gap:60px;
  max-width:1200px;
  margin:0 auto;
  padding:0 4%;
}

.hero-left{ max-width:520px; }

.logo{ margin-bottom:30px; }
.logo img{
  height:90px;
  width:auto;
  display:block;
  filter: drop-shadow(0 0 18px rgba(240,122,82,0.45));
}

.hero-title{
  font-size:60px;
  font-weight:800;
  line-height:1.1;
}

.hero-title span{
  background: var(--brand-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-subtitle{
  margin-top:20px;
  font-size:18px;
  opacity:0.78;
  line-height:1.6;
}

.download-btn{
  display:inline-block;
  margin-top:40px;
  padding:18px 45px;
  border-radius:40px;
  font-size:18px;
  font-weight:600;
  text-decoration:none;
  color:white;
  background: var(--brand-gradient);
  box-shadow:0 0 35px rgba(240,122,82,0.45);
  transition:0.3s ease;
}

.download-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 60px rgba(249,183,65,0.55);
}

.phone-video{
  height:80vh;
  max-height:850px;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 0 100px rgba(243,149,24,0.22);
  border:1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.3);
}

.phone-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media(max-width:900px){
  .hero-container{
    flex-direction:column;
    text-align:center;
    gap:25px;
    padding:30px 16px;
  }
  .hero-title{ font-size:42px; }
  .hero-subtitle{ font-size:15px; margin-top:14px; }
  .download-btn{ margin-top:25px; padding:16px 34px; font-size:16px; }
  .phone-video{
    width:min(380px, 92vw);
    height:auto;
    aspect-ratio: 9 / 16;
    border-radius:26px;
  }
  .phone-video video{ object-fit:contain; background:#000; }
  .logo img{ margin:0 auto; }
}

/* =========================
   GLASS HEADER + GLASS MENU
   ========================= */

/* Header glass */
.glass-header{
  background: rgba(10, 10, 18, 0.35);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Mobile menu glass background */
.glass-menu{
  background:
    radial-gradient(circle at 20% 20%, rgba(236,94,89,0.12), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(243,149,24,0.14), transparent 45%),
    rgba(8, 8, 14, 0.50);
  border-left: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* optional: smoother feel */
.glass-menu a{
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}