/* ════════════════════════════════════════════════════════════════════
   Home v2 (2026-10-05): latest-studies ticker, social-proof toasts,
   "how it works" journey (.ej-*), features bento (.eb-*), and the
   floating Taiseer seal aligned with the article pages
   (desktop top-left, phones bottom-right). Hand-written; loaded after
   app.min.css. New prefixes only: lst-, spt-, ej-, eb-.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Floating SBC seal: same corners as the article pages (api/blog.js) ─── */
.sbc-float{left:18px;top:94px;bottom:auto;right:auto;}
.sbc-float iframe{left:0;top:0;bottom:auto;right:auto;}
.sbc-float-pulse{left:2px;top:2px;bottom:auto;right:auto;}
.sbc-float-ph{left:2px;top:6px;bottom:auto;right:auto;}
@media (max-width:767px){
  .sbc-float{left:auto;top:auto;right:12px;bottom:calc(96px + env(safe-area-inset-bottom,0px));}
  .sbc-float iframe{left:auto;top:auto;right:0;bottom:0;}
  .sbc-float-pulse{left:auto;top:auto;right:2px;bottom:2px;}
  .sbc-float-ph{left:auto;top:auto;right:2px;bottom:6px;}
}

/* ─── Latest studies ticker (top of the hero, inside its top padding: no layout shift) ─── */
.hero{padding-top:140px;}
.lst{
  position:absolute; z-index:3; top:82px;
  /* clears the floating seal on the left (18px + 120px) and lines up with the hero content on the right */
  left:max(156px, calc((100% - 1200px) / 2));
  right:max(48px, calc((100% - 1200px) / 2));
  opacity:0; transform:translateY(-6px);
  transition:opacity .5s ease, transform .5s ease;
}
.lst[hidden]{display:none;}
.lst.is-on{opacity:1; transform:none;}
.lst-box{
  display:flex; align-items:center; gap:12px; height:42px;
  padding-inline:14px 6px; border-radius:999px; overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(219,234,254,.58));
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(37,99,235,.16);
  box-shadow:0 10px 30px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.lst-label{flex:0 0 auto; display:flex; align-items:center; gap:8px; color:#1D4ED8; font-weight:800; font-size:.8rem; white-space:nowrap;}
.lst-live{position:relative; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(16,185,129,.55); animation:lstPulse 1.8s ease-out infinite;}
.lst-sep{flex:0 0 auto; width:1px; height:20px; background:rgba(37,99,235,.18);}
.lst-viewport{
  flex:1 1 auto; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lst-track{display:flex; width:max-content; animation:lstScroll var(--lst-dur, 90s) linear infinite; will-change:transform;}
.lst:hover .lst-track, .lst:focus-within .lst-track, .lst.is-paused .lst-track{animation-play-state:paused;}
.lst-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; margin-inline-end:10px;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.74); border:1px solid rgba(37,99,235,.12);
  color:var(--text); font-size:.8rem; font-weight:600; line-height:1.4;
}
.lst-chip svg{flex:0 0 auto; color:var(--gold);}
.lst-city{color:#1E40AF; font-weight:700;}
.lst-time{color:var(--text3); font-size:.72rem; font-weight:500;}
.lst-dot{color:rgba(15,23,42,.3);}
@keyframes lstScroll{from{transform:translateX(0);}to{transform:translateX(50%);}}
@keyframes lstPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55);}100%{box-shadow:0 0 0 9px rgba(16,185,129,0);}}

@media (max-width:960px){
  .lst{left:max(156px, 20px); right:20px;}
}
@media (max-width:767px){
  .hero{padding-top:118px;}
  .lst{top:76px; left:12px; right:12px;}
  .lst-box{height:34px; gap:8px; padding-inline:10px 4px;}
  .lst-label-text{display:none;}
  .lst-sep{display:none;}
  .lst-chip{font-size:.7rem; padding:3px 10px; gap:6px; margin-inline-end:8px;}
  .lst-chip svg{width:12px; height:12px;}
  .lst-time{font-size:.64rem;}
}
@media (prefers-reduced-motion:reduce){
  .lst, .lst.is-on{transition:none; transform:none;}
  .lst-live{animation:none;}
  .lst-track{animation:none;}
  .lst-viewport{overflow-x:auto; scrollbar-width:none; -webkit-mask-image:none; mask-image:none;}
  .lst-viewport::-webkit-scrollbar{display:none;}
  .lst-chip.is-dup{display:none;}
}

