/* ════════════════════════════════════════════
   QUALINETICS — light enterprise theme, compact
   Display: Bricolage Grotesque · Body: Inter · Mono: JetBrains Mono
════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f5f7fa;
  --surface:rgba(255,255,255,.78);
  --ink:#0d2236;            /* primary text / navy */
  --muted:#51677e;
  --faint:#8aa0b5;
  --line:rgba(13,34,54,.12);
  --line-soft:rgba(13,34,54,.07);
  --teal:#0fb693;           /* brand accent */
  --teal-deep:#0a8f75;      /* accent for text on light */
  --teal-dim:rgba(15,182,147,.1);
  --navy-btn:#0d2236;
  --nav-h:62px;
  --disp:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

html{scroll-behavior:smooth}
#netbg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.75;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.22) 26%,rgba(0,0,0,.22) 74%,rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.22) 26%,rgba(0,0,0,.22) 74%,rgba(0,0,0,1) 100%);
}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background-color:var(--bg);color:var(--ink);
  background-image:
    radial-gradient(2.2px 2.2px at center, rgba(13,34,54,.13) 40%, transparent 41%),
    radial-gradient(1300px 760px at 0% -10%, rgba(15,182,147,.16), transparent 58%),
    radial-gradient(1300px 800px at 104% 6%, rgba(43,108,235,.14), transparent 56%),
    linear-gradient(180deg,#fcfeff 0%,#eef4fa 50%,#e4ecf6 100%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-size:30px 30px,auto,auto,auto;
  line-height:1.6;font-size:15px;
  overflow-x:hidden;padding-top:var(--nav-h);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Manrope','Inter',system-ui,sans-serif;
  letter-spacing:-.02em;color:var(--ink);
}


