/* QuSpectra — landing page styles */
:root{
  --ink:#0e0e10;
  --paper:#ffffff;
  --soft:#fcfcfb;
  --muted:#4a4a47;
  --faint:#8a8a84;
  --line:#e9e9e4;
  --line2:#e4e4df;
  --max:1180px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Red Hat Display',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
img{ display:block; }
h1,h2,h3,p{ margin:0; }
::selection{ background:var(--ink); color:#fff; }

.wrap{ max-width:var(--max); margin:0 auto; padding-left:28px; padding-right:28px; }
.mono{ font-family:'Space Mono',ui-monospace,monospace; }
.kicker{
  font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--faint);
}

/* Buttons */
.btn{
  display:inline-block; background:var(--ink); color:#fff; font-weight:600; font-size:16px;
  padding:15px 28px; border-radius:4px; transition:background .15s ease;
}
.btn:hover{ background:#26262a; }
.link-underline{
  display:inline-block; font-weight:600; font-size:16px; padding-bottom:3px;
  border-bottom:2px solid currentColor;
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; gap:28px; padding-top:16px; padding-bottom:16px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ width:30px; height:30px; }
.brand-name{ font-weight:700; font-size:21px; letter-spacing:-0.03em; }
.nav-links{ display:flex; gap:30px; margin-left:18px; font-size:15px; font-weight:500; color:#3a3a38; }
.nav-links a:hover{ color:var(--ink); }
.nav-badge{
  margin-left:auto; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; border:1px solid #d4d4ce; border-radius:4px; padding:8px 12px; color:var(--ink);
  white-space:nowrap;
}

/* HERO */
.hero{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:center;
  padding-top:84px; padding-bottom:72px; }
.hero h1{ font-weight:800; font-size:clamp(44px,5.6vw,82px); line-height:1.0;
  letter-spacing:-0.035em; margin-top:22px; }

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 520px;
  margin-top: 24px;
text-align: justify;
  text-wrap: pretty;          /* avoids orphaned last words */
  hyphens: auto;  

}
.lede + .lede {
  margin-top: 14px;   /* tighter gap between the two lede paragraphs */
}


.hero-cta{ margin-top:34px; }
.hero-tags{ margin-top:32px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tag{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  border:1px solid #d4d4ce; border-radius:4px; padding:7px 11px; color:var(--ink); }
.tag-note{ font-family:'Space Mono',monospace; font-size:12px; color:var(--faint); }
.hero-media{ position:relative; }
.media-frame{ aspect-ratio:4/5; border:1px solid var(--line2); border-radius:10px; overflow:hidden; background:var(--ink); }
.media-frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.status-chip{
  position:absolute; left:-1px; bottom:24px; transform:translateX(-40%);
  background:var(--ink); color:#fff; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em;
  padding:9px 14px; border-radius:4px; display:flex; align-items:center; gap:10px; border:1px solid #34343a;
}
.dot{ width:7px; height:7px; border-radius:50%; background:#3ddc84; }

/* STATS */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--soft); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:30px 26px; border-right:1px solid var(--line); }
.stat:first-child{ padding-left:0; }
.stat:last-child{ padding-right:0; border-right:0; }
.stat-num{ font-weight:700; font-size:30px; letter-spacing:-0.03em; }
.stat-label{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:0.08em; color:var(--faint); margin-top:6px; }

/* Section heads */
.section{ padding-top:104px; padding-bottom:104px; }
.section-title{ font-weight:700; font-size:clamp(30px,4vw,46px); letter-spacing:-0.03em;
  line-height:1.04; margin-top:18px; max-width:720px; }

/* CAPABILITIES */
.caps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:48px; }
.card{ border:1px solid var(--line); border-radius:10px; padding:38px; }
.card .icon{ width:48px; height:48px; }
.eyebrow{ font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint); margin-top:26px; }
.card h3{ font-weight:700; font-size:25px; letter-spacing:-0.02em; margin-top:8px; }
.card p{ font-size:16.5px; line-height:1.55; color:var(--muted); margin-top:14px; }

/* TECH BAND (dark) */
.tech{ background:var(--ink); color:#f5f5f6; }
.tech .kicker{ color:#a0a0a6; }
.tech .section-title{ color:#f5f5f6; }
.tech-card{ margin-top:44px; border:1px solid #262629; border-radius:12px; overflow:hidden;
  background:#161619; display:grid; grid-template-columns:1.05fr 0.95fr; }
.tech-card .img-wrap{ background:#8b8b8e; }
.tech-card .img-wrap img{ width:100%; height:100%; object-fit:cover; object-position:50% 46%; }
.tech-text{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
.tech-text .eyebrow{ color:#a0a0a6; }
.tech-text p{ font-size:17px; line-height:1.6; color:#f5f5f6; margin-top:16px; font-weight:500; }
.tech-text .legend{ font-family:'Space Mono',monospace; font-size:12px; line-height:1.8; color:#a0a0a6; margin-top:18px; font-weight:400; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:54px; }
.step{ padding:0 38px; border-right:1px solid #262629; }
.step:first-child{ padding-left:0; }
.step:last-child{ padding-right:0; border-right:0; }
.step-head{ display:flex; align-items:center; justify-content:space-between; }
.step-head img{ width:42px; height:42px; }
.step-no{ font-family:'Space Mono',monospace; font-size:13px; font-weight:700; color:#5a5a60; }
.step h3{ font-weight:700; font-size:22px; letter-spacing:-0.02em; margin-top:24px; color:#f5f5f6; }
.step p{ font-size:16px; line-height:1.55; color:#a0a0a6; margin-top:12px; }

/* DEVICE */
.device{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
.device-img{ position:relative; aspect-ratio:1/1; border:1px solid var(--line2); border-radius:10px;
  overflow:hidden; background:var(--ink); }
.device-img img{ width:100%; height:100%; object-fit:cover; }
.ver-chip{ position:absolute; top:16px; left:16px; background:rgba(14,14,16,0.82); color:#fff;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; padding:6px 11px; border-radius:4px; }
.device-note{ font-family:'Space Mono',monospace; font-size:12px; line-height:1.7; color:var(--faint); margin-top:16px; }
.spec-table{ margin-top:34px; border-top:1px solid var(--line); }
.spec-row{ display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line); }
.spec-row span:first-child{ font-weight:500; color:var(--muted); }
.spec-row .val{ font-family:'Space Mono',monospace; font-size:14px; }

/* APPLICATIONS */
.apps{ background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.apps .section-title{ max-width:640px; font-size:clamp(26px,3.4vw,40px); }
.apps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  margin-top:46px; border:1px solid var(--line); }
.app{ background:#fff; padding:30px; }
.app-no{ font-family:'Space Mono',monospace; font-size:11px; color:#b4b4ae; }
.app-name{ font-weight:600; font-size:18px; margin-top:12px; }
.app-desc{ font-size:14.5px; color:#6b6b66; margin-top:6px; }

/* CTA */
.cta{ background:var(--ink); color:#f5f5f6; }
.cta-inner{ max-width:900px; margin:0 auto; padding:112px 28px; text-align:center; }
.cta-badge{ display:inline-flex; align-items:center; gap:12px; border:1px solid #34343a; border-radius:999px; padding:9px 18px; }
.cta-badge img{ width:22px; height:22px; }
.cta-badge span{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#cfcfd2; }
.cta h2{ font-weight:800; font-size:clamp(34px,5vw,62px); letter-spacing:-0.035em; line-height:1.02; margin-top:30px; }
.cta p{ font-size:18px; line-height:1.6; color:#a0a0a6; max-width:600px; margin:22px auto 0; }
.cta .link-underline{ margin-top:34px; color:#f5f5f6; }
.cta .link-underline:hover{ color:#cfcfd2; }

/* FOOTER */
.footer{ background:var(--ink); color:#f5f5f6; border-top:1px solid #1f1f22; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding:56px 28px 40px; max-width:var(--max); margin:0 auto; }
.footer-brand-row{ display:flex; align-items:center; gap:11px; }
.footer-brand-row img{ width:28px; height:28px; }
.footer-brand-row span{ font-weight:700; font-size:19px; letter-spacing:-0.03em; }
.footer-brand p{ font-family:'Space Mono',monospace; font-size:12px; line-height:1.7; color:#7a7a80; margin-top:18px; max-width:240px; }
.footer-col{ font-size:14.5px; line-height:2; }
.footer-col .col-title{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#7a7a80; margin-bottom:8px; }
.footer-col a{ color:#cfcfd2; display:block; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ max-width:var(--max); margin:0 auto; padding:20px 28px 40px; border-top:1px solid #1f1f22;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:'Space Mono',monospace; font-size:11.5px; color:#6a6a70; }

/* RESPONSIVE */
@media (max-width:900px){
  .nav-links{ display:none; }
  .hero{ grid-template-columns:1fr; gap:36px; padding-top:56px; padding-bottom:56px; }
  .hero-media{ max-width:440px; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .stat{ padding:24px 22px; }
  .stat:nth-child(2){ padding-right:0; border-right:0; }
  .stat:nth-child(3){ padding-left:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .section{ padding-top:72px; padding-bottom:72px; }
  .caps-grid{ grid-template-columns:1fr; }
  .tech-card{ grid-template-columns:1fr; }
  .tech-card .img-wrap{ aspect-ratio:16/10; }
  .steps{ grid-template-columns:1fr; gap:34px; }
  .step{ padding:0; border-right:0; border-top:1px solid #262629; padding-top:28px; }
  .step:first-child{ border-top:0; padding-top:0; }
  .device{ grid-template-columns:1fr; gap:36px; }
  .apps-grid{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .wrap{ padding-left:20px; padding-right:20px; }
  .nav-badge{ font-size:10px; padding:7px 9px; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .apps-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .cta-inner{ padding:80px 20px; }
}