/* =========================================================
   PRASHANT KUMAR — GITHUB PAGES PORTFOLIO
   ========================================================= */


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

:root {

    --bg: #03060b;
    --bg-soft: #071018;

    --card: rgba(17, 23, 31, 0.68);
    --card-hover: rgba(25, 34, 45, 0.84);

    --text: #f4f7fb;
    --muted: #8795a9;
    --muted-light: #a9b5c5;
    --muted-dark: #59687c;

    --accent: #42d9ff;
    --accent-soft: rgba(66, 217, 255, 0.08);
    --accent-border: rgba(66, 217, 255, 0.34);

    --green: #57e9a4;

    --border: rgba(255, 255, 255, 0.10);
    --border-light: rgba(255, 255, 255, 0.15);

    --shadow-color: rgba(0, 0, 0, 0.30);

    --max-width: 1150px;

    --ease:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    color-scheme:
        dark;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

html.light-theme {

    --bg: #eef4f8;
    --bg-soft: #e5edf3;

    --card: rgba(255, 255, 255, 0.76);
    --card-hover: rgba(255, 255, 255, 0.94);

    --text: #0b1624;

    --muted: #5e6d7e;
    --muted-light: #415267;
    --muted-dark: #718092;

    --accent: #009dcc;
    --accent-soft: rgba(0, 157, 204, 0.08);
    --accent-border: rgba(0, 157, 204, 0.30);

    --green: #159b67;

    --border: rgba(8, 27, 45, 0.11);
    --border-light: rgba(8, 27, 45, 0.15);

    --shadow-color: rgba(20, 45, 70, 0.12);

    color-scheme:
        light;
}


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

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;
}


html {

    scroll-behavior:
        smooth;
}


body {

    min-height:
        100vh;

    overflow-x:
        hidden;

    color:
        var(--text);

    background:

        radial-gradient(
            circle at 10% 15%,
            rgba(0, 207, 255, 0.055),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 45%,
            rgba(85, 64, 255, 0.055),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            var(--bg-soft),
            var(--bg) 46%,
            var(--bg-soft)
        );

    background-attachment:
        fixed;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:
        1.6;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}


body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        -3;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.032) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.032) 1px,
            transparent 1px
        );

    background-size:
        82px 82px;

    opacity:
        0.7;
}


