/* ==========================================================================
   RankForge design system — dark industrial + CS2 orange
   No framework, no build step. CSS custom properties + small components.
   ========================================================================== */

:root {
  /* palette */
  --bg: #0a0c0f;
  --bg-raised: #10131a;
  --panel: #141922;
  --panel-2: #1a2029;
  --border: #262e3a;
  --border-strong: #344050;
  --text: #e9ecf1;
  --text-muted: #9aa5b5;
  --text-faint: #66707f;
  --accent: #f5c518;
  --accent-hot: #ffd75e;
  --accent-deep: #b8930f;
  --accent-ink: #1a1204;
  --success: #46c07a;
  --danger: #e5484d;
  --warning: #f5c518;
  --info: #58a6ff;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.6);
  --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(245,197,24,.07), transparent 60%),
    radial-gradient(900px 400px at 10% -5%, rgba(88,166,255,.05), transparent 55%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
}
a { color: var(--accent-hot); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: 34px; font-weight: 800; }
h2 { font-size: 24px; font-weight: 750; }
h3 { font-size: 17px; font-weight: 700; }
p  { margin: 0 0 1em; }
small, .small { font-size: 13px; }
code, kbd { font-family: var(--mono); font-size: .92em; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.accent { color: var(--accent); }
.mono { font-family: var(--mono); }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}
.mt-3{margin-top:24px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.flex { display: flex; gap: 12px; align-items: center; }
.flex-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.right { text-align: right; }
.center { text-align: center; }
.stack > * + * { margin-top: 12px; }

html, body { overflow-x: clip; }

/* --------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,12,15,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800;
  font-size: 17px; letter-spacing: .02em; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand .mark { width: 34px; height: 34px; display: block; object-fit: contain; }
.brand b { color: var(--accent); }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  color: var(--text-muted); padding: 8px 12px; border-radius: 8px;
  font-weight: 550; font-size: 14px; white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.nav a.active { color: var(--accent); }
.topbar .spacer { flex: 1; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font: 600 14px/1 var(--font);
  cursor: pointer; transition: all .13s ease; white-space: nowrap;
}
.btn:hover { border-color: var(--border-strong); background: var(--panel-2);
  text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  border-color: var(--accent-deep); color: var(--accent-ink);
  box-shadow: 0 0 0 1px rgba(245,197,24,.15), 0 6px 18px -8px rgba(245,197,24,.55);
}
.btn-primary:hover { background: linear-gradient(180deg, #ffc06a, var(--accent-hot));
  border-color: var(--accent); }
.btn-danger { background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.4); color: #ff8589; }
.btn-danger:hover { background: rgba(229,72,77,.2); border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--panel); border-color: transparent; }
.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: var(--radius); }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ----------------------------------------------------------------- forms */
label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
.hint { color: var(--text-faint); font-size: 12.5px; margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=tel], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); font: 14.5px var(--font);
  transition: border-color .13s ease, box-shadow .13s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,197,24,.18);
}
.field { margin-bottom: 16px; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-weight: 450;
  font-size: 14px; color: var(--text-muted); }
.checkbox input { margin-top: 3px; accent-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- cards */
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-1);
}
.card h3 { margin-top: 0; }
.card-title { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; }
.panel { background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 12px/1 var(--font); letter-spacing: .03em;
  padding: 4px 9px; border-radius: 99px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-muted);
}
.badge-accent { background: rgba(245,197,24,.12); border-color: rgba(245,197,24,.35); color: var(--accent-hot); }
.badge-success { background: rgba(70,192,122,.12); border-color: rgba(70,192,122,.35); color: #7ad9a4; }
.badge-danger { background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.35); color: #ff8589; }
.badge-info { background: rgba(88,166,255,.12); border-color: rgba(88,166,255,.35); color: #8cc2ff; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------------------------------------------------------------- tables */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; color: var(--text-faint); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: rgba(255,255,255,.015); }

/* ----------------------------------------------------------------- flash */
.flashes { position: fixed; top: 74px; right: 20px; z-index: 100; display: flex;
  flex-direction: column; gap: 8px; max-width: 420px; }
.flash {
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 550;
  border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow-1);
  animation: slide-in .18s ease;
}
.flash-error { border-color: rgba(229,72,77,.5); background: #2a1417; color: #ffb3b5; }
.flash-success { border-color: rgba(70,192,122,.5); background: #12271c; color: #a3e8c3; }
.flash-info { border-color: rgba(88,166,255,.45); background: #14202f; color: #a8cfff; }
@keyframes slide-in { from { transform: translateX(12px); opacity: 0; } }

/* ------------------------------------------------------------------ hero */
.hero { padding: 84px 0 60px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(700px 340px at 50% 0%, #000 30%, transparent 75%);
}
.hero h1 { font-size: 46px; max-width: 720px; margin-bottom: 14px; }
.hero h1 .accent { color: var(--accent); }
.hero .sub { font-size: 17px; color: var(--text-muted); max-width: 640px; margin-bottom: 28px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 42px 0 0; }
.stat { background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; }
.stat b { display: block; font-size: 22px; letter-spacing: -.02em; }
.stat span { color: var(--text-faint); font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600; }
@media (max-width: 800px) { .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 34px; } }

/* ----------------------------------------------------------- auth layout */
.auth-wrap { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .card { padding: 28px; }
.auth-card h1 { font-size: 24px; margin-bottom: 4px; }
.auth-card .lead { color: var(--text-muted); font-size: 14px; margin-bottom: 22px; }
.auth-footer { text-align: center; margin-top: 16px; color: var(--text-muted); font-size: 14px; }

/* ------------------------------------------------------------- app shell */
.shell { display: grid; grid-template-columns: 232px 1fr; gap: 28px; padding: 28px 0 64px; }
.sidebar { position: sticky; top: 86px; align-self: start; }
.sidebar .group { margin-bottom: 18px; }
.sidebar .group-label { font: 700 11px/1 var(--font); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); padding: 0 10px; margin-bottom: 6px; }
.sidebar a { display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: 8px; color: var(--text-muted); font-weight: 550; font-size: 14px; }
.sidebar a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.sidebar a.active { background: rgba(245,197,24,.1); color: var(--accent-hot); }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; } }

/* --------------------------------------------------------------- footer */
footer.site {
  border-top: 1px solid var(--border); margin-top: 80px; padding: 36px 0 48px;
  color: var(--text-faint); font-size: 13.5px;
}
footer.site .cols { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; }
footer.site a { color: var(--text-muted); }
footer.site .disclaimer { max-width: 560px; line-height: 1.6; }

/* --------------------------------------------------------------- extras */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--text-faint); } .kv dd { margin: 0; }
.code-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.code-tiles code { text-align: center; padding: 8px 4px; font-size: 14px; }
.secret-box { font-family: var(--mono); font-size: 15px; letter-spacing: .08em;
  background: var(--bg-raised); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; text-align: center;
  user-select: all; word-break: break-all; }
.divider-label { display: flex; align-items: center; gap: 12px; color: var(--text-faint);
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 18px 0; }
.divider-label::before, .divider-label::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr; } }
.step { display: flex; gap: 14px; }
.step .num { width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: rgba(245,197,24,.12); color: var(--accent); border: 1px solid rgba(245,197,24,.3); }

/* nav-context overrides: keep primary buttons readable inside .nav */
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--accent-ink); }

/* ------------------------------------------------------ service catalog */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; color: var(--text); box-shadow: var(--shadow-1);
  transition: border-color .14s ease, transform .14s ease;
}
.svc-card:hover { text-decoration: none; border-color: rgba(245,197,24,.5);
  transform: translateY(-2px); }
.svc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.svc-head h3 { margin: 0; }
.svc-card p { margin: 6px 0 12px; font-size: 14px; }
.svc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.svc-cta { color: var(--accent-hot); font-weight: 650; font-size: 14px; }

/* ---------------------------------------------------------- calculator */
.calc-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .calc-layout { grid-template-columns: 1fr; } }
.calc-panel { position: sticky; top: 84px; }
.calc-total { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 2px;
  color: var(--accent-hot); }
/* coupon field (checkout + service pages) */
.ck-coupon-row { display: flex; gap: 8px; align-items: stretch; }
.ck-coupon-row input { flex: 1; text-transform: uppercase; }
.ck-coupon-apply { flex: none; white-space: nowrap; min-width: 84px; }
.ck-coupon-msg { display: none; margin-top: 8px; font-size: 13px; font-weight: 600;
  line-height: 1.4; }
.ck-coupon-msg.show { display: block; }
.ck-coupon-msg.ok { color: var(--success); }
.ck-coupon-msg.err { color: var(--danger); }
.ck-coupon-msg.muted { color: var(--text-muted); font-weight: 500; }
.ck-coupon-row input.ok { border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(70,192,122,.16); }
.ck-coupon-row input.err { border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(229,72,77,.16); }
/* limited-time sale anchor — struck "was" price + off badge (checkout + service pages) */
.ck-sale { display: flex; align-items: center; gap: 9px; margin: 8px 0 -2px; flex-wrap: wrap; }
.ck-was { font-size: 19px; font-weight: 700; color: var(--text-muted);
  text-decoration: line-through; text-decoration-color: var(--danger);
  text-decoration-thickness: 2px; }
.ck-off, .ho-off { display: inline-flex; align-items: center; gap: 5px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: #fff;
  background: linear-gradient(120deg, var(--danger), #ff6a3d); border-radius: 999px;
  line-height: 1; white-space: nowrap; box-shadow: 0 2px 10px rgba(229,72,77,.35); }
.ck-off { font-size: 11.5px; padding: 5px 10px; }
.ck-off::before, .ho-off::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff; animation: ckoffpulse 1.3s ease-in-out infinite; }
@keyframes ckoffpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
/* hero quick-order sale anchor (smaller) */
.ho-sale { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.ho-was { font-size: 18px; font-weight: 700; color: var(--text-muted);
  text-decoration: line-through; text-decoration-color: var(--danger);
  text-decoration-thickness: 2px; }
.ho-off { font-size: 10px; padding: 4px 8px; gap: 4px; }
.ho-off::before { width: 5px; height: 5px; }
.addon-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; font-weight: 450; }
.addon-row:hover { border-color: var(--border-strong); }
.addon-row input { accent-color: var(--accent); width: 16px; height: 16px; }
.currency-select { width: auto; padding: 6px 10px; font-size: 13px; }
input[type=range] { width: 100%; margin-top: 10px; accent-color: var(--accent); }

/* ------------------------------------------------------------------ chat */
.chat-card { display: flex; flex-direction: column; }
.chat-scroll { height: 340px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 8px; padding: 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin: 12px 0 6px; }
.chat-msg { max-width: 78%; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px 10px 10px 3px; padding: 8px 12px; font-size: 14px;
  align-self: flex-start; overflow-wrap: anywhere; }
.chat-msg.mine { align-self: flex-end; border-radius: 10px 10px 3px 10px;
  background: rgba(245,197,24,.13); border-color: rgba(245,197,24,.35); }
.chat-meta { font-size: 11.5px; color: var(--text-faint); margin-bottom: 3px; }
.chat-sys { align-self: center; color: var(--text-faint); font-size: 12.5px;
  background: var(--bg-raised); border: 1px dashed var(--border);
  padding: 3px 12px; border-radius: 99px; }
.chat-input { display: flex; gap: 8px; align-items: center; }
.chat-input input[type=text] { flex: 1; }

/* ------------------------------------------------------------------ bell */
.bell-wrap { position: relative; }
.bell-btn { position: relative; }
.bell-badge { position: absolute; top: -4px; right: -4px; background: var(--danger);
  color: #fff; font: 700 10.5px/1 var(--font); border-radius: 99px; padding: 3px 5px;
  min-width: 17px; text-align: center; }
.bell-menu { position: absolute; right: 0; top: 42px; width: 360px; max-height: 460px;
  overflow-y: auto; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-1); z-index: 90; display: none; }
.bell-menu.open { display: block; }
.bell-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 13.5px; }
.bell-item:hover { background: var(--panel-2); text-decoration: none; }
.bell-item.unread { border-left: 3px solid var(--accent); }
.bell-item .faint { display: block; margin-top: 2px; }

/* ---------------------------------------------------- header sound menu */
.snd-wrap { position: relative; }
#snd-top svg { width: 18px; height: 18px; display: block; }
.snd-btn svg { width: 15px; height: 15px; display: block; }
.snd-wrap .s-off { display: none; }
.snd-wrap .snd-off .s-on { display: none; }
.snd-wrap .snd-off .s-off { display: block; stroke: var(--danger); }
#snd-top.snd-off, .snd-btn.snd-off { color: var(--muted); }
.snd-menu { position: absolute; right: 0; top: 42px; width: 284px;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-1); z-index: 90;
  display: none; padding: 8px 14px 11px; }
.snd-menu.open { display: block; }
.snd-head-row { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 2px 0 7px; border-bottom: 1px solid var(--border);
  margin-bottom: 6px; }
.snd-head { font: 700 10.5px/1 var(--font); letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.snd-row { padding: 6px 0 4px; color: var(--text); }
.snd-row + .snd-row { border-top: 1px solid var(--border); }
.snd-name { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.snd-ctl { display: flex; align-items: center; gap: 9px; }
.snd-vol { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer;
  height: 18px; }
.snd-pct { font: 600 11.5px/1 var(--font-mono, monospace); color: var(--muted);
  min-width: 37px; text-align: right; }
.snd-note { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.45; }
.snd-btn { background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 9px; color: var(--text); cursor: pointer;
  transition: border-color .15s ease, color .15s ease; }
.snd-btn:hover { border-color: var(--border-strong); }

/* ------------------------------------------------------ accessibility */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px;
  border-radius: 0 0 8px 0; font-weight: 700; }
.skip-link:focus { left: 0; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent-hot); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important;
    transition-duration: .001ms !important; }
  .btn:hover { transform: none; }
  .svc-card:hover { transform: none; }
}
/* larger tap targets on mobile */
@media (max-width: 640px) {
  .btn { min-height: 42px; }
  .nav a { padding: 10px 12px; }
  .topbar-inner { gap: 10px; }
  .container, .container-narrow { padding: 0 16px; }
  h1 { font-size: 28px; }
  .hero h1 { font-size: 30px; }
  table.data { font-size: 13px; }
  .shell { gap: 16px; padding: 16px 0 48px; }
}

/* ==========================================================================
   Landing page v2 — hero visual, rank chips, sections
   ========================================================================== */
.ic { flex: none; }

/* CS2 Premier rating tier colors */
.rank-chip { display: inline-flex; align-items: center; font: 800 15px/1 var(--mono);
  letter-spacing: .02em; padding: 7px 12px; border-radius: 8px;
  border: 1px solid; background: rgba(255,255,255,.03); }
