/*
Theme Name: CyberStars
Theme URI: https://cyberstars.lv
Author: CyberStars Team
Description: We do SEO for power.
Version: 1.4
License: GNU General Public License v2 or later
Text Domain: cyberstars
Tags: cyberstars
*/
:root{
  --bg: #06070a;
  --panel: #0a0c12;
  --line: rgba(0,200,216,0.12);
  --accent-cyan: #00c8d8;
  --accent-purple: #9b2bff;
  --text: #e7f8fa;
  --muted:#9aa3ad;
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(1200px 600px at 70% -10%, rgba(155,43,255,0.10), transparent 60%), linear-gradient(180deg,#05060a 0%, #030306 100%); color:var(--text); font-family:Inter,Segoe UI,Roboto,system-ui,-apple-system,'Helvetica Neue',Arial;}
a{color:var(--accent-cyan);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:28px 32px}
.header{position:sticky;top:0;background:linear-gradient(180deg, rgba(3,4,7,0.9), rgba(3,4,7,0.6));backdrop-filter: blur(8px);border-bottom:1px solid rgba(255,255,255,0.05);z-index:100}
.header-inner{display:flex;align-items:center;gap:20px}
.header img{height:72px}
.brand{font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent-cyan)}
.menu{margin-left:auto;display:flex;gap:18px}
.menu a{padding:10px 12px;border-radius:10px;background:transparent;border:1px solid transparent}
.menu a:hover{border-color:rgba(255,255,255,0.08);background:rgba(255,255,255,0.02)}
.hero{position:relative;overflow:hidden;z-index:2}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:80px 0 60px}
.grid-bg{position:absolute;inset:0;background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 60% 40%, black 40%, transparent 70%); opacity:.45; pointer-events:none !important; z-index:0;}
.h1{font-size:56px;line-height:1.05;margin:0 0 12px; background: linear-gradient(90deg,var(--accent-cyan), var(--accent-purple)); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow: 0 10px 50px rgba(0,200,216,0.15); position:relative; z-index:3;}
.lead{font-size:18px;color:var(--muted);max-width:64ch; position:relative; z-index:3;}
.cta-row{display:flex;gap:16px;margin-top:18px; position:relative; z-index:2147483646; isolation:isolate;}
.btn{ display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700; border:1px solid rgba(255,255,255,0.08);background:linear-gradient(90deg, rgba(0,200,216,0.18), rgba(155,43,255,0.18)); box-shadow:0 10px 30px rgba(155,43,255,0.15); color:var(--text); position:relative; z-index:2147483647; pointer-events:auto !important;}
.btn.ghost{background:transparent}
.panel{ background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:18px 18px; position:relative; z-index:3;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.05); background:linear-gradient(180deg, rgba(0,200,216,0.05), rgba(155,43,255,0.04));}
.card h3{margin:0 0 6px;color:var(--accent-cyan);font-size:18px}
.kv{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{padding:6px 10px;border-radius:999px;background:var(--glass);color:var(--muted);font-size:12px;border:1px solid rgba(255,255,255,0.06)}
.section{padding:42px 0}
.section h2{margin:0 0 14px;font-size:24px;color:var(--accent-purple)}
.footer{border-top:1px solid rgba(255,255,255,0.06);color:var(--muted);font-size:13px;padding:28px 0;text-align:center;margin-top:40px; position:relative; z-index:2}

/* Modal (ACCESS DENIED) — keep above everything */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter: blur(4px);display:none;align-items:center;justify-content:center;z-index:2147483600}
.modal-backdrop.active{display:flex}
.modal-card{width:min(520px,92vw);border-radius:16px;
  background: radial-gradient(120% 180% at 0% 0%, rgba(0,200,216,0.10), transparent 60%), 
              radial-gradient(120% 180% at 100% 100%, rgba(155,43,255,0.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,200,216,0.08);
  color: var(--text);
  padding: 24px;
  position: relative;
}
.modal-title{ font-weight:800;letter-spacing:2px;text-transform:uppercase;margin:0 0 10px; background: linear-gradient(90deg,var(--accent-cyan), var(--accent-purple)); -webkit-background-clip:text;background-clip:text;color:transparent;}
.modal-body{color:var(--muted);font-size:14px;line-height:1.6}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.btn-outline{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.18);background:transparent;color:var(--text);}
.btn-primary{padding:10px 14px;border-radius:10px;border:1px solid rgba(0,200,216,0.25); background: linear-gradient(90deg, rgba(0,200,216,0.25), rgba(155,43,255,0.25));}
.modal-close{position:absolute;top:10px;right:12px;border:none;background:transparent;color:var(--text);font-size:20px;cursor:pointer;opacity:.8}
.modal-close:hover{opacity:1}

/* Last resort: ensure CTAs always clickable over rogue overlays */
.cta-row, .cta-row *{ pointer-events:auto !important; }

@media (max-width:1000px){ .hero .wrap{grid-template-columns:1fr;}.grid{grid-template-columns:repeat(2,1fr);} .header img{height:58px} }
@media (max-width:640px){ .grid{grid-template-columns:1fr;} .h1{font-size:40px} }