/* ─── Hero ─── */
.hero{ padding:72px 0 80px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:56px; align-items:center; }
@media(min-width:980px){
  .hero-grid{ grid-template-columns: minmax(0,460px) minmax(0,1fr); gap:64px; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:var(--clay-bg); color:var(--clay-2);
  font-size:12.5px; font-weight:500;
  border:1px solid color-mix(in oklab, var(--clay) 18%, transparent);
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--clay);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--clay) 18%, transparent);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--clay) 26%, transparent); }
  50%{     box-shadow:0 0 0 6px color-mix(in oklab, var(--clay) 0%, transparent); }
}

h1.hero-h{
  font-family:"Noto Serif Hebrew",serif; font-weight:500;
  font-size:62px; line-height:1.02; letter-spacing:-0.022em;
  margin:18px 0 20px; color:var(--ink); text-wrap:balance;
}
h1.hero-h em{
  font-style:normal; color:var(--ink); font-weight:500;
  background-image: linear-gradient(180deg, transparent 62%, color-mix(in oklab, var(--clay) 30%, transparent) 62%, color-mix(in oklab, var(--clay) 30%, transparent) 92%, transparent 92%);
  padding:0 4px;
}
.hero-sub{ font-size:18px; line-height:1.6; color:var(--ink-2); max-width:46ch; margin:0 0 28px; text-wrap:pretty; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-meta{ display:flex; align-items:center; gap:18px; margin-top:28px; color:var(--ink-3); font-size:13px; flex-wrap:wrap; }
.hero-meta .sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); opacity:.5; }

/* ─── Stage ─── */
.stage{
  position:relative; width:100%;
  aspect-ratio: 5/4;
  min-height:520px;
  border-radius:24px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--clay) 8%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border:1px solid var(--line-2);
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 30px 60px -30px rgba(60,40,20,.18),
    0 80px 120px -60px rgba(60,40,20,.12);
}
.stage::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--ink) 10%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(80% 60% at 50% 50%, #000 30%, transparent 80%);
  opacity:.6;
}

/* noise bubbles */
.bubble{
  position:absolute;
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:10px 12px;
  font-size:12.5px; color:var(--ink-2);
  box-shadow: 0 6px 18px -8px rgba(40,30,15,.14);
  display:flex; align-items:center; gap:9px;
  max-width:230px; min-width:160px;
  transform-origin:center; will-change:transform,opacity;
  line-height:1.35; z-index:2;
}
.bubble .ic{
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  display:grid; place-items:center; font-size:11px; color:#fff; font-weight:700;
}
.bubble.b-wa  .ic{ background:#25D366 }
.bubble.b-call .ic{ background:var(--clay) }
.bubble.b-sms  .ic{ background:#3478F6 }
.bubble.b-cal  .ic{ background:#7C5CFF }
.bubble.b-tg   .ic{ background:#229ED9 }
.bubble.b-voice .ic{ background:#0E0E0E }
.bubble small{ color:var(--ink-3); font-size:10.5px; display:block; }
.bubble .body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.bubble .body b{ font-weight:600; color:var(--ink); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }

/* dashboard */
.dash{
  position:absolute; top:50%; left:50%;
  width: min(74%, 520px);
  background:#fff; border:1px solid var(--line);
  border-radius:20px; overflow:hidden;
  z-index:3;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 30px 70px -20px rgba(40,30,15,.22),
    0 60px 120px -60px rgba(40,30,15,.18);
  opacity:0;
  transform: translate(-50%, -42%) scale(.96);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.7,.2,1);
}
.stage.lit .dash{ opacity:1; transform: translate(-50%, -50%) scale(1); }

.dash-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line-2);
  background:var(--bg-2);
}
.dash-hd .ttl{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); }
.dash-hd .ttl b{ color:var(--ink); font-weight:600; font-size:14px; }
.dash-hd .stat{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); }
.dash-hd .stat .pip{ width:6px; height:6px; border-radius:50%; background:var(--sage); }

