/* ===== TRILANE — shared site styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap');

:root{
  --bg:#05060f;
  --panel:#0b0d1c;
  --lane:#0d1024;
  --player:#00f0ff;
  --player-glow:#00f0ff;
  --danger:#ff2d6f;
  --coin:#ffd23f;
  --text:#e8f0ff;
  --muted:#7e8bb8;
  --dim:#5d6896;
  --border:#1c2240;
  --maxw:920px;
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  min-height:100%; background:
    radial-gradient(circle at 50% -10%, #15183a 0%, transparent 45%),
    radial-gradient(circle at 50% 120%, #1a0a24 0%, transparent 45%),
    var(--bg);
  color:var(--text); font-family:'Rajdhani',sans-serif; line-height:1.7;
  font-size:18px; -webkit-font-smoothing:antialiased;
}

/* ---- nav ---- */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(5,6,15,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:1.35rem; letter-spacing:.08em;
  color:var(--player); text-decoration:none; text-shadow:0 0 14px var(--player-glow);
}
.brand .b{ color:var(--danger); text-shadow:0 0 14px var(--danger); }
.nav-links{ display:flex; gap:clamp(10px,2.5vw,28px); align-items:center; }
.nav-links a{
  color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem;
  letter-spacing:.04em; text-transform:uppercase; transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--player); }

/* ---- layout ---- */
main{ max-width:var(--maxw); margin:0 auto; padding:clamp(24px,5vw,56px) clamp(16px,4vw,32px) 80px; }
.content h1{
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(2rem,6vw,3rem);
  letter-spacing:.04em; line-height:1.1; margin-bottom:.5em; color:var(--text);
  text-shadow:0 0 22px rgba(0,240,255,.25);
}
.content h2{
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:clamp(1.3rem,4vw,1.8rem);
  letter-spacing:.03em; margin:1.6em 0 .5em; color:var(--player);
}
.content h3{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.15rem; margin:1.3em 0 .4em; color:var(--text); }
.content p{ margin:0 0 1.1em; color:#c3cdec; }
.content ul, .content ol{ margin:0 0 1.3em 1.4em; color:#c3cdec; }
.content li{ margin-bottom:.5em; }
.content a{ color:var(--player); text-decoration:none; border-bottom:1px solid rgba(0,240,255,.3); }
.content a:hover{ border-bottom-color:var(--player); }
.content strong{ color:var(--text); }
.lead{ font-size:1.15rem; color:var(--muted) !important; margin-bottom:1.6em; }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:clamp(18px,4vw,30px); margin:1.4em 0;
}

/* ---- footer ---- */
.site-footer{
  border-top:1px solid var(--border); background:rgba(5,6,15,.6);
  padding:32px clamp(16px,4vw,40px); margin-top:40px;
}
.footer-inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:20px; align-items:center; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ color:var(--muted); text-decoration:none; font-size:.9rem; letter-spacing:.04em; }
.footer-links a:hover{ color:var(--player); }
.footer-copy{ color:var(--dim); font-size:.85rem; }

/* ---- ad slots ---- */
.ad-zone{
  max-width:var(--maxw); margin:28px auto; padding:0 16px;
  display:flex; flex-direction:column; align-items:center;
}
.ad-zone .ad-note{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.ad-box{
  width:100%; max-width:728px; min-height:90px;
  border:1px dashed #2a3157; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:#3c4470; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
}

@media (max-width:600px){
  body{ font-size:17px; }
  .nav-links a{ font-size:.82rem; }
}

/* ---- faq ---- */
.faq-section {
  margin: 2em 0;
}
.faq-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] {
  border-color: var(--player);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.12);
}
.faq-item summary {
  padding: 16px 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--player);
  font-family: 'Orbitron', sans-serif;
  transition: transform 0.25s ease, color 0.25s ease;
  line-height: 1;
}
.faq-item[open] summary::after {
  content: '−';
  color: var(--danger);
  transform: rotate(180deg);
}
.faq-item .faq-content {
  padding: 0 20px 16px;
  color: #c3cdec;
  font-size: 0.95rem;
  line-height: 1.6;
}
.faq-item .faq-content p {
  margin: 0;
}
.faq-item[open] .faq-content {
  animation: faqSlideDown 0.25s ease-out;
}
@keyframes faqSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}