/* Shared visual system for the hackathon mini-site */

.hackathon-body {
    --h-navy: #07111e;
    --h-mid: #0d1b2e;
    --h-surface: rgba(13, 27, 46, 0.82);
    --h-surface-strong: rgba(8, 17, 30, 0.96);
    --h-black: #050a12;
    --h-white: #f8fbff;
    --h-cobalt: #2e5bff;
    --h-cyan: #00d5ff;
    --h-cyan-soft: rgba(0, 213, 255, 0.14);
    --h-neon-green: #46ff9a;
    --h-neon-green-soft: rgba(70, 255, 154, 0.18);
    --h-gray: #8ea3ba;
    --h-gray-soft: #bfd0df;
    --h-border: 1px solid rgba(255, 255, 255, 0.09);
    --h-border-strong: 1px solid rgba(255, 255, 255, 0.16);
    --h-radius-card: 24px;
    --h-radius-soft: 18px;
    font-family: 'Inter', sans-serif;
    color: var(--h-white);
    background:
        radial-gradient(circle at top left, rgba(0, 213, 255, 0.08), transparent 34%),
        radial-gradient(circle at top right, rgba(46, 91, 255, 0.09), transparent 28%),
        linear-gradient(180deg, #07111e 0%, #091423 38%, #050a12 100%);
    min-height: 100vh;
}

.hackathon-body nav {
    background: rgba(7, 17, 30, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

#mobile-nav {
    background:
        linear-gradient(180deg, rgba(7, 17, 30, 0.98), rgba(8, 17, 30, 0.98)),
        radial-gradient(circle at top right, rgba(0, 213, 255, 0.08), transparent 28%);
    backdrop-filter: blur(20px);
}

.hackathon-body footer {
    background:
        linear-gradient(180deg, rgba(7, 17, 30, 0.96), rgba(5, 10, 18, 1));
}

.hackathon-body div[class*='border'][class*='bg-']:not([class*='rounded-full']):not([class*='rounded-2xl']):not([class*='absolute']):not([class*='hero-tech-grid']):not([class*='scanline']) {
    border-radius: var(--h-radius-card);
}

.hackathon-body a[class*='border'][class*='bg-']:not([class*='rounded-full']) {
    border-radius: var(--h-radius-card);
}

.hackathon-body span[class*='border'][class*='bg-']:not([class*='rounded-full']) {
    border-radius: var(--h-radius-soft);
}

.hackathon-body button[class*='border'][class*='bg-']:not([class*='rounded-full']) {
    border-radius: 16px;
}

.hackathon-body iframe {
    border-radius: inherit;
}

#mobile-nav {
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
}

.hackathon-body footer .grid > div {
    padding: clamp(1.4rem, 2vw, 1.8rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(13, 27, 46, 0.48), rgba(5, 10, 18, 0.72));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.hackathon-body footer .grid > div a[class*='w-10'] {
    border-radius: 16px;
}

.hero-heading {
    font-size: clamp(3.2rem, 8vw, 6.8rem);
    line-height: 0.92;
    letter-spacing: -0.055em;
    font-weight: 900;
    text-transform: uppercase;
}

.section-heading {
    font-size: clamp(2.15rem, 4vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
    text-transform: uppercase;
}

.text-cyan {
    color: var(--h-cyan);
}

.border-cyan {
    border-color: var(--h-cyan);
}

.bg-cyan {
    background-color: var(--h-cyan);
}

.bg-cyan-dim {
    background-color: var(--h-cyan-soft);
}

.btn-brutal {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.45rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.btn-cyan {
    background: linear-gradient(135deg, #00d5ff, #62e6ff);
    color: #05101b;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 28px rgba(0, 213, 255, 0.22);
}

.btn-cyan:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(0, 213, 255, 0.28);
    background: linear-gradient(135deg, #3be0ff, #96eeff);
    color: #04111c;
}

.btn-cyan:active {
    transform: translateY(0);
    box-shadow: 0 10px 18px rgba(0, 213, 255, 0.18);
}

.btn-outline {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--h-white);
    border: var(--h-border-strong);
}

.btn-outline:hover {
    border-color: rgba(0, 213, 255, 0.4);
    color: var(--h-white);
    background-color: rgba(0, 213, 255, 0.08);
    transform: translateY(-2px);
}

.bento-grid {
    display: grid;
    gap: 1.25rem;
    background: transparent;
    border: none;
}

.bento-item {
    background:
        linear-gradient(180deg, rgba(14, 27, 46, 0.94), rgba(6, 12, 22, 0.98));
    padding: clamp(2rem, 4vw, 3rem);
    position: relative;
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
}

.bento-item:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 213, 255, 0.34);
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.24);
}

.bento-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: var(--h-cyan);
    font-size: 1.25rem;
    margin-bottom: 1.6rem;
    transition: transform 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
}

