/* ============================================================
   build-brief  --  "Signal" concept
   A dark, terminal-native marketing site.
   ============================================================ */

/* --- Reset & base ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

:root{
  --bg:        #07080a;
  --surface:   #111316;
  --surface-2: #191c20;
  --border:    #23272e;
  --text:      #c9cdd4;
  --text-dim:  #6b7280;
  --text-bright:#eef0f3;
  --accent:    #A78BFA;
  --accent-dim:#7C3AED;
  --green:     #34d399;
  --red:       #f87171;
  --yellow:    #fbbf24;
  --blue:      #60a5fa;
  --mono:      "SFMono-Regular","Cascadia Mono","JetBrains Mono","Fira Code",ui-monospace,monospace;
  --sans:      "Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --max-w:     1120px;
  --section-py: clamp(4rem,8vw,7rem);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}
code,pre{font-family:var(--mono)}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}

/* --- Utility ----------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.badge{
  display:inline-block;
  font-size:.7rem;
  font-family:var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.2em .65em;
  color:var(--text-dim);
}
.badge--accent{color:var(--accent);border-color:var(--accent-dim)}

/* --- Top bar ----------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:90;
  background:rgba(7,8,10,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:3.5rem;
}
.topbar__logo{
  font-family:var(--mono);font-weight:700;font-size:1rem;
  color:var(--text-bright);letter-spacing:-.02em;
}
.topbar__logo span{color:var(--accent)}
.topbar__links{display:flex;gap:1.75rem;list-style:none}
.topbar__links a{
  font-size:.8rem;color:var(--text-dim);text-decoration:none;
  transition:color .15s;
}
.topbar__links a:hover{color:var(--text-bright)}

.topbar__cta{
  font-size:.78rem;font-family:var(--mono);
  background:var(--accent-dim);color:#fff;
  padding:.4em 1em;border-radius:5px;border:none;cursor:pointer;
  font-weight:600;transition:background .15s;
}
.topbar__cta:hover{background:var(--accent);text-decoration:none;color:#fff}

/* Mobile nav toggle */
.topbar__toggle{display:none;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1.4rem}

@media(max-width:740px){
  .topbar__links,.topbar__cta{display:none}
  .topbar__toggle{display:block}
  .topbar--open .topbar__links{
    display:flex;flex-direction:column;gap:1rem;
    position:absolute;top:3.5rem;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--border);
    padding:1.5rem;
  }
  .topbar--open .topbar__cta{
    display:inline-block;
    position:absolute;top:3.5rem;right:1.5rem;
    margin-top:1.5rem;
  }
}

/* --- Hero -------------------------------------------------- */
.hero{
  padding:clamp(5rem,12vw,10rem) 0 var(--section-py);
  position:relative;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(124,58,237,.09),transparent),
    radial-gradient(ellipse 40% 60% at 80% 20%,rgba(167,139,250,.05),transparent);
  pointer-events:none;
}
.hero__kicker{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.25rem;
}
.hero__title{
  font-size:clamp(2.4rem,5.5vw,4.2rem);
  font-weight:800;line-height:1.08;letter-spacing:-.035em;
  color:var(--text-bright);
  max-width:18ch;
}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__sub{
  margin-top:1.5rem;font-size:clamp(1rem,1.6vw,1.15rem);
  max-width:50ch;color:var(--text-dim);line-height:1.55;
}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem;
}
.hero__actions .btn{
  font-family:var(--mono);font-size:.85rem;padding:.6em 1.4em;
  border-radius:6px;border:none;cursor:pointer;font-weight:600;
  transition:background .15s,color .15s;
}
.btn--primary{background:var(--accent-dim);color:#fff}
.btn--primary:hover{background:var(--accent);text-decoration:none;color:#fff}
.btn--ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--border);
}
.btn--ghost:hover{border-color:var(--text-dim);color:var(--text-bright);text-decoration:none}

/* --- Terminal window --------------------------------------- */
.terminal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.7;
  margin-top:3rem;
  box-shadow:0 8px 40px rgba(0,0,0,.45);
}
.terminal__bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.terminal__dot{width:10px;height:10px;border-radius:50%;background:var(--border)}
.terminal__dot--r{background:#f87171}
.terminal__dot--y{background:#fbbf24}
.terminal__dot--g{background:#34d399}
.terminal__title{
  flex:1;text-align:center;
  font-size:.7rem;color:var(--text-dim);letter-spacing:.03em;
}
.terminal__body{
  padding:1.25rem 1.5rem;
  overflow-x:auto;
  white-space:pre;
  color:var(--text);
}
.terminal__body .dim{color:var(--text-dim)}
.terminal__body .grn{color:var(--green)}
.terminal__body .red{color:var(--red)}
.terminal__body .ylw{color:var(--yellow)}
.terminal__body .acc{color:var(--accent)}
.terminal__body .blu{color:var(--blue)}
.terminal__body .brt{color:var(--text-bright)}

/* Split terminal (before/after) */
.terminal-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:3rem;
  align-items:start;
}
.terminal-split .terminal{
  border-radius:10px;
  margin-top:0;
  border:1px solid var(--border);
  min-width:0;
}
.terminal-split .terminal:last-child .terminal__body{
  white-space:pre-wrap;
  word-break:break-word;
}
@media(max-width:800px){
  .terminal-split{grid-template-columns:1fr}
  .terminal-split .terminal{border-radius:0!important;border:1px solid var(--border)!important}
  .terminal-split .terminal:first-child{border-radius:10px 10px 0 0!important;border-bottom:none!important}
  .terminal-split .terminal:last-child{border-radius:0 0 10px 10px!important}
  .terminal-split .terminal:last-child .terminal__body{min-height:4rem}
}
.terminal__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;
  padding:.35rem 1rem;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.terminal__label-title{
  color:var(--text-bright);
  font-weight:600;
}
.terminal__label-meta{
  flex:0 0 auto;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:.62rem;
  padding:.2rem .5rem;
  border:1px solid currentColor;
  border-radius:999px;
}
.terminal__label--before{color:var(--red)}
.terminal__label--after{color:var(--green)}

/* --- Section scaffolding ----------------------------------- */
section{padding:var(--section-py) 0}
.section-border{border-top:1px solid var(--border)}

.section__kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.75rem;
}
.section__title{
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:700;line-height:1.15;letter-spacing:-.025em;
  color:var(--text-bright);
}
.section__lead{
  margin-top:.75rem;max-width:52ch;
  color:var(--text-dim);font-size:.95rem;
}

/* --- How it works (numbered steps) ------------------------- */
.steps{
  display:grid;gap:2rem;
  margin-top:2.5rem;
}
.step{
  display:grid;
  grid-template-columns:3rem 1fr;
  gap:1.25rem;
  align-items:start;
}
.step__num{
  font-family:var(--mono);font-size:1.6rem;font-weight:800;
  color:var(--accent-dim);line-height:1;
  padding-top:.15rem;
}
.step__title{
  font-weight:700;font-size:1rem;color:var(--text-bright);
  margin-bottom:.35rem;
}
.step__body{color:var(--text-dim);font-size:.88rem;line-height:1.6}
.step__body code{
  background:var(--surface-2);padding:.15em .45em;border-radius:4px;
  font-size:.82em;color:var(--text);
}

/* --- Feature grid ------------------------------------------ */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem;
  margin-top:2.5rem;
}
.feature-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1.75rem;
  transition:border-color .2s;
}
.feature-card:hover{border-color:var(--accent-dim)}
.feature-card__icon{
  font-size:1.3rem;margin-bottom:.75rem;
  width:2.4rem;height:2.4rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--accent);
  font-family:var(--mono);font-weight:700;
}
.feature-card__title{
  font-weight:700;font-size:.95rem;color:var(--text-bright);
  margin-bottom:.4rem;
}
.feature-card__body{font-size:.84rem;color:var(--text-dim);line-height:1.55}

/* --- Install tabs ------------------------------------------ */
.install-tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--border);
  margin-top:2rem;
}
.install-tab{
  padding:.6rem 1.25rem;
  font-family:var(--mono);font-size:.78rem;
  background:none;border:none;color:var(--text-dim);cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.install-tab:hover{color:var(--text)}
.install-tab[aria-selected="true"]{
  color:var(--accent);border-bottom-color:var(--accent);
}
.install-panel{display:none;margin-top:1.25rem}
.install-panel[data-active]{display:block}

/* --- Agent integration grid -------------------------------- */
.agents-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:2rem;
}
.agent-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.25rem;
  text-align:center;
  transition:border-color .2s,transform .15s;
}
.agent-card:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
.agent-card__name{
  font-family:var(--mono);font-weight:700;font-size:.88rem;
  color:var(--text-bright);margin-bottom:.3rem;
}
.agent-card__desc{font-size:.76rem;color:var(--text-dim)}

