:root{
  --ts-green:#17FA02;
  --ts-green-soft:#A0FF8E;
  --ts-red:#FF3B3B;
  --ts-blue:#9EC5FF;
  --glow: rgba(23,250,2,.12); /* subtle neon halo */

  /* Page transition vars */
  --pt-duration:420ms;
  --pt-ease:cubic-bezier(.22,.61,.36,1);
  --pt-curtain:#000;

  /* Fixed bottom bar height (JS updates this) */
  --ts-bar-h: 0px;

  /* Generic nav height (non nav-lite) */
  --nav-h:68px;
}

@font-face {
  font-family: 'Roobert';
  src: url('../assets/fonts/mainfont.otf') format('opentype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Moderniz';
  src: url('../assets/fonts/Moderniz.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ max-width:100%; overflow-x:hidden; }

body{
  background:#000;
  color:#fff;
  font-family:'Roobert',sans-serif;
  padding-bottom:0;
}

img, video, svg{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,.metric-v,.impact-percent{
  font-family:'Moderniz',sans-serif;
}

/* Screenreader only */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Keep fixed elements fixed during transitions */
html.pt-enter, html.pt-leaving,
body.pt-enter, body.pt-leaving{
  transform:none !important;
  filter:none !important;
  perspective:none !important;
}

/* Bottom bar spacing */
html.has-bottom-bar body{
  padding-bottom:var(--ts-bar-h,0px) !important;
  margin-bottom:0 !important;
}
html.has-bottom-bar{
  scroll-padding-bottom:var(--ts-bar-h,0px);
}

/* ---------- Motion helpers ---------- */
@keyframes neon-pulse{
  0%{
    text-shadow:0 0 1px rgba(23,250,2,.5),
                 0 0 3px rgba(23,250,2,.3),
                 0 0 6px rgba(23,250,2,.1)
  }
  100%{
    text-shadow:0 0 2px rgba(23,250,2,.8),
                 0 0 6px rgba(23,250,2,.5),
                 0 0 10px rgba(23,250,2,.3)
  }
}
@property --border-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@keyframes spin-border{ to{ --border-angle:360deg; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes chatDots{
  0%,20%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(-4px);opacity:1}
  80%,100%{transform:translateY(0);opacity:.5}
}

/* ---------- Hero / content ---------- */
.content,
.hero{
  padding:6rem 2rem;
  max-width:800px;
  margin:0 auto;
  text-align:center;
}

/* Default hero top padding for non nav-lite pages */
.hero{
  padding-top:max(0px, calc(var(--nav-h) + 20px));
}

.hero h1{
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.05;
  margin-bottom:.5rem;
  animation:fadeInDown 1s ease-out forwards;
  opacity:0;
  transform:translateY(-30px);
  text-shadow:
    0 0 4px rgba(23,250,2,.4),
    0 0 8px rgba(23,250,2,.2);
}
.subtitle{
  font-size:1.08rem;
  margin:.75rem 0 .5rem;
  color:#ccc;
  line-height:1.45;
  animation:fadeInDown 1s ease-out forwards;
  animation-delay:1s;
  opacity:0;
  transform:translateY(-30px);
}

/* Hero / CTA buttons */
.hero .btn,
a.btn{
  display:inline-block;
  margin-top:.5rem;
  padding:.8rem 1.5rem;
  border-radius:9999px;
  background:linear-gradient(90deg,var(--ts-green),var(--ts-green-soft));
  color:#0b0f0b;
  font-family:'Roobert',sans-serif;
  font-weight:700;
  text-decoration:none;
  position:relative;
  isolation:isolate;
  box-shadow:0 0 0 0 rgba(23,250,2,0),
             inset 0 0 0 1px rgba(0,0,0,.12);
  transition:transform .25s ease,
             box-shadow .25s ease,
             filter .25s ease;
  animation:fadeInDown 1s ease-out forwards;
  animation-delay:1.5s;
  opacity:0;
  transform:translateY(-30px);
}
a.btn::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  background:radial-gradient(55% 60% at 50% 50%,
                             rgba(23,250,2,.32),
                             transparent 60%);
  filter:blur(10px);
  opacity:0;
  transition:opacity .25s ease;
  z-index:-1;
}
.hero .btn:hover,
a.btn:hover{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 10px 28px rgba(0,0,0,.35),
             0 0 18px rgba(23,250,2,.35),
             inset 0 0 14px rgba(23,250,2,.18);
}
.hero .btn:hover::after,
a.btn:hover::after{ opacity:1; }
.hero .btn:focus-visible,
a.btn:focus-visible{
  outline:2px solid var(--ts-green);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(23,250,2,.18),
             0 0 18px rgba(23,250,2,.35);
}

/* ---------- Nav button neon halo + snake border ---------- */
.nav-lite a.ts-nav{
  --border-angle:0deg;
  position:relative;
  isolation:isolate;
  border-radius:9999px;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

/* Snake border (short bright segment orbiting the edge) */
.nav-lite a.ts-nav::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px; /* thickness of the border trail */
  background:
    conic-gradient(from var(--border-angle),
      transparent 0deg 300deg,
      rgba(23,250,2,.95) 300deg 340deg,
      transparent 340deg 360deg);
  /* punch out the center so only the ring shows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  z-index:0;
}

/* Soft glow behind the pill (like your .btn) */
.nav-lite a.ts-nav::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  background:radial-gradient(55% 60% at 50% 50%,
                             rgba(23,250,2,.32),
                             transparent 60%);
  filter:blur(10px);
  opacity:0;
  transition:opacity .25s ease;
  z-index:-1;
}

/* Hover / focus: lift + glow + animated snake */
.nav-lite a.ts-nav:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:
    0 8px 22px rgba(0,0,0,.35),
    0 0 14px rgba(23,250,2,.25),
    inset 0 0 10px rgba(23,250,2,.15);
}

.nav-lite a.ts-nav:hover::before{
  opacity:1;
  animation:spin-border 1.2s linear infinite;
}

.nav-lite a.ts-nav:hover::after{
  opacity:1;
}

.nav-lite a.ts-nav:focus-visible{
  outline:2px solid var(--ts-green);
  outline-offset:2px;
  box-shadow:
    0 0 0 6px rgba(23,250,2,.18),
    0 0 14px rgba(23,250,2,.35);
}

/* ---------- Background video ---------- */
#bg-video{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
  opacity:.4;
  filter:brightness(70%);
  inset:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
}
.highlight{ color:var(--ts-green); }

/* ---------- Footer warning (legacy) ---------- */
.footer-warning{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:rgba(0,0,0,.8);
  color:#fff;
  text-align:center;
  padding:10px calc(12px + env(safe-area-inset-right))
           10px calc(12px + env(safe-area-inset-left));
  z-index:9999;
  border-top:1px solid #222;
  font-family:'Roobert',sans-serif;
  font-size:clamp(.82rem, 2.3vw, .95rem);
  font-weight:500;
}

/* ---------- Fade-in animation ---------- */
@keyframes fadeInDown{
  0%{opacity:0; transform:translateY(-30px)}
  100%{opacity:1; transform:translateY(0)}
}
.content h2{
  opacity:0;
  transform:translateY(-30px);
  animation:fadeInDown 1s ease-out forwards;
  animation-delay:.5s;
}
.content p{
  opacity:0;
  transform:translateY(-30px);
  animation:fadeInDown 1s ease-out forwards;
  animation-delay:1.2s;
}

/* ---------- Feature cards / boxes ---------- */
.features{
  width:min(1200px, 100%);
  margin:2rem auto 2.75rem;
  padding:0 1rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.feature-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35),
             0 0 16px var(--glow),
             inset 0 0 0 1px var(--glow);
  backdrop-filter:blur(8px);
  overflow-wrap:break-word;
  word-break:break-word;
}
.feature-head{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:.5rem;
}
.feature-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(23,250,2,.08);
  border:1px solid rgba(23,250,2,.25);
  box-shadow:0 0 8px rgba(23,250,2,.18);
}
.feature-card h3{
  font-size:1.08rem;
  letter-spacing:.2px;
}
.feature-sub{
  color:#cfd6d8;
  margin:.35rem 0 .75rem;
  line-height:1.55;
}
.feature-list{
  list-style:none;
  display:grid;
  gap:.35rem;
  margin:.25rem 0 0;
  padding:0;
  color:#aeb7bb;
  font-size:.96rem;
}
.feature-list li::before{
  content:'✓';
  color:var(--ts-green);
  margin-right:.5rem;
}

