/* Lab 0x2A site styles (global) */

/* Base */
:root{
  --bg:#0a0b0e;
  --layer:#0b111a;
  --card:#10141c;
  --muted:#9aa3b2;
  --text:#e7ecf5;
  --brand:#7dd3fc;
  --brand-2:#60a5fa;
  --accent:#34d399;
  --ring: rgba(125,211,252,0.35);
  --shade: rgba(255,255,255,0.06);
  --grid: 1180px;
  --radius: 18px;
  --pad: clamp(18px, 2.2vw, 28px);
}
*{box-sizing:border-box}
html,body{height:100%}
body.site{
  margin:0;
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  background:var(--bg);
  letter-spacing:0.2px;
}
a{color:inherit; text-decoration:none}


.nav{padding:12px 0}
.wrap{max-width:var(--grid); margin:0 auto; padding:0 var(--pad)}

/* Header */
header.siteHeader{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(to bottom, rgba(10,11,14,0.85), rgba(10,11,14,0.60));
  border-bottom:1px solid #151821;
}
.siteHeaderTop{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
  padding:24px 0 12px;
  text-align:center;
}
.logo{
  width:100px;
  height:100px;
  background:url('../media/ICON.png') center/contain no-repeat;
  border-radius:50%;
}
.wordmark{
  width:200px;
  height:71px;
  background:url('../media/ICON2.png') center/contain no-repeat;
}
.site-title{
  font-family:'OCR A Extended', monospace;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #e7ecf5;
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
}
.site-subtitle{
  font-size: clamp(16px, 2vw, 20px);
  color: #aab6c8;
  margin: 4px 0 0;
  font-weight: 500;
}

.menu{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:8px;
}
.menu a{
  color:var(--muted);
  font-weight:600;
  font-size:15px;
  padding:8px 10px;
  border-radius:10px;
  text-transform:uppercase;
  letter-spacing:0.6px;
}
.menu a:hover{
  background:var(--shade);
  color:var(--text);
}
.mobile{
  display:none;
  border:1px solid #1b2030;
  padding:8px 10px;
  border-radius:10px;
  background:#0d1016;
  color:var(--text);
}

/* HERO */
.hero{position:relative; isolation:isolate; padding:84px 0 60px; text-align:center;}
.h1{font-size: clamp(34px, 5.2vw, 56px); line-height:1.05; margin:14px 0 12px; font-weight:800}
.lead{color:#c9d3e6; font-size:clamp(16px, 2.2vw, 20px); max-width:900px; margin:0 auto}
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #1b2030;
  color:#cfe4ff;
  background:#0d1117;
  font-size:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.cta{display:flex; gap:12px; margin-top:28px; justify-content:center; flex-wrap:wrap}
.btn{padding:12px 16px; border-radius:12px; font-weight:700; border:1px solid #1b2030; background:#0f141c; color:#eaf2ff; cursor:pointer}
.btn.primary{background:linear-gradient(180deg, #1a2a40, #122033); border-color:#1e2a3f}
.btn.primary:hover{box-shadow:0 0 0 6px var(--ring)}
.pill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  border-radius:10px;
  font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size:12px;
  color:#b6c3dc;
  border:1px dashed #203049;
  background:#0a101a;
}

/* Parallax layers */
.layer{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(900px 500px at 80% -10%, #0b1220 8%, transparent 60%),
              radial-gradient(1200px 600px at 10% 120%, #0c1a2a 10%, transparent 60%);
  opacity:0.8;
}
.layer.layer-2{
  background:
    radial-gradient(700px 400px at 20% -10%, rgba(125,211,252,0.12), transparent 60%),
    radial-gradient(900px 500px at 90% 120%, rgba(96,165,250,0.10), transparent 60%);
  opacity:0.6;
}

/* Sections */
.section{padding: clamp(28px, 6vw, 70px) 0}
.section h2{text-align:center; font-size:clamp(22px, 3.4vw, 32px); margin:0 0 18px}
.sub{color:var(--muted); text-align:center; margin:-8px auto 26px; max-width:820px}
.grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:linear-gradient(180deg, var(--card), #0c1017);
  border:1px solid #171c28;
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.02);
  text-align:center;
}
.ic{font-size:22px; margin-bottom:6px}
.muted{color:var(--muted)}

/* Tables */
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid #1a2232}
.table th, .table td{padding:12px 14px; text-align:left; font-size:14px}
.table thead th{background:#0f1521; color:#cfe4ff; font-weight:700; border-bottom:1px solid #1a2232}
.table tbody tr:nth-child(odd){background:#0b1019}
.table tbody tr:nth-child(even){background:#0c121b}
.footnote{font-size:12px; color:var(--muted)}

/* Contact */
.cta-panel{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:18px;
  border:1px solid #203049;
  border-radius:16px;
  background:linear-gradient(180deg,#0d1624,#0a111b);
}
.contactFormRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #23314a;
  background:#0a0f17;
  color:#dbe7ff;
  outline:none;
  min-width:220px;
}
.input:focus{box-shadow:0 0 0 6px var(--ring); border-color:#2c445f}
.input.wide{min-width:320px}
.honeypot{display:none}
.contact-alt { margin-top:12px; font-size:13px; color:#9fb0c8; text-align:center; }
.contact-alt a { color:#cfe4ff; text-decoration:underline; }

/* Footer */
.footer{padding:40px 0 60px; color:#9fb0c8; border-top:1px solid #151a24}
.mono{font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing:0.2px}
.disclaimer{
  margin-top:24px;
  font-size:12px;
  color:#9fb0c8;
  border-top:1px solid #151a24;
  padding-top:16px;
  text-align:center;
  line-height:1.6;
}
.brand-row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-bottom:20px}
.brand-row p.muted{color:#cfd8e4; font-weight:600}
.footer-info{text-align:center; line-height:1.6; margin-bottom:16px}
.footer-sam{margin:18px auto 0; text-align:center; max-width:860px}
.footer-sam p{margin:0 0 8px; color:#cfd8e4; font-weight:600; font-size:13px; line-height:1.6}
.footer-sam a{color:#cfe4ff; text-decoration:underline}
.footer-links { margin:18px auto 0; text-align:center; max-width:860px; }
.footer-links a { color:#cfe4ff; text-decoration:underline; }
.footer-links .sep { color:#9fb0c8; margin:0 10px; }



/* Page content helpers for terms/privacy */
.pageContent{padding:44px 0 70px}
.pageContent .card{text-align:left}
.pageContent h2{text-align:left; margin:0 0 12px}
.pageContent ul{margin:8px 0 0 20px}
.pageContent li{margin:6px 0}

/* Responsive */
@media (max-width: 900px){
  .menu.menuOpen{display:flex; justify-content:center; align-items:center; flex-direction:column; gap:10px; padding:10px 0}
  .menu{display:none}
  .mobile{display:inline-flex}
  .cols-3,.cols-4,.cols-2{grid-template-columns:1fr}
  .logo{width:84px; height:84px}
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .layer{display:none}
}