/* ===========================================================================
   VBridge Agent — style.css
   Rebuilt 2026-08-24 from VBRIDGE_DESIGN_SPEC.md.

   ONE stylesheet. Both index.html and index_heb.html link this file, so the
   English and Hebrew pages can never drift apart again. There is no second
   stylesheet, and no rule in here overrides another one by force. If a rule
   ever seems to need forcing, delete the rule it is fighting instead.

   HOW TO EDIT THIS FILE SAFELY
   ---------------------------------------------------------------------------
   Everything visual is decided in the token block below. Change a token and the
   whole site follows. Do NOT type a hex colour, a px font-size or a shadow
   anywhere below the token block: use var(--something) instead. That single
   habit is what keeps the site consistent.
   =========================================================================== */

/* ===========================================================================
   1. PRIMITIVES

   Authored in OKLCH, which spaces colours the way the eye actually sees them,
   with a plain hex on the line above as the fallback for older browsers. The
   browser uses whichever it understands, so both lines must stay.
   =========================================================================== */

:root {

  /* ---- Neutral ramp ------------------------------------------------------
     THE BIG CHANGE. The page used to be blue (#e6eef9), which is 2 to 6 times
     the colour intensity of a real neutral. When the whole page is already
     blue, a blue button and a blue link have nothing to stand out against, and
     everything reads at the same weight. That was the "flat and generic" feel.

     These neutrals carry a whisper of the brand hue (250) so the page still
     feels like VBridge rather than plain grey, but they get out of the way.

     >>> IF YOU WANT THE OLD BLUE PAGE BACK: change --n-1 to #e6eef9 and
     >>> --n-2 to #d8e4f4. Nothing else needs touching. <<<                  */

  --n-0:  #fcfdff;  --n-0:  oklch(99.5% 0.002 250);   /* cards, raised surfaces */
  --n-1:  #f4f7fb;  --n-1:  oklch(97.6% 0.006 250);   /* the page itself        */
  --n-2:  #ebeff4;  --n-2:  oklch(95.0% 0.008 250);   /* alternate bands        */
  --n-3:  #dce2e8;  --n-3:  oklch(91.0% 0.011 250);   /* hairlines              */
  --n-4:  #c5cdd5;  --n-4:  oklch(84.5% 0.014 250);   /* stronger separator     */
  --n-6:  #7d8792;  --n-6:  oklch(62.0% 0.020 250);   /* edges of controls      */
  --n-9:  #4e5c6b;  --n-9:  oklch(47.0% 0.030 250);   /* quiet text             */
  --n-11: #283747;  --n-11: oklch(33.0% 0.035 250);   /* secondary text         */
  --n-12: #0d1c2a;  --n-12: oklch(22.0% 0.035 250);   /* body text              */
  --n-13: #030e1c;  --n-13: oklch(16.0% 0.035 250);   /* the inverted band      */

  /* ---- The accent: your blue, unchanged in spirit, corrected for reading -- */
  --a-3:  #e5f2ff;  --a-3:  oklch(95.5% 0.022 250);   /* pale accent wash       */
  --a-9:  #1f6cb0;  --a-9:  oklch(52.0% 0.130 250);   /* accent as a FILL       */
  --a-10: #005da3;  --a-10: oklch(47.0% 0.135 250);   /* fill, hovered          */
  --a-11: #004e90;  --a-11: oklch(42.0% 0.130 250);   /* accent as TEXT         */
  --sky:  #7ac8f5;  --sky:  oklch(80.0% 0.100 235);   /* accent on the dark band*/

  /* ---- Upwork green -------------------------------------------------------
     Your primary call to action goes to Upwork, so the green stays there and
     nowhere else. #14A800 could not be used with white text (3.17:1, below the
     readable line), so this is the darker member of the same family.         */
  --up-9:  #0e7a00;                                   /* white on it: 5.52:1    */
  --up-10: #0b6300;                                   /* hovered                */

  /* ---- Status. Only ever used to report a real state. -------------------- */
  --s-success: #006b2d;
  --s-warning: #8a5700;
  --s-danger:  #b02a2d;

  /* ---- Shadow tint --------------------------------------------------------
     Never pure black on a light page: black desaturates as well as darkens,
     which is what makes cheap shadows look muddy.                            */
  --shadow-tint: rgba(13, 28, 42, .10);
}

/* ===========================================================================
   2. SEMANTIC TOKENS
   These are the names rules are allowed to use. They say what a colour is FOR.
   =========================================================================== */

:root {
  --bg-canvas:   var(--n-1);
  --bg-surface:  var(--n-0);
  --bg-muted:    var(--n-2);
  --bg-inverted: var(--n-13);
  --bg-accent-subtle: var(--a-3);
  --bg-accent-solid:  var(--a-9);
  --bg-accent-solid-hover: var(--a-10);

  --border-default: var(--n-3);   /* decorative separators                    */
  --border-strong:  var(--n-4);
  --border-control: var(--n-6);   /* the edge of an input or a button: 3.39:1 */

  --fg-default:   var(--n-12);    /* 16.14:1 on canvas                        */
  --fg-secondary: var(--n-11);    /* 11.38:1                                  */
  --fg-muted:     var(--n-9);     /*  6.35:1                                  */
  --fg-accent:    var(--a-11);    /*  7.85:1                                  */
  --fg-on-solid:  #ffffff;
  --fg-on-inverted: var(--n-1);

  /* ---- Shape. Three radii, that is the whole set. ---- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;

  /* ---- Elevation. A surface gets a border OR a shadow, never both. ---- */
  --e-0: none;
  --e-1: 0 1px 2px var(--shadow-tint), 0 2px 4px var(--shadow-tint);
  --e-2: 0 2px 4px var(--shadow-tint), 0 8px 16px var(--shadow-tint),
         0 16px 32px var(--shadow-tint);

  /* ---- Motion. Nothing animates on scroll. Nothing loops. ---- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --ease-out: cubic-bezier(.2, 0, .38, .9);

  --nav-h: 4rem;
}

/* ===========================================================================
   3. TYPE

   One family for both languages. Assistant draws Hebrew and Latin, which is
   the whole reason one stylesheet can serve both pages with no size fork.

   Monospace comes from the operating system at zero download. JetBrains Mono
   was removed: it cost a request and 20KB, it renders Hebrew badly, and mono
   should only ever mean "this text is literal code".
   =========================================================================== */

:root {
  --sans:    'Assistant', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --display: var(--sans);
  --mono:    ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

  /* Six sizes carry the whole page. The floor is 14px and nothing goes below it.
     Every clamp() keeps a rem term so the reader's own font-size setting still
     works, which matters for a 40 to 50 year old audience.                    */
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-h1:   clamp(2rem,     1.5909rem + 1.8182vw, 3rem);
  --fs-h2:   clamp(1.5rem,   1.2955rem + 0.9091vw, 2rem);
  --fs-lead: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --fs-stat: clamp(2.25rem,  1.9432rem + 1.3636vw, 3rem);

  --measure: min(66ch, 42rem);
}

/* ===========================================================================
   4. LEGACY ALIASES

   The page already had 680 rules using the old variable names. Rather than
   rewrite every one of them and risk breaking the layout, the old names are
   redefined here in terms of the new tokens above. The palette changes; the
   rules keep working.

   Do not use these names in NEW rules. Use the semantic names in section 2.
   =========================================================================== */

:root {
  --bg:      var(--bg-canvas);
  --bg2:     var(--bg-muted);
  --surface: var(--bg-surface);
  --surf2:   var(--bg-muted);

  --border:  var(--border-default);
  --border2: var(--border-strong);

  --blue:      var(--bg-accent-solid);   /* fills and large type            */
  --blue-deep: var(--fg-accent);
  --blue2:     var(--fg-accent);         /* was #0078D4: failed as text     */
  --blue-bg:   var(--bg-accent-subtle);

  --green:  var(--up-9);                 /* Upwork CTA only                 */
  --green2: var(--up-9);
  --green3: var(--up-10);

  --red:  var(--s-danger);
  --red2: var(--s-danger);
  --orange: var(--s-warning);

  --text:  var(--fg-default);
  --text2: var(--fg-secondary);
  --text3: var(--fg-muted);              /* was #5a7793: 3.63:1, failed     */

  --r: var(--r-2);
}

/* ===========================================================================
   5. BASE
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }


/* Weight is capped at 600 across the whole site. Nothing is 700, 800 or 900.
   Heavy display weight is what made the page read as cheap rather than
   confident: no serious design system goes above 600, and IBM Carbon sets its
   largest headings at 300. Tracking is applied to h1 and h2 only, and never to
   a container, because letter-spacing inherits. */
h3 { font-size: var(--fs-20); line-height: 1.35; font-weight: 600; }

h1, h2, h3, h4, blockquote, .testi-quote { text-wrap: balance; }
p, li, dd, .lead { text-wrap: pretty; }

p, li, .lead { max-inline-size: var(--measure); }

/* Never a fixed height on anything containing text: it breaks when the reader
   enlarges type, and Hebrew and English copy are different lengths. */

a { color: var(--fg-accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

code, kbd, samp, pre { font-family: var(--mono); }

/* One designed focus ring, on everything, at 7.85:1 against the page. */
:focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 2px;
  border-radius: inherit;
}
/* An anchor target must not land underneath the sticky bar. */
:target, :focus-visible { scroll-margin-block-start: calc(var(--nav-h) + 1rem); }

/* Interface labels: no uppercase, no tracking. Uppercase does nothing in
   Hebrew, and the tracking that survives is exactly what makes Hebrew look
   broken. Weight and colour carry the label instead. */
.section-label, .loop-label, .loop-num, .hero-eyebrow, .ch-head, .stat-label, .eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
    scroll-behavior: auto;
  }
}

