@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
:root{--bg:#0b0b0f;--surface:#15161b;--card:#1b1d22;--orange:#ff8a00;--muted:#9397a1;--line:#ffffff14}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#fff;font-family:Tajawal,Arial,sans-serif;line-height:1.7}a{color:inherit;text-decoration:none}header{position:absolute;z-index:10;inset:0 0 auto;height:78px;padding:0 max(24px,calc((100% - 1180px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:2px;direction:ltr}.logo em,.site-footer em{color:var(--orange);font-style:normal}.logo i{height:26px;display:flex;align-items:end;gap:3px;transform:skew(-12deg)}.logo b{display:block;width:7px;background:var(--orange)}.logo b:nth-child(1){height:13px}.logo b:nth-child(2){height:24px}.logo b:nth-child(3){height:18px}nav{display:flex;gap:34px}nav a{color:#bbbfc7;font-size:13px;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:7px;background:var(--orange);color:#111;font-weight:800;transition:.25s;box-shadow:0 12px 35px #ff8a0020}.btn:hover{transform:translateY(-2px);background:#ffa726}.btn.small{min-height:40px}.btn.ghost{background:#ffffff08;color:white;border:1px solid var(--line);box-shadow:none}.hero{height:780px;position:relative;display:flex;align-items:center;overflow:hidden}.hero-image{position:absolute;inset:0;background:url('../images/raincodes-hero.webp') center/cover}.shade{position:absolute;inset:0;background:linear-gradient(270deg,#0b0b0ff0 0%,#0b0b0fa8 40%,transparent 75%),linear-gradient(0deg,var(--bg),transparent 30%)}.hero-copy{position:relative;z-index:2;width:min(1180px,calc(100% - 48px));margin:auto}.hero-copy>*{max-width:600px}.eyebrow{color:var(--orange);font-size:11px;font-weight:800;letter-spacing:1.5px}.hero h1{font-size:76px;line-height:1.07;margin:18px 0;font-weight:800;letter-spacing:-3px}.hero h1 em{color:var(--orange);font-style:normal}.hero p{font-size:18px;color:#b4b7bf}.actions{display:flex;gap:12px;margin:32px 0 12px}.hero small{color:#666b74}.stats{min-height:110px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;border-block:1px solid var(--line);background:#0e0f13;padding-inline:max(24px,calc((100% - 1180px)/2))}.stats div{text-align:center;border-left:1px solid var(--line)}.stats div:last-child{border:0}.stats b,.stats span{display:block}.stats b{font-size:23px}.stats span{font-size:10px;color:#777c85;letter-spacing:1px}.section{padding:120px max(24px,calc((100% - 1180px)/2))}.heading{max-width:630px;margin-bottom:50px}.heading h2,.launcher h2,.community h2{font-size:45px;line-height:1.2;margin:12px 0;letter-spacing:-1px}.heading p,.launcher>div>p,.community p{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tool,.plan{padding:30px;background:linear-gradient(145deg,#1c1e23,#121318);border:1px solid var(--line);border-radius:10px;transition:.3s}.tool:hover{transform:translateY(-6px);border-color:#ff8a0055}.tool-head{display:flex;justify-content:space-between;align-items:center}.tool-head i{font-style:normal;font-size:28px;color:var(--orange);width:58px;height:58px;border:1px solid #ff8a0066;border-radius:10px;display:grid;place-items:center}.tool-head span{font-size:9px;color:#777c85;border:1px solid var(--line);padding:4px 8px}.tool h3{font-size:21px;margin:27px 0 5px}.tool>p{font-size:13px;color:#8e929c;min-height:50px}.tool footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.tool footer small{color:#676b74}.tool footer a{font-size:12px;font-weight:700}.launcher{padding:130px max(24px,calc((100% - 1180px)/2));display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center;background:radial-gradient(circle at 25% 50%,#ff8a0010,transparent 35%),#0e0f13;border-block:1px solid var(--line)}.launcher ul,.plan ul{padding:0;list-style:none;color:#c2c5cc;font-size:13px}.launcher li{margin:10px 0}.app{border:1px solid #ffffff22;border-radius:12px;background:#17181d;box-shadow:0 35px 80px #000;direction:ltr}.appbar{height:38px;display:flex;gap:6px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.appbar i{width:6px;height:6px;border-radius:50%;background:#44474e}.appbar b{font-size:8px;margin:auto}.appbody{height:360px;display:flex}.appbody aside{width:58px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:25px;padding:25px 0;color:var(--orange)}.appbody aside span{color:#666}.appbody>div{flex:1;padding:27px}.appbody h3{margin:4px 0 18px}.appbody article{height:210px;padding:24px;background:linear-gradient(90deg,#0a0a0dcc,transparent),url('../images/raincodes-hero.webp') center/cover;border-radius:8px}.appbody article span,.appbody article b{display:block}.appbody article span{color:var(--orange);font-size:9px}.appbody article b{font-size:24px;margin-top:12px}.appbody article p{font-size:11px;color:#bbb}.appbody button{border:0;border-radius:4px;background:var(--orange);font-weight:800;padding:8px 18px}.prices{background:#0e0f13}.center{text-align:center;margin-inline:auto}.plan{position:relative}.plan.featured{border-color:#ff8a0099;transform:scale(1.04);box-shadow:0 0 45px #ff8a0014}.popular{position:absolute;left:20px;top:17px;color:var(--orange);font-size:9px}.price b{font-size:42px}.price small{color:#777}.plan .btn{width:100%;margin:20px 0}.plan li{margin:9px 0;color:#999}.community{text-align:center;padding:140px 24px;background:radial-gradient(circle,#5865f220,transparent 35%)}.community p{margin:0 auto 28px}.btn.discord{background:#5865f2;color:white}.site-footer{min-height:100px;padding:30px max(24px,calc((100% - 1180px)/2));display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);color:#6f737c}.site-footer>span{font-weight:800;letter-spacing:2px;direction:ltr}@media(max-width:800px){header nav,header>.btn{display:none}.hero{height:700px}.hero h1{font-size:50px}.shade{background:linear-gradient(270deg,#0b0b0ff2,#0b0b0f88)}.stats{grid-template-columns:1fr 1fr;padding-block:18px}.stats div{border:0;padding:10px}.cards,.launcher{grid-template-columns:1fr}.section{padding-block:80px}.launcher{gap:50px}.heading h2,.launcher h2,.community h2{font-size:35px}.plan.featured{transform:none}.appbody{height:330px}.site-footer{flex-direction:column;text-align:center}.actions{flex-direction:column;align-items:stretch}.hero-copy{width:calc(100% - 32px)}}