/* Theme: Liquid (premium, animated) — morphing pastel gradients, soft glass cards and an app-style dock. Built phone-first. */
*, *::before, *::after { box-sizing: border-box; }
:root {
    --bg: #f6f5fb; --text: #1b1a2e; --muted: #67657d; --card: rgba(255, 255, 255, .66); --stroke: rgba(255, 255, 255, .85); --line: rgba(27, 26, 46, .08);
    --v: #8b5cf6; --p: #fb7185; --o: #fdba74; --m: #5eead4; --b: #60a5fa;
    --grad: linear-gradient(120deg, var(--v), var(--p) 45%, var(--o));
    --font: Outfit, "Segoe UI", system-ui, sans-serif;
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --r: 26px;
    --dock-h: 68px;
}
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
    padding-bottom: calc(var(--dock-h) + 24px + env(safe-area-inset-bottom)); }
a { color: var(--v); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
.prewrap { white-space: pre-line; }
::selection { background: #ddd6fe; }

/* Morphing gradient blobs */
.lq-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(60px) saturate(130%); opacity: .75; }
.lq-blobs span { position: absolute; width: 60vmax; height: 60vmax; border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; animation: lq-morph 18s ease-in-out infinite, lq-move 26s ease-in-out infinite alternate; }
.lq-blobs .b1 { background: #c4b5fd; top: -25vmax; left: -20vmax; }
.lq-blobs .b2 { background: #fda4af; top: 10vh; right: -30vmax; animation-delay: -4s, -8s; }
.lq-blobs .b3 { background: #99f6e4; bottom: -30vmax; left: -10vmax; animation-delay: -9s, -3s; }
.lq-blobs .b4 { background: #fed7aa; bottom: -25vmax; right: -15vmax; width: 45vmax; height: 45vmax; animation-delay: -2s, -12s; }
@keyframes lq-morph { 0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; } 33% { border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; } 66% { border-radius: 30% 70% 37% 63% / 62% 40% 60% 38%; } }
@keyframes lq-move { to { transform: translate3d(10vmax, 8vmax, 0) rotate(40deg) scale(1.1); } }

.lq { position: relative; z-index: 1; width: min(1100px, 100%); margin: 0 auto; padding: 0 16px; }

/* Glass card */
.lq-card { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r); padding: 22px;
    backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 20px 50px -30px rgba(76, 29, 149, .35); }

/* Buttons */
.lq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 600; color: #fff;
    background: var(--grad); background-size: 200% 100%; box-shadow: 0 12px 30px -12px rgba(244, 63, 94, .6); transition: transform .35s var(--spring), background-position .6s, box-shadow .3s; will-change: transform; }
.lq-btn:hover { color: #fff; background-position: 100% 0; box-shadow: 0 16px 36px -12px rgba(139, 92, 246, .7); }
.lq-btn:active { transform: scale(.96); }
.lq-btn-soft { color: var(--text); background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px var(--line); }
.lq-btn-soft:hover { color: var(--v); background: #fff; box-shadow: inset 0 0 0 1px rgba(139,92,246,.4); }
.lq-btn-sm { min-height: 42px; padding: 0 18px; font-size: .9rem; }
.lq-btn-lg { min-height: 58px; padding: 0 28px; font-size: clamp(1rem, 4.2vw, 1.2rem); max-width: 100%; overflow-wrap: anywhere; }

/* Hero */
.lq-hero { display: grid; justify-items: center; text-align: center; gap: 12px; padding: clamp(48px, 12vw, 110px) 0 36px; }
.lq-avatar { width: clamp(132px, 38vw, 180px); aspect-ratio: 1; padding: 5px; background: var(--grad); background-size: 200% 200%;
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; animation: lq-morph 10s ease-in-out infinite, lq-pop .9s var(--spring) both; box-shadow: 0 24px 60px -20px rgba(139, 92, 246, .55); margin-bottom: 10px; }
.lq-avatar img, .lq-avatar span { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: grid; place-items: center; background: #fff; font: 800 2.6rem/1 var(--font); color: var(--v); }
@keyframes lq-pop { from { transform: scale(.6); opacity: 0; } }
.lq-hello { font-size: 1.05rem; color: var(--muted); animation: lq-up .8s var(--ease) .15s both; }
.lq-name { font: 800 clamp(2.6rem, 12vw, 5.6rem)/1 var(--font); letter-spacing: -.04em; background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: lq-up .9s var(--ease) .25s both, lq-hue 8s ease-in-out infinite alternate; overflow-wrap: anywhere; padding-bottom: .06em; }
@keyframes lq-hue { to { background-position: 100% 0; } }
@keyframes lq-up { from { opacity: 0; transform: translateY(18px); } }
.lq-headline { font-size: clamp(1.08rem, 4.4vw, 1.4rem); color: var(--muted); max-width: 32ch; animation: lq-up .9s var(--ease) .35s both; }
.lq-loc { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--muted); padding: 6px 14px; background: rgba(255,255,255,.6); border-radius: 999px; animation: lq-up .9s var(--ease) .45s both; }
.lq-loc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.lq-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; animation: lq-up .9s var(--ease) .55s both; }
.lq-hero .social { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; animation: lq-up .9s var(--ease) .65s both; }
.lq-hero .social a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--text); font-size: .88rem; font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--spring), color .2s; }
.lq-hero .social a:hover { color: var(--v); transform: translateY(-3px) scale(1.04); }