.dash-list{ display:flex; flex-direction:column; }
.item{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line-2);
  transition: background .2s ease;
}
.item:last-child{ border-bottom:0; }
.item:hover{ background:var(--bg-2); }
.item .pri{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; font-size:18px; flex-shrink:0;
  background:var(--bg-3);
}
.item.hot  .pri{ background:var(--hot-bg); }
.item.warn .pri{ background:var(--clay-bg); }
.item.cool .pri{ background:var(--sage-bg); }
.item .ttl{ font-weight:600; font-size:14px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.item .meta{ font-size:12.5px; color:var(--ink-3); margin-top:2px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.item .meta .ch{ display:inline-flex; align-items:center; gap:5px; color:var(--ink-2); }
.item .meta .ch .d{ width:6px; height:6px; border-radius:50%; }
.item .preview{
  margin-top:6px; font-size:13px; color:var(--ink-2);
  border-right:2px solid var(--line); padding-right:10px; line-height:1.45;
}
.item .act{
  font-size:12.5px; font-weight:500;
  padding:8px 12px; border-radius:8px;
  background:var(--ink); color:var(--bg);
  border:0; cursor:pointer; white-space:nowrap;
  transition: background .2s ease;
}
.item .act:hover{ background:var(--clay-2); }
.item.cool .act{ background:transparent; color:var(--ink-2); border:1px solid var(--line); }
.item.cool .act:hover{ background:var(--bg-2); color:var(--ink); }

/* dash list reveal */
.dash .item{ opacity:0; transform:translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.stage.lit .dash .item{ opacity:1; transform:translateY(0); }
.stage.lit .dash .item:nth-child(1){ transition-delay:.20s }
.stage.lit .dash .item:nth-child(2){ transition-delay:.34s }
.stage.lit .dash .item:nth-child(3){ transition-delay:.46s }
.stage.lit .dash .item:nth-child(4){ transition-delay:.58s }

/* connecting lines */
.stage svg.lines{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:0; transition: opacity .6s ease;
}
.stage.lit svg.lines{ opacity:.45; }

/* replay */
.replay{
  position:absolute; bottom:18px; left:18px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--line); border-radius:999px;
  padding:7px 12px; font-size:12px; color:var(--ink-2);
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition: background .2s ease, color .2s ease;
  z-index:5;
}
.replay:hover{ background:#fff; color:var(--ink); }

/* prevent grid blowout on narrow viewports */
.hero-grid > *{ min-width:0; }

/* hero responsive */
@media(max-width:720px){
  .hero{ padding:48px 0 56px; }
  .hero-grid{ gap:36px; }
  h1.hero-h{ font-size:38px; margin:14px 0 16px; }
  .hero-sub{ font-size:16.5px; margin:0 0 22px; }
  .hero-ctas .btn-lg{ flex:1 1 auto; justify-content:center; }
  .hero-meta{ gap:10px; font-size:12px; margin-top:20px; }
  .stage{ min-height:380px; aspect-ratio:auto; border-radius:18px; }
  .bubble{ max-width:160px; min-width:120px; font-size:11px; padding:7px 9px; gap:7px; border-radius:11px; }
  .bubble .ic{ width:18px; height:18px; font-size:10px; }
  .bubble .body b{ font-size:11.5px; max-width:120px; }
  .bubble small{ font-size:10px; }
  .dash{ width:90%; border-radius:16px; }
  .dash-hd{ padding:10px 14px; }
  .dash-hd .ttl b{ font-size:13px; }
  .item{ padding:10px 14px; gap:10px; }
  .item .pri{ width:32px; height:32px; font-size:14px; border-radius:9px; }
  .item .ttl{ font-size:13px; }
  .item .meta{ font-size:11.5px; }
  .item .preview{ font-size:12px; margin-top:4px; }
  .item .act{ padding:7px 10px; font-size:11.5px; }
}