/* ==========================================================================
   Sanchar Solutions — design system
   Light + dark themes via CSS variables. No build step required.
   ========================================================================== */
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: optional; }
@font-face { font-family: "Jakarta"; src: url("../fonts/jakarta.woff2") format("woff2"); font-weight: 200 800; font-display: optional; }

:root {
  /* light theme: soft cream page, white cards (admin → Site settings → Colours → Light page background) */
  --bg: #fcf9f3;
  --bg-soft: #f6f0e5;
  --bg-muted: #efe8db;
  --surface: #ffffff;
  --surface-2: #fffdf9;
  --text: #0f1024;
  --text-2: #3d3f5c;
  --muted: #5d5f78;
  --line: #ece4d6;
  --line-strong: #ddd2c0;
  --brand: #7c3aed;
  --brand-2: #4f46e5;
  --brand-3: #2563eb;
  --brand-500: #8b5cf6;
  --brand-400: #a78bfa;
  --brand-300: #c4b5fd;
  --brand-200: #ddd6fe;
  --brand-mid: #6366f1;
  --brand-3-500: #3b82f6;
  --brand-3-400: #60a5fa;
  --brand-3-300: #93c5fd;
  --brand-2: #4f46e5;
  --brand-3: #2563eb;
  --brand-soft: #f3efff;
  --brand-ink: #5b21b6;
  --accent: #06b6d4;
  --ok: #16a34a;
  --warn: #f59e0b;
  --err: #dc2626;
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  --grad-text: linear-gradient(90deg, var(--brand-500), var(--brand-mid) 45%, var(--brand-3-500));
  --hero-bg: #0a0a1f;
  --hero-text: #f5f5ff;
  --hero-muted: #a9abc9;
  --shadow-sm: 0 1px 2px rgba(16, 16, 40, .06);
  --shadow: 0 1px 2px rgba(16, 16, 40, .04), 0 8px 24px -8px rgba(16, 16, 40, .12);
  --shadow-lg: 0 24px 60px -20px rgba(49, 26, 120, .35);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Jakarta", "Inter", ui-sans-serif, system-ui, sans-serif;
  --container: 1200px;
  --header-h: 72px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #08081a;
  --bg-soft: #0d0d24;
  --bg-muted: #12122e;
  --surface: #11112b;
  --surface-2: #14143a;
  --text: #f1f1fb;
  --text-2: #c9cae4;
  --muted: #9092b4;
  --line: #22224a;
  --line-strong: #2e2e5e;
  --brand-soft: #1c1546;
  --brand-ink: #c4b5fd;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.02em; color: var(--text); font-weight: 750; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--brand); color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.icon-sm { width: 1em; height: 1em; flex-shrink: 0; }
.icon-lg { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 820px; }
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-sm { padding: clamp(40px, 6vw, 72px) 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--hero-bg); color: var(--hero-text); --text: #f5f5ff; --text-2: #d6d7ee; --muted: #a9abc9; --line: rgba(255,255,255,.1); --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.06); --brand-soft: color-mix(in srgb, var(--brand) 18%, transparent); --brand-ink: var(--brand-300); }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split-top { align-items: start; }
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.with-aside.aside-wide { grid-template-columns: minmax(0, 1fr) 380px; }
.with-aside.aside-narrow { grid-template-columns: minmax(0, 1fr) 340px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 16px; } .mb-4 { margin-bottom: 32px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xsmall { font-size: .78rem; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-2); }
.gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sticky { position: sticky; top: calc(var(--header-h) + 20px); }

/* ---------- section header ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--brand); margin-bottom: 14px; }
.section-dark .eyebrow, .hero .eyebrow { color: var(--brand-300); }
.eyebrow-pill { padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); letter-spacing: .08em; }
.hero .eyebrow-pill { background: color-mix(in srgb, var(--brand) 16%, transparent); border-color: color-mix(in srgb, var(--brand-400) 35%, transparent); }
.eyebrow-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 20%, transparent); animation: pulse 2s infinite; }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-weight: 650; font-size: .95rem; line-height: 1.2; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(99, 52, 237, .7); }
.btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(99, 52, 237, .85); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-white { background: #fff; color: #1b1550; }
.btn-white:hover { box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); transform: translateY(-1px); }
.btn-wa { background: #22c55e; color: #fff; }
.btn-sm { padding: 9px 14px; font-size: .85rem; border-radius: 10px; }
.btn-lg { padding: 16px 28px; font-size: 1rem; border-radius: 14px; }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--brand); }
.link-arrow .icon { transition: transform .2s; }
.link-arrow:hover .icon { transform: translateX(3px); }
.section-dark .link-arrow { color: var(--brand-300); }

/* ---------- header ---------- */
.announcement { background: var(--grad); color: #fff; font-size: .85rem; text-align: center; padding: 8px 16px; }
.announcement a { text-decoration: underline; }
.topbar { background: #07071a; color: #b9bad6; font-size: .8rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 36px; gap: 16px; }
.topbar a:hover { color: #fff; }
.topbar .row { gap: 18px; }
.site-header { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
/* logo | menu (centred on the page) | buttons */
.site-header > .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: var(--header-h); }
.site-header > .container > .brand { grid-column: 1; justify-self: start; }
.site-header > .container > .nav { grid-column: 2; }
.site-header > .container > .header-actions { grid-column: 3; justify-self: end; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; }
.nav { display: flex; align-items: center; justify-content: center; gap: 2px; }
.nav > a, .nav > .has-mega > button, .nav > .has-dd > button { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 10px; font-weight: 550; font-size: .93rem; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.nav > a:hover, .nav > .has-mega > button:hover, .nav > a.is-active, .nav > .has-mega > button.is-active,
.nav > .has-dd > button:hover, .nav > .has-dd > button.is-active, .nav > .has-dd.open > button { color: var(--text); background: var(--bg-muted); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; }
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
.menu-toggle { display: none; }

/* mega menu */
.has-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(20, 10, 60, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.has-mega.open .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner { display: grid; grid-template-columns: 250px 1fr; gap: 0; padding: 0; }
.mega-tabs { padding: 20px 12px; border-right: 1px solid var(--line); background: var(--bg-soft); }
.mega-tab { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px; border-radius: 12px; border: 0; background: none; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: .92rem; }
.mega-tab .chip { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--brand); }
.mega-tab.active, .mega-tab:hover { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.mega-panels { padding: 28px 32px; }
.mega-panel { display: none; }
.mega-panel.active { display: grid; grid-template-columns: 1fr 280px; gap: 32px; }
.mega-panel h3 { font-size: 1.05rem; margin-bottom: 4px; }
.mega-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 16px; margin-top: 16px; }
.mega-links a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; font-size: .93rem; color: var(--text-2); }
.mega-links a:hover { background: var(--bg-muted); color: var(--brand); }
.mega-links a .icon-sm { color: var(--brand); opacity: .7; }
.mega-cta { border-radius: var(--radius); background: var(--hero-bg); color: #fff; padding: 22px; position: relative; overflow: hidden; }
.mega-cta::after { content: ""; position: absolute; width: 200px; height: 200px; right: -60px; top: -60px; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%); }
.mega-cta h4 { color: #fff; font-size: 1.05rem; }
.mega-cta p { color: #b8b9d8; font-size: .88rem; }
.mega-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); grid-column: 1 / -1; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 120; display: none; }
.drawer.open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 20, .55); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--bg); padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; animation: slideIn .22s ease; }
.drawer-panel > a, .drawer-panel summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px; border-radius: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.drawer-panel summary::-webkit-details-marker { display: none; }
.drawer-panel > a:hover, .drawer-panel summary:hover { background: var(--bg-muted); }
.drawer-panel details[open] summary .icon { transform: rotate(180deg); }
.drawer-group { padding: 4px 0 8px 12px; }
.drawer-group h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 12px 12px 6px; }
.drawer-group a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--text-2); font-size: .93rem; }
.drawer-group a:hover { color: var(--brand); background: var(--bg-muted); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--hero-bg); color: var(--hero-text); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(600px 400px at 85% 10%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 60%),
  radial-gradient(500px 380px at 5% 90%, color-mix(in srgb, var(--brand-3) 35%, transparent), transparent 60%),
  radial-gradient(400px 300px at 50% 120%, rgba(6, 182, 212, .2), transparent 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); }
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero .lead, .hero p { color: var(--hero-muted); }
.hero-home { padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 110px); }
.hero-page { padding: clamp(48px, 7vw, 88px) 0 clamp(48px, 7vw, 80px); }
.hero-page h1 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 900px; }
.hero-page .lead { max-width: 720px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-size: .88rem; color: #b7b8d6; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .icon-sm { color: var(--brand-400); }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; max-width: 620px; }
.hero-stat { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.hero-stat b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: #fff; line-height: 1.1; }
.hero-stat span { font-size: .78rem; color: #a9abc9; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; color: #a9abc9; margin-bottom: 22px; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs .sep { opacity: .5; }
.breadcrumbs [aria-current] { color: var(--brand-300); }

/* hero visual (dashboard mock) */
.hero-visual { position: relative; }
.dash { position: relative; border-radius: 22px; padding: 22px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dash-head b { color: #fff; font-family: var(--font-display); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: #86efac; background: rgba(34,197,94,.12); padding: 4px 10px; border-radius: 999px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 1.6s infinite; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 8px 0 0; }
.bars span { flex: 1; border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.1); transform-origin: bottom; animation: grow .9s cubic-bezier(.2,.8,.2,1) both; }
.bars span:last-child { background: linear-gradient(180deg, var(--brand-3-400), var(--brand)); box-shadow: 0 0 24px color-mix(in srgb, var(--brand) 60%, transparent); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.dash-kpis div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; }
.dash-kpis small { color: #9ea0c2; font-size: .72rem; display: flex; gap: 5px; align-items: center; }
.dash-kpis b { display: block; color: #fff; font-size: 1.2rem; font-family: var(--font-display); }
.dash-kpis em { font-style: normal; font-size: .72rem; color: #4ade80; }
.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(17, 17, 43, .92); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 40px -16px rgba(0,0,0,.7); color: #fff; font-size: .85rem; animation: float 6s ease-in-out infinite; }
.float-card small { display: block; color: #a9abc9; font-size: .72rem; }
.float-card .chip { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--grad); }
.fc-1 { top: -52px; left: -26px; }
.fc-2 { top: 90px; right: -34px; animation-delay: -2s; }
.fc-3 { bottom: -44px; left: 32px; animation-delay: -4s; }

/* ---------- cards ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: border-color .2s, box-shadow .25s, transform .25s; }
.card-hover:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .95rem; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.chip-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); margin-bottom: 18px; }
.chip-icon.grad { background: var(--grad); color: #fff; border: 0; box-shadow: 0 10px 20px -10px rgba(99, 52, 237, .8); }
.chip-icon.sm { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 0; }
.service-card { display: flex; flex-direction: column; }
.service-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.service-card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px dashed var(--line); }
.price-tag { font-size: .82rem; color: var(--muted); }
.price-tag b { color: var(--text); font-size: .95rem; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--bg-muted); color: var(--text-2); border: 1px solid var(--line); }
.tag-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.check-list .icon { color: var(--brand); margin-top: 3px; width: 1.1em; height: 1.1em; }
.check-list.two { grid-template-columns: 1fr 1fr; gap: 12px 24px; }

/* bento / category tiles */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bento > * { grid-column: span 2; }
.bento > .wide { grid-column: span 3; }
.cat-tile { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); padding: 28px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .2s; min-height: 260px; }
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.cat-tile::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tile, var(--brand)) 30%, transparent), transparent 70%); }
.cat-tile ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 20px; position: relative; }
.cat-tile .link-arrow { margin-top: auto; position: relative; }

/* stats band */
.stats-band { display: grid; grid-template-columns: repeat(6, 1fr); border-radius: var(--radius-lg); background: var(--grad); color: #fff; padding: 34px 20px; box-shadow: var(--shadow-lg); }
.stats-band > div { text-align: center; padding: 0 8px; border-right: 1px solid rgba(255,255,255,.2); }
.stats-band > div:last-child { border: 0; }
.stats-band b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; }
.stats-band span { font-size: .82rem; opacity: .85; }

/* process */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: step; position: relative; }
.process::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.step { position: relative; text-align: center; padding: 0 6px; }
.step-num { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--brand); color: var(--brand); font-weight: 800; font-family: var(--font-display); position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--bg); }
.section-soft .step-num { box-shadow: 0 0 0 6px var(--bg-soft); }
.step h3 { font-size: 1.05rem; }
.step p { color: var(--muted); font-size: .9rem; }

