:root{
    --bg:#050816;
    --card:#0B1020;
    --border:#1F2937;
    --text:#F9FAFB;
    --muted:#CBD5E1;
    --link:#93C5FD;
    --accent:#3B82F6;
    --good:#22C55E;
    --bad:#F97373;
    --logo:#93C5FD; /* light blue */

    --radius:16px;
    --max:980px;
  }

  .logo img { display: block; }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: radial-gradient(1200px 600px at 20% 0%, rgba(59,130,246,.18), transparent 60%),
                radial-gradient(900px 500px at 80% 10%, rgba(147,197,253,.12), transparent 55%),
                var(--bg);
    color:var(--text);
    line-height:1.55;
  }
  
  a{color:var(--link); text-decoration:none}
  a:hover{text-decoration:underline}
  
  .container{
    max-width:var(--max);
    margin:0 auto;
    padding:28px 18px 60px;
  }
  
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    background:rgba(11,16,32,.65);
    border:1px solid rgba(31,41,55,.9);
    border-radius:999px;
    backdrop-filter: blur(10px);
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  
  .logo{
    width:36px; height:36px;
    border-radius:12px;
    background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(147,197,253,.9));
    display:grid;
    place-items:center;
    font-weight:800;
    color: var(--link);
    box-shadow: 0 8px 30px rgba(59,130,246,.25);
    flex:0 0 auto;
  }
  
  .brand-title{
    font-weight:800;
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  .nav-links{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  
  .pill{
    display:inline-block;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(31,41,55,.9);
    background:rgba(17,24,39,.55);
  }
  
  .hero{
    margin-top:22px;
    padding:28px 22px;
    border-radius:var(--radius);
    border:1px solid rgba(31,41,55,.9);
    background: rgba(11,16,32,.75);
  }
  
  .hero h1{margin:0 0 8px; font-size:42px; line-height:1.1}
  .hero p{margin:0; color:var(--muted); font-size:18px; max-width:70ch}

  .screenshot-placeholder{
    margin-top:28px;
    display:flex;
    justify-content:center;
    padding:20px 0;
  }
  .phone-mock{
    width:280px;
    padding:12px;
    border-radius:28px;
    background: linear-gradient(145deg, #1a1f2e, #0d1117);
    border:2px solid rgba(31,41,55,.9);
    box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .phone-screen{
    aspect-ratio:9/19;
    overflow: hidden;
    border-radius: 28px; /* adjust if needed to match inner phone corners */
    background: var(--card);
    border:1px solid rgba(31,41,55,.9);
  }
  .phone-screenshot{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:14px;
    margin-top:14px;
  }
  
  .card{
    padding:16px;
    border-radius:var(--radius);
    border:1px solid rgba(31,41,55,.9);
    background: rgba(11,16,32,.60);
  }
  
  .card h3{margin:0 0 6px; font-size:16px}
  .card p{margin:0; color:var(--muted); font-size:14px}
  
  .footer{
    margin-top:22px;
    color:var(--muted);
    font-size:13px;
  }
  
  @media (max-width: 860px){
    .grid{grid-template-columns:1fr}
    .hero h1{font-size:34px}
  }