/* ============================================================
   ДЕНИЗ МОЛЛ — bespoke L3 styles. Theme: "Caspian glass & azure".
   Sky azure + teal + glass white + gold accent. Modern, light.
   Display: Sora (geometric). Body: Manrope. Labels: JetBrains Mono.
   HE: Frank Ruhl Libre + Heebo. RTL aware.
   ============================================================ */
:root{
  --paper:#eef4f8;        /* glass-white blue */
  --paper-2:#e0eaf1;      /* deeper */
  --card:#ffffff;         /* white card */
  --ink:#13283a;          /* deep marine ink */
  --ink-soft:#4d6577;     /* muted steel-blue */
  --line:#cdddea;
  --line-soft:#dde8f1;
  --azure:#1f7fb8;        /* Caspian azure (also glyph) */
  --azure-d:#176293;
  --teal:#16a39b;         /* teal accent */
  --gold:#cf9a3a;         /* warm gold accent */
  --gold-br:#e6b659;      /* bright gold on dark */
  --ink-on:#eef4f8;
  --dark:#0f2433;         /* deep marine band */
  --dark-2:#163143;
  --r:12px; --r-lg:18px;
  --shadow:0 18px 48px rgba(15,36,51,.18);
  --shadow-s:0 6px 20px rgba(15,36,51,.12);
  --maxw:1180px;
  --header-h:64px;
  --f-display:"Sora",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 14% 12%, rgba(31,127,184,.07), transparent 42%),
    radial-gradient(circle at 86% 88%, rgba(22,163,155,.06), transparent 44%);
}
.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:700; line-height:1.1; letter-spacing:-.01em; }
::selection{ background:var(--azure); color:#fff; }

/* ---------- labels / kickers ---------- */
.label{
  font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--azure); display:inline-flex; align-items:center; gap:.6rem;
}
.label::before{ content:""; width:1.8rem; height:2px; background:var(--gold); 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(238,244,248,.1);
}
.jbar-logo{ font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; white-space:nowrap; flex:none; }
.jbar-logo b{ color:var(--gold-br); }
.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(238,244,248,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s;
}
.top.scrolled{ box-shadow:var(--shadow-s); background:rgba(238,244,248,.96); }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--f-display);
  font-weight:700; font-size:1.22rem; letter-spacing:-.01em; color:var(--ink); flex:none; }
.brand .bm{ display:inline-flex; }
.menu{ display:flex; gap:.25rem; margin-inline-start:auto; flex-wrap:wrap; }
.menu a{ font-family:var(--f-mono); font-weight:600; font-size:.74rem; letter-spacing:.03em;
  text-transform:uppercase; padding:.45rem .6rem; border-radius:8px; color:var(--ink-soft);
  position:relative; transition:color .2s, background .2s; }
html[dir="rtl"] .menu a{ font-family:var(--f-body); }
.menu a:hover{ color:var(--ink); background:rgba(31,127,184,.08); }
.menu a.cur{ color:var(--azure); }
.menu a.cur::after{ content:""; position:absolute; inset-inline:.6rem; inset-block-end:.16rem; height:2px; background:var(--gold); }
.langs{ display:flex; gap:.15rem; flex:none; background:var(--paper-2); border:1px solid var(--line); border-radius:9px; 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:7px; cursor:pointer; transition:.2s; }
.langs button:hover{ color:var(--ink); }
.langs button.active{ background:var(--azure); 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-mono); font-weight:700;
  font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; padding:.85rem 1.6rem; border-radius:10px;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s, background .25s; border:2px solid transparent; }
.btn-primary{ background:var(--azure); color:#fff; box-shadow:var(--shadow-s); }
.btn-primary:hover{ background:var(--azure-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; object-position:center 45%; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,28,40,.36) 0%, rgba(10,28,40,.28) 38%, rgba(10,28,40,.88) 100%); }
.hero .wrap{ color:#fff; max-width:48rem; }
.hero .label{ color:var(--gold-br); }
.hero .label::before{ background:var(--gold-br); }
.hero h1{ font-size:clamp(3rem,2rem+7vw,7rem); color:#fff; letter-spacing:-.02em;
  text-shadow:0 14px 50px rgba(0,0,0,.45); margin:.4rem 0 1rem; }
.hero .lead{ font-size:clamp(1.1rem,1rem+.7vw,1.4rem); color:rgba(255,255,255,.95); max-width:42rem; }
.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(255,255,255,.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(10,28,40,.32) 0%, rgba(10,28,40,.4) 50%, rgba(10,28,40,.88) 100%); }
.phero .wrap{ color:#fff; max-width:44rem; }
.phero .label{ color:var(--gold-br); } .phero .label::before{ background:var(--gold-br); }
.phero h1{ font-size:clamp(2.6rem,1.7rem+5vw,5.2rem); color:#fff;
  text-shadow:0 10px 36px rgba(0,0,0,.45); margin:.3rem 0 .8rem; }
.phero p{ font-size:clamp(1.05rem,1rem+.5vw,1.3rem); color:rgba(255,255,255,.95); 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.4vw,3.2rem); color:var(--ink); margin-top:.5rem; }
.shead .label{ margin-bottom:.2rem; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  background:linear-gradient(135deg,var(--dark),var(--azure-d)); 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(255,255,255,.14); }
.stat:first-child{ border:0; }
.stat b{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,1.2rem+2vw,3rem);
  color:#fff; line-height:1.05; }