/* ══ WORDMARK / Q LOGOMARK ══ */
.wordmark{
  display:inline-flex;align-items:center;
  font-family:var(--disp);font-weight:800;font-size:1.28rem;
  letter-spacing:.045em;color:var(--ink);line-height:1;white-space:nowrap;
}
.qmark{height:1.18em;width:auto;display:block;margin-right:.06em}
.wm-text{display:inline-block}
.wm-aa{
  background:linear-gradient(135deg,#0fb693 15%,#0a8f75 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wm-sm{font-size:.98rem}

/* ══ NAV ══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav-container{
  max-width:1240px;margin:0 auto;height:100%;
  padding:0 2rem;display:flex;align-items:center;gap:2rem;
}
.logo-wrap{text-decoration:none;flex-shrink:0;display:flex;align-items:center}
.nav-links{list-style:none;display:flex;gap:1.8rem;margin-left:auto}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:500;
  transition:color .2s;white-space:nowrap;
}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  background:var(--navy-btn);color:#fff;
  padding:.5rem 1.1rem;border-radius:8px;
  font-family:var(--disp);font-weight:600;font-size:.84rem;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:background .2s,transform .15s;
}
.nav-cta:hover{background:#16334f;transform:translateY(-1px)}

.nav-toggle{
  display:none;background:transparent;border:1px solid var(--line);
  border-radius:8px;width:40px;height:36px;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;
}
.nav-toggle span{width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s;display:block}
nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ══ HERO ══ */
#home{scroll-margin-top:var(--nav-h)}
.hero-wrap{
  position:relative;z-index:1;
  border-bottom:1px solid var(--line-soft);
}
.hero{position:relative}
.hero{
  max-width:1240px;margin:0 auto;
  padding:3rem 2rem 2.8rem;
  display:grid;grid-template-columns:1.04fr .96fr;gap:4rem;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Manrope','Inter',sans-serif;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--teal-deep);
  margin-bottom:1.05rem;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:blink 2.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

h1{font-size:clamp(2.1rem,3.8vw,3rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;margin-bottom:1rem}
.hero-desc{color:var(--muted);font-size:.98rem;line-height:1.7;max-width:480px;margin-bottom:1.5rem}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap}

.btn-p,.btn-o{
  font-family:var(--disp);font-weight:600;font-size:.92rem;
  padding:.68rem 1.4rem;border-radius:9px;text-decoration:none;
  transition:background .2s,transform .15s,border-color .2s,color .2s;
}
.btn-p{background:var(--navy-btn);color:#fff}
.btn-p:hover{background:#16334f;transform:translateY(-1px)}
.btn-o{color:var(--ink);border:1px solid var(--line)}
.btn-o:hover{border-color:var(--teal-deep);color:var(--teal-deep)}

.hero-stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:2.2rem;
  border-top:1px solid var(--line-soft);margin-top:1.7rem;padding-top:1.3rem;
  width:fit-content;
}
.hstat dt{font-family:var(--disp);font-weight:700;font-size:1.4rem;color:var(--ink);line-height:1.15}
.hstat dd{font-size:.78rem;color:var(--faint);margin-top:.05rem}

/* TERMINAL (stays dark — contrast card) */
.terminal-fixed{
  background:#0d1b2c;border:1px solid #0d1b2c;border-radius:12px;
  overflow:hidden;box-shadow:0 18px 44px rgba(13,34,54,.18);
  display:flex;flex-direction:column;height:360px;width:100%;
}
.tbar{
  display:flex;align-items:center;gap:.45rem;
  padding:.55rem .9rem;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);
}
.td{width:10px;height:10px;border-radius:50%}
.td-r{background:#f26d6d}.td-y{background:#f2c94c}.td-g{background:#27c47f}
.tbar-title{margin-left:.6rem;font-family:var(--mono);font-size:.68rem;color:#5c7896}
.terminal-scroll{
  padding:.85rem 1rem;overflow-y:auto;flex:1;
  font-family:var(--mono);font-size:.73rem;line-height:1.65;
}
.terminal-scroll::-webkit-scrollbar{width:0}
.tline{opacity:0;transform:translateY(3px);transition:opacity .25s,transform .25s;white-space:pre-wrap}
.tline.show{opacity:1;transform:none}
.gc{color:#14d8b0}.wc{color:#e8eff8}.mc{color:#5c7896}
.yc{color:#f2c94c}.bc{color:#6db3f2}.pc{color:#c39df5}

/* ══ SECTIONS ══ */
.section{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:2.4rem 2rem}
.sec-tag{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--teal-deep);
  display:block;margin-bottom:.55rem;
}
.sec-head{margin-bottom:1.4rem}
h2{font-size:1.6rem;font-weight:700}
.h2-sm{font-size:1.35rem;margin-bottom:.45rem}
.band-sub{color:var(--muted);font-size:.9rem;max-width:420px;margin-bottom:1.1rem}

/* FEATURES */
.feat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:14px;overflow:hidden;
}
.fcard{
  background:#fff;padding:1.2rem 1.35rem;
  display:flex;gap:.95rem;align-items:flex-start;
  transition:background .25s;
}
.fcard:hover{background:#f4fbf9}
.ficon{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:var(--teal-dim);display:flex;align-items:center;justify-content:center;
}
.ficon svg{width:16px;height:16px;fill:none;stroke:var(--teal-deep);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fcard h3{font-size:.93rem;font-weight:600;margin-bottom:.2rem}
.fcard p{font-size:.81rem;color:var(--muted);line-height:1.5}

.uc-strip{
  margin-top:1.1rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
  color:var(--ink);
  border-left:2px solid var(--teal);padding-left:1rem;line-height:1.9;
}
.uc-label{
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--faint);margin-right:.7rem;
}

/* BAND: integrations + how it works */
.band{
  background:rgba(255,255,255,.72);backdrop-filter:blur(3px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  max-width:none;
}
.band-grid{max-width:1176px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:4rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  font-family:var(--mono);font-size:.75rem;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .95rem;
  background:var(--bg);transition:border-color .2s,color .2s;
}
.chip:hover{border-color:var(--teal-deep);color:var(--teal-deep)}

.steps{list-style:none;counter-reset:step;display:grid;gap:.8rem;margin-top:.3rem}
.steps li{counter-increment:step;position:relative;padding-left:2.5rem;font-size:.88rem}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:.1rem;
  font-family:var(--mono);font-size:.72rem;color:var(--teal-deep);
}
.steps li::after{
  content:"";position:absolute;left:.55rem;top:1.4rem;bottom:-.6rem;width:1px;background:var(--line);
}
.steps li:last-child::after{display:none}
.steps b{display:block;font-weight:600;color:var(--ink)}
.steps span{color:var(--muted);font-size:.81rem}

/* CONTACT */
.contact{padding-bottom:2.6rem}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}
.cinfo{list-style:none;display:grid;gap:.55rem;font-size:.88rem}
.cinfo span{
  display:inline-block;width:72px;
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);
}
.cinfo a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.cinfo a:hover{color:var(--teal-deep);border-color:var(--teal-deep)}

.contact-form{
  background:#fff;border:1px solid var(--line-soft);border-radius:14px;
  padding:1.4rem;display:grid;gap:.9rem;
  box-shadow:0 8px 28px rgba(13,34,54,.05);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field label{display:block;font-size:.73rem;font-weight:500;color:var(--muted);margin-bottom:.3rem}
.field label i{font-style:normal;color:var(--faint)}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:.58rem .8rem;color:var(--ink);
  font-family:inherit;font-size:.86rem;outline:none;transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal-deep)}
.field textarea{resize:vertical;min-height:64px}
.form-submit{
  background:var(--navy-btn);color:#fff;border:none;border-radius:9px;
  font-family:var(--disp);font-weight:600;font-size:.92rem;
  padding:.7rem;cursor:pointer;transition:background .2s,transform .15s;
}
.form-submit:hover{background:#16334f;transform:translateY(-1px)}
.form-note{font-size:.82rem;color:var(--teal-deep);opacity:0;transition:opacity .3s}
.form-note.show{opacity:1}

/* FOOTER */
footer{
  position:relative;z-index:1;background:rgba(255,255,255,.72);backdrop-filter:blur(3px);
  border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  padding:1.1rem max(2rem,calc((100% - 1176px)/2));
}
.flinks{display:flex;gap:1.3rem;margin-left:auto}
.flinks a{color:var(--muted);text-decoration:none;font-size:.8rem}
.flinks a:hover{color:var(--ink)}
.fcopy{font-size:.74rem;color:var(--faint)}

@media (min-width:1500px){
  .feat-grid{grid-template-columns:repeat(3,1fr)}
  .hero{gap:5rem}
}

/* ══ RESPONSIVE ══ */
@media (max-width:1020px){
  .hero{grid-template-columns:1fr;gap:2rem;padding:2.4rem 2rem 2.2rem}
  .terminal-fixed{justify-self:stretch;max-width:none;height:280px}
  .band-grid,.contact-grid{grid-template-columns:1fr;gap:2.2rem}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  nav.menu-open .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:var(--nav-h);left:0;right:0;
    background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);
    padding:.4rem 0;margin:0;box-shadow:0 16px 30px rgba(13,34,54,.08);
  }
  nav.menu-open .nav-links a{display:block;padding:.8rem 2rem;font-size:.95rem}
  .nav-container{padding:0 1.25rem}
}
@media (max-width:600px){
  .section{padding:2rem 1.25rem}
  .hero{padding:2rem 1.25rem 1.9rem}
  .feat-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero-stats{gap:1.4rem}
  h1{font-size:2rem}
  footer{padding:1rem 1.25rem;gap:1rem}
  .flinks{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}