/* ─────────────────────────────────────────────────
   SRWorkspace Solutions — Project pages
   Dark theme · Heebo · RTL
───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#080C15;
  --surface:rgba(255,255,255,.04);
  --surface-h:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.07);
  --border-h:rgba(96,165,250,.3);
  --text:#F1F5F9;
  --muted:#8391A4;
  --accent:#3B82F6;
  --accent-lt:#60A5FA;
  --indigo:#818CF8;
}
/* Light theme — synced with the main site via localStorage */
.light{
  --bg:#F8FAFC;
  --surface:rgba(255,255,255,.9);
  --surface-h:rgba(255,255,255,1);
  --border:rgba(15,23,42,.09);
  --border-h:rgba(37,99,235,.38);
  --text:#0F172A;
  /* matches the homepage — #64748B was too faint on the light background */
  --muted:#475569;
  --accent:#2563EB;
  --accent-lt:#1D4ED8;
  --indigo:#4F46E5;
}
.light header{background:rgba(248,250,252,.88);}
.light nav a:hover{background:rgba(15,23,42,.05);}
.light .app-badges img{opacity:.85;}
.light .btn-ghost:hover{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.22);}
/* Keyboard users can jump past the header straight to the content */
.skip-link{
  position:absolute;right:1rem;top:-100px;z-index:9999;
  padding:.6rem 1.1rem;border-radius:0 0 8px 8px;
  background:var(--accent);color:#fff;font-weight:700;font-size:.9rem;
  transition:top .18s ease;
}
.skip-link:focus{top:0;}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%;
  /* match the homepage base size — project pages were rendering ~2% smaller */
  font-size:102%;
  /* fixed 60px header must not cover the heading of an anchored section */
  scroll-padding-top:88px;}
body{
  font-family:'Heebo',sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1220px;margin:0 auto;padding:0 1.5rem;}

/* ══ Header ═══════════════════════════════════ */
header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  border-bottom:1px solid var(--border);
  background:rgba(8,12,21,.9);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
/* Header controls mirror the homepage exactly: 60px bar, 46px logo,
   38px round theme button, 40px pill CTA. */
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
  max-width:1400px;padding:0 2.5rem;
}
.brand img{height:46px;object-fit:contain;}
nav{display:flex;align-items:center;gap:.35rem;}
nav a{
  font-size:.92rem;font-weight:600;color:var(--muted);
  padding:.4rem .72rem;border-radius:999px;
  transition:color .2s,background .2s;
}
nav a:hover{color:var(--text);background:rgba(255,255,255,.05);}
.nav-back{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.92rem;font-weight:600;color:var(--muted);
  padding:.4rem .85rem;border-radius:999px;
  border:1px solid var(--border);
  transition:color .2s,border-color .2s,background .2s;
  margin-left:.4rem;
}
.nav-back:hover{color:var(--text);border-color:var(--border-h);background:rgba(255,255,255,.04);}
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--muted);cursor:pointer;
  transition:color .2s,transform .2s;
  margin-left:.5rem;flex-shrink:0;
}
.theme-btn:hover{color:var(--text);transform:translateY(-1px);}
.nav-cta{
  display:inline-flex!important;align-items:center;justify-content:center;
  height:40px;padding:0 1.2rem!important;
  margin-right:.5rem!important;
  background:#2563EB!important;color:#fff!important;
  font-weight:700!important;font-size:.9rem!important;
  border-radius:999px!important;
  transition:background .2s,box-shadow .2s;
}
.nav-cta:hover{
  background:var(--accent)!important;
  box-shadow:0 0 28px rgba(59,130,246,.35);
}

/* ══ Hero ══════════════════════════════════════ */
/* Background = the homepage hero's own light, without the video: a
   slow-breathing blue glow behind the title that fades out well before the
   hero's edge, so the screenshot below sits on one continuous background. */
.proj-hero{
  min-height:auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:128px 2rem 84px;
  position:relative;overflow:hidden;
}
.hero-glow{
  position:absolute;z-index:0;
  width:1100px;height:640px;
  top:-140px;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 45%,
    rgba(59,130,246,.22) 0%,
    rgba(99,102,241,.08) 40%,
    transparent 66%);
  filter:blur(72px);
  pointer-events:none;
  animation:glow-breathe 9s ease-in-out infinite alternate;
}
.hero-glow::before{
  content:'';position:absolute;
  width:520px;height:420px;
  top:-55%;left:-18%;
  background:radial-gradient(ellipse,rgba(30,58,138,.16) 0%,transparent 70%);
  filter:blur(50px);
}
.light .hero-glow{
  background:radial-gradient(ellipse at 50% 45%,
    rgba(37,99,235,.14) 0%,
    rgba(79,70,229,.06) 40%,
    transparent 66%);
}
.light .hero-glow::before{background:radial-gradient(ellipse,rgba(37,99,235,.08) 0%,transparent 70%);}
@keyframes glow-breathe{
  0%  {opacity:.65;transform:translateX(-50%) scale(1);}
  100%{opacity:.9; transform:translateX(-50%) scale(1.07);}
}
/* Faint dot grid behind the title — barely there. It stops at 75% of the hero
   height and fades radially, so nothing changes behind the screenshot. */
.hero-grid{
  position:absolute;left:0;right:0;top:0;height:75%;z-index:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,black 0%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,black 0%,transparent 100%);
}
.light .hero-grid{background-image:radial-gradient(circle,rgba(15,23,42,.05) 1px,transparent 1px);}
@media (prefers-reduced-motion:reduce){.hero-glow{animation:none;}}
/* Two-tone product name — mirrors the homepage headline */
.proj-hero h1 .h1-accent{color:var(--accent-lt);}
/* optional break before the accent part of a long Hebrew title — phones only */
.h1-br{display:none;}
.proj-hero-content{position:relative;z-index:1;max-width:820px;}
.proj-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.28rem .9rem;
  border:1px solid rgba(59,130,246,.28);border-radius:999px;
  font-size:.74rem;font-weight:600;color:var(--accent-lt);
  background:rgba(59,130,246,.07);
  margin-bottom:1.5rem;letter-spacing:.04em;
  opacity:0;animation:fadeUp .5s .1s ease forwards;
}
.proj-eyebrow::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--accent-lt);box-shadow:0 0 6px var(--accent-lt);
  flex-shrink:0;
}
.proj-hero h1{
  font-size:clamp(2.4rem,5vw,3.6rem);
  font-weight:900;line-height:1.06;letter-spacing:-.04em;
  margin-bottom:1.2rem;
  opacity:0;animation:fadeUp .5s .18s ease forwards;
}
.proj-hero .lead{
  font-size:clamp(1.1rem,2vw,1.3rem);
  color:var(--muted);line-height:1.9;
  margin:0 auto 2rem;max-width:660px;
  opacity:0;animation:fadeUp .5s .3s ease forwards;
}
.proj-hero-btns{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:fadeUp .5s .42s ease forwards;
}

/* ══ Screenshot ════════════════════════════════ */
/* Lift the screenshot so it overlaps the hero instead of sitting in its own
   walled-off band — removes the dead gap and the redundant divider line. */
.proj-screenshot{
  padding:0 0 3.5rem;
  margin-top:-56px;
  position:relative;z-index:2;
  border-top:none;
}
.proj-screenshot .wrap{position:relative;}
.shot-frame{
  position:relative;
  max-width:900px;margin:0 auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03);
}
/* The frame hugs the screenshot — the whole picture, never cropped */
.shot-frame img{
  width:100%;height:auto;display:block;
  border:0;border-radius:0;box-shadow:none;
}
.light .shot-frame{
  border-color:rgba(15,23,42,.1);
  box-shadow:0 30px 80px rgba(15,23,42,.18),0 0 0 1px rgba(15,23,42,.04);
}