/* ===========================================================================
   6. THE PAGE
   Everything below was lifted out of index.html unchanged, except that every
   left/right property became its logical equivalent so the Hebrew page needs
   no override, and the kill list was applied at source.
   =========================================================================== */

/* Accessibility landmarks + legal footer (compliance) */
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:2000;background:var(--blue,#0038b8);color:var(--fg-on-solid);padding:10px 18px;border-radius: 0 0 var(--r-2) var(--r-2);font-weight: 600;text-decoration:none}
.skip-link:focus{inset-inline-start:0}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:16px}
.footer-legal a{color:var(--text3,var(--fg-muted));text-decoration:none;font-size: var(--fs-16)}
.footer-legal a:hover,.footer-legal a:focus{text-decoration:underline}
.footer-identity{margin-top:14px;font-size:.875rem;color:var(--text3,var(--fg-muted));line-height:1.7;text-align:center}
.footer-identity a{color:inherit}
.footer-identity [data-todo]{opacity:.65;font-style:italic}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x:hidden; scroll-padding-top:75px; }
body { background: var(--bg-canvas); color: var(--fg-default); font-family: var(--sans); font-size: var(--fs-16); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-align: start; }

.container { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
section { padding: 5.5rem 0; position: relative; z-index: 1; }

/* NAV */
header nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 67px; display: flex; align-items: center; background: color-mix(in oklab, var(--bg-canvas) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-default); box-shadow: var(--e-1); }
.nav-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: nowrap; }
.nav-logo { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--blue2); text-decoration: none;  white-space: nowrap; display:inline-flex; align-items:center; gap:.45rem; }
.nav-logo-icon { width:42px; height:42px; border-radius: var(--r-2); object-fit:contain; flex-shrink:0; }
.nav-logo span { color: var(--green); }
.nav-links a { color: var(--text3); text-decoration: none; font-size: var(--fs-16); font-weight: 600; padding: .3rem .42rem; border-radius: var(--r-2); transition: color .2s, background .2s; white-space: nowrap; }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-cta { display: inline-flex; align-items: center; gap: .45rem; background: var(--green); color: var(--fg-on-solid); font-weight: 600; font-size:.875rem; padding: .38rem .85rem; border-radius: var(--r-2); text-decoration: none; transition: background .2s, transform .2s; white-space: nowrap; flex-shrink: 0; }
.nav-cta:hover { background: var(--green3); transform: translateY(-1px); }

/* HERO */
#hero { min-height: 100svh; display: flex; align-items: center; padding-top: 8rem; background: radial-gradient(ellipse 80% 55% at 50% -5%, var(--bg-accent-subtle) 0%, transparent 70%); }
.hero-inner { max-width: 820px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem;  font-size: var(--fs-16); font-weight: 600; color: var(--blue2); border: 1px solid var(--bg-accent-subtle); background: var(--bg-accent-subtle); padding: .28rem .8rem; border-radius: var(--r-2); margin-bottom: 1.6rem;  }
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--blue2); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }

h1 { font-family: var(--display); font-size: var(--fs-h1); font-weight: 600;
     line-height: 1.2; letter-spacing: -.02em; margin-bottom: 1.5rem;
     color: var(--fg-default); text-wrap: balance; }
h1 .blue { color: var(--blue2); }
h1 .green { color: var(--green); }
h1 .dim { color: var(--text2); }

.hero-market { font-family: var(--display); font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 600; color: var(--text2); margin-bottom: 1.6rem;  }
.hero-market strong { color: var(--text); }
.hero-sub { font-size: 1.1rem; color: var(--text2); line-height: 1.8; max-width: 600px; margin-bottom: 2.4rem; }
.hero-sub strong { color: var(--text); }
.hero-answer { font-size: 1.08rem; color: var(--text2); line-height: 1.8; max-width: 600px; margin-bottom: 1.4rem; }

.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; margin-bottom: 3rem; }
.btn-green { display: inline-flex; align-items: center; gap: .5rem; background: var(--green); color: var(--fg-on-solid); font-weight: 600; font-size: 1rem; padding: .75rem 1.7rem; border-radius: var(--r-2); text-decoration: none; box-shadow: 0 4px 24px rgba(20,168,0,.3); transition: background .2s, transform .2s; position: relative; overflow: hidden; }
.btn-green:hover { background: var(--green3); transform: translateY(-2px); }
.btn-ghost { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border2); color: var(--text2); font-weight: 600; font-size: var(--fs-16); padding: .75rem 1.4rem; border-radius: var(--r-2); text-decoration: none; transition: border-color .2s, color .2s; }
.btn-ghost:hover { border-color: var(--blue2); color: var(--text); }

