:root {
    --bg-1: #04131f;
    --bg-2: #0a182c;
    --surface: rgba(12,22,38,0.96);
    --accent: #6ee7b7;
    --accent-strong: #68d7ff;
    --text: #e9f3ff;
    --muted: #9fb8d5;
    --border: rgba(255,255,255,0.08);
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
    --panel: rgba(255,255,255,0.06);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text);
    background-color: #05050f;
    background-image: 
        radial-gradient(at 18% 39%, rgba(132, 59, 206, 0.4) 0px, transparent 50%),
        radial-gradient(at 85% 62%, rgba(53, 119, 196, 0.3) 0px, transparent 50%),
        radial-gradient(at 49% 29%, rgba(204, 88, 146, 0.25) 0px, transparent 50%);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 32px 48px;
}

.site-header {
    margin-bottom: 26px;
}

.site-header .header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.site-main {
    display: grid;
    gap: 28px;
}

body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    /* denser starfield generated via box-shadow - mix of sizes and opacities */
    box-shadow:
        5vw 10vh rgba(255,255,255,0.95), 8vw 30vh rgba(255,255,255,0.65), 12vw 45vh rgba(255,255,255,0.85),
        18vw 20vh rgba(255,255,255,0.7), 22vw 60vh rgba(255,255,255,0.9), 28vw 12vh rgba(255,255,255,0.6),
        32vw 38vh rgba(255,255,255,0.95), 36vw 5vh rgba(255,255,255,0.8), 40vw 70vh rgba(255,255,255,0.6),
        44vw 22vh rgba(255,255,255,0.85), 48vw 50vh rgba(255,255,255,0.7), 52vw 10vh rgba(255,255,255,0.95),
        56vw 66vh rgba(255,255,255,0.5), 60vw 30vh rgba(255,255,255,0.8), 64vw 80vh rgba(255,255,255,0.9),
        68vw 18vh rgba(255,255,255,0.7), 72vw 44vh rgba(255,255,255,0.6), 76vw 6vh rgba(255,255,255,0.85),
        80vw 58vh rgba(255,255,255,0.95), 84vw 28vh rgba(255,255,255,0.6), 88vw 72vh rgba(255,255,255,0.8),
        92vw 14vh rgba(255,255,255,0.7), 96vw 48vh rgba(255,255,255,0.55),
        2vw 82vh rgba(255,255,255,0.6), 14vw 78vh rgba(255,255,255,0.9), 26vw 86vh rgba(255,255,255,0.5),
        38vw 88vh rgba(255,255,255,0.7), 50vw 86vh rgba(255,255,255,0.9), 62vw 88vh rgba(255,255,255,0.6),
        74vw 88vh rgba(255,255,255,0.8), 86vw 86vh rgba(255,255,255,0.7), 98vw 86vh rgba(255,255,255,0.95);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle 1.4s infinite ease-in-out;
    pointer-events: none;
    z-index: -5;
    transform: translateZ(0);
}

body::after{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    box-shadow:
        15vw 18vh rgba(255,255,255,0.12), 38vw 12vh rgba(255,255,255,0.14), 62vw 25vh rgba(255,255,255,0.12),
        82vw 60vh rgba(255,255,255,0.10), 28vw 68vh rgba(255,255,255,0.09), 50vw 40vh rgba(255,255,255,0.11);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    filter: blur(0.6px) brightness(1.2);
    animation: shine 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: -6;
}

@keyframes twinkle {
    0% { opacity: 0.45 }
    25% { opacity: 1 }
    50% { opacity: 0.6 }
    75% { opacity: 1 }
}

@keyframes shine {
    0% { transform: scale(1); opacity: 0.18 }
    50% { transform: scale(1.06); opacity: 0.95 }
    100% { transform: scale(1); opacity: 0.12 }
}

/* Canvas-based starfield will be drawn by script.js; provide a fallback small static noise via CSS if canvas is unavailable */

/* Fullscreen canvas for performant stars */
#star-canvas{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
    pointer-events: none;
    display: block;
}

.hero-panel {
    display: grid;
    justify-items: end;
    gap: 22px;
    align-items: start;
    padding-top: 10px;
}