html.light-theme body::before {

    background-image:

        linear-gradient(
            rgba(8, 27, 45, 0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(8, 27, 45, 0.035) 1px,
            transparent 1px
        );

    opacity:
        0.55;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


img {

    display:
        block;

    max-width:
        100%;
}


button {

    font:
        inherit;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip-link {

    position:
        fixed;

    top:
        12px;

    left:
        12px;

    z-index:
        5000;

    padding:
        10px 15px;

    color:
        #ffffff;

    background:
        #101820;

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

    border-radius:
        10px;

    transform:
        translateY(-150%);

    transition:
        transform 0.2s ease;
}


.skip-link:focus {

    transform:
        translateY(0);
}


:focus-visible {

    outline:
        2px solid
        var(--accent);

    outline-offset:
        4px;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.background-glow {

    position:
        fixed;

    width:
        600px;

    height:
        600px;

    border-radius:
        50%;

    filter:
        blur(120px);

    pointer-events:
        none;

    opacity:
        0.15;

    z-index:
        -2;
}


.glow-left {

    left:
        -420px;

    top:
        160px;

    background:
        #00cfff;
}


.glow-right {

    right:
        -430px;

    top:
        420px;

    background:
        #5540ff;
}


html.light-theme .background-glow {

    opacity:
        0.08;
}


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

.navbar {

    position:
        fixed;

    top:
        18px;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        min(
            1160px,
            calc(100% - 40px)
        );

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        0 18px 0 22px;

    background:

        linear-gradient(
            135deg,
            rgba(30, 40, 52, 0.74),
            rgba(13, 20, 29, 0.62)
        );

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

    border-radius:
        25px;

    backdrop-filter:
        blur(26px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(150%);

    box-shadow:

        0 20px 70px
        var(--shadow-color),

        inset 0 1px
        rgba(255, 255, 255, 0.10);

    z-index:
        1000;
}


html.light-theme .navbar {

    background:

        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(244, 248, 251, 0.78)
        );

    box-shadow:

        0 20px 60px
        rgba(21, 54, 84, 0.10),

        inset 0 1px
        rgba(255, 255, 255, 0.95);
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        16px;

    font-weight:
        800;
}


.logo-dot {

    width:
        11px;

    height:
        11px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:

        0 0 10px
        var(--accent),

        0 0 22px
        rgba(66, 217, 255, 0.50);
}


/* =========================================================
   NAV LINKS
   ========================================================= */

.nav-links {

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;
}


.nav-link {

    position:
        relative;

    padding:
        11px 13px;

    color:
        var(--muted-light);

    border-radius:
        15px;

    font-size:
        13px;

    font-weight:
        650;

    transition:
        color 0.3s var(--ease),
        background 0.3s var(--ease),
        transform 0.3s var(--ease);
}


.nav-link:hover {

    color:
        var(--text);

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

    transform:
        translateY(-1px);
}


html.light-theme .nav-link:hover {

    background:
        rgba(8, 27, 45, 0.045);
}


.nav-link.active {

    color:
        var(--text);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.05);
}


html.light-theme .nav-link.active {

    background:
        rgba(8, 27, 45, 0.055);

    border-color:
        rgba(8, 27, 45, 0.07);
}


.nav-link.active::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        5px;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 8px
        var(--accent);

    transform:
        translateX(-50%);
}


/* =========================================================
   NAV ACTIONS
   ========================================================= */

.navbar-actions {

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.nav-resume {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        42px;

    padding:
        0 16px;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #0fbad9,
            #1475ff
        );

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

    border-radius:
        999px;

    box-shadow:
        0 10px 30px
        rgba(0, 150, 255, 0.20);

    font-size:
        12px;

    font-weight:
        800;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.nav-resume:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(0, 150, 255, 0.28);
}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.theme-toggle {

    position:
        relative;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    color:
        var(--text);

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

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

    border-radius:
        14px;

    cursor:
        pointer;

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


.theme-toggle:hover {

    transform:
        translateY(-2px);

    background:
        rgba(66, 217, 255, 0.08);

    border-color:
        var(--accent-border);
}


.theme-icon {

    position:
        absolute;

    font-size:
        17px;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.theme-icon-sun {

    opacity:
        0;

    transform:
        rotate(-45deg)
        scale(0.7);
}


.theme-icon-moon {

    opacity:
        1;

    transform:
        scale(1);
}


html.light-theme .theme-icon-sun {

    opacity:
        1;

    transform:
        rotate(0)
        scale(1);
}


html.light-theme .theme-icon-moon {

    opacity:
        0;

    transform:
        rotate(45deg)
        scale(0.7);
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.menu-toggle {

    display:
        none;

    width:
        42px;

    height:
        42px;

    padding:
        9px;

    color:
        var(--text);

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

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

    border-radius:
        13px;

    cursor:
        pointer;

    flex-shrink:
        0;
}


.menu-toggle span {

    display:
        block;

    width:
        100%;

    height:
        2px;

    margin:
        5px 0;

    background:
        currentColor;

    border-radius:
        999px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


.menu-toggle.open span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}


.menu-toggle.open span:nth-child(2) {

    opacity:
        0;
}


.menu-toggle.open span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


.nav-overlay {

    display:
        none;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {

    position:
        relative;

    width:
        min(
            var(--max-width),
            calc(100% - 48px)
        );

    margin:
        0 auto;
}


.about-section,
.skills-section,
.projects-section,
.achievements-section,
.education-section,
.coding-section,
.contact-section {

    padding:
        95px 0;
}


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

.hero {

    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        1.08fr 0.92fr;

    align-items:
        center;

    gap:
        40px;

    padding:
        130px 0 90px;
}


.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        9px 15px;

    color:
        var(--accent);

    background:
        rgba(66, 217, 255, 0.06);

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

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.eyebrow span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 8px
        var(--accent);
}


.hero h1 {

    margin-top:
        30px;

    font-size:
        clamp(
            58px,
            6.3vw,
            94px
        );

    line-height:
        0.93;

    letter-spacing:
        -0.065em;

    font-weight:
        850;
}


.hero h1 strong {

    display:
        block;
}


.accent-text {

    color:
        var(--accent);
}


.hero-description {

    max-width:
        650px;

    margin-top:
        40px;

    color:
        var(--muted-light);

    font-size:
        16px;

    line-height:
        1.75;
}


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

.hero-buttons,
.project-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        11px;

    margin-top:
        30px;
}


.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        0 19px;

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

    border-radius:
        15px;

    font-size:
        13px;

    font-weight:
        750;

    transition:
        transform 0.3s var(--ease),
        background 0.3s var(--ease),
        border-color 0.3s var(--ease),
        box-shadow 0.3s var(--ease);
}


.button span {

    font-size:
        16px;
}


.button:hover {

    transform:
        translateY(-3px);
}


.button-primary {

    color:
        var(--text);

    background:

        linear-gradient(
            135deg,
            rgba(66, 217, 255, 0.15),
            rgba(66, 217, 255, 0.05)
        );

    border-color:
        rgba(66, 217, 255, 0.46);

    box-shadow:
        0 10px 30px
        rgba(0, 190, 255, 0.07);
}


.button-primary:hover {

    border-color:
        rgba(66, 217, 255, 0.72);

    box-shadow:
        0 15px 35px
        rgba(0, 190, 255, 0.13);
}


.button-secondary {

    color:
        var(--text);

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


.button-secondary:hover {

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

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


html.light-theme .button-secondary {

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


html.light-theme .button-secondary:hover {

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


/* =========================================================
   AVAILABILITY
   ========================================================= */

.availability {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        30px;

    color:
        var(--muted);

    font-size:
        13px;
}


.availability-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px
        rgba(80, 240, 160, 0.8);
}


.divider {

    width:
        1px;

    height:
        15px;

    background:
        var(--border);
}


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

.hero-visual {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.portrait-card {

    position:
        relative;

    width:
        min(
            440px,
            100%
        );

    aspect-ratio:
        0.86;

    padding:
        22px;

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

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

    border-radius:
        42px;

    transform:
        rotate(3deg);

    box-shadow:

        0 40px 110px
        rgba(0, 0, 0, 0.42),

        inset 0 1px
        rgba(255, 255, 255, 0.11);

    transition:
        transform 0.5s var(--ease);
}


html.light-theme .portrait-card {

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

    border-color:
        rgba(8, 27, 45, 0.11);

    box-shadow:
        0 40px 90px
        rgba(24, 57, 85, 0.15);
}


.portrait-card:hover {

    transform:
        rotate(0deg)
        translateY(-7px);
}


.portrait-inner {

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    border-radius:
        31px;

    background:
        #e9ecef;
}


.portrait-inner img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.floating-card {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px 15px;

    background:
        rgba(20, 28, 38, 0.75);

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

    border-radius:
        17px;

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.28);
}


html.light-theme .floating-card {

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

    border-color:
        rgba(8, 27, 45, 0.12);
}


.floating-card strong,
.floating-card small {

    display:
        block;
}


.floating-card strong {

    font-size:
        13px;
}


.floating-card small {

    color:
        var(--muted);

    font-size:
        10px;
}


.floating-icon {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--accent);

    background:
        rgba(66, 217, 255, 0.08);

    border-radius:
        11px;
}


.floating-ai {

    top:
        25%;

    right:
        -75px;
}


.floating-code {

    bottom:
        23%;

    left:
        -65px;
}


/* =========================================================
   SCROLL TO EXPLORE
   ========================================================= */

.scroll-indicator {

    position:
        absolute;

    left:
        50%;

    bottom:
        22px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.08em;

    white-space:
        nowrap;

    transform:
        translateX(-50%);

    z-index:
        5;
}


.scroll-indicator i {

    display:
        block;

    width:
        1px;

    height:
        40px;

    background:

        linear-gradient(
            to bottom,
            var(--accent),
            transparent
        );

    opacity:
        0.9;

    transform-origin:
        top;

    animation:
        scrollLine 2s ease-in-out infinite;
}


@keyframes scrollLine {

    0%,
    100% {

        transform:
            scaleY(0.65);

        opacity:
            0.45;
    }


    50% {

        transform:
            scaleY(1);

        opacity:
            1;
    }

}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-heading {

    width:
        100%;

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;
}


.skills-section,
.projects-section,
.achievements-section,
.education-section,
.coding-section,
.contact-section {

    text-align:
        center;
}


.section-kicker {

    margin-top:
        26px;

    color:
        var(--muted);

    font-size:
        15px;
}


.section-heading h2,
.skills-section h2,
.projects-section h2,
.achievements-section h2,
.education-section h2,
.coding-section h2,
.contact-header h2 {

    margin-top:
        45px;

    font-size:
        clamp(
            46px,
            5.7vw,
            78px
        );

    line-height:
        1;

    letter-spacing:
        -0.055em;
}


.section-heading h2 {

    margin-top:
        22px;
}


.section-heading h2 span,
.skills-section h2 span,
.projects-section h2 span,
.achievements-section h2 span,
.education-section h2 span,
.coding-section h2 span,
.contact-header h2 span {

    color:
        var(--accent);
}


.section-heading > p:last-child,
.section-description,
.contact-description {

    max-width:
        720px;

    margin:
        28px auto 0;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.75;
}


/* =========================================================
   LIQUID GLASS SECTION LABELS
   ========================================================= */

.section-label {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        10px 17px;

    color:
        var(--accent);

    background:

        linear-gradient(
            135deg,
            rgba(66, 217, 255, 0.12),
            rgba(255, 255, 255, 0.045)
        );

    border:
        1px solid
        rgba(66, 217, 255, 0.34);

    border-radius:
        999px;

    backdrop-filter:
        blur(18px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(160%);

    box-shadow:

        inset 0 1px
        rgba(255, 255, 255, 0.12),

        inset 0 -1px
        rgba(0, 0, 0, 0.08),

        0 8px 25px
        rgba(0, 0, 0, 0.10),

        0 0 20px
        rgba(66, 217, 255, 0.035);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    line-height:
        1;

    overflow:
        hidden;

    isolation:
        isolate;
}


.section-label::before {

    content:
        "";

    position:
        absolute;

    top:
        1px;

    left:
        12%;

    width:
        76%;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.42),
            transparent
        );

    opacity:
        0.75;

    pointer-events:
        none;
}


.section-label::after {

    content:
        "";

    position:
        absolute;

    width:
        70px;

    height:
        30px;

    top:
        -18px;

    right:
        10px;

    border-radius:
        50%;

    background:
        rgba(66, 217, 255, 0.10);

    filter:
        blur(14px);

    pointer-events:
        none;

    z-index:
        -1;
}


html:not(.light-theme) .section-label {

    background:

        linear-gradient(
            135deg,
            rgba(66, 217, 255, 0.12),
            rgba(31, 42, 54, 0.42)
        );
}


html.light-theme .section-label {

    color:
        #009dcc;

    background:

        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.80),
            rgba(224, 244, 250, 0.60)
        );

    border-color:
        rgba(0, 157, 204, 0.28);

    box-shadow:

        inset 0 1px
        rgba(255, 255, 255, 0.92),

        inset 0 -1px
        rgba(8, 27, 45, 0.035),

        0 10px 28px
        rgba(32, 71, 99, 0.08),

        0 0 20px
        rgba(0, 157, 204, 0.035);
}


.section-label:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(66, 217, 255, 0.48);

    box-shadow:

        inset 0 1px
        rgba(255, 255, 255, 0.14),

        0 12px 30px
        rgba(0, 0, 0, 0.14),

        0 0 26px
        rgba(66, 217, 255, 0.07);
}


/* =========================================================
   GLASS CARDS
   ========================================================= */

.glass-card {

    position:
        relative;

    background:

        linear-gradient(
            135deg,
            rgba(28, 38, 49, 0.68),
            rgba(12, 18, 26, 0.58)
        );

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

    box-shadow:

        0 25px 70px
        var(--shadow-color),

        inset 0 1px
        rgba(255, 255, 255, 0.075);

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);

    transition:

        transform 0.4s var(--ease),
        border-color 0.4s var(--ease),
        background 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}