.hero-proof { display: flex; gap: 2rem; flex-wrap: wrap; font-family: var(--sans); font-size: 1rem; color: var(--text3); }
.hero-proof span { display: flex; align-items: center; gap: .4rem; }
.hero-proof span::before { content: '✓'; color: var(--green); font-weight: 600; }

/* LOOP */
#loop { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5rem 0; }
.loop-label { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--sans); font-size:.875rem; font-weight: 600; color: var(--red2);   margin-bottom: 1.1rem; padding: .3rem .9rem; border: 1px solid rgba(239,68,68,.3); background: rgba(239,68,68,.08); border-radius: var(--r-2); }
.loop-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red2); flex-shrink: 0; }
#loop h2 { font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; color: var(--fg-default); margin-bottom: 1rem; }
#loop h2 em { font-style: normal; color: var(--red2); }
.loop-intro { font-size: 1rem; color: var(--text2); max-width: 640px; line-height: 1.75; margin-bottom: 3rem; }

.loop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; }
.loop-card { background: var(--surface); padding: 1.6rem; }
.loop-num { display: inline-block; font-family: var(--sans); font-size:.875rem; color: var(--red2); font-weight: 600; margin-bottom: .8rem;   padding: .16rem .6rem; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.18); border-radius: var(--r-2); }
.loop-card h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.loop-card p { font-size: var(--fs-16); color: var(--text2); line-height: 1.65; }
.loop-card p em { color: var(--text); font-style: italic; }

.loop-arrow { text-align: center; padding: 1.5rem 0;  font-size: var(--fs-16); color: var(--text3); }
.loop-arrow span { display: inline-block; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: var(--red2); padding: .5rem 1.5rem; border-radius: var(--r-2); }

/* IDENTITY */
#identity { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.identity-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.identity-left h2 { font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 600; line-height: 1.1; color: var(--fg-default); margin-bottom: 1.2rem; }
.identity-left h2 em { font-style: normal; color: var(--blue2); }
.identity-left p { font-size: 1rem; color: var(--text2); line-height: 1.75; margin-bottom: 1rem; }
.identity-left p strong { color: var(--text); }

.identity-right { display: flex; flex-direction: column; gap: .75rem; }
.id-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); padding: 1.1rem 1.3rem; border-inline-start: 3px solid var(--border2); border-inline-end: none; transition: border-color .2s, box-shadow .3s, transform .2s; }
.id-card:hover { border-inline-start-color: var(--blue2); box-shadow:0 4px 20px var(--bg-accent-subtle); transform:translateY(-2px); }
.id-card h3 { font-size: var(--fs-16); font-weight: 600; color: var(--text); margin-bottom: .25rem; }
.id-card p { font-size: var(--fs-16); color: var(--text2); line-height: 1.55; }

/* WHAT CHANGES */
#changes { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-label { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--sans); font-size:.875rem; font-weight: 600; color: var(--blue2);   margin-bottom: 1.1rem;  border: 1px solid var(--bg-accent-subtle);   }
.section-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue2); flex-shrink: 0; }
h2 { font-family: var(--display); font-size: var(--fs-h2); font-weight: 600;
     line-height: 1.25; letter-spacing: -.02em; margin-bottom: 1rem;
     color: var(--fg-default); text-wrap: balance; }
h2 em { font-style: normal; color: var(--fg-default); background: none;
         box-shadow: inset 0 -.32em 0 var(--bg-accent-subtle); padding-inline: .08em; }
h2 .h2-sub { display: block; font-size: var(--fs-20); font-weight: 600; color: var(--blue2); margin-top: .55rem; line-height: 1.35;  }
#loop h2 .h2-sub { color: var(--red2); }
.lead { font-size: 1rem; color: var(--text2); line-height: 1.75; max-width: 640px; margin-bottom: 3rem; }

.changes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ch-card { border-radius: var(--r-2); border: 1px solid var(--border); overflow: hidden; }
.ch-head { padding: .6rem 1.2rem; font-family: var(--sans); font-size:.875rem; font-weight: 600;  display: flex; align-items: center; gap: .5rem; }
.ch-bad  .ch-head { background: rgba(239,68,68,.08);  color: var(--s-danger); border-bottom: 1px solid rgba(239,68,68,.15); }
.ch-good .ch-head { background: rgba(20,168,0,.08);   color: var(--sky); border-bottom: 1px solid rgba(20,168,0,.15); }
.ch-body { background: var(--surface); padding: 1.3rem; }
.ch-list { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.ch-list li { font-size: 1rem; color: var(--text2); padding-inline-start: 1.4rem; padding-inline-end: 0; position: relative; line-height: 1.55; }
.ch-bad  .ch-list li::before { content: '✗'; position: absolute; inset-inline-start: 0; inset-inline-end: auto; color: var(--red2); font-weight: 600; }
.ch-good .ch-list li::before { content: '✓'; position: absolute; inset-inline-start: 0; inset-inline-end: auto; color: var(--green2); font-weight: 600; }
.ch-good .ch-list li { color: var(--text2); }

/* HOW */
#how { border-top: 1px solid var(--border); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.pipeline { display: flex; flex-direction: column; }
.pipe-step { display: grid; grid-template-columns: 44px 1fr; gap: 1.2rem; align-items: start; padding: 1.4rem 0; border-bottom: 1px solid var(--border); }
.pipe-step:last-child { border-bottom: none; }
.pipe-num { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-accent-subtle); border: 1px solid var(--bg-accent-subtle); display: flex; align-items: center; justify-content: center;  font-size: var(--fs-16); font-weight: 600; color: var(--blue2); flex-shrink: 0; margin-top: .1rem; }
.pipe-body h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .25rem; }
.pipe-body p { font-size: var(--fs-16); color: var(--text2); line-height: 1.65; }

