/* ============================================================
   ClickScales — marketing site
   Cool-technical system (brand brief v5 §1). Flat cool surfaces,
   one indigo accent, mono doing structural work, ZERO gradients.
   One stylesheet serves LTR (English) and RTL (Hebrew):
   logical properties only, never left/right.
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --paper:#EDF0F6;
  --surface:#FFFFFF;
  --sunken:#E4E9F1;
  --ink:#0C1226;
  --slate:#5B667E;
  --mist:#D9E0EA;
  --mist-strong:#C3CDDB;
  --indigo:#2F35C7;
  --indigo-hover:#252AB3;
  --indigo-soft:#EAEAFB;
  --amber:#D9861B;
  --amber-glow:#F2B24E;
  --amber-soft:#FCF0DC;
  --night:#0A0F20;

  --r:14px;
  --r-lg:22px;
  --maxw:1180px;

  /* Latin leads, Hebrew is the fallback face in the same stack
     so a mixed Hebrew/Latin/number line resolves per character. */
  --display:"Bricolage Grotesque","Rubik",system-ui,sans-serif;
  --body:"Instrument Sans","Assistant",system-ui,sans-serif;
  --mono:"JetBrains Mono","Assistant",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:light}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.band{padding-block:104px}
.band--tight{padding-block:72px}

/* ---- type ---- */
h1,h2,h3,h4{font-family:var(--display); margin:0; letter-spacing:-.03em; line-height:1.03; font-weight:700}
h1{font-size:clamp(40px,6.2vw,74px); font-weight:800}
h2{font-size:clamp(31px,4vw,50px)}
h3{font-size:20px; letter-spacing:-.02em; line-height:1.25}
p{margin:0}
.lede{font-size:clamp(17px,1.6vw,20px); color:var(--slate); line-height:1.55; max-width:56ch}

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate);
  display:flex; align-items:center; gap:10px; margin-block-end:22px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--indigo); border-radius:2px}

/* The house rule: anything the agent itself produces is mono + amber. */
.ai{font-family:var(--mono); color:var(--amber); font-weight:500}

/* Numbers and Latin data stay LTR even inside an RTL sentence. */
.num{unicode-bidi:isolate; direction:ltr; font-variant-numeric:tabular-nums}

/* ============================================================
   HEBREW / RTL CALIBRATION  (brief §3.1, §3.3, §4.2)
   - Mono is NEVER used for Hebrew text: JetBrains Mono has no
     Hebrew glyphs and Hebrew has no monospace tradition.
   - Uppercase + letter-spacing is meaningless in Hebrew.
   Both are enforced here in CSS, not per component.
   ============================================================ */
[dir="rtl"] .eyebrow,
[dir="rtl"] .stage__lbl,
[dir="rtl"] .extract__hd,
[dir="rtl"] .stat__k,
[dir="rtl"] .plan h3,
[dir="rtl"] .tab,
[dir="rtl"] .field dt,
[dir="rtl"] .foot h4,
[dir="rtl"] .panel__bar .live{
  font-family:var(--body); text-transform:none; letter-spacing:normal; font-weight:600;
}
[dir="rtl"] .ai,
[dir="rtl"] .out,
[dir="rtl"] .extract li,
[dir="rtl"] .field dd,
[dir="rtl"] .int__note,
[dir="rtl"] .hero__meta,
[dir="rtl"] .quote__by,
[dir="rtl"] .cta__fine,
[dir="rtl"] .foot__base,
[dir="rtl"] .plan__per,
[dir="rtl"] .tline__b b{
  font-family:var(--body); letter-spacing:normal;
}
/* Hebrew is denser than Latin at the same size — open the leading slightly. */
[dir="rtl"] body,[dir="rtl"] .lede,[dir="rtl"] .card p,[dir="rtl"] .q__a{line-height:1.7}
[dir="rtl"] h1,[dir="rtl"] h2{line-height:1.15; letter-spacing:0}
[dir="rtl"] h3{line-height:1.35; letter-spacing:0}
/* Directional glyphs flip; non-directional ones never do. */
[dir="rtl"] .flip{display:inline-block; transform:scaleX(-1)}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--body); font-size:15px; font-weight:600; text-decoration:none;
  padding:14px 24px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--indigo); color:#fff; box-shadow:0 10px 26px -12px rgba(47,53,199,.9)}
