*{box-sizing:border-box} :root{--bg:#f7f9ff;--card:#ffffff;--text:#111522;--muted:#66718a;--blue:#2865f2;--blue2:#08b9ed;--line:#e3e7f0;--soft:#f1f4fb;--shadow:0 22px 55px rgba(20,33,65,.13)}
html,body{width:100%;height:100%;min-height:100%;margin:0;overflow:hidden}
body{font-family:Cairo,Inter,sans-serif;background:var(--bg);color:var(--text);transition:background .35s,color .35s;position:relative}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 50% 5%,#e5efff 0,transparent 55%),linear-gradient(145deg,#fff,#f4f7ff)}
.backdrop-glow{position:fixed;width:300px;height:300px;border-radius:50%;filter:blur(85px);opacity:.22;z-index:-2;pointer-events:none;animation:glowDrift 13s ease-in-out infinite alternate}.glow-a{background:#3785ff;top:10%;left:-160px}.glow-b{background:#00d5e8;right:-170px;bottom:4%;animation-delay:-4s}
.topbar{height:78px;position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,76px);z-index:10}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-family:Manrope,Inter,sans-serif;font-size:14px;font-weight:900;letter-spacing:1.5px}.logo-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(140deg,#2d7aff,#05c9ed);color:white;box-shadow:0 6px 18px #2b7cff55}.logo-light{font-weight:500;color:var(--muted)}
.top-controls{display:flex;align-items:center;gap:10px;padding:7px 10px;background:#ffffffc9;border:1px solid #e7eaf2;border-radius:40px;box-shadow:0 8px 22px #1c2d4a12;backdrop-filter:blur(18px)}.language-switch{display:flex;gap:3px}.lang{border:0;background:transparent;color:#69738a;padding:7px 10px;border-radius:20px;font:700 10px Manrope,sans-serif;cursor:pointer;transition:.25s}.lang.active{background:#edf3ff;color:#1d5fe9;outline:1.5px dashed #3478ff}.theme-toggle{width:33px;height:33px;border:0;border-radius:50%;background:#eef0f4;color:#222;font-size:17px;cursor:pointer;transition:.3s}.theme-toggle:hover{transform:rotate(-15deg);background:#dfeaff}.top-signature{font:900 12px Manrope,sans-serif;letter-spacing:4px;padding:0 9px}
.stage{height:100svh;min-height:500px;display:flex;align-items:center;justify-content:center;padding:90px clamp(18px,7.8vw,120px) 95px;position:relative;isolation:isolate}
.main-card{width:min(1160px,100%);height:min(430px,calc(100svh - 190px));min-height:340px;display:grid;grid-template-columns:1fr 1.05fr;direction:ltr;background:var(--card);border:1px solid #e0e3eb;border-radius:26px;box-shadow:var(--shadow);overflow:hidden;position:relative;animation:cardEnter .8s cubic-bezier(.2,.8,.2,1) both}
.main-card:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,#ffffff44 50%,transparent 65%);transform:translateX(-120%);animation:cardShine 9s ease-in-out infinite}
.visual-side{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 50%,#f1f3f8 0 42%,transparent 42.5%)}.visual-side:before{content:"";position:absolute;width:310px;height:310px;border-radius:50%;border:1px solid #dbe5fa;box-shadow:0 0 0 18px #f6f8fc,0 0 0 19px #e8eef9}.avatar-halo{position:absolute;width:300px;height:300px;border-radius:50%;background:linear-gradient(135deg,#d9e8ff,#f4f7fc);filter:blur(1px)}.avatar-ring{width:min(265px,70%);aspect-ratio:1;position:relative;z-index:2;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#fff,#e8f0ff);border:8px solid #ffffff;box-shadow:0 16px 45px #244a8b24,0 0 0 1px #dfe8f8;animation:avatarFloat 6s ease-in-out infinite}.avatar{width:100%;height:100%;object-fit:cover;border-radius:50%}
.floating-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #e2e9f7;border-radius:30px;background:#ffffffdf;box-shadow:0 8px 24px #1e3d7416;backdrop-filter:blur(12px);font:700 10px Cairo,sans-serif;color:#33415f;animation:chipFloat 5s ease-in-out infinite}.chip-top{top:17%;left:7%}.chip-bottom{bottom:16%;right:5%;animation-delay:-2s}.chip-dot,.credit-dot{width:7px;height:7px;border-radius:50%;background:#15d69a;box-shadow:0 0 10px #15d69a}.chip-code{font:800 12px Manrope;color:#236bfa}.visual-caption{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font:700 7px Manrope;letter-spacing:2px;color:#91a0ba;white-space:nowrap}
.content-side{direction:rtl;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:35px clamp(28px,5vw,68px);position:relative;z-index:2;animation:contentIn .7s .12s both}.eyebrow{display:flex;align-items:center;gap:9px;color:#52627f;font-size:clamp(17px,2vw,25px);margin-bottom:8px}.eyebrow-line{width:20px;height:2px;background:var(--blue);border-radius:4px}
h1{font-size:clamp(39px,5vw,59px);line-height:1.18;margin:0;color:#111;font-weight:900;letter-spacing:-1px}h2{font:800 clamp(17px,2vw,23px) Manrope,Inter,sans-serif;color:var(--blue);margin:9px 0 12px;letter-spacing:.2px}.lead{font-size:clamp(15px,1.6vw,20px);color:#43516c;margin:0 0 8px;font-weight:700}.description{max-width:510px;font-size:clamp(11px,1.1vw,13px);line-height:2;color:var(--muted);margin:0}
.actions{display:flex;align-items:center;gap:12px;margin-top:23px;flex-wrap:wrap}.button{height:46px;padding:0 21px;border-radius:30px;border:1px solid var(--line);font:700 11px Cairo,sans-serif;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}.button:hover{transform:translateY(-3px)}.primary{background:linear-gradient(110deg,#3177ff,#2058e8);border-color:transparent;color:white;box-shadow:0 7px 17px #2865f24a}.primary:hover{box-shadow:0 10px 25px #2865f26b}.secondary{background:var(--card);color:var(--text)}.secondary:hover{border-color:#8db1ff}.button-arrow{font:18px Manrope;margin-right:9px}
.socials{display:flex;align-items:center;gap:9px;margin-top:24px}.social{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;text-decoration:none;background:#f2f5fb;color:#2865f2;font:700 17px Manrope;transition:.25s}.social:hover{background:transparent;transform:translateY(-4px) scale(1.08);box-shadow:0 8px 20px #2865f244}.social img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 5px #15264a20)}.social.instagram,.social.facebook{background:transparent}.instagram{color:#d23d83}.social-label{font-size:10px;color:#8a95aa;margin-right:4px}
.bottom-nav{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:4px;padding:6px;background:#ffffffdf;border:1px solid #e1e5ed;border-radius:40px;box-shadow:0 7px 18px #14244320;backdrop-filter:blur(20px);max-width:calc(100vw - 28px)}.nav-item{display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;color:#626b7d;border-radius:30px;padding:10px 17px;font:700 10px Cairo,sans-serif;white-space:nowrap;cursor:pointer;transition:.25s}.nav-icon{font:17px Manrope;line-height:1}.nav-item:hover{background:#f1f5ff;color:#205eea}.nav-item.selected{background:#11131a;color:white;box-shadow:0 3px 9px #0002}
.credit{position:absolute;bottom:35px;right:clamp(18px,7.8vw,120px);display:flex;align-items:center;gap:6px;font-size:9px;color:#8993a6}.credit b{color:var(--text);font:700 9px Manrope}.decor{position:absolute;border:1px solid #cdddf8;border-radius:50%;z-index:-1;opacity:.6}.decor-one{width:520px;height:520px;right:-160px;top:10%}.decor-two{width:340px;height:340px;left:-100px;bottom:5%}
.panel-enter{animation:panelIn .35s ease both}.info-view{width:100%}.info-view .view-title{font-size:clamp(25px,3.5vw,39px);margin:0 0 14px}.info-view .view-text{color:var(--muted);font-size:13px;line-height:2;max-width:560px}.mini-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.mini-pill{font:700 10px Manrope,sans-serif;padding:8px 12px;border-radius:20px;background:#eff4ff;color:#275fce;border:1px solid #dce8ff}.project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:12px}.project-mini{border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--soft)}.project-mini b{display:block;font-size:12px}.project-mini span{font-size:10px;color:var(--muted)}.contact-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.contact-links a{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--blue);border:1px solid #dce6fa;padding:9px 13px;border-radius:24px;text-decoration:none}.contact-links img{width:22px;height:22px;object-fit:contain}
body.dark{--bg:#080e20;--card:#101a31;--text:#edf3ff;--muted:#a0aec8;--line:#273653;--soft:#14213b;--shadow:0 22px 55px #0006;background:#080e20}body.dark:before{background:radial-gradient(ellipse at 50% 5%,#142c59 0,transparent 55%),linear-gradient(145deg,#080e20,#0a142b)}body.dark .top-controls,body.dark .bottom-nav{background:#121e36e8;border-color:#2b3a58}body.dark .theme-toggle{background:#263653;color:#fff}body.dark .lang{color:#aebbd2}body.dark .lang.active{background:#1d3766;color:#a9d4ff;outline-color:#5293ff}body.dark .main-card{border-color:#293b5b}body.dark h1{color:#f2f6ff}body.dark .eyebrow,body.dark .lead{color:#c4d1e8}body.dark .visual-side{background:radial-gradient(circle at 50% 50%,#1a2944 0 42%,transparent 42.5%)}body.dark .visual-side:before{border-color:#293d5f;box-shadow:0 0 0 18px #121e35,0 0 0 19px #263957}body.dark .avatar-halo{background:linear-gradient(135deg,#253c60,#14223c)}body.dark .avatar-ring{background:#182844;border-color:#243653}body.dark .floating-chip{background:#182744e8;border-color:#334766;color:#dce8ff}body.dark .nav-item{color:#a9b8d1}body.dark .nav-item.selected{background:#eaf2ff;color:#111}body.dark .social{background:#1d2d4a}body.dark .secondary{background:#14213a;color:#eaf1ff}body.dark .mini-pill{background:#1b3155;color:#c4dfff;border-color:#304b75}body.dark .project-mini{background:#14213a}body.dark .credit b{color:#e8f0ff}
@keyframes cardEnter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}@keyframes contentIn{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:none}}@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes cardShine{0%,65%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}@keyframes glowDrift{to{transform:translate(80px,-40px) scale(1.15)}}
html[lang="fr"] body,html[lang="en"] body{font-family:Inter,Cairo,sans-serif}html[lang="fr"] .content-side,html[lang="en"] .content-side{direction:ltr;align-items:flex-start}html[lang="fr"] .eyebrow-line,html[lang="en"] .eyebrow-line{order:-1}html[lang="fr"] .social-label,html[lang="en"] .social-label{margin-left:4px;margin-right:0}html[lang="fr"] .button-arrow,html[lang="en"] .button-arrow{margin-left:9px;margin-right:0}
@media(max-width:760px){.topbar{height:65px;padding:0 15px}.stage{padding:78px 14px 86px;min-height:500px}.main-card{height:calc(100svh - 170px);min-height:350px;grid-template-columns:.82fr 1.18fr;border-radius:20px}.visual-side:before{width:220px;height:220px}.avatar-halo{width:205px;height:205px}.avatar-ring{width:min(190px,78%);border-width:6px}.floating-chip{font-size:8px;padding:7px 9px}.chip-top{left:2%;top:19%}.chip-bottom{right:2%;bottom:17%}.visual-caption{font-size:6px;letter-spacing:1px}.content-side{padding:20px 20px}.eyebrow{font-size:16px}h1{font-size:clamp(32px,6vw,48px)}h2{font-size:clamp(13px,2.5vw,19px)}.lead{font-size:13px}.description{font-size:10px}.actions{gap:7px;margin-top:15px}.button{height:39px;padding:0 13px;font-size:9px}.socials{margin-top:15px}.social{width:27px;height:27px}.social-label{font-size:8px}.bottom-nav{bottom:13px}.nav-item{padding:9px 12px;font-size:9px}.credit{display:none}}
@media(max-width:520px){.stage{padding:76px 12px 75px}.main-card{height:calc(100svh - 160px);min-height:420px;max-height:650px;grid-template-columns:1fr;grid-template-rows:39% 61%;direction:ltr}.visual-side{grid-row:1}.visual-side:before{width:185px;height:185px}.avatar-halo{width:170px;height:170px}.avatar-ring{width:145px}.chip-top{top:10%;left:8%}.chip-bottom{bottom:10%;right:8%}.visual-caption{display:none}.content-side{grid-row:2;align-items:center;text-align:center;padding:10px 20px 17px;justify-content:flex-start}.eyebrow{font-size:14px;margin-bottom:2px}.eyebrow-line{display:none}h1{font-size:36px}h2{font-size:15px;margin:3px 0 5px}.lead{font-size:12px;margin-bottom:3px}.description{font-size:10px;line-height:1.7;max-width:360px}.actions{justify-content:center;margin-top:12px}.socials{justify-content:center;margin-top:11px}.bottom-nav{width:calc(100vw - 24px);justify-content:space-around;gap:0;padding:5px}.nav-item{flex:1;flex-direction:column;gap:2px;padding:6px 3px;font-size:8px}.nav-icon{font-size:15px}.topbar{padding:0 12px}.logo{font-size:11px}.logo-mark{width:30px;height:30px}.top-controls{gap:4px;padding:5px}.lang{padding:6px 7px}.top-signature{letter-spacing:2px;padding:0 5px}.project-list{grid-template-columns:1fr}.info-view .view-title{font-size:26px}.info-view .view-text{font-size:11px}}
@media(max-height:650px) and (min-width:521px){.topbar{height:58px}.stage{padding-top:65px;padding-bottom:65px}.main-card{height:calc(100svh - 135px);min-height:300px}.avatar-ring{width:min(220px,65%)}.avatar-halo{width:250px;height:250px}.visual-side:before{width:260px;height:260px}.bottom-nav{bottom:8px}.nav-item{padding:7px 14px}.credit{bottom:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Project cards are real external links */
.project-link{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}
.project-link:hover{transform:translateY(-4px);border-color:#3478ff;box-shadow:0 10px 24px #2865f222}
.project-link b{display:flex;align-items:center;justify-content:space-between;gap:12px}
.project-arrow{color:var(--blue);font:700 16px Manrope,sans-serif}
.project-link span:not(.project-arrow){display:block;margin-top:7px}