/* Zeitgeist — shared styles (dark tech / signal-processing theme) */

:root{
  --bg:#0a0e13;
  --bg-alt:#10171e;
  --card:#141b23;
  --card-2:#182029;
  --ink:#e7edf3;
  --ink-soft:#8ea0b0;
  --line:rgba(255,255,255,0.10);
  --accent:#38bdf8;
  --accent-bright:#7dd3fc;
  --accent-dark:#0ea5e9;
  --accent-soft:rgba(56,189,248,0.16);
  --on-accent:#06141d;
  --hot:#ff7a50;
  --hot-soft:rgba(255,122,80,0.18);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background-color:var(--bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.055) 1px, transparent 0);
  background-size:24px 24px;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(10,14,19,0.86);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
}
.brand-mark{ width:32px; height:32px; flex:none; }
.brand-word{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:1.3rem;
}
.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  text-decoration:none;
  font-size:0.95rem;
  color:var(--ink-soft);
  font-weight:600;
  transition:color .15s ease;
}
.main-nav a:hover{ color:var(--accent); }
.nav-cta{
  background:var(--accent);
  color:var(--on-accent) !important;
  padding:9px 18px;
  border-radius:8px;
  font-weight:700;
  box-shadow:0 10px 24px -12px rgba(56,189,248,0.45);
}
.nav-cta:hover{ background:var(--accent-dark) !important; color:var(--on-accent) !important; }

/* ---------- Hero ---------- */
.hero{ padding:52px 0 44px; }
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:0.78rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent);
  margin:0 0 18px;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:2px;
  background:var(--accent); display:inline-block;
  box-shadow:0 0 8px rgba(56,189,248,0.8);
}
h1{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:clamp(2.3rem, 4.4vw, 3.4rem);
  line-height:1.08;
  margin:0 0 22px;
  color:var(--ink);
}
h1 em{ color:var(--accent); font-style:normal; }
.lede{
  font-size:1.12rem;
  color:var(--ink-soft);
  max-width:520px;
  margin:0 0 30px;
}
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  padding:13px 24px;
  line-height:1;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  font-size:0.96rem;
  border:1px solid transparent;
}
.btn-primary,
.btn-ghost{ background:var(--accent); color:var(--on-accent); box-shadow:0 10px 24px -12px rgba(56,189,248,0.5); }
.btn-primary:hover,
.btn-ghost:hover{ background:var(--accent-dark); color:var(--on-accent); }

/* ---------- Composite Card (glowing console panel) ---------- */
.composite-card{
  background:var(--card-2);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size:20px 20px;
  border:1px solid rgba(56,189,248,0.28);
  border-radius:14px;
  padding:26px 26px 22px;
  color:var(--ink);
  box-shadow:0 30px 60px -30px rgba(56,189,248,0.45), inset 0 0 0 1px rgba(56,189,248,0.05);
}
.composite-card .cc-tag{
  font-family:var(--mono);
  font-size:0.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--accent-bright);
  background:rgba(56,189,248,0.16); display:inline-block;
  padding:4px 10px; border-radius:5px; margin-bottom:14px;
}
.composite-card h3{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-0.01em;
  font-size:1.5rem;
  margin:0 0 6px;
  color:#fff;
}
.cc-cohort{
  font-size:0.9rem; color:rgba(231,237,243,0.62); margin:0 0 20px;
  padding-bottom:18px; border-bottom:1px dashed rgba(255,255,255,0.14);
}
.cc-bars{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px;}
.cc-bar-row{ display:grid; grid-template-columns:120px 1fr 40px; align-items:center; gap:10px; }
.cc-bar-label{ font-family:var(--mono); font-size:0.76rem; color:rgba(231,237,243,0.58); }
.cc-bar-track{ display:block; height:8px; background:rgba(255,255,255,0.1); border-radius:5px; overflow:hidden; }
.cc-bar-fill{ display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--hot)); border-radius:5px; }
.cc-bar-pct{ font-family:var(--mono); font-size:0.8rem; font-weight:700; text-align:right; color:#fff; }
.cc-verdict{
  font-size:0.92rem;
  color:var(--ink);
  background:rgba(255,255,255,0.06);
  border-radius:8px;
  padding:12px 14px;
}
.cc-verdict strong{ color:#ffa585; }

/* ---------- Sections ---------- */
section{ padding:46px 0; }
.section-alt{ background:var(--bg-alt); }
.section-head{ max-width:640px; margin:0 0 32px; }
.section-head .eyebrow{ margin-bottom:14px; }
h2{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-0.01em;
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  margin:0 0 12px;
  color:var(--ink);
}
.section-head p{ color:var(--ink-soft); font-size:1.05rem; margin:0; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.feature-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px 24px;
}
.feature-card .ic{ width:36px; height:36px; margin-bottom:16px; color:var(--accent); }
.feature-card h3{ font-family:var(--sans); font-weight:800; font-size:1.15rem; margin:0 0 10px; letter-spacing:-0.01em; color:var(--ink); }
.feature-card p{ color:var(--ink-soft); margin:0; font-size:0.96rem; }

/* cohort tags */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  border:1px solid var(--line);
  background:var(--card);
  padding:9px 15px;
  border-radius:6px;
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--accent);
}

