/* nlp.css */
body.nlp-body {
    background-color: #050505;
    color: #ffffff;
    margin: 0;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Home Button */
.home-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(158, 153, 33, 0.3);
    border-radius: 30px;
    color: #eab308;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.home-btn:hover {
    background: rgba(158, 153, 33, 0.2);
    border-color: #9e9921;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(158, 153, 33, 0.2);
}

/* Scroll Animation Container */
.scroll-wrapper {
    height: 200vh;
    position: relative;
    padding-bottom: 50px;
}

.sticky-container {
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
}

/* Header Content */
.header-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    z-index: 10;
    margin-top: 50px;
    will-change: transform;
}

.main-title {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
    font-family: 'Syne', sans-serif;
}

.highlight {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #eab308, #9e9921);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-top: 10px;
    text-shadow: 0 0 30px rgba(234, 179, 8, 0.2);
}

.subtitle {
    color: #a3a3a3;
    font-size: 1.2rem;
    margin-top: 15px;
}

/* Card Container for 3D Transform */
.card-container {
    width: 100%;
    max-width: 1000px;
    height: 65vh;
    margin-top: 0px;
    background: #222;
    border: 4px solid #6C6C6C;
    border-radius: 30px;
    padding: 2px;
    box-shadow: 0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003;
    transform-origin: center top;
    will-change: transform;
}

/* Card Inner */
.card-inner {
    width: 100%;
    height: 100%;
    border-radius: 26px;
    /* slightly smaller than outer container */
    overflow: hidden;
    position: relative;
    background: #111;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0.8;
}

.card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    box-sizing: border-box;
}

.project-tags {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.nlp-tag {
    background: rgba(158, 153, 33, 0.2);
    border: 1px solid #9e9921;
    color: #eab308;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(5px);
}

.project-name {
    font-size: 2.2rem;
    margin: 0 0 20px 0;
    font-family: 'Syne', sans-serif;
}

.explore-btn {
    display: inline-block;
    padding: 12px 25px;
    background: linear-gradient(135deg, #ca8a04, #9e9921);
    border: 1px solid #9e9921;
    color: #111;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* -------------------------------------------
   MAIN NLP HERO HEADING
------------------------------------------- */
.nlp-hero-header {
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    background: radial-gradient(ellipse at bottom, rgba(234, 179, 8, 0.15) 0%, transparent 50%);
    position: relative;
    z-index: 10;
}

.nlp-page-title {
    font-size: 5rem;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    margin: 0;
    padding-bottom: 20px;
    padding-top: 10px;
    line-height: 1.5;
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #ff8c00, #eab308);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
    letter-spacing: -1px;
}

.nlp-page-subtitle {
    font-size: 1.5rem;
    color: #d4d4d4;
    margin-top: 20px;
    max-width: 700px;
    line-height: 1.6;
    font-weight: 300;
}

/* -------------------------------------------
   WILD GOLDEN ANIMATED BACKGROUND GLOW
------------------------------------------- */
.glow-cluster {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    max-width: 1000px;
    max-height: 1000px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(255, 140, 0, 0.1) 30%, transparent 65%);
    transform: translate(-50%, -50%);
    animation: wildGlow 8s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

@keyframes wildGlow {
    0% {
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
        opacity: 0.5;
        filter: blur(80px);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2) rotate(15deg);
        opacity: 1;
        filter: blur(50px);
        background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 140, 0, 0.15) 35%, transparent 65%);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.9) rotate(-15deg);
        opacity: 0.7;
        filter: blur(60px);
    }
}

@media (max-width: 768px) {
    .nlp-page-title {
        font-size: 3rem;
    }

    .nlp-page-subtitle {
        font-size: 1.2rem;
    }

    .glow-cluster {
        width: 100vw;
        height: 100vw;
        filter: blur(40px);
    }
}

/* -------------------------------------------
   KOKONUT TYPOGRAPHY & CARD STYLING
------------------------------------------- */
.kokonut-card {
    width: 100%;
    height: 100%;
    background: #030303;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.05);
}

.kokonut-card-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at bottom right, rgba(244, 63, 94, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.kokonut-card-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.k-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 30px;
}

.k-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
}

.k-badge span {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.05em;
    font-family: 'Inter', sans-serif;
}

.k-title {
    font-size: 6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    margin-top: 0;
}

