* { box-sizing: border-box; }

    :root{
      --bg:#04110c;
      --bg2:#071913;
      --card:#0b1f19;
      --card2:#102a23;
      --line:rgba(255,255,255,.08);
      --text:#ffffff;
      --muted:rgba(227,244,236,.84);
      --btn1:#36d98a;
      --btn2:#1ebb74;
      --chip-bg:rgba(255,255,255,.03);
    }

    body{
      margin:0;
      font-family:Inter, Arial, Helvetica, sans-serif;
      color:var(--text);
      background:linear-gradient(180deg, #04110c 0%, #020b08 100%);
    }

    .hero-bg{
      position:relative;
      padding:8px 18px 12px;
      background:
        radial-gradient(circle at 18% -12%, rgba(50,227,144,.22), transparent 36%),
        radial-gradient(circle at 85% 8%, rgba(79,255,185,.14), transparent 24%),
        linear-gradient(180deg, #153f35 0%, #0c2d25 54%, #081913 100%);
      overflow:hidden;
    }

    .hero-bg::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%);
      pointer-events:none;
    }

    .wrap{
      max-width:520px;
      margin:0 auto;
      position:relative;
      z-index:2;
    }

    .topbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .logo{
      width:38px;
      height:38px;
      border-radius:13px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      color:#fff;
      background:linear-gradient(135deg,#66c3ff 0%, #8d63ff 100%);
      box-shadow:0 8px 20px rgba(90,131,255,.24);
    }

    .brand-name{
      font-size:17px;
      font-weight:700;
    }

    .top-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:46px;
      padding:0 18px;
      border-radius:17px;
      text-decoration:none;
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      backdrop-filter:blur(8px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }

    .main{
      max-width:520px;
      margin:0px auto 0;
      padding:0 18px 36px;
    }

    .card{
      padding:8px;
      border-radius:28px;
      background:
        linear-gradient(180deg, rgba(17,44,36,.96) 0%, rgba(8,22,18,.98) 100%);
      border:1px solid var(--line);
      box-shadow:
        0 24px 60px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.04);
    }

    h1{
      margin:0 0 18px;
      font-size:36px;
      line-height:1.06;
      letter-spacing:-.9px;
      font-weight:800;
      max-width:370px;
      background:linear-gradient(180deg,#ffffff 0%, #ddfff0 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .desc{
      margin:0 0 22px;
      font-size:12px;
      line-height:1.75;
      color:var(--muted);
      max-width:400px;
    }

    .chips{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-bottom:24px;
    }

    .chip{
      min-width:140px;
      padding:14px 18px;
      text-align:center;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:var(--chip-bg);
      color:#eefef6;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }

    .feature{
      padding:8px 16px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      margin-bottom:14px;
    }

    .feature:last-child{ margin-bottom:0; }

    .feature-title{
      font-size:12px;
      font-weight:700;
      margin-bottom:4px;
    }

    .feature-sub{
      font-size:15px;
      color:var(--muted);
    }

    .download{
      margin-top:3px;
      border-radius:24px;
      padding:24px;
      background:
        linear-gradient(180deg, rgba(15,41,33,.96) 0%, rgba(8,23,18,.98) 100%);
      border:1px solid rgba(255,255,255,.07);
      box-shadow:
        0 18px 40px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.04);
    }

    .download h2{
      margin:0 0 14px;
      font-size:24px;
      font-weight:800;
      letter-spacing:-.4px;
    }

    .meta{
      color:var(--muted);
      font-size:16px;
      margin-bottom:18px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:48px;
      padding:0 18px;
      border-radius:14px;
      text-decoration:none;
      color:#fff;
      background:linear-gradient(180deg, var(--btn1) 0%, var(--btn2) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 10px 24px rgba(38,211,128,.30);
    }

    .footer{
      margin-top:24px;
      color:rgba(232,248,239,.84);
      font-size:15px;
      padding-left:2px;
    }

    @media (max-width:420px){
      h1{ font-size:33px; }
      .card,.download{ padding:20px; }
      .chip{ min-width:calc(50% - 6px); }
    }