:root{--navy:#091523;--navy2:#0e2033;--ink:#132235;--muted:#6f7c8c;--line:#dfe6ed;--paper:#f6f8fa;--white:#fff;--cyan:#55d6c2;--blue:#4c8dff;--gold:#c9a96e;--shadow:0 25px 70px rgba(9,21,35,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Cairo,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.7}a{text-decoration:none;color:inherit}
section{scroll-margin-top:90px}button{font:inherit} .container{width:min(1160px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(9,21,35,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.nav-wrap{height:76px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.08em;margin-right:auto}.brand-mark{width:34px;height:34px;border:1px solid rgba(85,214,194,.6);border-radius:10px;display:grid;place-items:center;color:var(--cyan);font-size:14px}.brand-accent{color:var(--cyan)}.nav{display:flex;gap:22px;color:#9eabba;font-size:13px}.nav a{position:relative;padding:28px 0}.nav a:hover,.nav a.active{color:#fff}.nav a.active:after{content:"";position:absolute;bottom:17px;left:0;right:0;height:2px;background:var(--cyan)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:13px 19px;font-size:13px;font-weight:800;transition:.2s;border:1px solid transparent}.btn-primary{background:var(--cyan);color:#082018}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(85,214,194,.22)}.btn-ghost{border-color:rgba(255,255,255,.16);color:#fff}.nav-cta{margin-left:10px}.menu-toggle{display:none;background:none;border:0}.menu-toggle span{display:block;width:23px;height:2px;background:#fff;margin:5px}
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:710px;display:grid;align-items:center}.grid-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(76,141,255,.16),transparent 65%);right:-200px;top:-250px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;padding:85px 0}.status{display:inline-flex;align-items:center;gap:9px;color:#b9c7d6;font-size:11px;border:1px solid rgba(255,255,255,.12);padding:7px 11px;border-radius:30px}.status span{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(85,214,194,.08)}.kicker{color:var(--cyan);letter-spacing:.24em;font-weight:800;font-size:12px;margin:28px 0 10px}.hero h1{font-size:clamp(55px,8vw,100px);line-height:.9;letter-spacing:-.055em;margin:0}.hero h1 span{color:#9bbcf2}.hero-text{max-width:590px;color:#b4c0ce;font-size:17px;margin:28px 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-meta{display:flex;gap:32px;margin-top:48px}.hero-meta div{display:flex;flex-direction:column}.hero-meta b{font-size:15px}.hero-meta span{font-size:10px;color:#8290a0;text-transform:uppercase;letter-spacing:.08em}.hero-visual{min-height:480px;position:relative;display:grid;place-items:center}.engineering-card{width:min(520px,100%);background:linear-gradient(145deg,#132a43,#0b1828);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:28px;box-shadow:0 35px 90px rgba(0,0,0,.32);transform:rotate(2deg);position:relative;z-index:2}.card-topline{display:flex;justify-content:space-between;color:#7e91a6;font-size:10px;letter-spacing:.14em}.process-diagram{display:flex;align-items:center;justify-content:center;gap:12px;margin:55px 0}.process-diagram i{width:28px;height:1px;background:linear-gradient(90deg,rgba(85,214,194,.2),var(--cyan));position:relative}.process-diagram i:after{content:"›";position:absolute;right:-2px;top:-13px;color:var(--cyan)}.node{width:112px;height:105px;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 12px;display:flex;flex-direction:column;justify-content:center;gap:5px;background:rgba(255,255,255,.025)}.node.highlight{border-color:rgba(85,214,194,.55);background:rgba(85,214,194,.06);transform:translateY(-10px)}.node strong{font-size:11px;letter-spacing:.1em}.node small{color:#7e91a6;font-size:9px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.08);padding-top:20px;gap:15px}.metric-row div{display:flex;flex-direction:column}.metric-row small{font-size:8px;color:#718399;letter-spacing:.1em}.metric-row b{font-size:12px;color:#dbe4ed}.orbit{position:absolute;border:1px solid rgba(85,214,194,.16);border-radius:50%}.orbit-one{width:410px;height:410px}.orbit-two{width:540px;height:230px;transform:rotate(-30deg)}.floating-note{position:absolute;bottom:25px;left:5px;z-index:3;background:#fff;color:var(--ink);border-radius:15px;padding:14px 17px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow)}.floating-note>span{width:34px;height:34px;border-radius:9px;background:#e8faf6;color:#179b85;display:grid;place-items:center}.floating-note div{display:flex;flex-direction:column}.floating-note b{font-size:11px}.floating-note small{font-size:9px;color:var(--muted)}
.section{padding:110px 0}.intro{background:#fff}.split{display:grid;grid-template-columns:220px 1fr;gap:70px}.section-label{display:flex;gap:14px;align-items:flex-start;color:#7d8996;font-size:11px;letter-spacing:.14em}.section-label span,.section-number{color:var(--blue);font-weight:800}.intro-copy{max-width:800px}.lead{font-size:clamp(25px,3.2vw,42px);line-height:1.35;font-weight:700;margin:0 0 25px;letter-spacing:-.03em}.intro-copy>p:not(.lead){color:var(--muted);max-width:700px}.signature-line{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:13px}.signature-line span{width:44px;height:1px;background:var(--gold)}.signature-line b{font-size:12px}.signature-line small{color:var(--muted);font-size:10px}
.skills{background:var(--paper)}.section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:45px}.section-head h2,.course-copy h2,.contact-copy h2{font-size:clamp(35px,5vw,60px);line-height:1.05;margin:10px 0 0;letter-spacing:-.04em}.section-head h2 em,.course-copy h2 em,.contact-copy h2 em{font-style:normal;color:var(--blue)}.section-head>p{max-width:370px;color:var(--muted);font-size:13px}.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.skill{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;min-height:200px;position:relative;transition:.25s}.skill:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.skill-no{font-size:10px;color:#9ba6b2;letter-spacing:.1em}.skill h3{font-size:21px;margin:32px 0 7px}.skill p{font-size:12px;color:var(--muted);margin:0}.skill.featured{background:var(--navy);color:#fff;border-color:var(--navy)}.skill.featured p{color:#9aa9ba}.badge{position:absolute;top:25px;right:25px;color:var(--cyan);font-size:8px;letter-spacing:.12em}
.experience{background:#fff}.timeline{border-top:1px solid var(--line)}.timeline-item{display:grid;grid-template-columns:240px 1fr;gap:50px;padding:35px 0;border-bottom:1px solid var(--line)}.time{font-size:10px;color:#8b97a4;letter-spacing:.1em;padding-top:5px}.timeline-main{position:relative;padding-left:28px;border-left:1px solid #dce4eb}.timeline-dot{position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px #e9faf7}.timeline-main h3{font-size:23px;margin:0}.timeline-main h4{font-size:13px;color:var(--blue);margin:4px 0 14px}.timeline-main p,.timeline-main li{font-size:13px;color:var(--muted)}.timeline-main ul{padding-left:18px;margin:0}
.projects{background:var(--paper)}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.25s}.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.project-number{padding:18px 20px 0;font-size:9px;letter-spacing:.13em;color:#8995a2}.project-visual{height:220px;margin:12px;position:relative;border-radius:14px;overflow:hidden;background:#10263e;display:flex;align-items:center;justify-content:center}.project-visual>span{position:absolute;top:18px;left:18px;font-size:9px;letter-spacing:.18em;color:var(--cyan)}.pv-one{background:linear-gradient(135deg,#0b1a2b,#183b58)}.flow{display:flex;align-items:center;gap:8px}.flow i{width:52px;height:52px;border:1px solid rgba(85,214,194,.45);border-radius:12px;position:relative}.flow i:after{content:"";position:absolute;left:12px;right:12px;top:24px;height:2px;background:var(--cyan)}.flow i:nth-child(2){transform:translateY(-18px);background:rgba(85,214,194,.08)}.pv-two{background:#edf4fa}.bars{height:130px;display:flex;align-items:end;gap:12px}.bars i{width:28px;background:#4c8dff;border-radius:7px 7px 0 0}.bars i:nth-child(1){height:45px}.bars i:nth-child(2){height:75px}.bars i:nth-child(3){height:105px;background:#55d6c2}.bars i:nth-child(4){height:88px}.pv-three{background:#0e2033}.rings{width:170px;height:170px;position:relative}.rings i{position:absolute;inset:0;border:1px solid rgba(85,214,194,.25);border-radius:50%}.rings i:nth-child(2){inset:25px;border-color:rgba(76,141,255,.35)}.rings i:nth-child(3){inset:50px;border-color:rgba(201,169,110,.45)}.project-body{padding:8px 22px 25px}.project-body>span{font-size:9px;color:var(--blue);letter-spacing:.12em;font-weight:800}.project-body h3{font-size:21px;margin:5px 0}.project-body p{font-size:12px;color:var(--muted);min-height:60px}.chips{display:flex;gap:6px;flex-wrap:wrap}.chips b{font-size:9px;background:#eef3f7;padding:5px 8px;border-radius:6px;color:#647180}.project-link{margin-top:18px;background:none;border:0;padding:0;color:var(--ink);font-size:12px;font-weight:800;cursor:pointer}.project-link:hover{color:var(--blue)}.project-admin-note{margin-top:25px;border:1px dashed #b9c6d3;border-radius:12px;padding:13px 15px;font-size:11px;color:#748190}.project-admin-note span{color:#0f9f88;font-weight:800;margin-right:8px}
.courses{background:var(--navy);color:#fff}.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.course-copy p{color:#9cabbc}.course-list{border-top:1px solid rgba(255,255,255,.1)}.course-list>div{display:grid;grid-template-columns:40px 1fr auto;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1)}.course-list span{color:var(--cyan);font-size:10px}.course-list b{font-size:15px}.course-list small{color:#8291a3;font-size:9px}
.contact{background:#fff}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.contact-copy p{color:var(--muted);max-width:470px;margin:25px 0}.contact-card{display:flex;flex-direction:column;gap:10px}.contact-card>a,.contact-card>div{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid var(--line);border-radius:14px}.contact-card> a:hover{border-color:#b8c7d8}.contact-card span{width:40px;height:40px;border-radius:10px;background:#eef5ff;color:var(--blue);display:grid;place-items:center}.contact-card div div{display:flex;flex-direction:column}.contact-card small{font-size:9px;color:#909ba7;letter-spacing:.1em}.contact-card b{font-size:12px}
footer{background:#07111d;color:#8e9cac;padding:28px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-inner>div{display:flex;flex-direction:column}.footer-inner b{color:#fff;font-size:14px}.footer-inner small,.footer-inner p,.footer-inner>a{font-size:10px}.footer-inner>a:hover{color:#fff}.visitor-counter{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(85,214,194,.18);border-radius:999px;color:#aab7c5;font-size:10px;background:rgba(255,255,255,.02)}.visitor-counter>span:first-child{color:var(--cyan)}.visitor-counter b{color:#fff}
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center}.modal.show{display:grid}.modal-backdrop{position:absolute;inset:0;background:rgba(3,10,17,.72);backdrop-filter:blur(7px)}.modal-box{position:relative;z-index:2;width:min(600px,calc(100% - 30px));background:#fff;border-radius:22px;padding:35px;box-shadow:0 30px 100px rgba(0,0,0,.3)}.modal-close{position:absolute;top:13px;right:15px;border:0;background:#eef2f5;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:23px}.modal-box>span{font-size:9px;color:var(--blue);font-weight:800;letter-spacing:.12em}.modal-box h2{font-size:34px;line-height:1.1;margin:10px 0}.modal-box p{color:var(--muted);font-size:13px}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-grid div{background:#f5f7f9;padding:14px;border-radius:11px;display:flex;flex-direction:column}.modal-grid small{font-size:8px;color:#8a96a3}.modal-grid b{font-size:11px}.modal-hint{border-left:3px solid var(--cyan);padding-left:12px!important}
.reveal{opacity:0;transform:translateY(20px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.nav{gap:13px}.nav-cta{display:none}.mobile-cv-link{display:none}.hero-grid{grid-template-columns:1fr;gap:30px}.hero-visual{min-height:430px}.split{grid-template-columns:1fr;gap:25px}.skills-grid,.project-grid{grid-template-columns:1fr 1fr}.section-head{display:block}.section-head>p{margin-top:15px}.timeline-item{grid-template-columns:170px 1fr}.course-grid,.contact-grid{gap:45px}}
@media(max-width:700px){.container{width:min(100% - 28px,1160px)}.nav{position:absolute;display:none;top:76px;left:14px;right:14px;background:#0e2033;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:8px;flex-direction:column;gap:0}.nav.open{display:flex}.nav a{padding:11px 14px}.nav a.active:after{display:none}.mobile-cv-link{display:block;margin:6px 0 2px;padding:13px 14px!important;border-radius:10px;background:#54d6c8;color:#071421!important;font-weight:800;text-align:center}.menu-toggle{display:block}.hero{min-height:auto}.hero-grid{padding:70px 0}.hero h1{font-size:60px}.hero-meta{gap:18px;flex-wrap:wrap}.engineering-card{transform:none}.process-diagram{gap:5px}.node{width:85px;height:90px}.process-diagram i{width:15px}.floating-note{left:0;bottom:0}.section{padding:75px 0}.skills-grid,.project-grid,.course-grid,.contact-grid{grid-template-columns:1fr}.timeline-item{grid-template-columns:1fr;gap:12px}.timeline-main{padding-left:22px}.footer-inner{flex-direction:column;align-items:flex-start}.modal-grid{grid-template-columns:1fr}}


/* Keep the Quran audio player invisible; playback is attempted automatically. */
#quranAudio{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;bottom:0;left:0}

/* Quran start prompt: shown only when the browser blocks audible autoplay. */
.quran-prompt{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,10,18,.82);backdrop-filter:blur(7px)}
.quran-prompt.hidden{display:none}
.quran-prompt-card{width:min(420px,100%);padding:30px 24px;text-align:center;background:#0b1a29;border:1px solid rgba(84,214,200,.25);border-radius:18px;box-shadow:0 20px 70px rgba(0,0,0,.4)}
.quran-prompt-ar{font-size:24px;line-height:1.9;color:#fff;margin-bottom:10px}
.quran-prompt-title{font-size:22px;font-weight:800;color:#54d6c8}
.quran-prompt-card p{margin:8px 0 20px;color:#9eacba;font-size:13px}
.quran-prompt-card button{border:0;border-radius:10px;padding:13px 20px;background:#54d6c8;color:#071421;font-weight:800;cursor:pointer}


/* Quran prompt close button */
.quran-prompt-card{position:relative}
.quran-prompt-card .quran-close{position:absolute;top:14px;right:14px;width:38px!important;height:38px!important;padding:0!important;margin:0;border:1px solid rgba(255,255,255,.16)!important;border-radius:50%!important;background:rgba(7,17,29,.72)!important;color:#fff!important;font-size:24px!important;font-weight:400;line-height:1!important;cursor:pointer;display:grid!important;place-items:center;box-shadow:none!important;z-index:3}
.quran-prompt-card .quran-close:hover{background:#54d6c8!important;color:#071421!important;border-color:#54d6c8!important;transform:scale(1.04)}
@media(max-width:480px){.quran-prompt-card{padding:34px 18px 28px}.quran-prompt-ar{font-size:21px}.quran-prompt-title{font-size:20px}.quran-prompt-card .quran-close{top:10px;right:10px;width:36px!important;height:36px!important;font-size:22px!important}}