.bento-item:hover .bento-icon {
    transform: translateY(-2px);
    border-color: rgba(0, 213, 255, 0.3);
    background-color: rgba(0, 213, 255, 0.08);
}

.tactile-layer {
    position: relative;
}

.tactile-layer::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    z-index: -1;
    transition: border-color 0.24s ease, transform 0.24s ease;
    pointer-events: none;
}

.tactile-layer:hover::before {
    border-color: rgba(0, 213, 255, 0.16);
    transform: translateY(-2px);
}

.hero-abstract-bg {
    background:
    radial-gradient(980px 540px at 12% -8%, rgba(0, 213, 255, 0.1) 0%, rgba(0, 213, 255, 0) 62%),
    radial-gradient(780px 460px at 94% 6%, rgba(46, 91, 255, 0.12) 0%, rgba(46, 91, 255, 0) 66%),
    linear-gradient(180deg, #06101d 0%, #071325 55%, #050a13 100%);
}

.hero-tech-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 213, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 213, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 18% 34%, rgba(0, 213, 255, 0.12) 0 1.2px, transparent 2px),
        radial-gradient(circle at 72% 60%, rgba(0, 213, 255, 0.1) 0 1.2px, transparent 2px);
        background-size: 84px 84px, 84px 84px, 100% 100%, 100% 100%;
    background-position: center;
        transform: perspective(700px) rotateX(7deg) scale(1.02);
    transform-origin: center;
    pointer-events: none;
        -webkit-mask-image: radial-gradient(ellipse 88% 86% at 52% 50%, rgba(0, 0, 0, 1) 12%, transparent 84%);
            mask-image: radial-gradient(ellipse 88% 86% at 52% 50%, rgba(0, 0, 0, 1) 12%, transparent 84%);
        animation: gridScroll 40s linear infinite;
}

.hero-tech-wave {
    position: absolute;
    inset: -14% -10%;
    pointer-events: none;
    background:
        linear-gradient(122deg, rgba(0, 213, 255, 0.11), rgba(0, 213, 255, 0) 42%),
        radial-gradient(60% 56% at 78% 48%, rgba(46, 91, 255, 0.1), transparent 74%);
    mix-blend-mode: screen;
    opacity: 0.26;
    filter: blur(10px);
    animation: heroWaveDrift 28s ease-in-out infinite alternate;
}

.hero-tech-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.035) 0.7px, transparent 0.7px);
    background-size: 4px 4px;
    opacity: 0.08;
    mix-blend-mode: soft-light;
}

.hero-tech-beam {
    position: absolute;
    top: -18%;
    bottom: -18%;
    width: clamp(160px, 24vw, 360px);
    pointer-events: none;
    opacity: 0.2;
    --hero-beam-skew: -14deg;
    filter: blur(1px);
    background: linear-gradient(180deg, rgba(0, 213, 255, 0) 0%, rgba(0, 213, 255, 0.12) 24%, rgba(0, 213, 255, 0.04) 62%, rgba(0, 213, 255, 0) 100%);
    animation: heroBeamShift 16s ease-in-out infinite alternate;
}

.hero-tech-beam-left {
    left: 6%;
    --hero-beam-skew: -14deg;
    transform: skewX(var(--hero-beam-skew));
}

.hero-tech-beam-right {
    right: 2%;
    --hero-beam-skew: -16deg;
    transform: skewX(var(--hero-beam-skew));
    opacity: 0.16;
    animation-delay: 0.7s;
}