/* ══ Sections ══════════════════════════════════ */
.proj-section{
  padding:5rem 0;
  border-top:1px solid var(--border);
}
/* Same column as the homepage sections (.wrap 1100px) and the same text scale */
.proj-section .wrap,.proj-cta .wrap{max-width:1100px;}
.proj-section h2{
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  font-weight:900;letter-spacing:-.03em;
  color:var(--text);margin-bottom:1.2rem;line-height:1.15;
}
.proj-section p{
  font-size:1.12rem;color:var(--muted);line-height:1.95;margin-bottom:1.1rem;
  max-width:920px;
}
.proj-section p:last-child{margin-bottom:0;}
.proj-section ul{
  list-style:none;padding:0;
  display:flex;flex-direction:column;gap:.55rem;margin-top:1rem;
}
.proj-section ul li{
  display:flex;align-items:flex-start;gap:.75rem;
  font-size:1.1rem;color:var(--muted);line-height:1.8;
}
.proj-section ul li::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--accent-lt);margin-top:.6rem;flex-shrink:0;
}

/* ══ Feature Grid → rows ═══════════════════════ */
.feat-grid{
  display:flex;flex-direction:column;
  border-top:1px solid var(--border);
  margin-top:2rem;
}
.feat-card{
  display:grid;grid-template-columns:280px 1fr;
  gap:0 2rem;align-items:start;
  padding:1.5rem 0;
  border-bottom:1px solid var(--border);
  transition:background .2s;
  position:relative;
}
.feat-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 100% at var(--mx,50%) 50%,rgba(59,130,246,.04),transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.feat-card:hover::before{opacity:1;}
.feat-card h3{
  font-size:1.2rem;font-weight:800;color:var(--text);
  letter-spacing:-.02em;line-height:1.3;
  transition:color .2s;
}
.feat-card:hover h3{color:var(--accent-lt);}
.feat-card p{font-size:1.05rem;color:var(--muted);line-height:1.9;margin:0;}

/* ══ Stats Row → open ══════════════════════════ */
.stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2rem 2.5rem;
  border-top:1px solid var(--border);
  padding-top:2rem;
  margin-top:2rem;
}
/* Four boxes (Social-Analytics) sit as a 2×2 grid so the word-stats don't wrap */
.stats-row.stats-4{grid-template-columns:repeat(2,1fr);}
.stat-box{padding:0;min-width:0;}
.stat-box .n{
  font-size:2.4rem;font-weight:900;line-height:1.15;
  color:var(--accent-lt);letter-spacing:-.03em;
  overflow-wrap:break-word;
  unicode-bidi:plaintext;text-align:right;
}
.stat-box .l{font-size:1.02rem;color:var(--muted);margin-top:.4rem;line-height:1.6;}

/* ══ App Badges ════════════════════════════════ */
.app-badges{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.5rem;}
/* Official store badges are opaque artwork already designed for dark
   backgrounds — never recolour them with filters (it flattens them to slabs). */
.app-badges img{
  height:44px;opacity:.95;
  transition:opacity .2s,transform .2s;
}
.app-badges img:hover{opacity:1;transform:translateY(-2px);}

/* ══ CTA ════════════════════════════════════════ */
/* Same block as the homepage #cta: 6rem top/bottom, no extra inner padding */
.proj-cta{padding:6rem 0;border-top:1px solid var(--border);}
.proj-cta-box{
  padding:0;
  text-align:center;position:relative;
}
/* No overflow:hidden here — it sliced the glow flat and produced a visible
   rectangle. The gradient is centred and fades to transparent on its own. */
.proj-cta-box::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:760px;height:440px;max-width:100%;
  background:radial-gradient(ellipse at center,rgba(59,130,246,.10),transparent 70%);
  pointer-events:none;z-index:0;
}
.proj-cta-box>*{position:relative;z-index:1;}
/* Same size/weight as the homepage section titles (.sec-h2) */
.proj-cta-box h2{
  font-size:clamp(1.9rem,3.8vw,2.9rem);
  font-weight:900;letter-spacing:-.03em;line-height:1.15;
  margin-bottom:.8rem;position:relative;
}
.proj-cta-box p{
  color:var(--muted);font-size:1.08rem;
  max-width:520px;margin:0 auto 2.5rem;
  line-height:1.95;position:relative;
}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:relative;}