.hero-copy {
    display: none;
}

.intro {
    margin: 0;
    color: var(--muted);
    max-width: 740px;
    line-height: 1.8;
    font-size: 1.04rem;
}

.about-text {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.85;
    max-width: 900px;
    font-size: 1rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #051924;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
    opacity: 0.96;
}

.btn.ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(110, 231, 183, 0.22);
}

.hero-visual {
    display: grid;
    place-items: center;
}

.hero-card {
    width: 100%;
    min-height: 360px;
    padding: 28px 30px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 30px 80px rgba(3,10,20,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    display: grid;
    gap: 14px;
}

.card-header{display:flex;align-items:center;gap:14px}
.card-header h3{margin:0;font-size:1.05rem}
.hero-avatar{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#051924}

.hero-card--about{max-width:420px}

.hero-card.full {
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(110, 231, 183, 0.18);
    color: #d7fff4;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.hero-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

.panel {
    display: grid;
    gap: 22px;
    position: relative;
    overflow: hidden;
    background: rgba(12, 22, 38, 0.75);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    padding: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
}

.panel--split,
.panel--wide,
.panel--stacked {
    grid-template-columns: 1fr;
}

.panel--split .chip-grid,
.panel--wide .project-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.section-header h2 {
    margin: 0;
    font-size: 1.6rem;
}

.section-header p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.75;
}

.chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 220px));
    justify-content: center;
    gap: 12px;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.chip.empty {
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
    color: var(--muted);
    font-style: italic;
}

.project-grid {
    display: grid;
    gap: 18px;
}

.project-card {
    padding: 26px;
    min-height: 180px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: grid;
    gap: 12px;
}

.project-card h3 {
    margin: 0;
    font-size: 1.12rem;
}

.project-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
    flex: 1;
}

.project-card.placeholder {
    border-color: rgba(110, 231, 183, 0.2);
    background: rgba(110, 231, 183, 0.06);
}

.footer-panel {
    grid-template-columns: 1fr;
}

.footer-panel-copy h2 {
    margin: 0;
    font-size: 1.5rem;
}

.footer-panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(110, 231, 183, 0.12);
    color: #d7fff4;
    font-weight: 600;
    font-size: 0.95rem;
}

.site-footer {
    padding: 28px 0 10px;
    text-align: center;
    color: var(--muted);
}

.site-footer small {
    font-size: 0.95rem;
}

@media (max-width: 980px) {
    .hero-panel {
        grid-template-columns: 1fr;
    }

    .panel--split,
    .panel--wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .page-shell {
        padding: 18px;
    }

    .hero-copy h2 {
        font-size: 2.4rem;
    }
}

:root[data-theme='light'] {
    --bg-1: #f4f7fa;
    --bg-2: #ffffff;
    --surface: rgba(255, 255, 255, 0.98);
    --accent: #0b76ff;
    --accent-strong: #0b8eff;
    --text: #14233b;
    --muted: #5f6f89;
    --border: rgba(15, 23, 42, 0.08);
    --shadow: 0 20px 70px rgba(15, 23, 42, 0.08);
}

body[data-theme='light'] {
    background: radial-gradient(circle at 14% 10%, rgba(11, 118, 255, 0.08), transparent 12%), linear-gradient(180deg, #f7fbff, #eef4ff);
    color: var(--text);
}

body[data-theme='light'] .page-shell,
body[data-theme='light'] .panel,
body[data-theme='light'] .hero-card,
body[data-theme='light'] .project-card {
    background: var(--surface);
}

body[data-theme='light'] .theme-toggle {
    color: var(--text);
    background: rgba(15, 23, 42, 0.05);
}

body[data-theme='light'] .chip,
body[data-theme='light'] .project-card {
    border-color: rgba(15, 23, 42, 0.08);
}

body[data-theme='light'] .chip.empty {
    background: rgba(15, 23, 42, 0.04);
}

body[data-theme='light'] .project-card.placeholder {
    background: rgba(11, 118, 255, 0.08);
}

body[data-theme='light'] .hero-card {
    background: rgba(15, 23, 42, 0.06);
}