/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050508;
}

::-webkit-scrollbar-thumb {
    background: #1a1a1a;
    border: 1px solid #050508;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff9d00;
    box-shadow: 0 0 10px rgba(255, 157, 0, 0.4);
}

/* --- ANIMATION DEFINITIONS --- */
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

/* --- HERO SECTION DEFINITIVE STYLES --- */

.hero-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #050508;
    overflow: hidden;
}

.video-container {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.bg-video.active {
    opacity: 1;
}

.abstract-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mix-overlay {
    z-index: 2;
    background: radial-gradient(circle at 80% 20%, rgba(255, 157, 0, 0.1) 0%, transparent 60%);
    mix-blend-mode: overlay;
}

.dark-fade {
    z-index: 3;
    background: linear-gradient(to right, #050508 15%, transparent 70%);
}

.scanlines {
    z-index: 4;
    background: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1));
    background-size: 100% 4px;
    opacity: 0.15;
}

/* HERO CONTENT (LEFT) */
.hero-content {
    position: relative;
    z-index: 20;
    padding: 0 10%;
    max-width: 100%;
    text-align: center;
}

@media (min-width: 768px) {
    .hero-content {
        padding-left: 8%;
        max-width: 55%;
        text-align: left;
    }
}

.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.2rem, 8vw, 5.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
    color: #fff;
    text-transform: uppercase;
}

.hero-title .highlight {
    color: var(--accent-primary);
    text-shadow: 0 0 30px rgba(255, 157, 0, 0.6);
}

.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    max-width: 500px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: 0.85rem;
        line-height: 1.8;
        letter-spacing: 0.3em;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Glass Process Navigator */
/* Glass Design Process Navigator */
.hero-process-navigator {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 600px;
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.hero-process-navigator::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    background: conic-gradient(from var(--border-angle),
            transparent 20%,
            #ff9d00 40%,
            #ffd000 50%,
            #ff9d00 60%,
            transparent 80%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: bg-spin 4s linear infinite;
    pointer-events: none;
    z-index: 1;
}


@media (min-width: 1024px) {
    .hero-process-navigator {
        left: 50%;
        top: 80%;
        bottom: auto;
        transform: translate(calc(25vw - 50%), -50%);
    }
}

.process-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 2;
}

.process-row.r-to-l {
    flex-direction: row-reverse;
}

