@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap";.reference-site{--bg:#000;--surface:#0a0a0a;--surface-raised:#111;--surface-overlay:#1a1a1a;--text-primary:#f5f5f5;--text-secondary:#71717a;--text-tertiary:#52525b;--accent:#a3e635;--accent-dim:#a3e63580;--accent-glow:#a3e6351f;--accent-ghost:#a3e6350f;--border:#ffffff0f;--border-hover:#ffffff1f;--border-accent:#a3e63533;--glass-bg:linear-gradient(180deg, #ffffff08, #ffffff03);--glass-blur:blur(24px) saturate(140%);--glass-radius:20px;--font-ar:"IBM Plex Sans Arabic", sans-serif;--font-en:"Rubik", sans-serif;--section-gap:clamp(80px, 12vw, 140px);--container-px:clamp(20px, 5vw, 48px);--container-max:880px;--ease:cubic-bezier(.25, .46, .45, .94);--duration:.3s}.reference-site *,.reference-site :before,.reference-site :after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}.reference-site{font-family:var(--font-ar);background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.7;overflow-x:hidden}.reference-site a{color:inherit;text-decoration:none}.reference-site img,.reference-site svg{display:block}.reference-site button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}.reference-site ::selection{background:var(--accent);color:var(--bg)}.reference-site .ref-container{width:100%;max-width:var(--container-max);padding-inline:var(--container-px);margin-inline:auto}.reference-site .ref-container--narrow{max-width:640px}.reference-site .ref-section{padding-block:var(--section-gap)}.reference-site .ref-section__title{color:var(--text-secondary);letter-spacing:.04em;align-items:center;gap:10px;margin-bottom:2rem;font-size:clamp(.85rem,1.5vw,.95rem);font-weight:500;display:flex}.reference-site .ref-section__title:before{content:"";background:var(--accent);border-radius:50%;flex-shrink:0;width:6px;height:6px}.reference-site .ref-nav{z-index:100;height:64px;padding-inline:var(--container-px);transition:background var(--duration) var(--ease),border-color var(--duration) var(--ease);border-bottom:1px solid #0000;justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.reference-site .ref-nav--scrolled{-webkit-backdrop-filter:var(--glass-blur);border-bottom-color:var(--border);background:#000c}.reference-site .ref-nav__logo{font-family:var(--font-en);color:var(--accent);letter-spacing:.01em;white-space:nowrap;font-size:1rem;font-weight:600}.reference-site .ref-nav__menu-wrapper{position:relative}.reference-site .ref-nav__menu-btn{transition:background var(--duration) var(--ease);border-radius:8px;align-items:center;gap:4px;padding:8px;display:flex}.reference-site .ref-nav__menu-btn:hover{background:#ffffff0f}.reference-site .ref-nav__menu-btn span{background:var(--text-primary);border-radius:50%;width:5px;height:5px;display:block}.reference-site .ref-nav__dropdown{-webkit-backdrop-filter:blur(24px)saturate(150%);opacity:0;visibility:hidden;transform-origin:0 0;min-width:160px;transition:opacity .2s var(--ease),visibility .2s var(--ease),transform .2s var(--ease);background:#141414d9;border:1px solid #ffffff14;border-radius:14px;padding:8px;position:absolute;top:calc(100% + 8px);left:0;transform:translateY(-8px)scale(.96);box-shadow:0 16px 48px #00000080}.reference-site .ref-nav__dropdown--open{opacity:1;visibility:visible;transform:translateY(0)scale(1)}.reference-site .ref-nav__dropdown-link{color:var(--text-primary);transition:background var(--duration) var(--ease);border-radius:8px;padding:10px 16px;font-size:.88rem;font-weight:400;display:block}.reference-site .ref-nav__dropdown-link:hover{background:#ffffff14}.reference-site .ref-hero{justify-content:center;align-items:center;height:100vh;display:flex;position:relative;overflow:hidden}.reference-site .ref-hero__poster,.reference-site .ref-hero__video{object-fit:cover;z-index:0;opacity:.65;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 70%,#0000 100%);mask-image:linear-gradient(#000 70%,#0000 100%)}.reference-site .ref-hero__video{opacity:0}.reference-site .ref-hero__video--ready{opacity:.65}.reference-site .ref-hero__poster--hidden{display:none}.reference-site .ref-hero__grid{z-index:1;pointer-events:none;background-image:radial-gradient(circle,#ffffff0a 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 20%,#0000 70%);mask-image:radial-gradient(#000 20%,#0000 70%)}.reference-site .ref-hero__content{z-index:2;text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex;position:relative}.reference-site .ref-hero__name{font-family:var(--font-ar);letter-spacing:-.02em;color:var(--text-primary);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;line-height:1.2}.reference-site .ref-hero__surname{font-family:var(--font-ar);color:var(--accent);letter-spacing:-.02em;margin-top:-.75rem;font-size:clamp(3rem,7vw,5.5rem);font-weight:700;line-height:1.1}.reference-site .ref-hero__socials{align-items:center;gap:1.25rem;margin-top:1rem;display:flex}.reference-site .ref-hero__socials a{-webkit-backdrop-filter:blur(16px)saturate(140%);color:#ffffff80;width:36px;height:36px;transition:color var(--duration) var(--ease),border-color var(--duration) var(--ease),background var(--duration) var(--ease),transform var(--duration) var(--ease);background:#ffffff1a;border:1px solid #ffffff14;border-radius:10px;justify-content:center;align-items:center;display:flex}.reference-site .ref-hero__socials a:first-child{color:#e4405f}.reference-site .ref-hero__socials a:nth-child(2){color:#fff}.reference-site .ref-hero__socials a:nth-child(3){color:#26a5e4}.reference-site .ref-hero__socials a:nth-child(4){color:#25d366}.reference-site .ref-hero__socials a:nth-child(5){color:#fff}.reference-site .ref-hero__socials a:hover{background:#ffffff1a;border-color:#ffffff26;transform:translateY(-2px)}.reference-site .ref-hero__socials svg{width:20px;height:20px}.reference-site .ref-hero__cursor:after{content:"";background:var(--accent);vertical-align:middle;border-radius:1px;width:3px;height:.65em;margin-inline-start:6px;animation:1s step-end infinite ref-blink;display:inline-block}@keyframes ref-blink{0%,to{opacity:1}50%{opacity:0}}.reference-site .ref-hero__title{font-family:var(--font-ar);color:var(--text-primary);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;font-size:clamp(.95rem,2vw,1.2rem);font-weight:400;display:flex}.reference-site .ref-hero__dot{color:#fff6;font-size:.75em}.reference-site .ref-hero__accent{color:var(--accent);font-family:var(--font-en);font-weight:600}.reference-site .ref-hero__tagline{color:#ffffffb3;margin-top:.5rem;font-size:clamp(.9rem,1.8vw,1.05rem);font-weight:300}.reference-site .ref-hero__scroll{color:var(--text-tertiary);border:1px solid var(--border);width:40px;height:40px;transition:border-color var(--duration) var(--ease),color var(--duration) var(--ease);border-radius:50%;justify-content:center;align-items:center;margin-top:3rem;animation:3s ease-in-out infinite ref-float;display:flex}.reference-site .ref-hero__scroll:hover{border-color:var(--border-hover);color:var(--text-primary)}@keyframes ref-float{0%,to{transform:translateY(0)}50%{transform:translateY(var(--ref-float-distance,6px))}}.reference-site .ref-glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--glass-radius);transition:border-color var(--duration) var(--ease),transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}.reference-site .ref-about__card{padding:clamp(1.5rem,4vw,2.5rem)}.reference-site .ref-about__status{color:var(--accent);align-items:center;gap:8px;margin-bottom:1.25rem;font-size:.8rem;font-weight:500;display:inline-flex}.reference-site .ref-about__status-dot{background:var(--accent);border-radius:50%;width:8px;height:8px;position:relative}.reference-site .ref-about__status-dot:before{content:"";border:1.5px solid var(--accent-dim);border-radius:50%;animation:2.5s ease-out infinite ref-pulse-ring;position:absolute;inset:-3px}@keyframes ref-pulse-ring{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2)}}.reference-site .ref-about__text{color:var(--text-primary);font-size:clamp(.95rem,1.8vw,1.05rem);font-weight:400;line-height:1.85}.reference-site .ref-about__location{color:var(--text-secondary);align-items:center;gap:6px;margin-top:1.5rem;font-size:.85rem;display:flex}.reference-site .ref-about__location svg{flex-shrink:0}.reference-site .ref-skills__grid{flex-wrap:wrap;gap:10px;display:flex}.reference-site .ref-pill{font-size:.85rem;font-family:var(--font-en);color:var(--text-secondary);border:1px solid var(--border);background:var(--surface);transition:border-color var(--duration) var(--ease),color var(--duration) var(--ease),box-shadow var(--duration) var(--ease);cursor:default;white-space:nowrap;border-radius:999px;align-items:center;padding:8px 20px;font-weight:400;display:inline-flex}.reference-site .ref-pill:hover{border-color:var(--border-accent);color:var(--text-primary);box-shadow:0 0 16px var(--accent-ghost)}.reference-site .ref-projects__grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.reference-site .ref-project-card{cursor:default;flex-direction:column;padding:clamp(1.25rem,3vw,1.75rem);display:flex}.reference-site .ref-project-card:hover{border-color:var(--border-accent);transform:translateY(-3px);box-shadow:0 12px 40px #a3e6350a}.reference-site .ref-project-card__accent{background:var(--accent);opacity:.6;border-radius:1px;width:32px;height:2px;margin-bottom:1.25rem}.reference-site .ref-project-card__name{font-family:var(--font-en);color:var(--text-primary);margin-bottom:2px;font-size:1.15rem;font-weight:600}.reference-site .ref-project-card__subtitle{font-family:var(--font-en);color:var(--text-tertiary);margin-bottom:.75rem;font-size:.8rem;font-weight:400}.reference-site .ref-project-card__desc{color:var(--text-secondary);flex:1;margin-bottom:1rem;font-size:.88rem;line-height:1.7}.reference-site .ref-project-card__tags{flex-wrap:wrap;gap:6px;margin-top:auto;display:flex}.reference-site .ref-tag{font-family:var(--font-en);background:var(--surface-overlay);color:var(--text-tertiary);border:1px solid var(--border);letter-spacing:.02em;border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:500}.reference-site .ref-links__list{flex-direction:column;gap:10px;display:flex}.reference-site .ref-link-card{cursor:pointer;border-radius:14px;align-items:center;gap:16px;padding:16px 20px;text-decoration:none;display:flex}.reference-site .ref-link-card:hover{border-color:var(--border-hover);background:#ffffff08}.reference-site .ref-link-card:hover .ref-link-card__arrow{color:var(--accent);transform:translate(-3px,-3px)}.reference-site .ref-link-card__icon{width:22px;height:22px;color:var(--text-secondary);flex-shrink:0}.reference-site .ref-link-card__body{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.reference-site .ref-link-card__platform{color:var(--text-primary);font-size:.9rem;font-weight:500}.reference-site .ref-link-card__handle{font-family:var(--font-en);color:var(--text-tertiary);text-align:start;direction:ltr;font-size:.78rem}.reference-site .ref-link-card__arrow{width:14px;height:14px;color:var(--text-tertiary);transition:transform var(--duration) var(--ease),color var(--duration) var(--ease);flex-shrink:0}.reference-site .ref-footer{border-top:1px solid var(--border);padding-block:3rem}.reference-site .ref-footer__text{text-align:center;color:var(--text-tertiary);font-size:.8rem;font-weight:400}@media (max-width:768px){.reference-site .ref-projects__grid{grid-template-columns:1fr}.reference-site .ref-nav__links{gap:1.25rem}.reference-site .ref-hero__title{gap:.35rem}}@media (max-width:480px){.reference-site .ref-nav__link{font-size:.8rem}.reference-site .ref-link-card{gap:12px;padding:14px 16px}.reference-site .ref-pill{padding:6px 16px;font-size:.8rem}.reference-site .ref-hero__scroll{margin-top:2rem}}.reference-site{isolation:isolate;background:var(--bg);min-height:100vh;font-family:var(--font-ar);color:var(--text-primary)}.reference-site .ref-hero{height:100svh;min-height:580px}.reference-site .ref-hero__poster{object-position:50% 45%}.reference-site .ref-nav__menu-btn{justify-content:center;min-width:40px;min-height:40px}.reference-site .ref-hero__name[dir=ltr]{font-family:var(--font-en)}.reference-site .ref-link-card__body{overflow-wrap:anywhere}.reference-site .ref-hero__socials a{color:var(--social-color,#fff)}.reference-site .ref-project-card__name,.reference-site .ref-project-card__desc{overflow-wrap:anywhere}.reference-site .ref-project-card__link{color:var(--accent);align-items:center;gap:6px;margin-top:1.25rem;font-size:.8rem;display:inline-flex}.reference-site .ref-nav__admin{border-top:1px solid var(--border);color:var(--accent);border-radius:0 0 8px 8px;margin-top:6px}.reference-site .ref-message{border:1px solid var(--border);background:var(--glass-bg);border-radius:14px;margin-top:24px;padding:16px 20px}.reference-site .ref-message summary{cursor:pointer;color:var(--text-secondary);font-size:.9rem}.reference-site .ref-contact-form{gap:16px;margin-top:24px;display:grid}.reference-site .ref-contact-form label{color:var(--text-secondary);gap:6px;font-size:.8rem;display:grid}.reference-site .ref-contact-form input,.reference-site .ref-contact-form textarea{border:1px solid var(--border);background:var(--surface);width:100%;min-width:0;color:var(--text-primary);font:inherit;border-radius:10px;padding:12px 14px}.reference-site .ref-contact-form textarea{resize:vertical}.reference-site .ref-contact-form [type=email]{text-align:right;direction:ltr}.reference-site .ref-contact-form button{border:1px solid var(--border-accent);color:var(--accent);background:var(--accent-ghost);border-radius:999px;justify-self:start;padding:9px 20px;font-size:.85rem}.reference-site .ref-contact-form button:disabled{opacity:.6;cursor:wait}.reference-site .ref-contact-notice{color:var(--accent);font-size:.85rem}.reference-site .ref-honeypot{clip-path:inset(50%);opacity:0;pointer-events:none;overflow:hidden;width:1px!important;height:1px!important;position:absolute!important}.reference-site :focus-visible{outline:2px solid var(--accent);outline-offset:5px}.reference-site .ref-hero__content>*{animation:.9s cubic-bezier(.25,.46,.45,.94) both ref-enter}.reference-site .ref-hero__surname{animation-delay:80ms}.reference-site .ref-hero__title{animation-delay:.2s}.reference-site .ref-hero__tagline{animation-delay:.3s}.reference-site .ref-hero__socials{animation-delay:.4s}.reference-site .ref-hero__scroll{animation:3s ease-in-out infinite ref-float}@keyframes ref-enter{0%{opacity:0;translate:0 var(--ref-motion-distance,30px)}to{opacity:1;translate:0}}@media (max-width:480px){.reference-site .ref-hero__surname{font-size:clamp(2.3rem,11vw,3rem)}.reference-site .ref-contact-form input,.reference-site .ref-contact-form textarea{font-size:16px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reference-site *,.reference-site :before,.reference-site :after{transition:none!important;animation:none!important}}.reference-site[data-motion=off] *,.reference-site[data-motion=off] :before,.reference-site[data-motion=off] :after{transition:none!important;animation:none!important}.reference-site{--ref-motion-distance:30px;--ref-float-distance:6px;flex-direction:column;display:flex}.reference-site>.ref-hero{flex-shrink:0;order:0}.reference-site>.ref-footer{order:10}.reference-site[data-strength=low]{--ref-motion-distance:12px;--ref-float-distance:3px}.reference-site[data-strength=high]{--ref-motion-distance:45px;--ref-float-distance:9px}@media (max-width:768px){.reference-site .ref-hero__poster{object-position:35% 50%}}