/* GamePort Dark Theme */
/* Local fonts */
@font-face{font-family:"Poppins";src:url('/fonts/Poppins/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url('/fonts/Poppins/Poppins-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{--bg:#0b0e13;--fg:#e7ecf2;--muted:#a7b1bd;--accent:#00e68a;--amber:#ff9b35;--card:#121722;--edge:#1a2230;--ok:#34d399;--warn:#f59e0b;--busy:#60a5fa;--danger:#ef4444}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0e0e12;color:var(--fg);font:16px/1.65 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:#7ee8ff}

/* Layout */
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
header.site-header{position:sticky;top:0;z-index:1000;background:rgba(11,14,19,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--edge)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:28px;height:28px;border-radius:6px;object-fit:contain;box-shadow:0 0 14px rgba(0,230,138,.35)}
.brand-title{font-weight:700;letter-spacing:.3px}
.menu{display:none}

/* Burger and overlay */
.burger{width:40px;height:40px;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;background:#12161e;border:1px solid var(--edge);border-radius:10px;cursor:pointer}
.burger span{height:2px;background:var(--fg);display:block;border-radius:2px}
.overlay{position:fixed;inset:0;background:rgba(7,10,14,.92);backdrop-filter:blur(8px);display:none;z-index:1100}
.overlay.open{display:flex}
.overlay-inner{margin:auto;width:min(92%,520px);display:flex;flex-direction:column;gap:16px;background:#0d1117;border:1px solid var(--edge);border-radius:16px;padding:16px;box-shadow:0 12px 48px rgba(0,0,0,.55)}
.overlay-close{align-self:flex-end;background:none;border:0;color:var(--fg);font-size:26px;cursor:pointer}
.overlay-menu{display:flex;flex-direction:column;gap:10px}
.overlay-menu a{padding:12px 14px;border:1px solid var(--edge);border-radius:12px;background:#111722;color:var(--fg);box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.35)}
.overlay-menu a:hover{background:#151b24;border-color:#263044}
.overlay-cta{margin-top:8px}

/* Hero */
.hero{padding:56px 0;background:radial-gradient(1200px 600px at 80% -10%,rgba(0,212,255,.08),transparent 60%),radial-gradient(900px 500px at -10% 20%,rgba(255,155,53,.08),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero-visual img{border-radius:16px;border:1px solid var(--edge);background:#0d1117;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero h1{font-size:40px;line-height:1.2;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--edge);background:#12151c;color:var(--fg);cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px);border-color:#2a3042}
.btn-primary{background:linear-gradient(135deg,#0a2b20,#0c241a);border-color:#0d3b2a;box-shadow:0 0 0 1px rgba(0,230,138,.25) inset,0 0 24px rgba(0,230,138,.12)}
.btn-primary .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.btn-cta{background:linear-gradient(135deg,#0f3b2c,#143a2f);border-color:#0d3b2a;box-shadow:0 0 0 1px rgba(0,230,138,.35) inset,0 0 30px rgba(0,230,138,.2);color:#eafff6}
.btn-amber{background:linear-gradient(135deg,#2b1f0a,#1d1406);border-color:#3a2a12;box-shadow:0 0 0 1px rgba(255,155,53,.25) inset,0 0 24px rgba(255,155,53,.12)}

/* Sections */
section{padding:42px 0;border-top:1px solid var(--edge)}
section .section-head{margin:0 0 14px}
section .section-lead{color:var(--muted);margin:0 0 18px}

/* Cards and grids */
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--edge);border-radius:14px;overflow:hidden}
.card-body{padding:14px}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:#b7c1ce}
.badge{padding:3px 8px;border-radius:999px;border:1px solid var(--edge);background:#11151c}
.price{font-weight:700}
.strike{color:#94a3b8;text-decoration:line-through;margin-left:6px}

/* Marquee */
.marquee{position:relative;overflow:hidden;border:1px dashed #1e2634;border-radius:12px;background:linear-gradient(180deg,#0f131a,#0c0f15)}
.marquee-track{display:flex;gap:24px;white-space:nowrap;animation:scroll 28s linear infinite;padding:10px}
.marquee-item{color:#bfefff}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Accordion */
.accordion{border:1px solid var(--edge);border-radius:12px;overflow:hidden}
.acc-item+.acc-item{border-top:1px solid var(--edge)}
.acc-btn{width:100%;text-align:left;padding:14px 16px;background:#12161e;color:var(--fg);border:0;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.acc-panel{display:none;padding:0 16px 16px;color:var(--muted)}
.acc-item.active .acc-panel{display:block}

/* Tables */
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--edge);border-radius:12px;overflow:hidden}
th,td{padding:10px;border-bottom:1px solid var(--edge);text-align:left}
tr.highlight td{background:#111826}

/* Forms */
form{display:grid;gap:12px}
input,select,textarea{background:#0f131a;border:1px solid var(--edge);border-radius:10px;color:var(--fg);padding:10px}
input:focus,select:focus,textarea:focus{outline:1px solid var(--accent);border-color:#1d4754}
.form-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.form-row > div{display:flex;flex-direction:column;gap:6px}
input,select,textarea{min-height:42px}
.form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
textarea{min-height:120px}
.btn{min-height:44px}
.section-media{margin:14px 0}
.section-media img{border-radius:12px;border:1px solid var(--edge);background:#0d1117}
.mt-5{margin-top:22px}
.mt-6{margin-top:28px}
.mb-4{margin-bottom:18px}

/* Stacked form layout */
.form-stacked .form-row{grid-template-columns:1fr}
.form-stacked .form-actions{flex-direction:column;align-items:flex-start}
.form-stacked label{font-weight:600}
.form-stacked input,.form-stacked select,.form-stacked textarea{width:100%}

/* Consent checkbox */
.consent{display:flex;align-items:center;gap:10px;line-height:1.3;font-weight:400}
.consent input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent);vertical-align:middle}
.consent span{margin:0;padding:0}
.consent a{text-decoration:underline}
.hint{color:#9aa7b6;font-size:13px}
.status-bar{display:flex;gap:10px;flex-wrap:wrap}
.dot-ok{width:10px;height:10px;border-radius:50%;background:var(--ok);display:inline-block}
.dot-warn{width:10px;height:10px;border-radius:50%;background:var(--warn);display:inline-block}
.dot-busy{width:10px;height:10px;border-radius:50%;background:var(--busy);display:inline-block}
.dot-danger{width:10px;height:10px;border-radius:50%;background:var(--danger);display:inline-block}

/* Footer */
footer.site-footer{border-top:1px solid var(--edge);padding:20px 0;background:#0d1016;color:#aeb8c6}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.foot a{color:#d5dde7}
.foot a:hover{color:#fff}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.center{display:flex;justify-content:center;align-items:center}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:18px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:18px}

@media (max-width:960px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero h1{font-size:32px}
}