.how-terminal { position: sticky; top: 80px; }
.terminal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; box-shadow: 0 20px 60px var(--shadow-tint), inset 0 0 0 1px var(--bg-accent-subtle); }
.terminal-bar { background: var(--surface); padding: .65rem 1rem; display: flex; align-items: center; gap: .38rem; border-bottom: 1px solid var(--border); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-bar-title { margin-inline-start: .4rem; font-family: var(--mono); font-size: .89rem; color: var(--text3); }
.terminal-body { padding: 1.2rem 1.3rem; font-family: var(--mono); font-size:.875rem; line-height: 1.9; text-align: start;  direction: ltr; text-align: start;}
.t-prompt { color: var(--blue2); font-weight: 600; }
.t-ok     { color: var(--green2); }
.t-dim    { color: var(--text3); }
.t-warn   { color: var(--orange); }
.t-wh     { color: var(--text); font-weight: 600; }
.t-error  { color: var(--red2); }

/* STATS */
#stats { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { text-align: center; padding: 2rem 1rem; border-inline-start: 1px solid var(--border); }
.stat:last-child { border-inline-start: none; }
.stat-num { font-family: 'Barlow Condensed', sans-serif; font-size: 3.2rem; font-weight: 600; line-height: 1; display: block; margin-bottom: .4rem;     }
.stat-label { font-size: 1rem; color: var(--text2); font-family: var(--sans); font-weight: 500; display: block; margin-top: .5rem; line-height: 1.4; }

/* TESTIMONIALS */
#testimonials { border-top: 1px solid var(--border); background: var(--bg2); }
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2.5rem; }
.testi-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); padding: 2.2rem 1.6rem 1.5rem; display: flex; flex-direction: column; transition: border-color .25s, transform .25s, box-shadow .25s; }
.testi-card:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: 0 12px 32px var(--shadow-tint); }
.testi-card::before { content: '\201C'; position: absolute; top: .1rem; inset-inline-start: 1.1rem; font-family: Georgia, 'Times New Roman', serif; font-size: 4.6rem; line-height: 1; color: var(--blue2); opacity: .2; pointer-events: none; }
.testi-stars { color: var(--orange); font-size: 1rem;  line-height: 1; margin: .4rem 0 .9rem; position: relative; z-index: 1; }
.testi-quote { font-size: 1.12rem; font-weight: 600; line-height: 1.6; color: var(--text); margin: 0 0 1.5rem; position: relative; z-index: 1; flex-grow: 1; }
.testi-author { display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--border); padding-top: 1.1rem; }
.testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue2)); color: var(--fg-on-solid); font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--display); }
.testi-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.testi-name { font-weight: 600; color: var(--text); font-size: var(--fs-16); }
.testi-role { font-family: var(--sans); font-size:.875rem; color: var(--text3);  margin-top: .15rem; }
.testi-src { margin-inline-start: auto; align-self: flex-start; font-family: var(--sans); font-weight: 600; font-size:.875rem; color: var(--blue2); border: 1px solid var(--bg-accent-subtle); background: var(--bg-accent-subtle); padding: .2rem .55rem; border-radius: var(--r-2); white-space: nowrap; }
@media (max-width: 820px) { .testi-grid { grid-template-columns: 1fr; } }

/* LECTURE VIDEO */
#lecture { border-top: 1px solid var(--border); }
.lecture-sub { color: var(--text2); font-size: 1.02rem; max-width: 760px; margin: .2rem 0 2rem; line-height: 1.75; }
.lecture-lang { max-width: 62ch; margin: 0 0 1.2rem; padding: .7rem 1rem;
  background: var(--bg-accent-subtle); border-inline-start: 3px solid var(--fg-accent);
  border-radius: var(--r-1); color: var(--fg-secondary); }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border2); border-radius: var(--r-2); overflow: hidden; box-shadow: 0 14px 44px var(--shadow-tint); background: var(--fg-default); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* MCP */
#mcp { border-top: 1px solid var(--border); }
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-16); }
th { padding: .8rem 1.1rem; text-align: center; font-family: var(--sans); font-size:.875rem; font-weight: 600;  color: var(--text3); background: var(--surf2); border-bottom: 1px solid var(--border); }
th:nth-child(2) { color: var(--blue2); background: var(--bg-accent-subtle); }
td { padding: .7rem 1.1rem; border-bottom: 1px solid var(--border); color: var(--text2); vertical-align: middle; text-align: center; }
td:first-child { color: var(--text); text-align: start; }
tr:nth-child(even) td { background: rgba(255,255,255,.018); }
tr:last-child td { border-bottom: none; }
.c-yes { color: var(--sky); font-weight: 600; }
.c-no  { color: var(--red2); }
.c-adv { color: var(--green); font-weight: 600; }
.table-note { margin-top: 1.1rem; padding: .9rem 1.2rem; background: var(--bg-accent-subtle); border: 1px solid var(--bg-accent-subtle); border-radius: var(--r-2); font-size: 1rem; color: var(--text2); font-style: italic; }
.table-note strong { color: var(--blue2); font-style: normal; }

/* BOOK */
#book { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.book-layout { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: start; }
.book-layout > :last-child { max-width: 720px; margin-inline-start: auto; margin-inline-end: auto; width: 100%; }
.prereq { background: var(--bg-accent-subtle); border: 1px solid var(--bg-accent-subtle); border-radius: var(--r-2); padding: .9rem 1.2rem; margin-bottom: 1.5rem; font-size: 1rem; color: var(--text2); line-height: 1.6; }
.prereq strong { color: var(--blue2); }
.steps { display: flex; flex-direction: column; gap: .55rem; }
.step-row { display: grid; grid-template-columns: 30px 1fr; gap: .85rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); padding: .75rem 1rem; transition: border-color .2s; }
.step-row:hover { border-color: var(--border2); }
.step-badge { width: 26px; height: 26px; background: var(--bg-accent-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center;  font-size:.875rem; font-weight: 600; color: var(--blue2); flex-shrink: 0; }
.step-text { font-size: var(--fs-16); color: var(--text); font-weight: 600; }
.step-sub  { font-family: var(--sans); font-size: var(--fs-16); color: var(--text3); text-align: start; }

.book-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; box-shadow: 0 20px 60px var(--shadow-tint); }
.book-head { background: linear-gradient(135deg, var(--up-10) 0%, var(--up-9) 100%); padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.book-head-title { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--fg-on-solid); margin-bottom: .3rem; }
.book-head p { font-size: var(--fs-16); color: rgba(255,255,255,.65); }
.book-body { padding: 1.4rem; }
.book-pts { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.4rem; }
.book-pts li { font-size: 1rem; color: var(--text2); display: flex; align-items: flex-start; gap: .65rem; }
.book-pts li span:first-child { color: var(--green2); font-weight: 600; flex-shrink: 0; }
.book-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: var(--green); color: var(--fg-on-solid); font-weight: 600; font-size: 1rem; padding: .9rem; border-radius: var(--r-2); text-decoration: none; transition: background .2s, transform .2s; box-shadow: 0 4px 24px rgba(20,168,0,.3); }
.book-btn:hover { background: var(--green3); transform: translateY(-2px); }
.book-note { text-align: center; margin-top: .65rem;  font-size:.875rem; color: var(--text3); }

/* FOOTER */
footer { padding: 2.4rem 1.5rem; background: var(--bg); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; color: var(--text3); flex-wrap: wrap; gap: 1rem; }
footer a { color: var(--text3); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ANIMATIONS */


/* RESPONSIVE */

/* The navigation links collapse here, so the hamburger that replaces them has
   to appear at exactly the same width. It used to appear only below 980px,
   which left every screen between 981px and 1170px with no navigation at all:
   no links, no menu button. A 1024px and a 1152px laptop both landed in that
   gap. The matching rule is in the mobile-nav block further down; if you ever
   change this number, change that one too. */
@media (max-width: 1170px) {
}
@media (max-width: 860px) {
  .identity-layout, .changes-grid, .how-grid, .book-layout, .install-track-pair { grid-template-columns: 1fr; }
  .how-terminal { position: static; }
  .loop-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-inline-start: none; }
  .stat:nth-child(3) { border-top: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-inline-start: none; border-bottom: 1px solid var(--border); }
  section { padding: 4rem 0; }
}

/* ─── ICONS ─── */
.card-icon { font-size: 2.4rem; line-height: 1; margin-bottom: .8rem; display: block; }
.loop-card .card-icon { font-size: 2rem; margin-bottom: .5rem; }

