/* =============================================================
   Arrgrow — Brand Tokens
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --arr-orange:       #FF6B35;
  --arr-orange-light: #FF8A65;
  --arr-orange-dark:  #E55100;
  --arr-black:        #000000;
  --arr-black-soft:   #0A0A0A;
  --arr-white:        #FFFFFF;

  --bg:           #FFFFFF;
  --bg-soft:      #F7F7F5;
  --surface:      #F2F1EF;
  --surface-2:    #ECEAE6;
  --border:       rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.14);
  --fg:           #111111;
  --fg-muted:     #6B7280;
  --fg-secondary: #374151;
  --fg-disabled:  #9CA3AF;
  --accent:       var(--arr-orange);
  --accent-hover: var(--arr-orange-light);
  --accent-press: var(--arr-orange-dark);

  --grad-primary: linear-gradient(135deg, #FF6B35 0%, #E55100 100%);
  --grad-glow:    radial-gradient(closest-side, rgba(255,107,53,0.22), rgba(255,107,53,0) 70%);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.14);
  --glow-orange: 0 0 0 1px rgba(255,107,53,0.4), 0 8px 32px rgba(255,107,53,0.22);
  --shadow-orange: 0 24px 64px rgba(255,107,53,0.08);

  --radius-xs:   2px;  --radius-sm:   6px;  --radius-md:   10px;
  --radius-lg:   14px; --radius-xl:   20px; --radius-2xl:  28px;
  --radius-pill: 999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-sans:    'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-accent:  'Space Grotesk', system-ui, sans-serif;

  --card-bg:     #FFFFFF;
  --card-border: rgba(0,0,0,0.08);
  --card-radius: 16px;
  --card-shadow: 0 4px 16px rgba(0,0,0,0.08);
  --input-bg:    #F7F7F5;
  --input-border:rgba(0,0,0,0.12);
  --input-radius:10px;
  --success: #16A34A;
  --danger:  #E55100;
}

/* Typography */
.arr-h1, .arr-h2, .arr-h3, .arr-h4 { font-family: var(--font-display); color: var(--fg); margin: 0; }
.arr-h1 { font-weight: 700; font-size: clamp(40px,6vw,56px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.arr-h2 { font-weight: 700; font-size: clamp(32px,4.4vw,44px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.arr-h3 { font-weight: 600; font-size: 30px; line-height: 1.25; letter-spacing: -0.015em; }
.arr-h4 { font-weight: 600; font-size: 22px; line-height: 1.3; }
.arr-display { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px,7vw,72px); line-height: 1.05; letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.arr-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--fg-secondary); }
.arr-body    { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--fg-secondary); }
.arr-caption { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.arr-eyebrow { font-family: var(--font-accent); font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.arr-stat    { font-family: var(--font-accent); font-weight: 700; font-size: clamp(48px,7vw,88px); letter-spacing: -0.02em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.arr-text-gradient { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

/* Skip nav */
.skip-nav {
  position: absolute; top: -100px; right: var(--space-6);
  background: var(--accent); color: #fff;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px; text-decoration: none;
  transition: top var(--dur-fast); z-index: 10000;
}
.skip-nav:focus { top: var(--space-4); }

/* Focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }

/* Ambient glow */
.ambient-glow {
  position: absolute; border-radius: 50%;
  background: var(--grad-glow);
  pointer-events: none; z-index: 0;
  opacity: 0.65; filter: blur(130px);
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
}
.glow-1 { top: -10%; right: -10%; }
.glow-2 { top: 55%; left: -20%; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  text-decoration: none; padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer; border: none;
}
.btn-primary {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 4px 20px rgba(255,107,53,0.18);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-orange); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-ghost {
  background: transparent; color: var(--fg);
  border: 1px solid rgba(0,0,0,0.14);
}
.btn-ghost:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.28); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0) scale(0.98); }
.btn-sm   { padding: var(--space-2) var(--space-5); font-size: 13px; }
.btn-block { display: flex; width: 100%; }

/* ─── Navbar ──────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%; height: 72px; z-index: 1000;
  background: rgba(255,255,255,0.75); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-base) var(--ease-out);
}
.navbar.scrolled { background: rgba(255,255,255,0.95); box-shadow: var(--shadow-md); }
.nav-container {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6);
}
.nav-logo { display: flex; align-items: center; }
.logo-img { height: 30px; width: auto; }
.nav-links { display: flex; gap: var(--space-8); }
.nav-link { font-size: 14px; font-weight: 500; color: var(--fg-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.nav-link:hover { color: var(--fg); }
.nav-link.active { color: var(--accent); }
.back-link { font-size: 13px; color: var(--fg-muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.back-link:hover { color: var(--fg); }
.mobile-menu-btn { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; }
.mobile-menu-btn .bar { width: 100%; height: 2px; background: var(--fg); border-radius: 2px; transition: all var(--dur-base) var(--ease-out); }

/* ─── Hero — split layout ─────────────────────────────────── */
.hero-section {
  position: relative; padding-top: 160px; padding-bottom: var(--space-20); z-index: 1; overflow: hidden;
}
.hero-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center;
}
.hero-content { max-width: 580px; }
.hero-content--center { max-width: 800px; margin: 0 auto; text-align: center; }
.hero-eyebrow  { margin-bottom: var(--space-4); display: inline-block; }
.hero-title    { margin-bottom: var(--space-6); }
.hero-subtitle { margin-bottom: var(--space-10); max-width: 52ch; }
.hero-actions  { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-visual   { display: flex; justify-content: center; align-items: flex-start; position: relative; }

/* ─── Phone frame mockup ──────────────────────────────────── */
.phone-frame {
  width: 268px;
  background: #E8E8E8;
  border-radius: 48px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow:
    0 0 0 6px #D0D0D0,
    0 0 0 7px rgba(0,0,0,0.06),
    0 48px 96px rgba(0,0,0,0.18),
    var(--shadow-orange);
  padding: 14px 10px 10px;
  position: relative;
}
.phone-notch {
  width: 78px; height: 24px;
  background: #C8C8C8; border-radius: var(--radius-pill);
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid rgba(0,0,0,0.08);
}
.phone-camera { width: 8px; height: 8px; background: #B0B0B0; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
.phone-screen {
  border-radius: 34px; overflow: hidden; height: 532px; background: #111;
  position: relative;
}
.hero-video-wrap {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), var(--shadow-orange);
  width: 100%;
  max-width: 480px;
}
.hero-video-wrap video {
  width: 100%; display: block;
}
.phone-home-bar { width: 100px; height: 4px; background: rgba(0,0,0,0.15); border-radius: var(--radius-pill); margin: 8px auto 0; }

/* ─── Opsync chat mockup ──────────────────────────────────── */
.mockup-chat-window {
  width: 340px;
  background: #FFFFFF; border-radius: var(--radius-2xl);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 48px 96px rgba(0,0,0,0.14), var(--shadow-orange);
  overflow: hidden;
}
.mockup-topbar {
  padding: var(--space-3) var(--space-5); background: #F2F1EF;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-3);
}
.mockup-dot { width: 8px; height: 8px; border-radius: 50%; }
.mockup-dot--r { background: #ff5f57; }
.mockup-dot--y { background: #febc2e; }
.mockup-dot--g { background: #28c840; }
.mockup-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-muted); flex: 1; text-align: center; }
.mockup-sources {
  display: flex; gap: 6px; padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.msrc { font-size: 11px; font-weight: 500; color: var(--fg-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 10px; }
.msrc--on { color: var(--accent); background: rgba(255,107,53,0.08); border-color: rgba(255,107,53,0.22); }
.mockup-msgs { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 200px; }
.mmsg {
  max-width: 88%; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); font-size: 13px; line-height: 1.55;
}
.mmsg--u {
  background: rgba(255,107,53,0.13); border: 1px solid rgba(255,107,53,0.2);
  color: var(--fg); align-self: flex-end;
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
}
.mmsg--s {
  background: #F2F1EF; border: 1px solid var(--border); color: var(--fg-secondary);
  align-self: flex-start;
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.mdata-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.mdata-row:last-child { border: none; padding-bottom: 0; }
.mdata-label { color: var(--fg-muted); }
.mdata-val { font-family: var(--font-accent); font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.mdata-bar { height: 3px; border-radius: 2px; background: rgba(255,107,53,0.15); margin-top: 4px; }
.mdata-fill { height: 100%; border-radius: 2px; background: var(--accent); }
.mockup-input-bar {
  padding: var(--space-3) var(--space-4); background: #F7F7F5;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-3);
}
.mockup-input-text { font-size: 13px; color: var(--fg-disabled); flex: 1; }
.mockup-send { width: 28px; height: 28px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ─── Index hero product preview cards ───────────────────── */
.hero-products-stack { position: relative; height: 400px; width: 340px; }
.hpc {
  position: absolute; width: 290px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.hpc--bizo {
  top: 0; left: 0; z-index: 2;
  border-color: rgba(255,107,53,0.25);
  box-shadow: var(--shadow-lg), var(--shadow-orange);
}
.hpc--opsync { bottom: 0; left: 50px; z-index: 1; transform: rotate(-2.5deg); }
.hpc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--accent); background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.2); border-radius: var(--radius-pill); padding: 3px 10px; margin-bottom: var(--space-3); }
.hpc-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: var(--space-2); color: var(--fg); }
.hpc-desc { font-size: 13px; color: var(--fg-muted); line-height: 1.5; margin-bottom: var(--space-4); }
.hpc-price { font-family: var(--font-accent); font-size: 22px; font-weight: 700; color: var(--fg); }
.hpc-note  { font-size: 12px; color: var(--fg-disabled); margin-top: 2px; }

/* ─── Stats ───────────────────────────────────────────────── */
.stats-section {
  position: relative; padding: var(--space-16) 0; z-index: 1;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-card { padding: var(--space-8) var(--space-6); text-align: center; position: relative; }
.stat-card:not(:last-child)::after { content: ''; position: absolute; top: 20%; right: 0; height: 60%; width: 1px; background: var(--border); }
.stat-number { margin-bottom: var(--space-2); }
.stat-label  { color: var(--fg-muted); font-size: 14px; font-weight: 500; margin: 0; }

/* ─── Section header ──────────────────────────────────────── */
.offerings-section { position: relative; padding: var(--space-24) 0; z-index: 1; }
.section-header { max-width: 560px; margin: 0 auto var(--space-16); text-align: center; }
.section-title    { margin-top: var(--space-3); margin-bottom: var(--space-4); }
.section-subtitle { margin: 0; }

/* ─── Zig-zag feature rows ────────────────────────────────── */
.features-zigzag { display: flex; flex-direction: column; gap: var(--space-24); }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.feature-row:nth-child(even) .feature-visual { order: -1; }
.feature-eyebrow { font-family: var(--font-accent); font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-3); }
.feature-title   { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,3vw,30px); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); margin-bottom: var(--space-4); text-wrap: balance; }
.feature-desc    { font-size: 16px; line-height: 1.7; color: var(--fg-secondary); margin-bottom: var(--space-6); }
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 14px; color: var(--fg-secondary); line-height: 1.55; }
.fcheck { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.feature-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  min-height: 260px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.feature-visual::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 40% 50%, rgba(255,107,53,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Feature visual inner components */
.fv-wa-bubbles { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 260px; }
.fv-bubble { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: 13px; line-height: 1.5; }
.fv-bubble--out { background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.2); color: var(--fg-secondary); align-self: flex-end; border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg); max-width: 80%; }
.fv-bubble--in  { background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-secondary); align-self: flex-start; border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg); max-width: 90%; }
.fv-bubble--result { background: rgba(255,107,53,0.08); border: 1px solid rgba(255,107,53,0.2); }
.fv-result-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-2); }
.fv-chip { font-size: 11px; font-weight: 600; color: var(--accent); background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.2); border-radius: var(--radius-pill); padding: 2px 8px; }

