/* DeltaMedSoft — static site styles */

/* ---------------------------------- Tokens --------------------------------- */
:root {
  --radius: 0.75rem;
  --background: oklch(0.994 0.005 95);
  --foreground: oklch(0.24 0.03 195);
  --card: oklch(1 0.002 95);
  --primary: oklch(0.52 0.085 182);
  --primary-fg: oklch(0.99 0.005 95);
  --secondary: oklch(0.96 0.012 180);
  --muted: oklch(0.965 0.008 95);
  --muted-fg: oklch(0.52 0.025 195);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.012 175);

  --teal: oklch(0.55 0.1 182);
  --amber: oklch(0.74 0.155 65);
  --coral: oklch(0.64 0.17 15);

  --wrap: 80rem;
  --pad: 1rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);
}
@media (min-width: 640px) { :root { --pad: 1.5rem } }
@media (min-width: 1024px) { :root { --pad: 2rem } }

/* ---------------------------------- Base ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv01", "cv03";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 }

img, svg { display: block; max-width: 100% }
img { height: auto }
a { color: inherit; text-decoration: none }
button, input, textarea { font: inherit; color: inherit }
ul { list-style: none }
::selection { background: oklch(0.55 0.1 182 / 0.22) }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------- Primitives -------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad) }

.section {
  position: relative;
  border-top: 1px solid var(--border);
  padding-block: 5.5rem;
  scroll-margin-top: 5rem;
}
@media (min-width: 640px) { .section { padding-block: 7rem } }
@media (min-width: 1024px) { .section { padding-block: 8.5rem } }
.section--muted { background: color-mix(in oklch, var(--muted) 40%, var(--background)) }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); padding: 0.25rem 0.75rem;
  font-size: 0.75rem; font-weight: 600; color: var(--muted-fg);
}
.eyebrow .i { width: 0.875rem; height: 0.875rem; color: var(--primary) }

.h1, .h2, .h3, .display { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 800 }
.h2 { margin-top: 1rem; font-size: clamp(1.875rem, 1.35rem + 2.4vw, 2.5rem); line-height: 1.15 }
.h3 { font-size: 1.125rem; font-weight: 700 }
.lede { margin-top: 1.125rem; font-size: 1.0625rem; line-height: 1.75; color: var(--muted-fg); max-width: 40rem }
.intro { max-width: 44rem }
.intro--wide { max-width: 48rem }

.muted { color: var(--muted-fg) }
.small { font-size: 0.875rem }
.xs { font-size: 0.75rem }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
  background: var(--primary); color: var(--primary-fg);
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: 0.2s var(--ease);
  transition-property: background, transform, box-shadow, color;
}
.btn:hover { background: color-mix(in oklch, var(--primary) 90%, black) }
.btn:active { transform: scale(0.98) }
.btn .i { width: 1rem; height: 1rem }
.btn--lg { height: 3rem; padding-inline: 1.5rem; font-size: 1rem }
.btn--outline { background: var(--card); border-color: var(--border); color: var(--foreground) }
.btn--outline:hover { background: var(--muted) }
.btn--light { background: var(--secondary); color: var(--foreground); box-shadow: 0 10px 25px -10px rgb(0 0 0 / 0.35) }
.btn--light:hover { background: color-mix(in oklch, var(--secondary) 90%, black) }
.btn--block { width: 100% }

.linkbtn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: none; border: 0; cursor: pointer;
  font-size: 0.875rem; font-weight: 600; transition: color 0.2s;
}
.linkbtn .i { width: 1rem; height: 1rem }
.linkbtn:hover { color: var(--primary) }

.card {
  border: 1px solid var(--border); border-radius: 1rem;
  background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem }
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--muted-fg);
  padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: 0.25s var(--ease);
}
.chip:hover { color: var(--foreground) }
.chip[aria-pressed="true"] {
  border-color: transparent; color: #fff;
  background: var(--chip-color, var(--primary));
}

.i { width: 1rem; height: 1rem; flex: none }

/* Decorative backdrops */
.dotgrid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(oklch(0.52 0.085 182 / 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
}
.aurora {
  background:
    radial-gradient(60% 50% at 15% 10%, oklch(0.55 0.1 182 / 0.10), transparent 62%),
    radial-gradient(55% 45% at 90% 5%, oklch(0.78 0.15 75 / 0.11), transparent 62%),
    radial-gradient(50% 40% at 70% 90%, oklch(0.64 0.17 15 / 0.06), transparent 62%);
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease) }
.reveal.in { opacity: 1; transform: none }

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