/* ─── SLIDE ANIMATIONS ─── */

/* Stagger delays */

/* ─── COUNTER ─── */
.stat-num[data-target] { transition: none; }

/* ─── TYPEWRITER ─── */
.typewriter { display: inline; }
.typewriter::after { content: '▋'; animation: blink .8s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ─── GLOW CTA ─── */

.btn-green::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ─── COMPARISON TABLE (visual) ─── */
.cmp-table { width:100%; border-collapse:separate; border-spacing:0; font-size: var(--fs-16); }
.cmp-table thead th { padding:.75rem 1rem; text-align:center; font-family:var(--sans); font-size:.875rem; font-weight: 600;  color:var(--text3); background:var(--surf2); border-bottom:1px solid var(--border); }
.cmp-table thead th:first-child { text-align: end; }
.cmp-table thead th.col-hero { color:var(--blue2); background:var(--bg-accent-subtle); border-bottom:2px solid var(--blue); }
.cmp-table tbody tr td { padding:.65rem 1rem; border-bottom:1px solid var(--border); text-align:center; color:var(--text2); vertical-align:middle; }
.cmp-table tbody tr td:first-child { text-align: start; color:var(--text); font-weight:500; }
.cmp-table tbody tr.row-category td { background:var(--surf2); color:var(--text3); font-family:var(--sans); font-size:.875rem;  font-weight: 600; padding:.4rem 1rem; }
.cmp-table tbody tr:last-child td { border-bottom:none; }
.cmp-table tbody tr:hover td { background:rgba(255,255,255,.02); }
.cmp-y  { color:var(--sky); font-weight: 600; font-size:1.1rem; }
.cmp-n  { color:var(--red2); font-size:1rem; }
.cmp-p  { color:var(--orange); font-size: var(--fs-16); font-weight:600; }
.cmp-hero { background:var(--bg-accent-subtle); }

/* ─── FEATURE GRID ─── */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem; }
.feat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2); padding:1.4rem; transition:border-color .2s, transform .25s; border-inline-start:3px solid transparent; }
.feat-card:hover { border-inline-start-color:var(--blue2); transform:translateY(-3px); box-shadow:0 8px 24px var(--shadow-tint); }
.feat-card .card-icon { font-size:2.2rem; margin-bottom:.7rem; }
.feat-card h4 { font-size:1rem; font-weight: 600; color:var(--text); margin-bottom:.4rem; }
.feat-card p { font-size: var(--fs-16); color:var(--text2); line-height:1.6; }

@media(max-width:860px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .feat-grid{ grid-template-columns:1fr; } }

/* ─── PULSE BADGE ─── */
.live-badge { display:inline-flex; align-items:center; gap:.5rem; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:live-pulse 1.8s infinite; }
@keyframes live-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(20,168,0,.6)} 50%{box-shadow:0 0 0 6px rgba(20,168,0,0)} }

@media(prefers-reduced-motion:reduce){
  .slide-right,.slide-left { opacity: 1; transform: none; transition: none; }
  .btn-green::before{ animation:none; }
  .live-dot{ animation:none; }
}

/* ─── UPWORK CTA ─── */
.btn-upwork {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, var(--green) 0%, var(--up-9) 100%);
  color: var(--fg-on-solid);
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 2rem;
  border-radius: var(--r-2);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(20,168,0,.5);
  animation: upwork-pulse 2.4s infinite;
  transition: transform .2s, box-shadow .2s;
  
}
.btn-upwork::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
}
.btn-upwork::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--r-3);
  background: linear-gradient(135deg, var(--green), var(--sky), var(--green));
  background-size: 200% 200%;
  animation: border-glow 3s linear infinite;
  z-index: -1;
}
@keyframes upwork-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(20,168,0,.45); }
  50%      { box-shadow: 0 0 0 10px rgba(20,168,0,0); }
}
@keyframes border-glow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.btn-upwork:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 32px rgba(20,168,0,.45);
}
.btn-upwork .upw-icon {
  font-size: 1.15rem;
  animation: bounce-x .9s infinite alternate;
}
@keyframes bounce-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-4px); }
}
/* Upwork badge */
.upwork-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  
  font-size: .89rem;
  color: var(--sky);
  background: rgba(20,168,0,.1);
  border: 1px solid rgba(20,168,0,.25);
  padding: .22rem .75rem;
  border-radius: var(--r-2);
  margin-bottom: .8rem;
}
.upwork-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sky);
  animation: live-pulse 1.8s infinite;
}
/* book-btn upwork variant */
.book-btn {
  position: relative;
  overflow: hidden;
  animation: upwork-pulse 2.4s infinite;
}
.book-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-100%);
  animation: shimmer 2s infinite;
}
@media(prefers-reduced-motion:reduce){
  .btn-upwork,.book-btn{ animation:none; }
  .btn-upwork::before,.book-btn::before{ animation:none; }
  .btn-upwork .upw-icon{ animation:none; }
}

/* ─── FAQ ACCORDION ─── */
.faq-list { display:flex; flex-direction:column; gap:.6rem; margin-top:2rem; }
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2); overflow:hidden; transition:border-color .2s; cursor:pointer; }
.faq-item:hover { border-color:var(--border2); }
.faq-q {
  width:100%; padding:1rem 1.3rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  cursor:pointer; text-align: start; font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--text);
  transition:color .2s; user-select:none;
}
.faq-q:hover { color:var(--blue2); }
.faq-q h3 { font-size:1rem; font-weight:600; margin:0; color:inherit; display:inline; }
.faq-icon { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--bg-accent-subtle);
  border:1px solid var(--bg-accent-subtle); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:300; color:var(--blue2); transition:transform .25s, background .2s; line-height:1; }
.faq-item.open .faq-icon { transform:rotate(45deg); background:var(--bg-accent-subtle); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .25s ease; }
.faq-item.open .faq-a { max-height:300px; }
.faq-a-inner { padding:0 1.3rem 1.1rem; font-size:1rem; color:var(--text2); line-height:1.75; }
.faq-a-inner a { color:var(--blue2); }

/* ─── KIVUN BLOCK ─── */
.kivun-block {
  background: linear-gradient(135deg, var(--bg-accent-subtle) 0%, rgba(20,168,0,.06) 100%);
  border: 1px solid var(--bg-accent-subtle);
  border-radius: var(--r-2);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
}
.kivun-title { font-size:1rem; font-weight: 600; color:var(--text); margin-bottom:.4rem; display:flex; align-items:center; gap:.5rem; }
.kivun-desc { font-size:1rem; color:var(--text2); line-height:1.7; margin-bottom:.9rem; }
.kivun-features { list-style:none; display:flex; flex-direction:column; gap:.25rem; margin-bottom:1rem; }
.kivun-features li { font-size: var(--fs-16); color:var(--text2); display:flex; align-items:flex-start; gap:.5rem; }
.kivun-features li::before { content:'✅'; flex-shrink:0; }
.kivun-badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.kivun-badge { font-family:var(--sans); font-size:.875rem; padding:.2rem .65rem; border-radius: var(--r-2); font-weight:600; }
.kivun-badge.free { background:rgba(20,168,0,.12); border:1px solid rgba(20,168,0,.25); color:var(--green2); }
.kivun-badge.win  { background:var(--bg-accent-subtle); border:1px solid var(--bg-accent-subtle); color:var(--blue2); }
.kivun-badge.open { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.22); color:var(--orange); }
.kivun-links { display:flex; flex-direction:column; gap:.4rem; }
.kivun-link { font-size: var(--fs-16); color:var(--blue2); text-decoration:none; display:flex; align-items:center; gap:.4rem; }
.kivun-link:hover { color:var(--text); }
.kivun-divider { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); font-size: var(--fs-16); color:var(--text3); }
.kivun-divider a { color:var(--text3); text-decoration:underline; }

