@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   BRAND COLORS
   Blue  #1a5fad  |  Green #2e9e3e  |  Teal #1a8fa0
══════════════════════════════════════════════════════════════ */
:root {
  --blue:       #1a5fad;
  --blue-dark:  #134a8a;
  --blue-light: #2476c8;
  --blue-dim:   rgba(26,95,173,0.09);
  --green:      #2e9e3e;
  --green-dark: #237130;
  --green-light:#38b84a;
  --green-dim:  rgba(46,158,62,0.10);
  --teal:       #1a8fa0;
  --bg:         #ffffff;
  --bg-2:       #f3f7fb;
  --bg-3:       #e5edf7;
  --bg-4:       #d5e3f0;
  --border:     #cfdae9;
  --text-1:     #0d1f35;
  --text-2:     #3d5470;
  --text-3:     #8099b8;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  20px;
  --shadow-xs:  0 1px 3px rgba(26,95,173,0.07);
  --shadow-sm:  0 2px 8px rgba(26,95,173,0.09);
  --shadow:     0 6px 20px rgba(26,95,173,0.12);
  --shadow-lg:  0 14px 44px rgba(26,95,173,0.16);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text-1);
  font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:rgba(26,95,173,0.25); border-radius:10px; }

/* ── Typography ────────────────────────────────────────────── */
.eyebrow {
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
}
.gradient-text {
  background:linear-gradient(135deg,var(--blue) 0%,var(--teal) 50%,var(--green) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.stat-num {
  font-weight:800;
  background:linear-gradient(135deg,var(--blue) 0%,var(--teal) 45%,var(--green) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#fff;
  font-weight:700; font-size:14px;
  border-radius:var(--radius-sm);
  padding:10px 22px;
  transition:all .18s;
  box-shadow:0 2px 10px rgba(26,95,173,0.28);
  cursor:pointer; border:none; font-family:inherit;
}
.btn-primary:hover {
  background:var(--blue-light); color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(26,95,173,0.35);
}
.btn-green {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green); color:#fff;
  font-weight:700; font-size:14px;
  border-radius:var(--radius-sm); padding:10px 22px;
  transition:all .18s;
  box-shadow:0 2px 10px rgba(46,158,62,0.28);
  cursor:pointer; border:none; font-family:inherit;
}
.btn-green:hover { background:var(--green-light); transform:translateY(-1px); }
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--blue);
  font-weight:600; font-size:14px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 22px;
  transition:all .18s;
  cursor:pointer; font-family:inherit;
}
.btn-secondary:hover {
  background:var(--bg-2); border-color:var(--blue);
  transform:translateY(-1px); color:var(--blue);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-xs); transition:all .22s;
}
.card:hover { border-color:rgba(26,95,173,0.3); box-shadow:var(--shadow); }

/* ── Tags ──────────────────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:100px;
  font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  font-family:'DM Mono',monospace;
}
.tag-blue  { background:var(--blue-dim);  color:var(--blue);  border:1px solid rgba(26,95,173,.2); }
.tag-green { background:var(--green-dim); color:var(--green); border:1px solid rgba(46,158,62,.2); }
.tag-amber { background:rgba(245,158,11,.1); color:#b45309; border:1px solid rgba(245,158,11,.2); }
.tag-gray  { background:var(--bg-3); color:var(--text-2); border:1px solid var(--border); }
.tag-red   { background:rgba(220,38,38,.09); color:#dc2626; border:1px solid rgba(220,38,38,.2); }

/* ── Inputs (new design + Django form compat) ──────────────── */
.input-field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width:100%;
  background:var(--bg-2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-1);
  font-family:inherit;
  font-size:14px;
  padding:10px 14px;
  transition:border-color .18s, box-shadow .18s;
  outline:none;
}
.input-field:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(26,95,173,.10);
}
.input-field::placeholder,
input::placeholder,
textarea::placeholder { color:var(--text-3); }
select { appearance:auto; }
textarea { resize:vertical; }

/* ── Django form labels & errors ───────────────────────────── */
.form-label {
  display:block;
  font-family:'DM Mono',monospace;
  font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:6px;
}
.errorlist { list-style:none; margin-top:4px; }
.errorlist li { font-size:12px; color:#dc2626; padding:2px 0; }

/* ── Django messages ───────────────────────────────────────── */
.alert-success {
  background:var(--green-dim); border:1px solid rgba(46,158,62,.25);
  color:var(--green-dark); border-radius:var(--radius-sm);
  padding:12px 16px; font-size:14px; margin-bottom:8px;
}
.alert-error {
  background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.2);
  color:#dc2626; border-radius:var(--radius-sm);
  padding:12px 16px; font-size:14px; margin-bottom:8px;
}
.alert-warning {
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2);
  color:#b45309; border-radius:var(--radius-sm);
  padding:12px 16px; font-size:14px; margin-bottom:8px;
}