.k-title-1 {
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.k-title-2 {
    background: linear-gradient(90deg, #a5b4fc, #ffffff, #fda4af);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.k-desc {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Inter', sans-serif;
}

.k-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .k-title {
        font-size: 3.5rem;
    }

    .k-desc {
        font-size: 1rem;
    }
}

/* -------------------------------------------
   ETHEREAL SHADOWS CARD (PROJECT 2)
------------------------------------------- */
.ethereal-card {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.ethereal-bg-container {
    position: absolute;
    top: -100px;
    right: -100px;
    bottom: -100px;
    left: -100px;
    filter: url(#ethereal-filter-2) blur(4px);
    z-index: 1;
}

.ethereal-shadow-layer {
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 1);
    -webkit-mask-image: url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png');
    mask-image: url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.ethereal-noise {
    position: absolute;
    inset: 0;
    background-image: url('https://framerusercontent.com/images/g0QcWrxr87K0ufOxIUFBakwYA8.png');
    background-size: 240px;
    background-repeat: repeat;
    opacity: 0.5;
    z-index: 2;
    pointer-events: none;
}

.ethereal-card-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 40px;
    text-align: center;
}

.e-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

.e-badge .e-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
}

.e-badge span {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.05em;
    font-family: 'Inter', sans-serif;
}

.e-title {
    font-size: 6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 24px;
    margin-top: 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
}

.e-desc {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 40px;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.e-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.ethereal-card-bg {
    position: absolute;
    inset: 0;
    /* Subtle gray-black inner container shading */
    background: radial-gradient(circle at top left, rgba(200, 200, 200, 0.03) 0%, transparent 40%),
        radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    z-index: 2;
    pointer-events: none;
}

/* -------------------------------------------
   PROJECT 2 EXTERNAL GRAY/BLACK BACKGROUND & STARS
------------------------------------------- */
#project-2-bg {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
    /* Soft dark shading behind the stars */
    background: radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.4) 0%, transparent 80%);
}

.grey-stars-1 {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20px 30px, rgba(180, 180, 180, 0.8) 1.5px, transparent 1.5px),
        radial-gradient(circle at 75px 120px, rgba(120, 120, 120, 0.6) 1px, transparent 1px),
        radial-gradient(circle at 110px 40px, rgba(150, 150, 150, 0.5) 2px, transparent 2px),
        radial-gradient(circle at 180px 160px, rgba(200, 200, 200, 0.7) 1px, transparent 1px),
        radial-gradient(circle at 230px 70px, rgba(160, 160, 160, 0.4) 1.5px, transparent 1.5px);
    background-repeat: repeat;
    background-size: 300px 300px;
    opacity: 0.6;
    animation: driftStars 80s linear infinite;
}

.grey-stars-twinkle {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 40px 180px, rgba(220, 220, 220, 0.9) 2px, transparent 2px),
        radial-gradient(circle at 140px 30px, rgba(200, 200, 200, 0.8) 1.5px, transparent 1.5px),
        radial-gradient(circle at 250px 210px, rgba(190, 190, 190, 0.7) 2px, transparent 2px);
    background-repeat: repeat;
    background-size: 400px 400px;
    opacity: 0.8;
    animation: driftStarsTwinkle 120s linear infinite, twinkleStars 3s ease-in-out infinite alternate;
}

@keyframes driftStars {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -600px;
    }

    /* Ensures seamless loop */
}

@keyframes driftStarsTwinkle {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -800px;
    }

    /* Ensures seamless loop */
}

@keyframes twinkleStars {

    0%,
    20% {
        opacity: 0.05;
    }

    80%,
    100% {
        opacity: 0.9;
    }
}

@media (max-width: 768px) {
    .e-title {
        font-size: 3.5rem;
    }

    .e-desc {
        font-size: 1rem;
    }
}

/* -------------------------------------------
   ELEGANT SHAPES HERO BACKGROUND
------------------------------------------- */
#project-1-bg {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
    /* Optional: bg gradient tint if desired, though Kokonut uses background on the container */
    background: radial-gradient(circle at 60% 40%, rgba(99, 102, 241, 0.05) 0%, rgba(244, 63, 94, 0.03) 40%, transparent 80%);
}

.elegant-shape-wrap {
    position: absolute;
}

.elegant-shape-float {
    animation: floatY 12s infinite ease-in-out;
}

.delay-1s {
    animation-delay: -2s;
}

.delay-2s {
    animation-delay: -4s;
}

.delay-3s {
    animation-delay: -6s;
}

.delay-4s {
    animation-delay: -8s;
}

