/* ============================================================
   KEY4GAMES — homepage sections
   ============================================================ */

/* mode toggle */
.mode-row{display:flex;justify-content:center;margin-top:26px}
.mode{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.mode a,.mode button{padding:9px 22px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px;transition:.25s}
.mode a:hover{color:var(--text)}
.mode a svg,.mode button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode .active,.mode button.active{background:var(--grad);color:#fff;box-shadow:0 6px 18px -6px rgba(139,92,246,.55)}

/* hero */
.hero{text-align:center;margin-top:26px}
.hero h1{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(22px,3.4vw,32px);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hero p{color:var(--muted);max-width:640px;margin:10px auto 0;font-size:14px}
.hero-grid{display:grid;grid-template-columns:2.05fr 1fr;gap:20px;margin-top:28px}
.promo{position:relative;border-radius:18px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;padding:28px;box-shadow:var(--shadow)}
.promo .ring{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none}
.promo .glow{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.promo-content{position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);padding:6px 12px;border-radius:99px;backdrop-filter:blur(6px)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--solar);box-shadow:0 0 10px var(--solar)}
.promo h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.04;letter-spacing:.03em;text-transform:uppercase;margin:14px 0 8px;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.promo .sub{color:rgba(255,255,255,.75);font-size:14px;margin-bottom:18px}

/* hero side card — "How buying works".
   Replaces the cashback promo (gold coins, "Up to 10% Cashback") that advertised a
   loyalty programme with no ledger, no rules page and no link anywhere in the system.
   It occupies the same grid cell and stretches to the promo's height, so the hero row
   stays balanced; the steps are the checkout flow as it really runs today.
   Colour comes from tokens: a flat --panel2 fill lands first as the fallback, and the
   layered accent gradient overrides it wherever color-mix() is supported. */
.hero-steps{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel2);
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--ice) 14%, transparent), transparent 55%),
    radial-gradient(100% 100% at 6% 100%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 60%),
    linear-gradient(160deg, var(--panel2), var(--bg2));
  display:flex;flex-direction:column;gap:16px;padding:26px;box-shadow:var(--shadow);
  text-align:left} /* .hero centres its children; numbered steps have to read left */