/* Bento */
.lq-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lq-bio { grid-column: 1 / -1; }
.lq-bio h2 { font-size: 1.05rem; margin-bottom: 8px; }
.lq-bio p { color: #3f3d56; font-size: 1.02rem; }
.lq-stat { display: grid; gap: 2px; align-content: center; min-height: 110px; transition: transform .4s var(--spring); }
.lq-stat:hover { transform: translateY(-4px) rotate(-1deg); }
.lq-stat strong { font: 800 clamp(2rem, 9vw, 2.8rem)/1 var(--font); letter-spacing: -.03em; }
.lq-stat span { color: var(--muted); font-size: .86rem; }
.lq-stat.s1 strong { color: var(--v); } .lq-stat.s2 strong { color: var(--p); } .lq-stat.s3 strong { color: #0d9488; } .lq-stat.s4 strong { color: #ea580c; }

/* Sections */
.lq-section { margin-top: clamp(56px, 12vw, 100px); scroll-margin-top: 24px; }
.lq-h2 { font: 800 clamp(1.8rem, 7vw, 2.6rem)/1.1 var(--font); letter-spacing: -.03em; margin-bottom: 20px; }
.lq-h2 span { display: inline-block; animation: lq-wiggle 3s ease-in-out infinite; }
@keyframes lq-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }

/* Projects */
.lq-projects { display: grid; gap: 16px; }
.lq-project { padding: 10px; display: flex; flex-direction: column; transition: transform .45s var(--spring), box-shadow .3s; }
.lq-project:hover { transform: translateY(-6px); box-shadow: 0 1px 0 #fff inset, 0 30px 60px -30px rgba(76, 29, 149, .45); }
.lq-project .pm-cover { margin: 0; border-radius: 18px; aspect-ratio: 16 / 10; overflow: hidden; background: #ede9fe; }
.lq-project .pm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.lq-project:hover .pm-cover img { transform: scale(1.05); }
.pm-cover-ph { display: grid; place-items: center; background: var(--grad); }
.pm-cover-ph span { font: 800 4.4rem/1 var(--font); color: rgba(255,255,255,.9); }
.lq-project-body { padding: 14px 10px 8px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lq-project h3 { font-size: 1.3rem; letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lq-pill-sm { font-size: .68rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--grad); }
.lq-project p { color: #4b4963; font-size: .97rem; }
.lq-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lq-tags li { font-size: .78rem; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: rgba(139, 92, 246, .1); color: #6d28d9; }
.lq-project .pm-meta { color: var(--muted); }
.lq-links { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Journey */
.lq-journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lq-chip { display: inline-block; font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(94, 234, 212, .25); color: #0f766e; margin-bottom: 10px; }
.lq-journey h3 { font-size: 1.2rem; }
.lq-co { color: var(--muted); margin: 2px 0 8px; }
.lq-journey .prewrap { color: #4b4963; }

/* Skills */
.lq-skillgrid { display: grid; gap: 14px; }
.lq-skillgrid h3 { font-size: .95rem; margin-bottom: 12px; color: var(--muted); font-weight: 600; }
.lq-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lq-cloud li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-size: .92rem; transition: transform .35s var(--spring); }
.lq-cloud li:hover { transform: translateY(-3px) scale(1.05); }
.lq-dots { display: inline-flex; gap: 3px; }
.lq-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e4e1f0; }
.lq-dots i.on { background: var(--v); }
.lq-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lq-certs small { display: block; color: var(--muted); padding-left: 1.6em; }

/* Shared blocks */
.lq > .pm-section { margin-top: clamp(56px, 12vw, 100px); scroll-margin-top: 24px; }
.lq .pm-h2 { font: 800 clamp(1.8rem, 7vw, 2.6rem)/1.1 var(--font); letter-spacing: -.03em; }
.lq .pm-gallery-item { border-radius: 20px; }
.lq .pm-resume-card { background: var(--card); border-color: var(--stroke); border-radius: var(--r); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.lq .pm-resume-icon { background: var(--grad); box-shadow: 0 8px 20px -8px var(--p); }

/* Contact */
.lq-contact { margin-top: clamp(56px, 12vw, 100px); text-align: center; display: grid; justify-items: center; gap: 14px; padding: clamp(32px, 8vw, 60px) 20px; scroll-margin-top: 24px;
    background: linear-gradient(135deg, rgba(196,181,253,.55), rgba(253,164,175,.45), rgba(254,215,170,.5)); }
.lq-contact h2 { font: 800 clamp(1.9rem, 8vw, 3.4rem)/1.05 var(--font); letter-spacing: -.035em; }
.lq-contact p { color: #4b4963; max-width: 40ch; }

/* Dock: bottom tab bar on phones */
.lq-dock { position: fixed; z-index: 50; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 2px; padding: 6px;
    width: max-content; max-width: calc(100% - 20px); height: var(--dock-h); align-items: stretch; border-radius: 24px;
    background: rgba(255,255,255,.72); border: 1px solid var(--stroke); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 18px 50px -18px rgba(76, 29, 149, .45); animation: lq-dock .9s var(--spring) .6s both; }
@keyframes lq-dock { from { transform: translate(-50%, 140%); } }
.lq-dock a { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 58px; padding: 0 8px; border-radius: 18px; color: var(--muted); font-size: .66rem; font-weight: 600;
    transition: color .25s, background .25s, transform .35s var(--spring); }
.lq-dock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lq-dock a:hover { color: var(--text); transform: translateY(-2px); }
.lq-dock a.is-active { color: #fff; background: var(--grad); }

.owner-bar { position: relative; z-index: 60; background: var(--text); color: #fff; text-align: center; padding: 8px 16px; font-size: .86rem; }
.owner-bar a { color: #c4b5fd; margin-left: 8px; font-weight: 600; }
.pm-footer { position: relative; z-index: 1; text-align: center; color: var(--muted); font-size: .8rem; padding: 26px 16px 8px; }

@media (min-width: 640px) {
    .lq-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lq-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lq-project.is-featured { grid-column: 1 / -1; }
    .lq-skillgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lq-dock a { min-width: 66px; font-size: .7rem; }
}
@media (min-width: 900px) {
    .lq { padding: 0 28px; }
    .lq-bento { grid-template-columns: 2fr 1fr 1fr; }
    .lq-bio { grid-column: 1; grid-row: span 2; }
    .lq-project.is-featured { flex-direction: row; gap: 10px; }
    .lq-project.is-featured .pm-cover { flex: 1.25; aspect-ratio: auto; min-height: 300px; }
    .lq-project.is-featured .lq-project-body { flex: 1; padding: 20px; }
    .lq-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lq-skillgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    .lq-dock a { min-width: 50px; padding: 0 4px; }
    .lq-dock a span { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lq-blobs span, .lq-avatar, .lq-name, .lq-hello, .lq-headline, .lq-loc, .lq-cta, .lq-hero .social, .lq-h2 span, .lq-dock { animation: none !important; }
    .lq-btn, .lq-project, .lq-stat, .lq-cloud li, .lq-dock a { transition: none; }
}