/* ============================================================
   HyMotion — Marketing Website Preview
   Design system: charcoal / lime / teal · Cairo · RTL-ready
   Tokens mirror design-tokens.json (product source of truth)
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* charcoal */
  --c900: #0D0D0D; --c800: #1A1A1A; --c700: #2A2A2A; --c600: #3A3A3A;
  --c500: #4A4A4A; --c400: #6B6B6B; --c300: #8C8C8C; --c200: #B0B0B0;
  --c100: #D4D4D4; --c50: #F0F0F0;
  /* lime */
  --l600: #5EAF00; --l500: #7ACC00; --l400: #A0E040; --l300: #BEEC73;
  --l200: #D8F5A6; --l100: #EDFCD8; --lglow: rgba(160, 224, 64, .25);
  /* teal */
  --t700: #0A4D4D; --t600: #0D6B6B; --t500: #148F8F; --t400: #3DB5B5;
  --t300: #70CECE; --t200: #A8E4E4; --t100: #D9F2F2;
  /* semantic (product pills) */
  --suc600: #16A34A; --suc500: #22C55E; --suc100: #DCFCE7; --suctxt: #166534;
  --wrn600: #D97706; --wrn500: #F59E0B; --wrn100: #FEF3C7; --wrntxt: #92400E;
  --dng600: #DC2626; --dng500: #EF4444; --dng100: #FEE2E2; --dngtxt: #991B1B;
  --inf600: #2563EB; --inf500: #3B82F6; --inf100: #DBEAFE; --inftxt: #1E40AF;
  --frz600: #0891B2; --frz500: #22D3EE; --frz100: #CFFAFE;  --frztxt: #155E75;
  /* surfaces */
  --bg: #FAFAFA; --s1: #FFFFFF; --s2: #F5F5F5; --s3: #EBEBEB;
  --ltp: #1A1A1A; --lts: #4A4A4A; --ltt: #8C8C8C; --lbd: #D4D4D4;
  /* type */
  --fd: 'Cairo', 'Segoe UI', sans-serif;
  /* radius */
  --rsm: 6px; --rmd: 10px; --rlg: 16px; --rxl: 24px; --rpl: 9999px;
  /* shadows */
  --sh1: 0 1px 2px rgba(0, 0, 0, .06);
  --sh2: 0 2px 8px rgba(0, 0, 0, .08);
  --sh3: 0 4px 16px rgba(0, 0, 0, .12);
  --sh4: 0 8px 32px rgba(0, 0, 0, .18);
  --shg: 0 0 24px var(--lglow);
  /* motion */
  --tf: 150ms ease; --tb: 250ms ease; --ts: 400ms ease;
  /* layout */
  --wrap: 1180px;
  --nav-h: 68px;
}

/* ── Reset / base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  font-family: var(--fd);
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--ltp);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Scroll-lock while the mobile nav drawer is open */
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--l500);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--l300); color: var(--c900); }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding: 96px 0; }
.section-soft { background: var(--s1); }
.section-dark { background: var(--c900); color: var(--c50); }
.section-tint { background: var(--t100); }
.section-sm { padding: 64px 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--fd); line-height: 1.18; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.section-dark h2, .section-dark h3 { color: #fff; }
p { color: var(--lts); }
.section-dark p { color: var(--c200); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  color: var(--l600); margin-bottom: 14px;
}
.section-dark .eyebrow { color: var(--l400); }
.eyebrow::before {
  content: ""; inline-size: 22px; block-size: 2px;
  background: var(--l500); border-radius: 2px;
}
.lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); max-width: 62ch; margin-top: 14px; }
.center .lede { margin-inline: auto; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--rmd);
  font-weight: 700; font-size: .95rem; line-height: 1.2;
  border: 1.5px solid transparent;
  transition: transform var(--tf), box-shadow var(--tf), background var(--tf), border-color var(--tf), color var(--tf);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--l500); color: var(--c900);
  box-shadow: 0 2px 12px rgba(122, 204, 0, .35);
}
.btn-primary:hover { background: var(--l400); box-shadow: 0 4px 18px rgba(122, 204, 0, .45); }
.btn-ghost { border-color: var(--c300); color: var(--ltp); background: transparent; }
.btn-ghost:hover { border-color: var(--c900); background: var(--s1); }
.section-dark .btn-ghost, .hero .btn-ghost, .footer .btn-ghost { border-color: var(--c600); color: var(--c50); }
.section-dark .btn-ghost:hover, .hero .btn-ghost:hover { border-color: var(--l400); color: var(--l400); }
.btn-teal { background: var(--t500); color: #fff; }
.btn-teal:hover { background: var(--t600); }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; border-radius: 12px; }
.btn-sm { padding: 8px 14px; font-size: .85rem; }

/* ── Preview banner ─────────────────────────────────────── */
.PreviewBanner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px 16px; font-size: .78rem;
  background: var(--c800); color: var(--c300);
  border-bottom: 1px solid var(--c700);
}
.PreviewBanner .chip {
  background: var(--l500); color: var(--c900);
  font-weight: 700; font-size: .68rem; letter-spacing: .06em;
  padding: 2px 8px; border-radius: var(--rpl);
}

