/* ============================================================
   BOSCH PRO PARTNER NETWORK — Enterprise loyalty platform
   Design system: industrial / enterprise SaaS
   Archivo (headlines, uppercase) + IBM Plex Mono (data labels)
   ============================================================ */

:root{
  /* Bosch brand */
  --red:        #ed0007;
  --red-700:    #cc0006;
  --blue:       #007bc0;   /* Bosch signature blue */
  --blue-600:   #00659e;
  --blue-700:   #00538c;
  --navy:       #00305f;   /* hero deep */
  --navy-900:   #001d3d;   /* deepest */
  --navy-800:   #00264d;

  /* Cool neutrals */
  --ink:        #10212f;
  --ink-soft:   #3c4d5d;
  --muted:      #6b7c8c;
  --faint:      #97a6b3;
  --line:       #dde4ea;
  --line-soft:  #eaeef2;
  --surface:    #ffffff;
  --surface-2:  #f5f8fa;
  --bg:         #eceff3;

  /* Status */
  --green:      #1f9d57;
  --green-bg:   #e4f5ec;
  --amber:      #c98a14;
  --amber-bg:   #fbf2dc;
  --red-bg:     #fde7e7;

  /* Tier metals */
  --bronze:     #b07a3c;
  --silver:     #8b97a4;
  --gold:       #cf9a24;
  --platinum:   #5d6f80;

  --radius:     10px;
  --radius-lg:  16px;
  --radius-sm:  7px;
  --shadow-sm:  0 1px 2px rgba(16,33,47,.06), 0 1px 3px rgba(16,33,47,.05);
  --shadow:     0 2px 6px rgba(16,33,47,.06), 0 8px 24px rgba(16,33,47,.07);
  --shadow-lg:  0 12px 40px rgba(16,33,47,.16), 0 4px 12px rgba(16,33,47,.08);
  --ring:       0 0 0 3px rgba(0,123,192,.18);

  --maxw: 1280px;
  --header-h: 116px;

  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --num-font: 'IBM Plex Mono', ui-monospace, monospace;
  --btn-radius: 9px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(0,123,192,.2); }

/* scrollbar */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:#c4ced8; border-radius:8px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#a9b6c2; background-clip:content-box; }

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
}
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
h1,h2,h3,h4{ font-family:var(--sans); margin:0; letter-spacing:-.01em; line-height:1.08; }
.display{ font-weight:800; text-transform:uppercase; letter-spacing:-.015em; }
.num{ font-family:var(--num-font); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ---------- Top rainbow supergraphic bar ---------- */
.rainbow{
  height:6px; width:100%;
  background-image:url('assets/rainbow-bar.png');
  background-size:cover; background-position:center;
  flex:none;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ min-height:100vh; display:flex; flex-direction:column; }
.page{ flex:1; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; width:100%; }
.wrap-wide{ max-width:1420px; margin:0 auto; padding:0 32px; width:100%; }

/* ---------- Header / nav ---------- */
.hdr{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line); }
.hdr-bar{ display:flex; align-items:center; gap:24px; height:72px; }
.brandlock{ display:flex; align-items:center; gap:16px; }
.brandlock .logo{ height:26px; width:auto; }
.brand-divider{ width:1px; height:30px; background:var(--line); }
.brand-name{ font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:14px; line-height:1.1; color:var(--navy); }
.brand-name .red{ color:var(--red); }
.brand-name small{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--muted); font-weight:500; margin-top:2px; }

.nav{ display:flex; align-self:stretch; align-items:stretch; gap:4px; margin-left:auto; padding-right:8px; }
.nav a{ position:relative; display:flex; align-items:center; padding:10px 14px; font-size:14px; font-weight:600; color:var(--ink-soft); border-radius:8px; transition:.15s; }
.nav a:hover{ color:var(--ink); background:var(--surface-2); }
.nav a.active{ color:var(--blue-700); }
.nav a.active::after{ content:''; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:var(--red); border-radius:3px 3px 0 0; }

.hdr-right{ display:flex; align-items:center; gap:14px; }
.ptspill{ display:flex; align-items:center; gap:8px; background:var(--navy); color:#fff; padding:8px 14px; border-radius:999px; font-family:var(--mono); font-size:13px; font-weight:600; }
.ptspill b{ font-weight:600; }
.ptspill .lbl{ font-size:9.5px; letter-spacing:.14em; color:#9fc4e0; text-transform:uppercase; }
.iconbtn{ position:relative; width:40px; height:40px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); transition:.15s; }
.iconbtn:hover{ background:var(--surface-2); color:var(--ink); }
.iconbtn .dot{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--red); border:2px solid #fff; }
.usr{ display:flex; align-items:center; gap:10px; padding:5px 12px 5px 5px; border:1px solid var(--line); border-radius:999px; background:var(--surface); transition:.15s; }
.usr:hover{ background:var(--surface-2); }
.avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-weight:600; font-size:13px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--navy)); flex:none; }
.usr .uinfo b{ font-size:13px; display:block; line-height:1.15; }
.usr .uinfo span{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.04em; }

/* ============================================================
   HERO BANDS
   ============================================================ */
.hero{ position:relative; background:var(--navy-900); color:#fff; overflow:hidden; }
.hero .hero-tex{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32; z-index:0;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, #001d3d 22%, rgba(0,29,61,.55) 60%, rgba(0,48,95,.2) 100%);
}
.hero > *{ position:relative; z-index:2; }

/* thin red rule under section titles */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.sec-title{ font-size:30px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; color:var(--navy); }
.sec-title .accent{ color:var(--red); }
.sec-sub{ color:var(--muted); font-size:15px; margin-top:6px; max-width:none; }

/* red flag label (Bosch supergraphic motif) */
.flag{
  display:inline-flex; align-items:center; background:var(--red); color:#fff;
  font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  padding:7px 12px; line-height:1; font-size:13px;
}
.flag-lg{ font-size:clamp(28px,4vw,52px); padding:14px 20px; letter-spacing:-.01em; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:14.5px;
  padding:12px 22px; border-radius:var(--btn-radius); border:1px solid transparent;
  transition:.15s; white-space:nowrap; line-height:1;
}
.btn svg{ width:18px; height:18px; }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-700); }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-600); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-800); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface-2); border-color:#cdd6df; }
.btn-onblue{ background:#fff; color:var(--navy); }
.btn-onblue:hover{ background:#eaf2f8; }
.btn-outline-w{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline-w:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn-lg{ padding:15px 28px; font-size:16px; }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-link{ color:var(--blue-700); font-weight:700; background:none; padding:0; border:none; display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.btn-link:hover{ color:var(--blue); }

/* ============================================================
   CARDS
   ============================================================ */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); }
.card-pad{ padding:24px; }

/* Squared card edges (Tweaks: Card corners) */
.sq-cards .card,
.sq-cards .panel,
.sq-cards .prod{ border-radius:2px; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line-soft); }
.panel-head h3{ font-size:16px; font-weight:700; display:flex; align-items:center; gap:10px; }
.panel-body{ padding:22px; }

/* ---------- Badges / chips ---------- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:6px; }
.b-green{ background:var(--green-bg); color:var(--green); }
.b-amber{ background:var(--amber-bg); color:var(--amber); }
.b-red{ background:var(--red-bg); color:var(--red-700); }
.b-blue{ background:#e3f0f8; color:var(--blue-700); }
.b-gray{ background:var(--surface-2); color:var(--muted); }
.b-navy{ background:var(--navy); color:#fff; }
.dotpulse{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* tier pill */
.tierpill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:999px; border:1px solid; }
.tier-bronze{ color:var(--bronze); border-color:color-mix(in srgb,var(--bronze) 35%,transparent); background:color-mix(in srgb,var(--bronze) 9%,#fff); }
.tier-silver{ color:var(--silver); border-color:color-mix(in srgb,var(--silver) 40%,transparent); background:color-mix(in srgb,var(--silver) 10%,#fff); }
.tier-gold{ color:var(--gold); border-color:color-mix(in srgb,var(--gold) 40%,transparent); background:color-mix(in srgb,var(--gold) 10%,#fff); }
.tier-platinum{ color:var(--platinum); border-color:color-mix(in srgb,var(--platinum) 40%,transparent); background:color-mix(in srgb,var(--platinum) 9%,#fff); }
.metal-dot{ width:9px; height:9px; border-radius:50%; }

/* ============================================================
   FORMS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.field label .req{ color:var(--red); }
.field .hint{ font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.02em; }
.input, .select{
  width:100%; padding:12px 14px; font-family:var(--sans); font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:9px; transition:.15s; outline:none;
}
.input::placeholder{ color:var(--faint); }
.input:focus, .select:focus{ border-color:var(--blue); box-shadow:var(--ring); }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7c8c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:38px; }
.input-wrap{ position:relative; }
.input-wrap .eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); background:none; border:none; padding:4px; display:grid; place-items:center; }
.checkrow{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--ink-soft); line-height:1.45; }
.checkrow input{ margin-top:2px; width:17px; height:17px; accent-color:var(--blue); flex:none; }
.checkrow a{ color:var(--blue-700); font-weight:600; }

/* password criteria */
.pwmeter{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.pwbars{ display:flex; gap:5px; }
.pwbar{ height:4px; flex:1; border-radius:3px; background:var(--line); transition:.25s; }
.pwreq{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.02em; transition:.2s; }
.pwreq.ok{ color:var(--green); }
.pwreq .chk{ width:14px; height:14px; border-radius:50%; display:grid; place-items:center; background:var(--line); color:#fff; transition:.2s; }
.pwreq.ok .chk{ background:var(--green); }

/* ============================================================
   TABLES
   ============================================================ */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:14px 16px 12px; border-bottom:1px solid var(--line); }
.tbl td{ padding:14px 16px; font-size:13.5px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition:.12s; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl .num{ font-size:13px; }
.pts-pos{ color:var(--green); font-weight:600; }
.pts-neg{ color:var(--red-700); font-weight:600; }

/* ============================================================
   PRODUCT PLACEHOLDER (reward cards — swappable)
   ============================================================ */
.prod{
  position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, #eef2f6 0 14px, #e7edf2 14px 28px);
  display:grid; place-items:center;
}
.prod img{ width:100%; height:100%; object-fit:cover; }
.prod .ph{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:18px; }
.prod .ph .glyph{ color:var(--blue); opacity:.8; }
.prod .ph .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.prod .ph .nm{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); font-weight:500; }
.prod-tag{ position:absolute; top:10px; left:10px; }

/* ============================================================
   MODALS
   ============================================================ */
.scrim{ position:fixed; inset:0; background:rgba(2,16,30,.62); backdrop-filter:blur(3px); z-index:90; display:grid; place-items:center; padding:32px; animation:fade .2s ease; }
.modal{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-height:90vh; overflow:auto; animation:pop .24s cubic-bezier(.2,.9,.3,1); }
.modal-x{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.9); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-soft); z-index:3; }
.modal-x:hover{ background:#fff; color:var(--ink); }
.modal-x.on-dark{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; }
.modal-x.on-dark:hover{ background:rgba(255,255,255,.2); }

@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
@keyframes risein{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes growbar{ from{width:0} }
@keyframes sweep{ 0%{transform:translateX(-100%)} 100%{transform:translateX(220%)} }
@keyframes pingdot{ 0%{box-shadow:0 0 0 0 rgba(31,157,87,.5)} 70%{box-shadow:0 0 0 8px rgba(31,157,87,0)} 100%{box-shadow:0 0 0 0 rgba(31,157,87,0)} }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{ background:var(--navy-900); color:#cdd9e6; margin-top:64px; }
.ftr::before{ content:''; display:block; height:6px; background-image:url('assets/rainbow-bar.png'); background-size:cover; }
.ftr-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding:56px 0 40px; }
.ftr h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#7f97ad; margin:0 0 16px; font-weight:500; }
.ftr a{ display:block; color:#c2d2e0; font-size:14px; padding:5px 0; transition:.12s; }
.ftr a:hover{ color:#fff; }
.ftr-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:12.5px; color:#7f97ad; font-family:var(--mono); letter-spacing:.03em; }
.ftr-logo{ height:24px; margin-bottom:18px; filter:brightness(0) invert(1); }

/* ============================================================
   UTILITIES
   ============================================================ */
.row{ display:flex; }
.col{ display:flex; flex-direction:column; }
.center{ align-items:center; }
.between{ justify-content:space-between; }
.gap8{ gap:8px } .gap12{ gap:12px } .gap16{ gap:16px } .gap20{ gap:20px } .gap24{ gap:24px } .gap32{ gap:32px }
.grid{ display:grid; }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.fill{ flex:1; }
.wide{ width:100%; }
.tar{ text-align:right; }
.tac{ text-align:center; }
.nowrap{ white-space:nowrap; }
.divider{ height:1px; background:var(--line-soft); border:none; margin:0; }
.section{ padding:64px 0; }
.section-sm{ padding:44px 0; }
.muted{ color:var(--muted); }
.soft{ color:var(--ink-soft); }
.tiny{ font-size:12px; }
.clamp2{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fade-up{ animation:risein .5s cubic-bezier(.2,.7,.3,1) both; }

/* spinner */
.spin{ width:18px; height:18px; border:2.5px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }

/* progress */
.prog{ height:7px; background:var(--line); border-radius:6px; overflow:hidden; }
.prog > span{ display:block; height:100%; background:var(--blue); border-radius:6px; transition:width .4s ease; }
.prog.red > span{ background:var(--red); }
.prog.green > span{ background:var(--green); }

/* indeterminate shimmer bar */
.shimmer{ position:relative; height:7px; background:var(--line); border-radius:6px; overflow:hidden; }
.shimmer::after{ content:''; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg,transparent,var(--blue),transparent); animation:sweep 1.1s ease-in-out infinite; }

@media (max-width: 980px){
  .ftr-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .nav{ display:none; }
  .hdr-right{ margin-left:auto; }
}
@media (max-width: 720px){
  .wrap,.wrap-wide{ padding:0 18px; }
}