/*
 * iTrade Group — Hebrew / RTL layer over the Tradient Webflow template.
 *
 * Loaded AFTER the Webflow stylesheet so it can override without touching the
 * vendor CSS, which lives on Webflow's CDN and is not ours to edit.
 *
 * Two jobs only: give Hebrew a real typeface, and repair the handful of places
 * where the template's physical (left/right) CSS does not follow dir="rtl".
 * Layout, spacing, colour and animation are deliberately left alone.
 */

/*
 * Heebo, self-hosted, Hebrew subset only.
 *
 * This was an `@import` of fonts.googleapis.com, which is the worst shape a
 * font can have: the browser must parse this file, discover the import, fetch
 * Google's CSS, parse THAT, and only then start the font files — three
 * serialized round trips to two extra origins, all of it blocking first paint.
 *
 * Only the Hebrew range is shipped. Latin glyphs come from the template's own
 * Inter, so pulling Heebo's latin, latin-ext, math and symbols subsets would be
 * bytes for glyphs that never render. Five weights (300-700) is exactly what
 * the stylesheet uses.
 */
@font-face {
  font-family: Heebo;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/heebo-hebrew-300.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: Heebo;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/heebo-hebrew-400.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: Heebo;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/heebo-hebrew-500.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: Heebo;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/heebo-hebrew-600.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: Heebo;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/heebo-hebrew-700.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/*
 * The template's Inter is a latin-only subset (inter-v19-latin-*.woff2), so
 * Hebrew never had glyphs to render with and fell through to a system font.
 * Inter stays first: browsers fall back per glyph, so Latin — product names,
 * numbers, "AI" — keeps the template's typography and only Hebrew picks up
 * Heebo, which was drawn to sit alongside it.
 */
:root {
  --font-family--body-font: Inter, Heebo, "Helvetica Neue", Arial, sans-serif;
  --font-family--heading-font: Inter, Heebo, Arial, "Helvetica Neue", sans-serif;
}

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  font-family: Inter, Heebo, "Helvetica Neue", Arial, sans-serif;
}

/*
 * Wordmark.
 *
 * The template shipped Tradient's own logo SVG, which could not stay. There is
 * no iTrade logo file yet, so the mark is set in type — replace this block with
 * an <img> the moment a real logo exists.
 */
.itrade-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.34em;
  font-family: Inter, Heebo, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.itrade-wordmark-suffix {
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.62;
}

.itrade-wordmark.is-footer {
  font-size: 20px;
}

/* Hebrew has no capitals; uppercasing it does nothing but break letter-spacing. */
html[dir="rtl"] [class*="text-small"],
html[dir="rtl"] .section-badge,
html[dir="rtl"] .text-color-brand {
  text-transform: none;
}

/*
 * Latin runs inside Hebrew sentences are deliberately left to the browser.
 *
 * `unicode-bidi: plaintext` looks like the right tool here and is not: it picks
 * each block's base direction from its first strong character, so a line that
 * opens with Latin — "iTrade Group מרכזת…", "iTrade Analytics היא…" — flips the
 * whole paragraph to LTR and left-aligns it inside an RTL page. The Unicode
 * bidi algorithm already lays "מערכת ה-AI סורקת OHLCV ו-Bid / Ask" out
 * correctly under a plain dir="rtl", so nothing is declared for it.
 */

/* Headline text alignment: the template hard-codes `left` in six places. */
html[dir="rtl"] .hero-description-wrap,
html[dir="rtl"] .price-description,
html[dir="rtl"] .faq-answer,
html[dir="rtl"] .footer-link-wrap {
  text-align: right;
}

/*
 * Centred sections stay centred.
 *
 * `.section-heading` and `.heading-text-wrap` used to be in the right-align
 * list above, which was wrong: the template's own `.section-heading` is
 * `text-align: center`, and both of these are already centred as BOXES — equal
 * margins either side. Right-aligning their text made a one-line heading look
 * centred and a wrapped one look broken, because the second line hugged the
 * right edge. "שני מוצרים. מחזור עבודה אחד." wraps, which is where it showed.
 *
 * The two headings that sit in two-column layouts — `.works-card-heading` and
 * `.ts-heading` — are deliberately NOT here. Their boxes are edge-anchored
 * rather than centred, and centring their text would break that.
 */
