/* =========================================================
   STELLAR 1425 — The Datasheet
   Dark engineering aesthetic: charcoal, mono labels, signal
   green accents, bracketed scan frames, sharp edges, grid.
   ========================================================= */

:root{
  --bg:#0e1114;
  --bg-2:#13171b;
  --panel:#171c21;
  --line:rgba(223,229,234,.14);
  --line-soft:rgba(223,229,234,.07);
  --text:#dfe5ea;
  --mut:rgba(223,229,234,.55);
  --acc:#37e08b;
  --acc-dim:rgba(55,224,139,.14);
  --grot:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', Consolas, monospace;
  --ease:cubic-bezier(.25,.9,.3,1);
  --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--grot);font-weight:400;
  background:var(--bg);color:var(--text);
  line-height:1.7;font-size:16px;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#0e1114}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a323a}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:1px solid var(--acc);
  background:var(--acc);color:#0b1410;
  font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;
  cursor:pointer;transition:.3s var(--ease);
}
.btn:hover{background:transparent;color:var(--acc)}
.btn--line{background:transparent;color:var(--text);border-color:var(--line)}
.btn--line:hover{border-color:var(--acc);color:var(--acc);background:transparent}
.btn--full{width:100%}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.done{opacity:0;visibility:hidden}
.preloader__mark{
  font-family:var(--mono);font-weight:700;font-size:clamp(1.6rem,4.5vw,2.6rem);
  color:var(--acc);letter-spacing:.08em;
}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--acc);z-index:1200}

/* ---------- Top bar ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(14,17,20,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__brand{font-family:var(--mono);font-weight:700;font-size:1rem;letter-spacing:.04em}
.nav__brand em{font-style:normal;color:var(--acc);font-weight:400;font-size:.8rem}
.nav__links{display:flex;align-items:center;gap:24px}
.nav__link{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);transition:color .3s;position:relative;
}
.nav__link:hover{color:var(--acc)}
.nav__cta{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--acc);
  border:1px solid var(--acc);padding:9px 14px;transition:.3s var(--ease);white-space:nowrap;
}
.nav__cta:hover{background:var(--acc);color:#0b1410}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav__toggle span{width:22px;height:2px;background:var(--text);transition:.4s var(--ease)}

/* ---------- Hero ---------- */
.hero{padding:128px 0 84px;border-bottom:1px solid var(--line)}
.hero__meta{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--acc);
  border:1px solid var(--line);border-left:3px solid var(--acc);
  padding:10px 16px;margin-bottom:44px;background:var(--bg-2);
}
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(34px,4vw,64px);align-items:start}
.hero__title{
  font-family:var(--grot);font-weight:700;
  font-size:clamp(2.1rem,4.1vw,3.6rem);line-height:1.08;letter-spacing:-.02em;
  margin-bottom:28px;text-transform:none;
}
.hero__line{display:block}
.hero__title .char{display:inline-block;opacity:0;transform:translateY(18px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hero__title .char.in{opacity:1;transform:none}
.hero__title .word{display:inline-block;white-space:nowrap}
.hero__readout{border:1px solid var(--line);background:var(--bg-2);margin-bottom:28px}
.readout__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 16px;border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);
}
.readout__row:last-child{border-bottom:none}
.readout__row span{font-size:.68rem;letter-spacing:.14em;color:var(--mut)}
.readout__row b{font-size:.86rem;font-weight:700;color:var(--acc)}

/* ---------- Scan frames (photos) ---------- */
.scan{position:relative;background:var(--bg-2);border:1px solid var(--line);padding:14px}
.scan img{width:100%;height:auto;display:block;filter:saturate(.85) contrast(1.04)}
.scan figcaption{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--mut);
  padding:12px 2px 0;
}
.scan__b{position:absolute;width:18px;height:18px;border:2px solid var(--acc)}
.scan__b--tl{top:-2px;left:-2px;border-right:none;border-bottom:none}
.scan__b--tr{top:-2px;right:-2px;border-left:none;border-bottom:none}
.scan__b--bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.scan__b--br{bottom:-2px;right:-2px;border-left:none;border-top:none}

