/* ============================================================
   SBS Tech — English side (/en/)
   Loaded only when $LANG='en' (includes/header.php).

   Brief: an Israeli software house selling websites, booking systems and
   custom software to businesses abroad. The buyer's dominant feeling is risk,
   not desire, so the page is built to read as established and precise rather
   than eager. One bold object (the price table), everything else disciplined.

   Deliberately NOT the previous version's look: no uniform card grid, no
   repeated soft shadow, no uppercase tracked eyebrows, no pill badges.
   ============================================================ */

/* ─── The rule that matters most ───────────────────────────────────────
   styles/main.css sets `body { direction: rtl; text-align: right; }`, and a CSS
   direction property BEATS the HTML dir attribute. Without this override the
   whole English page renders right-to-left: mirrored navbar, right-aligned
   text, and full stops landing at the START of each line. */
html[dir="ltr"] body {
    direction: ltr;
    text-align: start;
}

/* ─── Tokens ───────────────────────────────────────────────────────── */
html[dir="ltr"] {
    --ink:        #0E1620;   /* hero surface: deep blue-graphite, not tinted black */
    --ink-2:      #18222E;   /* raised surface on ink */
    --paper:      #FAF9F7;
    --band:       #F1EFEA;   /* quiet alternate band */
    --text:       #11181F;
    --muted:      #59636F;
    --line:       rgba(14, 22, 32, .12);
    --line-soft:  rgba(14, 22, 32, .07);
    --amber:      #E87722;   /* the logo's orange: accent only, never a surface */
    --amber-deep: #A85210;   /* only where white text must sit on it */
    --on-ink:     #FFFFFF;
    --on-ink-dim: rgba(255, 255, 255, .64);
    --on-ink-line: rgba(255, 255, 255, .14);

    --display: 'Archivo', system-ui, sans-serif;
    --body:    'Inter Tight', system-ui, sans-serif;

    --wrap: 1120px;
    --gut: 24px;
}

/* ─── Base ─────────────────────────────────────────────────────────── */
html[dir="ltr"] body {
    background: var(--paper);
    color: var(--text);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
.en-wrap   { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.en-narrow { max-width: 680px; }

.en-section { padding: 88px 0; }
.en-section--band { background: var(--band); }
.en-section--ink  { background: var(--ink); color: var(--on-ink); }

/* Type -------------------------------------------------------------- */
.en-h1, .en-h2, .en-h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; }
.en-h1 {
    font-size: clamp(2.5rem, 5.6vw, 4.25rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.035em;
    margin: 0 0 18px;
    text-wrap: balance;
}
.en-h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.12;
    margin: 0 0 16px;
    text-wrap: balance;
}
.en-h3 { font-size: 1.14rem; line-height: 1.35; margin: 0 0 8px; letter-spacing: -.015em; }

.en-lede { font-size: 1.16rem; line-height: 1.6; color: var(--muted); margin: 0 0 44px; max-width: 58ch; }
.en-section--ink .en-lede { color: var(--on-ink-dim); }
.en-p { margin: 0 0 14px; color: var(--muted); }

/* A short label that is NOT an uppercase tracked eyebrow: sentence case,
   sitting on a hairline, so it reads as structure rather than decoration. */
.en-kicker {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--muted);
    padding-bottom: 12px;
    margin: 0 0 32px;
    border-bottom: 1px solid var(--line);
    letter-spacing: -.01em;
}
.en-section--ink .en-kicker { color: var(--on-ink-dim); border-bottom-color: var(--on-ink-line); }

/* ─── Hero ─────────────────────────────────────────────────────────── */
.en-hero {
    background: var(--ink);
    color: var(--on-ink);
    /* Tightened so the primary action clears the fold on a laptop. */
    padding: clamp(60px, 8vw, 100px) 0 clamp(56px, 7vw, 88px);
    position: relative;
    overflow: hidden;
}
/* One quiet gradient, top-right, to stop the block reading as a flat slab.
   Not a decorative wash: it lifts the corner the product sits in. */
