@font-face{font-family:"Montserrat";src:url("../../_shared/fonts/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../../_shared/fonts/Montserrat-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../../_shared/fonts/Montserrat-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh";src:url("../../_shared/fonts/YekanBakh-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh";src:url("../../_shared/fonts/YekanBakh-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh";src:url("../../_shared/fonts/YekanBakh-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme: dark;
  --bg:#0a0b0e;
  --bg-2:#12141a;
  --panel:rgba(14,16,22,.97);
  --text:#e8e4dc;
  --muted:#8a857c;
  --muted-2:#5a564e;
  --line:#e8e4dc;
  --line-2:rgba(232,228,220,.10);
  --line-3:rgba(224,169,53,.36);
  --gold:#e0a935;
  --gold-2:#f0c86a;
  --violet:#8d4be8;
  --blue:#2267e8;
  --cyan:#28c7d9;
  --magenta:#d23a7d;
  --green:#24a86b;
  --accent:#8d4be8;
  --accent2:#a860f0;
  --font:"Montserrat","Yekan Bakh","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.5;
}
.shell{width:min(1320px, calc(100% - 32px));margin:0 auto}

.eg-header{
  padding:16px 0;
}
.eg-header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.eg-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
.eg-brand-mark{width:28px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 auto}
.eg-brand-mark svg{width:100%;height:100%}
.eg-back{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--line-2);padding:8px 14px}
.eg-back:hover{color:var(--accent2);border-color:var(--line-3)}

.rainbow-line{height:3px;border:0;margin:0;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--magenta),var(--gold))}
.eg-footer{border-top:0;position:relative;padding:22px 0 20px;color:var(--muted-2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between}
.eg-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 50%,transparent)}

.eg-hero{position:relative;padding:56px 0 36px;overflow:hidden}
.eg-hero-glow{position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb,var(--accent) 30%, transparent) 0%, transparent 70%);pointer-events:none;z-index:0}
.eg-hero-inner{position:relative;z-index:1}
.eg-eyebrow{color:var(--accent2);letter-spacing:.22em;text-transform:uppercase;font-size:11px;font-weight:600;margin:0 0 8px}
.eg-hero h1{margin:0 0 12px;font-size:clamp(28px,4.2vw,46px);font-weight:300;letter-spacing:.02em}
.eg-hero p{margin:0;color:var(--muted);max-width:640px;font-size:14px;line-height:1.8}
.eg-hero-mark{position:absolute;top:-20px;left:-40px;width:340px;opacity:.08;color:var(--accent);pointer-events:none;z-index:0}
[dir="rtl"] .eg-hero-mark{left:auto;right:-40px}
.eg-hero-mark svg{width:100%;height:auto;display:block}

.app-directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;padding:12px 0 64px}
.app-card{position:relative;overflow:hidden;aspect-ratio:7/3;display:block;border:1px solid var(--line-2);background:var(--bg-2);transition:transform .16s,border-color .16s;text-decoration:none;color:inherit}
.app-card:hover{transform:translateY(-2px);border-color:var(--line-3)}
.app-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.app-card::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg, var(--bg) 0%, var(--bg) 40%, rgba(10,11,14,.35) 68%, transparent 100%);pointer-events:none}
.app-card-overlay{position:absolute;inset:0;z-index:1;max-width:62%;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px}
.app-card-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;color:#111;flex:0 0 auto}
.app-card-icon svg{width:16px;height:16px}
.app-card-copy{min-width:0;display:grid;gap:4px}
.app-card-copy strong{font-size:13px;letter-spacing:.02em;color:var(--text)}
.app-card-copy small{font-size:11.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-card-chip{position:absolute;top:10px;right:10px;z-index:2;background:rgba(10,11,14,.72);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-2);color:var(--muted)}
.app-card.is-soon{opacity:.6}
.app-card-soon-badge{position:absolute;top:10px;right:10px;z-index:2;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-3);color:var(--gold-2);background:rgba(10,11,14,.72)}

@media (max-width:720px){
  .app-directory-grid{grid-template-columns:1fr}
  .app-card-overlay{max-width:78%}
}