/* ---------------------------------- Header --------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.header.scrolled {
  border-bottom-color: color-mix(in oklch, var(--border) 70%, transparent);
  background: color-mix(in oklch, var(--background) 85%, transparent);
  backdrop-filter: blur(16px);
}
.header__bar { display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: 1rem }

.logo { display: inline-flex; align-items: center; flex: none }
.logo__img {
  height: 2.5rem; width: auto;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
a.logo:hover .logo__img { transform: scale(1.03) }
.logo--footer .logo__img { height: 3.25rem }
/* Below 420px the lockup is swapped for the square mark (see <picture>). */
@media (max-width: 419px) { .logo__img { height: 2.25rem } }

.nav { display: none; align-items: center; gap: 0.25rem }
@media (min-width: 1180px) { .nav { display: flex } }
.nav a {
  position: relative; border-radius: 0.5rem; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; font-weight: 500; color: var(--muted-fg); transition: color 0.2s;
}
.nav a:hover { color: var(--foreground) }
.nav a[aria-current="page"] { color: var(--foreground); font-weight: 700 }
.nav a[aria-current="page"]::after { transform: scaleX(1) }
.nav a::after {
  content: ""; position: absolute; inset-inline: 0.75rem; bottom: -2px; height: 2px;
  border-radius: 999px; background: var(--primary);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav a:hover::after { transform: scaleX(1) }

.header__actions { display: flex; align-items: center; gap: 0.5rem }
.header__cta { display: none }
@media (min-width: 640px) { .header__cta { display: inline-flex } }

.burger {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card);
  cursor: pointer;
}
@media (min-width: 1180px) { .burger { display: none } }
.burger .i { width: 1.25rem; height: 1.25rem }
.burger .i--close, .burger[aria-expanded="true"] .i--open { display: none }
.burger[aria-expanded="true"] .i--close { display: block }

.mobilenav {
  display: none; border-top: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 95%, transparent);
  backdrop-filter: blur(16px);
  padding: 1rem var(--pad);
}
.mobilenav.open { display: block; animation: slide-down 0.25s var(--ease) }
@media (min-width: 1180px) { .mobilenav, .mobilenav.open { display: none } }
.mobilenav a {
  display: block; border-radius: 0.5rem; padding: 0.625rem 0.75rem;
  font-size: 0.875rem; font-weight: 500; color: var(--muted-fg);
}
.mobilenav a:hover { background: var(--muted); color: var(--foreground) }
.mobilenav .btn { margin-top: 0.5rem }

@keyframes slide-down { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

/* ----------------------------------- Hero ---------------------------------- */
.hero { position: relative; overflow: hidden }
.hero__fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 8rem; pointer-events: none;
  background: linear-gradient(to top, var(--background), transparent);
}
.hero__inner { position: relative; padding-block: 2.5rem 4rem }
@media (min-width: 640px) { .hero__inner { padding-block: 4rem } }
@media (min-width: 1024px) { .hero__inner { padding-block: 5rem 6rem } }

.hero__grid { display: grid; gap: 2.5rem; align-items: center }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 5fr 7fr; gap: 2rem } }

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in oklch, var(--card) 70%, transparent);
  backdrop-filter: blur(8px);
  padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-fg);
}
.pulse { position: relative; display: flex; width: 0.5rem; height: 0.5rem; flex: none }
.pulse::before, .pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--primary);
}
.pulse::before { animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75 }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0 } }

