/* ── styles.css ── */
/* ── fonts/fonts.css ── */
/* @font-face Google Sans 400 700 normal: declared by tokens.json (fonts/google-sans.woff2) */
/* @font-face Google Sans 400 700 normal: declared by tokens.json (fonts/google-sans.woff2) */

/* ── styles.css ── */

/* ── _ds_bundle.css ── */
:root {

  /* Google Sans everywhere — self-hosted variable font (Latin + Hebrew). */
  --font: "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Self-hosted Google Sans (OFL) — subset variable font, Latin + Hebrew, wght 400–700. */
/* @ds-font-face-dropped: unresolvable src */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Brand-coloured page scrollbar.
   Scoped to `html` so scrollable panels (the legal dialog, the consent panel)
   keep their own thinner treatment, and to a fine pointer so touch devices are
   left with their native overlay scrollbars — styling ::-webkit-scrollbar on a
   phone forces a permanent bar where there was none.
   Chromium ignores these pseudo-elements entirely once `scrollbar-color` is set
   on the same element, and that property cannot take a gradient, so the two are
   kept apart: the gradient here, and a solid fallback for engines that have no
   ::-webkit-scrollbar at all. */
@media (pointer: fine) {
  html::-webkit-scrollbar {
    width: 12px;
  }
  html::-webkit-scrollbar-track {
    background: #08051c;
  }
  html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6c58be 0%, #2fadb7 100%);
    border-radius: 999px;
    /* inset from the track so the thumb reads as a floating pill */
    border: 3px solid #08051c;
  }
  html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7c68ce 0%, #3fbdc7 100%);
  }

  @supports not selector(::-webkit-scrollbar) {
    html {
      scrollbar-width: thin;
      scrollbar-color: #6c58be #08051c;
    }
  }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

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

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Reusable brand button */
.btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-gradient-cta);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  padding: 12px 26px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 8px 24px -8px rgba(108, 88, 190, 0.6);
}
.btn-gradient:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 14px 32px -8px rgba(47, 173, 183, 0.55);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-soft);
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  padding: 12px 26px;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
}

.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section {
  position: relative;
  /* fluid so it actually scales DOWN on 13"-14" laptops instead of staying maxed */
  padding-block: clamp(54px, 5.2vw, 90px);
  /* clip horizontally (no h-scroll from bleeding glows) but let glows/gradients
     bleed vertically into neighbouring sections for smooth Figma-style transitions */
  overflow-x: clip;
}

.section-title {
  /* lower vw coefficient + cap so titles keep scaling through the 1280-1600 range
     (the old clamp hit its 38px cap already at ~1270px → oversized on small laptops) */
  font-size: clamp(24px, 2.3vw, 35px);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.section-sub {
  color: var(--grey);
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
  margin-top: 14px;
}

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

/* Visible to assistive technology, invisible on screen. Used where an icon
   carries meaning that a screen reader would otherwise skip: the footer's heart
   stands in for the word "אהבה", so the sentence has to be completed in text.
   clip-path over display:none — a hidden element is not announced at all. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------------------------------------------
   Blog card + category tag.

   These live here, global, and NOT in BlogIndex.jsx, because the card is
   rendered from two places: the blog index and the "related articles" row at
   the foot of an article. A per-component <style> block only exists while that
   component is mounted, so keeping them in BlogIndex meant every card on an
   article page rendered completely unstyled. Same trap as the legal dialog.
   .btag is here for the same reason: the article header uses it too.
   --------------------------------------------------------------------------- */
.bcard{display:flex;flex-direction:column;padding:20px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);transition:border-color .2s ease,transform .2s ease}
.bcard:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
/* one link wraps image + meta + title + excerpt so the whole upper card
   is clickable without nesting interactive elements */
