body {
    background:
        linear-gradient(180deg, #edf2ff 0%, #f8fbff 100%);
}

body[data-mode="dark"] {
    background:
        linear-gradient(180deg, #0b1120 0%, #111827 100%);
}

body[data-mode="dark"] .site-header {
    background: rgba(11, 17, 32, 0.84);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.28);
}

body[data-mode="light"] .site-header {
    background: rgba(255, 255, 255, 0.88);

    border-bottom: 1px solid rgba(15, 23, 42, 0.08);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06);
}

body[data-mode="light"] .brand,
body[data-mode="light"] .nav a,
body[data-mode="light"] .theme-label {
    color: #0f172a;
}

body[data-mode="dark"] .brand,
body[data-mode="dark"] .nav a,
body[data-mode="dark"] .theme-label {
    color: #ffffff;
}

.theme-option {
    border: 1px solid transparent;
}

body[data-mode="light"] .theme-option {
    background: rgba(255, 255, 255, 0.72);

    border-color: rgba(15, 23, 42, 0.08);

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.06);
}

body[data-mode="dark"] .theme-option {
    background: rgba(255, 255, 255, 0.05);

    border-color: rgba(255, 255, 255, 0.08);
}

.theme-option.active {
    border-color: rgba(124, 58, 237, 0.42) !important;

    box-shadow:
        0 0 0 3px rgba(124, 58, 237, 0.14);
}

.mode-toggle {
    border: 1px solid rgba(15, 23, 42, 0.12);

    background: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.08);
}

body[data-mode="dark"] .mode-toggle {
    border-color: rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.08);
}

body[data-mode="light"] .mode-icon {
    color: #0f172a;
}

body[data-mode="dark"] .mode-icon {
    color: #ffffff;
}

body[data-mode="dark"] .hero {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.28), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.18), transparent 28rem),
        linear-gradient(180deg, #0b1120 0%, #111827 100%);
}

body[data-mode="light"] .hero {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.12), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.08), transparent 28rem),
        linear-gradient(180deg, #f8fbff 0%, #eef3ff 100%);
}

.hero::before {
    content: "";

    position: absolute;

    width: 540px;
    height: 540px;

    border-radius: 50%;

    top: -240px;
    right: -180px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.18) 0%,
            transparent 72%
        );

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    bottom: -180px;
    left: -140px;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.14) 0%,
            transparent 72%
        );

    pointer-events: none;
}

body[data-mode="light"] .hero h1,
body[data-mode="light"] .hero-card h2 {
    color: #0f172a;
}

body[data-mode="light"] .hero-text,
body[data-mode="light"] .hero-card p {
    color: #475467;
}

body[data-mode="dark"] .hero h1,
body[data-mode="dark"] .hero-card h2 {
    color: #ffffff;
}

body[data-mode="dark"] .hero-text,
body[data-mode="dark"] .hero-card p {
    color: rgba(255, 255, 255, 0.72);
}

body[data-mode="dark"] .hero-card,
body[data-mode="dark"] .project-card,
body[data-mode="dark"] .skill-card,
body[data-mode="dark"] .about-copy,
body[data-mode="dark"] .contact-form {
    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(24px);

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.24);
}

body[data-mode="light"] .hero-card,
body[data-mode="light"] .project-card,
body[data-mode="light"] .skill-card,
body[data-mode="light"] .about-copy,
body[data-mode="light"] .contact-form {
    background: rgba(255, 255, 255, 0.78);

    backdrop-filter: blur(24px);

    border: 1px solid rgba(255, 255, 255, 0.82);

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.08);
}

body[data-mode="light"] .skill-card {
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(124, 58, 237, 0.04);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.88),
            rgba(248, 250, 255, 0.92)
        );
}

body[data-mode="light"] .skill-card:hover {
    box-shadow:
        0 28px 60px rgba(124, 58, 237, 0.14),
        0 0 0 1px rgba(124, 58, 237, 0.12);
}

body[data-mode="dark"] .skill-card:hover {
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.14);
}

body[data-mode="dark"] .project-content h3,
body[data-mode="dark"] .skill-card h3,
body[data-mode="dark"] .about-copy h3,
body[data-mode="dark"] .section-heading h2 {
    color: #ffffff;
}

body[data-mode="dark"] .project-content p,
body[data-mode="dark"] .skill-card p,
body[data-mode="dark"] .skill-more,
body[data-mode="dark"] .about-copy p,
body[data-mode="dark"] .section-heading p:last-child {
    color: rgba(255, 255, 255, 0.72);
}

body[data-mode="dark"] .project-card-empty h3 {
    color: #ffffff;
}

body[data-mode="dark"] .project-card-empty p {
    color: rgba(255, 255, 255, 0.72);
}

body[data-mode="light"] .section-heading h2,
body[data-mode="light"] .project-content h3,
body[data-mode="light"] .skill-card h3,
body[data-mode="light"] .about-copy h3 {
    color: #0f172a;
}

body[data-mode="light"] .section-heading p,
body[data-mode="light"] .project-content p,
body[data-mode="light"] .skill-card p,
body[data-mode="light"] .skill-more,
body[data-mode="light"] .about-copy p {
    color: #475467;
}