.hero-graph-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image:
        radial-gradient(circle at 14% 20%, rgba(0, 213, 255, 0.22) 0 1.3px, transparent 2px),
        radial-gradient(circle at 28% 58%, rgba(0, 213, 255, 0.2) 0 1.2px, transparent 2px),
        radial-gradient(circle at 44% 34%, rgba(0, 213, 255, 0.16) 0 1.15px, transparent 2px),
        radial-gradient(circle at 62% 50%, rgba(0, 213, 255, 0.18) 0 1.2px, transparent 2px),
        radial-gradient(circle at 78% 24%, rgba(0, 213, 255, 0.2) 0 1.25px, transparent 2px),
        radial-gradient(circle at 86% 64%, rgba(0, 213, 255, 0.18) 0 1.15px, transparent 2px),
        linear-gradient(121deg, transparent 0 18%, rgba(0, 213, 255, 0.09) 18.4% 18.7%, transparent 19.1% 100%),
        linear-gradient(145deg, transparent 0 31%, rgba(0, 213, 255, 0.08) 31.35% 31.65%, transparent 32% 100%),
        linear-gradient(98deg, transparent 0 45%, rgba(0, 213, 255, 0.08) 45.3% 45.58%, transparent 45.95% 100%),
        linear-gradient(62deg, transparent 0 60%, rgba(0, 213, 255, 0.08) 60.25% 60.55%, transparent 60.9% 100%);
    -webkit-mask-image: radial-gradient(ellipse 86% 86% at 50% 50%, rgba(0, 0, 0, 1) 0%, transparent 88%);
            mask-image: radial-gradient(ellipse 86% 86% at 50% 50%, rgba(0, 0, 0, 1) 0%, transparent 88%);
    animation: graphMeshDrift 22s ease-in-out infinite alternate;
}

.hero-graph-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.34;
    mix-blend-mode: screen;
}

@keyframes graphMeshDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(-12px, 8px, 0) scale(1.02);
    }
}

@keyframes gridScroll {
    0% {
        background-position: 0 0, 0 0, center, center;
        transform: perspective(700px) rotateX(7deg) scale(1.02) translateY(0);
    }
    100% {
        background-position: 0 84px, 84px 0, center, center;
        transform: perspective(700px) rotateX(7deg) scale(1.02) translateY(6px);
    }
}

@keyframes heroWaveDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(-10px, 8px, 0) scale(1.02);
    }
}

@keyframes heroBeamShift {
    0% {
        transform: translateX(0) skewX(var(--hero-beam-skew));
        opacity: 0.12;
    }
    100% {
        transform: translateX(9px) skewX(var(--hero-beam-skew));
        opacity: 0.24;
    }
}

@media (max-width: 767px) {
    .hero-tech-grid {
        transform: none;
        -webkit-mask-image: radial-gradient(ellipse 112% 92% at 50% 38%, rgba(0, 0, 0, 1) 8%, transparent 86%);
                mask-image: radial-gradient(ellipse 112% 92% at 50% 38%, rgba(0, 0, 0, 1) 8%, transparent 86%);
        animation-duration: 46s;
    }

    .hero-tech-wave {
        opacity: 0.14;
        filter: blur(8px);
    }

    .hero-tech-noise,
    .hero-tech-beam {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-tech-grid,
    .hero-tech-wave,
    .hero-tech-beam,
    .hero-logo-ticker {
        animation: none !important;
    }
}

.scanline {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 213, 255, 0.018) 51%, transparent 51%);
    background-size: 100% 6px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.28;
}

.hero-circuit-line {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 38%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 213, 255, 0.3), transparent);
    opacity: 0.32;
    animation: heroCircuitPulse 7s ease-in-out infinite;
    pointer-events: none;
}

.hero-tech-orb {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(0, 213, 255, 0.9);
    box-shadow: 0 0 14px rgba(0, 213, 255, 0.75);
    pointer-events: none;
}

.hero-tech-orb-one {
    left: 10%;
    top: 34%;
    animation: heroOrbFloat 8s ease-in-out infinite;
}

.hero-tech-orb-two {
    right: 12%;
    top: 62%;
    animation: heroOrbFloat 9s ease-in-out infinite reverse;
}

@keyframes heroCircuitPulse {
    0%, 100% { opacity: 0.18; }
    50% { opacity: 0.36; }
}

@keyframes heroOrbFloat {
    0%, 100% { transform: translateY(0px); opacity: 0.55; }
    50% { transform: translateY(-12px); opacity: 0.95; }
}

.hero-shell {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-shell {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: center;
    }

    .hero-shell.hero-shell-single {
        grid-template-columns: 1fr;
        max-width: 860px;
    }
}

.hero-copy {
    text-align: left;
}

/* Reduce heading on desktop so it fits the 50 % column */
@media (min-width: 1024px) {
    .hero-heading {
        font-size: clamp(2.4rem, 4.2vw, 5rem);
    }
}