.bcard-hit{display:block;color:inherit;text-decoration:none}
.bcard-img{display:block;aspect-ratio:370/180;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.04)}
.bcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.bcard:hover .bcard-img img{transform:scale(1.04)}
.bcard-meta{display:flex;align-items:center;gap:12px;margin-top:16px;height:22px}
.btag{display:inline-flex;align-items:center;height:22px;padding-inline:12px;border-radius:999px;font-size:12px;line-height:14px;font-weight:500;white-space:nowrap}
/* three accents, sampled from the design, reused across six categories */
.btag--teal{background:rgba(49,173,181,.14);color:#81FFD9}
.btag--yellow{background:rgba(255,247,197,.12);color:#FEF08A}
.btag--purple{background:rgba(107,90,189,.14);color:#A394FF}
.bcard-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35);flex:none}
.bcard-date{font-size:12px;line-height:14px;color:var(--grey)}
.bcard-title{font-size:20px;line-height:25px;font-weight:700;color:#fff;margin-top:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:50px}
.bcard:hover .bcard-title{color:#fff}
.bcard-excerpt{font-size:13px;line-height:20px;color:var(--grey);margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:60px}
.bcard-sep{height:1px;background:rgba(255,255,255,.10);margin-top:16px}
.bcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;min-height:32px}
.bcard-author{display:flex;align-items:center;gap:8px}
.bcard-author-text{display:flex;flex-direction:column;text-align:right}
/* the org byline has no avatar, so the text carries the row on its own */
.bcard-author{min-height:32px}
.bcard-author-name{font-size:13px;line-height:15px;color:#fff}
.bcard-author-role{font-size:11px;line-height:13px;color:var(--grey);margin-top:2px}
.bcard-avatar{width:32px;height:32px;border-radius:8px;object-fit:cover;flex:none}
.bcard-more{font-size:13px;line-height:15px;color:var(--teal);text-decoration:none;white-space:nowrap}
.bcard:hover .bcard-more{text-decoration:underline}

/* decorative radial glow helper */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  /* subtle translucent white bar across the header (as in Figma) */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(3px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
  background: rgba(8, 5, 28, 0.72);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #fff;
}
.wordmark .wm-accent {
  color: #2eaeb7;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  gap: 20px;
  /* same box as .footer-bottom, so the logo and the CTA line up with the
     footer's outer columns instead of sitting inside a narrower container */
  width: calc(100% - 64px);
  max-width: 1376px;
  margin-inline: auto;
  padding-inline: 0;
}
.header-logo img {
  height: 26px;
}
.header-logo .gradient-text {
  font-size: 22px;
  font-weight: 800;
}
.header-nav {
  display: flex;
  gap: 28px;
}
.header-nav a {
  font-size: 14px;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}
.header-nav a:hover {
  opacity: 1;
  color: var(--teal);
}
.header-cta {
  font-size: 13px;
  padding: 9px 20px;
  border-radius: 6px;
}
.header-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.header-burger span {
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
/* Figma node 1:4951 (Mobile / Open Menu): solid #100d23 panel under a 0.5px
   #585858 top rule, 40px of air above the links and 32px below the button,
   16px side padding, links centred with a 40px rhythm. */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
  padding: 40px 16px 32px;
  background: #100d23;
  border-top: 0.5px solid #585858;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.mobile-menu-links a {
  font-size: 14px;
  line-height: 19.5px;
  color: #fff;
  /* the design leaves the links at their text height, which is under the 24px
     minimum target size — padded out and pulled back so the touch area grows
     without changing the 40px spacing the design specifies */
  padding-block: 11px;
  margin-block: -11px;
}
.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  border-radius: 8px;
  background: var(--brand-gradient-cta);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: filter 0.18s ease;
}
.mobile-menu-cta:hover {
  filter: brightness(1.08);
}
/* register pill at the inline end of the mobile header (1:4937) */
.header-register {
  display: none;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--brand-gradient-cta);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .header-nav {
    display: none;
  }
  .header-cta {
    display: none;
  }
  /* the two remaining actions sit directly in the header row so each can be
     placed on its own side, with the wordmark centred between them */
  .header-actions {
    display: contents;
  }
  .header-inner {
    position: relative;
    padding: 16px 0;
  }
  .header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .header-burger {
    display: flex;
    order: -1; /* first in a row-reverse RTL flow = the right edge */
    color: #fff;
  }
  .header-register {
    display: inline-flex;
    order: 1;
  }
  .mobile-menu {
    display: flex;
  }
}

/* ── styles.css ── */


/* ── fonts/fonts.css ── */

/* ── _ds_bundle.css ── */