/* ═══════════════════════════════════════════
   EKRPT NETWORKING LABS — Global Stylesheet
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=Space+Mono:wght@400;700&display=swap');

:root {
  --blue:        #1a8fc4;
  --blue-dark:   #0f6d9a;
  --blue-deeper: #0a4d70;
  --blue-light:  #e8f5fc;
  --blue-mid:    #5eb8e8;
  --blue-glow:   rgba(26,143,196,.15);
  --red:         #d94040;
  --red-light:   #fdeaea;
  --white:       #ffffff;
  --off-white:   #f7fbfe;
  --gray-50:     #f4f6f8;
  --gray-100:    #e4eaf0;
  --gray-200:    #ccd5de;
  --gray-300:    #9aaabb;
  --gray-400:    #6e8090;
  --gray-500:    #4a5d6e;
  --gray-700:    #2c3e4f;
  --gray-900:    #111d28;
  --font-head:   'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --font-mono:   'Space Mono', monospace;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --shadow-sm:   0 2px 8px rgba(0,0,0,.06);
  --shadow-md:   0 8px 24px rgba(0,0,0,.08);
  --shadow-blue: 0 8px 32px rgba(26,143,196,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--gray-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--blue-mid); border-radius: 3px; }

/* ── UTILITY ── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.hidden { display: none !important; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: -.02em; line-height: 1.1; }

/* ── BUTTONS ── */
.btn { display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:var(--radius);font-size:14px;font-weight:500;font-family:var(--font-body);cursor:pointer;transition:all .18s;border:none;text-decoration:none; }
.btn-primary { background:var(--blue);color:#fff; }
.btn-primary:hover { background:var(--blue-dark);transform:translateY(-1px);box-shadow:var(--shadow-blue); }
.btn-secondary { background:none;color:var(--gray-700);border:1.5px solid var(--gray-200); }
.btn-secondary:hover { border-color:var(--blue);color:var(--blue); }
.btn-outline-white { background:none;color:#fff;border:1.5px solid rgba(255,255,255,.3); }
.btn-outline-white:hover { background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6); }
.btn-red { background:var(--red);color:#fff; }
.btn-red:hover { background:#c23535; }
.btn-lg { padding:14px 28px;font-size:16px; }
.btn-sm { padding:7px 14px;font-size:12px; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-100);
  height: 64px;
  display: flex; align-items: center;
  padding: 0 24px; gap: 20px;
}
.nav-logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0; }
.nav-logo-mark {
  width: 36px; height: 36px;
  background: var(--blue); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.nav-logo-mark svg { width:20px;height:20px;fill:white; }
.nav-brand { font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--gray-900); }
.nav-brand span { color:var(--blue); }
.nav-links { display:flex;align-items:center;gap:2px;margin-left:auto; }
.nav-links a {
  padding: 7px 13px; border-radius: var(--radius);
  font-size: 14px; color: var(--gray-400);
  text-decoration: none; font-weight: 400;
  transition: all .15s;
}
.nav-links a:hover { color:var(--gray-900);background:var(--gray-50); }
.nav-links a.active { color:var(--blue);font-weight:500; }
.nav-actions { display:flex;align-items:center;gap:8px;margin-left:12px; }
.cart-btn {
  position:relative;padding:8px 14px;
  border:1.5px solid var(--gray-100);background:none;
  border-radius:var(--radius);font-size:13px;font-weight:500;
  cursor:pointer;font-family:var(--font-body);
  display:flex;align-items:center;gap:6px;color:var(--gray-700);
  transition:all .15s;
}
.cart-btn:hover { border-color:var(--blue);color:var(--blue); }
.cart-count {
  position:absolute;top:-6px;right:-6px;
  background:var(--red);color:white;
  width:18px;height:18px;border-radius:50%;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
}

/* ── SECTION COMMON ── */
.section { padding: 80px 0; }
.section-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.section-title { font-family:var(--font-head);font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--gray-900);margin-bottom:12px; }
.section-sub { font-size:16px;color:var(--gray-400);font-weight:300;max-width:520px;line-height:1.7; }

/* ── TRUST BAR ── */
.trust-bar { background:var(--gray-900);padding:18px 24px; }
.trust-inner { max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-around;gap:20px;flex-wrap:wrap; }
.trust-item { display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.65);white-space:nowrap; }
.trust-icon { width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }

/* ── PRODUCT CARD ── */
.products-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px; }
.product-card {
  background:white;border:1px solid var(--gray-100);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all .2s;cursor:pointer;
}
.product-card:hover { border-color:var(--blue-mid);transform:translateY(-4px);box-shadow:var(--shadow-blue); }
.product-img {
  height:160px;background:var(--off-white);
  display:flex;align-items:center;justify-content:center;
  font-size:58px;position:relative;border-bottom:1px solid var(--gray-100);
}
.product-badge {
  position:absolute;top:12px;left:12px;
  font-size:10px;font-weight:700;padding:3px 9px;
  border-radius:100px;letter-spacing:.04em;
  font-family:var(--font-mono);text-transform:uppercase;
}
.badge-new { background:var(--blue-light);color:var(--blue-dark); }
.badge-hot { background:var(--red-light);color:var(--red); }
.badge-branded { background:var(--gray-900);color:white; }
.product-body { padding:16px 18px; }
.product-cat { font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--gray-300);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px; }
.product-name { font-family:var(--font-head);font-size:15px;font-weight:600;color:var(--gray-900);margin-bottom:4px;line-height:1.3; }
.product-desc { font-size:12px;color:var(--gray-400);margin-bottom:14px;line-height:1.55; }
.product-footer { display:flex;align-items:center;justify-content:space-between; }
.product-price { font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--gray-900); }
.product-price small { font-size:10px;color:var(--gray-300);font-weight:400;display:block;font-family:var(--font-body); }
.add-to-cart { padding:8px 16px;background:var(--blue);color:white;border:none;border-radius:var(--radius);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font-body);transition:all .15s; }
.add-to-cart:hover { background:var(--blue-dark); }

/* ── FOOTER ── */
footer { background:var(--gray-900);padding:60px 24px 28px; }
.footer-inner { max-width:1120px;margin:0 auto; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px; }
.footer-logo-wrap { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.footer-logo-mark { width:32px;height:32px;background:var(--blue);border-radius:7px;display:flex;align-items:center;justify-content:center; }
.footer-logo-mark svg { width:18px;height:18px;fill:white; }
.footer-brand { font-family:var(--font-head);font-size:14px;font-weight:700;color:white; }
.footer-about { font-size:13px;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:16px; }
.footer-email { display:flex;align-items:center;gap:7px;font-size:13px;color:var(--blue-mid);text-decoration:none;transition:color .15s; }
.footer-email:hover { color:white; }
.footer-col h4 { font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:16px; }
.footer-col a { display:block;font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;margin-bottom:9px;transition:color .15s; }
.footer-col a:hover { color:var(--blue-mid); }
.footer-bottom { padding-top:24px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;font-size:12px;flex-wrap:wrap;gap:12px; }
.footer-copy { color:rgba(255,255,255,.3); }
.footer-badges { display:flex;gap:8px; }
.f-badge { background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:6px;padding:4px 10px;font-size:10px;font-family:var(--font-mono);color:rgba(255,255,255,.35);letter-spacing:.04em; }

/* ── TOAST ── */
.toast {
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:var(--gray-900);color:white;
  padding:12px 20px;border-radius:var(--radius);
  font-size:13px;border-left:3px solid var(--blue);
  box-shadow:var(--shadow-md);
  transform:translateY(80px);opacity:0;
  transition:all .25s;pointer-events:none;
  font-family:var(--font-body);
}
.toast.show { transform:translateY(0);opacity:1; }

/* ── ANIMATIONS ── */
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
.fade-up { animation:fadeUp .5s ease forwards; }

/* ── FORM FIELDS ── */
.field { margin-bottom:14px; }
.field label { display:block;font-size:12px;font-weight:500;color:var(--gray-500);margin-bottom:5px;font-family:var(--font-mono);letter-spacing:.03em;text-transform:uppercase; }
.field input, .field select, .field textarea {
  width:100%;padding:10px 14px;
  border:1.5px solid var(--gray-100);
  border-radius:var(--radius);font-size:14px;
  font-family:var(--font-body);background:white;color:var(--gray-900);
  transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none;border-color:var(--blue); }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .section { padding:56px 0; }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
  .container { padding:0 16px; }
}

/* Nav logo image (used by SPECTRE themes; hidden by default) */
.nav-logo-img{display:none;height:30px;width:auto}