.tier-gray   { color: #b8c7d4; border-color: #b8c7d444; }
.tier-lblue  { color: #7ec3f0; border-color: #7ec3f044; }
.tier-blue   { color: #6d9eeb; border-color: #6d9eeb44; }
.tier-purple { color: #b18cf5; border-color: #b18cf544; }
.tier-pink   { color: #ef7ec4; border-color: #ef7ec444; }
.tier-red    { color: #ef6a6a; border-color: #ef6a6a44; }
.tier-gold   { color: #f5c518; border-color: #f5c51844; }

/* hero v2 */
.hero2 { position: relative; overflow: hidden; padding: 72px 0 64px; }
.hero2::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(900px 480px at 30% 10%, #000 25%, transparent 78%);
}
.hero2 .glow-a, .hero2 .glow-b { position: absolute; border-radius: 50%; filter: blur(90px);
  pointer-events: none; }
.hero2 .glow-a { width: 560px; height: 560px; right: -140px; top: -180px;
  background: rgba(245,197,24,.14); }
.hero2 .glow-b { width: 420px; height: 420px; left: -160px; bottom: -220px;
  background: rgba(88,166,255,.08); }
.hero2-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px;
  align-items: center; position: relative; }
@media (max-width: 980px) { .hero2-grid { grid-template-columns: 1fr; } }
.hero2 h1 { font-size: 52px; letter-spacing: -.03em; margin-bottom: 16px; }
.hero2 h1 .grad {
  background: linear-gradient(92deg, var(--accent-hot), var(--accent) 55%, #ff7a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 700px) { .hero2 h1 { font-size: 34px; } }
.hero2 .sub { font-size: 17.5px; color: var(--text-muted); max-width: 540px; margin-bottom: 26px; }
.hero-points { display: flex; flex-direction: column; gap: 9px; margin: 22px 0 0; }
.hero-points .pt { display: flex; gap: 10px; align-items: center; color: var(--text-muted);
  font-size: 14.5px; }
.hero-points .pt .ic { color: var(--accent); }

/* hero visual — floating live-order mockup */
.hero-visual { position: relative; min-height: 430px; }
@media (max-width: 980px) { .hero-visual { min-height: 400px; max-width: 480px; margin: 8px auto 0; } }
.hv-card { position: absolute; background: linear-gradient(180deg, #171d27, #10141b);
  border: 1px solid #2b3442; border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(245,197,24,.04); }
.hv-main { width: min(400px, 92%); left: 4%; top: 34px; padding: 22px; z-index: 3;
  animation: hv-float 7s ease-in-out infinite alternate; }
.hv-chat { right: 0; top: 0; padding: 13px 16px; z-index: 4; max-width: 250px;
  border-radius: 14px 14px 4px 14px;
  animation: hv-float 6s .8s ease-in-out infinite alternate-reverse; }
.hv-done { right: -4px; bottom: -18px; padding: 13px 16px; z-index: 4;
  animation: hv-float 8s .4s ease-in-out infinite alternate; }
.hv-xhair { position: absolute; left: -30px; bottom: -34px; color: rgba(245,197,24,.10);
  z-index: 1; }
@keyframes hv-float { from { transform: translateY(-7px); } to { transform: translateY(7px); } }

.hv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hv-title { font-weight: 750; font-size: 15px; }
.hv-title span { color: var(--text-faint); font-weight: 500; font-size: 12px; display: block; }
.live-dot { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--font);
  letter-spacing: .09em; color: #7ad9a4; text-transform: uppercase; }
.live-dot i { width: 8px; height: 8px; border-radius: 50%; background: #46c07a;
  box-shadow: 0 0 0 0 rgba(70,192,122,.55); animation: live-pulse 1.8s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 9px rgba(70,192,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,192,122,0); } }

.hv-ranks { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.hv-ranks .arrow { color: var(--text-faint); font-size: 18px; }
.hv-chart { display: block; width: 100%; height: 96px; margin-bottom: 6px; }
.hv-bar { background: #0c1016; border: 1px solid var(--border); border-radius: 99px;
  height: 9px; overflow: hidden; }
.hv-bar i { display: block; height: 100%; width: 68%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot)); }
.hv-meta { display: flex; justify-content: space-between; color: var(--text-faint);
  font-size: 12px; margin-top: 7px; }
.hv-booster { display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font: 800 12px/1 var(--font);
  background: linear-gradient(135deg, #2b3546, #1a212c); border: 1px solid #394559;
  color: var(--accent-hot); }
.hv-chat .who { font: 700 11.5px/1 var(--font); color: var(--text-faint); margin-bottom: 5px; }
.hv-chat .msg { font-size: 13.5px; }
.hv-done { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.hv-done .ic { color: #46c07a; }

/* trust facts row */
.fact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
@media (max-width: 800px) { .fact-row { grid-template-columns: repeat(2, 1fr); } }
.fact { display: flex; gap: 12px; align-items: center; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.fact .ic { color: var(--accent); }
.fact b { display: block; font-size: 15px; }
.fact span { color: var(--text-faint); font-size: 12.5px; }

/* section chrome */
.sect { padding: 64px 0 8px; }
.sect-head { max-width: 620px; margin-bottom: 28px; }
.sect-head h2 { font-size: 30px; letter-spacing: -.02em; }
.sect-head p { color: var(--text-muted); }

/* service cards v2 */
.svc-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.28);
  color: var(--accent-hot); margin-bottom: 12px; }
.svc-card:hover .svc-ic { background: rgba(245,197,24,.16); }

/* how it works v2 */
.steps2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  counter-reset: step; }
@media (max-width: 900px) { .steps2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps2 { grid-template-columns: 1fr; } }
.step2 { position: relative; background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.step2 .num2 { position: absolute; top: 16px; right: 18px; font: 800 30px/1 var(--font);
  color: rgba(245,197,24,.16); }
.step2 .ic { color: var(--accent); margin-bottom: 12px; }
.step2 b { display: block; margin-bottom: 6px; font-size: 15.5px; }
.step2 p { color: var(--text-muted); font-size: 13.8px; margin: 0; }

/* reviews */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }
.review-card { background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stars { color: var(--warning); display: inline-flex; gap: 2px; margin-bottom: 10px; }
.review-card blockquote { margin: 0 0 14px; font-size: 14.5px; color: var(--text); }
.review-who { display: flex; align-items: center; gap: 10px; color: var(--text-faint);
  font-size: 12.5px; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border: 1px solid rgba(245,197,24,.35);
  border-radius: 16px; padding: 44px 40px; margin: 64px 0 8px; text-align: center;
  background:
    radial-gradient(600px 220px at 50% -60px, rgba(245,197,24,.16), transparent 70%),
    linear-gradient(180deg, #161b24, #10141b); }
.cta-band h2 { font-size: 32px; margin-bottom: 8px; }
.cta-band p { color: var(--text-muted); max-width: 520px; margin: 0 auto 22px; }

/* hero visual on small screens: single static card, no floaters */
@media (max-width: 700px) {
  .hero-visual { min-height: 0; margin-top: 20px; }
  .hv-chat, .hv-done, .hv-xhair { display: none; }
  .hv-main { position: static; width: 100%; animation: none; }
  .fact-row { margin-top: 24px; }
}

/* ---------------------------------------------------- landing page v2 */
.promo-bar { background: linear-gradient(90deg, rgba(245,197,24,.16), rgba(245,197,24,.06));
  border-bottom: 1px solid rgba(245,197,24,.28); padding: 9px 0; font-size: 13.5px;
  text-align: center; color: var(--text-muted); }
.promo-code { background: rgba(245,197,24,.15); border-color: rgba(245,197,24,.4);
  color: var(--accent-hot); letter-spacing: .05em; }

.hero-2col { padding: 64px 0 44px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-2col h1 { font-size: 50px; line-height: 1.06; }
@media (max-width: 640px) { .hero-2col h1 { font-size: 34px; } }

.hero-trust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; font-size: 14.5px; }
.stars { color: var(--accent); letter-spacing: 1.5px; }
.tdot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint);
  margin: 0 4px; }

.hero-card { padding: 22px 22px 18px; }
.rank-demo { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; }
.rank-chip { flex: 1; text-align: center; padding: 14px 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-raised); }
.rank-chip span { display: block; font-size: 26px; font-weight: 900; font-style: italic;
  letter-spacing: -.02em; transform: skewX(-6deg); }
.rank-chip small { color: var(--text-faint); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; }
/* CS2 premier tier colors */
.rt-gray span { color: #b8c0cc; } .rt-lblue span { color: #8bb8e8; }
.rt-blue span { color: #6a9ef5; text-shadow: 0 0 18px rgba(106,158,245,.45); }
.rt-purple span { color: #b06af5; text-shadow: 0 0 18px rgba(176,106,245,.45); }
.rt-pink span { color: #eb4b9d; } .rt-red span { color: #eb4b4b; }
.rt-gold span { color: #f5c518; }
.rt-blue { border-color: rgba(106,158,245,.35); }
.rt-purple { border-color: rgba(176,106,245,.4); }
.rank-arrow { flex: 1.2; text-align: center; }
.rank-track { height: 8px; border-radius: 99px; background: var(--bg-raised);
  border: 1px solid var(--border); overflow: hidden; margin-bottom: 6px; }
.rank-fill { height: 100%; width: 62%; border-radius: 99px;
  background: linear-gradient(90deg, #6a9ef5, var(--accent), #b06af5);
  animation: rankfill 2.4s ease-out; }
@keyframes rankfill { from { width: 8%; } }

.feed-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; }
.feed-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 8px rgba(70,192,122,.6); flex: none; }

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-tile { background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; }
.trust-ico { font-size: 20px; margin-bottom: 8px; }
.trust-tile b { display: block; margin-bottom: 4px; }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }
.review-card { display: flex; flex-direction: column; gap: 10px; }
.review-body { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); flex: 1;
  margin: 0; }

.faq-item { background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 16px; }
.faq-item summary { cursor: pointer; font-weight: 650; padding: 14px 0; list-style: none;
  position: relative; padding-right: 28px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 2px; top: 10px;
  font-size: 20px; color: var(--accent); transition: transform .15s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: rgba(245,197,24,.35); }
.faq-item p { padding-bottom: 14px; }

.cta-band { text-align: center; padding: 44px 24px; border-radius: 14px;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(245,197,24,.14), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid rgba(245,197,24,.3); }

/* ---------------------------------------------------- landing v3: motion */
.gradient-text { background: linear-gradient(100deg, var(--accent-hot), var(--accent) 45%, #f56a4b);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* aurora blobs */
.hero-2col { position: relative; overflow: hidden; isolation: isolate; }
.aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .16;
  z-index: -2; animation: drift 16s ease-in-out infinite alternate; }
.a1 { width: 560px; height: 420px; right: -120px; top: -140px;
  background: radial-gradient(circle, #f5c518, transparent 65%); }
.a2 { width: 480px; height: 420px; left: -160px; top: 40px; animation-delay: -5s;
  background: radial-gradient(circle, #4a7ddb, transparent 65%); opacity: .13; }
.a3 { width: 520px; height: 380px; left: 34%; bottom: -220px; animation-delay: -9s;
  background: radial-gradient(circle, #8a4adb, transparent 65%); opacity: .11; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(46px, 26px) scale(1.12); }
}

/* film grain */
.hero-noise { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* floating particles */
.particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.particles span { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: 0; animation: float 11s linear infinite; }
.particles span:nth-child(3n) { background: #6a9ef5; width: 3px; height: 3px; }
.particles span:nth-child(4n) { background: #b06af5; }
.particles span:nth-child(1){left:6%;animation-delay:0s}.particles span:nth-child(2){left:14%;animation-delay:2.2s}
.particles span:nth-child(3){left:22%;animation-delay:5s}.particles span:nth-child(4){left:31%;animation-delay:1.4s}
.particles span:nth-child(5){left:38%;animation-delay:7s}.particles span:nth-child(6){left:46%;animation-delay:3.4s}
.particles span:nth-child(7){left:54%;animation-delay:8.6s}.particles span:nth-child(8){left:61%;animation-delay:.8s}
.particles span:nth-child(9){left:69%;animation-delay:6s}.particles span:nth-child(10){left:76%;animation-delay:4.4s}
.particles span:nth-child(11){left:84%;animation-delay:9.4s}.particles span:nth-child(12){left:91%;animation-delay:2.8s}
.particles span:nth-child(13){left:27%;animation-delay:10.2s}.particles span:nth-child(14){left:58%;animation-delay:5.8s}
@keyframes float {
  0% { transform: translateY(105%); opacity: 0; }
  12% { opacity: .7; }
  88% { opacity: .5; }
  100% { transform: translateY(-8%); opacity: 0; }
}

/* crosshair watermark */
.hero-xhair { position: absolute; right: -40px; bottom: -70px; width: 340px;
  color: var(--accent); opacity: .05; z-index: -1;
  animation: xspin 60s linear infinite; }
@keyframes xspin { to { transform: rotate(360deg); } }

/* hero card motion */
.tilt { transition: transform .25s ease, box-shadow .25s ease; }
.tilt:hover { transform: perspective(900px) rotateX(2.2deg) rotateY(-3deg) translateY(-3px);
  box-shadow: 0 24px 60px -24px rgba(245,197,24,.28), var(--shadow-1); }
.glow-blue { box-shadow: 0 0 26px -8px rgba(106,158,245,.55) inset, 0 0 22px -10px rgba(106,158,245,.5); }
.glow-purple { box-shadow: 0 0 26px -8px rgba(176,106,245,.55) inset, 0 0 22px -10px rgba(176,106,245,.5); }
.dot.pulse { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(70,192,122,.55); }
  70% { box-shadow: 0 0 0 8px rgba(70,192,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,192,122,0); }
}
.rank-fill.sweep { position: relative; overflow: hidden; }
.rank-fill.sweep::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%); animation: sheen 2.6s ease-in-out infinite; }
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }
.rank-session { margin-top: 14px; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-muted); }

/* ticker */
.ticker { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-raised); overflow: hidden; padding: 10px 0; }
.ticker-track { display: inline-flex; gap: 34px; white-space: nowrap; width: max-content;
  animation: ticker 120s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px;
  color: var(--text-muted); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* competitive per-map badge (order pages + job cards) */
.map-badge { display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 11px 4px 4px; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--text); }
.map-badge img { width: 46px; height: 26px; object-fit: cover; border-radius: 6px;
  display: block; flex: none; }

/* scroll reveal */
html.js .reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
/* Reduced-motion users (and a hard fallback if the reveal JS never runs the
   animation): show all content immediately, no hidden state. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important;
    transition: none !important; }
}

/* ===== referral program (account overview + admin panel) ===== */
.ref-hero { background: linear-gradient(150deg, rgba(245,197,24,.07), transparent 60%); }
.ref-linkrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.ref-linkbox { flex: 1 1 260px; min-width: 0; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.ref-linkbox small { display: block; color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.ref-linkbox code { display: block; font: 700 13.5px var(--mono); color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-codebox { flex: 0 1 220px; }
.ref-linkrow .btn { align-self: center; flex: none; }
.ref-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ref-tile { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 16px 13px; }
.ref-tile b { display: block; font: 900 26px/1.1 var(--mono); font-style: italic;
  color: var(--text); }
.ref-tile span { display: block; font: 700 13px var(--font); color: var(--text-muted);
  margin-top: 4px; }
.ref-tile em { display: block; font: 500 11.5px var(--font); font-style: normal;
  color: var(--text-faint); margin-top: 2px; }
.ref-tile-gold { border-color: rgba(245,197,24,.45);
  background: linear-gradient(160deg, rgba(245,197,24,.10), var(--bg-card) 70%); }
.ref-tile-gold b { color: var(--accent); }
@media (max-width: 900px) { .ref-tiles { grid-template-columns: repeat(2, 1fr); } }
.ref-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ref-step { display: flex; gap: 12px; align-items: flex-start; }
.ref-step i { flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(245,197,24,.14); border: 1px solid rgba(245,197,24,.5);
  color: var(--accent); font: 800 13px/26px var(--font); font-style: normal;
  text-align: center; }
.ref-step b { display: block; font-size: 14px; }
.ref-step p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 760px) { .ref-steps { grid-template-columns: 1fr; } }

/* referral v2: pending/void pills + per-referred-user order blocks */
.badge-pending { background: rgba(245,197,24,.12); border-color: rgba(245,197,24,.4);
  color: var(--accent); }
.badge-void { background: rgba(140,146,156,.10); border-color: rgba(140,146,156,.28);
  color: var(--text-faint); }
.ref-person { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  margin-bottom: 12px; background: rgba(255,255,255,.015); }
.ref-person:last-child { margin-bottom: 0; }
.ref-person-head { gap: 10px; align-items: center; margin-bottom: 4px; }
.ref-person-head b { font-size: 14.5px; }
.ref-orderblock { margin-top: 8px; }
.ref-orderlabel { font: 700 11px var(--font); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint); margin: 4px 2px; }
table.data.compact th, table.data.compact td { padding-top: 6px; padding-bottom: 6px;
  font-size: 12.5px; }
.mono { font-family: var(--mono); }

/* booster work: collapsible "Mark as completed" so the big form stays out of the
   way until the target's reached (declutters the order page) */
details.work-complete > summary { cursor: pointer; list-style: none; display: flex;
  align-items: baseline; gap: 8px; }
details.work-complete > summary::-webkit-details-marker { display: none; }
details.work-complete > summary::before { content: "\25B8"; color: var(--text-faint);
  transition: transform .15s ease; display: inline-block; font-size: 13px; }
details.work-complete[open] > summary::before { transform: rotate(90deg); }
.work-complete .wc-title { font: 800 15px/1.2 var(--font); color: var(--text); }
.work-complete .wc-hint { font: 500 12.5px var(--font); color: var(--text-faint); }

/* buttons */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: btnshine 3.4s ease-in-out infinite; }
@keyframes btnshine { 55%, 100% { left: 130%; } }
.btn-glass { background: rgba(255,255,255,.04); backdrop-filter: blur(6px);
  border-color: var(--border-strong); }

/* icons */
.trust-ico svg, .svc-ico svg { width: 26px; height: 26px; display: block; }
.trust-ico { width: 44px; height: 44px; border-radius: 11px; display: grid;
  place-items: center; margin-bottom: 12px; border: 1px solid var(--border); }
.ico-accent { color: var(--accent-hot); background: rgba(245,197,24,.1);
  border-color: rgba(245,197,24,.3); }
.ico-green { color: #7ad9a4; background: rgba(70,192,122,.1); border-color: rgba(70,192,122,.3); }
.ico-blue { color: #8cc2ff; background: rgba(88,166,255,.1); border-color: rgba(88,166,255,.3); }
.ico-purple { color: #c99df5; background: rgba(176,106,245,.1); border-color: rgba(176,106,245,.3); }
.svc-ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  color: var(--accent-hot); background: rgba(245,197,24,.09);
  border: 1px solid rgba(245,197,24,.25); transition: all .2s ease; }
.svc-card:hover .svc-ico { background: rgba(245,197,24,.18); transform: scale(1.06); }
.svc-card h3 { margin: 12px 0 0; }

/* section spotlight + steps connector */
.section-spot { position: relative; }
.section-spot::before { content: ""; position: absolute; left: 50%; top: -10px;
  transform: translateX(-50%); width: min(760px, 90%); height: 220px; z-index: -1;
  background: radial-gradient(ellipse at top, rgba(245,197,24,.09), transparent 70%); }
@media (min-width: 961px) {
  .steps-line { position: relative; }
  .steps-line::before { content: ""; position: absolute; top: 30px; left: 6%; right: 6%;
    height: 2px; background: linear-gradient(90deg, transparent,
      rgba(245,197,24,.35) 15%, rgba(245,197,24,.35) 85%, transparent); z-index: 0; }
  .steps-line .step { position: relative; z-index: 1; }
}
.step .num { box-shadow: 0 0 0 5px var(--bg); }

/* reviews band */
.reviews-band { margin-top: 64px; padding: 52px 0 44px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(245,197,24,.06), transparent 60%),
    radial-gradient(700px 260px at 85% 100%, rgba(138,74,219,.06), transparent 60%),
    var(--bg-raised); }
.review-card { position: relative; overflow: hidden; }
.review-quote { position: absolute; top: -26px; right: 8px; font-size: 110px;
  font-weight: 900; color: var(--accent); opacity: .08; pointer-events: none; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: var(--accent-ink); flex: none;
  background: linear-gradient(135deg, var(--accent-hot), var(--accent)); }

/* CTA with animated border */
.cta-border { border-radius: 16px; padding: 1.5px; position: relative; overflow: hidden; }
.cta-border::before { content: ""; position: absolute; inset: 0;
  background: rgba(245,197,24,.28); }
.cta-band { position: relative; border-radius: 15px; border: none; overflow: hidden; }
.cta-xhair { position: absolute; left: -60px; top: 50%; width: 260px; margin-top: -130px;
  color: var(--accent); opacity: .06; }
.tstat { white-space: nowrap; display: inline-flex; gap: 5px; align-items: baseline; }
.rank-chip span { font-size: 24px; }

/* mobile header: marketing links collapse, auth actions stay */
@media (max-width: 780px) {
  .nav-marketing { display: none; }
  .topbar-inner { gap: 12px; }
}
@media (max-width: 400px) {
  .brand span { font-size: 15px; }
  .nav a { padding: 8px 9px; font-size: 13px; }
}

/* mobile hero: let the grid shrink below the rank card's intrinsic width */
.hero-grid > * { min-width: 0; }
.rank-chip, .rank-arrow { min-width: 0; }
@media (max-width: 480px) {
  .hero-card { padding: 16px 14px 12px; }
  .rank-demo { gap: 10px; }
  .rank-chip span { font-size: 19px; }
  .rank-chip { padding: 12px 6px 9px; }
  .rank-session { flex-wrap: wrap; row-gap: 4px; }
}

/* ------------------------------------------------------------ services v2 */
.sv2-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; }
.sv2-filters { display: none; gap: 8px; flex-wrap: wrap; }
html.js .sv2-filters { display: flex; }
.sv2-pill { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--text-muted);
  font: 600 13.5px var(--font); cursor: pointer; transition: all .15s ease; }
.sv2-pill:hover { color: var(--text); border-color: var(--border-strong); }
.sv2-pill.on { background: rgba(245,197,24,.12); border-color: rgba(245,197,24,.55);
  color: var(--accent); }

.sv2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .sv2-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .sv2-grid { grid-template-columns: 1fr; } }
.sv2-hide { display: none !important; }

.sv2-card { position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 20px 20px 18px; border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.sv2-card:hover { text-decoration: none; transform: translateY(-4px);
  border-color: rgba(245,197,24,.45);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(245,197,24,.12),
              0 0 34px rgba(245,197,24,.07); }
.sv2-card h3 { margin: 0; font-size: 17.5px; }
.sv2-desc { margin: 0; font-size: 13.5px; }

.sv2-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sv2-ico { width: 42px; height: 42px; border-radius: 11px; display: grid;
  place-items: center; color: var(--accent); background: rgba(245,197,24,.1);
  border: 1px solid rgba(245,197,24,.22); }
.sv2-price { text-align: right; line-height: 1.15; }
.sv2-price small { display: block; color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; }
.sv2-price b { font-size: 18px; color: var(--accent); font-family: var(--mono); }

.sv2-feats { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.sv2-feats li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px;
  color: var(--text-muted); }
.sv2-feats svg { color: var(--success); flex: none; margin-top: 2px; }

.sv2-meta { display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); }
.sv2-speed { display: inline-flex; gap: 6px; align-items: center; font-size: 12px;
  color: var(--text-faint); }
.sv2-speed svg { color: var(--accent); }
.sv2-rate { font-size: 12.5px; color: var(--accent); font-weight: 700;
  white-space: nowrap; }
.sv2-rate em { color: var(--text-faint); font-style: normal; font-weight: 500; }

.sv2-btn { display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 10px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg-raised); font-weight: 650; font-size: 14px;
  transition: all .15s ease; }
.sv2-card:hover .sv2-btn { background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); }

.sv2-pop { border-color: rgba(245,197,24,.5);
  background: linear-gradient(180deg, rgba(245,197,24,.07), var(--bg-raised) 55%); }
.sv2-ribbon { position: absolute; top: -11px; right: 16px; padding: 4px 12px;
  border-radius: 99px; background: linear-gradient(90deg, var(--accent), #f5b043);
  color: var(--accent-ink); font: 800 10.5px var(--font); letter-spacing: .08em;
  text-transform: uppercase; box-shadow: 0 4px 14px rgba(245,197,24,.4); }

.sv2-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-faint); }
.sv2-picks-wrap { margin-top: 26px; }
.sv2-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 10px; }
@media (max-width: 900px) { .sv2-picks { grid-template-columns: 1fr 1fr; } }
.sv2-pick { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px;
  border-radius: 11px; border: 1px solid var(--border); background: var(--bg-raised);
  color: var(--text); transition: all .15s ease; }
.sv2-pick:hover { text-decoration: none; border-color: rgba(245,197,24,.5);
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.sv2-pick b { font-family: var(--mono); font-size: 15px; }
.sv2-pick-meta { display: flex; justify-content: space-between; font-size: 12px;
  color: var(--text-faint); }
.sv2-pick-price { color: var(--accent); font-weight: 700; font-family: var(--mono); }

/* ------------------------------------------------------- homepage polish */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id], #calculator { scroll-margin-top: 76px; }

.sec-eyebrow { margin-bottom: 10px; }

/* trust tiles: match service-card hover language */
.trust-tile { transition: transform .18s ease, border-color .18s ease,
  box-shadow .18s ease; }
.trust-tile:hover { transform: translateY(-3px);
  border-color: rgba(245,197,24,.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.4); }

/* ticker: fade edges */
.ticker { -webkit-mask-image: linear-gradient(90deg, transparent,
    #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

/* step numbers: gradient chips */
.step .num { background: linear-gradient(135deg, var(--accent), #f5b043);
  color: var(--accent-ink); border: none; }
.steps-line .step .num { box-shadow: 0 0 0 5px var(--bg),
  0 4px 14px rgba(245,197,24,.3); }
.step { transition: transform .18s ease; }
.step:hover { transform: translateY(-2px); }

/* faq accordion polish */
.faq-item { transition: border-color .16s ease, background .16s ease; }
.faq-item:hover { border-color: var(--border-strong); }
.faq-item summary { transition: color .14s ease; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after { color: var(--accent); font-weight: 600;
  transition: transform .18s ease; }

/* booster band */
.booster-band { display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; padding: 26px 28px; border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(245,197,24,.09),
    rgba(176,106,245,.05) 55%, transparent 80%), var(--panel); }
.booster-ico { width: 54px; height: 54px; border-radius: 14px; display: grid;
  place-items: center; color: var(--accent); background: rgba(245,197,24,.1);
  border: 1px solid rgba(245,197,24,.25); }
.booster-ico svg { width: 26px; height: 26px; }

/* -------------------------------------------------------- hero order widget */
.hero-order { padding: 18px 20px 16px; display: flex; flex-direction: column;
  gap: 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,24,32,.92), rgba(14,17,23,.94));
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(245,197,24,.06); }

.ho-tabs { display: flex; gap: 6px; align-items: center;
  border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.ho-tab { padding: 8px 14px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--text-muted); font: 650 14px var(--font);
  cursor: pointer; transition: all .14s ease; }
.ho-tab:hover { color: var(--text); background: var(--bg-raised); }
.ho-tab.on { background: rgba(245,197,24,.13); border-color: rgba(245,197,24,.5);
  color: var(--accent); }
.ho-more { margin-left: auto; font-size: 13px; color: var(--text-faint); }
.ho-more:hover { color: var(--accent); text-decoration: none; }

.ho-chips { display: flex; align-items: stretch; gap: 10px; }
.ho-chip { flex: 1; min-width: 0; text-align: center; padding: 10px 8px 9px;
  border-radius: 11px; border: 1px solid var(--border); background: var(--bg-raised);
  transition: border-color .2s ease; }
.ho-chip small { display: block; color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.ho-chip span { display: block; font: 900 22px/1.15 var(--mono); font-style: italic;
  letter-spacing: -.02em; transform: skewX(-6deg); transition: color .2s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ho-chip-text span { font-size: 14.5px; font-style: normal; transform: none;
  font-family: var(--font); font-weight: 800; line-height: 1.5; }
.ho-chip em { display: block; font-style: normal; font-size: 11px;
  color: var(--text-faint); min-height: 14px; }
.ho-arrow { display: grid; place-items: center; color: var(--accent); flex: none; }
.ho-arrow svg { width: 20px; height: 20px; }
.ho-mid { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; flex: none; min-width: 98px; }
.ho-gain { font-size: 17.5px; }
.ho-gain-sub { font-size: 9.5px; color: var(--text-faint); letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap; }
#ho-chip-tgt .ho-plaque, #ho-chip-tgt .ho-fchip img, #ho-chip-tgt .ho-wbadge {
  animation: goalglow 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #ho-chip-tgt .ho-plaque, #ho-chip-tgt .ho-fchip img, #ho-chip-tgt .ho-wbadge {
    animation: none; } }

.ho-scale-bar { position: relative; display: flex; height: 10px; border-radius: 99px;
  overflow: hidden; border: 1px solid var(--border); }
.ho-scale-bar i { height: 100%; opacity: .22; }
.ho-scale-bar .ho-hi { position: absolute; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.16));
  mix-blend-mode: screen; outline: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 14px rgba(245,197,24,.25); transition: left .15s ease, width .15s ease; }
.ho-scale-badges { display: flex; gap: 5px; justify-content: space-between; }
.ho-badge { flex: 1; aspect-ratio: 1; max-width: 32px; display: grid;
  place-items: center; font: 800 12px var(--font);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  transition: all .18s ease; }

.ho-sliders { display: grid; gap: 8px; }
.ho-slider { display: flex; align-items: center; gap: 10px; }
.ho-slider-name { width: 52px; flex: none; font-size: 12px; color: var(--text-faint); }
.ho-slider input[type=range] { flex: 1; appearance: none; -webkit-appearance: none;
  height: 5px; border-radius: 99px; background: var(--bg-raised);
  border: 1px solid var(--border); outline: none; }
.ho-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #f5b043);
  border: 2px solid #10131a; box-shadow: 0 0 0 1px rgba(245,197,24,.55),
  0 2px 8px rgba(0,0,0,.5); cursor: grab; }
.ho-slider input[type=range]::-moz-range-thumb { width: 15px; height: 15px;
  border-radius: 50%; background: var(--accent); border: 2px solid #10131a;
  cursor: grab; }

.ho-opts { display: grid; gap: 6px; }
.ho-opt { display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: 9px; border: 1px solid var(--border); background: var(--bg-raised);
  font-size: 13px; cursor: pointer; transition: border-color .14s ease; }
.ho-opt:hover { border-color: var(--border-strong); }
.ho-opt:has(input:checked) { border-color: rgba(245,197,24,.5);
  background: rgba(245,197,24,.07); }
.ho-opt input { accent-color: var(--accent); width: 15px; height: 15px; }
.ho-opt span { flex: 1; }
.ho-opt em { font-style: normal; font: 700 12px var(--mono); color: var(--accent); }

.ho-foot { display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--border); padding-top: 13px; }
.ho-price { flex: 1; line-height: 1.1; }
.ho-price small { display: block; color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em; }
.ho-price b { font: 800 24px/1.2 var(--mono); color: var(--accent);
  transition: opacity .15s ease; }
.ho-price b.ho-loading { opacity: .35; }
.ho-eta { margin-left: 8px; font-size: 12.5px; color: var(--text-faint); }
.ho-order-btn { padding: 12px 22px; font-size: 15px; }
.ho-note { font-size: 11.5px; color: var(--text-faint); text-align: center; }

@media (max-width: 960px) { .hero-order { max-width: 520px; margin: 8px auto 0; } }
@media (max-width: 480px) {
  .hero-order { padding: 14px 14px 12px; }
  .ho-chip span { font-size: 18px; }
  .ho-tab { padding: 7px 10px; font-size: 13px; }
  .ho-foot { flex-wrap: wrap; }
  .ho-order-btn { flex: 1 1 100%; text-align: center; justify-content: center; }
}

/* ------------------------------------------- hero order: real rank assets */
.ho-rank { min-height: 48px; display: grid; align-items: center; }
.ho-plaque { position: relative; height: 48px; margin: 2px 4px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.ho-plaque span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; padding-left: 9%;
  font: 900 21px/1 var(--mono); font-style: italic; letter-spacing: .01em;
  color: #fff; transform: skewX(-8deg); }
.ho-fchip { display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; }
.ho-fchip img { width: 36px; height: 36px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.ho-fchip span { font: 900 21px/1 var(--mono); font-style: italic;
  transform: skewX(-6deg); }
.ho-wbadge { display: block; height: 34px; margin: 2px auto 3px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.ho-wname { display: block; font: 800 12.5px/1.3 var(--font); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ho-chip-wing { padding-bottom: 7px; }

.ho-scale-badges img { flex: 1 1 0; min-width: 0; max-width: 34px; height: auto;
  object-fit: contain; transition: all .18s ease; }
.ho-scale-badges img.off { opacity: .22; filter: grayscale(1); }
.ho-scale-badges img.on { filter: drop-shadow(0 0 7px rgba(255,255,255,.28)); }
.ho-scale-wing { gap: 2px; align-items: center; }
.ho-scale-wing img { max-width: none; }

@media (max-width: 480px) {
  .ho-plaque span { font-size: 17px; }
  .ho-fchip span { font-size: 17px; }
  .ho-scale-wing img:nth-child(2n) { display: none; } /* every other badge on tiny screens */
}

/* wingman/faceit chip text: outrank the generic .ho-chip span numeric styling */
.ho-chip .ho-wname { font: 800 13px/1.4 var(--font); font-style: normal;
  transform: none; letter-spacing: 0; }
.ho-chip .ho-fchip span { font: 900 21px/1 var(--mono); }

/* service cards: real image chips (rank assets or img/services/<slug>.png) */
.sv2-ico-img { width: auto; min-width: 42px; max-width: 96px; padding: 5px 9px; }
.sv2-ico-img img { display: block; max-height: 32px; max-width: 76px;
  object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* hero order: typed rank/elo inputs (premier + faceit; hidden for wingman) */
.ho-slider input.ho-num { width: 76px; flex: none; padding: 7px 6px;
  text-align: center; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font: 700 13.5px var(--mono);
  -moz-appearance: textfield; }
.ho-slider .ho-num::-webkit-outer-spin-button,
.ho-slider .ho-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ho-slider input.ho-num:focus { outline: none; border-color: rgba(245,197,24,.55);
  box-shadow: 0 0 0 3px rgba(245,197,24,.14); }
.ho-wingman .ho-slider .ho-num { display: none; }
@media (max-width: 480px) { .ho-slider input.ho-num { width: 68px; } }

/* hero order: sub-category pills (Rank Boost / Placements / Net Wins / Duo) */
.ho-subs { display: none; flex-wrap: wrap; gap: 6px; }
.ho-subs.on { display: flex; }
.ho-sub { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--text-muted); font: 700 12.5px var(--font);
  cursor: pointer; transition: all .14s; white-space: nowrap; }
.ho-sub:hover { color: var(--text); border-color: rgba(245,197,24,.4); }
.ho-sub.on { background: rgba(245,197,24,.14); border-color: rgba(245,197,24,.55);
  color: var(--accent); }

/* mode toggles: boost shows target slider + scale; qty shows the stepper */
.hero-order.ho-qty .ho-mode-boost { display: none !important; }
.hero-order:not(.ho-qty) .ho-mode-qty { display: none !important; }

/* quantity stepper */
.ho-qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ho-qtyrow .ho-slider-name { width: auto; white-space: nowrap; font-size: 12.5px;
  color: var(--text-muted); }
.ho-qty-stepper { display: inline-flex; align-items: center; gap: 8px; }
.ho-qty-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--text); font: 800 18px/1 var(--font);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all .14s; }
.ho-qty-btn:hover { border-color: rgba(245,197,24,.5); color: var(--accent); }
.ho-qty-num { width: 62px; text-align: center; padding: 7px 4px; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font: 800 15px var(--mono); -moz-appearance: textfield; }
.ho-qty-num::-webkit-outer-spin-button,
.ho-qty-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ho-qty-num:focus { outline: none; border-color: rgba(245,197,24,.55);
  box-shadow: 0 0 0 3px rgba(245,197,24,.14); }

/* quantity chip (right-hand chip in qty mode) */
.ho-qbadge { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ho-qbadge b { font: 900 24px/1 var(--mono); font-style: italic; color: var(--accent); }
.ho-qbadge i { font: 700 11px/1.2 var(--font); font-style: normal; color: var(--text-muted); }

/* competitive per-map picker */
.ho-maps { display: none; align-items: center; gap: 10px; }
.hero-order.ho-hasmap .ho-maps { display: flex; }
.ho-maps-label { font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); }
.ho-maps-in { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.ho-map-thumb { width: 62px; height: 35px; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--border); flex: none; background: var(--bg-raised); }
.ho-map-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ho-map-sel { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
  background: var(--bg-raised); border: 1px solid var(--border); color: var(--text);
  font: 700 13px var(--font); cursor: pointer; }
.ho-map-sel:focus { outline: none; border-color: rgba(245,197,24,.55);
  box-shadow: 0 0 0 3px rgba(245,197,24,.14); }

/* ------------------------------------------------------------- orders UI */
.ord-card { display: flex; justify-content: space-between; align-items: center;
  gap: 18px; padding: 16px 20px; border-radius: 13px; border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--bg-raised)); color: var(--text);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.ord-card:hover { text-decoration: none; transform: translateY(-2px);
  border-color: rgba(245,197,24,.4);
  box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.ord-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ord-svc { font-size: 15.5px; }
.ord-side { display: flex; align-items: center; gap: 16px; flex: none; }
.ord-side > b { font-family: var(--mono); font-size: 15px; }
.ord-open { color: var(--text-faint); font-size: 13px; font-weight: 650;
  transition: color .15s ease, transform .15s ease; }
.ord-card:hover .ord-open { color: var(--accent); transform: translateX(3px); }
@media (max-width: 560px) { .ord-side { flex-direction: column; gap: 4px;
  align-items: flex-end; } }

.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border-radius: 99px; border: 1px solid var(--border); background: var(--bg-raised);
  font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint); }
.status-pill.badge-success { border-color: rgba(70,192,122,.4); color: #7ad9a4; }
.status-pill.badge-success i { background: var(--success);
  box-shadow: 0 0 8px rgba(70,192,122,.7); }
.status-pill.badge-info { border-color: rgba(88,166,255,.4); color: #8cc2ff; }
.status-pill.badge-info i { background: #58a6ff; box-shadow: 0 0 8px rgba(88,166,255,.6);
  animation: pillpulse 2s ease-in-out infinite; }
.status-pill.badge-accent { border-color: rgba(245,197,24,.45); color: var(--accent-hot); }
.status-pill.badge-accent i { background: var(--accent);
  box-shadow: 0 0 8px rgba(245,197,24,.7); animation: pillpulse 2s ease-in-out infinite; }
.status-pill.badge-danger { border-color: rgba(229,72,77,.45); color: #ff8589; }
.status-pill.badge-danger i { background: #e5484d; box-shadow: 0 0 8px rgba(229,72,77,.6); }
@keyframes pillpulse { 50% { opacity: .45; } }

.progress-track { position: relative; height: 12px; border-radius: 99px;
  background: var(--bg-raised); border: 1px solid var(--border); overflow: hidden;
  margin: 12px 0; }
.progress-fill { height: 100%; border-radius: 99px; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  animation: fillgrow 1.1s cubic-bezier(.2,.7,.3,1); position: relative; overflow: hidden; }
.progress-fill::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%,
    transparent 70%);
  transform: translateX(-100%); animation: shimmer 2.4s ease-in-out infinite; }
@keyframes fillgrow { from { width: 0; } }
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }

.up-item { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  border-left: 3px solid var(--accent); background: var(--bg-raised); }
.up-item + .up-item { margin-top: 8px; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--accent), var(--border)); opacity: .5; }
.timeline li { position: relative; padding: 0 0 16px 30px; }
.timeline li:last-child { padding-bottom: 2px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--bg-raised);
  border: 2px solid var(--text-faint); }
.timeline li:first-child::before { border-color: var(--accent);
  background: rgba(245,197,24,.25); box-shadow: 0 0 10px rgba(245,197,24,.5); }
.timeline .tl-time { display: block; font-size: 11.5px; color: var(--text-faint); }

.note-band { display: flex; gap: 13px; align-items: flex-start; padding: 14px 17px;
  border-radius: 12px; border: 1px solid rgba(245,197,24,.35);
  background: linear-gradient(120deg, rgba(245,197,24,.1), rgba(245,197,24,.03) 60%);
  font-size: 13.5px; }
.note-band .nb-ico { flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--accent);
  background: rgba(245,197,24,.13); border: 1px solid rgba(245,197,24,.3); }
.note-band b { display: block; margin-bottom: 2px; font-size: 14px; }
.note-band p { margin: 0; color: var(--text-muted); }
.note-blue { border-color: rgba(88,166,255,.35);
  background: linear-gradient(120deg, rgba(88,166,255,.1), rgba(88,166,255,.03) 60%); }
.note-blue .nb-ico { color: #8cc2ff; background: rgba(88,166,255,.13);
  border-color: rgba(88,166,255,.3); }

/* ---------------------------------------------------- header account menu */
.ava { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid;
  place-items: center; overflow: hidden; font: 800 13px var(--font);
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), #f5b043);
  border: 1px solid rgba(255,255,255,.14); }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava-lg { width: 40px; height: 40px; font-size: 16px; }
.ava-xl { width: 76px; height: 76px; font-size: 30px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 0 3px rgba(245,197,24,.25); }

.acct-wrap { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px;
  border-radius: 99px; border: 1px solid var(--border); background: var(--bg-raised);
  color: var(--text); font: 650 13.5px var(--font); cursor: pointer;
  transition: border-color .15s ease, background .15s ease; }
.acct-btn:hover { border-color: var(--border-strong); background: var(--panel); }
.acct-chev { width: 14px; height: 14px; color: var(--text-faint);
  transition: transform .18s ease; }
.acct-btn[aria-expanded="true"] .acct-chev { transform: rotate(180deg); }
@media (max-width: 620px) { .acct-name { display: none; } }

.acct-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 244px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 6px; z-index: 80;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease; }
.acct-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.acct-head { display: flex; gap: 11px; align-items: center; padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.acct-who { min-width: 0; display: flex; flex-direction: column; }
.acct-who b { font-size: 14px; }
.acct-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu a { display: block; padding: 8.5px 12px; border-radius: 8px;
  color: var(--text-muted); font-weight: 550; font-size: 13.5px; }
.acct-menu a:hover { background: var(--bg-raised); color: var(--text);
  text-decoration: none; }
.acct-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.acct-out { display: block; width: 100%; text-align: left; padding: 8.5px 12px;
  border: none; border-radius: 8px; background: none; color: #ff8589;
  font: 550 13.5px var(--font); cursor: pointer; }
.acct-out:hover { background: rgba(229,72,77,.12); }

/* ------------------------------------------------------ milestone stepper */
.osteps { display: flex; align-items: flex-start; gap: 6px; padding: 4px 2px 2px; }
.ostep { display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 74px; text-align: center; flex: none;
  animation: stepin .45s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes stepin { from { opacity: 0; transform: translateY(8px); } }
.ostep-dot { width: 32px; height: 32px; border-radius: 50%; display: grid;
  place-items: center; font: 800 13px var(--font); position: relative;
  background: var(--bg-raised); border: 2px solid var(--border);
  color: var(--text-faint); }
.ostep-dot svg { width: 15px; height: 15px; }
.ostep.done .ostep-dot { background: linear-gradient(135deg, var(--accent), #f5b043);
  border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 3px 12px rgba(245,197,24,.35); }
.ostep.current .ostep-dot { border-color: var(--accent); color: var(--accent); }
.ostep.current .ostep-dot::after { content: ""; position: absolute; inset: -7px;
  border-radius: 50%; border: 2px solid rgba(245,197,24,.5);
  animation: stepring 1.8s ease-out infinite; }
@keyframes stepring { from { transform: scale(.72); opacity: 1; }
  to { transform: scale(1.18); opacity: 0; } }
.ostep.problem .ostep-dot { border-color: #e5484d; color: #ff8589;
  background: rgba(229,72,77,.13); box-shadow: 0 0 14px rgba(229,72,77,.3); }
.ostep-label { font-size: 12px; font-weight: 700; line-height: 1.25;
  color: var(--text-muted); max-width: 96px; }
.ostep.done .ostep-label, .ostep.current .ostep-label { color: var(--text); }
.ostep.problem .ostep-label { color: #ff8589; }
.ostep-sub { font-size: 10.5px; color: var(--text-faint); line-height: 1.3;
  max-width: 100px; min-height: 13px; }
.ostep-line { flex: 1 1 24px; height: 2px; margin-top: 15px; border-radius: 2px;
  background: var(--border); min-width: 14px; }
.ostep-line.fill { background: linear-gradient(90deg, var(--accent), #f5b043);
  box-shadow: 0 0 8px rgba(245,197,24,.35); }

@media (max-width: 720px) {
  .osteps { flex-direction: column; align-items: stretch; gap: 0; }
  .ostep { flex-direction: row; text-align: left; align-items: center;
    gap: 12px; min-width: 0; padding: 7px 0; }
  .ostep-label { max-width: none; flex: 1; font-size: 13px; }
  .ostep-sub { max-width: none; }
  .ostep-line { width: 2px; height: 18px; flex: none; margin: -4px 0 -4px 15px; }
}

/* --------------------------------------------------- order hero + climb */
.ohero { position: relative; overflow: hidden; padding: 22px 24px 18px;
  border-radius: 16px; border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(20,24,32,.9), rgba(13,16,22,.95));
  margin-bottom: 18px; }
.ohero .aurora { opacity: .12; }
.ohero .particles { z-index: 0; }
.ohero .particles span { opacity: .5; }
.ohero-in { position: relative; z-index: 1; }
.ohero-top { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ohero h1 { font-size: 25px; margin: 2px 0 2px; }
.ohero .osteps { border-top: 1px solid var(--border); padding-top: 16px; }

.climb { display: flex; align-items: center; gap: 18px; }
.climb-chip { flex: none; width: 152px; text-align: center; display: flex;
  flex-direction: column; gap: 4px; align-items: center; }
.climb-chip small { color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .09em; }
.climb-plaque { position: relative; width: 100%; height: 52px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.5)); }
.climb-plaque span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; padding-left: 9%; font: 900 22px/1 var(--mono);
  font-style: italic; color: #fff; transform: skewX(-8deg);
  text-shadow: 0 2px 8px rgba(0,0,0,.65); }
.climb-goal .climb-plaque { animation: goalglow 2.6s ease-in-out infinite; }
@keyframes goalglow {
  50% { filter: drop-shadow(0 5px 12px rgba(0,0,0,.5))
    drop-shadow(0 0 14px rgba(245,197,24,.35)); } }
.climb-ring { display: flex; align-items: center; justify-content: center; gap: 9px; }
.climb-ring img { width: 40px; height: 40px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.climb-ring b { font: 900 21px/1 var(--mono); font-style: italic; }
.climb-badge { height: 40px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.climb-wname { font-size: 12.5px; font-weight: 800; }

.climb-mid { flex: 1; min-width: 0; }
.climb-now { text-align: center; margin-bottom: 6px; line-height: 1.1; }
.climb-now b { font: 900 26px/1 var(--mono); font-style: italic;
  letter-spacing: -.01em; text-shadow: 0 0 18px rgba(245,197,24,.25); }
.climb-now small { display: block; color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
.climb-stats { display: flex; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--text-muted); margin-top: 6px;
  white-space: nowrap; }
.climb-up { color: var(--success); font-weight: 700; }
.climb-qty { gap: 16px; }
.climb-count b { font: 900 30px/1 var(--mono); color: var(--accent); }
.climb-count span { color: var(--text-muted); font-size: 13px; margin-left: 8px; }

@media (max-width: 680px) {
  .climb { flex-direction: column; gap: 12px; }
  .climb-chip { width: 200px; }
  .climb-mid { width: 100%; }
}

/* last-update freshness chip in Your climb */
.climb-fresh { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 99px; border: 1px solid rgba(70,192,122,.35);
  background: rgba(70,192,122,.1); color: #7ad9a4; font-size: 11.5px;
  font-weight: 650; white-space: nowrap; }
.climb-fresh i { width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 7px rgba(70,192,122,.7); animation: pillpulse 2s ease-in-out infinite; }

/* ------------------------------------------- frontpage order showcase */
.demo-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px;
  align-items: center; }
@media (max-width: 960px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-feats { list-style: none; margin: 18px 0 22px; padding: 0; display: grid;
  gap: 12px; }
.demo-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px;
  color: var(--text-muted); }
.demo-feats li svg { width: 18px; height: 18px; flex: none; color: var(--accent);
  margin-top: 2px; }
.demo-feats b { color: var(--text); }

.demo-card { position: relative; padding: 20px 22px; border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(22,26,35,.95), rgba(14,17,23,.97));
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(245,197,24,.07),
              0 0 60px rgba(245,197,24,.05); }
.demo-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px; }
.demo-title { display: block; font-size: 16.5px; }
.demo-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.dm-dot { width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--bg-raised); border: 2px solid var(--border); }
.dm-dot.done { background: linear-gradient(135deg, var(--accent), #f5b043);
  border-color: transparent; }
.dm-dot.pulse { border-color: var(--accent); position: relative; }
.dm-dot.pulse::after { content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid rgba(245,197,24,.5);
  animation: stepring 1.8s ease-out infinite; }
.dm-bar { flex: 1; height: 2px; background: var(--border); border-radius: 2px; }
.dm-bar.fill { background: linear-gradient(90deg, var(--accent), #f5b043); }

.demo-chat { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 14px;
  display: grid; gap: 9px; }
.dm-msg { display: flex; gap: 9px; align-items: flex-start; font-size: 13px;
  color: var(--text-muted); background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px;
  max-width: 92%; }
.dm-msg b { color: var(--text); }
.dm-sys { justify-self: center; max-width: none; font-size: 11.5px;
  color: var(--text-faint); background: none; border-style: dashed;
  padding: 5px 12px; border-radius: 99px; }
.dm-typing { display: flex; align-items: center; gap: 4px; font-size: 11.5px;
  color: var(--text-faint); padding-left: 4px; }
.dm-typing span { width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-faint); animation: typedot 1.2s ease-in-out infinite; }
.dm-typing span:nth-child(2) { animation-delay: .18s; }
.dm-typing span:nth-child(3) { animation-delay: .36s; margin-right: 5px; }
@keyframes typedot { 40% { transform: translateY(-4px); opacity: 1; }
  0%, 80%, 100% { transform: none; opacity: .5; } }

/* chat lines cascade in once the section reveals */
html.js .dm-b1, html.js .dm-b2, html.js .dm-b3 { opacity: 0; }
html.js .reveal.in .dm-b1 { animation: dmin .5s ease .45s forwards; }
html.js .reveal.in .dm-b2 { animation: dmin .5s ease 1.05s forwards; }
html.js .reveal.in .dm-b3 { animation: dmin .5s ease 1.65s forwards; }
@keyframes dmin { from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .dm-b1, html.js .dm-b2, html.js .dm-b3 { opacity: 1; }
}

/* -------------------------------------------- compact rank pair + jobs UI */
.rpair { display: flex; align-items: center; gap: 10px; }
.rpair-plaque { position: relative; width: 128px; height: 40px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.rpair-plaque span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; padding-left: 9%; font: 900 16px/1 var(--mono);
  font-style: italic; color: #fff; transform: skewX(-8deg);
  text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.rpair-arrow { color: var(--accent); font-weight: 800; flex: none; }
.rpair-ring { display: inline-flex; align-items: center; gap: 7px; }
.rpair-ring img { width: 30px; height: 30px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.rpair-ring b { font: 900 15px/1 var(--mono); font-style: italic; }
.rpair-badge { display: inline-flex; flex-direction: column; align-items: center;
  gap: 3px; }
.rpair-badge img { height: 28px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.rpair-badge em { font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--text-muted); max-width: 110px; text-align: center; }

.job-card { display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap; padding: 16px 20px; border-radius: 13px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.job-card:hover { transform: translateY(-2px); border-color: rgba(245,197,24,.4);
  box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.job-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.job-meta { font-size: 12px; color: var(--text-faint); }
.job-side { display: flex; align-items: center; gap: 16px; flex: none;
  margin-left: auto; }
.job-payout { text-align: right; line-height: 1.15; }
.job-payout b { font: 800 21px/1 var(--mono); color: var(--accent); }
.job-payout small { display: block; color: var(--text-faint); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; }

/* header jobs link + live badge (same quiet pill as the booster tab) */
.jobs-link { display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px; color: var(--accent) !important;
  font-weight: 650; font-size: 13.5px; white-space: nowrap;
  border: 1px solid rgba(245,197,24,.35); background: rgba(245,197,24,.07);
  box-shadow: 0 0 10px rgba(245,197,24,.14);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.jobs-link:hover { text-decoration: none; border-color: rgba(245,197,24,.6);
  background: rgba(245,197,24,.12); box-shadow: 0 0 14px rgba(245,197,24,.28); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 8px rgba(70,192,122,.8);
  animation: pillpulse 2s ease-in-out infinite; flex: none; }
.jobs-short { display: none; }
@media (max-width: 1080px) { .jobs-full { display: none; }
  .jobs-short { display: inline; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.jobs-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  display: inline-grid; place-items: center; font: 800 11px var(--font);
  background: linear-gradient(135deg, var(--accent), #f5b043);
  color: var(--accent-ink); box-shadow: 0 0 10px rgba(245,197,24,.45); }
.jobs-badge.bump { animation: jbump .45s cubic-bezier(.2,.7,.3,1.4); }
@keyframes jbump { 40% { transform: scale(1.45); } }

/* job cards used as links: no underline soup */
a.job-card, a.job-card:hover { text-decoration: none; color: var(--text); }
a.job-card * { text-decoration: none !important; }

/* ------------------------------------------------------- header funds pill */
.funds-wrap { position: relative; }
.funds-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border-radius: 99px; border: 1px solid rgba(245,197,24,.35);
  background: rgba(245,197,24,.08); color: var(--text); cursor: pointer;
  font: 700 13px var(--mono); transition: border-color .15s ease, background .15s ease; }
.funds-btn svg { width: 16px; height: 16px; color: var(--accent); }
.funds-btn:hover { border-color: rgba(245,197,24,.6); background: rgba(245,197,24,.13); }
.funds-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 250px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 10px; z-index: 80;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease; }
.funds-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.funds-row { display: flex; justify-content: space-between; align-items: center;
  padding: 7px 8px; font-size: 13px; color: var(--text-muted); }
.funds-row b { font-family: var(--mono); color: var(--text); }
.funds-row b.accent { color: var(--accent); }
.funds-red { color: #ff8589 !important; }
.funds-cta { display: flex; justify-content: center; margin: 4px 4px 2px; }
.funds-note { margin: 6px 8px 4px; font-size: 11.5px; color: var(--text-faint);
  line-height: 1.45; }
@media (max-width: 520px) { .funds-btn b { display: none; }
  .funds-btn { padding: 7px 9px; } }

/* ------------------------------------------------ how it works, animated */
.hiw { position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; padding-top: 34px; }
.hiw-rail { position: absolute; top: 56px; left: 6%; right: 6%; height: 3px;
  border-radius: 3px; background: var(--border); overflow: hidden; }
.hiw-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), #f5b043, #b06af5); }
.reveal.in .hiw-fill,
section.in .hiw-fill { animation: hiwdraw 2.2s cubic-bezier(.3,.6,.2,1) forwards; }
@keyframes hiwdraw { to { transform: scaleX(1); } }

.hiw-step { position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; opacity: 0; transform: translateY(14px); }
.reveal.in .hiw-step { animation: hiwstep .55s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--hi) * .45s + .15s); }
@keyframes hiwstep { to { opacity: 1; transform: none; } }

.hiw-dot { position: relative; z-index: 1; width: 46px; height: 46px;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #f5b043);
  color: var(--accent-ink); box-shadow: 0 0 0 6px var(--bg),
    0 6px 18px rgba(245,197,24,.4); margin-bottom: 14px; }
.hiw-dot svg { width: 21px; height: 21px; }
.reveal.in .hiw-step .hiw-dot { animation: hiwpop .5s cubic-bezier(.2,.9,.3,1.4) both;
  animation-delay: calc(var(--hi) * .45s + .2s); }
@keyframes hiwpop { from { transform: scale(.4); } }
/* gentle continuous attention loop, one step at a time */
.reveal.in .hiw-step .hiw-dot { animation-name: hiwpop, hiwglow;
  animation-duration: .5s, 7.2s;
  animation-timing-function: cubic-bezier(.2,.9,.3,1.4), ease-in-out;
  animation-delay: calc(var(--hi) * .45s + .2s), calc(var(--hi) * 1.8s + 2.4s);
  animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
@keyframes hiwglow {
  0%, 22%, 100% { box-shadow: 0 0 0 6px var(--bg), 0 6px 18px rgba(245,197,24,.4); }
  9% { box-shadow: 0 0 0 6px var(--bg), 0 0 30px rgba(245,197,24,.85),
       0 0 60px rgba(245,197,24,.35); } }

.hiw-card { background: linear-gradient(180deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--border); border-radius: 13px; padding: 16px 17px;
  width: 100%; flex: 1; transition: transform .18s ease, border-color .18s ease,
  box-shadow .18s ease; }
.hiw-step:hover .hiw-card { transform: translateY(-4px);
  border-color: rgba(245,197,24,.4); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.hiw-k { display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 5px; }
.hiw-card b { display: block; margin-bottom: 6px; font-size: 14.5px; }
.hiw-card p { font-size: 13px; }

@media (max-width: 960px) {
  .hiw { grid-template-columns: 1fr; gap: 14px; padding-top: 0; }
  .hiw-rail { left: 22px; right: auto; top: 8px; bottom: 8px; width: 3px;
    height: auto; }
  .hiw-fill { transform: scaleY(0); transform-origin: top; }
  @keyframes hiwdraw { to { transform: scaleY(1) scaleX(1); } }
  .hiw-step { flex-direction: row; text-align: left; gap: 14px;
    align-items: flex-start; }
  .hiw-dot { margin-bottom: 0; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-step, .hiw-fill { opacity: 1 !important; transform: none !important;
    animation: none !important; }
}

/* dispute banner + countdown */
.note-danger { border-color: rgba(229,72,77,.45);
  background: linear-gradient(120deg, rgba(229,72,77,.12), rgba(229,72,77,.03) 60%); }
.note-danger .nb-ico { color: #ff8589; background: rgba(229,72,77,.14);
  border-color: rgba(229,72,77,.35); font-weight: 900; font-size: 17px; }
[data-countdown] { font-family: var(--mono); font-weight: 800; color: #ff8589;
  white-space: nowrap; }
[data-countdown].cd-over { color: var(--text-faint); white-space: normal; }
.ord-card.ord-disputed { border-color: rgba(229,72,77,.45); }
.ord-card.ord-disputed:hover { border-color: rgba(229,72,77,.7);
  box-shadow: 0 10px 26px rgba(229,72,77,.15); }

/* ----------------------------------------------------- star rating picker */
.starpick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.starpick input { position: absolute; opacity: 0; pointer-events: none; }
.starpick label { font-size: 24px; line-height: 1; color: var(--border-strong);
  cursor: pointer; transition: color .12s ease, transform .12s ease; }
.starpick label:hover, .starpick label:hover ~ label,
.starpick input:checked ~ label { color: var(--accent);
  text-shadow: 0 0 10px rgba(245,197,24,.45); }
.starpick label:hover { transform: scale(1.18); }
.review-prompt:target { border-color: rgba(245,197,24,.55);
  box-shadow: 0 0 0 3px rgba(245,197,24,.18), 0 12px 34px rgba(0,0,0,.4);
  animation: promptpulse 1.6s ease-out 1; }
@keyframes promptpulse { 0% { box-shadow: 0 0 0 10px rgba(245,197,24,.25); } }
.rb-item { display: inline-flex; flex-direction: column; line-height: 1.35; }
.rb-item b { font-family: var(--mono); }

/* -------------------------------------------- booster tab (subtle glow) */
.bdash-link { display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px; font-weight: 650; font-size: 13.5px;
  color: var(--accent) !important;
  border: 1px solid rgba(245,197,24,.35); background: rgba(245,197,24,.07);
  box-shadow: 0 0 10px rgba(245,197,24,.14);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap; }
.bdash-link svg { width: 15px; height: 15px; }
.bdash-link:hover { text-decoration: none; border-color: rgba(245,197,24,.6);
  background: rgba(245,197,24,.12); box-shadow: 0 0 14px rgba(245,197,24,.28); }
.bdash-link.on { border-color: rgba(245,197,24,.55);
  background: rgba(245,197,24,.12); }
.bdash-short { display: none; }
@media (max-width: 860px) {
  .bdash-full { display: none; }
  .bdash-short { display: inline; }
}
@media (max-width: 470px) {
  .bdash-short { display: none; }
  .bdash-link { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .bdash-link { animation: none; } }

/* -------------------------------------------------- admin dashboard v2 */
.adm-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 99px; background: rgba(245,197,24,.16); color: var(--accent-hot);
  font: 800 11.5px/20px var(--font); text-align: center; }
.adm-badge-hot { background: rgba(229,72,77,.16); color: #ff6b70; }

.adm-head { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.adm-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 99px; font: 700 13px/1 var(--font); border: 1px solid; }
.adm-pill svg { width: 15px; height: 15px; }
.adm-pill-warn { color: var(--accent-hot); border-color: rgba(245,197,24,.4);
  background: rgba(245,197,24,.08); }
.adm-pill-ok { color: var(--success); border-color: rgba(70,192,122,.35);
  background: rgba(70,192,122,.07); }

.adm-sect { font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin: 22px 0 10px; }
.adm-act { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; }
.adm-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--text);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.adm-tile:hover { transform: translateY(-2px); text-decoration: none;
  border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.adm-tile-ico svg { width: 18px; height: 18px; display: block; margin-bottom: 6px; }
.adm-tile-n { font: 800 26px/1.1 var(--font); }
.adm-tile-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.adm-tile-sub { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.adm-tile.adm-ok .adm-tile-ico, .adm-tile.adm-ok .adm-tile-n { color: var(--text-faint); }
.adm-tile.adm-ok .adm-tile-sub { color: var(--success); }
.adm-tile.adm-warn { border-color: rgba(245,197,24,.45);
  background: linear-gradient(180deg, rgba(245,197,24,.07), var(--panel) 60%); }
.adm-tile.adm-warn .adm-tile-ico, .adm-tile.adm-warn .adm-tile-n { color: var(--accent-hot); }
.adm-tile.adm-warn .adm-tile-sub { color: var(--accent-hot); }
.adm-tile.adm-hot { border-color: rgba(229,72,77,.5);
  background: linear-gradient(180deg, rgba(229,72,77,.08), var(--panel) 60%); }
.adm-tile.adm-hot .adm-tile-ico, .adm-tile.adm-hot .adm-tile-n,
.adm-tile.adm-hot .adm-tile-sub { color: #ff6b70; }

.adm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px; }
.adm-kpi { display: flex; flex-direction: column; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.adm-kpi b { font: 800 21px/1.25 var(--font); color: var(--text); }
.adm-kpi span:last-child { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.adm-kpi-dot { width: 18px; height: 3px; border-radius: 2px; background: var(--accent);
  margin-bottom: 9px; opacity: .8; }

.adm-card { height: 100%; }
.adm-stack { display: grid; gap: 14px; align-content: start; }
.adm-chart { display: flex; align-items: flex-end; gap: 5px; height: 190px;
  padding: 16px 0 0; border-bottom: 1px solid var(--border); }
.adm-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 6px; min-width: 0; }
.adm-bar { width: 100%; max-width: 34px; background: var(--accent);
  border-radius: 4px 4px 0 0; opacity: .9; transition: opacity .15s ease; }
.adm-bar-col:hover .adm-bar { opacity: 1; }
.adm-bar-val { font: 700 11px/1 var(--font); color: var(--text-muted); }
.adm-bar-day { font-size: 10px; color: var(--text-faint); }

.adm-frow { display: grid; grid-template-columns: 110px 1fr auto; align-items: center;
  gap: 10px; padding: 5px 0; }
.adm-flabel { font-size: 12.5px; color: var(--text-muted); }
.adm-ftrack { height: 8px; border-radius: 99px; background: rgba(255,255,255,.06);
  overflow: hidden; }
.adm-ffill { height: 100%; border-radius: 99px; background: var(--accent); }
.adm-fval { font-size: 13px; }

.adm-hrow { display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: 13.5px; }
.adm-hrow b { margin-left: auto; }
.adm-hdot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.adm-hdot-warn { background: var(--accent-hot); }

@keyframes admup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.adm-anim { animation: admup .45s cubic-bezier(.2,.7,.3,1) both; }
.adm-anim:nth-of-type(2) { animation-delay: .05s; }
.adm-anim:nth-of-type(3) { animation-delay: .1s; }
.adm-anim:nth-of-type(4) { animation-delay: .15s; }
.adm-anim:nth-of-type(5) { animation-delay: .2s; }
.adm-anim:nth-of-type(6) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .adm-anim { animation: none; } }

/* ------------------------------------------------------ section sidebars v2 */
.snav { background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 10px 10px; }
.snav-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.snav-user .ava { width: 38px; height: 38px; flex: none; }
.snav-who { min-width: 0; }
.snav-who b { display: block; font-size: 13.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.snav-role { display: inline-block; margin-top: 3px; padding: 2px 8px;
  border-radius: 99px; font: 700 10px/1.4 var(--font); letter-spacing: .06em;
  text-transform: uppercase; }
.snav-role-customer { background: rgba(70,192,122,.14); color: var(--success); }
.snav-role-booster { background: rgba(56,189,248,.14); color: #6cc9f5; }
.snav-role-admin { background: rgba(229,72,77,.15); color: #ff6b70; }
.snav-label { font: 700 10.5px/1 var(--font); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); padding: 12px 10px 6px; }
.snav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 9px; color: var(--text-muted); font-weight: 550; font-size: 13.5px;
  position: relative; transition: background .14s ease, color .14s ease; }
.snav-item:hover { background: var(--panel-2); color: var(--text);
  text-decoration: none; }
.snav-ico { flex: none; display: grid; place-items: center; opacity: .8; }
.snav-ico svg { width: 16px; height: 16px; display: block; }
.snav-txt { min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.snav-item.active { background: rgba(245,197,24,.1); color: var(--accent-hot); }
.snav-item.active::before { content: ""; position: absolute; left: -10px;
  top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--accent); }
.snav-item.active .snav-ico { opacity: 1; }
.snav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 99px; background: rgba(245,197,24,.16); color: var(--accent-hot);
  font: 800 11.5px/20px var(--font); text-align: center; flex: none; }
.snav-badge-hot { background: rgba(229,72,77,.16); color: #ff6b70; }

@media (max-width: 860px) {
  .snav { display: flex; align-items: center; gap: 4px; overflow-x: auto;
    padding: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .snav-user { border-bottom: 0; margin: 0 4px 0 0; padding: 0 8px 0 0;
    border-right: 1px solid var(--border); }
  .snav-who { display: none; }
  .snav-label { display: none; }
  .snav-item { flex: none; padding: 7px 11px; border: 1px solid var(--border);
    border-radius: 99px; }
  .snav-item.active { border-color: rgba(245,197,24,.5); }
  .snav-item.active::before { display: none; }
}

/* ------------------------------------------------- closed-order banners */
.obanner { position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background:
  linear-gradient(120deg, rgba(255,255,255,.04), rgba(255,255,255,0) 55%), var(--panel);
  margin-bottom: 16px; }
.ob-in { position: relative; z-index: 2; display: flex; align-items: center;
  gap: 16px; padding: 18px 20px; flex-wrap: wrap; }
.ob-ico { flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.ob-ico svg { width: 44px; height: 44px; }
.ob-txt { flex: 1; min-width: 220px; }
.ob-txt b { display: block; font-size: 18px; letter-spacing: -.01em; }
.ob-txt span { display: block; margin-top: 3px; font-size: 13px; color: var(--text-muted); }
.ob-lock { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: 99px; border: 1px solid var(--border-strong); font: 700 12px/1 var(--font);
  color: var(--text-muted); background: rgba(255,255,255,.03); }
.ob-lock svg { width: 13px; height: 13px; }

.ob-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ob-shine::after { content: ""; position: absolute; top: -40%; bottom: -40%;
  width: 34%; left: -50%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: obshine 4.5s ease-in-out infinite; }
@keyframes obshine { 0%, 55% { left: -50%; } 85%, 100% { left: 130%; } }

/* per-kind accents */
.ob-completed { border-color: rgba(70,192,122,.55);
  background: linear-gradient(120deg, rgba(70,192,122,.14), rgba(245,197,24,.07) 55%,
  rgba(70,192,122,.02)), var(--panel); box-shadow: 0 0 34px rgba(70,192,122,.12); }
.ob-completed .ob-txt b { color: #8fe6b4; }
.ob-refunded { border-color: rgba(108,201,245,.5);
  background: linear-gradient(120deg, rgba(56,120,248,.13), rgba(56,189,248,.04) 60%), var(--panel); }
.ob-refunded .ob-ico, .ob-refunded .ob-txt b { color: #6cc9f5; }
.ob-partial { border-color: rgba(245,197,24,.5);
  background: linear-gradient(120deg, rgba(245,197,24,.12), rgba(245,197,24,.03) 60%), var(--panel); }
.ob-partial .ob-ico, .ob-partial .ob-txt b { color: var(--accent-hot); }
.ob-cancelled, .ob-expired, .ob-closed { border-color: var(--border-strong); }
.ob-cancelled .ob-ico, .ob-expired .ob-ico, .ob-closed .ob-ico { color: var(--text-faint); }

/* animated check (draw-on-load) */
.ob-check { width: 46px; height: 46px; }
.ob-check-ring { stroke: rgba(70,192,122,.55); stroke-width: 2.5;
  stroke-dasharray: 145; stroke-dashoffset: 145;
  animation: obring .7s ease-out .15s forwards; }
.ob-check-mark { stroke: #46c07a; stroke-width: 4.5; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: obmark .45s cubic-bezier(.2,.7,.3,1) .75s forwards; }
@keyframes obring { to { stroke-dashoffset: 0; } }
@keyframes obmark { to { stroke-dashoffset: 0; } }

/* one-shot confetti burst for completed */
.ob-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ob-confetti i { position: absolute; top: -12px; width: 7px; height: 11px;
  border-radius: 2px; opacity: 0; animation: obfall 2.6s ease-in .3s 1 forwards; }
.ob-confetti i:nth-child(3n)   { background: #f5c518; }
.ob-confetti i:nth-child(3n+1) { background: #46c07a; }
.ob-confetti i:nth-child(3n+2) { background: #6cc9f5; }
.ob-confetti i:nth-child(1)  { left: 6%;  animation-delay: .30s; }
.ob-confetti i:nth-child(2)  { left: 14%; animation-delay: .55s; }
.ob-confetti i:nth-child(3)  { left: 23%; animation-delay: .40s; }
.ob-confetti i:nth-child(4)  { left: 31%; animation-delay: .70s; }
.ob-confetti i:nth-child(5)  { left: 40%; animation-delay: .35s; }
.ob-confetti i:nth-child(6)  { left: 49%; animation-delay: .62s; }
.ob-confetti i:nth-child(7)  { left: 58%; animation-delay: .45s; }
.ob-confetti i:nth-child(8)  { left: 66%; animation-delay: .75s; }
.ob-confetti i:nth-child(9)  { left: 74%; animation-delay: .38s; }
.ob-confetti i:nth-child(10) { left: 82%; animation-delay: .58s; }
.ob-confetti i:nth-child(11) { left: 90%; animation-delay: .48s; }
.ob-confetti i:nth-child(12) { left: 96%; animation-delay: .66s; }
@keyframes obfall {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  8% { opacity: 1; }
  100% { opacity: 0; transform: translateY(150px) rotate(320deg); }
}

/* chat read-only note */
.chat-closed { display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  border: 1px dashed var(--border-strong); border-radius: 10px;
  color: var(--text-muted); font-size: 13px; background: rgba(255,255,255,.02); }
.chat-closed svg { width: 14px; height: 14px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .ob-shine::after, .ob-confetti i { animation: none; display: none; }
  .ob-check-ring, .ob-check-mark { animation: none; stroke-dashoffset: 0; }
}

/* booster dashboard: finished-jobs history */
.ord-done { opacity: .86; }
.ord-done:hover { opacity: 1; }

/* ------------------------------------------------- BoostPirate frontpage */
.hero-skull { position: absolute; right: -40px; top: 40px; width: 560px;
  opacity: .09; pointer-events: none; z-index: 0; filter: saturate(.9); }
.hero-2col .container.hero-grid { position: relative; z-index: 2; }
.booster-flag { width: 108px; height: auto; flex: none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.cta-emblem { width: 74px; height: auto; display: block; margin: 0 auto 10px;
  filter: drop-shadow(0 0 18px rgba(245,197,24,.35)); }
@media (max-width: 860px) { .hero-skull { width: 380px; opacity: .06; } }

/* ---------------------------------------------------------- live chat */
.lc-root [hidden] { display: none !important; } /* beat display:flex rules */
.lc-root { position: fixed; left: 22px; bottom: 22px; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lc-bubble { position: relative; width: 58px; height: 58px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--accent); color: #1a1404;
  display: grid; place-items: center; box-shadow: 0 8px 26px rgba(245,197,24,.35);
  transition: transform .16s ease; }
.lc-bubble:hover { transform: translateY(-2px) scale(1.04); }
.lc-bubble svg { width: 26px; height: 26px; }
.lc-pulse { position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(245,197,24,.7); animation: lcpulse 2.6s ease-out infinite; }
@keyframes lcpulse {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
.lc-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff;
  font: 800 11.5px/20px var(--font); text-align: center; }

.lc-teaser { position: relative; max-width: 240px; background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 12px 34px 12px 14px;
  box-shadow: var(--shadow-1); cursor: pointer; animation: lcin .35s cubic-bezier(.2,.7,.3,1); }
.lc-teaser b { display: block; font-size: 13.5px; }
.lc-teaser span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lc-teaser-x { position: absolute; top: 6px; right: 8px; background: none; border: none;
  color: var(--text-faint); font-size: 16px; cursor: pointer; }

.lc-panel { width: 384px; max-width: calc(100vw - 44px); height: 560px;
  max-height: calc(100vh - 120px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden;
  animation: lcin .28s cubic-bezier(.2,.7,.3,1); }
@keyframes lcin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; } }
.lc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(120deg, rgba(245,197,24,.14), rgba(245,197,24,.03) 70%);
  border-bottom: 1px solid var(--border); }
.lc-head img { border-radius: 8px; }
.lc-head-t { flex: 1; min-width: 0; }
.lc-head-t b { display: block; font-size: 14px; }
.lc-head-t span { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--text-muted); }
.lc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  display: inline-block; }
.lc-min { background: none; border: none; color: var(--text-muted); font-size: 18px;
  cursor: pointer; padding: 2px 8px; }
.lc-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex;
  flex-direction: column; gap: 8px; }
.lc-msg { max-width: 84%; padding: 9px 12px; border-radius: 13px; font-size: 13.5px;
  line-height: 1.45; word-wrap: break-word; }
.lc-mine { align-self: flex-end; background: rgba(245,197,24,.16);
  border: 1px solid rgba(245,197,24,.25); border-bottom-right-radius: 4px; }
.lc-staff { align-self: flex-start; background: var(--panel-2);
  border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.lc-sys { align-self: center; text-align: center; font-size: 11.5px;
  color: var(--text-faint); max-width: 92%; }
.lc-prechat { padding: 14px; display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border); }
.lc-hint { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.lc-prechat input, .lc-prechat textarea { background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 11px;
  font: 400 13.5px/1.4 var(--font); resize: none; }
.lc-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.lc-input input { flex: 1; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px;
  font: 400 13.5px/1.4 var(--font); }

/* BoostBot layer */
.lc-msg a { color: var(--accent); font-weight: 600; }
.lc-botm { border-color: rgba(245,197,24,.22);
  background: linear-gradient(160deg, rgba(245,197,24,.07), var(--panel-2) 55%); }
.lc-who { font: 700 10.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); opacity: .85; margin: 4px 0 -2px 2px; }
.lc-typing { display: inline-flex; gap: 5px; align-items: center; min-height: 18px; }
.lc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint);
  animation: lctype 1s ease-in-out infinite; }
.lc-typing span:nth-child(2) { animation-delay: .16s; }
.lc-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes lctype { 0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; } }
.lc-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px 4px;
  animation: lcin .25s ease; }
.lc-chip { border: 1px solid rgba(245,197,24,.35); background: rgba(245,197,24,.08);
  color: var(--text); border-radius: 999px; padding: 7px 12px; cursor: pointer;
  font: 600 12.5px/1 var(--font); transition: all .14s ease; }
.lc-chip:hover { background: rgba(245,197,24,.2); border-color: var(--accent);
  transform: translateY(-1px); }
.lc-human { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 8px 12px 0; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--border-strong); background: none; color: var(--text-muted);
  font: 600 12.5px/1 var(--font); transition: all .14s ease; }
.lc-human svg { width: 15px; height: 15px; }
.lc-human:hover { color: var(--text); border-color: var(--accent);
  background: rgba(245,197,24,.07); }
.lc-back { background: none; border: none; color: var(--text-faint); cursor: pointer;
  font: 500 12px/1 var(--font); padding: 2px; }
.lc-back:hover { color: var(--text); }

@media (max-width: 560px) {
  .lc-root { left: 14px; bottom: 14px; }
  .lc-panel { height: 68vh; }
}
@media (prefers-reduced-motion: reduce) { .lc-pulse { animation: none; } }

/* ---------------------------------------------------------- checkout v2 */
.ck-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; }
.ck-title { margin: 4px 0 0; }
.ck-sub { margin: 6px 0 0; color: var(--text-muted); max-width: 560px; }
.ck-alt { max-width: 460px; }
.ck-alt-label { display: block; font: 700 10.5px/1 var(--font); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px; }
.ck-alt-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-alt-pills a { font: 600 12px/1 var(--font); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 11px;
  text-decoration: none; transition: all .14s ease; }
.ck-alt-pills a:hover { color: var(--accent); border-color: rgba(245,197,24,.5);
  background: rgba(245,197,24,.06); }

/* animated process strip */
.ck-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-top: 26px; padding: 20px 14px 16px;
  background: linear-gradient(180deg, rgba(245,197,24,.05), rgba(245,197,24,.01) 70%);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.ck-line { position: absolute; top: 41px; left: 9%; right: 9%; height: 2px;
  background: var(--border); border-radius: 2px; }
.ck-line i { position: absolute; inset: 0; border-radius: 2px; transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-hot) 50%,
    var(--accent) 65%, transparent); background-size: 200% 100%;
  animation: cksweep 12s linear infinite; opacity: .9; }
@keyframes cksweep {
  0% { clip-path: inset(0 100% 0 0); }
  86% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); } }
.ck-step { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 7px; }
.ck-ico { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 1.5px solid var(--border-strong);
  color: var(--text-muted); transition: all .3s ease;
  animation: ckstep 12s ease-in-out infinite; animation-delay: calc(var(--i) * 2.05s); }
.ck-ico svg { width: 19px; height: 19px; }
.ck-step b { font-size: 13px; animation: ckstepb 12s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2.05s); }
.ck-step small { font-size: 11px; color: var(--text-faint); line-height: 1.35;
  max-width: 150px; }
@keyframes ckstep {
  0%, 4% { background: var(--panel-2); color: var(--text-muted);
    border-color: var(--border-strong); box-shadow: none; transform: none; }
  8%, 22% { background: rgba(245,197,24,.16); color: var(--accent);
    border-color: var(--accent); transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 18px rgba(245,197,24,.28); }
  30%, 100% { background: var(--panel-2); color: var(--text-muted);
    border-color: var(--border-strong); box-shadow: none; transform: none; } }
@keyframes ckstepb {
  0%, 4% { color: var(--text); }
  8%, 22% { color: var(--accent); }
  30%, 100% { color: var(--text); } }

/* live rank visual */
.ck-visual { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 14px 0 18px; padding: 18px 18px 14px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(245,197,24,.08), transparent 60%),
    var(--bg); border: 1px solid var(--border); border-radius: 14px; }
.ck-chip { display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 132px; }
.ck-chip small { font: 700 10px/1 var(--font); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); }
.ck-plaque { position: relative; width: 132px; height: 44px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.ck-plaque span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font: 900 15.5px/1 var(--mono); font-style: italic;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.75); letter-spacing: .01em; }
.ck-ring { display: flex; align-items: center; gap: 8px; }
.ck-ring img { width: 42px; height: 42px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.ck-ring b { font: 900 19px/1 var(--mono); font-style: italic; }
.ck-badge { height: 52px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.ck-bname { font: 700 11.5px/1.2 var(--font); font-style: normal; color: var(--text-muted);
  text-align: center; max-width: 130px; }
.ck-goal .ck-plaque, .ck-goal .ck-ring img, .ck-goal .ck-badge,
.ck-goal .ck-count { animation: goalglow 2.6s ease-in-out infinite; }
.ck-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.ck-mid small { font-size: 10.5px; color: var(--text-faint); letter-spacing: .06em;
  text-transform: uppercase; }
.ck-gain { font: 900 21px/1 var(--mono); font-style: italic; color: var(--accent); }
.ck-arrows { display: flex; gap: 5px; }
.ck-arrows i { width: 9px; height: 9px; border-top: 2.5px solid var(--accent);
  border-right: 2.5px solid var(--accent); transform: rotate(45deg);
  animation: ckarrow 1.4s ease-in-out infinite; opacity: .3; }
.ck-arrows i:nth-child(2) { animation-delay: .18s; }
.ck-arrows i:nth-child(3) { animation-delay: .36s; }
@keyframes ckarrow { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ck-count { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 18px; border: 1.5px solid rgba(245,197,24,.45); border-radius: 14px;
  background: rgba(245,197,24,.07); }
.ck-count b { font: 900 26px/1 var(--mono); font-style: italic; color: var(--accent); }
.ck-count > span { font: 600 11px/1.3 var(--font); color: var(--text-muted);
  text-align: center; max-width: 130px; }
.ck-visual-solo { justify-content: center; }
.ck-count-big { flex-direction: row; gap: 12px; padding: 14px 26px; }
.ck-count-big b { font-size: 34px; }
.ck-count-big > span { max-width: 170px; text-align: left; font-size: 12.5px; }
.ck-count-ico { font-size: 30px; }

/* cards + summary */
.ck-h { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.ck-n { width: 24px; height: 24px; border-radius: 50%; display: inline-grid;
  place-items: center; background: rgba(245,197,24,.14); color: var(--accent);
  border: 1px solid rgba(245,197,24,.4); font: 800 12.5px/1 var(--font); flex: none; }
.ck-grid .addon-row { transition: border-color .15s ease, background .15s ease; }
.ck-grid .addon-row:has(input:checked) { border-color: rgba(245,197,24,.55);
  background: rgba(245,197,24,.07); }
.ck-total { background: linear-gradient(120deg, var(--accent-hot), var(--accent) 55%,
  var(--accent-deep)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.ck-pop { animation: ckpop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes ckpop { 0% { transform: scale(.94); } 55% { transform: scale(1.045); }
  100% { transform: scale(1); } }
.ck-pay { width: 100%; }
.ck-trust { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.ck-trust div { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--text-muted); }
.ck-trust svg { width: 13px; height: 13px; color: var(--success); flex: none; }

@media (max-width: 860px) {
  .ck-steps { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto;
    padding-bottom: 12px; }
  .ck-step small { display: none; }
  .ck-line { top: 39px; }
}
@media (max-width: 640px) {
  .ck-visual { flex-direction: column; }
  .ck-arrows { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-line i, .ck-ico, .ck-step b, .ck-arrows i,
  .ck-goal .ck-plaque, .ck-goal .ck-ring img, .ck-goal .ck-badge,
  .ck-goal .ck-count { animation: none; }
}

/* ------------------------------------------------- finding-your-booster */
.seek { display: grid; grid-template-columns: 172px 1fr; gap: 22px; align-items: center;
  margin-bottom: 18px; padding: 22px 26px; border-radius: 16px;
  border: 1px solid rgba(245,197,24,.35);
  background: radial-gradient(120% 160% at 0% 50%, rgba(245,197,24,.1), transparent 55%),
    var(--panel); overflow: hidden; }
.seek-radar { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.seek-ring { position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(245,197,24,.55); animation: seekring 3s ease-out infinite; }
.seek-ring.r2 { animation-delay: 1s; }
.seek-ring.r3 { animation-delay: 2s; }
@keyframes seekring { 0% { transform: scale(.28); opacity: .9; }
  100% { transform: scale(1.05); opacity: 0; } }
.seek-sweep { position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(245,197,24,.45), transparent 70deg,
    transparent 360deg);
  animation: seeksweep 3.2s linear infinite; }
@keyframes seeksweep { to { transform: rotate(360deg); } }
.seek-core { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: rgba(20,18,8,.92); border: 1.5px solid var(--accent); color: var(--accent);
  box-shadow: 0 0 22px rgba(245,197,24,.35); }
.seek-core svg { width: 22px; height: 22px; }
.seek-blip { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-hot); opacity: 0; animation: seekblip 3.2s ease-out infinite; }
.seek-blip.b1 { top: 24%; left: 68%; animation-delay: .6s; }
.seek-blip.b2 { top: 66%; left: 22%; animation-delay: 1.7s; }
.seek-blip.b3 { top: 38%; left: 30%; animation-delay: 2.6s; }
@keyframes seekblip { 0%, 100% { opacity: 0; transform: scale(.6); }
  8% { opacity: 1; transform: scale(1.25); } 30% { opacity: .35; transform: scale(1); }
  55% { opacity: 0; } }
.seek-title { font-size: 19px; }
.seek-dots i { display: inline-block; animation: seekdot 1.4s infinite; font-style: normal; }
.seek-dots i:nth-child(2) { animation-delay: .2s; }
.seek-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes seekdot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.seek-sub { margin: 6px 0 12px; color: var(--text-muted); max-width: 640px; }
.seek-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 8px 18px; }
.seek-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 600; }
.seek-steps li i { width: 18px; height: 18px; border-radius: 50%; display: inline-grid;
  place-items: center; font-size: 11px; font-style: normal; flex: none; }
.sk-done { color: #7ad9a4; }
.sk-done i { background: rgba(70,192,122,.15); border: 1px solid rgba(70,192,122,.5); }
.sk-live { color: var(--accent); }
.seek-spin { border: 2px solid rgba(245,197,24,.25); border-top-color: var(--accent);
  animation: seekspin .9s linear infinite; }
@keyframes seekspin { to { transform: rotate(360deg); } }
.sk-todo { color: var(--text-faint); }
.sk-todo i { border: 1px dashed var(--border-strong); }
.seek-hint { margin: 12px 0 0; font-size: 11.5px; color: var(--text-faint); }
@media (max-width: 700px) {
  .seek { grid-template-columns: 1fr; text-align: center; }
  .seek-sub { margin-inline: auto; }
  .seek-steps { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .seek-ring, .seek-sweep, .seek-blip, .seek-dots i, .seek-spin { animation: none; }
}

/* ---------------------------------------------------- cancel-order modal */
.cxl-back { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  padding: 20px; background: rgba(6,7,10,.72); backdrop-filter: blur(4px);
  animation: cxlfade .18s ease; }
.cxl-back[hidden] { display: none; }
@keyframes cxlfade { from { opacity: 0; } }
.cxl-card { position: relative; width: 100%; max-width: 460px; background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: 18px; padding: 30px 28px 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); animation: cxlin .24s cubic-bezier(.2,.7,.3,1); }
@keyframes cxlin { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.cxl-x { position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--text-faint); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px; }
.cxl-x:hover { color: var(--text); }
.cxl-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 14px; }
.cxl-ico svg { width: 28px; height: 28px; }
.cxl-ico-warn { background: rgba(229,72,77,.14); border: 1px solid rgba(229,72,77,.4);
  color: #f0888b; }
.cxl-ico-ok { background: rgba(70,192,122,.14); border: 1px solid rgba(70,192,122,.4);
  color: #7ad9a4; }
.cxl-h { margin: 0 0 6px; text-align: center; font-size: 20px; }
.cxl-sub { margin: 0 0 18px; text-align: center; color: var(--text-muted);
  font-size: 13.5px; line-height: 1.5; }
.cxl-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cxl-reason { display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 11px; cursor: pointer;
  font-size: 13.5px; transition: all .13s ease; }
.cxl-reason:hover { border-color: var(--border-strong); background: var(--panel-2); }
.cxl-reason:has(input:checked) { border-color: var(--accent);
  background: rgba(245,197,24,.08); }
.cxl-reason input { accent-color: var(--accent); flex: none; }
.cxl-note { width: 100%; margin: 4px 0 2px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px;
  font: 400 13.5px/1.4 var(--font); }
.cxl-prefs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.cxl-pref { display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
  transition: all .13s ease; }
.cxl-pref:hover { border-color: var(--border-strong); background: var(--panel-2); }
.cxl-pref:has(input:checked) { border-color: var(--accent);
  background: rgba(245,197,24,.08); }
.cxl-pref input { accent-color: var(--accent); margin-top: 3px; flex: none; }
.cxl-pref-body b { display: block; font-size: 14px; margin-bottom: 3px; }
.cxl-pref-body span { display: block; font-size: 12.5px; color: var(--text-muted);
  line-height: 1.45; }
.cxl-actions { display: flex; gap: 10px; margin-top: 20px; }
.cxl-actions .btn { flex: 1; }
.cxl-support { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.cxl-support-link { display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-muted); font: 600 13px/1 var(--font); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: 9px; padding: 8px 14px;
  transition: all .14s ease; }
.cxl-support-link svg { width: 15px; height: 15px; }
.cxl-support-link:hover { color: var(--accent); border-color: rgba(245,197,24,.5);
  background: rgba(245,197,24,.06); }
@media (prefers-reduced-motion: reduce) {
  .cxl-back, .cxl-card { animation: none; }
}

/* --- hero quick-order polish (power-ups moved to checkout) ------------------ */
.ho-note{display:flex;flex-direction:column;gap:3px;margin-top:12px;line-height:1.35}
.ho-note .ho-pw{display:inline-flex;align-items:center;gap:7px;font-weight:650;
  font-size:12.5px;color:var(--accent);letter-spacing:.01em}
.ho-note .ho-sub{font-size:11.5px;color:var(--muted)}
.ho-order-btn .ho-arrow-i{display:inline-block;transition:transform .18s ease}
.ho-order-btn:hover .ho-arrow-i{transform:translateX(4px)}
.hero-order{position:relative;overflow:hidden}
.hero-order::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 80% -10%, rgba(245,197,24,.10), transparent 55%)}
.hero-order .ho-foot{position:relative;z-index:1}
.hero-order .ho-price b{font-size:26px;letter-spacing:-.01em}

/* ============================ booster KYC / verification ==================== */
.kyc-hero { position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--border); padding: 26px 28px;
  background: linear-gradient(180deg, var(--panel), var(--bg-raised)); margin-bottom: 18px; }
.kyc-hero .aurora { z-index: 0; }
.kyc-hero-in { position: relative; z-index: 1; display: flex; align-items: center;
  gap: 22px; flex-wrap: wrap; }
.kyc-hero h1 { margin: 0 0 4px; font-size: 26px; }
.kyc-hero p { margin: 0; }

/* animated status shield */
.kyc-shield { position: relative; width: 88px; height: 88px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(245,197,24,.16), rgba(245,197,24,.03) 70%);
  border: 2px solid rgba(245,197,24,.5); color: var(--accent-hot);
  animation: kyc-in .5s cubic-bezier(.2,.9,.3,1.4) both; }
.kyc-shield svg { width: 42px; height: 42px; }
.kyc-shield .kr { position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; }
.kyc-shield.pulse .kr { animation: kyc-ring 2.6s ease-out infinite; }
.kyc-shield.pulse .kr:nth-child(2) { animation-delay: 1.3s; }
.kyc-shield.ok { border-color: rgba(70,192,122,.6);
  background: radial-gradient(circle at 50% 35%, rgba(70,192,122,.2), rgba(70,192,122,.03) 70%);
  color: #7ad9a4; }
.kyc-shield.bad { border-color: rgba(229,72,77,.55);
  background: radial-gradient(circle at 50% 35%, rgba(229,72,77,.18), rgba(229,72,77,.03) 70%);
  color: #ff8589; }
.kyc-shield .chk { stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: kyc-draw .7s .25s ease forwards; }
@keyframes kyc-ring { 0% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); } }
@keyframes kyc-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
@keyframes kyc-draw { to { stroke-dashoffset: 0; } }

/* progress stepper */
.kyc-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 4px 0 18px; }
.kyc-steps::before { content: ""; position: absolute; top: 21px; left: 12%; right: 12%;
  height: 3px; border-radius: 2px; background: var(--border); z-index: 0; }
.kyc-steps .kfill { position: absolute; top: 21px; left: 12%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-hot)); z-index: 1;
  width: 0; transition: width .9s cubic-bezier(.4,0,.1,1);
  box-shadow: 0 0 10px rgba(245,197,24,.5); }
.kyc-step { position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 7px; text-align: center;
  animation: stepin .5s both; }
.kyc-step:nth-child(3) { animation-delay: .06s; }
.kyc-step:nth-child(4) { animation-delay: .12s; }
.kyc-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 2px solid var(--border); color: var(--text-faint);
  font-weight: 800; transition: all .3s ease; }
