:root{
      --bg0:#050d18;
      --bg1:#08111f;
      --bg2:#0d1a2f;
      --ink:#ffffff;
      --muted:#d7e1ef;
      --muted2:rgba(255,255,255,.75);
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(255,255,255,.14);
      --wa:#24b05b;
      --wa2:#198247;
      --tg:#2b84ff;
      --tg2:#195ec8;
      --wch:#00a6a3;
      --wch2:#097775;
      --radius-lg:26px;
      --radius-md:20px;
      --safe-top:max(10px, env(safe-area-inset-top));
      --safe-bottom:max(18px, env(safe-area-inset-bottom));
      --maxw:980px;
    }

    *{box-sizing:border-box}
    html,body{min-height:100%}
    html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
    body{
      margin:0;
      color:var(--ink);
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
      background:
        radial-gradient(760px 560px at 16% 10%, rgba(43,132,255,.18), transparent 58%),
        radial-gradient(760px 560px at 84% 14%, rgba(0,166,163,.12), transparent 58%),
        radial-gradient(540px 420px at 50% 100%, rgba(58,118,255,.10), transparent 66%),
        linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 52%, var(--bg2) 100%);
      background-color:var(--bg1);
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      position:relative;
    }

    body::before,
    body::after{
      content:"";
      position:fixed;
      pointer-events:none;
      z-index:0;
    }

    body::before{
      inset:0;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 28%),
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,.015) 50%, transparent 100%);
      opacity:.9;
    }

    body::after{
      width:430px;
      height:430px;
      right:-210px;
      bottom:-220px;
      border-radius:50%;
      border:1px solid rgba(89,164,255,.09);
      box-shadow:
        0 0 0 30px rgba(89,164,255,.025),
        0 0 0 58px rgba(89,164,255,.018),
        0 0 0 90px rgba(89,164,255,.012);
    }

    img{display:block;max-width:100%}
    a{color:inherit}

    .ticker{
      position:fixed;
      inset:0 0 auto 0;
      z-index:15;
      height:38px;
      display:flex;
      align-items:center;
      overflow:hidden;
      background:linear-gradient(90deg, #0d76df 0%, #1a8bff 36%, #0eb0d4 100%);
      border-bottom:1px solid rgba(255,255,255,.10);
      box-shadow:0 8px 26px rgba(0,0,0,.18);
    }

    .ticker-track{
      display:flex;
      width:max-content;
      white-space:nowrap;
      animation:tickerMove 27s linear infinite;
      will-change:transform;
    }

    .ticker-group{
      display:flex;
      flex-shrink:0;
      white-space:nowrap;
    }

    .ticker-track span{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:0 24px;
      color:#fff;
      font-size:11px;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:.98;
      flex-shrink:0;
    }

    .ticker-track span::before{
      content:"✦";
      color:#dffffc;
      font-size:11px;
    }

    @keyframes tickerMove{
      from{transform:translateX(0)}
      to{transform:translateX(-25%)}
    }

    .page{
      position:relative;
      z-index:1;
      min-height:100svh;
      min-height:100dvh;
      padding:
        calc(38px + 34px + var(--safe-top))
        16px
        max(18px, var(--safe-bottom));
      display:flex;
      justify-content:center;
    }

    .shell{
      width:100%;
      max-width:var(--maxw);
      display:flex;
      justify-content:center;
    }

    .panel{
      width:100%;
      max-width:760px;
      text-align:center;
      padding:4px 8px 0;
    }

    .logoFrame{
      width:124px;
      height:124px;
      margin:0 auto 16px;
      padding:4px;
      border-radius:30px;
      background:linear-gradient(145deg, rgba(79,171,255,.96), rgba(24,114,240,.90), rgba(255,255,255,.92));
      box-shadow:0 16px 40px rgba(0,0,0,.23), 0 0 24px rgba(38,128,255,.20);
      position:relative;
      isolation:isolate;
    }

    .logoFrame::before{
      content:"";
      position:absolute;
      inset:-28px;
      border-radius:inherit;
      background:
        radial-gradient(circle, rgba(54,140,255,.28) 0%, rgba(54,140,255,.14) 34%, rgba(54,140,255,.05) 56%, transparent 78%),
        radial-gradient(circle, rgba(0,166,163,.16) 0%, rgba(0,166,163,.08) 44%, transparent 76%);
      filter:blur(24px);
      z-index:-1;
    }

    .logoBox{
      width:100%;
      height:100%;
      border-radius:26px;
      overflow:hidden;
      background:#08111f;
    }

    .logoBox img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    h1{
      max-width:650px;
      margin:0 auto;
      font-size:clamp(28px, 3.2vw, 39px);
      line-height:1.12;
      font-weight:850;
      letter-spacing:-.035em;
      text-wrap:balance;
      text-shadow:0 8px 24px rgba(0,0,0,.16);
    }

    .sub{
      max-width:520px;
      margin:10px auto 0;
      color:var(--muted);
      font-size:clamp(13px, 1.45vw, 16px);
      line-height:1.42;
      font-weight:500;
      text-wrap:balance;
    }

    .ctaArea{
      width:100%;
      max-width:600px;
      margin:24px auto 0;
      display:grid;
      gap:14px;
    }

    .cta{
      position:relative;
      width:100%;
      min-height:78px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:14px;
      padding:14px 14px 14px 14px;
      border-radius:var(--radius-lg);
      color:#fff;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 22px 56px rgba(0,0,0,.24);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease, background .18s ease;
      overflow:hidden;
      isolation:isolate;
      cursor:pointer;
    }

    .cta::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:linear-gradient(115deg, rgba(255,255,255,.11), transparent 32%, transparent 70%, rgba(255,255,255,.05) 100%);
      pointer-events:none;
    }

    .cta:hover{
      transform:translateY(-3px) scale(1.01);
      box-shadow:0 32px 78px rgba(0,0,0,.30);
      border-color:rgba(255,255,255,.22);
      filter:brightness(1.04) saturate(1.06);
    }

    .cta:focus-visible{
      outline:3px solid rgba(111,208,255,.78);
      outline-offset:3px;
    }

    .cta-main{
      background:linear-gradient(135deg, var(--wa) 0%, var(--wa2) 100%);
      overflow:visible;
    }
    .cta-telegram{background:linear-gradient(135deg, var(--tg) 0%, var(--tg2) 100%)}
    .cta-channel{background:linear-gradient(135deg, var(--wch) 0%, var(--wch2) 100%)}

    .cta-main .label{
      position:absolute;
      top:-15px;
      right:18px;
      z-index:4;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:27px;
      padding:7px 12px;
      border-radius:999px;
      background:#123f24;
      border:1px solid rgba(198,255,216,.22);
      box-shadow:0 9px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
      color:#d9ffe7;
      font-size:10px;
      font-weight:900;
      letter-spacing:.055em;
      text-transform:uppercase;
      line-height:1;
      white-space:nowrap;
    }

    .ctaContent{
      min-width:0;
      display:flex;
      align-items:center;
      gap:12px;
      text-align:left;
    }

    .platformIcon{
      width:42px;
      height:42px;
      flex:0 0 42px;
      display:grid;
      place-items:center;
      border-radius:15px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.15);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    }

    .platformIcon img{
      width:28px;
      height:28px;
      object-fit:contain;
    }

    .platformIcon .telegramIcon{
      width:27px;
      height:27px;
    }

    .textWrap{
      min-width:0;
    }

    .title,
    .cta-main .label{
      font-family:"Trebuchet MS","Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;
    }

    .title{
      font-size:20px;
      line-height:1.12;
      font-weight:850;
      letter-spacing:-.02em;
      text-wrap:balance;
    }

    .meta{
      margin-top:3px;
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
    }

    .countBadge{
      display:inline-block;
      padding:0;
      background:none;
      border:0;
      color:rgba(255,255,255,.94);
      font-size:14px;
      font-weight:750;
      letter-spacing:.01em;
    }

    .go{
      width:44px;
      height:44px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:rgba(5,18,33,.22);
      border:1px solid rgba(255,255,255,.15);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    }

    .go svg{
      width:18px;
      height:18px;
      fill:none;
      stroke:currentColor;
      stroke-width:2.2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .platformIcon,
    .go,
    .go svg,
    .title,
    .countBadge{
      transition:transform .18s ease, opacity .18s ease, filter .18s ease;
    }

    .cta:hover .platformIcon{
      transform:scale(1.05);
      filter:brightness(1.05);
    }

    .cta:hover .go{
      transform:translateX(2px);
      background:rgba(255,255,255,.18);
      border-color:rgba(255,255,255,.24);
    }

    .cta:hover .go svg{
      transform:translateX(1px) translateY(-1px);
    }

    .cta:hover .title,
    .cta:hover .countBadge{
      transform:translateX(1px);
    }

    .cta:active{
      transform:translateY(-1px) scale(.995);
    }

    .storesWrap{
      width:100%;
      max-width:760px;
      margin:36px auto 0;
      text-align:center;
    }

    .storesTitle{
      margin:0 0 14px;
      color:rgba(255,255,255,.95);
      font-size:15px;
      font-weight:600;
      line-height:1.3;
    }

    .stores{
      display:flex;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .store{
      width:58px;
      height:54px;
      display:grid;
      place-items:center;
      border-radius:18px;
      background:rgba(255,255,255,.96);
      box-shadow:0 10px 22px rgba(0,0,0,.18);
      overflow:hidden;
      padding:8px;
    }

    .store img{
      width:92%;
      height:92%;
      object-fit:contain;
      object-position:center;
      margin:auto;
      border-radius:11px;
    }


    .store--soft img{
      border-radius:14px;
    }

    .store--kabum img{
      width:86%;
      height:86%;
    }

    .footer{
      margin-top:20px;
      color:rgba(255,255,255,.58);
      font-size:13px;
      font-weight:400;
      text-align:center;
    }

    @media (max-width:720px){
      .ticker{height:34px}
      .ticker-track span{
        font-size:10px;
        padding:0 18px;
        letter-spacing:.10em;
      }

      .page{
        padding-top:calc(34px + 14px + var(--safe-top));
        padding-left:12px;
        padding-right:12px;
        padding-bottom:max(16px, var(--safe-bottom));
      }

      .panel{padding-top:0}
      .logoFrame{
        width:106px;
        height:106px;
        margin-bottom:14px;
      }
      h1{font-size:clamp(24px, 6.6vw, 31px)}
      .sub{max-width:410px;font-size:14px;margin-top:8px}
      .ctaArea{max-width:100%;margin-top:22px}
      .cta{
        min-height:72px;
        border-radius:23px;
      }
      .title{font-size:17px}
      .countBadge{font-size:12.5px}
      .storesWrap{margin-top:30px}
      .store{width:54px;height:50px}
    }

    @media (max-width:420px){
      .page{
        padding-left:10px;
        padding-right:10px;
        padding-top:calc(34px + 10px + var(--safe-top));
        padding-bottom:max(14px, var(--safe-bottom));
      }

      .logoFrame{
        width:94px;
        height:94px;
        border-radius:24px;
        margin-bottom:12px;
      }
      .logoBox{border-radius:20px}
      h1{font-size:clamp(22px, 6.9vw, 28px);line-height:1.15}
      .sub{max-width:335px;font-size:13px;margin-top:8px}
      .ctaArea{gap:12px}
      .cta{
        min-height:68px;
        gap:10px;
        padding:12px;
        border-radius:20px;
      }
      .cta-main .label{
        top:-13px;
        right:12px;
        min-height:24px;
        padding:6px 10px;
        font-size:9px;
      }
      .platformIcon{
        width:38px;
        height:38px;
        flex-basis:38px;
        border-radius:14px;
      }
      .platformIcon img{width:25px;height:25px}
      .platformIcon .telegramIcon{width:24px;height:24px}
      .title{font-size:16px}
      .meta{gap:6px}
      .countBadge{font-size:12px}
      .go{
        width:38px;
        height:38px;
        border-radius:14px;
      }
      .go svg{width:16px;height:16px}
      .storesTitle{font-size:14px}
      .store{width:50px;height:46px;border-radius:16px}
    }

    @media (max-width:390px){
      .page{
        padding-left:8px;
        padding-right:8px;
        padding-top:calc(34px + 9px + var(--safe-top));
      }
      .logoFrame{
        width:86px;
        height:86px;
        margin-bottom:10px;
      }
      h1{font-size:clamp(21px, 6.7vw, 26px);line-height:1.14}
      .sub{max-width:300px;font-size:12.5px;margin-top:7px}
      .cta{
        min-height:62px;
        padding:10px;
        border-radius:18px;
      }
      .ctaContent{gap:10px}
      .title{font-size:14.5px}
      .cta-main .label{
        top:-12px;
        right:10px;
        min-height:23px;
        padding:5px 9px;
        font-size:8.5px;
      }
      .countBadge{font-size:11.5px}
      .platformIcon{width:34px;height:34px;flex-basis:34px}
      .platformIcon img{width:23px;height:23px}
      .platformIcon .telegramIcon{width:22px;height:22px}
      .go{width:34px;height:34px;border-radius:13px}
      .storesWrap{margin-top:26px}
      .store{width:46px;height:42px;border-radius:14px}
      .footer{font-size:12px}
    }

    @media (prefers-reduced-motion:reduce){
      .ticker-track{animation:none !important}
      .cta{transition:none}
    }