/* ── Navbar ─────────────────────────────────────────────── */
.Navbar {
  position: sticky; top: 0; z-index: 200;
  background: rgba(13, 13, 13, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c700);
}
.Navbar-inner {
  max-width: var(--wrap); margin-inline: auto; padding: 0 24px;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
}
.Brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.Brand img { height: 26px; width: auto; }
.Navbar-links { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.Navbar-links a {
  padding: 8px 13px; border-radius: var(--rmd);
  font-size: .92rem; font-weight: 600; color: var(--c200);
  transition: color var(--tf), background var(--tf);
}
.Navbar-links a:hover { color: #fff; background: var(--c800); }
.Navbar-links a[aria-current="page"] { color: var(--l400); }
.Navbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  padding: 6px 12px; border-radius: var(--rpl);
  border: 1px solid var(--c600); color: var(--c200);
  font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  transition: border-color var(--tf), color var(--tf);
}
.lang-toggle:hover { border-color: var(--l500); color: var(--l400); }
.menu-btn {
  display: none; width: 42px; height: 42px; border-radius: var(--rmd);
  border: 1px solid var(--c600); color: var(--c50);
  font-size: 1.15rem; align-items: center; justify-content: center;
}
.NavDrawer {
  display: none; position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 190;
  background: var(--c900); border-bottom: 1px solid var(--c700);
  padding: 12px 24px 22px;
  flex-direction: column; gap: 2px;
}
.NavDrawer.is-open { display: flex; }
.NavDrawer a {
  padding: 12px 10px; border-radius: var(--rmd);
  color: var(--c200); font-weight: 600; border-bottom: 1px solid var(--c800);
}
.NavDrawer a:hover { color: var(--l400); }
.NavDrawer a[aria-current="page"] { color: var(--l400); }
.NavDrawer .btn { margin-top: 14px; justify-content: center; border-bottom: 0; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative; overflow: clip;
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(122, 204, 0, .10), transparent 62%),
    radial-gradient(700px 420px at 8% 108%, rgba(20, 143, 143, .12), transparent 60%),
    var(--c900);
  color: var(--c50);
  padding: 88px 0 104px;
}
.hero::after {  /* fine grid texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(900px 560px at 60% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(900px 560px at 60% 30%, #000 30%, transparent 75%);
}
.hero .wrap { position: relative; z-index: 1; }
.Hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px; align-items: center;
}
.hero h1 { color: #fff; margin-bottom: 6px; }
.hero h1 .accent { color: var(--l400); }
.hero .eyebrow { margin-bottom: 18px; }
.hero .lede { color: var(--c200); max-width: 46ch; }
.Hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.Hero-note {
  margin-top: 22px; font-size: .85rem; color: var(--c400);
  display: flex; align-items: center; gap: 8px;
}
.Hero-note .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--l500); box-shadow: 0 0 8px var(--lglow); }
.Hero-visual { position: relative; }
.ProductShowcase {
  position: relative;
  border-radius: var(--rxl);
  transform: rotate(-.4deg);
  transition: transform var(--ts);
}
.ProductShowcase:hover { transform: rotate(0deg) translateY(-3px); }
.ProductShowcase::before {
  content: ""; position: absolute; inset: -8% -6%;
  background: radial-gradient(60% 55% at 50% 35%, var(--lglow), transparent 70%);
  z-index: -1; filter: blur(10px);
}
.hero-chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  background: var(--c800); color: var(--c50);
  border: 1px solid var(--c600); border-radius: var(--rmd);
  padding: 9px 14px; font-size: .8rem; font-weight: 600;
  box-shadow: var(--sh4);
  animation: float 7s ease-in-out infinite;
}
.hero-chip .num { color: var(--l400); font-weight: 800; font-size: .95rem; }
.hero-chip-a { top: -16px; inset-inline-end: 8%; animation-delay: 0s; }
.hero-chip-b { bottom: -16px; inset-inline-start: 4%; animation-delay: 2.4s; }
.hero-chip .live-dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--suc500); box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* scope strip under hero */
.scope-strip {
  border-block: 1px solid var(--c700);
  background: var(--c800);
}
.scope-strip .wrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
  padding-block: 16px;
}
.scope-strip span {
  color: var(--c300); font-size: .82rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
}
.scope-strip span::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--l500); }

/* ── Section header ─────────────────────────────────────── */
.SectionHeader { max-width: 760px; margin-bottom: 52px; }
.SectionHeader.center { margin-inline: auto; text-align: center; }
.SectionHeader.center .eyebrow::before { display: none; }
.SectionHeader.center .eyebrow {
  border: 1px solid var(--l200); background: var(--l100);
  color: var(--l600); padding: 4px 14px; border-radius: var(--rpl);
}
.section-dark .SectionHeader.center .eyebrow {
  border-color: var(--c600); background: var(--c800); color: var(--l400);
}

/* ── Problem section ────────────────────────────────────── */
.problem-stage { display: grid; gap: 34px; justify-items: center; }
.problem-chain {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  max-width: 900px;
}
.frag {
  background: var(--s1); border: 1px dashed var(--c300); border-radius: var(--rmd);
  padding: 12px 20px; font-weight: 700; color: var(--c500);
  box-shadow: var(--sh1); position: relative;
}
.frag:nth-child(4n+1) { transform: rotate(-1.6deg); }
.frag:nth-child(4n+3) { transform: rotate(1.4deg); }
.frag-plus { align-self: center; color: var(--c300); font-weight: 800; font-size: 1.1rem; }
.problem-arrow {
  display: flex; align-items: center; gap: 14px; color: var(--c400);
  font-weight: 700; font-size: .85rem; letter-spacing: .08em;
}
.problem-arrow svg { width: 30px; height: 30px; color: var(--l500); }
.one-system {
  max-width: 720px; text-align: center;
  background: var(--c900); color: var(--c50);
  border-radius: var(--rxl); padding: 44px 48px;
  box-shadow: var(--sh4); position: relative; overflow: hidden;
}
.one-system::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--l500), transparent);
}
.one-system h3 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.one-system h3 .accent { color: var(--l400); }
.one-system p { color: var(--c200); margin-top: 10px; }