.hero h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  margin-top: 1rem; font-size: clamp(2.25rem, 1.2rem + 4vw, 3.75rem); line-height: 1.05;
}
.hero__mark { position: relative; white-space: nowrap }
.hero__mark span {
  position: relative; z-index: 1;
  background: linear-gradient(to bottom right, var(--primary), oklch(0.62 0.13 160));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__mark svg { position: absolute; inset-inline-start: 0; bottom: var(--rule-drop, -0.1em); width: 100%; z-index: 0 }

.hero p.lede { margin-top: 1.25rem; font-size: 1.0625rem; max-width: 36rem }
.hero__cta { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem }
@media (min-width: 640px) { .hero__cta { flex-direction: row; align-items: center } }

.hero__proof {
  margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-size: 0.75rem; font-weight: 500; color: var(--muted-fg);
}
.hero__proof span { display: inline-flex; align-items: center; gap: 0.375rem }

/* Hero image with cursor tilt */
.hero__stage { perspective: 1000px }
.hero__tilt {
  position: relative; transform-style: preserve-3d;
  margin-inline: auto; width: 100%; max-width: 48rem; aspect-ratio: 16 / 11;
  transform: translate3d(var(--tx, 0), calc(var(--ty, 0px) + var(--py, 0px)), 0)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
}
.hero__glow {
  position: absolute; inset: -1.5rem; border-radius: 2rem; filter: blur(2rem); opacity: 0.6;
  background: radial-gradient(60% 60% at 50% 40%, oklch(0.55 0.1 182 / 0.35), transparent 70%);
}
.hero__frame {
  position: relative; height: 100%; width: 100%; overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
  border-radius: 1.6rem; background: var(--card);
  box-shadow: 0 25px 50px -12px oklch(0.52 0.085 182 / 0.3);
}
.hero__frame img { height: 100%; width: 100%; object-fit: cover }
.hero__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top right, oklch(0.52 0.085 182 / 0.25), transparent 55%, oklch(0.74 0.155 65 / 0.15)),
    linear-gradient(to top, rgb(0 0 0 / 0.4), transparent 55%);
}
/* Dark glass, not light: the chip sits on whatever the photo happens to put
   under it, and white-on-white-tint disappears over a bright frame. */
.hero__viewerchip {
  position: absolute; inset-inline-start: 1rem; top: 1rem; z-index: 2;
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.16); border-radius: 0.75rem;
  background: rgb(10 24 32 / 0.62); backdrop-filter: blur(12px) saturate(1.15);
  padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
.trust {
  margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem; border: 1px solid var(--border); border-radius: 1rem;
  background: color-mix(in oklch, var(--card) 60%, transparent); backdrop-filter: blur(8px);
  padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-fg);
}
.trust span + span::before {
  content: ""; display: none; width: 4px; height: 4px; margin-inline-end: 0.5rem;
  border-radius: 999px; background: var(--border); vertical-align: middle;
}
@media (min-width: 640px) { .trust span + span::before { display: inline-block } }


/* --------------------------------- Products -------------------------------- */
.prods {
  margin-top: 4rem;
  display: grid; gap: 1.75rem;
}
@media (min-width: 900px) { .prods { grid-template-columns: repeat(3, 1fr) } }

.prod { overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s }
.prod:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); box-shadow: 0 22px 45px -28px color-mix(in oklch, var(--accent) 70%, transparent) }

.prod__hit { display: flex; flex-direction: column; height: 100% }
.prod__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in oklch, var(--accent) 8%, var(--muted)) }
.prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease) }
.prod:hover .prod__media img { transform: scale(1.04) }
.prod__runs {
  position: absolute; inset-block-end: 0.875rem; inset-inline-start: 0.875rem;
  border-radius: 999px; background: color-mix(in oklch, var(--card) 88%, transparent);
  backdrop-filter: blur(10px); padding: 0.3rem 0.7rem;
  font-size: 0.6875rem; font-weight: 700; color: var(--accent);
}

.prod__body { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.75rem; flex: 1 }
.prod__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em }
.prod__tag { font-size: 0.9375rem; font-weight: 600; color: var(--accent) }
.prod__sub { font-size: 0.9375rem; color: var(--muted-fg); line-height: 1.6 }

.prod__feat { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem }
.prod__feat span {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 600; color: var(--muted-fg);
}

.prod__cta {
  margin-top: auto; padding-top: 1.25rem;
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.875rem; font-weight: 700; color: var(--accent);
}
.prod__cta .i { transition: transform 0.25s var(--ease) }
.prod:hover .prod__cta .i { transform: translateX(3px) }
[dir="rtl"] .prod:hover .prod__cta .i { transform: translateX(-3px) }

.compose {
  margin-top: 3rem; max-width: 52rem;
  border-inline-start: 3px solid var(--primary); padding-inline-start: 1.25rem;
  font-size: 0.9375rem; color: var(--muted-fg); line-height: 1.7;
}
.compose em { color: var(--foreground); font-style: normal; font-weight: 700 }