html.light-theme .glass-card {

    background:

        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.80),
            rgba(241, 247, 251, 0.63)
        );

    box-shadow:

        0 25px 65px
        rgba(21, 52, 78, 0.09),

        inset 0 1px
        rgba(255, 255, 255, 0.93);
}


.glass-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(66, 217, 255, 0.21);

    box-shadow:

        0 32px 85px
        var(--shadow-color),

        0 0 30px
        rgba(66, 217, 255, 0.025);
}


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

.about-grid {

    display:
        grid;

    grid-template-columns:
        1.6fr 0.9fr;

    gap:
        22px;

    margin-top:
        55px;

    text-align:
        left;
}


.about-main {

    min-height:
        440px;

    padding:
        46px;

    border-radius:
        30px;

    text-align:
        center;
}


.card-icon {

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 30px;

    color:
        var(--accent);

    background:
        rgba(66, 217, 255, 0.06);

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

    border-radius:
        16px;
}


.about-main h3 {

    font-size:
        30px;
}


.about-main p {

    max-width:
        700px;

    margin:
        22px auto 0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.9;
}


.about-stats {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        22px;
}


.stat-card {

    min-height:
        210px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-end;

    padding:
        30px;

    border-radius:
        28px;

    text-align:
        center;
}


.stat-card strong {

    font-size:
        38px;

    line-height:
        1;
}


