:root{
    --navy-900:#0a2540;
    --navy-800:#0d3157;
    --navy-700:#123a66;
    --red:#d9272e;
    --red-dark:#b71e24;
    --ink:#101418;
    --muted:#5b6573;
    --bg-soft:#f6f8fb;
  }
  *{box-sizing:border-box;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    background:#fff;
  }
  h1,h2,h3,h4,.display-font{
    font-family:'Poppins',system-ui,sans-serif;
  }
  .text-red{color:var(--red);}
  .bg-navy{background-color:var(--navy-900);}
  .btn-red{
    background-color:var(--red);
    border-color:var(--red);
    color:#fff;
    font-weight:600;
  }
  .btn-red:hover{
    background-color:var(--red-dark);
    border-color:var(--red-dark);
    color:#fff;
  }
  .btn-outline-light-soft{
    border:1.5px solid rgba(255,255,255,.4);
    color:#fff;
    font-weight:600;
  }
  .btn-outline-light-soft:hover{
    background:rgba(255,255,255,.12);
    color:#fff;
  }

  /* Navbar */
  .navbar-custom{
    background:rgba(10,37,64,.92);
    backdrop-filter:saturate(180%) blur(10px);
    transition:background .25s ease;
  }
  .navbar-custom .nav-link{
    color:rgba(255,255,255,.85);
    font-weight:500;
  }
  .navbar-custom .nav-link:hover{color:#fff;}
  .navbar-brand-icon{
    width:36px;height:36px;border-radius:9px;overflow:hidden;
  }

  /* Hero */
  .hero{
    position:relative;
    background:
      radial-gradient(1200px 500px at 85% -10%, rgba(217,39,46,.25), transparent 60%),
      linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
    overflow:hidden;
    padding-top:7.5rem;
  }
  .hero .mountains-bg{
    position:absolute;
    left:0; right:0; bottom:-2px;
    opacity:.5;
    pointer-events:none;
  }
  .badge-rating{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    border-radius:50px;
    padding:.45rem .9rem;
    font-size:.9rem;
  }
  .play-badge img{height:54px;}

  .phone-mock{
    position:relative;
    max-width:260px;
    margin:0 auto;
    border-radius:34px;
    padding:10px;
    background:#1a1a1a;
    box-shadow:0 25px 60px -15px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.06);
  }
  .phone-mock img{
    border-radius:26px;
    display:block;
    width:100%;
  }
  .phone-mock::before{
    content:"";
    position:absolute;
    top:22px; left:50%; transform:translateX(-50%);
    width:70px; height:6px;
    background:#333;
    border-radius:10px;
    z-index:2;
  }
  .phone-float-1{ transform: rotate(-6deg) translateY(10px); }
  .phone-float-2{ transform: rotate(6deg) translateY(-18px); z-index:2; }
  .phone-float-3{ transform: rotate(-2deg) translateY(30px); opacity:.55; display:none; }

  /* Section helpers */
  section{scroll-margin-top:90px;}
  .eyebrow{
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.78rem;
    font-weight:700;
    color:var(--red);
  }
  .section-title{
    font-weight:800;
    color:var(--navy-900);
  }
  .text-muted-soft{color:var(--muted);}

  /* Feature cards */
  .feature-card{
    background:#fff;
    border:1px solid #edf0f4;
    border-radius:18px;
    padding:1.75rem;
    height:100%;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px -20px rgba(10,37,64,.25);
    border-color:transparent;
  }
  .feature-icon{
    width:52px;height:52px;
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;
    background:linear-gradient(135deg, var(--navy-800), var(--navy-700));
    color:#fff;
    margin-bottom:1.1rem;
  }
  .feature-icon.red{
    background:linear-gradient(135deg, var(--red), var(--red-dark));
  }

  /* Screenshots */
  .shots-wrap{
    display:flex;
    gap:1.5rem;
    overflow-x:auto;
    padding:1rem .25rem 2rem;
    scroll-snap-type:x mandatory;
  }
  .shots-wrap::-webkit-scrollbar{height:8px;}
  .shots-wrap::-webkit-scrollbar-thumb{background:#dfe4ea;border-radius:10px;}
  .shot-frame{
    flex:0 0 auto;
    scroll-snap-align:start;
    width:210px;
    border-radius:26px;
    padding:8px;
    background:#101418;
    box-shadow:0 20px 40px -18px rgba(10,37,64,.35);
  }
  .shot-frame img{
    width:100%;
    border-radius:19px;
    display:block;
  }

  .bg-soft{background:var(--bg-soft);}

  /* Stats strip */
  .stat-num{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:2rem;
    color:var(--navy-900);
  }

  /* CTA band */
  .cta-band{
    background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
    border-radius:28px;
    position:relative;
    overflow:hidden;
  }
  .cta-band::after{
    content:"";
    position:absolute;
    width:380px;height:380px;
    background:radial-gradient(circle, rgba(217,39,46,.35), transparent 70%);
    top:-120px; right:-80px;
  }

  footer{
    background:var(--navy-900);
    color:rgba(255,255,255,.7);
  }
  footer a{
    color:rgba(255,255,255,.75);
    text-decoration:none;
  }
  footer a:hover{color:#fff;}

  @media (min-width: 992px){
    .phone-float-3{ display:block; }
  }