/* ─── INSTALL TRACKS ─── */
.install-tracks-label {
  font-family: var(--sans); font-size:.875rem; font-weight: 600; color: var(--text3);
    margin-bottom: .7rem; display: block;
}
.install-track {
  border-radius: var(--r-2);
  overflow: hidden;
  border: 2px solid var(--border);
  transition: border-color .2s;
}
.install-kivun {
  border-color: rgba(20,168,0,.45);
  box-shadow: 0 0 0 1px rgba(20,168,0,.1), 0 4px 24px rgba(20,168,0,.08);
}
.install-manual { border-color: var(--border2); opacity: .85; }
.install-track-head {
  padding: .9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.install-kivun .install-track-head {
  background: linear-gradient(90deg, rgba(20,168,0,.1) 0%, rgba(20,168,0,.04) 100%);
  border-bottom: 1px solid rgba(20,168,0,.2);
}
.install-manual .install-track-head {
  background: var(--surf2);
  border-bottom: 1px solid var(--border);
}
.install-track-badge {
  font-family: var(--sans); font-size:.875rem; font-weight: 600;
  padding: .18rem .6rem; border-radius: var(--r-2); 
}
.install-track-badge.recommended {
  background: rgba(20,168,0,.2); border: 1px solid rgba(20,168,0,.4);
  color: var(--green2); animation: live-pulse 2s infinite;
}
.install-track-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.install-track-sub { font-size: .94rem; color: var(--text3); flex: 1 1 100%; margin-top: -.15rem; }
.install-track-body { padding: 1.1rem 1.2rem; }
.install-track-pair { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: .9rem; }
.install-kivun-rtl {
  border-color: var(--bg-accent-subtle);
  box-shadow: 0 0 0 1px var(--bg-accent-subtle), 0 4px 24px var(--bg-accent-subtle);
}
.install-kivun-rtl .install-track-head {
  background: linear-gradient(90deg, var(--bg-accent-subtle) 0%, var(--bg-accent-subtle) 100%);
  border-bottom: 1px solid var(--bg-accent-subtle);
}
.install-or-divider {
  text-align: center; position: relative; margin: .9rem 0;
}
.install-or-divider::before {
  content: ''; position: absolute; top: 50%; inset-inline-start: 0; inset-inline-end: 0;
  height: 1px; background: var(--border);
}
.install-or-divider span {
  position: relative; background: var(--bg2);
   font-size:.875rem; font-weight: 600;
  color: var(--text3); padding: 0 .9rem; 
}

/* ── LANG TOGGLE ─── */

/* ── GEO BANNER ─── */
.geo-banner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-2); box-shadow: var(--e-2); color: var(--fg-secondary); padding: .6rem 1rem; }
.geo-banner a { color:var(--blue2); text-decoration:none; font-weight:600; }
.geo-banner a:hover { text-decoration:underline; }
.geo-banner button { background:transparent; border:1px solid var(--border); color:var(--text2); width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:1rem; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.geo-banner button:hover { color:var(--text); border-color:var(--text2); }

/* ─── HERO ICON ─── */
.hero-icon { width:180px; height:180px; object-fit:contain; border-radius: var(--r-3); filter:drop-shadow(0 8px 24px var(--bg-accent-subtle)); flex-shrink:0; transition:transform .3s, filter .3s; }
.hero-icon:hover { transform:scale(1.05) translateY(-4px); filter:drop-shadow(0 12px 32px var(--bg-accent-subtle)); }

/* ─── GRADIENT SECTION DIVIDERS ─── */
#loop::before, #identity::before, #changes::before, #how::before,
#stats::before, #mcp::before, #book::before {
  content:''; position:absolute; top:0; inset-inline-start: 5%; inset-inline-end: 5%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(40,153,245,.3), transparent); z-index:2;
}

/* ─── FOOTER ICON ─── */
.footer-logo-icon { width:54px; height:54px; border-radius: var(--r-1); object-fit:contain; vertical-align:middle; margin-inline-end:.3rem; }

/* ─── HERO + NAV ICON MOBILE ─── */
@media(max-width:860px){
  .hero-icon { width:225px; height:225px; }
  .nav-logo-icon { width:44px; height:44px; }
  nav { height:72px; }
  .nav-logo { font-size:1.5rem; }
  .nav-cta { font-size:.875rem; padding:.35rem .7rem; }
}
@media(max-width:620px){
  .nav-cta { display:none; }
}
@media(max-width:520px){
  .hero-icon { width:180px; height:180px; }
  h1 { white-space:normal; }
  nav { height:67px; padding:0; }
  .nav-inner { padding:0 1rem; gap:.3rem; }
  .nav-logo { font-size:1.3rem; gap:.3rem; }
  .nav-logo-icon { width:40px; height:40px; }
  .nav-cta { display:none; }
  section { overflow-x:hidden; }
  .container { padding:0 1rem; overflow-wrap:break-word; word-break:break-word; }
  footer { font-size:1.14rem; padding:2.4rem 1.2rem; }
  .footer-logo-icon { width:50px; height:50px; }
  /* Install tracks & steps mobile */
  .install-track { max-width:100%; }
  .install-track-body { padding:.8rem; }
  .install-track-head { padding:.7rem .8rem; }
  .step-row { padding:.6rem .7rem; gap:.6rem; }
  .step-sub { white-space:normal; word-break:break-word; }
  .kivun-link { word-break:break-all; }
  .kivun-features li { font-size: var(--fs-16); }
  /* Table mobile, horizontal scroll, no page-width impact */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:600px; font-size: var(--fs-16); }
  th, td { padding:.6rem .8rem; white-space:nowrap; }
  /* Book card mobile */
  .book-card { margin-top:1.5rem; }
  .book-head { padding:1.1rem; }
  .book-body { padding:1rem; }
  .book-pts li { font-size: var(--fs-16); }
  /* FAQ mobile */
  .faq-q span:first-child, .faq-q h3 { font-size: var(--fs-16); }
  .faq-a-inner { font-size: var(--fs-16); word-break:break-word; }
}
@media(max-width:360px){
  .nav-logo { font-size:1.05rem; }
  .nav-logo-icon { width:34px; height:34px; }
}

/* ===================================================================
   LIGHT THEME OVERRIDES (Microsoft palette · Assistant · light terminal)
   =================================================================== */