/* -------------------------------- Experience ------------------------------- */
.exps { margin-top: 4rem; display: grid; gap: 1.75rem }
@media (min-width: 720px) { .exps { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .exps { grid-template-columns: repeat(3, 1fr) } }

.exp { display: flex; flex-direction: column; gap: 0.5rem; padding: 2.25rem }
.exp__n {
  font-family: var(--font-display); font-size: clamp(2.75rem, 1.8rem + 3vw, 3.75rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--primary);
}
.exp__l { font-size: 1rem; font-weight: 700 }
.exp p { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--muted-fg); line-height: 1.7 }

/* --------------------------------- Services -------------------------------- */
.svcs { margin-top: 4rem; display: grid; gap: 1.75rem }
@media (min-width: 900px) { .svcs { grid-template-columns: repeat(3, 1fr) } }

.svc { display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem }
.svc__q { font-size: 0.9375rem; font-style: italic; color: var(--primary); line-height: 1.6 }
.svc p { font-size: 0.9375rem; color: var(--muted-fg); line-height: 1.7 }
.svc__dl { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.8125rem }
.svc__dl b { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); margin-bottom: 0.25rem }
.svc .linkbtn { align-self: flex-start; color: var(--primary) }

/* ----------------------------------- Why ----------------------------------- */
.whys { margin-top: 3rem; display: grid; gap: 0 }
.why {
  display: grid; gap: 0.25rem;
  border-top: 1px solid var(--border); padding-block: 1.5rem;
}
@media (min-width: 800px) { .why { grid-template-columns: 22rem 1fr; gap: 2rem; align-items: baseline } }
.why b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em }
.why span { font-size: 0.9375rem; color: var(--muted-fg); line-height: 1.7 }

/* ------------------------ Breadcrumbs & cross-links ------------------------ */
.crumbs {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 2rem; font-size: 0.8125rem; color: var(--muted-fg);
}
.crumbs a { font-weight: 600; transition: color 0.2s }
.crumbs a:hover { color: var(--primary) }
.crumbs span[aria-hidden] { opacity: 0.5 }

.crosslinks {
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
}
.crosslinks b {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted-fg);
}
.crosslink {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.9375rem; font-weight: 700; color: var(--primary);
}
.crosslink .i { transition: transform 0.25s var(--ease) }
.crosslink:hover .i { transform: translateX(3px) }
[dir="rtl"] .crosslink:hover .i { transform: translateX(-3px) }

/* ------------------------------ Product hero ------------------------------- */
.phero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border) }
.phero__inner { position: relative; padding-block: 3.5rem 4.5rem }
@media (min-width: 1024px) { .phero__inner { padding-block: 5rem 6rem } }

.phero__grid { display: grid; gap: 3rem; align-items: center }
@media (min-width: 1024px) { .phero__grid { grid-template-columns: 6fr 5fr; gap: 4rem } }

.phero__h1 {
  margin-top: 1rem;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.1;
}
.phero__name { display: block; color: var(--accent) }

.phero__feat { margin-top: 2rem; display: grid; gap: 0.75rem }
@media (min-width: 560px) { .phero__feat { grid-template-columns: 1fr 1fr } }
.phero__feat li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600 }
.phero__feat .i { color: var(--accent) }

.phero__media { position: relative }
.phero__media img {
  width: 100%; height: auto; border-radius: 1.5rem;
  box-shadow: 0 30px 60px -30px color-mix(in oklch, var(--accent) 60%, transparent);
}

.shipping {
  margin-top: 1.75rem;
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 700; color: var(--primary);
}
.shipping .i { width: 0.875rem; height: 0.875rem }

/* ------------------------------- Capabilities ------------------------------ */
.feats { margin-top: 4rem; display: grid; gap: 1.75rem }
@media (min-width: 800px) { .feats { grid-template-columns: repeat(2, 1fr) } }

.feat { display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem }
.feat p { font-size: 0.9375rem; color: var(--muted-fg); line-height: 1.7 }
.feat__x {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: 0.8125rem !important; font-style: italic;
}

/* --------------------------- Standards chip row ---------------------------- */
.stdchips { margin-top: 2.5rem; gap: 0.5rem }
.stdchips span {
  border: 1px solid var(--border); border-radius: 0.5rem;
  background: var(--card); padding: 0.375rem 0.75rem;
  font-size: 0.75rem; font-weight: 600; color: var(--muted-fg);
  letter-spacing: 0.01em;
}

