/* =========================================================
   ANUJ BENDRE PORTFOLIO
   FINAL COMPLETE CSS
========================================================= */


/* ================= ROOT ================= */

:root {

    --bg: #0b1725;

    --bg-soft: #0f2033;

    --card: rgba(18,34,51,0.78);

    --cyan: #00e5ff;

    --green: #22c55e;

    --purple: #6366f1;

    --white: #f5f7fa;

    --text: #dce7f0;

    --muted: #9fb0c0;

    --border: rgba(170,210,235,0.14);

    --border-cyan:
        rgba(0,229,255,0.25);

    --max-width: 1200px;

    --transition: 0.3s ease;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background:

        radial-gradient(
            circle at 12% 20%,
            rgba(0,229,255,0.11),
            transparent 28%
        ),

        radial-gradient(
            circle at 88% 45%,
            rgba(99,102,241,0.09),
            transparent 30%
        ),

        linear-gradient(135deg, #0b1725 0%, #102238 52%, #0a1828 100%);

    color: var(--text);

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

    line-height: 1.6;

    overflow-x: hidden;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}


::selection {

    background: var(--cyan);

    color: #000;

}


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

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background-image:

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

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

    background-size: 45px 45px;

    mask-image:

        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

    z-index: -2;

}


/* ================= MOUSE GLOW ================= */

.mouse-glow {

    position: fixed;

    width: 350px;

    height: 350px;

    border-radius: 50%;

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

    filter: blur(70px);

    pointer-events: none;

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

    z-index: -1;

}


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

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    border-bottom:
        1px solid transparent;

    transition:
        var(--transition);

}


.navbar.scrolled {

    background:
        rgba(10,25,40,0.82);

    backdrop-filter:
        blur(18px);

    border-color:
        var(--border);

}


.nav-container {

    max-width:
        var(--max-width);

    margin: auto;

    padding:
        20px 24px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

}


.logo {

    font-family:
        "JetBrains Mono",
        monospace;

    font-weight: 700;

    font-size: 16px;

}


.logo span {

    color:
        var(--cyan);

}


.nav-menu {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-link {

    position: relative;

    color:
        var(--muted);

    font-size: 13px;

    transition:
        var(--transition);

}


.nav-link:hover,
.nav-link.active {

    color:
        var(--white);

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 1px;

    background:
        var(--cyan);

    transition:
        var(--transition);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


.menu-toggle {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

}


.menu-toggle span {

    width: 24px;

    height: 2px;

    background:
        var(--white);

}


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

.section {

    padding:
        120px 24px;

}


.section-container {

    max-width:
        var(--max-width);

    margin: auto;

}


.section-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 70px;

}


.section-number {

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 12px;

}


.section-label {

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 11px;

    letter-spacing: 2px;

}


.heading-line {

    height: 1px;

    flex: 1;

    max-width: 300px;

    background:
        var(--border);

}


.eyebrow {

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 11px;

    letter-spacing: 2px;

}


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

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    position: relative;

    padding-top: 120px;

}


.hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(0,229,255,0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,229,255,0.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );

}


.hero-container {

    width: 100%;

    max-width:
        var(--max-width);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 70px;

    align-items: center;

}


.availability {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 12px;

    margin-bottom: 28px;

    border:
        1px solid
        rgba(34,197,94,0.2);

    border-radius:
        999px;

    background:
        rgba(34,197,94,0.04);

    color:
        #9be7b3;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 11px;

}


.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px
        var(--green);

    animation:
        pulse 2s infinite;

}


.hero-intro {

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 13px;

}


.hero h1 {

    color:
        var(--white);

    font-size:
        clamp(54px,8vw,94px);

    line-height:
        0.95;

    letter-spacing:
        -5px;

    margin-bottom: 25px;

}


.hero h1 span {

    color:
        var(--cyan);

}


.typing-container {

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 30px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 18px;

}


.typing-prefix {

    color:
        var(--green);

}


.cursor {

    color:
        var(--cyan);

    animation:
        blink 1s infinite;

}


.hero-description {

    max-width:
        610px;

    color:
        var(--muted);

    font-size: 15px;

    line-height: 1.8;

    margin-top: 22px;

}


.hero-buttons {

    display: flex;

    gap: 12px;

    margin-top: 34px;

    flex-wrap: wrap;

}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        12px 18px;

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

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    transition:
        var(--transition);

}


.btn-primary {

    background:
        var(--cyan);

    color:
        #001014;

    border-color:
        var(--cyan);

}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 35px
        rgba(0,229,255,0.2);

}


