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

:root { color-scheme: dark; --ink:#f4f7fb; --muted:#93a4b8; --bg:#07111f; --line:rgba(176,202,229,.16); --accent:#90e0c1; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 78% 42%, #102d3e 0, #07111f 37%, #050c17 100%); font-family:'Noto Kufi Arabic',system-ui,sans-serif; }
.page-shell { width:min(1180px, calc(100% - 64px)); min-height:100svh; margin:auto; display:flex; flex-direction:column; }
.topbar { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; direction:ltr; font-family:'DM Sans',sans-serif; font-weight:700; letter-spacing:-.06em; }
.brand-mark { font-size:1.65rem; color:var(--accent); }.brand-name { font-size:1.65rem; }
.status { color:var(--muted); font-size:.72rem; display:flex; gap:9px; align-items:center; }.status i { width:7px; height:7px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px var(--accent); }
.hero { flex:1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4rem; padding:5rem 0 4rem; }
.hero-copy { max-width:530px; animation:rise .8s ease both; }.eyebrow { color:var(--accent); font:600 .78rem 'DM Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; direction:ltr; }
h1 { margin:1.5rem 0 1.25rem; font-size:clamp(4.5rem, 10vw, 9rem); line-height:1.08; letter-spacing:-.07em; font-weight:600; } h1 em { color:var(--accent); font-style:normal; }
.orbital { position:relative; width:min(40vw,450px); aspect-ratio:1; justify-self:center; display:grid; place-items:center; animation:float 8s ease-in-out infinite; }.orbital::before { content:''; position:absolute; inset:17%; border-radius:50%; background:rgba(144,224,193,.07); filter:blur(18px); }
.orbit { position:absolute; border:1px solid rgba(144,224,193,.32); border-radius:50%; transform:rotate(-28deg); }.orbit-one { width:92%; height:42%; }.orbit-two { width:68%; height:92%; transform:rotate(37deg); border-color:rgba(150,190,226,.23); }.core { width:38%; aspect-ratio:1; border-radius:50%; background:linear-gradient(145deg,#b2f1d8,#5aa88c); color:#07111f; display:flex; flex-direction:column; justify-content:center; align-items:center; box-shadow:0 0 70px rgba(144,224,193,.24); direction:ltr; font-family:'DM Sans',sans-serif; line-height:.9; }.core span { font-size:clamp(1.1rem,3vw,2.2rem); font-weight:500; letter-spacing:-.08em; }.core strong { font-size:clamp(1.5rem,4vw,3.5rem); letter-spacing:-.1em; }
.node { position:absolute; width:12px; height:12px; border:3px solid var(--bg); background:var(--accent); border-radius:50%; box-shadow:0 0 0 5px rgba(144,224,193,.15); }.node-a { top:17%; right:13%; }.node-b { bottom:7%; left:24%; background:#a1c5e7; }.node-c { top:27%; left:5%; background:#a1c5e7; }
.footer { border-top:1px solid var(--line); padding:20px 0 27px; display:flex; justify-content:space-between; color:var(--muted); font:500 .72rem 'DM Sans','Noto Kufi Arabic',sans-serif; direction:ltr; }.footer a { color:var(--accent); text-decoration:none; }.footer span:nth-child(2) { direction:rtl; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } @keyframes float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-10px) rotate(2deg); } }
@media (max-width:700px) { .page-shell { width:min(100% - 36px, 520px); }.topbar { height:78px; }.status { font-size:.6rem; }.hero { grid-template-columns:1fr; gap:1rem; padding:4rem 0 2rem; }.hero-copy { order:1; }.orbital { order:0; width:min(72vw,310px); margin:0 auto 1.5rem; }.hero h1 { font-size:clamp(4rem,20vw,6rem); margin-top:1rem; }.footer { gap:10px; flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }