/* ============================================================================
   hezmanti — coming soon
   Design system: liquid-glass surfaces over a living aurora, retuned to the
   brand logo's cool violet→blue palette. Both languages are RTL.
   ========================================================================== */

:root {
  /* ── atmosphere — bright & airy, a whisper of lavender; ink is cool near-navy ── */
  --color-paper: oklch(98.5% 0.007 285);
  --color-surface: oklch(99.6% 0.004 285);
  --color-fill: oklch(96% 0.014 285);
  --color-line: oklch(90.5% 0.016 285);
  --color-ink: oklch(22% 0.03 280);
  --color-ink-soft: oklch(45% 0.03 282);
  --color-ink-faint: oklch(60% 0.028 285);

  /* ── primary action — confident indigo-violet; carries white ── */
  --color-cta: oklch(52% 0.2 280);
  --color-cta-hover: oklch(57% 0.21 282);
  --color-on-cta: oklch(99% 0 0);

  /* ── brand accent — the logo's violet ── */
  --color-accent: oklch(58% 0.22 292);
  --color-accent-deep: oklch(48% 0.2 290);
  --color-accent-soft: oklch(94% 0.045 292);

  /* ── secondary vibrancy — for gradients & glows ── */
  --color-magenta: oklch(62% 0.24 322);
  --color-violet: oklch(56% 0.2 292);
  --color-blue: oklch(58% 0.2 258);

  /* ── aurora — cool violet/blue mesh with a magenta warmth nod + sky jewel ── */
  --aurora-violet: oklch(72% 0.18 293);
  --aurora-magenta: oklch(74% 0.18 332);
  --aurora-blue: oklch(72% 0.15 258);
  --aurora-indigo: oklch(64% 0.19 278);
  --aurora-sky: oklch(85% 0.1 220);

  /* ── semantic ── */
  --color-success: oklch(58% 0.14 158);
  --color-danger: oklch(56% 0.2 25);

  /* ── type scale ── */
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.7rem, 1.35rem + 1.5vw, 2.25rem);
  --text-hero: clamp(2.6rem, 1.5rem + 4.4vw, 4.75rem);
  --leading-tight: 1.12;
  --leading-body: 1.6;

  /* ── spacing (4px grid) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 3.5rem;
  --space-12: 5.25rem;
  --space-16: 8rem;

  /* ── shape ── */
  --radius-sm: 11px;
  --radius-card: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* ── depth — soft violet tint ── */
  --shadow-card: 0 1px 2px oklch(40% 0.05 285 / 0.07), 0 2px 6px oklch(40% 0.05 285 / 0.06);
  --shadow-hover: 0 6px 16px -3px oklch(45% 0.08 285 / 0.16), 0 2px 5px oklch(40% 0.05 285 / 0.08);
  --shadow-raised: 0 16px 40px -10px oklch(45% 0.14 285 / 0.24);
  --shadow-glass: 0 14px 44px oklch(48% 0.12 285 / 0.16);
  --shadow-glow: 0 8px 22px -6px oklch(58% 0.22 292 / 0.5);
  --ring: 0 0 0 3px oklch(58% 0.22 292 / 0.38);

  /* ── motion ── */
  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── layout ── */
  --tap-min: 44px;
  --max: 1180px;

  /* ── liquid glass — every surface is a material over the aurora ── */
  --glass-bg: oklch(100% 0.003 285 / 0.72);
  --glass-bg-strong: oklch(100% 0.003 285 / 0.86);
  --glass-filter: blur(28px) saturate(1.8);
  --glass-line: oklch(45% 0.05 285 / 0.12);
  --glass-edge: inset 0 1px 0 oklch(100% 0 0 / 0.8);

  /* ── fonts — swapped per language via [lang] ── */
  --font: 'Rubik', system-ui, sans-serif;
}

:root[lang='ar'] {
  --font: 'Cairo', system-ui, sans-serif;
}

/* ---------------------------------------------------------------- reset-ish */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

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

body {
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ==================================================================== aurora
   Two soft colour balls drifting in a loose figure-8, plus a sky jewel.
   Fixed, behind all content. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--color-accent-soft), transparent 60%),
    var(--color-paper);
}

.aurora__ball {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  will-change: transform;
  mix-blend-mode: multiply;
  /* Full-fidelity aurora for GPU browsers. blur + blend are GPU-cheap but
     CPU-expensive, so software-rendering browsers are auto-dropped to
     .perf-lite (static, blur-free, no blend) by initPerfGuard() in app.js. */
}

.aurora__ball--1 {
  background: radial-gradient(circle at 50% 50%, var(--aurora-magenta), var(--aurora-violet) 46%, transparent 70%);
  top: -18vmax;
  inset-inline-start: -10vmax;
  animation: drift-1 26s var(--ease-out) infinite alternate;
}