.stat-card span {

    margin-top:
        14px;

    color:
        var(--muted);

    font-size:
        13px;
}


/* =========================================================
   JOURNEY
   ========================================================= */

.journey {

    margin-top:
        85px;
}


.journey-heading {

    max-width:
        760px;

    margin:
        0 auto;

    text-align:
        center;
}


.journey-heading h3 {

    margin-top:
        22px;

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.journey-heading h3 span {
    color:
        var(--accent);
}


.timeline {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

    margin-top:
        50px;

    padding-left:
        42px;

    text-align:
        left;
}


.timeline::before {

    content:
        "";

    position:
        absolute;

    left:
        12px;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:

        linear-gradient(
            to bottom,
            var(--accent),
            transparent
        );
}


.timeline-item {

    display:
        grid;

    grid-template-columns:
        50px 1fr;

    gap:
        22px;
}


.timeline-marker {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--accent);

    background:
        rgba(66, 217, 255, 0.08);

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

    border-radius:
        50%;

    font-size:
        10px;

    font-weight:
        800;
}


.timeline-content {

    padding:
        30px;

    border-radius:
        23px;
}


.timeline-label {

    color:
        var(--accent);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.timeline-content h4 {

    margin-top:
        10px;

    font-size:
        22px;
}


.timeline-content p {

    max-width:
        700px;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.75;
}


/* =========================================================
   SKILLS
   ========================================================= */

.skills-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        55px;

    text-align:
        left;
}


.skill-card {

    position:
        relative;

    min-height:
        230px;

    padding:
        30px;

    border-radius:
        26px;

    overflow:
        hidden;
}


.skill-number {

    position:
        absolute;

    top:
        24px;

    right:
        25px;

    color:
        var(--muted-dark);

    font-size:
        11px;
}


.skill-icon {

    width:
        45px;

    height:
        45px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--accent);

    background:
        rgba(66, 217, 255, 0.05);

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

    border-radius:
        14px;
}


.skill-card h3 {

    margin-top:
        32px;

    font-size:
        20px;
}


.skill-card p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        13px;
}


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

.projects-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        25px;

    margin-top:
        55px;

    text-align:
        left;
}


.project-card {

    display:
        grid;

    grid-template-columns:
        1.15fr 0.85fr;

    min-height:
        500px;

    overflow:
        hidden;

    position:
        relative;

    background:

        linear-gradient(
            135deg,
            rgba(26, 36, 47, 0.72),
            rgba(9, 15, 22, 0.64)
        );

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

    border-radius:
        30px;

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);

    transition:
        transform 0.45s var(--ease),
        border-color 0.45s var(--ease),
        box-shadow 0.45s var(--ease);
}


html.light-theme .project-card {

    background:

        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.80),
            rgba(239, 246, 250, 0.65)
        );
}


.project-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(66, 217, 255, 0.22);

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, 0.22);
}


.project-preview {

    position:
        relative;

    min-height:
        500px;

    overflow:
        hidden;

    background:
        #10151c;
}


.project-preview img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.7s var(--ease);
}


.project-card:hover .project-preview img {

    transform:
        scale(1.035);
}


.project-preview-contain {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        22px;

    background:

        radial-gradient(
            circle at 30% 40%,
            rgba(0, 205, 255, 0.10),
            transparent 42%
        ),

        #070b11;
}


.project-preview-contain img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    border-radius:
        13px;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.28);

    transition:
        transform 0.7s var(--ease);
}


.project-card:hover
.project-preview-contain img {

    transform:
        scale(1.018);
}


html.light-theme .project-preview {

    background:
        #dfeaf0;
}


html.light-theme .project-preview-contain {

    background:

        radial-gradient(
            circle at 30% 40%,
            rgba(0, 157, 204, 0.06),
            transparent 42%
        ),

        #e9f1f5;
}


