/* ==========================================================================
   MedVerse ViewRAI — design system
   Brand: MedVerse (deep teal #013533, lavender→emerald→lime signature gradient)
   Typeface: Inter (brand font)
   Mode: dark primary
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand primitives — taken from the MedVerse logo artwork */
  --mv-teal-950: #011917;
  --mv-teal-900: #04211f;
  --mv-teal-850: #062d2a;
  --mv-teal-800: #013533;
  --mv-teal-700: #0a423e;
  --mv-teal-600: #10534d;

  --mv-emerald: #1ab585;
  --mv-emerald-400: #4dc893;
  --mv-emerald-300: #75d79f;
  --mv-lime: #defebd;
  --mv-lime-dim: #a7e9ad;
  --mv-lavender: #dab9f2;
  --mv-purple: #ad70eb;
  --mv-sky: #99b7cd;

  --mv-paper: #fbf7f4;
  --mv-mist: #d5d9db;

  /* Semantic surfaces */
  --bg: var(--mv-teal-900);
  --bg-deep: var(--mv-teal-950);
  --surface-1: #072926;
  --surface-2: #0a3330;
  --surface-3: #0e3f3a;
  --surface-glass: rgba(10, 51, 48, 0.55);

  --border: rgba(166, 226, 205, 0.14);
  --border-strong: rgba(166, 226, 205, 0.26);
  --border-brand: rgba(26, 181, 133, 0.45);

  /* Text */
  --text: #f1faf6;
  --text-2: #c3ded4;
  --text-3: #93b6ac;
  --text-on-brand: #012a20;

  /* Functional */
  --danger: #ff6b6b;
  --warning: #ffc978;
  --ring: var(--mv-emerald-400);

  /* Signature gradient */
  --grad-brand: linear-gradient(120deg, #dab9f2 0%, #72b6b7 22%, #1ab585 48%, #75d79f 72%, #defebd 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(218, 185, 242, .18), rgba(26, 181, 133, .18) 50%, rgba(222, 254, 189, .18));
  --grad-surface: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 55%);

  /* Type */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.4rem, 1.6rem + 3.1vw, 4.15rem);
  --fs-h1: clamp(2.1rem, 1.45rem + 2.9vw, 3.6rem);
  --fs-h2: clamp(1.8rem, 1.35rem + 2vw, 2.85rem);
  --fs-h3: clamp(1.25rem, 1.12rem + .55vw, 1.55rem);
  --fs-h4: 1.0625rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing — 4pt rhythm */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radius / elevation */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --e-1: 0 1px 2px rgba(0, 0, 0, .35);
  --e-2: 0 8px 24px -12px rgba(0, 0, 0, .55);
  --e-3: 0 24px 60px -24px rgba(0, 0, 0, .7);
  --e-glow: 0 0 0 1px rgba(26, 181, 133, .35), 0 18px 48px -18px rgba(26, 181, 133, .55);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 150ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --header-h: 72px;

  /* Z-scale */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient field: fine grid + two soft brand blooms. Purely decorative. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60rem 40rem at 82% -10%, rgba(26, 181, 133, .16), transparent 62%),
    radial-gradient(46rem 34rem at 4% 8%, rgba(173, 112, 235, .11), transparent 60%),
    radial-gradient(70rem 50rem at 50% 108%, rgba(222, 254, 189, .07), transparent 60%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(166, 226, 205, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 226, 205, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--space-4);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; line-height: 1.25; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.006em; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--mv-emerald-300); text-decoration-color: rgba(117, 215, 159, .38); text-underline-offset: .22em; }
a:hover { color: var(--mv-lime); }

strong { font-weight: 620; color: var(--text); }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
  margin: var(--space-7) 0;
}