.stat span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.03em; color:rgba(255,255,255,.82); line-height:1.45; display:block; margin-top:.5rem; }
@media(max-width:680px){ .stats{ grid-template-columns:1fr 1fr; } .stat:nth-child(odd){ border:0; } }

/* split */
.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); }
.split .media img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 45%; transition:transform .7s var(--ease); }
.split .media:hover img{ transform:scale(1.05); }
.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:.03em; color:#fff;
  background:linear-gradient(transparent, rgba(10,28,40,.82)); }
@media(max-width:820px){ .split{ grid-template-columns:1fr; } .split.rev .copy{ order:0; } }

.lead-p{ font-size:1.2rem; color:var(--ink); font-weight:500; max-width:56rem; }
.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(--azure),var(--teal)); 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(--teal); letter-spacing:.1em; }
.card h3{ font-size:1.3rem; 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 */
.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(--azure); }
html[dir="rtl"] .idx:hover{ transform:translateX(-6px); }
.idx .in{ font-family:var(--f-display); font-weight:800; font-size:1.2rem; color:var(--azure); }
.idx .ic{ width:92px; height:64px; border-radius:10px; 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:700; font-size:1.3rem; color:var(--ink); }
.idx .id{ font-size:.9rem; color:var(--ink-soft); }
.idx .ar{ font-size:1.3rem; color:var(--teal); 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:linear-gradient(135deg,var(--dark),var(--azure-d)); }
.qband blockquote{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.7rem,1.1rem+2.4vw,3rem);
  line-height:1.25; color:#fff; text-align:center; max-width:48rem; margin-inline:auto; }
.qband .qby{ text-align:center; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-br); margin-top:1.4rem; }

/* promo band */
.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(10,28,40,.92) 28%, rgba(10,28,40,.5)); }
.pband .box{ max-width:40rem; color:#fff; }
.pband .label{ color:var(--gold-br); } .pband .label::before{ background:var(--gold-br); }
.pband h2{ color:#fff; margin:.5rem 0 1rem; }
.pband p{ color:rgba(255,255,255,.92); margin-bottom:1.6rem; }
.pband .btn-primary{ background:var(--gold); color:var(--dark); }
.pband .btn-primary:hover{ background:var(--gold-br); }

/* definition list */
.dlist{ display:grid; gap:0; border-top:2px solid var(--ink); }
.drow{ display:grid; grid-template-columns:.4fr 1fr; gap:1.4rem; padding:1.4rem .4rem; border-bottom:1px solid var(--line); align-items:baseline; }
.drow dt{ font-family:var(--f-display); font-weight:700; font-size:1.35rem; color:var(--azure); line-height:1.15; }
.drow dd{ color:var(--ink-soft); }
@media(max-width:640px){ .drow{ grid-template-columns:1fr; gap:.3rem; } }

/* note */
.note{ font-family:var(--f-mono); font-size:.84rem; line-height:1.7; color:var(--ink-soft);
  border-inline-start:3px solid var(--teal); background:var(--paper-2); border-radius:var(--r);
  padding:1.1rem 1.3rem; max-width:62rem; }
html[dir="rtl"] .note{ border-inline-start:none; border-inline-end:3px solid var(--teal); }

/* ============================ FOOTER ============================ */
.foot{ background:var(--dark); color:var(--ink-on); padding:clamp(3rem,5vw,4.5rem) 0 2rem; position:relative; z-index:2; }
.foot::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px; background:linear-gradient(90deg,var(--azure),var(--teal),var(--gold)); }
.fgridf{ display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:2.4rem; }
.fbrand .brand{ color:#fff; }
.fbrand p{ color:rgba(238,244,248,.74); font-size:.95rem; max-width:34ch; }
.fcol h4{ font-family:var(--f-mono); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-br); margin-bottom:1rem; }
.fcol a{ display:block; color:rgba(238,244,248,.84); font-size:.96rem; padding:.28rem 0; transition:color .2s; }
.fcol a:hover{ color:#fff; }
.fcol p{ color:rgba(238,244,248,.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(238,244,248,.12); font-size:.8rem; color:rgba(238,244,248,.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; }
}