.kyc-dot svg { width: 20px; height: 20px; }
.kyc-step.done .kyc-dot { border-color: rgba(70,192,122,.6); color: #7ad9a4;
  background: rgba(70,192,122,.12); }
.kyc-step.active .kyc-dot { border-color: var(--accent); color: var(--accent-hot);
  background: rgba(245,197,24,.14); box-shadow: 0 0 0 5px rgba(245,197,24,.12);
  animation: kyc-beat 1.8s ease-in-out infinite; }
.kyc-step .kyc-lbl { font-size: 12.5px; font-weight: 650; color: var(--text-muted); }
.kyc-step.done .kyc-lbl, .kyc-step.active .kyc-lbl { color: var(--text); }
@keyframes kyc-beat { 50% { box-shadow: 0 0 0 9px rgba(245,197,24,0); } }

/* floating-label fields (no text inside the box) */
.flab { position: relative; margin-bottom: 14px; }
.flab > input, .flab > select {
  width: 100%; height: 54px; padding: 20px 14px 6px; font-size: 15px;
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .13s ease, box-shadow .13s ease; }
.flab > input:focus, .flab > select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,197,24,.18); }
.flab > label { position: absolute; left: 15px; top: 17px; pointer-events: none;
  color: var(--text-muted); font-size: 15px; transition: all .15s ease;
  background: transparent; }