.fv-hebrew-sample { width: 100%; max-width: 260px; }
.fv-post-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.fv-post-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.fv-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,107,53,0.15); border: 1px solid rgba(255,107,53,0.25); flex-shrink: 0; }
.fv-post-meta-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.fv-post-meta-time { font-size: 11px; color: var(--fg-disabled); }
.fv-post-body { font-size: 13px; line-height: 1.6; color: var(--fg-secondary); }
.fv-post-tags { display: flex; gap: 6px; margin-top: var(--space-3); flex-wrap: wrap; }
.fv-tag { font-size: 11px; color: rgba(255,107,53,0.8); }

.fv-networks { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-3); width: 100%; max-width: 240px; }
.fv-net { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 600; color: var(--fg-secondary); }
.fv-net-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fv-net--sent { border-color: rgba(255,107,53,0.25); color: var(--fg); }
.fv-net--sent .fv-net-dot { background: var(--accent); box-shadow: 0 0 6px rgba(255,107,53,0.5); }
.fv-net--pending .fv-net-dot { background: var(--fg-disabled); }

/* ─── Legacy offering cards (homepage product cards) ──────── */
.offering-card {
  position: relative; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--card-radius); padding: var(--space-8);
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  overflow: hidden; z-index: 1;
  display: flex; flex-direction: column;
}
.offering-card:hover { transform: translateY(-6px); border-color: rgba(255,107,53,0.28); box-shadow: var(--shadow-lg), 0 0 30px rgba(255,107,53,0.06); }
.offering-card:active { transform: translateY(-3px) scale(0.99); }
.card-glow { position: absolute; inset: 0; background: radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(255,107,53,0.07) 0%, transparent 50%); pointer-events: none; }
.card-content { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.card-icon { margin-bottom: var(--space-6); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(255,107,53,0.08); border-radius: var(--radius-sm); border: 1px solid rgba(255,107,53,0.2); }
.card-title       { margin-bottom: var(--space-4); font-size: 22px; }
.card-description { color: var(--fg-secondary); font-size: 15px; line-height: 1.65; margin-bottom: var(--space-6); }
.card-features    { list-style: none; padding: 0; margin: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-2); }
.card-features li { display: flex; align-items: center; color: var(--fg-muted); font-size: 14px; }
.bullet { display: inline-block; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; margin-right: var(--space-3); flex-shrink: 0; }
.card-cta { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; transition: gap var(--dur-base) var(--ease-out), color var(--dur-fast); }
.card-cta:hover { color: var(--accent-hover); gap: var(--space-3); }