body[data-mode="dark"] .tag-row span {
    background: rgba(124, 58, 237, 0.14);

    color: #d8b4fe;
}

body[data-mode="light"] .tag-row span {
    background: rgba(124, 58, 237, 0.08);

    color: #7c3aed;
}

body[data-mode="dark"] .project-card-empty {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.03)
        );

    border: 2px dashed rgba(255, 255, 255, 0.12);
}

body[data-mode="light"] .project-card-empty {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72),
            rgba(248, 250, 255, 0.84)
        );

    border: 2px dashed rgba(124, 58, 237, 0.16);
}

body[data-mode="dark"] .project-preview-frame {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-mode="dark"] .preview-overlay {
    background: rgba(124, 58, 237, 0.22);

    border: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(14px);

    color: #ffffff;

    font-weight: 700;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24);
}

body[data-mode="light"] .preview-overlay {
    background: rgba(124, 58, 237, 0.92);

    color: #ffffff;

    border: 1px solid rgba(124, 58, 237, 0.18);

    box-shadow:
        0 10px 24px rgba(124, 58, 237, 0.22);

    font-weight: 700;
}

body[data-mode="dark"] .button-secondary {
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #ffffff;
}

body[data-mode="light"] .button-secondary {
    color: #0f172a;

    border: 1px solid rgba(15, 23, 42, 0.08);

    background: rgba(255, 255, 255, 0.58);
}

body[data-mode="dark"] .contact-grid {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.24), transparent 24rem),
        linear-gradient(180deg, #111827 0%, #0b1120 100%);
}

body[data-mode="light"] .contact-grid {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.12), transparent 24rem),
        linear-gradient(180deg, #f8fbff 0%, #eef2ff 100%);
}

body[data-mode="light"] .contact-copy h2 {
    color: #0f172a;
}

body[data-mode="light"] .contact-copy p {
    color: #475467;
}

body[data-mode="light"] .contact-form {
    background: rgba(255, 255, 255, 0.84);
}

body[data-mode="dark"] .contact-form {
    background: rgba(255, 255, 255, 0.08);
}

body[data-mode="dark"] .contact-form label {
    color: #ffffff;
}

body[data-mode="dark"] .contact-form input,
body[data-mode="dark"] .contact-form textarea {
    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #ffffff;
}

body[data-mode="dark"] .contact-form input::placeholder,
body[data-mode="dark"] .contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

body[data-mode="dark"] .section-work,
body[data-mode="dark"] .section-alt,
body[data-mode="dark"] .site-footer {
    background: #0f172a;
}

body[data-mode="light"] .section-work {
    background:
        linear-gradient(
            180deg,
            rgba(124, 58, 237, 0.03),
            rgba(59, 130, 246, 0.02)
        );
}

body[data-mode="light"] .section-alt {
    background: #ffffff;
}

body[data-mode="dark"] .footer-wrap p,
body[data-mode="dark"] .footer-links a {
    color: rgba(255, 255, 255, 0.62);
}

body[data-mode="light"] .footer-wrap p,
body[data-mode="light"] .footer-links a {
    color: #475467;
}

body[data-mode="dark"] .site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-card,
.project-card,
.skill-card,
.about-copy,
.contact-form {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.hero-card:hover,
.project-card:hover,
.skill-card:hover,
.about-copy:hover {
    transform: translateY(-4px);
}

.project-card-featured {
    overflow: hidden;
}

.project-preview-frame iframe {
    transition:
        transform 0.4s ease;
}

.project-card-featured:hover iframe {
    transform: scale(1.015);
}

body[data-mode="light"] .button-project,
body[data-mode="dark"] .button-project {
    width: fit-content;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 0.01em;
}

body[data-mode="light"] .button-project {
    background: #0f172a;
    color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.16);
    box-shadow:
        0 16px 32px rgba(15, 23, 42, 0.16);
}

body[data-mode="light"] .button-project:hover {
    background: #7c3aed;
    color: #ffffff;
    box-shadow:
        0 18px 38px rgba(124, 58, 237, 0.26);
}

body[data-mode="dark"] .button-project {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        0 16px 34px rgba(255, 255, 255, 0.12),
        0 0 0 4px rgba(124, 58, 237, 0.12);
}

body[data-mode="dark"] .button-project:hover {
    background: #c4b5fd;
    color: #0f172a;
    box-shadow:
        0 18px 40px rgba(196, 181, 253, 0.22),
        0 0 0 4px rgba(196, 181, 253, 0.16);
}

@media (max-width: 980px) {
    .skills-grid,
    .skills-grid:has(.skill-card:hover),
    .skills-grid:has(.skill-card:nth-child(1):hover),
    .skills-grid:has(.skill-card:nth-child(2):hover),
    .skills-grid:has(.skill-card:nth-child(3):hover),
    .skills-grid:has(.skill-card:nth-child(4):hover) {
        grid-template-columns: 1fr;
    }

    .skill-card.mobile-active .skill-more {
        max-height: 420px;

        margin-top: 18px;
    }

    .about-grid,
    .about-grid:has(.about-story:hover) {
        grid-template-columns: 1fr;
    }

    .about-story.mobile-active .about-more {
        max-height: 700px;

        margin-top: 18px;
    }
}