.flab > input:focus ~ label,
.flab > input:not(:placeholder-shown) ~ label,
.flab.up > label {
  top: 8px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-hot); font-weight: 700; }
.flab > input:focus ~ label { color: var(--accent-hot); }
.flab.up > select { color: var(--text); }

/* verify launch card */
.kyc-launch { position: relative; overflow: hidden; }
.kyc-launch::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 90% -20%, rgba(245,197,24,.1), transparent 60%); }
.kyc-launch .kyc-bignum { position: absolute; right: 18px; bottom: -14px; font-size: 96px;
  font-weight: 900; color: rgba(245,197,24,.05); line-height: 1; z-index: 0; }
.kyc-launch > * { position: relative; z-index: 1; }
.kyc-facts { list-style: none; margin: 0; padding: 0; }
.kyc-facts li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0;
  font-size: 13.5px; color: var(--text-muted); }
.kyc-facts li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: rgba(245,197,24,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c518' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; }
.kyc-stack > * { animation: kyc-rise .5s both; }
.kyc-stack > *:nth-child(2) { animation-delay: .08s; }
.kyc-stack > *:nth-child(3) { animation-delay: .16s; }
@keyframes kyc-rise { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  .kyc-shield, .kyc-shield.pulse .kr, .kyc-step, .kyc-step.active .kyc-dot,
  .kyc-stack > *, .kyc-shield .chk, .kfill { animation: none !important; transition: none !important; }
  .kyc-shield .chk { stroke-dashoffset: 0; }
}

/* KYC status row on booster overview */
.kyc-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: var(--radius); border: 1px solid var(--border);
  text-decoration: none; color: var(--text); animation: kyc-rise .5s both; }