.offerings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.offerings-grid--two { grid-template-columns: repeat(2,1fr); max-width: 880px; margin: 0 auto; }

/* Product badge */
.product-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.25); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: var(--space-5); }

/* Trial strip */
.trial-strip { background: rgba(255,107,53,0.07); border: 1px solid rgba(255,107,53,0.18); border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); font-size: 13px; font-weight: 500; color: var(--fg-secondary); margin-bottom: var(--space-6); }
.trial-strip strong { color: var(--accent); }

/* ─── Process section ─────────────────────────────────────── */
.process-section { position: relative; padding: var(--space-24) 0; z-index: 1; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.process-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-12); margin-top: var(--space-8); }
.process-step { position: relative; }
.process-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; right: -25%; width: 50%; height: 1px; background: linear-gradient(90deg, rgba(255,107,53,0.22) 0%, transparent 100%); }
.step-number { font-family: var(--font-accent); font-size: 34px; font-weight: 700; color: rgba(255,107,53,0.1); margin-bottom: var(--space-4); line-height: 1; }
.step-title  { margin-bottom: var(--space-3); font-size: 18px; }
.step-desc   { font-size: 14px; line-height: 1.7; margin: 0; }

/* ─── Contact ─────────────────────────────────────────────── */
.contact-section { position: relative; padding: var(--space-24) 0; z-index: 1; }
.contact-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-16); align-items: center; }
.contact-title { margin-top: var(--space-3); margin-bottom: var(--space-4); }
.contact-desc  { margin-bottom: var(--space-8); }
.contact-details { border-top: 1px solid var(--border); padding-top: var(--space-6); }
.contact-detail-item { display: flex; flex-direction: column; gap: var(--space-1); }
.detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.detail-value a { color: var(--accent); text-decoration: none; font-weight: 600; transition: color var(--dur-fast); }
.detail-value a:hover { color: var(--accent-hover); }
.contact-form-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-lg); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-group   { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label   { font-weight: 500; color: var(--fg-secondary); font-size: 14px; }
.form-input   { font-family: var(--font-sans); font-size: 15px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--input-radius); color: var(--fg); padding: var(--space-3) var(--space-4); transition: all var(--dur-base) var(--ease-out); width: 100%; }
.form-input::placeholder { color: var(--fg-disabled); }
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255,107,53,0.3), 0 0 12px rgba(255,107,53,0.08); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-status   { font-size: 14px; text-align: center; transition: color var(--dur-fast); }
.form-status.success { color: var(--success); }
.form-status.error   { color: var(--danger); }

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq-section { position: relative; padding: var(--space-24) 0; z-index: 1; }
.faq-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-5); margin-top: var(--space-12); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--dur-base); }
.faq-item:hover { border-color: rgba(0,0,0,0.18); }
.faq-question { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: var(--space-3); margin-top: 0; }
.faq-answer   { font-size: 14px; line-height: 1.7; color: var(--fg-secondary); margin: 0; }