.btn-secondary {

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

    color:
        var(--white);

}


.btn-secondary:hover {

    color:
        var(--cyan);

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

    transform:
        translateY(-3px);

}


.hero-socials {

    display: flex;

    gap: 22px;

    margin-top: 28px;

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 11px;

}


.hero-socials a:hover {

    color:
        var(--cyan);

}


/* =========================================================
   TERMINAL
========================================================= */

.terminal-wrapper {

    position: relative;

}


.terminal {

    background:
        rgba(7,11,15,0.92);

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

    border-radius:
        14px;

    overflow:
        hidden;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,0.45);

}


.terminal-header {

    height: 42px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        0 15px;

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

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.terminal-dots {

    display: flex;

    gap: 6px;

}


.terminal-dots span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background:
        #333;

}


.terminal-body {

    min-height:
        350px;

    padding:
        28px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 12px;

    line-height: 2;

}


.terminal-green {

    color:
        var(--green);

}


.terminal-output {

    padding-left:
        15px;

    color:
        var(--muted);

}


.terminal-success {

    padding-left:
        15px;

    color:
        var(--green);

}


.terminal-cursor {

    color:
        var(--cyan);

    animation:
        blink 1s infinite;

}


.floating-card {

    position: absolute;

    right: -25px;

    bottom: -25px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        14px 18px;

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

    border-radius:
        10px;

    background:
        rgba(10,15,21,0.92);

    backdrop-filter:
        blur(15px);

    animation:
        float 4s ease-in-out infinite;

}


.floating-icon {

    color:
        var(--cyan);

    font-size: 20px;

}


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

    display: block;

    font-family:
        "JetBrains Mono",
        monospace;

}


.floating-card strong {

    color:
        var(--white);

    font-size: 12px;

}


.floating-card small {

    color:
        var(--cyan);

    font-size: 9px;

}


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

.about {

    background:
        rgba(150,200,230,0.018);

}


.about-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

}