/* ── Pagination ────────────────────────────────────────────── */
.page-link {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; color:var(--text-2); background:#fff;
  transition:all .15s;
}
.page-link:hover { border-color:var(--blue); color:var(--blue); }
.page-link.active { background:var(--blue); border-color:var(--blue); color:#fff; }

/* ── Nav link ──────────────────────────────────────────────── */
.nav-link {
  color:var(--text-2); font-size:14px; font-weight:600;
  position:relative; padding-bottom:2px; transition:color .18s;
  text-decoration:none; cursor:pointer;
}
.nav-link:hover,.nav-link.active { color:var(--blue); }
.nav-link.active::after {
  content:''; position:absolute;
  bottom:-22px; left:0; right:0;
  height:2.5px; background:var(--green); border-radius:2px;
}

/* ── Search bar ────────────────────────────────────────────── */
.search-bar {
  display:flex; align-items:center;
  background:#fff; border:1.5px solid var(--border);
  border-radius:100px; transition:all .2s; box-shadow:var(--shadow-sm);
}
.search-bar:focus-within {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,95,173,.10);
}
.search-bar input {
  background:transparent; border:none; box-shadow:none;
  padding:8px 0; font-size:13px;
}
.search-bar input:focus { box-shadow:none; border:none; }

/* ── Product card ──────────────────────────────────────────── */
.product-card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer;
  transition:all .22s; overflow:hidden; box-shadow:var(--shadow-xs);
}
.product-card:hover {
  border-color:rgba(26,95,173,.4); transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}

/* ── Top bar ───────────────────────────────────────────────── */
.top-bar {
  background:linear-gradient(90deg,var(--blue-dark) 0%,var(--blue) 60%,var(--teal) 100%);
  color:rgba(255,255,255,.9); font-size:12px; padding:7px 0;
}

/* ── Backgrounds ───────────────────────────────────────────── */
.mesh-bg {
  background:
    radial-gradient(ellipse 70% 55% at 50% -15%,rgba(26,95,173,.09) 0%,transparent 60%),
    radial-gradient(ellipse 35% 35% at 90% 25%,rgba(46,158,62,.06) 0%,transparent 55%),
    var(--bg-2);
}
.dot-grid {
  background-image:radial-gradient(circle,rgba(26,95,173,.07) 1px,transparent 1px);
  background-size:28px 28px;
}

/* ── Layout ────────────────────────────────────────────────── */
.max-w-7xl  { max-width:80rem; margin-left:auto; margin-right:auto; }
.section-lg { padding:5rem 1.5rem; }
.section-md { padding:3.5rem 1.5rem; }

/* ── Grid helpers ──────────────────────────────────────────── */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.grid-8 { display:grid; grid-template-columns:repeat(8,1fr); gap:.5rem; }
.grid-7 { display:grid; grid-template-columns:repeat(7,1fr); gap:.75rem; }
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; }

@media(max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .grid-8 { grid-template-columns:repeat(4,1fr); }
  .grid-7 { grid-template-columns:repeat(4,1fr); }
  .grid-5 { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:640px) {
  .grid-4,.grid-3,.grid-2 { grid-template-columns:1fr; }
  .grid-8 { grid-template-columns:repeat(3,1fr); }
  .grid-7 { grid-template-columns:repeat(2,1fr); }
  .grid-5 { grid-template-columns:repeat(2,1fr); }
  .section-lg { padding:3rem 1rem; }
  .section-md { padding:2.5rem 1rem; }
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }
@keyframes ticker  { from{transform:translateX(0);}to{transform:translateX(-50%);} }
@keyframes ping    { 75%,100%{transform:scale(2);opacity:0;} }

.anim-up   { animation:.55s cubic-bezier(.22,1,.36,1) forwards fadeUp; }
.anim-up-1 { animation:.55s cubic-bezier(.22,1,.36,1) .10s both fadeUp; }
.anim-up-2 { animation:.55s cubic-bezier(.22,1,.36,1) .20s both fadeUp; }
.anim-up-3 { animation:.55s cubic-bezier(.22,1,.36,1) .30s both fadeUp; }
.anim-up-4 { animation:.55s cubic-bezier(.22,1,.36,1) .40s both fadeUp; }
.anim-ticker { animation:32s linear infinite ticker; }
.animate-ping { animation:1s cubic-bezier(0,0,.2,1) infinite ping; }

/* ── Team photo ────────────────────────────────────────────── */
.team-photo {
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg,var(--bg-3),var(--bg-4));
  border:3px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; overflow:hidden; position:relative; transition:border-color .2s;
}
.team-photo:hover { border-color:var(--green); }
.team-photo img { width:100%; height:100%; object-fit:cover; }