/* ─── Pricing ─────────────────────────────────────────────── */
.pricing-section { position: relative; padding: var(--space-24) 0; z-index: 1; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1.06fr 1fr; gap: var(--space-5); align-items: start; margin-top: var(--space-12); }
.pricing-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-8); position: relative; transition: transform var(--dur-base) var(--ease-out); }
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card--featured { background: linear-gradient(160deg,#FFF5F0 0%,#FFFFFF 60%); border-color: rgba(255,107,53,0.38); box-shadow: 0 0 0 1px rgba(255,107,53,0.12), 0 24px 48px rgba(0,0,0,0.10), 0 0 48px rgba(255,107,53,0.06); }
.pricing-badge { position: absolute; top: -13px; right: 50%; transform: translateX(50%); background: var(--grad-primary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); white-space: nowrap; }
.pricing-tier-name    { font-family: var(--font-accent); font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-2); }
.pricing-tier-tagline { font-size: 13px; color: var(--fg-muted); margin-bottom: var(--space-6); line-height: 1.55; }
.pricing-price        { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-2); }
.pricing-price-amount { font-family: var(--font-accent); font-size: 46px; font-weight: 700; color: var(--fg); line-height: 1; font-variant-numeric: tabular-nums; }
.pricing-price-currency { font-family: var(--font-accent); font-size: 22px; font-weight: 600; color: var(--fg-muted); }
.pricing-price-period { font-size: 13px; color: var(--fg-muted); margin-bottom: var(--space-6); }
.pricing-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
.pricing-credits { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.pricing-credit-item  { display: flex; align-items: center; gap: var(--space-3); }
.pricing-credit-icon  { width: 30px; height: 30px; background: rgba(255,107,53,0.07); border: 1px solid rgba(255,107,53,0.14); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pricing-credit-label { font-size: 13px; color: var(--fg-secondary); }
.pricing-credit-label strong { color: var(--fg); font-weight: 600; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.pricing-features li  { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 13px; color: var(--fg-secondary); line-height: 1.55; }
.pricing-check { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pricing-cta   { display: flex; flex-direction: column; gap: var(--space-3); }

/* Trial band */
.trial-band { background: rgba(255,107,53,0.05); border: 1px solid rgba(255,107,53,0.16); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-10); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-12); }
.trial-band-text h3 { margin: 0 0 var(--space-2); font-size: 20px; }
.trial-band-text p  { margin: 0; font-size: 14px; color: var(--fg-muted); }
.trial-band-chips   { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.trial-chip { background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.2); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); font-size: 12px; font-weight: 600; color: var(--accent); }

/* Early access (Opsync) */
.early-access-section { position: relative; padding: var(--space-24) 0; z-index: 1; }
.early-access-card {
  max-width: 680px; margin: var(--space-12) auto 0;
  background: linear-gradient(135deg, rgba(255,107,53,0.06) 0%, rgba(255,107,53,0.02) 100%);
  border: 1px solid rgba(255,107,53,0.2); border-radius: var(--radius-2xl);
  padding: var(--space-12); text-align: center;
}
.early-access-card h2 { margin-bottom: var(--space-4); }
.early-access-card p  { margin-bottom: var(--space-8); max-width: 46ch; margin-left: auto; margin-right: auto; }
.early-access-form { display: flex; gap: var(--space-3); max-width: 420px; margin: 0 auto; }
.early-access-form .form-input { flex: 1; }
.early-access-perks { display: flex; justify-content: center; gap: var(--space-6); margin-top: var(--space-6); flex-wrap: wrap; }
.ea-perk { font-size: 13px; color: var(--fg-muted); display: flex; align-items: center; gap: var(--space-2); }
.ea-perk-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ─── Footer ──────────────────────────────────────────────── */
.footer { position: relative; padding: var(--space-16) 0 var(--space-12); background: var(--bg-soft); border-top: 1px solid var(--border); z-index: 1; }
.footer-container { display: flex; flex-direction: column; gap: var(--space-10); }
.footer-brand { text-align: center; max-width: 400px; margin: 0 auto; }
.footer-logo  { height: 42px; width: auto; margin-bottom: var(--space-4); }
.footer-tagline { margin: 0; }
.footer-links-group { display: flex; justify-content: center; gap: var(--space-8); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-4) 0; flex-wrap: wrap; }
.footer-link  { color: var(--fg-muted); text-decoration: none; font-size: 14px; transition: color var(--dur-fast); }
.footer-link:hover { color: var(--fg); }
.footer-meta  { display: flex; justify-content: space-between; align-items: center; }
.footer-meta p { margin: 0; font-size: 13px; color: var(--fg-disabled); }
.footer-legal { display: flex; gap: var(--space-5); }