/* --- Context-window savings callout ------------------------ */
.context-callout{
  margin-top:1.75rem;
  padding:1.25rem 1.5rem;
  background:linear-gradient(135deg, rgba(124,58,237,.12) 0%, rgba(167,139,250,.06) 100%);
  border:1px solid rgba(167,139,250,.25);
  border-left:3px solid var(--accent);
  border-radius:8px;
}
.context-callout__headline{
  font-family:var(--mono);
  font-size:.92rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:.5rem;
  line-height:1.4;
}
.context-callout__body{
  font-size:.82rem;
  color:var(--text);
  line-height:1.6;
}
.context-callout__body code{
  font-size:.78rem;
  background:rgba(167,139,250,.1);
  padding:.1em .35em;
  border-radius:3px;
  color:var(--text-dim);
}

/* --- Gains section ----------------------------------------- */
.gains-visual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-top:2.5rem;
  align-items:center;
}
@media(max-width:700px){.gains-visual{grid-template-columns:1fr}}
.gains-bar{
  display:flex;flex-direction:column;gap:.75rem;
}
.gains-bar__row{display:flex;align-items:center;gap:.75rem}
.gains-bar__label{
  font-family:var(--mono);font-size:.72rem;color:var(--text-dim);
  width:6rem;text-align:right;flex-shrink:0;
}
.gains-bar__track{
  flex:1;height:1.1rem;background:var(--surface-2);
  border-radius:4px;overflow:hidden;position:relative;
}
.gains-bar__fill{
  height:100%;border-radius:4px;
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.gains-bar__fill--raw{background:var(--red);opacity:.7}
.gains-bar__fill--brief{background:var(--green)}
.gains-bar__value{
  font-family:var(--mono);font-size:.72rem;color:var(--text-dim);
  width:4rem;
}

/* --- Ecosystem pills --------------------------------------- */
.eco-pills{
  display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;
}
.eco-pill{
  font-family:var(--mono);font-size:.74rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:.35em 1em;
  color:var(--text-dim);
  transition:border-color .15s,color .15s;
}
.eco-pill:hover{border-color:var(--accent-dim);color:var(--text)}

/* --- FAQ --------------------------------------------------- */
.faq{margin-top:2rem}
.faq__item{border-bottom:1px solid var(--border)}
.faq__q{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 0;cursor:pointer;
  font-weight:600;font-size:.92rem;color:var(--text-bright);
  background:none;border:none;width:100%;text-align:left;
  font-family:var(--sans);
}
.faq__q::after{
  content:"+";font-family:var(--mono);font-size:1.1rem;color:var(--text-dim);
  transition:transform .2s;
}
.faq__item[open] .faq__q::after{content:"-"}
.faq__a{
  padding:0 0 1.25rem;
  font-size:.88rem;color:var(--text-dim);line-height:1.65;
  max-width:60ch;
}
.faq__a code{
  background:var(--surface-2);padding:.1em .4em;border-radius:3px;
  font-size:.85em;color:var(--text);
}

/* --- Limitations ------------------------------------------- */
.limits{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  margin-top:2rem;
}
.limit{
  display:flex;gap:.75rem;
  font-size:.85rem;color:var(--text-dim);line-height:1.55;
}
.limit__icon{
  flex-shrink:0;font-family:var(--mono);font-size:.85rem;
  color:var(--yellow);margin-top:.15rem;
}

/* --- Footer ------------------------------------------------ */
.footer{
  border-top:1px solid var(--border);
  padding:3rem 0;
  text-align:center;
}
.footer__logo{
  font-family:var(--mono);font-weight:700;font-size:.95rem;
  color:var(--text-dim);margin-bottom:.5rem;
}
.footer__logo span{color:var(--accent-dim)}
.footer__copy{font-size:.75rem;color:var(--text-dim)}
.footer__credit{
  margin-top:.45rem;
  font-size:.78rem;
  color:var(--text-dim);
}
.footer__credit a{
  color:var(--accent);
  text-decoration:none;
}
.footer__credit a:hover{color:var(--text-bright)}
.footer__links{
  display:flex;justify-content:center;gap:1.5rem;margin-top:.75rem;list-style:none;
}
.footer__links a{font-size:.78rem;color:var(--text-dim)}
.footer__links a:hover{color:var(--text-bright)}

/* --- Scroll animations ------------------------------------- */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* --- Divider line ------------------------------------------ */
.divider{
  border:none;
  border-top:1px solid var(--border);
  margin:0;
}

/* --- Responsive polish ------------------------------------- */
@media(max-width:900px){
  .agents-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .agents-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  :root{--section-py:3rem}
  .step{grid-template-columns:2rem 1fr;gap:.75rem}
  .step__num{font-size:1.2rem}
  .terminal__body{font-size:.68rem;padding:1rem}
}