/* ---------- Panels / form ---------- */
.panel{background:var(--panel);border:1px solid var(--line);padding:30px 26px 20px}
.panel--hero{position:sticky;top:96px}
.panel__flag{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--acc);margin-bottom:4px}
.panel__head{font-family:var(--grot);font-weight:700;font-size:1.5rem;margin-bottom:20px}
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{
  display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px;
}
.field input,.field select{
  width:100%;padding:11px 12px;background:var(--bg);
  border:1px solid var(--line);color:var(--text);
  font-family:var(--mono);font-size:.9rem;
  transition:border-color .3s;border-radius:0;
}
.field input::placeholder{color:rgba(223,229,234,.25)}
.field input:focus,.field select:focus{outline:none;border-color:var(--acc)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%2337e08b' d='M5.5 7 0 0h11z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.field select option{background:var(--bg);color:var(--text)}
.field--hidden{display:none}
.contact__note{margin-top:12px;font-family:var(--mono);font-size:.78rem;color:var(--mut);text-align:center}
.contact__note.ok{color:var(--acc)}

/* ---------- Sections ---------- */
.section{padding:92px 0}
.section--panel{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__head{
  display:flex;align-items:baseline;gap:18px;margin-bottom:48px;
  border-bottom:1px solid var(--line);padding-bottom:16px;flex-wrap:wrap;
}
.section__no{font-family:var(--mono);font-weight:700;color:var(--acc);font-size:1.1rem}
.section__head h2{
  font-family:var(--grot);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.01em;
}
.section__tag{
  margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--mut);
}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:56px}
.stat{background:var(--bg);padding:22px 20px}
.section--panel .stat{background:var(--bg-2)}
.stat__num{
  font-family:var(--mono);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.3rem);
  display:block;line-height:1.15;margin-bottom:8px;color:var(--acc);
}
.stat p{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--mut);line-height:1.6}

/* ---------- Data table ---------- */
.table{border:1px solid var(--line);background:var(--bg-2)}
.section--panel .table{background:var(--bg)}
.table__row{
  display:flex;align-items:baseline;gap:18px;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
}
.table__row:last-child{border-bottom:none}
.table__row span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--mut);
  min-width:170px;
}
.table__row b{font-weight:500;font-size:1rem;flex:1;text-align:right}
.table__row b a{color:var(--acc);border-bottom:1px solid var(--acc-dim)}

/* ---------- Systems grid ---------- */
.sysgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sys{background:var(--bg-2);padding:26px 24px;transition:background .3s var(--ease)}
.sys:hover{background:var(--panel)}
.sys h3{
  font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.16em;
  color:var(--acc);margin-bottom:10px;
}
.sys p{font-size:.92rem;color:var(--mut);line-height:1.7}

