/* ============================================================
   8-й КИЛОМЕТР — bespoke L3 site styles.
   Theme: "warm market / kraft" — bazaar poster meets city documentary.
   Display: Oswald (condensed, uppercase). Body: Manrope.
   Numerals/labels: JetBrains Mono (price-tag / receipt feel).
   HE: Frank Ruhl Libre + Heebo. RTL aware.
   ============================================================ */

:root{
  --paper:#f3ead7;        /* kraft cream */
  --paper-2:#ece0c7;      /* deeper kraft */
  --card:#fbf6ea;         /* lighter card */
  --ink:#241c16;          /* near-black warm */
  --ink-soft:#5a4d3f;     /* muted brown */
  --line:#d8c8a8;         /* hairline on paper */
  --line-soft:#e3d6ba;
  --amber:#d98a1f;        /* turmeric / amber */
  --amber-d:#b66f12;
  --terra:#b5482e;        /* terracotta / brick */
  --terra-d:#8f3621;
  --olive:#6d6a33;        /* herb green accent */
  --ink-on:#f3ead7;       /* text on dark */
  --dark:#1c160f;         /* dark band */
  --dark-2:#272015;
  --r:10px; --r-lg:16px;
  --shadow:0 14px 40px rgba(40,28,12,.16);
  --shadow-s:0 6px 18px rgba(40,28,12,.12);
  --maxw:1180px;
  --header-h:64px;
  --f-display:"Oswald",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html[lang="he"]{ --f-display:"Frank Ruhl Libre",serif; --f-body:"Heebo",sans-serif; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body); color:var(--ink); background:var(--paper);
  line-height:1.7; font-size:17px; overflow-x:hidden;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(217,138,31,.05), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(181,72,46,.05), transparent 42%);
}
/* paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
  mix-blend-mode:multiply;
}
.container{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.05; letter-spacing:.01em; }
::selection{ background:var(--amber); color:#fff; }

/* ---------- labels / kickers (mono, price-tag) ---------- */
.label{
  font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--terra); display:inline-flex; align-items:center; gap:.6rem;
}
.label::before{ content:""; width:1.8rem; height:2px; background:var(--amber); display:inline-block; }
.shead.center .label::before, .center .label::before{ display:none; }

/* ============================ JBAR ============================ */
.jbar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:80; height:38px;
  background:var(--dark); color:var(--ink-on);
  display:flex; align-items:center; gap:.6rem; padding-inline:1rem;
  font-size:.78rem; border-bottom:1px solid rgba(243,234,215,.1);
}
.jbar-logo{ font-family:var(--f-display); font-weight:600; letter-spacing:.04em; white-space:nowrap; flex:none; }
.jbar-logo b{ color:var(--amber); }
.jbar-sep{ opacity:.4; flex:none; }
.jbar-marquee{ position:relative; overflow:hidden; flex:1; height:100%; display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.jbar-track{ display:inline-flex; gap:3rem; white-space:nowrap; will-change:transform;
  animation:jbarscroll 42s linear infinite; }
.jbar-track span{ opacity:.85; }
.jbar-marquee:hover .jbar-track{ animation-play-state:paused; }
@keyframes jbarscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html[dir="rtl"] .jbar-track{ animation-name:jbarscroll-rtl; }
@keyframes jbarscroll-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* ============================ HEADER ============================ */
.top{
  position:fixed; inset-block-start:38px; inset-inline:0; z-index:70; height:var(--header-h);
  display:flex; align-items:center; gap:1.4rem; padding-inline:clamp(1rem,3vw,2rem);
  background:rgba(243,234,215,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s;
}
.top.scrolled{ box-shadow:var(--shadow-s); background:rgba(243,234,215,.94); }
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-display);
  font-weight:700; font-size:1.3rem; letter-spacing:.02em; color:var(--ink); flex:none; }
.brand .bm{ display:inline-flex; }
.menu{ display:flex; gap:.3rem; margin-inline-start:auto; flex-wrap:wrap; }
.menu a{ font-family:var(--f-display); font-weight:500; font-size:.98rem; letter-spacing:.04em;
  text-transform:uppercase; padding:.45rem .7rem; border-radius:7px; color:var(--ink-soft);
  position:relative; transition:color .2s, background .2s; }