::selection { background: rgba(26, 181, 133, .32); color: var(--mv-lime); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 760px; }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--edge { border-top: 1px solid var(--border); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  transform: translateY(-160%);
  z-index: var(--z-modal);
  background: var(--mv-emerald);
  color: var(--text-on-brand);
  font-weight: 620;
  padding: .65rem 1.1rem;
  border-radius: var(--r-sm);
  transition: transform var(--t-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.stack > * + * { margin-top: var(--space-4); }
.center { text-align: center; margin-inline: auto; }

/* Section heading block */
.section-head { max-width: 62ch; margin-bottom: var(--space-7); }
.section-head.center { text-align: center; }
.section-head p { color: var(--text-2); font-size: 1.125rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: 620;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mv-emerald-300);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}
.section-head.center .eyebrow::before { display: none; }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--text-2); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: .7rem 1.35rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn .icon { width: 18px; height: 18px; flex: none; }

.btn--primary {
  --btn-fg: var(--text-on-brand);
  --btn-bd: transparent;
  background: var(--grad-brand);
  background-size: 160% 100%;
  background-position: 20% 50%;
  font-weight: 660;
  box-shadow: 0 10px 30px -14px rgba(26, 181, 133, .85);
  transition: transform var(--t-fast) var(--ease-out),
              background-position var(--t-slow) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.btn--primary:hover {
  color: var(--text-on-brand);
  background-position: 80% 50%;
  box-shadow: 0 16px 44px -14px rgba(26, 181, 133, .95);
}

.btn--solid {
  --btn-bg: var(--surface-2);
  --btn-bd: var(--border-strong);
}
.btn--solid:hover { --btn-bg: var(--surface-3); --btn-bd: var(--border-brand); color: var(--text); }

.btn--ghost { --btn-bd: transparent; color: var(--text-2); }
.btn--ghost:hover { color: var(--text); background: rgba(255, 255, 255, .05); }

.btn--lg { min-height: 54px; padding: .9rem 1.85rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              backdrop-filter var(--t-base) var(--ease-out);
}
.site-header.is-stuck {
  background: rgba(4, 33, 31, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
  flex: none;
}
.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px -8px rgba(26, 181, 133, .8);
}
.brand__mark svg { width: 22px; height: 22px; color: var(--mv-teal-800); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-weight: 660; font-size: 1.0625rem; letter-spacing: -0.02em; }
/* ViewRAI is a name, not a label, so it is set in its own case: uppercasing it
   would collapse View + RAI into one unreadable run. That also means dropping
   the wide tracking, which only existed to keep an all-caps label legible. */
.brand__sub {
  font-size: .8125rem;
  letter-spacing: .005em;
  color: var(--text-3);
  font-weight: 600;
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .8rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav__link[aria-current="page"] { color: var(--mv-lime); background: rgba(26, 181, 133, .12); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    background: rgba(4, 33, 31, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-5) var(--space-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility var(--t-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .nav__link { min-height: 48px; font-size: 1rem; padding-inline: var(--space-4); }
  .header-actions .btn--ghost { display: none; }
}

/* Small phones: the brand lockup, the CTA and the menu button together are
   wider than a 375px viewport at full padding. Tighten both. */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
  .header-inner { gap: var(--space-3); }
  .header-actions { gap: var(--space-1); }
  .header-actions .btn--primary { padding-inline: 1rem; }
  .brand__sub { font-size: .75rem; }
}

/* --------------------------------------------------------------------------
   6. Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface-1);
  background-image: var(--grad-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.card--hover:hover {
  border-color: var(--border-brand);
  transform: translateY(-3px);
  box-shadow: var(--e-3);
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--text-2); font-size: var(--fs-sm); }

.icon-tile {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(26, 181, 133, .13);
  border: 1px solid rgba(26, 181, 133, .28);
  color: var(--mv-emerald-300);
  margin-bottom: var(--space-4);
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile--lavender { background: rgba(218, 185, 242, .12); border-color: rgba(218, 185, 242, .3); color: var(--mv-lavender); }
.icon-tile--lime { background: rgba(222, 254, 189, .1); border-color: rgba(222, 254, 189, .26); color: var(--mv-lime); }

/* Bento grid */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.bento > * { grid-column: span 6; }

@media (min-width: 720px) {
  .bento > * { grid-column: span 3; }
  .bento .span-2 { grid-column: span 3; }
  .bento .span-3 { grid-column: span 6; }
  .bento .span-4 { grid-column: span 6; }
}
@media (min-width: 1020px) {
  .bento > * { grid-column: span 2; }
  .bento .span-2 { grid-column: span 2; }
  .bento .span-3 { grid-column: span 3; }
  .bento .span-4 { grid-column: span 4; }
}

.bento .card,
.grid .card { display: flex; flex-direction: column; }
.bento .card--feature { min-height: 210px; }

/* Cards of unequal text length still line their call-to-action up along the
   bottom edge. Beats .mt-5 on specificity, which is the point. */
.grid .card > .btn { margin-top: auto; }

/* Grid and flex children default to a min-size of auto, which lets long words,
   nowrap labels and wide tables blow past the track. Opt every layout child
   out of that once, here, instead of chasing overflow per component. */
.bento > *,
.grid > *,
.split > *,
.hero__grid > *,
.contact-grid > *,
.plans > *,
.steps > *,
.stats > * { min-width: 0; }

/* Generic responsive grids */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
/* Two download cards would each be half of a 1360px container otherwise, which
   reads as two banners rather than a choice. */
.grid--platforms { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); max-width: 980px; }

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
}

/* --------------------------------------------------------------------------
   7. Chips, pills, badges
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .85rem .38rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: rgba(10, 51, 48, .6);
  font-size: var(--fs-xs);
  font-weight: 560;
  color: var(--text-2);
  letter-spacing: -0.003em;
}
.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mv-emerald);
  box-shadow: 0 0 0 4px rgba(26, 181, 133, .18);
  flex: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .6rem;
  border-radius: var(--r-pill);
  font-size: .6875rem;
  font-weight: 660;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(26, 181, 133, .16);
  color: var(--mv-emerald-300);
  border: 1px solid rgba(26, 181, 133, .3);
}
.badge--lavender { background: rgba(218, 185, 242, .14); color: var(--mv-lavender); border-color: rgba(218, 185, 242, .3); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  padding: .34rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .035);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem) clamp(3rem, 2rem + 5vw, 5.5rem); }

/* minmax(0, …) rather than a bare 1fr: grid items default to min-width:auto,
   and the viewer mock's nowrap toolbar and monospace header would otherwise
   push the track wider than the viewport on phones. */
.hero__grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1060px) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr); align-items: center; }
}