/* Hero partner logo ticker */
.hero-logo-bar {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    overflow: hidden;
}

.hero-logo-ticker {
    min-height: 144px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 0;
    width: max-content;
    animation: heroLogoTickerLTR 20s linear infinite;
    will-change: transform;
}

.hero-logo-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 0.8rem;
}

.hero-logo-item {
    width: clamp(130px, 13vw, 170px);
    height: 100px;
    padding: 0.55rem;
    border-radius: 12px;
    background: rgba(9, 20, 36, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-logo-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes heroLogoTickerLTR {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0%);
    }
}

@media (max-width: 767px) {
    .hero-logo-ticker {
        min-height: 122px;
        animation-duration: 16s;
        gap: 1rem;
    }

    .hero-logo-item {
        width: 124px;
        height: 84px;
    }
}

.hero-collab-note {
    margin-bottom: 0.85rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--h-gray-soft);
}

.hero-title-static {
    display: block;
    color: var(--h-white);
}

.hero-anantapur {
    color: var(--h-cyan);
}

.hero-loop-wrap {
    display: inline-flex;
    align-items: baseline;
    margin-top: 0.25rem;
    min-width: 13.25ch;
    min-height: 1em;
}

.hero-loop-text {
    display: inline-block;
    width: 0ch;
    overflow: hidden;
    white-space: nowrap;
    color: var(--h-white);
    animation: heroTypeLoop 4.8s steps(13, end) infinite;
}

.hero-loop-hackathon,
.hero-loop-year {
    display: inline;
}

.hero-type-caret {
    display: inline-block;
    width: 2px;
    height: 0.9em;
    margin-left: 0.15em;
    background: var(--h-cyan);
    vertical-align: baseline;
    animation: typeCaretBlink 0.9s steps(1) infinite;
    box-shadow: 0 0 10px rgba(0, 213, 255, 0.6);
}

@media (max-width: 767px) {
    .hero-loop-wrap {
        display: inline-flex;
        align-items: flex-start;
        min-width: 9.5ch;
        min-height: 2em;
    }

    .hero-loop-text {
        display: inline-flex;
        flex-direction: column;
        width: auto;
        overflow: visible;
        white-space: normal;
        line-height: 0.92;
        animation: none;
        min-height: 1.84em;
    }

    .hero-loop-hackathon {
        display: inline-block;
        width: 0ch;
        overflow: hidden;
        white-space: nowrap;
        animation: heroTypeLoopMobile 4.8s steps(9, end) infinite;
    }

    .hero-loop-hackathon::after {
        content: '';
        display: inline-block;
        width: 2px;
        height: 0.9em;
        margin-left: 0.15em;
        background: var(--h-cyan);
        vertical-align: baseline;
        animation: typeCaretBlink 0.9s steps(1) infinite;
        box-shadow: 0 0 10px rgba(0, 213, 255, 0.6);
    }

    .hero-loop-year {
        display: block;
        width: 0ch;
        overflow: hidden;
        white-space: nowrap;
        animation: heroTypeLoopMobileYear 4.8s steps(4, end) infinite;
        animation-delay: 0.35s;
    }

    .hero-loop-year::after {
        content: '';
        display: inline-block;
        width: 2px;
        height: 0.9em;
        margin-left: 0.15em;
        background: var(--h-cyan);
        vertical-align: baseline;
        animation: typeCaretBlink 0.9s steps(1) infinite;
        box-shadow: 0 0 10px rgba(0, 213, 255, 0.6);
    }

    .hero-type-caret {
        display: none;
    }
}

@keyframes heroTypeLoopMobile {
    0%, 10% { width: 0ch; }
    38%, 68% { width: 9ch; }
    100% { width: 0ch; }
}

@keyframes heroTypeLoopMobileYear {
    0%, 16% { width: 0ch; }
    44%, 68% { width: 4ch; }
    100% { width: 0ch; }
}

@keyframes heroTypeLoop {
    0%, 10% { width: 0ch; }
    38%, 68% { width: 13ch; }
    100% { width: 0ch; }
}

@keyframes typeCaretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.hero-event-subtag {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: var(--h-gray-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-event-subtag i {
    color: var(--h-cyan);
}

.hero-event-subtag a {
    color: var(--h-cyan);
    text-decoration: none;
}

.hero-event-subtag a:hover {
    color: var(--h-white);
}

.hero-kicker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--h-gray-soft);
}

