body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #e2e8f0;
    overflow-x: hidden;
    margin: 0;
}

h1, h2, h3, h4, .font-tech {
    font-family: 'Space Grotesk', sans-serif;
}

/* Static Space Background with layered depth */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(79, 82, 221, 0.05), transparent 32%),
        radial-gradient(circle at 82% 74%, rgba(34, 211, 238, 0.04), transparent 36%),
        radial-gradient(circle at center, #05070d 0%, #000000 100%);
}

.stars-far,
.stars-mid,
.stars-near {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
}

/* Distant stars: tiny, dim, pin-sharp */
.stars-far {
    opacity: 0.65;
    box-shadow:
        926px 953px 0 0.3px #ffffff, 1751px 388px 0 0.2px #ffffff, 1048px 974px 0 0.3px #ffffff,
        1624px 381px 0 0.2px #ffffff, 621px 290px 0 0.2px #ffffff, 1658px 85px 0 0.3px #ffffff,
        811px 927px 0 0.3px #ffffff, 1260px 322px 0 0.3px #ffffff, 1703px 129px 0 0.2px #ffffff,
        389px 495px 0 0.3px #ffffff, 1593px 950px 0 0.3px #ffffff, 1210px 400px 0 0.3px #ffffff,
        1311px 602px 0 0.3px #ffffff, 1356px 174px 0 0.3px #ffffff, 569px 833px 0 0.4px #ffffff,
        1908px 170px 0 0.3px #ffffff, 645px 470px 0 0.3px #ffffff, 60px 143px 0 0.3px #ffffff,
        221px 820px 0 0.2px #ffffff, 595px 791px 0 0.2px #ffffff, 34px 1px 0 0.2px #ffffff,
        1898px 107px 0 0.3px #ffffff, 1451px 813px 0 0.3px #ffffff, 1159px 406px 0 0.4px #ffffff,
        552px 689px 0 0.2px #ffffff, 681px 31px 0 0.4px #ffffff, 1552px 241px 0 0.2px #ffffff,
        1447px 206px 0 0.2px #ffffff, 952px 997px 0 0.2px #ffffff, 1145px 385px 0 0.3px #ffffff,
        390px 268px 0 0.3px #ffffff, 785px 238px 0 0.3px #ffffff, 435px 0px 0 0.3px #ffffff,
        1645px 622px 0 0.4px #ffffff, 40px 431px 0 0.2px #ffffff, 1749px 205px 0 0.2px #ffffff,
        299px 436px 0 0.3px #ffffff, 19px 673px 0 0.4px #ffffff, 790px 150px 0 0.2px #ffffff,
        427px 497px 0 0.2px #ffffff, 755px 761px 0 0.3px #ffffff, 260px 990px 0 0.4px #ffffff,
        277px 790px 0 0.2px #ffffff, 315px 636px 0 0.4px #ffffff, 1674px 510px 0 0.3px #ffffff,
        324px 402px 0 0.3px #ffffff, 795px 988px 0 0.3px #ffffff, 863px 97px 0 0.2px #ffffff,
        79px 1049px 0 0.4px #ffffff, 488px 802px 0 0.3px #ffffff, 1686px 1005px 0 0.3px #ffffff,
        359px 140px 0 0.2px #ffffff, 981px 151px 0 0.3px #ffffff, 1878px 417px 0 0.3px #ffffff,
        141px 551px 0 0.3px #ffffff, 510px 123px 0 0.2px #ffffff, 577px 755px 0 0.3px #ffffff,
        269px 188px 0 0.3px #ffffff, 1824px 922px 0 0.4px #ffffff, 1345px 1068px 0 0.3px #ffffff,
        287px 71px 0 0.4px #ffffff, 972px 732px 0 0.3px #ffffff, 68px 43px 0 0.3px #ffffff,
        153px 987px 0 0.2px #ffffff, 637px 653px 0 0.2px #ffffff, 148px 154px 0 0.3px #ffffff,
        753px 91px 0 0.4px #ffffff, 1509px 265px 0 0.4px #ffffff, 1873px 699px 0 0.3px #ffffff,
        1403px 969px 0 0.4px #ffffff, 1784px 854px 0 0.4px #ffffff, 61px 1023px 0 0.3px #ffffff,
        1279px 783px 0 0.3px #ffffff, 25px 147px 0 0.2px #ffffff, 1309px 236px 0 0.4px #ffffff,
        1801px 852px 0 0.3px #ffffff, 795px 937px 0 0.3px #ffffff, 1716px 171px 0 0.3px #ffffff,
        1053px 61px 0 0.3px #ffffff, 179px 984px 0 0.2px #ffffff, 1430px 231px 0 0.3px #ffffff,
        1258px 995px 0 0.3px #ffffff, 23px 753px 0 0.3px #ffffff, 1388px 414px 0 0.3px #ffffff,
        1543px 701px 0 0.3px #ffffff, 905px 1020px 0 0.4px #ffffff, 669px 828px 0 0.3px #ffffff,
        406px 882px 0 0.4px #ffffff, 1545px 410px 0 0.4px #ffffff, 787px 449px 0 0.3px #ffffff,
        648px 429px 0 0.2px #ffffff, 1016px 718px 0 0.4px #ffffff, 1738px 83px 0 0.3px #ffffff,
        566px 346px 0 0.2px #ffffff, 965px 563px 0 0.4px #ffffff, 1701px 847px 0 0.3px #ffffff,
        1064px 1011px 0 0.3px #ffffff, 1466px 926px 0 0.3px #ffffff, 1697px 64px 0 0.3px #ffffff,
        1244px 84px 0 0.3px #ffffff;
}