/* Small tweaks for very small phones */
@media (max-width:480px){
  .feature-card{ padding:1rem .9rem .9rem; }
  .feature-card h3{ font-size:1rem; }
  .feature-sub{ font-size:.96rem; }
  .feature-list{ font-size:.94rem; }
}

/* ---------- Impact section ---------- */
.impact{
  --impact-dur:2.6s;
  max-width:1000px;
  margin:2.5rem auto 3.25rem;
  padding:0 1.25rem;
}
.impact-card{ padding:1rem 1.25rem 1.25rem; }
.impact-sub{
  color:#cfd6d8;
  margin:.25rem 0 .9rem;
  line-height:1.55;
}
.impact-graph{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,
    rgba(0,0,0,.78),
    rgba(0,0,0,.68));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.4),
    0 0 16px var(--glow),
    inset 0 0 0 1px var(--glow);
}
.impact-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.impact .impact-path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:none;
}
.impact.is-visible .impact-path{
  animation:draw var(--impact-dur) ease forwards;
}
.axis-label{ font-size:14px; fill:#aeb7bb; opacity:.9; }
.glow-area{ opacity:0; transition:opacity .9s ease; }
.impact.is-visible .glow-area{ opacity:1; }
.impact-label{
  position:absolute;
  bottom:.6rem;
  font-size:.9rem;
  padding:.25rem .5rem;
  border-radius:10px;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.12);
  color:#cfd6d8;
}
.impact-label.left{
  left:.6rem;
  color:#ffd9d9;
  box-shadow:0 0 12px rgba(255,59,59,.18);
}
.impact-label.right{
  right:.6rem;
  color:#d9ffd9;
  box-shadow:0 0 12px rgba(23,250,2,.18);
}
.impact-percent{
  position:absolute;
  top:.6rem;
  right:.6rem;
  font-size:1.18rem;
  letter-spacing:.2px;
  color:#b9ffbf;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  padding:.35rem .55rem;
  border-radius:10px;
  box-shadow:0 0 12px rgba(23,250,2,.18);
}

