/* ==========================================================================
   Dogware Flex — design system (base). Logical properties only (RTL-safe).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
:lang(he) body, html[lang="he"] body, [dir="rtl"] body { font-family: var(--font-he); }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.06; font-weight: 900; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.flex-part { position: relative; }
.section { padding-block: var(--section-y); }

/* ---------- Kicker / eyebrow ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet);
  margin: 0 0 20px;
}
.kicker::before { content: ""; inline-size: 26px; block-size: 2px; background: var(--gradient); border-radius: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1;
  padding: 15px 28px; border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 8px 30px rgba(124,92,255,.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(124,92,255,.5); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--violet); color: #fff; transform: translateY(-2px); }
.btn-arrow::after { content: "→"; font-weight: 700; }
[dir="rtl"] .btn-arrow::after { content: "←"; }

/* ---------- Prose helpers ---------- */
.lede { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.6; color: var(--muted); font-weight: 400; }
.eyebrow-center { text-align: center; }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: -9999px; z-index: 999; background: var(--violet); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
.skip-link:focus { inset-inline-start: 16px; inset-block-start: 16px; }

/* ---------- Section rhythm & dividers ---------- */
.section--tint { background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(6,182,212,.08), transparent 60%),
    var(--ink);
}
.hr-line { block-size: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}