.hero{display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; padding: 72px 0 40px; min-height: 640px}
.kicker{font: 300 .72rem var(--display); letter-spacing: .3em; color: var(--cyan); opacity: .85; margin-bottom: 26px; direction: ltr; text-align: right}
.hero h1{margin: 0 0 26px; font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight: 300; line-height: 1.45; letter-spacing: -.015em}
.hero h1 span{display: block; color: var(--muted); font-weight: 300}
.hero p{max-width: 460px; margin: 0 0 40px; color: var(--muted); font-size: 1rem}
.btns{display: flex; gap: 14px; flex-wrap: wrap}
.btn{position: relative; overflow: hidden; display: inline-block; padding: 13px 30px; border-radius: 8px; font: 500 .9rem 'Noto Sans Arabic', sans-serif; color: var(--text); text-decoration: none; cursor: pointer; transition: transform .3s, box-shadow .3s, border-color .3s, background .3s}
.btn:focus-visible,a:focus-visible{outline: 2px solid var(--cyan); outline-offset: 3px}
.btn.p{background: linear-gradient(180deg, rgba(109, 74, 255, .9), rgba(79, 52, 200, .95)); border: 1px solid rgba(160, 140, 255, .45); box-shadow: 0 10px 30px -12px rgba(109, 74, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .18)}
.btn.p::after{content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); transition: left .7s}
.btn.p:hover{transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(109, 74, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .25)}
.btn.p:hover::after{left: 130%}
.btn.s{background: rgba(255, 255, 255, .015); border: 1px solid var(--line2)}
.btn.s:hover{border-color: rgba(53, 214, 232, .55); background: rgba(53, 214, 232, .04)}
.orbit .layer{position: absolute; inset: 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1)}
.orbit .halo{position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(109, 74, 255, .28), transparent 68%); filter: blur(30px)}
.globe{position: absolute; inset: 27%; border-radius: 50%; background: radial-gradient(circle at 30% 26%, #5A46C8 0%, #2A1F73 38%, #0F0B2E 72%, #05060F 100%); box-shadow: inset -30px -24px 60px rgba(0, 0, 0, .75), inset 6px 6px 22px rgba(160, 140, 255, .22), 0 0 0 1px rgba(160, 140, 255, .18), 0 0 90px -10px rgba(109, 74, 255, .35)}
.globe::before{content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(8deg, transparent 0 14px, rgba(255, 255, 255, .035) 14px 15px, transparent 15px 30px)}
.globe::after{content: ""; position: absolute; inset: -2%; border-radius: 50%; box-shadow: inset 14px 8px 26px -14px rgba(53, 214, 232, .55)}
.tick{position: absolute; font: 300 .62rem var(--display); letter-spacing: .2em; color: var(--muted); direction: ltr}
.tick.a{top: 6%; left: 4%}
.tick.b{bottom: 7%; right: 2%; color: var(--gold)}
.stats{display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}
.stat{padding: 30px 6px; display: flex; flex-direction: column; gap: 4px}
.stat+.stat{border-inline-start: 1px solid var(--line); padding-inline-start: 28px}
.stat em{font: 300 .64rem var(--display); font-style: normal; letter-spacing: .24em; color: var(--muted); direction: ltr; text-align: right}
.stat b{font: 300 2.6rem var(--display); letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums}
.stat:nth-child(3) b{color: var(--gold)}
.stat span{font-size: .82rem; color: var(--muted)}
.sub{color: var(--muted); margin: 0}
.meta{font: 300 .66rem var(--display); letter-spacing: .24em; color: var(--muted); direction: ltr}
.cta{text-align: center; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; padding: 88px 24px; background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(109, 74, 255, .14), transparent 70%), var(--s1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05)}
.cta h2{font-size: 1.9rem; font-weight: 300}
.cta .sub{margin-bottom: 34px}
.rise{opacity: 0; animation: rise 1.1s .1s cubic-bezier(.2, .7, .2, 1) forwards}
@keyframes rise{from {
        opacity: 0;
        transform: translateY(14px)
    }
    to {
        opacity: 1;
        transform: none
    }}
@media(max-width:860px){.hero{grid-template-columns: 1fr; padding-top: 40px; min-height: 0}.kicker{text-align: right}}
@media(max-width:560px){.stat b{font-size: 1.9rem}.stat+.stat{padding-inline-start: 14px}}
@media(prefers-reduced-motion:reduce){.rise{opacity: 1}}
.fa{font-family: var(--fa); font-weight: 500; font-size: 1.2em; line-height: 1; letter-spacing: 0}
.fa>span{font-family: var(--display); font-weight: 400; font-size: .84em}
.kicker{font-weight: 500; font-size: .76rem}
.hero h1{font-size: clamp(2.2rem, 5.4vw, 3.9rem); font-weight: 800; line-height: 1.4; letter-spacing: 0}
.hero h1 span{font-weight: 500}
.hero p{font-size: 1.05rem; font-weight: 400; line-height: 2.05}
.btn{font-weight: 600; font-size: .95rem; letter-spacing: 0}
.cta h2{font-size: clamp(1.7rem, 4.2vw, 2.3rem); font-weight: 700}
.sub{font-size: .95rem; font-weight: 400; line-height: 2}
.stat span{font-size: .9rem; font-weight: 400}
.stat b{font-size: 2.7rem; font-weight: 600}
.meta{font-size: .7rem; font-weight: 500}
.tick,.stat em{font-size: .66rem; font-weight: 500}
@media(max-width:560px){.stat b{font-size: 1.9rem}}
.hero{padding: 30px 0 18px; min-height: 410px; grid-template-columns: 1.08fr .92fr; gap: 20px; position: relative}
.hero::before{content: ''; position: absolute; inset: 22px 0 16px; border: 1px solid rgba(90, 159, 255, .22); border-radius: 26px; background: radial-gradient(ellipse at 75% 45%, rgba(31, 115, 223, .22), transparent 36%), radial-gradient(ellipse at 15% 65%, rgba(99, 68, 255, .18), transparent 42%), linear-gradient(115deg, rgba(4, 14, 32, .94), rgba(4, 9, 24, .70)); box-shadow: 0 20px 70px rgba(0, 0, 0, .26), inset 0 0 55px rgba(49, 117, 220, .07); pointer-events: none}
.hero>.rise,.hero>.orbit{position: relative; z-index: 1}
.hero>.rise{padding: 35px 36px 35px 20px}
.kicker{letter-spacing: .12em; color: var(--cyan); margin-bottom: 15px; opacity: 1; font-size: .8rem}
.hero h1{font-weight: 800; font-size: clamp(2rem, 3.2vw, 3.4rem); line-height: 1.45; margin-bottom: 14px; letter-spacing: -.035em; text-shadow: 0 0 34px rgba(90, 143, 255, .18)}
.hero h1 span{color: #9dbbff; font-weight: 500}
.hero p{color: #b4c4e0; font-size: .96rem; max-width: 500px; margin-bottom: 23px}
.btn{border-radius: 999px; padding: 11px 24px; font-weight: 600; box-shadow: 0 8px 25px rgba(41, 80, 255, .12)}
.btn.p{background: linear-gradient(110deg, #5c42f5, #227eea); border: 1px solid rgba(151, 176, 255, .55); box-shadow: 0 8px 28px rgba(74, 78, 255, .3)}
.btn.s{background: rgba(7, 18, 38, .75); border: 1px solid rgba(90, 170, 255, .38)}
.orbit .globe{background: radial-gradient(circle at 32% 25%, #d7f5ff 0, #5ba5ed 8%, #20549c 26%, #071c45 57%, #020817 72%); box-shadow: inset -25px -20px 40px #01040d, 0 0 35px rgba(63, 151, 255, .36)}
.orbit .halo{border-color: rgba(75, 191, 255, .55); box-shadow: 0 0 25px rgba(53, 133, 255, .18)}
.stats{margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px}
.stat{background: linear-gradient(135deg, rgba(10, 26, 53, .92), rgba(4, 12, 27, .88)); border: 1px solid var(--line); border-radius: 16px; padding: 13px 18px; box-shadow: inset 0 1px rgba(255, 255, 255, .035)}
.stat em{color: #9db5df}
.stat .num{font: 600 1.6rem var(--mono); color: #f5f8ff; text-shadow: 0 0 20px rgba(70, 161, 255, .35)}
.sub{color: #95a9cb!important; font-size: .9rem}
.meta{color: #62d8ff!important; letter-spacing: .08em}
@media(min-width:1500px){.hero{min-height: 455px}}
@media(max-width:1050px){.hero{grid-template-columns: 1fr .8fr; min-height: 360px}.hero>.rise{padding: 24px 18px}.stats{gap: 8px}}
@media(max-width:720px){.hero{grid-template-columns: 1fr; min-height: 0; padding: 14px 0 10px; gap: 0}.hero::before{inset: 8px 0; border-radius: 20px}.hero>.rise{padding: 25px 21px 8px}.hero h1{font-size: clamp(1.8rem, 8vw, 2.5rem)}.hero p{font-size: .88rem; margin-bottom: 16px}.stats{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 15px}.stat{padding: 9px 8px; text-align: center}.stat .num{font-size: 1.25rem}.stat em,.stat span{font-size: .73rem}.head .meta{align-self: flex-start}}
@media(max-width:420px){.stats{font-size: .8rem}.hero>.rise{padding-inline: 17px}.btn{padding: 10px 17px}}
.hero{position: relative; isolation: isolate; min-height: 670px; gap: clamp(20px, 4vw, 70px); padding: 80px 0 54px; grid-template-columns: 1fr 1.05fr}
.hero:before{content: ""; position: absolute; z-index: -1; inset: 7% -10% 2% 30%; background: radial-gradient(ellipse at 60% 45%, rgba(44, 113, 255, .17), transparent 48%), radial-gradient(ellipse at 45% 62%, rgba(129, 73, 255, .12), transparent 58%); filter: blur(16px); pointer-events: none}
.kicker{display: inline-flex; align-items: center; gap: 10px; color: #8BEAFF; letter-spacing: .06em; font-family: 'Noto Sans Arabic', sans-serif; font-weight: 500; font-size: .85rem; margin-bottom: 20px}
.kicker:before{content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); box-shadow: 0 0 12px var(--cyan)}
.hero h1{font-family: 'Noto Sans Arabic', sans-serif; font-size: clamp(2.2rem, 4.5vw, 4.6rem); font-weight: 800; line-height: 1.48; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 6px 36px rgba(0, 0, 0, .28)}
.hero h1 span{display: block; color: transparent; background: linear-gradient(100deg, #F5F8FF 5%, #8FEAFF 46%, #B9A0FF 92%); background-clip: text; -webkit-background-clip: text}
.hero p{max-width: 560px; color: #AAB8D2; font-size: 1.02rem; line-height: 2.1}
.btn{border-radius: 14px; padding: 12px 22px; font-weight: 600; transition: transform .25s, box-shadow .25s, border-color .25s; background-clip: padding-box}
.btn.p{background: linear-gradient(115deg, #376BFF, #7656E8 65%, #8B5CF6); border: 1px solid rgba(177, 190, 255, .38); box-shadow: 0 10px 32px rgba(74, 91, 255, .26), inset 0 1px rgba(255, 255, 255, .25)}
.btn.p:hover{transform: translateY(-3px); box-shadow: 0 14px 40px rgba(74, 91, 255, .4)}
.btn.s{background: rgba(12, 24, 47, .65); border: 1px solid rgba(155, 191, 255, .23); backdrop-filter: blur(12px)}
.btn.s:hover{border-color: rgba(101, 230, 255, .65); transform: translateY(-2px)}
.orbit .layer{filter: drop-shadow(0 0 8px rgba(102, 175, 255, .2))}
.sub{color: #A2B0CA; max-width: 680px}
.meta{color: #7F9BC7; letter-spacing: .12em}
.stat,[class*="card"]{border-color: rgba(145, 180, 240, .16); box-shadow: 0 16px 44px rgba(0, 0, 0, .16); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease}
@media(max-width:860px){.hero{grid-template-columns: 1fr; padding-top: 46px; gap: 12px; min-height: 0}.hero:before{inset: 0}.hero h1{font-size: clamp(2.15rem, 8vw, 3.5rem)}}
@media(max-width:560px){.hero{padding: 34px 0 24px}.hero p{font-size: .95rem}.btn{padding: 10px 15px}}
.visual-universe{max-width: 1240px}
.visual-gallery{grid-template-columns: 1.32fr 1fr 1fr; grid-template-rows: clamp(230px, 28vw, 360px); gap: clamp(10px, 1.5vw, 18px)}
.space-photo{border-radius: 22px; box-shadow: 0 18px 50px #0005; transition: transform .5s cubic-bezier(.2, .75, .2, 1), border-color .4s, box-shadow .4s}
.space-photo:hover{transform: translateY(-5px); border-color: #78eaff70; box-shadow: 0 28px 65px #0008, 0 0 30px #50dfff12}
.space-photo img{will-change: transform; backface-visibility: hidden}
.visual-top h2{letter-spacing: -.035em}
.visual-top h2 i{text-shadow: 0 0 28px #64dcff45}
@media(max-width:760px){.visual-gallery{grid-template-columns: 1fr 1fr; grid-template-rows: 220px 180px}.photo-earth{grid-column: 1/-1}.visual-universe{margin-inline: 12px; padding: 20px; border-radius: 22px}.space-photo{border-radius: 16px}}
@media(max-width:430px){.visual-gallery{grid-template-columns: 1fr; grid-template-rows: 220px 180px 180px}.photo-earth{grid-column: auto}.gallery-foot{font-size: 10px}}
@media(prefers-reduced-motion:reduce){.space-photo,.space-photo img{transition: none!important}.visual-universe:before,.pulse-dot{animation: none!important}}
.hero{isolation: isolate; overflow: hidden; min-height: clamp(300px, 36vw, 470px); display: flex; flex-direction: column; justify-content: center; margin: 24px 0 30px; padding: clamp(28px, 5vw, 66px); border: 1px solid rgba(129, 177, 255, .32); border-radius: 28px; background: linear-gradient(90deg, rgba(3, 8, 21, .95) 0%, rgba(3, 8, 21, .82) 37%, rgba(3, 8, 21, .28) 72%, rgba(3, 8, 21, .22) 100%), linear-gradient(0deg, rgba(3, 8, 21, .65), transparent 65%), url('../images/photo_30584997665_x.jpg') center 47%/cover, #071329; box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .025)}
.hero:after{content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 78% 45%, rgba(80, 154, 255, .12), transparent 38%), linear-gradient(120deg, transparent 48%, rgba(112, 228, 244, .07), transparent 74%)}
.hero h1{max-width: 760px; font-family: 'Noto Sans Arabic', sans-serif; font-weight: 800; line-height: 1.35; font-size: clamp(2.1rem, 5vw, 4.3rem); letter-spacing: -.045em; text-shadow: 0 5px 28px rgba(0, 0, 0, .55); margin: 0 0 12px}
.hero h1 span{background: linear-gradient(100deg, #fff 8%, #b8dfff 48%, #a79aff 82%); -webkit-background-clip: text; background-clip: text; color: transparent}
.hero p{max-width: 620px; color: #d0dbed; font-size: clamp(.98rem, 1.5vw, 1.12rem); line-height: 2.15}
.hero .cta,.hero button{border-radius: 999px; box-shadow: 0 8px 30px rgba(72, 91, 255, .22)}
p,.sub{color: #aebbd1}
button,input,select,textarea{font-family: 'Noto Sans Arabic', sans-serif; font-size: inherit}
button{border-radius: 12px; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s}
button:not(:disabled):hover{transform: translateY(-1px); box-shadow: 0 8px 24px rgba(54, 108, 220, .18)}
.cta a{background: linear-gradient(110deg, #4d63dc, #785ce8 58%, #5a8ee8); border: 1px solid rgba(186, 205, 255, .45); color: #fff; box-shadow: 0 8px 25px rgba(76, 86, 223, .24)}
@media(min-width:1500px){.hero{min-height: 470px}}
@media(max-width:860px){.hero{min-height: 340px; padding: 28px; background-position: 60% center}.hero h1{max-width: 100%; font-size: clamp(2rem, 6vw, 3rem)}}
@media(max-width:560px){.hero{margin: 16px 0 20px; min-height: 360px; border-radius: 20px; padding: 23px 19px; background-image: linear-gradient(90deg, rgba(3, 8, 21, .92), rgba(3, 8, 21, .68)), linear-gradient(0deg, rgba(3, 8, 21, .45), transparent), url('../images/photo_30584998694_x.jpg'); background-position: 57% center}.hero p{font-size: .95rem}}
.hero{position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(126, 176, 247, .25); border-radius: 28px; background-image: linear-gradient(90deg, rgba(3, 8, 19, .96) 0%, rgba(4, 10, 23, .86) 40%, rgba(4, 10, 23, .25) 100%), linear-gradient(0deg, rgba(3, 7, 17, .56), transparent 55%), url('../images/photo_30584998694_x.jpg')!important; background-position: center, center, 58% 48%!important; background-size: cover!important; box-shadow: 0 28px 80px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .08); min-height: 440px}
.hero:after{content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 82% 45%, rgba(96, 151, 255, .12), transparent 37%), linear-gradient(135deg, transparent 45%, rgba(8, 15, 31, .24))}
.hero>.rise{max-width: 690px; padding: clamp(30px, 5vw, 70px)!important}
.kicker{display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border: 1px solid rgba(123, 231, 255, .23); border-radius: 999px; background: rgba(5, 18, 34, .64); color: var(--cyan); font-size: .78rem; letter-spacing: .02em; box-shadow: inset 0 1px rgba(255, 255, 255, .04)}
.hero h1{font-size: clamp(2.2rem, 4.6vw, 4.15rem)!important; line-height: 1.28; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; text-shadow: 0 5px 34px rgba(0, 0, 0, .38); max-width: 700px}
.hero h1 span{color: #a8dfff; text-shadow: 0 0 30px rgba(95, 177, 255, .18)}
.hero p{color: #c0cde1; max-width: 540px; font-size: 1rem; line-height: 2.1}
.btn{min-height: 46px; border-radius: 13px!important; padding: 11px 21px!important; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease, background .25s ease!important}
.btn.p{background: linear-gradient(120deg, #3b69d9, #6559d9 58%, #448ec8)!important; border: 1px solid rgba(192, 220, 255, .38)!important; box-shadow: 0 10px 30px rgba(64, 103, 216, .25), inset 0 1px rgba(255, 255, 255, .16)!important}
.btn.s{background: rgba(5, 13, 27, .62)!important; border: 1px solid rgba(175, 201, 239, .26)!important; color: #e5efff!important; backdrop-filter: blur(12px)}
.btn:hover{transform: translateY(-3px); box-shadow: 0 15px 38px rgba(51, 107, 218, .28)!important}
.stats{gap: 13px; margin-block: 18px 28px}
.stat{border: 1px solid var(--line)!important; border-radius: 17px!important; background: linear-gradient(145deg, rgba(13, 27, 48, .9), rgba(5, 12, 24, .92))!important; box-shadow: inset 0 1px rgba(255, 255, 255, .035); padding: 17px!important; transition: transform .25s, border-color .25s}
.stat:hover{transform: translateY(-3px); border-color: rgba(123, 231, 255, .28)!important}
.stat .num{font-family: 'Inter Local', 'Noto Sans Arabic', sans-serif; color: #e5f5ff!important; font-weight: 700; text-shadow: 0 0 25px rgba(110, 188, 255, .18)}
.sub,.head .sub{color: #a8b8d0!important; line-height: 2!important}
.meta{border: 1px solid rgba(133, 173, 232, .2)!important; background: rgba(13, 30, 53, .68)!important; border-radius: 999px!important; color: #b9cde8!important; padding: 7px 12px!important}
button,input,select,textarea{font-family: 'Noto Sans Arabic', Tahoma, sans-serif}
.kicker{font-family: 'Noto Sans Arabic', sans-serif}
@media(min-width:1200px){.hero{min-height: 465px}.hero>.rise{padding-inline: clamp(35px, 5vw, 76px)!important}}
@media(max-width:860px){.hero{background-position: center, center, 61% center!important; min-height: 390px}.hero>.rise{max-width: 100%}.stats{gap: 9px}.stat{padding: 13px!important}}
@media(max-width:560px){.hero{min-height: 0; background-image: linear-gradient(90deg, rgba(3, 8, 19, .88), rgba(3, 8, 19, .58)), linear-gradient(0deg, rgba(3, 7, 17, .58), transparent 70%), url('../images/photo_30584998694_x.jpg')!important; background-position: center, center, 60% center!important; border-radius: 20px!important}.hero>.rise{padding: 28px 21px 30px!important}.hero h1{font-size: clamp(2rem, 8vw, 2.8rem)!important}.hero p{font-size: .9rem}.stats{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px}.stat{padding: 10px 6px!important; border-radius: 13px!important}.stat em,.stat span{font-size: .7rem}.stat .num{font-size: 1.25rem}}
.hero{min-height: 590px; position: relative; isolation: isolate}
.hero:before{content: ""; position: absolute; z-index: -1; inset: 4% -3% 0 15%; border-radius: 38px; background: linear-gradient(90deg, #030611 0%, rgba(3, 6, 17, .8) 34%, rgba(3, 6, 17, .08) 100%), linear-gradient(0deg, #030611 0%, transparent 55%), url('../images/photo_30584998694_x.jpg') center/cover; opacity: .68; filter: saturate(1.12); animation: heroBreathe 16s ease-in-out infinite alternate}
@keyframes heroBreathe{from {
        transform: scale(1);
        filter: saturate(1.05) hue-rotate(0deg)
    }
    to {
        transform: scale(1.035);
        filter: saturate(1.3) hue-rotate(8deg)
    }}
.visual-universe{margin: 24px auto 88px; position: relative; padding: clamp(20px, 4vw, 48px); border: 1px solid #a3b9ff20; border-radius: 28px; background: linear-gradient(135deg, #11172bba, #080d1cb8); box-shadow: 0 30px 90px #0005; overflow: hidden}
.visual-universe:before{content: ""; position: absolute; width: 360px; height: 360px; left: -180px; top: -180px; border-radius: 50%; background: #6849ff24; filter: blur(40px); animation: nebulaDrift 12s ease-in-out infinite alternate}
@keyframes nebulaDrift{to {
        transform: translate(110px, 130px) scale(1.3);
        background: #16c9e71c
    }}
.visual-top{position: relative; margin-bottom: 26px}
.visual-top>span{font: 600 10px/1.6 'Inter Local', sans-serif; letter-spacing: .2em; color: #70e7ff}
.visual-top h2{font-size: clamp(26px, 4vw, 44px); margin: 10px 0; color: #f5f7ff}
.visual-top h2 i{font-style: normal; color: #8deaff}
.visual-top p{max-width: 600px; color: #aeb9d4; line-height: 2}
.visual-gallery{display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 270px; gap: 14px; position: relative}
.space-photo{position: relative; display: block; overflow: hidden; border-radius: 18px; isolation: isolate; border: 1px solid #c7d6ff20; background: #0c1226; transform: translateZ(0); min-width: 0}
.space-photo:after{content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2, 5, 16, .92), transparent 65%), linear-gradient(135deg, #6f5cff25, transparent 60%); z-index: 0; transition: opacity .45s}
.space-photo img{width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .8s; filter: saturate(.9) brightness(.8)}
.space-photo:hover img{transform: scale(1.09); filter: saturate(1.22) brightness(1.02)}
.space-photo:hover:after{opacity: .78}
.photo-caption{position: absolute; right: 20px; bottom: 20px; z-index: 1; display: grid; gap: 7px}
.photo-caption small{font: 600 9px 'Inter Local', sans-serif; letter-spacing: .16em; color: #85eaff}
.photo-caption b{font-size: clamp(16px, 2vw, 22px); color: #fff}
.photo-arrow{position: absolute; left: 16px; top: 16px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff55; border-radius: 50%; background: #08102377; color: white; transition: transform .3s, background .3s}
.space-photo:hover .photo-arrow{transform: rotate(45deg); background: #6458e8}
.gallery-foot{display: flex; align-items: center; gap: 9px; color: #7f8ca9; font-size: 11px; margin-top: 18px}
.pulse-dot{width: 7px; height: 7px; background: #65e6ff; border-radius: 50%; box-shadow: 0 0 14px #65e6ff; animation: dotPulse 1.8s ease-in-out infinite}
@keyframes dotPulse{50% {
        opacity: .35;
        box-shadow: 0 0 3px #65e6ff
    }}
button,.btn,a{-webkit-tap-highlight-color: transparent}
@media(max-width:800px){.hero{min-height: 520px}.hero:before{inset: 0 -5% 0 0; opacity: .42; background-position: 58% center}.visual-gallery{grid-template-columns: 1fr 1fr; grid-template-rows: 220px 190px}.photo-earth{grid-column: 1/-1}.visual-universe{margin: 16px auto 55px; padding: 20px 14px}.photo-caption{right: 14px; bottom: 14px}}
@media(max-width:480px){.visual-gallery{grid-template-columns: 1fr; grid-template-rows: 230px 190px 190px}.photo-earth{grid-column: auto}.hero{min-height: 500px}.visual-top h2{font-size: 27px}}
.wrap,header.wrap,main.wrap,main.wrap>section,.visual-universe,.visual-gallery>*{min-width: 0;}
@media (min-width: 721px){body>.visual-universe{width: auto; max-width: none; margin: 24px var(--sidebar-width) 48px 0;}body>header.wrap .hero{display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(16px, 2vw, 30px);}body>header.wrap .hero>.rise,body>header.wrap .hero>.orbit{min-width: 0;}.visual-gallery{grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);}.visual-gallery .photo-earth{grid-row: span 2;}}
@media (min-width:721px) and (max-width:1050px){body>.visual-universe{padding: 22px;}body>header.wrap .hero{grid-template-columns: minmax(0, 1fr); gap: 14px;}body>header.wrap .hero>.orbit{width: min(100%, 300px); min-height: 0;}.visual-gallery{grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 190px;}.visual-gallery .photo-earth{grid-column: 1 / -1; grid-row: auto;}}
@media (max-width:720px){body>.visual-universe{width: auto; max-width: none; margin: 16px 14px 30px; padding: 20px 14px;}body>header.wrap .hero{display: flex; flex-direction: column; align-items: stretch; min-height: 0;}body>header.wrap .hero>.orbit{order: 0; width: min(100%, 340px); min-height: 0;}body>header.wrap .hero>.rise{padding: 24px 18px;}.visual-gallery{grid-template-columns: repeat(2, minmax(0, 1fr));}.visual-gallery .photo-earth{grid-column: 1 / -1; grid-row: auto;}.head,.head .meta{min-width: 0; max-width: 100%;}}
@media (max-width:560px){.visual-gallery{grid-template-columns: minmax(0, 1fr); grid-template-rows: 230px 190px 190px;}.visual-gallery .photo-earth{grid-column: auto;}.stats{grid-template-columns: repeat(3, minmax(0, 1fr));}.stat{min-width: 0; padding-inline: 6px;}.stat .num{font-size: clamp(1.05rem, 5vw, 1.35rem);}}
@media (min-width:1440px){body>.visual-universe{padding: clamp(24px, 3vw, 48px);}.hero{min-height: clamp(440px, 34vw, 560px);}.hero h1{font-size: clamp(2.7rem, 3.2vw, 4.2rem);}}
@media (max-width: 720px){body>header.wrap .hero>.orbit{align-self: center;}.stats{min-width: 0;}}
@media (min-width: 721px){body>header.wrap,body>main.wrap,body>.visual-universe,body>footer{float: none !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: var(--sidebar-width) !important; width: calc(100% - var(--sidebar-width)) !important; max-width: none !important; min-width: 0 !important; transform: none !important;}body>.visual-universe{margin-top: 24px !important; margin-bottom: 42px !important; padding: clamp(18px, 2.5vw, 36px) !important;}}
@media (max-width: 720px){body>header.wrap,body>main.wrap,body>.visual-universe,body>footer{position: relative !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; transform: none !important;}body>.visual-universe{width: auto !important; margin: 16px 12px 30px !important; padding: 20px 14px !important;}}
.hub-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px}
.hub-card{position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 168px; padding: 20px 20px 16px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s, background .2s}
.hub-card:hover,.hub-card:focus-visible{border-color: rgba(53, 214, 232, .5); background: linear-gradient(165deg, rgba(53, 214, 232, .08), rgba(109, 74, 255, .04)); transform: translateY(-2px); outline: none}
.hub-card .hub-tag{font: 300 .66rem var(--display); letter-spacing: .2em; color: var(--muted); direction: ltr; text-align: right}
.hub-card h3{margin: 0; font-size: 1.08rem; font-weight: 500}
.hub-card p{margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.9}
.hub-card .hub-go{margin-top: auto; padding-top: 6px; color: var(--cyan); font-size: .82rem}
@media (max-width: 1100px){.hub-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}}
@media (max-width: 640px){.hub-grid{grid-template-columns: 1fr}.hub-card{min-height: 0}}

/* APOD: عکس نجومی روز */
.apod{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);margin:22px 0 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));min-height:250px}
.apod[hidden]{display:none}
.apod-media{position:relative;min-height:220px;background:var(--s2)}
.apod-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.apod-media.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);background-size:200% 100%;animation:apodsk 1.6s linear infinite}
@keyframes apodsk{from{background-position:200% 0}to{background-position:-200% 0}}
.apod-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px}
.apod-kicker{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.apod-kicker b{color:var(--gold);font-weight:500}
.apod-title{margin:0;font-size:1.2rem;font-weight:500;line-height:1.6;overflow-wrap:anywhere}
.apod-text{margin:0;color:#d7dceb;font-size:.88rem;line-height:2}
.apod-note,.apod-credit{font-size:.7rem;color:var(--muted);line-height:1.8}
.apod-link{margin-top:auto;color:var(--cyan);font-size:.82rem;text-decoration:none}
@media(max-width:720px){.apod{grid-template-columns:1fr}.apod-media{min-height:0;aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.apod-media.sk::after{animation:none}}

/* ماه امشب */
.moon-card{display:flex;align-items:center;gap:22px;margin:16px 0 0;padding:16px 22px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.moon-svg{flex:none;width:96px;height:96px}
.moon-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.moon-kicker{font-size:.72rem;color:var(--gold);letter-spacing:.04em}
.moon-pct{font-size:2rem;font-weight:500;line-height:1.3}
.moon-name{font-size:.95rem}
.moon-age{font-size:.8rem;color:var(--muted)}
.moon-note{margin-top:4px;font-size:.68rem;color:var(--muted);line-height:1.8}
@media(max-width:480px){.moon-card{gap:16px;padding:14px 16px}.moon-svg{width:80px;height:80px}}