.process-step {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.step-pill {
    width: 130px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 5;
}

.step-num {
    font-size: 0.5rem;
    color: #ff9d00;
    opacity: 0.8;
    letter-spacing: 0.2em;
    margin-bottom: 2px;
}

.step-name {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.step-arrow {
    position: absolute;
    right: -10%;
    color: rgba(255, 255, 255, 0.2);
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.r-to-l .step-arrow {
    right: auto;
    left: -10%;
}

.row-connector-arrow {
    right: 50% !important;
    bottom: -60%;
    transform: translateX(50%);
    font-size: 0.8rem;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .hero-process-navigator {
        padding: 1rem;
        gap: 0.8rem;
    }

    .process-row {
        gap: 0.5rem;
    }

    .step-pill {
        width: 100%;
        height: 40px;
        padding: 0 0.6rem;
        gap: 0.5rem;
    }

    .step-num {
        font-size: 0.6rem;
        width: 18px;
        height: 18px;
    }

    .step-name {
        font-size: 0.6rem;
    }

    .step-arrow {
        display: none;
    }
}

@media (max-width: 380px) {
    .hero-process-navigator {
        padding: 0.75rem;
        gap: 0.6rem;
    }

    .step-pill {
        height: 36px;
    }

    .step-name {
        font-size: 0.55rem;
    }
}

.process-step:hover .step-pill {
    background: rgba(255, 157, 0, 0.1);
    border-color: rgba(255, 157, 0, 0.5);
    color: #ff9d00;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(255, 157, 0, 0.2);
}

.process-step:hover .step-num {
    opacity: 1;
}

/* Dotted Connection Path */
.process-dotted-path {
    position: absolute;
    inset: 2.8rem 4rem;
    border: 2px dashed rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    z-index: 1;
    pointer-events: none;
}

/* Fallback for active state if we want one */
.process-step.active .step-pill {
    background: rgba(255, 157, 0, 0.1);
    border-color: #ff9d00;
    color: #ff9d00;
}

/* Arrow Buttons (standalone on edges) */
.nav-arrow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: rgba(255, 157, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.nav-arrow-btn:hover {
    color: var(--accent-primary);
    background: rgba(255, 157, 0, 0.08);
    text-shadow: 0 0 12px rgba(255, 157, 0, 0.6);
}

.nav-arrow-btn:active {
    background: rgba(255, 157, 0, 0.15);
    transform: scale(0.95);
}

.nav-divider {
    width: 1px;
    height: 50%;
    background: rgba(255, 157, 0, 0.15);
    align-self: center;
    flex-shrink: 0;
}

.prev-pane:hover .nav-value,
.next-pane:hover .nav-value {
    color: rgba(255, 255, 255, 0.9);
}

/* Ensure original hero content is safe */
.hero-content {
    z-index: 20;
    padding-left: 8%;
}


.hud-dot {
    width: 12px;
    height: 12px;
    background: var(--accent-primary);
    transform: rotate(45deg);
    box-shadow: 0 0 15px var(--accent-primary);
    opacity: 0.3;
}

.hud-step-node.active .hud-dot {
    opacity: 1;
    transform: rotate(45deg) scale(1.4);
}

.hud-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.5;
    transition: all 0.3s ease;
    text-align: right;
}

.hud-step-node.active .hud-label {
    color: var(--accent-primary);
    opacity: 1;
    text-shadow: 0 0 20px rgba(255, 157, 0, 0.6);
}

.hud-step-node:hover .hud-label {
    opacity: 1;
    transform: translateX(-5px);
}


/* ===========================
   GAMING CTA BUTTONS
   =========================== */
.cta-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Shared base button --- */
.cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 2.2rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: clamp(0.72rem, 1.2vw, 0.82rem);
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    outline: none;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    /* Angled game-style clip-path */
    clip-path: polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px);
    transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1),
        box-shadow 0.25s ease,
        color 0.25s ease;
    z-index: 1;
}

/* Energy sweep layer */
.cta-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2;
}

.cta-button:hover::after {
    transform: translateX(120%);
}

/* Press-down tactile effect */
.cta-button:active {
    transform: scale(0.955) translateY(2px);
}

/* --- Button text span --- */
.cta-button .btn-text {
    position: relative;
    z-index: 3;
}