.delay-5s {
    animation-delay: -10s;
}

@keyframes floatY {

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

    50% {
        transform: translateY(18px);
    }
}

.elegant-shape {
    position: relative;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px);
    box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);
}

.elegant-shape::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 70%);
}

.shape-1-pos {
    left: -5%;
    top: 20%;
    transform: rotate(12deg);
}

.fill-1 {
    width: 600px;
    height: 140px;
    background: linear-gradient(to right, rgba(99, 102, 241, 0.15), transparent);
}

.shape-2-pos {
    right: -5%;
    top: 75%;
    transform: rotate(-15deg);
}

.fill-2 {
    width: 500px;
    height: 120px;
    background: linear-gradient(to right, rgba(244, 63, 94, 0.15), transparent);
}

.shape-3-pos {
    left: 10%;
    bottom: 10%;
    transform: rotate(-8deg);
}

.fill-3 {
    width: 300px;
    height: 80px;
    background: linear-gradient(to right, rgba(139, 92, 246, 0.15), transparent);
}

.shape-4-pos {
    right: 20%;
    top: 15%;
    transform: rotate(20deg);
}

.fill-4 {
    width: 200px;
    height: 60px;
    background: linear-gradient(to right, rgba(245, 158, 11, 0.15), transparent);
}

.shape-5-pos {
    left: 25%;
    top: 10%;
    transform: rotate(-25deg);
}

.fill-5 {
    width: 150px;
    height: 40px;
    background: linear-gradient(to right, rgba(6, 182, 212, 0.15), transparent);
}

/* -------------------------------------------
   FADE UP TEXT ANIMATIONS
------------------------------------------- */
.fade-up-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.25, 0.4, 0.25, 1), transform 1s cubic-bezier(0.25, 0.4, 0.25, 1);
}

.is-visible .fade-up-text {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.3s;
}

.delay-3 {
    transition-delay: 0.5s;
}

.delay-4 {
    transition-delay: 0.7s;
}


.explore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(158, 153, 33, 0.4);
}

/* -------------------------------------------
   TERMINAL CARD (PROJECT 3 - Logistics-Address-ResolveR)
------------------------------------------- */
.terminal-card {
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Animated Falling Pattern Background inside Card */
.falling-pattern-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, transparent, rgba(0, 0, 0, 1));
    -webkit-mask-image: radial-gradient(ellipse at center, transparent, rgba(0, 0, 0, 1));
}

.falling-pattern-layer {
    position: absolute;
    inset: -50% -50% -50% -50%;
    width: 200%;
    height: 200%;
    animation: fallingPatternAnim 180s linear infinite;
    /* Very low speed */
}

@keyframes fallingPatternAnim {
    from {
        background-position: var(--start-pos);
    }

    to {
        background-position: var(--end-pos);
    }
}

.falling-pattern-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.terminal-header {
    height: 35px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 8px;
    border-bottom: 1px solid rgba(16, 185, 129, 0.1);
    position: relative;
    z-index: 2;
}

.t-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.t-red {
    background: #ff5f56;
}

.t-yellow {
    background: #ffbd2e;
}

.t-green {
    background: #27c93f;
}

#card-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
    mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 30%, black 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 30%, black 75%);
}

.terminal-content {
    padding: 30px 40px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: #10b981;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100% - 35px);
    box-sizing: border-box;
    background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(10, 10, 10, 0.85) 0%, transparent 70%);
}

.t-input {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1rem;
}

.t-prompt {
    color: #10b981;
    margin-right: 10px;
}

.t-output {
    background: rgba(16, 185, 129, 0.05);
    padding: 15px 20px;
    border-radius: 8px;
    border-left: 3px solid #10b981;
    margin: 0 auto 24px;
    width: fit-content;
    max-width: 100%;
    text-align: left;
}

.t-json {
    color: #34d399;
    font-size: 0.85rem;
    line-height: 1.4;
}

.t-title {
    font-size: 3.2rem;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 16px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    letter-spacing: 0;
}

.t-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 300;
    max-width: 550px;
    line-height: 1.6;
    margin: 0 auto 24px;
    font-family: 'Inter', sans-serif;
}

#project-3-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 80%);
}

.grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

/* -------------------------------------------
   PULSE CARD (PROJECT 4 - Beep-for-Abuse)
------------------------------------------- */
.pulse-card {
    width: 100%;
    height: 100%;
    background: #050505;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.pulse-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(244, 63, 94, 0.1) 0%, transparent 70%);
}