/* Mid-distance stars: slightly bigger and brighter */
.stars-mid {
    opacity: 0.85;
    box-shadow:
        575px 725px 0 0.7px #ffffff, 1621px 39px 0 0.9px #ffffff, 829px 931px 0 0.7px #ffffff,
        1575px 545px 0 0.7px #ffffff, 288px 96px 0 1.0px #ffffff, 236px 914px 0 0.6px #ffffff,
        1096px 755px 0 1.0px #ffffff, 1401px 405px 0 0.7px #ffffff, 973px 524px 0 0.7px #ffffff,
        22px 967px 0 0.8px #ffffff, 74px 366px 0 0.7px #ffffff, 1594px 708px 0 0.8px #ffffff,
        1065px 1024px 0 0.8px #ffffff, 1548px 326px 0 0.8px #ffffff, 1621px 458px 0 0.6px #ffffff,
        1909px 794px 0 0.7px #ffffff, 928px 403px 0 0.9px #ffffff, 1863px 13px 0 0.8px #ffffff,
        1164px 1029px 0 0.9px #ffffff, 702px 949px 0 0.7px #ffffff, 419px 202px 0 0.9px #ffffff,
        1675px 252px 0 0.7px #ffffff, 1843px 799px 0 1.0px #ffffff, 634px 656px 0 0.7px #ffffff,
        1471px 32px 0 0.7px #ffffff, 169px 76px 0 0.8px #ffffff, 1127px 863px 0 0.9px #ffffff,
        998px 58px 0 0.7px #ffffff, 1776px 131px 0 0.8px #ffffff, 71px 354px 0 0.8px #ffffff,
        1406px 287px 0 0.8px #ffffff, 1057px 1061px 0 0.9px #ffffff, 1411px 901px 0 1.0px #ffffff,
        1008px 176px 0 0.9px #ffffff, 899px 1078px 0 0.8px #ffffff, 1702px 336px 0 0.8px #ffffff,
        1727px 525px 0 0.7px #ffffff, 780px 426px 0 0.7px #ffffff, 289px 1073px 0 0.7px #ffffff,
        1019px 411px 0 0.8px #ffffff, 234px 1030px 0 0.6px #ffffff, 772px 56px 0 0.8px #ffffff,
        90px 1056px 0 1.0px #ffffff, 1114px 249px 0 0.8px #ffffff, 1415px 341px 0 0.6px #ffffff,
        1103px 939px 0 0.8px #ffffff, 1639px 827px 0 0.7px #ffffff, 969px 1009px 0 0.7px #ffffff,
        888px 975px 0 0.8px #ffffff, 222px 392px 0 0.8px #ffffff;
}

/* Foreground stars: bigger, brighter, with a soft glow halo for depth */
.stars-near {
    opacity: 1;
    filter: blur(0.3px);
    box-shadow:
        60px 532px 0 1.3px #ffffff, 1595px 46px 0 1.2px #ffffff, 318px 465px 0 1.2px #ffffff,
        581px 659px 0 1.6px #ffffff, 500px 1021px 0 1.3px #ffffff, 1496px 251px 0 1.7px #ffffff,
        1276px 513px 0 1.6px #ffffff, 1436px 894px 0 1.2px #ffffff, 1296px 846px 0 1.7px #ffffff,
        1261px 327px 0 1.5px #ffffff, 1769px 447px 0 1.5px #ffffff, 1743px 279px 0 1.3px #ffffff,
        1517px 711px 0 1.7px #ffffff, 646px 645px 0 1.7px #ffffff,
        398px 446px 3px 1.5px #a5f3fc, 398px 198px 3px 1.1px #a5f3fc, 490px 271px 3px 1.4px #a5f3fc,
        531px 794px 3px 1.1px #a5f3fc, 1704px 863px 3px 1.3px #a5f3fc, 1443px 258px 3px 1.1px #a5f3fc,
        1286px 36px 3px 1.1px #a5f3fc, 1167px 732px 3px 1.5px #a5f3fc, 739px 236px 3px 1.4px #a5f3fc,
        1299px 703px 3px 1.3px #a5f3fc;
}

/* Glassmorphism */
.glass-panel {
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.glass-nav {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Magic Glow Effect */
.magic-glow {
    --glow-rgb: 34, 211, 238;
    animation: pulse-glow 2s infinite alternate;
    border-color: rgb(var(--glow-rgb)) !important;
    background: rgba(var(--glow-rgb), 0.15) !important;
    box-shadow: 0 0 20px rgba(var(--glow-rgb), 0.5), inset 0 0 10px rgba(var(--glow-rgb), 0.2) !important;
    transform: scale(1.05);
    z-index: 10;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 15px rgba(var(--glow-rgb), 0.4); }
    100% { box-shadow: 0 0 30px rgba(var(--glow-rgb), 0.8), 0 0 10px #ffffff; }
}

.text-gradient {
    background: linear-gradient(135deg, #22d3ee 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
    transform: translateY(-5px);
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 10px 40px -10px rgba(34, 211, 238, 0.2);
}

.tech-tag {
    transition: all 0.2s;
}
.tech-tag:hover {
    background: rgba(34, 211, 238, 0.2);
    color: #22d3ee;
    border-color: #22d3ee;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #22d3ee; }