/* ---- PRIMARY  (neon orange filled) ---- */
.cta-button.primary {
    background: linear-gradient(135deg, #ff9d00 0%, #ffbc00 60%, #ff9d00 100%);
    color: #050508;
    box-shadow:
        0 0 12px rgba(255, 157, 0, 0.55),
        0 0 30px rgba(255, 157, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cta-button.primary:hover {
    color: #050508;
    box-shadow:
        0 0 20px rgba(255, 157, 0, 0.85),
        0 0 55px rgba(255, 157, 0, 0.40),
        0 0 90px rgba(255, 157, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Corner bracket ornaments — primary
.cta-button.primary::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(5, 5, 8, 0.6);
    border-left: 2px solid rgba(5, 5, 8, 0.6);
    z-index: 3;
    pointer-events: none;
    transition: border-color 0.25s;
} */

/* ---- SECONDARY (ghost outline with cyan-tinted accent) ---- */
.cta-button.secondary {
    background: rgba(255, 157, 0, 0.04);
    color: rgba(255, 255, 255, 0.75);
    /* 1px border via box-shadow so clip-path still works */
    box-shadow:
        0 0 0 1px rgba(255, 157, 0, 0.45),
        0 0 14px rgba(255, 157, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
}

.cta-button.secondary:hover {
    color: #fff;
    background: rgba(255, 157, 0, 0.10);
    box-shadow:
        0 0 0 1px rgba(255, 157, 0, 0.8),
        0 0 20px rgba(255, 157, 0, 0.40),
        0 0 45px rgba(255, 157, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

/* Corner bracket ornament — secondary 
.cta-button.secondary::before {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    border-bottom: 1.5px solid rgba(255, 157, 0, 0.7);
    border-right: 1.5px solid rgba(255, 157, 0, 0.7);
    z-index: 3;
    pointer-events: none;
    transition: border-color 0.25s;
}*/

.cta-button.secondary:hover::before {
    border-color: rgba(255, 157, 0, 1);
    filter: drop-shadow(0 0 4px rgba(255, 157, 0, 0.8));
}

/* Pulse-ring on idle for primary */
@keyframes btn-pulse-ring {
    0% {
        box-shadow: 0 0 0 1px rgba(255, 157, 0, 0.55), 0 0 30px rgba(255, 157, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(255, 157, 0, 0.55), 0 0 44px rgba(255, 157, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    100% {
        box-shadow: 0 0 0 1px rgba(255, 157, 0, 0.55), 0 0 30px rgba(255, 157, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
}

.cta-button.primary {
    animation: btn-pulse-ring 2.8s ease-in-out infinite;
}

.cta-button.primary:hover,
.cta-button.primary:active {
    animation: none;
}

/* Top/Bottom HUD Crosshairs */
.hud-crosshair {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    border-top: 2px solid var(--hud-border);
    border-right: 2px solid var(--hud-border);
    z-index: 5;
    pointer-events: none;
}

/* Right Side HUD Timeline */


.blur-card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 157, 0, 0.25) !important;
}

.dark .blur-card {
    background: rgba(10, 10, 15, 0.3) !important;
}



.nav-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-pane:hover {
    background: rgba(255, 157, 0, 0.05);
}

.nav-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 5px;
}

.nav-value {
    font-family: 'Orbitron', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.active-pane .nav-value {
    color: var(--accent-primary);
    text-shadow: 0 0 15px rgba(255, 157, 0, 0.4);
}

.nav-divider {
    width: 1px;
    height: 60%;
    background: rgba(255, 157, 0, 0.2);
    align-self: center;
}

.next-pane:hover .nav-value {
    color: var(--accent-primary);
}

/* Ensure original hero content is safe */
.hero-content {
    z-index: 20;
    padding-left: 8%;
}


.hud-step-node {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.hud-dot {
    width: 12px;
    height: 12px;
    background: var(--accent-primary);
    transform: rotate(45deg);
    box-shadow: 0 0 15px var(--accent-primary);
    opacity: 0.3;
}

.hud-step-node.active .hud-dot {
    opacity: 1;
    transform: rotate(45deg) scale(1.4);
}

.hud-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.5;
    transition: all 0.3s ease;
    text-align: right;
}

.hud-step-node.active .hud-label {
    color: var(--accent-primary);
    opacity: 1;
    text-shadow: 0 0 20px rgba(255, 157, 0, 0.6);
}

.hud-step-node:hover .hud-label {
    opacity: 1;
    transform: translateX(-5px);
}

/* Advanced Gaming Background FX */
.hero-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, #050508 100%);
    z-index: 5;
    pointer-events: none;
    opacity: 0.8;
}

.scanlines {
    z-index: 6;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 50%);
    background-size: 100% 4px;
    opacity: 0.1;
    pointer-events: none;
}

.glitch-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgba(255, 157, 0, 0.2);
    z-index: 7;
    top: -10%;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 15px var(--accent-primary);
    animation: glitch-sweep 8s infinite linear;
}

@keyframes glitch-sweep {
    0% {
        top: -10%;
        opacity: 0;
    }

    10% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.5;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

.noise-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.vignette-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    background: radial-gradient(circle, transparent 20%, #050508 110%);
    pointer-events: none;
}

/* Glass Nav Interaction Fixes */
.nav-pane:active {
    transform: scale(0.98);
}

/* Tactile Sliding Navigator */
.nav-value {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}

.shifting-next .nav-value {
    animation: slide-left 0.5s forwards;
}

.shifting-prev .nav-value {
    animation: slide-right 0.5s forwards;
}

@keyframes slide-left {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(-20px);
        opacity: 0;
    }

    51% {
        transform: translateX(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(20px);
        opacity: 0;
    }

    51% {
        transform: translateX(-20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.nav-pane:active {
    background: rgba(255, 157, 0, 0.15) !important;
}

/* Enhanced Glitch for Transitions */
.glitch-flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 157, 0, 0.05);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
}

.trigger-glitch {
    animation: quick-flash 0.3s ease-out;
}

@keyframes quick-flash {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ===========================
   DOMAIN MARQUEE STRIP
   =========================== */

/* Slow this specific marquee down further */
section .animate-marquee {
    animation-duration: 45s;
}

.marquee-word {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 6vw, 7rem);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 3rem;
    line-height: 1;
    display: inline-block;
    user-select: none;
    /* Gradient text: visible charcoal at top → near-black at bottom */
    background: linear-gradient(to bottom, #525252 0%, #141414 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.5s ease;
}

/* Light mode: warm gray top → darker gray bottom */
:root:not(.dark) .marquee-word,
html:not(.dark) .marquee-word {
    background: linear-gradient(to bottom, #c8c8c8 0%, #6a6a6a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.marquee-dot {
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 3rem);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    /* Dot also gets gradient — subtler */
    background: linear-gradient(to bottom, #3a3a3a 0%, #111111 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.5s ease;
}

:root:not(.dark) .marquee-dot,
html:not(.dark) .marquee-dot {
    background: linear-gradient(to bottom, #aaaaaa 0%, #606060 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===========================
   CERTIFICATION CARD SPOTLIGHT
   (Continuous Learning & AI Forward)
   =========================== */

.cl-glow-card {
    /* CSS vars updated by JS on mousemove */
    --x: 50%;
    --y: 50%;
    --orb-opacity: 0;
}

.cl-glow-orb {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    /* Radial glow centered on cursor coords */
    background: radial-gradient(600px circle at var(--x) var(--y),
            rgba(255, 157, 0, 0.12) 0%,
            rgba(255, 208, 0, 0.06) 35%,
            transparent 70%);
    opacity: var(--orb-opacity);
    transition: opacity 0.4s ease;
}

/* Light mode: softer, warmer spotlight */
html:not(.dark) .cl-glow-orb {
    background: radial-gradient(500px circle at var(--x) var(--y),
            rgba(255, 157, 0, 0.08) 0%,
            rgba(255, 208, 0, 0.04) 40%,
            transparent 70%);
}

.cl-glow-card:hover .cl-glow-orb {
    --orb-opacity: 1;
}

/* Ensure card children sit above the orb */
.cl-glow-card>*:not(.cl-glow-orb) {
    position: relative;
    z-index: 1;
}

/* ===========================
   CERTIFICATE THUMBNAIL
   =========================== */

/* Badge pill above the title */
.cert-badge {
    display: inline-block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ff9d00;
    border: 1px solid rgba(255, 157, 0, 0.35);
    padding: 3px 10px;
    margin-bottom: 8px;
    background: rgba(255, 157, 0, 0.06);
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

/* Thumbnail wrapper — clips the image at the card bottom */
.cert-thumb {
    position: absolute;
    bottom: 0;
    right: -14px;
    width: 88%;
    max-width: 360px;
    /* Show top ~58% of the image by default */
    transform: translateY(42%) rotate(-5deg);
    transform-origin: bottom right;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.55s ease,
        opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
    opacity: 0.9;
    filter:
        drop-shadow(0 -8px 20px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 0px rgba(255, 157, 0, 0));
}

/* Hover: slide up, straighten, glow */
.cl-glow-card:hover .cert-thumb {
    transform: translateY(4%) rotate(-1.5deg) scale(1.04);
    opacity: 1;
    filter:
        drop-shadow(0 -12px 28px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 28px rgba(255, 157, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 208, 0, 0.35));
}

/* The actual image */
.cert-thumb-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 1px solid rgba(255, 157, 0, 0.15);
    transition: border-color 0.4s ease;
}

.cl-glow-card:hover .cert-thumb-img {
    border-color: rgba(255, 157, 0, 0.5);
}

/* Shine sweep overlay on hover */
.cert-thumb-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg,
            transparent 30%,
            rgba(255, 255, 255, 0.18) 50%,
            transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-glow-card:hover .cert-thumb-shine {
    transform: translateX(160%);
}

/* =====================================================
   UNIFIED CARD SYSTEM — Stack, Project, Blog
   All cards: sharp corners + animated border + shine
   ===================================================== */

/* ── Force sharp corners on all major card types ── */
.stack-card,
.project-card,
#blogs-scroll-track .glass-card {
    border-radius: 0 !important;
}

/* ── Resting border: match testimonials (white/5% in dark, zinc-200 in light) ── */
.dark .stack-card,
.dark .project-card,
.dark #blogs-scroll-track .glass-card {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── Evolution / Design Journey cards: solid visible background + border ── */
.dark #evolution-track .glass-card {
    background: rgba(10, 10, 15, 0.88) !important;
    border: 1px solid rgba(255, 157, 0, 0.18) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Revolution card (first in the reversed order): slightly stronger accent border */
.dark #evolution-track .group:first-child .glass-card {
    border-color: rgba(255, 157, 0, 0.35) !important;
    background: rgba(10, 10, 15, 0.92) !important;
}

/* Also normalize the internal stack-card sub-dividers in dark mode */
.dark .stack-card [class*="border-r"],
.dark .stack-card [class*="border-b"],
.dark .stack-card [class*="border-t"] {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── Stack-card (Toolkit & Technologies) hover ── */
.stack-card {
    /* NOTE: position:sticky is set in the inline <style> block — do NOT override it */
    overflow: hidden;
    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.stack-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    /* Shine sweep */
    background: linear-gradient(110deg,
            transparent 30%,
            rgba(255, 157, 0, 0.07) 50%,
            transparent 70%);
    transform: translateX(-130%);
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.stack-card:hover::after {
    transform: translateX(140%);
}

.stack-card:hover {
    border-color: rgba(255, 157, 0, 0.55) !important;
    box-shadow:
        0 0 0 1px rgba(255, 157, 0, 0.2),
        0 0 30px rgba(255, 157, 0, 0.12),
        0 8px 40px rgba(0, 0, 0, 0.4);
}

/* ── Project-card (Selected Work bento grid) hover ── */
.project-card {
    position: relative;
    overflow: hidden;
    transition:
        border-color 0.4s ease,
        box-shadow 0.5s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animated border glow overlay */
.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    border: 1px solid transparent;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Shine sweep on project cards */
.project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    background: linear-gradient(115deg,
            transparent 25%,
            rgba(255, 255, 255, 0.07) 50%,
            transparent 75%);
    transform: translateX(-130%);
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover::before {
    border-color: rgba(255, 157, 0, 0.5);
    box-shadow:
        inset 0 0 20px rgba(255, 157, 0, 0.06),
        0 0 0 1px rgba(255, 157, 0, 0.18),
        0 0 35px rgba(255, 157, 0, 0.18);
}

.project-card:hover::after {
    transform: translateX(140%);
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px rgba(255, 157, 0, 0.25),
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 157, 0, 0.1);
}

/* ── Blog / Reading scroll-track cards ── */
#blogs-scroll-track .glass-card,
#blogs-scroll-track .project-card {
    flex-shrink: 0;
    overflow: hidden;
    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#blogs-scroll-track .glass-card:hover,
#blogs-scroll-track .project-card:hover {
    border-color: rgba(255, 157, 0, 0.5) !important;
    box-shadow:
        0 0 0 1px rgba(255, 157, 0, 0.2),
        0 0 30px rgba(255, 157, 0, 0.14),
        0 20px 50px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

/* =====================================================
   PROFESSIONAL SUMMARY — Cinematic Hero Style
   ===================================================== */

.ps-mix-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 20% 50%, rgba(255, 157, 0, 0.15) 0%, transparent 60%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

.ps-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to left, #050508 20%, transparent 80%);
    pointer-events: none;
}

html:not(.dark) .ps-dark-fade {
    background: linear-gradient(to left, #ffffff 20%, transparent 80%);
}

.ps-scanlines {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1));
    background-size: 100% 4px;
    opacity: 0.1;
    pointer-events: none;
}

.ps-noise-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.02;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.ps-vignette-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: radial-gradient(circle, transparent 40%, rgba(5, 5, 8, 0.4) 110%);
    pointer-events: none;
}

html:not(.dark) .ps-vignette-overlay {
    background: radial-gradient(circle, transparent 40%, rgba(255, 255, 255, 0.4) 110%);
}

/* =====================================================
   CONTINUOUS LEARNING — Cinematic Video Background
   ===================================================== */

.cl-video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cl-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 1s ease;
}

.dark .cl-bg-video {
    opacity: 0.6;
}

.cl-mix-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255, 157, 0, 0.1) 0%, transparent 70%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

.cl-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, #050508 0%, transparent 20%, transparent 80%, #050508 100%);
    pointer-events: none;
}

html:not(.dark) .cl-dark-fade {
    background: linear-gradient(to bottom, #ffffff 0%, transparent 20%, transparent 80%, #ffffff 100%);
}

.cl-scanlines {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15));
    background-size: 100% 4px;
    opacity: 0.1;
    pointer-events: none;
}

.cl-noise-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.02;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.cl-vignette-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: radial-gradient(circle, transparent 30%, rgba(5, 5, 8, 0.5) 120%);
    pointer-events: none;
}

html:not(.dark) .cl-vignette-overlay {
    background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.5) 120%);
}

/* Exact Hero Step Panel Glass Style */
.cl-glass-panel {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 157, 0, 0.25) !important;
}

.dark .cl-glass-panel {
    background: rgba(10, 10, 15, 0.5) !important;
}

/* OVERRIDE FOR CINEMATIC PARITY */
.cl-glass-panel {
    background: rgba(10, 10, 15, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 157, 0, 0.25) !important;
    border-radius: 0 !important;
}

.dark .cl-glass-panel {
    background: rgba(10, 10, 15, 0.7) !important;
}

/* =====================================================
   FOOTER SECTION � Cinematic Video Background & Spotlight
   ===================================================== */

.footer-video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.footer-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.footer-mix-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255, 157, 0, 0.1) 0%, transparent 70%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

.footer-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, #050508 -100%, transparent 0%, transparent 70%, #050508 90%);
    pointer-events: none;
}