.hero h1 { font-size: var(--fs-display); margin-bottom: var(--space-5); max-width: min(100%, 15ch); }
.hero__lede { font-size: clamp(1.0625rem, .98rem + .35vw, 1.1875rem); color: var(--text-2); max-width: 52ch; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.hero__meta-item { display: inline-flex; align-items: center; gap: .5rem; }
.hero__meta-item svg { width: 17px; height: 17px; color: var(--mv-emerald-300); flex: none; }

/* --------------------------------------------------------------------------
   9. Product screenshots
   --------------------------------------------------------------------------
   The stylised .viewer mock that used to live here was replaced by real,
   de-identified captures of the application; see .shot at the end of this
   file. Its ~150 lines went with it rather than being left behind to be
   maintained by mistake. */


/* --------------------------------------------------------------------------
   10. Logo / trust strip
   -------------------------------------------------------------------------- */
.strip {
  border-block: 1px solid var(--border);
  background: rgba(6, 45, 42, .35);
  padding-block: var(--space-5);
}
.strip__label {
  font-size: var(--fs-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  margin-bottom: var(--space-4);
}
.strip__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
}
.strip__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 560;
}
.strip__item svg { width: 18px; height: 18px; color: var(--mv-emerald-300); flex: none; }

/* --------------------------------------------------------------------------
   11. Stat / metric row
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(10, 51, 48, .45);
}
.stat__value {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 660;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   12. Steps / workflow
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(7, 41, 38, .5);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--mv-emerald-300);
  letter-spacing: .1em;
  margin-bottom: var(--space-3);
}
.step h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.step p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }

/* --------------------------------------------------------------------------
   13. Feature list with check icons
   -------------------------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; color: var(--text-2); font-size: var(--fs-sm); }
.checklist svg { width: 20px; height: 20px; color: var(--mv-emerald); margin-top: 2px; }
.checklist strong { display: block; color: var(--text); font-weight: 600; }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table caption { text-align: left; color: var(--text-3); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; padding-bottom: var(--space-3); }
.spec-table th, .spec-table td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table th { color: var(--text-3); font-weight: 560; width: 34%; }
.spec-table td { color: var(--text-2); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Comparison table */
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
.compare th, .compare td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); text-align: left; }
.compare thead th { color: var(--text); font-weight: 620; font-size: 1rem; border-bottom-color: var(--border-strong); }
.compare tbody th { color: var(--text-2); font-weight: 500; }
.compare td { text-align: center; color: var(--text-2); }
.compare td:first-child { text-align: left; }
.compare .yes { color: var(--mv-emerald-300); }
.compare .no { color: var(--text-3); }
.compare .yes svg, .compare .no svg { width: 18px; height: 18px; margin-inline: auto; }
.compare tbody tr:hover { background: rgba(255, 255, 255, .025); }
.compare .is-featured { background: rgba(26, 181, 133, .06); }

