:root {
        --bg: #F7F8FA;
        --dark: #1E2530;
        --dark2: #263040;
        --blue: #3B82F6;
        --red: #EF4444;
        --slate: #8B9EB7;
        --slate-light: #C4D1E0;
        --white: #FFFFFF;
        --text: #1E2530;
        --text-muted: #5C6E85;
        --border: #DDE4ED;
        --card-bg: #FFFFFF;
        --section-alt: #EFF2F7;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'DM Sans', sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        overflow-x: hidden;
    }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--slate);
        border-radius: 3px;
    }

    /* ── TYPOGRAPHY ── */
    .syne {
        font-family: 'Syne', sans-serif;
    }

    .mono {
        font-family: 'DM Mono', monospace;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: 'Syne', sans-serif;
        line-height: 1.15;
    }

    /* ── NAV ── */
    nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: rgba(30, 37, 48, 0.97);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 0 2rem;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-logo {
        font-family: 'Syne', sans-serif;
        font-weight: 800;
        font-size: 1.1rem;
        color: #fff;
        text-decoration: none;
        letter-spacing: -0.02em;
    }

    .nav-logo span {
        color: var(--red);
    }

    .nav-links {
        display: flex;
        gap: 2rem;
        list-style: none;
    }

    .nav-links a {
        font-size: 0.82rem;
        color: var(--slate-light);
        text-decoration: none;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        transition: color 0.2s;
    }

    .nav-links a:hover {
        color: #fff;
    }

    /* ── SECTIONS ── */
    section {
        padding: 100px 0;
    }

    .container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .section-label {
        font-family: 'DM Mono', monospace;
        font-size: 0.72rem;
        color: var(--red);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .section-label::before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 1.5px;
        background: var(--red);
    }

    .section-title {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 800;
        color: var(--dark);
        letter-spacing: -0.03em;
        margin-bottom: 1rem;
    }

    /* ── HERO ── */
    #hero {
        min-height: 100vh;
        background: var(--dark);
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        padding: 0;
    }

    .hero-grid-bg {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(139, 158, 183, 0.07) 1px, transparent 1px),
            linear-gradient(90deg, rgba(139, 158, 183, 0.07) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
    }

    .hero-accent {
        position: absolute;
        top: -200px;
        right: -100px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
        pointer-events: none;
    }

    .hero-accent2 {
        position: absolute;
        bottom: -150px;
        left: -50px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
        pointer-events: none;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 2rem;
        padding-top: 60px;
    }

    .hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(59, 130, 246, 0.12);
        border: 1px solid rgba(59, 130, 246, 0.25);
        color: #93BBFD;
        font-family: 'DM Mono', monospace;
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
        border-radius: 2px;
        margin-bottom: 2rem;
        letter-spacing: 0.06em;
        animation: fadeUp 0.8s ease both;
    }

    .hero-tag-dot {
        width: 6px;
        height: 6px;
        background: var(--red);
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.5;
            transform: scale(0.8);
        }
    }

    .hero-name {
        font-size: clamp(3.5rem, 9vw, 7.5rem);
        font-weight: 800;
        color: #fff;
        letter-spacing: -0.04em;
        line-height: 0.95;
        margin-bottom: 0.5rem;
        animation: fadeUp 0.8s 0.1s ease both;
    }

    .hero-name-accent {
        color: var(--red);
    }

    .hero-role {
        font-size: clamp(1rem, 2.5vw, 1.4rem);
        color: var(--slate);
        font-weight: 300;
        margin-bottom: 2rem;
        animation: fadeUp 0.8s 0.2s ease both;
    }

    .hero-role strong {
        color: var(--slate-light);
        font-weight: 500;
    }

    .hero-tagline {
        font-size: 1.05rem;
        color: rgba(196, 209, 224, 0.75);
        max-width: 560px;
        line-height: 1.7;
        margin-bottom: 3rem;
        font-style: italic;
        animation: fadeUp 0.8s 0.3s ease both;
    }

    .hero-ctas {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        animation: fadeUp 0.8s 0.4s ease both;
    }

    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--blue);
        color: #fff;
        padding: 0.85rem 2rem;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 2px;
        transition: all 0.2s;
        border: 2px solid var(--blue);
    }

    .btn-primary:hover {
        background: transparent;
        color: var(--blue);
    }

    .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: transparent;
        color: var(--slate-light);
        padding: 0.85rem 2rem;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 2px;
        border: 2px solid rgba(139, 158, 183, 0.35);
        transition: all 0.2s;
    }

    .btn-outline:hover {
        border-color: var(--slate-light);
        color: #fff;
    }

    .hero-stats {
        display: flex;
        gap: 3rem;
        margin-top: 5rem;
        padding-top: 3rem;
        border-top: 1px solid rgba(139, 158, 183, 0.15);
        animation: fadeUp 0.8s 0.5s ease both;
    }

    .hero-stat-num {
        font-family: 'Syne', sans-serif;
        font-size: 2rem;
        font-weight: 800;
        color: #fff;
    }

    .hero-stat-num span {
        color: var(--red);
    }

    .hero-stat-label {
        font-size: 0.78rem;
        color: var(--slate);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-top: 0.15rem;
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(24px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── SOBRE MI ── */
    #sobre {
        background: var(--white);
        position: relative;
    }

    .sobre-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
        align-items: start;
    }

    .sobre-text p {
        color: var(--text-muted);
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 1.2rem;
    }

    .sobre-text p strong {
        color: var(--dark);
        font-weight: 500;
    }

    .sobre-highlight {
        background: var(--dark);
        color: var(--slate-light);
        padding: 1.5rem 1.75rem;
        border-radius: 4px;
        margin-top: 2rem;
        border-left: 3px solid var(--red);
        font-style: italic;
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .sobre-cards {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .sobre-card {
        background: var(--section-alt);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        transition: border-color 0.2s, transform 0.2s;
    }

    .sobre-card:hover {
        border-color: var(--blue);
        transform: translateX(4px);
    }

    .sobre-card-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        background: var(--dark);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--slate-light);
        flex-shrink: 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .sobre-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .sobre-card-title {
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--dark);
        margin-bottom: 0.2rem;
    }

    .sobre-card-desc {
        font-size: 0.83rem;
        color: var(--text-muted);
        line-height: 1.5;
    }

    /* ── FORMACIÓ ── */
    #formacio {
        background: var(--dark);
        position: relative;
        overflow: hidden;
    }

    #formacio .section-title {
        color: #fff;
    }

    #formacio .section-label {
        color: #EF8888;
    }

    #formacio .section-label::before {
        background: #EF8888;
    }

    .formacio-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: 3rem;
    }

    .formacio-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 1.75rem;
        transition: border-color 0.2s, background 0.2s;
    }

    .formacio-card:hover {
        border-color: rgba(59, 130, 246, 0.4);
        background: rgba(59, 130, 246, 0.05);
    }

    .formacio-card.main-card {
        grid-column: span 2;
        border-color: rgba(59, 130, 246, 0.3);
        background: rgba(59, 130, 246, 0.07);
    }

    .formacio-badge {
        display: inline-block;
        font-family: 'DM Mono', monospace;
        font-size: 0.7rem;
        padding: 0.25rem 0.75rem;
        border-radius: 2px;
        margin-bottom: 1rem;
        letter-spacing: 0.06em;
    }

    .badge-blue {
        background: rgba(59, 130, 246, 0.2);
        color: #93BBFD;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .badge-red {
        background: rgba(239, 68, 68, 0.15);
        color: #FCA5A5;
        border: 1px solid rgba(239, 68, 68, 0.25);
    }

    .badge-slate {
        background: rgba(139, 158, 183, 0.15);
        color: var(--slate-light);
        border: 1px solid rgba(139, 158, 183, 0.25);
    }

    .formacio-title {
        font-family: 'Syne', sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.35rem;
    }

    .formacio-sub {
        font-size: 0.85rem;
        color: var(--slate);
        margin-bottom: 0.75rem;
    }

    .formacio-desc {
        font-size: 0.85rem;
        color: rgba(196, 209, 224, 0.7);
        line-height: 1.6;
    }

    .formacio-year {
        font-family: 'DM Mono', monospace;
        font-size: 0.75rem;
        color: var(--slate);
        margin-top: 1rem;
    }

    /* ── PROJECTES ── */
    #projectes {
        background: var(--bg);
    }

    .projectes-list {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        margin-top: 3rem;
    }

    .project-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 5fr 4fr;
        transition: box-shadow 0.3s, transform 0.3s;
    }

    .project-card:hover {
        box-shadow: 0 20px 60px rgba(30, 37, 48, 0.1);
        transform: translateY(-3px);
    }

    .project-body {
        padding: 2.5rem;
    }

    .project-number {
        font-family: 'DM Mono', monospace;
        font-size: 0.7rem;
        color: var(--slate);
        letter-spacing: 0.1em;
        margin-bottom: 0.5rem;
    }

    .project-name {
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--dark);
        margin-bottom: 0.35rem;
    }

    .project-type {
        font-size: 0.78rem;
        color: var(--blue);
        font-family: 'DM Mono', monospace;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 1.25rem;
    }

    .project-desc {
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.75;
        margin-bottom: 1.5rem;
    }

    .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .tag {
        font-family: 'DM Mono', monospace;
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
        background: var(--section-alt);
        color: var(--text-muted);
        border: 1px solid var(--border);
        border-radius: 2px;
        letter-spacing: 0.04em;
    }

    .project-links {
        display: flex;
        gap: 0.75rem;
    }

    .project-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.55rem 1.1rem;
        border-radius: 3px;
        text-decoration: none;
        transition: all 0.2s;
    }

    .project-card:nth-of-type(2) .link-gh svg,
    .project-card:nth-of-type(3) .link-gh svg {
        display: none;
    }

    .project-card:nth-of-type(2) .link-gh::before,
    .project-card:nth-of-type(3) .link-gh::before {
        content: '';
        width: 13px;
        height: 13px;
        flex-shrink: 0;
        display: inline-block;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.28.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.74.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    .link-gh {
        background: var(--dark);
        color: #fff;
    }

    .link-gh:hover {
        background: var(--dark2);
    }

    .project-side {
        background: var(--dark);
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .project-challenge-title {
        font-family: 'DM Mono', monospace;
        font-size: 0.68rem;
        color: var(--red);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .project-challenge-title::before {
        content: '//';
        opacity: 0.5;
    }

    .project-challenge-text {
        font-size: 0.85rem;
        color: var(--slate-light);
        line-height: 1.7;
        flex: 1;
    }

    .project-team {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        font-size: 0.78rem;
        color: var(--slate);
        font-family: 'DM Mono', monospace;
    }

    .project-team span {
        color: var(--slate-light);
    }

    /* ── HABILITATS ── */
    #habilitats {
        background: var(--white);
    }

    .skills-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-top: 3rem;
    }

    .skill-group {
        background: var(--section-alt);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 1.5rem;
    }

    .skill-group-title {
        font-family: 'DM Mono', monospace;
        font-size: 0.7rem;
        color: var(--blue);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .skill-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.78rem;
        font-weight: 500;
        padding: 0.35rem 0.75rem;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 3px;
        color: var(--dark);
        transition: border-color 0.15s, color 0.15s;
    }

    .chip:hover {
        border-color: var(--blue);
        color: var(--blue);
    }

    .chip-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .dot-blue {
        background: var(--blue);
    }

    .dot-red {
        background: var(--red);
    }

    .dot-slate {
        background: var(--slate);
    }

    /* ── CONTACTE ── */
    #contacte {
        background: var(--dark);
        position: relative;
        overflow: hidden;
    }

    #contacte::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--blue), transparent);
    }

    #contacte .section-title {
        color: #fff;
    }

    #contacte .section-label {
        color: #EF8888;
    }

    #contacte .section-label::before {
        background: #EF8888;
    }

    .contacte-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: start;
        margin-top: 3rem;
    }

    .contacte-intro {
        font-size: 1rem;
        color: var(--slate-light);
        line-height: 1.8;
        margin-bottom: 2rem;
    }

    .contacte-links {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .contact-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-decoration: none;
        padding: 1rem 1.25rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 6px;
        transition: all 0.2s;
    }

    .contact-link:hover {
        background: rgba(59, 130, 246, 0.08);
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateX(4px);
    }

    .contact-link-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        background: rgba(255, 255, 255, 0.07);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .contact-link-label {
        font-size: 0.75rem;
        color: var(--slate);
        font-family: 'DM Mono', monospace;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 0.1rem;
    }

    .contact-link-value {
        font-size: 0.9rem;
        color: #fff;
        font-weight: 500;
    }

    /* ── FORMULARI ── */
    .form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .form-label {
        font-family: 'DM Mono', monospace;
        font-size: 0.68rem;
        color: var(--slate);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .form-input,
    .form-textarea {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        padding: 0.75rem 1rem;
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.9rem;
        outline: none;
        transition: border-color 0.2s;
        width: 100%;
    }

    .form-input:focus,
    .form-textarea:focus {
        border-color: var(--blue);
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
        color: rgba(139, 158, 183, 0.5);
    }

    .form-textarea {
        resize: vertical;
        min-height: 130px;
    }

    .form-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: var(--red);
        color: #fff;
        border: 2px solid var(--red);
        padding: 0.9rem 2rem;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.2s;
        width: 100%;
    }

    .form-submit:hover {
        background: transparent;
        color: var(--red);
    }

    /* ── FOOTER ── */
    footer {
        background: #131820;
        padding: 2rem;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .footer-text {
        font-size: 0.78rem;
        color: rgba(139, 158, 183, 0.5);
        font-family: 'DM Mono', monospace;
    }

    .footer-text span {
        color: var(--red);
    }

    /* ── SCROLL REVEAL ── */
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {

        .sobre-grid,
        .contacte-grid,
        .project-card {
            grid-template-columns: 1fr;
        }

        .formacio-grid {
            grid-template-columns: 1fr;
        }

        .formacio-card.main-card {
            grid-column: span 1;
        }

        .skills-grid {
            grid-template-columns: 1fr 1fr;
        }

        .project-side {
            padding: 1.75rem;
        }

        .hero-stats {
            gap: 1.5rem;
        }

        .nav-links {
            display: none;
        }
    }

    @media (max-width: 600px) {
        .skills-grid {
            grid-template-columns: 1fr;
        }

        .form-row {
            grid-template-columns: 1fr;
        }

        section {
            padding: 70px 0;
        }

        .hero-stats {
            flex-wrap: wrap;
            gap: 1rem;
        }
    }