@font-face{font-family:"Thmanyah Display";src:url(fonts/thmanyahserifdisplay-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Display";src:url(fonts/thmanyahserifdisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Thmanyah Text";src:url(fonts/thmanyahseriftext-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyahsans-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Regular.ttf) format("truetype");font-display:swap}

/* Tokens: dark is the default; light via data-theme, or via the OS when nothing is stored. */
:root{--bg:#000;--ink:#fff;--ink2:#cfcfcb;--muted:#8f8f8f;--gold:#b8954a;--gold2:#b8954a;--rule:rgba(255,255,255,.14);--rule2:rgba(255,255,255,.22);--hover:#141414;color-scheme:dark}
:root[data-theme="light"]{--bg:#fbfbf9;--ink:#0b0b0b;--ink2:#34332f;--muted:#6f6d66;--gold:#9a7b3c;--gold2:#9a7b3c;--rule:rgba(0,0,0,.14);--rule2:rgba(0,0,0,.24);--hover:#f1f1ee;color-scheme:light}
@media (prefers-color-scheme:light){:root:not([data-theme]){--bg:#fbfbf9;--ink:#0b0b0b;--ink2:#34332f;--muted:#6f6d66;--gold:#9a7b3c;--gold2:#9a7b3c;--rule:rgba(0,0,0,.14);--rule2:rgba(0,0,0,.24);--hover:#f1f1ee;color-scheme:light}}

/* Mockup hub-v3 */
*{box-sizing:border-box}html,body{overflow-x:clip}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Thmanyah Text",serif}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.top{display:flex;align-items:center;justify-content:space-between;height:68px;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}.brand .en{font-family:"Thmanyah Display";font-size:24px;letter-spacing:.01em}.brand .ar{font-family:"Thmanyah Display";font-size:22px;color:var(--ink)}
.util{display:flex;gap:26px;font:12px "Thmanyah Sans";color:var(--muted);align-items:center}.util>*{padding-inline-start:26px;border-inline-start:1px solid var(--rule)}.util>*:first-child{border:0;padding:0}
.util a,.util button{color:var(--muted);text-decoration:none;font:inherit;background:none;border-block:0;border-inline-end:0;margin:0;padding-block:0;padding-inline-end:0;cursor:pointer;transition:color .2s ease}
.util a:hover,.util button:hover{color:var(--ink)}
.util a:focus-visible,.util button:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:48px;padding:64px 0 40px}
.hero h1{font-family:"Thmanyah Display";font-weight:400;font-size:64px;line-height:1.15;margin:0}
.hero .sec{font-family:"Thmanyah Display";font-size:40px;line-height:1.12;color:var(--ink);text-align:start;margin:0}
.hero p{font-size:19px;line-height:1.75;color:var(--ink2);margin:16px 0 0;max-width:34em}
.hero p.sec{color:var(--ink);margin:0;max-width:none}
.kick{display:flex;justify-content:space-between;gap:16px;font:11px "Thmanyah Sans";color:var(--muted);letter-spacing:.06em;padding:0 0 10px}
.grid{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}
.grid::before,.grid::after{content:"";position:absolute;top:-4px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}.grid::before{right:-3px}.grid::after{left:-3px}
.li{display:flex;min-width:0;border-inline-start:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cell{flex:1;padding:28px 28px 26px;min-height:270px;display:flex;flex-direction:column;color:var(--ink);text-decoration:none;position:relative;min-width:0;overflow-wrap:anywhere}
.li:nth-child(3n+1){border-inline-start:0}.li:nth-child(n+7){border-bottom:0}
.cell .ar{font-family:"Thmanyah Display";font-size:34px;color:var(--ink);line-height:1.1}
.cell .en{font-family:"Thmanyah Display";font-size:19px;margin-top:6px}
.cell .d{font-size:15px;line-height:1.65;color:var(--ink2);margin:10px 0 0;max-width:30em}
.cell .num{margin-top:auto;padding-top:18px;display:flex;align-items:baseline;gap:10px}
.cell .num b{font-family:"Thmanyah Display";font-weight:400;font-size:36px;color:var(--ink)}.cell .num small{font:11px "Thmanyah Sans";color:var(--muted);letter-spacing:.04em}
.cell .last{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-family:"Thmanyah Sans";font-size:13.5px;line-height:1.55;color:var(--ink)}
.cell .last.solo{margin-top:auto}
.cell .last i{display:block;font:normal 10.5px "IBM Plex Mono";letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-bottom:4px;text-align:start}
.cell .last i:lang(ar){font-family:"Thmanyah Sans",sans-serif;font-size:11.5px;letter-spacing:.02em;text-transform:none}
.cell .go{position:absolute;top:26px;inset-inline-end:28px;font:11px "Thmanyah Sans";color:var(--muted);letter-spacing:.08em}
.cell.soon .ar,.cell.soon .en{color:var(--muted)}.cell.soon .state{margin-top:auto;padding-top:18px;font:11px "Thmanyah Sans";color:var(--muted);letter-spacing:.1em}.cell.soon .state::after{content:"";display:inline-block;width:28px;height:1px;background:var(--rule2);margin-inline-start:10px;vertical-align:middle}
.cell.seal .ar{color:var(--ink)}.cell.seal .go{color:var(--muted)}
.strip{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font:12px "Thmanyah Sans";color:var(--muted)}
.strip .ros{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-inline-end:8px;color:var(--gold)}
.foot{display:flex;justify-content:space-between;gap:16px;padding:14px 0 36px;border-top:1px solid var(--rule);font:11px "IBM Plex Mono";color:var(--muted);letter-spacing:.08em}

/* Hover / focus on linked cells only. --out points the arrow toward the outer edge it sits on. */
:root{--out:-3px}:root[dir="ltr"]{--out:3px}
a.cell{transition:background-color .2s ease}
a.cell .ar,a.cell .en{transition:color .2s ease}
a.cell .go{transition:transform .2s ease,color .2s ease}
a.cell:hover,a.cell:focus-visible{background:var(--hover)}
a.cell:hover .en,a.cell:focus-visible .en{color:var(--gold)}
a.cell:hover .go,a.cell:focus-visible .go{transform:translateX(var(--out));color:var(--gold)}
a.cell:focus-visible{outline:1px solid var(--gold);outline-offset:-1px}
@media (prefers-reduced-motion:reduce){a.cell,a.cell .ar,a.cell .en,a.cell .go,.util a,.util button{transition:none}}

/* Tablet: two columns */
@media (max-width:1080px){
.wrap{padding:0 28px}
.hero{gap:32px;padding:48px 0 32px}.hero h1{font-size:52px}.hero .sec{font-size:32px}
.grid{grid-template-columns:repeat(2,1fr)}
.li:nth-child(3n+1){border-inline-start:1px solid var(--rule)}.li:nth-child(2n+1){border-inline-start:0}
.li:nth-child(n+7){border-bottom:1px solid var(--rule)}.li:last-child{border-bottom:0}
}

/* Phone: one column, same hairlines */
@media (max-width:760px){
.wrap{padding:0 16px}
.top{height:auto;min-height:60px;padding:12px 0;gap:12px;flex-wrap:wrap}
.brand .en{font-size:20px}.brand .ar{font-size:19px}
.util{gap:14px}.util>*{padding-inline-start:14px}
.hero{grid-template-columns:1fr;gap:20px;padding:36px 0 28px}.hero h1{font-size:40px}.hero .sec{font-size:24px}.hero p{font-size:17px}
.kick,.strip,.foot{flex-direction:column;align-items:flex-start;gap:6px}
.grid{grid-template-columns:1fr}
.cell{min-height:0;padding:24px 4px 22px}
.li,.li:nth-child(3n+1),.li:nth-child(2n+1){border-inline-start:0}
.li:nth-child(n+7){border-bottom:1px solid var(--rule)}.li:last-child{border-bottom:0}
.cell .go{top:24px;inset-inline-end:4px}
.cell .ar{font-size:30px}
.grid::before{right:-3px}.grid::after{left:-3px}
}