.kyc-row div { flex: 1; font-size: 14px; }
.kyc-row div span { color: var(--text-muted); }
.kyc-row-ico { display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; flex: 0 0 auto; }
.kyc-row.ok { border-color: rgba(70,192,122,.35);
  background: linear-gradient(120deg, rgba(70,192,122,.1), rgba(70,192,122,.02) 60%); }
.kyc-row.ok .kyc-row-ico { background: rgba(70,192,122,.14); color: #7ad9a4; }
.kyc-row.warn { border-color: rgba(245,197,24,.4);
  background: linear-gradient(120deg, rgba(245,197,24,.1), rgba(245,197,24,.02) 60%); }
.kyc-row.warn .kyc-row-ico { background: rgba(245,197,24,.15); color: var(--accent-hot);
  animation: kyc-beat 2s ease-in-out infinite; }
.kyc-row-cta { font-weight: 700; color: var(--accent-hot); font-size: 13.5px; white-space: nowrap; }
.kyc-row.warn:hover { border-color: var(--accent); }

/* ---------------------------------------------- available-jobs board motion */
.jobs-live { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.jobs-openpill { text-align: center; padding: 9px 20px; border-radius: 14px; flex: none;
  border: 1px solid rgba(245,197,24,.28); background: rgba(245,197,24,.06);
  box-shadow: 0 0 18px rgba(245,197,24,.09); }
.jobs-openpill b { display: block; font: 800 26px/1 var(--mono); color: var(--accent); }
.jobs-openpill span { font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-faint); }
/* each card grows a gold accent bar as it reveals, and lifts a little harder on hover */
.job-board .job-card { position: relative; overflow: hidden; }
.job-board .job-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--accent), #f5b043);
  transform: scaleY(0); transform-origin: top; opacity: 0;
  transition: transform .55s cubic-bezier(.2,.7,.3,1) .12s, opacity .4s ease .12s,
    box-shadow .16s ease; }