/* ------------------------------ Replaces box ------------------------------- */
.pbox {
  margin-top: 2.5rem; max-width: 46rem;
  border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem 1.5rem;
  background: color-mix(in oklch, var(--muted) 45%, transparent);
}
.pbox b {
  display: block; margin-bottom: 0.375rem;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-fg);
}
.pbox p { font-size: 0.9375rem; color: var(--foreground); line-height: 1.7 }
.pbox--bad { border-inline-start: 3px solid var(--coral) }

/* ------------------------- Form controls & rows ---------------------------- */
/* Used by the demo dialog: fields, inputs and the confirmation rows. */
.field { display: grid; gap: 0.5rem }
.field + .field { margin-top: 1.25rem }
.field > label, .field__label {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.875rem; font-weight: 600;
}
.field__label .i { width: 1rem; height: 1rem; color: var(--muted-fg) }

.input, .textarea {
  width: 100%; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  background: var(--background); padding: 0.5rem 0.75rem; font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus, .textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 20%, transparent);
}
.textarea { resize: vertical; min-height: 5rem }

/* Honeypot. Positioned off-screen rather than display:none — some bots skip
   hidden inputs, and this one is only useful if they fill it in. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap;
}

.formerr {
  margin-bottom: 0.875rem;
  border: 1px solid color-mix(in oklch, var(--coral) 40%, var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklch, var(--coral) 8%, transparent);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem; color: color-mix(in oklch, var(--coral) 70%, black);
}
.btn[disabled] { opacity: 0.6; cursor: progress }

.drow {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border: 1px solid var(--border); border-radius: 0.75rem;
  background: color-mix(in oklch, var(--muted) 40%, transparent); padding: 0.625rem 0.75rem;
}
.drow > span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-fg) }
.drow .i { width: 0.875rem; height: 0.875rem }
.drow > span:last-child { font-size: 0.875rem; font-weight: 600; text-align: end }

/* --------------------------------- Footer ---------------------------------- */
.footer { margin-top: auto; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 40%, var(--background)) }

.ctaband { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--primary); color: var(--primary-fg) }
.ctaband .dotgrid { opacity: 0.2; mix-blend-mode: overlay }
.ctaband::before, .ctaband::after {
  content: ""; position: absolute; width: 16rem; height: 16rem; border-radius: 999px; filter: blur(3rem); pointer-events: none;
}
.ctaband::before { inset-inline-start: -5rem; top: -5rem; background: color-mix(in oklch, var(--amber) 30%, transparent) }
.ctaband::after { inset-inline-end: 2.5rem; bottom: -6rem; background: color-mix(in oklch, var(--coral) 25%, transparent) }
.ctaband__inner {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 1.5rem; padding-block: 3rem;
}
@media (min-width: 1024px) { .ctaband__inner { flex-direction: row; align-items: center; padding-block: 3.5rem } }
.ctaband h2 { font-family: var(--font-display); font-size: clamp(1.875rem, 1.4rem + 2vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; max-width: 36rem }
.ctaband p { margin-top: 0.75rem; max-width: 36rem; color: color-mix(in oklch, var(--primary-fg) 80%, transparent) }
.ctaband .btn { transition: transform 0.2s var(--ease) }
.ctaband .btn:hover { transform: scale(1.03) }

.footer__body { display: grid; gap: 2.5rem; padding-block: 3rem }
@media (min-width: 1024px) { .footer__body { grid-template-columns: 5fr 7fr } }
.footer__about p { margin-top: 1rem; max-width: 24rem; font-size: 0.875rem; color: var(--muted-fg) }
.footer__badges { margin-top: 1.25rem }
.footer__badges span {
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
  padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 600; color: var(--muted-fg);
}
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem }
.footer__nav b { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em }
.footer__nav ul { margin-top: 0.75rem; display: grid; gap: 0.5rem }
.footer__nav a { font-size: 0.875rem; color: var(--muted-fg); transition: color 0.2s }
.footer__nav a:hover { color: var(--foreground) }

.footer__legal {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 1rem; border-top: 1px solid var(--border); padding-block: 1.5rem 3rem;
  font-size: 0.75rem; color: var(--muted-fg);
}
@media (min-width: 640px) { .footer__legal { flex-direction: row; align-items: center } }
.footer__legal div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem }
.footer__legal a:hover { color: var(--foreground) }
.footer__legal .i { width: 0.75rem; height: 0.75rem; fill: var(--coral); color: var(--coral) }

