:root {
  color-scheme: dark;
  --black: #050505;
  --ink: #f7f5f0;
  --muted: #aaa69e;
  --dim: #756f66;
  --gold: #dba94d;
  --gold-bright: #f6d27d;
  --line: rgba(224, 183, 89, .48);
  --font: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--black); color: var(--ink); font-family: var(--font); overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.24'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.atmosphere { position: fixed; z-index: -4; width: 62vw; height: 35vw; top: -16vw; left: 19%; background: radial-gradient(ellipse, rgba(177, 130, 42, .17) 0, rgba(177, 130, 42, .04) 42%, transparent 72%); filter: blur(26px); pointer-events: none; }
.page { width: min(1360px, calc(100% - 80px)); margin: 0 auto; position: relative; }
.nav { height: 82px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: -.03em; }
.brand-bell { width: 13px; height: 13px; color: var(--gold-bright); }
.nav-links { display: flex; gap: 31px; }
.nav-links a { color: #9d978c; text-decoration: none; font-size: 10px; line-height: 1; }
.nav-links a:hover { color: var(--ink); }
.hero { min-height: 850px; text-align: center; position: relative; padding-top: 88px; overflow: hidden; }
.gold-arc { position: absolute; left: -14%; width: 128%; border: 1px solid var(--line); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; pointer-events: none; box-shadow: 0 0 13px rgba(213, 163, 55, .24); }
.arc-top { top: 24px; height: 300px; }
.arc-bottom { top: 278px; height: 300px; opacity: .3; border-top-color: transparent; }
.hero h1 { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; color: var(--ink); font-size: clamp(44px, 5.55vw, 78px); line-height: 1.16; font-weight: 700; letter-spacing: -.075em; text-wrap: balance; }
.hero h1 span { color: var(--gold-bright); }
.hero-copy { position: relative; z-index: 2; margin: 25px auto 27px; color: var(--muted); font-size: 13px; line-height: 1.65; letter-spacing: -.01em; }
.telegram-cta { position: relative; z-index: 2; min-width: 104px; height: 38px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(105deg, #ffe09a, #d19a3e); color: #171006; font: 700 11px var(--font); box-shadow: 0 0 23px rgba(230, 181, 78, .25); transition: transform .18s ease, box-shadow .18s ease; }
.telegram-cta:hover { transform: translateY(-1px); box-shadow: 0 0 32px rgba(230, 181, 78, .46); }
.latest { position: relative; z-index: 3; width: min(1080px, 100%); margin: 112px auto 0; padding: 0; text-align: left; }
.latest-topline { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.13); padding: 0 0 13px; }
.latest-topline h2 { margin: 0; color: #d8d0c0; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.live-status { color: var(--dim); display: inline-flex; gap: 7px; align-items: center; font-size: 10px; }
.live-status i { width: 5px; height: 5px; display: block; border-radius: 50%; background: #86c88d; box-shadow: 0 0 8px #86c88d; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.result-card { min-height: 124px; padding: 18px 22px 15px; border-right: 1px solid rgba(255,255,255,.11); background: linear-gradient(180deg, rgba(18,17,15,.26), transparent); }
.result-card:first-child { padding-left: 0; }
.result-card:last-child { border-right: 0; padding-right: 0; }
.result-route { color: #e2dccf; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.result-date, .result-meta { color: #817b71; font-size: 10px; line-height: 1.5; }
.result-price { color: var(--gold-bright); font-size: 19px; font-weight: 700; letter-spacing: -.04em; margin: 13px 0 5px; }
.result-price small { color: #918875; font-size: 9px; font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.result-seller { color: #9f8859; font-size: 10px; margin-top: 9px; }
.result-badge { color: #9db99b; font-size: 9px; margin-top: 8px; display: inline-block; }
.empty-state { padding: 24px 0; color: var(--dim); text-align: center; font-size: 12px; }
.mosque-silhouette { position: fixed; z-index: -3; left: 0; right: 0; bottom: 0; height: 33vh; opacity: .26; background: linear-gradient(180deg, transparent 0, rgba(13,12,10,.32) 34%, rgba(29,25,18,.66) 100%); clip-path: polygon(0 100%,0 67%,5% 67%,5% 61%,8% 61%,8% 70%,13% 70%,13% 54%,17% 54%,17% 67%,22% 67%,22% 43%,24% 43%,24% 60%,28% 60%,28% 73%,32% 73%,32% 53%,34% 53%,34% 67%,40% 67%,40% 28%,42% 28%,42% 64%,47% 64%,47% 54%,50% 54%,50% 67%,55% 67%,55% 43%,58% 43%,58% 62%,63% 62%,63% 51%,66% 51%,66% 69%,71% 69%,71% 40%,74% 40%,74% 63%,79% 63%,79% 55%,83% 55%,83% 70%,89% 70%,89% 49%,93% 49%,93% 68%,100% 68%,100% 100%); pointer-events: none; }
.footer { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 22px 0 25px; border-top: 1px solid rgba(255,255,255,.08); color: #5e5a53; font-size: 9px; }
.telegram-dialog { width: min(380px, calc(100% - 32px)); border: 1px solid rgba(224,183,89,.4); border-radius: 8px; padding: 28px; color: var(--ink); background: #11100e; text-align: center; box-shadow: 0 25px 90px #000; }
.telegram-dialog::backdrop { background: rgba(0,0,0,.74); }
.dialog-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; color: #938b7f; cursor: pointer; font-size: 22px; }
.dialog-glyph { display: block; width: 25px; height: 25px; color: var(--gold-bright); margin: 0 auto 8px; }
.telegram-dialog h2 { margin: 0 0 12px; font-size: 20px; }
.telegram-dialog p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.telegram-dialog code { color: var(--gold-bright); font-size: 10px; }
.dialog-action { margin-top: 8px; border: 0; border-radius: 999px; padding: 10px 18px; background: linear-gradient(105deg, #ffe09a, #d19a3e); color: #171006; cursor: pointer; font-weight: 700; }
@media (max-width: 720px) {
  .page { width: calc(100% - 40px); }
  .nav { height: 70px; }
  .nav-links { gap: 19px; }
  .hero { padding-top: 106px; min-height: 770px; }
  .gold-arc { width: 190%; left: -45%; }
  .arc-top { top: 38px; height: 210px; }
  .arc-bottom { top: 208px; height: 210px; opacity: .1; }
  .hero h1 { max-width: 650px; font-size: 31px; line-height: 1.18; letter-spacing: -.065em; }
  .hero-copy { margin-top: 13px; margin-bottom: 14px; max-width: 430px; font-size: 11px; }
  .latest { margin-top: 95px; }
  .result-grid { grid-template-columns: 1fr; }
  .result-card, .result-card:first-child, .result-card:last-child { min-height: 0; padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .result-card:last-child { border-bottom: 0; }
  .result-price { display: inline-block; margin: 8px 12px 0 0; }
  .result-meta, .result-seller { display: inline-block; margin-left: 0; }
  .footer { flex-direction: column; gap: 8px; }
}
@media (min-width: 521px) and (max-width: 720px) {
  .page { width: calc(100% - 88px); }
}