.about-content h2 {

    color:
        var(--white);

    font-size:
        clamp(36px,5vw,58px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin:
        18px 0 25px;

}


.about-content h2 span,
.skills-intro h2 span,
.projects-intro h2 span,
.experience-intro h2 span {

    color:
        var(--cyan);

}


.about-content p {

    color:
        var(--muted);

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 16px;

}


.about-quote {

    border-left:
        2px solid
        var(--cyan);

    padding-left: 18px;

    margin-top: 30px;

    color:
        var(--white);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 13px;

}


.about-quote span {

    color:
        var(--cyan);

    font-size: 22px;

}


.about-cards {

    display: grid;

    gap: 12px;

}


.about-card {

    padding: 22px;

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

    border-radius: 10px;

    background:
        var(--card);

    transition:
        var(--transition);

}


.about-card:hover {

    transform:
        translateX(7px);

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

}


.card-icon {

    color:
        var(--cyan);

    margin-bottom: 14px;

    font-family:
        "JetBrains Mono",
        monospace;

}


.about-card h3 {

    color:
        var(--white);

    font-size: 15px;

    margin-bottom: 7px;

}


.about-card p {

    color:
        var(--muted);

    font-size: 12px;

    margin: 0;

}


.stats-grid {

    display: grid;

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

    margin-top: 70px;

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

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

}


.stat {

    padding:
        28px 20px;

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

}


.stat:last-child {

    border-right:
        none;

}


.stat strong {

    display: block;

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 26px;

}


.stat span {

    color:
        var(--muted);

    font-size: 11px;

}


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

.skills-intro {

    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 50px;

}


.skills-intro h2,
.projects-intro h2,
.experience-intro h2 {

    color:
        var(--white);

    font-size:
        clamp(36px,5vw,55px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-top: 15px;

}


.skills-intro > p,
.projects-intro > p,
.experience-intro > p {

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.8;

}


.skills-grid {

    display: grid;

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

    gap: 14px;

}


.skill-card {

    padding: 25px;

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

    border-radius: 12px;

    background:
        var(--card);

    transition:
        var(--transition);

}


.skill-card:hover {

    transform:
        translateY(-6px);

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

}


.skill-card-top {

    display: flex;

    justify-content:
        space-between;

    margin-bottom: 20px;

}


.skill-number,
.skill-symbol {

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.skill-symbol {

    color:
        var(--cyan);

    font-size: 16px;

}


.skill-card h3 {

    color:
        var(--white);

    font-size: 17px;

    margin-bottom: 8px;

}


.skill-card > p {

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 22px;

}


.skill-item {

    margin-bottom: 13px;

}


.skill-info {

    display: flex;

    justify-content:
        space-between;

    margin-bottom: 6px;

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.skill-bar {

    height: 3px;

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

}


.skill-bar span {

    display: block;

    width: 0;

    height: 100%;

    background:
        var(--cyan);

    box-shadow:
        0 0 10px
        rgba(0,229,255,0.5);

    transition:
        width 1.2s ease;

}


.tech-tags,
.project-tags,
.timeline-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.tech-tags span,
.project-tags span,
.timeline-tags span {

    padding:
        5px 8px;

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

    border-radius:
        5px;

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

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 9px;

}


.skill-highlight {

    margin-top: 25px;

    color:
        var(--white);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.skill-highlight span {

    color:
        var(--cyan);

}


.learning-status {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    color:
        var(--green);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.pulse-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px
        var(--green);

    animation:
        pulse 2s infinite;

}


.learning-line {

    height: 3px;

    margin-top: 20px;

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

}


.learning-line span {

    display: block;

    width: 65%;

    height: 100%;

    background:
        var(--green);

    animation:
        learningProgress 3s ease infinite alternate;

}


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

.projects {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,229,255,0.015),
            transparent
        );

}


.projects-intro {

    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;

}


.project-featured {

    min-height:
        470px;

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    margin-bottom: 16px;

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        rgba(8,13,18,0.9);

    transition:
        var(--transition);

}


.project-featured:hover {

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

}


.project-featured-content {

    padding: 42px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.project-meta,
.project-card-top {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.project-index {

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.project-status {

    padding:
        5px 8px;

    border:
        1px solid;

    border-radius:
        999px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 8px;

    letter-spacing: 1px;

}


.completed {

    color:
        var(--green);

    border-color:
        rgba(34,197,94,0.25);

}


.development {

    color:
        #a5b4fc;

    border-color:
        rgba(99,102,241,0.3);

}


.progress {

    color:
        var(--cyan);

    border-color:
        rgba(0,229,255,0.25);

}


.project-featured h3 {

    color:
        var(--white);

    font-size:
        clamp(28px,4vw,46px);

    line-height:
        1.05;

    letter-spacing:
        -1.5px;

    margin:
        28px 0 18px;

}


.project-featured h3 span {

    color:
        var(--cyan);

}


.project-description {

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.8;

}


.project-features {

    display: grid;

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

    gap: 8px;

    margin:
        25px 0;

}


.project-features div {

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

    padding-left: 10px;

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.project-features span {

    color:
        var(--cyan);

}


.project-actions {

    display: flex;

    gap: 22px;

    margin-top: 28px;

}


.project-link {

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.secondary-link {

    color:
        var(--muted);

}


/* PROJECT VISUAL */

.project-visual {

    position: relative;

    min-height:
        470px;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(0,229,255,0.08),
            transparent 55%
        ),

        #060b10;

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

}


.scan-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(0,229,255,0.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,229,255,0.07) 1px,
            transparent 1px
        );

    background-size:
        35px 35px;

}


.network-node {

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background:
        var(--cyan);

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

    animation:
        nodePulse 2s infinite;

}


.node-1 {

    left: 20%;
    top: 25%;

}


.node-2 {

    right: 20%;
    top: 30%;

}


.node-3 {

    left: 27%;
    bottom: 25%;

}


.node-4 {

    right: 28%;
    bottom: 20%;

}


.network-line {

    position: absolute;

    width: 220px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );

    opacity:
        0.5;

}


.line-1 {

    left: 23%;

    top: 27%;

    transform:
        rotate(12deg);

}


.line-2 {

    left: 29%;

    top: 50%;

    transform:
        rotate(-55deg);

}


.line-3 {

    left: 30%;

    top: 65%;

    transform:
        rotate(-12deg);

}


.scan-terminal {

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 270px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0,229,255,0.2);

    border-radius:
        10px;

    background:
        rgba(3,7,10,0.94);

    z-index: 5;

}


.scan-terminal-header {

    height: 30px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding-left: 10px;

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

}


.scan-terminal-header span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        #444;

}


.scan-terminal-body {

    padding: 16px;

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 9px;

    line-height: 2;

}


.scan-terminal-body b {

    color:
        var(--cyan);

}


.scan-green {

    color:
        var(--green);

}


/* PROJECT CARDS */

.project-grid {

    display: grid;

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

    gap: 14px;

}


.project-standard {

    min-height:
        440px;

    display: flex;

    flex-direction: column;

    padding: 28px;

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

    border-radius:
        12px;

    background:
        var(--card);

    transition:
        var(--transition);

}


.project-standard:hover {

    transform:
        translateY(-8px);

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

}


.project-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        30px 0 22px;

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

    border-radius:
        10px;

    color:
        var(--cyan);

    background:
        rgba(0,229,255,0.03);

}


.project-standard h3 {

    color:
        var(--white);

    font-size: 22px;

    line-height: 1.15;

    margin-bottom: 15px;

}


.project-standard > p {

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.8;

    margin-bottom: 20px;

}


.mini-features {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 20px;

}


.mini-features span {

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 8px;

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

    padding-left: 7px;

}


.project-standard .project-tags {

    margin-top:
        auto;

}


.project-arrow {

    display: flex;

    gap: 8px;

    width: fit-content;

    margin-top: 22px;

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 10px;

}


.projects-footer {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 20px;

    margin-top: 45px;

    padding-top: 30px;

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

}


.projects-footer p {

    color:
        var(--muted);

    font-size: 12px;

}


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

.experience {

    background:
        rgba(150,200,230,0.018);

}


.experience-intro {

    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 70px;

}


/* TIMELINE */

.timeline {

    position: relative;

    max-width:
        1000px;

    margin: auto;

}


.timeline::before {

    content: "";

    position: absolute;

    left: 120px;

    top: 0;

    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            var(--cyan),
            var(--border),
            transparent
        );

}