.hero-chip i {
    color: var(--h-cyan);
}

.hero-sub {
    max-width: 690px;
    margin-bottom: 2rem;
    color: var(--h-gray-soft);
}

.hero-panel {
    position: relative;
    border-radius: 30px;
    padding: 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(13, 27, 46, 0.94), rgba(5, 10, 18, 0.98));
    box-shadow: 0 32px 56px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.hero-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(0, 213, 255, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(46, 91, 255, 0.14), transparent 52%);
    pointer-events: none;
}

.hero-panel-inner {
    position: relative;
    z-index: 1;
}

.hero-panel-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h-cyan);
}

.hero-panel-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--h-cyan);
    box-shadow: 0 0 16px rgba(0, 213, 255, 0.75);
}

.hero-panel-title {
    margin-bottom: 0.55rem;
    font-size: clamp(1.6rem, 3vw, 2.45rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--h-white);
}

.hero-panel-sub {
    margin-bottom: 1.25rem;
    color: var(--h-gray);
    font-size: 0.96rem;
    line-height: 1.7;
}

.hero-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.hero-panel-stat {
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.hero-panel-stat-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--h-gray);
}

.hero-panel-stat-value {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--h-white);
}

.hero-brief {
    padding: 1rem 1.1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.hero-brief-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-brief-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.hero-brief-index {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: rgba(0, 213, 255, 0.12);
    color: var(--h-cyan);
    font-size: 0.72rem;
    font-weight: 800;
}

.hero-brief-copy strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--h-white);
}

.hero-brief-copy span {
    color: var(--h-gray);
    font-size: 0.84rem;
    line-height: 1.65;
}

.hero-partners {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.hero-partner-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--h-gray-soft);
}

.hero-partner-tag i {
    color: var(--h-cyan);
}

.schedule-shell {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(70, 255, 154, 0.07), transparent 26%),
        linear-gradient(180deg, rgba(10, 20, 34, 0.96), rgba(5, 10, 18, 0.98));
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.24);
    padding: clamp(1.2rem, 2vw, 1.8rem);
}

.schedule-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.schedule-summary-card {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem 1.05rem;
    min-width: 0;
}

.schedule-summary-card strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--h-white);
}

.schedule-timeline {
    position: relative;
    display: grid;
    gap: 0.9rem;
    padding-left: 4.25rem;
}

.schedule-timeline::before,
.neon-timeline-progress {
    content: '';
    position: absolute;
    left: 1.2rem;
    top: 0.5rem;
    width: 2px;
    border-radius: 999px;
}

.schedule-timeline::before {
    bottom: 0.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
}

.neon-timeline-progress {
    height: 0;
    background: linear-gradient(180deg, rgba(70, 255, 154, 0.95), rgba(70, 255, 154, 0.18));
    box-shadow: 0 0 6px rgba(70, 255, 154, 0.95), 0 0 18px rgba(70, 255, 154, 0.45), 0 0 30px rgba(70, 255, 154, 0.22);
    transition: height 2.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

.schedule-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.schedule-item::before {
    content: '';
    position: absolute;
    left: -3rem;
    top: 1.15rem;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(70, 255, 154, 0.92);
    background: rgba(70, 255, 154, 0.95);
    box-shadow: 0 0 0 3px rgba(70, 255, 154, 0.08), 0 0 12px rgba(70, 255, 154, 0.5), 0 0 24px rgba(70, 255, 154, 0.25);
    z-index: 2;
}

.schedule-item.is-key::before {
    width: 10px;
    height: 10px;
    left: -3rem;
    border: 1px solid rgba(70, 255, 154, 0.92);
    background: rgba(70, 255, 154, 0.95);
    box-shadow: 0 0 0 3px rgba(70, 255, 154, 0.08), 0 0 12px rgba(70, 255, 154, 0.5), 0 0 24px rgba(70, 255, 154, 0.25);
}

.schedule-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    border-radius: 18px;
    border: 1px solid rgba(70, 255, 154, 0.18);
    background: rgba(70, 255, 154, 0.06);
    padding: 0.95rem 1rem;
    color: var(--h-neon-green);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
}

.schedule-card {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(13, 27, 46, 0.92), rgba(7, 17, 30, 0.98));
    padding: 1.1rem 1.2rem;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