/* ─── Social-proof toasts (bottom-left; the seal lives top-left / bottom-right) ─── */
.spt{
  position:fixed; z-index:850; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:340px; max-width:calc(100vw - 32px);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.spt.is-on{opacity:1; transform:none; pointer-events:auto;}
.spt-card{
  display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(37,99,235,.14); border-radius:16px;
  box-shadow:0 18px 40px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06);
}
.spt-icon{flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, var(--gold2), #1D4ED8); box-shadow:0 6px 14px rgba(37,99,235,.28);}
.spt-body{flex:1 1 auto; min-width:0;}
.spt-kicker{display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:800; color:var(--gold); line-height:1.5;}
.spt-kicker::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--green);}
.spt-title{font-size:.86rem; font-weight:800; color:var(--text); line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spt-meta{font-size:.72rem; color:var(--text3); line-height:1.5;}
.spt-close{flex:0 0 auto; align-self:flex-start; width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:#94A3B8; font:700 1.1rem/1 'Cairo',sans-serif; cursor:pointer;}
.spt-close:hover, .spt-close:focus-visible{background:var(--ink3); color:var(--text);}
@media (max-width:767px){
  /* small and low: the seal sits at bottom 96px on the right, the toast stays under 70px tall on the left */
  .spt{left:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); width:340px; max-width:calc(100vw - 20px);}
  .spt-card{gap:10px; padding:7px 6px 7px 9px; border-radius:14px;}
  .spt-icon{width:34px; height:34px; border-radius:10px;}
  .spt-icon svg{width:18px; height:18px;}
  .spt-kicker{font-size:.64rem;}
  .spt-title{font-size:.76rem; line-height:1.5;}
  .spt-meta{font-size:.64rem;}
  .spt-close{width:26px; height:26px;}
}
@media (prefers-reduced-motion:reduce){
  .spt, .spt.is-on{transform:none; transition:opacity .2s linear;}
}
@media print{.spt, .lst{display:none !important;}}

/* ─── How it works: numbered journey ─── */
.ej{max-width:1200px; margin:0 auto 72px; position:relative;}
.ej-head{max-width:720px; margin:0 auto 56px; text-align:center;}
.ej-head .section-eyebrow{justify-content:center;}
.ej-head .section-sub{max-width:560px; margin:0 auto;}
.ej-rail{position:relative;}
.ej-track{list-style:none; margin:0; padding:0; position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:22px;}
.ej-track::before{
  content:''; position:absolute; top:27px; left:12.5%; right:12.5%; height:2px; border-radius:2px;
  background:linear-gradient(to left, #2563EB, #7C3AED, #0EA5E9, #059669); opacity:.3;
}
.ej-flow{position:absolute; top:26px; left:12.5%; right:12.5%; height:4px; overflow:hidden; border-radius:4px; pointer-events:none;}
.ej-flow::after{
  content:''; position:absolute; top:0; right:0; width:18%; height:100%; border-radius:4px;
  background:linear-gradient(to left, transparent, rgba(37,99,235,.85), transparent);
  animation:ejFlow 4.5s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ejFlow{from{transform:translateX(0);}to{transform:translateX(-560%);}}
.ej-step{position:relative; --c:#2563EB; --c-deep:#1D4ED8; --c-soft:#DBEAFE; --c-line:rgba(37,99,235,.22);}
.ej-step:nth-child(2){--c:#7C3AED; --c-deep:#6D28D9; --c-soft:#EDE9FE; --c-line:rgba(124,58,237,.22);}
.ej-step:nth-child(3){--c:#0284C7; --c-deep:#0369A1; --c-soft:#E0F2FE; --c-line:rgba(2,132,199,.22);}
.ej-step:nth-child(4){--c:#059669; --c-deep:#047857; --c-soft:#D1FAE5; --c-line:rgba(5,150,105,.22);}
.ej-node{
  position:relative; z-index:1; width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--c);
  box-shadow:0 0 0 7px #F5F8FF, 0 10px 24px var(--c-line);
  color:var(--c-deep); font-weight:900; font-size:1rem; font-variant-numeric:tabular-nums;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.ej-card{
  position:relative; height:calc(100% - 74px); overflow:hidden;
  background:#fff; border:1px solid var(--border2); border-radius:20px; padding:24px 20px 20px; text-align:center;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(37,99,235,.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ej-card::before{content:''; position:absolute; top:0; left:22px; right:22px; height:3px; border-radius:0 0 3px 3px; background:var(--c); opacity:.85;}
.ej-step:hover .ej-card{transform:translateY(-5px); border-color:var(--c-line); box-shadow:0 6px 12px rgba(15,23,42,.05), 0 22px 46px var(--c-line);}
.ej-step:hover .ej-node{transform:scale(1.06); background:var(--c); color:#fff;}
.ej-icon{
  width:54px; height:54px; margin:0 auto 14px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; color:var(--c-deep);
  background:linear-gradient(145deg, var(--c-soft), #fff); border:1px solid var(--c-line);
}
.ej-title{font-size:1rem; font-weight:800; color:var(--text); margin:0 0 8px; line-height:1.6;}
.ej-desc{font-size:.84rem; color:var(--text3); line-height:1.85; margin:0 0 16px;}
.ej-hint{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--c-soft); color:var(--c-deep); font-size:.74rem; font-weight:700; line-height:1.5;}
.ej-cta{margin-top:40px; display:flex; align-items:center; justify-content:center; gap:14px 20px; flex-wrap:wrap;}
.ej-cta-note{color:var(--text3); font-size:.9rem; margin:0;}
.ej-cta .btn-hero{border:0;}

/* reveal: armed by home-v2.js only, so the steps stay visible without JavaScript */
.ej--armed .ej-step{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.ej--armed.ej--in .ej-step{opacity:1; transform:none;}
.ej--armed.ej--in .ej-step:nth-child(2){transition-delay:.12s;}
.ej--armed.ej--in .ej-step:nth-child(3){transition-delay:.24s;}
.ej--armed.ej--in .ej-step:nth-child(4){transition-delay:.36s;}

@media (max-width:1024px){
  .ej-track{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 20px;}
  .ej-track::before, .ej-flow{display:none;}
}
@media (max-width:640px){
  .ej{margin-bottom:56px;}
  .ej-head{margin-bottom:36px;}
  .ej-track{grid-template-columns:1fr; gap:16px;}
  .ej-track::before{display:block; top:28px; bottom:28px; left:auto; right:21px; width:2px; height:auto; background:linear-gradient(to bottom, #2563EB, #7C3AED, #0EA5E9, #059669);}
  .ej-step{display:grid; grid-template-columns:44px minmax(0, 1fr); gap:14px; align-items:start;}
  .ej-node{width:44px; height:44px; margin:6px 0 0; font-size:.86rem; box-shadow:0 0 0 5px #F5F8FF, 0 8px 18px var(--c-line);}
  .ej-card{height:auto; text-align:right; padding:18px 16px 16px;}
  .ej-card::before{left:auto; right:16px; width:44px;}
  .ej-icon{width:44px; height:44px; margin:0 0 10px; border-radius:13px;}
  .ej-icon svg{width:22px; height:22px;}
  .ej-desc{margin-bottom:12px;}
  .ej-cta{flex-direction:column; gap:12px;}
  .ej-cta .btn-hero{width:100%; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .ej-flow{display:none;}
  .ej--armed .ej-step{opacity:1; transform:none; transition:none;}
  .ej-step:hover .ej-card, .ej-step:hover .ej-node{transform:none;}
}

/* ─── Features as a bento grid ─── */
.eb{max-width:1200px; margin:0 auto;}
.eb-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; margin-bottom:36px;}
.eb-head-text{max-width:620px;}
.eb-head .section-title{margin-bottom:12px;}
.eb-head .section-sub{max-width:560px;}
.eb-head .btn-hero{border:0; flex:0 0 auto;}
.eb-grid{
  display:grid; gap:16px; grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-template-areas:"fin fin market comp" "fin fin scen comp" "ops ops export export";
}
.eb-card{
  --acc:#2563EB; --soft:#EFF6FF; --line:rgba(37,99,235,.22); --mx:50%; --my:0px;
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px;
  padding:22px; border-radius:24px; border:1px solid var(--border2);
  background:linear-gradient(165deg, #fff 55%, var(--soft));
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 10px 30px rgba(37,99,235,.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.eb-card::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(340px 220px at var(--mx) var(--my), var(--soft), transparent 70%);}
.eb-card:hover{transform:translateY(-4px); border-color:var(--line); box-shadow:0 6px 12px rgba(15,23,42,.05), 0 24px 48px rgba(37,99,235,.12);}
.eb-card:hover::before{opacity:1;}
.eb-card > *{position:relative;}
.eb-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.eb-icon{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--acc); background:linear-gradient(145deg, var(--soft), #fff); border:1px solid var(--line);}
.eb-chip{font-size:.7rem; font-weight:700; color:var(--acc); background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:4px 10px; white-space:nowrap;}
.eb-title{font-size:1.04rem; font-weight:800; color:var(--text); margin:4px 0 0; line-height:1.6;}
.eb-desc{font-size:.84rem; color:var(--text3); line-height:1.85; margin:0;}
.eb-visual{margin-top:auto; padding-top:8px;}

.eb-fin{grid-area:fin; --acc:#fff; --soft:rgba(255,255,255,.14); --line:rgba(255,255,255,.28); border:0; color:#fff; padding:28px;
  background:radial-gradient(120% 90% at 100% 0%, #3B82F6 0%, transparent 55%), linear-gradient(155deg, #1E3A8A 0%, #1D4ED8 55%, #2563EB 100%);
  box-shadow:0 18px 50px rgba(29,78,216,.30);}
.eb-fin::before{background:radial-gradient(380px 260px at var(--mx) var(--my), rgba(255,255,255,.16), transparent 70%);}
.eb-fin:hover{box-shadow:0 24px 60px rgba(29,78,216,.38);}
.eb-fin .eb-icon{color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28);}
.eb-fin .eb-chip{color:#DBEAFE; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24);}
.eb-fin .eb-title{color:#fff; font-size:1.3rem;}
.eb-fin .eb-desc{color:rgba(239,246,255,.86); font-size:.92rem; max-width:460px;}
.eb-market{grid-area:market; --acc:#0284C7; --soft:#E0F2FE; --line:rgba(2,132,199,.22);}
.eb-comp{grid-area:comp; --acc:#7C3AED; --soft:#F5F3FF; --line:rgba(124,58,237,.22);}
.eb-scen{grid-area:scen; --acc:#D97706; --soft:#FFFBEB; --line:rgba(217,119,6,.24);}
.eb-ops{grid-area:ops; --acc:#059669; --soft:#ECFDF5; --line:rgba(5,150,105,.22);}
.eb-export{grid-area:export; --acc:#DC2626; --soft:#FEF2F2; --line:rgba(220,38,38,.2);}

/* miniature visuals (decorative, aria-hidden) */
.eb-chart{display:block; width:100%; height:auto; max-height:190px;}
.eb-kpis{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.eb-kpis span{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 11px;}
.eb-kpis .be::before{content:''; width:14px; border-top:2px dashed rgba(254,240,138,.9);}
.eb-places{display:flex; flex-wrap:wrap; gap:6px;}
.eb-places span{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; color:#0369A1; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 9px;}
.eb-swot{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.eb-swot span{display:flex; flex-direction:column; gap:2px; border-radius:14px; padding:12px 10px; font-size:.74rem; font-weight:700; line-height:1.4;}
.eb-swot b{font-size:1.15rem; font-weight:900; line-height:1; font-family:'Cairo',sans-serif;}
.eb-swot .s{background:#ECFDF5; color:#047857;} .eb-swot .w{background:#FEF2F2; color:#B91C1C;}
.eb-swot .o{background:#EFF6FF; color:#1D4ED8;} .eb-swot .t{background:#FFFBEB; color:#B45309;}
.eb-comp .eb-swot{flex:1 1 auto; grid-auto-rows:1fr; min-height:150px;}
.eb-comp .eb-swot span{justify-content:space-between; padding:14px 12px;}
.eb-comp .eb-swot b{font-size:1.7rem;}
.eb-bars{display:flex; flex-direction:column; gap:8px;}
.eb-bar{display:grid; grid-template-columns:52px minmax(0, 1fr); align-items:center; gap:8px; font-size:.72rem; font-weight:700; color:var(--text2);}
.eb-bar i{display:block; height:8px; border-radius:8px; background:rgba(15,23,42,.06); overflow:hidden; position:relative;}
.eb-bar i::after{content:''; position:absolute; top:0; bottom:0; right:0; border-radius:8px;}
.eb-bar.up i::after{width:86%; background:linear-gradient(to left, #F59E0B, #FBBF24);}
.eb-bar.down i::after{width:48%; background:linear-gradient(to left, #94A3B8, #CBD5E1);}
.eb-ops-list{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;}
.eb-ops-list span{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-size:.74rem; font-weight:700; color:#065F46; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 6px;}
.eb-ops-list svg{color:#059669;}
.eb-files{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.eb-file{position:relative; width:58px; height:70px; border-radius:8px 18px 8px 8px; color:#fff; font-weight:900; font-size:.74rem; letter-spacing:.04em; display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px; box-shadow:0 10px 22px rgba(15,23,42,.16);}
.eb-file::before{content:''; position:absolute; top:0; right:0; width:16px; height:16px; border-radius:0 8px 0 6px; background:rgba(255,255,255,.35);}
.eb-file.pdf{background:linear-gradient(160deg, #EF4444, #B91C1C); transform:rotate(4deg);}
.eb-file.xls{background:linear-gradient(160deg, #10B981, #047857); transform:rotate(-4deg);}
.eb-files-note{display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--text3); line-height:1.6;}
.eb-files-note strong{color:var(--text); font-size:.84rem;}

@media (max-width:1024px){
  .eb-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-areas:"fin fin" "market comp" "scen comp" "ops ops" "export export";}
}
@media (max-width:640px){
  .eb-head{margin-bottom:24px;}
  .eb-head .btn-hero{width:100%; justify-content:center;}
  .eb-grid{grid-template-columns:1fr; grid-template-areas:"fin" "market" "comp" "scen" "ops" "export"; gap:12px;}
  .eb-card{padding:18px; border-radius:20px;}
  .eb-fin{padding:22px 18px;}
  .eb-fin .eb-title{font-size:1.12rem;}
  .eb-ops-list{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (prefers-reduced-motion:reduce){
  .eb-card, .eb-card:hover{transform:none; transition:none;}
}