.wave-container {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 60px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.wave-bar {
    width: 4px;
    height: 20px;
    background: #f43f5e;
    border-radius: 4px;
    animation: wavePulse 1.2s infinite ease-in-out;
}

@keyframes wavePulse {

    0%,
    100% {
        height: 20px;
        opacity: 0.5;
    }

    50% {
        height: 60px;
        opacity: 1;
    }
}

.pulse-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 40px;
    text-align: center;
}

.p-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.3);
    margin-bottom: 30px;
    color: #f43f5e;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.p-badge .p-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f43f5e;
}

.p-title {
    font-size: 6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: #fff;
    margin-bottom: 24px;
    margin-top: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.p-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
    font-weight: 300;
    font-family: 'Inter', sans-serif;
}

.p-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

#project-4-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000;
}

.scanline {
    width: 100%;
    height: 100px;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(244, 63, 94, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    animation: scanline 6s linear infinite;
}

@keyframes scanline {
    0% {
        bottom: 100%;
    }

    100% {
        bottom: -100px;
    }
}

@media (max-width: 768px) {
    .t-title {
        font-size: 2rem;
    }

    .t-json {
        font-size: 0.75rem;
    }

    .p-title {
        font-size: 3.5rem;
    }

    .p-desc {
        font-size: 1rem;
    }
}

/* -------------------------------------------
   FALLING PATTERN BACKGROUND (FROM COMPONENT)
------------------------------------------- */
.falling-pattern-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    --fp-color: #f43f5e;
    --fp-bg: #050505;
    background-color: var(--fp-bg);
    background-image:
        radial-gradient(4px 100px at 0px 235px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 235px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 117.5px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 252px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 252px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 126px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 150px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 150px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 75px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 253px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 253px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 126.5px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 204px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 204px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 102px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 134px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 134px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 67px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 179px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 179px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 89.5px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 299px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 299px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 149.5px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 215px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 215px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 107.5px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 281px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 281px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 140.5px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 158px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 158px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 79px, var(--fp-color) 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 210px, var(--fp-color), transparent),
        radial-gradient(4px 100px at 300px 210px, var(--fp-color), transparent),
        radial-gradient(1.5px 1.5px at 150px 105px, var(--fp-color) 100%, transparent 150%);
    background-size: 300px 235px, 300px 235px, 300px 235px, 300px 252px, 300px 252px, 300px 252px, 300px 150px, 300px 150px, 300px 150px, 300px 253px, 300px 253px, 300px 253px, 300px 204px, 300px 204px, 300px 204px, 300px 134px, 300px 134px, 300px 134px, 300px 179px, 300px 179px, 300px 179px, 300px 299px, 300px 299px, 300px 299px, 300px 215px, 300px 215px, 300px 215px, 300px 281px, 300px 281px, 300px 281px, 300px 158px, 300px 158px, 300px 158px, 300px 210px, 300px 210px;
    animation: fallingPattern 150s linear infinite;
    pointer-events: none;
    opacity: 0.9;
    mask-image: radial-gradient(ellipse at center, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent);
}

.falling-pattern-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(4px);
    background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, var(--fp-bg) 2px);
    background-size: 8px 8px;
    pointer-events: none;
}

@keyframes fallingPattern {
    0% {
        background-position: 0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px, 50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 230.5px, 100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px, 150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px, 200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px, 250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px;
    }

    100% {
        background-position: 0px 6800px, 3px 6800px, 151.5px 6917.5px, 25px 13632px, 28px 13632px, 176.5px 13758px, 50px 5416px, 53px 5416px, 201.5px 5491px, 75px 17175px, 78px 17175px, 226.5px 17301.5px, 100px 5119px, 103px 5119px, 251.5px 5221px, 125px 8428px, 128px 8428px, 276.5px 8495px, 150px 9876px, 153px 9876px, 301.5px 9965.5px, 175px 13391px, 178px 13391px, 326.5px 13540.5px, 200px 14741px, 203px 14741px, 351.5px 14848.5px, 225px 18770px, 228px 18770px, 376.5px 18910.5px, 250px 5082px, 253px 5082px, 401.5px 5161px, 275px 6375px, 278px 6375px, 426.5px 6480px;
    }
}

/* -------------------------------------------
   HEATMAP CARD (PROJECT 5 - Screendit)
------------------------------------------- */
.heatmap-card {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    /* Extremely dark glassmorphism */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#project-5-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000;
}