.hs-label{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--solar)}
.hs-list{list-style:none;counter-reset:hs;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.hs-list li{counter-increment:hs;position:relative;padding-left:36px}
.hs-list li::before{content:counter(hs);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-family:'Space Grotesk','Inter',sans-serif;font-size:12px;font-weight:700;color:var(--text);
  border:1px solid var(--line2);
  border-color:color-mix(in srgb, var(--violet) 45%, transparent);
  background:color-mix(in srgb, var(--violet) 20%, transparent)}
.hs-list b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.hs-list span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45;margin-top:3px}
.hs-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--violet)}
.hs-link:hover{color:var(--text)}
.hs-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* quick categories */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.quick{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:.25s;position:relative;overflow:hidden}
.quick::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 60px at 100% 0%, rgba(139,92,246,.14), transparent 70%);opacity:0;transition:.25s}
.quick:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.45)}
.quick:hover::after{opacity:1}
.quick .qicon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.quick .qicon svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qi1{background:linear-gradient(135deg,#8b5cf6,#5b34c9)}
.qi2{background:linear-gradient(135deg,#e14bc8,#9c2a92)}
.qi3{background:linear-gradient(135deg,#ff8a4c,#e0512f)}
.qi4{background:linear-gradient(135deg,#3aa7e8,#2563b8)}
.quick b{display:block;font-size:14px;font-weight:600}
.quick small{color:var(--muted);font-size:12px}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 30px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(139,92,246,.09),rgba(255,255,255,.02))}
.titem{display:flex;align-items:center;gap:14px;justify-content:center}
.ticon{width:46px;height:46px;border-radius:12px;border:1px solid rgba(139,92,246,.4);background:rgba(139,92,246,.1);display:grid;place-items:center;flex-shrink:0}
.ticon svg{width:21px;height:21px;stroke:var(--violet);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.titem b{display:block;font-size:14px;font-weight:600}
.titem small{color:var(--muted);font-size:12px}

/* duo banners */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo-card{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);padding:28px;min-height:180px;display:flex;flex-direction:column;justify-content:center;gap:8px;transition:.25s;box-shadow:var(--shadow)}
.duo-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.45)}
.duo-card h3{font-family:'Space Grotesk','Inter',sans-serif;font-size:21px;font-weight:700;letter-spacing:.04em}
.duo-card p{color:var(--muted);font-size:13.5px;max-width:62%}
.duo-card .count{margin-top:10px;display:inline-flex;width:fit-content;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line2);padding:6px 12px;border-radius:99px}
.duo-card .count i{font-style:normal;color:var(--solar)}
.duo-art{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:180px;height:auto;opacity:.95;pointer-events:none}
.d1{background:radial-gradient(120% 140% at 100% 0%,rgba(139,92,246,.3),transparent 55%),linear-gradient(140deg,#161230,#0d0f1c)}
.d2{background:radial-gradient(120% 140% at 100% 0%,rgba(225,75,200,.24),transparent 55%),linear-gradient(140deg,#1d102a,#0e0d1a)}
.d3{background:radial-gradient(120% 140% at 100% 0%,rgba(58,167,232,.25),transparent 55%),linear-gradient(140deg,#0f1a30,#0d0f1c)}
.d4{background:radial-gradient(120% 140% at 100% 0%,rgba(255,138,76,.22),transparent 55%),linear-gradient(140deg,#221410,#0e0d18)}

/* mid banner */
.midbanner{position:relative;overflow:hidden;border-radius:20px;text-align:center;padding:54px 30px;border:1px solid var(--line);background:
  radial-gradient(70% 120% at 15% 0%,rgba(139,92,246,.3),transparent 55%),
  radial-gradient(70% 120% at 85% 100%,rgba(225,75,200,.22),transparent 55%),
  linear-gradient(150deg,#141026,#0c0e1a)}
.midbanner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 100% at 50% 50%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(70% 100% at 50% 50%,#000 30%,transparent 100%)}
.midbanner h2{position:relative;font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(20px,3vw,30px);font-weight:700;letter-spacing:.05em}
.midbanner h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.midbanner p{position:relative;color:var(--muted);margin-top:10px;font-size:14px}

/* value banner (was the deals/countdown block — countdown removed as fake urgency) */
.deals{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:#0c0e18;min-height:280px;display:flex;align-items:center;justify-content:center;text-align:center;padding:44px 24px;box-shadow:var(--shadow)}
.deals::before,.deals::after{content:"";position:absolute;top:0;bottom:0;width:32%;pointer-events:none}
.deals::before{left:0;clip-path:polygon(0 0,100% 0,55% 100%,0 100%);background:radial-gradient(120% 120% at 0% 20%,rgba(139,92,246,.7),transparent 60%),linear-gradient(120deg,#241543,#12101f)}
.deals::after{right:0;clip-path:polygon(45% 0,100% 0,100% 100%,0 100%);background:radial-gradient(120% 120% at 100% 80%,rgba(225,75,200,.55),transparent 60%),linear-gradient(240deg,#2a1130,#140f1e)}
.deals-inner{position:relative;z-index:2;max-width:560px}
.deals-inner h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.deals-inner p{color:var(--muted);font-size:13.5px;margin:10px 0 22px}
.value-points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 26px;padding:0}
.value-points li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:99px;padding:9px 16px;font-size:12.5px;font-weight:600;color:var(--text);backdrop-filter:blur(4px)}
.value-points svg{width:15px;height:15px;stroke:var(--solar);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* platforms */
.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plat{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.25s;position:relative;overflow:hidden}
.plat::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 60px at 100% 0%,rgba(139,92,246,.14),transparent 70%);opacity:0;transition:.25s}
.plat:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.5)}
.plat:hover::after{opacity:1}
.plat-ico{width:44px;height:44px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0}
.plat-ico svg{width:20px;height:20px;stroke:var(--violet);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plat-tx{min-width:0}
.plat-tx b{font-size:14.5px;font-weight:600;letter-spacing:.02em}
.plat-tx small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* news */
.ncard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.ncard:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.5)}
.ncover{position:relative;aspect-ratio:16/8.2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ncover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ncover::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 30%,transparent 40%,rgba(5,6,12,.5) 100%)}
.nbody{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.nmeta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:11.5px;font-weight:500}
.nmeta span{display:inline-flex;align-items:center;gap:5px}
.nmeta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nbody h3{font-size:15px;font-weight:600;line-height:1.4}
.nbody p{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.readmore{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--violet)}
.readmore svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:1fr;gap:14px}
  .titem{justify-content:flex-start}
  .duo{grid-template-columns:1fr}
  .duo-card p{max-width:100%}
}
@media (max-width:640px){
  .plat-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}
  .deals::before,.deals::after{width:26%;opacity:.6}
  .promo{min-height:250px;padding:20px}
  .duo-art{width:120px;opacity:.4}
  .hero-steps{padding:20px}
}
@media (max-width:480px){
  .mode-row{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .mode{flex-shrink:0}
  .mode a{padding:8px 15px;font-size:12.5px;white-space:nowrap}
}