/* CTA banner — the bright highlight moment */
.cta-banner{
  background:linear-gradient(135deg, var(--accent-dark), var(--accent));
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.14) 1px, transparent 0),
    linear-gradient(135deg, var(--accent-dark), var(--accent));
  background-size:22px 22px, 100% 100%;
  color:var(--on-accent);
  border-radius:16px;
  padding:52px 44px;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.cta-banner h2{ color:var(--on-accent); margin:0 0 8px; }
.cta-banner p{ color:rgba(6,20,29,0.72); margin:0; max-width:440px; }
.cta-banner .btn-primary{ background:var(--on-accent); color:var(--accent-bright); box-shadow:none; }
.cta-banner .btn-primary:hover{ background:#0c2836; color:#fff; }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:36px 0 28px;
  background:var(--bg-alt);
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:24px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.footer-brand .brand-mark{ width:24px; height:24px; }
.footer-brand span{ font-family:var(--sans); font-weight:800; letter-spacing:-0.02em; font-size:1.05rem; color:var(--ink); }
.footer-tag{ color:var(--ink-soft); font-size:0.9rem; max-width:320px; margin:0; }
.footer-nav{ display:flex; gap:26px; }
.footer-nav a{ text-decoration:none; color:var(--ink-soft); font-size:0.9rem; font-weight:600; }
.footer-nav a:hover{ color:var(--accent); }
.footer-bottom{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:0.78rem; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:space-between;
}
.botbuilt-credit{ margin:0; font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); opacity:0.75; }
.botbuilt-credit a{ color:var(--ink-soft); text-decoration:underline; text-decoration-color:rgba(142,160,176,0.4); }
.botbuilt-credit a:hover{ color:var(--accent); }

/* ---------- Page header (sub pages) ---------- */
.page-hero{ padding:44px 0 16px; }
.page-hero + section{ padding-top:0; }
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero h1{ font-size:clamp(2rem, 4vw, 2.9rem); margin-bottom:16px; }
.page-hero p{ color:var(--ink-soft); font-size:1.08rem; max-width:640px; }

/* ---------- Values / about ---------- */
.value-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.value-list .num{
  font-family:var(--mono); font-weight:700; font-size:1.3rem; color:var(--accent); margin-bottom:10px; display:block;
}
.value-list h3{ font-family:var(--sans); font-weight:800; letter-spacing:-0.01em; color:var(--ink); }

/* diagram */
.flow{ display:flex; align-items:stretch; justify-content:space-between; gap:12px; margin:32px 0; }
.flow-node{
  flex:1 1 0;
  min-width:0;
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:20px 16px; text-align:center;
}
.flow-node .fn-icon{ width:28px; height:28px; margin:0 auto 10px; color:var(--accent); }
.flow-node h4{ font-family:var(--sans); font-weight:800; font-size:0.98rem; margin:0 0 6px; letter-spacing:-0.01em; color:var(--ink); }
.flow-node p{ font-size:0.82rem; color:var(--ink-soft); margin:0 auto; max-width:170px; }
.flow-arrow{
  flex:none; color:var(--accent); font-size:1.3rem; font-family:var(--mono);
  display:flex; align-items:center; justify-content:center;
}

/* source list */
.source-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.source-item{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px;
}
.source-item .ic{ width:24px; height:24px; flex:none; color:var(--accent); margin-top:2px; }
.source-item h4{ margin:0 0 4px; font-size:1rem; font-weight:800; letter-spacing:-0.01em; color:var(--ink); }
.source-item p{ margin:0; font-size:0.88rem; color:var(--ink-soft); }

/* ---------- Form ---------- */
.form-shell{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:36px;
  max-width:600px;
}
.sas-form-intro{ color:var(--ink-soft); font-size:0.95rem; margin:0 0 20px; }
.sas-form-status{ margin-top:14px; font-size:0.9rem; color:var(--ink-soft); }
.sas-form .cf-turnstile{ margin-bottom:18px; }
.sas-form .sas-field{ margin-bottom:18px; }
.sas-form label{
  display:block; font-size:0.86rem; font-weight:700; margin-bottom:6px; color:var(--ink);
}
.sas-form input,
.sas-form select,
.sas-form textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font-family:var(--sans);
  font-size:0.96rem;
  color:#101820;
}
.sas-form input:focus,
.sas-form select:focus,
.sas-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.sas-form textarea{ min-height:110px; resize:vertical; }
.sas-form button[type="submit"]{
  background:var(--accent);
  color:var(--on-accent);
  border:none;
  padding:13px 26px;
  border-radius:8px;
  font-weight:700;
  font-size:0.98rem;
  cursor:pointer;
}
.sas-form button[type="submit"]:hover{ background:var(--accent-dark); }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.contact-info h3{ font-family:var(--sans); font-weight:800; font-size:1.25rem; margin:0 0 12px; letter-spacing:-0.01em; color:var(--ink); }
.contact-info p{ color:var(--ink-soft); margin:0 0 18px; }
.contact-info a.mail{ color:var(--accent); font-weight:700; text-decoration:none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-3, .grid-4, .value-list, .source-grid, .contact-grid{ grid-template-columns:1fr; }
  .flow{ flex-direction:column; }
  .flow-arrow{ transform:rotate(90deg); }
  .cta-banner{ flex-direction:column; text-align:left; }
  .site-header .wrap{ height:auto; flex-wrap:wrap; padding:14px 20px; gap:10px; }
  .main-nav{ gap:14px; flex-wrap:wrap; width:100%; justify-content:flex-start; }
  .main-nav a{ font-size:0.88rem; }
  .brand-word{ font-size:1.2rem; }
}