.heatmap-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(239, 68, 68, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(34, 197, 94, 0.1) 0%, transparent 50%);
    animation: heatPulse 8s infinite alternate ease-in-out;
}

@keyframes gridScroll {
    0% {
        transform: skewY(12deg) translateY(0);
    }

    100% {
        transform: skewY(12deg) translateY(40px);
    }
}

@keyframes squareGlow {

    0%,
    100% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.8;
    }
}

.shadcn-grid-pattern {
    position: absolute;
    pointer-events: none;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    fill: rgba(30, 58, 138, 0.1);
    stroke: rgba(30, 58, 138, 0.1);
    mask-image: radial-gradient(ellipse 120% 120% at 50% 50%, white 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 120% 120% at 50% 50%, white 40%, transparent 100%);
    z-index: 0;
}

.shadcn-grid-pattern path {
    stroke: rgba(30, 58, 138, 0.4);
    stroke-width: 1;
}

.shadcn-grid-pattern .overflow-visible {
    overflow: visible;
}

.glow-sq {
    stroke-width: 0;
    fill: rgba(59, 130, 246, 0.25);
    animation: squareGlow 4s ease-in-out infinite;
}

.sq-d1 {
    animation-delay: 0s;
}

.sq-d2 {
    animation-delay: 0.7s;
}

.sq-d3 {
    animation-delay: 1.4s;
}

.sq-d4 {
    animation-delay: 2.1s;
}

.sq-d5 {
    animation-delay: 2.8s;
}

.sq-d6 {
    animation-delay: 3.5s;
}

.aurora-bg {
    position: absolute;
    inset: -10px;
    opacity: 0.5;
    pointer-events: none;
    background-image: repeating-linear-gradient(100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%),
        repeating-linear-gradient(100deg, #3b82f6 10%, #a5b4fc 15%, #93c5fd 20%, #ddd6fe 25%, #60a5fa 30%);
    background-size: 300% 200%;
    background-position: 50% 50%, 50% 50%;
    filter: blur(10px);
    mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
    z-index: 1;
}

.aurora-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%),
        repeating-linear-gradient(100deg, #3b82f6 10%, #a5b4fc 15%, #93c5fd 20%, #ddd6fe 25%, #60a5fa 30%);
    background-size: 200% 100%;
    background-attachment: fixed;
    mix-blend-mode: difference;
    animation: aurora-anim 60s linear infinite;
}

@keyframes aurora-anim {
    from {
        background-position: 50% 50%, 50% 50%;
    }

    to {
        background-position: 350% 50%, 350% 50%;
    }
}

@keyframes heatPulse {
    0% {
        opacity: 0.6;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.heatmap-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 40px;
    text-align: center;
}

.h-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.2), rgba(165, 180, 252, 0.2));
    backdrop-filter: blur(5px);
}

.h-badge .h-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
}

.h-title {
    font-size: 6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    margin-bottom: 24px;
    margin-top: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #3b82f6, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.h-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
    font-weight: 300;
    font-family: 'Inter', sans-serif;
}

.h-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.heatmap-btn {
    background: linear-gradient(135deg, #3b82f6, #a5b4fc) !important;
    border: none !important;
    color: #fff !important;
}

.heatmap-btn:hover {
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3) !important;
}

@media (max-width: 768px) {
    .h-title {
        font-size: 3.5rem;
    }

    .h-desc {
        font-size: 1rem;
    }
}

/* Bottom Content */
.bottom-content {
    max-width: 1000px;
    margin: 50px auto 100px;
    padding: 0 20px;
    text-align: center;
}

.bottom-content h2 {
    font-family: 'Syne', sans-serif;
    color: #eab308;
}

.other-projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.glass-panel {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 15px;
    padding: 30px;
    backdrop-filter: blur(10px);
    transition: all 0.3s;
    text-align: left;
}

.glass-panel:hover {
    border-color: #9e9921;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(158, 153, 33, 0.15);
}

.glass-panel h3 {
    margin-top: 0;
    color: #fff;
}

.glass-panel p {
    color: #a3a3a3;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .highlight {
        font-size: 2.2rem;
    }

    .main-title {
        font-size: 1.8rem;
    }

    .card-container {
        height: 40vh;
        padding: 10px;
        border-width: 2px;
    }

    .card-content-overlay {
        padding: 20px;
    }

    .project-name {
        font-size: 1.5rem;
    }
}