:root { --blue:#061b78; --deep:#020b3b; --cyan:#00caf4; --red:#ef172e; --yellow:#ffc400; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: white; background: #051862; font-family: Arial, Helvetica, sans-serif; }
.bio-page { width: min(100%, 650px); min-height: 100vh; margin: auto; padding: 36px 22px 0; position: relative; overflow: hidden; background: radial-gradient(circle at 85% 15%, #0e5bd4 0, transparent 25%), linear-gradient(155deg, #03114c, #073196 72%, #052170); box-shadow: 0 0 70px rgba(0,0,0,.28); }
.bio-page::before { content:''; position:absolute; inset:0; opacity:.18; background-image: linear-gradient(120deg, transparent 45%, var(--cyan) 45% 46%, transparent 46%), linear-gradient(35deg, transparent 72%, var(--red) 72% 74%, transparent 74%); pointer-events:none; }
.bio-map { width: 340px; height: 340px; position:absolute; right:-170px; top:70px; border: 28px solid rgba(0,202,244,.08); border-radius: 45% 55% 58% 42%; transform: rotate(18deg); }
.bio-profile { display:grid; justify-items:center; position:relative; z-index:1; text-align:center; }
.bio-logo { width: 230px; height: 92px; display:block; object-fit:cover; object-position:50% 75%; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.bio-avatar { width: 128px; height: 128px; margin-top: 15px; overflow:hidden; border:4px solid var(--cyan); border-radius:50%; background:#08257d; box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 7px rgba(255,255,255,.08); }
.bio-avatar img { width:100%; height:100%; object-fit:cover; object-position:50% 8%; transform:scale(1.35); transform-origin:center top; }
.bio-badge { margin-top:20px; padding:7px 12px; border-radius:99px; color:var(--yellow); background:rgba(0,0,0,.22); font-size:9px; font-weight:1000; letter-spacing:.17em; }
.bio-profile h1 { max-width:540px; margin:17px 0 0; color:white; font:900 clamp(40px,10vw,62px)/.94 Impact,'Arial Black',sans-serif; letter-spacing:-.02em; }
.bio-profile h1::first-line { color:var(--cyan); }
.bio-profile p { max-width:500px; margin:17px 0 0; color:#cfe0ff; font-size:14px; line-height:1.55; }
.bio-links { display:grid; gap:11px; margin:30px 0 36px; position:relative; z-index:1; }
.bio-links a { min-height:66px; display:grid; grid-template-columns:42px 1fr 30px; align-items:center; gap:12px; padding:8px 14px; border:1px solid rgba(255,255,255,.14); border-radius:10px; color:white; background:linear-gradient(100deg,#0960bd,#087bd2); box-shadow:0 5px 0 var(--cyan), 0 12px 22px rgba(0,0,0,.18); text-decoration:none; }
.bio-links a:hover { transform:translateY(-2px); filter:brightness(1.08); }
.bio-links span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--blue); background:var(--yellow); font-size:10px; font-weight:1000; }
.bio-links strong { font:italic 900 clamp(13px,3.8vw,17px)/1.15 Arial,sans-serif; text-align:center; }
.bio-links b { color:var(--cyan); font-size:22px; }
.bio-footer { display:grid; justify-items:center; gap:8px; padding:30px 15px 42px; position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.13); }
.bio-footer img { width:54px; height:54px; object-fit:contain; }
.bio-footer strong { font-size:16px; }
.bio-footer strong span { color:var(--yellow); }
.bio-footer small { color:#9fb2e2; text-align:center; }
.bio-ribbon { height:13px; display:grid; grid-template-columns:1fr 1fr 1fr; margin:0 -22px; position:relative; z-index:2; }
.bio-ribbon i:nth-child(1) { background:#111; }.bio-ribbon i:nth-child(2) { background:#fff; }.bio-ribbon i:nth-child(3) { background:var(--red); }
@media (max-width:420px) { .bio-page{padding:25px 15px 0}.bio-logo{width:200px}.bio-profile h1{font-size:42px}.bio-links a{min-height:64px;padding:8px 10px;grid-template-columns:36px 1fr 24px}.bio-links span{width:30px;height:30px}.bio-ribbon{margin:0 -15px} }