/* ── Tabs (What HyMotion does) ──────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.tab-btn {
  padding: 10px 20px; border-radius: var(--rpl);
  border: 1.5px solid var(--lbd); background: var(--s1);
  font-weight: 700; color: var(--lts); font-size: .92rem;
  transition: all var(--tf);
}
.tab-btn:hover { border-color: var(--l500); color: var(--l600); }
.tab-btn[aria-selected="true"] {
  background: var(--c900); border-color: var(--c900); color: var(--l400);
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeUp .45s ease both; }
.feature-duo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px; align-items: center;
}
.feature-copy h3 { margin-bottom: 10px; }
.feature-copy p { margin-bottom: 20px; }
.feature-list { display: grid; gap: 11px; margin-bottom: 24px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-weight: 600; color: var(--ltp); font-size: .95rem;
}
.feature-list .tick {
  flex-shrink: 0; inline-size: 20px; block-size: 20px; margin-top: 2px;
  border-radius: 50%; background: var(--l100); color: var(--l600);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
}
.feature-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; color: var(--t600);
  background: var(--t100); border: 1px solid var(--t200);
  padding: 6px 13px; border-radius: var(--rpl);
}

/* ── Workflow (Product experience) ──────────────────────── */
.workflow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 44px; align-items: start; }
.wf-steps { display: grid; gap: 4px; position: relative; }
.wf-step {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: var(--rmd);
  text-align: start; width: 100%;
  border: 1px solid transparent;
  transition: background var(--tf), border-color var(--tf);
  position: relative;
}
.wf-step:hover { background: var(--c800); }
.wf-step .idx {
  flex-shrink: 0; inline-size: 34px; block-size: 34px; border-radius: 50%;
  border: 1.5px solid var(--c600); color: var(--c300);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
  transition: all var(--tb);
}
.wf-step .txt { display: grid; }
.wf-step .txt b { color: var(--c100); font-size: .92rem; line-height: 1.3; }
.wf-step .txt small { color: var(--c400); font-size: .76rem; font-weight: 600; }
.wf-step[aria-selected="true"] { background: var(--c800); border-color: var(--c600); }
.wf-step[aria-selected="true"] .idx {
  background: var(--l500); border-color: var(--l500); color: var(--c900);
  box-shadow: 0 0 14px var(--lglow);
}
.wf-step[aria-selected="true"] .txt b { color: var(--l400); }
.wf-stage { min-width: 0; }
.wf-frame-card {
  background: var(--c800); border: 1px solid var(--c700);
  border-radius: var(--rlg); padding: 22px;
}
.wf-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.wf-meta .who {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--c200); font-size: .82rem; font-weight: 700;
}
.wf-meta .who .role-dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--t400);
}
.wf-nav { display: flex; align-items: center; gap: 8px; }
.wf-nav button {
  inline-size: 34px; block-size: 34px; border-radius: 50%;
  border: 1px solid var(--c600); color: var(--c200);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--tf); font-size: 1rem;
}
.wf-nav button:hover { border-color: var(--l400); color: var(--l400); }
.wf-count { color: var(--c400); font-size: .8rem; font-weight: 700; min-width: 44px; text-align: center; }
.wf-desc { color: var(--c300); font-size: .88rem; margin-top: 16px; min-height: 3em; }
.wf-desc b { color: var(--c50); }

/* ── Local edition diagram ──────────────────────────────── */
.local-hero-copy { max-width: 640px; }
.diagram {
  background: var(--s1); border: 1px solid var(--lbd); border-radius: var(--rxl);
  padding: 44px 34px 38px; box-shadow: var(--sh2);
  display: grid; justify-items: center; gap: 0;
}
.dg-server {
  display: flex; align-items: center; gap: 20px;
  background: var(--c900); color: var(--c50);
  border-radius: var(--rlg); padding: 20px 30px;
  box-shadow: var(--sh3);
}
.dg-server .app-icon { inline-size: 46px; block-size: 46px; border-radius: 12px; }
.dg-server .txt b { display: block; color: #fff; font-size: 1.05rem; }
.dg-server .txt span { color: var(--c300); font-size: .8rem; font-weight: 600; }
.dg-stack { display: grid; gap: 8px; }
.dg-chip {
  background: var(--c800); border: 1px solid var(--c600); color: var(--c100);
  padding: 7px 16px; border-radius: var(--rmd);
  font-size: .8rem; font-weight: 700; text-align: center;
}
.dg-chip .sub { display: block; color: var(--c400); font-weight: 600; font-size: .7rem; }
.dg-connector {
  inline-size: 2px; block-size: 44px; background: var(--c300); position: relative;
}
.dg-connector::after {
  content: ""; position: absolute; bottom: -1px; inset-inline-start: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--c300);
}
.dg-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  color: var(--ltt); background: var(--s2); border: 1px solid var(--lbd);
  padding: 5px 16px; border-radius: var(--rpl);
}
.dg-bus {
  inline-size: min(520px, 92%); block-size: 40px; position: relative;
  border-inline: 2px solid var(--c300);
}
.dg-bus::before, .dg-bus::after { content: ""; position: absolute; inset-inline: 12%; block-size: 2px; background: var(--c300); top: 0; }
.dg-bus::after { top: auto; bottom: 0; }
.dg-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: min(720px, 100%); padding-top: 40px; position: relative; }
.dg-roles::before {
  content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 2px;
  background: var(--c300);
}
.dg-role { display: grid; justify-items: center; gap: 2px; position: relative; padding-top: 14px; }
.dg-role::before {
  content: ""; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 40px; background: var(--c300);
}
.dg-role::after {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--s1); border: 2.5px solid var(--l600);
}
.dg-device {
  inline-size: 100%; background: var(--s1); border: 1px solid var(--lbd);
  border-radius: var(--rmd); padding: 12px 10px; text-align: center;
  box-shadow: var(--sh1);
}
.dg-device .icon {
  inline-size: 34px; block-size: 34px; margin: 0 auto 8px; border-radius: var(--rmd);
  display: flex; align-items: center; justify-content: center;
}
.dg-device b { display: block; font-size: .88rem; }
.dg-device span { font-size: .7rem; color: var(--ltt); font-weight: 600; }
.dg-note {
  margin-top: 28px; display: flex; align-items: center; gap: 10px;
  color: var(--lts); font-size: .85rem; font-weight: 600;
  background: var(--l100); border: 1px solid var(--l200);
  border-radius: var(--rpl); padding: 8px 18px;
}
.dg-note svg { width: 16px; height: 16px; color: var(--l600); flex-shrink: 0; }

