/* ===== CQ DEV - landing publica ===== */
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* topbar */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{font-weight:900;letter-spacing:3px;color:var(--accent2);font-size:1.05rem}
.brand small{color:var(--blue);letter-spacing:1px;font-size:.6rem;vertical-align:super;margin-left:4px}
.nav-actions a{margin-left:10px}

/* hero */
.hero{padding:70px 0 50px;border-bottom:1px solid var(--border2)}
.hero h1{font-size:2.8rem;line-height:1.1;margin:0 0 6px;font-weight:800}
.hero .role{color:var(--gold);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:.82rem}
.hero .tagline{font-size:1.4rem;color:var(--text2);margin:18px 0 26px;max-width:720px}
.hero .cta a{margin-right:10px}

/* secciones */
.section{padding:54px 0;border-bottom:1px solid var(--border2)}
.section h2{font-size:1.5rem;margin:0 0 6px}
.section .sub{color:var(--muted);margin:0 0 28px}

/* capabilities */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:8px 14px;font-size:.82rem;font-weight:600}

/* systems grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.sys{display:flex;flex-direction:column}
.sys .shot{height:150px;background:var(--surface2);border:1px dashed var(--border);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.78rem;margin-bottom:14px}
.sys h3{margin:0 0 4px;font-size:1.1rem}
.sys .prob{color:var(--text2);font-size:.86rem;margin:6px 0 12px;min-height:38px}
.sys .caps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sys .tag{font-size:.68rem;color:var(--muted);background:var(--surface2);border-radius:6px;padding:3px 7px}
.sys .foot{margin-top:auto;display:flex;gap:8px;padding-top:12px}

/* available */
.avail{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.avail .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(46,204,113,.6);margin-right:8px}

/* footer */
.footer{padding:34px 0;color:var(--muted);font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:640px){
  .hero h1{font-size:2rem}
  .hero .tagline{font-size:1.1rem}
}