/* ---------- Shots ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shots .scan img{aspect-ratio:4/3;object-fit:cover}

/* ---------- Contact ---------- */
.contactrow{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.contactrow__big{font-family:var(--grot);font-weight:700;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.4}
.contactrow__big a:hover{color:var(--acc)}
.contactrow__sub{font-family:var(--mono);font-size:.78rem;color:var(--mut);margin-top:10px;max-width:44ch}
.contactrow__cta{display:flex;flex-direction:column;gap:12px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:44px 0 36px}
.footer__brand{font-family:var(--mono);font-weight:700;color:var(--acc);margin-bottom:8px}
.footer__meta{font-family:var(--mono);font-size:.74rem;color:var(--mut);margin-bottom:14px}
.footer__meta a{color:var(--text);border-bottom:1px solid var(--line)}
.footer__legal{font-size:.74rem;color:var(--mut);line-height:1.8;max-width:760px}
.footer__legal a{border-bottom:1px solid var(--line)}

/* ---------- To top ---------- */
.to-top{
  position:fixed;bottom:96px;right:26px;width:42px;height:42px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--text);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.35s var(--ease);z-index:800;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- Chat ---------- */
.chat{position:fixed;bottom:26px;right:26px;z-index:900}
.chat__fab{
  display:inline-flex;align-items:center;padding:13px 18px;cursor:pointer;
  background:var(--bg-2);color:var(--acc);border:1px solid var(--acc);
  font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.08em;
  box-shadow:0 14px 34px -14px rgba(55,224,139,.35);
  transition:.3s var(--ease);
}
.chat__fab:hover{background:var(--acc);color:#0b1410;transform:translateY(-2px)}
.chat.open .chat__fab{background:var(--acc);color:#0b1410}
.chat__panel{
  position:absolute;bottom:calc(100% + 14px);right:0;width:370px;max-width:calc(100vw - 40px);
  background:var(--panel);color:var(--text);
  border:1px solid var(--acc);padding:24px 20px 16px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(8px);transform-origin:bottom right;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s;
}
.chat.open .chat__panel{opacity:1;visibility:visible;transform:none}
.chat__close{
  position:absolute;top:6px;right:10px;background:none;border:none;
  font-size:1.5rem;line-height:1;color:var(--mut);cursor:pointer;padding:4px 8px;
}
.chat__close:hover{color:var(--acc)}
.chat__flag{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--acc);margin-bottom:4px}
.chat__panel h3{font-family:var(--grot);font-weight:700;font-size:1.25rem;margin-bottom:12px}
.chat__msgs{height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:12px 2px 4px;margin-bottom:12px;border-top:1px solid var(--line-soft)}
.chat__msg{max-width:88%;padding:10px 13px;font-size:.86rem;line-height:1.55;
  font-family:var(--mono);
  white-space:pre-wrap;overflow-wrap:break-word}
.chat__msg--assistant{align-self:flex-start;background:var(--bg);border:1px solid var(--line-soft)}
.chat__msg--user{align-self:flex-end;background:var(--acc-dim);border:1px solid rgba(55,224,139,.3);color:var(--text)}
.chat__msg--typing{color:var(--mut);letter-spacing:.2em}
.chat__form{display:flex;gap:8px}
.chat__form input{flex:1;padding:11px 12px;font-size:.86rem;font-family:var(--mono);
  background:var(--bg);border:1px solid var(--line);color:var(--text)}
.chat__form input::placeholder{color:rgba(223,229,234,.25)}
.chat__form input:focus{outline:none;border-color:var(--acc)}
.chat__send{width:44px;border:1px solid var(--acc);background:var(--acc);color:#0b1410;
  cursor:pointer;font-size:1rem;font-family:var(--mono);transition:.3s var(--ease)}
.chat__send:hover{background:transparent;color:var(--acc)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.fade-in{opacity:0;transition:opacity .9s var(--ease)}
.fade-in.show{opacity:1}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .nav__links{display:none}
  .nav__toggle{display:flex;z-index:1002}
  .nav__toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav__toggle.active span:nth-child(2){opacity:0}
  .nav__toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:80%;max-width:320px;height:100vh;
    background:var(--bg-2);border-left:1px solid var(--line);
    flex-direction:column;justify-content:center;gap:28px;align-items:flex-start;
    padding:0 40px;transform:translateX(100%);transition:transform .5s var(--ease);z-index:1001;
    display:flex;
  }
  .nav__links.open{transform:translateX(0)}
  .nav__link{font-size:.9rem}
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .panel--hero{position:static}
  .sysgrid{grid-template-columns:repeat(2,1fr)}
  .shots{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .container{padding:0 20px}
  .nav__cta{display:none}
  .hero{padding:112px 0 60px}
  .section{padding:60px 0}
  .sysgrid{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .field input,.field select{font-size:16px}
  .table__row{flex-direction:column;gap:4px}
  .table__row b{text-align:left}
  .section__tag{display:none}
  .contactrow{flex-direction:column;align-items:flex-start}
}