/* Xellati Hataw — specific styles (site variables only) */

/* Live Badge */
.xh-live-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;background:rgba(232,204,84,.08);border:1px solid rgba(232,204,84,.22);border-radius:999px;font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;}
.xh-live-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;flex-shrink:0;animation:xh-pulse 1.6s infinite;}
@keyframes xh-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}

/* 3-column card grid */
.xh-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--line-soft);border-radius:var(--radius-xl);background:var(--line-soft);overflow:hidden;margin-top:40px;}
.xh-card{background:var(--surface);padding:28px 24px;display:grid;gap:12px;align-content:start;transition:background .18s;}
.xh-card:hover{background:var(--surface-2);}
.xh-card h3{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.025em;line-height:1.25;margin:0;}
.xh-card p{color:var(--text-muted);font-size:14px;line-height:1.72;margin:0;}

/* Helli Bryar two-column */
.xh-helli-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.xh-helli-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-xl);padding:36px;position:relative;overflow:hidden;}
.xh-helli-card::before{content:'';position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.45;}
.xh-helli-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;text-align:center;}
.xh-helli-stat-num{font-size:38px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:6px;letter-spacing:-.04em;}
.xh-helli-stat-label{font-size:12px;color:var(--text-muted);}
.xh-helli-divider{height:1px;background:var(--line-soft);margin-bottom:20px;}

/* Platform grid */
.xh-platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line-soft);border-radius:var(--radius-xl);background:var(--line-soft);overflow:hidden;margin-top:40px;}
.xh-platform-item{background:var(--surface);padding:28px;display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;transition:background .18s;}
.xh-platform-item:hover{background:var(--surface-2);}
.xh-platform-item svg{width:28px;height:28px;color:var(--text-muted);transition:color .2s;}
.xh-platform-item:hover svg{color:var(--accent);}
.xh-platform-item span{font-size:13px;color:var(--text-muted);font-weight:500;transition:color .2s;}
.xh-platform-item:hover span{color:var(--text);}

/* FAQ */
.xh-faq-list{max-width:760px;margin:40px auto 0;border:1px solid var(--line-soft);border-radius:var(--radius-xl);overflow:hidden;}
.xh-faq-item{border-bottom:1px solid var(--line-soft);}
.xh-faq-item:last-child{border-bottom:none;}
.xh-faq-q{width:100%;background:var(--surface);border:none;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;text-align:start;color:var(--text);font-size:15px;font-weight:500;font-family:var(--font);transition:background .18s,color .2s;}
html[dir="rtl"] .xh-faq-q{text-align:end;}
.xh-faq-q:hover{background:var(--surface-2);}
.xh-faq-item.is-open .xh-faq-q{color:var(--accent);}
.xh-faq-q svg{flex-shrink:0;color:var(--text-muted);transition:transform .25s,color .2s;}
.xh-faq-item.is-open .xh-faq-q svg{transform:rotate(45deg);color:var(--accent);}
.xh-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;font-size:14px;color:var(--text-muted);line-height:1.72;background:var(--surface);padding:0 24px;font-family:var(--font);}
.xh-faq-item.is-open .xh-faq-a{max-height:200px;padding-bottom:20px;}

/* Responsive */
@media(max-width:1019px){
  .xh-helli-grid{grid-template-columns:1fr;gap:32px;}
  .xh-platform-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  .xh-3col,.xh-platform-grid{grid-template-columns:1fr;}
  .xh-helli-stats{grid-template-columns:repeat(3,1fr);}
}