/* Base */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0f0f0f;
  color: #f2f2f2;
  line-height: 1.6;
}

/* Layout helpers */
section { padding: 2rem; max-width: 800px; margin: auto; }
.container { width: min(1000px, 92vw); margin: 0 auto; }
h2 { color: #80d8ff; border-bottom: 1px solid #333; padding-bottom: 0.5rem; }
ul { list-style-type: square; padding-left: 1.5rem; }

/* Header / Footer */
header {
  background: #111;
  text-align: center;
  padding: 2rem;
  border-bottom: 2px solid #444;
}
header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
header p { font-size: 1.2rem; color: #ccc; }

footer {
  text-align: center;
  background: #111;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 0.9rem;
  border-top: 2px solid #444;
}

/* Links & CTA */
a { color: #80d8ff; text-decoration: none; }
a:hover {
  color: #4fd1c5;             /* Teal */
  text-shadow: 0 0 6px #4fd1c5;/* Soft glow */
  transition: all 0.2s ease-in-out;
}

.cta-button {
  display: inline-block;
  padding: 0.6em 1.4em;
  margin-top: 0.5em;
  background-color: #80d8ff;
  color: #000;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border: 1px solid #59c5ff;
}
.cta-button:hover { background-color: #4fc3f7; color: #000; }

/* Comparison Table */
.comparison { padding: 2rem; max-width: 1000px; margin: auto; }
.table-container { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
  background-color: #111;
  color: #f2f2f2;
  border: 1px solid #222;
}
th, td { border: 1px solid #333; padding: 0.8rem 1rem; text-align: left; }
th {
  background-color: #0c0c0c;
  color: #80d8ff;
  font-weight: bold;
}
tr:nth-child(even) { background-color: #1a1a1a; }
.table-intro { margin-top: 0.5rem; font-size: 1rem; color: #ccc; }

/* Optional: nice cards for “Explore More” boxes */
.border { border: 1px solid #2a2a2a; }
.rounded { border-radius: 10px; }
.shadow { box-shadow: 0 8px 24px rgba(0,0,0,.25); }
/* Section container (wider than your default 800px) */
.team{
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}
.team h2{
  color:#80d8ff;
  font-size:1.6rem;
  font-weight:700;
  margin:0 0 1rem 0;
  border-bottom:1px solid #333;
  padding-bottom:.6rem;
}

/* Five-column grid on desktop */
.team-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:16px;
}

/* Card */
.team-card{
  text-align:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.team-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}

/* Avatar (emoji or img) */
.avatar{
  width:64px;height:64px;margin:0 auto 10px;border-radius:50%;
  display:grid;place-items:center;font-size:28px;
  background:radial-gradient(80px 80px at 30% 30%, #1b2a3a, #0d141e);
  border:1px solid rgba(255,255,255,.12);
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

.team-card h3{font-weight:700;margin:6px 0 2px;}
.team-card .role{color:#80d8ff;font-size:.95rem;}
.team-card .tags{opacity:.85;font-size:.86rem;margin-top:4px;}

/* Responsive breakpoints */
@media (max-width:1200px){ .team-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:900px){  .team-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:680px){  .team-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:440px){  .team-grid{ grid-template-columns:1fr;} }
/* Tabs */
.tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  background:#0c0c0c; border:1px solid #333; border-radius:10px; padding:6px;
  margin-bottom:12px;
}
.tab{
  background:#111; color:#f2f2f2; border:1px solid #2a2a2a;
  padding:.6rem .9rem; border-radius:8px; cursor:pointer;
  font-weight:600; transition:filter .2s, background .2s, transform .05s;
}
.tab:hover{filter:brightness(1.1)}
.tab.is-active{background:#1a1a1a; border-color:#4fc3f7; color:#80d8ff}
.tab:focus{outline:2px solid #4fc3f7; outline-offset:2px}

/* Panels */
.tab-panels{background:#111; border:1px solid #2a2a2a; border-radius:12px; padding:16px}
.tab-panel h3{margin-top:0}
.tab-panel p{margin:.6rem 0 0}
.tab-panel ul{margin:.25rem 0 1rem 1.25rem}
@media (max-width:640px){
  .tabs{gap:6px}
  .tab{flex:1 1 auto; text-align:center}
  }
/* Tabs (existing styles OK) */
.tab-panels { background:#111; border:1px solid #2a2a2a; border-radius:12px; padding:16px; position:relative; }
.tab-panel { opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; }
.tab-panel.is-active { opacity:1; transform:none; }
.tab-loading { font-size:.95rem; color:#9cc; }

/* Optional sticky tabs bar */
#views .tabs { position:sticky; top:0; z-index:5; background:#0c0c0c; }
.disclose{margin:10px 0;border:1px solid #2a2a2a;border-radius:10px;padding:8px 10px;background:#101010}
.disclose > summary{cursor:pointer;font-weight:700;color:#80d8ff;list-style:none}
.disclose[open]{background:#0f1216}
.disclose > summary::-webkit-details-marker{display:none}
/* hero tweaks */
.hero{padding: 2.5rem 0 2rem; text-align:center; border-bottom:2px solid #2a2a2a}
.hero-logo{max-width:110px; height:auto; margin:0 auto 10px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.tagline{max-width:60ch; margin:8px auto 10px; color:#cfe7ff}

.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:10px 0 16px}
.chip{background:#111; border:1px solid #2a2a2a; color:#bfe8ff; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.95rem}

.btn-row{display:flex; gap:10px; justify-content:center; margin:8px 0 6px}
.btn-ghost{background:transparent; border:1px solid #59c5ff; color:#80d8ff}
.btn-ghost:hover{background:#102029}

.micro-proof{font-size:.9rem; color:#9ab; margin-top:8px}
.micro-proof a{color:#80d8ff; text-decoration:underline}

/* Make headline scale nicely across screens */
header.hero h1{font-size:clamp(28px,5vw,52px);letter-spacing:.2px}

/* Constrain and soften the tagline/meta line */
.hero .tagline{max-width:70ch;margin:8px auto 10px;color:#d7ecff}
.hero .meta{max-width:60ch;margin:6px auto 14px;color:#b6c8d8}

/* CTA row polish */
.hero .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:8px 0 10px}
.hero .btn-row .cta-button{min-width:210px}
.hero .btn-row .cta-button:hover{transform:translateY(-1px);transition:transform .15s ease}

/* Micro-proof line */
.hero .micro-proof{font-size:.95rem;color:#9ab;margin-top:8px}
.hero .micro-proof a{color:#8ad0ff;text-decoration:underline}

/* Mobile spacing */
@media (max-width:560px){
  .hero{padding:2rem 1rem}
}
.tagline-sub{
  display:block;
  margin-top:2px;
  color:#cfe7ff; /* keep or remove if you want same color */
}
.disclose{margin:12px 0;border:1px solid #2a2a2a;border-radius:10px;padding:10px 12px;background:#101010}
.disclose > summary{cursor:pointer;font-weight:700;color:#80d8ff;list-style:none}
.disclose > summary::-webkit-details-marker{display:none}
.disclose > summary::after{content:"▸";float:right;transition:.2s}
.disclose[open] > summary::after{transform:rotate(90deg)}
.pdf-frame{position:relative;margin-top:10px;border:1px solid #222;border-radius:8px;overflow:hidden;background:#0e0e0e}
.pdf-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9ab}
.pdf-frame.ready .pdf-loading{display:none}
.preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn-ghost{background:transparent;border:1px solid #59c5ff;color:#80d8ff}
.btn-ghost:hover{background:#102029}
@media (max-width:640px){ .pdf-frame object, .pdf-frame embed, .pdf-frame iframe{height:420px} }

.container {
  word-wrap: break-word;      /* allows long text to wrap */
  overflow-wrap: break-word;  /* modern equivalent */
}

.container em, 
.container strong {
  white-space: normal;        /* allow wrapping inside emphasis/bold */
}

code, kbd, samp {
  white-space: pre-wrap;      /* wraps inline code/math nicely */
  word-break: break-word;
}

.testnet-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 20px 0;
}
.testnet-showcase img {
  width: 100%;
  border: 1px solid #1f2a3a;
  border-radius: 12px;
  background: #0c1523;
}
.testnet-showcase figcaption {
  font-size: 13px;
  color: #9bb0cf;
  margin-top: 6px;
}
.note {
  margin-top: 18px;
  background: #0b1422;
  padding: 14px 18px;
  border: 1px solid #1f2a3a;
  border-radius: 12px;
  font-size: 14px;
  color: #c7d7ff;
}