.footer-scanlines {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15));
    background-size: 100% 4px;
    opacity: 0.1;
    pointer-events: none;
}

.footer-noise-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.02;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Dynamic Footer Spotlight Transition */
.footer-spotlight-overlay {
    transition: background 0.15s ease-out;
}

/* --- CINEMATIC HAMBURGER MENU --- */
.hamburger-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
}

.hamburger-btn:hover {
    background: rgba(255, 157, 0, 0.15);
    border-color: #ff9d00;
}

.hamburger-line {
    width: 20px;
    height: 1.5px;
    background-color: #fff;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger-btn.active .hamburger-line.top {
    transform: translateY(6.5px) rotate(45deg);
}

.hamburger-btn.active .hamburger-line.mid {
    opacity: 0;
    transform: translateX(10px);
}

.hamburger-btn.active .hamburger-line.bot {
    transform: translateY(-6.5px) rotate(-45deg);
}

#full-menu.active {
    opacity: 1;
    pointer-events: auto;
}

#full-menu.active .menu-bg-video {
    transform: scale(1);
}

#full-menu.active .menu-anim {
    opacity: 1;
    transform: translate(0, 0);
}

.menu-link {
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.menu-link span:last-child {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover Text Glow Animation */
.menu-link:hover span:last-child {
    color: #ff9d00 !important;
    letter-spacing: 0.05em;
    animation: menu-text-glow 1.5s infinite alternate;
}

@keyframes menu-text-glow {
    0% {
        text-shadow: 0 0 10px rgba(255, 157, 0, 0.4),
            0 0 20px rgba(255, 157, 0, 0.2);
    }

    100% {
        text-shadow: 0 0 25px rgba(255, 157, 0, 0.9),
            0 0 45px rgba(255, 157, 0, 0.4),
            0 0 65px rgba(255, 157, 0, 0.2);
    }
}

@media (max-width: 768px) {
    .hamburger-btn {
        width: 40px;
        height: 40px;
    }
}

/* --- MOBILE ONLY REFINEMENTS --- */
@media (max-width: 768px) {

    /* Hero Content Position */
    .hero-content {
        margin-top: 0vh;
    }

    /* Darker overlay for better text contrast on mobile */
    .hero-container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(5, 5, 8, 0.3) 0%, rgba(5, 5, 8, 0.6) 50%, rgba(5, 5, 8, 0.9) 100%);
        z-index: 10;
        pointer-events: none;
    }


    /* Precise framing for mobile: adjust percentages to center character */
    .bg-video {
        object-position: 68% 50% !important;
    }

    /* Professional Summary Mobile Refinements */
    .ps-bg-video {
        object-position: 33% 50% !important;
    }

    .ps-vignette-overlay::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(5, 5, 8, 0.4) 0%, rgba(5, 5, 8, 0.8) 100%);
        pointer-events: none;
    }

    /* Continuous Learning Mobile Refinements */
    .cl-bg-video {
        object-position: 70% 50% !important;
    }

    .cl-vignette-overlay::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(5, 5, 8, 0.4);
        pointer-events: none;
    }

    /* Footer Mobile Refinements */
    .footer-bg-video {
        object-position: 50% 50% !important;
    }





    /* Hero Buttons Center */
    .cta-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .cta-button {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    /* Modern Stack Card Mobile UX Refinements */
    .stack-card {
        max-height: none !important;
        /* Remove fixed height/scroll trap */
        overflow: visible !important;
        margin-bottom: 2rem !important;
        height: auto !important;
        position: relative !important;
        /* Stack naturally on mobile */
        top: 0 !important;
    }

    /* Keep the card headers sticky so categories are always clear */
    .stack-card>div:nth-child(2)>div:first-child {
        position: sticky !important;
        top: 70px !important;
        /* Sits below the main toolkit header */
        z-index: 40 !important;
        background: #0c0c0e !important;
        border-bottom: 1px solid rgba(255, 157, 0, 0.25) !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Adjust the main toolkit section header to not eat too much space */
    #toolkit-section .sticky.top-0 {
        padding-top: 1.5rem !important;
        padding-bottom: 1rem !important;
    }


    /* Remove excessive section gap on mobile */
    [class*="pb-[80vh]"] {
        padding-bottom: 10vh !important;
    }

    /* Career Evolution Mobile UX: Convert to Vertical Timeline */
    #evolution-container {
        height: auto !important;
        padding: 5rem 0 !important;
        overflow: visible !important;
    }

    #evolution-container .sticky {
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        display: block !important;
        overflow: visible !important;
    }

    #evolution-track {
        flex-direction: column !important;
        width: 100% !important;
        transform: none !important;
        padding: 0 1.5rem !important;
        margin: 0 !important;
    }

    #evolution-track>.relative {
        flex-direction: column !important;
        gap: 3rem !important;
        padding-left: 2rem !important;
        border-left: 2px solid rgba(255, 157, 0, 0.15);
        margin-left: 1rem !important;
    }

    #evolution-track .absolute.top-0.left-0.right-0.h-\[2px\] {
        display: none !important;
    }

    #evolution-track .w-\[85vw\],
    #evolution-track .md\:w-\[45vw\] {
        width: 100% !important;
        flex-shrink: 1 !important;
        padding-top: 0 !important;
    }

    #evolution-track .absolute.top-0.left-0.w-12.h-12 {
        left: -2rem !important;
        top: 0.5rem !important;
        width: 30px !important;
        height: 30px !important;
        margin-top: 0 !important;
        transform: translateX(-50%);
        border-width: 2px !important;
    }

    #evolution-track .glass-card {
        padding: 1.5rem !important;
    }

    #evolution-track h4 {
        font-size: 1.25rem !important;
    }
}