.timeline-item {

    position: relative;

    display: grid;

    grid-template-columns:
        95px 50px 1fr;

    gap: 20px;

    margin-bottom: 55px;

}


.timeline-marker {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

}


.timeline-marker span {

    width: 13px;

    height: 13px;

    margin-top: 8px;

    border:
        3px solid
        var(--bg);

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 15px
        rgba(0,229,255,0.5);

}


.timeline-marker.future span {

    background:
        var(--green);

    box-shadow:
        0 0 15px
        rgba(34,197,94,0.5);

}


.timeline-date {

    padding-top: 5px;

    color:
        var(--muted);

    text-align:
        right;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 9px;

}


.timeline-card {

    padding:
        28px;

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

    border-radius:
        12px;

    background:
        var(--card);

    transition:
        var(--transition);

}


.timeline-card:hover {

    transform:
        translateX(5px);

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

}


.timeline-card-header {

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

}


.timeline-type {

    color:
        var(--cyan);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 9px;

    letter-spacing: 1px;

}


.timeline-card h3 {

    color:
        var(--white);

    font-size: 20px;

    margin:
        8px 0 4px;

}


.timeline-card h4 {

    color:
        var(--muted);

    font-size: 12px;

    font-weight: 500;

}


.timeline-card > p {

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.8;

    margin:
        20px 0;

}


.timeline-number {

    color:
        rgba(0,229,255,0.3);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 25px;

}


.future-card {

    border-color:
        rgba(34,197,94,0.15);

}


/* =========================================================
   CONTACT — LIGHT NAVY / GLASS
========================================================= */

.contact {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 45%, rgba(0,229,255,0.14), transparent 28%),
        radial-gradient(circle at 92% 72%, rgba(0,229,255,0.10), transparent 25%),
        radial-gradient(circle at 50% 10%, rgba(99,102,241,0.08), transparent 35%),
        linear-gradient(135deg, #0b1725 0%, #101f32 48%, #0b1828 100%);
}

.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(120,190,220,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,190,220,0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 95%);
    opacity: 0.65;
}

.contact::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -280px;
    top: 180px;
    border-radius: 50%;
    border: 1px solid rgba(0,229,255,0.15);
    box-shadow: 0 0 100px rgba(0,229,255,0.05);
    pointer-events: none;
}

.contact .section-container,
.contact .section-heading {
    position: relative;
    z-index: 2;
}

