@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Tajawal:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#08111f;--bg-soft:#0b1728;--panel:#101f33;--panel-2:#12243a;--text:#f1f6ff;--muted:#9bacc3;--line:rgba(150,185,225,.14);--blue:#168cff;--cyan:#36c5f0;--blue-soft:rgba(22,140,255,.12);--shadow:0 24px 70px rgba(0,0,0,.28);--container:1160px;--header:rgba(8,17,31,.84)}
:root[data-theme="light"]{color-scheme:light;--bg:#f5f8fc;--bg-soft:#edf3fa;--panel:#fff;--panel-2:#f9fbff;--text:#13243b;--muted:#62738a;--line:rgba(35,68,110,.14);--blue:#0879e8;--cyan:#009fce;--blue-soft:rgba(8,121,232,.09);--shadow:0 24px 65px rgba(27,56,92,.11);--header:rgba(245,248,252,.88)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--bg);color:var(--text);font-family:'Tajawal','Inter',sans-serif;line-height:1.8;overflow-x:hidden;transition:background .25s,color .25s}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(rgba(92,156,225,.13) .8px,transparent .8px);background-size:22px 22px;mask-image:linear-gradient(to bottom,black,transparent 75%)}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}.skip-link{position:fixed;top:-100px;inset-inline-start:16px;z-index:999;background:var(--blue);color:#fff;padding:10px 16px;border-radius:10px}.skip-link:focus{top:12px}.site-header{height:82px;position:sticky;top:0;z-index:100;background:var(--header);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.navbar{height:100%;display:flex;align-items:center;justify-content:space-between;gap:26px}.logo{display:inline-flex;align-items:center;gap:11px;font-family:Inter,sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.04em;white-space:nowrap}.logo-mark{width:37px;height:37px;display:grid;place-items:center;border:1px solid rgba(54,197,240,.5);background:linear-gradient(145deg,rgba(22,140,255,.2),rgba(54,197,240,.04));color:var(--cyan);border-radius:11px}.logo-dot,.footer-logo span{color:var(--cyan)}.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,27px);list-style:none;margin:0;padding:0}.nav-links>li>a{font-size:.94rem;color:var(--muted);font-weight:600;transition:color .2s}.nav-links>li>a:hover,.nav-links>li>a:focus-visible{color:var(--cyan)}.language-toggle,.theme-toggle{border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;transition:.2s}.language-toggle{padding:6px 12px;border-radius:9px;font:700 .8rem Inter,sans-serif}.theme-toggle{width:38px;height:38px;border-radius:12px;font-size:1.35rem;line-height:1;color:var(--cyan)}.language-toggle:hover,.theme-toggle:hover{border-color:var(--cyan);transform:translateY(-1px)}.menu-toggle{display:none}
.hero{position:relative;min-height:690px;display:flex;align-items:center;padding:80px 0 95px;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 75% 35%,rgba(13,108,205,.18),transparent 42%),linear-gradient(180deg,transparent,rgba(5,14,27,.15))}.hero-content{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:65px}.hero-copy{position:relative;z-index:2}.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid rgba(54,197,240,.25);background:var(--blue-soft);color:var(--cyan);border-radius:30px;font-size:.88rem;font-weight:700}.status-dot{width:8px;height:8px;border-radius:50%;background:#3ce0a4;box-shadow:0 0 0 4px rgba(60,224,164,.12);flex:none}.hero-eyebrow{margin:25px 0 0;color:var(--muted);font-size:1.15rem}.hero h1{margin:0;font-size:clamp(3rem,6vw,5.6rem);line-height:1.1;letter-spacing:-.055em;font-family:'Inter','Tajawal',sans-serif;font-weight:800}.hero-period{color:var(--cyan)}.hero h2{font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.4;margin:17px 0;color:var(--cyan);font-weight:700}.hero-description{max-width:610px;color:var(--muted);font-size:1.08rem;line-height:2;margin:0}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:29px}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:49px;padding:11px 20px;border-radius:12px;font-weight:700;transition:transform .2s,box-shadow .2s,border-color .2s}.button:hover{transform:translateY(-3px)}.button-primary{background:linear-gradient(110deg,var(--blue),#1679d8);color:#fff;box-shadow:0 10px 28px rgba(22,140,255,.22)}.button-primary:hover{box-shadow:0 14px 32px rgba(22,140,255,.3)}.button-secondary{border:1px solid var(--line);background:var(--panel);color:var(--text)}.button-secondary:hover{border-color:var(--cyan)}.button-arrow{font:700 1.2rem Inter,sans-serif}.hero-tech{display:flex;flex-wrap:wrap;gap:11px;margin-top:33px}.tech-highlight{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 12px;color:var(--muted);font:600 .83rem Inter,sans-serif}.tech-highlight i{font-size:1.18rem}
.hero-art{position:relative;min-height:480px;display:grid;place-items:center;isolation:isolate}.hero-art:before{content:"";position:absolute;inset:0;z-index:-3;background-image:radial-gradient(rgba(72,162,244,.3) .9px,transparent .9px);background-size:15px 15px;mask-image:radial-gradient(ellipse,black,transparent 70%)}.portrait-backdrop{position:absolute;z-index:-2;width:72%;height:85%;right:7%;top:7%;background:linear-gradient(145deg,#0875df 0%,#103a70 50%,#0b203a 100%);clip-path:polygon(20% 0,100% 0,100% 82%,76% 100%,0 100%,0 20%);opacity:.9}.portrait-backdrop:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 48px,rgba(88,196,255,.2) 49px 51px,transparent 52px 90px)}.portrait-frame{position:relative;width:min(78%,365px);height:435px;overflow:hidden;border-radius:42% 42% 16px 16px;border:1px solid rgba(104,202,255,.4);background:linear-gradient(145deg,#1b426b,#0c1b30);box-shadow:0 30px 80px rgba(0,0,0,.32)}.portrait-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(4,13,25,.25))}.portrait-image{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.portrait-placeholder{height:100%;place-items:center;align-content:center;gap:9px;color:#fff;font-family:Inter,sans-serif}.portrait-placeholder span{font-size:9rem;line-height:1;color:#58c8f5;font-weight:800}.portrait-placeholder small{font-size:.65rem;letter-spacing:.2em;color:#bdd9f6}.hero-corner{position:absolute;width:64px;height:64px;border-color:var(--cyan);z-index:3;filter:drop-shadow(0 0 7px rgba(54,197,240,.4))}.corner-top{top:5%;right:4%;border-top:3px solid;border-right:3px solid}.corner-bottom{bottom:7%;left:7%;border-bottom:3px solid;border-left:3px solid}.portrait-label{position:absolute;bottom:8%;right:1%;display:flex;align-items:center;gap:11px;padding:13px 17px;border:1px solid rgba(114,177,229,.22);border-radius:13px;background:var(--panel);box-shadow:var(--shadow)}.portrait-label strong,.portrait-label small{display:block}.portrait-label strong{font:800 .77rem Inter,sans-serif;letter-spacing:.08em}.portrait-label small{font-size:.78rem;color:var(--muted);margin-top:2px}.floating-tech{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;border:1px solid rgba(117,187,240,.24);background:var(--panel);box-shadow:var(--shadow);font:700 .82rem Inter,sans-serif}.floating-tech i{font-size:1.4rem}.tech-laravel{top:18%;left:2%}.tech-php{bottom:22%;right:0}.scroll-indicator{position:absolute;bottom:24px;left:50%;width:24px;height:38px;border:1px solid var(--line);border-radius:20px;display:grid;place-items:start center;padding-top:7px}.scroll-indicator span{width:4px;height:8px;border-radius:4px;background:var(--cyan);animation:scrollDot 1.6s infinite}@keyframes scrollDot{0%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}
.section{padding:95px 0}.about-section,.projects-section{background:var(--bg-soft)}.section-heading{max-width:760px;margin:0 auto 43px;text-align:center}.section-kicker{display:inline-block;color:var(--cyan);font:800 .76rem Inter,sans-serif;letter-spacing:.14em;margin-bottom:10px}.section-heading h2,.contact-panel h2{font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.35;margin:0 0 14px;font-weight:800;letter-spacing:-.025em}.section-heading p,.contact-panel>p{color:var(--muted);margin:0;font-size:1.03rem}.about-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.about-card{position:relative;padding:25px 23px;border:1px solid var(--line);background:var(--panel);border-radius:17px;transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}.about-card:after{content:"";position:absolute;top:0;inset-inline-start:0;width:45px;height:3px;background:var(--cyan);opacity:.8}.about-card:hover{transform:translateY(-6px);border-color:rgba(54,197,240,.38);box-shadow:var(--shadow)}.about-icon{font:800 1rem Inter,sans-serif;color:var(--cyan);margin-bottom:20px;opacity:.9}.about-card h3{font-size:1.1rem;margin:0 0 10px}.about-card p{color:var(--muted);font-size:.94rem;line-height:1.9;margin:0}
.skills-section{background:var(--bg)}.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.skill-card{text-align:center;padding:28px 20px;border:1px solid var(--line);background:var(--panel);border-radius:17px;transition:transform .25s,border-color .25s}.skill-card:hover{transform:translateY(-5px);border-color:rgba(54,197,240,.42)}.skill-logo{width:67px;height:67px;display:grid;place-items:center;margin:0 auto 15px;border-radius:18px;background:var(--blue-soft);font-size:2.35rem}.skill-card h3{font:700 1rem Inter,'Tajawal',sans-serif;margin:0 0 5px}.skill-card p{font-size:.91rem;color:var(--muted);margin:0}.skills-note{max-width:820px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:.93rem}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}.project-card{overflow:hidden;border:1px solid var(--line);border-radius:19px;background:var(--panel);transition:transform .25s,border-color .25s,box-shadow .25s}.project-card:hover{transform:translateY(-5px);border-color:rgba(54,197,240,.34);box-shadow:var(--shadow)}.project-visual{position:relative;height:230px;overflow:hidden;padding:23px;background:#0b1c31;color:#eff7ff}.project-visual:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,17,31,.45),transparent 55%)}.crypto-visual{background:radial-gradient(ellipse at 75% 30%,#124f7d,transparent 50%),#091a2d}.store-visual{background:radial-gradient(ellipse at 50% 55%,#6a3d36,transparent 50%),#251a24}.visual-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}.visual-brand{font:800 .95rem Inter,sans-serif;letter-spacing:.05em}.visual-brand span{color:#45c5ef}.visual-indicator{font:600 .59rem Inter,sans-serif;letter-spacing:.08em;color:#a8c7de;display:flex;align-items:center;gap:6px}.visual-indicator span{width:6px;height:6px;border-radius:50%;background:#3ce0a4}.crypto-chart{position:absolute;inset-inline:8%;bottom:30px;z-index:1}.crypto-chart svg{width:100%;height:auto;max-height:145px}.project-number{position:absolute;bottom:15px;left:22px;z-index:2;font:700 .61rem Inter,sans-serif;letter-spacing:.15em;color:rgba(227,242,255,.7)}.store-frame{position:relative;z-index:1;width:75%;height:175px;margin:0 auto;background:#f7f0e7;border:5px solid rgba(255,255,255,.22);border-radius:9px;box-shadow:0 15px 40px rgba(0,0,0,.28);color:#45252b;padding:13px}.store-header{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:.75rem}.store-menu{font-size:1.4rem;color:#9d7a4d}.agate-stone{position:absolute;width:74px;height:74px;border-radius:50%;top:45px;left:calc(50% - 37px);background:repeating-radial-gradient(ellipse at 42% 40%,#cba46a 0 4px,#6f352f 5px 8px,#d6c3a0 9px 12px,#74413b 13px 17px);box-shadow:0 7px 14px #5c3a3144}.agate-inner{position:absolute;inset:19px;border:2px solid #e6d4ae;border-radius:50%;background:radial-gradient(circle at 40% 30%,#d8b781,#5d2b32 70%)}.store-lines{position:absolute;bottom:22px;left:15px;right:15px;display:grid;gap:5px}.store-lines span{height:4px;background:#d7c5b4;border-radius:4px}.store-lines span:last-child{width:60%}.store-button{position:absolute;bottom:11px;right:14px;background:#552b34;color:#fff;padding:4px 8px;border-radius:4px;font-size:.55rem}.project-body{padding:24px 25px 20px}.project-type{font-size:.78rem;font-weight:700;color:var(--cyan)}.project-body h3{font-size:1.35rem;line-height:1.4;margin:7px 0 12px}.project-body>p{font-size:.94rem;line-height:1.95;color:var(--muted);margin:0}.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}.project-tags span{font:600 .68rem Inter,'Tajawal',sans-serif;padding:5px 9px;border:1px solid var(--line);border-radius:7px;color:var(--muted)}.project-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:20px;padding-top:14px;color:var(--muted);font-size:.81rem}.project-arrow{font-size:1.25rem;color:var(--cyan)}.projects-disclaimer{margin:24px auto 0;max-width:850px;text-align:center;color:var(--muted);font-size:.83rem}
.contact-section{padding:82px 0;background:var(--bg)}.contact-panel{position:relative;overflow:hidden;text-align:center;padding:60px 30px;border:1px solid rgba(54,197,240,.22);border-radius:24px;background:linear-gradient(125deg,var(--panel),var(--panel-2));box-shadow:var(--shadow)}.contact-decoration{position:absolute;width:330px;height:330px;top:-220px;left:calc(50% - 165px);border:1px solid rgba(54,197,240,.25);border-radius:50%;box-shadow:0 0 0 30px rgba(54,197,240,.035),0 0 0 60px rgba(54,197,240,.025)}.contact-panel .section-kicker,.contact-panel h2,.contact-panel>p,.contact-button{position:relative}.contact-panel h2{max-width:760px;margin:0 auto 13px}.contact-panel>p{max-width:700px;margin:0 auto}.contact-button{margin-top:25px}.site-footer{border-top:1px solid var(--line);padding:25px 0;background:var(--bg)}.footer-content{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer-logo{font:800 1.3rem Inter,sans-serif}.footer-content p{margin:0;color:var(--muted);font-size:.83rem}.copyright{font-size:.78rem!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}::selection{background:rgba(54,197,240,.25)}
@media(max-width:1000px){.hero-content{gap:25px}.hero-art{min-height:420px}.portrait-frame{height:380px}.about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-links{gap:13px}.nav-links>li>a{font-size:.85rem}}
@media(max-width:760px){.container{width:min(100% - 34px,var(--container))}.site-header{height:72px}.navbar{position:relative}.menu-toggle{display:flex;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:1px solid var(--line);border-radius:11px;background:var(--panel);cursor:pointer;order:3}.menu-toggle span{width:18px;height:2px;background:var(--text);border-radius:3px}.nav-links{display:none;position:absolute;top:calc(100% + 10px);right:0;left:0;align-items:stretch;gap:0;padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:var(--shadow)}.nav-links.is-open{display:flex;flex-direction:column}.nav-links>li>a{display:block;padding:10px 12px;font-size:1rem}.nav-links .language-item,.nav-links .theme-item{padding:7px 10px}.language-toggle{min-width:60px}.theme-toggle{width:40px}.hero{padding:55px 0 75px;min-height:auto}.hero-content{grid-template-columns:1fr;gap:36px}.hero-copy{order:1}.hero-art{order:0;min-height:370px;width:min(100%,480px);margin:0 auto}.portrait-frame{height:345px;width:min(72%,310px)}.portrait-backdrop{width:70%;height:82%;right:10%}.hero-corner{width:48px;height:48px}.portrait-label{bottom:4%;right:0}.tech-laravel{top:15%;left:0}.tech-php{bottom:17%;right:0}.hero h1{font-size:clamp(2.8rem,13vw,4.2rem)}.hero-description{font-size:1rem}.hero-actions .button{flex:1}.hero-tech{gap:8px}.tech-highlight{font-size:.75rem;padding:7px 9px}.section{padding:70px 0}.section-heading{margin-bottom:30px}.section-heading h2,.contact-panel h2{font-size:1.85rem}.about-grid{gap:12px}.about-card{padding:19px 16px}.about-card h3{font-size:1rem}.about-card p{font-size:.89rem}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.skill-card{padding:22px 12px}.skill-logo{width:58px;height:58px;font-size:2rem}.projects-grid{grid-template-columns:1fr;gap:18px}.project-visual{height:205px}.project-body{padding:21px 19px 18px}.contact-section{padding:60px 0}.contact-panel{padding:48px 20px}.footer-content{justify-content:center;text-align:center;flex-direction:column;gap:8px}.scroll-indicator{display:none}}
@media(max-width:430px){.about-grid{grid-template-columns:1fr}.hero-art{min-height:330px}.portrait-frame{height:305px}.floating-tech{font-size:.72rem;padding:8px 10px}.hero-actions{align-items:stretch}.hero-actions .button{padding:10px 12px;font-size:.87rem}.hero-tech{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tech-highlight{justify-content:center}.project-body h3{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Real project screenshots and detail links */
.project-image-visual{padding:0;background:#091a2d}
.project-image-link{position:absolute;inset:0;display:block;overflow:hidden;color:#eff7ff;text-decoration:none}
.project-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease;z-index:1}
.project-card:hover .project-cover{transform:scale(1.035)}
.project-cover.image-missing{display:none}
.project-image-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:radial-gradient(ellipse at 50% 35%,#164b70,#091a2d 70%);color:#eaf7ff;text-align:center;padding:20px}
.project-image-fallback>span{font:800 3rem Inter,sans-serif;letter-spacing:.08em;color:#45c5ef}
.project-image-fallback small{font:600 .75rem Inter,sans-serif;letter-spacing:.08em;color:#b9d1e3}
.project-image-link:not(.image-missing-link) .project-cover:not(.image-missing)~.project-image-fallback{display:none}
.project-number{pointer-events:none}
.project-details-link{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-weight:700;text-decoration:none;white-space:nowrap;transition:gap .2s,color .2s}
.project-details-link:hover{gap:14px;color:var(--text)}
.project-details-link .project-arrow{font-size:1.15rem}
@media(max-width:760px){.project-details-link{font-size:.8rem;gap:7px}}

/* Profile photo */
.portrait-frame {
    overflow: hidden;
}

.profile-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    border-radius: inherit;
}

/* Contact links */
.contact-links {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

.contact-icon-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 115px;
    min-height: 100px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-soft);
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.contact-icon-link svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: var(--cyan);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a.contact-icon-link:hover {
    transform: translateY(-4px);
    border-color: var(--cyan);
    background: var(--blue-soft);
}

.contact-icon-link.is-disabled {
    opacity: 0.45;
    cursor: default;
    user-select: none;
}

@media (max-width: 480px) {
    .contact-links {
        gap: 10px;
    }

    .contact-icon-link {
        min-width: 90px;
        min-height: 90px;
        padding: 12px 10px;
        font-size: 0.85rem;
    }

    .contact-icon-link svg {
        width: 25px;
        height: 25px;
    }
}