.project-preview-label {

    position:
        absolute;

    left:
        22px;

    top:
        22px;

    z-index:
        4;

    padding:
        9px 13px;

    color:
        var(--accent);

    background:
        rgba(8, 15, 21, 0.76);

    border:
        1px solid
        rgba(66, 217, 255, 0.22);

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.project-info {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

    width:
        100%;

    padding:
        55px 45px;
}


.project-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


.project-number {

    color:
        var(--muted-dark);

    font-size:
        13px;

    font-weight:
        700;
}


.status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 11px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        800;
}


.status.live {

    color:
        var(--green);

    background:
        rgba(87, 233, 164, 0.05);

    border:
        1px solid
        rgba(87, 233, 164, 0.22);
}


.status i {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        currentColor;

    box-shadow:
        0 0 8px
        currentColor;
}


.project-info h3 {

    margin-top:
        34px;

    font-size:
        clamp(
            30px,
            3vw,
            42px
        );

    line-height:
        1.05;

    letter-spacing:
        -0.045em;
}


.project-info > p {

    width:
        100%;

    max-width:
        100%;

    margin-top:
        24px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   PROJECT TECHNOLOGY
   ========================================================= */

.tech-list {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        stretch;

    gap:
        8px;

    width:
        100%;

    margin-top:
        23px;
}


.tech-item,
.tech-list > span {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-width:
        0;

    max-width:
        100%;

    min-height:
        42px;

    padding:
        7px 10px;

    color:
        var(--muted-light);

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

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

    border-radius:
        9px;

    font-size:
        10px;

    font-weight:
        650;

    line-height:
        1.25;

    text-align:
        center;

    white-space:
        normal;

    overflow-wrap:
        anywhere;

    word-break:
        normal;

    flex:
        0 1 auto;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.tech-item:hover,
.tech-list > span:hover {

    border-color:
        var(--accent-border);

    background:
        rgba(66, 217, 255, 0.055);

    transform:
        translateY(-1px);
}


.tech-item img {

    flex:
        0 0 auto;

    width:
        28px;

    height:
        28px;

    max-width:
        28px;

    max-height:
        28px;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    opacity:
        1;

    filter:
        none !important;

    background:
        transparent;

    border:
        0;

    border-radius:
        0;
}


.tech-name {

    display:
        block;

    min-width:
        0;

    max-width:
        100%;

    overflow-wrap:
        anywhere;

    word-break:
        normal;

    line-height:
        1.25;
}


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

.project-buttons {

    width:
        100%;

    margin-top:
        28px;
}


.project-buttons .button {

    min-width:
        118px;
}


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

.projects-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        38px;

    text-align:
        center;
}


.projects-footer p {

    color:
        var(--muted);

    font-size:
        14px;
}


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

.more-projects {

    min-height:
        190px;

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    padding:
        34px 38px;

    border-radius:
        28px;

    text-align:
        left;
}


.more-projects-icon {

    flex-shrink:
        0;

    width:
        68px;

    height:
        68px;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(66, 217, 255, 0.06);

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

    border-radius:
        20px;

    font-size:
        30px;
}


.more-projects-label {

    color:
        var(--accent);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.12em;
}


.more-projects h3 {

    margin-top:
        8px;

    font-size:
        25px;
}


.more-projects p {

    max-width:
        760px;

    margin-top:
        9px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.75;
}


/* =========================================================
   ACHIEVEMENTS
   ========================================================= */

.achievement-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        55px;
}


.achievement-card {

    min-height:
        190px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    border-radius:
        25px;

    text-align:
        center;
}


.achievement-card strong {

    color:
        var(--accent);

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    line-height:
        1;
}


.achievement-card span {

    margin-top:
        15px;

    color:
        var(--muted);

    font-size:
        13px;
}


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

.education-layout {

    display:
        grid;

    grid-template-columns:
        0.95fr 1.05fr;

    gap:
        22px;

    margin-top:
        55px;

    text-align:
        left;
}


.education-card,
.certifications-card {

    padding:
        38px;

    border-radius:
        28px;
}


.education-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    flex-wrap:
        wrap;
}


.education-badge {

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.10em;
}


.education-year {

    color:
        var(--muted-dark);

    font-size:
        12px;

    font-weight:
        700;
}


.education-card h3 {

    margin-top:
        35px;

    font-size:
        28px;

    line-height:
        1.15;
}


.education-institute {

    margin-top:
        13px;

    color:
        var(--muted);

    font-size:
        15px;
}


.education-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        30px;
}


.education-meta span {

    padding:
        8px 11px;

    color:
        var(--muted-light);

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

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

    border-radius:
        10px;

    font-size:
        11px;
}


.certificate-list {

    display:
        grid;

    gap:
        15px;

    margin-top:
        28px;
}


.certificate-item {

    padding-bottom:
        15px;

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


.certificate-item:last-child {

    border-bottom:
        0;

    padding-bottom:
        0;
}


.certificate-item span {

    display:
        block;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        700;
}


.certificate-item small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================================================
   CODING PROFILES
   ========================================================= */

.coding-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        55px;

    text-align:
        left;
}


.coding-card {

    position:
        relative;

    min-height:
        175px;

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    padding:
        28px;

    border-radius:
        25px;
}