.contact .section-number { color: var(--cyan); }
.contact .section-label { color: #a9b9c9; }

.contact-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 90px;
    padding: 20px 0 40px;
    align-items: center;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact-eyebrow {
    color: var(--cyan);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.contact-info h2 {
    color: var(--white);
    font-size: clamp(52px, 7vw, 82px);
    line-height: 0.92;
    letter-spacing: -5px;
    margin-bottom: 32px;
    text-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.contact-info h2 span {
    display: block;
    color: var(--cyan);
    text-shadow: 0 0 35px rgba(0,229,255,0.18);
}

.contact-info h3 {
    color: #f0f5fa;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 14px;
}

.contact-description {
    max-width: 410px;
    color: #9fb0c0;
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 30px;
}

.contact-detail {
    width: 100%;
    max-width: 410px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(180,215,235,0.12);
    color: #a8b8c7;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    transition: var(--transition);
}

.contact-detail:first-of-type {
    border-top: 1px solid rgba(180,215,235,0.12);
}

.contact-detail:hover {
    color: var(--cyan);
    padding-left: 8px;
    border-color: rgba(0,229,255,0.25);
}

.detail-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,229,255,0.28);
    border-radius: 7px;
    background: rgba(0,229,255,0.035);
    color: var(--cyan);
    font-size: 9px;
    transition: var(--transition);
}

.contact-detail:hover .detail-icon {
    background: rgba(0,229,255,0.10);
    border-color: rgba(0,229,255,0.55);
    box-shadow: 0 0 18px rgba(0,229,255,0.10);
}

.detail-arrow {
    margin-left: auto;
    color: var(--cyan);
    font-size: 13px;
}

.contact-availability {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 27px;
    color: #39e47a;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
}

.contact-form {
    width: 100%;
    max-width: 700px;
    padding: 34px;
    border: 1px solid rgba(170,210,235,0.16);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(27,48,70,0.72), rgba(12,28,44,0.78));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 25px 80px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.035);
    transition: var(--transition);
}

.contact-form:hover {
    border-color: rgba(0,229,255,0.20);
    box-shadow: 0 25px 80px rgba(0,0,0,0.25), 0 0 50px rgba(0,229,255,0.025), inset 0 1px 0 rgba(255,255,255,0.04);
}

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

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 21px;
}

.form-group label {
    color: #c2cfdb;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 8px;
}

.form-group label span { color: var(--cyan); }

.form-group input,
.form-group textarea {
    width: 100%;
    outline: none;
    border: 1px solid rgba(170,205,225,0.20);
    border-radius: 6px;
    background: rgba(8,20,33,0.52);
    color: var(--white);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    transition: var(--transition);
}

.form-group input { height: 48px; padding: 0 14px; }
.form-group textarea { min-height: 165px; padding: 14px; resize: vertical; }

.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(170,190,205,0.42); }

.form-group input:hover,
.form-group textarea:hover {
    border-color: rgba(0,229,255,0.28);
    background: rgba(10,25,40,0.65);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--cyan);
    background: rgba(7,23,38,0.72);
    box-shadow: 0 0 0 3px rgba(0,229,255,0.055), 0 0 25px rgba(0,229,255,0.035);
}

.contact-submit {
    min-width: 155px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 21px;
    border: 1px solid var(--cyan);
    border-radius: 6px;
    background: #00d9f2;
    color: #03141a;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.contact-submit:hover {
    transform: translateY(-3px);
    background: #12e2fa;
    box-shadow: 0 12px 35px rgba(0,229,255,0.20);
}

.contact-submit:active { transform: translateY(-1px); }

.send-arrow { font-size: 15px; transition: var(--transition); }
.contact-submit:hover .send-arrow { transform: translateX(5px); }

.form-message {
    min-height: 20px;
    margin-top: 12px;
    color: var(--green);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
}

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 55px; }
    .contact-form { max-width: 100%; }
    .contact-info h2 { font-size: 62px; }
}

@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact-form { padding: 25px 20px; }
    .contact-info h2 { font-size: 52px; letter-spacing: -3px; }
    .contact-layout { gap: 40px; }
}