.schedule-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.65rem;
}

.schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.4rem 0.72rem;
    background: rgba(70, 255, 154, 0.08);
    border: 1px solid rgba(70, 255, 154, 0.16);
    color: var(--h-neon-green);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.schedule-item.is-key .schedule-card {
    border-color: rgba(70, 255, 154, 0.28);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(70, 255, 154, 0.08);
}

.neon-timeline-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.neon-timeline-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1023px) {
    .hero-panel {
        padding: 1.25rem;
    }

    .schedule-summary {
        grid-template-columns: 1fr;
    }

    .schedule-item {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .schedule-time {
        justify-content: flex-start;
        width: fit-content;
    }
}

@media (max-width: 768px) {
    .roadmap-container {
        padding: 2rem;
        overflow: visible;
    }

    #timeline-progress {
        display: none;
    }

    .roadmap-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        position: relative;
    }

    .roadmap-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        width: 4px;
        background: rgba(255, 255, 255, 0.1);
        z-index: 0;
    }

    .roadmap-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 20px;
        width: 4px;
        background: var(--h-cyan);
        box-shadow: 0 0 10px var(--h-cyan);
        z-index: 1;
        transition: height 2s ease-out;
    }

    .roadmap-wrapper.animate-mobile-line::after {
        height: 65%;
    }

    .timeline-node {
        flex-direction: row !important;
        text-align: left !important;
        align-items: flex-start !important;
        position: relative;
        z-index: 10;
        width: 100%;
        opacity: 1 !important;
        transform: none !important;
    }

    .timeline-node > span {
        position: absolute;
        left: 60px;
        top: 0;
        height: auto;
        margin-bottom: 0;
    }

    .timeline-node > div {
        margin-bottom: 0 !important;
        margin-left: 12px;
    }

    .timeline-node > h4 {
        margin-left: 20px;
        margin-top: 20px;
    }

    .hero-panel-grid {
        grid-template-columns: 1fr;
    }

    .hero-collab-note {
        letter-spacing: 0.16em;
    }

    .hero-event-subtag {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }

    .schedule-shell {
        border-radius: 24px;
        padding: 1rem;
    }

    .schedule-timeline {
        padding-left: 3rem;
        gap: 0.75rem;
    }

    .schedule-timeline::before,
    .neon-timeline-progress {
        left: 0.9rem;
    }

    .schedule-item::before {
        left: -2.28rem;
        top: 1.05rem;
        width: 9px;
        height: 9px;
    }

    .schedule-item.is-key::before {
        left: -2.28rem;
        width: 9px;
        height: 9px;
    }

    .schedule-card {
        border-radius: 20px;
        padding: 1rem;
    }

    .schedule-card-head {
        flex-direction: column;
        gap: 0.6rem;
    }
}

.welcome-swiper {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.swiper-pagination-bullet {
    background-color: var(--h-white);
    opacity: 0.28;
}

.swiper-pagination-bullet-active {
    background-color: var(--h-cyan);
    opacity: 1;
}

.usecase-img {
    filter: grayscale(38%) contrast(1.08) brightness(0.84);
    transition: filter 0.45s ease, transform 0.45s ease;
}

.usecase-card:hover .usecase-img {
    filter: grayscale(0%) contrast(1.02) brightness(1);
    transform: scale(1.08);
}

#scrollTopBtn {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .neon-timeline-progress,
    .neon-timeline-item {
        transition: none;
    }

    .hero-type-caret {
        animation: none;
    }

    .hero-tech-grid,
    .hero-graph-mesh,
    .hero-circuit-line,
    .hero-tech-orb {
        animation: none;
    }

    .hero-graph-canvas {
        display: none;
    }

    .hero-loop-text {
        animation: none;
        width: 13ch;
    }
}

/* Keep media in full color and remove visual overlays for hackathon images/maps. */
.hackathon-body img {
    filter: none !important;
    opacity: 1 !important;
}

.hackathon-body .usecase-img {
    filter: none !important;
    transition: transform 0.5s ease !important;
}

.hackathon-body .usecase-card:hover .usecase-img {
    filter: none !important;
    transform: scale(1.08) !important;
}

.hackathon-body .mix-blend-overlay {
    display: none !important;
}

.hackathon-body [class*='shadow-['] {
    box-shadow: none !important;
}

#venue .absolute.inset-0 {
    filter: none !important;
    opacity: 1 !important;
}