html[dir="rtl"] .section-heading,
html[dir="rtl"] .heading-text-wrap,
html[dir="rtl"] .section-heading.price,
html[dir="rtl"] .section-heading.center,
html[dir="rtl"] .cta-content-wrap {
  text-align: center;
}

/*
 * Numerals.
 *
 * "13,413" and "24/7" are Latin-script runs sitting alone in an RTL block, so
 * the browser reorders them unless the direction is pinned back to LTR.
 */
html[dir="rtl"] .statistics-card h2,
html[dir="rtl"] .text-xlarge,
html[dir="rtl"] .pricing-plan h3 {
  direction: ltr;
  unicode-bidi: isolate;
}

/*
 * The cart is gone, not hidden.
 *
 * This was a Webflow eCommerce export and iTrade sells nothing, so every
 * commerce node — the wrapper, the modal, the order-item template and the
 * currency config — has been deleted from the markup rather than covered up
 * with `display: none`. What remains here is only the nav button's shell,
 * which the header layout still reserves space for.
 *
 * The cart's JAVASCRIPT cannot go with it: Webflow compiles its commerce code
 * into the same webpack chunk as the IX2 interactions engine, so dropping it
 * takes the animations down too. Verified by bisecting both chunks.
 */
.cart-button {
  display: none !important;
}

/*
 * Horizontal overflow introduced by the flip.
 *
 * Grid and flex children default to `min-width: auto`, so they refuse to shrink
 * below their content. The template's pricing cards are already wider than their
 * 421px track; under LTR that overflow ran toward the middle of the page and
 * stayed on screen, but with the first column on the right it ran off the edge
 * and gave the document 304px of horizontal scroll.
 */
html[dir="rtl"] .pricing-card-wrapper > *,
html[dir="rtl"] .price-collection-list,
html[dir="rtl"] .pricing-collection-list,
html[dir="rtl"] .pricing-collection-item {
  min-width: 0;
}

/*
 * The entrance animations are the other half of it, and the more interesting
 * half. Webflow parks the pricing cards at `rotate(-20deg) translateX(260px)`
 * and animates them to rest on scroll. `translateX` is a physical axis and is
 * NOT mirrored by `dir`, so a nudge that pushed the first card harmlessly
 * inward under LTR pushes it off the right edge once that card starts on the
 * right — 304px of horizontal scroll on a page nobody has scrolled yet.
 *
 * Clipping the wrapper contains the resting positions without touching the
 * animation, which is what the template's own design depends on. `clip` rather
 * than `hidden` so no scroll container is created (that would break any
 * position: sticky inside); `hidden` stays first as the fallback for browsers
 * without `clip`.
 */
/*
 * SUPERSEDED — see `.itrade-clip` in itrade-static.css.
 *
 * This used to clip `.page-wrapper`, and `.page-wrapper` is the whole document:
 * 1440x9430, 13.6 megapixels. Chrome copes; Safari does not. A clip that large
 * makes it build one enormous backing store, and the symptom is the entire
 * viewport going black for seconds at a time while it re-rasterises — reported
 * as LCP 9s and INP 5400ms.
 *
 * The animation described above is also gone: the `translateX(260px)` entrance
 * that caused the overflow belonged to Webflow's interactions engine, which was
 * removed on 2026-09-10. What still overflows is a decorative gradient bleeding
 * off the left and the slider's strip of slides running off the right, neither
 * of which needs the document clipped to contain it — and neither of which
 * overflows at all above 992px.
 */

/*
 * Webflow sliders cannot run in RTL.
 *
 * The slider JS measures slide offsets and writes `transform: translateX(-n)`
 * assuming a left-to-right track, while the slides themselves are inline-blocks
 * inside a `white-space: nowrap` mask. Flipping the page sent them to negative
 * coordinates and left the mask 366px wide inside a 1296px slider. The
 * component is therefore pinned to LTR and only the text inside each slide is
 * flipped back — the carousel keeps working and the copy still reads correctly.
 */
html[dir="rtl"] .w-slider {
  direction: ltr;
}