.en-hero::after {
    content: "";
    position: absolute;
    top: -30%; right: -10%;
    width: 60%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(232,119,34,.16), transparent 62%);
    pointer-events: none;
}
.en-hero__grid { display: grid; gap: 52px; align-items: center; position: relative; z-index: 1; }
.en-hero__eyebrow {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 500;
    color: var(--on-ink-dim);
    margin: 0 0 24px;
    display: flex; align-items: center; gap: 12px;
}
.en-hero__eyebrow::before {
    content: ""; width: 34px; height: 1px; background: var(--amber); flex: none;
}
.en-hero__sub { font-size: 1.18rem; line-height: 1.6; color: var(--on-ink-dim); margin: 0 0 30px; max-width: 46ch; }
.en-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.en-hero__note { font-size: .95rem; color: rgba(255,255,255,.58); margin: 22px 0 0; max-width: 46ch; line-height: 1.55; }

/* The product frame: a browser chrome around real work. */
.en-frame {
    background: var(--ink-2);
    border: 1px solid var(--on-ink-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.en-frame__bar {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--on-ink-line);
}
.en-frame__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.en-frame__url {
    margin-inline-start: 10px;
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    font-family: var(--body);
}
.en-frame img { display: block; width: 100%; height: auto; }

/* ─── Buttons ──────────────────────────────────────────────────────── */
.en-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--display);
    font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
    padding: 15px 26px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
