:root {
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  --indigo-50:#eef2ff; --sky-50:#f0f9ff; --emerald-50:#ecfdf5; --amber-500:#f59e0b; --emerald-400:#34d399;
  --radius-sm:6px; --radius-md:12px; --radius-lg:24px; --radius-xl:32px; --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);
  --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --content-max:80rem; --transition:150ms ease;
}

/******************** Layout ********************/
body.landing { background:#fff; color:var(--slate-900); font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; -webkit-font-smoothing:antialiased; }
.l-container { max-width:var(--content-max); margin:0 auto; padding:0 1rem; }
.section { padding:4rem 0; }
@media (min-width:768px){ .section { padding:5rem 0; } }
.section-alt { background:var(--slate-50); }
.section-dark { background:var(--slate-900); color:#fff; }
.stack-md { display:grid; gap:2.5rem; }

/******************** Header ********************/
.marketing-header { position:sticky; top:0; z-index:50; backdrop-filter:blur(6px); background:rgba(255,255,255,.85); border-bottom:1px solid var(--slate-200); }
.marketing-header .inner { display:flex; align-items:center; justify-content:space-between; padding:0.85rem 1rem; }
.brand { display:flex; align-items:center; gap:0.75rem; text-decoration:none; color:inherit; }
.brand-logo { height:100px; width:auto; display:block; object-fit:contain; }
.brand-badge { width:2.25rem; height:2.25rem; display:inline-flex; align-items:center; justify-content:center; background:var(--slate-900); color:#fff; font-weight:var(--fw-bold); border-radius:14px; font-size:.95rem; }
.brand small { display:block; font-size:.65rem; color:var(--slate-500); margin-top:2px; }
.nav-inline { display:none; gap:1.5rem; }
@media (min-width:768px){ .nav-inline { display:flex; } }
/* Primary inline navigation (shared for supplier, customer & staff) */
.nav-inline a, .nav-inline .nav-link {
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  color:var(--slate-700);
  transition:var(--transition);
  padding:.55rem .85rem;
  line-height:1.1;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:transparent;
  border:0;
  cursor:pointer;
}
.nav-inline a:hover, .nav-inline a:focus, .nav-inline .nav-link:hover, .nav-inline .nav-link:focus {
  background:var(--slate-100);
  color:var(--slate-900);
  outline:none;
}
/* Active / current state helper (if applied via template) */
.nav-inline .active { background:var(--slate-200); color:var(--slate-900); }

/* Dropdown trigger alignment */
.nav-inline .nav-profile-trigger { font-weight:600; }

/******************** Buttons ********************/
.btn { --btn-bg:var(--slate-900); --btn-color:#fff; --btn-border:var(--slate-900); display:inline-flex; align-items:center; gap:.5rem; font-weight:var(--fw-semibold); font-size:.85rem; padding:.75rem 1.25rem; border-radius:8px; text-decoration:none; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-color); line-height:1.1; transition:var(--transition); cursor:pointer; }
.btn:hover { filter:brightness(1.08); }
.btn-outline { --btn-bg:#fff; --btn-color:var(--slate-700); --btn-border:var(--slate-200); }
.btn-light { --btn-bg:#fff; --btn-color:var(--slate-900); --btn-border:#fff; }
.btn-light:hover { background:var(--slate-100); }
.btn-muted { --btn-bg:var(--slate-100); --btn-color:var(--slate-700); --btn-border:var(--slate-200); }
.btn-lg { padding:.9rem 1.5rem; font-size:.9rem; }
/* In dark sections, outline buttons should be transparent with white text instead of white-filled */
.section-dark .btn-outline { --btn-bg:transparent; --btn-color:#fff; --btn-border:rgba(255,255,255,.7); }
.section-dark .btn-outline:hover { background:rgba(255,255,255,.12); }

/******************** Badges & Pills ********************/
.badge { display:inline-block; background:var(--slate-100); color:var(--slate-700); font-size:.65rem; font-weight:var(--fw-semibold); padding:.35rem .85rem; border-radius:999px; letter-spacing:.02em; }
.badge-dark { background:var(--slate-900); color:#fff; }

/******************** Hero ********************/
.hero { position:relative; }
.hero-grid { display:grid; gap:2.5rem; align-items:center; }
@media (min-width:768px){ .hero-grid { grid-template-columns:1fr 1fr; gap:2.75rem; } }
.display-1 { font-size:2.25rem; font-weight:var(--fw-extrabold); line-height:1.05; letter-spacing:-0.5px; }
@media (min-width:768px){ .display-1 { font-size:3.1rem; } }
.lead { font-size:1.05rem; color:var(--slate-600); line-height:1.55; }
.hero-meta { margin-top:1.35rem; display:flex; flex-direction:column; gap:.65rem; font-size:.7rem; color:var(--slate-500); }
@media (min-width:768px){ .hero-meta { flex-direction:row; font-size:.75rem; } }
.hero-video-wrapper { position:relative; }
.hero-video { aspect-ratio:16/9; width:100%; border:1px solid var(--slate-200); border-radius:22px; overflow:hidden; background:var(--slate-100); display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--slate-500); box-shadow:var(--shadow-sm); }
.hero-glow { position:absolute; inset:-1.5rem; border-radius:40px; background:linear-gradient(45deg,var(--indigo-50),var(--sky-50),var(--emerald-50)); z-index:-1; }

/******************** Cards & Grids ********************/
.cards-grid-3, .cards-grid-4 { display:grid; gap:1.5rem; }
@media (min-width:768px){ .cards-grid-3 { grid-template-columns:repeat(3,1fr); } .cards-grid-4 { grid-template-columns:repeat(4,1fr);} }
.card { background:#fff; border:1px solid var(--slate-200); border-radius:18px; padding:1.25rem 1.25rem 1.35rem; box-shadow:0 1px 0 rgba(0,0,0,.02); position:relative; }
.card h3 { margin:0; font-size:.95rem; font-weight:var(--fw-semibold); display:flex; align-items:center; gap:.5rem; }
.card p { margin:.6rem 0 0; font-size:.72rem; line-height:1.45; color:var(--slate-600); }

/******************** Split Section ********************/
.split { display:grid; gap:2.75rem; }
@media (min-width:768px){ .split { grid-template-columns:1fr 1fr; } }

/******************** Dark Panel ********************/
.dark-panel { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.05); border-radius:22px; padding:1.75rem; }
.dark-pill-grid { display:grid; gap:1rem; }
@media (min-width:768px){ .dark-pill-grid { grid-template-columns:repeat(2,1fr); } }
.dark-pill { background:rgba(0,0,0,.25); border-radius:14px; padding:1rem; }
.dark-pill div:first-child { font-size:.8rem; font-weight:var(--fw-semibold); }
.dark-pill div:last-child { font-size:.6rem; color:var(--slate-300); margin-top:.35rem; }

/******************** Transparency List ********************/
.check-list { list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:.6rem; font-size:.72rem; }
.check-list li { display:flex; gap:.55rem; line-height:1.3; }
.icon-circle { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:var(--emerald-400); }

/******************** Final CTA ********************/
.final-cta { background:var(--slate-50); border:1px solid var(--slate-200); border-radius:40px; padding:3rem 2rem; text-align:center; }
.final-cta h2 { font-size:1.9rem; font-weight:var(--fw-bold); margin:0 0 .75rem; }
.final-cta p { font-size:.85rem; max-width:40rem; margin:0 auto 1.5rem; line-height:1.5; color:var(--slate-600); }

/******************** Footer ********************/
.marketing-footer { border-top:1px solid var(--slate-200); padding:2.75rem 0; font-size:.7rem; color:var(--slate-600); }
.footer-grid { display:grid; gap:2rem; }
@media (min-width:768px){ .footer-grid { grid-template-columns:repeat(4,1fr); } }
.footer-grid h4 { margin:0 0 .65rem; font-size:.75rem; font-weight:var(--fw-semibold); color:var(--slate-900); }
.footer-grid a { text-decoration:none; color:inherit; transition:var(--transition); }
.footer-grid a:hover { color:var(--slate-900); }
.footer-brand { font-weight:var(--fw-semibold); color:var(--slate-900); font-size:.8rem; }
.copy-note { margin-top:2.25rem; font-size:.6rem; color:var(--slate-400); }

/******************** Utilities ********************/
.mt-0{margin-top:0!important;} .mt-1{margin-top:.25rem!important;} .mt-2{margin-top:.5rem!important;} .mt-3{margin-top:.75rem!important;} .mt-4{margin-top:1rem!important;} .mt-5{margin-top:1.25rem!important;} .mt-6{margin-top:1.5rem!important;} .mt-8{margin-top:2rem!important;} .gap-row{display:flex; flex-wrap:wrap; gap:.75rem; }
.flex { display:flex; } .flex-col { flex-direction:column; } .flex-wrap { flex-wrap:wrap; } .justify-center { justify-content:center; } .items-center { align-items:center; }
.text-center { text-align:center; } .fw-semibold { font-weight:var(--fw-semibold); }

/* Responsive hide/show if needed */
.hide-md { display:block; } @media (min-width:768px){ .hide-md { display:none; } }
.show-md { display:none; } @media (min-width:768px){ .show-md { display:block; } }

/******************** Icon Helpers ********************/
.icon { width:18px; height:18px; stroke-width:1.75; }
.star-row .icon { fill:var(--amber-500); color:var(--amber-500); }

/* Gradient anchor highlight */
.anchor-gradient { background:linear-gradient(90deg,var(--indigo-50),var(--sky-50)); }

/* How-it-works illustrations */
.hiw-step { display:flex; flex-direction:column; gap:.65rem; }
.hiw-figure { display:grid; place-items:center; width:100%; aspect-ratio:1/1; border-radius:14px; background: linear-gradient(180deg, var(--slate-50,#f8fafc), var(--slate-100,#f1f5f9)); border:1px solid var(--slate-200,#e5e7eb); margin:0 0 .25rem; }
.hiw-step svg { width:72px; height:72px; color: var(--indigo-700, #4338ca); }
.hiw-step h3 { font-size:1rem; margin:.1rem 0 0; }
.hiw-step p { font-size:.85rem; color:var(--slate-600); margin:0; }