/* TreeTrace.dev - HOME page styles only (shell + tokens + glass loaded first) */

main{padding-top:var(--tt-nav-h)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  padding:56px 0 60px;
  background:
    radial-gradient(1100px 700px at 82% 40%, rgba(46,91,255,.10), transparent 60%),
    radial-gradient(800px 600px at 4% 0%, rgba(255,255,255,.025), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(155,160,166,.03) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(155,160,166,.03) 39px 40px);
}
.hero__inner{
  max-width:var(--tt-wrap);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;align-items:center;
}
.hero__copy .eyebrow{margin-bottom:22px}
.hero__display{
  font-family:var(--tt-font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(44px,6.4vw,86px);line-height:.86;letter-spacing:-.035em;color:var(--tt-paper);
}
.hero__display em{font-style:normal;color:var(--tt-ash-2)}
.hero__kick{margin-top:24px;max-width:440px;font-family:var(--tt-font-serif);font-style:italic;
  font-size:19px;line-height:1.5;color:var(--tt-ash)}
.hero__sub{margin-top:18px;max-width:460px;font-family:var(--tt-font-mono);font-size:14px;
  line-height:1.7;color:var(--tt-ash)}
.hero__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* hero visual: terminal ledger + glass lens floating over it */
.hero__visual{position:relative}

.ledger{
  position:relative;
  background:linear-gradient(180deg,#15171b,#101113);
  border:1px solid var(--tt-line);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
  font-family:var(--tt-font-mono);font-size:13px;line-height:1.95;
}
.ledger__bar{display:flex;align-items:center;gap:8px;padding:11px 15px;
  border-bottom:1px solid var(--tt-line);background:rgba(255,255,255,.015)}
.ledger__bar .tl{width:9px;height:9px;border-radius:50%;background:#33363c}
.ledger__bar .name{margin-left:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tt-ash-2)}
.ledger__bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tt-signal)}
.ledger__bar .live i{width:7px;height:7px;border-radius:50%;background:var(--tt-signal);
  box-shadow:0 0 8px var(--tt-signal)}