@media (max-width: 480px) {
    .contact {
        background: radial-gradient(circle at 20% 25%, rgba(0,229,255,0.10), transparent 35%), linear-gradient(145deg, #0b1725, #0d1b2d);
    }
    .contact-info h2 { font-size: 45px; }
    .contact-description { font-size: 12px; }
    .contact-detail { font-size: 9px; }
    .contact-form { padding: 22px 17px; }
    .contact-submit { width: 100%; }
}


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

.footer {

    padding:
        35px 24px;

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

}


.footer-content {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 25px;

}


.footer strong {

    color:
        var(--white);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 13px;

}


.footer strong span {

    color:
        var(--cyan);

}


.footer p {

    color:
        var(--muted);

    font-size: 10px;

}


.footer-content > div p {

    margin-top: 5px;

}


.footer-links a {

    color:
        var(--muted);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 9px;

}


.footer-links a:hover {

    color:
        var(--cyan);

}


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

.reveal {

    opacity: 0;

    transform:
        translateY(25px);

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

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pulse {

    0%,100% {

        opacity: 1;

        transform:
            scale(1);

    }

    50% {

        opacity: 0.5;

        transform:
            scale(0.75);

    }

}


@keyframes blink {

    0%,50% {
        opacity: 1;
    }

    51%,100% {
        opacity: 0;
    }

}


@keyframes float {

    0%,100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


@keyframes learningProgress {

    from {
        width: 50%;
    }

    to {
        width: 75%;
    }

}


@keyframes nodePulse {

    0%,100% {

        transform:
            scale(1);

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

    }

    50% {

        transform:
            scale(1.5);

        box-shadow:
            0 0 15px
            var(--cyan);

    }

}


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

@media (max-width:900px) {


    .hero-container,
    .about-grid,
    .skills-intro,
    .projects-intro,
    .experience-intro,
    .contact-layout {

        grid-template-columns:
            1fr;

    }


    .hero-container {

        gap: 60px;

    }


    .skills-grid,
    .project-grid {

        grid-template-columns:
            1fr;

    }


    .project-featured {

        grid-template-columns:
            1fr;

    }


    .project-visual {

        border-left:
            none;

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

    }


    .contact-layout {

        gap: 55px;

    }


    .contact-form {

        max-width:
            100%;

    }


    .timeline::before {

        left: 23px;

    }


    .timeline-item {

        grid-template-columns:
            46px 1fr;

        gap: 15px;

    }


    .timeline-date {

        grid-column: 2;

        grid-row: 1;

        text-align: left;

        padding: 0;

        margin-bottom: -10px;

    }


    .timeline-marker {

        grid-column: 1;

        grid-row:
            1 / span 2;

    }


    .timeline-card {

        grid-column: 2;

    }

}


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

@media (max-width:768px) {


    .section {

        padding:
            90px 20px;

    }


    .nav-container {

        padding:
            18px 20px;

    }


    .menu-toggle {

        display: flex;

    }


    .nav-menu {

        position: absolute;

        top: 70px;

        left: 20px;

        right: 20px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        padding: 20px;

        background:
            rgba(5,7,10,0.96);

        backdrop-filter:
            blur(20px);

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

        border-radius:
            12px;

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            var(--transition);

    }


    .nav-menu.open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }


    .hero {

        padding-top:
            130px;

    }


    .hero h1 {

        letter-spacing:
            -3px;

    }


    .hero-socials {

        flex-wrap: wrap;

        gap: 15px;

    }


    .stats-grid {

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

    }


    .stat {

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

    }


    .stat:nth-child(2) {

        border-right:
            none;

    }


    .project-features {

        grid-template-columns:
            1fr;

    }


    .projects-footer {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .footer-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


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

@media (max-width:600px) {


    .form-row {

        grid-template-columns:
            1fr;

        gap: 0;

    }


    .contact-info h2 {

        font-size:
            52px;

        letter-spacing:
            -3px;

    }

}


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

@media (max-width:480px) {


    .section {

        padding:
            75px 16px;

    }


    .nav-container {

        padding:
            17px 16px;

    }


    .logo {

        font-size:
            14px;

    }


    .hero h1 {

        font-size:
            56px;

    }


    .typing-container {

        font-size:
            14px;

    }


    .hero-description {

        font-size:
            13px;

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .btn {

        width: 100%;

    }


    .terminal-body {

        padding:
            20px;

        font-size:
            10px;

    }


    .floating-card {

        right:
            10px;

        bottom:
            -20px;

    }


    .about-content h2,
    .skills-intro h2,
    .projects-intro h2,
    .experience-intro h2 {

        font-size:
            38px;

    }


    .skill-card,
    .project-standard {

        padding:
            20px;

    }


    .project-featured-content {

        padding:
            25px;

    }


    .project-featured h3 {

        font-size:
            30px;

    }


    .project-visual {

        min-height:
            330px;

    }


    .scan-terminal {

        width:
            235px;

    }


    .stats-grid {

        grid-template-columns:
            1fr;

    }


    .stat {

        border-right:
            none;

    }


    .stat:last-child {

        border-bottom:
            none;

    }


    .contact-info h2 {

        font-size:
            45px;

    }


    .contact-description {

        font-size:
            12px;

    }


    .contact-wrapper {

        padding:
            28px 20px;

    }


    .contact-submit {

        width: 100%;

    }


    .timeline-card {

        padding:
            20px;

    }


    .timeline-card h3 {

        font-size:
            17px;

    }

}