/* ---------- Roadmap cards ---------- */
.roadmap{
  max-width:1000px;
  margin:0 auto 3rem;
  padding:0 1.25rem;
}
.roadmap-shell{
  position:relative;
  border-radius:24px;
  padding:1.35rem 1.5rem 1.6rem;
  background:linear-gradient(180deg,
    rgba(0,0,0,.9),
    rgba(0,0,0,.82));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 12px 32px rgba(0,0,0,.45),
    0 0 18px var(--glow),
    inset 0 0 0 1px var(--glow);
  backdrop-filter:blur(10px);
}
.roadmap-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  margin-bottom:1.1rem;
}
.roadmap-eyebrow{
  font-size:.9rem;
  color:#cfd6d8;
}
.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.1rem;
}
.roadmap-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,
    rgba(0,0,0,.9),
    rgba(0,0,0,.82));
  padding:1rem 1.05rem .95rem;
  display:grid;
  gap:.6rem;
  min-height:100%;
}
.roadmap-card--active{
  border-color:rgba(23,250,2,.85);
  box-shadow:
    0 0 0 1px rgba(23,250,2,.7),
    0 0 22px rgba(23,250,2,.25);
}
.roadmap-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}
.roadmap-card-title{
  font-size:1rem;
  letter-spacing:.2px;
}
.roadmap-num{
  font-family:'Moderniz',sans-serif;
  font-size:.9rem;
  letter-spacing:.18em;
  color:rgba(255,255,255,.34);
}
.roadmap-body{
  color:#cfd6d8;
  font-size:.95rem;
  line-height:1.55;
}
.roadmap-link{
  margin-top:auto;
  font-size:.9rem;
  font-weight:600;
  color:var(--ts-green-soft);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
.roadmap-link::after{
  content:'↗';
  font-size:.8rem;
}
.roadmap-link:hover{
  text-decoration:underline;
}

@media (max-width:900px){
  .roadmap-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width:620px){
  .roadmap-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- Metrics ---------- */
.metrics{
  max-width:1000px;
  margin:1.25rem auto 3.25rem;
  padding:0 1.25rem;
}
.metric-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:1.1rem 1.25rem 1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35),
             0 0 16px var(--glow),
             inset 0 0 0 1px var(--glow);
  backdrop-filter:blur(8px);
}
.metric-title{
  font-size:1.12rem;
  margin-bottom:.9rem;
}
.metric-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
  margin-bottom:.8rem;
}
.metric{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:.8rem .9rem;
  box-shadow:0 6px 18px rgba(0,0,0,.28),
             0 0 14px var(--glow),
             inset 0 0 0 1px var(--glow);
}
.metric-k{
  color:#cfd6d8;
  font-size:.92rem;
  margin-bottom:.25rem;
}
.metric-v{
  font-size:1.35rem;
  letter-spacing:.2px;
}
.metric-v.up{ color:#b9ffbf; }
.metric-v.down{ color:#ffb0b4; }
.metric-v.info{ color:#cfe0ff; }

.metric-bars{ display:grid; gap:.6rem; }
.bar-row{
  display:grid;
  grid-template-columns:120px 1fr auto;
  align-items:center;
  gap:.6rem;
}
.bar-label{
  color:#cfd6d8;
  font-size:.92rem;
}
.bar{
  position:relative;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),
             0 0 10px var(--glow);
}
.bar-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  transition:width 1.9s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 0 14px rgba(23,250,2,.20);
}
.bar-fill.green{
  background:linear-gradient(90deg,
    var(--ts-green) 0%,
    var(--ts-green-soft) 100%);
}
.bar-fill.info{
  background:linear-gradient(90deg,
    var(--ts-blue) 0%,
    #e5f0ff 100%);
  box-shadow:0 0 14px rgba(158,197,255,.20);
}

/* ---------- Bottom CTA banner ---------- */
.bottom-cta{
  margin:0 auto;
  padding:0 1.25rem;
}
.bottom-cta-inner{
  max-width:var(--ts-wrap,1180px);
  margin:0 auto;
  border-radius:24px;
  padding:1.75rem 1.75rem 1.9rem;
  background:linear-gradient(180deg,
    rgba(6,12,8,.98),
    rgba(4,8,6,.98));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 46px rgba(0,0,0,.55),
    0 0 22px var(--glow),
    inset 0 0 0 1px rgba(255,255,255,.06);
  text-align:center;
}
.bottom-cta-title{
  font-family:'Moderniz',sans-serif;
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  line-height:1.25;
  margin-bottom:.65rem;
  background:linear-gradient(45deg,#ffffff,#cfe3d0 60%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.bottom-cta-sub{
  color:#cfd6d8;
  max-width:52rem;
  margin:0 auto 1.2rem;
  font-size:.98rem;
  line-height:1.6;
}
.bottom-cta-form{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-bottom:.7rem;
}
.bottom-cta-form input{
  min-width:min(260px,100%);
  padding:.7rem .85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.65);
  color:#f5f7f6;
  font-family:'Roobert',sans-serif;
  font-size:.95rem;
}
.bottom-cta-form input::placeholder{
  color:#88938f;
}
.bottom-cta-form button{
  padding:.7rem 1.2rem;
  border:none;
  border-radius:999px;
  font-weight:700;
  font-family:'Roobert',sans-serif;
  background:linear-gradient(90deg,var(--ts-green),var(--ts-green-soft));
  color:#0b0f0b;
  cursor:pointer;
  box-shadow:
    0 10px 26px rgba(0,0,0,.4),
    0 0 18px rgba(23,250,2,.35),
    inset 0 0 0 1px rgba(0,0,0,.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.bottom-cta-form button:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:
    0 12px 30px rgba(0,0,0,.5),
    0 0 22px rgba(23,250,2,.4);
}
.bottom-cta-note{
  color:#9fb3a7;
  font-size:.9rem;
}

@media (max-width:520px){
  .bottom-cta-inner{
    padding:1.45rem 1.25rem 1.6rem;
  }
  .bottom-cta-form{
    flex-direction:column;
    align-items:stretch;
  }
  .bottom-cta-form input{
    min-width:0;
    width:100%;
  }
  .bottom-cta-form button{
    width:100%;
  }
}

/* ---------- News cards ---------- */
.news-row{
  max-width:1000px;
  margin:0 auto 3.75rem;
  padding:0 1.25rem;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1.5rem;
}
.news-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:1rem 1.1rem 1.15rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35),
             0 0 16px var(--glow),
             inset 0 0 0 1px var(--glow);
  backdrop-filter:blur(8px);
}

/* ---------- Assets ---------- */
.assets-card .assets-row.simple{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-top:.6rem;
}
.asset-box{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.55rem .7rem;
  border-radius:14px;
  background:linear-gradient(180deg,
    rgba(0,0,0,.72),
    rgba(0,0,0,.6));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 24px rgba(0,0,0,.35),
    0 0 14px var(--glow),
    inset 0 0 0 1px var(--glow);
}
.asset-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.3);
  display:grid;
  place-items:center;
}
.asset-icon-svg{
  width:100%;
  height:100%;
  display:block;
}
.asset-title{
  font-size:.95rem;
  letter-spacing:.2px;
  color:#e8f7ea;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- Chat widget ---------- */
.chat-wrap{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,
    rgba(0,0,0,.78),
    rgba(0,0,0,.66));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 24px rgba(0,0,0,.35),
    0 0 16px var(--glow),
    inset 0 0 0 1px var(--glow);
  padding:.75rem;
}
.chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.5rem;
}
.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  background:#1db954;
  box-shadow:0 0 10px rgba(23,250,2,.35);
}
.chip-row{ display:flex; gap:.4rem; }
.chip{
  font-size:.82rem;
  padding:.15rem .45rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.chip.green{ color:#b9ffbf; }
.chip.info{ color:#cfe0ff; }
.chip.orange{ color:#ffd4a6; }

.chat-body{
  height:clamp(240px, 38vh, 420px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:.35rem .25rem .25rem;
}
.chat-msg{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
}
.chat-msg.user{ justify-content:flex-end; }
.chat-msg .avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.7rem;
  font-weight:800;
  background:linear-gradient(180deg,#0c1b0c,#122312);
  color:#b9ffbf;
  border:1px solid rgba(255,255,255,.14);
  flex:0 0 auto;
}
.chat-msg.user .avatar{
  background:linear-gradient(180deg,#0a1320,#14263a);
  color:#cfe0ff;
}
.bubble{
  max-width:78%;
  padding:.55rem .7rem;
  border-radius:14px;
  line-height:1.35;
  font-size:.98rem;
  text-transform:none;
  word-wrap:break-word;
  white-space:pre-wrap;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.25),
             0 0 12px var(--glow),
             inset 0 0 0 1px var(--glow);
}
.bubble.ai{
  background:linear-gradient(180deg,
    rgba(0,0,0,.25),
    rgba(0,0,0,.4));
}
.bubble.user{
  background:linear-gradient(180deg,
    rgba(23,250,2,.08),
    rgba(23,250,2,.05));
  border-color:rgba(23,250,2,.25);
}
.typing-bubble{ display:flex; gap:.3rem; }
.typing-bubble .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#cfd6d8;
  animation:chatDots 1.4s infinite;
}
.typing-bubble .dot:nth-child(2){ animation-delay:.15s; }
.typing-bubble .dot:nth-child(3){ animation-delay:.3s; }

/* ---------- Page transition overlay ---------- */
html::before{ content:none; }
html.use-pt::before{
  content:"" !important;
  position:fixed;
  inset:0;
  background:var(--pt-curtain);
  z-index:2147483647;
  pointer-events:none;
  opacity:0;
  will-change:opacity;
  transition:opacity var(--pt-duration) var(--pt-ease);
}
html.use-pt.pt-leaving::before{ opacity:1; }
html.use-pt.pt-enter::before{
  opacity:1;
  animation:pt-enter var(--pt-duration) var(--pt-ease) both;
}
@keyframes pt-enter{ to{ opacity:0; } }

/* ---------- Responsive tweaks ---------- */
@media (max-width:880px){
  .hero{ padding-inline:1.25rem; }
}
@media (hover:none){
  .menu a:hover{ transform:none; }
  .hero .btn:hover{ transform:none; }
}
@media (max-width:1100px){
  .features{ grid-template-columns:repeat(2,1fr); }
  .news-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .metric-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .features{ grid-template-columns:1fr; }
  .news-row{ grid-template-columns:1fr; }
  .news-card{ padding:.9rem 1rem; }
  .video-overlay{ background:rgba(0,0,0,.42); }
}
@media (max-width:520px){
  .metric-grid{
    grid-template-columns:1fr;
    gap:.8rem;
  }
  .bar-row{
    grid-template-columns:1fr;
    gap:.35rem;
  }
}

/* Width helpers */
.mini-chart svg,
.impact-svg{ width:100%; height:auto; display:block; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #bg-video{ display:none; }
  body{
    background:#000 url('assets/bg-fallback.jpg')
      center/cover no-repeat;
  }
  .impact.is-visible .impact-path{
    animation:none !important;
  }
  .bar-fill{ transition-duration:.001s; }
  html.use-pt::before{
    transition:none !important;
    animation:none !important;
    opacity:0 !important;
  }
}

/* ---------- Setup form chips ---------- */
#setupForm .chips .chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  border-radius:999px;
  font-family:'Roobert',sans-serif;
  font-size:.95rem;
  line-height:1.2;
  white-space:normal;
}
#setupForm .chips .chip::before,
#setupForm .chips .chip::after{
  content:none !important;
}
#setupForm .chips .chip > input{
  position:static !important;
  opacity:1 !important;
  pointer-events:auto !important;
  width:1.05rem;
  height:1.05rem;
  margin:0 .4rem 0 0;
  accent-color:var(--ts-green);
}
#setupForm .chips .chip:has(input:checked){
  background:rgba(23,250,2,.08);
  border:1px solid rgba(23,250,2,.35);
  box-shadow:0 0 8px rgba(23,250,2,.18);
}
#setupForm [role="radiogroup"] .chip{ font-weight:700; }