.btn--primary:hover{background:var(--indigo-hover)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--mist)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{background:#fff; color:var(--ink)}
.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.32)}
.btn--outline-light:hover{border-color:#fff}
.btn--sm{padding:11px 19px; font-size:14px}

:focus-visible{outline:2.5px solid var(--indigo); outline-offset:3px; border-radius:6px}

/* ---- waveform motif: only where audio is actually implied ---- */
.wave{display:flex; align-items:center; gap:3px; height:34px}
.wave i{display:block; width:3px; border-radius:2px; background:var(--indigo); opacity:.32}
.wave--light i{background:#fff; opacity:.28}

/* ============ NAV ============ */
.nav{position:sticky; top:0; z-index:60; background:rgba(237,240,246,.82); backdrop-filter:blur(14px); border-block-end:1px solid var(--mist)}
.nav__in{display:flex; align-items:center; gap:34px; height:70px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.03em; text-decoration:none}
.logo .wave{height:19px}
.logo .wave i{width:2.5px; opacity:.85}
.nav__links{display:flex; gap:26px; margin-inline-start:auto; font-size:15px; color:var(--slate)}
.nav__links a{text-decoration:none}
.nav__links a:hover{color:var(--ink)}
.nav__cta{display:flex; gap:10px; align-items:center}
.lang{
  font-family:var(--body); font-size:13.5px; font-weight:600; text-decoration:none;
  color:var(--slate); border:1px solid var(--mist); border-radius:999px; padding:8px 14px;
  transition:.18s;
}
.lang:hover{border-color:var(--ink); color:var(--ink)}

/* ============ HERO ============ */
.hero{padding-block:88px 76px; position:relative; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center}
.hero h1 .em{color:var(--indigo); font-style:normal}
.hero__sub{margin-block-start:26px}
.hero__actions{display:flex; gap:12px; margin-block-start:34px; flex-wrap:wrap}
.hero__meta{display:flex; gap:22px; margin-block-start:26px; font-family:var(--mono); font-size:12.5px; color:var(--slate); flex-wrap:wrap}
.hero__meta span{display:flex; align-items:center; gap:7px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--indigo); flex:none}
.dot--amber{background:var(--amber)}

/* the live-call panel = the signature element */
.panel{
  background:var(--surface); border:1px solid var(--mist); border-radius:var(--r-lg);
  box-shadow:0 40px 80px -50px rgba(12,18,38,.55); overflow:hidden;
}
.panel__bar{display:flex; align-items:center; gap:12px; padding:14px 18px; border-block-end:1px solid var(--mist)}
.panel__bar .live{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#C0392B; display:flex; align-items:center; gap:7px;
}
.blip{width:7px; height:7px; border-radius:50%; background:#C0392B; animation:blip 1.6s infinite; flex:none}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.panel__bar .clock{margin-inline-start:auto; font-family:var(--mono); font-size:12px; color:var(--slate)}
.panel__body{padding:20px 18px 22px}

.line{display:grid; grid-template-columns:74px 1fr; gap:12px; padding-block:9px; opacity:0; transform:translateY(6px); animation:rise .5s forwards}
.line:nth-of-type(1){animation-delay:.15s} .line:nth-of-type(2){animation-delay:.5s}
.line:nth-of-type(3){animation-delay:.85s} .line:nth-of-type(4){animation-delay:1.2s}
@keyframes rise{to{opacity:1; transform:none}}
.line__who{font-size:11.5px; color:var(--slate); padding-block-start:4px; text-align:end; line-height:1.35}
.line__txt{font-size:15px; line-height:1.55}
/* The call itself is in Hebrew on both pages — that IS the product. */
.line--he{direction:rtl; text-align:right}
.line--he .line__who{text-align:left}
[dir="rtl"] .line--he{text-align:start}
[dir="rtl"] .line--he .line__who{text-align:end}

.extract{
  margin-block:16px -22px; margin-inline:-18px; padding:18px; background:var(--night); color:#fff;
  opacity:0; animation:rise .6s 1.6s forwards;
}
.extract__hd{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-block-end:12px}
.extract ul{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.extract li{display:flex; gap:10px; font-family:var(--mono); font-size:13px; color:var(--amber-glow); line-height:1.45}
.extract li b{color:#fff; font-weight:500}
.tick{flex:none; margin-block-start:4px; width:13px; height:13px; border-radius:4px; border:1.5px solid var(--amber-glow); position:relative}
.tick::after{content:""; position:absolute; inset:2.5px; background:var(--amber-glow); border-radius:1px}

/* ============ STATS ============ */
.stats{border-block:1px solid var(--mist); padding-block:38px; background:rgba(255,255,255,.5)}
.stats__row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.stat__v{font-family:var(--display); font-size:clamp(30px,3.4vw,42px); font-weight:800; letter-spacing:-.04em; line-height:1}
.stat__k{font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--slate); margin-block-start:11px; line-height:1.5}

/* ============ FEATURES ============ */
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-block-start:52px}
.card{
  background:var(--surface); border:1px solid var(--mist); border-radius:var(--r);
  padding:28px 26px 30px; transition:border-color .2s, transform .2s;
}
.card:hover{border-color:var(--mist-strong); transform:translateY(-3px)}
.card__ico{
  width:38px; height:38px; border-radius:11px; background:var(--indigo-soft); color:var(--indigo);
  display:grid; place-items:center; font-family:var(--mono); font-size:15px; font-weight:700; margin-block-end:18px;
}
.card--ai .card__ico{background:var(--amber-soft); color:var(--amber)}
.card h3{margin-block-end:9px}
.card p{font-size:15px; color:var(--slate); line-height:1.55}

/* ============ DEMO (dark) ============ */
.demo{background:var(--night); color:#fff}
.demo .lede{color:rgba(255,255,255,.62)}
.demo .eyebrow{color:rgba(255,255,255,.55)}
.demo .eyebrow::before{background:var(--amber)}
.demo__hd{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-block-end:44px}
.tabs{display:flex; gap:6px; background:rgba(255,255,255,.06); padding:5px; border-radius:999px; flex-wrap:wrap}
.tab{
  border:0; background:transparent; color:rgba(255,255,255,.62); cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  padding:10px 17px; border-radius:999px; transition:.18s;
}
.tab[aria-selected="true"]{background:#fff; color:var(--night)}
.stage{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.11); border-radius:var(--r-lg);
  display:grid; grid-template-columns:1.25fr 1fr; min-height:400px; overflow:hidden;
}
.stage__left{padding:30px 32px; border-inline-end:1px solid rgba(255,255,255,.11)}
.stage__right{padding:30px 32px; background:rgba(255,255,255,.03)}
.stage__lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-block-end:20px}
.tline{display:grid; grid-template-columns:52px 1fr; gap:14px; padding-block:11px; border-block-end:1px solid rgba(255,255,255,.07)}
.tline:last-child{border:0}
.tline__t{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.4); direction:ltr; unicode-bidi:isolate}
.tline__b{font-size:15px; line-height:1.55; color:rgba(255,255,255,.9)}
.tline__b b{display:block; font-family:var(--mono); font-size:11px; font-weight:500; color:#8E93F0; margin-block-end:4px; letter-spacing:.04em}
.pane{display:none}
.pane[data-on]{display:block}
.out{font-family:var(--mono); font-size:13.5px; line-height:1.75; color:var(--amber-glow); white-space:pre-wrap}
.field{display:grid; grid-template-columns:124px 1fr; gap:12px; padding-block:11px; border-block-end:1px solid rgba(255,255,255,.07); align-items:baseline}
.field:last-child{border:0}
.field dt{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.42)}
.field dd{margin:0; font-family:var(--mono); font-size:13.5px; color:var(--amber-glow)}
.meter{margin-block-start:24px}
.meter__bar{height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; display:flex}
.meter__bar b{display:block; height:100%; background:#5C61E0}
.meter__k{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.5); margin-block-start:9px}

/* ============ INTEGRATIONS ============ */
.int{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-block-start:46px}
.int div{
  background:var(--surface); border:1px solid var(--mist); border-radius:var(--r);
  padding:22px 12px; text-align:center; font-size:14px; font-weight:500; transition:.2s;
}
.int div:hover{border-color:var(--indigo); color:var(--indigo)}
.int div.soon{background:transparent; color:var(--slate); border-style:dashed}
.int div.soon::after{content:attr(data-note); display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-block-start:6px; opacity:.8}
[dir="rtl"] .int div.soon::after{font-family:var(--body); letter-spacing:normal; text-transform:none}
.int__note{margin-block-start:22px; font-family:var(--mono); font-size:12.5px; color:var(--slate); line-height:1.7}

/* ============ PRICING ============ */
.price{display:grid; grid-template-columns:.85fr 1.15fr; gap:24px; margin-block-start:48px; align-items:start}
.plan{background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--r-lg); padding:34px 30px; box-shadow:0 30px 60px -40px rgba(12,18,38,.6)}
.plan h3{font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}
.plan__price{font-family:var(--display); font-size:52px; font-weight:800; letter-spacing:-.04em; margin-block:18px 4px; line-height:1; display:flex; align-items:baseline; gap:8px}
.plan__from{font-family:var(--body); font-size:16px; font-weight:600; color:var(--slate); letter-spacing:0}
.plan__per{font-family:var(--mono); font-size:12px; color:var(--slate)}
.plan ul{list-style:none; margin-block:26px 0; padding-block:22px 0; padding-inline:0; border-block-start:1px solid var(--mist); display:grid; gap:11px}
.plan li{display:flex; gap:11px; font-size:14.5px; line-height:1.45}
.plan li::before{content:"+"; font-family:var(--mono); color:var(--indigo); font-weight:700; flex:none}