/* fact grid */
.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.fact {
  background: var(--s1); border: 1px solid var(--lbd); border-radius: var(--rlg);
  padding: 20px; display: grid; gap: 8px;
}
.fact .icon {
  inline-size: 38px; block-size: 38px; border-radius: var(--rmd);
  background: var(--t100); color: var(--t600);
  display: flex; align-items: center; justify-content: center;
}
.fact b { font-size: .95rem; }
.fact span { font-size: .82rem; color: var(--lts); line-height: 1.5; }

/* ── Role cards (multi-user) ────────────────────────────── */
.role-card {
  background: var(--s1); border: 1px solid var(--lbd); border-radius: var(--rlg);
  padding: 26px; display: grid; gap: 14px; position: relative;
  transition: transform var(--tb), box-shadow var(--tb), border-color var(--tb);
}
.role-card:hover { transform: translateY(-4px); box-shadow: var(--sh3); border-color: var(--l300); }
.role-card .head { display: flex; align-items: center; gap: 13px; }
.role-card .badge {
  inline-size: 44px; block-size: 44px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c900); color: var(--l400);
}
.role-card .head b { display: block; font-size: 1.02rem; color: var(--c900); }
.role-card .head span { font-size: .78rem; color: var(--ltt); font-weight: 700; }
.role-card ul { display: grid; gap: 7px; }
.role-card li {
  font-size: .84rem; color: var(--lts); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.role-card li::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--t500); flex-shrink: 0; }
.same-data {
  margin-top: 40px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  color: var(--lts); font-weight: 700; font-size: .95rem;
}
.same-data .flow-chip {
  background: var(--s1); border: 1px solid var(--lbd); border-radius: var(--rpl);
  padding: 8px 18px; font-size: .85rem;
}
.same-data .flow-chip.hot { background: var(--c900); color: var(--l400); border-color: var(--c900); }
.same-data .arrow { color: var(--c300); font-weight: 800; }

/* ── Attendance methods ─────────────────────────────────── */
.att-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.att-methods { display: grid; gap: 12px; }
.att-method {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--c700); border-radius: var(--rlg);
  padding: 16px 20px; transition: border-color var(--tf), background var(--tf);
}
.att-method:hover { border-color: var(--l500); background: rgba(122, 204, 0, .06); }
.att-method .icon {
  inline-size: 42px; block-size: 42px; border-radius: var(--rmd); flex-shrink: 0;
  background: var(--c800); border: 1px solid var(--c600); color: var(--l400);
  display: flex; align-items: center; justify-content: center;
}
.att-method b { color: var(--c50); display: block; font-size: .95rem; }
.att-method span { color: var(--c400); font-size: .8rem; }
.att-method .tag {
  margin-inline-start: auto; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  color: var(--t300); border: 1px solid var(--c600); border-radius: var(--rpl);
  padding: 3px 10px; flex-shrink: 0;
}
.att-note { color: var(--c400); font-size: .82rem; margin-top: 18px; }

/* ── Comparison ─────────────────────────────────────────── */
.compare {
  max-width: 880px; margin-inline: auto;
  background: var(--s1); border: 1px solid var(--lbd); border-radius: var(--rxl);
  overflow: hidden; box-shadow: var(--sh2);
}
.compare-head, .compare-row {
  display: grid; grid-template-columns: 1fr 52px 1fr; align-items: stretch;
}
.compare-head {
  background: var(--c900); color: var(--c50);
  font-weight: 800; font-size: .95rem;
}
.compare-head > div { padding: 18px 26px; }
.compare-head .old { color: var(--c300); }
.compare-head .new { color: var(--l400); }
.compare-head .mid { display: flex; align-items: center; justify-content: center; padding: 0; }
.compare-row { border-top: 1px solid var(--s3); }
.compare-row:nth-child(odd) { background: var(--bg); }
.compare-row > div { padding: 15px 26px; font-size: .92rem; display: flex; align-items: center; gap: 11px; }
.compare-row .old { color: var(--c400); font-weight: 600; }
.compare-row .new { color: var(--ltp); font-weight: 700; }
.compare-row .mark {
  flex-shrink: 0; inline-size: 20px; block-size: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800;
}
.compare-row .mark.no { background: var(--s3); color: var(--c400); }
.compare-row .mark.yes { background: var(--l100); color: var(--l600); }
.compare-row .mid { justify-content: center; color: var(--c300); padding: 0; }

