@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #f1f0ed;
  --muted: #92918f;
  --faint: #595a5b;
  --accent: #b9a486;
  --bg: #090a0c;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--bg); }

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { color: var(--bg); background: #c8b79f; }

.atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.atmosphere::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 52% 49%, rgba(30, 31, 34, .47) 0%, rgba(13, 14, 16, .36) 38%, transparent 70%), linear-gradient(115deg, #090a0c, #0b0c0e 52%, #090a0c);
  content: '';
}
.glow { position: absolute; width: min(60vw, 780px); aspect-ratio: 1; border-radius: 50%; filter: blur(100px); opacity: .16; will-change: transform; }
.glow--one { top: 8%; left: 29%; background: radial-gradient(circle, #77654d 0%, rgba(100, 83, 62, .2) 37%, transparent 68%); animation: drift-one 19s ease-in-out infinite alternate; }
.glow--two { right: -18%; bottom: -55%; width: min(65vw, 800px); opacity: .13; background: radial-gradient(circle, #434959 0%, rgba(44, 50, 64, .18) 38%, transparent 69%); animation: drift-two 24s ease-in-out infinite alternate; }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(204, 191, 168, .052); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.orbit--outer { width: min(108vw, 1500px); height: min(54vw, 690px); }
.orbit--inner { width: min(81vw, 1120px); height: min(40vw, 510px); border-color: rgba(204, 191, 168, .035); transform: translate(-50%, -50%) rotate(18deg); }
.grain { position: absolute; inset: 0; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.stage { position: relative; display: flex; min-height: 100svh; flex-direction: column; padding: 38px clamp(24px, 6.15vw, 96px) 27px; }
.masthead, .footer { display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: baseline; gap: 12px; color: var(--ink); text-decoration: none; }
.wordmark__name { font-size: 13px; font-weight: 700; letter-spacing: -.025em; }
.wordmark__arabic { color: #aaa49b; font-size: 14px; font-weight: 400; }
.availability { display: inline-flex; align-items: center; gap: 9px; color: #858583; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.availability__dot { width: 5px; height: 5px; border-radius: 50%; background: #8b9c7f; box-shadow: 0 0 10px rgba(139, 156, 127, .58); }

.hero { position: relative; display: flex; width: min(100%, 1160px); flex: 1; flex-direction: column; justify-content: center; margin: 0 auto; padding: 32px 0 56px; }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(22px, 3vw, 38px); color: #aaa69f; font-family: var(--mono); font-size: 10px; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow-line { width: 27px; height: 1px; background: var(--accent); opacity: .8; }
.hero__title { margin: 0; font-size: clamp(3.25rem, 8.1vw, 7.8rem); font-weight: 500; letter-spacing: -.082em; line-height: .99; }
.hero__title > span { display: block; }
.title-second { color: #c7c4bd; font-weight: 400; }
.title-last { color: #e9e7e2; }
.title-period { color: var(--accent); }
.hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(34px, 5.4vw, 70px); }
.hero__description { margin: 0; color: #969594; font-size: clamp(13px, 1.25vw, 15px); font-weight: 400; letter-spacing: -.015em; line-height: 1.85; }
.status { display: inline-flex; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid rgba(229, 222, 209, .14); border-radius: 2px; color: #d3d0c9; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.status__pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.status__pulse::after { position: absolute; inset: -4px; border: 1px solid rgba(185, 164, 134, .5); border-radius: 50%; animation: pulse 2.8s ease-out infinite; content: ''; }
.hero__index { position: absolute; right: 0; bottom: 42px; color: #666564; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.hero__index span { margin: 0 5px; color: #414143; }
.footer { min-height: 22px; color: #696969; font-family: var(--mono); font-size: 9px; letter-spacing: .025em; }
.footer__note { color: #777571; }
.footer__asterisk { padding-left: 3px; color: var(--accent); }

.reveal { opacity: 0; transform: translateY(16px); animation: rise-in .85s cubic-bezier(.2,.75,.2,1) forwards; }
.hero__title.reveal { animation-delay: .13s; }
.hero__bottom.reveal { animation-delay: .27s; }

@keyframes rise-in { to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { opacity: .7; transform: scale(.65); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes drift-one { from { transform: translate3d(-4%, -1%, 0) scale(.95); } to { transform: translate3d(5%, 4%, 0) scale(1.08); } }
@keyframes drift-two { from { transform: translate3d(3%, -3%, 0) scale(1); } to { transform: translate3d(-6%, 4%, 0) scale(1.08); } }

@media (min-width: 1500px) { .hero { width: min(100%, 1260px); } }
@media (max-width: 700px) {
  .stage { padding: 27px 25px 22px; }
  .availability { font-size: 8px; letter-spacing: .04em; }
  .hero { padding: 20px 0 62px; }
  .hero__title { font-size: clamp(3.25rem, 11.2vw, 5.2rem); letter-spacing: -.078em; }
  .hero__bottom { align-items: flex-start; flex-direction: column; gap: 25px; margin-top: 34px; }
  .hero__description { font-size: 13px; }
  .hero__index { bottom: 31px; }
  .orbit--outer { width: 140vw; height: 73vw; }
  .orbit--inner { width: 112vw; height: 59vw; }
}
@media (max-width: 410px) {
  .stage { padding-inline: 20px; }
  .wordmark { gap: 8px; }
  .wordmark__name { font-size: 12px; }
  .wordmark__arabic { font-size: 12px; }
  .availability { gap: 6px; font-size: 7px; }
  .hero__title { font-size: clamp(2.95rem, 11.2vw, 3.6rem); }
  .footer { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}