:root{
  --bg:#000;--surface:#071018;--surface-2:#0b1721;--text:#fff;--muted:#a5b2c1;
  --cyan:#1eccd5;--cyan-bright:#62edf3;--line:rgba(30,204,213,.24);--shadow:rgba(0,0,0,.48)
}
body.theme-day{
  --bg:#f6fafc;--surface:#fff;--surface-2:#edf6f8;--text:#07131d;--muted:#536477;
  --line:rgba(7,94,107,.24);--shadow:rgba(7,28,38,.14)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Haboro Soft','Segoe UI',Arial,sans-serif;line-height:1.65;overflow-x:hidden}
a{text-decoration:none;color:inherit;cursor:pointer}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;padding:10px 14px;background:var(--cyan);color:#001014;transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:none}
.nav{position:fixed;inset:0 0 auto;z-index:50;background:rgba(0,0,0,.84);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
body.theme-day .nav{background:rgba(255,255,255,.9)}
.nav-inner{height:82px;max-width:1420px;margin:auto;padding:0 34px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{width:168px;height:70px;object-fit:contain;object-position:left center}
.nav-links{display:flex;align-items:center;gap:28px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.nav-links a{min-height:44px;display:flex;align-items:center;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links .active{color:var(--cyan)}
.theme-toggle{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-size:18px}
.theme-toggle:focus-visible,.nav-links a:focus-visible,.profile-action:focus-visible,.profile-switch:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.profile-hero{min-height:100svh;padding-top:82px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);position:relative;overflow:hidden;background:var(--surface)}
.profile-hero::before{content:'';position:absolute;width:680px;height:680px;border:1px solid var(--line);border-radius:50%;left:-360px;top:9%;box-shadow:0 0 0 110px rgba(30,204,213,.022),0 0 0 220px rgba(30,204,213,.012);pointer-events:none}
.profile-copy{position:relative;z-index:2;padding:clamp(70px,8vw,140px);display:flex;flex-direction:column;justify-content:center}
.profile-back{width:max-content;display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--cyan);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:clamp(40px,7vh,78px)}
.profile-back::before{content:'←';font-size:17px;transition:transform .2s}
.profile-back:hover::before{transform:translateX(-4px)}
.profile-label{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.profile-name{font-size:clamp(56px,7vw,108px);line-height:.88;font-weight:720;letter-spacing:-4px;text-transform:uppercase;max-width:780px}
.profile-role{font-size:clamp(18px,2vw,30px);line-height:1.35;color:var(--muted);margin-top:32px;max-width:650px}
.profile-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.profile-tags span{padding:10px 14px;border:1px solid var(--line);color:var(--cyan);font-size:12px;letter-spacing:.3px}
.profile-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:42px}
.profile-action{min-height:48px;display:inline-flex;align-items:center;gap:13px;padding:12px 18px;border:1px solid var(--cyan);font-size:11px;letter-spacing:1.7px;text-transform:uppercase;transition:background .2s,color .2s,transform .2s}
.profile-action.primary{background:var(--cyan);color:#001014;font-weight:650}
.profile-action:hover{transform:translateY(-2px)}
.profile-action:not(.primary):hover{background:rgba(30,204,213,.08)}
.profile-media{position:relative;min-height:720px;overflow:hidden;background:#031014}
.profile-media::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(7,16,24,.62),transparent 34%),linear-gradient(0deg,rgba(0,0,0,.38),transparent 42%);pointer-events:none}
.profile-media::after{content:'';position:absolute;inset:auto 8% 7% auto;z-index:3;width:92px;height:2px;background:var(--cyan);box-shadow:0 0 24px var(--cyan)}
.profile-media img{width:100%;height:100%;object-fit:cover;object-position:center 15%;transform:scale(1.025);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.profile-adnan .profile-media img{object-position:center 52%}
.profile-hero:hover .profile-media img{transform:scale(1.045)}
.profile-media .initials-portrait{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(30,204,213,.36),transparent 36%),linear-gradient(155deg,#02090c 6%,#03343b 58%,#087d88 100%)}
.profile-media .initials-portrait span{position:absolute;display:block;font-family:Arial,sans-serif;font-weight:700;line-height:.72;user-select:none;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.profile-media .initial-back{font-size:clamp(390px,40vw,700px);color:rgba(53,182,194,.2);transform:translate(16%,0);letter-spacing:-.12em}
.profile-hero:hover .profile-media .initial-back{transform:translate(18%,0) scale(1.025)}
.profile-monogram{position:absolute;z-index:3;right:7%;bottom:8%;color:#fff;text-align:right}
.profile-monogram small{display:block;color:var(--cyan-bright);font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px}
.profile-monogram strong{font-size:15px;letter-spacing:1px;font-weight:500}
.profile-about{min-height:76vh;padding:clamp(92px,10vw,160px) 7vw;display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:clamp(50px,9vw,140px);align-items:start;background:var(--bg)}
.profile-about-title{font-size:clamp(44px,6vw,82px);line-height:.95;font-weight:720;text-transform:uppercase;letter-spacing:-2px}
.profile-about-title span{display:block;color:var(--cyan);margin-top:16px}
.profile-bio{max-width:820px;color:var(--muted);font-size:18px;line-height:1.85}
.profile-bio p+p{margin-top:25px}
.profile-statement{min-height:88vh;padding:90px 7vw;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#041317,#07343a 48%,#061117);color:#fff}
.profile-statement::before{content:'';position:absolute;inset:-25%;background:linear-gradient(120deg,transparent 0 31%,rgba(30,204,213,.14) 32% 43%,transparent 44% 66%,rgba(255,255,255,.055) 67% 75%,transparent 76%);transform:rotate(-7deg)}
.statement-inner{position:relative;width:min(1280px,100%);display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(44px,7vw,92px);align-items:center}
.statement-image{height:min(62vh,600px);min-height:480px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:18px;box-shadow:0 34px 100px rgba(0,0,0,.42)}
.statement-image img{width:100%;height:100%;object-fit:cover;object-position:center 14%}
.profile-adnan .statement-image img{object-position:center 52%}
.statement-copy .label{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--cyan-bright);margin-bottom:22px}
.statement-copy h2{font-size:clamp(34px,4.4vw,62px);font-weight:480;line-height:1.15;letter-spacing:-1.2px}
.statement-copy p{font-size:17px;color:#bfd0d7;margin-top:26px;max-width:680px}
.profile-switcher{padding:76px 7vw;background:var(--surface);border-top:1px solid var(--line)}
.switcher-inner{max-width:1280px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:28px}
.profile-switch{min-height:64px;display:flex;align-items:center;gap:18px;color:var(--muted);transition:color .2s,transform .2s}
.profile-switch:hover{color:var(--cyan);transform:translateX(4px)}
.profile-switch.back:hover{transform:translateX(-4px)}
.profile-switch .arrow{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:19px}
.profile-switch small{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
.profile-switch strong{display:block;font-size:17px;font-weight:500;color:var(--text);margin-top:4px}
.footer{padding:44px 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--muted);font-size:13px;background:var(--bg)}
.footer img{width:140px;height:60px;object-fit:contain;object-position:left center}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:960px){
  .nav-inner{height:72px;padding:0 22px}.brand img{width:140px;height:60px}.nav-links a:not(.active){display:none}
  .profile-hero{padding-top:72px;grid-template-columns:1fr}.profile-copy{padding:72px 28px 64px}.profile-back{margin-bottom:44px}.profile-name{letter-spacing:-2px}
  .profile-media{min-height:620px}.profile-about{grid-template-columns:1fr;gap:44px;padding:90px 28px}.statement-inner{grid-template-columns:1fr}.profile-statement{padding:74px 28px}.statement-image{height:480px}.switcher-inner{align-items:flex-start}
}
@media(max-width:620px){
  .nav-links{gap:14px}.profile-name{font-size:clamp(48px,17vw,76px)}.profile-role{margin-top:24px}.profile-tags{margin-top:28px}
  .profile-media{min-height:470px}.profile-about{padding:78px 24px}.profile-bio{font-size:16px}.profile-statement{padding:64px 24px}.statement-image{height:380px;min-height:0}
  .profile-media .initial-back{font-size:clamp(300px,96vw,430px)}
  .switcher-inner{flex-direction:column}.profile-switcher{padding:54px 24px}.footer{padding:34px 24px;flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.profile-media img,.profile-media .initials-portrait span,.profile-back::before,.profile-action,.profile-switch{transition:none}.reveal{opacity:1;transform:none}.profile-hero:hover .profile-media img{transform:scale(1.025)}}