.formcard{background:var(--surface); border:1px solid var(--mist); border-radius:var(--r-lg); padding:34px 32px}
.formcard h3{font-size:24px; margin-block-end:8px}
.formcard > p{font-size:15px; color:var(--slate); margin-block-end:26px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.f{display:flex; flex-direction:column; gap:7px}
.f--full{grid-column:1 / -1}
.f label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}
[dir="rtl"] .f label{font-family:var(--body); letter-spacing:normal; text-transform:none; font-size:12.5px; font-weight:600}
.f input,.f select{
  font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--sunken); border:1px solid var(--mist); border-radius:10px; padding:12px 14px;
  transition:.16s; width:100%;
}
.f input:focus,.f select:focus{background:var(--surface); border-color:var(--indigo); outline:none}
.f input[type="tel"],.f input[type="email"]{direction:ltr; text-align:start}
[dir="rtl"] .f input[type="tel"],[dir="rtl"] .f input[type="email"]{text-align:right}
.formcard .btn{width:100%; justify-content:center; margin-block-start:20px}
.form__fine{font-family:var(--mono); font-size:11.5px; color:var(--slate); margin-block-start:14px; text-align:center}
[dir="rtl"] .form__fine{font-family:var(--body)}
.hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden}
.form__ok{
  display:none; background:var(--indigo-soft); border:1px solid var(--indigo);
  border-radius:12px; padding:18px 20px; color:var(--indigo); font-weight:600; font-size:15px; line-height:1.5;
}
.form__ok[data-on]{display:block}
form[data-sent] .fgrid,form[data-sent] .btn,form[data-sent] .form__fine{display:none}

