/* ============================================================
   ScanTraceQR — design system
   Palette derived from the SentraOne/Sentradesk theme:
   deep teal-navy hero, teal-600 primary, mint (teal-300) accent,
   Inter typography, soft rounded cards.
   Layered on top of Bootstrap 5.3 (its markup keeps working).
   ============================================================ */

:root {
  /* brand */
  --stq-navy-900: #0c1a2a;
  --stq-navy-800: #0f2e3d;
  --stq-teal-700: #0f766e;
  --stq-teal-600: #0d9488;
  --stq-teal-500: #14b8a6;
  --stq-teal-400: #2dd4bf;
  --stq-teal-300: #5eead4;
  --stq-teal-50:  #f0fdfa;

  /* ink + surfaces */
  --stq-ink:    #101c25;   /* headings */
  --stq-body:   #475569;   /* body text */
  --stq-muted:  #6b7c8c;   /* muted */
  --stq-line:   #e7ecef;   /* hairline borders */
  --stq-bg:     #ffffff;
  --stq-soft:   #f6f9fa;   /* alt section */
  --stq-mint:   #f0fdfa;   /* teal tint */

  /* hero */
  --stq-hero: linear-gradient(135deg, #0c1a2a 0%, #0f2e3d 55%, #0d9488 135%);
  --stq-cta:  linear-gradient(135deg, #14b8a6 0%, #0d9488 55%, #0f766e 100%);
  --stq-hero-text: #dbe7ec;

  --stq-radius:    18px;
  --stq-radius-sm: 12px;
  --stq-radius-lg: 26px;

  --stq-shadow-sm: 0 1px 2px rgba(16,28,37,.05), 0 2px 6px rgba(16,28,37,.06);
  --stq-shadow:    0 6px 16px -6px rgba(16,28,37,.12), 0 12px 34px -12px rgba(16,28,37,.14);
  --stq-shadow-teal: 0 18px 40px -14px rgba(13,148,136,.45);

  /* Bootstrap variable overrides (theme its components) */
  --bs-primary: #0d9488;
  --bs-primary-rgb: 13,148,136;
  --bs-body-color: #475569;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-color: #e7ecef;
  --bs-border-radius: 12px;
  --bs-link-color: #0d9488;
  --bs-link-color-rgb: 13,148,136;
  --bs-link-hover-color: #0f766e;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--stq-body);
  background: var(--stq-bg);
  letter-spacing: -0.01em;
  display: flex; flex-direction: column;
}
body > .stq-main, body > .container { flex: 1 0 auto; }

h1,h2,h3,h4,h5,.stq-display {
  color: var(--stq-ink);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
a { text-decoration: none; }
p { line-height: 1.65; }

/* ---------- layout helpers ---------- */
.stq-container { max-width: 1140px; margin-inline: auto; padding-inline: 20px; }
.stq-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.stq-soft { background: var(--stq-soft); }
.stq-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--stq-teal-600); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.stq-lead { font-size: 1.15rem; color: var(--stq-muted); max-width: 44ch; }
.stq-gradient-text {
  background: linear-gradient(100deg, #2dd4bf, #5eead4 60%, #99f6e4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stq-teal { color: var(--stq-teal-600) !important; }

/* ---------- navbar ---------- */
.stq-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--stq-line);
}
.stq-nav .stq-container { display: flex; align-items: center; gap: 1rem; height: 68px; }
.stq-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--stq-ink); font-size: 1.15rem; letter-spacing: -0.03em; }
.stq-brand:hover { color: var(--stq-ink); }
.stq-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--stq-cta); box-shadow: var(--stq-shadow-teal); flex: 0 0 auto; }
.stq-logo svg { width: 20px; height: 20px; }
.stq-nav-links { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.stq-nav-links a.stq-navlink { color: var(--stq-body); font-weight: 600; padding: .5rem .8rem; border-radius: 9px; font-size: .95rem; }
.stq-nav-links a.stq-navlink:hover { color: var(--stq-ink); background: var(--stq-soft); }

/* ---------- buttons ---------- */
.btn { font-weight: 600; border-radius: 11px; padding: .6rem 1.15rem; letter-spacing: -0.01em; transition: transform .12s ease, box-shadow .18s ease, background .18s ease; }
.btn-lg { padding: .8rem 1.6rem; font-size: 1.05rem; border-radius: 13px; }
.btn-sm { padding: .4rem .8rem; border-radius: 9px; }
.btn-primary, .stq-btn {
  color: #fff; border: none; background: var(--stq-cta);
  box-shadow: 0 10px 24px -10px rgba(13,148,136,.6);
}
.btn-primary:hover, .stq-btn:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(13,148,136,.7); background: linear-gradient(135deg,#0d9488,#0f766e); }
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { color: var(--stq-teal-700); border: 1.5px solid var(--stq-teal-600); background: transparent; }
.btn-outline-primary:hover { background: var(--stq-teal-600); border-color: var(--stq-teal-600); color:#fff; transform: translateY(-1px); }
.btn-light { background:#fff; border:1px solid var(--stq-line); color: var(--stq-ink); font-weight:600; }
.btn-light:hover { background: var(--stq-soft); border-color:#d7dee2; }
.stq-btn-ghost-light { color:#fff; border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); }
.stq-btn-ghost-light:hover { color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.45); }
.btn-danger { background:#e11d48; border:none; }
.btn-outline-secondary { color: var(--stq-body); border:1.5px solid var(--stq-line); }
.btn-outline-secondary:hover { background: var(--stq-soft); color: var(--stq-ink); border-color:#d7dee2; }
.btn-outline-warning { color:#b45309; border:1.5px solid #fcd34d; }
.btn-outline-warning:hover { background:#fef3c7; color:#92400e; }
.btn-outline-light { color:#fff; border:1.5px solid rgba(255,255,255,.35); }
.btn-outline-light:hover { background:rgba(255,255,255,.14); color:#fff; }

/* ---------- cards / surfaces ---------- */
.card, .stq-card {
  border: 1px solid var(--stq-line);
  border-radius: var(--stq-radius);
  background: #fff;
  box-shadow: var(--stq-shadow-sm);
}
.card { --bs-card-border-color: var(--stq-line); }
.stq-card { padding: 1.4rem; }
.stq-card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.stq-card-hover:hover { transform: translateY(-4px); box-shadow: var(--stq-shadow); border-color: #d6efe9; }
.stq-icontile { width: 46px; height: 46px; border-radius: 13px; display:grid; place-items:center;
  background: linear-gradient(140deg, var(--stq-teal-50), #d7f5ee); color: var(--stq-teal-700); }
.stq-icontile svg { width: 24px; height: 24px; }

/* stat tiles */
.stq-stat { background:#fff; border:1px solid var(--stq-line); border-radius: var(--stq-radius-sm); padding: 1.1rem 1.25rem; box-shadow: var(--stq-shadow-sm); }
.stq-stat .stq-stat-num { font-size: 1.9rem; font-weight: 800; color: var(--stq-ink); letter-spacing:-.03em; line-height:1; }
.stq-stat .stq-stat-label { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--stq-muted); font-weight:700; margin-top:.35rem; }

/* ---------- badges / pills ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .38em .7em; letter-spacing: .01em; }
.text-bg-success, .bg-success { background: var(--stq-teal-600) !important; }
.stq-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:999px;
  font-weight:600; font-size:.9rem; background: var(--stq-mint); color: var(--stq-teal-700); border:1px solid #cdeee6; }
.stq-pill-dark { background: rgba(255,255,255,.08); color:#e6f6f3; border:1px solid rgba(255,255,255,.16); }

/* ---------- forms ---------- */
.form-control, .form-select {
  border-radius: 11px; border:1.5px solid var(--stq-line); padding:.62rem .85rem;
  color: var(--stq-ink); background:#fff;
}
.form-control:focus, .form-select:focus { border-color: var(--stq-teal-400); box-shadow: 0 0 0 4px rgba(45,212,191,.18); }
.form-label { font-weight:600; color: var(--stq-ink); margin-bottom:.35rem; font-size:.92rem; }
.form-text { color: var(--stq-muted); }
.form-check-input:checked { background-color: var(--stq-teal-600); border-color: var(--stq-teal-600); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(45,212,191,.18); border-color: var(--stq-teal-400); }

/* ---------- tables ---------- */
.table { --bs-table-color: var(--stq-body); border-color: var(--stq-line); }
.table > thead th { text-transform:uppercase; font-size:.74rem; letter-spacing:.06em; color:var(--stq-muted);
  font-weight:700; border-bottom:1px solid var(--stq-line); padding:.7rem .75rem; background:var(--stq-soft); }
.table > tbody td { padding:.7rem .75rem; vertical-align:middle; border-color:#eef2f4; }
.table > tbody tr:hover td { background:#fafcfc; }
.stq-table-wrap { border:1px solid var(--stq-line); border-radius: var(--stq-radius); overflow:hidden; box-shadow: var(--stq-shadow-sm); }
.stq-table-wrap .table { margin:0; }

/* ---------- tabs ---------- */
.nav-tabs { border-bottom:1px solid var(--stq-line); gap:.25rem; }
.nav-tabs .nav-link { border:none; color: var(--stq-muted); font-weight:600; padding:.7rem 1.1rem; border-radius:10px 10px 0 0; }
.nav-tabs .nav-link:hover { color: var(--stq-ink); background: var(--stq-soft); }
.nav-tabs .nav-link.active { color: var(--stq-teal-700); background:transparent; border-bottom:2.5px solid var(--stq-teal-600); }

/* ---------- alerts / flash ---------- */
.alert { border:none; border-radius: 12px; padding:.85rem 1.1rem; font-weight:500; }
.alert-success { background: var(--stq-mint); color:#115e59; }
.alert-danger { background:#fef2f2; color:#b91c1c; }
.alert-info { background:#eff6ff; color:#1e40af; }
.alert-warning { background:#fffbeb; color:#92400e; }

/* ---------- hero ---------- */
.stq-hero { position:relative; background: var(--stq-hero); color: var(--stq-hero-text); overflow:hidden;
  border-radius: 0 0 var(--stq-radius-lg) var(--stq-radius-lg); }
.stq-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 320px at 85% 12%, rgba(94,234,212,.22), transparent 70%); }
.stq-hero .stq-container { position:relative; z-index:1; }
.stq-hero h1 { color:#fff; }
.stq-hero-sub { color:#c7d5e0; font-size: clamp(1.05rem,1.8vw,1.3rem); max-width: 52ch; }
.stq-hero-eyebrow { color: var(--stq-teal-300); }
.stq-hero-visual { border-radius: var(--stq-radius); border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }

/* section eyebrow on light */
.stq-section h2 { margin-bottom:.6rem; }

/* feature grid */
.stq-feature { height:100%; }
.stq-feature h3 { font-size:1.15rem; margin:.9rem 0 .4rem; }
.stq-feature p { color: var(--stq-muted); font-size:.97rem; margin:0; }

/* step number */
.stq-step-num { width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;
  background: var(--stq-mint); color: var(--stq-teal-700); border:1px solid #cdeee6; }

/* FAQ */
.stq-faq { border:1px solid var(--stq-line); border-radius: var(--stq-radius-sm); background:#fff; }
.stq-faq summary { cursor:pointer; font-weight:700; color:var(--stq-ink); padding:1rem 1.2rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.stq-faq summary::-webkit-details-marker { display:none; }
.stq-faq summary::after { content:"+"; color:var(--stq-teal-600); font-weight:800; font-size:1.3rem; line-height:1; }
.stq-faq[open] summary::after { content:"−"; }
.stq-faq p { padding:0 1.2rem 1.1rem; margin:0; color:var(--stq-muted); }

/* CTA band */
.stq-ctaband { background: var(--stq-hero); border-radius: var(--stq-radius-lg); color:#fff; position:relative; overflow:hidden; }
.stq-ctaband::after { content:""; position:absolute; inset:0; background: radial-gradient(500px 240px at 20% 0%, rgba(94,234,212,.20), transparent 70%); }
.stq-ctaband h2 { color:#fff; }

/* footer */
.stq-footer { background: #0c1a2a; color:#9fb3bd; margin-top:auto; }
.stq-footer a { color:#c7d5e0; }
.stq-footer a:hover { color:#5eead4; }
.stq-footer .stq-brand { color:#fff; }

/* blog article prose */
.stq-article { font-size: 1.06rem; color: #37475a; }
.stq-article p { margin: 0 0 1.15rem; line-height: 1.75; }
.stq-article h2 { font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
.stq-article h3 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
.stq-article ul, .stq-article ol { margin: 0 0 1.15rem 1.1rem; padding: 0; }
.stq-article li { margin-bottom: .5rem; line-height: 1.7; }
.stq-article a { color: var(--stq-teal-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.stq-article a:hover { color: var(--stq-teal-600); }
.stq-article strong { color: var(--stq-ink); }
.stq-article .stq-callout { background: var(--stq-mint); border: 1px solid #cdeee6; border-radius: 12px;
  padding: 1rem 1.2rem; margin: 0 0 1.3rem; color: #115e59; }

/* country flags (self-hosted flag-icons) */
.stq-flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(16,28,37,.12); margin-right: .5rem;
  vertical-align: -2px; line-height: 1em; }
.stq-stat-num .stq-flag { vertical-align: -1px; }

/* misc */
.stq-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; background:var(--stq-soft); border:1px solid var(--stq-line); border-radius:8px; padding:.15rem .45rem; color:var(--stq-ink); }
.stq-divider { height:1px; background:var(--stq-line); border:0; }
.text-muted { color: var(--stq-muted) !important; }
hr { color: var(--stq-line); opacity:1; }

@media (max-width: 600px) {
  .stq-nav-links a.stq-navlink { padding:.45rem .55rem; font-size:.9rem; }
  .stq-hero { border-radius:0 0 var(--stq-radius) var(--stq-radius); }
}