/* ============================================================================
   BuildAI — landing page styles (index.html only).
   register.html keeps assets/style.css. Tokens mirror the web app
   (frontend index.css): Montserrat / Assistant, #3082EC brand, soft-blue
   surfaces, ACC issue-status colours.
   ========================================================================== */

:root{
  --blue:#3082EC;            /* brand: logo, charts, decoration */
  --blue-btn:#1F6FD2;        /* buttons + links: 4.9:1 with white text */
  --blue-btn-h:#185DB4;
  --blue-ink:#1A5DB8;
  --blue-soft:#DFEDF6;
  --surface-soft:#F5FBFF;
  --border:#E0EDF6;
  --border-2:#C9DCEA;
  --text:#202020;
  --text-2:#3A4B59;
  --muted:#55687A;
  --navy:#0E2A4A;

  --late:#D9544B; --dispute:#F1AA47; --review:#6652A6;
  --open:#2F80ED; --done:#5BC19D; --closed:#BBC9DA;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --maxw:1200px;
  --shadow-lg:0 24px 60px rgba(32,64,104,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--text);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:500;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
html[lang="he"] body{font-family:'Assistant',Arial,Helvetica,sans-serif;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--blue-btn)} a:hover{color:var(--blue-btn-h)}
:focus-visible{outline:3px solid #8DB9F2;outline-offset:2px;border-radius:6px}
[hidden]{display:none !important}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
.skip{position:absolute;top:-100px;inset-inline-start:16px;z-index:60;background:#fff;padding:10px 14px;border-radius:var(--r-sm);font-weight:700}
.skip:focus{top:12px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 24px;border-radius:var(--r-md);border:1px solid transparent;
  font:inherit;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn-sm{min-height:44px;padding:10px 18px;font-size:15px}
.btn-primary{background:var(--blue-btn);color:#fff}
.btn-primary:hover{background:var(--blue-btn-h);color:#fff}
.btn-ghost{background:#fff;color:var(--text);border-color:var(--border-2)}
.btn-ghost:hover{background:var(--surface-soft);color:var(--text)}
.btn-quiet{background:transparent;color:var(--text);padding-inline:8px}
.btn-quiet:hover{color:var(--blue-btn)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#E8F1FA;color:var(--navy)}
.btn-outline-light{background:transparent;color:#fff;border-color:#4E6F93}
.btn-outline-light:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--border)}
.header-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:12px}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:24px;width:auto}
.nav-links{display:flex;flex-wrap:wrap;gap:28px}
.nav-links a{color:var(--text);text-decoration:none;font-weight:600;font-size:15px}
.nav-links a:hover{color:var(--blue-btn)}
.header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.lang button{font:inherit;font-size:13px;font-weight:700;border:0;background:#fff;color:var(--muted);padding:9px 12px;min-height:40px;cursor:pointer}
.lang button.is-on{background:var(--blue-soft);color:var(--text)}
@media (max-width:900px){.nav-links{display:none}}

/* ---------- section scaffolding ---------- */
.section{padding-block:96px}
.section-soft{background:var(--surface-soft);border-block:1px solid var(--border)}
.section-head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:40px}
.kicker{margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-btn)}
.h2{margin:0;font-size:clamp(30px,3.6vw,44px);line-height:1.12;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.lead{margin:0;font-size:18px;color:var(--text-2)}
html[lang="he"] .kicker{text-transform:none;letter-spacing:0;font-size:15px}
html[lang="he"] .h2,html[lang="he"] .display{letter-spacing:0}
@media (max-width:640px){.section{padding-block:64px}}

.grid{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* ---------- hero ---------- */
.hero{background:var(--surface-soft);border-bottom:1px solid var(--border);padding-block:72px 96px}
.hero-grid{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:24px}
.badge{
  margin:0;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--border);border-radius:999px;padding-block:5px;padding-inline:6px 14px;
  font-size:13px;font-weight:600;color:var(--muted);
}
.badge b{background:var(--blue-soft);color:var(--blue-ink);border-radius:999px;padding:3px 10px;font-weight:700}
.display{margin:0;font-size:clamp(38px,5vw,60px);line-height:1.08;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.hero-sub{margin:0;font-size:19px;line-height:1.6;color:var(--text-2);max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;padding-top:4px}
.hero-meta{margin:0;font-size:14px;color:var(--muted)}
.hero-visual{flex:1 1 560px;min-width:0;margin:0;position:relative}

/* ---------- product mockups (drawn from the app UI) ---------- */
.mock{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;font-size:13px}
.mock-top{height:52px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding-inline:16px}
.mock-top .mark{height:20px;width:auto}
.mock-project{font-weight:700;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 10px;white-space:nowrap}
.mock-search{flex:1 1 auto;max-width:220px;font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px}
.avatar{margin-inline-start:auto;width:28px;height:28px;flex:0 0 28px;border-radius:999px;background:var(--blue-soft);color:var(--blue-ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mock-body{display:flex}
.mock-side{width:168px;flex:0 0 168px;border-inline-end:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:4px;font-weight:600}
.mock-side span{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);color:var(--text-2)}
.mock-side .on{background:var(--blue-soft);color:var(--blue-ink)}
.mock-main{flex:1 1 auto;min-width:0;background:var(--surface-soft);padding:18px;display:flex;flex-direction:column;gap:14px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.card-pad{padding:16px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-head-bar{padding:12px 16px;border-bottom:1px solid var(--border)}
.card-title{font-size:14px;font-weight:700}
.small{font-size:12px;color:var(--muted)}
.small b{color:var(--text)}
.stack{display:flex;height:27px;border-radius:6px;overflow:hidden;margin-block:12px;gap:2px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;font-weight:600;color:var(--text-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.c-late{background:var(--late)} .c-dispute{background:var(--dispute)} .c-review{background:var(--review)}
.c-open{background:var(--open)} .c-done{background:var(--done)} .c-closed{background:var(--closed)}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid #EEF4F9}
.row:first-of-type{border-top:0}
.row-ico{width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.row-text{flex:1 1 auto;min-width:0}
.row-text b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-text small{display:block;font-size:11px;color:var(--muted)}
.chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.t-open{background:#E3EEFD;color:#1A5DB8} .t-review{background:#ECE8F6;color:#4E3D8F}
.t-late{background:#FBE7E5;color:#A8352D} .t-done{background:#E2F5EE;color:#237A5B}
.t-warn{background:#FDF0DC;color:#8A5A10} .t-closed{background:#EEF2F7;color:#4F6275}

.plugin-card{position:absolute;left:-32px;bottom:-40px;width:252px;background:#fff;border:1px solid #D5E3EE;border-radius:var(--r-md);box-shadow:0 18px 40px rgba(32,64,104,.18);overflow:hidden;font-size:12px;direction:ltr}
html[dir="rtl"] .plugin-card{left:auto;right:-32px}
.plugin-bar{background:#2B3A48;color:#fff;font-weight:700;padding:9px 12px;display:flex;align-items:center;gap:8px}
.plugin-bar i{width:8px;height:8px;border-radius:2px;background:var(--blue)}
.plugin-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.kv{display:flex;justify-content:space-between;gap:8px}
.kv span:first-child{color:var(--muted)} .kv span:last-child{font-weight:700}
.progress{height:6px;background:var(--border);border-radius:999px;overflow:hidden}
.progress span{display:block;width:62%;height:6px;background:var(--blue)}
.fake-btn{background:var(--blue-btn);color:#fff;font-weight:700;text-align:center;border-radius:var(--r-sm);padding:8px}
.caption{margin-top:56px;font-size:12px;color:var(--muted);text-align:end}
@media (max-width:760px){
  .mock-side,.plugin-card,.mock-search{display:none}
  .caption{margin-top:12px}
}

/* ---------- works-with strip ---------- */
.works{padding-block:26px;border-bottom:1px solid var(--border)}
.works-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px}
.works-label{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-inline-end:8px}
html[lang="he"] .works-label{text-transform:none;letter-spacing:0;font-size:15px}
.pill{font-size:14px;font-weight:600;border:1px solid var(--border);border-radius:999px;padding:7px 14px;direction:ltr}

/* ---------- tiles ---------- */
.tile{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:12px}
.tile h3{margin:0;font-size:20px;font-weight:700;line-height:1.25}
.tile p{margin:0;font-size:15px;color:var(--text-2)}
.tile .num{font-size:13px;font-weight:800;color:var(--blue-btn)}
.tile-alert{background:#FBE7E5;border-color:#F3CFCB}
.tile-alert .num{color:#A8352D}
.tile-alert p{color:#5A2620}
.step-n{width:40px;height:40px;border-radius:var(--r-md);background:var(--blue-soft);color:var(--blue-ink);font-weight:800;display:flex;align-items:center;justify-content:center}
.step-n.done{background:#E2F5EE;color:#237A5B}
.ico{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center}
.ico-blue{background:var(--blue-soft);color:var(--blue-ink)}
.ico-violet{background:#ECE8F6;color:#4E3D8F}
.ico-green{background:#E2F5EE;color:#237A5B}
.ico-amber{background:#FDF0DC;color:#8A5A10}
.ico-red{background:#FBE7E5;color:#A8352D}
.tile .ribbon{font-size:12px;font-weight:600;color:var(--muted);direction:ltr;text-align:start}
html[lang="he"] .tile .ribbon{text-align:end}

/* ---------- free add-in ---------- */
.addon{margin-top:16px;background:var(--blue-soft);border-radius:var(--r-lg);padding:32px;display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px}
.addon-ico{width:56px;height:56px;flex:0 0 56px;border-radius:14px;background:#fff;color:var(--blue-ink);display:flex;align-items:center;justify-content:center}
.addon-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:8px}
.addon-title{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.addon-title strong{font-size:22px;font-weight:800}
.tag-free{font-size:12px;font-weight:800;background:#fff;color:#237A5B;border-radius:999px;padding:4px 12px;text-transform:uppercase;letter-spacing:.06em}
.addon p{margin:0;font-size:16px;color:#2D3F4F}

/* ---------- platform ---------- */
.split{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.feat-list{flex:1 1 340px;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.feat-list li{display:flex;gap:14px}
.feat-ico{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:#fff;border:1px solid var(--border);color:var(--blue-ink);display:flex;align-items:center;justify-content:center}
.feat-list h3{margin:0;font-size:17px;font-weight:700}
.feat-list p{margin:0;font-size:15px;color:var(--text-2)}
.platform-visual{flex:1 1 560px;min-width:0;margin:0;display:flex;flex-direction:column;gap:14px}
.platform-visual .caption{margin-top:0}
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600}
.tabs span{padding:7px 12px;color:var(--text-2);border-radius:var(--r-sm)}
.tabs .on{background:var(--blue-soft);color:var(--blue-ink)}
.scroll-x{overflow-x:auto}
.gantt{min-width:560px;padding:16px 18px}
.g-row{display:grid;grid-template-columns:200px repeat(5,minmax(0,1fr));align-items:center;height:44px;border-top:1px solid #EEF4F9;font-size:12px;font-weight:600}
.g-head{height:auto;padding-bottom:10px;border-top:0;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--muted)}
.bar{height:18px;border-radius:6px}
.ftable{min-width:460px}
.f-row{display:grid;grid-template-columns:minmax(0,2.4fr) repeat(3,minmax(0,1fr));gap:8px;padding:10px 16px;font-size:12px;font-weight:600;align-items:center;border-top:1px solid #EEF4F9}
.f-head{font-size:11px;font-weight:700;color:var(--muted);padding-block:9px;border-top:0}
.f-row .chip{justify-self:start}
.ltr{direction:ltr;unicode-bidi:isolate}
.nw{white-space:nowrap}

/* ---------- before / after ---------- */
.compare-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:18px}
.compare-card h3{margin:0;font-size:20px;font-weight:700;color:var(--text-2)}
.compare-card.good{background:var(--surface-soft);border-color:#BFD7EE}
.compare-card.good h3{color:var(--blue-ink)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:16px;color:var(--text-2)}
.compare-card.good .checks{color:var(--text)}
.checks li{display:flex;gap:12px}
.checks svg{flex:0 0 20px;margin-top:2px}
.it-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;border-top:1px solid var(--border);padding-top:32px;margin-top:40px}
.it-row p{margin:0;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.it-row svg{flex:0 0 22px}
.it-row b{color:var(--text)}

/* ---------- roadmap ---------- */
.soon{background:#fff;border:1px dashed #BFD7EE;border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:10px}
.soon h3{margin:0;font-size:19px;font-weight:700}
.soon p{margin:0;font-size:15px;color:var(--text-2)}
.tag-dev{align-self:flex-start;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:#FDF0DC;color:#8A5A10;border-radius:999px;padding:4px 10px}
html[lang="he"] .tag-dev,html[lang="he"] .tag-free{text-transform:none;letter-spacing:0;font-size:13px}

/* ---------- CTA ---------- */
.cta{background:var(--navy);border-radius:var(--r-xl);padding:clamp(36px,6vw,72px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.cta-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:14px}
.cta .h2{color:#fff}
.cta p{margin:0;font-size:18px;color:#D3E2F0;max-width:560px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border);padding-block:32px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted)}
.foot-row img{height:20px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:20px}
.foot-links a,.linklike{color:var(--text-2);text-decoration:none;font-weight:600}
.foot-links a:hover,.linklike:hover{color:var(--blue-btn)}
button.linklike{background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer}

/* ---------- cookie consent ---------- */
.consent{
  position:fixed;inset-inline:16px;bottom:16px;z-index:50;max-width:760px;margin-inline:auto;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 18px 48px rgba(14,42,74,.18);
  padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
}
.consent p{margin:0;flex:1 1 320px;font-size:14px;color:var(--text-2)}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}