.menu a:hover{ color:var(--ink); background:rgba(181,72,46,.08); }
.menu a.cur{ color:var(--terra); }
.menu a.cur::after{ content:""; position:absolute; inset-inline:.7rem; inset-block-end:.18rem; height:2px; background:var(--amber); }
.langs{ display:flex; gap:.15rem; flex:none; background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:.18rem; }
.langs button{ font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.05em;
  border:0; background:transparent; color:var(--ink-soft); padding:.32rem .5rem; border-radius:6px; cursor:pointer; transition:.2s; }
.langs button:hover{ color:var(--ink); }
.langs button.active{ background:var(--terra); color:#fff; }
.burger{ display:none; font-size:1.4rem; background:transparent; border:0; color:var(--ink); cursor:pointer; flex:none; }

/* ============================ BUTTONS ============================ */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:600;
  font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; padding:.82rem 1.5rem; border-radius:8px;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s, background .25s; border:2px solid transparent; }
.btn-primary{ background:var(--terra); color:#fff; box-shadow:var(--shadow-s); }
.btn-primary:hover{ background:var(--terra-d); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ border-color:currentColor; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* ============================ HERO ============================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 38px + 3rem) 0 clamp(3rem,7vw,6rem); overflow:hidden; isolation:isolate; }
.hero .bg, .phero .bg, .pband .bg{ position:absolute; inset:0; z-index:-2; }
.hero .bg img, .phero .bg img, .pband .bg img{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,16,10,.36) 0%, rgba(20,16,10,.34) 38%, rgba(20,16,10,.9) 100%); }
.hero .wrap{ color:var(--paper); max-width:46rem; }
.hero .label{ color:#f1c27a; }
.hero .label::before{ background:#f1c27a; }
.hero h1{ font-size:clamp(3.4rem,2rem+9vw,8rem); color:#fff; text-transform:uppercase; letter-spacing:-.01em;
  text-shadow:0 14px 50px rgba(0,0,0,.5); margin:.4rem 0 1rem; }
.hero .lead{ font-size:clamp(1.1rem,1rem+.7vw,1.4rem); color:rgba(243,234,215,.94); max-width:40rem; }
.hero .cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.hero .btn-ghost{ color:#fff; }
.hero .btn-ghost:hover{ background:#fff; color:var(--ink); }
.scrollcue{ position:absolute; inset-block-end:1.4rem; inset-inline-end:clamp(1rem,3vw,2.4rem); z-index:1;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.3em; color:rgba(243,234,215,.7);
  writing-mode:vertical-rl; }
html[dir="rtl"] .scrollcue{ writing-mode:vertical-lr; }

/* ============================ PAGE HERO ============================ */
.phero{ position:relative; min-height:62vh; display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 38px + 3rem) 0 clamp(2.4rem,5vw,4rem); overflow:hidden; isolation:isolate; }
.phero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,16,10,.34) 0%, rgba(20,16,10,.42) 50%, rgba(20,16,10,.88) 100%); }
.phero .wrap{ color:var(--paper); max-width:44rem; }
.phero .label{ color:#f1c27a; } .phero .label::before{ background:#f1c27a; }
.phero h1{ font-size:clamp(2.6rem,1.6rem+5vw,5.5rem); color:#fff; text-transform:uppercase;
  text-shadow:0 10px 36px rgba(0,0,0,.5); margin:.3rem 0 .8rem; }
.phero p{ font-size:clamp(1.05rem,1rem+.5vw,1.3rem); color:rgba(243,234,215,.94); max-width:38rem; }

/* ============================ BLOCKS ============================ */
.block{ padding:clamp(3rem,6vw,5.5rem) 0; position:relative; z-index:2; }
.shead{ max-width:56rem; margin-bottom:2.4rem; }
.shead.center{ margin-inline:auto; text-align:center; }
.shead h2, .split h2, .pband h2{ font-size:clamp(1.9rem,1.3rem+2.2vw,3rem); text-transform:uppercase; color:var(--ink); margin-top:.5rem; }
.shead .label{ margin-bottom:.2rem; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  background:var(--dark); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--shadow); }
.stat{ text-align:center; padding:.4rem; border-inline-start:1px solid rgba(243,234,215,.12); }
.stat:first-child{ border:0; }
.stat b{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,1.4rem+2.6vw,3.4rem);
  color:var(--amber); line-height:1; }