/* --------------------------------------------------------------------------
   14. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(7, 41, 38, .5);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out);
}
.faq details[open] { border-color: var(--border-brand); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2px solid var(--mv-emerald-300);
  border-bottom: 2px solid var(--mv-emerald-300);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { background: rgba(255, 255, 255, .03); }
.faq .faq__body { padding: 0 var(--space-5) var(--space-5); color: var(--text-2); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-sm); font-weight: 560; color: var(--text); }
.field .req { color: var(--mv-emerald-300); }
.field .hint { font-size: var(--fs-xs); color: var(--text-3); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: rgba(2, 20, 19, .6);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: #6f948b; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-brand); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--mv-emerald);
  box-shadow: 0 0 0 3px rgba(26, 181, 133, .22);
  background: rgba(2, 20, 19, .9);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393b6ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}

.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.field__error { font-size: var(--fs-xs); color: var(--danger); display: none; }
.field--error .field__error { display: block; }

.checkbox { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; font-size: var(--fs-sm); color: var(--text-2); }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--mv-emerald); }

.form-note {
  font-size: var(--fs-xs);
  color: var(--text-3);
  border-left: 2px solid var(--border-brand);
  padding-left: var(--space-3);
}

.alert {
  padding: var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-brand);
  background: rgba(26, 181, 133, .1);
  color: var(--text);
  font-size: var(--fs-sm);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.alert svg { width: 20px; height: 20px; flex: none; color: var(--mv-emerald-300); margin-top: 1px; }
.alert[hidden] { display: none; }

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  border: 1px solid var(--border-brand);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(218, 185, 242, .14), transparent 60%),
    radial-gradient(70% 130% at 90% 100%, rgba(26, 181, 133, .2), transparent 62%),
    var(--surface-1);
  overflow: hidden;
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--space-4); }
.cta-band p { color: var(--text-2); max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(1, 25, 23, .55);
  padding-block: var(--space-8) var(--space-5);
  margin-top: var(--space-9);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.footer-brand { grid-column: 1 / -1; max-width: 34ch; }
@media (min-width: 900px) { .footer-brand { grid-column: span 2; max-width: 32ch; } }
.footer-brand p { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--space-4); }

.footer-col h4 {
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-4);
  font-weight: 620;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a {
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  transition: color var(--t-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--mv-lime); }

.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom a { color: var(--text-3); text-decoration: none; }
.footer-bottom a:hover { color: var(--text-2); }

.social { display: flex; gap: var(--space-2); }
.social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.social a:hover { color: var(--mv-lime); border-color: var(--border-brand); background: rgba(26, 181, 133, .1); }
.social svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   18. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { max-width: 20ch; }
.page-hero p { max-width: 62ch; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0 0 var(--space-4); padding: 0; font-size: var(--fs-xs); color: var(--text-3); }
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--mv-emerald-300); }
.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: rgba(147, 182, 172, .45); }

/* --------------------------------------------------------------------------
   19. Download page bits
   -------------------------------------------------------------------------- */