/* ── Demo CTA ───────────────────────────────────────────── */
.demo-cta { text-align: center; }
.demo-cta .lede { margin-inline: auto; }
.demo-ctas { display: flex; justify-content: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.demo-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--c600); color: var(--c300);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  border-radius: var(--rpl); padding: 5px 14px; margin-bottom: 18px;
}
.demo-badge .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--l500); }

/* ── Roadmap ────────────────────────────────────────────── */
.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rm-card {
  border: 1px solid var(--lbd); border-radius: var(--rlg); padding: 26px;
  background: var(--s1); display: grid; gap: 10px; position: relative;
}
.rm-card .phase {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  color: var(--l600); background: var(--l100);
  border-radius: var(--rpl); padding: 4px 12px; justify-self: start;
}
.rm-card.future .phase { color: var(--t600); background: var(--t100); }
.rm-card b { font-size: 1.05rem; }
.rm-card p { font-size: .86rem; }
.rm-card .mark {
  position: absolute; top: 22px; inset-inline-end: 22px;
  font-size: .68rem; font-weight: 800; color: var(--ltt);
  border: 1px dashed var(--c300); border-radius: var(--rpl); padding: 3px 10px;
}

/* ── About ──────────────────────────────────────────────── */
.about-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; align-items: start; }
.about-points { display: grid; gap: 18px; }
.about-point { display: flex; gap: 16px; }
.about-point .icon {
  flex-shrink: 0; inline-size: 42px; block-size: 42px; border-radius: var(--rmd);
  background: var(--c900); color: var(--l400);
  display: flex; align-items: center; justify-content: center;
}
.about-point b { display: block; font-size: 1rem; margin-bottom: 3px; }
.about-point p { font-size: .88rem; }

/* ── Contact ────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; text-align: start; }
.contact-card {
  background: var(--c800); border: 1px solid var(--c700); border-radius: var(--rlg);
  padding: 22px; display: grid; gap: 8px;
}
a.contact-card { color: inherit; transition: transform var(--tb), border-color var(--tb), box-shadow var(--tb); }
a.contact-card:hover { border-color: var(--l500); transform: translateY(-3px); box-shadow: var(--sh3); }
a.contact-card:hover b { color: var(--l400); }
.contact-card .icon {
  inline-size: 36px; block-size: 36px; border-radius: var(--rmd);
  background: var(--c700); color: var(--l400);
  display: flex; align-items: center; justify-content: center;
}
.contact-card b { color: var(--c50); font-size: .92rem; }
.contact-card span { color: var(--c400); font-size: .82rem; word-break: break-word; }
.contact-card .placeholder {
  color: var(--c300); font-style: italic;
  border: 1px dashed var(--c600); border-radius: var(--rsm);
  padding: 3px 10px; justify-self: start; font-size: .78rem;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer { background: var(--c900); color: var(--c300); border-top: 1px solid var(--c700); }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding: 64px 0 48px;
}
.footer-brand img { height: 30px; margin-bottom: 18px; }
.footer-brand p { color: var(--c400); font-size: .88rem; max-width: 34ch; }
.footer h4 { color: var(--c50); font-size: .85rem; letter-spacing: .06em; margin-bottom: 16px; }
.footer ul { display: grid; gap: 9px; }
.footer ul a { color: var(--c300); font-size: .9rem; font-weight: 600; transition: color var(--tf); overflow-wrap: anywhere; }
.footer ul a:hover { color: var(--l400); }
.footer-bottom {
  border-top: 1px solid var(--c800); padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: var(--c500);
}
.footer-bottom .sep { color: var(--c700); margin-inline: 8px; }

/* ============================================================
   APP FRAME SYSTEM — high-fidelity HyMotion product mockups
   Mirrors real product chrome: charcoal sidebar, light content,
   Cairo, real nav IA. Scales via font-size (em-based interior).
   ============================================================ */
