:root{
    --blue:#0b2fb8; --blue-d:#061a6e; --ink:#050b2e;
    --yellow:#ffc91f; --red:#e8322b; --cream:#fff8e6;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{min-height:100%}
  body{
    font-family:"DM Sans",sans-serif; color:#fff;
    background:var(--ink);
    min-height:100svh; display:flex; justify-content:center; align-items:flex-start; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  .page{
    position:relative; width:100%; max-width:480px; min-height:100svh;
    overflow-x:hidden; overflow-y:visible; overflow-y:clip; display:flex; flex-direction:column;
    background:
      radial-gradient(120% 60% at 50% 18%, #1f4ff0 0%, var(--blue) 38%, var(--blue-d) 75%, var(--ink) 100%);
  }
  /* sunburst */
  .rays{
    position:absolute; left:50%; top:200px; width:900px; height:900px;
    translate:-50% -50%; pointer-events:none; opacity:.16;
    background:repeating-conic-gradient(from 0deg, #fff 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask:radial-gradient(circle, #000 0 18%, transparent 58%);
            mask:radial-gradient(circle, #000 0 18%, transparent 58%);
    animation:spin 80s linear infinite;
  }
  @keyframes spin{to{rotate:360deg}}

  header{
    position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
    padding:calc(18px + env(safe-area-inset-top)) 22px 0;
  }
  .brand{font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.85}
  .brand b{color:var(--yellow)}
  .share{
    width:40px;height:40px;border-radius:50%; border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.08); color:#fff; display:grid;place-items:center; cursor:pointer;
    backdrop-filter:blur(8px); transition:background .2s;
  }
  .share:hover{background:rgba(255,255,255,.18)}

  .hero{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:34px 24px 0; text-align:center}
  .icon-wrap{position:relative; width:148px; height:148px; margin-bottom:26px; animation:float 5s ease-in-out infinite}
  @keyframes float{50%{translate:0 -8px}}
  .icon-wrap::before{
    content:""; position:absolute; inset:-26px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,201,31,.55), transparent 65%); filter:blur(6px);
  }
  .icon{
    position:relative; width:100%; height:100%; border-radius:34px; display:block; object-fit:cover;
    box-shadow:0 0 0 4px rgba(255,255,255,.95), 0 22px 44px -10px rgba(0,0,0,.6);
    rotate:-4deg; overflow:hidden;
    background:radial-gradient(circle at 50% 35%, #2f63ff, var(--blue) 70%);
  }
  .icon img{position:absolute; inset:6% 0 0 0; width:100%; height:100%; object-fit:cover; object-position:50% 0}
  .badge{
    position:absolute; right:-18px; bottom:-8px; rotate:8deg;
    background:var(--yellow); color:var(--ink); font-weight:800; font-family:"Bricolage Grotesque";
    font-size:13px; padding:7px 11px; border-radius:999px; box-shadow:0 8px 18px -6px rgba(0,0,0,.5);
    white-space:nowrap;
  }
  .logo-main{width:min(230px,62vw); height:auto; margin:0 0 22px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
  .eyebrow{font-size:14px; color:rgba(255,255,255,.7); margin-bottom:10px}
  .eyebrow strong{color:#fff; font-weight:700}
  h1{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
    font-size:clamp(34px, 10vw, 44px); line-height:.98; letter-spacing:-.025em;
    text-wrap:balance; max-width:13ch;
  }
  h1 em{font-style:normal; color:var(--yellow); position:relative; white-space:nowrap}
  h1 em svg{position:absolute; left:-2%; bottom:-10px; width:104%; height:14px}
  .sub{margin-top:18px; font-size:16px; line-height:1.45; color:rgba(255,255,255,.78); max-width:30ch; text-wrap:pretty}

  .stores{position:relative; z-index:2; padding:34px 22px 0; display:grid; gap:12px}
  .store{
    display:flex; align-items:center; gap:14px; text-decoration:none; color:#fff;
    background:rgba(5,11,46,.72); border:1px solid rgba(255,255,255,.16);
    border-radius:20px; padding:14px 16px 14px 18px; min-height:72px;
    backdrop-filter:blur(10px);
    transition:transform .18s ease, background .2s, border-color .2s;
  }
  .store:hover{background:rgba(5,11,46,.9); border-color:rgba(255,255,255,.35)}
  .store:active{transform:scale(.98)}
  .store .logo{width:30px;height:30px;flex:none;display:grid;place-items:center}
  .store .txt{flex:1; display:flex; flex-direction:column; text-align:left}
  .store small{font-size:12px; opacity:.7; letter-spacing:.02em}
  .store span{font-family:"Bricolage Grotesque"; font-weight:600; font-size:21px; letter-spacing:-.01em; line-height:1.1}
  .store .arrow{
    width:38px;height:38px;border-radius:50%; flex:none; display:grid;place-items:center;
    background:rgba(255,255,255,.1); transition:background .2s, color .2s, translate .2s;
  }
  .store:hover .arrow{translate:3px 0}
  /* recommended store (detected OS) */
  .store.rec{background:#fff; color:var(--ink); border-color:#fff; box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
  .store.rec .arrow{background:var(--yellow); color:var(--ink)}
  .store.rec small{opacity:.6}
  .rec-tag{
    display:none; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
    color:var(--blue); margin-left:6px;
  }
  .store.rec .rec-tag{display:inline}

  .spacer{flex:1; min-height:40px}
  footer{
    position:relative; z-index:2; padding:0 22px calc(22px + env(safe-area-inset-bottom));
    display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgba(255,255,255,.55);
  }
  footer a{color:rgba(255,255,255,.85); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:1px}
  footer a:hover{color:var(--yellow); border-color:var(--yellow)}

  /* stripes at the base — brand tricolor */
  .stripe{position:relative; z-index:1; height:6px; display:flex}
  .stripe i{flex:1}
  .stripe i:nth-child(1){background:var(--red)}
  .stripe i:nth-child(2){background:var(--yellow)}
  .stripe i:nth-child(3){background:#1f4ff0}

  .toast{
    position:fixed; left:50%; bottom:40px; translate:-50% 20px; opacity:0; pointer-events:none;
    background:var(--yellow); color:var(--ink); font-weight:700; font-size:14px; padding:10px 16px; border-radius:999px;
    transition:.25s; z-index:10;
  }
  .toast.show{opacity:1; translate:-50% 0}

  /* entrance */
  .in{opacity:0; translate:0 14px; animation:in .7s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes in{to{opacity:1; translate:0 0}}
  @media (prefers-reduced-motion:reduce){ .rays,.icon-wrap{animation:none} .in{animation-duration:.01s} }

/* pantallas bajas: compactar para que ambos botones se vean sin scroll */
@media (max-height:760px){
  .hero{padding-top:18px}
  .icon-wrap{width:112px;height:112px;margin-bottom:20px}
  .logo-main{width:min(190px,52vw);margin-bottom:14px}
  .stores{padding-top:24px}
  .store{min-height:64px}
}