/* ============ FAQ ============ */
.faq{max-width:820px; margin-inline:auto; margin-block-start:48px}
.q{border-block-end:1px solid var(--mist)}
.q summary{
  cursor:pointer; list-style:none; padding-block:24px; padding-inline:0 44px; position:relative;
  font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em;
}
[dir="rtl"] .q summary{letter-spacing:0}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"+"; position:absolute; inset-inline-end:6px; top:22px; font-family:var(--mono);
  font-size:21px; color:var(--indigo); transition:transform .22s;
}
.q[open] summary::after{transform:rotate(45deg)}
.q__a{padding-block:0 26px; padding-inline:0 60px; color:var(--slate); font-size:16px; line-height:1.65}

/* ============ CTA ============ */
.cta{background:var(--night); color:#fff; border-radius:var(--r-lg); padding:66px 56px; text-align:center; position:relative; overflow:hidden}
.cta h2{max-width:19ch; margin-inline:auto; margin-block-end:18px}
.cta p{color:rgba(255,255,255,.6); max-width:52ch; margin-inline:auto}
.cta__actions{display:flex; gap:12px; justify-content:center; margin-block-start:34px; flex-wrap:wrap}
.cta__fine{margin-block-start:22px; font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.42)}
.cta .wave{justify-content:center; margin-inline:auto; margin-block-end:30px}

/* ============ FOOTER ============ */
footer{border-block-start:1px solid var(--mist); padding-block:64px 40px; margin-block-start:104px}
.foot{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px}
.foot__blurb{font-size:14.5px; color:var(--slate); margin-block-start:16px; max-width:34ch; line-height:1.55}
.foot h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); font-weight:500; margin-block-end:16px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:14.5px}
.foot a{text-decoration:none; color:var(--slate)}
.foot a:hover{color:var(--ink)}
.foot__base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-block-start:56px; padding-block-start:26px; border-block-start:1px solid var(--mist);
  font-family:var(--mono); font-size:12px; color:var(--slate);
}

/* ============ REVEAL ============ */
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr; gap:44px}
  .feat{grid-template-columns:1fr}
  .price{grid-template-columns:1fr}
  .int{grid-template-columns:repeat(3,1fr)}
  .stats__row{grid-template-columns:repeat(2,1fr); gap:30px}
  .stage{grid-template-columns:1fr}
  .stage__left{border-inline-end:0; border-block-end:1px solid rgba(255,255,255,.11)}
  .foot{grid-template-columns:1fr 1fr}
  .nav__links{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .band{padding-block:70px}
  .int{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
  .cta{padding:48px 26px}
  .foot{grid-template-columns:1fr}
  .wrap{padding-inline:18px}
  .nav__in{gap:12px}
  .nav__cta{gap:8px}
  .lang{padding:8px 11px; font-size:12.5px}
  .nav__cta .btn--sm{padding:10px 15px; font-size:13.5px}
  .formcard,.plan{padding-inline:22px}
  .stage__left,.stage__right{padding-inline:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv,.line,.extract{opacity:1 !important; transform:none !important}
  html{scroll-behavior:auto}
}