/* Hero — two-column layout with product card + rating badge */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:3.2rem;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size: var(--fs-20);font-weight: 600;color:var(--blue-deep);padding:.4rem .95rem;margin-bottom:1.4rem}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pulse 2s infinite}
.btn-primary{display:inline-flex;align-items:center;gap:.55rem;background:var(--green);color:var(--fg-on-solid);font-weight: 600;font-size:1.08rem;padding:.95rem 1.9rem;border-radius:var(--r-2);text-decoration:none;box-shadow:0 6px 20px rgba(20,168,0,.28);transition:transform .2s,box-shadow .2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,168,0,.34)}
.hero-social{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:2rem;font-size:1.02rem;color:var(--text2)}
.hero-social .stars{color:var(--s-warning);font-size:1.05rem}
.hero-social b{color:var(--text)}
.hero-social .sep{width:5px;height:5px;border-radius:50%;background:var(--border2)}
.hero-stage{position:relative;background:radial-gradient(120% 120% at 70% 10%,var(--fg-on-solid) 0%,var(--surface) 45%,var(--bg-muted) 100%);border:1px solid var(--border);border-radius: var(--r-3);padding:2.6rem;box-shadow:0 16px 44px rgba(15,39,64,.16);display:flex;align-items:center;justify-content:center;min-height:300px}
.hero-stage-img{width:min(240px,60%);height:auto;object-fit:contain;filter:drop-shadow(0 18px 40px var(--bg-accent-subtle));animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.rating-badge{position:absolute;bottom:1.3rem;inset-inline-start:1.3rem;display:flex;align-items:center;gap:.55rem;background:var(--surface);border:1px solid var(--border);border-radius: var(--r-2);padding:.55rem .95rem;box-shadow:0 8px 24px rgba(15,39,64,.12);font-size:1rem}
.rating-badge .stars{color:var(--s-warning);}
.rating-badge b{color:var(--text);font-weight: 600}
.rating-badge .rb-sub{color:var(--text3);font-size:.92rem}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:2.4rem}}
h2 em { background: none; box-shadow: inset 0 -.32em 0 var(--bg-accent-subtle); }
.nav-links a { font-size:1.02rem; font-weight:600; }
.nav-links a:hover { background:var(--bg-accent-subtle); }
nav { background:rgba(230,238,249,.82); box-shadow:0 1px 0 0 var(--bg-accent-subtle), 0 2px 14px rgba(15,39,64,.08); }
.stat-num { font-family:var(--display); font-weight: 600;     }
tr:nth-child(even) td { background:rgba(15,39,64,.025); }
.cmp-table tbody tr:hover td { background:var(--bg-accent-subtle); }

/* keep #how terminal as a clean LIGHT terminal (not dark) */
.terminal { background:var(--bg-surface); border-color:var(--border); box-shadow:0 12px 40px rgba(15,39,64,.14); }
.terminal-bar { background:linear-gradient(180deg,var(--fg-on-solid),var(--bg-muted)); border-color:var(--border); }
.terminal-bar-title { color:var(--text3); }
.terminal-body { color:var(--text); }
.t-prompt{color:var(--blue)} .t-ok{color:var(--green2)} .t-dim{color:var(--text3)} .t-warn{color:var(--s-warning)} .t-wh{color:var(--text)} .t-error{color:var(--s-danger)}

/* soften dark-era heavy shadows */
.testi-card:hover { box-shadow:0 10px 28px rgba(15,39,64,.12); }
.book-card { box-shadow:0 16px 44px rgba(15,39,64,.14); }
.video-frame { box-shadow:0 14px 40px rgba(15,39,64,.16); }
.feat-card:hover { box-shadow:0 8px 24px rgba(15,39,64,.10); }

/* FAQ filter chips */
.faq-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.faq-chip { font-family:var(--sans); font-size: var(--fs-16); font-weight:600; color:var(--text2); background:var(--surface); border:1px solid var(--border2); border-radius: var(--r-2); padding:.5rem 1.15rem; cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .15s; }
.faq-chip:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.faq-chip.active { background:var(--blue); border-color:var(--blue); color:var(--fg-on-solid); box-shadow:0 4px 14px var(--bg-accent-subtle); }
.faq-count { font-size:.95rem; color:var(--text3); margin-top:.9rem; min-height:1em; }
.faq-item[hidden] { display:none; }

/* Contact / lead form (Netlify) */
#contact { border-top:1px solid var(--border); }
.contact-wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:start; }
.contact-side ul { list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.contact-side li { display:flex; gap:.75rem; align-items:flex-start; font-size:1.06rem; color:var(--text2); }
.contact-side li .mark { flex-shrink:0; width:26px; height:26px; border-radius: var(--r-2); background:var(--bg-accent-subtle); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight: 600; font-size: var(--fs-16); }
.contact-side li b { color:var(--text); }
.contact-card { background:var(--surface); border:1px solid var(--border); border-radius: var(--r-3); padding:2rem; box-shadow:0 16px 44px rgba(15,39,64,.14); position:relative; overflow:hidden; }
.contact-card::before { content:''; position:absolute; top:0; inset-inline:0; height:4px; background:linear-gradient(90deg, var(--blue), var(--blue-deep)); }
.lead-form { display:flex; flex-direction:column; gap:1.05rem; margin-top:.4rem; }
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-size:1rem; font-weight:600; color:var(--text); }
.field label .opt { color:var(--text3); font-weight:400; }
.field input, .field textarea { font-family:var(--sans); font-size:1.05rem; color:var(--text); background:var(--bg); border:1px solid var(--border2); border-radius: var(--r-2); padding:.85rem .95rem; transition:border-color .2s, box-shadow .2s, background .2s; width:100%; }
.field input::placeholder, .field textarea::placeholder { color:var(--fg-muted); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--blue); background:var(--fg-on-solid); box-shadow:0 0 0 3px var(--bg-accent-subtle); }
.field textarea { min-height:112px; resize:vertical; }
.lead-submit { align-self:flex-start; background:var(--blue); color:var(--fg-on-solid); font-weight: 600; font-size:1.08rem; padding:.9rem 2.1rem; border:none; border-radius: var(--r-2); cursor:pointer; box-shadow:0 6px 20px var(--bg-accent-subtle); transition:background .2s, transform .2s, box-shadow .2s; }
.lead-submit:hover { background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 10px 28px var(--bg-accent-subtle); }
.lead-hp { position:absolute; inset-inline-start: -9999px; }
.form-note { font-size:.92rem; color:var(--text3); margin-top:.2rem; }
@media(max-width:860px){ .contact-wrap { grid-template-columns:1fr; } .contact-side { order:-1; } }

/* Keyboard focus visibility */

/* Form success banner */
.form-success { display:flex; align-items:flex-start; gap:.6rem; background:rgba(20,168,0,.1); border:1px solid rgba(20,168,0,.35); border-radius: var(--r-2); padding:1rem 1.2rem; margin-bottom:1.2rem; font-size:1.05rem; color:var(--text); font-weight:600; }
.form-success[hidden] { display:none; }
.form-success .fs-ico { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--green); color:var(--fg-on-solid); display:flex; align-items:center; justify-content:center; font-size: var(--fs-16); font-weight: 600; }

