.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.card{
  position:relative;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(25,35,58,.86), rgba(16,23,40,.78));
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand1),var(--brand3),var(--brand2));
  opacity:.78;
}
.card.soft{
  background:
    linear-gradient(135deg, rgba(255,77,109,.14), transparent 42%),
    linear-gradient(225deg, rgba(34,211,238,.12), transparent 38%),
    linear-gradient(180deg, rgba(29,39,66,.92), rgba(16,23,40,.82));
  box-shadow:var(--shadow);
}

.kpi{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  min-height:116px;
  padding:17px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow:var(--shadow2);
}
.kpi strong{font-size:30px;color:#fff}
.kpi span{display:block;color:var(--muted);font-size:13px;margin-top:6px}
.kpi .tag{
  align-self:flex-start;
  padding:5px 8px;
  border-radius:var(--radius-sm);
  background:rgba(34,211,238,.12);
  color:#9ff3ff;
  font-size:12px;
  font-weight:750;
}

.game-card{
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,38,64,.90), rgba(14,20,35,.82));
  box-shadow:var(--shadow2);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.game-card::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  opacity:.86;
}
.game-card:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,.36);
  box-shadow:0 20px 54px rgba(0,0,0,.34), 0 14px 34px rgba(34,211,238,.12);
}
.game-cover{
  position:relative;
  height:178px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,77,109,.42), transparent 46%),
    linear-gradient(225deg, rgba(34,211,238,.34), transparent 44%),
    linear-gradient(180deg, rgba(22,31,54,.98), rgba(7,10,19,.96));
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:14px;
  overflow:hidden;
  box-shadow:inset 0 -70px 80px rgba(0,0,0,.28);
}
.game-cover.has-image{
  background-image:
    linear-gradient(180deg, rgba(5,8,17,.10), rgba(5,8,17,.78)),
    var(--cover-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.game-cover::after{
  content:"";
  position:absolute;left:14px;right:14px;bottom:12px;height:2px;
  background:linear-gradient(90deg,var(--brand1),var(--brand3),var(--brand2));
  opacity:.78;
}
.game-cover > *{position:relative;z-index:1}

.hero-illus{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
}
.game-cover .mono{
  max-width:62%;
  font-weight:900;
  letter-spacing:0;
  font-size:13px;
  color:#fff;
  text-shadow:0 10px 26px rgba(0,0,0,.48);
}
.badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:var(--radius-sm);
  font-size:12px;font-weight:800;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(6,10,20,.70);
  color:#fff;
  box-shadow:0 10px 18px rgba(0,0,0,.22);
}
.badge.live{border-color:rgba(34,211,238,.42);background:rgba(34,211,238,.18);color:#c8fbff}
.badge.test{border-color:rgba(250,204,21,.46);background:rgba(250,204,21,.18);color:#fff1a8}

.list{
  display:flex;flex-direction:column;gap:12px;
}
.news-item{
  position:relative;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(25,35,58,.86), rgba(16,23,40,.76));
  border-radius:var(--radius);
  padding:16px 18px 16px 22px;
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.news-item::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--brand1),var(--brand3),var(--brand2));
}
.news-item header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.news-item time{font-size:12px;color:var(--subtle);font-weight:750}
.news-item h3{margin:9px 0 6px;color:#fff}

.timeline{position:relative;padding-left:18px}
.timeline::before{
  content:"";
  position:absolute;left:6px;top:4px;bottom:4px;
  width:2px;background:linear-gradient(180deg,var(--brand1),var(--brand2));
}
.timeline-item{position:relative;padding:10px 0 12px 14px}
.timeline-item::before{
  content:"";
  position:absolute;left:-2px;top:19px;
  width:10px;height:10px;border-radius:50%;
  background:var(--brand3);
  box-shadow:0 0 0 4px rgba(250,204,21,.16);
}
.timeline-item .when{font-size:12px;color:#9ff3ff;font-weight:850}
.timeline-item h3{margin:6px 0 6px}

.jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.job-card ul{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.job-card li{margin:6px 0}

.contact-grid{display:grid;grid-template-columns: .92fr 1.08fr;gap:18px;align-items:start}
.contact-form label{display:block;font-size:13px;color:#d9e6f8;margin:10px 0 6px;font-weight:750}
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding:12px 12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:var(--text);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:rgba(217,230,248,.48)}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:none;
  box-shadow:var(--ring);
  border-color:rgba(34,211,238,.42);
}
.contact-form select option{background:#101725;color:#fff}
.contact-form textarea{min-height:128px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-hint{font-size:12px;color:var(--subtle);margin-top:10px}
.form-error{color:#ff9aae;font-size:12px;margin-top:10px;display:none}
.form-success{color:#9ff3ff;font-size:12px;margin-top:10px;display:none}

.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 960px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .jobs{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

@media (max-width: 720px){
  .game-cover{height:156px}
  .kpi{min-height:auto}
}