:root {
  color-scheme: dark;
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --orange: #ff9e08;
  --pointer-x: 50%;
  --pointer-y: 100%;
  --heat: 0;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #080b12; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; padding: 20px 18px 0; background: #080b12; color: #f6f7fb; }
a { color: inherit; text-decoration: none; }
.page-shell { --corner: 30px; position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--corner) var(--corner) 0 0; background: #080d17; }
.page-shell::before { position:absolute; z-index:-2; inset:0; content:""; background:radial-gradient(ellipse 75% 47% at 76% 22%,rgba(14,80,148,.37),transparent 77%),radial-gradient(ellipse 80% 60% at 50% 95%,rgba(100,44,9,.42),transparent 75%),linear-gradient(135deg,#09101e 0%,#080b12 66%,#100d0b 100%); }
.page-shell::after { position:absolute; z-index:-1; inset:0; content:""; pointer-events:none; opacity:.12; background-image:radial-gradient(rgba(255,255,255,.6) .6px,transparent .8px); background-size:39px 43px; mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.8) 42%,transparent 95%); }
.ambient { position:absolute; z-index:-1; top:0; left:0; right:0; height:220px; pointer-events:none; background:radial-gradient(ellipse at 50% -40%,rgba(255,255,255,.13),transparent 75%); }
.site-header { position:relative; z-index:3; height:94px; padding:0 clamp(28px,7.2vw,108px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.07); }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:20px; font-weight:700; letter-spacing:-.6px; white-space:nowrap; }.brand b { color:#ffa90e; font-weight:500; }
.brand-icon { width:40px;height:40px;flex:0 0 40px;display:inline-flex;align-items:center;justify-content:center; }.brand-icon img { display:block;width:100%;height:100%;object-fit:contain; }
.main-nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:38px; color:#d4d8e0; font-size:14px; white-space:nowrap; }.main-nav a,.site-footer a { transition:color .2s ease; }.main-nav a:hover,.site-footer a:hover { color:#ffb015; }
.button { min-height:54px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:11px; border:1px solid transparent; border-radius:100px; font-size:15px; font-weight:600; white-space:nowrap; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }.button:hover { transform:translateY(-2px); }.button-primary { color:#17120a; background:linear-gradient(110deg,#ffc52a,#ff9700); box-shadow:0 5px 24px rgba(255,162,0,.17); }.button-primary:hover { background:#ffd04b; box-shadow:0 8px 30px rgba(255,162,0,.29); }.button-small { min-height:43px; padding:0 19px; font-size:13px; }.button-ghost { border-color:rgba(255,255,255,.23); background:rgba(255,255,255,.035); color:#f0f2f7; }.button-ghost:hover { background:rgba(255,255,255,.09); }.button-arrow { width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(19,15,9,.12); }
.menu-toggle { display:none; }
.hero { position:relative; z-index:1; min-height:560px; padding:78px clamp(30px,7.2vw,108px) 52px; display:flex; align-items:center; overflow:hidden; }.hero::before { position:absolute;z-index:1;inset:0;content:"";pointer-events:none;background:linear-gradient(90deg,rgba(7,12,22,.99) 0%,rgba(7,12,22,.94) 26%,rgba(7,12,22,.78) 43%,rgba(7,12,22,.23) 72%,rgba(7,12,22,.08) 100%),linear-gradient(0deg,rgba(7,12,22,.48),transparent 38%,rgba(7,12,22,.12)); }.hero-copy { position:relative; z-index:2; width:min(650px,53%); }.eyebrow,.section-kicker { display:flex;align-items:center;gap:9px;color:#ffbc31;font-size:11px;font-weight:700;letter-spacing:1.7px; }.status-dot { width:7px;height:7px;border-radius:50%;background:#ffb000;box-shadow:0 0 12px #ffac00; }
.hero-copy h1 { max-width:630px; margin:22px 0 0; font-size:clamp(46px,5.8vw,76px); font-weight:600; letter-spacing:-3.4px; line-height:1.04; }.hero-copy h1 span { color:#ffb322; }.hero-copy p { max-width:480px; margin:22px 0 0; color:#b2bac9; font-size:17px; line-height:1.7; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:32px; }.hero-note { display:flex;align-items:center;gap:9px;margin-top:30px;color:#828da0;font-size:12px; }.note-stars { color:#ffba27;font-size:18px; }
.hero-visual { position:absolute; z-index:0; inset:0; width:100%;height:100%; }.hero-visual img { display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%;border:0;border-radius:0;box-shadow:none; }
.apps-section { position:relative;z-index:2;padding:26px clamp(28px,7.2vw,108px) 56px;background:linear-gradient(180deg,rgba(6,11,19,.64),rgba(5,8,13,.8));border-top:1px solid rgba(255,255,255,.08); }.section-heading { display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px; }.section-kicker { font-size:10px; }.section-heading h2 { margin:8px 0 0;font-size:25px;letter-spacing:-.8px;font-weight:600; }.text-link { display:flex;align-items:center;gap:8px;padding-bottom:4px;color:#ffc044;font-size:13px;font-weight:600;white-space:nowrap; }.text-link:hover { color:#ffe08a; }.app-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px; }.app-card { min-width:0;display:flex;flex-direction:column;gap:7px;padding:12px 12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(255,255,255,.035);transition:transform .22s ease,border-color .22s ease,background .22s ease; }.app-card:hover { transform:translateY(-5px);border-color:rgba(255,181,27,.5);background:rgba(255,255,255,.075); }.app-icon { width:100%;aspect-ratio:1.25;display:grid;place-items:center;overflow:hidden;border-radius:12px;font-size:60px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }.icon-muslim { background:linear-gradient(145deg,#09634d,#062f2d);color:#f4c451; }.icon-robot { background:linear-gradient(145deg,#ff651b,#e63b20);color:#fff; }.icon-share { background:linear-gradient(145deg,#53bcff,#144bf4);color:#dff6ff; }.icon-haid { background:linear-gradient(145deg,#ff74aa,#dc307a);color:#ffe5ef; }.icon-archery { background:linear-gradient(145deg,#72d4ff,#1163b8);color:#fff1a6; }.app-name { margin-top:5px;font-size:13px;font-weight:600;line-height:1.4; }.app-type { color:#8994a7;font-size:11px; }
.site-footer { position:relative;z-index:2;min-height:91px;padding:20px clamp(28px,7.2vw,108px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.08);background:rgba(5,7,11,.5);color:#a8b0bd;font-size:12px; }.footer-brand { color:#f6f7fb;font-size:17px; }.footer-brand .brand-icon { width:34px;height:34px;flex-basis:34px; }.copyright { margin-left:auto;text-align:right;white-space:nowrap; }
.horizon { position:absolute;z-index:0;width:142%;height:min(72vw,760px);left:50%;top:calc(100% - 275px);transform:translateX(-50%);border-radius:50% 50% 0 0 / 30% 30% 0 0;border-top:1px solid rgba(255,153,42,.65);background:radial-gradient(ellipse 62% 30% at var(--pointer-x) var(--pointer-y),rgba(255,112,33,calc(.15 + var(--heat)*.65)),transparent 75%),linear-gradient(180deg,#80300a 0%,#3a1809 16%,#130b07 32%,#050505 53%);box-shadow:0 -14px 42px rgba(227,74,10,.16),inset 0 10px 24px rgba(255,103,24,.1);transition:filter .35s ease,background .25s ease;filter:saturate(calc(1 + var(--heat)*.65)); }.horizon::before { position:absolute;content:"";inset:0;border-radius:inherit;background:radial-gradient(ellipse 66% 28% at 50% 0%,rgba(255,106,28,.45),transparent 75%);opacity:calc(.35 + var(--heat)*.5); }.horizon::after { position:absolute;content:"";inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 19%,#000 52%); }
@media(max-width:1000px) { .site-header { padding:0 35px; }.main-nav { gap:21px; }.hero { padding-left:7vw;padding-right:7vw; }.hero-copy { width:56%; }.app-grid { gap:11px; }.app-card { padding:9px; }.app-name { font-size:12px; } }
@media(max-width:700px) { body { padding:8px 7px 0; }.page-shell { --corner:23px; }.site-header { height:75px;padding:0 19px; }.brand { font-size:17px;gap:8px; }.brand-icon { width:34px;height:34px;flex-basis:34px; }.header-cta { margin-left:auto;margin-right:10px;min-height:39px;padding:0 12px;font-size:11px; }.menu-toggle { width:38px;height:38px;padding:10px;display:flex;flex-direction:column;justify-content:center;gap:5px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.04); }.menu-toggle span { height:1.5px;width:16px;background:#eee; }.main-nav { position:absolute;top:66px;left:auto;right:16px;transform:translateY(-8px);width:min(240px,calc(100vw - 45px));padding:10px;display:none;align-items:stretch;flex-direction:column;gap:0;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(12,16,24,.97);box-shadow:0 15px 45px rgba(0,0,0,.4); }.main-nav a { min-height:42px;padding:0 10px;display:flex;align-items:center; }.main-nav.is-open { display:flex;animation:menu-in .18s ease forwards; } @keyframes menu-in { to { transform:translateY(0); } }
 .hero { min-height:unset;padding:73px 25px 35px;display:block; }.hero-copy { width:100%; }.hero::before { background:linear-gradient(90deg,rgba(7,12,22,.98) 0%,rgba(7,12,22,.9) 53%,rgba(7,12,22,.62) 100%),linear-gradient(0deg,rgba(7,12,22,.52),transparent 45%); }.hero-visual { position:absolute;inset:0;width:100%;height:100%; }.hero-visual img { object-position:62% center; }.eyebrow { font-size:9px;letter-spacing:1.1px; }.hero-copy h1 { max-width:620px;margin-top:19px;font-size:clamp(45px,10.2vw,65px);letter-spacing:-2.5px; }.hero-copy p { max-width:520px;font-size:15px; }.hero-actions { gap:10px;margin-top:25px; }.button { min-height:49px;padding:0 16px;font-size:13px; }.hero-note { margin-top:20px;font-size:10px; }
 .apps-section { padding:25px 19px 35px; }.section-heading { align-items:center;margin-bottom:17px; }.section-heading h2 { font-size:21px; }.text-link { font-size:11px; }.app-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:11px; }.app-card { padding:9px;border-radius:14px; }.app-icon { aspect-ratio:1.5;font-size:50px; }.app-name { font-size:12px; }.site-footer { padding:20px 19px;flex-wrap:wrap;gap:12px;font-size:10px; }.site-footer>span { order:3;width:100%; }.copyright { text-align:right; }.footer-brand { font-size:15px; }.horizon { width:194%;height:620px;top:calc(100% - 200px); } }
@media(max-width:380px) { .site-header { padding:0 12px; }.brand { font-size:15px; }.header-cta { padding:0 9px;font-size:10px; }.hero { padding-left:19px;padding-right:19px; }.hero-copy h1 { font-size:43px; }.hero-actions .button { font-size:12px;padding:0 12px; }.section-heading h2 { font-size:18px; }.text-link { gap:4px;font-size:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }

html,body { width:100%;max-width:100%;overflow-x:hidden; }
.page-shell { width:100%;max-width:100vw; }
@media(max-width:700px) {
  .site-header { gap:10px;padding-left:15px;padding-right:15px; }
  .brand { min-width:0;gap:6px;font-size:15px; }
  .brand-icon { width:30px;height:30px;flex-basis:30px; }
  .header-cta { flex:0 0 auto;margin:0 0 0 auto; }
  .hero::before { background:linear-gradient(90deg,rgba(7,12,22,.99) 0%,rgba(7,12,22,.98) 65%,rgba(7,12,22,.86) 100%),linear-gradient(0deg,rgba(7,12,22,.6),transparent 48%); }
  .hero-copy,.apps-section,.site-footer { min-width:0; }
  .app-name { overflow-wrap:anywhere; }
}