/* Utility for mobile menu lock (might be reused) */
body.no-scroll{
  overflow:hidden;
  touch-action:none;
}

/* Course cards: subtle floating + sheen */
.ts-card { transform: translateZ(0); will-change: transform, box-shadow; }
.ts-card:hover { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1); }

/* Diagonal light sweep on hover */
.ts-card .ts-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 20%, transparent 40%);
  transform:translateX(-120%) rotate(0.001deg);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  mix-blend-mode:overlay; opacity:.6;
}
.ts-card:hover .ts-sheen{ transform:translateX(120%); }

/* Gentle idle float (stagger with --i) */
@keyframes card-float { 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
@media (hover:hover){
  .ts-card{ animation:card-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .2s); }
}

/* ---------- NAV LAYOUT FOR .nav-lite ---------- */
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.nav-logo{
  margin:0 auto;
}
.nav-desktop{
  display:none;
}
.nav-toggle{
  position:absolute;
  right:16px;
}

@media (min-width:985px){
  .nav-inner{
    justify-content:flex-start;
  }
  .nav-logo{
    margin:0;
  }
  .nav-desktop{
    display:flex !important;
    margin-left:auto;
  }
  .nav-toggle{
    position:static;
    margin-left:0.375rem; /* ~ml-1.5 */
  }
}

/* ---------- GET STARTED PAGE TWEAKS ---------- */
/* Add class="page-get-started" on <body> in homepage-get-started.html */

html.page-get-started,
body.page-get-started{
  /* hide scrollbar visuals but keep scrolling */
  overflow-y:auto;
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* IE/Edge */
}
html.page-get-started::-webkit-scrollbar,
body.page-get-started::-webkit-scrollbar{
  display:none;                /* Chrome/Safari */
}

/* Simple whole-page fade instead of crazy transitions */
body.page-get-started{
  animation:pageFadeIn 0.6s ease-out;
}
@keyframes pageFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Kill slide-down hero animations on this page */
body.page-get-started .hero h1,
body.page-get-started .hero .subtitle,
body.page-get-started .hero .btn,
body.page-get-started .hero a.btn{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Slightly wider, centered hero to match main look but sit nicely over video */
body.page-get-started .hero{
  max-width:880px;
}

/* Make promise cards darker so they sit correctly on top of the video */
body.page-get-started .feature-card{
  background:rgba(0,0,0,.82);
}