/* =========================================================
           RESET
        ========================================================= */

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


        html {
            scroll-behavior: smooth;

            scrollbar-width: thin;
            scrollbar-color: #b8b8b1 transparent;
        }


        body {
            font-family: "Inter", sans-serif;

            background-color: #f7f7f5;

            color: var(--text);

            line-height: 1.6;

            overflow-x: hidden;

            position: relative;

            background-image:
                linear-gradient(rgba(24, 24, 24, 0.025) 1px,
                    transparent 1px),

                linear-gradient(90deg,
                    rgba(24, 24, 24, 0.025) 1px,
                    transparent 1px);

            background-size:
                48px 48px;
        }

        body::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(120px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(107, 79, 160, 0.2), transparent 68%);
            opacity: 0;
            transition:
                opacity 0.4s ease;
        }

        body.cursor-active::after {
            opacity: 1;
        }

        body.dark-mode::after {
            background:
                radial-gradient(120px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(183, 156, 232, 0.1), transparent 68%);
        }


        .cursor-dot,
        .cursor-ring {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            opacity: 0;
            z-index: 4000;
            transform: translate3d(-100px, -100px, 0);
        }


        .cursor-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
        }


        .cursor-ring {
            width: 30px;
            height: 30px;
            border: 1px solid var(--accent);
            border-radius: 50%;

            transition:
                width 0.2s ease,
                height 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease;
        }


        body.custom-cursor-active,
        body.custom-cursor-active a,
        body.custom-cursor-active button {
            cursor: none;
        }


        body.custom-cursor-active .cursor-dot,
        body.custom-cursor-active .cursor-ring {

            opacity: 1;

        }


        body.cursor-hover .cursor-ring {

            width: 44px;
            height: 44px;

            background: rgba(107, 79, 160, 0.12);
            border-color: var(--accent);

        }


        body.dark-mode.cursor-hover .cursor-ring {

            background: rgba(183, 156, 232, 0.16);

        }


        @media (pointer: coarse), (prefers-reduced-motion: reduce) {

            .cursor-dot,
            .cursor-ring {
                display: none;
            }

        }

        a {
            text-decoration: none;
            color: inherit;
        }


        button {
            font-family: inherit;
        }


        /* =========================================================
           SCROLLBAR
        ========================================================= */

        ::-webkit-scrollbar {
            width: 7px;
        }


        ::-webkit-scrollbar-track {
            background: transparent;
        }


        ::-webkit-scrollbar-thumb {
            background: #b8b8b1;

            border-radius: 20px;
        }


        ::-webkit-scrollbar-thumb:hover {
            background: #8f8f89;
        }


        /* =========================================================
           VARIABLES
        ========================================================= */

        :root {

            --bg: #f7f7f5;

            --surface: #ffffff;

            --surface-soft: #efefeb;

            --text: #181818;

            --text-soft: #6c6c68;

            --border: #deded8;

            --primary: #1e1e1d;

            --accent: #6b4fa0;

            --container: 1180px;

            --radius: 20px;

        }


        /* =========================================================
           GLOBAL
        ========================================================= */

        .container {

            width: min(90%, var(--container));

            margin: auto;

        }


        section {
            padding: 110px 0;
        }


        .section-label {

            display: inline-block;

            color: var(--accent);

            font-size: 0.75rem;

            font-weight: 700;

            letter-spacing: 0.16em;

            text-transform: uppercase;

            margin-bottom: 16px;

        }


        .section-title {

            font-family: "Playfair Display", serif;

            font-size: clamp(2.2rem, 4vw, 3.4rem);

            line-height: 1.12;

            max-width: 760px;

        }


        .section-description {

            color: var(--text-soft);

            margin-top: 18px;

            max-width: 650px;

        }


        /* =========================================================
           NAVBAR
        ========================================================= */

        .navbar {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            z-index: 1000;

            background:
                rgba(247, 247, 245, 0.88);

            backdrop-filter:
                blur(16px);

            border-bottom:
                1px solid transparent;

            transition:
                0.3s ease;

        }


        .navbar.scrolled {

            border-color:
                var(--border);

        }


        .nav-content {

            height: 76px;

            display: flex;

            align-items: center;

            justify-content:
                space-between;

        }


        .logo {

            font-weight: 700;

            font-size: 0.95rem;

            letter-spacing:
                -0.03em;

        }


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


        .nav-links {

            display: flex;

            align-items: center;

            gap: 28px;

        }


        .nav-links a {

            font-size: 0.85rem;

            color:
                var(--text-soft);

            transition:
                0.2s ease;

        }


        .nav-links a:hover {
            color: var(--text);
        }


        /* =========================================================
           BUTTONS
        ========================================================= */

        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            padding:
                14px 22px;

            border-radius:
                100px;

            border:
                1px solid var(--border);

            font-size:
                0.9rem;

            transition:
                0.25s ease;

        }


        .btn-primary {

            background:
                var(--primary);

            color:
                white;

            border-color:
                var(--primary);

        }


        .btn-primary:hover {

            transform:
                translateY(-2px);

        }


        .btn-secondary {

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

        }


        .btn-secondary:hover {

            background:
                var(--surface);

        }


        /* =========================================================
           HERO
        ========================================================= */

        .hero {

            position:
                relative;

            overflow:
                hidden;

            min-height:
                100vh;

            display:
                flex;

            align-items:
                center;

            padding-top:
                110px;

        }


        .hero::before {

            content: "";

            position: absolute;

            inset: -20%;

            z-index: 0;

            pointer-events: none;

            background:
                radial-gradient(600px circle at 18% 28%, rgba(107, 79, 160, 0.16), transparent 60%),
                radial-gradient(520px circle at 82% 74%, rgba(107, 79, 160, 0.12), transparent 60%);

            filter: blur(50px);

            animation: heroGlow 20s ease-in-out infinite alternate;

        }


        body.dark-mode .hero::before {

            background:
                radial-gradient(600px circle at 18% 28%, rgba(183, 156, 232, 0.22), transparent 60%),
                radial-gradient(520px circle at 82% 74%, rgba(183, 156, 232, 0.16), transparent 60%);

        }


        @keyframes heroGlow {

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

            50% {
                transform: translate(4%, -5%) scale(1.12);
            }

            100% {
                transform: translate(-4%, 4%) scale(1);
            }

        }


        @media (prefers-reduced-motion: reduce) {

            .hero::before {
                animation: none;
            }

        }


        .hero-grid {

            position: relative;

            z-index: 1;

            display:
                grid;

            grid-template-columns:
                1.15fr 0.85fr;

            gap:
                90px;

            align-items:
                center;

        }


        .hero-status {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                9px;

            padding:
                8px 13px;

            border:
                1px solid var(--border);

            border-radius:
                100px;

            font-size:
                0.78rem;

            color:
                var(--text-soft);

            margin-bottom:
                28px;

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

        }


        .hero-availability {

            max-width:
                520px;

            margin-top:
                -16px;

            margin-bottom:
                10px;

            color:
                var(--text-soft);

            font-size:
                0.86rem;

        }


        .status-dot {

            width:
                7px;

            height:
                7px;

            border-radius:
                50%;

            background:
                #4f9b58;

        }


        .hero h1 {

            font-family:
                "Playfair Display", serif;

            font-size:
                clamp(3.4rem, 7vw, 6.5rem);

            line-height:
                0.98;

            letter-spacing:
                -0.045em;

            margin-bottom:
                28px;

            display:
                flex;

            flex-direction:
                column;

        }


        .headline-line {
            display: block;
        }


        .headline-dynamic-line {

            min-height: 1.1em;

        }


        .headline-dynamic {

            display: inline-block;

            white-space: nowrap;

            color: var(--accent);

        }


        #heroTypewriter::after {

            content: "|";

            display: inline-block;

            margin-left: 3px;

            color: var(--accent);

            animation: blinkCursor 0.85s step-end infinite;

        }


        @keyframes blinkCursor {

            50% {
                opacity: 0;
            }

        }


        @media (prefers-reduced-motion: reduce) {

            #heroTypewriter::after {
                animation: none;
            }

        }


        .hero-description {

            max-width:
                620px;

            color:
                var(--text-soft);

            font-size:
                1.05rem;

            margin-bottom:
                34px;

        }


        .hero-actions {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                12px;

        }


        /* =========================================================
           HERO PHOTO
        ========================================================= */

        .hero-photo-wrapper {

            position:
                relative;

            display:
                flex;

            justify-content:
                center;

        }


        .hero-photo {

            width:
                min(100%, 420px);

            aspect-ratio:
                4 / 5;

            object-fit:
                cover;

            border-radius:
                220px 220px 30px 30px;

            position:
                relative;

            z-index:
                2;

        }


        .photo-decoration {

            position:
                absolute;

            width:
                100%;

            max-width:
                420px;

            height:
                100%;

            border:
                1px solid var(--border);

            border-radius:
                220px 220px 30px 30px;

            transform:
                rotate(5deg);

            z-index:
                1;

        }


        .hero-photo-tag {

            position:
                absolute;

            z-index:
                3;

            bottom:
                35px;

            left:
                -20px;

            background:
                var(--surface);

            border:
                1px solid var(--border);

            padding:
                14px 18px;

            border-radius:
                14px;

            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.06);

            animation:
                floatCard 4.5s ease-in-out infinite;

        }


        @keyframes floatCard {

            0%, 100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }

        }


        @media (prefers-reduced-motion: reduce) {

            .hero-photo-tag {
                animation: none;
            }

        }


        .hero-photo-tag strong {

            display:
                block;

            font-size:
                0.85rem;

        }


        .hero-photo-tag span {

            color:
                var(--text-soft);

            font-size:
                0.75rem;

        }


        /* =========================================================
           ABOUT
        ========================================================= */

        .about-grid {

            display:
                grid;

            grid-template-columns:
                0.8fr 1.2fr;

            gap:
                100px;

        }


        .about-text {

            color:
                var(--text-soft);

            font-size:
                1.05rem;

        }


        .about-text p+p {
            margin-top: 18px;
        }


        .about-stats {

            display:
                grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap:
                20px;

            margin-top:
                45px;

        }


        .stat {

            border-top:
                1px solid var(--border);

            padding-top:
                18px;

        }


        .stat strong {

            display:
                block;

            font-family:
                "Playfair Display", serif;

            font-size:
                2rem;

            color:
                var(--text);

        }


        .stat span {

            font-size:
                0.78rem;

            color:
                var(--text-soft);

        }


        /* =========================================================
           SPECIALTIES
        ========================================================= */

        .specialties {

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

            border-top:
                1px solid var(--border);

            border-bottom:
                1px solid var(--border);

        }


        .specialties-grid {

            display:
                grid;

            grid-template-columns:
                repeat(2, 1fr);

            margin-top:
                60px;

            border-top:
                1px solid var(--border);

        }


        .specialty {

            display:
                grid;

            grid-template-columns:
                70px 1fr;

            gap:
                20px;

            padding:
                38px 30px 38px 0;

            border-bottom:
                1px solid var(--border);

        }


        .specialty:nth-child(even) {

            padding-left:
                35px;

            border-left:
                1px solid var(--border);

        }


        .specialty-number {

            color:
                var(--accent);

            font-size:
                0.8rem;

        }


        .specialty h3 {
            margin-bottom: 10px;
        }


        .specialty p {

            color:
                var(--text-soft);

            font-size:
                0.9rem;

        }


        /* =========================================================
           STACK
        ========================================================= */

        .stack-grid {

            display:
                grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap:
                16px;

            margin-top:
                55px;

        }


        .stack-card {

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

            border:
                1px solid var(--border);

            border-radius:
                var(--radius);

            padding:
                24px;

            min-height:
                180px;

            transition:
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;

        }


        .stack-card:hover {

            transform:
                translateY(-6px);

            border-color:
                var(--accent);

            box-shadow:
                0 18px 40px rgba(0, 0, 0, 0.08);

        }


        .stack-card h3 {

            font-size:
                0.9rem;

            margin-bottom:
                22px;

        }


        .tech-list {

            display:
                grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap:
                12px;

        }


        .tech {

            display:
                flex;

            align-items:
                center;

            gap:
                9px;

            font-size:
                0.78rem;

        }


        .tech img {

            width:
                22px;

            height:
                22px;

            object-fit:
                contain;

        }


        /* =========================================================
           PROCESS
        ========================================================= */

        .process {

            background:
                var(--surface-soft);

            border-top:
                1px solid var(--border);

            border-bottom:
                1px solid var(--border);

            color:
                var(--text);

        }


        .process .section-description {
            color: var(--text-soft);
        }


        .process-grid {

            display:
                grid;

            grid-template-columns:
                repeat(6, 1fr);

            gap:
                14px;

            margin-top:
                60px;

        }


        .process-item {

            border-top:
                1px solid var(--border);

            padding-top:
                20px;

        }


        .process-number {

            display:
                block;

            color:
                var(--accent);

            font-size:
                0.75rem;

            margin-bottom:
                25px;

        }


        .process-item h3 {

            font-size:
                0.95rem;

            margin-bottom:
                10px;

        }


        .process-item p {

            font-size:
                0.8rem;

            color:
                var(--text-soft);

        }


        /* =========================================================
           EXPERIENCE
        ========================================================= */

        .career-layout {

            display:
                grid;

            grid-template-columns:
                0.9fr 1.4fr;

            gap:
                80px;

            margin-top:
                55px;

            align-items:
                start;

        }


        /* =========================================================
           TIMELINE
        ========================================================= */

        .career-list {

            position:
                relative;

            display:
                flex;

            flex-direction:
                column;

            gap:
                0;

            padding-left:
                42px;

            --timeline-progress: 0%;

        }


        /* LINHA BASE */

        .career-list::before {

            content:
                "";

            position:
                absolute;

            left:
                6px;

            top:
                6px;

            width:
                1px;

            height:
                calc(100% - 12px);

            background:
                var(--border);

        }


        /* LINHA DE PROGRESSO */

        .career-list::after {

            content:
                "";

            position:
                absolute;

            left:
                6px;

            top:
                6px;

            width:
                1px;

            height:
                var(--timeline-progress);

            background:
                var(--accent);

            transition:
                height 0.6s ease;

        }


        /* =========================================================
           TIMELINE ITEM
        ========================================================= */

        .career-item {

            position:
                relative;

            width:
                100%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                20px;

            padding:
                26px 0;

            background:
                transparent;

            border:
                none;

            border-bottom:
                1px solid var(--border);

            cursor:
                pointer;

            text-align:
                left;

            color:
                var(--text-soft);

            opacity:
                0;

            transform:
                translateY(25px);

            transition:
                opacity 0.65s ease,
                transform 0.65s ease,
                color 0.3s ease;

        }


        .career-item.timeline-visible {

            opacity:
                1;

            transform:
                translateY(0);

        }


        .career-item:first-child {
            padding-top: 0;
        }


        /* =========================================================
           TIMELINE DOT
        ========================================================= */

        .career-dot {

            position:
                absolute;

            left:
                -42px;

            top:
                36px;

            width:
                13px;

            height:
                13px;

            border-radius:
                50%;

            background:
                var(--bg);

            border:
                2px solid var(--text-soft);

            box-shadow:
                0 0 0 4px var(--bg);

            z-index:
                2;

            transition:
                background 0.3s ease,
                border-color 0.3s ease,
                transform 0.3s ease;

        }


        .career-item:first-child .career-dot {
            top: 10px;
        }


        /* =========================================================
           TIMELINE CONTENT
        ========================================================= */

        .career-content {

            display:
                flex;

            flex-direction:
                column;

            gap:
                5px;

        }


        .career-company {

            font-family:
                "Playfair Display", serif;

            font-size:
                1.35rem;

            color:
                inherit;

        }


        .career-role {

            font-size:
                0.75rem;

            text-transform:
                uppercase;

            letter-spacing:
                0.08em;

            color:
                var(--text-soft);

        }


        .career-date {

            font-size:
                0.72rem;

            color:
                var(--text-soft);

            white-space:
                nowrap;

        }


        /* =========================================================
           TIMELINE STATES
        ========================================================= */

        .career-item:hover {

            color:
                var(--text);

        }


        .career-item.active {

            color:
                var(--text);

        }


        .career-item.active .career-dot {

            background:
                var(--accent);

            border-color:
                var(--accent);

            transform:
                scale(1.15);

        }


        .career-item.active .career-role {
            color: var(--accent);
        }


        /* =========================================================
           CAREER DETAILS
        ========================================================= */

        .career-details {

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

            border:
                1px solid var(--border);

            border-radius:
                22px;

            padding:
                42px;

            min-height:
                500px;

            opacity:
                1;

            transform:
                translateY(0);

            transition:
                opacity 0.28s ease,
                transform 0.28s ease;

        }


        .career-details.is-changing {

            opacity:
                0;

            transform:
                translateY(12px);

        }


        .career-details-date {

            color:
                var(--accent);

            font-size:
                0.8rem;

            margin-bottom:
                15px;

        }


        .career-details h3 {

            font-family:
                "Playfair Display", serif;

            font-size:
                2rem;

            margin-bottom:
                6px;

        }


        .career-details-company {

            color:
                var(--text-soft);

            margin-bottom:
                30px;

        }


        .career-details ul {

            display:
                grid;

            gap:
                14px;

            list-style:
                none;

        }


        .career-details li {

            position:
                relative;

            padding-left:
                20px;

            color:
                var(--text-soft);

            font-size:
                0.9rem;

        }


        .career-details li::before {

            content:
                "";

            width:
                6px;

            height:
                6px;

            border-radius:
                50%;

            background:
                var(--accent);

            position:
                absolute;

            left:
                0;

            top:
                9px;

        }


        /* =========================================================
           EDUCATION
        ========================================================= */

        .education-grid {

            margin-top:
                55px;

            display:
                grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap:
                18px;

        }


        .education-card {

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

            border:
                1px solid var(--border);

            border-radius:
                18px;

            padding:
                28px;

            transition:
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;

        }


        .education-card:hover {

            transform:
                translateY(-6px);

            border-color:
                var(--accent);

            box-shadow:
                0 18px 40px rgba(0, 0, 0, 0.08);

        }


        .education-date {

            color:
                var(--accent);

            font-size:
                0.75rem;

            display:
                block;

            margin-bottom:
                20px;

        }


        .education-card h3 {

            font-size:
                1rem;

            margin-bottom:
                10px;

        }


        .education-card p {

            font-size:
                0.85rem;

            color:
                var(--text-soft);

        }


        /* =========================================================
           CONTACT
        ========================================================= */

        .contact-box {

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

            border:
                1px solid var(--border);

            border-radius:
                28px;

            padding:
                70px;

            display:
                grid;

            grid-template-columns:
                1fr 1fr;

            gap:
                70px;

        }


        .contact-box h2 {

            font-family:
                "Playfair Display", serif;

            font-size:
                clamp(2.5rem, 5vw, 4.5rem);

            line-height:
                1.05;

        }


        .contact-options {

            display:
                grid;

            gap:
                14px;

        }


        .contact-option {

            border:
                1px solid var(--border);

            border-radius:
                15px;

            padding:
                22px;

            transition:
                background 0.25s ease,
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease;

        }


        .contact-option:hover {

            background:
                var(--surface-soft);

            transform:
                translateY(-4px);

            box-shadow:
                0 18px 40px rgba(0, 0, 0, 0.08);

        }


        .contact-option small {

            color:
                var(--accent);

            font-weight:
                600;

        }


        .contact-option h3 {

            margin:
                8px 0;

            font-size:
                1rem;

        }


        .contact-option p {

            color:
                var(--text-soft);

            font-size:
                0.82rem;

        }


        /* =========================================================
           FOOTER
        ========================================================= */

        footer {

            padding:
                30px 0 45px;

        }


        .footer-content {

            display:
                flex;

            justify-content:
                space-between;

            padding-top:
                25px;

            border-top:
                1px solid var(--border);

            color:
                var(--text-soft);

            font-size:
                0.8rem;

        }


        /* =========================================================
           GENERAL REVEAL
        ========================================================= */

        .reveal {

            opacity:
                0;

            transform:
                translateY(25px);

            transition:
                0.7s ease;

        }


        .reveal.visible {

            opacity:
                1;

            transform:
                translateY(0);

        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 950px) {

            section {
                padding: 80px 0;
            }


            .hero-grid,
            .about-grid,
            .career-layout,
            .contact-box {

                grid-template-columns:
                    1fr;

            }


            .hero-grid {
                gap: 55px;
            }


            .hero-photo-wrapper {

                max-width:
                    400px;

                margin:
                    auto;

            }


            .process-grid {

                grid-template-columns:
                    repeat(3, 1fr);

            }


            .stack-grid {

                grid-template-columns:
                    repeat(2, 1fr);

            }


            .education-grid {

                grid-template-columns:
                    1fr;

            }


            .career-layout {
                gap: 50px;
            }

        }


        @media (max-width: 650px) {

            .nav-links a:not(:last-child) {
                display: none;
            }


            .hero h1 {

                font-size:
                    3.7rem;

            }


            .specialties-grid,
            .stack-grid,
            .process-grid {

                grid-template-columns:
                    1fr;

            }


            .specialty:nth-child(even) {

                border-left:
                    none;

                padding-left:
                    0;

            }


            .about-stats {

                grid-template-columns:
                    1fr 1fr;

            }


            .career-details {

                padding:
                    28px;

                min-height:
                    auto;

            }


            .career-company {

                font-size:
                    1.1rem;

            }


            .career-date {

                font-size:
                    0.65rem;

            }


            .contact-box {

                padding:
                    35px 24px;

            }


            .footer-content {

                flex-direction:
                    column;

                gap:
                    12px;

            }


            .hero-photo-tag {

                left:
                    0;

                bottom:
                    20px;

            }

            /* =========================================================
   HERO TAGS
========================================================= */

            .hero-tags {

                display: flex;

                flex-wrap: wrap;

                gap: 8px;

                margin-top: 28px;

            }


            .hero-tag {

                display: inline-flex;

                align-items: center;

                padding:
                    7px 12px;

                border-radius:
                    100px;

                border:
                    1px solid var(--border);

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

                color:
                    var(--text-soft);

                font-family:
                    "DM Mono", monospace;

                font-size:
                    0.68rem;

                letter-spacing:
                    0.03em;

                transition:
                    0.25s ease;

            }


            .hero-tag:hover {

                color:
                    var(--accent);

                border-color:
                    var(--accent);

                transform:
                    translateY(-2px);

            }

        }