.hm-window {
  font-size: 13px;
  width: 100%;
  background: var(--bg);
  border-radius: 14px;
  border: 1px solid var(--c700);
  box-shadow: var(--sh4), 0 24px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
  color: var(--ltp);
  line-height: 1.45;
  text-align: start;
  direction: ltr; /* product frames stay LTR even in AR site mode */
}
.section-dark .hm-window, .hero .hm-window, .wf-frame-card .hm-window { border-color: var(--c600); }
.hm-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: var(--c800); border-bottom: 1px solid var(--c700);
  padding: .62em 1em;
}
.hm-titlebar .dots { display: flex; gap: .38em; }
.hm-titlebar .dots i { inline-size: .62em; block-size: .62em; border-radius: 50%; background: var(--c600); }
.hm-titlebar .dots i:first-child { background: #3A3A3A; }
.hm-titlebar .url {
  margin-inline: auto; background: var(--c900); color: var(--c300);
  border-radius: var(--rpl); padding: .22em 1.2em; font-size: .82em; font-weight: 600;
  display: inline-flex; align-items: center; gap: .6em;
}
.hm-titlebar .url .lock { opacity: .7; }
.hm-app { display: flex; min-height: 430px; }
.hm-sb {
  inline-size: 15.4em; flex-shrink: 0;
  background: var(--c900); color: var(--c200);
  display: flex; flex-direction: column;
  padding: .9em .8em 1em;
  border-inline-end: 1px solid var(--c800);
}
.hm-brand {
  display: flex; align-items: center; gap: .55em;
  padding: .3em .5em .9em; margin-bottom: .5em;
  border-bottom: 1px solid var(--c800);
}
.hm-brand svg { inline-size: 1.7em; block-size: 1.7em; }
.hm-brand span { color: #fff; font-weight: 800; font-size: 1.05em; letter-spacing: -.01em; }
.hm-nav { display: grid; gap: .15em; overflow: hidden; }
.hm-group {
  font-size: .68em; font-weight: 700; letter-spacing: .12em;
  color: var(--c500); padding: .9em .6em .35em;
}
.hm-item {
  display: flex; align-items: center; gap: .6em;
  padding: .42em .6em; border-radius: var(--rsm);
  font-size: .84em; font-weight: 600; color: var(--c200);
  white-space: nowrap;
}
.hm-item svg { inline-size: 1.15em; block-size: 1.15em; opacity: .8; flex-shrink: 0; }
.hm-item.is-active {
  background: linear-gradient(90deg, rgba(122, 204, 0, .16), rgba(122, 204, 0, .05));
  color: var(--l400); box-shadow: inset 2.5px 0 0 var(--l500);
}
.hm-item.is-active svg { opacity: 1; }
.hm-sb-foot {
  margin-top: auto; padding-top: .8em; border-top: 1px solid var(--c800);
  display: flex; align-items: center; gap: .55em; font-size: .8em; color: var(--c300);
}
.hm-user {
  inline-size: 1.9em; block-size: 1.9em; border-radius: 50%;
  background: var(--t600); color: #fff; font-weight: 800; font-size: .8em;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hm-sb-foot b { color: var(--c100); font-size: .92em; display: block; line-height: 1.25; }
.hm-sb-foot small { color: var(--c400); font-size: .82em; }
.hm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.hm-top {
  display: flex; align-items: center; gap: .9em;
  padding: .75em 1.2em; background: var(--s1);
  border-bottom: 1px solid var(--s3);
  flex-wrap: wrap;
}
.hm-top .crumb { font-weight: 800; font-size: 1em; color: var(--ltp); white-space: nowrap; }
.hm-top .crumb small { color: var(--ltt); font-weight: 600; }
.hm-search {
  margin-inline: auto; flex: 1 1 auto; inline-size: 17em; max-width: 17em; min-width: 0;
  background: var(--s2); border: 1px solid var(--s3); border-radius: var(--rpl);
  padding: .32em .9em; font-size: .8em; color: var(--ltt);
  display: flex; align-items: center; gap: .5em;
  white-space: nowrap; overflow: hidden;
}
.hm-search svg { flex-shrink: 0; inline-size: 1em; block-size: 1em; }
.hm-search span { overflow: hidden; text-overflow: ellipsis; }
.hm-chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .74em; font-weight: 700; border-radius: var(--rpl);
  padding: .3em .8em; background: var(--l100); color: var(--l600);
  border: 1px solid var(--l200); white-space: nowrap;
}
.hm-chip.teal { background: var(--t100); color: var(--t600); border-color: var(--t200); }
.hm-chip.live::before {
  content: ""; inline-size: .55em; block-size: .55em; border-radius: 50%;
  background: var(--suc500); box-shadow: 0 0 0 2px rgba(34, 197, 94, .25);
  animation: pulse 2.2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.hm-body { padding: 1.15em 1.2em 1.3em; display: grid; gap: .95em; align-content: start; }
.hm-h { font-size: 1.06em; font-weight: 800; color: var(--ltp); }
.hm-h small { display: block; font-size: .78em; color: var(--ltt); font-weight: 600; margin-top: .1em; }
/* KPIs */
.hm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; }
.hm-kpi {
  background: var(--s1); border: 1px solid var(--s3); border-radius: var(--rmd);
  padding: .8em .95em; box-shadow: var(--sh1);
}
.hm-kpi .l { font-size: .72em; font-weight: 700; color: var(--ltt); }
.hm-kpi .v { font-size: 1.55em; font-weight: 800; color: var(--ltp); line-height: 1.15; }
.hm-kpi .v small { font-size: .55em; color: var(--lts); font-weight: 700; }
.hm-kpi .d { font-size: .72em; font-weight: 700; display: flex; align-items: center; gap: .35em; }
.hm-kpi .d.up { color: var(--suc600); }
.hm-kpi .d.flat { color: var(--ltt); }
/* cards */
.hm-card {
  background: var(--s1); border: 1px solid var(--s3); border-radius: var(--rmd);
  box-shadow: var(--sh1); padding: .95em 1.05em;
  container-type: inline-size;
}
/* narrow cards stack their inner columns */
@container (max-width: 240px) {
  .hm-occ { flex-direction: column; text-align: center; }
  .hm-cols, .hm-cols-eq { grid-template-columns: 1fr; }
}
.hm-card h4 { font-size: .84em; font-weight: 800; color: var(--ltp); margin-bottom: .7em; display: flex; align-items: center; gap: .5em; }
.hm-card h4 .more { margin-inline-start: auto; color: var(--ltt); font-weight: 600; font-size: .9em; }
.hm-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .8em; }
.hm-cols-eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
/* rows (tables) */
.hm-row {
  display: flex; align-items: center; gap: .8em;
  padding: .5em .2em; border-top: 1px solid var(--s2);
  font-size: .84em;
}
.hm-row:first-of-type { border-top: 0; }
.hm-row .who { display: flex; align-items: center; gap: .6em; min-width: 0; }
.hm-row .who > span:not(.hm-av) { display: grid; min-width: 0; }
.hm-row .who b { font-weight: 700; color: var(--ltp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hm-row .who small { color: var(--ltt); font-size: .88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hm-row .fill { flex: 1; }
.hm-row .amt { font-weight: 800; white-space: nowrap; }
.hm-row .amt.muted { color: var(--ltt); font-weight: 600; }
/* pills */
.hm-pill {
  font-size: .74em; font-weight: 800; border-radius: var(--rpl);
  padding: .22em .75em; white-space: nowrap;
}
.hm-pill.ok   { background: var(--suc100); color: var(--suctxt); }
.hm-pill.warn { background: var(--wrn100); color: var(--wrntxt); }
.hm-pill.dng  { background: var(--dng100); color: var(--dngtxt); }
.hm-pill.info { background: var(--inf100); color: var(--inftxt); }
.hm-pill.frz  { background: var(--frz100); color: var(--frztxt); }
.hm-pill.mut  { background: var(--s2); color: var(--lts); }
.hm-pill.lime { background: var(--l100); color: var(--l600); }
/* avatars */
.hm-av {
  inline-size: 2em; block-size: 2em; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78em; font-weight: 800; color: #fff;
}
/* bars chart */
.hm-bars { display: flex; align-items: flex-end; gap: .55em; block-size: 7.2em; padding-top: .5em; }
.hm-bars .bar {
  flex: 1; block-size: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: .35em;
}
.hm-bars .bar i {
  inline-size: 100%; border-radius: .25em .25em 0 0;
  background: linear-gradient(180deg, var(--l400), var(--l600));
  opacity: .9;
  max-block-size: calc(100% - 1.6em);
}
.hm-bars .bar.hi i { background: linear-gradient(180deg, var(--l400), var(--l500)); box-shadow: 0 0 12px var(--lglow); }
.hm-bars .bar span { font-size: .68em; color: var(--ltt); font-weight: 700; }
/* occupancy ring */
.hm-occ { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
.hm-occ > div { min-width: 0; }
.hm-ring {
  inline-size: 5.4em; block-size: 5.4em; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--l500) 0 42%, var(--s3) 42% 100%);
  display: grid; place-items: center;
}
.hm-ring i {
  inline-size: 4.1em; block-size: 4.1em; border-radius: 50%; background: var(--s1);
  display: grid; place-items: center; font-style: normal;
  font-weight: 800; font-size: 1em; color: var(--ltp);
}
/* scan box (check-in) */
.hm-scan {
  border: 1.5px dashed var(--l500); background: var(--l100);
  border-radius: var(--rmd); padding: .9em 1em;
  display: flex; align-items: center; gap: 1em;
}
.hm-scan .icon {
  inline-size: 2.6em; block-size: 2.6em; border-radius: var(--rmd);
  background: var(--s1); border: 1px solid var(--l300);
  color: var(--l600); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hm-scan .icon svg { inline-size: 1.4em; block-size: 1.4em; }
.hm-scan b { font-size: .92em; color: var(--ltp); display: block; }
.hm-scan small { font-size: .78em; color: var(--lts); font-weight: 600; }
.hm-scan .code {
  margin-inline-start: auto; font-family: 'Cascadia Mono', 'Consolas', monospace;
  background: var(--s1); border: 1px solid var(--l300); border-radius: var(--rsm);
  padding: .35em .8em; font-size: 1em; font-weight: 700; color: var(--l600);
  letter-spacing: .12em;
}
/* mini form */
.hm-form { display: grid; gap: .7em; max-width: 26em; }
.hm-form label { font-size: .76em; font-weight: 700; color: var(--lts); display: grid; gap: .35em; }
.hm-field {
  background: var(--s1); border: 1px solid var(--lbd); border-radius: var(--rsm);
  block-size: 2.4em; box-shadow: var(--sh1);
}
.hm-field.w-filled { display: flex; align-items: center; padding-inline: .8em; font-size: .85em; font-weight: 600; color: var(--ltp); }
.hm-btn {
  justify-self: start;
  background: var(--l500); color: var(--c900);
  font-size: .84em; font-weight: 800;
  border-radius: var(--rsm); padding: .55em 1.3em;
  box-shadow: 0 1px 6px rgba(122, 204, 0, .4);
}
.hm-btn.ghost {
  background: var(--s1); color: var(--lts);
  border: 1px solid var(--lbd); box-shadow: none;
}
/* PVC member card */
.hm-pvc-wrap { display: grid; justify-items: center; gap: .8em; }
.hm-pvc {
  inline-size: 21em; max-width: 100%; aspect-ratio: 1.586;
  border-radius: .9em; padding: 1em 1.2em;
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(122, 204, 0, .35), transparent 55%),
    linear-gradient(135deg, var(--c800), var(--c900));
  color: var(--c50); box-shadow: var(--sh3); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hm-pvc .top { display: flex; align-items: center; justify-content: space-between; }
.hm-pvc .gym { display: flex; align-items: center; gap: .5em; font-weight: 800; font-size: .85em; }
.hm-pvc .gym .sq { inline-size: 1.6em; block-size: 1.6em; border-radius: .4em; background: var(--l500); color: var(--c900); display: grid; place-items: center; font-size: .9em; }
.hm-pvc .name { font-size: 1.05em; font-weight: 800; color: #fff; }
.hm-pvc .meta { display: flex; justify-content: space-between; align-items: flex-end; }
.hm-pvc .meta small { font-size: .66em; color: var(--c300); display: block; }
.hm-pvc .meta b { font-size: .85em; color: var(--c50); }
.hm-pvc .barcode {
  inline-size: 8.5em; block-size: 1.7em;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 9px, #fff 9px 12px, transparent 12px 14px);
  opacity: .92;
}
/* live check-in feed */
.hm-feed { display: grid; gap: .45em; }
.hm-feed .hm-row { border-top: 0; background: var(--s1); border: 1px solid var(--s2); border-radius: var(--rsm); padding: .5em .7em; }
/* plan picker */
.hm-plan {
  display: flex; align-items: center; gap: .8em;
  border: 1.5px solid var(--s3); border-radius: var(--rmd);
  padding: .7em .9em; background: var(--s1); font-size: .86em;
}
.hm-plan.sel { border-color: var(--l500); background: var(--l100); box-shadow: 0 0 0 3px rgba(122, 204, 0, .12); }
.hm-plan b { font-weight: 800; }
.hm-plan small { color: var(--ltt); font-weight: 600; display: block; }
.hm-plan .price { margin-inline-start: auto; font-weight: 800; white-space: nowrap; }
/* shift cash table */
.hm-cash { display: grid; gap: .45em; font-size: .86em; }
.hm-cash .line { display: flex; justify-content: space-between; padding: .45em .2em; border-bottom: 1px dashed var(--s3); }
.hm-cash .line b { color: var(--ltp); }
.hm-cash .line.total { border-bottom: 0; font-weight: 800; font-size: 1.05em; color: var(--l600); }
/* toast / confirm strip */
.hm-toast {
  display: flex; align-items: center; gap: .6em;
  background: var(--suc100); color: var(--suctxt);
  border: 1px solid rgba(22, 163, 74, .3);
  border-radius: var(--rmd); padding: .6em .9em; font-size: .82em; font-weight: 700;
}
.hm-toast .ok {
  inline-size: 1.5em; block-size: 1.5em; border-radius: 50%;
  background: var(--suc500); color: #fff; font-size: .85em;
  display: grid; place-items: center; flex-shrink: 0;
}
/* demo environment banner (in-frame) */
.hm-demo-banner {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  background: var(--t700); color: var(--t100);
  font-size: .78em; font-weight: 700; padding: .5em 1em;
}
.hm-demo-banner .dot { inline-size: .55em; block-size: .55em; border-radius: 50%; background: var(--t300); }

/* product frame responsive scaling */
@media (max-width: 1080px) { .hm-window { font-size: 12px; } }
@media (max-width: 920px)  { .hm-window { font-size: 11px; } .hm-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  {
  .hm-window { font-size: 10.5px; }
  .hm-sb { display: none; }
  .hm-app { min-height: 380px; }
}
@media (max-width: 520px)  { .hm-window { font-size: 10px; } .hm-cols, .hm-cols-eq { grid-template-columns: 1fr; } }

/* ── Reveal on scroll ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Count-up numbers ───────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat {
  background: var(--c800); border: 1px solid var(--c700); border-radius: var(--rlg);
  padding: 26px; text-align: center;
}
.stat .num { font-size: 2.3rem; font-weight: 800; color: var(--l400); line-height: 1.1; }
.stat .lbl { color: var(--c300); font-size: .85rem; font-weight: 600; margin-top: 6px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .grid-4, .fact-grid, .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .section { padding: 72px 0; }
  .Navbar-links { display: none; }
  .Navbar .btn-primary { display: none; }
  .menu-btn { display: inline-flex; }
  .Hero-grid, .feature-duo, .att-grid, .about-duo { grid-template-columns: 1fr; }
  .Hero-grid { gap: 44px; }
  .hero { padding: 60px 0 72px; }
  .workflow { grid-template-columns: 1fr; }
  .dg-roles { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .dg-roles::before { display: none; }
  .dg-role::before { display: none; }
  .roadmap { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-4, .fact-grid, .contact-grid, .stat-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .hero-chip { display: none; }
  .compare-head > div, .compare-row > div { padding: 13px 16px; font-size: .84rem; }
  .one-system { padding: 34px 24px; }
  .diagram { padding: 30px 18px 28px; }
}

/* ── Floating WhatsApp ──────────────────────────────────── */
.WhatsAppFloat {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25D366;
  color: #fff;
  border-radius: var(--rpl);
  padding: 12px 19px;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
  transition: transform var(--tf), box-shadow var(--tf), background var(--tf);
  animation: waIn .5s ease .7s both;
}
.WhatsAppFloat:hover { background: #1fbf5b; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(37, 211, 102, .5); }
.WhatsAppFloat svg { inline-size: 21px; block-size: 21px; flex-shrink: 0; }
@keyframes waIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .WhatsAppFloat { inset-block-end: 16px; inset-inline-end: 16px; padding: 11px 16px; font-size: .88rem; }
}

/* ── RTL ────────────────────────────────────────────────── */
[dir="rtl"] body { font-family: 'Cairo', 'Segoe UI', sans-serif; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] .Navbar-links { margin-inline-start: 0; }
[dir="rtl"] .problem-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .hm-item.is-active { box-shadow: inset -2.5px 0 0 var(--l500); }
/* frames stay LTR: reset direction inside */
[dir="rtl"] .hm-window { direction: ltr; }