:root{
    --ink:#101828; --muted:#5B6472; --faint:#8A94A6;
    --bg:#FFFFFF; --alt:#F6F8FF; --line:#E6EAF2;
    --cobalt:#2F5BFF; --cobalt-dark:#1F46D8; --coral:#FF5A48;
    --teal:#00BFA6; --violet:#7C5CFF; --amber:#B97A0F; --amber-bg:#FFF4DE;
    --radius:20px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
       background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.wordmark{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif}
  a{color:var(--cobalt);text-decoration:none}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
         backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;gap:28px;height:68px}
  .wordmark{font-size:1.55rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
  .wordmark .dot{color:var(--coral)}
  nav{display:flex;gap:26px;margin-left:12px}
  nav a{color:var(--ink);font-weight:500;font-size:.97rem}
  nav a:hover{color:var(--cobalt)}
  .bar .spacer{flex:1}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;
       padding:10px 20px;border-radius:999px;border:1px solid transparent;transition:.15s}
  .btn.primary{background:var(--cobalt);color:#fff}
  .btn.primary:hover{background:var(--cobalt-dark)}
  .btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--cobalt);color:var(--cobalt)}
  .btn.small{padding:8px 16px;font-size:.9rem}

  /* ---------- Hero ---------- */
  .hero{padding:88px 0 72px;background:
        radial-gradient(640px 300px at 85% -60px, #E3EBFF 0%, rgba(227,235,255,0) 70%),
        radial-gradient(520px 260px at -80px 110%, #FFE9E5 0%, rgba(255,233,229,0) 70%),var(--bg)}
  .kicker{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;
          letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);
          background:#EDF1FF;border:1px solid #D8E1FF;padding:6px 14px;border-radius:999px}
  .kicker i{width:7px;height:7px;border-radius:50%;background:var(--coral);display:inline-block}
  .hero h1{font-size:3.4rem;line-height:1.08;letter-spacing:-.03em;font-weight:800;
           max-width:720px;margin:26px 0 20px}
  .hero h1 .hl{color:var(--cobalt)}
  .hero p.lede{font-size:1.16rem;color:var(--muted);max-width:620px}
  .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
  .hero .strip{margin-top:56px;background:#fff;border:1px solid var(--line);border-radius:24px;
       padding:22px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
       box-shadow:0 18px 40px -24px rgba(16,24,40,.18)}
  .hero .strip .lbl{font-size:.85rem;font-weight:600;color:var(--faint);letter-spacing:.08em;
       text-transform:uppercase;margin-right:4px}
  .hero .strip img{width:46px;height:46px;border-radius:12px;display:block}
  .hero .strip .tile{display:flex;flex-direction:column;align-items:center;gap:6px}
  .hero .strip .tile span{font-size:.68rem;color:var(--faint);font-weight:500;max-width:64px;
       text-align:center;line-height:1.25}

  /* ---------- Sections ---------- */
  section{padding:76px 0}
  section.alt{background:var(--alt)}
  .sec-head{max-width:640px;margin-bottom:40px}
  .sec-head .tag{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
  .sec-head h2{font-size:2.1rem;letter-spacing:-.02em;margin:10px 0 10px}
  .sec-head p{color:var(--muted);font-size:1.03rem}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
        display:flex;flex-direction:column;gap:12px;transition:.18s}
  .card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -22px rgba(16,24,40,.25);border-color:#D5DCEB}
  .card .top{display:flex;align-items:center;gap:15px}
  .card img.icon{width:58px;height:58px;border-radius:15px;flex:none}
  .card h3{font-size:1.16rem;line-height:1.3;letter-spacing:-.01em}
  .card .cat{color:var(--faint);font-size:.86rem;font-weight:500}
  .card .desc{color:var(--muted);font-size:.95rem;flex:1}
  .card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
  .chip{font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--alt);
        color:var(--ink);border:1px solid var(--line);white-space:nowrap}
  .chip b{color:var(--cobalt)}
  .badge{align-self:flex-start;font-size:.76rem;font-weight:600;padding:4px 12px;border-radius:999px}
  .badge.soon{background:var(--amber-bg);color:var(--amber)}
  .badge.apk{background:#E6F8F4;color:#00755F}
  .play{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
        font-weight:600;font-size:.9rem;padding:9px 18px;border-radius:999px}
  .play:hover{background:var(--cobalt)}
  .play svg{flex:none}
  .mini-link{font-size:.88rem;font-weight:600}
  .card.dim img.icon{filter:saturate(.85)}
  .card .foot .none{font-size:.88rem;color:var(--faint);font-weight:500}

  /* ---------- Studio ---------- */
  .studio{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
  .studio p{color:var(--muted);font-size:1.04rem;margin-bottom:16px}
  .studio p strong{color:var(--ink)}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px}
  .stat .num{font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.02em}
  .stat .num.c1{color:var(--cobalt)} .stat .num.c2{color:var(--coral)} .stat .num.c3{color:#009E87}
  .stat .lbl{color:var(--muted);font-size:.88rem;margin-top:4px;line-height:1.4}
  .rules{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  .rules span{font-size:.85rem;font-weight:500;background:#fff;border:1px solid var(--line);
       border-radius:999px;padding:6px 14px}

  /* ---------- Contact band ---------- */
  .contact{background:var(--cobalt);border-radius:28px;padding:52px 48px;color:#fff;
       display:flex;align-items:center;gap:36px;flex-wrap:wrap}
  .contact h2{font-size:1.9rem;letter-spacing:-.02em;margin-bottom:8px}
  .contact p{color:#C9D6FF;max-width:460px}
  .contact .acts{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
  .contact .btn.white{background:#fff;color:var(--cobalt)}
  .contact .btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
  .contact .btn.outline:hover{border-color:#fff}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:56px 0 36px;margin-top:76px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
  footer .blurb{color:var(--muted);font-size:.94rem;max-width:320px;margin-top:12px}
  footer h4{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
  footer ul{list-style:none}
  footer li{margin-bottom:9px}
  footer li a{color:var(--ink);font-size:.95rem;font-weight:500}
  footer li a:hover{color:var(--cobalt)}
  footer li a .h{color:var(--faint);font-weight:400}
  .bottom{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
       border-top:1px solid var(--line);margin-top:40px;padding-top:22px;
       color:var(--faint);font-size:.88rem}

  /* ---------- App groups ---------- */
  .group-title{font-size:1.28rem;letter-spacing:-.015em;margin:38px 0 18px}
  .group-title:first-of-type{margin-top:6px}

  /* ---------- Trust band ---------- */
  .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .trust-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px}
  .trust-item h3{font-size:1.02rem;margin-bottom:6px;letter-spacing:-.01em}
  .trust-item p{color:var(--muted);font-size:.92rem;line-height:1.55}

  /* ---------- Now (status list) ---------- */
  .now-list{display:flex;flex-direction:column;gap:14px}
  .now-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
           border-radius:16px;padding:18px 20px}
  .now-row img.icon{width:46px;height:46px;border-radius:12px;flex:none}
  .now-main{flex:1;min-width:0}
  .now-main h3{font-size:1.05rem;letter-spacing:-.01em}
  .now-sub{color:var(--faint);font-weight:600;font-size:.85rem}
  .now-main p{color:var(--muted);font-size:.93rem}
  .status{flex:none;font-size:.78rem;font-weight:700;padding:5px 13px;border-radius:999px;white-space:nowrap}
  .status.review{background:var(--amber-bg);color:var(--amber)}
  .status.apk{background:#E6F8F4;color:#00755F}
  .updated{margin-top:20px;color:var(--faint);font-size:.88rem;font-weight:500}

  /* ---------- Hero layout & visual ---------- */
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
  .hstats{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
  .hchip{font-size:.9rem;font-weight:500;background:#fff;border:1px solid var(--line);
         border-radius:999px;padding:7px 15px}
  .hchip b{color:var(--cobalt);font-weight:700}
  .hero-visual{position:relative}
  .hero-visual::before{content:"";position:absolute;inset:-30px -10px auto auto;width:340px;height:340px;
    background:radial-gradient(circle at 60% 40%, #E3EBFF 0%, rgba(227,235,255,0) 70%);z-index:0}
  .phones{position:relative;height:452px;z-index:1}
  .phone{position:absolute;width:208px;background:#0B1220;border-radius:34px;padding:9px;
         box-shadow:0 30px 60px -28px rgba(16,24,40,.45)}
  .phone .pscreen{border-radius:26px;overflow:hidden;aspect-ratio:480/853;background:#EEF1F7}
  .phone .pscreen img{width:100%;height:100%;object-fit:cover;display:block}
  .phone.main{left:50%;transform:translateX(-50%);width:228px;top:0;z-index:3}
  .phone.side{top:46px;z-index:2}
  .phone.side.left{left:0;transform:rotate(-5deg)}
  .phone.side.right{right:0;transform:rotate(5deg)}
  .pcap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;
        gap:7px;background:rgba(255,255,255,.94);border-radius:999px;padding:5px 12px 5px 6px;
        font-size:.76rem;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:0 6px 16px -6px rgba(16,24,40,.35)}
  .pcap img.icon{width:20px;height:20px;border-radius:6px}
  .float-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;background:#fff;
    border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.83rem;font-weight:600;
    box-shadow:0 14px 28px -16px rgba(16,24,40,.35)}
  .float-chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
  .float-chip .dot.teal{background:var(--teal)} .float-chip .dot.coral{background:var(--coral)}
  .float-chip.fc1{left:-6px;bottom:64px}
  .float-chip.fc2{right:-4px;top:36px}

  /* ---------- Marquee (live-now strip) ---------- */
  .marquee{overflow:hidden;flex:1;min-width:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .mtrack{display:flex;width:max-content;animation:mscroll 40s linear infinite}
  .mset{display:flex;gap:30px;padding-right:30px;align-items:flex-start}
  .strip:hover .mtrack{animation-play-state:paused}
  @keyframes mscroll{to{transform:translateX(-50%)}}

  /* ---------- Motion ---------- */
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .hero [data-anim]{animation:rise .8s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--d,0)*100ms)}
  @keyframes floatL{from{transform:rotate(-5deg) translateY(0)}to{transform:rotate(-5deg) translateY(-8px)}}
  @keyframes floatR{from{transform:rotate(5deg) translateY(0)}to{transform:rotate(5deg) translateY(-8px)}}
  .phone.side.left{animation:floatL 7s ease-in-out infinite alternate}
  .phone.side.right{animation:floatR 8s ease-in-out infinite alternate}
  .js .rv{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.22,.61,.36,1);
          transition-delay:calc(var(--d,0)*80ms)}
  .js .rv.in{opacity:1;translate:0 0}
  .grid>.rv{display:flex}
  .grid>.rv>.card{flex:1}
  .card img.icon{transition:transform .25s ease}
  .card:hover img.icon{transform:scale(1.06)}
  .btn:active{transform:translateY(1px)}
  footer .fgrid{grid-template-columns:1.45fr .85fr 1.1fr .8fr .95fr}
  footer h4.fh{margin-top:22px}
  footer .fnote{color:var(--faint);font-size:.86rem;margin-top:12px;line-height:1.55;max-width:230px}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
      transition-duration:.001s!important}
    .js .rv{opacity:1;translate:none}
    .mtrack{animation:none}
    .hero [data-anim]{animation:none}
    .phone.side.left,.phone.side.right{animation:none}
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1020px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .studio{grid-template-columns:1fr}
    .trust-grid{grid-template-columns:repeat(2,1fr)}
    .hero-grid{grid-template-columns:1fr}
    .hero-visual{max-width:520px}
    footer .fgrid{grid-template-columns:repeat(2,1fr)}
    .hero h1{font-size:2.7rem}
  }
  @media (max-width:680px){
    .grid{grid-template-columns:1fr}
    nav{display:none}
    .bar{gap:14px}
    .bar .btn{padding:8px 14px;font-size:.88rem}
    .hero{padding:56px 0 52px}
    .hero h1{font-size:2.15rem}
    .hero p.lede{font-size:1.05rem}
    section{padding:54px 0}
    .stats{grid-template-columns:repeat(3,1fr);gap:10px}
    .stat{padding:16px 12px}.stat .num{font-size:1.5rem}
    .contact{padding:36px 26px}
    .contact .acts{margin-left:0}
    .fgrid{grid-template-columns:1fr}
    footer .fgrid{grid-template-columns:1fr}
    .trust-grid{grid-template-columns:1fr}
    .phones{height:392px}
    .phone{width:168px} .phone.main{width:184px}
    .phone.side{top:38px}
    .float-chip.fc1{left:0;bottom:26px}
    .now-row{flex-wrap:wrap}
    .status{margin-left:62px}
    .hero .strip{padding:18px}
  }
  /* ---------- Brand lockup (official mark v5-t3: "m." + thin bronze ring) ---------- */
  .brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
  .brand-mark{width:36px;height:36px;border-radius:10px;flex:none}
  .brand-name{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;font-weight:800;
              font-size:1.45rem;letter-spacing:-.03em;color:var(--ink)}
  footer .brand-mark{width:34px;height:34px}