/* ------------------------------ Cookie notice ------------------------------ */
/* Fixed bottom card. It is a notice, not a consent gate: the site stores only
   the language preference, so it dismisses instead of collecting a choice. */
.cookie-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  border-top: 1px solid var(--border);
  background: color-mix(in oklch, var(--card) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 -12px 30px -18px rgb(0 0 0 / 0.25);
  animation: cookie-up 0.4s var(--ease);
}
.cookie-banner__inner {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.875rem;
  padding-block: 1rem;
}
.cookie-banner__text { max-width: 46rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-fg) }
@keyframes cookie-up { from { transform: translateY(100%) } to { transform: none } }
@media (min-width: 640px) {
  .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between }
  .cookie-banner .btn { flex: none }
}

/* --------------------------------- Dialog ---------------------------------- */
.sheet {
  border: 0; padding: 0; margin-inline-start: auto; height: 100dvh; max-height: 100dvh;
  width: 100%; max-width: 32rem; background: var(--background); color: var(--foreground);
  flex-direction: column; overflow: hidden;
  border-inline-start: 1px solid var(--border);
}
/* display lives on [open] so the UA's dialog:not([open]){display:none} still wins when closed */
.sheet[open] { display: flex; animation: sheet-in 0.35s var(--ease) }
.sheet::backdrop { background: rgb(0 0 0 / 0.5); backdrop-filter: blur(2px) }
.sheet[open]::backdrop { animation: fade-in 0.3s }
@keyframes sheet-in { from { transform: translateX(100%) } to { transform: none } }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

.sheet__head { position: relative; overflow: hidden; background: var(--primary); color: var(--primary-fg); padding: 1.5rem }
.sheet__head .dotgrid { opacity: 0.25; mix-blend-mode: overlay }
.sheet__head::after {
  content: ""; position: absolute; inset-inline-end: -2rem; top: -2rem; width: 8rem; height: 8rem;
  border-radius: 999px; background: color-mix(in oklch, var(--amber) 40%, transparent); filter: blur(2rem);
}
.sheet__head > * { position: relative; z-index: 1 }
.sheet__head h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800 }
.sheet__head p { margin-top: 0.5rem; font-size: 0.875rem; color: color-mix(in oklch, var(--primary-fg) 80%, transparent) }
.sheet__close {
  position: absolute; inset-inline-end: 1rem; top: 1rem; z-index: 2;
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.15);
  color: inherit; cursor: pointer; transition: background 0.2s;
}
.sheet__close:hover { background: rgb(255 255 255 / 0.28) }

.sheet__scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: oklch(0.52 0.085 182 / 0.4) transparent }
.sheet__scroll::-webkit-scrollbar { width: 8px }
.sheet__scroll::-webkit-scrollbar-thumb { background: oklch(0.52 0.085 182 / 0.35); border-radius: 999px }

.sheet form { display: grid; gap: 1.25rem; padding: 1.5rem; animation: slide-in-right 0.35s var(--ease) }
.sheet .field + .field { margin-top: 0 }
.form__row { display: grid; gap: 1rem }
@media (min-width: 480px) { .form__row { grid-template-columns: 1fr 1fr } }
.sheet__privacy { display: flex; align-items: center; justify-content: center; gap: 0.375rem; text-align: center; font-size: 0.75rem; color: var(--muted-fg) }
.sheet__privacy .i { width: 0.875rem; height: 0.875rem; color: var(--primary) }

@keyframes slide-in-right { from { opacity: 0; transform: translateX(30px) } to { opacity: 1; transform: none } }

.confirm {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.5rem 1.5rem; animation: slide-in-right 0.5s var(--ease);
}
.confirm__seal {
  position: relative; display: grid; place-items: center; width: 5rem; height: 5rem;
  border-radius: 999px; background: var(--primary); color: var(--primary-fg);
  box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--primary) 30%, transparent);
  animation: pop 0.5s var(--ease) 0.15s both;
}
.confirm__seal .i { width: 2.5rem; height: 2.5rem }
.confirm__seal span { position: absolute; inset-inline-end: -0.5rem; top: -0.5rem; font-size: 1.5rem }
@keyframes pop { from { transform: scale(0) rotate(-20deg) } to { transform: none } }
.confirm h3 { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800 }
.confirm > p { margin-top: 0.5rem; max-width: 24rem; font-size: 0.875rem; color: var(--muted-fg) }
.confirm > p b { color: var(--foreground) }
.confirm__rows { margin-top: 1.5rem; width: 100%; max-width: 24rem; display: grid; gap: 0.5rem; text-align: start }
.confirm .btn { margin-top: 2rem; width: 100%; max-width: 24rem }
.confirm__alt { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-fg) }
.confirm__alt a { font-weight: 600; color: var(--primary) }
.confirm__alt a:hover { text-decoration: underline }

