/*
Theme Name: Saadbah Cosmos
Author: Saadbah
Description: A complete animated, interactive maintenance experience for Saadbah.com.
Version: 5.1
*/
:root{--bg:#040a12;--panel:#081521;--text:#f7fbff;--muted:#9aacbc;--blue:#22b6ff;--cyan:#8ce4ff;--green:#22df7a;--gold:#ffd18a;--line:#ffffff18;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit}
#stars{position:fixed;inset:0;z-index:-5}.noise{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.06;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.shell{width:min(calc(100% - 36px),var(--max));margin:auto}.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:#030912aa;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff0b}.navin{height:74px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:25px;font-weight:900;letter-spacing:-1px}.logo span{color:var(--blue)}.navlinks{display:flex;gap:4px}.navlinks a{font-size:10px;font-weight:850;letter-spacing:1px;text-transform:uppercase;color:#aebdca;padding:10px 12px;border-radius:10px}.navlinks a:hover,.navlinks a.active{background:#ffffff08;color:#fff}
.hero{min-height:100vh;padding-top:74px;display:grid;place-items:center;position:relative;overflow:hidden}.hero-inner{text-align:center;padding:75px 0;position:relative}.halo{position:absolute;left:50%;top:52%;width:min(80vw,750px);height:min(80vw,750px);transform:translate(-50%,-50%);border-radius:50%;border:1px solid #20b5ff18;box-shadow:0 0 100px #20b5ff0c,inset 0 0 100px #20b5ff08;animation:spin 35s linear infinite}.halo:before,.halo:after{content:"";position:absolute;border-radius:50%;border:1px solid #ffffff0c}.halo:before{inset:8%;animation:spin 20s linear reverse infinite}.halo:after{inset:20%;border-color:#20b5ff14}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.hero-inner>*:not(.halo){position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid #22b6ff66;background:#061522cc;border-radius:999px;padding:10px 16px;color:#dff4ff;font-size:10px;font-weight:900;letter-spacing:1.8px}.live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 20px var(--green);animation:beat 1.5s infinite}@keyframes beat{50%{transform:scale(.55);opacity:.65}}
h1{font-size:clamp(54px,9vw,108px);line-height:.9;letter-spacing:-6px;margin:28px 0 22px}h1 .blue{color:var(--blue)}.lead{max-width:700px;margin:auto;color:#c2cfda;font-size:17px;line-height:1.8}.lead b{color:#60caff}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:30px 0}.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 17px;border:1px solid var(--line);border-radius:12px;color:#eaf6ff;background:#07131eb8;font-size:11px;font-weight:900;transition:.25s}.btn:hover{transform:translateY(-3px);border-color:#35bcff66}.primary{background:var(--blue);color:#031019;border-color:var(--blue);box-shadow:0 12px 40px #20b6ff22}
.quick{display:grid;grid-template-columns:repeat(4,1fr);max-width:850px;margin:50px auto 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#06111bd9}.quick a{padding:20px 10px;border-right:1px solid var(--line);font-size:10px;font-weight:900;letter-spacing:.8px}.quick a:last-child{border:0}.quick small{display:block;color:#6f8598;font-size:9px;margin-top:4px;font-weight:500}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s ease}.reveal.show{opacity:1;transform:none}
.section{padding:115px 0}.kicker{color:var(--blue);font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase}.section h2{font-size:clamp(36px,5vw,65px);line-height:1;letter-spacing:-3px;margin:9px 0 15px}.intro{color:var(--muted);max-width:650px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:35px}.card{position:relative;min-height:220px;padding:26px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#0a1826d9,#06101add);overflow:hidden;transition:.28s;transform-style:preserve-3d}.card:hover{box-shadow:0 30px 80px #0009;border-color:#22b6ff55}.card:after{content:"";position:absolute;inset:-80%;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#22b6ff16,transparent 10%);pointer-events:none}.num{font:10px monospace;color:#668096}.card h3{margin:26px 0 8px;font-size:20px}.card p{color:var(--muted);font-size:13px}.arrow{position:absolute;right:20px;bottom:18px;color:var(--blue);font-size:20px}
.orbitbox{height:410px;position:relative;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#12314a44,transparent 38%),#06101a;margin-top:40px}.planet{position:absolute;left:50%;top:50%;width:105px;height:105px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#9ce7ff,#1d9edc 38%,#08365a 72%);box-shadow:0 0 70px #20b6ff55}.orbit{position:absolute;left:50%;top:50%;border:1px solid #20b6ff25;border-radius:50%;transform:translate(-50%,-50%);animation:orbit 14s linear infinite}.o1{width:210px;height:210px}.o2{width:330px;height:330px;animation-duration:21s;animation-direction:reverse}.o3{width:470px;height:470px;animation-duration:31s}.sat{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--blue)}@keyframes orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}.orbitlabel{position:absolute;bottom:18px;left:20px;color:#698195;font:10px monospace}
.terminal{border:1px solid var(--line);border-radius:20px;background:#02070c;overflow:hidden;box-shadow:0 35px 100px #000a;margin-top:38px}.termbar{padding:12px 15px;background:#0c1620;border-bottom:1px solid #ffffff0b}.termbar i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#52616d;margin-right:6px}.termbody{padding:25px;min-height:330px;font:13px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace;color:#b8d4e4}.prompt{color:var(--green)}.cmd{color:#fff}.output{color:#8098a9}.cursor{display:inline-block;width:7px;height:15px;background:var(--blue);vertical-align:-2px;animation:blink .9s infinite}@keyframes blink{50%{opacity:0}}
.reactions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.react{padding:20px;border:1px solid var(--line);border-radius:16px;background:#081521}.react strong{display:block}.react small{color:var(--muted)}
.quote{padding:50px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 90% 10%,#20b6ff16,transparent 38%),#07131f}.quote p{font-size:clamp(25px,4vw,44px);line-height:1.2;letter-spacing:-1px;margin:0}.ref{color:#73899b;font-size:11px;margin-top:18px}
.contact{padding:45px;border:1px solid #20b6ff3b;border-radius:24px;background:radial-gradient(circle at 85% 10%,#20b6ff18,transparent 35%),#081521}.contact h2{margin:8px 0;font-size:clamp(35px,5vw,56px);line-height:1}.wa{display:inline-flex;margin-top:18px;padding:13px 17px;border-radius:12px;background:#1de070;color:#02150a;font-size:11px;font-weight:900}
footer{border-top:1px solid var(--line);padding:28px 0;color:#72879a;font-size:10px}.foot{display:flex;justify-content:space-between;gap:20px}.secret{cursor:pointer}
.cmdmodal,.secretmodal{position:fixed;inset:0;z-index:400;background:#02060ddd;backdrop-filter:blur(17px);display:none;place-items:start center;padding-top:14vh}.cmdmodal.open,.secretmodal.open{display:grid}.cmdbox{width:min(650px,calc(100% - 28px));border:1px solid #20b6ff4d;border-radius:18px;background:#081521;box-shadow:0 40px 120px #000;overflow:hidden}.cmdinput{width:100%;padding:19px 20px;background:#040c13;border:0;border-bottom:1px solid var(--line);color:#fff;outline:0;font-size:15px}.cmdlinks a{display:block;padding:14px 20px;border-bottom:1px solid #ffffff08;color:#aec0ce;font-size:13px}.cmdlinks a:hover{background:#20b6ff0c;color:#fff}.tip{padding:11px 20px;color:#647b8c;font-size:9px}.secretmodal{place-items:center;padding:20px}.secretbox{width:min(600px,100%);padding:42px;border:1px solid #20b6ff55;border-radius:22px;background:#07131f;text-align:center;box-shadow:0 40px 120px #000}.secretbox h2{font-size:44px;letter-spacing:-2px;margin:8px}.code{font:12px monospace;color:var(--blue);letter-spacing:3px;margin:20px}
@media(max-width:800px){.navin{height:66px}.navlinks a{font-size:8px;padding:8px 5px}.quick{grid-template-columns:repeat(2,1fr)}.quick a:nth-child(2){border-right:0}.quick a:nth-child(-n+2){border-bottom:1px solid var(--line)}.cards{grid-template-columns:1fr}.reactions{grid-template-columns:1fr}.orbitbox{height:320px}.o3{width:350px;height:350px}.o2{width:250px;height:250px}.foot{display:block;text-align:center}.foot>*{margin:7px}}
@media(max-width:480px){.shell{width:calc(100% - 26px)}.logo{font-size:21px}.navlinks a{padding:7px 3px;font-size:7px}.hero-inner{padding:55px 0}h1{letter-spacing:-3px}.lead{font-size:14px}.section{padding:75px 0}.quote,.contact{padding:28px}.orbitbox{height:280px}.o3{width:300px;height:300px}}

.about-intro{display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:center;margin:35px 0 70px;max-width:950px}.intro.big{font-size:20px;line-height:1.75}.intro strong{color:#fff}.about-badge{border:1px solid var(--line);border-radius:18px;padding:24px;background:#081521;text-align:center}.about-badge .live{display:block;margin:0 auto 12px}.about-badge strong{display:block;font-size:11px;letter-spacing:1.5px}.about-badge small{display:block;color:#72879a;font-size:10px;margin-top:5px}.skills-kicker{margin:55px 0 20px}.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.skill{padding:20px;border:1px solid var(--line);border-radius:15px;background:#081521;transition:.22s}.skill:hover{border-color:#20b6ff55;transform:translateY(-3px)}.skill span{display:block;color:#61798d;font:10px monospace;margin-bottom:15px}.skill strong{display:block;font-size:15px}.skill small{color:#72879a;font-size:10px}.service-grid{margin-top:0}.contact-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.email-link{display:inline-flex;padding:13px 17px;border:1px solid var(--line);border-radius:12px;font-size:11px;font-weight:800;color:#d9e8f2}
@media(max-width:800px){.about-intro{grid-template-columns:1fr}.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.skills-grid{grid-template-columns:1fr 1fr}.intro.big{font-size:17px}}