.coding-logo {

    flex-shrink:
        0;

    width:
        68px;

    height:
        68px;

    display:
        grid;

    place-items:
        center;

    background:
        #ffffff;

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

    border-radius:
        19px;

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

    overflow:
        hidden;
}


.coding-logo img {

    width:
        44px;

    height:
        44px;

    max-width:
        44px;

    max-height:
        44px;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        none !important;

    opacity:
        1;
}


.coding-content {

    min-width:
        0;
}


.coding-platform {

    color:
        var(--accent);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.11em;
}


.coding-content h3 {

    margin-top:
        7px;

    font-size:
        21px;

    line-height:
        1.2;

    overflow-wrap:
        anywhere;
}


.coding-content p {

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        12px;
}


.coding-arrow {

    position:
        absolute;

    right:
        25px;

    top:
        24px;

    color:
        var(--muted-dark);

    font-size:
        18px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.coding-card:hover
.coding-arrow {

    color:
        var(--accent);

    transform:
        translate(
            3px,
            -3px
        );
}


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

.contact-header {

    width:
        100%;

    max-width:
        900px;

    margin:
        0 auto;

    text-align:
        center;
}


.contact-header .section-label {

    margin:
        0 auto;
}


.contact-header h2 {

    width:
        100%;

    margin:
        40px auto 0;

    text-align:
        center;
}


.contact-description {

    width:
        100%;

    max-width:
        780px;

    margin:
        28px auto 0;

    text-align:
        center;
}


.contact-layout {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        22px;

    margin-top:
        55px;

    text-align:
        left;
}


.contact-main {

    min-height:
        470px;

    padding:
        45px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border-radius:
        30px;
}


.contact-main-icon {

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        30px;

    color:
        var(--accent);

    background:
        rgba(66, 217, 255, 0.06);

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

    border-radius:
        17px;

    font-size:
        23px;
}


.contact-small-label {

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.10em;
}


.contact-main h3 {

    margin-top:
        16px;

    font-size:
        38px;
}


.contact-main >
p:not(.contact-small-label) {

    max-width:
        450px;

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;
}


.email-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        30px;

    color:
        var(--text);

    font-size:
        15px;

    font-weight:
        750;

    overflow-wrap:
        anywhere;
}


.email-link span {

    color:
        var(--accent);
}


.copy-email {

    width:
        fit-content;

    margin-top:
        18px;

    padding:
        9px 13px;

    color:
        var(--muted);

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

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

    border-radius:
        10px;

    cursor:
        pointer;

    font-size:
        11px;

    transition:
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}


.copy-email:hover {

    color:
        var(--text);

    border-color:
        var(--accent-border);

    background:
        rgba(66, 217, 255, 0.05);
}


/* =========================================================
   SOCIAL
   ========================================================= */

.social-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        16px;
}


.social-card {

    min-height:
        150px;

    padding:
        25px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border-radius:
        23px;
}


.social-icon {

    flex-shrink:
        0;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    background:
        #ffffff;

    border:
        1px solid
        rgba(66, 217, 255, 0.22);

    border-radius:
        14px;

    overflow:
        hidden;
}


.social-icon-image {

    padding:
        7px;
}


.social-icon-image img {

    width:
        32px;

    height:
        32px;

    max-width:
        32px;

    max-height:
        32px;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        none !important;

    opacity:
        1;
}


.social-card strong,
.social-card span {

    display:
        block;
}


.social-card strong {

    font-size:
        14px;
}


.social-card span {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        11px;

    overflow-wrap:
        anywhere;
}


.social-card b {

    margin-left:
        auto;

    align-self:
        flex-start;

    color:
        var(--muted-dark);

    font-size:
        16px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.social-card:hover b {

    color:
        var(--accent);

    transform:
        translate(
            3px,
            -3px
        );
}


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

.footer {

    width:
        min(
            var(--max-width),
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        55px 0 68px;

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

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

    color:
        var(--muted);
}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.footer-brand strong,
.footer-brand span {

    display:
        block;
}


.footer-brand strong {

    color:
        var(--text);

    font-size:
        17px;
}


.footer-brand span {

    margin-top:
        4px;

    font-size:
        13px;
}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        24px;
}


.footer-links a {

    color:
        var(--muted-light);

    font-size:
        14px;

    font-weight:
        650;

    transition:
        color 0.25s ease;
}


.footer-links a:hover {

    color:
        var(--accent);
}


.footer-bottom {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        28px;

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

    font-size:
        13px;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {

    position:
        fixed;

    left:
        50%;

    bottom:
        30px;

    z-index:
        4000;

    padding:
        12px 18px;

    color:
        var(--text);

    background:
        rgba(22, 31, 41, 0.92);

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

    border-radius:
        14px;

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translate(
            -50%,
            20px
        );

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


html.light-theme .toast {

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

    border-color:
        rgba(8, 27, 45, 0.12);
}


.toast.show {

    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-to-top {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    z-index:
        1000;

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--accent);

    background:
        rgba(20, 28, 38, 0.88);

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

    border-radius:
        16px;

    cursor:
        pointer;

    font-size:
        21px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(15px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


html.light-theme .back-to-top {

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


.back-to-top.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0);
}


.back-to-top:hover {

    transform:
        translateY(-4px);
}


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

.reveal {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .nav-resume {

        display:
            none;
    }


    .hero {

        grid-template-columns:
            1fr;

        text-align:
            center;

        padding-top:
            150px;
    }


    .hero-content {

        text-align:
            center;
    }


    .eyebrow {

        margin:
            0 auto;
    }


    .hero-description {

        margin:
            40px auto 0;
    }


    .hero-buttons,
    .availability {

        justify-content:
            center;
    }


    .hero-visual {

        margin-top:
            35px;
    }


    .about-grid {

        grid-template-columns:
            1fr;
    }


    .skills-grid {

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


    .achievement-grid {

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


    .education-layout {

        grid-template-columns:
            1fr;
    }


    .contact-layout {

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILE MENU RESUME LINK
   ========================================================= */

.mobile-resume-link {

    display:
        none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .navbar {

        width:
            calc(100% - 20px);

        top:
            10px;

        min-height:
            62px;

        padding:
            0 10px 0 15px;

        border-radius:
            20px;
    }


    .logo {

        margin-right:
            auto;

        font-size:
            14px;

        order:
            1;
    }


    /*
       IMPORTANT:
       HTML order is:
       logo
       nav
       navbar-actions
       menu-toggle

       Mobile visual order becomes:
       logo → theme → hamburger
    */

    .navbar-actions {

        gap:
            5px;

        order:
            2;

        flex-shrink:
            0;
    }


    .mobile-resume-link {

        display:
            block;

        margin-top:
            5px;

        color:
            #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #0fbad9,
                #1475ff
            );

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

        border-radius:
            14px;

        text-align:
            center;

        font-weight:
            800;
    }


    html.light-theme .mobile-resume-link {

        color:
            #ffffff !important;
    }


    .menu-toggle {

        display:
            block;

        order:
            3;

        flex-shrink:
            0;
    }


    .theme-toggle {

        width:
            38px;

        height:
            38px;

        border-radius:
            12px;
    }


    .nav-links {

        position:
            absolute;

        left:
            0;

        right:
            0;

        top:
            calc(100% + 10px);

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            5px;

        padding:
            10px;

        background:
            rgba(
                18,
                26,
                35,
                0.96
            );

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

        border-radius:
            19px;

        box-shadow:
            0 25px 60px
            rgba(
                0,
                0,
                0,
                0.30
            );

        backdrop-filter:
            blur(25px);

        -webkit-backdrop-filter:
            blur(25px);

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateY(-8px);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;

        z-index:
            1001;
    }


    html.light-theme .nav-links {

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


    .nav-links.open {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            translateY(0);
    }


    .nav-link {

        width:
            100%;

        padding:
            12px;

        text-align:
            center;
    }


    .nav-overlay {

        position:
            fixed;

        inset:
            0;

        display:
            block;

        z-index:
            998;

        background:
            rgba(
                0,
                0,
                0,
                0.36
            );

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
    }


    .nav-overlay.open {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;
    }


    body.menu-open {

        overflow:
            hidden;
    }


    .section {

        width:
            calc(100% - 24px);
    }


    .hero {

        min-height:
            auto;

        padding:
            135px 0 115px;

        gap:
            65px;
    }


    .hero h1 {

        font-size:
            clamp(
                50px,
                14.5vw,
                78px
            );
    }


    .hero-description {

        font-size:
            14px;
    }


    .hero-buttons {

        flex-direction:
            column;

        width:
            min(
                100%,
                430px
            );

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .hero-buttons .button {

        width:
            100%;
    }


    .availability {

        justify-content:
            center;
    }


    .portrait-card {

        width:
            min(
                335px,
                82vw
            );
    }


    .floating-ai {

        right:
            -8px;
    }


    .floating-code {

        left:
            -8px;
    }


    /* SCROLL INDICATOR */

    .scroll-indicator {

        left:
            50%;

        bottom:
            20px;

        transform:
            translateX(-50%);

        font-size:
            9px;
    }


    .about-section,
    .skills-section,
    .projects-section,
    .achievements-section,
    .education-section,
    .coding-section,
    .contact-section {

        padding:
            80px 0;
    }


    .section-heading h2,
    .skills-section h2,
    .projects-section h2,
    .achievements-section h2,
    .education-section h2,
    .coding-section h2,
    .contact-header h2 {

        font-size:
            clamp(
                44px,
                12vw,
                66px
            );
    }


    .section-heading > p:last-child,
    .section-description,
    .contact-description {

        font-size:
            15px;

        line-height:
            1.7;
    }


    .section-label {

        min-height:
            36px;

        padding:
            9px 14px;

        font-size:
            10px;
    }


    .about-main {

        padding:
            30px;

        text-align:
            center;
    }


    .about-stats {

        gap:
            10px;
    }


    .stat-card {

        min-height:
            165px;

        padding:
            20px;
    }


    .timeline {

        padding-left:
            0;

        text-align:
            left;
    }


    .timeline::before {

        display:
            none;
    }


    .timeline-item {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .timeline-content {

        padding:
            24px;
    }


    .skills-grid {

        grid-template-columns:
            1fr;

        margin-top:
            45px;
    }


    .achievement-grid {

        grid-template-columns:
            1fr;
    }


    .education-card,
    .certifications-card {

        padding:
            30px;
    }


    /* PROJECT */

    .project-card {

        grid-template-columns:
            1fr;

        min-height:
            0;
    }


    .project-preview {

        min-height:
            310px;
    }


    .project-preview-contain {

        min-height:
            340px;

        padding:
            18px;
    }


    .project-info {

        min-width:
            0;

        width:
            100%;

        padding:
            35px 25px 30px;
    }


    .project-info h3 {

        font-size:
            clamp(
                28px,
                8vw,
                38px
            );
    }


    .project-info > p {

        width:
            100%;

        max-width:
            100%;
    }


    /* =====================================================
       MOBILE PROJECT TECHNOLOGIES
       ===================================================== */

    .tech-list {

        display:
            grid;

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

        gap:
            8px;

        width:
            100%;

        margin-top:
            22px;
    }


    .tech-item,
    .tech-list > span {

        width:
            100%;

        min-width:
            0;

        min-height:
            50px;

        max-width:
            100%;

        padding:
            7px 5px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        flex:
            none;

        font-size:
            9px;

        line-height:
            1.2;

        white-space:
            normal;

        overflow:
            hidden;

        overflow-wrap:
            anywhere;

        word-break:
            normal;

        text-align:
            center;
    }


    .tech-item img {

        flex:
            0 0 auto;

        width:
            27px;

        height:
            27px;

        max-width:
            27px;

        max-height:
            27px;

        object-fit:
            contain;

        object-position:
            center;
    }


    .tech-name {

        display:
            block;

        width:
            100%;

        min-width:
            0;

        max-width:
            100%;

        overflow-wrap:
            anywhere;

        white-space:
            normal;

        text-align:
            center;
    }


    .project-buttons {

        flex-direction:
            column;

        width:
            100%;
    }


    .project-buttons .button {

        width:
            100%;
    }


    /* MORE PROJECTS */

    .more-projects {

        flex-direction:
            column;

        align-items:
            center;

        padding:
            30px 24px;

        text-align:
            center;
    }


    .projects-footer {

        flex-direction:
            column;
    }


    /* CODING */

    .coding-grid {

        grid-template-columns:
            1fr;

        margin-top:
            50px;
    }


    .coding-card {

        min-height:
            145px;

        padding:
            22px;
    }


    .coding-logo {

        width:
            58px;

        height:
            58px;

        border-radius:
            17px;
    }


    .coding-logo img {

        width:
            38px;

        height:
            38px;

        max-width:
            38px;

        max-height:
            38px;
    }


    .coding-content h3 {

        font-size:
            18px;
    }


    /* CONTACT */

    .contact-header {

        width:
            100%;

        max-width:
            100%;
    }


    .contact-header h2 {

        width:
            100%;

        margin:
            35px auto 0;

        text-align:
            center;
    }


    .contact-description {

        width:
            100%;

        max-width:
            600px;

        margin-left:
            auto;

        margin-right:
            auto;

        text-align:
            center;
    }


    .contact-main {

        min-height:
            400px;

        padding:
            30px;
    }


    .social-grid {

        grid-template-columns:
            1fr;
    }


    .social-card {

        min-height:
            120px;
    }


    /* FOOTER */

    .footer {

        width:
            calc(100% - 24px);

        flex-direction:
            column;

        text-align:
            center;

        padding:
            44px 0 52px;
    }


    .footer-brand {

        justify-content:
            center;
    }


    .footer-links {

        gap:
            16px;
    }


    .footer-links a {

        font-size:
            13px;
    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            8px;

        text-align:
            center;

        font-size:
            11px;
    }


    .back-to-top {

        right:
            16px;

        bottom:
            16px;

        width:
            46px;

        height:
            46px;

        border-radius:
            14px;

        font-size:
            19px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .navbar {

        width:
            calc(100% - 16px);

        padding:
            0 8px 0 13px;
    }


    .logo {

        font-size:
            13px;
    }


    .theme-toggle {

        width:
            34px;

        height:
            34px;
    }


    .menu-toggle {

        width:
            38px;

        height:
            38px;
    }


    .hero {

        padding-top:
            125px;

        padding-bottom:
            105px;
    }


    .hero h1 {

        font-size:
            clamp(
                46px,
                14vw,
                68px
            );
    }


    .hero-description {

        font-size:
            14px;
    }


    .hero-buttons {

        width:
            100%;
    }


    .floating-card {

        padding:
            8px 10px;
    }


    .floating-ai {

        right:
            -5px;
    }


    .floating-code {

        left:
            -5px;
    }


    .scroll-indicator {

        left:
            50%;

        bottom:
            18px;

        transform:
            translateX(-50%);

        font-size:
            8px;
    }


    .section-label {

        min-height:
            34px;

        padding:
            8px 13px;

        font-size:
            9px;
    }


    .project-preview {

        min-height:
            285px;
    }


    .project-preview-contain {

        min-height:
            300px;

        padding:
            14px;
    }


    .project-preview-label {

        top:
            16px;

        left:
            16px;

        padding:
            8px 11px;

        font-size:
            8px;
    }


    /* =====================================================
       VERY SMALL PHONE PROJECT GRID
       ===================================================== */

    .tech-list {

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

        gap:
            8px;
    }


    .tech-item,
    .tech-list > span {

        min-height:
            48px;

        padding:
            7px 6px;

        font-size:
            9px;

        gap:
            4px;
    }


    .tech-item img {

        width:
            25px;

        height:
            25px;

        max-width:
            25px;

        max-height:
            25px;
    }


    .more-projects h3 {

        font-size:
            22px;
    }


    .more-projects p {

        font-size:
            12px;
    }


    .contact-main h3 {

        font-size:
            31px;
    }


    .footer-links {

        gap:
            12px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    html {

        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }


    .scroll-indicator i {

        animation:
            none;
    }

}