/* ===============  BASE  ===================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root{
  --bg:#05070d;               /* общий фон */
  --layer:#0d1119;            /* карточки */
  --stroke:rgba(255,255,255,.06);
  --accent:#ffbc00;           /* основной жёлтый */
  --neon:#00d4ff;             /* цвет неон-полос */
  --text:#e5e5e5;
  --muted:#7a859f;
  --radius:16px;
  --tr:.32s cubic-bezier(.25,.8,.25,1);
  --glow:0 0 4px var(--neon), 0 0 6px var(--neon), 0 0 10px var(--neon);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{width:92%;max-width:1180px;margin:0 auto}
a{text-decoration:none;color:inherit}

/* ===============  HERO  ===================== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;text-align:center;overflow:hidden}
h1{font-size:clamp(2rem,5.5vw,2.9rem);font-weight:700;line-height:1.25;margin:0 0 1.3rem}
.accent{color:var(--accent)}
.sub{color:var(--muted);margin-bottom:2.3rem}
.btn{display:inline-block;border-radius:var(--radius);font-weight:600;transition:var(--tr)}
.btn.big{padding:1rem 2.4rem;background:#fff;color:#000;box-shadow:0 0 6px #fff3,inset 0 0 4px #fff5}
.btn.big:hover{transform:translateY(-3px);filter:brightness(1.08)}

/* размытие позади текста */
.blur-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;
         background:radial-gradient(circle at 30% 40%,#131a28 0%,transparent 60%),
                    radial-gradient(circle at 80% 70%,#131a28 0%,transparent 60%);
         filter:blur(55px);animation:float 14s infinite alternate}
@keyframes float{from{transform:translateY(-30px)}to{transform:translateY(30px)}}

/* неон-полосы */
.neon-line{position:absolute;left:0;width:100%;height:3px;background:var(--neon);
           box-shadow:var(--glow);animation:pulse 2.5s infinite ease-in-out}
.neon-line.top{top:0}.neon-line.bottom{bottom:0}
@keyframes pulse{0%,100%{opacity:.75}50%{opacity:1}}

 /* ===============  GRID  ==================== */
.offers{padding:5rem 0}
.offers h2{text-align:center;font-size:1.5rem;font-weight:600;margin:0 0 2.7rem}
.grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--layer);border:1px solid var(--stroke);border-radius:var(--radius);
      padding:1.55rem 1.35rem 1.3rem;display:flex;flex-direction:column;
      transition:var(--tr)}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 22px 0 #000c}
.icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
      justify-content:center;margin-bottom:1.1rem;font-size:1.5rem;color:#fff}
h3{margin:0;font-weight:600;font-size:1.05rem}
.note{color:var(--muted);font-size:.88rem;margin:.15rem 0 1.55rem}
.bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.price{font-weight:700;font-size:1.15rem}
.btn.buy{position:relative;padding:.55rem 1.6rem;border:2px solid var(--neon);
         color:var(--neon);font-size:.82rem;background:transparent;border-radius:40px;
         transition:var(--tr);box-shadow:var(--glow)}
.btn.buy::before{content:'';position:absolute;inset:0;border-radius:40px;
                 background:var(--neon);opacity:.15;filter:blur(6px);z-index:-1}
.btn.buy:hover{background:var(--neon);color:#000;transform:translateY(-3px)}
/* двигающийся свет по контуру */
.btn.buy span, .btn.buy{overflow:hidden}
.btn.buy::after{content:'';position:absolute;top:-150%;left:-50%;width:200%;height:200%;
                background:conic-gradient(from 180deg at 50% 50%,
                  transparent 0deg,transparent 120deg,#fff 180deg,transparent 240deg);
                animation:rotate 2.8s linear infinite}
@keyframes rotate{100%{transform:rotate(1turn)}}

/* =======  brand-цветы кружков ============== */
.spotify  {background:#1bd760}
.ubereats {background:#06c167}
.amazon   {background:#ff9900}
.booking  {background:#1a6ce6}
.netflix  {background:#e50914}
.disney   {background:#005bff}
.zalando  {background:#ff4e00}
.youtube  {background:#ff0000}
.dropbox  {background:#0062ff}
.applemusic{background:#fff;color:#000}
.deezer   {background:#ff007a}
.nintendo {background:#e60012}

/* ===============  FOOTER  =================== */
.footer{background:#000;padding:3.5rem 0 3rem;text-align:center;font-size:.85rem;position:relative}
.payments{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.payments i{font-size:1.9rem;filter:grayscale(1) brightness(.8);transition:var(--tr)}
.payments i:hover{filter:none;transform:translateY(-3px)}
.footer small{color:var(--muted)}