/* ══ Buttons ═══════════════════════════════════ */
/* Same buttons as the homepage (.btn / .btn-primary / .btn-ghost): pill, 52px, 1rem */
.btn-fill,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:52px;padding:0 1.75rem;border-radius:999px;
  font-weight:700;font-size:1rem;
  transition:background .2s,box-shadow .2s,border-color .2s;
}
.btn-fill{background:#2563EB;color:#fff;}
.btn-fill:hover{background:var(--accent);box-shadow:0 0 28px rgba(59,130,246,.35);}
.light .btn-fill:hover{background:#1D4ED8;}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--border-h);background:var(--surface);}

/* ══ Misc ══════════════════════════════════════ */
/* Same eyebrow as the homepage: short accent dash + label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-lt);margin-bottom:.95rem;
}
.eyebrow::before{content:'';display:block;width:24px;height:2px;background:var(--accent-lt);border-radius:2px;}

/* ══ Footer ════════════════════════════════════ */
/* Same footer as the homepage: logo + copyright on one line, tagline under it */
footer{border-top:1px solid var(--border);padding:3rem 0;}
.footer-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;}
.foot-logo{display:flex;align-items:center;gap:.9rem;}
.foot-logo img{height:34px;opacity:.75;}
.footer-copy{color:var(--muted);font-size:1rem;}
.footer-tag{color:var(--muted);font-size:.92rem;opacity:.85;}

/* ══ Reveal animation ══════════════════════════ */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.in{opacity:1;transform:translateY(0);}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* ══ Responsive — ≤860 tablet · ≤640 phone · ≤400 small ══ */
@media(max-width:860px){
  .header-inner{padding:0 1.25rem;}
  .feat-card{grid-template-columns:1fr;gap:.4rem;padding:1.4rem 0;}
  .stats-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.75rem;}
  .proj-hero{min-height:auto;padding:120px 1.5rem 80px;}
}

@media(max-width:640px){
  html{scroll-padding-top:84px;}
  /* Header: 58px, budgeted for a 375px screen */
  .header-inner{height:58px;padding:0 1rem;}
  .brand img{height:30px;}
  nav{gap:.3rem;}
  .theme-btn{width:36px;height:36px;margin-left:.25rem;}
  /* back button = twin of the theme button: 36px circle, same fill and border, arrow only */
  .nav-back{width:36px;height:36px;padding:0;margin-left:.25rem;justify-content:center;flex-shrink:0;background:var(--surface);}
  .nav-back-txt{display:none;}
  .nav-back svg{width:16px;height:16px;}
  .nav-cta{height:36px;padding:0 .85rem!important;font-size:.8rem!important;margin-right:.2rem!important;}

  /* Hero */
  .proj-hero{padding:92px 1.25rem 56px;}
  .proj-hero h1{font-size:clamp(2rem,9.5vw,2.7rem);}
  .h1-br{display:inline;}
  .proj-hero .lead{font-size:1rem;line-height:1.7;margin-bottom:1.6rem;}
  .proj-hero-btns{flex-direction:column;align-items:stretch;width:100%;padding:0 .75rem;gap:.7rem;}
  .btn-fill,.btn-ghost{justify-content:center;min-height:48px;}
  .proj-screenshot{margin-top:-28px;padding-bottom:2.5rem;}
  .shot-frame{border-radius:12px;}

  /* Sections: one beat */
  .proj-section{padding:3.25rem 0;}
  .proj-section h2{font-size:clamp(1.55rem,7vw,2rem);}
  .proj-section p{font-size:1rem;}
  .proj-section ul li{font-size:.97rem;}
  .feat-card h3{font-size:1.05rem;}
  .feat-card p{font-size:.95rem;}
  .stats-row{grid-template-columns:1fr 1fr;gap:1.5rem 1.25rem;}
  .stat-box .n{font-size:1.7rem;}
  .app-badges{gap:.9rem;}
  .app-badges img{height:40px;}

  /* CTA + footer */
  .proj-cta{padding:4rem 0 4.5rem;}
  .proj-cta-box h2{font-size:clamp(1.6rem,7vw,2.1rem);}
  .proj-cta-box p{font-size:1rem;}
  .cta-btns{flex-direction:column;align-items:stretch;padding:0 .5rem;gap:.7rem;}
  .footer-inner{gap:.75rem;}
}

@media(max-width:400px){
  .stats-row,.stats-row.stats-4{grid-template-columns:1fr;gap:1.25rem;}
}