html[dir="rtl"] .w-slide,
html[dir="rtl"] .ts-slide {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .ts-slide {
  margin-left: 8px;
  margin-right: 0;
}

/* Feature ticks and list bullets sit on the wrong side once the text flips. */
html[dir="rtl"] .pricing-features-item,
html[dir="rtl"] .company-info-link,
html[dir="rtl"] .button-inner-flex {
  flex-direction: row-reverse;
}

/*
 * Arrow glyphs.
 *
 * The CTA and card arrows point right, which in an RTL page reads as "back".
 * Mirroring the icon keeps "forward" meaning forward.
 */
html[dir="rtl"] .button-icon,
html[dir="rtl"] .cta-button-icon,
html[dir="rtl"] .button-secondary svg {
  transform: scaleX(-1);
}

/* Forms: labels and inputs both need the flip. */
html[dir="rtl"] .form-field,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] textarea {
  text-align: right;
  direction: rtl;
}

/* An email address typed into an RTL field must still read left-to-right. */
html[dir="rtl"] input[type="email"] {
  direction: ltr;
  text-align: right;
}

/*
 * Webflow's custom checkbox is floated left into a negative left margin that
 * the label reserves with `padding-left`. Neither is mirrored by `dir`, so the
 * box landed on top of the first Hebrew character of "זכרו אותי ל-30 יום".
 * Both sides are swapped here.
 */
