:root{
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#6b7b8c;
  --accent:#1faedb;
  --shadow: rgba(20,40,80,0.08);
}
body{font-family:'Montserrat', 'Poppins', 'Segoe UI', Meiryo, sans-serif;background:var(--bg);margin:0;padding:24px;color:#052235}
.profile-wrap{max-width:900px;margin:24px auto}
:root{--bg:#ffffff;--card:#ffffff;--muted:#6b7b8c;--accent:#1faedb;--shadow:rgba(20,40,80,0.08)}
*{box-sizing:border-box}
body{font-family:'Montserrat','Poppins','Segoe UI',Meiryo,sans-serif;background:var(--bg);margin:0;padding:24px;color:#052235}
.profile-wrap{max-width:900px;margin:24px auto}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg,#fbe8ff 0%,#e0f7fa 50%,#fff4e6 100%);background-size:cover;opacity:1;pointer-events:none;display:block}
.card{display:flex;gap:24px;background:rgba(255,255,255,0.50);border-radius:14px;padding:28px;box-shadow:0 12px 40px rgba(0,0,0,0.20);align-items:center;backdrop-filter:blur(8px) saturate(1.05);border:1px solid rgba(255,255,255,0.10)}
.avatar img{width:140px;height:140px;object-fit:cover;border-radius:50%;border:4px solid rgba(255,255,255,0.28);box-shadow:0 18px 40px rgba(3,20,40,0.45),0 0 30px rgba(255,255,255,0.06) inset}
.info{flex:1;color:#082533}
.name{font-size:28px;margin:0 0 6px;color:#052235}
.role{color:var(--muted);margin:0 0 14px}
.social-list{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0 0 18px}
.social-list li{background:transparent;padding:0;border:none;border-radius:0;}
.social-list a{display:inline-flex;gap:8px;align-items:center;color:#072b40;text-decoration:none;font-weight:600;position:relative;overflow:hidden}
.social-list svg{display:block}
.social-icon{width:20px;height:20px;display:inline-block;object-fit:contain}
.intro-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.85));backdrop-filter:blur(4px) saturate(1.02);transition:opacity 1200ms ease, transform 900ms ease}
.intro-content{display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}
.intro-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;border:6px solid rgba(255,255,255,0.18);box-shadow:0 18px 60px rgba(5,20,40,0.18),0 0 40px rgba(31,174,219,0.12) inset;transform-origin:center center;animation:avatarEntrance 900ms cubic-bezier(.2,.9,.28,1) both;position:relative}
.intro-welcome{margin-top:14px;font-size:20px;font-weight:700;color:#073044;letter-spacing:0.6px;text-shadow:0 4px 18px rgba(3,38,63,0.12);opacity:0;transform:translateY(8px);animation:welcomeIn 900ms cubic-bezier(.2,.9,.28,1) both}
.intro-sub{margin-top:8px;font-size:15px;font-weight:600;color:#09445a;opacity:0;transform:translateY(8px);animation:welcomeIn 1000ms cubic-bezier(.2,.9,.28,1) .06s both}
.intro-avatar::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:160px;height:160px;border-radius:50%;border:2px solid rgba(31,174,219,0.14);box-shadow:0 12px 30px rgba(31,174,219,0.08);opacity:0;pointer-events:none;z-index:-1;animation:ringPulse 1400ms ease-out .18s both}
.intro-avatar::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.55) 45%,rgba(255,255,255,0.0) 70%);transform:translateX(-160%);filter:blur(6px);animation:shine 1200ms ease .18s both;pointer-events:none}
.intro-exit{opacity:0;transform:scale(.98) translateY(-6px);pointer-events:none}
@media (max-width:640px){.intro-avatar{width:92px;height:92px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes avatarEntrance{0%{opacity:0;transform:scale(0) rotate(-8deg);filter:blur(6px)}60%{opacity:1;transform:scale(1.08) rotate(4deg);filter:blur(0)}100%{opacity:1;transform:scale(1) rotate(0deg);filter:none}}
@keyframes welcomeIn{0%{opacity:0;transform:translateY(10px) scale(.98)}60%{opacity:1;transform:translateY(0) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ringPulse{0%{opacity:0;transform:scale(.6)}50%{opacity:0.9;transform:scale(1.02)}100%{opacity:0;transform:scale(1.4)}}
@keyframes shine{0%{transform:translateX(-160%);opacity:0}20%{opacity:1}100%{transform:translateX(180%);opacity:0}}
.card{animation:fadeUp 600ms ease both}
.avatar img{animation:popIn 560ms cubic-bezier(.22,.9,.34,1) both}
.avatar img:hover{transform:scale(1.02);transition:transform .28s ease}
.btn{transition:transform .16s ease,box-shadow .16s ease,background .18s ease;position:relative;overflow:hidden}
.btn:hover{transform:none;box-shadow:0 8px 24px rgba(3,20,40,0.08)}
.btn::after,.social-list a::after{content:"";position:absolute;top:0;left:-75%;height:100%;width:60%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.88) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg) translateX(-150%);opacity:0;pointer-events:none;transition:transform 520ms cubic-bezier(.2,.9,.28,1),opacity 220ms ease}
.btn:hover::after,.social-list a:hover::after{transform:skewX(-20deg) translateX(180%);opacity:1}
.cta{margin-top:6px}
.btn{display:inline-block;padding:10px 16px;background:rgba(255,255,255,0.08);color:#fff;border-radius:10px;text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,0.12);transition:background .18s ease,transform .16s ease,box-shadow .16s ease;box-shadow:none}
.btn:hover{background:rgba(255,255,255,0.14);transform:scale(1.02);box-shadow:0 10px 30px rgba(3,20,40,0.12)}
.btn:active{transform:scale(0.995);box-shadow:0 6px 18px rgba(3,20,40,0.08)}
@media (max-width:640px){
  body{padding:16px}
  .profile-wrap{margin:12px auto;padding:0 8px}
  .card{flex-direction:column;align-items:center;text-align:center;padding:20px}
  .avatar img{width:120px;height:120px}
  .social-list{justify-content:center}
  .name{font-size:22px}
  /* Make social buttons easier to tap on mobile */
  .social-list{flex-direction:column;gap:10px}
  .social-list li{width:100%}
  .social-list a{display:flex;width:100%;justify-content:center;padding:12px 14px;border-radius:12px}
  .btn-large{width:100%;box-sizing:border-box}
}

/* Extra adjustments for very small screens */
@media (max-width:420px){
  .card{padding:16px;gap:12px}
  .avatar img{width:100px;height:100px}
  .name{font-size:20px}
  .role{font-size:14px}
  .intro-avatar{width:88px;height:88px}
  .btn-large{padding:12px 14px;font-size:15px}
  body{padding:12px}
}
.btn.btn-plain{background:linear-gradient(180deg,#fff,#fbfdff);color:#072b40;border:1px solid rgba(10,30,60,0.06);box-shadow:none}
.btn.btn-plain:hover{background:linear-gradient(180deg,#fbfdff,#f3f9ff);box-shadow:0 8px 24px rgba(3,20,40,0.06);transform:scale(1.02)}
.btn-large{padding:14px 20px;font-size:16px;border-radius:12px}
.social-list a{transition:transform .16s ease,box-shadow .16s ease,background .18s ease}
.social-list a:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(3,20,40,0.06)}

/* CTA text color (Go to Portal) */
.cta .btn{color:#e53935}