/* Wide call-to-action band: copy on the left, one button on the right.
   .promo-band is the same thing outside the download page. */
.download-card,
.promo-band {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(26, 181, 133, .16), transparent 60%),
    var(--surface-1);
}
@media (min-width: 820px) {
  .download-card,
  .promo-band { grid-template-columns: 1fr auto; }
}
.download-card h3,
.promo-band h3 { margin-bottom: var(--space-2); }
.download-card .meta,
.promo-band .meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.promo-band p { color: var(--text-2); }

/* site.js stamps data-recommended on the card matching the visitor's OS. */
/* align-self, because .grid .card is a flex column and a badge left to stretch
   turns into a full-width bar. */
.card__rec { display: none; align-self: flex-start; margin-bottom: var(--space-4); }
.card[data-recommended="true"] { border-color: var(--border-brand); box-shadow: var(--e-glow); }
.card[data-recommended="true"] .card__rec { display: inline-flex; }

.release { border-left: 2px solid var(--border-strong); padding-left: var(--space-5); }
.release + .release { margin-top: var(--space-6); }
.release__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.release__ver { font-family: var(--font-mono); font-weight: 600; color: var(--mv-lime); }
.release__date { font-size: var(--fs-xs); color: var(--text-3); }
.release ul { margin: 0; padding-left: 1.1rem; color: var(--text-2); font-size: var(--fs-sm); display: grid; gap: .35rem; }

/* --------------------------------------------------------------------------
   20. Pricing cards
   -------------------------------------------------------------------------- */
.plans { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; }

/* Four tiers: auto-fit would leave a lone third-width card on a second row at
   tablet widths, so step 1 → 2 → 4 explicitly. */
@media (min-width: 700px) and (max-width: 1179px) { .plans--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .plans--4 { grid-template-columns: repeat(4, 1fr); } }
.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  background-image: var(--grad-surface);
}
/* Only one card carries a badge, so take it out of flow and reserve the space
   on every card. Otherwise the featured card's heading, price and feature list
   all sit one badge-height lower than its neighbours. */
.plans--4 .plan { position: relative; padding-top: var(--space-8); }
.plans--4 .plan > .badge { position: absolute; top: var(--space-5); left: var(--space-5); }