/* On ink */
.en-btn--light { background: var(--on-ink); color: var(--ink); }
.en-btn--light:hover { background: #E8E4DE; }
.en-btn--ghost-light { border-color: var(--on-ink-line); color: var(--on-ink); }
.en-btn--ghost-light:hover { border-color: rgba(255,255,255,.4); }
/* On paper: the primary action is ink, not a coloured button. Restraint reads
   as more expensive, and it keeps the amber meaningful. */
.en-btn--dark { background: var(--ink); color: var(--on-ink); }
.en-btn--dark:hover { background: #1D2936; }
.en-btn--ghost { border-color: var(--line); color: var(--text); }
.en-btn--ghost:hover { border-color: var(--text); }
.en-btn--block { width: 100%; justify-content: center; }

/* ─── "What we build": rows with rules, not a grid of identical cards ── */
.en-rows { border-top: 1px solid var(--line); }
.en-row {
    display: grid;
    gap: 6px 40px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
}
.en-row__price {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--text);
    white-space: nowrap;
}
.en-row__price span { color: var(--muted); font-weight: 500; }
.en-row__desc { color: var(--muted); margin: 0; max-width: 60ch; }

/* ─── Guarantees: three columns split by rules, on ink ─────────────── */
.en-cols { display: grid; gap: 0; }
.en-col { padding: 32px 0; border-top: 1px solid var(--on-ink-line); }
.en-col:first-child { border-top: none; }
.en-col h3 { color: var(--on-ink); }
.en-col p  { color: var(--on-ink-dim); margin: 0; font-size: .98rem; }
.en-col__n {
    font-family: var(--display);
    font-size: .85rem; font-weight: 600;
    color: var(--amber);
    margin-bottom: 14px;
}

/* ─── Work ─────────────────────────────────────────────────────────── */
.en-work { display: grid; gap: 34px; }
.en-work__item { border-top: 1px solid var(--line); padding-top: 26px; }
.en-work__shot {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
}
.en-work__shot img { display: block; width: 100%; height: auto; }
.en-work__meta { font-size: .92rem; color: var(--muted); margin: 0 0 6px; }
.en-work__links { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.en-work__links a {
    font-weight: 600; font-family: var(--display); font-size: .96rem;
    color: var(--text); border-bottom: 1.5px solid var(--amber); padding-bottom: 2px;
}
.en-work__links a:hover { color: var(--amber-deep); }

/* ─── Pricing: the one bold object on the page ─────────────────────── */
.en-price {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}
.en-price__row {
    display: grid;
    gap: 4px 32px;
    padding: 26px 30px;
    border-top: 1px solid var(--line-soft);
    align-items: baseline;
}
.en-price__row:first-child { border-top: none; }
.en-price__row--lead { background: var(--band); }
.en-price__name { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; }
.en-price__note { color: var(--muted); font-size: .95rem; margin: 0; }
.en-price__fig  { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.025em; white-space: nowrap; }
.en-price__fig small { font-size: .8rem; font-weight: 500; color: var(--muted); display: block; letter-spacing: 0; }
.en-price__fine { margin: 26px 0 0; font-size: .95rem; color: var(--muted); max-width: 66ch; }
.en-price__fine p { margin: 0 0 8px; }

/* ─── FAQ ──────────────────────────────────────────────────────────── */
.en-faq { border-top: 1px solid var(--line); }
.en-faq details { border-bottom: 1px solid var(--line); }
.en-faq summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 24px 0;
    font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.015em;
}
.en-faq summary::-webkit-details-marker { display: none; }
.en-faq summary::after {
    content: ""; flex: none; width: 11px; height: 11px;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg); transition: transform .18s ease; margin-top: -5px;
}
.en-faq details[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.en-faq__a { color: var(--muted); margin: 0 0 26px; max-width: 68ch; }

/* ─── Form ─────────────────────────────────────────────────────────── */
.en-form { display: grid; gap: 18px; max-width: 520px; }
.en-form label { font-size: .95rem; font-weight: 500; color: var(--text); display: block; margin-bottom: 7px; }
.en-form .form-field { display: flex; flex-direction: column; gap: 6px; }
.en-form .form-field input,
.en-form .form-field textarea {
    font-family: var(--body); font-size: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 13px 15px;
    color: var(--text);
    width: 100%;
    transition: border-color .15s ease;
}
.en-form .form-field input::placeholder { color: #9AA3AD; }
.en-form .form-field input:focus,
.en-form .form-field textarea:focus {
    outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,22,32,.07);
}
/* The rule above outranks main.css's `input:focus-visible` outline (0,3,1 beats
   0,1,1), so `outline: none` was winning for keyboard users too and the only
   indicator left was a 7%-opacity shadow. Restore a real ring at matching
   specificity. Pointer focus keeps the quiet treatment above. */
.en-form .form-field input:focus-visible,
.en-form .form-field textarea:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.en-form .form-field input.has-error { border-color: #C0392B; }
.en-form .field-error:empty { display: none; }
.en-form .field-error { font-size: .88rem; color: #A5281B; }
.en-form textarea { min-height: 104px; resize: vertical; }
.en-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.en-form__note { font-size: .9rem; color: var(--muted); margin: 2px 0 0; }
.en-req { color: var(--amber-deep); }

/* ─── Nav (shared component, restyled for this page) ──────────────── */
html[dir="ltr"] .navbar { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: none; }
html[dir="ltr"] .nav-links a { font-family: var(--body); font-size: .97rem; color: var(--muted); }
html[dir="ltr"] .nav-links a:hover { color: var(--text); }
html[dir="ltr"] .nav-cta {
    background: var(--ink) !important; color: var(--on-ink) !important;
    font-family: var(--display); font-weight: 600; border-radius: 8px;
}
.nav-lang {
    font-family: var(--body); font-size: .93rem; color: var(--muted);
    border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px;
}
.nav-lang:hover { color: var(--text); border-color: var(--muted); }

/* ─── Footer ───────────────────────────────────────────────────────── */
.en-footer { background: var(--ink); color: var(--on-ink-dim); padding: 64px 0 34px; }
.en-footer a { color: var(--on-ink-dim); }
.en-footer a:hover { color: var(--on-ink); }
/* The footer sits outside .en-wrap, so it needs the same max-width and gutter
   or its content runs to the window edge and the RTL link overflows. */
.en-footer__inner { display: grid; gap: 34px; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.en-footer__logo { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--on-ink); letter-spacing: -.02em; }
.en-footer__logo span { color: var(--amber); }
.en-footer__tagline { margin: 12px 0 0; max-width: 42ch; font-size: .97rem; line-height: 1.6; }
.en-footer h3 { font-family: var(--display); font-size: .95rem; font-weight: 600; color: var(--on-ink); margin: 0 0 14px; }
.en-footer__links { display: grid; gap: 10px; font-size: .97rem; }
.en-footer__bottom {
    border-top: 1px solid var(--on-ink-line); padding-top: 22px; margin-top: 6px;
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    font-size: .9rem; color: rgba(255,255,255,.42);
}

/* ─── Legal pages ──────────────────────────────────────────────────── */
.en-legal { color: var(--muted); }
.en-legal h2 { font-family: var(--display); font-size: 1.25rem; color: var(--text); margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); letter-spacing: -.015em; }
.en-legal h3 { font-family: var(--display); font-size: 1.02rem; color: var(--text); margin: 24px 0 8px; }
.en-legal p  { margin: 0 0 14px; }
.en-legal ul { margin: 0 0 16px; padding-inline-start: 20px; }
.en-legal li { margin-bottom: 7px; }
.en-legal a  { color: var(--text); border-bottom: 1px solid var(--amber); }
.en-legal code { background: var(--band); border-radius: 4px; padding: 1px 6px; font-size: .9em; }

/* ─── Shared components that assume RTL ───────────────────────────── */
[dir="ltr"] .footer-sitemap-col h4 i { margin-left: 0; margin-right: 6px; }
[dir="ltr"] .newsletter-copy         { text-align: left; }

/* ─── Wider viewports ─────────────────────────────────────────────── */
@media (min-width: 760px) {
    .en-row       { grid-template-columns: 1fr auto; align-items: start; }
    .en-row__body { grid-column: 1; }
    .en-col       { border-top: 1px solid var(--on-ink-line); padding: 26px 0 0; }
    .en-work      { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .en-price__row { grid-template-columns: 1fr auto; }
    .en-footer__inner { grid-template-columns: 1.7fr 1fr; }
    .en-footer__bottom { grid-column: 1 / -1; }
}
/* Three columns need about 300px each to hold a heading and three lines. On a
   768px tablet the old 760px breakpoint gave them 213px, which is cramped
   rather than broken. Below 900px they stack, which is always safe. */
@media (min-width: 900px) {
    .en-cols { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

@media (min-width: 1000px) {
    .en-hero__grid { grid-template-columns: 1.02fr .98fr; gap: 64px; }
    .en-section    { padding: 104px 0; }
}

/* ─── Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .en-btn, .en-faq summary::after { transition: none; }
}

/* ── LTR corrections to shared chrome ──────────────────────────────────
   main.css pins .skip-link to `right: 0`, correct for RTL. On /en/ the first
   thing a keyboard user tabs to then appears at the opposite edge from where
   they are reading. */
html[dir="ltr"] .skip-link { right: auto; left: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 8px; }

/* ── Floating WhatsApp, LTR ────────────────────────────────────────────
   main.css pins .wa-float to the left, the trailing corner in RTL. In LTR the
   trailing corner is the right, which is also where a reader's thumb rests on a
   phone. Tightened in on small screens so it clears the form's submit button. */
html[dir="ltr"] .wa-float { left: auto; right: 28px; }
@media (max-width: 600px) {
    html[dir="ltr"] .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 1.4rem; }
}

/* ── Form fields must read left to right ───────────────────────────────
   main.css sets `.form-field input, .footer-form select { direction: rtl }`,
   which beats the LTR direction on <html> and <body>. For a name or an email
   the strong Latin letters hide it, but a phone number is nothing but neutral
   characters (+, digits, spaces), so the bidi algorithm falls back to the
   element direction and lays the whole string out backwards: a visitor typing
   +971 50 123 4567 watched it appear as 4567 123 50 971+. The value posted was
   always correct; what the buyer saw was not. */
html[dir="ltr"] .form-field input,
html[dir="ltr"] .form-field textarea,
html[dir="ltr"] .form-field select,
html[dir="ltr"] .footer-form select {
    direction: ltr;
    text-align: left;
}

/* The Hebrew link carries dir="rtl", which is correct for the characters but also
   right-aligns it, leaving it hanging away from the other links in the same
   column. Keep the RTL ordering, restore the column's alignment. */
html[dir="ltr"] .en-footer__links a[dir="rtl"] { text-align: left; }

/* ══════════════════════════════════════════════════════════════════════
   Design pass — the page was disciplined but uniform
   ──────────────────────────────────────────────────────────────────────
   Seven sections opened the same way and carried the same weight, so the
   eye found no peak and read the whole as a template. Nothing here adds
   ornament; it redistributes emphasis so the page has somewhere to land.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. The product frame, on paper -------------------------------------
   The hero frame is the strongest object on the page and it appeared once.
   Reusing it for the work turns two screenshots into two products. Light
   surface, and the only elevation on this background besides the price
   table and the form, so it still reads as deliberate rather than as a
   card-shadow habit. */
html[dir="ltr"] .en-frame--light {
    background: #fff;
    border-color: var(--line);
    box-shadow: 0 1px 2px rgba(14,22,32,.05), 0 14px 32px -10px rgba(14,22,32,.16);
}
html[dir="ltr"] .en-frame--light .en-frame__bar { border-bottom-color: var(--line); background: #F6F5F2; }
html[dir="ltr"] .en-frame--light .en-frame__dot { background: rgba(14,22,32,.15); }
html[dir="ltr"] .en-frame--light .en-frame__url { color: var(--muted); }
html[dir="ltr"] .en-work__shot { margin-bottom: 22px; border-radius: 12px; }

/* 2. Give the two objects the visitor has to trust some physical weight.
   A stranger is being asked to accept a price and hand over their number;
   flat outlines make both read as drawn rather than real. Deliberately not
   applied to every block. */
html[dir="ltr"] .en-price {
    box-shadow: 0 1px 2px rgba(14,22,32,.05), 0 18px 40px -14px rgba(14,22,32,.18);
}

/* 3. Section rhythm. Everything was padding: 88px 0, so the ink section
   landed as softly as the rest. It is the argument the whole page rests
   on, so it gets room, and the sections around it stay tighter. */
html[dir="ltr"] .en-section--ink { padding: 104px 0; }

/* 4. Section headlines were capped at 2.6rem under a 4.25rem hero, which
   made every section after the fold feel like a footnote to it. */
html[dir="ltr"] .en-h2 { font-size: clamp(1.95rem, 3.9vw, 3rem); letter-spacing: -.03em; }

/* 5. The 01/02/03 markers are gone from the markup: those are three
   parallel reasons, not a sequence, and numbering implied an order that
   does not exist. The amber mark from the hero eyebrow takes their place,
   which also gives the accent a second job on the page. */
html[dir="ltr"] .en-col__n { display: none; }
html[dir="ltr"] .en-col > h3::before {
    content: "";
    display: block;
    width: 26px; height: 2px;
    background: var(--amber);
    margin-bottom: 16px;
}

/* 6. Dead rule: the nav language switcher was removed from both navs. */
html[dir="ltr"] .nav-lang { display: none; }

/* ── Newsletter, English footer ────────────────────────────────────────
   Reuses the Hebrew form's ids so main.js binds it with no second code
   path, but not its styling — the Hebrew strip is a full-width band with
   an emoji, which does not belong in this footer's column. */
html[dir="ltr"] .en-newsletter { margin-top: 26px; max-width: 34ch; }
html[dir="ltr"] .en-newsletter h4 {
    font-family: var(--display); font-size: .98rem; font-weight: 600;
    margin: 0 0 4px; color: var(--on-ink);
}
html[dir="ltr"] .en-newsletter p { margin: 0 0 12px; font-size: .88rem; color: var(--on-ink-dim); line-height: 1.5; }
html[dir="ltr"] .en-newsletter__row { display: flex; gap: 8px; }
html[dir="ltr"] .en-newsletter input[type="email"] {
    flex: 1 1 auto; min-width: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--on-ink-line);
    border-radius: 8px; padding: 10px 12px;
    color: var(--on-ink); font-family: var(--body); font-size: .95rem;
    direction: ltr; text-align: left;
}
html[dir="ltr"] .en-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,.42); }
html[dir="ltr"] .en-newsletter input[type="email"]:focus-visible {
    outline: 2px solid var(--amber); outline-offset: 2px; border-color: transparent;
}
html[dir="ltr"] .en-newsletter .newsletter-btn {
    flex: 0 0 auto; background: var(--on-ink); color: var(--ink);
    border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer;
    font-family: var(--display); font-size: .93rem; font-weight: 600;
    transition: background-color .16s ease;
}
html[dir="ltr"] .en-newsletter .newsletter-btn:hover { background: #E8E4DE; }
@media (max-width: 600px) {
    html[dir="ltr"] .en-newsletter__row { flex-direction: column; }
    html[dir="ltr"] .en-newsletter .newsletter-btn { width: 100%; }
}