/* =========================
   7Tribes – Global Styles
   ========================= */

/* THEME VARIABLES */
:root{
  --bg: #0d0d0d;
  --text: #111;
  --card-bg: #ffffff;
  --card-border: #eaeaea;
  --primary: #ffd700;
  --accent: #0f1b2e;
  --accent2: #1d3f72;
  --muted: #777;
}

html, body{
  margin:0; padding:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:#111;
}

/* Base containers */
.actions-row{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; align-items:center;
  margin:18px auto; padding:0 12px;
}
.card{
  max-width:1100px; margin:16px auto; padding:22px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.list{ padding-left:18px; }
.list li{ margin:8px 0; }

/* Buttons */
.etsy-btn, .social-button, .wallet-connect button, .outline-btn{
  display:inline-block; padding:12px 18px; border-radius:28px;
  text-decoration:none; font-weight:700; cursor:pointer; border:none;
}
.etsy-btn{ background:#ff9900; color:#fff; }
.etsy-btn:hover{ filter:brightness(.95); }
.social-button.telegram{ background:#0088cc; color:#fff; }
.social-button.twitter{ background:#000; color:#fff; }
.wallet-connect button{ background: var(--primary); color:#000; }
.outline-btn{
  background:transparent; border:2px solid var(--primary); color:#222;
}
.outline-btn:hover{ background:#fff5bf; }

/* Inputs */
.input, form input, form textarea{
  width:100%; padding:12px; border-radius:8px;
  border:1px solid #ddd; margin-top:10px; box-sizing:border-box;
}

/* Focus/accessibility */
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid #00aaff; outline-offset:2px;
}
/* Large tap targets */
button, .etsy-btn, .social-button{ min-height:44px; }

/* Sticky Top Navigation */
.topnav{
  position: sticky; top: 0; z-index: 999;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topnav .brand{
  color: var(--primary); font-weight:800; letter-spacing:.3px; text-decoration:none;
}
.topnav .links a{
  color:#fff; text-decoration:none; margin-left:14px; font-weight:600; opacity:.9;
}
.topnav .links a:hover{ opacity:1; text-decoration:underline; }
.theme-toggle{
  margin-left:10px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; border-radius:8px; padding:6px 10px; cursor:pointer;
}

/* Light theme */
html[data-theme="light"]{
  --bg:#f7f8fb;
  --text:#111;
  --card-bg:#ffffff;
  --card-border:#dfe3ea;
}
html[data-theme="light"] .theme-toggle{ color:#111; border-color: rgba(0,0,0,.2); }

/* Hero */
.hero{ position:relative; margin-top:6px; }
.hero .banner{
  width:100%; height:auto; max-height:360px; object-fit:cover; display:block;
}
@media (max-width:768px){
  .hero .banner{ max-height:220px; }
}
.logo-container{
  position:absolute; left:50%; top:40%;
  transform:translate(-50%,-50%); text-align:center;
}
.logo{ width:220px; height:auto; border-radius:16px; }
.sub-hero{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  text-align:center; color:#fff; padding:10px 16px;
  background: rgba(0,0,0,.35); border-radius:12px; backdrop-filter: blur(4px);
}
.sub-hero h1{ margin:0 0 4px; font-size:28px; }
.sub-hero p{ margin:0; opacity:.9; }

.net-hint{ text-align:center; color:var(--muted); margin:6px 0 18px; }

/* KPI boxes */
.kpis{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.kpi{
  background:#0f1b2e; color:#fff; border-radius:14px; padding:18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.kpi .kpi-label{ font-size:13px; opacity:.85; }
.kpi .kpi-value{ font-size:28px; font-weight:800; margin-top:4px; }
.kpi .kpi-value.small{ font-size:18px; word-break: break-all; }
.kpi .kpi-sub{ font-size:13px; margin-top:6px; opacity:.9; }
.kpi a{ color:#8fd3ff; text-decoration:none; }
.kpi a:hover{ text-decoration:underline; }
@media (max-width: 900px){ .kpis{ grid-template-columns: 1fr; } }

/* Participation (gradient card) */
.participation{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
}
.participation h2, .participation p, .participation li{ color:#fff; }
.wallet-readout{ text-align:center; margin-top:12px; }
#wallet-network, #wallet-address, #token-balance{ margin:6px 0; font-weight:600; }

/* Roadmap tiles */
.roadmap{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;
}
.rm-tile{
  background:#fff; border-radius:12px; padding:16px;
  border:1px solid #eaeaea; box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.rm-tile h3{ margin:0 0 6px; font-size:18px; }
@media (max-width: 900px){
  .roadmap{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .roadmap{ grid-template-columns: 1fr; }
}

/* Partners / Press */
.partner-grid{
  display:grid; grid-template-columns: repeat(6, 1fr);
  gap:16px; align-items:center; justify-items:center;
}
.partner img{ max-width:140px; max-height:54px; opacity:.9; transition:opacity .2s ease, transform .2s ease; }
.partner:hover img{ opacity:1; transform: scale(1.03); }
@media (max-width:1100px){ .partner-grid{ grid-template-columns: repeat(4,1fr); } }
@media (max-width:700px){  .partner-grid{ grid-template-columns: repeat(2,1fr); } }

/* FAQ collapsibles */
#faq details { border:1px solid #e6e6e6; border-radius:10px; padding:12px 14px; margin:10px 0; background:#fff; }
#faq summary { cursor:pointer; font-weight:700; }
#faq details[open] { background:#f9fbff; border-color:#dce8ff; }
#faq p { margin:8px 0 0; }

/* Keep cards above hero overlay */
header.hero{ position:relative; z-index:0; }
header.hero::after{ z-index:0; }
section.card{ position:relative; z-index:1; }

/* Back-to-Top Button */
#toTop{
  position: fixed; right: 16px; bottom: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 18px; font-weight: 800;
  background: var(--primary); color:#000; box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity:0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
#toTop.show{ opacity:1; transform: translateY(0); pointer-events:auto; }
#toTop:hover{ box-shadow: 0 12px 28px rgba(0,0,0,.28); }

/* Scroll-in animation */
.fade-up{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in{ opacity:1; transform: translateY(0); }
/* Ensure Join form input is visible */
#join .join-form .input {
  display:block;
  width:100%;
  max-width:520px;
  margin:.5rem 0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #2a2a2f;
  background:#0f0f13;
  color:#fff;
}
#join .join-form .input::placeholder {
  color:#a2a2aa;
}
/* =========================
   7TRB Premium Gold Theme
   ========================= */

:root{
  --bg: #050508;
  --text: #f7f3e8;
  --card-bg: #15100c;
  --card-border: #3b2a14;
  --primary: #f6c453;
  --accent: #231309;
  --accent2: #5c3b14;
  --muted: #b7a892;
}

html, body{
  background: radial-gradient(circle at top, #2b1a0a 0, #050508 55%, #000 100%);
  color: var(--text);
}

/* Cards: deep gold glass */
.card{
  background: radial-gradient(circle at top left, rgba(246,196,83,0.12), transparent 55%),
              rgba(10,6,3,0.96);
  border: 1px solid rgba(246,196,83,0.30);
  color: var(--text);
}

/* Top nav */
.topnav{
  background: rgba(0,0,0,0.92);
  border-bottom: 1px solid rgba(246,196,83,0.35);
}
.topnav .links a{ color:#f7f3e8; }

/* Buttons */
.etsy-btn{
  background: linear-gradient(135deg,#f6c453,#ffdd80);
  color:#221308;
}
.outline-btn{
  border-color: #f6c453;
  color:#f7f3e8;
}
.outline-btn:hover{
  background: rgba(246,196,83,0.12);
}

/* Hero overlay text */
.sub-hero{
  background: linear-gradient(120deg, rgba(0,0,0,0.85), rgba(35,19,9,0.9));
}

/* Tables & lists in dark cards */
table{
  width:100%;
  border-collapse: collapse;
  margin-top:14px;
  font-size:0.95rem;
}
table th, table td{
  border:1px solid #3b2a14;
  padding:8px 10px;
}
table th{
  background:#231309;
  color:#f6c453;
}
table tr:nth-child(even){
  background:#120c08;
}

/* Footer */
footer.card{
  background:#050508;
  border-top:1px solid rgba(246,196,83,0.3);
}
footer a{ color:#f6c453; text-decoration:none; }
footer a:hover{ text-decoration:underline; }