/* =========================================================

   COLORS / VARIABLES

   ========================================================= */



:root {



    --background: #06090f;



    --background-dark: #070b12;



    --surface: #101722;



    --surface-light: #151e2b;



    --cyan: #5ee7ff;



    --cyan-light: #9bf1ff;



    --text: #dce5ee;



    --text-bright: #f3f6fa;



    --muted: #95a2b2;



    --border: #223040;



}





/* =========================================================

   GLOBAL

   ========================================================= */



* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}





html {



    scroll-behavior: smooth;



}





body {



    background-color: var(--background);



    color: var(--text);



    font-family:

        Arial,

        Helvetica,

        sans-serif;



    line-height: 1.6;



    overflow-x: hidden;



}





body.project-open {



    overflow: hidden;



}





a {



    color: inherit;



}





/* =========================================================

   NAVIGATION

   ========================================================= */



nav {



    height: 75px;





    padding:

        0 6%;





    display: flex;



    align-items: center;



    justify-content: space-between;





    position: fixed;



    top: 0;



    left: 0;



    right: 0;





    background-color:

        rgba(6, 9, 15, 0.88);





    backdrop-filter:

        blur(15px);





    border-bottom:

        1px solid rgba(148, 163, 184, 0.12);





    z-index: 1000;



}





/* Logo */



.logo {



    color:

        var(--text-bright);





    text-decoration: none;





    font-size: 22px;



    font-weight: bold;



}





.logo span {



    color:

        var(--cyan);



}





/* =========================================================

   MENU BUTTON

   ========================================================= */



.menu-button {



    width: 48px;



    height: 48px;





    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;





    gap: 6px;





    background-color:

        transparent;





    border:

        1px solid var(--border);





    border-radius:

        50%;





    cursor: pointer;





    position: relative;



    z-index: 1100;





    transition:

        border-color 0.3s ease,

        background-color 0.3s ease;



}





.menu-button:hover {



    border-color:

        var(--cyan);





    background-color:

        rgba(56, 189, 248, 0.08);



}





.menu-button span {



    width: 21px;



    height: 2px;





    background-color:

        var(--cyan);





    transition:

        transform 0.3s ease,

        opacity 0.3s ease;



}





.menu-button.active span:nth-child(1) {



    transform:

        translateY(8px)

        rotate(45deg);



}





.menu-button.active span:nth-child(2) {



    opacity: 0;



}





.menu-button.active span:nth-child(3) {



    transform:

        translateY(-8px)

        rotate(-45deg);



}





/* =========================================================

   SLIDE OUT MENU

   ========================================================= */



.nav-links {



    position: fixed;





    top: 0;



    right: -420px;





    width:

        min(400px, 90vw);





    height:

        100vh;





    padding:

        125px 50px;





    display: flex;



    flex-direction: column;





    background-color:

        rgba(11, 17, 32, 0.98);





    border-left:

        1px solid var(--border);





    transition:

        right 0.45s

        cubic-bezier(

            0.22,

            1,

            0.36,

            1

        );





    z-index: 1050;



}





.nav-links.active {



    right: 0;



}





.nav-links a {



    display: flex;



    align-items: center;





    gap: 20px;





    padding:

        20px 0;





    color:

        var(--text-bright);





    text-decoration: none;





    font-size: 27px;



    font-weight: bold;





    border-bottom:

        1px solid rgba(148, 163, 184, 0.15);





    transition:

        color 0.2s ease,

        padding-left 0.2s ease;



}





.nav-links a span {



    color:

        var(--cyan);





    font-size:

        11px;





    letter-spacing:

        1px;



}





.nav-links a:hover {



    color:

        var(--cyan);





    padding-left:

        8px;



}






/* =========================================================
   NAVIGATION SUBMENUS / FUTURE LINKS
   ========================================================= */

.nav-links {
    overflow-y: auto;
}

.nav-dropdown {
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.nav-dropdown-toggle,
.nav-future-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    color: var(--text-bright);
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 27px;
    font-weight: bold;
    text-align: left;
}

.nav-dropdown-toggle {
    cursor: pointer;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
    color: var(--cyan);
    padding-left: 8px;
}

.nav-dropdown-toggle .nav-number,
.nav-future-link > span:first-child {
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: 1px;
}

.nav-dropdown-label {
    flex: 1;
}

.nav-dropdown-arrow {
    color: var(--cyan);
    font-size: 22px;
    transition: transform 0.25s ease;
}

.nav-dropdown-toggle.active .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-submenu {
    max-height: 0;
    overflow: hidden;
    padding-left: 31px;
    transition: max-height 0.35s ease, padding-bottom 0.35s ease;
}

.nav-submenu.active {
    max-height: 360px;
    padding-bottom: 14px;
}

.nav-links .nav-submenu a,
.nav-submenu-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0 11px 18px;
    color: var(--muted);
    border-bottom: 0;
    border-left: 1px solid rgba(56, 189, 248, 0.28);
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}

.nav-links .nav-submenu a:hover {
    color: var(--cyan-light);
    border-left-color: var(--cyan);
    padding-left: 24px;
}

.nav-submenu-disabled {
    cursor: default;
    opacity: 0.55;
}

.nav-submenu-disabled small,
.nav-future-label small {
    color: var(--muted);
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-future-link {
    cursor: default;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.nav-future-label {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* =========================================================

   HERO

   ========================================================= */



.hero {



    min-height:

        100vh;





    padding:

        140px 8%

        60px;





    position:

        relative;





    overflow:

        hidden;





    display:

        flex;





    flex-direction:

        column;





    justify-content:

        center;





    background-image:



        linear-gradient(

            rgba(56, 189, 248, 0.045) 1px,

            transparent 1px

        ),



        linear-gradient(

            90deg,

            rgba(56, 189, 248, 0.045) 1px,

            transparent 1px

        );





    background-size:

        55px 55px;



}





/* =========================================================

   HERO LAYOUT

   ========================================================= */



.hero-layout {



    width:

        100%;





    max-width:

        1400px;





    margin:

        0 auto;





    display:

        grid;





    grid-template-columns:

        1.5fr 0.7fr;





    gap:

        100px;





    align-items:

        center;





    position:

        relative;





    z-index:

        2;



}





/* =========================================================

   HERO TEXT

   ========================================================= */



.hero-intro {



    color:

        var(--cyan);





    font-size:

        12px;





    font-weight:

        bold;





    letter-spacing:

        3px;





    margin-bottom:

        20px;



}





.hero h1 {



    color:

        var(--text-bright);





    font-size:

        clamp(

            65px,

            9vw,

            125px

        );





    line-height:

        0.82;





    letter-spacing:

        -6px;





    font-weight:

        800;



}





.hero h1 span {



    display:

        block;





    color:

        var(--cyan);



}





.hero h2 {



    margin-top:

        35px;





    color:

        var(--text-bright);





    font-size:

        26px;



}





.hero-school {



    color:

        var(--cyan);





    font-size:

        15px;





    margin-top:

        3px;



}





.hero-description {



    max-width:

        570px;





    margin-top:

        25px;





    color:

        var(--muted);





    font-size:

        18px;



}





/* =========================================================

   HERO BUTTONS

   ========================================================= */



.hero-buttons {



    margin-top:

        35px;





    display:

        flex;





    align-items:

        center;





    gap:

        30px;



}





.primary-button {



    display:

        inline-flex;





    align-items:

        center;





    gap:

        20px;





    padding:

        14px 20px;





    background-color:

        var(--cyan);





    color:

        var(--background-dark);





    text-decoration:

        none;





    font-weight:

        bold;





    border-radius:

        5px;





    transition:

        transform 0.2s ease,

        background-color 0.2s ease;



}





.primary-button:hover {



    transform:

        translateY(-3px);





    background-color:

        var(--cyan-light);



}





.secondary-button {



    color:

        var(--text-bright);





    text-decoration:

        none;





    font-weight:

        bold;





    transition:

        color 0.2s ease;



}





.secondary-button:hover {



    color:

        var(--cyan);



}





/* =========================================================

   CURRENTLY CARD

   ========================================================= */



.currently-card {



    padding:

        35px;





    background-color:

        rgba(17, 24, 39, 0.82);





    border:

        1px solid var(--border);





    border-radius:

        12px;





    backdrop-filter:

        blur(10px);





    box-shadow:

        0 30px 80px

        rgba(0, 0, 0, 0.2);



}





.currently-title {



    color:

        var(--cyan);





    font-size:

        11px;





    font-weight:

        bold;





    letter-spacing:

        3px;





    padding-bottom:

        20px;





    border-bottom:

        1px solid var(--border);



}





.currently-item {



    display:

        flex;





    gap:

        17px;





    padding:

        22px 0;





    border-bottom:

        1px solid rgba(51, 65, 85, 0.6);



}





.currently-item:last-child {



    border-bottom:

        none;





    padding-bottom:

        0;



}





.currently-dot {



    width:

        8px;





    height:

        8px;





    margin-top:

        8px;





    background-color:

        var(--cyan);





    border-radius:

        50%;





    box-shadow:

        0 0 12px

        rgba(56, 189, 248, 0.7);





    flex-shrink:

        0;



}





.currently-label {



    color:

        var(--muted);





    font-size:

        10px;





    text-transform:

        uppercase;





    letter-spacing:

        1px;



}





.currently-item h3 {



    color:

        var(--text-bright);





    font-size:

        17px;





    margin:

        2px 0;



}





.currently-item div > p:last-child {



    color:

        var(--muted);





    font-size:

        13px;



}





/* =========================================================

   HERO DECORATIONS

   ========================================================= */



.hero-shape {



    position:

        absolute;





    pointer-events:

        none;



}





.hero-shape-one {



    width:

        320px;





    height:

        320px;





    left:

        -180px;





    bottom:

        10%;





    border:

        1px solid

        rgba(56, 189, 248, 0.18);





    border-radius:

        35px;





    transform:

        rotate(45deg);



}





.hero-shape-two {



    width:

        450px;





    height:

        450px;





    right:

        -250px;





    top:

        20%;





    border:

        1px solid

        rgba(56, 189, 248, 0.12);





    border-radius:

        50%;





    box-shadow:



        0 0 0 70px

        rgba(56, 189, 248, 0.015),



        0 0 0 140px

        rgba(56, 189, 248, 0.01);



}





/* =========================================================

   SCROLL INDICATOR

   ========================================================= */



.scroll-indicator {



    position:

        absolute;





    bottom:

        25px;





    left:

        8%;





    display:

        flex;





    align-items:

        center;





    gap:

        10px;





    color:

        var(--muted);





    font-size:

        9px;





    letter-spacing:

        2px;



}





.scroll-indicator span {



    width:

        35px;





    height:

        1px;





    background-color:

        var(--cyan);



}





/* =========================================================

   GENERAL SECTIONS

   ========================================================= */



section {



    padding:

        120px 8%;



}





.section-header {



    margin-bottom:

        65px;



}





.section-number {



    color:

        var(--cyan);





    font-size:

        11px;





    font-weight:

        bold;





    letter-spacing:

        2px;





    margin-bottom:

        17px;



}





.section-header h2 {



    max-width:

        900px;





    color:

        var(--text-bright);





    font-size:

        clamp(

            42px,

            6vw,

            72px

        );





    line-height:

        1;





    letter-spacing:

        -3px;



}





.section-description {



    max-width:

        600px;





    color:

        var(--muted);





    margin-top:

        20px;





    font-size:

        17px;



}





/* =========================================================

   ABOUT

   ========================================================= */



.about-section {



    background-color:

        var(--background);



}





.about-layout {



    display:

        grid;





    grid-template-columns:

        1fr 1fr;





    gap:

        100px;





    padding-bottom:

        80px;



}





.about-large {



    color:

        var(--text-bright);





    font-size:

        clamp(

            32px,

            4vw,

            52px

        );





    line-height:

        1.15;





    letter-spacing:

        -2px;



}





.about-large span {



    color:

        var(--cyan);



}





.about-description p {



    color:

        var(--muted);





    font-size:

        17px;





    margin-bottom:

        22px;



}





/* ABOUT FACTS */



.about-facts {



    display:

        grid;





    grid-template-columns:

        repeat(4, 1fr);





    border-top:

        1px solid var(--border);





    border-bottom:

        1px solid var(--border);



}





.fact {



    padding:

        30px 25px;





    border-right:

        1px solid var(--border);



}





.fact:first-child {



    padding-left:

        0;



}





.fact:last-child {



    border-right:

        none;



}





.fact-label {



    color:

        var(--cyan);





    font-size:

        9px;





    letter-spacing:

        2px;





    margin-bottom:

        12px;



}





.fact h3 {



    color:

        var(--text-bright);





    font-size:

        16px;



}





/* =========================================================

   PROJECTS

   ========================================================= */



.projects-section {



    background-color:

        var(--background-dark);



}





.project-list {



    border-top:

        1px solid var(--border);



}





.project-row {



    display:

        grid;





    grid-template-columns:

        80px 1fr;





    gap:

        30px;





    padding:

        45px 0;





    border-bottom:

        1px solid var(--border);





    cursor:

        pointer;





    transition:

        padding 0.35s ease,

        background-color 0.35s ease;



}





.project-row:hover {



    padding:

        55px 25px;





    background-color:

        rgba(56, 189, 248, 0.035);



}





.project-number {



    color:

        var(--cyan);





    font-size:

        12px;





    letter-spacing:

        2px;





    padding-top:

        10px;



}





.project-title-row {



    display:

        flex;





    justify-content:

        space-between;





    align-items:

        flex-start;





    gap:

        30px;



}





.project-title-row h3 {



    color:

        var(--text-bright);





    font-size:

        clamp(

            35px,

            5vw,

            60px

        );





    line-height:

        1;





    letter-spacing:

        -2px;





    transition:

        color 0.25s ease;



}





.project-row:hover

.project-title-row h3 {



    color:

        var(--cyan);



}





.project-year {



    color:

        var(--muted);





    font-size:

        11px;





    letter-spacing:

        1px;



}





.project-description {



    max-width:

        700px;





    color:

        var(--muted);





    margin-top:

        25px;





    font-size:

        16px;



}





.project-bottom {



    margin-top:

        35px;





    display:

        flex;





    justify-content:

        space-between;





    align-items:

        center;





    gap:

        30px;



}





.project-technologies {



    display:

        flex;





    flex-wrap:

        wrap;





    gap:

        10px;



}





.project-technologies span {



    padding:

        5px 9px;





    color:

        var(--text);





    border:

        1px solid var(--border);





    font-size:

        10px;





    text-transform:

        uppercase;





    letter-spacing:

        1px;



}





.view-project {



    color:

        var(--cyan);





    font-size:

        13px;





    font-weight:

        bold;





    white-space:

        nowrap;



}





.view-project span {



    display:

        inline-block;





    margin-left:

        5px;





    transition:

        transform 0.2s ease;



}





.project-row:hover

.view-project span {



    transform:

        translateX(6px);



}





/* =========================================================

   SKILLS

   ========================================================= */



.skills-section {



    background-color:

        var(--background);



}





.skills-grid {



    display:

        grid;





    grid-template-columns:

        repeat(2, 1fr);





    border-top:

        1px solid var(--border);



}





.skill-group {



    min-height:

        330px;





    padding:

        40px;





    border-bottom:

        1px solid var(--border);





    border-right:

        1px solid var(--border);



}





.skill-group:nth-child(odd) {



    padding-left:

        0;



}





.skill-group:nth-child(even) {



    border-right:

        none;



}





.skill-number {



    color:

        var(--cyan);





    font-size:

        11px;





    margin-bottom:

        45px;



}





.skill-group h3 {



    color:

        var(--text-bright);





    font-size:

        32px;





    margin-bottom:

        30px;





    letter-spacing:

        -1px;



}





.skill-list {



    display:

        flex;





    flex-wrap:

        wrap;





    gap:

        10px;



}





.skill-list span {



    padding:

        8px 12px;





    background-color:

        var(--surface-light);





    color:

        var(--text);





    border:

        1px solid var(--border);





    border-radius:

        5px;





    font-size:

        13px;





    transition:

        border-color 0.2s ease,

        color 0.2s ease,

        transform 0.2s ease;



}





.skill-list span:hover {



    color:

        var(--cyan);





    border-color:

        var(--cyan);





    transform:

        translateY(-2px);



}





/* =========================================================

   EXPERIENCE

   ========================================================= */



.experience-section {



    background-color:

        var(--background-dark);



}





.experience-list {



    border-top:

        1px solid var(--border);



}





.experience-item {



    display:

        grid;





    grid-template-columns:

        80px 1fr;





    gap:

        30px;





    padding:

        50px 0;





    border-bottom:

        1px solid var(--border);



}





.experience-number {



    color:

        var(--cyan);





    font-size:

        11px;





    padding-top:

        7px;



}





.experience-heading h3 {



    color:

        var(--text-bright);





    font-size:

        clamp(

            27px,

            4vw,

            42px

        );





    letter-spacing:

        -1px;





    line-height:

        1.1;



}





.experience-role {



    color:

        var(--cyan);





    margin-top:

        7px;



}





.experience-content ul {



    max-width:

        750px;





    margin-top:

        30px;





    padding-left:

        20px;





    color:

        var(--muted);



}





.experience-content li {



    margin-bottom:

        10px;



}





.experience-placeholder {



    color:

        var(--muted);





    margin-top:

        25px;



}





.experience-skills {



    display:

        flex;





    flex-wrap:

        wrap;





    gap:

        10px;





    margin-top:

        30px;



}





.experience-skills span {



    color:

        var(--muted);





    font-size:

        10px;





    text-transform:

        uppercase;





    letter-spacing:

        1px;





    border:

        1px solid var(--border);





    padding:

        6px 9px;



}





/* =========================================================

   CONTACT

   ========================================================= */



.contact-section {



    min-height:

        70vh;





    display:

        grid;





    grid-template-columns:

        1.2fr 0.8fr;





    gap:

        100px;





    align-items:

        center;





    background-color:

        var(--background);



}





.contact-left h2 {



    color:

        var(--text-bright);





    font-size:

        clamp(

            70px,

            10vw,

            130px

        );





    line-height:

        0.8;





    letter-spacing:

        -6px;



}





.contact-left h2 span {



    display:

        block;





    color:

        var(--cyan);



}





.contact-right > p {



    color:

        var(--muted);





    font-size:

        18px;





    max-width:

        500px;



}





.contact-links {



    margin-top:

        40px;





    display:

        flex;





    flex-direction:

        column;



}





.contact-links a {



    display:

        flex;





    justify-content:

        space-between;





    padding:

        15px 0;





    color:

        var(--text-bright);





    text-decoration:

        none;





    font-size:

        19px;





    border-bottom:

        1px solid var(--border);





    transition:

        color 0.2s ease,

        padding-left 0.2s ease;



}





.contact-links a:hover {



    color:

        var(--cyan);





    padding-left:

        8px;



}





/* =========================================================

   FOOTER

   ========================================================= */



footer {



    padding:

        35px 8%;





    display:

        flex;





    justify-content:

        space-between;





    align-items:

        flex-end;





    gap:

        30px;





    background-color:

        var(--background-dark);





    border-top:

        1px solid var(--border);





    color:

        var(--muted);





    font-size:

        11px;



}





.footer-name {



    color:

        var(--text-bright);





    font-size:

        14px;





    font-weight:

        bold;



}





/* =========================================================

   FULL SCREEN PROJECT OVERLAY

   ========================================================= */



.project-overlay {



    position:

        fixed;





    inset:

        0;





    z-index:

        5000;





    background-color:

        rgba(11, 17, 32, 0.99);





    opacity:

        0;





    visibility:

        hidden;





    pointer-events:

        none;





    transition:

        opacity 0.4s ease,

        visibility 0.4s ease;



}





.project-overlay.active {



    opacity:

        1;





    visibility:

        visible;





    pointer-events:

        auto;



}





/* =========================================================

   EXPANDED PROJECT

   ========================================================= */



.expanded-project {



    width:

        100%;





    height:

        100%;





    overflow-y:

        auto;





    transform:

        translateY(100%);





    transition:

        transform 0.6s

        cubic-bezier(

            0.22,

            1,

            0.36,

            1

        );





    background-image:



        linear-gradient(

            rgba(56, 189, 248, 0.035) 1px,

            transparent 1px

        ),



        linear-gradient(

            90deg,

            rgba(56, 189, 248, 0.035) 1px,

            transparent 1px

        );





    background-size:

        60px 60px;



}





.project-overlay.active

.expanded-project {



    transform:

        translateY(0);



}





/* =========================================================

   CLOSE BUTTON

   ========================================================= */



.project-close {



    position:

        fixed;





    top:

        30px;





    right:

        40px;





    width:

        55px;





    height:

        55px;





    display:

        flex;





    justify-content:

        center;





    align-items:

        center;





    background-color:

        var(--surface-light);





    color:

        var(--cyan);





    border:

        1px solid var(--border);





    border-radius:

        50%;





    font-size:

        32px;





    cursor:

        pointer;





    z-index:

        5100;





    transition:

        transform 0.3s ease,

        border-color 0.3s ease;



}





.project-close:hover {



    transform:

        rotate(90deg);





    border-color:

        var(--cyan);



}





/* =========================================================

   EXPANDED PROJECT CONTENT

   ========================================================= */



.expanded-project-content {



    width:

        min(1200px, 84%);





    margin:

        0 auto;





    padding:

        120px 0;



}





.expanded-label {



    color:

        var(--cyan);





    font-size:

        11px;





    font-weight:

        bold;





    letter-spacing:

        2px;





    margin-bottom:

        25px;



}





.expanded-project-content > h2 {



    max-width:

        1000px;





    color:

        var(--text-bright);





    font-size:

        clamp(

            60px,

            10vw,

            125px

        );





    line-height:

        0.9;





    letter-spacing:

        -5px;



}





.expanded-introduction {



    max-width:

        750px;





    color:

        var(--muted);





    font-size:

        20px;





    margin-top:

        40px;



}





.expanded-divider {



    height:

        1px;





    background-color:

        var(--border);





    margin:

        70px 0;



}





/* =========================================================

   EXPANDED GRID

   ========================================================= */



.expanded-grid {



    display:

        grid;





    grid-template-columns:

        repeat(2, 1fr);





    column-gap:

        80px;





    row-gap:

        70px;



}





.expanded-section {



    padding-top:

        25px;





    border-top:

        1px solid var(--border);



}





.expanded-number {



    color:

        var(--cyan);





    font-size:

        10px;





    margin-bottom:

        30px;



}





.expanded-section h3 {



    color:

        var(--text-bright);





    font-size:

        29px;





    margin-bottom:

        20px;



}





.expanded-section > p:not(.expanded-number) {



    color:

        var(--muted);



}





.expanded-section ul {



    padding-left:

        20px;



}





.expanded-section li {



    color:

        var(--muted);





    margin-bottom:

        11px;



}





/* TECHNOLOGIES */



.expanded-technologies {



    display:

        flex;





    flex-wrap:

        wrap;





    gap:

        10px;



}





.expanded-technologies span {



    padding:

        8px 12px;





    color:

        var(--cyan);





    border:

        1px solid var(--border);





    font-size:

        11px;





    text-transform:

        uppercase;





    letter-spacing:

        1px;



}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1000px) {





    .hero-layout {



        grid-template-columns:

            1fr;





        gap:

            60px;



    }





    .currently-card {



        max-width:

            600px;



    }





    .about-layout {



        grid-template-columns:

            1fr;





        gap:

            45px;



    }





    .about-facts {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .fact:nth-child(2) {



        border-right:

            none;



    }





    .skills-grid {



        grid-template-columns:

            1fr;



    }





    .skill-group {



        border-right:

            none;





        padding:

            40px 0;



    }





    .contact-section {



        grid-template-columns:

            1fr;





        gap:

            60px;



    }



}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 700px) {





    nav {



        height:

            70px;





        padding:

            0 6%;



    }





    .nav-links {



        width:

            100%;





        right:

            -100%;





        padding:

            110px 8%;



    }





    .hero {



        padding:

            120px 7%

            70px;



    }





    .hero-layout {



        gap:

            50px;



    }





    .hero h1 {



        font-size:

            clamp(

                58px,

                18vw,

                85px

            );





        letter-spacing:

            -4px;



    }





    .hero h2 {



        font-size:

            21px;



    }





    .hero-buttons {



        flex-direction:

            column;





        align-items:

            flex-start;





        gap:

            20px;



    }





    .currently-card {



        padding:

            25px;



    }





    .scroll-indicator {



        display:

            none;



    }





    section {



        padding:

            85px 7%;



    }





    .section-header {



        margin-bottom:

            45px;



    }





    .section-header h2 {



        letter-spacing:

            -2px;



    }





    .about-facts {



        grid-template-columns:

            1fr;



    }





    .fact {



        padding:

            22px 0;





        border-right:

            none;





        border-bottom:

            1px solid var(--border);



    }





    .fact:last-child {



        border-bottom:

            none;



    }





    .project-row {



        grid-template-columns:

            1fr;





        gap:

            15px;





        padding:

            35px 0;



    }





    .project-number {



        padding-top:

            0;



    }





    .project-title-row {



        flex-direction:

            column-reverse;





        gap:

            10px;



    }





    .project-title-row h3 {



        font-size:

            38px;



    }





    .project-bottom {



        flex-direction:

            column;





        align-items:

            flex-start;



    }





    .project-row:hover {



        padding:

            40px 10px;



    }





    .experience-item {



        grid-template-columns:

            1fr;





        gap:

            15px;



    }





    .contact-left h2 {



        font-size:

            clamp(

                65px,

                20vw,

                95px

            );





        letter-spacing:

            -4px;



    }





    footer {



        flex-direction:

            column;





        align-items:

            flex-start;



    }





    .project-close {



        top:

            18px;





        right:

            18px;





        width:

            48px;





        height:

            48px;



    }





    .expanded-project-content {



        width:

            86%;





        padding:

            100px 0

            70px;



    }





    .expanded-project-content > h2 {



        font-size:

            55px;





        letter-spacing:

            -3px;



    }





    .expanded-introduction {



        font-size:

            17px;



    }





    .expanded-grid {



        grid-template-columns:

            1fr;





        gap:

            50px;



    }



}
/* =========================================================
   DASHBOARD-STYLE SIDE NAVIGATION OVERRIDES
   ========================================================= */

body.menu-open {
    overflow: hidden;
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.64);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1025;
}

.nav-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.nav-links {
    right: -430px;
    width: min(410px, 92vw);
    padding: 94px 22px 22px;
    gap: 18px;
    background: rgba(8, 15, 30, 0.985);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.36);
}

.nav-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 10px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.nav-panel-header > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nav-panel-kicker {
    color: var(--cyan);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.nav-panel-header strong {
    color: var(--text-bright);
    font-size: 21px;
}

.nav-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: var(--muted);
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 999px;
    font-size: 11px;
}

.nav-panel-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.65);
}

.nav-menu-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nav-links .nav-item,
.nav-links .nav-dropdown-toggle.nav-item {
    width: 100%;
    min-height: 66px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    color: var(--text-bright);
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.11);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nav-links .nav-item:hover,
.nav-links .nav-dropdown-toggle.nav-item:hover,
.nav-links .nav-dropdown-toggle.nav-item.active {
    color: var(--text-bright);
    padding-left: 14px;
    border-color: rgba(56, 189, 248, 0.42);
    background: rgba(56, 189, 248, 0.08);
    transform: translateX(-3px);
}

.nav-links .nav-item .nav-number,
.nav-links .nav-dropdown-toggle.nav-item .nav-number {
    color: var(--cyan);
    font-size: 10px;
    letter-spacing: 1.4px;
}

.nav-item-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nav-item-copy strong {
    font-size: 15px;
    line-height: 1.2;
}

.nav-item-copy small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.nav-dropdown {
    border-bottom: 0;
}

.nav-dropdown-arrow {
    color: var(--cyan);
    font-size: 18px;
}

.nav-submenu {
    margin-left: 42px;
    padding-left: 12px;
    border-left: 1px solid rgba(56, 189, 248, 0.22);
}

.nav-submenu.active {
    max-height: 320px;
    padding-top: 7px;
    padding-bottom: 4px;
}

.nav-links .nav-submenu a {
    min-height: 42px;
    margin: 3px 0;
    padding: 9px 12px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.nav-links .nav-submenu a:hover {
    color: var(--cyan-light);
    padding-left: 16px;
    background: rgba(56, 189, 248, 0.06);
}

.nav-soon {
    margin-left: auto;
    padding: 3px 6px;
    color: var(--muted);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.nav-panel-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 10px 0;
    color: var(--muted);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 10px;
    letter-spacing: 0.6px;
}

/* =========================================================
   FUTURE / PLACEHOLDER PAGES
   ========================================================= */

.placeholder-page {
    min-height: 100vh;
    padding: 120px 8% 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 15%, rgba(56, 189, 248, 0.10), transparent 32%),
        var(--bg-dark);
}

.placeholder-shell {
    width: min(900px, 100%);
}

.placeholder-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.placeholder-brand {
    color: var(--text-bright);
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
}

.placeholder-brand span {
    color: var(--cyan);
}

.placeholder-back {
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
}

.placeholder-back:hover {
    color: var(--cyan);
}

.placeholder-card {
    padding: clamp(28px, 6vw, 64px);
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.placeholder-eyebrow {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.placeholder-card h1 {
    margin: 0 0 14px;
    color: var(--text-bright);
    font-size: clamp(38px, 7vw, 72px);
    line-height: 1;
}

.placeholder-card p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}

.placeholder-module {
    min-height: 96px;
    padding: 16px;
    background: rgba(2, 6, 23, 0.36);
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 12px;
}

.placeholder-module span {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .nav-links {
        padding-left: 14px;
        padding-right: 14px;
    }

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


/* =========================================================
   SKILLS ACCORDION / AT-A-GLANCE
   ========================================================= */

.skills-intro {
    max-width: 680px;
    margin-top: 22px;
    color: var(--muted);
    font-size: 15px;
}

.skills-highlight {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 42px;
}

.skills-highlight span {
    padding: 9px 13px;
    color: var(--cyan-light);
    background: rgba(56, 189, 248, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.26);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.skills-accordion {
    border-top: 1px solid var(--border);
}

.skill-accordion-item {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.3s ease;
}

.skill-accordion-item.active {
    background: rgba(56, 189, 248, 0.028);
}

.skill-accordion-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: 70px 1fr 44px;
    align-items: center;
    gap: 20px;
    padding: 30px 0;
    color: var(--text-bright);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.skill-accordion-number {
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: 2px;
}

.skill-accordion-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
}

.skill-accordion-heading strong {
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: -0.8px;
    transition: color 0.25s ease;
}

.skill-accordion-heading small {
    color: var(--muted);
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.skill-accordion-plus {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.skill-accordion-toggle:hover .skill-accordion-heading strong,
.skill-accordion-item.active .skill-accordion-heading strong {
    color: var(--cyan-light);
}

.skill-accordion-toggle:hover .skill-accordion-plus,
.skill-accordion-item.active .skill-accordion-plus {
    border-color: var(--cyan);
    background: rgba(56, 189, 248, 0.08);
}

.skill-accordion-item.active .skill-accordion-plus {
    transform: rotate(45deg);
}

.skill-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.skill-accordion-content {
    max-width: 850px;
    padding: 0 0 36px 90px;
}

.skill-accordion-content p {
    max-width: 700px;
    color: var(--muted);
    font-size: 15px;
}

.skill-list-expanded {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.skill-list-expanded span {
    padding: 7px 10px;
    color: var(--text);
    border: 1px solid var(--border);
    font-size: 10px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* =========================================================
   OPENING TITLE SCREEN
   ========================================================= */

.site-intro {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #06090f;
    transition: opacity 0.65s ease, visibility 0.65s ease;
}

.site-intro::before,
.site-intro::after {
    content: "";
    position: absolute;
    width: 42vw;
    height: 42vw;
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 50%;
    filter: blur(0.2px);
}

.site-intro::before {
    top: -24vw;
    right: -10vw;
    animation: introOrb 1.8s ease-out both;
}

.site-intro::after {
    bottom: -27vw;
    left: -13vw;
    animation: introOrb 1.8s 0.08s ease-out both reverse;
}

.site-intro-grid {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: introGrid 0.8s 0.1s ease forwards;
}

.site-intro-content {
    position: relative;
    width: min(760px, 84vw);
}

.site-intro-kicker {
    margin-bottom: 16px;
    color: var(--cyan);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 4px;
    opacity: 0;
    transform: translateY(12px);
    animation: introRise 0.45s 0.15s ease forwards;
}

.site-intro-title {
    display: flex;
    flex-direction: column;
    color: var(--text-bright);
    font-size: clamp(54px, 10vw, 118px);
    font-weight: 800;
    letter-spacing: -6px;
    line-height: 0.79;
}

.site-intro-title span {
    display: block;
    clip-path: inset(0 100% 0 0);
}

.site-intro-title span:first-child {
    animation: introWipe 0.65s 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.site-intro-title span:last-child {
    color: var(--cyan);
    animation: introWipe 0.72s 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.site-intro-line {
    width: 100%;
    height: 1px;
    margin-top: 28px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.15);
}

.site-intro-line i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--cyan);
    transform: translateX(-100%);
    animation: introScan 0.75s 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.site-intro-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 2.4px;
    opacity: 0;
    animation: introFade 0.35s 0.95s ease forwards;
}

.site-intro-status span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.8);
}

.site-intro.intro-exit {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hero .hero-content,
.hero .currently-card,
.hero .scroll-indicator {
    opacity: 0;
    transform: translateY(22px);
}

body.site-ready .hero .hero-content {
    animation: heroReveal 0.75s 0.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.site-ready .hero .currently-card {
    animation: heroReveal 0.75s 0.18s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.site-ready .hero .scroll-indicator {
    animation: heroReveal 0.65s 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes introWipe {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes introScan {
    to { transform: translateX(0); }
}

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

@keyframes introFade {
    to { opacity: 1; }
}

@keyframes introGrid {
    to { opacity: 1; }
}

@keyframes introOrb {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

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

@media (max-width: 700px) {
    .skill-accordion-toggle {
        grid-template-columns: 42px 1fr 38px;
        gap: 12px;
        padding: 24px 0;
    }

    .skill-accordion-heading {
        display: block;
    }

    .skill-accordion-heading small {
        display: block;
        margin-top: 5px;
        line-height: 1.45;
    }

    .skill-accordion-content {
        padding: 0 0 30px 54px;
    }

    .site-intro-title {
        letter-spacing: -3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-intro { display: none; }
    .hero .hero-content,
    .hero .currently-card,
    .hero .scroll-indicator {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   POST-INTRO PAGE ASSEMBLY
   Smoothly brings the landing-page pieces into place after
   the opening title screen finishes.
   ========================================================= */

/* Hold the visible landing-page pieces just outside their final positions. */
body:not(.site-ready) nav .logo,
body:not(.site-ready) nav .menu-button,
body:not(.site-ready) .hero .hero-shape,
body:not(.site-ready) .hero .hero-intro,
body:not(.site-ready) .hero h1,
body:not(.site-ready) .hero h2,
body:not(.site-ready) .hero .hero-school,
body:not(.site-ready) .hero .hero-description,
body:not(.site-ready) .hero .hero-buttons,
body:not(.site-ready) .hero .currently-title,
body:not(.site-ready) .hero .currently-item,
body:not(.site-ready) .hero .scroll-indicator {
    opacity: 0;
}

body:not(.site-ready) nav .logo {
    transform: translate3d(-28px, -18px, 0);
}

body:not(.site-ready) nav .menu-button {
    transform: translate3d(28px, -18px, 0) scale(0.94);
}

body:not(.site-ready) .hero .hero-shape-one {
    transform: translate3d(90px, -55px, 0) scale(0.78) rotate(-8deg);
}

body:not(.site-ready) .hero .hero-shape-two {
    transform: translate3d(-90px, 65px, 0) scale(0.8) rotate(7deg);
}

body:not(.site-ready) .hero .hero-intro,
body:not(.site-ready) .hero h1,
body:not(.site-ready) .hero h2,
body:not(.site-ready) .hero .hero-school,
body:not(.site-ready) .hero .hero-description,
body:not(.site-ready) .hero .hero-buttons {
    transform: translate3d(-46px, 18px, 0);
}

body:not(.site-ready) .hero .currently-title,
body:not(.site-ready) .hero .currently-item {
    transform: translate3d(48px, 16px, 0);
}

body:not(.site-ready) .hero .scroll-indicator {
    transform: translate3d(0, 24px, 0);
}

/* Navigation arrives first, making the intro feel connected to the page. */
body.site-ready nav .logo {
    animation: pageAssembleLeft 0.72s 0.02s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready nav .menu-button {
    animation: pageAssembleRight 0.72s 0.04s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Background geometry sweeps into place behind the content. */
body.site-ready .hero .hero-shape-one {
    animation: shapeAssembleOne 1.05s 0.02s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .hero-shape-two {
    animation: shapeAssembleTwo 1.08s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Left hero copy assembles line-by-line rather than appearing as one block. */
body.site-ready .hero .hero-intro {
    animation: pageAssembleLeft 0.66s 0.10s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero h1 {
    animation: pageAssembleLeft 0.78s 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero h2 {
    animation: pageAssembleLeft 0.70s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .hero-school {
    animation: pageAssembleLeft 0.68s 0.31s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .hero-description {
    animation: pageAssembleLeft 0.72s 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .hero-buttons {
    animation: pageAssembleUp 0.76s 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The right-side status card builds itself in a staggered sequence. */
body.site-ready .hero .currently-title {
    animation: pageAssembleRight 0.65s 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .currently-item:nth-of-type(2) {
    animation: pageAssembleRight 0.70s 0.30s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .currently-item:nth-of-type(3) {
    animation: pageAssembleRight 0.70s 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .currently-item:nth-of-type(4) {
    animation: pageAssembleRight 0.70s 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .currently-item:nth-of-type(5) {
    animation: pageAssembleRight 0.70s 0.54s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.site-ready .hero .scroll-indicator {
    animation: pageAssembleUp 0.72s 0.64s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pageAssembleLeft {
    0% {
        opacity: 0;
        transform: translate3d(-46px, 18px, 0);
        filter: blur(5px);
    }
    55% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes pageAssembleRight {
    0% {
        opacity: 0;
        transform: translate3d(48px, 16px, 0);
        filter: blur(5px);
    }
    55% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes pageAssembleUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(0.985);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes shapeAssembleOne {
    0% {
        opacity: 0;
        transform: translate3d(90px, -55px, 0) scale(0.78) rotate(-8deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

@keyframes shapeAssembleTwo {
    0% {
        opacity: 0;
        transform: translate3d(-90px, 65px, 0) scale(0.8) rotate(7deg);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}

/* Let the intro start fading as the assembled page begins to emerge beneath it. */
.site-intro.intro-exit {
    transition-duration: 0.78s;
}

@media (max-width: 700px) {
    body:not(.site-ready) .hero .hero-intro,
    body:not(.site-ready) .hero h1,
    body:not(.site-ready) .hero h2,
    body:not(.site-ready) .hero .hero-school,
    body:not(.site-ready) .hero .hero-description,
    body:not(.site-ready) .hero .hero-buttons,
    body:not(.site-ready) .hero .currently-title,
    body:not(.site-ready) .hero .currently-item {
        transform: translate3d(0, 28px, 0);
    }

    body.site-ready .hero .hero-intro,
    body.site-ready .hero h1,
    body.site-ready .hero h2,
    body.site-ready .hero .hero-school,
    body.site-ready .hero .hero-description,
    body.site-ready .hero .hero-buttons,
    body.site-ready .hero .currently-title,
    body.site-ready .hero .currently-item {
        animation-name: pageAssembleUp;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.site-ready) nav .logo,
    body:not(.site-ready) nav .menu-button,
    body:not(.site-ready) .hero .hero-shape,
    body:not(.site-ready) .hero .hero-intro,
    body:not(.site-ready) .hero h1,
    body:not(.site-ready) .hero h2,
    body:not(.site-ready) .hero .hero-school,
    body:not(.site-ready) .hero .hero-description,
    body:not(.site-ready) .hero .hero-buttons,
    body:not(.site-ready) .hero .currently-title,
    body:not(.site-ready) .hero .currently-item,
    body:not(.site-ready) .hero .scroll-indicator {
        opacity: 1;
        transform: none;
        filter: none;
    }

    body.site-ready nav .logo,
    body.site-ready nav .menu-button,
    body.site-ready .hero .hero-shape,
    body.site-ready .hero .hero-intro,
    body.site-ready .hero h1,
    body.site-ready .hero h2,
    body.site-ready .hero .hero-school,
    body.site-ready .hero .hero-description,
    body.site-ready .hero .hero-buttons,
    body.site-ready .hero .currently-title,
    body.site-ready .hero .currently-item,
    body.site-ready .hero .scroll-indicator {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}


/* =========================================================
   2026-10-01 THEME UNIFICATION
   Matches Apps & Games + System Control Center palette
   ========================================================= */

body {
    background:
        radial-gradient(circle at 76% 10%, rgba(94, 231, 255, 0.055), transparent 28%),
        var(--background);
}

nav {
    background: rgba(6, 9, 15, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}

.hero {
    background-color: #070b12;
    background-image:
        linear-gradient(rgba(94, 231, 255, 0.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 231, 255, 0.038) 1px, transparent 1px),
        radial-gradient(circle at 82% 35%, rgba(94, 231, 255, 0.065), transparent 27%);
    background-size: 60px 60px, 60px 60px, auto;
}

.hero h1 span,
.hero-school,
.hero-intro,
.section-label,
.currently-title {
    color: var(--cyan);
}

.currently-card {
    background: rgba(16, 23, 34, 0.88);
    border-color: #263445;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
}

.currently-item {
    border-color: rgba(255, 255, 255, 0.075);
}

.currently-dot {
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(94, 231, 255, 0.72);
}

.primary-button {
    background: var(--cyan);
    color: #061015;
    border-color: var(--cyan);
    box-shadow: none;
}

.primary-button:hover {
    box-shadow: 0 12px 34px rgba(94, 231, 255, 0.16);
}

.secondary-button {
    color: var(--text-bright);
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.018);
}

.secondary-button:hover {
    color: var(--cyan);
    border-color: rgba(94, 231, 255, 0.42);
    background: rgba(94, 231, 255, 0.045);
}

section:not(.hero) {
    background-color: #06090f;
}

.project-card,
.experience-card,
.skill-card,
.contact-card {
    background: #101722;
    border-color: #223040;
}

.project-card:hover,
.experience-card:hover,
.skill-card:hover {
    border-color: rgba(94, 231, 255, 0.34);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.nav-backdrop {
    background: rgba(0, 0, 0, 0.68);
}

.nav-links {
    background: rgba(7, 11, 18, 0.99);
    border-left: 1px solid #223040;
}

.nav-panel-status,
.nav-links .nav-item,
.nav-links .nav-dropdown-toggle.nav-item {
    background: rgba(16, 23, 34, 0.72);
    border-color: rgba(255, 255, 255, 0.07);
}

.nav-links .nav-item:hover,
.nav-links .nav-dropdown-toggle.nav-item:hover,
.nav-links .nav-dropdown-toggle.nav-item.active {
    border-color: rgba(94, 231, 255, 0.34);
    background: rgba(94, 231, 255, 0.065);
}

.site-intro {
    background: #06090f;
}

.site-intro-grid {
    background-image:
        linear-gradient(rgba(94, 231, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 231, 255, 0.04) 1px, transparent 1px);
}

/* =========================================================
   2026-10-01 FULL-PAGE VISUAL PASS
   Restores section color breaks and gives every section its
   own visual identity while keeping the shared cyan theme.
   ========================================================= */

/* Shared section atmosphere */
.about-section,
.projects-section,
.skills-section,
.experience-section,
.contact-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid rgba(94, 231, 255, 0.09);
}

.about-section::before,
.projects-section::before,
.skills-section::before,
.experience-section::before,
.contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

/* Bring back clear color breaks between major sections */
.about-section {
    background: #09111a !important;
}
.about-section::before {
    background:
        radial-gradient(circle at 8% 12%, rgba(94, 231, 255, 0.085), transparent 28%),
        linear-gradient(90deg, rgba(94,231,255,0.025) 1px, transparent 1px),
        linear-gradient(rgba(94,231,255,0.025) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.projects-section {
    background: #05080d !important;
}
.projects-section::before {
    background:
        radial-gradient(circle at 88% 22%, rgba(59, 130, 246, 0.08), transparent 30%),
        radial-gradient(circle at 12% 80%, rgba(94, 231, 255, 0.055), transparent 24%);
}

.skills-section {
    background: #0b121b !important;
}
.skills-section::before {
    background:
        linear-gradient(135deg, rgba(94, 231, 255, 0.035), transparent 32%),
        radial-gradient(circle at 92% 65%, rgba(94, 231, 255, 0.065), transparent 28%);
}

.experience-section {
    background: #060a11 !important;
}
.experience-section::before {
    background:
        linear-gradient(90deg, transparent 0 72%, rgba(94, 231, 255, 0.025) 72% 72.1%, transparent 72.1%),
        radial-gradient(circle at 15% 30%, rgba(59, 130, 246, 0.065), transparent 28%);
}

.contact-section {
    background:
        radial-gradient(circle at 72% 38%, rgba(94, 231, 255, 0.11), transparent 30%),
        linear-gradient(145deg, #09121c 0%, #06090f 58%, #07111a 100%) !important;
}

/* Cyan section marker line */
.section-header::before,
.contact-left::before {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin-bottom: 20px;
    background: var(--cyan);
    box-shadow: 0 0 18px rgba(94, 231, 255, 0.35);
}

/* ABOUT: turn the facts into interactive dashboard-like modules */
.about-facts {
    gap: 12px;
    border: 0;
}

.fact {
    position: relative;
    padding: 26px !important;
    border: 1px solid rgba(255, 255, 255, 0.075) !important;
    border-radius: 14px;
    background: rgba(16, 23, 34, 0.72);
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.fact::after {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: var(--cyan);
    opacity: 0;
    transform: scaleY(.3);
    transition: opacity .3s ease, transform .3s ease;
}

.fact:hover {
    transform: translateY(-5px);
    border-color: rgba(94, 231, 255, 0.30) !important;
    background: rgba(18, 29, 43, 0.88);
}

.fact:hover::after {
    opacity: 1;
    transform: scaleY(1);
}

.about-large span {
    text-shadow: 0 0 28px rgba(94, 231, 255, 0.13);
}

/* PROJECTS: each project now feels like a feature panel */
.project-list {
    border-top: 0;
    display: grid;
    gap: 14px;
}

.project-row {
    position: relative;
    overflow: hidden;
    padding: 42px 30px;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 16px;
    background: rgba(12, 18, 27, 0.78);
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.project-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--cyan);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .35s ease;
}

.project-row::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    top: -110px;
    border-radius: 50%;
    background: rgba(94, 231, 255, 0.055);
    filter: blur(18px);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.project-row:hover {
    padding: 42px 30px;
    transform: translateY(-5px);
    border-color: rgba(94, 231, 255, 0.30);
    background: rgba(16, 24, 35, 0.95);
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.project-row:hover::before {
    transform: scaleY(1);
}

.project-row:hover::after {
    opacity: 1;
}

.project-technologies span {
    border-radius: 999px;
    background: rgba(94, 231, 255, 0.025);
}

/* SKILLS: add stronger structure and a subtle active glow */
.skills-highlight span {
    border-radius: 999px;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.skills-highlight span:hover {
    transform: translateY(-3px);
    background: rgba(94, 231, 255, 0.10);
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
}

.skills-accordion {
    border-top: 0;
    display: grid;
    gap: 10px;
}

.skill-accordion-item {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 14px;
    background: rgba(13, 20, 30, 0.68);
}

.skill-accordion-item.active {
    border-color: rgba(94, 231, 255, 0.28);
    background: rgba(15, 27, 39, 0.90);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.skill-accordion-toggle {
    padding: 28px 24px;
}

.skill-accordion-content {
    padding: 0 24px 30px 114px;
}

/* EXPERIENCE: card-like rows instead of a flat list */
.experience-list {
    border-top: 0;
    display: grid;
    gap: 14px;
}

.experience-item {
    position: relative;
    padding: 42px 30px;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 16px;
    background: rgba(15, 22, 32, 0.74);
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.experience-item:hover {
    transform: translateX(6px);
    border-color: rgba(94, 231, 255, 0.27);
    background: rgba(18, 28, 40, 0.90);
}

.experience-number {
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.experience-skills span {
    border-radius: 999px;
}

/* CONTACT: make the finish of the page feel intentional */
.contact-section::after {
    content: "</>";
    position: absolute;
    right: 5%;
    bottom: 2%;
    z-index: -1;
    color: rgba(94, 231, 255, 0.035);
    font-size: clamp(140px, 24vw, 360px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -20px;
}

.contact-links {
    gap: 10px;
}

.contact-links a {
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 10px;
    background: rgba(13, 20, 30, 0.65);
}

.contact-links a:hover {
    padding-left: 24px;
    border-color: rgba(94, 231, 255, 0.30);
    background: rgba(94, 231, 255, 0.055);
}

/* Gentle reveal as the visitor reaches later sections. Supported
   browsers animate it; others simply show the content normally. */
@supports (animation-timeline: view()) {
    .about-section .section-header,
    .about-layout,
    .about-facts,
    .projects-section .section-header,
    .project-row,
    .skills-section .section-header,
    .skills-highlight,
    .skill-accordion-item,
    .experience-section .section-header,
    .experience-item,
    .contact-left,
    .contact-right {
        animation: portfolio-section-reveal both;
        animation-timeline: view();
        animation-range: entry 8% cover 27%;
    }
}

@keyframes portfolio-section-reveal {
    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

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

    .project-row,
    .project-row:hover,
    .experience-item {
        padding: 30px 20px;
    }

    .skill-accordion-content {
        padding: 0 20px 26px;
    }
}

@media (max-width: 520px) {
    .about-facts {
        grid-template-columns: 1fr;
    }
}