:root{
  --brown:#4a3025; --brown2:#6b4938; --cream:#fff8ec; --cream2:#f5ead9;
  --green:#8da33b; --green2:#dbe5a0; --pink:#e9a1ad; --pink2:#f7d6da;
  --yellow:#f4cf5b; --ink:#2e2924; --white:#fffdf8; --line:#d8c9b7;
  --serif:"Playfair Display",serif; --sans:"DM Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}
.section{padding:105px 7vw;max-width:1500px;margin:auto}
.navbar{height:82px;padding:0 7vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(255,248,236,.9);backdrop-filter:blur(16px);z-index:20;border-bottom:1px solid rgba(216,201,183,.5)}
.brand{font-weight:700;font-size:20px;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}
.brand span{display:grid;place-items:center;background:var(--brown);color:var(--yellow);width:31px;height:31px;border-radius:50%;font-family:var(--serif)}
.nav-links{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}
.nav-links a:not(.nav-cta){opacity:.65;transition:.2s}.nav-links a:hover{opacity:1}
.nav-cta{background:var(--brown);color:white;padding:12px 18px;border-radius:100px}
.menu-toggle{display:none;background:none;border:0}
.hero{min-height:calc(100vh - 82px);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;padding-top:70px;padding-bottom:80px}
.eyebrow,.section-label,.tiny-label{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--brown2)}
.eyebrow{display:flex;align-items:center;gap:9px}.dot{width:8px;height:8px;background:var(--green);border-radius:50%}
h1{font-family:var(--serif);font-size:clamp(58px,7.3vw,112px);line-height:.95;letter-spacing:-4px;margin:22px 0 28px}
h1 em,h2 em{color:var(--green);font-weight:600}
.hero-text{font-size:17px;line-height:1.75;max-width:520px;color:#6b625a}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:35px}
.btn{display:inline-flex;align-items:center;gap:22px;padding:16px 21px;border-radius:100px;font-weight:700;font-size:14px;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-3px);box-shadow:0 9px 22px #4a302522}
.btn-dark{background:var(--brown);color:white}.btn-light{background:var(--yellow);color:var(--brown)}
.text-link{font-size:13px;font-weight:700;border-bottom:1px solid var(--brown);padding-bottom:4px}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}
.portrait-card{width:min(390px,80%);aspect-ratio:4/5;background:var(--pink);border-radius:48% 48% 35% 35%;position:relative;overflow:hidden;box-shadow:15px 20px 0 var(--green2)}
.portrait-shape{height:100%;position:relative}.face{position:absolute;z-index:3;width:170px;height:205px;background:#d79571;border-radius:48% 48% 45% 45%;top:28%;left:50%;transform:translateX(-50%)}
.hijab{position:absolute;z-index:4;width:285px;height:330px;background:var(--brown);border-radius:52% 52% 35% 35%;top:20%;left:50%;transform:translateX(-50%);clip-path:polygon(18% 0,82% 0,100% 30%,88% 100%,12% 100%,0 30%);box-shadow:inset 0 -20px 0 rgba(0,0,0,.07)}
.face{z-index:5}.eye{position:absolute;width:7px;height:9px;background:var(--brown);border-radius:50%;top:46%}.e1{left:29%}.e2{right:29%}.blush{position:absolute;width:24px;height:10px;background:#cf6874;border-radius:50%;opacity:.4;top:57%}.b1{left:10%}.b2{right:10%}.smile{position:absolute;width:22px;height:10px;border-bottom:2px solid var(--brown);border-radius:50%;left:50%;top:65%;transform:translateX(-50%)}
.shirt{position:absolute;width:290px;height:190px;background:var(--green);bottom:-35px;left:50%;transform:translateX(-50%);border-radius:50% 50% 0 0}
.mini-note{position:absolute;z-index:8;right:18px;bottom:32px;background:var(--yellow);padding:13px 17px;border-radius:13px;font-size:10px;line-height:1.4;transform:rotate(4deg)}.mini-note strong{font-size:14px}
.sticker{position:absolute;z-index:10;background:var(--white);padding:12px 16px;border-radius:50%;font-size:11px;font-weight:700;box-shadow:4px 5px 0 var(--brown);transform:rotate(-10deg);top:5%;right:4%}
.floating{position:absolute;font-size:55px}.flower{left:5%;bottom:12%;color:var(--green);transform:rotate(12deg)}.star{right:4%;top:20%;color:var(--yellow);font-size:40px}
.marquee-band{background:var(--brown);color:var(--yellow);overflow:hidden;padding:15px 0;white-space:nowrap}
.marquee{display:flex;width:max-content;align-items:center;gap:32px;font-size:12px;font-weight:700;letter-spacing:3px;animation:marquee 20s linear infinite}.marquee b{color:var(--pink);font-size:18px}@keyframes marquee{to{transform:translateX(-50%)}}
.about-grid,.skills-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:12vw;margin-top:45px}
h2{font-family:var(--serif);font-size:clamp(45px,5vw,76px);line-height:1.02;letter-spacing:-2px;margin-top:15px}h2 span{color:var(--pink)}
.about-copy{max-width:600px}.about-copy p{font-size:16px;line-height:1.85;color:#665d55;margin-bottom:18px}
.fact-row{display:flex;gap:10px;margin-top:38px}.fact-row div{background:var(--cream2);border-radius:17px;padding:17px 22px;display:flex;gap:14px;align-items:center}.fact-row strong{font-family:var(--serif);font-size:25px;color:var(--green)}.fact-row span{font-size:10px;line-height:1.3;font-weight:700;text-transform:uppercase}
.works{background:var(--cream2);max-width:none}.section-head{max-width:1500px;margin:auto;display:flex;justify-content:space-between;align-items:end;gap:50px}.section-head>p{max-width:310px;font-size:13px;line-height:1.7;color:#74695f}
.project-grid{max-width:1200px;margin:55px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.project-card{background:var(--white);border-radius:25px;overflow:hidden;transition:transform .25s;box-shadow:0 8px 30px #4a30250c}.project-card:hover{transform:translateY(-7px)}
.project-visual{height:360px;position:relative;display:grid;place-items:center;overflow:hidden}.project-green .project-visual{background:var(--green2)}.project-pink .project-visual{background:var(--pink2)}.project-yellow .project-visual{background:var(--yellow)}.project-brown .project-visual{background:#b99b84}
.project-number{position:absolute;top:20px;left:23px;font-size:11px;font-weight:700;opacity:.6}
.mock-window{width:74%;height:76%;background:white;border-radius:12px;box-shadow:0 15px 30px #4a302520;overflow:hidden;transform:rotate(-3deg)}.mock-top{height:25px;background:#f0ebe4;display:flex;gap:5px;align-items:center;padding-left:10px}.mock-top i{width:5px;height:5px;border-radius:50%;background:#a99789}.mock-content{height:calc(100% - 25px);padding:25px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(140deg,#fff,#f5e9df)}.mock-content span{font-size:10px;letter-spacing:3px;color:#8da33b}.mock-content b{font-family:var(--serif);font-size:29px;line-height:1.05;margin:10px 0}.mock-content small{font-size:7px;font-weight:700}
.phone-mock{background:var(--brown);color:white;width:210px;height:295px;border-radius:25px;padding:28px 22px;box-shadow:12px 18px 0 #e9a1ad;transform:rotate(4deg);display:flex;flex-direction:column}.phone-top{font-size:13px;letter-spacing:2px}.phone-top span{color:var(--yellow)}.case-pill{font-size:8px;background:#ffffff1c;width:max-content;padding:5px 8px;border-radius:10px;margin:45px 0 12px}.phone-mock b{font-family:var(--serif);font-size:23px;line-height:1.05}.progress{height:5px;background:#ffffff22;margin-top:auto;border-radius:5px}.progress i{display:block;width:65%;height:100%;background:var(--yellow);border-radius:5px}.phone-mock small{font-size:7px;margin-top:10px;letter-spacing:1px}
.human-card{width:210px;height:255px;background:#fff9dc;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:10px 14px 0 #6b493844;transform:rotate(-4deg);position:relative}.human-icon{width:95px;height:95px;border-radius:50%;display:grid;place-items:center;background:var(--pink);font-size:45px;color:white}.human-card strong{font-family:var(--serif);font-size:25px;margin-top:18px}.human-card small{font-size:7px;letter-spacing:2px}.human-orbit{position:absolute;top:25px;right:22px;color:var(--green);font-size:25px}
.mosque-card{width:225px;height:265px;border-radius:25px;background:var(--cream);color:var(--brown);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:10px 14px 0 #4a302544}.mosque-card>div{font-size:48px;color:var(--green)}.mosque-card strong{font-family:var(--serif);font-size:25px;margin-top:12px}.mosque-card small{font-size:7px;letter-spacing:2px}.mosque-card em{font-style:normal;font-weight:700;margin-top:30px;font-size:15px}
.project-info{padding:20px 23px;display:flex;justify-content:space-between;align-items:center}.project-info span{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#8a7b6d}.project-info h3{font-family:var(--serif);font-size:22px;margin-top:5px}.project-info>a{font-size:25px}
.skills{background:var(--brown);color:var(--cream)}.skills .section-label{color:var(--yellow)}.skills-grid{margin-top:55px}.skills-intro p{max-width:360px;color:#cdbeb0;line-height:1.7;margin-top:25px}.skills h2 em{color:var(--yellow)}
.skill-list{border-top:1px solid #ffffff2a}.skill{display:grid;grid-template-columns:50px 1fr 30px;align-items:center;gap:15px;padding:22px 0;border-bottom:1px solid #ffffff2a}.skill>span{font-size:10px;color:var(--pink)}.skill h3{font-size:16px}.skill p{font-size:11px;color:#bcaea2;margin-top:4px}.skill>b{font-size:19px;color:var(--yellow)}
.journey{background:var(--pink2);max-width:none}.timeline{max-width:950px;margin:55px auto 0;border-top:1px solid #4a302544}.timeline-item{display:grid;grid-template-columns:100px 1fr 50px;gap:30px;padding:28px 0;border-bottom:1px solid #4a302544;align-items:center}.timeline-item>span{font-size:10px;font-weight:700;letter-spacing:1px}.timeline-item h3{font-family:var(--serif);font-size:24px}.timeline-item p{font-size:13px;color:#665d55;max-width:600px;line-height:1.6;margin-top:5px}.timeline-item i{font-style:normal;font-size:25px;color:var(--green)}
.contact{background:var(--green);color:white;max-width:none;text-align:center;position:relative;overflow:hidden}.contact .section-label{color:var(--yellow)}.contact h2{margin:20px 0}.contact h2 em{color:var(--yellow)}.contact>p{color:#edf0d3;font-size:14px;margin:0 auto 30px;max-width:450px;line-height:1.7}.contact-deco{position:absolute;font-size:160px;opacity:.08;right:7%;top:10%}
footer{padding:38px 7vw;background:var(--brown);color:white;display:flex;justify-content:space-between;align-items:center}.footer-right{display:flex;gap:30px;align-items:center;font-size:11px;color:#cdbeb0}.footer-right a{color:var(--yellow)}footer p{font-size:10px;color:#b9a99b;margin-top:9px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
.cursor-glow{position:fixed;width:180px;height:180px;border-radius:50%;background:#f4cf5b20;pointer-events:none;transform:translate(-50%,-50%);z-index:0;filter:blur(20px)}
@media(max-width:800px){
  .navbar{height:70px;padding:0 6vw}.menu-toggle{display:flex;flex-direction:column;gap:5px}.menu-toggle i{width:25px;height:2px;background:var(--brown)}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--cream);padding:25px 7vw;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.nav-links.open{display:flex}.nav-cta{width:100%;text-align:center}
  .section{padding:75px 6vw}.hero{grid-template-columns:1fr;padding-top:55px;gap:20px}.hero-art{min-height:430px;order:-1}.portrait-card{width:260px}.hijab{width:205px;height:250px}.face{width:120px;height:150px}.shirt{width:220px}.sticker{top:4%;right:0}.flower{left:0;bottom:5%}.star{right:0}
  h1{font-size:clamp(52px,15vw,78px);letter-spacing:-3px}.hero-text{font-size:15px}.hero-actions{flex-wrap:wrap;gap:18px}
  .about-grid,.skills-grid{grid-template-columns:1fr;gap:40px}.fact-row{gap:7px}.fact-row div{padding:13px 12px;flex:1}.fact-row span{font-size:8px}
  .section-head{display:block}.section-head>p{margin-top:18px}.project-grid{grid-template-columns:1fr;gap:20px}.project-visual{height:300px}
  .timeline-item{grid-template-columns:60px 1fr 25px;gap:15px}.timeline-item h3{font-size:20px}
  footer{display:block}.footer-right{margin-top:25px;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none}.marquee{animation:none}}


/* Profile photo placeholder frame: replace assets/profile-placeholder.png later */
.profile-photo-card{width:min(390px,80%);aspect-ratio:4/5;position:relative;border-radius:48% 48% 30px 30px;padding:12px;background:var(--pink);box-shadow:15px 20px 0 var(--green2);transform:rotate(1.5deg)}
.profile-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:inherit;border:5px solid var(--cream);background:var(--cream2)}
.photo-caption{position:absolute;bottom:25px;left:-20px;background:var(--yellow);color:var(--brown);padding:12px 15px;border-radius:12px;font-size:10px;font-weight:700;box-shadow:4px 5px 0 #4a302522;transform:rotate(-5deg)}
@media(max-width:800px){.profile-photo-card{width:260px}}

.project-chess .project-visual{background:#d9c2a6;position:relative}.chess-board{width:230px;height:230px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:7px solid var(--brown);box-shadow:12px 14px 0 #4a302544;transform:rotate(-3deg);font-family:Georgia,serif}.chess-board div{display:grid;place-items:center;font-size:21px;background:#f4dfbd;color:var(--brown)}.chess-board div:nth-child(16n+1),.chess-board div:nth-child(16n+3),.chess-board div:nth-child(16n+5),.chess-board div:nth-child(16n+7),.chess-board div:nth-child(16n+10),.chess-board div:nth-child(16n+12),.chess-board div:nth-child(16n+14),.chess-board div:nth-child(16n+16){background:#8d684f;color:#fff8ec}.chess-label{position:absolute;bottom:24px;right:25px;background:var(--yellow);color:var(--brown);padding:9px 12px;border-radius:10px;font-size:12px;font-weight:800;line-height:1.15;transform:rotate(3deg);box-shadow:4px 5px 0 #4a302522}.chess-label small{font-size:6px;letter-spacing:1px}.project-grid .project-card:last-child{grid-column:1 / -1}.project-grid .project-card:last-child .project-visual{height:330px}@media(max-width:800px){.project-grid .project-card:last-child{grid-column:auto}.chess-board{width:205px;height:205px}.project-grid .project-card:last-child .project-visual{height:300px}}


.project-card[data-url]{cursor:pointer}.project-card[data-url]:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}