.aurora__ball--2 {
  background: radial-gradient(circle at 50% 50%, var(--aurora-blue), var(--aurora-indigo) 48%, transparent 70%);
  bottom: -22vmax;
  inset-inline-end: -12vmax;
  animation: drift-2 30s var(--ease-out) infinite alternate;
}

.aurora__ball--3 {
  width: 40vmax;
  height: 40vmax;
  background: radial-gradient(circle at 50% 50%, var(--aurora-sky), transparent 68%);
  top: 30%;
  inset-inline-start: 40%;
  opacity: 0.5;
  animation: drift-3 34s var(--ease-out) infinite alternate;
}

.aurora__grain {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

@keyframes drift-1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18vw, 12vh, 0) scale(1.12); }
  100% { transform: translate3d(6vw, 26vh, 0) scale(1.04); }
}
@keyframes drift-2 {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-16vw, -14vh, 0) scale(0.95); }
  100% { transform: translate3d(-4vw, -24vh, 0) scale(1.1); }
}
@keyframes drift-3 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-18vw, 10vh, 0) scale(1.15); }
}

/* ================================================================= layout */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

section {
  position: relative;
}

/* reveal-on-scroll (progressive: content shows if JS/anim off) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ================================================================= header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: var(--space-3);
  /* soft fade so content scrolling underneath stays legible behind the bar */
  background: linear-gradient(to bottom, var(--color-paper) 55%, transparent);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.brand__logo {
  width: 34px;
  height: 34px;
  display: block;
  flex: none;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* glass control shared by pills, cards, inputs */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-glass), var(--glass-edge);
}

.lang-toggle {
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem;
  font-weight: 600;
  font-size: var(--text-sm);
  min-height: var(--tap-min);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast);
}
.lang-toggle:hover {
  transform: translateY(-1px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-deep);
}
.pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 oklch(58% 0.22 292 / 0.55);
  animation: ping 2.2s var(--ease-out) infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 oklch(58% 0.22 292 / 0.5); }
  70%, 100% { box-shadow: 0 0 0 9px oklch(58% 0.22 292 / 0); }
}

/* ================================================================== hero */
.hero {
  padding-block: clamp(2rem, 1rem + 5vw, 5rem) var(--space-12);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero-copy {
  max-width: 34rem;
}
.eyebrow {
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-block: var(--space-4) var(--space-3);
}
h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  font-weight: 800;
}
h1 .accent {
  color: var(--color-accent);
  display: inline-block;
}
.hero-sub {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: 30rem;
}
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  font-weight: 500;
}
.trust svg {
  color: var(--color-success);
  flex: none;
}

/* ============================================================== waitlist */
.waitlist {
  position: relative;
  margin-top: var(--space-6);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-raised), var(--glass-edge);
}
.waitlist__title {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.segment {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-fill);
  margin-bottom: var(--space-3);
  gap: 2px;
}
.segment__btn {
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
  min-height: var(--tap-min);
  transition: color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
.segment__btn[aria-pressed='true'] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}
.field {
  display: flex;
  gap: var(--space-2);
}
.field input[type='email'] {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  font: inherit;
  color: var(--color-ink);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field input::placeholder {
  color: var(--color-ink-faint);
}
.field input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--ring);
}
/* honeypot — hidden from humans, tempting to bots (clip-based, no offset so it
   never adds horizontal overflow — the -9999px trick broke mobile layout) */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  min-height: 48px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-cta);
  color: var(--color-on-cta);
  font-weight: 700;
  box-shadow: var(--shadow-glow);
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast), box-shadow var(--duration-fast), opacity var(--duration-fast);
}
.btn-primary:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
}
.btn-primary[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.perk {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.perk svg { color: var(--color-accent); flex: none; }

.form-msg {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 1.2em;
}
.form-msg.ok { color: var(--color-success); }
.form-msg.err { color: var(--color-danger); }

/* success state swap */
.waitlist.done .waitlist__form,
.waitlist.done .segment,
.waitlist.done .perk { display: none; }
.waitlist__success { display: none; }
.waitlist.done .waitlist__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding-block: var(--space-4);
}
.waitlist__success .big { font-size: 2.4rem; line-height: 1; }

/* ============================================================ hero visual
   Overlapping glass device frames — depth through overlap, not a grid. */
.showcase {
  position: relative;
  min-height: clamp(20rem, 40vw, 30rem);
}
.frame {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-raised), var(--glass-edge);
}
.frame img { width: 100%; height: auto; display: block; }