/* ── Filter buttons ────────────────────────────────────────── */
.filter-btn {
  padding:5px 14px; border-radius:100px;
  font-size:12px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--border);
  background:#fff; color:var(--text-2);
  transition:all .15s; font-family:inherit;
}
.filter-btn:hover { border-color:var(--blue); color:var(--blue); }
.filter-btn.active {
  background:var(--blue)!important; color:#fff!important;
  border-color:var(--blue)!important;
}

/* ── Responsive nav ────────────────────────────────────────── */
@media(max-width:900px) {
  #nav-links { display:none!important; }
  #mobile-toggle { display:block!important; }
  #nav-contact-btn { display:none!important; }
}
@media(min-width:901px) {
  #nav-contact-btn { display:inline-flex!important; }
}

/* ── Top bar mobile ────────────────────────────────────────── */
@media(max-width:640px) {
  .top-bar-extras { display:none; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT CLASSES  (replaces inline style= grids)
══════════════════════════════════════════════════════════════ */

/* Hero — 2-col on desktop, 1-col on mobile */
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:center;
}

/* Stats bar — 4 across */
.stats-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

/* CTA 2-col (text + action) */
.cta-grid {
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:center;
}

/* How-It-Works 5 steps */
.how-it-works-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
}

/* About mission (text + image) */
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:center;
}

/* Facts 2-col */
.facts-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}

/* Contact — fixed sidebar + fluid form */
.contact-layout {
  display:grid;
  grid-template-columns:320px 1fr;
  gap:2.5rem;
  align-items:start;
}

/* Product detail — image + info */
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
}

/* Generic 2-col form row */
.form-row-2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

/* Footer — logo-col + 3 link cols */
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}

/* Industries inner card layout */
.industry-card-inner {
  display:grid;
  grid-template-columns:160px 1fr;
  gap:0;
}

/* Quote item row — 6 col */
.item-row-grid {
  display:grid;
  grid-template-columns:1.4fr 1.6fr 1fr 0.5fr 1.4fr 2rem;
  gap:.5rem;
  align-items:center;
}
.item-row-header {
  display:grid;
  grid-template-columns:1.4fr 1.6fr 1fr 0.5fr 1.4fr 2rem;
  gap:.5rem;
  padding:0 2px;
  margin-bottom:.5rem;
}

/* ── Tablet breakpoint (≤ 1024px) ──────────────────────────── */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .how-it-works-grid { grid-template-columns:repeat(3,1fr); }
  .stats-row { grid-template-columns:repeat(2,1fr); }
}

/* ── Mobile breakpoint (≤ 768px) ───────────────────────────── */
@media(max-width:768px) {
  .hero-grid        { grid-template-columns:1fr; gap:2.5rem; }
  .about-grid       { grid-template-columns:1fr; gap:2rem; }
  .contact-layout   { grid-template-columns:1fr; gap:1.5rem; }
  .detail-grid      { grid-template-columns:1fr; gap:2rem; }
  .cta-grid         { grid-template-columns:1fr; gap:1.25rem; }
  .form-row-2       { grid-template-columns:1fr; }
  .industry-card-inner { grid-template-columns:1fr; }

  /* Quote rows: horizontal scroll on small screens */
  .quote-items-wrap {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .item-row-grid,
  .item-row-header {
    grid-template-columns:120px 140px 90px 55px 120px 2rem;
    min-width:560px;
  }

  /* Top bar: show only the ping dot + emergency text */
  .top-bar-extras { display:none !important; }

  /* Footer single column */
  .footer-grid { grid-template-columns:1fr; gap:1.75rem; }

  /* Stats stay 2-col on mobile */
  .stats-row  { grid-template-columns:repeat(2,1fr); }
  .how-it-works-grid { grid-template-columns:repeat(2,1fr); }
  .facts-grid { grid-template-columns:1fr; }
}

/* ── Small phones (≤ 420px) ────────────────────────────────── */
@media(max-width:420px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .how-it-works-grid { grid-template-columns:1fr 1fr; }
}

/* ── Stat card border separators — hide last border on mobile ─ */
@media(max-width:768px) {
  .stat-sep { border-right:none !important; border-bottom:1px solid var(--border); }
  .stat-sep:last-child { border-bottom:none; }
}