/* Shared site chrome: header, footer, nav, colors, and responsive breakpoints.
   This is the single source of truth for markup that's dynamically rendered
   by chrome.js and layout/styling shared across all pages. Each page's own
   <style> block handles page-specific components (features, cards, grids, etc).
*/

:root{
  --bg:#0B0C10;
  --panel:#15181D;
  --panel-2:#1F2833;
  --border:#2B343D;
  --accent:#66FCF1;
  --accent-dim:#2F6F6C;
  --text:#D9E4E6;
  --text-dim:#8A99A3;
  --text-faint:#5C6B74;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
}

h1,h2,h3,.logotype{font-family:'Cinzel',serif;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

.wip-banner{
  background:var(--panel-2);
  color:var(--accent);
  text-align:center;
  font-size:13px;
  font-weight:700;
  padding:10px 16px;
  letter-spacing:0.01em;
  border-bottom:1px solid var(--accent-dim);
  box-shadow:0 1px 14px rgba(102,252,241,0.15);
}

header.nav{background:rgba(11,12,16,0.9);border-bottom:1px solid var(--border);}

.nav-inner{
  max-width:1180px;margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;
}

.brand{display:flex;align-items:center;gap:12px;}

.mark{
  width:42px;height:42px;display:block;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(102,252,241,0.45));
}

.wordmark{font-size:20px;letter-spacing:0.02em;font-weight:700;color:#F3FAFA;}
.wordmark .ae{color:var(--accent);text-shadow:0 0 10px rgba(102,252,241,0.6);}

.beta-badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-dim);border-radius:999px;
  padding:3px 8px;margin-left:10px;
}

nav.links{display:flex;gap:30px;font-size:14px;color:var(--text-dim);}
nav.links a{text-decoration:none;border:none;white-space:nowrap;color:inherit;font-weight:inherit;}
.nav-inner .btn{white-space:nowrap;}
nav.links a:hover{color:var(--accent);}
nav.links a.current{color:var(--accent);}

nav.links a.nav-support{
  color:var(--accent);border:1px solid var(--accent-dim);border-radius:999px;
  padding:4px 12px;margin:-4px 0;
}
nav.links a.nav-support:hover{background:rgba(102,252,241,0.08);}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:4px;
  font-family:'Inter',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:0.02em;
}

.btn-primary{
  background:var(--accent);
  color:#06161A;
  box-shadow:0 0 24px rgba(102,252,241,0.4);
  border:none;
}

.btn-primary:hover{box-shadow:0 0 34px rgba(102,252,241,0.65);}

footer{background:var(--panel-2);padding:44px 0 36px;border-top:1px solid var(--accent-dim);}

.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;}

.legal{font-size:11.5px;color:var(--text-faint);max-width:520px;line-height:1.7;}

.footer-links{display:flex;gap:22px;font-size:13px;color:var(--text-dim);flex-wrap:wrap;}
.footer-links a{text-decoration:none;border:none;color:inherit;font-weight:inherit;}
.footer-links a:hover{color:var(--accent);}
.footer-links .support-us-link{color:var(--accent);font-weight:600;}
.footer-links .support-us-link:hover{text-decoration:underline;}

.support-section{
  padding:40px 32px;margin-top:40px;border-top:1px solid var(--border);
  background:radial-gradient(circle at 50% 0%, rgba(102,252,241,0.05), transparent 50%);
  text-align:center;
}
.support-section h2{font-size:20px;color:#F2FAFA;margin:0 0 12px;font-weight:600;}
.support-section p{font-size:14px;color:var(--text-dim);margin:0 0 20px;}
.support-section a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-dim);}

/* Responsive breakpoints for header/nav */
@media(max-width:1060px){
  nav.links{gap:16px;}
}

@media(max-width:960px){
  nav.links{display:none;}
}

@media(max-width:560px){
  .wordmark{display:none;}
}