/* ─── FAQ Accordion ──────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.faq-list .faq-item { border-bottom: 1px solid var(--border); background: none; border-radius: 0; padding: 0; }
.faq-list .faq-item:hover { border-color: var(--border); }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) 0; gap: var(--space-6);
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--fg-secondary); text-align: right; line-height: 1.4;
  transition: color var(--dur-fast);
}
.faq-question:hover { color: var(--fg); }
.faq-list .faq-item.open .faq-question { color: var(--fg); }
.faq-icon {
  font-size: 22px; font-weight: 300; color: var(--accent); flex-shrink: 0;
  line-height: 1; transition: transform var(--dur-base) var(--ease-out);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
}
.faq-list .faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  overflow: hidden; max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.faq-answer p { color: var(--fg-secondary); font-size: 15px; line-height: 1.75; margin: 0 0 var(--space-5); }
.faq-list .faq-item.open .faq-answer { max-height: 320px; }

/* ─── Feature visual — video spread diagram ──────────────── */
.fvs-wrap {
  display: flex; align-items: center; gap: var(--space-5);
  width: 100%; justify-content: center;
}
.fvs-source { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.fvs-video-box {
  width: 52px; height: 52px; background: rgba(255,107,53,0.1);
  border: 1px solid rgba(255,107,53,0.3); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.fvs-label { font-size: 11px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.fvs-arrow { flex-shrink: 0; opacity: 0.5; }
.fvs-outputs { display: flex; flex-direction: column; gap: var(--space-3); }
.fvs-top-row { display: flex; gap: var(--space-3); }
.fvs-asset { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.fvs-asset-icon {
  width: 52px; height: 52px; background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-base);
}
.fvs-asset:hover .fvs-asset-icon { border-color: rgba(255,107,53,0.3); }
.fvs-asset-label { font-size: 11px; color: var(--fg-muted); font-weight: 500; }
.fvs-bottom-row { display: flex; gap: var(--space-2); }
.fvs-caption {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  flex: 1;
}
.fvs-caption span { font-size: 10px; color: var(--fg-disabled); font-weight: 500; }

/* ─── Integrations grid ──────────────────────────────────── */
.integrations-grid { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 280px; }
.integration-chip {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
}
.integration-chip--erp { border-color: rgba(255,107,53,0.25); }
.integration-category {
  font-family: var(--font-accent); font-size: 11px; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em;
  flex-shrink: 0; width: 32px;
}
.integration-names { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.integration-names span {
  font-size: 13px; font-weight: 500; color: var(--fg-secondary);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 2px 8px;
}

/* ─── RTL overrides ───────────────────────────────────────── */
[dir="rtl"] .bullet              { margin-right: 0; margin-left: var(--space-3); }
[dir="rtl"] .back-link           { flex-direction: row-reverse; }
[dir="rtl"] .card-cta            { flex-direction: row-reverse; }
[dir="rtl"] .product-badge       { flex-direction: row-reverse; }
[dir="rtl"] .trial-strip         { flex-direction: row-reverse; }
[dir="rtl"] .feature-list li     { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .pricing-credit-item { flex-direction: row-reverse; }
[dir="rtl"] .pricing-features li { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .trial-band          { flex-direction: row-reverse; }
[dir="rtl"] .mmsg--u { align-self: flex-start; border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg); }
[dir="rtl"] .mmsg--s { align-self: flex-end;   border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg); }
[dir="rtl"] .fv-bubble--out { align-self: flex-start; border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg); }
[dir="rtl"] .fv-bubble--in  { align-self: flex-end;   border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg); }
[dir="rtl"] .process-step:not(:last-child)::after { right: auto; left: -25%; background: linear-gradient(270deg, rgba(255,107,53,0.22) 0%, transparent 100%); }
[dir="rtl"] .stat-card:not(:last-child)::after    { right: auto; left: 0; }
[dir="rtl"] .hpc--bizo   { left: auto; right: 0; }
[dir="rtl"] .hpc--opsync { left: auto; right: 50px; }
[dir="rtl"] .mockup-topbar { flex-direction: row-reverse; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero-visual { justify-content: center; }
  .hero-content { max-width: 640px; }
  .feature-row { grid-template-columns: 1fr; gap: var(--space-8); }
  .feature-row:nth-child(even) .feature-visual { order: unset; }
  .features-zigzag { gap: var(--space-16); }
  .offerings-grid { grid-template-columns: repeat(2,1fr); }
  .offerings-grid--two { grid-template-columns: 1fr; max-width: 520px; }
  .faq-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .process-step:not(:last-child)::after { display: none; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .pricing-card--featured { order: -1; }
  .trial-band { flex-direction: column; text-align: center; }
  [dir="rtl"] .trial-band { flex-direction: column; }
  .early-access-form { flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}
@media (max-width: 768px) {
  .nav-links { position: fixed; top: 72px; left: 0; width: 100%; height: calc(100vh - 72px); background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: var(--space-10); z-index: 999; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); }
  .nav-links.active { transform: translateX(0); }
  .mobile-menu-btn { display: flex; }
  .mobile-menu-btn.active .bar:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .mobile-menu-btn.active .bar:nth-child(2) { opacity: 0; }
  .mobile-menu-btn.active .bar:nth-child(3) { transform: rotate(-45deg) translate(6px,-6px); }
  .nav-cta-container { display: none; }
  .hero-section { padding-top: 120px; }
  .hero-actions { flex-direction: column; width: 100%; max-width: 320px; }
  .hero-actions .btn { width: 100%; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card:not(:last-child)::after { display: none; }
  .stat-card { border-bottom: 1px solid var(--border); }
  .stat-card:last-child { border-bottom: none; }
  .offerings-grid { grid-template-columns: 1fr; }
  .contact-info { text-align: center; }
  .contact-details { display: flex; justify-content: center; }
  .footer-meta { flex-direction: column; align-items: center; gap: var(--space-4); }
  .footer-legal { justify-content: center; }
  .phone-frame { width: 240px; }
  .phone-screen { height: 476px; }
  .mockup-chat-window { width: 300px; }
  .hero-products-stack { width: 290px; height: 340px; }
  .hpc { width: 250px; }
}