/* feature list (vertical steps) */
.vsteps { list-style: none; display: grid; gap: 14px; counter-reset: v; }
.vsteps li { counter-increment: v; display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vsteps li::before { content: counter(v, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; color: var(--brand); min-width: 32px; }

/* projects */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: .88rem; font-weight: 600; color: var(--text-2); cursor: pointer; }
.filter-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.project-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-media { aspect-ratio: 16/10; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.project-card:hover .project-media img { transform: scale(1.04); }
.project-body { padding: 20px 22px 22px; }
.project-body h3 { font-size: 1.12rem; margin-bottom: 4px; }
.project-metrics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.c-violet { background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .c-blue { background: linear-gradient(135deg, var(--brand-3), #0ea5e9); }
.c-teal { background: linear-gradient(135deg, #0d9488, #06b6d4); } .c-orange { background: linear-gradient(135deg, #f97316, #f43f5e); }
.c-pink { background: linear-gradient(135deg, #db2777, #a855f7); } .c-green { background: linear-gradient(135deg, #16a34a, #0d9488); }
.c-indigo { background: linear-gradient(135deg, #4338ca, var(--brand)); } .c-amber { background: linear-gradient(135deg, #d97706, #ea580c); }
.c-violet, .c-blue, .c-teal, .c-orange, .c-pink, .c-green, .c-indigo, .c-amber { --tile: currentColor; }

/* testimonials */
.quote-card { display: flex; flex-direction: column; gap: 16px; }
.quote-card blockquote { margin: 0; font-size: 1.02rem; color: var(--text-2); }
.stars { display: flex; gap: 2px; color: #f59e0b; }
.stars .icon { width: 1em; height: 1em; fill: currentColor; }
.person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person b { display: block; font-size: .95rem; }
.person span { font-size: .82rem; color: var(--muted); }

/* blog */
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-media { aspect-ratio: 16/9; background: var(--bg-muted); overflow: hidden; display: grid; place-items: center; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-card:hover .post-media img { transform: scale(1.04); }
.post-media .ph { color: var(--brand); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; padding: 20px; text-align: center; }
.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-body h3 { font-size: 1.1rem; line-height: 1.35; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.post-meta span { display: inline-flex; align-items: center; gap: 5px; }
.featured-post { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.featured-post .post-media { aspect-ratio: auto; min-height: 320px; height: 100%; }
.featured-post .post-body { padding: 36px; justify-content: center; }
.featured-post h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

/* article */
.prose { font-size: 1.06rem; line-height: 1.8; color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.65rem; margin-top: 2em; color: var(--text); }
.prose h3 { font-size: 1.3rem; margin-top: 1.7em; color: var(--text); }
.prose p { margin: 0; }
.prose > * + p { margin-top: 1.1em; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--brand); }
.prose strong { color: var(--text); }
.prose blockquote { margin: 1.5em 0; padding: 18px 22px; border-left: 4px solid var(--brand); background: var(--brand-soft); border-radius: 0 12px 12px 0; color: var(--text); }
.prose img, .prose video, .prose iframe { border-radius: 14px; max-width: 100%; height: auto; }
.prose iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.prose pre { overflow-x: auto; max-width: 100%; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--bg-muted); color: var(--text); }
.article-hero-img { border-radius: var(--radius-lg); overflow: hidden; margin-top: -60px; position: relative; box-shadow: var(--shadow-lg); background: var(--bg-muted); }
.article-hero-img img { width: 100%; }
.toc { font-size: .9rem; }
.toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--muted); border-left: 2px solid var(--line); }
.toc a:hover { color: var(--brand); border-color: var(--brand); }
.share { display: flex; gap: 8px; }

/* sidebar widgets */
.widget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.widget + .widget { margin-top: 20px; }
.widget h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); margin-bottom: 14px; }
.widget-dark { background: var(--hero-bg); color: #fff; border-color: transparent; position: relative; overflow: hidden; }
.widget-dark::before { content: ""; position: absolute; width: 240px; height: 240px; right: -80px; top: -80px; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%); }
.widget-dark > * { position: relative; }
.widget-dark h3 { color: var(--brand-300); }
.widget-dark p { color: #b8b9d8; }
.facts { list-style: none; display: grid; gap: 12px; font-size: .92rem; }
.facts li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.facts li:last-child { border: 0; padding: 0; }
.facts span { color: var(--muted); }

/* FAQ accordion */
.faq-list { display: grid; gap: 12px; }
.faq { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 650; font-size: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-muted); color: var(--brand); transition: transform .2s; }
.faq[open] summary .plus { transform: rotate(45deg); background: var(--brand); color: #fff; }
.faq[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.faq .answer { padding: 0 22px 20px; color: var(--muted); }
.faq .answer p:last-child { margin: 0; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-lg); }
.plan.popular { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.plan .badge-pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.plan .price { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--text); line-height: 1.1; margin: 10px 0 2px; }
.plan .price small { font-size: .9rem; font-weight: 500; color: var(--muted); }
.plan ul { margin: 20px 0 24px; }
.plan .btn { margin-top: auto; }
.toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-muted); border: 1px solid var(--line); }
.toggle a, .toggle button { padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--muted); border: 0; background: none; cursor: pointer; }
.toggle .on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.save-badge { font-size: .72rem; background: #dcfce7; color: #166534; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.product-block { padding: 34px; border-radius: var(--radius-lg); }
.product-block + .product-block { margin-top: 28px; }
.product-head { display: flex; gap: 18px; align-items: center; margin-bottom: 26px; }
.product-head img { width: 120px; border-radius: 14px; }

/* forms */
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
.field input, .field select, .field textarea, .input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.field .err, .form-error { color: var(--err); font-size: .82rem; margin-top: 6px; }
.form-error { background: color-mix(in srgb, var(--err) 10%, transparent); padding: 10px 14px; border-radius: 10px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.checkbox a { color: var(--brand); text-decoration: underline; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.widget-dark .field input, .widget-dark .field textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #fff; }
.widget-dark .field input::placeholder, .widget-dark .field textarea::placeholder { color: #8e90b4; }
.form-card { padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* alerts / toasts */
.toasts { position: fixed; top: calc(var(--header-h) + 14px); right: 16px; z-index: 150; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: .92rem; animation: slideIn .25s ease; }
.toast.success .icon { color: var(--ok); } .toast.error .icon { color: var(--err); } .toast.info .icon { color: var(--brand); }
.toast button { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--muted); }
.notice { padding: 16px 18px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-ink); display: flex; gap: 12px; align-items: flex-start; }
.notice.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(36px, 6vw, 64px); background: var(--hero-bg); color: #fff; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 300px at 90% 0%, color-mix(in srgb, var(--brand) 60%, transparent), transparent 60%), radial-gradient(400px 300px at 0% 100%, color-mix(in srgb, var(--brand-3) 45%, transparent), transparent 60%); }
.cta-band h2 { color: #fff; max-width: 680px; }
.cta-band p { color: #b8b9d8; max-width: 620px; }
.cta-band .row-between { align-items: center; }

/* logos marquee */
.logos { display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: .75; }
.logos span { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--muted); letter-spacing: -0.01em; }
.logos img { height: 34px; width: auto; filter: grayscale(1); opacity: .8; }

/* case study */
.cs-meta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); margin-top: -44px; position: relative; z-index: 2; box-shadow: var(--shadow); overflow: hidden; }
.cs-meta div { padding: 18px 20px; border-right: 1px solid var(--line); }
.cs-meta div:last-child { border: 0; }
.cs-meta dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cs-meta dd { margin: 2px 0 0; font-weight: 650; }
.cs-nav { display: grid; gap: 4px; align-content: start; align-self: start; }
.cs-nav a { padding: 9px 12px; border-radius: 10px; font-size: .88rem; color: var(--muted); }
.cs-nav a:hover, .cs-nav a.active { background: var(--brand-soft); color: var(--brand-ink); }
.cs-section { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); }
.cs-section:first-child { padding-top: 0; margin-top: 0; border: 0; }
.num-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.num-head span { font-family: var(--font-display); font-weight: 800; color: var(--brand); background: var(--brand-soft); border-radius: 10px; padding: 4px 10px; font-size: .85rem; }
.num-head h2 { font-size: 1.6rem; margin: 0; }
.timeline { position: relative; display: grid; gap: 18px; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--brand), var(--brand-3)); }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -26px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.mini-stats div { background: var(--bg-soft); border-radius: 10px; padding: 10px 12px; }
.mini-stats b { display: block; font-family: var(--font-display); }
.mini-stats span { font-size: .75rem; color: var(--muted); }
.chart-bars { display: flex; align-items: flex-end; gap: 14px; height: 190px; padding-top: 10px; border-bottom: 1px solid var(--line); }
.chart-bars .col { flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 100%; position: relative; }
.chart-bars .a { flex: 1; background: var(--grad); border-radius: 6px 6px 0 0; }
.chart-bars .p { flex: 1; background: var(--line-strong); border-radius: 6px 6px 0 0; }
.chart-x { display: flex; gap: 14px; margin-top: 8px; }
.chart-x span { flex: 1; text-align: center; font-size: .78rem; color: var(--muted); }
.legend { display: flex; gap: 16px; font-size: .8rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.meter { height: 10px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.donut { width: 160px; height: 160px; transform: rotate(-90deg); }

/* jobs */
.job-row { display: flex; align-items: center; gap: 18px; padding: 22px 24px; }
.job-row h3 { margin: 0 0 4px; font-size: 1.1rem; }
.job-row .row { gap: 8px; }
.job-row .btn { margin-left: auto; }

/* contact */
.contact-cards { display: grid; gap: 14px; }
.contact-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; }
.contact-card h3 { font-size: 1rem; margin: 0 0 2px; }
.contact-card a { color: var(--brand); font-weight: 650; word-break: break-word; }
.map-frame { border: 0; width: 100%; height: 380px; border-radius: var(--radius-lg); filter: grayscale(.2); }

/* footer */
.site-footer { background: #07071a; color: #a7a9c7; padding-top: 72px; font-size: .92rem; --line: rgba(255,255,255,.08); }
.site-footer h3, .site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 18px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(var(--cols, 4), minmax(0, 1fr)); gap: 36px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer a:hover { color: #fff; }
.footer-brand p { margin: 16px 0 20px; max-width: 340px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon-sm { margin-top: 4px; color: var(--brand-400); }
.socials { display: flex; gap: 8px; }
.socials a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.socials a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.newsletter { display: flex; gap: 8px; margin-top: 8px; }
.newsletter input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; }
.footer-bottom { margin-top: 56px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-cta { border-radius: 24px; padding: 34px 38px; margin-bottom: 64px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 25%, transparent), color-mix(in srgb, var(--brand-3) 18%, transparent)); border: 1px solid color-mix(in srgb, var(--brand-400) 25%, transparent); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-cta h2 { color: #fff; font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 0 0 6px; }
.footer-cta p { margin: 0; }

/* floating buttons / consent */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 56px; height: 56px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(34,197,94,.8); transition: transform .2s; }
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }
.to-top { position: fixed; right: 22px; bottom: 86px; z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s; }
.to-top.show { opacity: 1; pointer-events: auto; }
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 110; max-width: 440px; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: .9rem; display: none; }
.consent.show { display: block; animation: slideUp .3s ease; }
.consent p { color: var(--muted); }
.consent a { color: var(--brand); text-decoration: underline; }

/* receipts / tables */
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650; background: var(--bg-muted); }
.status.paid { background: #dcfce7; color: #166534; } .status.failed { background: #fee2e2; color: #991b1b; } .status.refunded { background: #fef3c7; color: #92400e; }
.invoice { max-width: 820px; margin: 40px auto; background: #fff; color: #111; padding: 48px; border-radius: 18px; border: 1px solid #e5e7eb; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.pagination a, .pagination span { padding: 9px 15px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: .9rem; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 404 */
.err-code { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 9rem); font-weight: 800; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes slideIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav, .header-actions .hide-md { display: none; }
  .menu-toggle { display: inline-grid; }
  .header-actions { margin-left: auto; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .stats-band { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .stats-band > div:nth-child(3) { border: 0; }
  .fc-1 { left: -6px; } .fc-2 { right: -6px; }
}
@media (max-width: 960px) {
  .split, .with-aside, .with-aside.aside-wide, .with-aside.aside-narrow, .featured-post { grid-template-columns: minmax(0, 1fr); }
  .split > *, .with-aside > * { min-width: 0; }
  .grid-3, .grid-4, .plans { grid-template-columns: 1fr 1fr; }
  .bento > *, .bento > .wide { grid-column: span 3; }
  .process { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .process::before { display: none; }
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-meta div { border-bottom: 1px solid var(--line); }
  .sticky { position: static; }
  .hero-visual { max-width: 560px; margin: 24px auto 0; }
  .article-hero-img { margin-top: 0; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .container { padding: 0 16px; }
  .grid-2, .grid-3, .grid-4, .grid-5, .plans, .form-row, .check-list.two, .mega-links { grid-template-columns: 1fr; }
  .bento > *, .bento > .wide { grid-column: span 6; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .stats-band > div { border: 0; }
  .process { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .topbar .hide-sm, .hide-sm { display: none !important; }
  .fc-1 { left: -6px; } .fc-2 { right: -6px; }
  .hero-page .float-card { display: none; }
  .filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; }
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .job-row { flex-direction: column; align-items: flex-start; }
  .job-row .btn { margin-left: 0; }
  .mini-stats { grid-template-columns: 1fr; }
  .cs-meta { grid-template-columns: 1fr; }
  .btn-lg { padding: 14px 22px; }
  .product-block, .card { padding: 22px; }
  .toasts { left: 16px; right: 16px; }
  .consent { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 14px 16px; font-size: .85rem; }
  .consent p { margin-bottom: 10px; }
}

@media print {
  .site-header, .site-footer, .topbar, .wa-float, .consent, .to-top, .no-print, .announcement { display: none !important; }
  body { background: #fff; color: #000; }
  .invoice { margin: 0; border: 0; padding: 0; }
}

/* helpers added with templates */
[hidden] { display: none !important; }
.toc a.active { color: var(--brand); border-color: var(--brand); }
.hero .post-meta .icon-sm { color: var(--brand-400); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6d88' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
.footer-brand .brand img { height: 44px; }
.site-footer .brand { color: #fff; }
.cat-tile h3, .cat-tile .chip-icon, .cat-tile p { position: relative; }
@media (max-width: 960px) {
  [data-cs], .legal-grid { grid-template-columns: 1fr !important; }
}

/* ---------- home slider & admin-built sections ---------- */
.hero-slider { padding: 0; }
.hero-slider .slides { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Slide height follows the screen: full viewport minus top bar (~36px) and header. */
.hero-slider .slide { grid-area: 1 / 1; min-width: 0; position: relative; isolation: isolate;
  display: flex; align-items: center;
  /* 72px = slider dots/arrows row below the slides */
  min-height: calc(100vh - var(--header-h) - 36px - 72px); min-height: calc(100svh - var(--header-h) - 36px - 72px);
  padding: clamp(24px, 5vh, 56px) 0 clamp(8px, 2vh, 20px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.hero-slider .slide > .container { width: 100%; }
.hero-slider h1, .hero-slider .slide-title { font-size: clamp(2rem, min(4.6vw, 6.5vh), 3.6rem); }
.hero-slider .lead { margin-bottom: 0; }
.hero-slider .hero-actions { margin-top: clamp(16px, 3vh, 28px); }
.hero-slider .hero-trust { margin-top: clamp(14px, 2.5vh, 26px); }
.hero-slider .hero-stats { margin-top: clamp(16px, 3.5vh, 36px); }
/* Short laptop screens (e.g. 1366×768): drop the number boxes so the slide fits one screen. */
@media (max-height: 820px) { .hero-slider .hero-stats { display: none; } }
.hero-slider .hero-visual > img { max-height: calc(100svh - var(--header-h) - 180px); width: auto; margin-left: auto; }
.hero-slider .slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease .3s; }
.hero-slider .slide > .container { transform: translateY(14px); transition: transform .8s ease; }
.hero-slider .slide.is-active > .container { transform: none; }
.hero-slider .slide-title { font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.08; letter-spacing: -.02em; }
.slide-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slide.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,31,.94) 0%, rgba(10,10,31,.78) 45%, rgba(10,10,31,.35) 100%); }
/* Dots & arrows sit in their own row under the slide, so they can never cover the text. */
.slider-controls { position: relative; z-index: 2; height: 72px; padding-bottom: 16px;
  display: flex; align-items: center; justify-content: center; gap: 14px; }
.slider-arrow { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); transition: background .2s, border-color .2s; }
.slider-arrow:hover, .slider-arrow:focus-visible { background: color-mix(in srgb, var(--brand) 55%, transparent); border-color: color-mix(in srgb, var(--brand-400) 80%, transparent); }
.slider-dots { display: flex; gap: 8px; }
/* 24px+ tap target (accessibility), the visible dot is drawn inside it */
.slider-dots { gap: 0; }
.slider-dots button { position: relative; width: 24px; height: 28px; padding: 0; border: 0; cursor: pointer; background: none;
  transition: width .3s ease; }
.slider-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 99px;
  transform: translate(-50%, -50%); background: rgba(255,255,255,.3); transition: width .3s ease, background .3s ease; }
.slider-dots button[aria-current="true"] { width: 40px; }
.slider-dots button[aria-current="true"]::before { width: 28px; background: var(--brand-400); }
.split-reverse > :first-child { order: 2; }
.section-img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow-lg); }
.card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.prose-sm p { margin: 0 0 1em; } .prose-sm ul { padding-left: 1.2em; }
.video-embed { position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: #000; box-shadow: var(--shadow-lg); }
.video-embed img, .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand) 25%, transparent); transition: transform .2s; }
.video-play:hover, .video-play:focus-visible { transform: scale(1.08); }
.video-play .icon { width: 32px; height: 32px; margin-left: 4px; }
@media (max-width: 960px) {
  .split-reverse > :first-child { order: 0; }
  .slide.has-bg::before { background: rgba(10,10,31,.82); }
  /* Tablets & phones: the animated picture sits under the text (smaller); the number boxes move to the stats band below. */
  .hero-slider .hero-visual { display: block; width: 100%; max-width: 440px; margin: 22px auto 0; }
  .hero-slider .hero-stats { display: none; }
  .hero-slider .slide { min-height: 0; }
}
@media (max-width: 640px) {
  .slider-arrow { width: 34px; height: 34px; }
}

/* ---------- animated hero widgets (templates/partials/widgets/) ---------- */
.icon-xs { width: .85em; height: .85em; flex-shrink: 0; }
.wg-wrap { position: relative; }
.wg { position: relative; border-radius: 22px; padding: 22px; color: #d6d7ee; font-size: .88rem;
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.wg .dash-head b { display: inline-flex; align-items: center; gap: 8px; }
.live.off { color: #fcd34d; background: rgba(245,158,11,.12); }
.live.off::before { background: #f59e0b; }
.dash-kpis.k2 { grid-template-columns: 1fr 1fr; }

/* entry: everything with --i fades up one after another */
.wg-wrap [style*="--i"] { animation: wgIn .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .15s + .15s); }
@keyframes wgIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes wgPop { from { opacity: 0; transform: scale(.4); } }
@keyframes wgFill { from { transform: scaleX(0); } }
@keyframes wgFillY { from { transform: scaleY(0); } }
@keyframes wgSpin { to { transform: rotate(360deg); } }
@keyframes wgDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes wgRing { from { stroke-dashoffset: 100; } }
@keyframes wgDraw { from { stroke-dashoffset: 600; } }
@keyframes wgDrawP { from { stroke-dashoffset: 1; } }
@keyframes wgGlow { 50% { box-shadow: 0 0 80px color-mix(in srgb, var(--brand) 95%, transparent); } }
@keyframes wgPulseRing { 70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); } }
@keyframes wgScan { from { transform: translateY(-60px); } to { transform: translateY(440px); } }
@keyframes wgBob { 50% { transform: translateY(-8px); } }
@keyframes wgFn { from { opacity: 0; transform: scaleX(.3); } }
@keyframes wgTicker {
  0%, 13% { transform: translateY(0); } 16.6%, 30% { transform: translateY(-62px); } 33.3%, 46% { transform: translateY(-124px); }
  50%, 63% { transform: translateY(-186px); } 66.6%, 80% { transform: translateY(-248px); } 83.3%, 96% { transform: translateY(-310px); }
  100% { transform: translateY(0); } }

/* slider: replay a slide's widget animation every time it becomes active */
.hero-slider .slide:not(.is-active) .wg-wrap, .hero-slider .slide:not(.is-active) .wg-wrap * { animation: none !important; }

/* chips */
.wg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.wg-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: .72rem;
  background: color-mix(in srgb, var(--brand) 18%, transparent); border: 1px solid color-mix(in srgb, var(--brand-400) 30%, transparent); color: var(--brand-200); }

/* devices: browser + phone */
.wg-browser { padding: 0; overflow: hidden; margin-right: 112px; }
.wg-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.wg-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #f87171; }
.wg-bar > i:nth-child(2) { background: #fbbf24; } .wg-bar > i:nth-child(3) { background: #4ade80; }
.wg-url { margin-left: 10px; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  background: rgba(0,0,0,.25); font-size: .72rem; color: #a9abc9; white-space: nowrap; overflow: hidden; }
.wg-site { padding: 16px; }
.wg-sk-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.wg-sk-nav b { width: 60px; height: 10px; border-radius: 4px; background: var(--grad); margin-right: auto; }
.wg-sk-nav span { width: 34px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); }
.wg-sk-hero b { display: block; height: 12px; width: 80%; border-radius: 4px; margin-bottom: 8px; background: rgba(255,255,255,.22); transform-origin: left; animation: wgFill 1s ease both .5s; }
.wg-sk-hero b.short { width: 55%; animation-delay: .8s; }
.wg-sk-btn { display: inline-block; width: 72px; height: 18px; border-radius: 6px; margin-top: 6px; background: var(--grad); }
.wg-sk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.wg-sk-cards span { height: 46px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.wg-scores { display: flex; justify-content: space-around; padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.wg-ring { position: relative; display: grid; justify-items: center; gap: 4px; font-size: .68rem; color: #a9abc9; }
.wg-ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.wg-ring circle { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 3; }
.wg-ring circle.v { stroke: #4ade80; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v));
  animation: wgRing 1.4s ease both; animation-delay: calc(var(--i) * .2s + .6s); }
.wg-ring b { position: absolute; top: 17px; color: #fff; font-size: .85rem; }
.wg-phone { position: absolute; right: 0; bottom: -34px; width: 132px; height: 252px; padding: 20px 8px 8px; border-radius: 24px;
  background: #0d0d24; border: 6px solid #23234a; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); animation: float 6s ease-in-out infinite; }
.wg-notch { position: absolute; top: 6px; left: 50%; width: 40px; height: 6px; border-radius: 4px; background: #23234a; transform: translateX(-50%); }
.wg-app-head { display: flex; gap: 5px; align-items: center; margin-bottom: 8px; font-size: .66rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; }
.wg-app-row { display: flex; gap: 6px; align-items: center; padding: 6px; margin-bottom: 6px; border-radius: 8px; background: rgba(255,255,255,.06); }
.wg-app-row > span { width: 22px; height: 22px; border-radius: 6px; background: var(--grad); flex-shrink: 0; }
.wg-app-row div { flex: 1; }
.wg-app-row b { display: block; height: 5px; width: 80%; margin-bottom: 4px; border-radius: 3px; background: rgba(255,255,255,.3); }
.wg-app-row i { display: block; height: 4px; width: 55%; border-radius: 3px; background: rgba(255,255,255,.12); }

/* campaign: funnel + live leads ticker */
.wg-funnel { display: grid; gap: 8px; }
.wg-wrap .wg-fn { display: flex; justify-content: space-between; align-items: center; width: var(--w); min-width: 170px; margin: 0 auto;
  padding: 9px 12px; border-radius: 10px; font-size: .8rem; color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 60%, transparent), color-mix(in srgb, var(--brand-3) 50%, transparent)); animation: wgFn .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .2s + .2s); }
.wg-fn b { font-family: var(--font-display); }
.wg-ticker { position: absolute; top: auto; bottom: -44px; left: -28px; right: auto; width: 240px; height: 62px; overflow: hidden; z-index: 2; }
.wg-ticker-track { animation: wgTicker 15s cubic-bezier(.7,0,.3,1) infinite 1.5s; }
.wg-ticker .wg-lead { position: relative; top: auto; right: auto; left: auto; bottom: auto; height: 56px; margin-bottom: 6px; animation: none; }

/* chat (AI, contact, FAQ) */
.wg-msgs { display: grid; gap: 8px; }
.wg-msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: .8rem; line-height: 1.45; color: #e4e5f7;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.wg-msg.me { justify-self: end; color: #fff; border: 0; border-bottom-right-radius: 4px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.wg-msg.bot { justify-self: start; border-bottom-left-radius: 4px; }
.wg-wrap .wg-msg { animation: wgIn .5s ease both; animation-delay: calc(var(--i) * .9s + .3s); }
.wg-wrap .wg-msg[data-late] { animation-delay: calc(var(--i) * .9s + .8s); }
.wg-typing { justify-self: start; display: inline-flex; gap: 4px; padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,.07); }
.wg-wrap .wg-typing { animation-delay: calc(var(--i) * .9s + .3s); }
.wg-typing i { width: 6px; height: 6px; border-radius: 50%; background: #a9abc9; animation: wgDot 1.2s infinite; }
.wg-typing i:nth-child(2) { animation-delay: .15s; } .wg-typing i:nth-child(3) { animation-delay: .3s; }

/* SEO rankings */
.wg-kw { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; font-size: .82rem; background: rgba(255,255,255,.05); }
.wg-kw span { flex: 1; display: flex; gap: 6px; align-items: center; color: #e4e5f7; }
.wg-kw s { color: #f87171; font-size: .75rem; }
.wg-kw b { color: #4ade80; font-family: var(--font-display); animation: wgPop .5s both; animation-delay: calc(var(--i) * .3s + .8s); }

/* services: orbit of categories */
.wg-orbit { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.wg-orbit::before { content: ""; position: absolute; inset: 20px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--brand-400) 35%, transparent); }
.wg-orbit-ring { position: absolute; inset: 0; animation: wgSpin 32s linear infinite; }
.wg-orbit-item { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(17,17,43,.95); border: 1px solid color-mix(in srgb, var(--brand-400) 45%, transparent); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 90%, transparent);
  transform: rotate(var(--a)) translateY(-110px) rotate(calc(-1 * var(--a))); }
.wg-orbit-item svg { animation: wgSpin 32s linear infinite reverse; }
.wg-orbit-core { position: absolute; inset: 82px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 2px; color: #fff;
  background: var(--grad); box-shadow: 0 0 50px color-mix(in srgb, var(--brand) 60%, transparent); animation: wgGlow 3s ease-in-out infinite; }
.wg-orbit-core .icon { width: 28px; height: 28px; }
.wg-orbit-core small { font-size: .68rem; opacity: .9; }
.wg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.wg-tiles > div { text-align: center; padding: 12px 6px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.wg-tiles b { display: block; color: #fff; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; }
.wg-tiles small { color: #9ea0c2; font-size: .72rem; }

/* capabilities: status board */
.wg-status { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.wg-status-name { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; color: #e4e5f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-uptime { display: flex; gap: 2px; }
.wg-uptime i { width: 4px; height: 16px; border-radius: 2px; background: #22c55e; opacity: .85; }
.wg-uptime i.warn { background: #f59e0b; }
.wg-uptime i:last-child { animation: pulse 1.6s infinite; }
.wg-status em { width: 40px; text-align: right; font-style: normal; font-size: .72rem; color: #4ade80; }
.wg-spark { margin-top: 12px; }
.wg-spark svg { width: 100%; height: 60px; }
.wg-spark path { fill: none; stroke: var(--brand-400); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 600; animation: wgDraw 2.2s ease both .6s; }
.wg-spark small { color: #9ea0c2; font-size: .72rem; }

/* checklists, progress, stages */
.wg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wg-checks li { display: flex; align-items: center; gap: 10px; color: #e4e5f7; font-size: .86rem; }
.wg-checks li em { margin-left: auto; font-style: normal; font-size: .72rem; color: #a9abc9; white-space: nowrap; }
.wg-tick { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #4ade80;
  background: rgba(34,197,94,.15); border: 1px solid rgba(74,222,128,.35); }
.wg-wrap .wg-checks .wg-tick { animation: wgPop .45s both; animation-delay: calc(var(--i) * .35s + .55s); }
.wg-progress { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 16px; font-size: .75rem; color: #a9abc9; }
.wg-progress b { color: #fff; }
.wg-progress div { flex-basis: 100%; height: 6px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); }
.wg-progress i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--grad); transform-origin: left; animation: wgFill 1.8s ease both .5s; }
.wg-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 18px; }
.wg-stages span { display: grid; justify-items: center; gap: 6px; font-size: .7rem; color: #a9abc9; text-align: center; }
.wg-stages span i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #4ade80;
  background: rgba(34,197,94,.15); border: 1px solid rgba(74,222,128,.35); }
.wg-stages span.now { color: #fff; }
.wg-stages span.now i { color: #fff; border: 0; background: var(--grad); animation: wgPulseRing 2s infinite; }

/* capability: API terminal */
.wg-code { margin: 0; padding: 14px; border-radius: 12px; overflow: hidden; white-space: pre; color: #d6d7ee;
  background: rgba(0,0,0,.35); font: 500 .76rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.wg-code span { display: inline-block; }
.wg-code em { font-style: normal; color: #4ade80; }
.wg-code u { text-decoration: none; color: var(--brand-3-300); }
.wg-code s { text-decoration: none; color: #fcd34d; }
.wg-code .ok { color: #4ade80; }

/* portfolio: stack of real project shots */
.wg-stack { position: relative; height: 380px; }
.wg-wrap .wg-shot { position: absolute; left: calc(var(--i) * 7%); top: calc(var(--i) * 40px); width: 78%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 18px; background: var(--grad); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 60px -24px rgba(0,0,0,.85);
  animation: wgIn .8s both, wgBob 6s ease-in-out infinite; animation-delay: calc(var(--i) * .2s), calc(var(--i) * -1.5s + 1s); }
.wg-shot img { width: 100%; height: 100%; object-fit: cover; }
.wg-shot-name { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 1.4rem var(--font-display); }
.wg-shot-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; color: #fff; background: linear-gradient(transparent, rgba(5,5,20,.92)); }
.wg-shot-meta b { display: block; font-size: .88rem; }
.wg-shot-meta small { font-size: .7rem; color: #c4c5e0; }

/* blog: latest posts */
.wg-post { display: flex; gap: 12px; align-items: center; padding: 10px; margin-bottom: 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.wg-post > img, .wg-post-ph { width: 64px; height: 48px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.wg-post-ph { display: grid; place-items: center; color: #fff; background: var(--grad); }
.wg-post > div { flex: 1; min-width: 0; }
.wg-post b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #fff; font-size: .82rem; line-height: 1.35; }
.wg-post small { color: #9ea0c2; font-size: .7rem; }
.wg-read { display: block; position: relative; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.08); }
.wg-read::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: calc(70% - var(--i) * 25%); background: var(--grad);
  transform-origin: left; animation: wgFill 2.4s ease both; animation-delay: calc(var(--i) * .4s + .6s); }

/* careers: open jobs */
.wg-job { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.wg-job-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; color: var(--brand-300); background: color-mix(in srgb, var(--brand) 20%, transparent); }
.wg-job > div { flex: 1; min-width: 0; }
.wg-job b { display: block; color: #fff; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-job small { color: #9ea0c2; font-size: .72rem; }
.wg-job em { padding: 4px 9px; border-radius: 999px; font-style: normal; font-size: .7rem; white-space: nowrap; color: #86efac; background: rgba(34,197,94,.14); }

/* job + about: vertical journeys */
.wg-steps, .wg-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.wg-steps::before, .wg-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; width: 2px; transform-origin: top;
  background: linear-gradient(var(--brand), var(--brand-3)); animation: wgFillY 2s ease both .3s; }
.wg-steps::before { left: 15px; } .wg-timeline::before { left: 27px; }
.wg-steps li, .wg-timeline li { position: relative; display: flex; gap: 12px; align-items: center; }
.wg-steps li > span { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem;
  background: #15153a; border: 2px solid var(--brand); }
.wg-steps li:last-child > span { background: var(--grad); border-color: transparent; animation: wgPulseRing 2s infinite; }
.wg-steps b, .wg-timeline strong { display: block; color: #fff; font-size: .88rem; }
.wg-steps small, .wg-timeline small { color: #9ea0c2; font-size: .74rem; }
.wg-timeline { margin-bottom: 4px; gap: 12px; }
.wg-timeline li { align-items: flex-start; }
.wg-timeline li > b { position: relative; z-index: 1; width: 56px; flex-shrink: 0; padding: 4px 0; text-align: center; border-radius: 8px;
  background: #15153a; border: 1px solid color-mix(in srgb, var(--brand-400) 50%, transparent); color: var(--brand-300); font: 700 .72rem var(--font-display); }

/* case study: growth chart */
.wg-chart svg { width: 100%; height: 150px; overflow: visible; }
.wg-chart .area { fill: url(#wgfill); animation: wgIn 1s both 1.2s; }
.wg-chart .line { fill: none; stroke: var(--brand-400); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: wgDrawP 2.2s ease both .3s;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--brand-400) 70%, transparent)); }
.wg-chart-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: .68rem; color: #9ea0c2; }

/* subscriptions: app grid */
.wg-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wg-apps > div { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; text-align: center; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.wg-apps span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--grad);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 90%, transparent); }
.wg-apps > div:nth-child(odd) span { animation: float 5s ease-in-out infinite; }
.wg-apps b { color: #fff; font-size: .78rem; line-height: 1.25; }
.wg-apps small { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: #86efac; }
.wg-apps small i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 1.6s infinite; }

/* legal: document scan */
.wg-doc { overflow: hidden; }
.wg-scan { position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--brand) 25%, transparent), transparent); animation: wgScan 4s ease-in-out infinite; }

@media (max-width: 960px) {
  .wg-wrap .float-card, .wg-phone, .wg-ticker { display: none; }
  .wg-browser { margin-right: 0; }
}
@media (max-width: 640px) {
  .wg { padding: 16px; }
  .wg-uptime { display: none; }
  .wg-stack { height: 300px; }
  .wg-apps { grid-template-columns: 1fr 1fr; }
}

/* ---------- trust bar under the home hero ---------- */
.trust-strip { padding: 28px 0 8px; }
.trust-bar { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; padding: 16px 22px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.trust-rating { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.trust-avatars { display: flex; }
.trust-avatars span { width: 36px; height: 36px; margin-left: -10px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: #fff; background: var(--grad); border: 2px solid var(--surface); }
.trust-avatars span:first-child { margin-left: 0; }
.trust-avatars span:nth-child(2) { background: linear-gradient(135deg, #06b6d4, var(--brand-3)); }
.trust-avatars span:nth-child(3) { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.trust-avatars span:nth-child(4) { background: linear-gradient(135deg, #10b981, #059669); }
.trust-avatars img { width: 100%; height: 100%; object-fit: cover; }
.trust-stars { display: flex; align-items: center; gap: 2px; color: #f59e0b; }
.trust-stars .icon-sm { fill: currentColor; }
.trust-stars b { margin-left: 6px; color: var(--text); font-size: .9rem; }
.trust-rating small { color: var(--muted); font-size: .78rem; }
.trust-text { flex: 1 1 260px; margin: 0; padding-left: 26px; border-left: 1px solid var(--line); color: var(--text); font-weight: 500; font-size: .95rem; }
.trust-countries { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.trust-countries li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; font-size: .78rem; font-weight: 500;
  color: var(--text); background: var(--bg-soft); border: 1px solid var(--line); }
.trust-countries li span { display: grid; place-items: center; width: 24px; height: 18px; border-radius: 5px; font-size: .62rem; font-weight: 700;
  color: var(--brand-ink); background: var(--brand-soft); }
@media (max-width: 960px) {
  .trust-text { flex-basis: 100%; order: 3; padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .trust-bar { padding: 16px; }
  .trust-countries li { font-size: .74rem; }
}

/* ---------- "Our working process" with animated mini-widgets ----------
   Only transform/opacity are animated (GPU, no layout work). Animations are paused until the
   step scrolls into view (.reveal → .in), and the base state is the finished state, so with
   reduced motion (animations off) everything is simply visible. */
.process-anim { list-style: none; margin: 0; padding: 0; }
.process-anim::after { content: ""; position: absolute; top: 166px; left: 10%; right: 10%; height: 2px; border-radius: 2px; z-index: 0;
  background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.2,.8,.2,1) .3s; }
.process-anim:has(.step.in)::after { transform: scaleX(1); }
.process-anim::before { top: 166px; z-index: 0; }
.process-anim .step { z-index: 1; display: flex; flex-direction: column; align-items: center; transition-delay: calc(var(--i) * .12s); }
.process-anim .step-num { position: relative; z-index: 1; margin-top: 18px; }
.process-anim .step:hover .pw { transform: translateY(-4px); box-shadow: var(--shadow); }

.pw { position: relative; width: 100%; height: 120px; padding: 12px; border-radius: 16px; text-align: left; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: .72rem; color: var(--muted);
  transition: transform .25s, box-shadow .25s; contain: layout paint; }
.pw *, .pw *::before, .pw *::after { animation-play-state: paused; }
.step.in .pw *, .step.in .pw *::before, .step.in .pw *::after { animation-play-state: running; }
.pw .icon-xs { width: 12px; height: 12px; }

@keyframes pwGrow { from { transform: scaleX(0); } }
@keyframes pwGrowY { from { transform: scaleY(.15); } }
@keyframes pwIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes pwPop { 0% { opacity: 0; transform: scale(.3); } 70% { transform: scale(1.15); } }
@keyframes pwBlink { 50% { opacity: 0; } }
@keyframes pwSweep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--sweep, 120px)); } }
@keyframes pwPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .4; } }
@keyframes pwBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 1 · discover: search bar typing + results */
.pw-search { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 99px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--brand); }
.pw-type { display: block; width: 58%; height: 6px; border-radius: 3px; background: var(--brand-300); transform-origin: left;
  animation: pwGrow 1.2s steps(9, end) .3s both; }
.pw-caret { width: 2px; height: 12px; background: var(--brand); animation: pwBlink 1s step-end infinite; }
.pw-results { display: grid; gap: 6px; margin-top: 10px; }
.pw-results span { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; animation: pwIn .5s ease both; }
.pw-results span:nth-child(1) { animation-delay: 1.4s; } .pw-results span:nth-child(2) { animation-delay: 1.6s; } .pw-results span:nth-child(3) { animation-delay: 1.8s; }
.pw-results em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-results i { display: block; height: 6px; width: var(--w); border-radius: 3px; background: var(--grad); transform-origin: left; animation: pwGrow .8s ease both; animation-delay: inherit; }

/* 2 · plan: gantt bars + moving "today" line */
.pw-gantt { position: relative; display: grid; gap: 7px; padding-top: 4px; }
.pw-gantt i { display: block; height: 10px; width: var(--w); margin-left: var(--x); border-radius: 5px; background: var(--grad);
  opacity: .9; transform-origin: left; animation: pwGrow .8s cubic-bezier(.2,.8,.2,1) both; }
.pw-gantt i:nth-child(2) { animation-delay: .25s; opacity: .75; } .pw-gantt i:nth-child(3) { animation-delay: .5s; opacity: .6; }
.pw-gantt i:nth-child(4) { animation-delay: .75s; opacity: .45; }
.pw-today { position: absolute; top: 0; bottom: -4px; left: 30%; width: 2px; border-radius: 2px; background: var(--warn);
  --sweep: 70px; animation: pwSweep 5s ease-in-out 1.2s infinite; }
.pw-legend { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* 3 · execute: code typing + build bar */
.pw-code { position: relative; display: grid; gap: 7px; padding: 8px; border-radius: 10px; background: #0f1024; }
.pw-code i { display: block; height: 6px; width: var(--w); margin-left: var(--x, 0); border-radius: 3px; transform-origin: left;
  background: var(--brand-400); animation: pwGrow .6s steps(6, end) both; }
.pw-code i:nth-child(2) { background: #4ade80; animation-delay: .5s; } .pw-code i:nth-child(3) { background: #fcd34d; animation-delay: 1s; }
.pw-code i:nth-child(4) { background: var(--brand-3-400); animation-delay: 1.5s; }
.pw-code .pw-caret { position: absolute; right: 12px; bottom: 8px; height: 10px; background: #fff; }
.pw-build { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-top: 9px; }
.pw-build div { height: 6px; border-radius: 3px; background: var(--bg-muted); overflow: hidden; }
.pw-build div i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: left;
  animation: pwGrow 2.6s cubic-bezier(.4,0,.2,1) 1.6s both; }

/* 4 · deliver: checklist ticks + live badge */
.pw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pw-checks li { display: flex; align-items: center; gap: 7px; color: var(--text); font-weight: 500; animation: pwIn .4s ease both; }
.pw-checks li span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--ok);
  animation: pwPop .45s ease both; animation-delay: inherit; }
.pw-checks li:nth-child(1) { animation-delay: .3s; } .pw-checks li:nth-child(2) { animation-delay: .8s; } .pw-checks li:nth-child(3) { animation-delay: 1.3s; }
.pw-live { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 99px;
  font-size: .68rem; color: #fff; background: var(--grad); animation: pwPop .5s ease 1.8s both, pwBob 2.4s ease-in-out 2.4s infinite; }

/* 5 · support: chat + uptime bars */
.pw-chat { display: grid; gap: 5px; }
.pw-chat span { max-width: 88%; padding: 5px 9px; border-radius: 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: pwIn .45s ease both; }
.pw-chat .me { justify-self: end; color: #fff; background: var(--grad); border-bottom-right-radius: 3px; animation-delay: .3s; }
.pw-chat .bot { justify-self: start; color: var(--text); background: var(--bg-muted); border-bottom-left-radius: 3px; animation-delay: 1.1s; }
.pw-uptime { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text); font-weight: 600; }
.pw-uptime > b { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pwPulse 1.8s ease-in-out infinite; }
.pw-uptime span { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-left: auto; }
.pw-uptime span i { display: block; width: 4px; height: var(--h); border-radius: 2px; background: var(--ok); opacity: .75; transform-origin: bottom;
  animation: pwGrowY .5s ease both; }
.pw-uptime span i:nth-child(2n) { animation-delay: .1s; } .pw-uptime span i:nth-child(3n) { animation-delay: .2s; }

@media (max-width: 960px) {
  .process-anim::after, .process-anim::before { display: none; }
}
@media (max-width: 640px) {
  /* phones: swipeable row instead of a 1500px tall column; next card peeks in */
  .process-anim { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .process-anim::-webkit-scrollbar { display: none; }
  .process-anim .step { flex: 0 0 78%; scroll-snap-align: center; }
}

/* ---------- rendering performance ----------
   Sections below the first screen are laid out only when they come near the viewport;
   slides 2+ are skipped until the slider first moves. Saves a lot of work on phones. */
main > .section, main > .section-sm, main > .trust-strip { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.hero-slider .slide:not(.is-active):not(.seen) { content-visibility: hidden; }

/* ---------- home "numbers" band with animated mini-widgets ----------
   Same rules as the process widgets: transform/opacity only, paused until the tile is in view. */
.stats-anim { padding: 26px 14px; }
.stats-anim .st { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px;
  border-right: 1px solid rgba(255,255,255,.2); transition-delay: calc(var(--i) * .08s); }
.stats-anim .st:last-child { border: 0; }
.stats-anim .st b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.stats-anim .st span { font-size: .82rem; opacity: .85; }
.sw { position: relative; display: grid; place-items: center; width: 100%; height: 50px; margin-bottom: 10px; color: #fff; }
.sw *, .sw *::before, .sw *::after { animation-play-state: paused; }
.st.in .sw *, .st.in .sw *::before, .st.in .sw *::after { animation-play-state: running; }
.sw .icon-xs { width: 11px; height: 11px; }
@keyframes swPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes swSpin { to { transform: rotate(360deg); } }
@keyframes swRing { from { stroke-dashoffset: 100; } }

/* clients: avatars + stars */
.sw-avatars { display: flex; }
.sw-avatars i { width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; display: grid; place-items: center; font: 700 .58rem var(--font);
  font-style: normal; color: var(--brand-ink); background: #fff; border: 2px solid rgba(255,255,255,.5); animation: pwPop .45s ease both; }
.sw-avatars i:first-child { margin-left: 0; }
.sw-avatars i:nth-child(2) { animation-delay: .15s; } .sw-avatars i:nth-child(3) { animation-delay: .3s; } .sw-avatars i:nth-child(4) { animation-delay: .45s; }
.sw-stars { display: flex; gap: 1px; margin-top: 3px; color: #fde68a; }
.sw-stars .icon-xs { fill: currentColor; animation: pwPop .35s ease both; }
.sw-stars .icon-xs:nth-child(2) { animation-delay: .7s; } .sw-stars .icon-xs:nth-child(3) { animation-delay: .8s; }
.sw-stars .icon-xs:nth-child(4) { animation-delay: .9s; } .sw-stars .icon-xs:nth-child(5) { animation-delay: 1s; }
.sw-stars .icon-xs:nth-child(1) { animation-delay: .6s; }
.sw-clients { grid-template-rows: auto auto; }

/* projects: growing bars */
.sw-bars { display: flex; align-items: flex-end; gap: 4px; height: 42px; }
.sw-bars i { display: block; width: 7px; height: var(--h); border-radius: 3px 3px 1px 1px; background: rgba(255,255,255,.55); transform-origin: bottom;
  animation: pwGrowY .7s cubic-bezier(.2,.8,.2,1) both; }
.sw-bars i:last-child { background: #fff; }
.sw-bars i:nth-child(2) { animation-delay: .08s; } .sw-bars i:nth-child(3) { animation-delay: .16s; } .sw-bars i:nth-child(4) { animation-delay: .24s; }
.sw-bars i:nth-child(5) { animation-delay: .32s; } .sw-bars i:nth-child(6) { animation-delay: .4s; } .sw-bars i:nth-child(7) { animation-delay: .48s; }

/* team: role chips */
.sw-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 130px; }
.sw-roles i { padding: 2px 7px; border-radius: 99px; font: 600 .62rem var(--font); font-style: normal; color: #fff;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); animation: pwIn .4s ease both; }
.sw-roles i:nth-child(2) { animation-delay: .15s; } .sw-roles i:nth-child(3) { animation-delay: .3s; } .sw-roles i:nth-child(4) { animation-delay: .45s; }

/* years: timeline */
.sw-years { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 150px; font: 600 .62rem var(--font); }
.sw-years em { font-style: normal; opacity: .85; }
.sw-years b { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.sw-years b i { position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: left; animation: pwGrow 1.4s cubic-bezier(.4,0,.2,1) .2s both; }

/* countries: spinning globe + ping rings */
.sw-globe { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.sw-globe .icon { width: 30px; height: 30px; animation: swSpin 14s linear infinite; }
.sw-globe i { position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); animation: swPing 2.4s ease-out infinite; }
.sw-globe i + i { animation-delay: 1.2s; }

/* satisfaction: ring fills to the value */
.sw-ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.sw-ring circle { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3.2; }
.sw-ring circle.v { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v));
  animation: swRing 1.6s cubic-bezier(.4,0,.2,1) .2s both; }

@media (max-width: 1100px) {
  .stats-anim .st:nth-child(3) { border: 0; }
}
@media (max-width: 640px) {
  .stats-anim .st { border: 0; }
  .sw { height: 44px; margin-bottom: 6px; }
}

/* ---------- quick enquiry band (home, under the hero) ---------- */
.lead-band { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px 40px;
  align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); color: #fff; background: var(--hero-bg);
  box-shadow: var(--shadow-lg); }
.lead-band::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px 260px at 0% 0%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%),
              radial-gradient(420px 260px at 100% 100%, color-mix(in srgb, var(--brand-3) 45%, transparent), transparent 70%); }
.lead-band h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .4em; }
.lead-band p { color: #b8b9d8; margin: 0; }
.lead-band .eyebrow { color: var(--brand-300); }
.lead-band-points { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: #d6d7ee; }
.lead-band-points li { display: inline-flex; align-items: center; gap: 6px; }
.lead-band-points .icon-sm { color: var(--brand-400); }
.lead-band-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-band-form .lf { display: grid; gap: 5px; }
.lead-band-form label { font-size: .76rem; font-weight: 600; color: #c4c5e0; }
.lead-band-form input, .lead-band-form select { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: .95rem;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); outline: none; transition: border-color .15s, background .15s; }
.lead-band-form select option { color: #111; }
.lead-band-form input::placeholder { color: #8e90b4; }
.lead-band-form input:focus, .lead-band-form select:focus { border-color: var(--brand-400); background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); }
.lead-band-form .btn { grid-column: 1 / -1; height: 48px; justify-content: center; }

/* ---------- moving client-logo strip ---------- */
.logo-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; width: max-content; animation: logoScroll 32s linear infinite; }
.logo-track .logos { flex-wrap: nowrap; justify-content: flex-start; padding-right: 48px; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logoScroll { to { transform: translateX(-50%); } }


@media (max-width: 960px) {
  .lead-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lead-band-form { grid-template-columns: 1fr; }
}

/* ---------- header dropdown (admin → Menu links → kind "Dropdown") ---------- */
.has-dd { position: relative; }
.has-dd > button .icon-sm { transition: transform .2s; }
.has-dd.open > button .icon-sm { transform: rotate(180deg); }
.dd { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 95; min-width: 280px; max-width: 360px; padding: 8px; display: grid; gap: 2px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(20, 10, 60, .35);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .18s, transform .18s, visibility 0s linear .18s; }
.has-dd.open .dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s, transform .18s; }
.dd a { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--text); font-size: .9rem; }
.dd a:hover, .dd a:focus-visible { background: var(--bg-muted); }
.dd a .chip { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; color: var(--brand); background: var(--brand-soft); }
.dd a b { display: block; font-weight: 600; }
.dd a small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.dd .dd-all { justify-content: space-between; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
  color: var(--brand); font-weight: 600; }

/* ---------- project mock-ups (projects without a screenshot) ----------
   Everything is sized in container units, so the same mock-up works in a small card and on the detail page. */
.project-media { container-type: size; }
.c-violet { --pv: #7c3aed; } .c-blue { --pv: #2563eb; } .c-teal { --pv: #0d9488; } .c-orange { --pv: #f97316; }
.c-pink { --pv: #db2777; } .c-green { --pv: #16a34a; } .c-indigo { --pv: #4338ca; } .c-amber { --pv: #d97706; }
.pv { position: absolute; inset: 0; display: grid; place-items: end center; overflow: hidden; color: #1a1b2e; font-family: var(--font); }
.pv::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60cqw 50cqh at 85% 0%, rgba(255,255,255,.28), transparent 70%); }
.pv i, .pv b, .pv em, .pv span { display: block; font-style: normal; }
.pv .s { width: 60% !important; opacity: .6; }
.project-card .pv > * { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .pv > * { transform: translateY(-1.6cqh); }

/* browser */
.pv-browser { position: relative; width: 84cqw; height: 80cqh; display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border-radius: 2cqw 2cqw 0 0; box-shadow: 0 0 0 .3cqw rgba(255,255,255,.35), 0 4cqw 8cqw -2cqw rgba(0,0,0,.5); }
.pv-bar { display: flex; align-items: center; gap: .9cqw; height: 7.5cqh; padding: 0 2cqw; background: #eef0f6; flex-shrink: 0; }
.pv-bar > i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #fb7185; }
.pv-bar > i:nth-child(2) { background: #fbbf24; } .pv-bar > i:nth-child(3) { background: #34d399; }
.pv-bar > span { flex: 1; margin-left: 2cqw; max-width: 46cqw; height: 4.4cqh; padding-left: 1.6cqw; border-radius: 3cqh; background: #fff;
  font-size: 1.9cqw; line-height: 4.4cqh; color: #8b8da6; white-space: nowrap; overflow: hidden; }
.pv-page { flex: 1; display: flex; flex-direction: column; gap: 2.6cqh; padding: 2.6cqh 3cqw; min-height: 0; }
.pv-nav { display: flex; align-items: center; gap: 2.4cqw; flex-shrink: 0; }
.pv-nav b { font: 800 2.5cqw/1 var(--font-display); color: var(--pv, #7c3aed); white-space: nowrap; }
.pv-nav i { width: 6cqw; height: 1.2cqh; border-radius: 1cqh; background: #e4e6ef; }
.pv-nav i:first-of-type { margin-left: auto; }
.pv-nav em { width: 9cqw; height: 4.2cqh; border-radius: 1.2cqw; background: var(--pv, #7c3aed); }
.pv-nav .pv-cart { width: 4.6cqh; height: 4.6cqh; border-radius: 50%; position: relative; }
.pv-nav .pv-cart::after { content: "2"; position: absolute; top: -1cqh; right: -1cqh; width: 3cqh; height: 3cqh; border-radius: 50%;
  background: #f43f5e; color: #fff; font: 700 1.8cqh/3cqh var(--font); text-align: center; }
.pv-row { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.2cqw; min-height: 0; }
.pv-col { display: grid; gap: 1.6cqh; align-content: start; }

/* hero / promo blocks */
.pv-hero, .pv-promo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; align-items: center; height: 30cqh; flex-shrink: 0; }
.pv-hero div, .pv-promo div { display: grid; gap: 1.4cqh; }
.pv-hero i, .pv-promo i { height: 2.2cqh; border-radius: 1cqh; background: #1a1b2e; width: 100%; }
.pv-hero i:nth-child(2) { width: 80%; }
.pv-hero em, .pv-promo em { width: 12cqw; height: 4.6cqh; margin-top: 1cqh; border-radius: 1.2cqw; background: var(--pv, #7c3aed); }
.pv-hero > span, .pv-promo > span { height: 100%; border-radius: 1.6cqw; background: linear-gradient(135deg, var(--pv, #7c3aed), #22d3ee); opacity: .85; }
.pv-promo { height: 24cqh; padding: 0 2cqw; border-radius: 1.6cqw; background: color-mix(in srgb, var(--pv, #7c3aed) 10%, #fff); }
.pv-promo > span { height: 80%; border-radius: 50%; aspect-ratio: 1; justify-self: end; opacity: .9; }

/* grids of cards */
.pv-grid3, .pv-grid4 { flex: 1; display: grid; gap: 1.8cqw; min-height: 0; }
.pv-grid3 { grid-template-columns: repeat(3, 1fr); } .pv-grid4 { grid-template-columns: repeat(4, 1fr); }
.pv-tile, .pv-prod { display: grid; grid-template-rows: 1fr auto auto; gap: 1cqh; padding: 1cqw; border-radius: 1.4cqw; background: #f6f7fb; min-height: 0; }
.pv-tile span, .pv-prod span { border-radius: 1cqw; background: color-mix(in srgb, var(--pv, #7c3aed) 35%, #e9d5ff); min-height: 4cqh; }
.pv-tile:nth-child(2) span, .pv-prod:nth-child(2) span { background: color-mix(in srgb, var(--pv, #7c3aed) 20%, #bae6fd); }
.pv-tile:nth-child(3) span, .pv-prod:nth-child(3) span { background: color-mix(in srgb, var(--pv, #7c3aed) 25%, #fde68a); }
.pv-prod:nth-child(4) span { background: color-mix(in srgb, var(--pv, #7c3aed) 20%, #bbf7d0); }
.pv-tile i, .pv-prod i { height: 1.3cqh; border-radius: 1cqh; background: #d9dbe6; width: 90%; }
.pv-prod b { width: 45%; height: 2cqh; border-radius: 1cqh; background: var(--pv, #7c3aed); }

/* e-learning */
.pv-video { position: relative; display: grid; place-items: center; border-radius: 1.6cqw; background: linear-gradient(135deg, #1e1b4b, var(--pv, #7c3aed)); }
.pv-play { width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255,255,255,.92); position: relative; }
.pv-play::after { content: ""; position: absolute; left: 38%; top: 28%; border-left: 3.2cqw solid var(--pv, #7c3aed); border-top: 2.1cqw solid transparent; border-bottom: 2.1cqw solid transparent; }
.pv-seek { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 1cqh; border-radius: 1cqh; background: rgba(255,255,255,.35); }
.pv-seek::after { content: ""; position: absolute; inset: 0 55% 0 0; border-radius: inherit; background: #fff; }
.pv-lesson { display: grid; grid-template-columns: 4.6cqh 1fr; gap: 1.2cqw; align-items: center; padding: 1cqh 1cqw; border-radius: 1cqw; background: #f6f7fb; }
.pv-lesson > span { width: 4.6cqh; height: 4.6cqh; border-radius: 1cqw; background: color-mix(in srgb, var(--pv, #7c3aed) 30%, #fff); }
.pv-lesson div { display: grid; gap: .9cqh; }
.pv-lesson i { height: 1.2cqh; border-radius: 1cqh; background: #d9dbe6; }
.pv-lesson b { height: 1cqh; width: var(--w); border-radius: 1cqh; background: #22c55e; }

/* real estate */
.pv-search { display: flex; gap: 1.2cqw; padding: 1cqh 1.2cqw; border-radius: 1.4cqw; background: #f6f7fb; flex-shrink: 0; }
.pv-search i { flex: 1; height: 4cqh; border-radius: 1cqw; background: #fff; border: .2cqw solid #e4e6ef; }
.pv-search em { width: 10cqw; height: 4cqh; border-radius: 1cqw; background: var(--pv, #7c3aed); }
.pv-map { position: relative; border-radius: 1.6cqw; overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px) 0 0 / 5cqw 5cqw, linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px) 0 0 / 5cqw 5cqw, #d1fae5; }
.pv-map span { position: absolute; left: var(--x); top: var(--y); width: 3.6cqw; height: 3.6cqw; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--pv, #7c3aed); box-shadow: 0 .6cqw 1.2cqw rgba(0,0,0,.25); }
.pv-listing { display: grid; grid-template-columns: 11cqw 1fr; gap: 1.2cqw; padding: 1cqw; border-radius: 1.2cqw; background: #f6f7fb; }
.pv-listing > span { border-radius: 1cqw; background: color-mix(in srgb, var(--pv, #7c3aed) 30%, #fde68a); min-height: 11cqh; }
.pv-listing div { display: grid; gap: 1cqh; align-content: center; }
.pv-listing b { width: 60%; height: 2cqh; border-radius: 1cqh; background: var(--pv, #7c3aed); }
.pv-listing i { height: 1.2cqh; border-radius: 1cqh; background: #d9dbe6; }

/* travel */
.pv-banner { position: relative; height: 34cqh; flex-shrink: 0; border-radius: 1.6cqw; overflow: hidden; background: linear-gradient(#bae6fd, #e0f2fe); }
.pv-sun { position: absolute; top: 14%; right: 14%; width: 7cqw; height: 7cqw; border-radius: 50%; background: #fbbf24; }
.pv-mtn { position: absolute; bottom: 0; left: -5%; width: 60%; height: 70%; background: var(--pv, #0d9488); clip-path: polygon(0 100%, 45% 10%, 100% 100%); opacity: .85; }
.pv-mtn.b { left: 35%; width: 75%; height: 55%; opacity: .6; }
.pv-book { position: absolute; left: 4%; right: 4%; bottom: 8%; display: flex; gap: 1cqw; padding: .9cqh 1cqw; border-radius: 1.2cqw; background: #fff; }
.pv-book i { flex: 1; height: 3.4cqh; border-radius: .8cqw; background: #f1f2f6; }
.pv-book em { width: 10cqw; height: 3.4cqh; border-radius: .8cqw; background: var(--pv, #0d9488); }

/* phones */
.pv-phones { position: relative; width: 70cqw; height: 92cqh; }
.pv-phone { position: absolute; bottom: -6cqh; left: 50%; width: 26cqw; height: 92cqh; padding: 5cqh 2cqw 2cqh; display: grid; align-content: start; gap: 2cqh;
  border-radius: 4cqw; background: #fff; border: 1cqw solid #111827; box-shadow: 0 4cqw 8cqw -2cqw rgba(0,0,0,.55); transform: translateX(-12%); }
.pv-phone.pv-back { transform: translateX(-88%) rotate(-6deg); bottom: -10cqh; opacity: .92; }
.pv-notch { position: absolute; top: 1.4cqh; left: 50%; width: 8cqw; height: 1.8cqh; border-radius: 2cqh; background: #111827; transform: translateX(-50%); }
.pv-app-head { display: flex; justify-content: space-between; align-items: center; }
.pv-app-head b { font: 800 1.9cqw/1 var(--font-display); color: var(--pv, #7c3aed); white-space: nowrap; }
.pv-app-head em { width: 3.4cqh; height: 3.4cqh; border-radius: 50%; background: #e4e6ef; }
.pv-ring { width: 15cqw; height: 15cqw; justify-self: center; transform: rotate(-90deg); }
.pv-ring circle { fill: none; stroke: #eef0f6; stroke-width: 3.4; }
.pv-ring .a { stroke: var(--pv, #7c3aed); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 28; }
.pv-ring .b { stroke: #22c55e; stroke-linecap: round; stroke-dasharray: 69; stroke-dashoffset: 30; }
.pv-chart { display: flex; align-items: flex-end; gap: .8cqw; height: 13cqh; }
.pv-chart i { flex: 1; height: var(--h); border-radius: .6cqw .6cqw .2cqw .2cqw; background: color-mix(in srgb, var(--pv, #7c3aed) 40%, #fff); }
.pv-chart i:nth-child(6) { background: var(--pv, #7c3aed); }
.pv-phone .pv-btn { height: 5cqh; border-radius: 2cqw; background: var(--pv, #7c3aed); }
.pv-li { display: grid; grid-template-columns: 5cqh 1fr; gap: 1cqw; align-items: center; }
.pv-li > span { width: 5cqh; height: 5cqh; border-radius: 1.2cqw; background: color-mix(in srgb, var(--pv, #7c3aed) 28%, #fff); }
.pv-li div { display: grid; gap: .8cqh; } .pv-li i { height: 1.1cqh; border-radius: 1cqh; background: #d9dbe6; }
.pv-profile { display: flex; align-items: center; gap: 1.2cqw; }
.pv-profile > span { width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 2cqw/1 var(--font-display);
  background: linear-gradient(135deg, #f59e0b, #ec4899, var(--pv, #7c3aed)); }
.pv-profile div { flex: 1; display: grid; gap: .8cqh; } .pv-profile i { height: 1.2cqh; border-radius: 1cqh; background: #d9dbe6; }
.pv-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5cqw; }
.pv-feed i { aspect-ratio: 1; background: color-mix(in srgb, var(--pv, #7c3aed) 30%, #fde68a); }
.pv-feed i:nth-child(3n+2) { background: color-mix(in srgb, var(--pv, #7c3aed) 22%, #bae6fd); }
.pv-feed i:nth-child(4n) { background: color-mix(in srgb, var(--pv, #7c3aed) 55%, #fff); }
.pv-heart { position: absolute; right: 2cqw; bottom: 3cqh; width: 6cqw; height: 6cqw; border-radius: 50%; display: grid !important; place-items: center;
  color: #fff; font-size: 3cqw; background: #f43f5e; box-shadow: 0 1cqw 2cqw rgba(244,63,94,.5); }

/* POS tablet */
.pv-tablet { width: 84cqw; height: 74cqh; margin-bottom: 7cqh; display: grid; grid-template-columns: 1.7fr 1fr; gap: 2cqw; padding: 2.4cqw;
  border-radius: 3cqw; background: #fff; border: 1.2cqw solid #111827; box-shadow: 0 4cqw 8cqw -2cqw rgba(0,0,0,.5); align-self: center; }
.pv-menu { display: flex; flex-direction: column; gap: 2cqh; min-height: 0; }
.pv-tiles { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; min-height: 0; }
.pv-tiles span { display: grid; grid-template-rows: 1fr auto; gap: .8cqh; padding: 1cqw; border-radius: 1.2cqw; background: #f6f7fb; }
.pv-tiles span i { border-radius: .8cqw; background: color-mix(in srgb, var(--pv, #d97706) 35%, #fde68a); }
.pv-tiles span:nth-child(even) i { background: color-mix(in srgb, var(--pv, #d97706) 20%, #fecaca); }
.pv-tiles span em { height: 1.2cqh; border-radius: 1cqh; background: #d9dbe6; }
.pv-ticket { display: grid; align-content: start; gap: 1.6cqh; padding: 1.6cqw; border-radius: 1.4cqw; background: #f6f7fb; }
.pv-ticket div { display: flex; justify-content: space-between; gap: 1cqw; }
.pv-ticket i { flex: 1; height: 1.3cqh; border-radius: 1cqh; background: #d9dbe6; }
.pv-ticket b { width: 5cqw; height: 1.3cqh; border-radius: 1cqh; background: #b8bbcc; }
.pv-total { padding-top: 1.4cqh; border-top: .3cqw dashed #cfd2df; }
.pv-total b { background: var(--pv, #d97706) !important; height: 2cqh !important; }
.pv-ticket .pv-btn { height: 5cqh; border-radius: 1cqw; background: var(--pv, #d97706); }

/* brand board */
.pv-board { width: 84cqw; height: 74cqh; margin-bottom: 7cqh; align-self: center; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1.3fr 1fr;
  gap: 2cqw; padding: 2.4cqw; border-radius: 2.4cqw; background: #fff; box-shadow: 0 4cqw 8cqw -2cqw rgba(0,0,0,.45); }
.pv-board > div { border-radius: 1.6cqw; background: #f6f7fb; }
.pv-logo { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; padding: 2cqw; }
.pv-logo span { width: 11cqw; height: 11cqw; border-radius: 3cqw; display: grid; place-items: center; color: #fff; font: 800 4.4cqw/1 var(--font-display);
  background: linear-gradient(135deg, var(--pv, #7c3aed), #1e1b4b); }
.pv-logo b { font: 800 3.2cqw/1.1 var(--font-display); color: #1a1b2e; max-width: 22cqw; }
.pv-swatch { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; padding: 1.4cqw; }
.pv-swatch i { border-radius: 1cqw; background: var(--pv, #7c3aed); }
.pv-swatch i:nth-child(2) { background: #1e1b4b; } .pv-swatch i:nth-child(3) { background: color-mix(in srgb, var(--pv, #7c3aed) 35%, #fff); }
.pv-swatch i:nth-child(4) { background: #f59e0b; }
.pv-type { display: flex; align-items: center; gap: 2cqw; padding: 0 2.4cqw; }
.pv-type b { font: 800 8cqw/1 var(--font-display); color: var(--pv, #7c3aed); }
.pv-type span { flex: 1; display: grid; gap: 1cqh; } .pv-type i { height: 1.4cqh; border-radius: 1cqh; background: #d9dbe6; }
.pv-bcard { display: flex; align-items: center; gap: 1.4cqw; padding: 0 2cqw; background: linear-gradient(135deg, #1e1b4b, var(--pv, #7c3aed)) !important; }
.pv-bcard span { width: 6cqw; height: 6cqw; border-radius: 1.4cqw; display: grid; place-items: center; background: #fff; color: var(--pv, #7c3aed); font: 800 2.2cqw/1 var(--font-display); }
.pv-bcard div { flex: 1; display: grid; gap: .9cqh; } .pv-bcard i { height: 1.2cqh; border-radius: 1cqh; background: rgba(255,255,255,.6); }

.wg-shot { container-type: size; }

/* checkout: payment methods available for the chosen currency */
.pay-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.pay-methods small { width: 100%; color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pay-methods span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); }
.pay-methods .pay-inr { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; font-size: .84rem;
  font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.pay-methods .pay-inr .icon-sm:last-child { margin-left: auto; }

@keyframes scBar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------- hover & motion layer ----------
   Every card, button, icon, image and link answers the pointer. Only transform/opacity/colour change,
   so nothing jumps; touch screens and "reduce motion" users get the calm version. */
.card { isolation: isolate; }
.card:not(.form-card):not(.cat-tile)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 11%, transparent), transparent 65%);
  opacity: 0; transition: opacity .35s ease; }
.chip-icon { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); }
.btn .icon, .btn .icon-sm { transition: transform .25s ease; }
.tag, .pill, .hero-stats > *, .socials a, .logos img, .logos span { transition: transform .25s ease, background .25s, color .25s, filter .3s, opacity .3s, border-color .25s; }
.site-footer li a, .footer-col a { display: inline-block; transition: transform .2s ease, color .2s; }
.section-head h2 { background-image: linear-gradient(var(--brand), var(--brand)); background-size: 0 3px; background-repeat: no-repeat; background-position: 0 100%; }
.section-head.in h2, .section-head.reveal.in h2 { animation: headLine 1s .3s ease both; background-size: 64px 3px; }
@keyframes headLine { from { background-size: 0 3px; } to { background-size: 64px 3px; } }
.section-head h2 { padding-bottom: 10px; }
.section-head.center h2, .center .section-head h2 { background-position: 50% 100%; }

@media (hover: hover) and (pointer: fine) {
  main .card:not(.form-card):not(.contact-card) { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s; }
  main .card:not(.form-card):not(.contact-card):hover { transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); box-shadow: var(--shadow-lg); }
  main .card:hover::before { opacity: 1; }
  .card:hover .chip-icon { transform: rotate(-8deg) scale(1.1); background: var(--grad); color: #fff; border-color: transparent;
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
  .card:hover h3, .card:hover h3 a { color: var(--brand); }
  .card:hover .link-arrow .icon, .card:hover .link-arrow .icon-sm { transform: translateX(4px); }
  .btn:hover::after { transform: translateX(120%); transition: transform .7s ease; }
  .btn:hover .icon, .btn:hover .icon-sm { transform: translateX(3px); }
  .btn:hover svg[class*="icon"]:first-child:not(:last-child) { transform: rotate(-10deg) scale(1.1); }
  .tag:hover, .pill:hover { background: var(--brand-soft); color: var(--brand-ink); transform: translateY(-2px); }
  .hero-stats > *:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-400) 60%, transparent); }
  .socials a:hover { transform: translateY(-3px) rotate(-6deg); }
  .site-footer li a:hover, .footer-col a:hover { transform: translateX(4px); }
  .logos img { filter: grayscale(1); opacity: .7; } .logos img:hover, .logos span:hover { filter: none; opacity: 1; transform: scale(1.08); }
  .nav > a, .nav > .has-mega > button, .nav > .has-dd > button { transition: color .2s, background .2s, transform .2s; }
  .nav > a:hover { transform: translateY(-1px); }
  .icon-btn:hover { transform: rotate(15deg); }
  .wa-float:hover { transform: scale(1.1) rotate(-8deg); }
  .hero-visual .wg:hover { transform: translateY(-4px); transition: transform .4s ease; }
  .faq summary:hover, details summary:hover { color: var(--brand); }
  .breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* below-the-fold content slides in once, children one after another (set up by site.js) */
.auto-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--rd, 0) * 80ms); }
.auto-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .auto-reveal { opacity: 1; transform: none; } .btn::after { display: none; } }

/* ---------- home: technologies strip (two rows moving in opposite directions) ---------- */
.tech-band { overflow: hidden; }
.tech-band .section-head { margin-bottom: 36px; }
.tech-marquee { overflow: hidden; padding: 6px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tech-marquee + .tech-marquee { margin-top: 12px; }
.tech-track { display: flex; width: max-content; }
.tech-track.dup { animation: logoScroll 46s linear infinite; }
.tech-marquee.rev .tech-track { animation-direction: reverse; animation-duration: 52s; }
.tech-marquee:hover .tech-track { animation-play-state: paused; }
.tech-row { display: flex; gap: 12px; padding-right: 12px; }
.tech-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 14px; white-space: nowrap;
  font-weight: 600; font-size: .95rem; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  transition: transform .25s ease, border-color .25s, box-shadow .25s; }
.tech-pill i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.tech-pill img { width: 34px; height: 34px; object-fit: contain; }
/* the moving copies are decoration (the real list is the hidden <ul> above), so the name is drawn by CSS */
.tech-pill::after { content: attr(data-n); }
.section-dark .tech-pill { color: #e4e5f7; background: color-mix(in srgb, var(--hero-bg) 88%, #fff); border-color: rgba(255,255,255,.1); }
.section-dark .tech-pill i { color: var(--brand-300); background: rgba(255,255,255,.07); }
@media (hover: hover) { .tech-pill:hover { transform: translateY(-3px); border-color: var(--brand-400); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--brand) 70%, transparent); } }

/* ---------- home: every service as a tick chip ---------- */
.chips-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.chips-wrap .section-head { position: sticky; top: calc(var(--header-h) + 24px); margin-bottom: 0; }
.svc-chips { display: grid; gap: 26px; }
.svc-chip-group h3 { font-size: .95rem; margin: 0 0 12px; color: var(--muted); font-weight: 600; }
.svc-chip-group ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.svc-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 10px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--line); text-decoration: none;
  transition: transform .25s ease, border-color .25s, color .25s, box-shadow .25s; }
.svc-chip > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--grad); transition: transform .3s ease; }
.svc-chip:hover, .svc-chip:focus-visible { color: var(--brand); border-color: var(--brand-400); transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--brand) 60%, transparent); }
.svc-chip:hover > span { transform: rotate(360deg) scale(1.1); }
@media (max-width: 960px) {
  .chips-wrap { grid-template-columns: 1fr; gap: 28px; }
  .chips-wrap .section-head { position: static; }
}
@media (max-width: 640px) { .svc-chip { font-size: .86rem; padding: 8px 13px 8px 8px; } }

/* ---------- home: certifications & registrations ---------- */
.badges-title { text-align: center; font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 26px; }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.badge-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  transition: transform .25s ease, border-color .25s, box-shadow .25s; }
.badge-item b { display: block; font-size: .95rem; line-height: 1.25; }
.badge-item small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.badge-item img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.badge-ic { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; color: var(--brand);
  background: var(--brand-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
@media (hover: hover) { .badge-item:hover { transform: translateY(-4px); border-color: var(--brand-400); box-shadow: var(--shadow); }
  .badge-item:hover .badge-ic { background: var(--grad); color: #fff; } }
@media (max-width: 960px) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .badges { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tech-track { animation: none; flex-wrap: wrap; width: auto; } .tech-row + .tech-row { display: none; } }

/* live website link on portfolio cards */
.project-live { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.project-live .icon-sm:last-of-type { transition: transform .2s; }
.project-live:hover, .project-live:focus-visible { color: #fff; background: var(--grad); transform: translateY(-1px); }
.project-live:hover .icon-sm:last-of-type { transform: translate(2px, -2px); }

/* ---------- live hero widgets (templates/partials/live/) ----------
   Layered "real software" cards with real text: code that types itself, terminals, dashboards, feeds.
   Everything scales with the box (container units), animates with transform/opacity only (+ a few
   short number count-ups), restarts every ~16s (site.js) and waits for page load (html.go). */
@property --num { syntax: "<integer>"; inherits: false; initial-value: 0; }
.lv { position: relative; width: 100%; max-width: 580px; margin-left: auto; aspect-ratio: 58 / 50; container-type: inline-size;
  font-size: clamp(8.5px, 2.25cqw, 13px); color: #d9daf2; line-height: 1.45; }
.lv::before { content: ""; position: absolute; inset: 10% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 45%, transparent), transparent); filter: blur(10px); }
.lv-card { position: absolute; border-radius: 1.15em; overflow: hidden;
  background: linear-gradient(160deg, rgba(36,36,82,.92), rgba(16,16,42,.94)); border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 2.4em 4.8em -1.6em rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.lv-card.light { background: linear-gradient(160deg, #ffffff, #f3f1ff); color: #1a1b2e; border-color: rgba(255,255,255,.6); }
.lv-bar { display: flex; align-items: center; gap: .55em; padding: .7em 1em; font-weight: 600; font-size: .92em; color: #fff;
  background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.lv-card.light .lv-bar { color: #1a1b2e; background: rgba(20,20,60,.04); border-bottom-color: rgba(20,20,60,.08); }
.lv-dots { display: inline-flex; gap: .35em; margin-right: .3em; }
.lv-dots i { width: .62em; height: .62em; border-radius: 50%; background: #f87171; } .lv-dots i:nth-child(2) { background: #fbbf24; } .lv-dots i:nth-child(3) { background: #4ade80; }
.lv-bar .icon-xs, .lv .icon-xs { width: 1.05em; height: 1.05em; }
.lv-live { margin-left: auto; display: inline-flex; align-items: center; gap: .4em; padding: .2em .6em; border-radius: 99px; font-size: .78em; font-weight: 600;
  color: #4ade80; background: rgba(74,222,128,.12); }
.lv-live::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; animation: lvPulse 1.4s ease-in-out infinite; }
.lv-body { padding: .9em 1em; }
.lv-pill { position: absolute; display: inline-flex; align-items: center; gap: .6em; padding: .65em .95em; border-radius: .9em; white-space: nowrap;
  font-weight: 600; color: #fff; background: rgba(24,24,58,.86); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 1.4em 3em -1.2em rgba(0,0,0,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lv-pill .ic { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .7em; color: #fff; background: var(--grad); }
.lv-pill small { display: block; font-weight: 500; color: #a9abc9; font-size: .82em; }
.lv-pill b { display: block; }
.ok { color: #4ade80; } .warn { color: #fbbf24; } .bad { color: #f87171; } .mut { color: #8f92b8; }

/* code */
.lv-code-lines { font: 500 .95em/1.75 ui-monospace, "SFMono-Regular", Consolas, monospace; padding: .8em 0; counter-reset: ln; }
.lv-code-lines > div { display: flex; white-space: pre; }
.lv-code-lines > div::before { counter-increment: ln; content: counter(ln); width: 2.6em; padding-right: .9em; text-align: right; color: rgba(255,255,255,.25); flex-shrink: 0; }
.tl { display: inline-block; overflow: hidden; vertical-align: top; width: calc(var(--n) * 1ch); }
.t-tag { color: #f472b6; } .t-attr { color: #fbbf24; } .t-str { color: #4ade80; } .t-fn { color: #60a5fa; } .t-kw { color: #c084fc; } .t-tx { color: #e4e5f7; }
.lv-caret { display: inline-block; width: .55ch; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: #e4e5f7; animation: lvBlink 1s steps(1) infinite; }
.lv-term { font: 500 .92em/1.7 ui-monospace, Consolas, monospace; }
.lv-term > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* generic pieces */
.lv-row { display: flex; align-items: center; gap: .7em; padding: .5em 0; border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
.lv-card.light .lv-row { border-bottom-color: rgba(20,20,60,.07); }
.lv-row:last-child { border-bottom: 0; }
.lv-row > .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-av { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; flex-shrink: 0; font-weight: 700; font-size: .85em; color: #fff; background: var(--grad); }
.lv-prog { position: relative; height: .55em; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.lv-prog > i { position: absolute; inset: 0; border-radius: inherit; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.lv-num { counter-reset: n var(--num); }
.lv-num::after { content: counter(n); }
.lv-num { --num: var(--to); }
.lv-big { font: 800 2.1em/1 var(--font-display); color: #fff; letter-spacing: -.02em; }
.lv-card.light .lv-big { color: #1a1b2e; }
.lv-chip { display: inline-flex; align-items: center; gap: .35em; padding: .25em .65em; border-radius: 99px; font-size: .82em; font-weight: 600;
  color: #e4e5f7; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.lv-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.lv-ring { position: relative; width: 4.2em; height: 4.2em; display: grid; place-items: center; font-weight: 800; color: #fff; }
.lv-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lv-ring circle { fill: none; stroke-width: 3.2; } .lv-ring .bg { stroke: rgba(255,255,255,.1); }
.lv-ring .fg { stroke: #4ade80; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 100)); }
.lv-spark { display: flex; align-items: flex-end; gap: .25em; height: 3.2em; }
.lv-spark i { flex: 1; border-radius: .2em .2em 0 0; background: linear-gradient(var(--brand-400), var(--brand-2)); height: calc(var(--h) * 1%); transform-origin: 50% 100%; }
.lv-line { width: 100%; height: auto; display: block; overflow: visible; }
.lv-line .area { fill: url(#lvGrad); fill: color-mix(in srgb, var(--brand-400) 22%, transparent); }
.lv-line .stroke { fill: none; stroke: var(--brand-400); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.lv-bubble { max-width: 82%; padding: .6em .85em; border-radius: 1em; margin: .45em 0; font-size: .95em; line-height: 1.4; }
.lv-bubble.me { margin-left: auto; color: #fff; background: var(--grad); border-bottom-right-radius: .3em; }
.lv-bubble.bot { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-bottom-left-radius: .3em; }
.lv-typing { display: inline-flex; gap: .3em; padding: .7em .9em; border-radius: 1em; background: rgba(255,255,255,.08); }
.lv-typing i { width: .45em; height: .45em; border-radius: 50%; background: #c4c5e0; animation: wgDot 1.2s infinite; }
.lv-typing i:nth-child(2) { animation-delay: .15s; } .lv-typing i:nth-child(3) { animation-delay: .3s; }
.lv-wave { display: flex; align-items: center; gap: .22em; height: 2.4em; }
.lv-wave i { width: .3em; height: 100%; border-radius: 99px; background: var(--brand-400); transform: scaleY(.3); animation: scBar 1s ease-in-out infinite; animation-delay: calc(var(--i) * -.12s); }

/* ----- play sequence: hidden → in, one after another (only while .play; base state = finished) ----- */
.lv.play .s { animation: lvIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .s-pop { animation: lvPop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .s-right { animation: lvRight .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .tl { animation: lvType calc(var(--n) * var(--lvc, 38ms)) steps(var(--n)) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .lv-num { animation: lvCount 1.8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .lv-prog > i { animation: lvBar 1.4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .lv-ring .fg { animation: wgRing 1.6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .lv-spark i { animation: wgFillY .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s) + var(--k, 0) * .06s); }
.lv.play .lv-line .stroke { animation: wgDrawP 2s ease-out both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .lv-line .area { animation: lvFade 1s ease both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s) + 1s); }
.lv.play .rise { animation: lvRise var(--dur, 1.2s) cubic-bezier(.4,0,.2,1) both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv.play .gone { animation: lvGone .4s ease both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv-float { animation: wgBob 6s ease-in-out infinite; }
.lv-float.f2 { animation-delay: -3s; }
@keyframes lvIn { from { opacity: 0; transform: translateY(.8em); } }
@keyframes lvPop { from { opacity: 0; transform: scale(.6); } }
@keyframes lvRight { from { opacity: 0; transform: translateX(1.5em); } }
@keyframes lvType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lvCount { from { --num: 0; } }
@keyframes lvBar { from { transform: scaleX(0); } }
@keyframes lvFade { from { opacity: 0; } }
@keyframes lvRise { from { transform: translateY(var(--from)); } }
@keyframes lvGone { to { opacity: 0; transform: scale(.9); height: 0; padding: 0; margin: 0; border: 0; } }
@keyframes lvBlink { 50% { opacity: 0; } }
@keyframes lvPulse { 50% { opacity: .35; } }
.lv:not(.vis) *, .lv:not(.vis) *::before, .lv:not(.vis) *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .lv * { animation: none !important; } }
@media (max-width: 960px) { .lv { margin: 10px auto 0; } }
/* round glass icon bubbles floating around the widget (like brand/tool badges) */
.lv-orb { position: absolute; z-index: 3; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; color: #fff;
  background: rgba(30,30,70,.75); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 1em 2.2em -1em rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: wgBob 5s ease-in-out infinite; }
.lv-orb .icon-xs { width: 1.5em; height: 1.5em; }
.lv-orb.o2 { animation-delay: -1.7s; } .lv-orb.o3 { animation-delay: -3.4s; }
.lv-orb.g { background: var(--grad); border-color: transparent; }
.hero-visual:has(> .lv) { width: 100%; min-width: 0; }
.s-heart { opacity: 0; }
.lv.play .s-heart { animation: lvHeart 1.3s ease-out both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
@keyframes lvHeart { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.15); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
/* helpers used by single widgets */
.lv-draw { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.lv.play .lv-draw { animation: wgDrawP 2.4s ease-in-out both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
.lv-cursor { position: absolute; left: 60%; top: 62%; display: inline-flex; align-items: flex-start; gap: .1em; pointer-events: none; }
.lv-cursor > span { padding: .1em .45em; border-radius: .35em; font-size: .75em; font-weight: 700; color: #fff; background: #f472b6; margin-top: .9em; }
.lv.play .lv-cursor { animation: lvCursor 6s ease-in-out infinite; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
@keyframes lvCursor { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-6em, -4em); } 60% { transform: translate(3em, -6em); } }
.lv-sun { position: absolute; left: 12%; top: 16%; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fde68a; box-shadow: 0 0 2em #fbbf24; animation: lvSun 10s ease-in-out infinite alternate; }
@keyframes lvSun { to { transform: translate(14em, 1.2em); } }
.lv-play-bar { animation: lvPlay 12s linear infinite !important; }
@keyframes lvPlay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lv-playhead { position: absolute; top: .3em; bottom: .4em; left: 3.4em; width: 2px; background: #fbbf24; box-shadow: 0 0 .6em #fbbf24; animation: lvHead 8s linear infinite; }
.lv-playhead::before { content: ""; position: absolute; top: -.2em; left: -.35em; border: .4em solid transparent; border-top-color: #fbbf24; }
@keyframes lvHead { from { transform: translateX(0); } to { transform: translateX(26em); } }
.lv-cpu > i { animation: lvCpu 2.6s ease-in-out infinite alternate !important; animation-delay: calc(var(--k, 0) * -.7s) !important; }
@keyframes lvCpu { from { transform: scaleX(calc(var(--p) * .6)); } to { transform: scaleX(calc(var(--p) * 1.3)); } }
.lv-typing-1 { display: inline-flex; }
.lv.play .lv-typing-1 { animation: lvTypingBlip 1.2s ease both; animation-delay: calc(var(--t, 0) * var(--lvs, 1s)); }
@keyframes lvTypingBlip { 0% { opacity: 0; transform: translateY(.6em); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; } }
.lv-typing-1 { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }

/* ---------- mini live widget on top of service cards (templates/partials/mini_widget.html) ---------- */
.lv.mw { max-width: none; aspect-ratio: auto; height: 9.6rem; margin: -26px -26px 0; width: auto; container-type: normal; font-size: 11.5px;
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; color: #d9daf2;
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 60%),
              radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--brand-3) 40%, transparent), transparent 60%), #0f1030; }
.lv.mw::before { inset: 0; border-radius: 0; filter: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%); z-index: 0; }
.lv.mw > * { position: relative; z-index: 1; }
.service-card .chip-icon { position: relative; z-index: 2; margin-top: -26px; margin-bottom: 14px; border: 3px solid var(--surface); }
.mw-tag { position: absolute !important; right: .9em; bottom: .9em; display: inline-flex; align-items: center; gap: .4em; padding: .35em .7em; border-radius: 99px;
  font-weight: 600; font-size: .95em; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mw-big { position: absolute !important; left: .9em; top: .8em; font: 800 1.9em/1 var(--font-display); color: #fff; }
.mw .lv-code-lines { padding: 1em 0 0; font-size: 1em; }
.mw-phone { position: absolute !important; left: 50%; top: 1em; width: 5.6em; height: 11em; margin-left: -2.8em; border-radius: 1.1em; border: .35em solid #2b2d66;
  background: #f7f6ff; overflow: hidden; box-shadow: 0 1em 2em -1em rgba(0,0,0,.8); }
.mw-phone > i { display: block; height: .45em; margin: .4em .5em 0; border-radius: 99px; background: #d9d6f5; } .mw-phone > i.short { width: 55%; }
.mw-slides { display: flex; width: 300%; height: 4.2em; animation: mwSlides 7.5s ease-in-out infinite; }
.mw-slides span { flex: 1; margin: .5em; border-radius: .5em; }
@keyframes mwSlides { 0%, 28% { transform: translateX(0); } 33%, 61% { transform: translateX(-33.33%); } 66%, 94% { transform: translateX(-66.66%); } 100% { transform: translateX(0); } }
.mw-bars { position: absolute !important; left: .9em; right: .9em; bottom: .9em; height: 55%; }
.mw-board { position: absolute !important; left: 1em; right: 1em; top: 1em; bottom: 3.4em; border-radius: .7em; background: #fff; padding: .5em 1em; }
.mw-sw { position: absolute !important; left: 1em; bottom: .9em; display: flex; gap: .45em; }
.mw-sw span { width: 1.7em; height: 1.7em; border-radius: .5em; }
.mw-tracks { position: absolute !important; left: 1em; right: 1em; bottom: 1em; display: grid; gap: .35em; }
.mw-tracks > div { display: flex; gap: .2em; height: 1.1em; } .mw-tracks > div > span { border-radius: .25em; }
.mw-head { position: absolute; top: -.3em; bottom: -.3em; left: 0; width: 2px; background: #fbbf24; box-shadow: 0 0 .6em #fbbf24; animation: mwHead 6s linear infinite; }
@keyframes mwHead { to { transform: translateX(var(--w, 18em)); } }
.mw-rows { position: absolute !important; left: 1em; right: 1em; bottom: .9em; display: grid; gap: .45em; }
.mw-rows > div { display: flex; align-items: center; gap: .5em; padding: .35em .6em; border-radius: .5em; background: rgba(255,255,255,.06); white-space: nowrap; }
.mw-rows b { color: #fff; font-weight: 600; } .mw-rows .lv-prog { flex: 1; }
.mw-shield { position: absolute !important; left: 1em; top: 50%; display: grid; place-items: center; width: 4.2em; height: 4.2em; margin-top: -2.1em; border-radius: 1.2em; color: #fff; background: var(--grad);
  animation: scBeat 2s ease-in-out infinite; }
.mw-shield .icon-xs { width: 2em; height: 2em; }
.mw-security .mw-rows { left: 6.2em; top: .9em; bottom: auto; }
.mw-chat { position: absolute !important; left: 1em; right: 1em; bottom: .6em; }
.mw-chat .lv-bubble { font-size: 1em; }
.mw-counters { position: absolute !important; left: 1em; right: 1em; bottom: 1em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.mw-counters > div { padding: .5em .6em; border-radius: .6em; background: rgba(255,255,255,.07); }
.mw-counters small { display: block; color: #a9abc9; } .mw-counters b { font: 800 1.25em var(--font-display); color: #fff; }
/* mini widgets start when the card scrolls into view (site.js adds .play) */
.lv.mw:not(.play) .lv-num { --num: var(--to); }

/* ---------- premium cards: soft gradient frame, deeper hover, 3D tilt (site.js sets --rx/--ry) ---------- */
main .card { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
main .card:not(.form-card)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--brand-400) 70%, transparent), transparent 35%, transparent 65%, color-mix(in srgb, var(--brand-3-400) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .45; transition: opacity .35s; }
main .card .chip-icon:not(.grad) { background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-3) 12%, var(--surface))); }
@media (hover: hover) and (pointer: fine) {
  main .card:not(.form-card):not(.contact-card):hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--brand) 55%, transparent), var(--shadow); }
  main .card:hover::after { opacity: 1; }
  .service-card:hover .lv.mw { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
}
@keyframes scBeat { 50% { transform: scale(1.08); } }

/* ---------- 3D layer ----------
   Hero widgets: cards sit at different depths and the whole stack turns with the pointer (phones: slow sway).
   Hero floor: a perspective grid that drifts toward you. Sections turn up into place; buttons press down. */
.lv:not(.mw) { transform-style: preserve-3d; transform: perspective(1300px) rotateX(var(--prx, 5deg)) rotateY(var(--pry, -9deg));
  transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.lv:not(.mw) > .lv-card { transform: translateZ(34px); }
.lv:not(.mw) > .lv-card:first-of-type { transform: translateZ(0); }
.lv:not(.mw) > .lv-pill { transform: translateZ(80px); }
.lv:not(.mw) > .lv-orb { transform: translateZ(110px); animation-name: lvOrbBob; }
.lv:not(.mw) > .lv-card.lv-float, .lv-float { animation-name: lvOrbBob; }
@keyframes lvOrbBob { 50% { translate: 0 -10px; } }
.lv:not(.mw) > .lv-card, .lv:not(.mw) > .lv-pill { box-shadow: 0 3em 5em -2em rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1); }
/* touch screens: a fixed 3D angle (no continuous sway, so phones never repaint the whole widget every frame) */
@media (hover: none), (pointer: coarse) {
  .lv:not(.mw) { transform: perspective(1300px) rotateX(5deg) rotateY(-8deg); transition: none; }
}

/* hero: 3D grid floor drifting toward the viewer (composited transform only) */
.hero::after { inset: auto -40% -2px; height: 62%; background-size: 56px 56px; transform-origin: 50% 100%;
  transform: perspective(420px) rotateX(62deg); opacity: .9;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  background-image: linear-gradient(color-mix(in srgb, var(--brand-400) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand-400) 30%, transparent) 1px, transparent 1px);
  animation: heroFloor 3.2s linear infinite; }
@keyframes heroFloor { from { transform: perspective(420px) rotateX(62deg) translateY(0); } to { transform: perspective(420px) rotateX(62deg) translateY(56px); } }

/* sections and cards turn up into place */
.auto-reveal { transform: perspective(1000px) rotateX(16deg) translateY(34px); transform-origin: 50% 100%; }
.auto-reveal.in { transform: none; }
.reveal { transform: perspective(1000px) rotateX(12deg) translateY(24px); transform-origin: 50% 100%; }
.reveal.in { transform: none; }

/* buttons: raised edge, press down */
.btn-primary { box-shadow: 0 4px 0 0 color-mix(in srgb, var(--brand) 55%, #000), 0 14px 28px -12px color-mix(in srgb, var(--brand) 80%, transparent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 color-mix(in srgb, var(--brand) 55%, #000), 0 20px 34px -12px color-mix(in srgb, var(--brand) 85%, transparent); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 0 color-mix(in srgb, var(--brand) 55%, #000), 0 8px 18px -10px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn-ghost:active, .btn-secondary:active, .btn-white:active { transform: translateY(2px); }

/* more cards lean toward the pointer */
@media (hover: hover) and (pointer: fine) {
  .project-card, .post-card, .cat-tile { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
  .project-card:hover, .post-card:hover, .cat-tile:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
  .chip-icon { transform-style: preserve-3d; }
  .card:hover .chip-icon { transform: translateZ(30px) rotate(-8deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .lv:not(.mw), .hero::after, .auto-reveal, .reveal { transform: none !important; animation: none !important; } }

/* ---------- live widget "coder": developer at a desk, real code typing on the monitor ---------- */
.lv-coder { aspect-ratio: 48 / 37; }
.cd-svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; overflow: visible; }
.cd-svg * { transform-box: fill-box; }
.cd-floor { fill: rgba(255,255,255,.07); }
.cd-desk { fill: #4a4d96; } .cd-desk-d { fill: #34377a; } .cd-frame { fill: #3a3d80; } .cd-screen { fill: #0c0d22; }
.cd-key { fill: #5b5fae; } .cd-chair { fill: #383b7c; } .cd-chair-s { stroke: #383b7c; stroke-width: 6; fill: none; stroke-linecap: round; }
.cd-mug { fill: var(--brand-400); } .cd-mug-h { stroke: var(--brand-400); stroke-width: 3; fill: none; }
.cd-steam { stroke: rgba(255,255,255,.35); stroke-width: 2.5; fill: none; stroke-linecap: round; animation: cdSteam 3s ease-in-out infinite; }
.cd-steam.s2 { animation-delay: 1.4s; }
.cd-skin { fill: #eab48c; } .cd-hair, .cd-eye { fill: #1d1530; }
.cd-shirt { fill: var(--brand); }
.cd-arm { stroke: var(--brand); stroke-width: 13; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cd-arm-d { stroke: color-mix(in srgb, var(--brand) 70%, #000); stroke-width: 12; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cd-pants { stroke: #1b1c3f; stroke-width: 22; fill: none; stroke-linecap: round; stroke-linejoin: round; } .cd-shoe { fill: #e4e5f7; }
.cd-phones { stroke: #e4e5f7; stroke-width: 4; fill: none; stroke-linecap: round; } .cd-phones-c { fill: var(--accent); }
.cd-tab { font: 600 7px var(--font); fill: #a9abc9; }
.cd-ln { font: 500 7.5px ui-monospace, Consolas, monospace; fill: rgba(255,255,255,.25); }
.cd-l { font: 500 7.5px ui-monospace, Consolas, monospace; fill: #e4e5f7; white-space: pre; }
.k-tag { fill: #f472b6; } .k-attr { fill: #fbbf24; } .k-str { fill: #4ade80; } .k-fn { fill: #60a5fa; }
.cd-cursor { fill: #e4e5f7; animation: lvBlink 1s steps(1) infinite; }
.cd-ok rect { fill: rgba(74,222,128,.15); } .cd-ok text { font: 700 7px var(--font); fill: #4ade80; }
.cd-hand { animation: cdTap .34s ease-in-out infinite alternate; } .cd-hand.h2 { animation-delay: .17s; }
.cd-head { transform-origin: 50% 100%; animation: cdNod 6s ease-in-out infinite; }
.lv.play .cd-l { animation: lvType calc(var(--n) * var(--lvc, 45ms)) steps(var(--n)) both; animation-delay: calc(var(--t) * var(--lvs, 1s)); }
.lv.play .cd-ok { animation: lvPop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(8.1 * var(--lvs, 1s)); }
@keyframes cdSteam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes cdTap { to { transform: translateY(-3px); } }
@keyframes cdNod { 0%, 40%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(4deg); } }

/* in the home slider each slide shows for ~5 s, so its widget plays at double speed */
.hero-slider .lv { --lvs: .5s; --lvc: 20ms; }

/* footer never wider than the screen: columns may shrink, links wrap; very small phones get one column */
.footer-grid > * { min-width: 0; }
.footer-col a { overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .newsletter { flex-wrap: wrap; }
  .newsletter input { flex: 1 1 160px; }
}

/* ---------- Our products (/products/) ---------- */
.pd-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; background: #dcfce7; color: #166534; }
.pd-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pdPulse 2s infinite; }
.pd-status.pd-beta { background: #dbeafe; color: #1e40af; }
.pd-status.pd-soon { background: #fef3c7; color: #92400e; }
@keyframes pdPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.pd-frame { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--pc) 55%, transparent), var(--shadow-lg); transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.pd-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--bg-muted); border-bottom: 1px solid var(--line); }
.pd-bar i { width: 10px; height: 10px; border-radius: 50%; background: #f87171; }
.pd-bar i:nth-child(2) { background: #fbbf24; } .pd-bar i:nth-child(3) { background: #34d399; }
.pd-bar span { flex: 1; min-width: 0; margin-left: 8px; padding: 3px 10px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-frame > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pd-placeholder { aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 22%, var(--surface)), var(--surface)); }
.pd-placeholder b { font-family: var(--font-display); font-size: 4rem; color: var(--pc); }
.pd-show { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 40px 0; }
.pd-show + .pd-show { border-top: 1px dashed var(--line); }
.pd-show.pd-flip .pd-show-media { order: 2; }
.pd-show-media { display: block; }
.pd-show-media:hover .pd-frame, .pd-hero .hero-visual:hover .pd-frame { --rx: 2deg; --ry: -4deg; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); }
.pd-name { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 6px; }
.pd-name a { color: inherit; text-decoration: none; }
.pd-name a:hover { color: var(--pc); }
.pd-tagline { font-weight: 600; color: var(--text); font-size: 1.08rem; }
.pd-checks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 18px 0 24px; padding: 0; }
.pd-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: .93rem; font-weight: 500; }
.pd-checks .icon-sm { flex: none; margin-top: 2px; padding: 2px; border-radius: 50%; color: #fff; background: var(--pc); width: 18px; height: 18px; }
.pd-price { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); }
.pd-feat { background-image: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--pc) 12%, transparent) 0, transparent 140px); background-size: 100% 100%; transition: background-size .5s, transform .35s, box-shadow .35s; }
.pd-feat:hover { background-size: 160% 160%; }
.pd-feat-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); }
.pd-feat h3 { font-size: 1.05rem; margin-bottom: 6px; }
.pd-shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.pd-shot img { display: block; width: 100%; height: auto; transition: transform .5s; }
.pd-shot:hover img { transform: scale(1.03); }
.pd-shot figcaption { padding: 10px 14px; font-size: .88rem; color: var(--muted); }
.pd-mini { border-top: 3px solid var(--pc); }
@media (max-width: 900px) {
  .pd-show { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 0; }
  .pd-show.pd-flip .pd-show-media { order: 0; }
}
@media (max-width: 480px) { .pd-checks { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pd-status .dot { animation: none; } .pd-frame, .pd-shot img { transition: none; } }

/* Wide dropdown: with more than 5 links (e.g. 10–20 products) the menu becomes 2 columns and scrolls if very long */
.dd.dd-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(640px, 92vw); max-width: none; max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; }
.dd.dd-wide .dd-all { grid-column: 1 / -1; position: sticky; bottom: -8px; background: var(--surface); }

/* ---------- /products/ hero widget: live product suite panel ---------- */
.ps-panel { position: relative; width: min(100%, 470px); margin-inline: auto; border-radius: 20px; padding: 16px; color: #e8e8ff;
  background: linear-gradient(160deg, rgba(30, 27, 75, .95), rgba(12, 12, 34, .96)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); transform: translateZ(40px); }
.ps-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
.ps-dots { display: flex; gap: 5px; } .ps-dots i { width: 9px; height: 9px; border-radius: 50%; background: #f87171; }
.ps-dots i:nth-child(2) { background: #fbbf24; } .ps-dots i:nth-child(3) { background: #34d399; }
.ps-head b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; color: #4ade80; background: rgba(74, 222, 128, .12); }
.ps-live .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pdPulse 2s infinite; }
.ps-rows { display: grid; gap: 10px; padding: 14px 0; }
.ps-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 70px auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); animation: pwIn .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .18s + .2s); transition: transform .3s, background .3s; }
.ps-row:hover { transform: translateX(6px); background: rgba(255,255,255,.08); }
.ps-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; font-weight: 800; font-size: 1.1rem; color: #fff;
  background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 45%, #000)); box-shadow: 0 8px 20px -8px var(--pc); }
.ps-logo img { width: 100%; height: 100%; object-fit: cover; }
.ps-info b { display: block; font-size: .88rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-info small { display: block; font-size: .72rem; color: #a9abc9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-meter { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.ps-meter i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--pc), #a78bfa);
  transform-origin: left; animation: pwFill 2.4s cubic-bezier(.2,.8,.2,1) both, pwBreathe 4s ease-in-out 2.6s infinite; animation-delay: calc(var(--i) * .18s + .6s), calc(var(--i) * .3s + 2.6s); }
.ps-st { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; color: #4ade80; background: rgba(74, 222, 128, .12); }
.ps-st.ps-beta { color: #93c5fd; background: rgba(147, 197, 253, .14); }
.ps-st.ps-soon { color: #fcd34d; background: rgba(252, 211, 77, .14); }
.ps-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: .76rem; color: #a9abc9; }
.ps-ping { display: inline-flex; align-items: center; gap: 6px; color: #4ade80; }
.ps-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.ps-bars i { width: 5px; border-radius: 2px; background: linear-gradient(#a78bfa, #7c3aed); height: 40%; animation: pwBar 1.6s ease-in-out infinite; animation-delay: calc(var(--d) * -.13s); }
@keyframes pwIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pwFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pwBreathe { 50% { transform: scaleX(.86); } }
@keyframes pwBar { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (max-width: 480px) { .ps-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .ps-meter { display: none; } .ps-logo { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .ps-row, .ps-meter i, .ps-bars i, .ps-live .dot { animation: none; } }
.ps-panel ~ .fc-3 { bottom: -78px; left: 56px; }