/* ==========================================================================
   Abrion Solutions — shared site theme
   Tokens extracted from the Abrion Solutions Design canvas (dark, tech-forward).
   Edit variables in :root to re-theme the whole site from one place.
   ========================================================================== */

:root {
	--ab-bg: #08090B;
	--ab-bg-alt: #0A0C10;
	--ab-bg-panel: #0B0D10;
	--ab-bg-card: #0C0F14;

	--ab-text: #F2F4F7;
	--ab-text-strong: #FFFFFF;
	--ab-text-body: #A8B0BC;
	--ab-text-muted: #98A0AC;
	--ab-text-mute-2: #8A919D;
	--ab-text-mute-3: #7A8290;
	--ab-text-faint: #6A727E;

	--ab-accent: #7FA6FF;
	--ab-accent-light: #9BBBFF;
	--ab-accent-link: #A9C4FF;
	--ab-accent-link-hover: #D9E4FF;
	--ab-success: #6EE7A8;
	--ab-whatsapp: #25D366;

	--ab-border: rgba(255,255,255,0.09);
	--ab-border-soft: rgba(255,255,255,0.06);
	--ab-border-strong: rgba(255,255,255,0.16);

	--ab-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
	--ab-font-head: 'Instrument Sans', 'Hanken Grotesk', system-ui, sans-serif;
	--ab-font-mono: 'Martian Mono', ui-monospace, monospace;

	--ab-radius-sm: 10px;
	--ab-radius-md: 14px;
	--ab-radius-lg: 18px;
	--ab-radius-pill: 999px;

	--ab-container: 1180px;
	--ab-gutter: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ab-body {
	margin: 0;
	background: var(--ab-bg);
	color: var(--ab-text);
	font-family: var(--ab-font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: var(--ab-accent-link); text-decoration: none; }
a:hover { color: var(--ab-accent-link-hover); }
:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: #24407A; color: #fff; }
input::placeholder, textarea::placeholder { color: #6A727E; }

.ab-container { max-width: var(--ab-container); margin: 0 auto; padding: 0 var(--ab-gutter); }

/* Header */
.ab-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(8,9,11,0.80);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ab-border-soft);
}
.ab-header-inner { display: flex; align-items: center; gap: 16px; height: 68px; }
.ab-logo { font-family: var(--ab-font-head); font-size: 19px; font-weight: 600; letter-spacing: -0.025em; color: var(--ab-text-strong); white-space: nowrap; }
.ab-logo span { color: var(--ab-accent); }
.ab-nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.ab-nav a { padding: 8px 12px; font-size: 15px; color: #A8B0BC; border-radius: 8px; }
.ab-nav a:hover { color: var(--ab-text); background: rgba(255,255,255,0.06); }
.ab-header-cta { margin-left: auto; }
.ab-burger { display: none; }
.ab-mobile-nav { display: none; }

.ab-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 46px; padding: 0 22px; border-radius: var(--ab-radius-sm);
	font-family: var(--ab-font-head); font-size: 15px; font-weight: 600;
	border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.ab-btn-primary { background: var(--ab-text); color: var(--ab-bg); }
.ab-btn-primary:hover { background: #ffffff; color: var(--ab-bg); }
.ab-btn-ghost { border-color: var(--ab-border-strong); background: rgba(255,255,255,0.04); color: #E7EAEF; }
.ab-btn-ghost:hover { background: rgba(255,255,255,0.09); color: #fff; }
.ab-btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; }

/* Mobile + tablet nav — the full 6-link nav plus logo and CTA button
   doesn't fit at iPad widths (768-1024px), so this covers phones and
   tablets alike, not just phones. */
@media (max-width: 1024px) {
	.ab-nav { display: none; }
	.ab-header-cta { display: none; }
	.ab-burger {
		display: inline-flex; margin-left: auto; width: 42px; height: 42px;
		align-items: center; justify-content: center; border-radius: 10px;
		border: 1px solid var(--ab-border); background: rgba(255,255,255,0.04);
		color: var(--ab-text); cursor: pointer;
	}
	.ab-mobile-nav { display: none; border-top: 1px solid var(--ab-border-soft); padding: 8px 20px 18px; background: #0B0D10; }
	.ab-mobile-nav.is-open { display: grid; }
	.ab-mobile-nav a { padding: 13px 4px; font-size: 16px; color: #C7CDD6; border-bottom: 1px solid var(--ab-border-soft); }
}

/* Sections */
.ab-section { padding: clamp(56px, 7vw, 96px) var(--ab-gutter); border-top: 1px solid var(--ab-border-soft); }
.ab-section:first-of-type { border-top: none; }
.ab-section-alt { background: linear-gradient(180deg, var(--ab-bg-alt), var(--ab-bg)); }
.ab-kicker { margin: 0 0 14px; font-family: var(--ab-font-mono); font-size: 10.5px; letter-spacing: -0.01em; color: var(--ab-accent); }
.ab-h1 { margin: 0; font-family: var(--ab-font-head); font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.035em; color: var(--ab-text-strong); }
.ab-h2 { margin: 0; font-family: var(--ab-font-head); font-weight: 600; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.032em; color: var(--ab-text-strong); }
.ab-h3 { margin: 0; font-family: var(--ab-font-head); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--ab-text-strong); }
.ab-lede { margin: 16px 0 0; max-width: 680px; font-size: 17px; line-height: 1.62; color: var(--ab-text-body); }
.ab-copy { font-size: 16px; line-height: 1.72; color: #B7BFC9; }
.ab-copy h2 { font-family: var(--ab-font-head); font-size: 26px; letter-spacing: -0.025em; color: var(--ab-text-strong); margin: 40px 0 14px; }
.ab-copy h3 { font-family: var(--ab-font-head); font-size: 20px; letter-spacing: -0.02em; color: var(--ab-text-strong); margin: 28px 0 10px; }
.ab-copy p { margin: 0 0 16px; }
.ab-copy ul, .ab-copy ol { margin: 0 0 16px; padding-left: 22px; }
.ab-copy li { margin: 0 0 8px; }
.ab-copy strong { color: #D7DCE3; }

/* Cards / grids */
.ab-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ab-card {
	padding: 26px 24px 28px; border: 1px solid var(--ab-border); border-radius: 16px;
	background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
}
.ab-card:hover { border-color: rgba(127,166,255,0.4); }
.ab-card-num {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: 10px; background: rgba(127,166,255,0.14); color: var(--ab-accent-light);
	font-family: var(--ab-font-mono); font-size: 12px;
}
.ab-hairline-grid {
	margin: 0; padding: 0; list-style: none; display: grid; gap: 1px;
	background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px; overflow: hidden;
}
.ab-hairline-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ab-hairline-item { background: var(--ab-bg-panel); padding: 20px 22px; }
.ab-hairline-item.center { text-align: center; padding: 20px 18px; }

.ab-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border: 1px solid var(--ab-border-strong); background: rgba(8,9,11,0.72); border-radius: var(--ab-radius-pill); font-family: var(--ab-font-mono); font-size: 11px; letter-spacing: -0.02em; color: #C7CDD6; }
.ab-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ab-success); box-shadow: 0 0 10px rgba(110,231,168,0.85); }
.ab-pill { display: inline-block; padding: 5px 11px; border-radius: 999px; background: rgba(110,231,168,0.14); color: var(--ab-success); font-family: var(--ab-font-mono); font-size: 10px; }
.ab-check { flex: none; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(110,231,168,0.16); color: var(--ab-success); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }

/* Hero */
.ab-hero { position: relative; padding: clamp(48px, 7vw, 88px) var(--ab-gutter) clamp(40px, 5vw, 72px); overflow: hidden; }
.ab-hero-glow { position: absolute; top: -340px; left: 50%; transform: translateX(-50%); width: 1000px; max-width: 200vw; height: 640px; background: radial-gradient(closest-side, rgba(62,108,222,0.38), rgba(62,108,222,0.09) 55%, transparent 78%); pointer-events: none; }
.ab-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(closest-side at 50% 30%, #000 34%, transparent 80%); -webkit-mask-image: radial-gradient(closest-side at 50% 30%, #000 34%, transparent 80%); pointer-events: none; }
.ab-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
.ab-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ab-breadcrumb-hero .ab-hero-inner { text-align: left; margin: 0; max-width: 100%; }

/* Breadcrumbs */
.ab-breadcrumbs { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--ab-text-mute-3); }
.ab-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.ab-breadcrumbs a { color: var(--ab-text-mute-2); }
.ab-breadcrumbs a:hover { color: var(--ab-text); }
.ab-breadcrumbs li[aria-current] { color: var(--ab-text-body); }

/* Stats strip */
.ab-stats { margin: clamp(28px, 3.5vw, 44px) auto 0; max-width: 1040px; }
.ab-stat-num { margin: 0; font-family: var(--ab-font-head); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ab-text-strong); }
.ab-stat-label { margin: 4px 0 0; font-size: 13.5px; color: var(--ab-text-mute-2); }

/* FAQ */
.ab-faq { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ab-faq-item { border: 1px solid var(--ab-border); border-radius: 14px; background: rgba(255,255,255,0.02); padding: 20px 22px; }
.ab-faq-q { margin: 0 0 8px; font-family: var(--ab-font-head); font-size: 16.5px; font-weight: 600; color: var(--ab-text-strong); }
.ab-faq-a { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ab-text-muted); }

/* Table */
.ab-table-wrap { overflow-x: auto; border: 1px solid var(--ab-border); border-radius: 14px; }
.ab-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.ab-table th, .ab-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--ab-border-soft); }
.ab-table th { font-family: var(--ab-font-head); color: var(--ab-text-strong); background: rgba(255,255,255,0.03); font-size: 13.5px; }
.ab-table td { color: var(--ab-text-body); }
.ab-table tr:last-child td { border-bottom: none; }

/* Contact form */
.ab-form { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ab-border); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); display: grid; gap: 16px; }
.ab-field { display: grid; gap: 7px; min-width: 0; }
.ab-field label { font-size: 14px; font-weight: 500; color: #C7CDD6; }
.ab-field input, .ab-field textarea, .ab-field select {
	width: 100%; min-width: 0; box-sizing: border-box; padding: 0 14px; height: 46px;
	border-radius: 10px; border: 1px solid var(--ab-border-strong); background: rgba(0,0,0,0.30);
	color: var(--ab-text); font-family: inherit; font-size: 15.5px;
}
.ab-field textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ab-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.ab-form-status { margin: 0; min-height: 18px; font-size: 14px; color: var(--ab-success); }
.ab-form-status.is-error { color: #F58C8C; }

/* Footer */
.ab-footer { padding: 44px var(--ab-gutter) 36px; border-top: 1px solid var(--ab-border-soft); background: var(--ab-bg-alt); }
.ab-footer-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.ab-footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ab-footer-nav a { font-size: 14.5px; color: var(--ab-text-mute-2); }
.ab-footer-nav a:hover { color: var(--ab-text); }
.ab-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ab-border-strong); color: var(--ab-text-body); }
.ab-social:hover { background: rgba(255,255,255,0.07); color: #fff; }
.ab-footer-bottom { max-width: var(--ab-container); margin: 28px auto 0; padding-top: 22px; border-top: 1px solid var(--ab-border-soft); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px; color: var(--ab-text-faint); }
.ab-whatsapp-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ab-whatsapp); box-shadow: 0 10px 26px -6px rgba(37,211,102,0.55); }
.ab-whatsapp-float:hover { background: #1FBE5B; }

@media (max-width: 719px) {
	.ab-card-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Homepage hero: pinned 3D scroll animation, ported 1:1 from the design
   canvas's `paint()` loop (perspective, per-card depth, pointer parallax,
   measured-gap gating). Driven by JS (abrion-site.js: initHeroSpread),
   which sets wrap/stage sizing itself to match the source exactly.
   Disabled for prefers-reduced-motion and narrow viewports (static list).
   ========================================================================== */
.ab-spread-wrap { position: relative; }
.ab-spread-stage {
	position: relative;
	padding: clamp(52px, 8vw, 104px) var(--ab-gutter) clamp(44px, 6vw, 80px);
	overflow: hidden;
	perspective: 1300px; perspective-origin: 50% 45%;
}
.ab-spread-radial-glow {
	position: absolute; top: -380px; left: 50%; transform: translateX(-50%);
	width: 1100px; max-width: 200vw; height: 740px;
	background: radial-gradient(closest-side, rgba(62,108,222,0.42), rgba(62,108,222,0.10) 55%, transparent 78%);
	pointer-events: none;
}
.ab-spread-gridglow {
	position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(closest-side at 50% 40%, #000 34%, transparent 80%);
	-webkit-mask-image: radial-gradient(closest-side at 50% 40%, #000 34%, transparent 80%);
	pointer-events: none;
}
.ab-spread-card {
	position: absolute; left: 50%; top: 50%;
	width: 18vw; min-width: 168px; max-width: 250px;
	padding: 18px 18px 20px; border-radius: 16px;
	border: 1px solid rgba(127,166,255,0.28);
	background: linear-gradient(160deg, rgba(22,29,44,0.96), rgba(11,14,20,0.96));
	box-shadow: 0 30px 70px -28px rgba(0,0,0,0.95);
	opacity: 0; will-change: transform, opacity;
	transform: translate(-50%, -50%);
}
.ab-spread-card:nth-of-type(1) { z-index: 3; }
.ab-spread-card:nth-of-type(2) { z-index: 4; }
.ab-spread-card:nth-of-type(3) { z-index: 5; }
.ab-spread-card:nth-of-type(4) { z-index: 6; }
.ab-spread-card:nth-of-type(5) { z-index: 7; }
.ab-spread-card:nth-of-type(6) { z-index: 8; }
.ab-spread-card .ab-kicker { margin: 0 0 10px; font-size: 9px; }
.ab-spread-card h3 { margin: 0 0 5px; font-family: var(--ab-font-head); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.ab-spread-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #98A0AC; }
.ab-hero-copy {
	position: relative; z-index: 10; max-width: 620px; margin: 0 auto; padding: 30px 24px; text-align: center;
	background: radial-gradient(64% 72% at 50% 48%, rgba(8,9,11,0.93) 42%, rgba(8,9,11,0) 80%);
}
.ab-hero-core {
	position: absolute; left: 50%; top: 50%; z-index: 9; width: min(560px, 78vw);
	transform: translate(-50%, -50%); text-align: center; pointer-events: none; opacity: 0;
}
.ab-hero-core p:first-child { margin: 0 0 10px; font-family: var(--ab-font-mono); font-size: 9.5px; color: var(--ab-accent); }
.ab-hero-core p:last-child { margin: 0; font-family: var(--ab-font-head); font-weight: 600; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.06; letter-spacing: -0.04em; color: #fff; }
.ab-spread-hint {
	position: absolute; left: 0; right: 0; bottom: 26px; z-index: 11;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	font-family: var(--ab-font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--ab-text-faint);
}

.ab-static-modules, .ab-static-bubble, .ab-static-note { display: none; }

/* Static / reduced-motion / narrow-viewport fallback (JS sets .is-static) */
.ab-spread-wrap.is-static .ab-static-modules { display: block; }
.ab-spread-wrap.is-static .ab-static-bubble { display: flex; }
.ab-spread-wrap.is-static .ab-static-note { display: block; }
.ab-spread-wrap.is-static .ab-spread-card,
.ab-spread-wrap.is-static .ab-hero-core,
.ab-spread-wrap.is-static .ab-spread-hint { display: none; }
.ab-static-bubble {
	align-items: center; gap: 12px; margin: 40px auto 0; max-width: 420px;
	padding: 16px 18px; border-radius: 999px;
	background: radial-gradient(120% 160% at 30% 20%, #2B4B92, #0C1018);
	border: 1px solid rgba(127,166,255,0.45);
}
.ab-static-bubble .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ab-success); box-shadow: 0 0 10px rgba(110,231,168,0.85); }
.ab-static-bubble strong { display: block; font-family: var(--ab-font-head); font-size: 18px; font-weight: 600; color: #fff; }
.ab-static-bubble span.tag { display: block; font-family: var(--ab-font-mono); font-size: 9px; color: var(--ab-accent-light); }
.ab-static-modules {
	margin: 14px auto 0; max-width: 420px; padding: 0; list-style: none;
}
.ab-static-modules li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--ab-border-soft); }
.ab-static-modules .dot { flex: none; margin-top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ab-accent); box-shadow: 0 0 0 4px rgba(127,166,255,0.16); }
.ab-static-modules h3 { margin: 0; font-family: var(--ab-font-head); font-size: 16.5px; font-weight: 600; color: #fff; }
.ab-static-modules p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: #98A0AC; }
.ab-static-note { margin: 16px auto 0; max-width: 420px; font-size: 14.5px; line-height: 1.55; color: var(--ab-text-mute-3); }

/* ==========================================================================
   Weighbridge demo widget (used on /weighbridge-software-qatar)
   ========================================================================== */
.ab-wb-demo { border: 1px solid var(--ab-border); border-radius: 16px; background: linear-gradient(180deg, #0C0F14, #090B0F); overflow: hidden; }
.ab-wb-scene { position: relative; height: 190px; overflow: hidden; }
.ab-wb-gridbg { position: absolute; inset: 0; background-image: linear-gradient(rgba(127,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127,166,255,0.05) 1px, transparent 1px); background-size: 34px 34px; }
.ab-wb-platform { position: absolute; left: 8%; right: 8%; bottom: 34px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #2A3140, #161B24); box-shadow: 0 0 0 1px rgba(127,166,255,0.22) inset, 0 -12px 30px -14px rgba(127,166,255,0.5); animation: ab-settle 9s ease-in-out infinite; }
.ab-wb-supports { position: absolute; left: 8%; right: 8%; bottom: 22px; height: 12px; display: flex; justify-content: space-between; }
.ab-wb-supports span { width: 3px; height: 100%; background: #1B2029; }
.ab-wb-groundline { position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: rgba(255,255,255,0.08); }
.ab-wb-truck { position: absolute; left: 12%; right: 12%; bottom: 46px; will-change: transform; transform: translateX(-58%); }
.ab-wb-live { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
.ab-wb-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ab-success); animation: ab-pulse 1.6s ease-in-out infinite; }
.ab-wb-live span:last-child { font-family: var(--ab-font-mono); font-size: 8.5px; color: var(--ab-text-mute-2); }
.ab-wb-panel { padding: 18px 18px 20px; border-top: 1px solid var(--ab-border-soft); }
.ab-wb-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ab-wb-ticket { font-family: var(--ab-font-mono); font-size: 10px; color: var(--ab-text-mute-3); }
.ab-wb-status { padding: 3px 9px; border-radius: 999px; background: rgba(110,231,168,0.15); color: var(--ab-success); font-size: 11px; }
.ab-wb-rows { display: grid; gap: 11px; }
.ab-wb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ab-wb-row .label { font-size: 14px; color: var(--ab-text-mute-2); }
.ab-wb-row .value { font-family: var(--ab-font-head); font-size: 20px; font-weight: 600; color: #E7EAEF; font-variant-numeric: tabular-nums; }
.ab-wb-row .value.net { font-size: 24px; color: var(--ab-accent); }
.ab-wb-row .label.net { color: #C7CDD6; }
.ab-wb-divider { height: 1px; background: rgba(255,255,255,0.08); }
.ab-wb-meta { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); display: grid; gap: 6px; font-size: 13.5px; color: var(--ab-text-mute-2); }
.ab-wb-meta-row { display: flex; justify-content: space-between; gap: 12px; }
.ab-wb-meta-row span:last-child { color: #C7CDD6; }

@keyframes ab-settle { 0%, 18% { transform: translateY(0); } 24% { transform: translateY(2.5px); } 30% { transform: translateY(1px); } 36%, 100% { transform: translateY(1.6px); } }
@keyframes ab-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.ab-wb-platform, .ab-wb-live .dot { animation: none; }
}