.stat span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:rgba(243,234,215,.78); line-height:1.4; display:block; margin-top:.5rem; }
@media(max-width:680px){ .stats{ grid-template-columns:1fr 1fr; } .stat:nth-child(odd){ border:0; } }

/* split: image + text */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,4vw,3.6rem); align-items:center; }
.split.rev .copy{ order:2; }
.split .copy h2{ margin:.5rem 0 1rem; }
.split .lead-p{ font-size:1.18rem; color:var(--ink); font-weight:500; margin-bottom:1rem; }
.split .body-p{ color:var(--ink-soft); margin-bottom:1rem; }
.split .media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); transform:rotate(-.6deg); }
.split.rev .media{ transform:rotate(.6deg); }
.split .media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease); }
.split .media:hover img{ transform:scale(1.05) rotate(.4deg); }
.cap{ position:absolute; inset-block-end:0; inset-inline:0; padding:1.4rem .9rem .7rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:#fff;
  background:linear-gradient(transparent, rgba(20,16,10,.82)); }
@media(max-width:820px){ .split{ grid-template-columns:1fr; } .split.rev .copy{ order:0; } .split .media{ transform:none; } }

.lead-p{ font-size:1.2rem; color:var(--ink); font-weight:500; max-width:54rem; }
.lead-p.center{ margin-inline:auto; text-align:center; }
.body-p{ color:var(--ink-soft); }

/* cards */
.cards{ display:grid; gap:1.2rem; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem 1.6rem;
  box-shadow:var(--shadow-s); position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s; }
.card::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--amber),var(--terra)); transform:scaleX(0); transform-origin:inline-start; transition:transform .4s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.card:hover::before{ transform:scaleX(1); }
.cn{ font-family:var(--f-mono); font-weight:700; font-size:.82rem; color:var(--terra); letter-spacing:.1em; }
.card h3{ font-size:1.3rem; text-transform:uppercase; color:var(--ink); margin:.4rem 0 .5rem; }
.card p{ color:var(--ink-soft); font-size:.95rem; }
@media(max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr)!important; } }
@media(max-width:540px){ .cards{ grid-template-columns:1fr!important; } }

/* index feature list (numbered rows with thumb) */
.index{ display:grid; gap:.8rem; }
.idx{ display:grid; grid-template-columns:auto 92px 1fr auto; align-items:center; gap:1.2rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:.9rem 1.2rem;
  box-shadow:var(--shadow-s); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.idx:hover{ transform:translateX(6px); box-shadow:var(--shadow); border-color:var(--amber); }
html[dir="rtl"] .idx:hover{ transform:translateX(-6px); }
.idx .in{ font-family:var(--f-mono); font-weight:700; font-size:1.05rem; color:var(--terra); }
.idx .ic{ width:92px; height:64px; border-radius:8px; overflow:hidden; flex:none; }
.idx .ic img{ width:100%; height:100%; object-fit:cover; }
.idx .tw{ display:flex; flex-direction:column; gap:.15rem; }
.idx .it{ font-family:var(--f-display); font-weight:600; font-size:1.3rem; text-transform:uppercase; color:var(--ink); }
.idx .id{ font-size:.9rem; color:var(--ink-soft); }
.idx .ar{ font-size:1.3rem; color:var(--amber); transition:transform .3s; }
.idx:hover .ar{ transform:translateX(4px); }
html[dir="rtl"] .idx .ar{ transform:scaleX(-1); }
@media(max-width:600px){ .idx{ grid-template-columns:auto 1fr auto; } .idx .ic{ display:none; } }

/* quote band */
.qband{ background:var(--dark); }
.qband blockquote{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.6rem,1.1rem+2.4vw,3rem);
  line-height:1.18; color:var(--paper); text-align:center; max-width:50rem; margin-inline:auto; }
