/* pr-labs.store brand styles with logo */
:root{
  --bg:#0b1220; --card:#0f172a; --muted:#94a3b8; --text:#e2e8f0;
  --accent:#22d3ee; --accent-2:#a78bfa; --maxw:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 80% -10%, rgba(167,139,250,.15), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(34,211,238,.12), transparent 60%), var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial}
a{color:var(--accent); text-decoration: none}
a:hover{opacity:.9; text-decoration: underline}
.container{max-width:var(--maxw); margin:0 auto; padding:24px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; position:sticky; top:0; backdrop-filter: blur(8px); background:rgba(11,18,32,.7); border-bottom:1px solid rgba(148,163,184,.1); z-index:50}
.brand{display:flex; align-items:center; gap:12px}
.brand h1{font-size:18px; margin:0}
.logo-img{height:44px;width:auto;display:block;object-fit:contain;filter:drop-shadow(0 2px 12px rgba(34,211,238,.25));}
.nav a{margin:0 10px; font-weight:600}
.cta{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1220; border:none; padding:12px 18px; border-radius:12px; font-weight:800; box-shadow:0 10px 30px rgba(34,211,238,.35); text-decoration:none}
.hero{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:32px; align-items:center; padding:48px 24px}
.hero h2{font-size:44px; line-height:1.05; margin:0 0 12px}
.hero p{font-size:18px; color:var(--muted)}
.badges{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.badge{padding:6px 10px; background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.15); border-radius:999px; font-size:13px; color:#cbd5e1}
.card-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)); border:1px solid rgba(148,163,184,.15); border-radius:16px; padding:18px;}
.card h3{margin:6px 0 8px}
.card p{color:var(--muted); margin:0 0 12px}
.card .small{font-size:12px; color:#94a3b8}
.hero-img, .product-img{border-radius:16px; border:1px solid rgba(148,163,184,.18); box-shadow: 0 15px 50px rgba(3,7,18,.45)}
.section{padding:32px 24px}
.kpis{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; margin-top:18px}
.kpi{background:linear-gradient(180deg, rgba(34,211,238,.08), rgba(167,139,250,.08)); border:1px solid rgba(148,163,184,.15); border-radius:16px; padding:18px; text-align:center}
.kpi .num{font-size:28px; font-weight:900}
.kpi .lbl{color:var(--muted); font-size:12px}
.footer{padding:32px 24px; border-top:1px solid rgba(148,163,184,.15); color:#94a3b8}
.footer a{color:#cbd5e1}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:28px}
.hero .cta{margin-top:14px}
.note{font-size:13px; color:#94a3b8}
.tag{font-weight:700; color:#a5b4fc}
@media (max-width: 960px){
  .hero{grid-template-columns: 1fr; padding-top:24px}
  .card-grid{grid-template-columns: 1fr}
  .kpis{grid-template-columns: repeat(2, minmax(0,1fr))}
  .split{grid-template-columns: 1fr}
}


/* Responsive images: prevent overflow */
img{max-width:100%;height:auto}
.hero-img,.product-img{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:70vh;      /* never exceed 70% of viewport height */
  display:block;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  box-shadow: 0 15px 50px rgba(3,7,18,.45);
}