/* Ahmed Elkholy — Portfolio UI */
:root{--bg:#0a0a0a;--bg2:#101010;--card:#151515;--line:#ffffff16;--line2:#ffffff26;--text:#f4f2ee;--muted:#a5a19b;--accent:#e5a76e;--accent2:#f3d2ad;--green:#85e9b1;--display:'Space Grotesk',sans-serif;--body:'DM Sans',sans-serif;--mono:'Space Mono',monospace}
    *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;overflow-x:hidden;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{cursor:pointer}::selection{color:#0a0a0a;background:var(--accent)}.container{width:min(1320px,calc(100% - 88px));margin-inline:auto}.eyebrow{font:700 10px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}.mono{font-family:var(--mono)}.muted{color:var(--muted)}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;z-index:9999;top:-90px;left:12px;background:var(--accent);color:#111;padding:12px}.skip:focus{top:12px}.grain{position:fixed;inset:0;pointer-events:none;z-index:95;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E")}.orb{position:absolute;pointer-events:none;filter:blur(80px);border-radius:50%;opacity:.15}.top-glow{position:absolute;top:-300px;right:-270px;width:700px;height:700px;background:#bf8556;opacity:.12}.ambient-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(to bottom,#0008,transparent 75%)}
    header.site-header{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}header.scrolled{background:#0b0b0be8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-color:var(--line);box-shadow:0 5px 40px #0006}.nav-wrap{height:86px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;gap:12px;align-items:center;min-width:240px}.brand-mark{height:41px;width:41px;border:1px solid #e5a76e55;display:flex;align-items:center;justify-content:center;font:700 14px var(--display);color:var(--accent);background:#e5a76e0b;transform:rotate(-7deg);border-radius:12px}.brand-mark span{transform:rotate(7deg)}.brand-name{font:700 14px var(--display);letter-spacing:-.035em}.brand-role{color:#8e8e8e;font:400 9px var(--mono);letter-spacing:.06em;margin-top:2px}.desktop-nav{display:flex;gap:34px;align-items:center}.desktop-nav a{font-size:12px;font-weight:600;color:#b7b6b4;transition:color .2s}.desktop-nav a:hover{color:var(--text)}.nav-actions{display:flex;align-items:center;gap:10px}.lang-btn{width:43px;height:41px;border:1px solid #ffffff2a;border-radius:10px;color:#ddd;background:#ffffff09;font:700 12px var(--mono)}.menu-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;background:#ffffff0b;border:1px solid var(--line);border-radius:9px}.nav-cta{padding:13px 17px;border-radius:8px;background:var(--accent);color:#15100d;display:flex;gap:9px;align-items:center;font-size:12px;font-weight:800;white-space:nowrap;transition:transform .2s,background .2s}.nav-cta:hover,.btn-primary:hover{background:#f0b782;transform:translateY(-2px)}.nav-cta svg,.btn-primary svg,.btn-outline svg{width:16px;height:16px}.mobile-panel{display:none;position:absolute;top:82px;left:0;right:0;background:#101010fa;border-bottom:1px solid var(--line);padding:19px 32px 24px;box-shadow:0 18px 35px #0009}.mobile-panel.open{display:flex;flex-direction:column;gap:18px}.mobile-panel a{font-weight:600;color:#dadada}
    main{position:relative}.hero{min-height:810px;position:relative;overflow:hidden;padding-top:165px;display:flex;align-items:flex-start}.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:57% 43%;gap:0;align-items:center}.hero-content{position:relative;z-index:3;padding-top:39px;padding-bottom:97px}.status{display:inline-flex;align-items:center;gap:11px;border:1px solid #8cefb13a;background:#7deaab0a;color:#b8f6d1;padding:10px 15px;border-radius:100px;font:600 11px var(--mono);letter-spacing:0;backdrop-filter:blur(12px)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #85e9b117,0 0 17px #85e9b1;animation:pulse 2.6s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px #85e9b10b,0 0 22px #85e9b1}}.hero-kicker{display:flex;align-items:center;gap:13px;margin-top:49px;margin-bottom:14px;color:#c6c2bc;font:600 12px var(--mono);letter-spacing:.09em}.hero-kicker:before{content:"";display:block;width:34px;height:1px;background:var(--accent)}.hero h1{font:700 clamp(65px,7.4vw,116px)/.91 var(--display);letter-spacing:-.09em;max-width:870px;margin:0;position:relative}.hero h1 .accent{display:block;color:var(--accent);position:relative}.hero h1 .outlined{color:transparent;-webkit-text-stroke:1px #d8d1c1;text-shadow:none}.hero-description{font-size:17px;line-height:1.86;max-width:520px;margin:33px 0 35px;color:#b5b3af}.hero-description strong{color:#f5eee5;font-weight:700}.hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;max-width:640px}.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #ffffff1f;background:#ffffff08;border-radius:999px;color:#d8d5cf;font-size:12px;font-weight:700;letter-spacing:.02em}.hero-chip::before{content:"";width:7px;height:7px;border-radius:999px;background:linear-gradient(135deg,var(--accent),#5be4d0);box-shadow:0 0 0 4px #ffffff06}@media (max-width:640px){.hero-proof{gap:8px}.hero-chip{font-size:11px;padding:8px 10px}}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.btn-primary,.btn-outline{min-height:53px;padding:0 21px;display:inline-flex;gap:10px;align-items:center;justify-content:center;border-radius:9px;font-size:13px;font-weight:800;transition:.25s}.btn-primary{background:var(--accent);color:#18100b;border:1px solid var(--accent)}.btn-outline{color:#eae7e3;background:#ffffff09;border:1px solid #ffffff2d}.btn-outline:hover{border-color:#e4a66b;background:#e4a66b12;transform:translateY(-2px)}.hero-links{display:flex;gap:15px;align-items:center;margin-top:42px;color:#9d9893;font:600 11px var(--mono)}.hero-links a{display:flex;gap:7px;align-items:center;transition:color .2s}.hero-links a:hover{color:var(--accent)}.hero-links svg{width:14px;height:14px}.hero-separator{height:3px;width:3px;border-radius:50%;background:#8f8171}.hero-visual{position:absolute;top:-82px;left:46%;right:-12%;bottom:-2px;z-index:1;pointer-events:none}.hero-art{height:100%;width:100%;object-fit:cover;object-position:68% 45%;filter:saturate(.85)}.hero-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(to right,#0a0a0a 0%,#0a0a0ae8 14%,transparent 48%),linear-gradient(to top,#0a0a0a 2%,transparent 44%);z-index:1}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0a0a0a5c,transparent 32%);z-index:1}.floating-card{pointer-events:none;position:absolute;z-index:4;right:5.5%;bottom:110px;width:232px;min-height:113px;border:1px solid #ffffff34;background:#0d0d0dc9;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);padding:17px 19px;border-radius:12px;box-shadow:0 22px 38px #000a;transform:rotate(3deg);animation:floaty 7s ease-in-out infinite}@keyframes floaty{50%{transform:translateY(-12px) rotate(1deg)}}.floating-card .signal{display:flex;justify-content:space-between;gap:6px;align-items:center}.floating-card .signal .code{color:#d5aa80;font:700 9px var(--mono)}.floating-card .signal .signal-bars{color:#8bf3b8}.floating-card strong{display:block;font:700 18px var(--display);margin-top:11px;letter-spacing:-.03em}.floating-card small{color:#aaa7a3;font-size:10px}.scroll-indicator{position:absolute;bottom:33px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#86807a;z-index:4}.scroll-indicator:before{content:"";height:29px;width:1px;background:linear-gradient(var(--accent),transparent)}
    .section{padding:105px 0;position:relative}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.section-heading h2{font:700 clamp(40px,5vw,68px)/1.02 var(--display);letter-spacing:-.065em;margin:15px 0 0}.section-heading h2 em{font-style:normal;color:var(--accent)}.section-heading p{max-width:350px;color:#999690;font-size:14px;line-height:1.8;margin:0 0 6px}.line-decoration{height:1px;background:linear-gradient(to right,#e1a66a4a,#ffffff13 55%,transparent);width:100%;margin-bottom:27px}.stats-section{padding:25px 0 0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat-card{padding:30px 29px;min-height:149px;border:1px solid var(--line);background:linear-gradient(135deg,#1b1917,#111);border-radius:14px;position:relative;overflow:hidden}.stat-card:after{position:absolute;content:"↗";right:22px;top:17px;font:20px var(--mono);color:#e3a66b54}.stat-card .number{font:700 clamp(35px,4.2vw,56px)/1 var(--display);letter-spacing:-.06em}.stat-card .number .plus{font-size:.6em;color:var(--accent)}.stat-label{font-size:12px;color:#a8a39e;margin-top:17px}.stat-card:nth-child(3){background:linear-gradient(120deg,#1d1915,#101010)}
    .projects{padding-top:122px}.filter-nav{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}.filter-nav button{color:#9d9993;background:#121212;border:1px solid #ffffff1c;border-radius:100px;padding:11px 18px;font-weight:700;font-size:12px;transition:all .2s}.filter-nav button.active,.filter-nav button:hover{color:#17120c;background:var(--accent);border-color:var(--accent)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.project-card{min-width:0;min-height:395px;background:#141414;border:1px solid #ffffff1d;border-radius:16px;overflow:hidden;position:relative;isolation:isolate;transition:transform .35s,border-color .35s,box-shadow .35s;display:flex;flex-direction:column;cursor:pointer}.project-card:hover{transform:translateY(-7px);border-color:#e5a76e77;box-shadow:0 20px 70px #000b,0 0 45px #e5a76e13}.project-card:focus-visible{outline:2px solid var(--accent)}.project-card.wide{grid-column:span 2}.project-cover{height:220px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 65% 32%,#ae704f44,transparent 50%),#090a0d}.project-card.wide .project-cover{height:250px}.project-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#121212 0%,transparent 37%),linear-gradient(to right,#09090933,transparent);pointer-events:none}.project-cover img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .75s cubic-bezier(.21,.7,.22,1);filter:saturate(.88)}.project-card:hover .project-cover img{transform:scale(1.08)}.project-cover .project-number{position:absolute;top:19px;left:20px;z-index:2;color:#e4dfd5;font:700 10px var(--mono);border:1px solid #ffffff3f;background:#0606067d;padding:8px 10px;border-radius:6px;backdrop-filter:blur(8px)}.project-cover .cover-icon{position:absolute;right:20px;top:18px;z-index:2;background:#0008;border:1px solid #fff3;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;transition:.25s}.cover-icon svg{width:15px;height:15px}.project-card:hover .cover-icon{background:var(--accent);color:#111;transform:rotate(45deg)}.cover-word{position:absolute;bottom:22px;left:22px;z-index:3;color:#fff;text-shadow:0 4px 28px #000;opacity:.75;font:700 13px var(--mono);letter-spacing:.1em;text-transform:uppercase}.project-cover.visual-code{background:radial-gradient(circle at 65% 40%,#7c503a 0%,transparent 41%),linear-gradient(132deg,#15100e,#080809)}.project-cover.visual-code:before{content:"{  // API  ↗   }";position:absolute;top:65px;left:33px;font:700 28px var(--mono);letter-spacing:.01em;color:#f1b37f80;transform:rotate(-9deg);text-shadow:0 0 42px #f6a45e55}.project-cover.visual-blue{background:radial-gradient(ellipse at 63% 25%,#194b53b8,transparent 48%),repeating-linear-gradient(0deg,#121b22,#121b22 25px,#11252c 26px);}.project-cover.visual-blue:before{content:"0001 0110 / SECURE";position:absolute;top:82px;left:33px;transform:rotate(-7deg);font:700 20px var(--mono);color:#b3f5ef8a;text-shadow:0 0 25px #63ffe7}.project-cover.visual-grid{background:radial-gradient(ellipse at 58% 45%,#45306bc9,transparent 47%),repeating-linear-gradient(45deg,#171020 0,#171020 14px,#2c1b38 15px,#181020 16px)}.project-cover.visual-grid:before{content:"// FAILURE INJECTED";position:absolute;top:90px;left:31px;font:700 18px var(--mono);color:#d3b6f799;transform:rotate(-8deg)}.project-body{padding:21px 23px 24px;flex:1;display:flex;flex-direction:column}.project-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#d19d72;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.12em;margin-bottom:13px}.project-meta .year{color:#85807a}.project-body h3{font:700 clamp(20px,2.2vw,26px)/1.17 var(--display);letter-spacing:-.042em;margin:0}.project-body p{font-size:12.5px;line-height:1.7;color:#aaa6a0;margin:12px 0 20px;max-width:540px}.tag-row{margin-top:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.tag{font:600 10px var(--mono);padding:7px 9px;color:#aaa49d;border:1px solid #ffffff1e;background:#ffffff07;border-radius:5px}.card-view{margin-left:auto;font-size:10px;font-weight:800;color:var(--accent);display:flex;gap:6px;align-items:center}.card-view svg{height:13px;width:13px}.project-card[hidden]{display:none!important}.load-more{margin:30px auto 0;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;background:transparent;border:1px solid #ffffff32;border-radius:8px;color:#eee;font-weight:700;font-size:12px}.load-more:hover{border-color:var(--accent);color:var(--accent)}.load-more svg{height:15px;width:15px}
    .about-bento{display:grid;grid-template-columns:1.15fr .85fr .8fr;grid-template-rows:230px 230px;gap:14px}.bento{background:#131313;border:1px solid #ffffff1c;border-radius:16px;position:relative;overflow:hidden;padding:28px;transition:border-color .25s,transform .25s}.bento:hover{border-color:#d9a46a65;transform:translateY(-3px)}.bento h3{font:700 23px var(--display);letter-spacing:-.04em;margin:0 0 14px}.bento p{color:#a8a49f;font-size:13px;line-height:1.75}.bento-main{grid-row:span 2;background:radial-gradient(circle at 90% 85%,#ad693b21,transparent 45%),#151412;display:flex;flex-direction:column;justify-content:space-between}.bento-main h3{font-size:39px;line-height:1.15;max-width:390px;margin-top:15px}.bento-main p{max-width:370px}.signature{font:700 23px var(--display);font-style:italic;letter-spacing:-.07em;color:var(--accent);margin-top:22px}.bento-code{grid-column:span 2;background:linear-gradient(120deg,#18191b,#111)}.terminal-top{display:flex;gap:7px;align-items:center;color:#8c8882;font:700 10px var(--mono)}.terminal-top i{width:8px;height:8px;border-radius:50%;background:#e7a571}.terminal-top i:nth-child(2){background:#c4b16e}.terminal-top i:nth-child(3){background:#76b995}.terminal-top span{margin-left:12px}.terminal-code{font:13px/1.9 var(--mono);margin-top:20px;color:#b5b8ae;white-space:pre-wrap}.terminal-code .kw{color:#d5a2f5}.terminal-code .str{color:#b6d59f}.terminal-code .fn{color:#f1bb8e}.bento-feature{background:radial-gradient(circle at bottom right,#214a4835,transparent),#111}.bento-icon{height:43px;width:43px;display:flex;align-items:center;justify-content:center;background:#e4a76913;color:var(--accent);border:1px solid #e4a76936;border-radius:12px;margin-bottom:18px}.bento-feature h3{font-size:20px}.bento-mini{background:linear-gradient(140deg,#252018,#151311)}
    .stack-wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}.stack-card{background:#121212;border:1px solid #ffffff1b;border-radius:16px;padding:27px}.stack-card h3{font:700 17px var(--display);margin:0 0 10px}.stack-card p{font-size:12px;color:#8f8c87;line-height:1.65;min-height:36px}.stack-items{display:flex;flex-wrap:wrap;gap:9px;margin-top:21px}.stack-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff1b;background:#ffffff06;border-radius:8px;padding:9px 10px;color:#d3d0ca;font:700 11px var(--mono)}.stack-chip svg{width:14px;height:14px;color:var(--accent)}.stack-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 5px 0;gap:15px;color:#85807c;font-size:12px}
    .journey{display:grid;grid-template-columns:1fr .95fr;gap:25px;align-items:start}.timeline{display:flex;flex-direction:column}.timeline-item{position:relative;border-left:1px solid #ffffff30;padding:0 0 39px 32px;margin-left:9px}.timeline-item:before{content:"";position:absolute;width:12px;height:12px;top:5px;left:-6.5px;border:3px solid #111;background:var(--accent);border-radius:50%;box-shadow:0 0 0 2px #e4a76939}.timeline-item:last-child{padding-bottom:0}.timeline-item .time{font:700 10px var(--mono);color:var(--accent)}.timeline-item h3{font:700 21px var(--display);letter-spacing:-.04em;margin:9px 0 7px}.timeline-item .company{font-size:12px;font-weight:700;color:#d8d4ce;margin-bottom:7px}.timeline-item p{color:#918d88;font-size:13px;line-height:1.7;max-width:490px;margin:0}.experience-feature{border-radius:17px;background:#131313;border:1px solid #ffffff22;overflow:hidden}.experience-feature .image{height:285px;overflow:hidden}.experience-feature .image img{width:100%;height:100%;object-fit:cover}.experience-feature-body{padding:28px}.experience-feature h3{font:700 28px var(--display);letter-spacing:-.04em;margin:13px 0}.experience-feature p{color:#a49f99;line-height:1.8;font-size:13px}.experience-feature a{color:var(--accent);font-size:12px;font-weight:800;display:inline-flex;gap:8px;align-items:center;margin-top:11px}.experience-feature a svg{height:15px;width:15px}
    .feedback{background:#101010;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.feedback-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:13px}.feedback-card{min-height:205px;padding:30px;border-radius:16px;background:#171717;border:1px solid #ffffff1c;display:flex;flex-direction:column;justify-content:space-between}.feedback-card .icon{color:var(--accent)}.feedback-card .icon svg{width:26px;height:26px}.feedback-card p{color:#d0cbc4;font:600 18px/1.55 var(--display);letter-spacing:-.025em;margin:24px 0 13px}.feedback-card small{font:500 11px var(--mono);color:#8c8984}.feedback-card.featured{background:#2a211a;border-color:#b27b4a4d}.feedback-note{font-size:12px;color:#8e8a85;margin-top:23px}
    .contact{padding:130px 0 94px}.contact-panel{background:radial-gradient(ellipse at 90% 10%,#a9724352,transparent 35%),linear-gradient(130deg,#24201a,#121212 73%);border:1px solid #ce955e49;border-radius:22px;padding:64px 70px;position:relative;overflow:hidden}.contact-panel:after{content:"✳";position:absolute;right:5%;top:2%;font-size:230px;line-height:1;color:#e1a46a0d;pointer-events:none}.contact-panel h2{font:700 clamp(44px,7vw,90px)/.96 var(--display);letter-spacing:-.078em;max-width:850px;margin:25px 0}.contact-panel h2 span{color:var(--accent)}.contact-panel p{color:#aaa49d;max-width:550px;line-height:1.8;font-size:15px}.contact-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:35px}.contact-bottom{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;color:#98938d;font:700 10px var(--mono)}.contact-bottom a{display:flex;align-items:center;gap:8px}.contact-bottom svg{width:14px;height:14px}
    footer{border-top:1px solid #ffffff20;padding:29px 0 37px}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-copy{color:#88837d;font-size:11px}.footer-links{display:flex;align-items:center;gap:19px}.footer-links a{font-size:11px;font-weight:600;color:#9c9994}.footer-links a:hover{color:var(--accent)}.footer-top{height:34px;width:34px;border:1px solid #ffffff28;background:#ffffff05;border-radius:7px;display:grid;place-items:center}.footer-top svg{height:15px;width:15px}
    .quick-contact{position:fixed;right:27px;bottom:25px;z-index:71}.quick-trigger{width:55px;height:55px;border:1px solid #e0b38577;background:var(--accent);color:#15100b;display:grid;place-items:center;border-radius:17px;box-shadow:0 12px 38px #000b,0 0 26px #e5a76e2d;transition:.2s}.quick-trigger:hover{transform:translateY(-3px)}.quick-trigger svg{width:24px;height:24px}.quick-menu{position:absolute;bottom:67px;right:0;display:flex;flex-direction:column;gap:7px;min-width:206px;background:#171717f5;border:1px solid #ffffff28;padding:9px;border-radius:12px;backdrop-filter:blur(17px);box-shadow:0 16px 50px #0009;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}.quick-menu.open{opacity:1;visibility:visible;transform:translateY(0)}.quick-menu a,.quick-menu button{width:100%;display:flex;align-items:center;gap:11px;background:none;border:0;color:#ede9e3;padding:11px 10px;text-align:left;font-weight:700;font-size:12px;border-radius:6px}.quick-menu a:hover,.quick-menu button:hover{background:#ffffff10}.quick-menu svg{width:17px;height:17px;color:var(--accent)}
    dialog.project-dialog{width:min(850px,calc(100vw - 32px));max-height:min(90vh,920px);border:1px solid #ffffff35;background:#141414;color:#eee;border-radius:20px;padding:0;box-shadow:0 28px 110px #000c;overflow:auto}.project-dialog::backdrop{background:#000c;backdrop-filter:blur(9px)}.dialog-cover{height:265px;position:relative;overflow:hidden}.dialog-cover img{height:100%;width:100%;object-fit:cover}.dialog-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#141414,transparent 55%)}.dialog-exit{position:absolute;z-index:3;right:20px;top:18px;width:39px;height:39px;border:1px solid #ffffff45;border-radius:12px;background:#0a0a0aaf;color:white;display:grid;place-items:center}.dialog-exit svg{width:19px;height:19px}.dialog-body{padding:12px 45px 45px}.dialog-body .modal-type{font:700 10px var(--mono);letter-spacing:.14em;color:var(--accent);text-transform:uppercase}.dialog-body h2{font:700 clamp(29px,5vw,48px)/1.1 var(--display);letter-spacing:-.055em;margin:13px 0}.dialog-body .modal-description{font-size:15px;line-height:1.85;color:#b6b1aa;margin:0 0 24px}.dialog-body h3{font:700 15px var(--display);margin:24px 0 12px}.dialog-body ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}.dialog-body li{display:flex;gap:11px;align-items:start;font-size:13px;color:#aba6a0;line-height:1.65}.dialog-body li svg{width:16px;min-width:16px;height:16px;color:var(--accent);margin-top:3px}.dialog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}.dialog-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:25px;margin-top:25px;border-top:1px solid #ffffff20}.dialog-actions a{display:flex;align-items:center;gap:8px;padding:13px 16px;border:1px solid #ffffff36;border-radius:9px;font-weight:700;font-size:12px;transition:.2s}.dialog-actions a:hover{border-color:var(--accent);color:var(--accent)}.dialog-actions a.primary{background:var(--accent);color:#16110d;border-color:var(--accent)}.dialog-actions svg{width:16px;height:16px}
    .js .reveal{opacity:0;transform:translateY(29px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}.js .reveal.visible{opacity:1;transform:translateY(0)}.cursor-light{position:fixed;z-index:-1;pointer-events:none;width:520px;height:520px;left:var(--mx,-600px);top:var(--my,-600px);transform:translate(-50%,-50%);background:radial-gradient(circle,#d9a3690a,transparent 70%)}
    html[dir=rtl] body{font-family:'Cairo',sans-serif}html[dir=rtl] .hero h1,html[dir=rtl] .section-heading h2,html[dir=rtl] .contact-panel h2,html[dir=rtl] .bento h3,html[dir=rtl] .project-body h3,html[dir=rtl] .feedback-card p,html[dir=rtl] .dialog-body h2,html[dir=rtl] .timeline-item h3{font-family:'Cairo',sans-serif;letter-spacing:-.035em}html[dir=rtl] .hero h1{font-size:clamp(49px,6.8vw,92px);line-height:1.18}html[dir=rtl] .hero-kicker:before{order:0}html[dir=rtl] .hero-visual{right:46%;left:-12%;transform:scaleX(-1)}html[dir=rtl] .hero-visual img{transform:scaleX(-1)}html[dir=rtl] .project-cover .project-number,html[dir=rtl] .cover-word{left:auto;right:20px}html[dir=rtl] .project-cover .cover-icon{right:auto;left:20px}html[dir=rtl] .project-meta{flex-direction:row-reverse}html[dir=rtl] .card-view{margin-left:0;margin-right:auto}html[dir=rtl] .timeline-item{margin-left:0;margin-right:9px;padding:0 32px 39px 0;border-left:0;border-right:1px solid #ffffff30}html[dir=rtl] .timeline-item:before{left:auto;right:-6.5px}html[dir=rtl] .quick-contact{right:auto;left:27px}html[dir=rtl] .quick-menu{right:auto;left:0}html[dir=rtl] .quick-menu a,html[dir=rtl] .quick-menu button{text-align:right}html[dir=rtl] .contact-panel:after{right:auto;left:5%}html[dir=rtl] .dialog-exit{right:auto;left:20px}html[dir=rtl] .nav-cta,html[dir=rtl] .btn-primary,html[dir=rtl] .btn-outline{font-family:'Cairo',sans-serif}html[dir=rtl] .hero-description{font-size:16px}html[dir=rtl] .brand-role{font-family:var(--mono)}
    @media(max-width:1140px){.container{width:min(100% - 52px,1320px)}.desktop-nav{gap:18px}.brand{min-width:190px}.hero h1{font-size:clamp(62px,7.7vw,91px)}.hero-visual{left:41%;right:-23%}.about-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}.bento-main{grid-row:span 2}.bento-code{grid-column:span 1;min-height:225px}.bento-feature,.bento-mini{min-height:230px}.stack-wrap{grid-template-columns:1fr 1fr}.stack-card:last-child{grid-column:span 2}}
    @media(max-width:850px){.nav-wrap{height:73px}.desktop-nav,.nav-cta{display:none}.brand{min-width:0}.menu-btn{display:flex}.mobile-panel{top:73px}.hero{min-height:790px;padding-top:125px}.hero-inner{grid-template-columns:1fr}.hero-content{padding-top:20px;max-width:670px;padding-bottom:115px}.hero-visual{left:29%;right:-30%;top:0;opacity:.55}.hero h1{font-size:clamp(60px,10.2vw,90px)}.hero-description{max-width:560px}.floating-card{right:4%;bottom:91px;transform:scale(.82) rotate(2deg)}.stats-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card.wide{grid-column:span 2}.feedback-grid{grid-template-columns:1fr 1fr}.feedback-card.featured{grid-column:span 2}.journey{grid-template-columns:1fr}.experience-feature{display:grid;grid-template-columns:46% 54%}.experience-feature .image{height:100%}.contact-panel{padding:53px 39px}}
    @media(max-width:600px){.container{width:calc(100% - 34px)}.site-header{background:#0a0a0ad9}.brand-name{font-size:13px}.brand-role{font-size:8px}.hero{min-height:730px;padding-top:112px}.hero-content{padding-bottom:110px}.hero-visual{left:8%;right:-61%;opacity:.32;top:35px}.hero h1{font-size:clamp(54px,14vw,75px);letter-spacing:-.085em}.hero-kicker{margin-top:44px;font-size:10px}.hero-description{font-size:14px;line-height:1.8;margin:29px 0}.status{font-size:9px}.hero-actions{gap:9px}.btn-primary,.btn-outline{min-height:49px;padding:0 15px;font-size:11px}.hero-links{gap:10px;font-size:9px;flex-wrap:wrap}.floating-card{display:none}.scroll-indicator{left:auto;right:19px;transform:none}.stats-grid{gap:9px}.stat-card{padding:23px 20px;min-height:127px}.stat-label{font-size:11px}.section{padding:74px 0}.section-heading{align-items:start;flex-direction:column;gap:13px}.section-heading h2{font-size:clamp(37px,11vw,56px)}.section-heading p{font-size:13px}.projects{padding-top:85px}.filter-nav{overflow-x:auto;flex-wrap:nowrap;margin-right:-17px;padding-bottom:8px;scrollbar-width:none}.filter-nav button{flex-shrink:0;padding:10px 14px}.project-grid{grid-template-columns:1fr;gap:14px}.project-card.wide{grid-column:auto}.project-cover,.project-card.wide .project-cover{height:212px}.project-card{min-height:365px}.about-bento{grid-template-columns:1fr;grid-template-rows:auto}.bento-main,.bento-code{grid-column:auto;grid-row:auto}.bento-main{min-height:310px}.bento-main h3{font-size:30px}.bento-code{min-height:230px}.bento-feature,.bento-mini{min-height:200px}.stack-wrap{grid-template-columns:1fr}.stack-card:last-child{grid-column:auto}.stack-card{padding:23px}.experience-feature{display:block}.experience-feature .image{height:230px}.feedback-grid{grid-template-columns:1fr}.feedback-card.featured{grid-column:auto}.feedback-card{min-height:160px}.feedback-card p{font-size:17px}.contact-panel{padding:40px 24px}.contact-panel h2{font-size:clamp(43px,11vw,63px)}.contact-panel p{font-size:13px}.contact-actions{align-items:stretch;flex-direction:column}.contact-actions a{width:100%}.contact-bottom{gap:17px}.footer-inner{flex-wrap:wrap;gap:15px}.footer-links{gap:12px;flex-wrap:wrap}.quick-contact{right:16px;bottom:16px}.quick-trigger{width:50px;height:50px}.dialog-cover{height:190px}.dialog-body{padding:11px 23px 32px}.dialog-body h2{font-size:32px}.dialog-body .modal-description{font-size:13px}html[dir=rtl] .hero h1{font-size:clamp(45px,11vw,65px)}html[dir=rtl] .hero-visual{right:8%;left:-61%}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}.js .reveal{opacity:1;transform:none}}

/* Editorial improvements — concise visual hierarchy, touch-first spacing, and low-motion interactions */
:root { --content-width: 1260px; }
.container { max-width: var(--content-width); }
.section { padding-block: clamp(68px, 7vw, 112px); }
.section-heading { align-items: end; }
.section-heading > p { max-width: 450px; }
.section-heading h2 { text-wrap: balance; }
.hero-description { max-width: 595px; }
.hero-proof { max-width: 630px; }
#work, #services, #impact, #about, #stack, #experience, #method, #contact { scroll-margin-top: 90px; }
.reading-progress { position:fixed;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,#f3c18d,#8bdcc6);z-index:101;transform:scaleX(0);transform-origin:left;pointer-events:none; }
[dir="rtl"] .reading-progress { transform-origin:right; }
.project-count { min-height:20px;margin:-5px 0 18px;color:#a8a199;font-size:12px;font-family:var(--mono);letter-spacing:.025em; }
.project-cover img { width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s; }
.project-card:hover .project-cover img { transform:scale(1.035); }
.project-card { isolation:isolate; }
.project-card:focus-visible { outline:2px solid var(--accent);outline-offset:5px; }
.project-body h3 { text-wrap:balance; }
.service-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.service-card { min-width:0;min-height:295px;display:flex;flex-direction:column;padding:28px;border:1px solid #ffffff1d;border-radius:16px;background:linear-gradient(155deg,#1d1b19,#131313 60%);transition:border-color .25s,transform .25s,background .25s;position:relative;overflow:hidden; }
.service-card::after { content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,#e5a76e13,transparent 52%);opacity:0;transition:opacity .25s;pointer-events:none; }
.service-card:hover { border-color:#e5a76e63;transform:translateY(-3px); }
.service-card:hover::after { opacity:1; }
.service-card > svg { margin:28px 0 18px;width:29px;height:29px;color:var(--accent);stroke-width:1.35; }
.service-index { color:#aba39a;font:700 10px var(--mono);letter-spacing:.09em; }
.service-card h3 { font:700 clamp(18px,2vw,23px)/1.25 var(--display);letter-spacing:-.025em;margin:0 0 13px;text-wrap:balance; }
.service-card p { color:#aaa6a2;line-height:1.7;font-size:13px;margin:0 0 25px; }
.service-tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:auto; }
.service-tags span { font:600 10px var(--mono);color:#e2ccba;background:#e5a76e12;border:1px solid #e5a76e25;border-radius:5px;padding:6px 8px; }
.service-lead { background:linear-gradient(155deg,#2b211c,#171412 65%);border-color:#ac855142; }
.impact-section { background:#101010;border-block:1px solid #ffffff12; }
.impact-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.impact-card { display:flex;flex-direction:column;min-width:0;background:#151515;border:1px solid #ffffff1a;border-radius:16px;padding:30px;transition:transform .25s,border-color .25s; }
.impact-card:hover { transform:translateY(-3px);border-color:#dba57161; }
.impact-top { display:flex;align-items:center;justify-content:space-between;color:#b3a18f;font:700 10px var(--mono);letter-spacing:.08em; }
.impact-top svg { color:var(--accent);width:20px;height:20px; }
.impact-card > strong { display:block;font:700 clamp(39px,5vw,58px)/1 var(--display);letter-spacing:-.055em;color:#f3d0a5;margin:30px 0 22px; }
.impact-card > strong small { font-size:13px;font-weight:600;color:#b0a9a1;letter-spacing:0; }
.impact-card h3 { font:700 21px/1.25 var(--display);letter-spacing:-.025em;margin:0 0 12px;text-wrap:balance; }
.impact-card p { color:#aca7a0;font-size:13px;line-height:1.8;margin:0 0 25px; }
.impact-card a { color:var(--accent);margin-top:auto;font:700 12px var(--mono);text-decoration:underline;text-decoration-color:#dfaa7788;text-underline-offset:5px; }
.evidence-caption { color:#837f7a;font:400 11px/1.6 var(--body);margin:18px 0 0; }
.method-section { background:radial-gradient(ellipse at 20% 0%,#e5a76e10,transparent 58%); }
.method-steps { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid #ffffff24;border-radius:16px;overflow:hidden; }
.method-step { display:flex;flex-direction:column;gap:26px;padding:30px;min-width:0;border-inline-end:1px solid #ffffff18; }
.method-step:last-child { border-inline-end:0; }
.method-index { color:var(--accent);font:700 25px var(--display);letter-spacing:-.04em; }
.method-step h3 { margin:0 0 12px;font:700 18px/1.25 var(--display);letter-spacing:-.015em; }
.method-step p { margin:0;color:#aaa6a1;font-size:13px;line-height:1.7; }
.case-grid { margin:22px 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.case-role,.case-block { background:#1c1c1c;border:1px solid #ffffff18;padding:18px;border-radius:11px;min-width:0; }
.case-role { grid-column:span 2;background:linear-gradient(110deg,#2d241c,#1a1a1a);border-color:#e5a76e32; }
.case-role > span,.case-block > span { display:block;margin-bottom:8px;color:#e7ad79;font:700 10px var(--mono);letter-spacing:.06em; }
.case-role strong { color:#f4f0eb;font:700 16px/1.5 var(--body); }
.case-block p { margin:0;color:#c6c0b9;line-height:1.8;font-size:13px;overflow-wrap:anywhere; }
.case-evidence { grid-column:span 2; }
*:focus-visible { outline:2px solid #e9b988;outline-offset:3px; }
@media(max-width:1140px) { .service-grid {grid-template-columns:repeat(2,minmax(0,1fr));} .method-steps {grid-template-columns:repeat(2,minmax(0,1fr));}.method-step:nth-child(2){border-inline-end:0;}.method-step:nth-child(-n+2){border-bottom:1px solid #ffffff18;} }
@media(max-width:850px) { .impact-grid {grid-template-columns:1fr;} .impact-card {padding:26px;} .impact-card > strong{margin:20px 0;} .section-heading > p {max-width:600px;} .service-card {min-height:260px;} }
@media(max-width:600px) {
  html { scroll-padding-top:84px; } .container { width:auto!important;max-width:none!important;margin-inline:20px!important; }
  .section {padding-block:68px;} .hero {min-height:0;padding-top:110px;padding-bottom:30px;} .hero-inner {min-width:0;} .hero-content {min-width:0;padding-bottom:105px;}
  .hero h1 {font-size:clamp(44px,13vw,69px);line-height:1.02;letter-spacing:-.06em;overflow-wrap:normal;}
  .hero-description {margin-block:23px;font-size:14px;line-height:1.85;max-width:100%;}
  .hero-actions {display:grid;grid-template-columns:1fr 1fr;gap:9px;} .hero-actions > * {min-width:0;padding-inline:11px;font-size:11px;}
  .hero-links {flex-wrap:wrap;row-gap:10px;} .hero-proof{margin-top:18px;gap:7px;}.hero-chip{font-size:10px;max-width:100%;}
  .stats-section {padding-block:30px;} .stats-grid {gap:10px;} .stat-card {min-width:0;}
  .section-heading {margin-bottom:25px;gap:15px;} .section-heading h2 {font-size:clamp(35px,10vw,49px);letter-spacing:-.05em;}
  .filter-nav {overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:-20px;padding:0 20px 8px;gap:8px;} .filter-nav::-webkit-scrollbar{display:none;} .filter-nav button {white-space:nowrap;flex:0 0 auto;min-height:42px;padding:10px 14px;}
  .service-grid,.impact-grid,.method-steps {grid-template-columns:1fr;} .service-card{min-height:unset;padding:23px;} .service-card > svg{margin:21px 0 15px;}
  .method-step{border-inline-end:0!important;border-bottom:1px solid #ffffff18;padding:23px;gap:14px;}.method-step:last-child{border:0;}
  .case-grid{grid-template-columns:1fr;gap:9px;}.case-role,.case-evidence{grid-column:auto;}.case-block,.case-role{padding:15px;}
  .contact-panel {padding:33px 22px;} .quick-contact{right:max(13px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));}
  .dialog-body{padding:24px 18px 27px;}.project-dialog {width:calc(100vw - 18px);max-height:calc(100dvh - 24px);}
}
@media(max-width:375px) { .container{margin-inline:15px!important;} .filter-nav{margin-inline:-15px;padding-inline:15px;} .hero h1 {font-size:clamp(39px,12vw,50px);} .brand-name{font-size:12px;} .hero-actions{grid-template-columns:1fr;} .hero-actions > *{min-height:46px;} }
@media(prefers-reduced-motion:reduce) { .service-card:hover,.impact-card:hover,.project-card:hover{transform:none;} .project-cover img{transition:none!important;} }


/* Portfolio finish: mobile rhythm, readable typography and controlled motion */
.hero h1{overflow-wrap:normal;text-wrap:balance}
#projectDialog{max-height:calc(100dvh - 36px)}
.project-dialog .dialog-body{overscroll-behavior:contain}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .project-card:hover .project-cover img{transform:scale(1.035)}
  .btn-primary:hover,.btn-outline:hover{transform:translateY(-2px)}
}
@media(max-width:640px){
  .container{width:calc(100% - 36px)}
  .hero{min-height:initial;padding-top:108px;padding-bottom:46px}
  .hero-content{padding-bottom:75px}
  .hero-kicker{margin-top:32px}
  .hero h1{font-size:clamp(43px,12vw,65px);letter-spacing:-.066em;line-height:1.04;max-width:100%;text-wrap:balance}
  .hero-description{margin:24px 0 26px;max-width:39ch;line-height:1.73}
  .hero-actions{width:100%;gap:9px}
  .hero-actions>a{flex:1 1 142px;padding:0 12px;text-align:center}
  .hero-proof{margin-top:18px;gap:7px}
  .hero-chip{font-size:10px;padding:8px 10px}
  .section{padding-top:70px;padding-bottom:70px}
  .section-heading{margin-bottom:24px}
  .project-cover,.project-card.wide .project-cover{height:205px}
  .project-body{padding:20px}
  .impact-card{min-width:0}
  .impact-card>a{min-height:44px;display:inline-flex;align-items:center}
  .project-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:auto}
  .project-dialog .dialog-body{padding:22px 18px 26px}
  .quick-contact{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:370px){
  .container{width:calc(100% - 28px)}
  .hero h1{font-size:clamp(38px,11.8vw,47px);letter-spacing:-.073em}
  .hero-actions>a{flex-basis:100%}
  .hero-description{font-size:13.5px}
}