.frame--desktop {
  inset-inline-start: 0;
  top: 4%;
  width: 84%;
  aspect-ratio: 16 / 10;
}
.frame--desktop img { height: 100%; object-fit: cover; object-position: top center; }

.frame--phone {
  inset-inline-end: -2%;
  bottom: 0;
  width: 33%;
  max-width: 190px;
  aspect-ratio: 9 / 19;
  border-radius: 28px;
  border-width: 5px;
  border-color: oklch(22% 0.03 280 / 0.85);
  z-index: 2;
}
.frame--phone img { height: 100%; object-fit: cover; object-position: top center; }

.frame__cap {
  position: absolute;
  inset-inline-start: 8%;
  bottom: -0.9rem;
  z-index: 3;
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-card);
}
.float { animation: float 7s ease-in-out infinite; }
.float--slow { animation-duration: 9s; animation-delay: -3s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ============================================================== marquee */
.marquee {
  margin-block: var(--space-8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  animation: scroll-x 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.05rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  border: 1px solid var(--glass-line);
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
:root[dir='rtl'] .marquee__track { animation-name: scroll-x-rtl; }
@keyframes scroll-x-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* =============================================================== section head */
.section {
  padding-block: var(--space-12);
}
.section__eyebrow {
  color: var(--color-accent-deep);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.section__title {
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-top: var(--space-2);
  max-width: 22ch;
}
.section__sub {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
  max-width: 46ch;
  font-size: var(--text-md);
}

/* ============================================================ business bento */
.biz {
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  background: linear-gradient(155deg, oklch(97% 0.03 292 / 0.8), oklch(96% 0.04 258 / 0.72));
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-glass), var(--glass-edge);
}
.biz__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
  margin-top: var(--space-6);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
}
.chips li {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
}

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.feature {
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal);
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  margin-bottom: var(--space-3);
}
.feature h3 { font-size: var(--text-md); font-weight: 700; }
.feature p { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: 0.25rem; }
/* first feature spans full width — breaks the uniform grid */
.feature--wide { grid-column: 1 / -1; }

.biz__peek {
  position: relative;
}
.biz__peek .frame--desktop {
  position: static;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.biz-cta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ================================================================= steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
  counter-reset: step;
}
.step {
  position: relative;
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-card);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: calc(-1 * var(--space-4));
  inset-inline-start: var(--space-4);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-cta);
  color: var(--color-on-cta);
  font-weight: 800;
  box-shadow: var(--shadow-glow);
}
.step h3 { font-size: var(--text-md); font-weight: 700; margin-top: var(--space-2); }
.step p { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: 0.25rem; }

/* ================================================================ footer */
.site-footer {
  margin-top: var(--space-12);
  padding-block: var(--space-8);
  border-top: 1px solid var(--glass-line);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.foot-tag { color: var(--color-ink-soft); font-size: var(--text-sm); max-width: 40ch; }
.foot-tag .brand { font-size: 1.1rem; }
.foot-tag .brand__logo { width: 26px; height: 26px; }
.foot-links { display: flex; gap: var(--space-4); align-items: center; font-size: var(--text-sm); }
.foot-links a { color: var(--color-ink-soft); font-weight: 500; transition: color var(--duration-fast); }
.foot-links a:hover { color: var(--color-accent); }
.foot-rights { color: var(--color-ink-faint); font-size: var(--text-xs); width: 100%; }

/* =========================================================== responsive */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .showcase { order: -1; min-height: 22rem; margin-top: var(--space-4); }
  .biz__grid { grid-template-columns: 1fr; }
  .biz__peek { order: -1; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-6); }
  .features { grid-template-columns: 1fr; }
  .field { flex-direction: column; }
  .field input[type='email'], .btn-primary { width: 100%; }
  h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  .frame--phone { width: 40%; }
}

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

/* ============================================ adaptive performance fallback
   The aurora and liquid-glass surfaces lean on GPU-accelerated blur and
   backdrop-filter. When a browser composites on the CPU (hardware acceleration
   disabled or unavailable) those effects get expensive and the page janks —
   even though it stays perfectly smooth on any GPU-accelerated browser.
   app.js samples real frame timing on load and adds .perf-lite here when the
   renderer can't hold a smooth frame rate: freeze the aurora drift and drop
   every backdrop blur, keeping surfaces legible with a more opaque fill.
   Healthy GPU visitors never see this. */
.perf-lite {
  --glass-filter: none;
  --glass-bg: oklch(100% 0.006 285 / 0.9);
}
.perf-lite .aurora__ball { animation: none; filter: none; mix-blend-mode: normal; }
.perf-lite .aurora__grain { display: none; }
.perf-lite *,
.perf-lite *::before,
.perf-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}