.qband .qby{ text-align:center; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-top:1.4rem; }

/* promo band (image bg) */
.pband{ position:relative; padding:clamp(3.4rem,7vw,6rem) 0; overflow:hidden; isolation:isolate; }
.pband::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(20,16,10,.92) 30%, rgba(20,16,10,.6)); }
.pband .box{ max-width:38rem; color:var(--paper); }
.pband .label{ color:#f1c27a; } .pband .label::before{ background:#f1c27a; }
.pband h2{ color:#fff; margin:.5rem 0 1rem; }
.pband p{ color:rgba(243,234,215,.92); margin-bottom:1.6rem; }

/* definition list (rows) */
.dlist{ display:grid; gap:0; border-top:1px solid var(--line); }
.drow{ display:grid; grid-template-columns:.4fr 1fr; gap:1.4rem; padding:1.3rem .4rem; border-bottom:1px solid var(--line); align-items:baseline; }
.drow dt{ font-family:var(--f-display); font-weight:600; font-size:1.25rem; text-transform:uppercase; color:var(--terra); }
.drow dd{ color:var(--ink-soft); }
@media(max-width:640px){ .drow{ grid-template-columns:1fr; gap:.3rem; } }

/* note line */
.note{ font-family:var(--f-mono); font-size:.84rem; line-height:1.7; color:var(--ink-soft);
  border-inline-start:3px solid var(--amber); background:var(--paper-2); border-radius:var(--r);
  padding:1.1rem 1.3rem; max-width:60rem; }

/* ============================ FOOTER ============================ */
.foot{ background:var(--dark); color:var(--ink-on); padding:clamp(3rem,5vw,4.5rem) 0 2rem; position:relative; z-index:2; }
.fgridf{ display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:2.4rem; }
.fbrand .brand{ color:#fff; }
.fbrand p{ color:rgba(243,234,215,.72); font-size:.95rem; max-width:30ch; }
.fcol h4{ font-family:var(--f-mono); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:1rem; }
.fcol a{ display:block; color:rgba(243,234,215,.82); font-size:.96rem; padding:.28rem 0; transition:color .2s; }
.fcol a:hover{ color:#fff; }
.fcol p{ color:rgba(243,234,215,.6); font-size:.84rem; margin-top:1rem; line-height:1.6; }
.fcol .cred{ font-size:.78rem; opacity:.7; }
.fbot{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.4rem;
  border-top:1px solid rgba(243,234,215,.12); font-size:.8rem; color:rgba(243,234,215,.6); }
@media(max-width:820px){ .fgridf{ grid-template-columns:1fr; gap:1.8rem; } }

/* ============================ REVEAL ============================ */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.card.d1{ transition-delay:.04s } .card.d2{ transition-delay:.12s } .card.d3{ transition-delay:.2s } .card.d4{ transition-delay:.28s }
@media(prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } .jbar-track{ animation:none; } *{ scroll-behavior:auto; } }

/* ============================ MOBILE NAV ============================ */
@media(max-width:880px){
  .burger{ display:block; margin-inline-start:auto; }
  .menu{ position:fixed; inset-block-start:calc(38px + var(--header-h)); inset-inline:0; flex-direction:column; gap:.2rem;
    background:var(--paper); border-bottom:1px solid var(--line); padding:1rem clamp(1rem,3vw,2rem); margin:0;
    box-shadow:var(--shadow); clip-path:inset(0 0 100% 0); transition:clip-path .35s var(--ease); }
  .menu.open{ clip-path:inset(0 0 0 0); }
  .menu a{ font-size:1.1rem; padding:.7rem .4rem; }
  .menu a.cur::after{ inset-inline:.4rem; }
  .langs{ order:-1; }
}
@media(max-width:430px){
  .jbar-sep, .jbar-marquee{ display:none; }
  .jbar{ justify-content:center; }
}