html[dir="rtl"] .w-checkbox {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .w-checkbox-input {
  float: right;
  margin-left: 0;
  margin-right: -20px;
}

/* The label text and its box read as one row, right to left. */
html[dir="rtl"] .checkbox-field {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  padding-right: 0;
}

html[dir="rtl"] .checkbox-field .w-checkbox-input {
  float: none;
  margin: 0;
}

/*
 * Footer watermark.
 *
 * The template ended every page with a 1405px "Tradient" wordmark at 8% opacity
 * — the vendor's brand, set in outlined paths, sitting under our footer. Set in
 * type instead of shipped as an SVG: it renders our name, follows the same font
 * stack as the rest of the page, and drops a 6.5 KB asset.
 *
 * Sized in vw so it keeps its proportion to the footer at any width, and
 * clipped so a long name can never widen the document.
 */
.itrade-footer-watermark {
  font-family: Inter, Heebo, sans-serif;
  font-size: 12.2vw;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.86;
  color: #fff;
  opacity: 0.08;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.footer-brand-text {
  overflow: hidden;
}

/*
 * Blank-hero safety net.
 *
 * Webflow hides the entire hero until its interactions engine boots:
 *
 *   html.w-mod-js:not(.w-mod-ix3) :is(.heading-type-v1, [animation], …)
 *       { visibility: hidden !important }
 *
 * That gate sits behind 432 KB (gzipped) of jQuery + two Webflow chunks + GSAP,
 * all of which must arrive and run before a single word appears. On a fast
 * connection that is a blink; on mobile it is several seconds of an empty page,
 * which is what "the site is slow" actually looks like — the server itself
 * answers in under 200 ms.
 *
 * The gate is kept, because it is what prevents a flash of unanimated text on a
 * fast load. It is given a deadline instead: a ~90-byte inline script in <head>
 * adds `.itrade-reveal` after 1.2s, independently of every heavy bundle. If
 * Webflow boots first — the normal case — `.w-mod-ix3` lands, the gate stops
 * matching, and this never applies.
 *
 * A keyframe animation was tried first and cannot work: an `!important`
 * declaration beats an animation in the cascade, so `visibility: hidden
 * !important` won and the hero stayed blank. Hence a real `!important` rule,
 * carrying one more class than Webflow's (0,4,1 vs 0,3,1) so it wins outright.
 */
html.w-mod-js.itrade-reveal.itrade-reveal :is([Animation="title"], .cta-description,
  .cta-button-wrap, .hero-badge, .heading-type-v1, [animation="description"],
  .hero-button-wrap, .hero-image-wrap.two, .hero-image-wrap.one, .hero-image-wrap.main) {
  visibility: visible !important;
}

/*
 * ...and it has to STAY revealed.
 *
 * The rule above used to carry `:not(.w-mod-ix3)`, so the moment Webflow's
 * engine finally booted it stopped applying, IX2 reset the hero to opacity 0
 * and replayed the entrance animation. Measured on a throttled connection: the
 * hero appeared at 1.6s, vanished again at 4.9s and only settled at 6.2s. The
 * page was never slow to arrive — it was slow to stop moving.
 *
 * IX2 writes its initial state as inline styles, which a stylesheet only beats
 * with !important. Webflow's own gate sits in an inline <style> after this
 * file, so these selectors repeat `.itrade-reveal` to outrank it (0,3,1 vs
 * 0,2,1) — an equal-specificity rule would lose on source order alone. The deadline itself is now conditional (see the inline
 * script in <head>), so on a normal load `.itrade-reveal` never lands and the
 * animation plays exactly as designed. This is only the late path.
 */
html.w-mod-js.itrade-reveal.itrade-reveal :is([Animation="title"], .cta-description,
  .cta-button-wrap, .hero-badge, .heading-type-v1, [animation="description"],
  .hero-button-wrap) {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/*
 * The hero does not animate in. It is simply there.
 *
 * Measured on a warm, fast load with the interactions engine already running
 * at 194ms: the badge finished at +502ms, the call to action at +1660ms and the
 * hero image at +2293ms. None of that is loading — it is a scripted entrance
 * that runs at every connection speed, and it was most of what "takes five or
 * six seconds" actually felt like. Cut, by decision.
 *
 * Pinned rather than deleted. Two different things want these elements hidden:
 * Webflow's gate (an inline <style> that hides them until IX2 boots) and IX2
 * itself (inline styles, which only an !important declaration outranks). One
 * rule answers both. `html.w-mod-js` carries the weight needed to beat the
 * gate's own 0,2,1 — an equal-specificity rule would lose on source order.
 *
 * Scoped to .hero-section on purpose: .heading-type-v1 appears five times on
 * this page and .hero-image-wrap six, and everything below the fold should
 * still animate as it scrolls into view.
 *
 * COUNT THE CLASSES BEFORE EDITING THIS SELECTOR. `.w-mod-js` is repeated three
 * times to win a specificity fight that is easy to misread. Webflow's gate is:
 *
 *   html.w-mod-js:not(.w-mod-ix3) :is(…, .hero-image-wrap.two, …)
 *
 * `:is()` takes the specificity of its HIGHEST argument, and that list contains
 * `.hero-image-wrap.two` — two classes. So the gate is (0,4,1), not the (0,3,1)
 * it looks like. This rule was written as `html.w-mod-js .hero-section .x`,
 * which is (0,3,1), and simply lost.
 *
 * The cost of losing was invisible in every load metric. `opacity` was pinned
 * fine — the gate never sets opacity — so the hero measured as "styled" almost
 * immediately, while `visibility: hidden` still held it off screen. Measured on
 * the live page at 4x CPU: the h1 was in the DOM at 409ms with opacity 1 at
 * 512ms, and did not become paintable until 1479ms, when the 1.2s
 * `.itrade-reveal` deadline finally fired. Blocking every script on the page
 * did not change that number, which is what proves it was the cascade and not
 * the bundles.
 *
 * Three `.w-mod-js` puts this at (0,5,1), which beats the gate outright rather
 * than depending on source order — this file is linked BEFORE the inline
 * <style> that carries the gate, so an equal-specificity rule would lose.
 */
html.w-mod-js.w-mod-js.w-mod-js .hero-section .hero-badge,
html.w-mod-js.w-mod-js.w-mod-js .hero-section .heading-type-v1,
html.w-mod-js.w-mod-js.w-mod-js .hero-section .hero-description-wrap,
html.w-mod-js.w-mod-js.w-mod-js .hero-section .hero-button-wrap,
html.w-mod-js.w-mod-js.w-mod-js .hero-section .hero-image-wrap,
html.w-mod-js.w-mod-js.w-mod-js .hero-section [animation="hero-title"],
html.w-mod-js.w-mod-js.w-mod-js .hero-section [animation="description"],
html.w-mod-js.w-mod-js.w-mod-js .hero-section [animation="button"] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/*
 * REMOVED — this rule is why the headings stopped animating.
 *
 * It pinned `.pricing-title`, `.section-badge`, `.statistics-card`,
 * `.feature-item-card` and `.integrations-card-effect` to `opacity: 1
 * !important`, and it was right to at the time: Webflow's engine left content
 * at opacity 0 while it was already on screen, and this forced it visible.
 *
 * That engine was removed on 2026-09-10. Nothing sets those elements to
 * opacity 0 any more EXCEPT the one-way entrance in itrade-static.css — so all
 * this rule did was outrank that entrance with `!important` and stop the fade
 * from ever running. The headings still slid their 16px, which is why the
 * result read as "not animated" rather than as broken.
 */


/*
 * The pinned "מחקר. ניתוח. גרף. ביצוע." section.
 *
 * The sticky section is held in place by three 100vh spacers, but the card
 * sequence it drives is keyed to the FIRST one and finishes with it. Measured:
 * the four cards were fully in place at scrollY 5027 and the section stayed
 * pinned until 6127 — 1,100px, more than a full screen, of scrolling past a
 * picture that had stopped changing. Half-height bars keep the animation intact
 * (it completes ~190px before the release) and give back 1,350px of dead
 * scroll on the way to "שני מוצרים. מחזור עבודה אחד.".
 */
.banner-scroll-bar {
  height: 50vh;
}

/*
 * The CTA background is a 58 KB image for a section far below the fold, and the
 * stylesheet asked for it during the opening handshake — competing with the
 * fonts and the scripts that actually gate first paint. It is fetched once the
 * page has loaded instead; nobody has scrolled that far in the first second.
 */
.cta-section {
  background-image: none;
}
html.itrade-loaded .cta-section {
  background-image: url("assets/img/CTA.webp");
}

/*
 * "or" divider between the email form and the Google button.
 *
 * Both are real ways in — the form posts to /api/auth/register|login and Google
 * posts an ID token — so neither is presented as the lesser option.
 */
.itrade-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
}

.itrade-or::before,
.itrade-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

#itrade-submit {
  width: 100%;
  cursor: pointer;
  border: 0;
}

#itrade-submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

/*
 * Google button, wearing the template's own styling.
 *
 * Google's ID-token flow only fires from a button their library renders, and
 * that button is an iframe we cannot restyle — it arrives as their blue pill,
 * which looks nothing like the rest of this page.
 *
 * So their button is still the real control: it sits on top, stretched to the
 * full area and fully transparent, and takes every click and keyboard focus.
 * What the reader sees underneath is `.button-primary-inner.log-in`, the same
 * class the template's own Google button used, with the same icon.
 *
 * The visible half is aria-hidden because Google's button carries the real
 * accessible name; announcing both would read the control twice.
 */
.itrade-google-wrap {
  position: relative;
  width: 100%;
}

.itrade-google-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  /* Purely decorative. The template's button classes establish a stacking
     context that otherwise wins the hit test, and every click would land here
     instead of on Google's control sitting above it. */
  pointer-events: none;
}