/* =========================================================
   HERO TAGS
========================================================= */

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.45);
    color: var(--text-soft);
    font-family: "DM Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    transition: 0.25s ease;
}

.hero-tag:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* =========================================================
   PROCESS SEQUENCE
========================================================= */

.process-item {
    opacity: 0;
    transform: translateX(-45px);
    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-item.process-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================
   EDUCATION BUTTON
========================================================= */

.education-card {
    display: flex;
    flex-direction: column;
}

.education-button {
    margin-top: 25px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.education-card:hover .education-button,
.education-card:focus-within .education-button {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {

    .project-actions,
    .education-button {
        opacity: 1;
        transform: none;
    }

}

.education-button span {
    transition: transform 0.2s ease;
}

.education-button:hover span {
    transform: translateX(4px);
}

/* =========================================================
   EDUCATION MODAL
========================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    width: min(100%, 620px);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 24px;
    padding: 50px;
    z-index: 2;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.14);
}

.modal.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}

.modal-label {
    display: block;
    color: var(--accent);
    font-size: 0.78rem;
    margin-bottom: 14px;
}

.modal-content h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    line-height: 1.15;
}

.modal-institution {
    color: var(--text-soft);
    margin-top: 8px;
}

.modal-info {
    margin: 35px 0;
    padding: 22px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.modal-info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal-info-item span {
    font-size: 0.72rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.modal-info-item strong {
    font-size: 1rem;
}

.modal-certificate {
    margin-bottom: 5px;
    margin-top: 30px;
}

.modal-certificate[hidden] {
    display: none;
}

.modal-description h3 {
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.modal-description p {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.75;
    white-space: pre-line;
}

body.modal-open {
    overflow: hidden;
}

/* =========================================================
   FOOTER CREDIT
========================================================= */

.footer-credit {
    transition: color 0.2s ease;
}

.footer-credit strong {
    color: var(--text);
    transition: color 0.2s ease;
}

.footer-credit:hover strong {
    color: var(--accent);
}

@media (max-width: 650px) {
    .modal-content {
        padding: 40px 25px;
    }
}


/* =========================================================
   CERTIFICATIONS
========================================================= */

.certifications-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.certification-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    background: var(--surface);
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.certification-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.certification-date {
    color: var(--accent);
    font-size: 0.72rem;
    font-family: "DM Mono", monospace;
    display: block;
    margin-bottom: 16px;
}

.certification-card h3 {
    font-size: 0.92rem;
    line-height: 1.35;
    margin-bottom: 8px;
}

.certification-card p {
    font-size: 0.78rem;
    color: var(--text-soft);
}

@media (max-width: 950px) {
    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* =========================================================
   PROJECTS
========================================================= */

.projects {
    position: relative;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 48px;
}

.project-card {
    display: flex;
    flex-direction: column;
    min-height: 390px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.project-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.project-number {
    font-family: "DM Mono", monospace;
    color: var(--accent);
    font-size: 0.75rem;
}

.project-github {
    font-family: "DM Mono", monospace;
    font-size: 0.72rem;
    color: var(--text-soft);
    transition: color 0.2s ease;
}

.project-github:hover {
    color: var(--accent);
}

.project-card-content {
    margin-top: 48px;
}

.project-card-content h3 {
    font-size: 1.35rem;
    line-height: 1.25;
}

.project-card-content p {
    margin-top: 15px;
    color: var(--text-soft);
    line-height: 1.7;
    font-size: 0.9rem;
}

.project-tags,
.project-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-tags {
    margin-top: auto;
    padding-top: 32px;
}

.project-tags span,
.project-modal-tags span {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 100px;
    font-family: "DM Mono", monospace;
    font-size: 0.66rem;
    color: var(--text-soft);
}

.project-actions {
    margin-top: 24px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.project-card:hover .project-actions,
.project-card:focus-within .project-actions {
    opacity: 1;
    transform: translateY(0);
}

.project-details {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
}

.project-details span {
    transition: transform 0.2s ease;
}

.project-details:hover span {
    transform: translateX(4px);
}

.project-modal-github {
    margin-top: 30px;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    transition:
        transform 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.footer-linkedin svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.footer-linkedin:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

@media (max-width: 950px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .project-card {
        min-height: auto;
    }

    .footer-content {
        gap: 20px;
    }
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode {
    --bg: #0d1117;
    --surface: #131a23;
    --surface-soft: #18212b;
    --text: #eef2f7;
    --text-soft: #98a6b7;
    --border: #27313d;
    --primary: #eef2f7;
    --accent: #b79ce8;

    background-color: var(--bg);

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
}

body.dark-mode .navbar {
    background: rgba(13, 17, 23, 0.88);
}

body.dark-mode .btn-primary {
    color: #11161d;
}

body.dark-mode .btn-secondary,
body.dark-mode .hero-status,
body.dark-mode .hero-tag {
    background: rgba(19, 26, 35, 0.72);
}

body.dark-mode .project-card,
body.dark-mode .education-card,
body.dark-mode .modal-content {
    box-shadow: none;
}

/* Elements below kept a hardcoded white/light background regardless of
   theme, which left them light in dark mode while their text switched
   to the light dark-mode color (var(--text)) — making the text
   invisible or barely legible. Overriding the background to a dark,
   translucent surface color fixes this. */
body.dark-mode .specialties,
body.dark-mode .stack-card,
body.dark-mode .career-details,
body.dark-mode .education-card,
body.dark-mode .contact-box {
    background: rgba(19, 26, 35, 0.8);
}

body.dark-mode .hero-photo-tag {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.theme-toggle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: 0.25s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    color: var(--accent);
}

.theme-toggle span {
    position: absolute;
    font-size: 1rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-toggle-moon {
    opacity: 0;
    transform: rotate(-20deg) scale(0.7);
}

body.dark-mode .theme-toggle-sun {
    opacity: 0;
    transform: rotate(20deg) scale(0.7);
}

body.dark-mode .theme-toggle-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}


/* =========================================================
   PROJECTS - VISIBILITY FIX
========================================================= */

.projects-grid {
    margin-top: 48px;
}

.projects .project-card.reveal {
    opacity: 1;
    transform: none;
}

.projects .project-card {
    background: var(--surface);
}

body.dark-mode .project-card:hover,
body.dark-mode .stack-card:hover,
body.dark-mode .education-card:hover,
body.dark-mode .certification-card:hover,
body.dark-mode .contact-option:hover {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   FOOTER - SCREENSHOT INSPIRED
========================================================= */

.site-footer {
    padding: 80px 0 26px;
    margin-top: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

body.dark-mode .site-footer {
    background: #0d1117;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 80px;
    padding-bottom: 58px;
}

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    display: inline-block;
    font-family: "DM Mono", monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.footer-logo span {
    color: var(--accent);
}

.footer-brand p {
    margin-top: 22px;
    color: var(--text-soft);
    line-height: 1.7;
    max-width: 330px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.footer-title {
    margin-bottom: 10px;
    font-family: "DM Mono", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.footer-column a {
    color: var(--text);
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-column a:hover {
    color: var(--accent);
    transform: translateX(3px);
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--text-soft);
    font-size: 0.82rem;
}

.footer-bottom .footer-credit {
    color: var(--text-soft);
}

.footer-bottom .footer-credit strong {
    color: var(--text);
}

@media (max-width: 850px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 48px 32px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .theme-toggle {
        width: 38px;
        height: 38px;
    }

    .nav-content {
        gap: 14px;
    }

    .nav-links {
        gap: 14px;
        overflow-x: auto;
        max-width: calc(100vw - 130px);
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }
}