.job-board .job-card.in::before { transform: scaleY(1); opacity: .95; }
.job-board .job-card:hover { transform: translateY(-3px); border-color: rgba(245,197,24,.45); }
.job-board .job-card:hover::before { box-shadow: 0 0 16px rgba(245,197,24,.7); }
.job-board .job-card:hover .job-payout b { text-shadow: 0 0 18px rgba(245,197,24,.5); }
@media (prefers-reduced-motion: reduce) {
  .job-board .job-card::before { transition: none; transform: scaleY(1); opacity: .95; } }

/* ---------------------------------------------------------- admin email center */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #2a3340; border-radius: 99px;
  cursor: pointer; transition: background .15s ease; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px;
  top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.eml-cat { display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--border); }
.eml-cat:last-of-type { border-bottom: 0; }
.eml-cat > div { flex: 1; min-width: 0; }
.eml-bar { height: 8px; background: var(--bg-raised); border-radius: 99px; overflow: hidden; }
.eml-bar > span { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #f5b043); }
.eml-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.eml-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.eml-card:hover { border-color: rgba(245,197,24,.45); transform: translateY(-2px); }
.eml-frame { display: block; position: relative; height: 280px; overflow: hidden;
  background: #0b0d11; border-bottom: 1px solid var(--border); }
.eml-frame iframe { width: 560px; height: 1120px; border: 0; transform: scale(.5);
  transform-origin: top left; pointer-events: none; }
.eml-frame-open { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11,13,17,.55); color: #fff; font-weight: 700; font-size: 13.5px;
  opacity: 0; transition: opacity .15s ease; }
.eml-card:hover .eml-frame-open { opacity: 1; }
.eml-card-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 11px 14px; }
.chip { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 12.5px;
  font-weight: 600; color: var(--text-muted); background: var(--bg-raised);
  border: 1px solid var(--border); text-decoration: none; }
.chip:hover { border-color: rgba(245,197,24,.4); }
.chip-on { background: rgba(245,197,24,.14); color: var(--accent-hot);
  border-color: rgba(245,197,24,.5); }

/* identity-gate box on the job review page */
.kyc-gate { display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; padding: 16px 14px; border-radius: 12px;
  border: 1px solid rgba(245,197,24,.28); background: rgba(245,197,24,.06); }
.kyc-gate-ico { display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: rgba(245,197,24,.13); color: var(--accent-hot);
  margin-bottom: 3px; animation: kyc-beat 2s ease-in-out infinite; }