.itrade-google-wrap #itrade-google-button {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  overflow: hidden;
  /* The iframe is fixed-size; scaling it up guarantees it covers the face so
     no click can land beside it. */
  display: flex;
  justify-content: center;
}

.itrade-google-wrap #itrade-google-button > div,
.itrade-google-wrap #itrade-google-button iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* Keyboard focus lands on Google's invisible button, so the ring has to be
   drawn on the visible face instead. */
.itrade-google-wrap:focus-within .itrade-google-face {
  outline: 2px solid var(--_colors---brand, #0a7cff);
  outline-offset: 2px;
}

/*
 * The held state for anything that has already been revealed once. See
 * itrade-keep.js — it records the state each element was in when it had
 * finished arriving, and pins it there rather than letting the entrance run
 * backwards on the way up. It covers the three scroll-scrubbed sections and the
 * split headings across the page.
 *
 * `!important` in a stylesheet outranks any inline value, which is what lets
 * this beat the interaction engine's per-frame inline writes. The values come
 * from custom properties because those are the one thing the engine never
 * writes to, so it cannot clobber them. The fallbacks make the rule inert if
 * the script has not recorded anything yet.
 */
html.w-mod-js .itrade-keep {
  opacity: var(--itrade-keep-opacity, 1) !important;
  filter: var(--itrade-keep-filter, none) !important;
  transform: var(--itrade-keep-transform, none) !important;
}

/*
 * The product name in a pricing card must not break mid-word.
 *
 * `.pricing-plan` lays the 65px product name beside its subtitle in a single
 * flex row with both children shrinkable. That works for the template's short
 * English subtitles; ours are Hebrew and longer, so the row runs out of width
 * and the browser resolves it by shrinking the NAME — which then breaks inside
 * the word. "Analytics" was rendering as "Analytic" over "s", and the extra
 * lines made that card taller than the other two, leaving its button out of
 * line with theirs.
 *
 * Refusing to shrink the name moves the wrapping onto the subtitle, where it
 * belongs. Measured at 1440 / 1024 / 768 / 390: the name fits on one line at
 * every width, and nothing overflows.
 */
.pricing-plan .heading-type-v1 {
  flex-shrink: 0;
  white-space: nowrap;
}