/* ═══════════════════════════════════════════════════════════════════════
   MotoMagic — Maintenance Tracker  (css/tracker.css)
   ═══════════════════════════════════════════════════════════════════════ */

.trk-wrap { max-width:1080px; margin:0 auto; padding:100px 24px 80px; }

/* ── Topbar ─────────────────────────────────────────────────────────────*/
.trk-topbar {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:28px; flex-wrap:wrap;
}
.trk-kicker {
  font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--red,#E30613); margin-bottom:5px;
}
.trk-title {
  font-family:var(--font-d,sans-serif); font-size:clamp(24px,3vw,36px);
  font-weight:800; letter-spacing:-.5px;
}
.trk-topbar-right { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Buttons ────────────────────────────────────────────────────────────*/
.trk-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:10px; font-size:13px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:.15s; white-space:nowrap;
  font-family:inherit;
}
.trk-btn-red   { background:var(--red,#E30613); color:#fff; border-color:var(--red,#E30613); }
.trk-btn-red:hover { background:#c80511; }
.trk-btn-ghost { background:rgba(255,255,255,.05); color:var(--white,#f0f0f2); border-color:rgba(255,255,255,.12); }
.trk-btn-ghost:hover { background:rgba(255,255,255,.1); }
.trk-btn-del   { color:#f87171 !important; }
.trk-btn-del:hover { border-color:rgba(248,113,113,.3) !important; }
.trk-btn-sm    { padding:6px 12px; font-size:12px; border-radius:8px; }
.trk-btn-xs    { padding:4px 10px; font-size:11px; border-radius:6px; }
.trk-btn:focus-visible { outline:2px solid var(--red,#E30613); outline-offset:2px; }

/* ── Bike tabs ──────────────────────────────────────────────────────────*/
.trk-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.trk-tab {
  padding:8px 16px; border-radius:99px; font-size:13px; font-weight:600;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:var(--gray,#888); cursor:pointer; transition:.15s; font-family:inherit;
}
.trk-tab:hover { background:rgba(255,255,255,.08); color:var(--white,#f0f0f2); }
.trk-tab--on  { background:var(--red,#E30613); color:#fff; border-color:var(--red,#E30613); }
.trk-tab:focus-visible { outline:2px solid var(--red,#E30613); outline-offset:2px; }

/* ── Dashboard bar ──────────────────────────────────────────────────────*/
.trk-dash-bar {
  background:var(--card,#141416); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:20px 22px;
  display:flex; align-items:center; gap:20px;
  flex-wrap:wrap; margin-bottom:20px;
}
.trk-dash-left { flex:1; min-width:180px; }
.trk-dash-name {
  font-size:17px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.trk-dash-yr   { font-size:13px; color:var(--gray,#888); font-weight:400; }
.trk-dash-sub  { font-size:12px; color:var(--gray,#888); margin-top:2px; }
.trk-dash-km   { font-size:22px; font-weight:800; color:var(--red,#E30613); margin-top:6px; }
.trk-dash-cards { display:flex; gap:12px; flex-wrap:wrap; }
.trk-dcard {
  background:var(--card2,#1a1a1c); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:12px 16px; min-width:110px; text-align:center;
}
.trk-dcard--red    { border-color:rgba(239,68,68,.3);  background:rgba(239,68,68,.07);  }
.trk-dcard--yellow { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.07); }
.trk-dcard-n { font-size:22px; font-weight:800; }
.trk-dcard-l { font-size:11px; color:var(--gray,#888); margin-top:2px; }
.trk-dash-acts { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Services ───────────────────────────────────────────────────────────*/
.trk-svc-list { display:flex; flex-direction:column; gap:0; }
.trk-svc-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; margin-bottom:8px;
  font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.07);
}
.trk-svc-hint { font-size:11.5px; color:var(--gray,#888); font-weight:400; }

.trk-svc-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 16px; border-radius:12px; margin-bottom:6px;
  background:var(--card,#141416); border:1px solid rgba(255,255,255,.07);
  cursor:pointer; transition:.15s;
}
.trk-svc-row:hover { border-color:rgba(255,255,255,.14); background:#181818; }
.trk-svc-row:focus-visible { outline:2px solid var(--red,#E30613); outline-offset:2px; }

.trk-svc-ico  { font-size:20px; flex-shrink:0; margin-top:2px; }
.trk-svc-mid  { flex:1; min-width:0; }
.trk-svc-nm   { font-size:14px; font-weight:600; margin-bottom:4px; }
.trk-svc-meta { font-size:11.5px; color:var(--gray,#888); }
.trk-svc-prog { height:3px; background:rgba(255,255,255,.08); border-radius:99px; margin:6px 0 4px; overflow:hidden; }
.trk-svc-progbar { height:100%; border-radius:99px; transition:width .4s ease; }

.trk-svc-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:130px; }
.trk-badge {
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:3px 9px; border-radius:99px; border:1px solid; white-space:nowrap;
}
.trk-rem  { font-size:12px; font-weight:600; text-align:right; }
.trk-svc-acts { display:flex; align-items:center; gap:10px; padding-top:6px; flex-wrap:wrap; }
.trk-notes { font-size:11px; color:var(--gray,#888); }

/* ── Empty ──────────────────────────────────────────────────────────────*/
.trk-empty {
  text-align:center; padding:70px 40px;
  border:1px dashed rgba(255,255,255,.12); border-radius:16px; margin-top:16px;
}
.trk-empty h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
.trk-empty p  { color:var(--gray,#888); font-size:14px; }

/* ── Modals ─────────────────────────────────────────────────────────────*/
.trk-overlay {
  position:fixed; inset:0; z-index:9990;
  background:rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.trk-modal {
  background:var(--card,#141416);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; width:100%; max-width:500px; overflow:hidden;
}
.trk-modal-sm { max-width:360px; }
.trk-mhead {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.08);
}
.trk-mhead h2  { font-size:15px; font-weight:700; }
.trk-mx {
  background:none; border:none; color:var(--gray,#888);
  font-size:16px; cursor:pointer; padding:4px 8px; border-radius:6px;
  font-family:inherit;
}
.trk-mx:hover { color:var(--white,#f0f0f2); }
.trk-mbody    { padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.trk-mfoot    {
  padding:16px 22px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:flex-end; gap:8px;
}

/* ── Forms ──────────────────────────────────────────────────────────────*/
.trk-row   { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.trk-field { display:flex; flex-direction:column; gap:5px; }
.trk-field label { font-size:12px; color:var(--gray,#888); font-weight:600; }
.trk-req   { color:var(--red,#E30613); }
.trk-in {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:10px 13px; color:var(--white,#f0f0f2);
  font-size:13.5px; width:100%; font-family:inherit; transition:.15s;
}
.trk-in:focus { outline:none; border-color:var(--red,#E30613); }
.trk-in::placeholder { color:#555; }
.trk-in option { background:var(--card,#141416); }
.trk-ta { resize:vertical; min-height:64px; }
.trk-chklbl { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.trk-chklbl input { accent-color:var(--red,#E30613); width:15px; height:15px; }
.trk-hint { font-size:11px; color:var(--gray,#888); }

/* ── Alerts ─────────────────────────────────────────────────────────────*/
.trk-err {
  font-size:12.5px; color:#f87171; background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.2); border-radius:8px; padding:8px 12px;
}
.trk-warn {
  font-size:12.5px; color:#f59e0b; background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.2); border-radius:8px; padding:8px 12px;
}
.trk-disclaimer {
  font-size:12px; color:#f59e0b; background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.2); border-radius:8px; padding:8px 12px;
}

/* ── Responsive ─────────────────────────────────────────────────────────*/
@media (max-width:768px) {
  .trk-wrap       { padding:80px 14px 60px; }
  .trk-topbar     { flex-direction:column; align-items:flex-start; }
  .trk-dash-bar   { flex-direction:column; align-items:flex-start; gap:14px; }
  .trk-svc-row    { flex-wrap:wrap; }
  .trk-svc-right  { min-width:auto; flex-direction:row; align-items:center; gap:8px; }
  .trk-row        { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .trk-dash-cards { flex-direction:column; width:100%; }
  .trk-dcard      { min-width:auto; display:flex; align-items:center; gap:12px; text-align:left; }
}

/* ── Vehicle-specific tracker: tabs, config, sections, service rows ────────── */
.trk-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.trk-tab{padding:8px 14px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.12));background:rgba(255,255,255,.04);color:#ccc;font-weight:600;cursor:pointer;font-size:13px;min-height:40px}
.trk-tab.on{border-color:var(--red,#E30613);background:rgba(227,6,19,.14);color:#fff}
.trk-setup{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.08);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.trk-setup-sub{font-size:12.5px;color:#c9b78a;margin-top:3px}
.trk-badge{display:inline-block;font-size:10px;font-weight:700;color:#fbbf24;border:1px solid rgba(251,191,36,.5);border-radius:99px;padding:1px 8px;vertical-align:middle}
.trk-section{margin:18px 0}
.trk-sec-h{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--red,#E30613);margin-bottom:10px}
.trk-svc-list{display:grid;gap:10px}
.trk-svc{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  border:1px solid var(--line,rgba(255,255,255,.08));background:var(--card,#111);border-radius:14px;padding:13px 15px}
.trk-svc-main{min-width:0;flex:1}
.trk-svc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trk-svc-name{font-weight:700;color:#fff;font-size:14px}
.trk-chip{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid}
.trk-svc-meta{font-size:11.5px;color:var(--gray,#888);margin-top:4px}
.trk-svc-rem{font-size:12.5px;color:#ccc;margin-top:3px}
.trk-svc-price{font-size:12.5px;color:#e8e8e8;margin-top:6px;font-weight:600}
.trk-svc-price.is-contact{color:#f59e0b;font-weight:600}
.trk-price-src{display:block;font-size:10px;color:#6b7280;font-weight:400;margin-top:1px}
.trk-svc-last{font-size:12px;color:#9fd39f;margin-top:5px}
.trk-hist-toggle{background:none;border:none;color:var(--red,#E30613);font-size:12px;cursor:pointer;padding:6px 0 0;font-weight:600}
.trk-hist{margin-top:6px;border-top:1px solid rgba(255,255,255,.06);padding-top:6px}
.trk-hist-row{font-size:11.5px;color:#bbb;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:3px 0}
.trk-hist-notes{width:100%;color:#888;font-size:11px}
.trk-legacy{display:grid;gap:6px}
.trk-legacy-row{display:flex;justify-content:space-between;font-size:12px;color:#aaa;border-bottom:1px solid rgba(255,255,255,.05);padding:5px 0}
.trk-svc-act{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.trk-row{display:flex;gap:12px;flex-wrap:wrap}
.trk-row .trk-field{flex:1;min-width:130px}
.trk-req{color:var(--red,#E30613)}
.trk-chklbl-wrap{margin-top:4px}
.trk-btn-xs{padding:7px 11px;font-size:11.5px;min-height:36px;white-space:nowrap}
@media (max-width:640px){
  .trk-svc{flex-direction:column}
  .trk-svc-act{flex-direction:row;width:100%}
  .trk-svc-act .trk-btn{flex:1;min-height:44px;justify-content:center}
  .trk-tab{min-height:44px}
}

/* ═══ Side banner rails + horizontal banners (premium framing) ═══════════ */
.trk-frame{ width:min(1920px, calc(100% - 32px)); margin-inline:auto; }
.trk-rail{ display:none; }

/* Horizontal banners — always in the content flow, full content width */
.trk-hbanner{ width:100%; height:clamp(260px,26vw,320px); border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85); background:#0f0f10; }
.trk-hbanner img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.trk-hbanner-top{ margin:22px 0 6px; }
.trk-hbanner-bottom{ margin:26px 0 4px; }

/* Vertical side banners — fixed 340×435 containers, image fills completely */
.trk-banner{ box-sizing:border-box; width:100%; height:435px; display:block; border-radius:18px; overflow:hidden;
  object-fit:cover; object-position:center; background:#0f0f10; border:1px solid #ff1f1f;
  transition:box-shadow .25s ease, transform .25s ease; }
.trk-banner:hover{ box-shadow:0 0 0 1px #ff1f1f, 0 14px 44px -10px rgba(255,31,31,.5);
  transform:translateY(-2px); }

/* Desktop >=1400px: fixed three-column layout  340px | minmax(0,1fr) | 340px */
@media (min-width:1400px){
  .trk-frame{ display:grid; grid-template-columns:340px minmax(0,1fr) 340px; gap:24px; align-items:start; }
  .trk-frame>.trk-rail-l{ grid-column:1; }
  .trk-frame>.trk-wrap{ grid-column:2; min-width:0; max-width:none; }
  .trk-frame>.trk-rail-r{ grid-column:3; }
  /* Both rails identical: fixed 340px column, two stacked 435px banners, 12px gap */
  .trk-rail{ display:flex; flex-direction:column; gap:12px; width:340px; min-width:340px; max-width:340px;
    position:sticky; top:88px; margin-top:100px; }
}

/* Tracker premium motorsport redesign (UI/styling only - no logic changes) */
.trk-wrap{
  --trk-red:#E30613; --trk-red2:#ff2a2a; --trk-line:rgba(255,255,255,.06);
  --trk-rline:rgba(227,6,19,.30);
  --hex:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  --carbon:repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(255,255,255,.014) 0 2px,transparent 2px 5px);
  max-width:1200px;
}

/* Header */
.trk-topbar{ position:relative; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--trk-line); }
.trk-topbar::after{ content:""; position:absolute; left:0; bottom:-1px; width:70px; height:2px;
  background:linear-gradient(90deg,var(--trk-red),transparent); box-shadow:0 0 18px 1px rgba(227,6,19,.55); }
.trk-kicker{ color:var(--trk-red); font-size:11px; letter-spacing:2px; }
.trk-title{ font-size:clamp(30px,3.6vw,46px); letter-spacing:-.6px; }
.trk-topbar-right{ gap:10px; }
.trk-disclaimer{ border-radius:12px; padding:12px 16px; font-size:12.5px; }

/* Vehicle tabs */
.trk-tabs{ margin:16px 0 14px; }
.trk-tab{ border-radius:10px; padding:8px 16px; }
.trk-tab.on{ background:linear-gradient(180deg,rgba(227,6,19,.20),rgba(227,6,19,.06));
  border-color:var(--trk-red); color:#fff; box-shadow:0 6px 18px -10px rgba(227,6,19,.6); }

/* Vehicle panel - premium supercar dashboard card */
.trk-dash{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,400px); gap:28px; align-items:stretch;
  background:linear-gradient(135deg,#141417,#0b0b0d); background-image:var(--carbon);
  border:1px solid var(--trk-rline); border-radius:20px; padding:30px 32px; margin:10px 0 32px;
  position:relative; overflow:hidden;
  box-shadow:0 34px 74px -40px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.03); }
.trk-dash::before{ content:""; display:block; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--trk-red),transparent); }
.trk-dash-info{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.trk-dash-left{ min-width:0; }
.trk-dash-name{ font-family:var(--font-d,inherit); font-size:clamp(24px,2.7vw,34px); font-weight:800;
  letter-spacing:-.5px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.trk-dash-yr{ font-size:16px; color:#8a8a8f; font-weight:500; }
.trk-dash-sub{ font-size:13.5px; color:#8a8a8f; margin-top:10px; letter-spacing:.2px; }
.trk-dash-km{ font-size:clamp(34px,3.8vw,46px); font-weight:800; color:var(--trk-red); letter-spacing:-.6px;
  margin-top:16px; text-shadow:0 0 32px rgba(227,6,19,.45); }
.trk-badge{ font-size:10px; color:#fbbf24; border-color:rgba(251,191,36,.5);
  text-transform:uppercase; letter-spacing:.6px; padding:3px 10px; margin-left:6px; }
.trk-dash-acts{ margin-top:22px; gap:8px; flex-wrap:wrap; }

/* Vehicle preview panel (an <img> added later auto-covers the placeholder) */
.trk-dash-preview{ position:relative; border-radius:16px; overflow:hidden; min-height:190px;
  border:1px solid var(--trk-line);
  background:radial-gradient(120% 90% at 70% 15%, rgba(227,6,19,.14), transparent 60%), linear-gradient(160deg,#151518,#0a0a0c);
  background-image:var(--carbon); }
.trk-dash-preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:1; }
.trk-dash-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.trk-dash-ph-ic{ color:var(--trk-red); opacity:.85; filter:drop-shadow(0 0 18px rgba(227,6,19,.35)); }
.trk-dash-ph-tx{ font-size:11px; text-transform:uppercase; letter-spacing:2px; color:#8a8a8f; font-weight:700; }
@media (max-width:820px){ .trk-dash{ grid-template-columns:1fr; padding:24px; } .trk-dash-preview{ min-height:150px; } }

/* Section headers */
.trk-section{ margin:32px 0; }
.trk-sec-h{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--trk-red); margin-bottom:15px; }
.trk-sec-ic{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; color:var(--trk-red); }
.trk-sec-ic svg{ width:17px; height:17px; }

/* Service cards - premium dashboard widgets */
.trk-svc-list{ gap:14px; }
.trk-svc{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center;
  background:linear-gradient(150deg,#101012,#0a0a0c); border:1px solid var(--trk-line); border-radius:16px;
  padding:24px 26px; box-shadow:0 14px 40px -24px rgba(0,0,0,.82);
  transition:border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.trk-svc:hover{ border-color:var(--trk-rline); transform:translateY(-2px);
  box-shadow:0 22px 50px -26px rgba(227,6,19,.4), 0 0 0 1px rgba(227,6,19,.12); }
.trk-svc-badge{ position:relative; width:54px; height:60px; flex:0 0 auto; align-self:center;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--trk-red2),#b8050e); clip-path:var(--hex); }
.trk-svc-badge::before{ content:""; position:absolute; inset:1.5px; clip-path:var(--hex);
  background:linear-gradient(160deg,#151517,#0b0b0d); }
.trk-svc-badge svg{ position:relative; z-index:1; width:23px; height:23px; color:#ff3a3a; }
.trk-svc-main{ display:flex; flex-direction:column; }
.trk-svc-name{ font-size:15px; font-weight:700; letter-spacing:.2px; }
.trk-chip{ text-transform:uppercase; letter-spacing:.5px; padding:3px 10px; font-size:10px; }
.trk-svc-meta{ margin-top:6px; font-size:12px; }
.trk-svc-rem{ margin-top:4px; }
.trk-svc-price{ margin-top:9px; font-size:13.5px; color:#fff; font-weight:700; }
.trk-svc-price.is-contact{ color:#f59e0b; }
.trk-price-src{ color:#6b7280; font-weight:400; margin-top:2px; }
.trk-svc-act{ align-self:center; gap:8px; }
.trk-svc-act .trk-btn{ min-width:122px; justify-content:center; border-radius:10px; padding:9px 14px; font-size:12px; min-height:38px; }

/* Buttons - premium hover + glow */
.trk-btn{ border-radius:11px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.trk-btn-red{ background:linear-gradient(180deg,#f5182a,var(--trk-red)); border-color:var(--trk-red);
  box-shadow:0 6px 20px -8px rgba(227,6,19,.6); }
.trk-btn-red:hover{ background:linear-gradient(180deg,#ff2b3c,#d10611); transform:translateY(-1px);
  box-shadow:0 12px 28px -8px rgba(227,6,19,.8); }
.trk-btn-ghost{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); }
.trk-btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); transform:translateY(-1px); }

/* Feature strip - hexagon icons, two-line labels, carbon accent */
.trk-featstrip{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin:40px 0 12px; padding:24px 26px; border-radius:18px;
  background:linear-gradient(135deg,#0f0f11,#0a0a0c); background-image:var(--carbon);
  border:1px solid var(--trk-line); box-shadow:0 26px 60px -36px rgba(0,0,0,.9); }
.trk-feat{ display:flex; align-items:center; gap:12px; }
.trk-feat-ic{ position:relative; width:46px; height:52px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--trk-red2),#b8050e); clip-path:var(--hex); }
.trk-feat-ic::before{ content:""; position:absolute; inset:1.5px; clip-path:var(--hex); background:linear-gradient(160deg,#151517,#0b0b0d); }
.trk-feat-ic svg{ position:relative; z-index:1; width:20px; height:20px; color:#ff3a3a; }
.trk-feat-tx{ display:flex; flex-direction:column; line-height:1.2; }
.trk-feat-tx b{ color:#fff; font-size:12.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; }
.trk-feat-tx i{ color:#8a8a8f; font-size:10.5px; font-style:normal; letter-spacing:.4px; text-transform:uppercase; }
.trk-feat-logo{ padding:0 4px; }
.trk-feat-shield{ position:relative; width:66px; height:74px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--trk-red2),#c1050f); clip-path:var(--hex);
  box-shadow:0 12px 34px -10px rgba(227,6,19,.7); }
.trk-feat-shield::before{ content:""; position:absolute; inset:2px; clip-path:var(--hex); background:linear-gradient(160deg,#1a0406,#0b0b0d); }
.trk-feat-shield svg{ position:relative; z-index:1; width:32px; height:32px; color:#ff3a3a; }
@media (max-width:900px){ .trk-featstrip{ gap:12px; justify-content:center; } .trk-feat-tx b{ font-size:11.5px; } }

/* Horizontal banners - premium card border */
.trk-hbanner{ border:1px solid var(--trk-rline); box-shadow:0 26px 60px -32px rgba(0,0,0,.9), 0 0 0 1px rgba(227,6,19,.05); }

/* Mobile card stacking */
@media (max-width:640px){
  .trk-svc{ grid-template-columns:auto minmax(0,1fr); padding:16px; }
  .trk-svc-act{ grid-column:1 / -1; flex-direction:row; }
  .trk-svc-act .trk-btn{ flex:1; }
}