:root{
  --bg:#0b0f14;
  --txt:#e6e9ee;
  --muted:#9aa3ae;
  --accent:#68d5ff;
  --accent-2:#7c4dff;
  --glass:rgba(255,255,255,.06);
  --glass-stroke:rgba(255,255,255,.12);
  --ring:rgba(104,213,255,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--txt);
  background: radial-gradient(1200px 800px at 10% -10%, #101826 0%, #0b0f14 60%),
              radial-gradient(1000px 600px at 110% 10%, #0c1320 0%, #0b0f14 60%),
              var(--bg);
  min-height:100vh;
  color-scheme: dark;
}

/* Decorative backdrop */
.backdrop{ position:fixed; inset:0; overflow:hidden; z-index:-1 }
.blob{ position:absolute; width:42vw; height:42vw; filter: blur(40px) saturate(140%); opacity:.45; border-radius:50%; mix-blend-mode:screen }
.blob.b1{ background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); top:-12vw; left:-10vw; animation: float 16s ease-in-out infinite }
.blob.b2{ background: radial-gradient(circle at 60% 30%, var(--accent-2), transparent 60%); top:-14vw; right:-14vw; animation: float 20s ease-in-out infinite reverse }
.blob.b3{ background: radial-gradient(circle at 50% 70%, #24d39e, transparent 60%); bottom:-16vw; left:10vw; animation: float 26s ease-in-out infinite }

@keyframes float{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(0,-2.5rem,0) } }

.grid{ position:absolute; inset:-20%; background:
  radial-gradient(ellipse at center, rgba(255,255,255,.07), transparent 60%) center/140% 140% no-repeat,
  linear-gradient(transparent 98%, rgba(255,255,255,.06) 98%) top/100% 40px repeat-y,
  linear-gradient(90deg, transparent 98%, rgba(255,255,255,.06) 98%) left/40px 100% repeat-x;
  opacity:.25;
  mask-image: radial-gradient(circle at 50% 60%, black 30%, transparent 70%);
}

/* Layout */
.scene{ min-height:100vh; display:grid; place-items:center; padding:24px }
@supports (height: 100dvh){ .scene{ min-height:100dvh } }
@supports (height: 100svh){ .scene{ min-height:100svh } }
.scene{ padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.card{
  position:relative;
  width:min(860px, 92vw);
  padding: clamp(24px, 4vw, 40px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-stroke);
  box-shadow:
    0 10px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.badge{
  position:absolute; top:14px; right:14px;
  font-size:12px; letter-spacing:.3px; color:#d6ffe7;
  padding:6px 10px; border-radius:999px; background: rgba(36,211,158,.12);
  border: 1px solid rgba(36,211,158,.35);
}

.intro{ text-align:center; margin-bottom:18px }
.avatar{ width:72px; height:72px; margin-inline:auto; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid var(--glass-stroke); box-shadow: inset 0 1px 0 rgba(255,255,255,.08) }
.title{ font-weight:800; font-size: clamp(28px, 5vw, 40px); letter-spacing:.2px; margin:14px 0 6px }
.subtitle{ color: var(--muted); font-weight:600; letter-spacing:.5px; text-transform: uppercase; font-size:12px; margin:0 0 8px }
.tagline{ color:#d7dde6; opacity:.9; margin:0; font-size: clamp(14px, 2.2vw, 16px) }

.skills{ list-style:none; padding:0; margin:22px 0 26px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.skills li{
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-stroke);
  color:#dfe6f0; font-size:13px;
}

.cta{ display:flex; gap:12px; justify-content:center; margin:6px 0 6px; flex-wrap:wrap }
.button{
  --pad-x: 16px; --pad-y: 12px;
  display:inline-flex; align-items:center; gap:10px;
  padding: var(--pad-y) var(--pad-x);
  border-radius:12px; border:1px solid var(--glass-stroke);
  color:var(--txt); text-decoration:none; font-weight:600;
  position:relative; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.button.primary{
  background: linear-gradient(180deg, rgba(104,213,255,.25), rgba(124,77,255,.18));
  box-shadow: 0 0 0 0 var(--ring);
}
.button.primary .dot{ width:8px; height:8px; background: #24d39e; border-radius:50%; box-shadow: 0 0 0 4px rgba(36,211,158,.18) }
.button.ghost{ background: rgba(255,255,255,.04) }
.button .ext{ opacity:.8; transform: translateY(1px) }
.button:hover{ transform: translateY(-1px); box-shadow: 0 8px 30px rgba(104,213,255,.14) }
.button:active{ transform: translateY(0) scale(.98) }

.links{ margin-top:16px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
.links a{ display:inline-flex; align-items:center; gap:8px; color:#cdd6e3; text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid transparent }
.links a:hover{ color:#fff; border-color: var(--glass-stroke); background: rgba(255,255,255,.04) }

/* Small screens */
@media (max-width: 480px){
  .skills{ gap:8px }
  .skills li{ font-size:12px; padding:7px 10px }
  .button{ --pad-x: 14px; --pad-y: 11px }
}

/* Compact heights: keep content visible */
@media (max-height: 600px){
  .avatar{ width:60px; height:60px }
  .intro{ margin-bottom:10px }
  .skills{ margin:14px 0 18px }
  .badge{ top:10px; right:10px }
}

/* Subtle parallax on card */
.card{
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card[data-tilt] .intro, .card[data-tilt] .skills, .card[data-tilt] .cta, .card[data-tilt] .links{ transform: translateZ(20px) }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .blob{ animation: none }
  .button{ transition: none }
}