@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600;900&family=Playfair+Display:wght@700&display=swap');
:root{ --cream: #f6efe6; --black: #0b0b0b; --muted: #6b6b6b; --accent: #111111; --shadow: 0 30px 60px rgba(11,11,11,0.08);}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:Montserrat, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;background:var(--cream);color:var(--black);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.bg-shapes { position:fixed; left:0; right:0; top:0; bottom:0; pointer-events:none; z-index:0; overflow:hidden; }
.shape { position:absolute; background:var(--accent); opacity:0.07; transform:skewX(-12deg); border-radius:3px; will-change:transform; animation: floatSlow 14s linear infinite; }
.shape.s1{width:60%;height:260px;left:-12%;top:6%;animation-delay:0s}
.shape.s2{width:40%;height:160px;right:-8%;top:28%;transform:skewX(-6deg) rotate(-6deg);opacity:0.09;animation-delay:3s}
.shape.s3{width:72%;height:140px;left:-18%;bottom:10%;transform:skewX(-10deg);opacity:0.05;animation-delay:6s}
@keyframes floatSlow{0%{transform:translateY(0) translateX(0) scale(1) skewX(-12deg)}50%{transform:translateY(18px) translateX(8px) scale(1.02) skewX(-10deg)}100%{transform:translateY(0) translateX(0) scale(1) skewX(-12deg)}}
header{position:relative;z-index:20;padding:22px 36px;border-bottom:1px solid rgba(11,11,11,0.04);background:transparent}
nav{max-width:1100px;margin:0 auto;display:flex;justify-content:center;align-items:center;gap:26px}
nav a{font-weight:600;letter-spacing:0.6px;padding:6px 6px;color:var(--black);opacity:0.85;text-decoration:none;position:relative}
nav a.active{opacity:1}
nav a::after{content:'';position:absolute;left:0;right:0;height:3px;background:var(--black);bottom:-8px;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.9,.2,1)}
nav a:hover::after, nav a.active::after{transform:scaleX(1)}
.hero { max-width:900px; margin:80px auto 40px; padding:40px 20px; text-align:center; position:relative; z-index:10; }
.profile-centered { width:380px; height:380px; margin:0 auto; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:transparent; position:relative; }
.profile-centered img{ width:100%; height:100%; object-fit:cover; display:block; }
.name { font-family:'Playfair Display', serif; font-weight:700; font-size:64px; margin:18px 0 6px; line-height:0.95; position:relative; display:inline-block; z-index:12; }
.role { margin-top:8px; font-weight:600; text-transform:uppercase; color:var(--muted); letter-spacing:2px }
.bio { margin-top:18px; color:var(--muted); max-width:740px; margin-left:auto; margin-right:auto; line-height:1.6; font-size:1.05rem; }
.actions { margin-top:20px; display:flex; gap:14px; justify-content:center; align-items:center; }
.cta { background:#111; color:#fff; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,0.12); }
.social a{ color:var(--black); font-weight:700; text-decoration:none; border:1px solid rgba(11,11,11,0.06); padding:8px 12px; border-radius:8px; display:inline-block; }
.footer-login { max-width:900px; margin:40px auto; text-align:center; z-index:10; }
.login-btn { background:transparent; border:2px solid var(--black); padding:10px 14px; border-radius:8px; text-decoration:none; color:var(--black); font-weight:700; transition:all .25s }
.login-btn:hover { background:var(--black); color:var(--cream); transform:translateY(-4px) }
.section{max-width:1100px;margin:60px auto;padding:0 20px; position:relative; z-index:10}
.section h2{font-size:28px;margin-bottom:18px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:#fff;padding:12px;border-radius:12px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;transition:transform .45s, box-shadow .45s}
.card img{max-width:100%;height:auto;display:block;object-fit:contain;border-radius:8px}
.card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(11,11,11,0.08)}
.contact-card{background:#fff;padding:18px;border-radius:12px;box-shadow:var(--shadow)}
.fade-in-page{animation:fadeIn 1.5s ease both}
.fade-out{animation:fadeOut 0.45s ease both}
.reveal{opacity:0;transform:translateY(28px);transition:all .9s cubic-bezier(.2,.9,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{from{opacity:1}to{opacity:0;transform:translateY(-8px)}}
@media(max-width:820px){ .name{font-size:40px} .profile-centered{width:260px;height:260px} header{padding:14px} }