/* Mobile hamburger nav */
.nav-burger { display:none; background:var(--surface); border:1px solid var(--border2); border-radius: var(--r-2); width:42px; height:38px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:0; flex-shrink:0; }
.nav-burger span { display:block; width:18px; height:2px; background:var(--text); border-radius: var(--r-1); transition:transform .25s, opacity .25s; }
nav.menu-open .nav-burger span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
nav.menu-open .nav-burger span:nth-child(2) { opacity:0; }
nav.menu-open .nav-burger span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
/* 1170px, not 980px: this must match the width at which the inline links are
   hidden, or there is a range of screen widths with no navigation at all. */


/* Two-column card pairs (option 1/2, result cards): stack on mobile */
.grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:860px){ .grid-2col { grid-template-columns:1fr; } }

/* Footer alignment */
.footer-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; justify-content:flex-end; }
@media(max-width:620px){
  footer { flex-direction:column; align-items:center; text-align:center; gap:.9rem; }
  .fsep { display:none; }
  .footer-meta { flex-direction:column; gap:.35rem; justify-content:center; }
}

/* Mobile sticky CTA (replaces hidden nav CTA below 620px) */
.mobile-cta { display:none; }
@media(max-width:620px){
  .mobile-cta { position:fixed; bottom:0; inset-inline:0; z-index:190; display:block; padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom)); background:rgba(230,238,249,.92); backdrop-filter:blur(12px); border-top:1px solid var(--border); }
  .mobile-cta a { display:flex; align-items:center; justify-content:center; gap:.5rem; background:var(--green); color:var(--fg-on-solid); font-weight: 600; font-size:1.05rem; padding:.85rem 1rem; border-radius: var(--r-2); text-decoration:none; box-shadow:0 4px 14px rgba(20,168,0,.3); }
  body { padding-bottom:76px; }
}

/* ===========================================================================
   7. RIGHT TO LEFT

   Almost nothing is needed here, because every left/right property in section 6
   was converted to its logical equivalent and mirrors itself automatically from
   <html dir="rtl">.

   THIS IS THE ONE PLACE TO LOOK when something on the Hebrew page points the
   wrong way. These are the handful of things CSS will not flip for us.
   =========================================================================== */

/* Hebrew letters are taller and have no ascenders, so lines need more air to
   separate. This is the only size adjustment Hebrew gets: the font draws both
   scripts, so there is no font-size correction to make. */
:lang(he) { line-height: 1.65; }
:lang(he) .lead { line-height: 1.55; }

/* Never track or uppercase Hebrew. Uppercase does nothing, and tracking is
   what made every previous Hebrew page look broken. Belt and braces on top of
   the label rule in section 5. */
[dir="rtl"], [dir="rtl"] * { letter-spacing: normal; text-transform: none; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: -.02em; }
/* The brand name is Latin: it keeps its own direction inside the RTL bar. */
[dir="rtl"] .nav-logo { direction: ltr; unicode-bidi: isolate; }

/* Latin code and product names inside Hebrew sentences. The dir attribute in
   the HTML does the real isolating work; this only fixes the typeface. */
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] kbd { font-family: var(--mono); }

/* Directional glyphs and gradients: the four things that do not mirror. */
:root { --flip: 1; }
[dir="rtl"] { --flip: -1; }
[dir="rtl"] .icon-arrow, [dir="rtl"] .icon-chevron { transform: scaleX(-1); }

/* ---------------------------------------------------------------------------
   NAVIGATION

   The bar used to carry nine links, a two-flag language switch and a call to
   action all at once, which is why it felt crowded. Now the bar holds only the
   logo, the language, the call to action and a menu button. Every section link
   lives inside the menu, at every screen width, not just on phones.
   --------------------------------------------------------------------------- */

.nav-burger { display: flex; }

.nav-links {
  display: none;
  position: absolute; top: 100%; inset-inline: 0;
  flex-direction: column; align-items: stretch;
  gap: .15rem; padding: .6rem 1.2rem 1rem; margin: 0; list-style: none;
  background: var(--bg-surface);
  border-block-end: 1px solid var(--border-default);
  box-shadow: var(--e-2);
}
nav.menu-open .nav-links { display: flex; }
.nav-links a {
  display: flex; align-items: center;
  min-height: 44px; padding: .2rem .4rem;
  font-size: var(--fs-16); font-weight: 500;
  color: var(--fg-secondary); text-decoration: none;
  border-radius: var(--r-1);
}
.nav-links a:hover { background: var(--bg-muted); color: var(--fg-default); }

/* ---- Language: a dropdown, not two flags side by side ----
   Flags are a poor label for a language anyway: a language is not a country.
   Built on <details>, so it opens and closes with no JavaScript at all. */
.lang-menu { position: relative; margin-inline-start: auto; }
.lang-menu summary { display: inline-flex; align-items: center; gap: .35rem;
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding-inline: .7rem;
  font-size: var(--fs-14); font-weight: 600;
  color: var(--fg-secondary); cursor: pointer;
  border: 1px solid var(--border-control); border-radius: var(--r-1);
  list-style: none;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after {
  content: "";
  width: .4rem; height: .4rem; margin-block-start: -.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.lang-menu[open] summary { border-color: var(--fg-accent); color: var(--fg-accent); }
.lang-panel {
  position: absolute; inset-block-start: calc(100% + .3rem); inset-inline-end: 0;
  min-inline-size: 9rem; padding: .3rem;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--r-2);
  box-shadow: var(--e-2); z-index: 30;
}
.lang-panel a { display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .7rem; border-radius: var(--r-1);
  font-size: var(--fs-16); color: var(--fg-secondary); text-decoration: none;
  white-space: nowrap;
}
.lang-panel a:hover { background: var(--bg-muted); color: var(--fg-default); }
.lang-panel a[aria-current] { color: var(--fg-accent); font-weight: 600; }


/* The engineer line under the headline, and the close-the-loop line. */
.hero-close { font-size: var(--fs-lead); color: var(--fg-secondary); max-inline-size: var(--measure); }

/* One quote from the one person every Excel developer knows, directly under
   the hero. Moved here from the testimonial grid, not duplicated. */
.mvp-strip {
  background: var(--bg-muted);
  border-block: 1px solid var(--border-default);
  padding-block: var(--fs-24);
}
.mvp-strip blockquote {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg-default);
  text-wrap: balance;
}
.mvp-strip cite {
  display: block;
  margin-block-start: .4rem;
  font-style: normal;
  font-size: var(--fs-14);
  color: var(--fg-muted);
}


/* "How to get started": the three paths sit collapsed until the reader picks
   one. Native details elements sharing a name, so opening one closes the
   others. No JavaScript. */
details.install-track > summary { cursor: pointer; list-style: none; }
details.install-track > summary::-webkit-details-marker { display: none; }
details.install-track > summary .install-track-head,
details.install-track > summary { position: relative; }
details.install-track > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 1.4rem;
  width: .55rem; height: .55rem;
  border-inline-end: 2px solid var(--fg-muted);
  border-block-end: 2px solid var(--fg-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
details.install-track[open] > summary::after { transform: rotate(225deg); }
details.install-track > summary:hover { background: var(--bg-muted); }