[hidden] { display: none !important }

/* ------------------------------ RTL & Arabic ------------------------------- */
/* Layout mirroring is handled by logical properties above; these are the
   things direction alone can't fix — typography and hand-rolled transforms. */

/* No Arabic webfont ships — the Noto set cost 229 KB, more than the rest of the
   page combined. These are the faces already installed on each platform, in
   preference order; fallback is per-character, so a Latin-only system-ui simply
   passes Arabic glyphs down the list. */
[lang="ar"] {
  --font-sans: system-ui, "Segoe UI Arabic", "Geeza Pro", "Noto Naskh Arabic",
    "Noto Sans Arabic", "Droid Arabic Naskh", Tahoma, "Arial Unicode MS", sans-serif;
  --font-display: var(--font-sans);
}
/* Arabic needs more leading, and the Latin figure/alternate features don't apply. */
[lang="ar"] body { line-height: 1.75; font-feature-settings: normal }

/* Arabic script has no italics and no case, and tight tracking mangles it.
   System Arabic faces rarely carry an 800, and synthetic bolding smears the
   joins — cap headings at the weight the font actually has. */
[lang="ar"] :is(h1, .h2, .h3, .display, .phero__h1, .prod__name, .why b,
                .exp__n, .ctaband h2, .sheet__head h2, .confirm h3) {
  letter-spacing: normal;
  font-weight: 700;
}
[lang="ar"] :is(.svc__q, .feat__x, em) { font-style: normal }
[lang="ar"] :is(.badge, .platform__runs, .pbox b, .cap__tags i,
                .service__deliverable b, .footer__nav b, .gap h3) {
  text-transform: none;
  letter-spacing: normal;
}

/* Latin product names and protocol acronyms stay LTR inside Arabic prose. */
[lang="ar"] .prod__name, [lang="ar"] .phero__name,
[lang="ar"] .stdchips span, [lang="ar"] .prod__feat span {
  direction: ltr; unicode-bidi: isolate;
}

/* The sheet enters from the inline-start edge under RTL. */
[dir="rtl"] .sheet { animation-name: sheet-in-rtl }
@keyframes sheet-in-rtl { from { transform: translateX(-100%) } to { transform: none } }

/* Mirror the decorative opening quote so it still points into the text. */

/* The hero underline sweep is drawn left-to-right; flip it with the text. */
[dir="rtl"] .hero__mark svg { transform: scaleX(-1) }

/* Language switcher */
.langbar { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--card) }
.langbar a {
  display: grid; place-items: center; padding: 0.375rem 0.625rem;
  font-size: 0.75rem; font-weight: 700; color: var(--muted-fg);
  text-decoration: none; transition: background 0.2s, color 0.2s; min-width: 2.25rem;
}
.langbar a:hover { background: var(--muted); color: var(--foreground) }
.langbar a[aria-current="page"] { background: var(--primary); color: var(--primary-fg) }
.langbar a + a { border-inline-start: 1px solid var(--border) }
.langbar a[lang="ar"] { font-size: 0.9375rem; line-height: 1 }

/* The langbar costs ~110px of header width; tighten the row on tiny screens. */
@media (max-width: 419px) { .header__bar { gap: 0.5rem } }

/* The underline SVG is positioned against .hero__mark's box. As a bare inline
   that box is the font's ascent+descent, which Noto Sans Arabic makes ~2em tall
   — the stroke then lands mid-glyph. inline-block pins the box to the line box,
   so the offset holds whatever the script. */
.hero__mark { display: inline-block }
/* Arabic descenders (ي ج ح) drop far below the baseline — the sweep needs more
   clearance than Latin, in em so it tracks the clamped heading size. */
[lang="ar"] .hero__mark { --rule-drop: -0.34em }

/* Translated labels run longer than English (FR is ~25% longer here). Keep
   button text on one line and let the row wrap instead of the words. */
.btn { white-space: nowrap }
.btn--block { white-space: normal }
.hero__cta { flex-wrap: wrap }
.ctaband__inner .btn, .compose .btn { flex: none }