.plan--featured {
  border-color: var(--border-brand);
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(26, 181, 133, .16), transparent 62%),
    var(--surface-2);
  box-shadow: var(--e-3);
}
.plan__name { font-size: 1.2rem; font-weight: 660; letter-spacing: -0.02em; }
.plan__for { color: var(--text-3); font-size: var(--fs-sm); margin-top: .3rem; }
.plan__price { margin: var(--space-5) 0; }
.plan__amount {
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.6rem);
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.plan--featured .plan__amount,
.plan__amount--brand {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan__unit { font-size: var(--fs-sm); color: var(--text-3); margin-left: .45rem; }
/* Currency code sits small in front of the figure so six-digit EGP amounts
   still fit a four-across card. */
.plan__cur { font-size: .42em; font-weight: 600; letter-spacing: .02em; margin-right: .3em; vertical-align: .55em; }
.plan__price .plan__usd { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: .45rem; font-variant-numeric: tabular-nums; }
.plan__price small { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-top: .55rem; }
.plan__price .plan__term { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: .2rem; }
.plan .badge { align-self: flex-start; }
/* flex:1 makes the list fill the card so the buttons line up across the row;
   align-content keeps the rows packed instead of spreading over that space. */
.plan .checklist { margin-block: var(--space-5); flex: 1; align-content: start; }
.plan .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   21. Contact page
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.contact-item { display: grid; grid-template-columns: 42px 1fr; gap: var(--space-4); align-items: start; }
.contact-item + .contact-item { margin-top: var(--space-5); }
.contact-item .icon-tile { width: 42px; height: 42px; margin: 0; }
.contact-item h4 { margin-bottom: .2rem; }
.contact-item p, .contact-item a { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }
.contact-item a { text-decoration: none; }
.contact-item a:hover { color: var(--mv-lime); text-decoration: underline; }

/* --------------------------------------------------------------------------
   21b. WhatsApp floating action button
   Deliberately WhatsApp's own green rather than a brand token: people scan for
   that colour and glyph together, and it reads as "leaves this site", which is
   what it does.
   -------------------------------------------------------------------------- */
.wa-fab {
  --wa: #25d366;
  position: fixed;
  right: max(var(--space-5), env(safe-area-inset-right));
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #04211f;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 620;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .6), 0 2px 10px rgba(0, 0, 0, .45);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.wa-fab:hover {
  color: #04211f;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(37, 211, 102, .8), 0 2px 10px rgba(0, 0, 0, .45);
}
.wa-fab:active { transform: translateY(0) scale(.97); }
.wa-fab:focus-visible { outline: 2px solid var(--mv-lime); outline-offset: 3px; }
.wa-fab__icon { width: 28px; height: 28px; flex: none; }
.wa-fab__label { display: none; }

/* Room enough for the label once the viewport is not a phone. */
@media (min-width: 720px) {
  .wa-fab { width: auto; padding: 0 1.25rem 0 1.05rem; }
  .wa-fab__label { display: inline; }
}

/* The button is fixed, so it sits over the last footer row when you reach the
   bottom of the page. Give the footer somewhere to put its legal links. */
.site-footer { padding-bottom: calc(var(--space-5) + 72px); }
@media (min-width: 720px) { .site-footer { padding-bottom: var(--space-5); } }

@media print { .wa-fab { display: none !important; } }

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-0 { margin-bottom: 0; }
.text-muted { color: var(--text-3); }
.text-sm { font-size: var(--fs-sm); }
.no-wrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   24. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after,
  .site-header, .site-footer, .cta-band, .viewer { display: none !important; }
  a { color: #000; }
}

/* --------------------------------------------------------------------------
   Product screenshots
   --------------------------------------------------------------------------
   A real capture, framed so it reads as a window rather than as a picture
   pasted onto the page. The border and inner highlight are the same treatment
   the stylised mock used, kept so the hero did not visibly change shape when
   the mock was replaced by the screenshot. */
.shot {
  margin: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  overflow: hidden;
  box-shadow: var(--e-3);
}
.shot__img {
  display: block;
  width: 100%;
  height: auto;
  /* The captures are dark-on-dark UI. Without this they float on the page
     ground with no edge at all. */
  border-bottom: 1px solid var(--border);
}
.shot__cap {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: -0.003em;
}

/* --------------------------------------------------------------------------
   VeuRAI callout
   --------------------------------------------------------------------------
   The one metered feature, said plainly in the hero. Numbered because it is a
   sequence and reads as one — dictate, finalise, signed — rather than three
   unrelated bullets. */
.veurai {
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(26, 181, 133, .3);
  border-radius: var(--r-md);
  background: var(--grad-brand-soft);
}
.veurai__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 620;
  color: var(--text);
}
.veurai__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mv-emerald);
  box-shadow: 0 0 0 4px rgba(26, 181, 133, .16);
  flex: none;
}
.veurai__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.veurai__steps li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.veurai__steps strong { color: var(--text); font-weight: 620; }
.veurai__n {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(26, 181, 133, .16);
  border: 1px solid rgba(26, 181, 133, .32);
  color: var(--mv-emerald-300);
  font-size: .6875rem;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  flex: none;
}

@media (max-width: 560px) {
  /* Stacked, because three steps side by side wrap into an unreadable ladder
     on a phone. */
  .veurai__steps { flex-direction: column; gap: var(--space-2); }
}