.ledger__bar .live i{animation:tt-pulse 1.6s var(--tt-ease) infinite}
@keyframes tt-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ledger__rows{padding:16px 18px 20px}
.ledger .cmd{color:var(--tt-ash);margin-bottom:10px}
.ledger .cmd b{color:var(--tt-paper);font-weight:700}
.ledger .row{white-space:pre;color:var(--tt-ash);overflow:hidden;text-overflow:ellipsis}
.ledger .glyph{color:var(--tt-ash-2)}
.ledger .node{color:var(--tt-paper);font-weight:700}
.ledger .kind{color:var(--tt-signal)}
.ledger .leak{color:#fff;background:var(--tt-signal);padding:0 6px;border-radius:2px;font-weight:700}
.ledger .warn{color:var(--tt-signal);font-weight:700}
.ledger .ok{color:var(--tt-paper)}
.ledger .headrow .node{color:#fff}

/* glass lens CTA card floating bottom-right of the ledger */
.hero__lens{
  position:absolute;right:-10px;bottom:-34px;width:300px;z-index:3;
  padding:24px 24px 22px;
}
.hero__lens .lbl{font-family:var(--tt-font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tt-signal);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.hero__lens .lbl i{width:6px;height:6px;border-radius:50%;background:var(--tt-signal);box-shadow:0 0 8px var(--tt-signal)}
.hero__lens h2{font-family:var(--tt-font-display);font-weight:800;font-size:19px;line-height:1.12;
  letter-spacing:-.02em;color:var(--tt-paper);text-transform:none}
.hero__lens .snippet{margin-top:16px;width:100%;font-size:12.5px;background:rgba(8,9,11,.5)}
.hero__lens .btn{margin-top:14px;width:100%}

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.section{padding:88px 0}
.section__head{max-width:680px;margin-bottom:46px}
.section__head h2{margin-top:16px;font-size:clamp(28px,3.4vw,40px);font-weight:800}
.section__head p{margin-top:16px;font-family:var(--tt-font-mono);font-size:14.5px;line-height:1.7;color:var(--tt-ash)}
.section--center .section__head{margin-left:auto;margin-right:auto;text-align:center}

/* =========================================================
   WHAT IT IS - 3-up linking pages
   ========================================================= */
.threeup{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{
  display:block;position:relative;padding:28px 26px 26px;border-radius:14px;
  border:1px solid var(--tt-line);background:var(--tt-surface);
  transition:border-color .25s var(--tt-ease),transform .25s var(--tt-ease),background .25s var(--tt-ease);
}
.feature:hover{border-color:rgba(46,91,255,.4);transform:translateY(-3px);background:#15161a}
.feature__idx{font-family:var(--tt-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tt-ash-2)}
.feature h3{margin:14px 0 10px;font-size:23px;font-weight:800;text-transform:none;letter-spacing:-.01em}
.feature p{font-family:var(--tt-font-mono);font-size:13.5px;line-height:1.65;color:var(--tt-ash)}
.feature__more{margin-top:18px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tt-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tt-signal)}
.feature__more svg{width:14px;height:14px}

/* =========================================================
   HOW IT WORKS - 3 steps
   ========================================================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{position:relative;padding:26px 24px;border-radius:14px;border:1px solid var(--tt-line);background:var(--tt-surface)}
.step__n{font-family:var(--tt-font-mono);font-size:12px;letter-spacing:.12em;color:var(--tt-signal);
  font-weight:700;margin-bottom:14px}
.step h3{font-size:19px;font-weight:800;text-transform:none;letter-spacing:-.01em;margin-bottom:10px}
.step p{font-family:var(--tt-font-mono);font-size:13px;line-height:1.65;color:var(--tt-ash)}
.step p code{color:var(--tt-paper);background:rgba(46,91,255,.08);padding:1px 5px;border-radius:4px;font-size:.92em}

/* =========================================================
   WHO IT'S FOR
   ========================================================= */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aud{padding:26px 24px;border-radius:14px;border:1px solid var(--tt-line);
  background:linear-gradient(180deg, var(--tt-surface), rgba(18,19,22,.6))}
.aud .tag{font-family:var(--tt-font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tt-signal);margin-bottom:14px;display:block}
.aud h3{font-size:18px;font-weight:800;text-transform:none;letter-spacing:-.01em;margin-bottom:10px}
.aud p{font-family:var(--tt-font-mono);font-size:13px;line-height:1.65;color:var(--tt-ash)}
.aud .soon{display:inline-block;margin-top:12px;font-family:var(--tt-font-mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tt-ash-2);
  border:1px solid var(--tt-line);border-radius:20px;padding:3px 9px}

/* =========================================================
   SOURCE-AVAILABLE PROOF
   ========================================================= */
.proof{
  border:1px solid var(--tt-line);border-radius:18px;overflow:hidden;
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(46,91,255,.08), transparent 70%),
    var(--tt-surface);
  padding:48px 44px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
}
.proof h2{font-size:clamp(26px,3vw,34px);font-weight:800}
.proof p{margin-top:16px;font-family:var(--tt-font-mono);font-size:14px;line-height:1.7;color:var(--tt-ash);max-width:420px}
.proof__stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{padding:20px;border:1px solid var(--tt-line);border-radius:12px;background:rgba(8,9,11,.4)}
.stat .num{font-family:var(--tt-font-display);font-weight:800;font-size:30px;color:var(--tt-paper);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stat .num em{font-style:normal;font-size:15px;color:var(--tt-signal);margin-left:6px}
.stat .lab{margin-top:6px;font-family:var(--tt-font-mono);font-size:11px;letter-spacing:.08em;color:var(--tt-ash)}

/* =========================================================
   WORKS WITH ANY AGENT (breadth band)
   ========================================================= */
.anyagent{padding:30px 0 4px}
.anyagent__inner{
  border:1px solid var(--tt-line);border-radius:16px;
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(46,91,255,.07), transparent 70%),
    var(--tt-surface);
  padding:44px 32px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.anyagent__head{font-size:clamp(22px,2.6vw,30px);font-weight:800;text-transform:none;letter-spacing:-.01em;margin-top:14px;line-height:1.16;max-width:720px}
.anyagent__sub{margin:16px auto 0;font-family:var(--tt-font-mono);font-size:14px;line-height:1.7;color:var(--tt-ash);max-width:600px}
.anyagent__cmd{
  margin:20px auto 0;display:inline-block;max-width:100%;
  font-family:var(--tt-font-mono);font-size:13px;letter-spacing:.01em;color:var(--tt-paper);
  background:rgba(46,91,255,.08);border:1px solid var(--tt-line);border-radius:8px;
  padding:11px 18px;overflow-wrap:anywhere;
}
.anyagent__cmd .p{color:#2e5bff;margin-right:6px}
.anyagent__providers{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 40px;margin-top:30px}
.prov-group{display:flex;flex-direction:column;align-items:center;gap:12px}
.anyagent__label{font-family:var(--tt-font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tt-ash-2)}
.prov-strip{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center;margin:0;padding:0}
.prov-strip li{
  font-family:var(--tt-font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--tt-paper);
  border:1px solid var(--tt-line);border-radius:7px;padding:7px 11px;background:rgba(8,9,11,.4);
}
.prov-strip--chat li{border-color:rgba(46,91,255,.35);color:var(--tt-paper);background:rgba(46,91,255,.07)}

/* =========================================================
   SEE IT IN MOTION (lazy video band)
   ========================================================= */
.section--video .section__head{max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:22px;text-align:center}

/* Legible, cobalt-tinted caption cues on the dark video */
.tour__video::cue{
  background:rgba(11,12,14,.82);
  color:var(--tt-paper);
  font-family:var(--tt-font-mono);
  font-size:.92em;line-height:1.4;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.tour__frame{
  position:relative;width:100%;max-width:640px;margin-inline:auto;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--tt-line);background:#000;
  box-shadow:
    0 0 0 1px rgba(46,91,255,.12),
    0 30px 80px -30px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.tour__video{
  display:block;width:100%;height:auto;aspect-ratio:16 / 9;
  background:#000;border:0;
}
.tour__cc{
  max-width:640px;margin:12px auto 0;text-align:center;
  font-family:var(--tt-font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tt-ash-2);
}

/* =========================================================
   BIG CTA
   ========================================================= */
.bigcta{text-align:center;max-width:660px;margin:0 auto}
.bigcta h2{font-size:clamp(30px,4vw,48px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}
.bigcta p{margin-top:18px;font-family:var(--tt-font-mono);font-size:14.5px;color:var(--tt-ash)}
.bigcta .snippet{margin:28px auto 0;width:max-content;max-width:100%}
.bigcta .cta-row{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero__visual{margin-top:8px}
  .hero__lens{position:relative;right:auto;bottom:auto;width:100%;margin-top:18px}
  .threeup,.steps,.audience{grid-template-columns:minmax(0,1fr)}
  .proof{grid-template-columns:minmax(0,1fr);padding:36px 28px}
  .anyagent__inner{padding:32px 20px}
  .anyagent__providers{gap:22px 26px;margin-top:22px}
}
@media (min-width:981px) and (max-width:1100px){
  .hero__lens{width:260px;right:-4px}
}
@media (max-width:980px){
  /* terminal: scroll horizontally instead of forcing the page wide */
  .ledger__rows{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ledger .row{overflow:visible;text-overflow:clip}
}
@media (max-width:600px){
  .hero{padding:48px 0 64px}
  .section{padding:64px 0}
  .proof__stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ledger{font-size:11.5px}
  /* readability: bump core body copy */
  .hero__sub,.section__head p,.feature p,.step p,.aud p,.proof p,.bigcta p,.anyagent__sub{font-size:16px;line-height:1.6}
}

@media (max-width:380px){
  .proof__stats{grid-template-columns:minmax(0,1fr)}
}