:root {
    --red: #ff1018;
    --cyan: #00f5e6;
    --blue: #2d6db7;
    --pink: #ff166a;
    --yellow: #ffd72e;
    --black: #171719;
    --paper: #e9e6dc;
    --white: #f7f5ee;
    --ink: #111114;
    --ease: cubic-bezier(.16, 1, .3, 1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #07080b;
    color: var(--white);
    font-family: Inter, Arial, sans-serif;
    overflow-x: hidden
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

.noise {
    position: fixed;
    inset: -50%;
    z-index: 2000;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: n .17s steps(2) infinite
}

@keyframes n {
    25% {
        transform: translate(2%, -1%)
    }

    50% {
        transform: translate(-1%, 2%)
    }

    75% {
        transform: translate(1%, 1%)
    }
}

body:after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1999;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px);
    mix-blend-mode: screen
}

.cursor {
    position: fixed;
    z-index: 2100;
    width: 28px;
    height: 28px;
    border: 1px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference
}

.cursor:after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    left: 12px;
    top: 12px
}

.intro {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: var(--paper);
    color: var(--ink);
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: transform 1.3s var(--ease), clip-path 1.3s var(--ease), opacity .5s
}

.intro.out {
    transform: perspective(1400px) rotateY(-16deg) rotateX(5deg) translate3d(110vw, -4vh, 0) scale(.7, .8);
    clip-path: polygon(0 4%, 100% 13%, 100% 88%, 0 100%);
    opacity: 0
}

.intro-paper {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, #000, transparent 75%)
}

.ink {
    position: absolute;
    width: 55vw;
    height: 55vw;
    border-radius: 50%;
    filter: blur(1px);
    opacity: .13;
    mix-blend-mode: multiply
}

.ink-red {
    background: var(--red);
    right: -20vw;
    top: -20vw
}

.ink-cyan {
    background: var(--cyan);
    left: -22vw;
    bottom: -22vw
}

.intro-meta,
.intro-issue {
    position: absolute;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .25em;
    color: #555
}

.intro-meta {
    top: 25px;
    left: 30px
}

.intro-issue {
    top: 25px;
    right: 30px;
    text-align: right
}

.intro-stage {
    text-align: center;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-direction: column
}

.panel-tag {
    background: var(--red);
    color: #fff;
    padding: 6px 13px;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .24em;
    transform: rotate(-2deg);
    box-shadow: 6px 5px 0 var(--cyan);
    margin-bottom: 15px
}

.logo-stack {
    width: min(240px, 50vw);
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center
}

.logo-stack img,
.ghost {
    position: absolute;
    width: 90%;
    height: 90%;
    object-fit: contain
}

.logo-stack img {
    z-index: 3
}

.ghost {
    background: url("assets/vidyuttam-full-logo-transparent.png") center/contain no-repeat;
    mix-blend-mode: multiply;
    opacity: .55
}

.g-red {
    filter: sepia(1) saturate(8) hue-rotate(315deg);
    transform: translate(7px, 0);
    animation: ghost 1.4s steps(2) infinite
}

.g-cyan {
    filter: sepia(1) saturate(7) hue-rotate(120deg);
    transform: translate(-7px, 0);
    animation: ghost 1.9s steps(2) infinite reverse
}

@keyframes ghost {

    0%,
    78%,
    100% {
        opacity: .08
    }

    80% {
        opacity: .65
    }

    84% {
        opacity: .15
    }

    89% {
        opacity: .55
    }
}

.intro-title {
    font: 400 clamp(60px, 9vw, 130px) "Anton";
    line-height: .72;
    letter-spacing: -.03em;
    text-shadow: 5px 0 var(--red), -5px 0 var(--cyan)
}

.intro-six {
    font: 400 clamp(65px, 8vw, 110px) "Bangers";
    line-height: .75;
    color: var(--red);
    text-shadow: 4px 4px 0 var(--cyan);
    transform: rotate(-3deg);
    margin-left: 18vw
}

.intro-six span {
    color: #111
}

.intro-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .3em;
    color: #666;
    margin-top: 17px
}

.intro-line i {
    width: 50px;
    height: 1px;
    background: #888
}

.intro-stage button {
    margin-top: 32px;
    border: 2px solid var(--ink);
    background: transparent;
    padding: 14px 20px;
    cursor: pointer;
    font: 800 10px "Barlow Condensed";
    letter-spacing: .23em;
    box-shadow: 5px 5px 0 var(--ink);
    transition: .25s
}

.intro-stage button:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    box-shadow: 5px 5px 0 var(--cyan)
}

.comic-sfx {
    position: absolute;
    font: 400 55px Bangers;
    color: var(--red);
    text-shadow: 4px 4px 0 var(--cyan);
    opacity: .8
}

.sfx1 {
    left: 8%;
    top: 30%;
    transform: rotate(-15deg)
}

.sfx2 {
    right: 7%;
    bottom: 28%;
    transform: rotate(13deg);
    color: var(--blue)
}

.scribble {
    position: absolute;
    right: 3%;
    top: 15%;
    font: 700 30px "Barlow Condensed";
    letter-spacing: -.25em;
    color: #111;
    transform: rotate(74deg)
}

.intro-bottom {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 25px;
    display: flex;
    justify-content: space-between;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .25em;
    color: #666
}

.site {
    opacity: 0;
    transform: scale(1.025);
    transition: opacity .8s .2s, transform 1.2s var(--ease)
}

body.ready .site {
    opacity: 1;
    transform: none
}

header {
    position: fixed;
    z-index: 900;
    top: 0;
    left: 0;
    right: 0;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    background: linear-gradient(#07080bf2, transparent);
    backdrop-filter: blur(5px)
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 800 12px "Barlow Condensed";
    letter-spacing: .16em
}

.brand>span {
    width: 32px;
    height: 32px;
    border: 1px solid #666;
    display: grid;
    place-items: center;
    color: var(--cyan);
    font: 400 20px Anton;
    box-shadow: 3px 0 var(--red)
}

.brand em {
    font-style: normal;
    color: var(--red)
}

nav {
    display: flex;
    gap: 32px;
    font: 800 11px "Barlow Condensed";
    letter-spacing: .24em;
    align-items: center;
}

nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8f96a3;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
}

nav a:hover,
nav a.active {
    color: #fff;
}

/* Glowing red dot indicator before active nav item */
nav a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 10px var(--red), 0 0 4px #ff166a;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
    flex-shrink: 0;
}

nav a.active::before {
    opacity: 1;
    transform: scale(1);
}

nav a.active {
    border-bottom-color: var(--red);
}

.menu {
    width: 43px;
    height: 38px;
    background: #101114;
    border: 1px solid #444;
    display: grid;
    place-content: center;
    gap: 5px
}

.menu i {
    display: block;
    width: 18px;
    height: 1px;
    background: #fff
}

.hero {
    height: 100vh;
    min-height: 760px;
    position: relative;
    overflow: hidden;
    background: #07080b
}

.hero-paper {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 40%, rgba(45, 109, 183, .3), transparent 27%), linear-gradient(180deg, #05070b, #0a1525 58%, #050609)
}

.hero-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(90deg, #000, transparent 78%)
}

.paint {
    position: absolute;
    filter: blur(1px);
    opacity: .2;
    mix-blend-mode: screen
}

.p1 {
    width: 55vw;
    height: 15vw;
    right: -10vw;
    top: 25%;
    background: var(--red);
    transform: rotate(-9deg)
}

.p2 {
    width: 50vw;
    height: 12vw;
    right: -5vw;
    top: 33%;
    background: var(--cyan);
    transform: rotate(7deg)
}

.p3 {
    width: 35vw;
    height: 9vw;
    left: -10vw;
    bottom: 20%;
    background: var(--pink);
    transform: rotate(-14deg)
}

.web-web {
    position: absolute;
    width: 90vw;
    height: 90vw;
    right: -20vw;
    top: -15vw;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 9vw rgba(255, 255, 255, .012), 0 0 0 18vw rgba(255, 255, 255, .01)
}

.hero-sticker {
    position: absolute;
    z-index: 7;
    border: 2px solid #fff;
    background: var(--red);
    color: #fff;
    font: 400 24px Bangers;
    line-height: .8;
    padding: 10px;
    box-shadow: 7px 7px 0 var(--cyan);
    transform: rotate(-8deg)
}

.sticker-a {
    left: 7vw;
    top: 18%
}

.sticker-b {
    right: 7vw;
    top: 16%;
    background: var(--yellow);
    color: #111;
    box-shadow: 6px 6px 0 var(--pink);
    font-size: 18px;
    transform: rotate(7deg)
}

.hero-left {
    position: absolute;
    z-index: 8;
    left: 8vw;
    top: 50%;
    transform: translateY(-40%);
    max-width: 650px
}

.eyebrow {
    font: 800 10px "Barlow Condensed";
    letter-spacing: .3em;
    color: var(--cyan);
    display: flex;
    gap: 10px;
    align-items: center
}

.eyebrow span {
    width: 25px;
    height: 2px;
    background: var(--red)
}

.hero h1 {
    font: 400 clamp(85px, 12vw, 170px) "Anton";
    line-height: .68;
    letter-spacing: -.04em;
    margin: 20px 0
}

.hero h1 span,
.hero h1 strong {
    display: block
}

.hero h1 strong {
    color: var(--red);
    font-weight: 400;
    text-shadow: 5px 0 var(--cyan), -5px 0 var(--pink)
}

.hero-left p {
    max-width: 480px;
    color: #9a9fa8;
    line-height: 1.7;
    font-size: 13px
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    min-height: 48px;
    padding: 0 20px;
    font: 800 10px "Barlow Condensed";
    letter-spacing: .2em;
    border: 1px solid #555;
    transition: .3s var(--ease)
}

.btn.red {
    background: var(--red);
    border-color: var(--red)
}

.btn.dark {
    background: #0a0c10
}

.btn:hover {
    transform: translate(-4px, -4px);
    box-shadow: 5px 5px 0 var(--cyan)
}

.btn b {
    font-size: 15px
}

.hero-v {
    position: absolute;
    z-index: 6;
    right: 20%;
    top: 22%;
    width: 260px;
    height: 260px;
    display: grid;
    place-items: center
}

.hero-v img,
.v-ghost {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.v-ghost {
    background: url("assets/vidyuttam-full-logo-transparent.png") center/contain no-repeat;
    mix-blend-mode: screen
}

.v-ghost.red {
    filter: sepia(1) saturate(8) hue-rotate(315deg);
    transform: translate(8px, 0);
    opacity: .45
}

.v-ghost.cyan {
    filter: sepia(1) saturate(7) hue-rotate(120deg);
    transform: translate(-8px, 0);
    opacity: .45
}

.hero-v img {
    filter: drop-shadow(0 0 20px rgba(0, 255, 235, .12))
}

.burst {
    position: absolute;
    inset: -25%;
    background: conic-gradient(var(--red), transparent, var(--cyan), transparent, var(--pink), transparent);
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
    opacity: .16;
    animation: spin 12s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    width: 330px;
    height: 330px
}

.o2 {
    width: 410px;
    height: 410px;
    transform: rotate(50deg) scaleX(.45)
}

.hero-caption,
.sound {
    position: absolute;
    z-index: 8;
    font: 800 9px/1.5 "Barlow Condensed";
    letter-spacing: .22em;
    color: #666
}

.hero-caption {
    right: 5vw;
    bottom: 115px;
    text-align: right
}

.sound {
    left: 8vw;
    bottom: 80px
}

.sound span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
    margin-left: 8px
}

.hero-number {
    position: absolute;
    right: 3vw;
    bottom: 75px;
    font: 400 110px Anton;
    color: rgba(255, 255, 255, .04)
}

.ticker {
    position: absolute;
    z-index: 8;
    bottom: 0;
    left: 0;
    right: 0;
    height: 43px;
    border-top: 1px solid #2a2d33;
    background: #0b0d11;
    display: flex;
    align-items: center;
    gap: 25px;
    overflow: hidden;
    white-space: nowrap;
    font: 800 12px "Barlow Condensed";
    letter-spacing: .18em
}

.ticker b:nth-of-type(odd) {
    color: var(--red)
}

.ticker b:nth-of-type(even) {
    color: var(--cyan)
}

.ticker i {
    font-style: normal;
    color: #555
}

.manifest {
    min-height: 100vh;
    background: var(--paper);
    color: #111;
    position: relative;
    overflow: hidden;
    padding: 9vw 8vw
}

.panel-label {
    font: 800 10px "Barlow Condensed";
    letter-spacing: .25em;
    color: #777;
    border-bottom: 1px solid #aaa;
    padding-bottom: 12px
}

.manifest-art {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.halftone {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    background-image: radial-gradient(#111 1.2px, transparent 1.4px);
    background-size: 10px 10px;
    opacity: .08;
    mask-image: linear-gradient(90deg, transparent, #000)
}

.speech {
    position: absolute;
    right: 13%;
    top: 17%;
    width: 180px;
    height: 130px;
    background: #fff;
    border: 3px solid #111;
    display: grid;
    place-items: center;
    text-align: center;
    font: 400 35px Bangers;
    line-height: .8;
    transform: rotate(7deg);
    box-shadow: 10px 10px 0 var(--red)
}

.speech:after {
    content: "";
    position: absolute;
    bottom: -32px;
    left: 25px;
    border: 16px solid transparent;
    border-top-color: #111;
    transform: rotate(20deg)
}

.arrow {
    position: absolute;
    right: 33%;
    bottom: 16%;
    font: 400 80px Bangers;
    color: var(--red);
    transform: rotate(15deg)
}

.manifest-copy {
    position: relative;
    z-index: 3;
    padding-top: 7vw;
    max-width: 700px
}

.manifest-copy .small {
    font: 800 10px "Barlow Condensed";
    letter-spacing: .3em;
    color: #777
}

.manifest-copy h2 {
    font: 400 clamp(90px, 13vw, 180px) Anton;
    line-height: .68;
    letter-spacing: -.05em;
    margin: 20px 0
}

.manifest-copy h2 em {
    font-style: normal;
    color: var(--red)
}

.manifest-copy p {
    max-width: 510px;
    color: #555;
    font-size: 14px;
    line-height: 1.8
}

.signature {
    margin-top: 40px;
    border-top: 1px solid #aaa;
    padding-top: 15px;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .25em
}

.signature span {
    color: var(--red);
    padding: 0 10px
}

.manifest-logo {
    position: absolute;
    right: -8vw;
    bottom: -13vw;
    width: 55vw;
    opacity: .11;
    filter: grayscale(1)
}

.manifest-logo img {
    width: 100%
}

.events {
    background: #080a0e;
    padding: 8vw 6vw 11vw;
    position: relative;
    overflow: hidden
}

.events:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(255, 0, 0, .13), transparent 22%), radial-gradient(circle at 10% 80%, rgba(0, 255, 235, .1), transparent 24%)
}

.events-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #2b2e34;
    padding-bottom: 12px;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .25em;
    color: #666
}

.events-title {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 6vw 0 4vw
}

.events-title h2 {
    font: 400 clamp(80px, 11vw, 160px) Anton;
    line-height: .68;
    letter-spacing: -.05em;
    margin: 0
}

.events-title em {
    font-style: normal;
    color: var(--red)
}

.burst-word {
    font: 400 75px Bangers;
    color: var(--yellow);
    transform: rotate(-9deg);
    text-shadow: 5px 5px 0 var(--red), -3px -2px 0 var(--cyan)
}

.event-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.card {
    min-height: 350px;
    background: #111317;
    border: 1px solid #292d34;
    border-right: 0;
    padding: 27px;
    position: relative;
    overflow: hidden;
    transition: .4s var(--ease);
    cursor: pointer
}

.card:nth-child(3n) {
    border-right: 1px solid #292d34
}

.card:nth-child(n+4) {
    border-top: 0
}

.card:before {
    content: "";
    position: absolute;
    inset: -50%;
    background: linear-gradient(120deg, transparent 42%, var(--c) 43% 45%, transparent 46%);
    opacity: .1;
    transition: .5s
}

.card:hover {
    transform: translate(-7px, -7px) rotate(-1deg);
    box-shadow: 7px 7px 0 var(--c);
    z-index: 5
}

.card:hover:before {
    transform: translateX(30%)
}

.card>span {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .23em;
    color: #666
}

.card h3 {
    font: 400 clamp(45px, 5vw, 78px) Anton;
    line-height: .7;
    margin: 60px 0 25px;
    letter-spacing: -.03em
}

.card p {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .17em;
    color: #777;
    max-width: 190px
}

.card>b {
    position: absolute;
    right: 25px;
    top: 22px;
    color: var(--c);
    font-size: 22px
}

.c-red {
    --c: var(--red)
}

.c-cyan {
    --c: var(--cyan)
}

.c-blue {
    --c: var(--blue)
}

.c-pink {
    --c: var(--pink)
}

.c-yellow {
    --c: var(--yellow)
}

.c-white {
    --c: #fff
}

.verse {
    background: #05070a;
    overflow: hidden
}

.verse-header {
    padding: 9vw 7vw 5vw
}

.verse-header span {
    font: 800 10px "Barlow Condensed";
    letter-spacing: .25em;
    color: #666
}

.verse-header h2 {
    font: 400 clamp(85px, 12vw, 170px) Anton;
    line-height: .68;
    margin: 20px 0 0;
    letter-spacing: -.05em
}

.verse-header h2 em {
    font-style: normal;
    color: var(--red)
}

.chapter {
    height: 100vh;
    min-height: 760px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #20232a;
    padding: 10vw 8vw;
    display: flex;
    align-items: center
}

.comic-border {
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    pointer-events: none
}

.chapter-no {
    position: absolute;
    right: 5vw;
    bottom: 3vw;
    font: 400 190px Anton;
    color: rgba(255, 255, 255, .04)
}

.chapter-bg {
    position: absolute;
    inset: 0
}

.brand-bg {
    background: linear-gradient(135deg, #c8ccd0, #657180 47%, #080b10)
}

.brand-bg:after {
    content: "";
    position: absolute;
    inset: 38% 0 0;
    background: linear-gradient(90deg, #17212c 0 10%, transparent 10% 17%, #111b26 17% 27%, transparent 27% 35%, #111a24 35% 47%, transparent 47% 54%, #111b25 54% 68%, transparent 68% 77%, #101923 77% 88%, transparent 88%);
    clip-path: polygon(0 30%, 7% 18%, 15% 34%, 22% 16%, 31% 38%, 40% 8%, 50% 31%, 60% 18%, 70% 34%, 78% 11%, 89% 30%, 100% 20%, 100% 100%, 0 100%)
}

.brand:after {
    content: "";
    position: absolute;
    right: 8%;
    top: 10%;
    width: 43vw;
    height: 43vw;
    border-radius: 50%;
    background: radial-gradient(circle, #f5df9e, #8c98a3 42%, transparent 67%);
    opacity: .55
}

.amazing {
    background: #061426
}

.amazing-bg {
    background: linear-gradient(145deg, #040911, #0b3562 48%, #05070b)
}

.rain {
    position: absolute;
    inset: -30%;
    background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(150, 220, 255, .14) 15px 16px);
    transform: skewX(-11deg);
    animation: rain 1s linear infinite
}

@keyframes rain {
    to {
        transform: skewX(-11deg) translateX(-50px)
    }
}

.amazing:after {
    content: "";
    position: absolute;
    right: 14%;
    bottom: -5%;
    width: 230px;
    height: 85%;
    background: linear-gradient(90deg, #03070d, #173b63, #03070d);
    clip-path: polygon(42% 0, 58% 0, 76% 100%, 24% 100%)
}

.ultimate {
    background: #18191e
}

.ultimate-bg {
    background: linear-gradient(135deg, #17181d, #090a0e)
}

.dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#fff 1.3px, transparent 1.5px);
    background-size: 10px 10px;
    opacity: .1
}

.burst-big {
    position: absolute;
    right: -10%;
    top: -10%;
    width: 75vw;
    height: 75vw;
    background: conic-gradient(var(--red), var(--yellow), var(--cyan), var(--pink), var(--red));
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
    opacity: .18
}

.chapter-copy {
    position: relative;
    z-index: 5;
    max-width: 680px
}

.chapter-copy small {
    font: 800 10px "Barlow Condensed";
    letter-spacing: .3em;
    color: #777
}

.chapter-copy h3 {
    font: 400 clamp(90px, 13vw, 180px) Anton;
    line-height: .66;
    letter-spacing: -.05em;
    margin: 25px 0
}

.chapter-copy h3 i {
    font-style: normal;
    color: var(--red);
    text-shadow: 5px 0 var(--cyan), -4px 0 var(--pink)
}

.chapter-copy p {
    max-width: 400px;
    color: #8e949e;
    font-size: 14px;
    line-height: 1.7
}

.chapter-copy strong {
    display: block;
    margin-top: 30px;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .22em;
    color: #777
}

.chapter-logo {
    position: absolute;
    right: 10%;
    width: 270px;
    opacity: .75
}

.chapter-logo img {
    width: 100%
}

.caption-box {
    position: absolute;
    left: 7%;
    bottom: 9%;
    background: #fff;
    color: #111;
    border: 2px solid #111;
    padding: 12px;
    font: 800 10px "Barlow Condensed";
    letter-spacing: .18em;
    transform: rotate(-3deg);
    box-shadow: 6px 6px 0 var(--red)
}

.panel-word {
    position: absolute;
    right: 8%;
    top: 18%;
    z-index: 5;
    font: 400 75px Bangers;
    color: var(--yellow);
    transform: rotate(-8deg);
    text-shadow: 5px 5px 0 var(--red), -3px -2px 0 var(--cyan)
}

.panel-word.p2 {
    top: auto;
    bottom: 18%;
    right: 20%;
    color: var(--cyan);
    font-size: 55px;
    transform: rotate(7deg)
}

.comic-gallery {
    background: var(--paper);
    color: #111;
    padding: 9vw 0 11vw;
    overflow: hidden
}

.gallery-title {
    padding: 0 7vw 5vw
}

.gallery-title span {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .25em;
    color: #777
}

.gallery-title h2 {
    font: 400 clamp(75px, 10vw, 145px) Anton;
    line-height: .7;
    margin: 20px 0 0;
    letter-spacing: -.05em
}

.gallery-title h2 em {
    font-style: normal;
    color: var(--red)
}

.files {
    display: flex;
    gap: 24px;
    padding: 0 7vw;
    width: max-content
}

.file {
    width: 330px;
    height: 480px;
    background: #101216;
    color: #fff;
    padding: 26px;
    position: relative;
    overflow: hidden;
    box-shadow: 8px 8px 0 var(--red);
    flex: none
}

.file:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 65% 28%, rgba(0, 255, 235, .3), transparent 18%), linear-gradient(145deg, #0b2234, #111216 55%, #36080c)
}

.file:nth-child(2) {
    box-shadow: 8px 8px 0 var(--cyan)
}

.file:nth-child(3) {
    box-shadow: 8px 8px 0 var(--pink)
}

.file:nth-child(4) {
    box-shadow: 8px 8px 0 var(--blue)
}

.file>* {
    position: relative;
    z-index: 2
}

.file span {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .25em;
    color: #777
}

.file b {
    display: block;
    font: 400 80px Anton;
    line-height: .67;
    margin-top: 180px
}

.file small {
    display: block;
    margin-top: 25px;
    font: 800 8px "Barlow Condensed";
    letter-spacing: .18em;
    color: #777
}

.file i {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font: 400 60px Anton;
    font-style: normal;
    color: rgba(255, 255, 255, .08)
}

.final {
    height: 100vh;
    min-height: 700px;
    background: #030405;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    overflow: hidden
}

.final-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 60px 60px
}

.final-web {
    position: absolute;
    width: 120vw;
    height: 120vw;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 0 0 12vw rgba(255, 255, 255, .01), 0 0 0 24vw rgba(255, 255, 255, .008)
}

.final-ink {
    position: absolute;
    width: 55vw;
    height: 80vh;
    filter: blur(25px);
    opacity: .12;
    mix-blend-mode: screen
}

.final-ink.red {
    right: -20%;
    background: var(--red)
}

.final-ink.cyan {
    left: -20%;
    background: var(--cyan)
}

.final-copy {
    position: relative;
    z-index: 4
}

.final-copy>span {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .35em;
    color: #666
}

.final-copy img {
    width: 210px;
    margin: 28px auto 5px
}

.final-copy h2 {
    font: 400 clamp(85px, 12vw, 170px) Anton;
    line-height: .68;
    margin: 0;
    letter-spacing: -.05em;
    text-shadow: 5px 0 var(--red), -5px 0 var(--cyan)
}

.final-copy h2 em {
    font-style: normal;
    color: var(--red)
}

.final-copy p {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .28em;
    color: #666;
    margin: 28px 0 32px
}

/* =========================================================
   COMIC BOOK MAIN SITE FOOTER
   ========================================================= */
.site-footer {
    background: #050608;
    color: var(--white);
    border-top: 3px solid #1a1c23;
    position: relative;
    overflow: hidden;
    padding: 0;
    font-family: Inter, Arial, sans-serif;
    isolation: isolate;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(0, 245, 230, .06), transparent 40%),
                radial-gradient(circle at 85% 80%, rgba(255, 16, 24, .06), transparent 40%),
                linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, .02) 50%, transparent 50.5%),
                linear-gradient(0deg, transparent 49.5%, rgba(255, 255, 255, .02) 50%, transparent 50.5%);
    background-size: auto, auto, 60px 60px, 60px 60px;
    pointer-events: none;
    z-index: 1;
}

/* Comic marquee ribbon across the top of footer */
.footer-marquee {
    position: relative;
    z-index: 2;
    background: #0e1017;
    border-bottom: 1px solid #232732;
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
}

.footer-marquee-track {
    display: inline-flex;
    gap: 40px;
    animation: footerMarquee 30s linear infinite;
    font: 800 11px/1 "Barlow Condensed";
    letter-spacing: .25em;
    color: #8c93a4;
    text-transform: uppercase;
    will-change: transform;
}

.footer-marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

@keyframes footerMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Main Grid */
.footer-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.25fr 1fr 0.9fr 1.25fr;
    gap: 40px;
    padding: 55px 5vw 45px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Common Column Headers */
.footer-col-heading {
    font: 800 13px/1 "Barlow Condensed";
    letter-spacing: .26em;
    color: #fff;
    margin: 0 0 18px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-col-heading .kicker-num {
    color: var(--cyan);
    font-size: 11px;
    background: rgba(0, 245, 230, .12);
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid rgba(0, 245, 230, .3);
}

.footer-col-sub {
    font: 500 13px/1.6 Inter;
    color: #838a98;
    margin: 0 0 16px;
}

/* Column 1: Brand */
.footer-brand-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.footer-logo-title {
    font: 400 32px/1 Anton;
    letter-spacing: .02em;
    margin: 0;
    color: #fff;
    text-shadow: 2px 0 var(--red), -2px 0 var(--cyan);
}

.footer-logo-title em {
    font-style: normal;
    color: var(--red);
}

.footer-tagline {
    display: block;
    font: 800 10px "Barlow Condensed";
    letter-spacing: .24em;
    color: #7b8394;
    margin-top: 3px;
}

.footer-desc {
    font: 500 13px/1.65 Inter;
    color: #9aa1b2;
    margin: 0 0 20px;
}

.footer-desc strong {
    color: #fff;
}

.footer-badge-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-chip {
    font: 800 10px "Barlow Condensed";
    letter-spacing: .16em;
    padding: 5px 10px;
    background: #11141c;
    border: 1px solid #252a38;
    color: #adb5c7;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.footer-chip .dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.footer-chip .dot.cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.footer-chip .dot.yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }

/* Column 2: Instagram Social Cards */
.footer-social-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-social-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #12141c 0%, #0a0c12 100%);
    border: 1px solid #242938;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, box-shadow .22s ease;
}

.footer-social-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #444;
    transition: width .25s ease, background .25s ease;
}

.footer-social-card.ig-vidyuttam::before {
    background: linear-gradient(180deg, var(--red), var(--pink));
}

.footer-social-card.ig-raw::before {
    background: linear-gradient(180deg, var(--cyan), var(--blue));
}

.footer-social-card:hover {
    transform: translateY(-3px) translateX(3px);
    border-color: #495470;
}

.footer-social-card.ig-vidyuttam:hover {
    box-shadow: 0 8px 24px rgba(255, 16, 24, .18), 0 0 0 1px rgba(255, 16, 24, .4);
}

.footer-social-card.ig-raw:hover {
    box-shadow: 0 8px 24px rgba(0, 245, 230, .18), 0 0 0 1px rgba(0, 245, 230, .4);
}

.social-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #1a1e2a;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid #2d3447;
    color: #fff;
    transition: color .2s, background .2s;
}

.footer-social-card.ig-vidyuttam:hover .social-card-icon {
    background: var(--red);
    color: #fff;
}

.footer-social-card.ig-raw:hover .social-card-icon {
    background: var(--cyan);
    color: #07080b;
}

.social-card-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.social-card-badge {
    font: 800 8.5px/1 "Barlow Condensed";
    letter-spacing: .2em;
    color: #8c95a8;
}

.social-card-handle {
    font: 700 15px/1.2 Inter;
    letter-spacing: .01em;
    color: #fff;
}

.social-card-label {
    font: 600 11px Inter;
    color: #6d7688;
}

.social-card-arrow {
    font: 700 18px/1 Anton;
    color: #646f84;
    transition: transform .2s ease, color .2s ease;
}

.footer-social-card:hover .social-card-arrow {
    transform: translate(3px, -3px);
    color: #fff;
}

/* Column 3: Nav List */
.footer-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav-list li a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 800 12px "Barlow Condensed";
    letter-spacing: .18em;
    color: #929bb0;
    text-transform: uppercase;
    transition: color .18s ease, transform .18s ease;
}

.footer-nav-list li a span {
    font-size: 10px;
    color: #555e72;
    transition: color .18s;
}

.footer-nav-list li a:hover {
    color: var(--cyan);
    transform: translateX(4px);
}

.footer-nav-list li a:hover span {
    color: var(--red);
}

/* Column 4: Developer Credit Card */
.dev-credit-card {
    background: linear-gradient(145deg, #131722 0%, #0a0c13 100%);
    border: 1px solid #273044;
    border-radius: 6px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 4px 4px 0 #1b202e;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.dev-credit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red), var(--pink), var(--cyan));
}

.dev-credit-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 245, 230, .4);
    box-shadow: 6px 6px 0 var(--cyan), 0 12px 30px rgba(0, 245, 230, .15);
}

.dev-card-tag {
    font: 800 9px/1 "Barlow Condensed";
    letter-spacing: .25em;
    color: var(--cyan);
    margin-bottom: 14px;
    text-transform: uppercase;
}

.dev-card-body {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.dev-avatar-box {
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, #252d42 20%, #10141f 90%);
    border: 2px solid var(--cyan);
    border-radius: 6px;
    display: grid;
    place-items: center;
    box-shadow: 0 0 12px rgba(0, 245, 230, .35), inset 0 0 8px rgba(0, 245, 230, .2);
    flex-shrink: 0;
}

.dev-avatar-glyph {
    font: 400 20px/1 Anton;
    color: #fff;
    letter-spacing: .05em;
    text-shadow: 2px 0 var(--red), -1px 0 var(--cyan);
}

.dev-details {
    display: flex;
    flex-direction: column;
}

.dev-name {
    font: 400 22px/1 Anton;
    letter-spacing: .03em;
    color: #fff;
    margin: 0 0 4px;
    text-shadow: 2px 0 rgba(255, 16, 24, .8), -2px 0 rgba(0, 245, 230, .8);
}

.dev-role {
    font: 600 11.5px Inter;
    color: #8fa0be;
}

.dev-note {
    font: 500 12px/1.6 Inter;
    color: #8c97ad;
    margin: 0 0 14px;
}

.dev-card-footer {
    border-top: 1px solid #1f2636;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dev-status {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .16em;
    color: #6ad089;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-pulse {
    width: 6px;
    height: 6px;
    background: #6ad089;
    border-radius: 50%;
    box-shadow: 0 0 8px #6ad089;
    animation: statusPulse 1.8s infinite ease-in-out;
}

@keyframes statusPulse {
    0%, 100% { opacity: .4; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.dev-stamp {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .2em;
    color: #556075;
}

/* Bottom Bar */
.footer-bottom-bar {
    position: relative;
    z-index: 2;
    background: #030406;
    border-top: 1px solid #1a1e28;
    padding: 18px 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font: 800 10.5px "Barlow Condensed";
    letter-spacing: .2em;
    color: #697387;
    text-transform: uppercase;
}

.footer-bottom-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-bottom-item .sep {
    color: #3b4252;
}

.footer-bottom-item.dev-highlight {
    color: #c2cbdc;
}

.footer-bottom-item.dev-highlight strong {
    color: var(--cyan);
    letter-spacing: .22em;
    text-shadow: 0 0 10px rgba(0, 245, 230, .4);
}

.footer-bottom-item.rights-reserved strong {
    color: #e4eaf8;
    letter-spacing: .12em;
}

/* Responsive Footer */
@media(max-width: 1100px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }
}

@media(max-width: 680px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 6vw 30px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media(max-width:850px) {
    nav {
        display: none
    }

    .hero {
        min-height: 900px
    }

    .hero-left {
        left: 7vw;
        right: 7vw;
        top: 43%
    }

    .hero h1 {
        font-size: 20vw
    }

    .hero-v {
        right: 5%;
        top: 20%;
        width: 150px;
        height: 150px
    }

    .hero-sticker {
        display: none
    }

    .hero-caption {
        display: none
    }

    .manifest {
        padding: 18vw 7vw
    }

    .manifest-copy h2 {
        font-size: 22vw
    }

    .manifest-copy {
        padding-top: 8vw
    }

    .speech {
        right: 6%;
        top: 11%;
        transform: scale(.75) rotate(7deg)
    }

    .event-grid {
        grid-template-columns: 1fr
    }

    .card:nth-child(n) {
        border-right: 1px solid #292d34
    }

    .card:nth-child(n+2) {
        border-top: 0
    }

    .events-title {
        display: block
    }

    .burst-word {
        position: absolute;
        right: 4%;
        bottom: 0
    }

    .chapter {
        min-height: 780px;
        height: 780px;
        padding: 20vw 7vw
    }

    .chapter-copy h3 {
        font-size: 22vw
    }

    .chapter-logo {
        right: -12%;
        width: 210px;
        opacity: .45
    }

    .chapter-no {
        font-size: 130px
    }

    .caption-box {
        left: 7%;
        bottom: 8%
    }

    .comic-gallery {
        padding-top: 18vw
    }

    .files {
        overflow: auto;
        width: 100%;
        padding-bottom: 25px
    }

    .file {
        width: 280px;
        height: 410px
    }

    .file b {
        font-size: 65px;
        margin-top: 150px
    }

    .cursor {
        display: none
    }

    footer {
        flex-wrap: wrap
    }
}

/* GLOBAL MAJOR-TEXT RGB GLITCH SYSTEM */
.glitch-major,
.hero h1,
.events-title h2,
.chapter-copy h3,
.manifest-copy h2,
.verse-header h2,
.gallery-title h2,
.final-copy h2,
.intro-title,
.intro-six,
.sponsors-title h2,
.society-copy h2,
.faculty-card h3,
.about-v-grid h2 {
    position: relative;
    isolation: isolate;
    text-shadow: 5px 0 rgba(255, 0, 0, .72), -5px 0 rgba(0, 255, 235, .62)
}

.hero h1 strong,
.events-title h2 em,
.chapter-copy h3 i,
.manifest-copy h2 em,
.verse-header h2 em,
.gallery-title h2 em,
.final-copy h2 em,
.society-copy h2 em,
.about-v-grid h2 em {
    text-shadow: 6px 0 rgba(255, 0, 0, .78), -6px 0 rgba(0, 255, 235, .68), 2px 2px rgba(255, 22, 106, .28)
}

.glitch-major::before,
.glitch-major::after,
.hero h1::before,
.hero h1::after,
.events-title h2::before,
.events-title h2::after,
.chapter-copy h3::before,
.chapter-copy h3::after,
.manifest-copy h2::before,
.manifest-copy h2::after,
.verse-header h2::before,
.verse-header h2::after,
.gallery-title h2::before,
.gallery-title h2::after,
.final-copy h2::before,
.final-copy h2::after,
.intro-title::before,
.intro-title::after,
.intro-six::before,
.intro-six::after,
.sponsors-title h2::before,
.sponsors-title h2::after,
.society-copy h2::before,
.society-copy h2::after,
.faculty-card h3::before,
.faculty-card h3::after,
.about-v-grid h2::before,
.about-v-grid h2::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1
}

.glitch-major::before,
.hero h1::before,
.events-title h2::before,
.chapter-copy h3::before,
.manifest-copy h2::before,
.verse-header h2::before,
.gallery-title h2::before,
.final-copy h2::before,
.intro-title::before,
.intro-six::before,
.sponsors-title h2::before,
.society-copy h2::before,
.faculty-card h3::before,
.about-v-grid h2::before {
    color: var(--red);
    clip-path: inset(0 0 52% 0)
}

.glitch-major::after,
.hero h1::after,
.events-title h2::after,
.chapter-copy h3::after,
.manifest-copy h2::after,
.verse-header h2::after,
.gallery-title h2::after,
.final-copy h2::after,
.intro-title::after,
.intro-six::after,
.sponsors-title h2::after,
.society-copy h2::after,
.faculty-card h3::after,
.about-v-grid h2::after {
    color: var(--cyan);
    clip-path: inset(52% 0 0 0)
}

.glitch-major.burst::before,
.glitch-major.burst::after {
    opacity: .82
}

.glitch-major.burst::before {
    transform: translate(var(--gx1), var(--gy1));
    clip-path: inset(var(--gc1) 0 var(--gc2) 0)
}

.glitch-major.burst::after {
    transform: translate(var(--gx2), var(--gy2));
    clip-path: inset(var(--gc3) 0 var(--gc4) 0)
}

.glitch-major.burst {
    transform: translate(var(--tx), var(--ty)) skewX(var(--sk));
    filter: saturate(var(--sat))
}

/* Intro logo: clean anchor + irregular chromatic bursts during the transition */
.logo-stack {
    will-change: transform;
    transform: translateZ(0)
}

.logo-stack.glitch-burst {
    transform: translate(var(--lmx, 0), var(--lmy, 0)) skewX(var(--lsk, 0deg));
    filter: saturate(1.3) contrast(1.1) !important;
}

.logo-stack.glitch-burst .g-red {
    opacity: .9 !important;
    transform: translate(var(--lx, 6px), var(--ly, 2px)) skewX(var(--lsk, 1deg));
    filter: sepia(1) saturate(14) hue-rotate(315deg) drop-shadow(0 0 10px rgba(255, 16, 36, 1)) !important;
}

.logo-stack.glitch-burst .g-cyan {
    opacity: .9 !important;
    transform: translate(calc(var(--lx, 6px) * -1), var(--ly2, -2px)) skewX(calc(var(--lsk, 1deg) * -1));
    filter: sepia(1) saturate(14) hue-rotate(140deg) drop-shadow(0 0 10px rgba(0, 245, 230, 1)) !important;
}

.logo-stack.glitch-burst img {
    transform: translate(var(--lmx, 0), var(--lmy, 0));
    filter: drop-shadow(0 0 14px rgba(0, 245, 230, 1)) drop-shadow(0 0 26px rgba(255, 16, 36, .85)) brightness(1.35) contrast(1.2) !important;
}

/* No predictable looping transform animation: JS fires short randomized bursts. */
.glitch-major,
.intro-title,
.intro-six {
    animation: none
}

/* SPONSOR PANEL */
.sponsors {
    background: #0a0b0e;
    color: #fff;
    padding: 8vw 7vw 7vw;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #24262d
}

.sponsors:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 49.8%, rgba(255, 255, 255, .035) 50%, transparent 50.2%), linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none
}

.sponsors-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .25em;
    color: #666
}

.sponsors-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin: 25px 0 55px
}

.sponsors-title small {
    font: 800 10px "Barlow Condensed";
    letter-spacing: .28em;
    color: #777
}

.sponsors-title h2 {
    font: 400 clamp(80px, 11vw, 150px) Anton;
    line-height: .65;
    margin: 18px 0 0;
    letter-spacing: -.05em;
    text-shadow: 5px 0 var(--red), -5px 0 var(--cyan)
}

.sponsors-title h2 em {
    font-style: normal;
    color: var(--red)
}

.sponsor-note {
    max-width: 360px;
    font: 600 14px/1.6 Inter;
    color: #858a93;
    padding-bottom: 8px
}

.sponsor-wall {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.sponsor-card {
    height: 270px;
    border: 1px solid #2a2d34;
    background: linear-gradient(145deg, #15171c, #08090b);
    position: relative;
    padding: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .25s ease, border-color .25s ease
}

.sponsor-card:before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -55px;
    top: -55px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 235, .25);
    box-shadow: 0 0 0 25px rgba(0, 255, 235, .025), 0 0 0 50px rgba(255, 0, 65, .025)
}

.sponsor-card:hover {
    transform: translateY(-8px) rotate(-.6deg);
    border-color: #555
}

.sponsor-card:nth-child(2):before {
    border-color: rgba(255, 0, 65, .3)
}

.sponsor-card:nth-child(3):before {
    border-color: rgba(255, 215, 0, .3)
}

.sponsor-card:nth-child(4):before {
    border-color: rgba(40, 110, 255, .35)
}

.sponsor-card span,
.sponsor-card small {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .2em;
    color: #666
}

.sponsor-card b {
    position: relative;
    font: 400 48px/ .72 Anton;
    letter-spacing: -.02em;
    text-shadow: 3px 0 var(--red), -3px 0 var(--cyan)
}

.sponsor-card i {
    position: absolute;
    right: 17px;
    bottom: 12px;
    font: 400 55px Anton;
    font-style: normal;
    color: rgba(255, 255, 255, .055)
}

.sponsor-card.primary {
    background: linear-gradient(145deg, #1b1114, #08090b);
    box-shadow: 7px 7px 0 var(--red)
}

.sponsor-card.primary b {
    font-size: 55px
}

.sponsor-cta {
    position: relative;
    margin-top: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #292c32;
    padding-top: 25px
}

.sponsor-cta span {
    font: 800 10px "Barlow Condensed";
    letter-spacing: .22em;
    color: #777
}

.sponsor-cta .btn {
    display: inline-flex
}

@media(max-width:850px) {
    .sponsors {
        padding: 18vw 7vw
    }

    .sponsors-top {
        gap: 15px
    }

    .sponsors-title {
        display: block;
        margin-bottom: 35px
    }

    .sponsor-note {
        margin-top: 28px
    }

    .sponsor-wall {
        grid-template-columns: 1fr 1fr
    }

    .sponsor-card {
        height: 220px;
        padding: 17px
    }

    .sponsor-card b {
        font-size: 38px
    }

    .sponsor-cta {
        display: block
    }

    .sponsor-cta .btn {
        margin-top: 20px
    }
}

/* =========================================================
   V23 HYBRID: MILES-MORALES COMIC + NEW FULL NEON LOGO
   ========================================================= */
.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 240, 255, .5);
    box-shadow: 0 0 16px rgba(0, 240, 255, .25)
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.hero-v {
    width: min(38vw, 470px) !important;
    height: min(38vw, 470px) !important;
    right: 7% !important;
    top: 18% !important;
    display: grid;
    place-items: center
}

.hero-v img,
.manifest-logo img,
.chapter-logo img,
.final-copy img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 20px rgba(0, 240, 255, .25)) drop-shadow(0 0 32px rgba(255, 0, 153, .16));
}

.hero-v::before {
    content: "";
    position: absolute;
    inset: -12%;
    border: 1px solid rgba(0, 240, 255, .45);
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(0, 240, 255, .16), inset 0 0 35px rgba(255, 0, 153, .1);
    animation: logoOrbit 12s linear infinite;
}

.hero-v::after {
    content: "";
    position: absolute;
    inset: -4%;
    border: 1px dashed rgba(255, 0, 153, .32);
    border-radius: 50%;
    animation: logoOrbit 9s linear infinite reverse;
}

@keyframes spinBurst {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes neonBurstPulse {
    0% {
        transform: scale(.93);
        opacity: .7;
        filter: drop-shadow(0 0 16px rgba(0, 245, 230, .85)) drop-shadow(0 0 28px rgba(255, 16, 36, .75));
    }
    100% {
        transform: scale(1.08);
        opacity: .95;
        filter: drop-shadow(0 0 26px rgba(0, 245, 230, 1)) drop-shadow(0 0 45px rgba(255, 16, 36, .95)) drop-shadow(0 0 65px rgba(0, 245, 230, .6));
    }
}

.intro .logo-stack {
    width: min(220px, 45vw) !important;
    height: min(220px, 45vw) !important;
    aspect-ratio: 1 !important;
    display: grid;
    place-items: center;
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 8px;
    overflow: visible;
}

/* Electric Neon Burst behind the V */
.intro-burst {
    position: absolute;
    inset: -28%;
    background: conic-gradient(from 0deg,
        var(--cyan) 0deg 20deg,
        transparent 20deg 45deg,
        var(--red) 45deg 65deg,
        transparent 65deg 90deg,
        var(--pink) 90deg 110deg,
        transparent 110deg 135deg,
        var(--cyan) 135deg 155deg,
        transparent 155deg 180deg,
        var(--red) 180deg 200deg,
        transparent 200deg 225deg,
        var(--pink) 225deg 245deg,
        transparent 245deg 270deg,
        var(--cyan) 270deg 290deg,
        transparent 290deg 315deg,
        var(--red) 315deg 335deg,
        transparent 335deg 360deg
    );
    clip-path: polygon(
        50% 0%, 55% 33%, 78% 10%, 67% 40%, 100% 32%, 75% 53%, 96% 76%, 64% 67%,
        67% 100%, 50% 75%, 33% 100%, 36% 67%, 4% 76%, 25% 53%, 0% 32%, 33% 40%, 22% 10%, 45% 33%
    );
    opacity: .8;
    filter: drop-shadow(0 0 18px rgba(0, 245, 230, .85)) drop-shadow(0 0 32px rgba(255, 16, 36, .75));
    animation: neonBurstPulse 3.5s ease-in-out infinite alternate, spinBurst 24s linear infinite;
    z-index: 1;
    pointer-events: none;
}

/* Black backing directly behind the transparent V */
.intro-backdrop {
    position: absolute;
    inset: 4%;
    background: radial-gradient(circle, #080a10 40%, #0e121b 75%, #050608 100%);
    border-radius: 50%;
    border: 3px solid #000;
    box-shadow:
        inset 0 0 25px rgba(0, 0, 0, .95),
        4px 4px 0 var(--red),
        -4px -4px 0 var(--cyan),
        0 0 35px rgba(0, 245, 230, .45),
        0 0 55px rgba(255, 16, 36, .35);
    z-index: 2;
    pointer-events: none;
}

.intro .logo-stack img {
    width: 86% !important;
    height: 86% !important;
    object-fit: contain !important;
    mix-blend-mode: normal !important;
    filter: drop-shadow(0 0 10px rgba(0, 245, 230, .95)) drop-shadow(0 0 20px rgba(255, 16, 36, .75)) brightness(1.22) contrast(1.15) !important;
    position: relative;
    z-index: 4;
}

.intro .logo-stack .ghost {
    position: absolute;
    width: 86% !important;
    height: 86% !important;
    object-fit: contain !important;
    z-index: 3;
    pointer-events: none;
}

.intro .logo-stack .g-red {
    filter: sepia(1) saturate(12) hue-rotate(310deg) drop-shadow(0 0 10px rgba(255, 16, 36, 1));
    opacity: .75;
}

.intro .logo-stack .g-cyan {
    filter: sepia(1) saturate(12) hue-rotate(150deg) drop-shadow(0 0 10px rgba(0, 245, 230, 1));
    opacity: .75;
}

.intro .logo-stack::before,
.intro .logo-stack::after {
    display: none !important;
}

.logo-stack.glitch-burst .intro-burst {
    transform: scale(1.18) rotate(14deg) skewX(var(--lsk, 2deg));
    filter: drop-shadow(0 0 38px var(--cyan)) drop-shadow(0 0 58px var(--red)) saturate(2.4) !important;
}

/* Countdown */
.countdown {
    min-height: 72vh;
    position: relative;
    overflow: hidden;
    background: #080712;
    color: #f6f7ff;
    padding: 8vw 7vw;
    border-top: 1px solid rgba(0, 240, 255, .25);
    border-bottom: 1px solid rgba(255, 0, 153, .18)
}

.countdown-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 45%, rgba(0, 240, 255, .09), transparent 28%), radial-gradient(circle at 25% 65%, rgba(255, 0, 153, .08), transparent 32%), repeating-linear-gradient(0deg, transparent 0 8px, rgba(255, 255, 255, .018) 9px)
}

.countdown-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    font: 800 11px/1 "Barlow Condensed";
    letter-spacing: .28em;
    color: #8fefff;
    margin-bottom: 8vh
}

.countdown-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 6vw;
    align-items: center
}

.countdown-copy small {
    font: 800 12px "Barlow Condensed";
    letter-spacing: .28em;
    color: #ff53c8
}

.countdown-copy h2 {
    font: 400 clamp(70px, 10vw, 150px)/.78 "Anton";
    letter-spacing: -.03em;
    margin: 18px 0 28px
}

.countdown-copy h2 em {
    color: #ff28b5;
    font-style: normal;
    text-shadow: 4px 0 #00eaff
}

.countdown-copy p {
    max-width: 520px;
    color: #aeb2c3;
    font: 500 15px/1.7 Inter;
    margin: 0
}

.countdown-clock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(0, 240, 255, .25);
    background: rgba(5, 5, 14, .55)
}

.countdown-clock>div {
    min-height: 190px;
    padding: 26px 16px;
    border-right: 1px solid rgba(0, 240, 255, .18);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.countdown-clock>div:last-child {
    border-right: 0
}

.countdown-clock strong {
    font: 400 clamp(42px, 6vw, 88px)/.9 "Anton";
    color: #fff;
    text-shadow: 3px 0 #ff28b5, -3px 0 #00eaff
}

.countdown-clock span {
    margin-top: 15px;
    font: 800 10px "Barlow Condensed";
    letter-spacing: .25em;
    color: #8b91a6
}

.sound-toggle {
    position: fixed;
    right: 24px;
    bottom: 22px;
    z-index: 10000;
    border: 1px solid rgba(0, 240, 255, .55);
    background: rgba(7, 7, 15, .9);
    color: #fff;
    min-height: 40px;
    padding: 0 14px;
    display: flex;
    gap: 9px;
    align-items: center;
    font: 800 10px "Barlow Condensed";
    letter-spacing: .2em;
    cursor: pointer
}

.sound-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00eaff;
    box-shadow: 0 0 10px #00eaff
}

.sound-toggle.is-muted .sound-dot {
    background: #ff28b5;
    box-shadow: 0 0 10px #ff28b5
}

.init-status {
    margin-top: 18px;
    min-height: 18px;
    display: block;
    position: relative;
    z-index: 5;
    font: 800 10px/1.2 "Barlow Condensed";
    letter-spacing: .24em;
    color: #4a4d58;
    white-space: nowrap;
    text-align: center
}

.init-bar {
    position: relative;
    z-index: 5;
    width: min(280px, 70vw);
    height: 8px;
    background: rgba(17, 17, 20, .10);
    border: 1.5px solid var(--ink);
    box-shadow: 3px 3px 0 var(--cyan);
    margin: 9px auto 0;
    overflow: hidden
}

.init-bar i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--pink), var(--red));
    box-shadow: 0 0 10px rgba(0, 245, 230, .6);
    transition: width .18s ease-out;
}

@media(max-width:760px) {
    .brand b {
        display: none
    }

    .brand-mark {
        width: 34px;
        height: 34px
    }

    .hero-v {
        width: 72vw !important;
        height: 72vw !important;
        right: 50% !important;
        transform: translateX(50%) !important;
        top: 11% !important
    }

    .hero-left {
        padding-top: 78vw
    }

    .countdown {
        min-height: auto;
        padding: 22vw 6vw
    }

    .countdown-top {
        margin-bottom: 12vw
    }

    .countdown-grid {
        grid-template-columns: 1fr;
        gap: 10vw
    }

    .countdown-clock {
        grid-template-columns: repeat(2, 1fr)
    }

    .countdown-clock>div {
        min-height: 120px
    }

    .countdown-clock>div:nth-child(2) {
        border-right: 0
    }

    .countdown-clock>div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(0, 240, 255, .18)
    }

    .sound-toggle {
        right: 12px;
        bottom: 12px
    }

    .intro .logo-stack {
        width: 62vw !important;
        height: 62vw !important
    }
}


/* =========================================================
   V24 INFORMATION EXPANSION — PDF CONTENT + COMIC SYSTEM
   ========================================================= */
.info-panels,
.society,
.faculty,
.about-vidyuttam {
    position: relative;
    background: #08090d;
    color: #f7f5ee;
    padding: 9vw 7vw;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.section-kicker {
    position: relative;
    z-index: 2;
    font: 800 10px "Barlow Condensed";
    letter-spacing: .3em;
    color: var(--cyan);
    margin-bottom: 28px
}

.section-kicker:before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--pink);
    margin-right: 10px;
    vertical-align: middle
}

.info-panels:before,
.society:before,
.faculty:before,
.about-vidyuttam:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(90deg, #000, transparent 90%);
    pointer-events: none
}

.info-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.3fr .7fr .7fr;
    gap: 18px
}

.info-panel {
    border: 1px solid #292d36;
    background: linear-gradient(145deg, #12151c, #08090c);
    padding: 28px;
    min-height: 330px;
    position: relative;
    overflow: hidden
}

.info-panel.big {
    grid-row: span 2
}

.info-panel span,
.faculty-card small {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .24em;
    color: #777
}

.info-panel h2,
.about-v-grid h2,
.society-copy h2 {
    font: 400 clamp(70px, 9vw, 135px)/.72 Anton;
    letter-spacing: -.04em;
    margin: 30px 0;
    text-shadow: 5px 0 var(--red), -5px 0 var(--cyan)
}

.info-panel h2 em,
.about-v-grid h2 em,
.society-copy h2 em {
    color: var(--red);
    font-style: normal
}

.info-panel p,
.society-copy p,
.about-v-grid p,
.faculty-card p {
    color: #aeb3bf;
    font: 500 14px/1.75 Inter;
    max-width: 760px
}

.info-panel img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    filter: saturate(.8) contrast(1.08);
    margin-bottom: 18px
}

.dossier-strip {
    position: absolute;
    left: 7vw;
    right: 7vw;
    bottom: 5vw;
    display: flex;
    gap: 18px;
    z-index: 3
}

.dossier-strip img {
    width: 160px;
    height: 100px;
    object-fit: cover;
    border: 6px solid #eee;
    box-shadow: 5px 5px 0 var(--cyan);
    transform: rotate(-2deg)
}

.dossier-strip img+img {
    transform: rotate(2deg);
    box-shadow: 5px 5px 0 var(--pink)
}

.institution-art img {
    position: absolute;
    inset: 18% 8% auto;
    width: 84%;
    height: 48%;
    object-fit: cover;
    filter: grayscale(.1) contrast(1.1)
}

.dossier {
    min-height: 100vh;
    padding-bottom: 18vw
}

.society-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 6vw
}

.society-copy {
    max-width: 760px
}

.society-visual {
    min-height: 440px;
    display: grid;
    place-items: center;
    position: relative
}

.society-visual img {
    width: min(420px, 70vw);
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 28px rgba(0, 240, 255, .3)) drop-shadow(0 0 38px rgba(255, 0, 153, .18));
    position: relative;
    z-index: 2
}

.society-orbit {
    position: absolute;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(0, 240, 255, .45);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 0, 153, .03), 0 0 50px rgba(0, 240, 255, .15);
    animation: logoOrbit 14s linear infinite
}

.society-orbit:after {
    content: "";
    position: absolute;
    inset: 35px;
    border: 1px dashed rgba(255, 0, 153, .3);
    border-radius: 50%
}

.faculty-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.faculty-card {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 22px;
    align-items: center;
    border: 1px solid #2b2f39;
    padding: 18px;
    background: #0c0e13
}

.faculty-card img {
    width: 170px;
    height: 210px;
    object-fit: cover;
    filter: contrast(1.05)
}

.faculty-card h3 {
    font: 400 clamp(28px, 3vw, 46px)/.9 Anton;
    margin: 15px 0;
    text-shadow: 3px 0 var(--red), -3px 0 var(--cyan)
}

.about-v-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 7vw;
    align-items: end
}

.about-vidyuttam {
    background: radial-gradient(circle at 70% 30%, rgba(0, 240, 255, .08), transparent 25%), radial-gradient(circle at 20% 80%, rgba(255, 0, 153, .08), transparent 25%), #08090d
}

.events-expanded {
    padding-bottom: 9vw
}

.event-tabs {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 4;
    margin: 0 0 28px
}

.event-tabs button {
    border: 1px solid #404550;
    background: #0d1016;
    color: #9da3b1;
    padding: 10px 18px;
    font: 800 10px "Barlow Condensed";
    letter-spacing: .2em;
    cursor: pointer
}

.event-tabs button.active,
.event-tabs button:hover {
    background: var(--red);
    border-color: var(--red);
    color: white;
    box-shadow: 4px 4px 0 var(--cyan);
    text-shadow: 2px 0 var(--cyan), -2px 0 var(--pink);
    transform: translate(-1px, -1px);
}

.event-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    position: relative;
    z-index: 2;
    contain: layout style
}

.event-panel {
    min-height: 190px;
    border: 1px solid #2a2e37;
    background: linear-gradient(140deg, #11141a, #08090c);
    padding: 18px;
    display: grid;
    grid-template-columns: 58px 120px 1fr;
    gap: 18px;
    align-items: center;
    position: relative;
    overflow: hidden;
    will-change: transform;
    transition: transform .2s var(--ease), border-color .2s;
    contain: layout
}

.event-panel:hover {
    transform: translateY(-4px) translateZ(0);
    border-color: #596170
}

.event-panel img {
    width: 120px;
    height: 110px;
    object-fit: cover;
    border-radius: 2px;
    filter: saturate(.9);
    box-shadow: 4px 4px 0 rgba(0, 240, 255, .35)
}

.event-panel.no-img {
    grid-template-columns: 58px 1fr
}

.event-panel::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -55px;
    bottom: -55px;
    border-radius: 50%;
    border: 1px solid rgba(255, 0, 153, .25);
    pointer-events: none
}

.event-index {
    font: 400 42px Anton;
    color: rgba(255, 255, 255, .16);
    align-self: start
}

.event-panel small {
    font: 800 9px "Barlow Condensed";
    letter-spacing: .2em;
    color: #00eaff
}

.event-panel h3 {
    font: 400 clamp(34px, 4vw, 58px)/.82 Anton;
    margin: 9px 0;
    text-shadow: 3px 0 var(--red), -3px 0 var(--cyan)
}

.event-panel p {
    font: 500 12px/1.55 Inter;
    color: #9da3b1;
    margin: 0
}

.event-list[data-kind="fun"] {
    margin-top: 24px
}

.gallery-expanded {
    background: #08090d;
    padding: 9vw 7vw;
    position: relative;
    overflow: hidden
}

.photo-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.photo-card {
    appearance: none;
    border: 1px solid #292d35;
    background: #101218;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: transform .25s var(--ease), box-shadow .25s
}

.photo-card:nth-child(3n) {
    transform: rotate(1deg)
}

.photo-card:nth-child(3n+1) {
    transform: rotate(-1deg)
}

.photo-card:hover {
    transform: translateY(-8px) rotate(0);
    box-shadow: 6px 6px 0 var(--cyan)
}

.photo-card img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    filter: saturate(.85) contrast(1.05)
}

.photo-card span {
    display: block;
    padding: 11px 5px 6px;
    color: #777;
    font: 800 8px "Barlow Condensed";
    letter-spacing: .2em
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(2, 2, 5, .94);
    display: none;
    place-items: center;
    padding: 5vw
}

.lightbox.open {
    display: grid
}

.lightbox img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    border: 1px solid rgba(0, 240, 255, .5);
    box-shadow: 0 0 50px rgba(0, 240, 255, .12), 10px 10px 0 rgba(255, 0, 153, .2);
    pointer-events: none
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 46px;
    height: 46px;
    border: 1px solid #777;
    background: #0d0f14;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    z-index: 2210
}

@media(max-width:900px) {

    .info-grid,
    .faculty-grid,
    .society-grid,
    .about-v-grid {
        grid-template-columns: 1fr
    }

    .info-panel.big {
        grid-row: auto
    }

    .faculty-card {
        grid-template-columns: 110px 1fr
    }

    .faculty-card img {
        width: 110px;
        height: 145px
    }

    .photo-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .event-list {
        grid-template-columns: 1fr
    }

    .dossier {
        padding-bottom: 40vw
    }

    .dossier-strip {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 30px 7vw 0
    }

    .institution-art {
        min-height: 360px
    }

    .institution-art img {
        height: 55%
    }
}

@media(max-width:600px) {
    .event-tabs {
        overflow: auto;
        padding-bottom: 4px
    }

    .event-tabs button {
        flex: 0 0 auto
    }

    .event-panel {
        grid-template-columns: 38px 86px 1fr;
        gap: 10px;
        min-height: 165px;
        padding: 12px
    }

    .event-panel.no-img {
        grid-template-columns: 38px 1fr
    }

    .event-panel img {
        width: 86px;
        height: 86px
    }

    .event-panel h3 {
        font-size: 34px
    }

    .event-panel p {
        font-size: 10px
    }

    .photo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .photo-card img {
        height: 130px
    }

    .faculty-card {
        grid-template-columns: 1fr
    }

    .faculty-card img {
        width: 100%;
        height: 210px
    }

    .info-panel {
        padding: 20px
    }

    .dossier-strip {
        gap: 10px
    }

    .dossier-strip img {
        width: 45%;
        height: 80px
    }

    .society-visual {
        min-height: 340px
    }

    .society-orbit {
        width: 300px;
        height: 300px
    }

    .society-visual img {
        width: 270px
    }

    .sound-toggle {
        font-size: 9px;
        min-height: 36px
    }

    .cursor {
        display: none
    }
}

/* V24 mobile navigation */
@media(max-width:850px) {
    header {
        height: 62px;
        padding: 0 14px;
        background: rgba(7, 8, 12, .96);
        backdrop-filter: none
    }

    nav {
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 8px 14px 18px;
        background: rgba(7, 8, 12, .98);
        border-bottom: 1px solid rgba(0, 245, 230, .25);
        transform: translateY(-130%);
        opacity: 0;
        pointer-events: none;
        transition: transform .35s var(--ease), opacity .25s ease
    }

    nav.open {
        transform: none;
        opacity: 1;
        pointer-events: auto
    }

    nav a {
        padding: 17px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        font-size: 12px
    }

    nav a.active {
        padding-bottom: 17px
    }

    .menu {
        display: grid;
        border-color: #3c414d;
        cursor: pointer
    }

    .menu.open i:nth-child(1) {
        transform: translateY(6px) rotate(45deg)
    }

    .menu.open i:nth-child(2) {
        opacity: 0
    }

    .menu.open i:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg)
    }

    .menu i {
        transition: .25s
    }
}

@media(min-width:851px) {
    .menu {
        display: none
    }
}


/* V29: the spotlight and logo are one locked visual unit.
   Both use exactly the same focal point, so moving the spotlight also moves the logo. */
.site-spotlight {
    --spot-x: 60%;
    --spot-y: 55%;
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(115, 70, 255, .055) 0%, rgba(20, 10, 40, .018) 38%, transparent 70%),
        radial-gradient(circle at calc(var(--spot-x) - 11%) var(--spot-y), rgba(255, 0, 153, .038), transparent 34%),
        radial-gradient(circle at calc(var(--spot-x) + 11%) var(--spot-y), rgba(0, 238, 255, .038), transparent 34%);
}

.site-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--spot-x) var(--spot-y), transparent 0%, rgba(3, 4, 10, .08) 58%, rgba(3, 4, 10, .42) 100%);
}

.site-spotlight img {
    position: absolute;
    left: var(--spot-x);
    top: var(--spot-y);
    width: min(66vw, 860px);
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center;
    transform: translate(-50%, -50%);
    opacity: .045;
    mix-blend-mode: screen;
    filter: saturate(1.18) contrast(1.05);
    user-select: none;
}

.site-spotlight {
    display: none !important;
}

.site {
    position: relative;
    z-index: 1;
}

header {
    z-index: 900;
}

.intro {
    z-index: 2000;
}

/* The old section-only watermark is no longer needed; the spotlight is global. */
.about-logo-watermark {
    display: none !important;
}

@media(max-width:900px) {
    .site-spotlight {
        --spot-x: 58%;
        --spot-y: 57%;
    }

    .site-spotlight img {
        width: 112vw;
        max-width: none;
        opacity: .038;
    }
}

@media(max-width:600px) {
    .site-spotlight {
        --spot-x: 56%;
        --spot-y: 59%;
    }

    .site-spotlight img {
        width: 125vw;
        opacity: .032;
    }
}

/* Keep the effect visually continuous without adding scroll-time animation. */
@media(prefers-reduced-motion:reduce) {
    .site-spotlight img {
        filter: none;
    }
}

/* V31 fixes: clean nav markup, readable initialization status, active RGB glitch bursts */
nav a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

nav a.active {
    color: #fff;
    border-bottom: 2px solid var(--red);
    padding-bottom: 10px;
}

.init-status {
    overflow: hidden;
    text-overflow: clip;
}

@media(max-width:600px) {
    .init-status {
        font-size: 8px;
        letter-spacing: .16em;
        max-width: 88vw
    }

    .intro-stage {
        width: 100%;
        padding: 0 14px
    }

    .init-bar {
        max-width: 72vw
    }
}

/* V32: initialization status spacing fix */
.intro-stage .init-status {
    display: block !important;
    width: 100%;
    max-width: 420px;
    height: 18px;
    min-height: 18px;
    margin: 22px auto 0 !important;
    padding: 0;
    position: relative;
    clear: both;
    overflow: hidden;
    white-space: nowrap;
    line-height: 18px !important;
    text-align: center;
    transform: none;
    flex: 0 0 18px;
}

.intro-stage .init-bar {
    display: block;
    width: min(280px, 70vw);
    height: 8px;
    margin: 9px auto 0 !important;
    flex: 0 0 8px;
}

@media(max-width:600px) {
    .intro-stage .init-status {
        max-width: 88vw;
        height: 16px;
        min-height: 16px;
        line-height: 16px !important;
        margin-top: 18px !important;
        font-size: 8px;
    }
}

/* V33: clean initialization hierarchy */
.intro-powered {
    margin: 18px auto 0;
    text-align: center;
    font: 800 10px/1 "Barlow Condensed";
    letter-spacing: .30em;
    color: #6f6f76;
    position: relative;
    z-index: 6;
}

.intro-stage .init-status {
    margin-top: 10px !important;
}

@media(max-width:600px) {
    .intro-powered {
        font-size: 9px;
        letter-spacing: .24em;
        margin-top: 14px;
    }

    .intro-stage .init-status {
        margin-top: 8px !important;
    }
}

/* V34: turn the previously unused source graphics into comic-book panels inside THE VERSE. */
.verse-art-panel {
    position: absolute;
    z-index: 4;
    width: clamp(220px, 25vw, 360px);
    margin: 0;
    padding: 10px 10px 34px;
    background: #f3f0e7;
    color: #111;
    border: 2px solid #111;
    box-shadow: 10px 10px 0 rgba(255, 16, 24, .9), -5px -5px 0 rgba(0, 245, 230, .8);
    transform: rotate(-4deg);
    transition: transform .35s var(--ease), filter .35s var(--ease);
    overflow: hidden
}

.verse-art-panel:before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px);
    pointer-events: none;
    mix-blend-mode: multiply
}

.verse-art-frame {
    height: clamp(180px, 20vw, 280px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #08090d;
    border: 1px solid #111;
    position: relative
}

.verse-art-frame:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(0, 245, 230, .18), transparent 30%), radial-gradient(circle at 25% 75%, rgba(255, 22, 106, .18), transparent 34%);
    mix-blend-mode: screen;
    pointer-events: none
}

.verse-art-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: contrast(1.08) saturate(1.05)
}

.verse-art-panel figcaption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    font: 800 9px/1 "Barlow Condensed";
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #111
}

.verse-art-panel:hover {
    transform: translateY(-10px) rotate(0deg);
    filter: drop-shadow(0 0 18px rgba(0, 245, 230, .16))
}

.brand-art {
    right: 9%;
    top: 14%;
    transform: rotate(5deg);
}

.amazing-art {
    right: 9%;
    bottom: 12%;
    transform: rotate(-5deg);
}

.ultimate-art {
    right: 11%;
    top: 13%;
    transform: rotate(4deg);
}

.brand-art .verse-art-frame {
    background: linear-gradient(145deg, #f5f1e6, #c8d5df)
}

.amazing-art .verse-art-frame {
    background: linear-gradient(145deg, #061426, #0d4a78)
}

.ultimate-art .verse-art-frame {
    background: linear-gradient(145deg, #150916, #281033)
}

@media(max-width:900px) {
    .verse-art-panel {
        width: 42vw
    }

    .brand-art {
        right: 6%;
        top: 12%
    }

    .amazing-art {
        right: 6%;
        bottom: 9%
    }

    .ultimate-art {
        right: 6%;
        top: 10%
    }
}

@media(max-width:600px) {
    .verse-art-panel {
        position: absolute;
        width: 52vw;
        padding: 7px 7px 28px;
        box-shadow: 6px 6px 0 rgba(255, 16, 24, .85), -3px -3px 0 rgba(0, 245, 230, .75)
    }

    .verse-art-frame {
        height: 34vw
    }

    .verse-art-panel figcaption {
        left: 8px;
        right: 8px;
        bottom: 7px;
        font-size: 7px
    }

    .brand-art {
        right: 5%;
        top: 8%
    }

    .amazing-art {
        right: 5%;
        bottom: 8%
    }

    .ultimate-art {
        right: 5%;
        top: 8%
    }

    .chapter-copy {
        max-width: 72vw
    }

    .chapter-copy h3 {
        max-width: 65vw
    }
}

/* Moved source graphics: Department / Innovatory / About Vidyuttam */
.section-comic-art {
    position: relative;
    margin: 0 0 28px;
    z-index: 4;
    width: min(100%, 360px);
    padding: 9px 9px 30px;
    background: #f3f0e7;
    color: #111;
    border: 2px solid #111;
    box-shadow: 10px 10px 0 rgba(255, 16, 24, .82), -5px -5px 0 rgba(0, 245, 230, .72);
    transform: rotate(-2.5deg);
    overflow: hidden;
    transition: transform .3s ease, filter .3s ease
}

.section-comic-art:hover {
    transform: translateY(-7px) rotate(0deg);
    filter: drop-shadow(0 0 16px rgba(0, 245, 230, .16))
}

.section-comic-art:before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 4px);
    pointer-events: none;
    mix-blend-mode: multiply
}

.section-comic-frame {
    height: 220px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #08090d;
    border: 1px solid #111;
    position: relative
}

.section-comic-frame:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(0, 245, 230, .18), transparent 30%), radial-gradient(circle at 25% 75%, rgba(255, 22, 106, .18), transparent 34%);
    mix-blend-mode: screen;
    pointer-events: none
}

.section-comic-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: contrast(1.08) saturate(1.05)
}

.section-comic-art figcaption {
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 9px;
    font: 800 8px/1 "Barlow Condensed";
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #111
}

.department-art {
    float: right;
    margin: -5px 0 24px 28px;
    width: min(42%, 330px);
    transform: rotate(2deg)
}

.society-art {
    width: min(100%, 330px);
    margin: 0 auto 30px;
    transform: rotate(-3deg)
}

.about-art {
    width: min(100%, 330px);
    margin: 0 0 28px;
    transform: rotate(2deg)
}

@media(max-width:850px) {
    .department-art {
        float: none;
        width: min(100%, 340px);
        margin: 0 auto 26px
    }

    .society-art,
    .about-art {
        width: min(100%, 340px);
        margin: 0 auto 26px
    }

    .section-comic-frame {
        height: 200px
    }
}

@media(max-width:600px) {
    .section-comic-art {
        width: 100%;
        padding: 7px 7px 27px;
        box-shadow: 6px 6px 0 rgba(255, 16, 24, .78), -3px -3px 0 rgba(0, 245, 230, .7)
    }

    .section-comic-frame {
        height: 190px
    }

    .department-art {
        margin-bottom: 24px
    }

    .society-art,
    .about-art {
        margin-bottom: 24px
    }
}

/* V36 — reuse the original VERSE visual language inside 03 / 04 / 06.
   These are CSS reconstructions of the existing chapter graphics, not new image assets. */
.moved-verse-visual {
    position: relative;
    overflow: hidden;
    min-height: 245px;
    margin: 0 0 28px;
    border: 1px solid rgba(255, 255, 255, .16);
    isolation: isolate;
    box-shadow: 8px 8px 0 rgba(255, 16, 24, .35), -5px -5px 0 rgba(0, 245, 230, .28)
}

.moved-verse-label {
    position: absolute;
    left: 18px;
    top: 16px;
    z-index: 8;
    font: 800 9px "Barlow Condensed";
    letter-spacing: .28em;
    color: rgba(255, 255, 255, .72)
}

.moved-brand-visual {
    height: 300px;
    background: linear-gradient(135deg, #c8ccd0, #657180 47%, #080b10)
}

.moved-brand-bg {
    position: absolute;
    inset: 38% 0 0;
    background: linear-gradient(90deg, #17212c 0 10%, transparent 10% 17%, #111b26 17% 27%, transparent 27% 35%, #111a24 35% 47%, transparent 47% 54%, #111b25 54% 68%, transparent 68% 77%, #101923 77% 88%, transparent 88%);
    clip-path: polygon(0 30%, 7% 18%, 15% 34%, 22% 16%, 31% 38%, 40% 8%, 50% 31%, 60% 18%, 70% 34%, 78% 11%, 89% 30%, 100% 20%, 100% 100%, 0 100%);
    z-index: 1
}

.moved-brand-visual:after {
    display: none
}

.moved-brand-logo {
    position: absolute;
    right: 8%;
    top: 8%;
    width: 240px;
    height: 240px;
    z-index: 4;
    opacity: .48;
    filter: drop-shadow(0 0 18px rgba(0, 240, 255, .2)) drop-shadow(0 0 22px rgba(255, 0, 153, .13))
}

.moved-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen
}

.moved-amazing-visual {
    height: 280px;
    background: #061426
}

.moved-amazing-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #040911, #0b3562 48%, #05070b);
    z-index: 0
}

.moved-rain {
    position: absolute;
    inset: -30%;
    background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(150, 220, 255, .14) 15px 16px);
    transform: skewX(-11deg);
    animation: movedRain 1s linear infinite;
    z-index: 1
}

@keyframes movedRain {
    to {
        transform: skewX(-11deg) translateX(-50px)
    }
}

.moved-beam {
    position: absolute;
    right: 14%;
    bottom: -5%;
    width: 230px;
    height: 115%;
    background: linear-gradient(90deg, #03070d, #173b63, #03070d);
    clip-path: polygon(42% 0, 58% 0, 76% 100%, 24% 100%);
    z-index: 2;
    opacity: .75
}

.moved-sfx {
    position: absolute;
    right: 7%;
    top: 12%;
    z-index: 6;
    font: 400 62px Bangers;
    color: var(--yellow);
    transform: rotate(-8deg);
    text-shadow: 5px 5px 0 var(--red), -3px -2px 0 var(--cyan)
}

.moved-ultimate-visual {
    height: 300px;
    background: linear-gradient(135deg, #17181d, #090a0e)
}

.moved-ultimate-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #17181d, #090a0e);
    z-index: 0
}

.moved-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#fff 1.3px, transparent 1.5px);
    background-size: 10px 10px;
    opacity: .1;
    z-index: 1
}

.moved-burst {
    position: absolute;
    right: -10%;
    top: -35%;
    width: 460px;
    height: 460px;
    background: conic-gradient(var(--red), var(--yellow), var(--cyan), var(--pink), var(--red));
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
    opacity: .2;
    z-index: 2
}

.moved-pow {
    top: 12%;
    right: 7%;
    z-index: 6
}

.moved-zap {
    top: auto;
    bottom: 8%;
    right: 23%;
    font-size: 46px;
    color: var(--cyan);
    transform: rotate(7deg);
    z-index: 6
}

/* Remove the chapter artwork from its old position; the Verse keeps the text/comic structure. */
.chapter {
    background: #05070a
}

.chapter .comic-border {
    z-index: 3
}

@media(max-width:850px) {

    .moved-brand-visual,
    .moved-amazing-visual,
    .moved-ultimate-visual {
        height: 230px
    }

    .moved-brand-logo {
        width: 175px;
        height: 175px;
        right: 7%;
        top: 11%
    }

    .moved-sfx {
        font-size: 48px
    }

    .moved-beam {
        right: 8%;
        width: 150px
    }

    .moved-burst {
        width: 330px;
        height: 330px
    }

    .moved-zap {
        font-size: 36px
    }
}

@media(max-width:600px) {
    .moved-verse-visual {
        min-height: 190px;
        margin-bottom: 22px
    }

    .moved-brand-visual,
    .moved-amazing-visual,
    .moved-ultimate-visual {
        height: 190px
    }

    .moved-brand-logo {
        width: 135px;
        height: 135px;
        right: 4%;
        top: 17%
    }

    .moved-sfx {
        font-size: 38px;
        right: 5%
    }

    .moved-beam {
        width: 110px
    }

    .moved-burst {
        width: 260px;
        height: 260px;
        right: -18%;
        top: -22%
    }

    .moved-zap {
        font-size: 30px;
        right: 20%;
        bottom: 7%
    }
}


/* V49 — Section verse backgrounds completely removed */
.section-verse-bg {
    display: none !important;
}

.section-verse-bg .moved-verse-visual {
    position: absolute;
    inset: -5% -4%;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
    isolation: isolate;
    transform: none;
}

.section-verse-bg .moved-verse-label {
    opacity: .32;
    left: 7%;
    top: 9%;
    font-size: 8px
}

.department-verse-bg {
    opacity: .34;
    mix-blend-mode: screen
}

.department-verse-bg .moved-brand-visual {
    background: linear-gradient(135deg, #c8ccd0 0%, #657180 47%, #080b10 100%)
}

.department-verse-bg .moved-brand-bg {
    inset: 42% 0 0;
    opacity: .72
}

.department-verse-bg .moved-brand-logo {
    right: 10%;
    top: 7%;
    width: min(430px, 34vw);
    height: min(430px, 34vw);
    opacity: .30;
    filter: drop-shadow(0 0 30px rgba(0, 240, 255, .25)) drop-shadow(0 0 42px rgba(255, 0, 153, .2))
}

.society-verse-bg {
    opacity: .25;
    mix-blend-mode: screen
}

.society-verse-bg .moved-amazing-visual {
    background: #061426
}

.society-verse-bg .moved-rain {
    opacity: .55;
    animation-duration: 1.7s
}

.society-verse-bg .moved-beam {
    right: 17%;
    width: 360px;
    opacity: .30;
    filter: blur(2px)
}

.society-verse-bg .moved-sfx {
    right: 8%;
    top: 12%;
    font-size: clamp(55px, 8vw, 120px);
    opacity: .22
}

.about-verse-bg {
    opacity: .22;
    mix-blend-mode: screen
}

.about-verse-bg .moved-dots {
    opacity: .08
}

.about-verse-bg .moved-burst {
    width: min(900px, 65vw);
    height: min(900px, 65vw);
    right: -4%;
    top: -22%;
    opacity: .20;
    filter: blur(.2px)
}

.about-verse-bg .moved-sfx {
    opacity: .24
}

.about-verse-bg .moved-pow {
    font-size: clamp(55px, 7vw, 105px)
}

.about-verse-bg .moved-zap {
    font-size: clamp(40px, 5vw, 72px)
}

.info-panels>.section-kicker,
.info-panels>.info-grid,
.society>.section-kicker,
.society>.society-grid,
.about-vidyuttam>.section-kicker,
.about-vidyuttam>.about-v-grid {
    position: relative;
    z-index: 3
}

.info-panels>.section-kicker,
.society>.section-kicker,
.about-vidyuttam>.section-kicker {
    background: linear-gradient(90deg, rgba(8, 9, 13, .86), transparent);
    width: max-content;
    padding-right: 22px
}

.info-panel,
.society-copy,
.society-visual,
.about-v-grid>div {
    position: relative;
    z-index: 3
}

.info-panel.big {
    background: linear-gradient(145deg, rgba(18, 21, 28, .84), rgba(8, 9, 12, .62))
}

.society-grid {
    background: linear-gradient(90deg, rgba(8, 9, 13, .72), rgba(8, 9, 13, .24) 62%, transparent)
}

.about-v-grid {
    background: linear-gradient(90deg, rgba(8, 9, 13, .55), rgba(8, 9, 13, .16) 70%, transparent)
}

@media(max-width:900px) {
    .section-verse-bg {
        opacity: .28
    }

    .department-verse-bg .moved-brand-logo {
        width: 260px;
        height: 260px;
        right: 4%;
        top: 10%
    }

    .department-verse-bg .moved-brand-visual:after {
        width: 330px;
        height: 330px
    }

    .society-verse-bg .moved-beam {
        width: 240px;
        right: 4%
    }
}

@media(max-width:600px) {
    .section-verse-bg {
        inset: -8% -18%;
        opacity: .20
    }

    .department-verse-bg .moved-brand-logo {
        width: 190px;
        height: 190px;
        right: 2%;
        top: 15%
    }

    .department-verse-bg .moved-brand-visual:after {
        width: 240px;
        height: 240px
    }

    .society-verse-bg .moved-sfx {
        font-size: 55px
    }

    .about-verse-bg .moved-burst {
        width: 430px;
        height: 430px;
        right: -22%;
        top: -14%
    }
}

/* V39 — section headings 04/05/06/07 participate in the same random RGB glitch system. */
.society-copy h2,
.faculty-card h3,
.about-v-grid h2 {
    position: relative;
    isolation: isolate;
}

.society-copy h2::before,
.society-copy h2::after,
.faculty-card h3::before,
.faculty-card h3::after,
.about-v-grid h2::before,
.about-v-grid h2::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}

.society-copy h2::before,
.faculty-card h3::before,
.about-v-grid h2::before {
    color: var(--red);
    clip-path: inset(0 0 52% 0);
}

.society-copy h2::after,
.faculty-card h3::after,
.about-v-grid h2::after {
    color: var(--cyan);
    clip-path: inset(52% 0 0 0);
}

.society-copy h2.burst::before,
.society-copy h2.burst::after,
.faculty-card h3.burst::before,
.faculty-card h3.burst::after,
.about-v-grid h2.burst::before,
.about-v-grid h2.burst::after {
    opacity: .82;
}

.society-copy h2.burst::before,
.faculty-card h3.burst::before,
.about-v-grid h2.burst::before {
    transform: translate(var(--gx1), var(--gy1));
    clip-path: inset(var(--gc1) 0 var(--gc2) 0);
}

.society-copy h2.burst::after,
.faculty-card h3.burst::after,
.about-v-grid h2.burst::after {
    transform: translate(var(--gx2), var(--gy2));
    clip-path: inset(var(--gc3) 0 var(--gc4) 0);
}

.society-copy h2.burst,
.faculty-card h3.burst,
.about-v-grid h2.burst {
    transform: translate(var(--tx), var(--ty)) skewX(var(--sk));
    filter: saturate(var(--sat));
}

/* V40 — THE CIRCUIT joins the same continuous random RGB glitch system. */
.department-verse-visual h2.glitch-major::before,
.department-verse-visual h2.glitch-major::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}

.department-verse-visual h2.glitch-major.burst::before,
.department-verse-visual h2.glitch-major.burst::after {
    opacity: .82;
}

/* V41 — fix THE CIRCUIT composition: keep the RGB glitch, but prevent the heading from overpowering/cropping the panel. */
.department-verse-visual {
    overflow: hidden;
}

.department-verse-visual h2 {
    position: relative;
    z-index: 4;
    isolation: isolate;
    font-size: clamp(58px, 7vw, 104px);
    line-height: .78;
    letter-spacing: -.045em;
    margin: 24px 0 26px;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
}

.department-verse-visual h2.glitch-major::before,
.department-verse-visual h2.glitch-major::after {
    z-index: 2;
    mix-blend-mode: screen;
}

.department-verse-visual h2.glitch-major::before {
    color: var(--red);
    clip-path: inset(0 0 52% 0);
}

.department-verse-visual h2.glitch-major::after {
    color: var(--cyan);
    clip-path: inset(52% 0 0 0);
}

@media(max-width:850px) {
    .department-verse-visual h2 {
        font-size: clamp(54px, 15vw, 92px);
        line-height: .8;
        margin: 20px 0 22px;
    }
}


/* V42 — THE CIRCUIT: make the RGB treatment unmistakable and keep the composition contained. */
.department-verse-visual h2 {
    font-size: clamp(52px, 6.2vw, 92px) !important;
    line-height: .76 !important;
    letter-spacing: -.05em !important;
    margin: 20px 0 24px !important;
    position: relative !important;
    overflow: visible !important;
    text-shadow: 4px 0 0 var(--red), -4px 0 0 var(--cyan) !important;
}

.department-verse-visual h2.glitch-major::before,
.department-verse-visual h2.glitch-major::after {
    content: attr(data-text) !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    white-space: pre !important;
    pointer-events: none !important;
    opacity: .20 !important;
    z-index: 5 !important;
    mix-blend-mode: screen !important;
    transform: translateZ(0);
}

.department-verse-visual h2.glitch-major::before {
    color: var(--red) !important;
    clip-path: inset(0 0 48% 0) !important;
    transform: translate(-3px, 0) !important;
}

.department-verse-visual h2.glitch-major::after {
    color: var(--cyan) !important;
    clip-path: inset(48% 0 0 0) !important;
    transform: translate(3px, 0) !important;
}

.department-verse-visual h2.glitch-major.burst::before {
    opacity: .95 !important;
    transform: translate(var(--gx1), var(--gy1)) !important;
    clip-path: inset(var(--gc1) 0 var(--gc2) 0) !important;
}

.department-verse-visual h2.glitch-major.burst::after {
    opacity: .95 !important;
    transform: translate(var(--gx2), var(--gy2)) !important;
    clip-path: inset(var(--gc3) 0 var(--gc4) 0) !important;
}

.department-verse-visual h2.glitch-major.burst {
    transform: translate(var(--tx), var(--ty)) skewX(var(--sk)) !important;
    filter: saturate(var(--sat)) contrast(1.08) !important;
}

@media(max-width:850px) {
    .department-verse-visual h2 {
        font-size: clamp(48px, 13vw, 82px) !important;
        line-height: .78 !important;
    }
}

/* V43 — THE CIRCUIT rebuilt as a proper comic-book panel. */
.department-verse-visual {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 520px !important;
    padding: clamp(34px, 4vw, 58px) !important;
    border: 4px solid var(--cyan) !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 78% 24%, rgba(0, 224, 235, .18) 0 2px, transparent 3px 100%),
        radial-gradient(circle at 78% 24%, rgba(0, 224, 235, .09) 0 8px, transparent 9px 100%),
        radial-gradient(circle at 18% 76%, rgba(239, 29, 39, .14) 0 2px, transparent 3px 100%),
        linear-gradient(135deg, #0d1018 0%, #111520 48%, #0a0d14 100%) !important;
    box-shadow: 12px 12px 0 #000, 18px 18px 0 rgba(0, 224, 235, .55) !important;
    transform: rotate(-.35deg) !important;
}

.department-verse-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .55;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.6px);
    background-size: 7px 7px;
    mix-blend-mode: screen;
    pointer-events: none;
}

.department-verse-visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 52%;
    height: 180%;
    right: -18%;
    top: -42%;
    background: linear-gradient(90deg, transparent 0 28%, rgba(239, 29, 39, .55) 28% 34%, transparent 34% 45%, rgba(0, 210, 224, .55) 45% 51%, transparent 51%);
    transform: rotate(24deg);
    opacity: .45;
    mix-blend-mode: screen;
    pointer-events: none;
}

.department-verse-visual>span:first-child {
    display: inline-block !important;
    position: relative !important;
    z-index: 6 !important;
    padding: 7px 12px 6px !important;
    background: #090a0e !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .2em !important;
    transform: skew(-10deg) rotate(-1deg) !important;
    box-shadow: 6px 6px 0 var(--red), -5px -4px 0 var(--cyan) !important;
}

.department-verse-visual h2 {
    position: relative !important;
    z-index: 7 !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 52px 0 30px !important;
    color: #090a0e !important;
    font-family: Impact, "Arial Black", sans-serif !important;
    font-size: clamp(70px, 8vw, 132px) !important;
    line-height: .72 !important;
    letter-spacing: -.055em !important;
    text-transform: uppercase !important;
    transform: rotate(-2deg) !important;
    text-shadow: 8px 7px 0 #f1eee4, 12px 11px 0 #090a0e !important;
}

.department-verse-visual h2 em {
    color: #ed1d2a !important;
    font-style: normal !important;
    display: inline-block !important;
    transform: translateX(12px) skewX(-5deg) !important;
    -webkit-text-stroke: 2px #090a0e !important;
}

.department-verse-visual h2::before,
.department-verse-visual h2::after {
    z-index: 8 !important;
    mix-blend-mode: multiply !important;
    text-shadow: none !important;
}

.department-verse-visual p {
    position: relative !important;
    z-index: 6 !important;
    max-width: 76% !important;
    margin: 0 0 15px !important;
    padding-left: 18px !important;
    border-left: 5px solid #090a0e !important;
    color: #17191d !important;
    font-weight: 700 !important;
    line-height: 1.48 !important;
    font-size: clamp(14px, 1.25vw, 17px) !important;
}

.department-verse-visual p::first-letter {
    font-size: 1.25em;
}

.department-verse-visual::marker {
    display: none;
}

/* comic speech bubble */
.department-verse-visual .comic-bubble {
    display: none;
}

.department-verse-visual:global {}

.department-verse-visual .comic-bubble {}

/* drawn burst and caption built without extra markup */
.department-verse-visual>p:last-child::after {
    content: "POWER / CONTROL / ENERGY";
    position: absolute;
    right: -31%;
    bottom: -9px;
    width: 210px;
    padding: 10px 13px;
    background: #fff;
    border: 3px solid #090a0e;
    color: #090a0e;
    font-family: Arial Black, sans-serif;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: .14em;
    transform: rotate(4deg);
    box-shadow: 5px 5px 0 var(--red);
}

.department-verse-visual>p:last-child::before {
    content: "ZAP!";
    position: absolute;
    right: -28%;
    top: -80px;
    z-index: 5;
    color: #f4e51c;
    font-family: Impact, "Arial Black", sans-serif;
    font-size: clamp(46px, 5vw, 78px);
    line-height: .8;
    -webkit-text-stroke: 4px #090a0e;
    transform: rotate(-9deg) skew(-8deg);
    filter: drop-shadow(6px 6px 0 var(--cyan));
}

@media(max-width:900px) {
    .department-verse-visual {
        min-height: 470px !important;
        padding: 30px !important;
    }

    .department-verse-visual h2 {
        font-size: clamp(64px, 13vw, 100px) !important;
        margin: 42px 0 25px !important;
    }

    .department-verse-visual p {
        max-width: 92% !important;
    }

    .department-verse-visual>p:last-child::after {
        right: 2%;
        bottom: -62px;
    }

    .department-verse-visual>p:last-child::before {
        right: 2%;
        top: auto;
        bottom: -55px;
        font-size: 48px;
    }
}

@media(max-width:600px) {
    .department-verse-visual {
        min-height: 540px !important;
        box-shadow: 8px 8px 0 #08090d, 12px 12px 0 rgba(238, 25, 38, .7) !important;
    }

    .department-verse-visual h2 {
        font-size: clamp(58px, 18vw, 86px) !important;
    }

    .department-verse-visual p {
        max-width: 100% !important;
        font-size: 13px !important;
    }

    .department-verse-visual>p:last-child::after {
        display: none;
    }

    .department-verse-visual>p:last-child::before {
        right: 3%;
        bottom: -44px;
        font-size: 40px;
    }
}

/* V44 — THE DOSSIER / GCE KEONJHAR rebuilt as a true comic-book spread. */
.dossier {
    position: relative !important;
    min-height: auto !important;
    padding: 8vw 7vw 8vw !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 210, 224, .12), transparent 24%),
        radial-gradient(circle at 88% 78%, rgba(239, 29, 39, .10), transparent 25%),
        #eeeae0 !important;
    color: #111 !important;
}

.dossier::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .23;
    background-image: radial-gradient(#17191d 1px, transparent 1.35px);
    background-size: 7px 7px;
    mask-image: linear-gradient(135deg, #000, transparent 72%);
}

.dossier::after {
    content: "DOSSIER  /  GCE KEONJHAR";
    position: absolute;
    right: -20px;
    top: 42%;
    font: 900 clamp(55px, 9vw, 145px)/.8 "Barlow Condensed", sans-serif;
    letter-spacing: .04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(10, 12, 16, .08);
    transform: rotate(-90deg);
    pointer-events: none;
}

.dossier .panel-label {
    position: relative !important;
    z-index: 8 !important;
    display: inline-block !important;
    background: #090a0e !important;
    color: #fff !important;
    border: 0 !important;
    padding: 8px 14px !important;
    box-shadow: 6px 6px 0 var(--red), -5px -4px 0 var(--cyan) !important;
    transform: rotate(-1.5deg) skewX(-7deg) !important;
}

.dossier .manifest-art {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.dossier .institution-art::before {
    content: "";
    position: absolute;
    right: 5.5vw;
    top: 8.5vw;
    width: min(59vw, 900px);
    height: min(52vh, 500px);
    background: #090a0e;
    transform: rotate(1.1deg);
    box-shadow: 16px 16px 0 rgba(239, 29, 39, .9), -10px -9px 0 rgba(0, 210, 224, .82);
}

.dossier .institution-art img {
    position: absolute !important;
    right: 7vw !important;
    left: auto !important;
    top: 10vw !important;
    inset: auto 7vw auto auto !important;
    width: min(57vw, 870px) !important;
    height: min(48vh, 465px) !important;
    object-fit: cover !important;
    filter: grayscale(.15) saturate(.9) contrast(1.18) !important;
    border: 9px solid #f3f0e7 !important;
    outline: 3px solid #090a0e !important;
    box-shadow: 9px 9px 0 rgba(9, 10, 14, .95) !important;
    transform: rotate(1.1deg) !important;
    clip-path: polygon(0 2%, 98% 0, 100% 97%, 2% 100%) !important;
}

.dossier .institution-art::after {
    content: "EST. 1995  /  ENGINEERING  /  KEONJHAR";
    position: absolute;
    right: 8vw;
    top: calc(10vw + min(48vh, 465px) + 22px);
    z-index: 7;
    background: #090a0e;
    color: #fff;
    padding: 7px 12px;
    font: 900 10px/1 "Barlow Condensed", sans-serif;
    letter-spacing: .22em;
    transform: rotate(-1deg);
    box-shadow: 5px 5px 0 var(--red);
}

.dossier .halftone {
    z-index: 5 !important;
    right: 3vw !important;
    top: 4vw !important;
    width: 62vw !important;
    height: 62vh !important;
    opacity: .16 !important;
    background-size: 8px 8px !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%) !important;
}

.dossier .speech {
    z-index: 9 !important;
    right: 46vw !important;
    top: 7vw !important;
    width: 170px !important;
    height: 112px !important;
    background: #fff !important;
    border: 4px solid #090a0e !important;
    color: #090a0e !important;
    box-shadow: 9px 9px 0 var(--red), -6px -5px 0 var(--cyan) !important;
    transform: rotate(-7deg) !important;
}

.dossier .speech::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px dashed #090a0e;
    pointer-events: none;
}

.dossier .speech:after {
    bottom: -31px !important;
    left: 35px !important;
    border-top-color: #090a0e !important;
}

.dossier .arrow {
    z-index: 9 !important;
    right: 39vw !important;
    bottom: 29% !important;
    color: var(--red) !important;
    text-shadow: 4px 4px 0 #090a0e !important;
}

.dossier .manifest-copy {
    position: relative !important;
    z-index: 10 !important;
    width: 43% !important;
    max-width: 570px !important;
    padding-top: 7vw !important;
    padding-bottom: 3vw !important;
}

.dossier .manifest-copy .small {
    display: inline-block !important;
    background: #090a0e !important;
    color: #fff !important;
    padding: 5px 9px !important;
    letter-spacing: .22em !important;
    transform: skewX(-8deg) !important;
}

.dossier .manifest-copy h2 {
    position: relative !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 24px 0 30px !important;
    color: #090a0e !important;
    font-family: Impact, "Arial Black", sans-serif !important;
    font-size: clamp(78px, 10vw, 154px) !important;
    line-height: .72 !important;
    letter-spacing: -.055em !important;
    transform: rotate(-2deg) !important;
    text-shadow: 7px 7px 0 #f1eee4, 12px 12px 0 #090a0e !important;
}

.dossier .manifest-copy h2 em {
    color: var(--red) !important;
    -webkit-text-stroke: 2px #090a0e !important;
    text-shadow: 5px 5px 0 #090a0e !important;
}

.dossier .manifest-copy p {
    position: relative !important;
    max-width: 520px !important;
    margin: 0 0 17px !important;
    padding: 14px 18px !important;
    background: rgba(255, 255, 255, .86) !important;
    border: 3px solid #090a0e !important;
    color: #191b20 !important;
    font: 700 13px/1.7 Inter, sans-serif !important;
    box-shadow: 6px 6px 0 rgba(0, 210, 224, .7) !important;
}

.dossier .manifest-copy p:nth-of-type(2) {
    transform: rotate(1deg) !important;
    box-shadow: 6px 6px 0 rgba(239, 29, 39, .72) !important;
}

.dossier .signature {
    display: inline-block !important;
    background: #090a0e !important;
    color: #fff !important;
    border: 0 !important;
    padding: 9px 13px !important;
    margin-top: 16px !important;
    box-shadow: 5px 5px 0 var(--cyan) !important;
}

.dossier .dossier-strip {
    position: absolute !important;
    right: 7vw !important;
    top: calc(10vw + min(48vh, 465px) + 44px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 8 !important;
    margin-top: 0 !important;
    display: flex !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}

.dossier .dossier-strip img {
    width: clamp(160px, 20vw, 280px) !important;
    height: clamp(110px, 13vw, 185px) !important;
    border: 7px solid #f5f2e9 !important;
    outline: 2px solid #090a0e !important;
    box-shadow: 7px 7px 0 var(--cyan) !important;
    filter: saturate(.9) contrast(1.1) !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
}

.dossier .dossier-strip img+img {
    box-shadow: 7px 7px 0 var(--red) !important;
}

@media(max-width:900px) {
    .dossier {
        padding: 12vw 7vw 52vw !important;
    }

    .dossier .manifest-copy {
        width: 100% !important;
        max-width: 620px !important;
        padding-top: 8vw !important;
    }

    .dossier .institution-art::before {
        right: 7vw;
        top: 45%;
        width: 80vw;
        height: 42vw;
    }

    .dossier .institution-art img {
        right: 9vw !important;
        top: 47% !important;
        width: 76vw !important;
        height: 38vw !important;
    }

    .dossier .institution-art::after {
        right: 10vw;
        top: calc(47% + 38vw + 16px);
    }

    .dossier .speech {
        right: 10vw !important;
        top: 39% !important;
        transform: scale(.8) rotate(-7deg) !important;
        transform-origin: right top !important;
    }

    .dossier .arrow {
        display: none;
    }

    .dossier .manifest-copy p {
        max-width: 100% !important;
    }

    .dossier .dossier-strip {
        right: 9vw !important;
        top: calc(47% + 38vw + 44px) !important;
        gap: 12px !important;
    }

    .dossier .dossier-strip img {
        width: clamp(130px, 17vw, 220px) !important;
        height: clamp(90px, 11vw, 150px) !important;
    }
}

@media(max-width:600px) {
    .dossier {
        padding: 18vw 6vw 82vw !important;
    }

    .dossier::after {
        display: none;
    }

    .dossier .manifest-copy h2 {
        font-size: 22vw !important;
    }

    .dossier .institution-art::before {
        top: 52%;
        width: 88vw;
        height: 48vw;
    }

    .dossier .institution-art img {
        top: 54% !important;
        right: 7vw !important;
        width: 84vw !important;
        height: 43vw !important;
    }

    .dossier .institution-art::after {
        top: calc(54% + 43vw + 12px);
        right: 8vw;
        font-size: 8px;
    }

    .dossier .speech {
        top: 45% !important;
        right: 5vw !important;
        transform: scale(.58) rotate(-7deg) !important;
    }

    .dossier .dossier-strip {
        right: 7vw !important;
        top: calc(54% + 43vw + 38px) !important;
        gap: 10px !important;
        flex-direction: row !important;
    }

    .dossier .dossier-strip img {
        width: 37vw !important;
        height: 26vw !important;
    }
}

/* V46 — SUBTLE COMIC-BOOK SKIN
   The existing Vidyuttam composition stays intact. This layer only adds comic-print atmosphere. */

/* Global print grain / halftone atmosphere — content, photos and boxes remain untouched. */
/* V49 — global halftone removed to eliminate warm glow */
body::before {
    display: none !important;
}

/* Existing sections get restrained comic-print marks without changing their geometry. */
.hero::after,
.countdown::after,
.dossier::before,
.info-panels::before,
.society::before,
.faculty::before,
.about-vidyuttam::before,
.events-expanded::before,
.gallery-expanded::before,
.sponsors::before,
.final::before {
    pointer-events: none;
}

/* Halftone texture only in the negative space of major pages. */
.hero-paper::after,
.countdown-bg::after,
.dossier::after,
.info-panels::after,
.society::after,
.faculty::after,
.about-vidyuttam::after,
.events-expanded::after,
.gallery-expanded::after,
.sponsors::after,
.final::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .12) 0 1px, transparent 1.25px),
        linear-gradient(115deg, transparent 0 47%, rgba(255, 16, 24, .11) 47.2% 47.7%, transparent 48% 100%),
        linear-gradient(65deg, transparent 0 62%, rgba(0, 245, 230, .10) 62.2% 62.7%, transparent 63% 100%);
    background-size: 10px 10px, 100% 100%, 100% 100%;
    opacity: .11;
    mix-blend-mode: screen;
    z-index: 1;
}

/* Do not let the atmospheric layer cover existing content. */
.hero-paper>*,
.countdown-bg>*,
.dossier>*,
.info-panels>*,
.society>*,
.faculty>*,
.about-vidyuttam>*,
.events-expanded>*,
.gallery-expanded>*,
.sponsors>*,
.final>* {
    position: relative;
    z-index: 2;
}

/* Comic registration treatment only on existing display type. */
.hero h1,
.intro-title,
.intro-six,
.events-title h2,
.gallery-title h2,
.sponsors-title h2,
.countdown-copy h2,
.manifest-copy h2,
.info-panel h2,
.society-copy h2,
.about-v-grid h2,
.final-copy h2 {
    text-shadow: 2px 0 rgba(255, 16, 24, .72), -2px 0 rgba(0, 245, 230, .72);
}

/* Existing photographs remain completely unfiltered. */
.dossier img,
.info-panel img,
.society-visual img,
.faculty-card img,
.event-panel img,
.photo-card img,
.dossier-strip img {
    filter: initial;
}

/* Small comic ink accents around page edges, not inside content boxes. */
.hero::before,
.countdown::before,
.info-panels::before,
.society::before,
.faculty::before,
.about-vidyuttam::before,
.events-expanded::before,
.gallery-expanded::before,
.sponsors::before,
.final::before {
    background-image:
        linear-gradient(118deg, transparent 0 12%, rgba(255, 16, 24, .55) 12.1% 12.35%, transparent 12.5% 100%),
        linear-gradient(118deg, transparent 0 15%, rgba(0, 245, 230, .45) 15.1% 15.3%, transparent 15.45% 100%);
    background-size: 100% 100%;
    opacity: .32;
}

/* Preserve the existing light dossier background and its original text boxes. */
.dossier::after {
    opacity: .055;
    background-image: radial-gradient(circle, rgba(17, 17, 20, .55) 0 1px, transparent 1.25px);
    background-size: 9px 9px;
    mix-blend-mode: multiply;
}

@media(max-width:600px) {
    body::before {
        opacity: .035;
        background-size: 16px 16px, 20px 20px
    }

    .hero-paper::after,
    .countdown-bg::after,
    .dossier::after,
    .info-panels::after,
    .society::after,
    .faculty::after,
    .about-vidyuttam::after,
    .events-expanded::after,
    .gallery-expanded::after,
    .sponsors::after,
    .final::after {
        opacity: .07
    }
}

/* V47 — GLOBAL COMIC TONE, ORIGINAL COMPOSITION PRESERVED
   This is a visual skin only: no content, photographs, text boxes, dimensions or layout are changed. */

/* A stronger but still transparent print layer on every major page. */
.hero-paper::after,
.countdown-bg::after,
.dossier::after,
.info-panels::after,
.society::after,
.faculty::after,
.about-vidyuttam::after,
.events-expanded::after,
.gallery-expanded::after,
.sponsors::after,
.final::after,
.intro-paper::after {
    opacity: .20;
    background-image:
        radial-gradient(circle, rgba(17, 17, 20, .30) 0 1px, transparent 1.25px),
        radial-gradient(circle, rgba(0, 245, 230, .16) 0 1px, transparent 1.3px),
        linear-gradient(128deg, transparent 0 18%, rgba(255, 16, 24, .16) 18.15% 18.45%, transparent 18.65% 100%),
        linear-gradient(52deg, transparent 0 74%, rgba(0, 245, 230, .13) 74.15% 74.45%, transparent 74.65% 100%);
    background-size: 11px 11px, 17px 17px, 100% 100%, 100% 100%;
    mix-blend-mode: multiply;
}

/* Comic print framing around existing cards — the cards themselves are untouched. */
.info-panel,
.faculty-card,
.event-panel,
.photo-card,
.sponsor-card,
.countdown-clock>div {
    border-color: rgba(247, 245, 238, .26);
    box-shadow:
        4px 4px 0 rgba(255, 16, 24, .20),
        -3px -3px 0 rgba(0, 245, 230, .17),
        inset 0 0 0 1px rgba(255, 255, 255, .025);
}

/* Tiny comic registration marks on existing cards. */
.info-panel::before,
.faculty-card::before,
.event-panel::before,
.photo-card::before,
.sponsor-card::before,
.countdown-clock>div::before {
    content: "";
    position: absolute;
    inset: 5px;
    pointer-events: none;
    border-top: 1px solid rgba(255, 16, 24, .20);
    border-left: 1px solid rgba(0, 245, 230, .18);
    opacity: .7;
    z-index: 5;
}

/* Keep card pseudo-elements behind the actual content. */
.info-panel>*,
.faculty-card>*,
.event-panel>*,
.photo-card>*,
.sponsor-card>*,
.countdown-clock>div>* {
    position: relative;
    z-index: 6;
}

/* Original photographs: NO filters. Comic treatment lives in the frame around them. */
.info-panel img,
.faculty-card img,
.event-panel img,
.photo-card img,
.dossier img,
.dossier-strip img,
.society-visual img {
    filter: initial !important;
}

/* Comic-page edges: restrained ink slashes, kept away from text boxes/photos. */
.hero,
.countdown,
.dossier,
.info-panels,
.society,
.faculty,
.about-vidyuttam,
.events-expanded,
.gallery-expanded,
.sponsors,
.final,
.intro {
    isolation: isolate;
}

.hero::marker,
.countdown::marker,
.dossier::marker,
.info-panels::marker,
.society::marker,
.faculty::marker,
.about-vidyuttam::marker,
.events-expanded::marker,
.gallery-expanded::marker,
.sponsors::marker,
.final::marker {
    display: none
}

/* Section labels receive the comic-print registration without changing typography. */
.section-kicker,
.section-verse-bg .moved-verse-label,
.panel-label,
.events-top,
.sponsors-top,
.hero-caption,
.countdown-top,
.gallery-title>span {
    text-shadow: 1px 0 rgba(255, 16, 24, .65), -1px 0 rgba(0, 245, 230, .65);
}

/* Comic treatment for the event/filter controls without altering their geometry. */
.event-tabs button,
.btn {
    box-shadow: 3px 3px 0 rgba(255, 16, 24, .28), -2px -2px 0 rgba(0, 245, 230, .20);
}

/* Gallery stays photographic, but each existing photo becomes a comic-book print frame. */
.photo-card {
    background: #0a0c11;
    overflow: hidden;
}

.photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 15%, rgba(0, 245, 230, .12), transparent 24%),
        radial-gradient(circle at 85% 85%, rgba(255, 16, 24, .12), transparent 25%),
        repeating-linear-gradient(135deg, transparent 0 30px, rgba(255, 255, 255, .025) 31px, transparent 32px 58px);
    mix-blend-mode: screen;
    z-index: 4;
}

/* Faculty cards: retain exact image and text, add a printed-page edge. */
.faculty-card {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .035) 0 1px, transparent 1.2px),
        linear-gradient(135deg, transparent 0 78%, rgba(255, 16, 24, .055) 78.2% 79%, transparent 79.3%);
    background-size: 9px 9px, 100% 100%;
}

/* Society/About visual areas get ink/speed accents while their existing art remains untouched. */
.society-visual,
.about-v-grid>div,
.department-verse-visual {
    position: relative;
}

.society-visual::after,
.about-v-grid>div::after,
.department-verse-visual::after {
    content: "";
    position: absolute;
    width: 28%;
    height: 2px;
    right: 3%;
    top: 8%;
    background: var(--red);
    box-shadow: 0 6px 0 var(--cyan), 0 12px 0 rgba(255, 16, 24, .35);
    transform: skewX(-35deg) rotate(-4deg);
    opacity: .45;
    pointer-events: none;
    z-index: 4;
}

/* Sponsor/final panels inherit the same printed comic registration. */
.sponsor-card b,
.sponsors-title h2,
.final-copy h2,
.events-title h2,
.gallery-title h2,
.countdown-copy h2 {
    text-shadow: 3px 0 rgba(255, 16, 24, .48), -3px 0 rgba(0, 245, 230, .48);
}

/* Hero and intro retain their existing cinematic composition; add only print grain. */
.hero-paper,
.intro-paper {
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 255, 255, .045) 0 1px, transparent 1.25px);
    background-size: 48px 48px, 13px 13px;
}

@media(max-width:600px) {

    .hero-paper::after,
    .countdown-bg::after,
    .dossier::after,
    .info-panels::after,
    .society::after,
    .faculty::after,
    .about-vidyuttam::after,
    .events-expanded::after,
    .gallery-expanded::after,
    .sponsors::after,
    .final::after,
    .intro-paper::after {
        opacity: .12
    }

    .info-panel::before,
    .faculty-card::before,
    .event-panel::before,
    .photo-card::before,
    .sponsor-card::before {
        inset: 3px
    }
}

/* =========================================================
   V48 — THE ELECTRIC COMIC BOOK SYSTEM
   Original photography/assets remain untouched. This layer
   changes only the surrounding art direction and print language.
   ========================================================= */
:root {
    --comic-ink: #05070b;
    --comic-paper: #e9e5d8;
    --comic-cyan: #00f5e6;
    --comic-red: #ff1024;
    --comic-yellow: #ffd21a;
}

/* A restrained printed-page atmosphere across every major scene. */
.site>section:not(.hero) {
    position: relative;
    isolation: isolate;
}

.site>section:not(.hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .28;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .07) 0 1px, transparent 1.3px),
        radial-gradient(circle at 70% 70%, rgba(0, 245, 230, .045) 0 1px, transparent 1.4px),
        repeating-linear-gradient(125deg, transparent 0 46px, rgba(255, 16, 36, .025) 47px 48px, transparent 49px 92px);
    background-size: 9px 9px, 13px 13px, 100% 100%;
    mix-blend-mode: screen;
}

.site>section:not(.hero)::after {
    content: "";
    position: absolute;
    inset: 16px;
    pointer-events: none;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    clip-path: polygon(0 0, 100% 0, 100% 98%, 98% 100%, 0 100%);
}

/* Keep actual content above the print overlay. */
.site>section:not(.hero)>* {
    position: relative;
    z-index: 1
}

/* Comic page registration marks. */
.countdown::before,
.manifest::before,
.info-panels::before,
.society::before,
.faculty::before,
.about-vidyuttam::before,
.events::before,
.comic-gallery::before,
.sponsors::before,
.final::before {
    content: "";
    position: absolute;
    width: 52px;
    height: 7px;
    top: 28px;
    right: 34px;
    background: var(--comic-red);
    box-shadow: -9px 9px 0 var(--comic-cyan);
    transform: skewX(-28deg) rotate(-2deg);
    opacity: .65;
    z-index: 4;
    pointer-events: none;
}

/* SECTION NUMBER AS A COMIC ISSUE STAMP */
.section-kicker,
.panel-label,
.events-top,
.gallery-title>span,
.sponsors-top {
    letter-spacing: .18em;
    text-shadow: 2px 0 rgba(255, 16, 36, .65), -2px 0 rgba(0, 245, 230, .65);
}

/* Dossier: original photos, comic frame around them. */
.manifest-art,
.dossier-strip img,
.faculty-card img,
.event-panel img,
.photo-card {
    border: 2px solid rgba(0, 0, 0, .8);
    box-shadow: 8px 8px 0 rgba(0, 245, 230, .18), -7px -7px 0 rgba(255, 16, 36, .16);
}

.manifest-art::before,
.society-visual::before,
.department-verse-visual::before,
.about-v-grid>div:first-child::before {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .25);
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0 1px, transparent 1.5px);
    background-size: 7px 7px;
    mix-blend-mode: screen;
    opacity: .22;
}

/* Original photographs: no filter, no color transformation. */
.manifest-art img,
.dossier-strip img,
.faculty-card img,
.event-panel img,
.photo-card img {
    filter: none !important;
    transform-origin: center;
}

/* Make image holders feel like printed comic panels without touching image pixels. */
.dossier-strip img:nth-child(1),
.photo-card:nth-child(3n+1) {
    transform: rotate(-1.2deg)
}

.dossier-strip img:nth-child(2),
.photo-card:nth-child(3n+2) {
    transform: rotate(1deg)
}

.photo-card:nth-child(3n) {
    transform: rotate(-.6deg)
}

.dossier-strip img:hover,
.photo-card:hover {
    transform: translateY(-5px) rotate(0deg)
}

/* THE CIRCUIT becomes a graphic-comic title, not a fake photo. */
.department-verse-visual h2,
.society-copy h2,
.about-v-grid h2,
.events-title h2,
.gallery-title h2,
.sponsors-title h2,
.final-copy h2,
.countdown-copy h2 {
    position: relative;
    isolation: isolate;
    text-shadow: 4px 0 0 rgba(255, 16, 36, .72), -4px 0 0 rgba(0, 245, 230, .72), 0 5px 0 rgba(0, 0, 0, .45);
}

.department-verse-visual h2::before,
.society-copy h2::before,
.about-v-grid h2::before,
.events-title h2::before,
.gallery-title h2::before,
.sponsors-title h2::before,
.final-copy h2::before,
.countdown-copy h2::before {
    content: "";
    position: absolute;
    left: -18px;
    right: 8%;
    bottom: -9px;
    height: 5px;
    background: var(--comic-red);
    transform: skewX(-35deg);
    opacity: .75;
    z-index: -1;
}

/* Caption-box language without changing the existing copy boxes. */
.manifest-copy,
.society-copy,
.about-v-grid>div,
.faculty-card>div,
.event-panel>div:last-child,
.sponsor-card,
.countdown-copy {
    position: relative;
}

.manifest-copy::after,
.society-copy::after,
.about-v-grid>div::after,
.faculty-card>div::after,
.event-panel>div:last-child::after,
.sponsor-card::after,
.countdown-copy::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    right: 12px;
    bottom: 12px;
    border-right: 2px solid var(--comic-cyan);
    border-bottom: 2px solid var(--comic-red);
    transform: skewX(-14deg);
    opacity: .55;
    pointer-events: none;
}

/* Event cards become a comic contact sheet rather than generic UI cards. */
.event-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-left: 4px solid var(--comic-cyan);
    box-shadow: 7px 7px 0 rgba(255, 16, 36, .12);
}

.event-panel:nth-child(even) {
    border-left-color: var(--comic-red)
}

.event-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 16, 36, .13), transparent 20%),
        radial-gradient(circle at 10% 90%, rgba(0, 245, 230, .10), transparent 22%),
        repeating-linear-gradient(-18deg, transparent 0 34px, rgba(255, 255, 255, .022) 35px 36px, transparent 37px 70px);
}

.event-panel>* {
    position: relative;
    z-index: 1
}

.event-index {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
    text-shadow: 2px 2px 0 rgba(255, 16, 36, .55);
}

/* Gallery: original photos, but a printed comic contact-sheet frame. */
.photo-grid {
    position: relative
}

.photo-grid::before {
    content: "ARCHIVE / CONTACT SHEET / ORIGINAL PHOTOGRAPHS";
    position: absolute;
    top: -26px;
    left: 0;
    font-size: 9px;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .42);
}

.photo-card {
    isolation: isolate
}

.photo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .10) 0 1px, transparent 1.4px),
        linear-gradient(135deg, transparent 0 72%, rgba(255, 16, 36, .16) 72.2% 72.7%, transparent 73%),
        linear-gradient(135deg, transparent 0 78%, rgba(0, 245, 230, .15) 78.2% 78.7%, transparent 79%);
    background-size: 8px 8px, 100% 100%, 100% 100%;
    mix-blend-mode: screen;
}

.photo-card span {
    font-family: 'Arial Narrow', Arial, sans-serif;
    letter-spacing: .15em;
    text-shadow: 1px 0 var(--comic-red), -1px 0 var(--comic-cyan);
}

/* Faculty: portrait remains photographic; surrounding card gets illustrated energy. */
.faculty-card {
    overflow: hidden;
    isolation: isolate
}

.faculty-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(var(--comic-red) 0 45%, var(--comic-cyan) 45% 100%);
    opacity: .8;
    pointer-events: none;
    z-index: 4;
}

/* Sponsors: turn placeholders into comic title plates. */
.sponsor-card {
    isolation: isolate;
    overflow: hidden
}

.sponsor-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .09) 0 1px, transparent 1.4px),
        repeating-linear-gradient(165deg, transparent 0 28px, rgba(255, 16, 36, .055) 29px 30px, transparent 31px 58px);
    background-size: 9px 9px, 100% 100%;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: .5;
}

.sponsor-card b {
    position: relative;
    z-index: 2
}

/* Buttons get a physical comic-print offset rather than glassmorphism. */
.btn {
    position: relative;
    box-shadow: 5px 5px 0 rgba(255, 16, 36, .35), -3px -3px 0 rgba(0, 245, 230, .28) !important;
}

.btn:hover {
    transform: translate(-2px, -2px)
}

/* Little hand-drawn marks on major pages. */
.manifest,
.info-panels,
.society,
.faculty,
.about-vidyuttam,
.events,
.comic-gallery,
.sponsors {
    background-image: radial-gradient(circle at 15% 85%, rgba(0, 245, 230, .045), transparent 18%), radial-gradient(circle at 88% 12%, rgba(255, 16, 36, .05), transparent 20%);
}

/* Mobile keeps the same comic language but removes visual clutter. */
@media(max-width:700px) {
    .site>section:not(.hero)::after {
        inset: 8px
    }

    .countdown::before,
    .manifest::before,
    .info-panels::before,
    .society::before,
    .faculty::before,
    .about-vidyuttam::before,
    .events::before,
    .comic-gallery::before,
    .sponsors::before,
    .final::before {
        right: 16px;
        top: 18px;
        transform: scale(.75) skewX(-28deg)
    }

    .photo-card:nth-child(n),
    .dossier-strip img:nth-child(n) {
        transform: none
    }

    .event-panel {
        box-shadow: 4px 4px 0 rgba(255, 16, 36, .12)
    }
}

.comic-register-pulse {
    transform: translateX(.8px) skewX(-.2deg);
    text-shadow: 6px 0 rgba(255, 16, 36, .78), -6px 0 rgba(0, 245, 230, .78), 0 5px 0 rgba(0, 0, 0, .5) !important;
}

/* =========================================================
   V49 — FULL COMIC BOOK GRAPHICS UPGRADE
   Three pillars:
   1. STRONG COMIC PANEL BORDERS on every image/card
   2. FLOATING SFX WORDS (ZAP, POW, BOOM etc.) per section
   3. COMIC PAGE ATMOSPHERE: halftone dots, ink speed lines,
      ink splatters, gutter borders across content sections
   ========================================================= */

/* ─── 1. COMIC PANEL BORDERS ──────────────────────────── */
.info-panel,
.event-panel,
.photo-card,
.faculty-card {
    border: 3px solid #0a0a0a !important;
    box-shadow: 6px 6px 0 #0a0a0a, 9px 9px 0 var(--red), 12px 12px 0 var(--cyan) !important;
    position: relative;
}

.dossier-strip img {
    border: 4px solid #0a0a0a !important;
    box-shadow: 6px 6px 0 var(--cyan) !important;
}

.info-panel img,
.event-panel img,
.photo-card img,
.faculty-card img {
    display: block;
    border: 3px solid #0a0a0a !important;
    box-shadow: none !important;
    filter: contrast(1.12) saturate(1.1) !important;
}

/* Halftone dot overlay injected by JS */
.comic-halftone-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background-image:
        radial-gradient(circle, rgba(0, 0, 0, .55) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 16, 24, .28) 0 1px, transparent 1.8px);
    background-size: 5px 5px, 9px 9px;
    background-position: 0 0, 3px 3px;
    mix-blend-mode: multiply;
    opacity: .18;
}

/* Panel number badge top-left */
.comic-panel-num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: #0a0a0a;
    color: #fff;
    font: 800 8px/1 "Barlow Condensed";
    letter-spacing: .2em;
    padding: 4px 9px;
    pointer-events: none;
}

/* Action label strip bottom */
.comic-action-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background: #0a0a0a;
    color: #fff;
    font: 800 8px/1 "Barlow Condensed";
    letter-spacing: .2em;
    padding: 5px 8px 4px;
    pointer-events: none;
    border-top: 2px solid var(--red);
}

/* Pop-out hover effects */
.photo-card:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.03) !important;
    box-shadow: 8px 8px 0 #0a0a0a, 12px 12px 0 var(--red), 16px 16px 0 var(--cyan) !important;
    z-index: 10;
}

.event-panel:hover {
    transform: translateX(10px) translateY(-3px) !important;
    box-shadow: -4px 4px 0 rgba(255, 16, 36, .7), 8px 8px 0 #0a0a0a, 12px 12px 0 var(--cyan) !important;
    border-color: var(--cyan) !important;
}

.info-panel:hover {
    transform: translate(-6px, -6px) !important;
    box-shadow: 9px 9px 0 #0a0a0a, 13px 13px 0 var(--cyan) !important;
}

.faculty-card:hover {
    box-shadow: 7px 7px 0 #0a0a0a, 11px 11px 0 var(--red), 14px 14px 0 var(--cyan) !important;
}

/* ─── 2. FLOATING SFX WORDS ───────────────────────────── */
.sfx-word {
    position: absolute;
    pointer-events: none;
    font-family: "Bangers", Impact, sans-serif;
    line-height: 1;
    letter-spacing: .04em;
    user-select: none;
    z-index: 5;
}

/* Dossier / About */
.dossier .sfx-dossier-1 {
    font-size: clamp(55px, 7vw, 100px);
    color: var(--red);
    text-shadow: 4px 4px 0 #0a0a0a, 7px 7px 0 var(--cyan);
    right: 3%;
    top: 7%;
    transform: rotate(12deg);
    opacity: .88;
}

.dossier .sfx-dossier-2 {
    font-size: clamp(30px, 4vw, 55px);
    color: var(--cyan);
    text-shadow: 3px 3px 0 #0a0a0a, 5px 5px 0 var(--pink);
    left: 4%;
    bottom: 12%;
    transform: rotate(-9deg);
    opacity: .72;
}

/* Department */
.info-panels .sfx-dept-1 {
    font-size: clamp(60px, 8vw, 110px);
    color: var(--yellow);
    text-shadow: 5px 5px 0 #0a0a0a, 8px 8px 0 var(--red);
    right: 1%;
    bottom: 7%;
    transform: rotate(-14deg);
    opacity: .82;
}

.info-panels .sfx-dept-2 {
    font-size: clamp(28px, 3.5vw, 48px);
    color: #fff;
    text-shadow: 3px 3px 0 #0a0a0a, 5px 5px 0 var(--blue);
    left: 2%;
    top: 10%;
    transform: rotate(8deg);
    opacity: .7;
}

/* Society */
.society .sfx-society-1 {
    font-size: clamp(55px, 7vw, 95px);
    color: var(--cyan);
    text-shadow: 4px 4px 0 #0a0a0a, 7px 7px 0 var(--pink);
    right: 2%;
    top: 6%;
    transform: rotate(-11deg);
    opacity: .85;
}

/* Faculty */
.faculty .sfx-faculty-1 {
    font-size: clamp(50px, 6vw, 80px);
    color: var(--pink);
    text-shadow: 4px 4px 0 #0a0a0a, 6px 6px 0 var(--cyan);
    right: 2%;
    bottom: 8%;
    transform: rotate(9deg);
    opacity: .8;
}

/* Events */
.events-expanded .sfx-events-1 {
    font-size: clamp(70px, 9vw, 130px);
    color: var(--red);
    text-shadow: 5px 5px 0 #0a0a0a, 9px 9px 0 var(--yellow);
    left: 1%;
    top: 4%;
    transform: rotate(-7deg);
    opacity: .78;
}

.events-expanded .sfx-events-2 {
    font-size: clamp(40px, 5vw, 70px);
    color: var(--yellow);
    text-shadow: 3px 3px 0 #0a0a0a, 6px 6px 0 var(--red);
    right: 1%;
    bottom: 4%;
    transform: rotate(13deg);
    opacity: .75;
}

.events-expanded .sfx-events-3 {
    font-size: clamp(28px, 3vw, 44px);
    color: var(--cyan);
    text-shadow: 2px 2px 0 #0a0a0a, 4px 4px 0 var(--blue);
    left: 46%;
    top: 2%;
    transform: rotate(-5deg);
    opacity: .65;
}

/* Gallery */
.gallery-expanded .sfx-gallery-1 {
    font-size: clamp(55px, 7vw, 95px);
    color: var(--pink);
    text-shadow: 4px 4px 0 #0a0a0a, 7px 7px 0 var(--cyan);
    right: 2%;
    top: 5%;
    transform: rotate(10deg);
    opacity: .82;
}

.gallery-expanded .sfx-gallery-2 {
    font-size: clamp(32px, 4vw, 52px);
    color: var(--yellow);
    text-shadow: 3px 3px 0 #0a0a0a, 5px 5px 0 var(--red);
    left: 2%;
    bottom: 5%;
    transform: rotate(-8deg);
    opacity: .72;
}

/* About Vidyuttam */
.about-vidyuttam .sfx-about-1 {
    font-size: clamp(50px, 6vw, 85px);
    color: var(--red);
    text-shadow: 4px 4px 0 #0a0a0a, 7px 7px 0 var(--cyan);
    right: 3%;
    top: 10%;
    transform: rotate(-13deg);
    opacity: .78;
}

/* ─── 3. COMIC PAGE ATMOSPHERE ────────────────────────── */

/* Speed line texture on dark content sections */
.info-panels,
.society,
.faculty,
.events-expanded,
.gallery-expanded,
.about-vidyuttam {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .055) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(0, 245, 230, .03) 0 1px, transparent 1.7px),
        repeating-linear-gradient(-52deg,
            transparent 0px,
            transparent 38px,
            rgba(255, 255, 255, .04) 38px,
            rgba(255, 255, 255, .04) 40px),
        repeating-linear-gradient(38deg,
            transparent 0px,
            transparent 65px,
            rgba(0, 245, 230, .025) 65px,
            rgba(0, 245, 230, .025) 67px) !important;
    background-size: 14px 14px, 22px 22px, 100% 100%, 100% 100% !important;
    background-position: 0 0, 8px 8px, 0 0, 0 0 !important;
    background-color: #08090d;
}

/* Halftone dot texture on paper dossier section */
.dossier {
    background-image:
        radial-gradient(circle, rgba(0, 0, 0, .2) 0 1px, transparent 1.5px),
        repeating-linear-gradient(-60deg,
            transparent 0px,
            transparent 45px,
            rgba(0, 0, 0, .03) 45px,
            rgba(0, 0, 0, .03) 47px) !important;
    background-size: 8px 8px, 100% 100% !important;
}

/* Ink blob corner accent on all dark sections */
.info-panels,
.society,
.faculty,
.events-expanded,
.gallery-expanded,
.about-vidyuttam {
    overflow: hidden;
}

/* Gutter lines between sections — the comic panel separator */
.manifest,
.info-panels,
.society,
.faculty,
.about-vidyuttam,
.events-expanded,
.gallery-expanded {
    border-top: 4px solid #0a0a0a !important;
    border-bottom: 4px solid #0a0a0a !important;
}

/* Speech bubble upgrade */
.speech {
    font-size: 42px !important;
    box-shadow: 8px 8px 0 #0a0a0a, 12px 12px 0 var(--cyan) !important;
    border: 3px solid #0a0a0a !important;
}

.speech:after {
    border-top-color: #0a0a0a !important;
    border-width: 20px !important;
}

/* Section kicker badge treatment */
.section-kicker {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: #0a0a0a;
    color: var(--cyan) !important;
    padding: 5px 14px 5px 10px;
    transform: skewX(-8deg);
    box-shadow: 4px 4px 0 var(--red);
    text-shadow: none !important;
    margin-bottom: 32px !important;
    position: relative;
    z-index: 6;
}

.section-kicker::before {
    background: var(--red) !important;
    width: 18px !important;
    height: 3px !important;
}

/* ─── MOBILE ───────────────────────────────────────────── */
@media (max-width:700px) {
    .sfx-word {
        opacity: .5 !important;
    }

    .info-panel,
    .event-panel,
    .photo-card,
    .faculty-card,
    .dossier-strip img {
        box-shadow: 4px 4px 0 #0a0a0a, 6px 6px 0 var(--red) !important;
    }

    .dossier .sfx-dossier-1,
    .info-panels .sfx-dept-1,
    .society .sfx-society-1,
    .events-expanded .sfx-events-1 {
        font-size: clamp(36px, 9vw, 58px);
    }

    .manifest,
    .info-panels,
    .society,
    .faculty,
    .about-vidyuttam,
    .events-expanded,
    .gallery-expanded {
        border-top-width: 2px !important;
        border-bottom-width: 2px !important;
    }

    .section-kicker {
        transform: none;
    }
}

/* Remove the yellow blob from a.brand::after (header logo pseudo-element) */
a.brand::after,
.brand::after {
    display: none !important;
}

/* =========================================================
   V49 — DARK COMIC CAPTION BOX TREATMENT
   Dark theme kept. Text blocks styled as comic book panels:
   dark bg, thick neon border, flat coloured shadow offset.
   ========================================================= */

/* Base dark caption box */
.manifest-copy p,
.info-panel p,
.society-copy p,
.faculty-card div p,
.about-v-grid div p,
.countdown-copy p,
.event-panel div p,
.hero-left p {
    background: #0c0f17 !important;
    color: #e8eaf0 !important;
    border: 3px solid var(--cyan) !important;
    padding: 16px 20px !important;
    margin: 14px 0 !important;
    line-height: 1.78 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    font-family: Inter, Arial, sans-serif !important;
    position: relative;
    z-index: 4;
}

/* Odd paragraphs — cyan border, red shadow */
.manifest-copy p:nth-child(odd),
.info-panel p:nth-child(odd),
.society-copy p:nth-child(odd),
.about-v-grid div p:nth-child(odd),
.faculty-card div p:nth-child(odd),
.countdown-copy p:nth-child(odd),
.event-panel div p:nth-child(odd),
.hero-left p:nth-child(odd) {
    border-color: var(--cyan) !important;
    box-shadow: 5px 5px 0 var(--red) !important;
}

/* Even paragraphs — red border, cyan shadow */
.manifest-copy p:nth-child(even),
.info-panel p:nth-child(even),
.society-copy p:nth-child(even),
.about-v-grid div p:nth-child(even),
.faculty-card div p:nth-child(even),
.countdown-copy p:nth-child(even),
.event-panel div p:nth-child(even),
.hero-left p:nth-child(even) {
    border-color: var(--red) !important;
    box-shadow: 5px 5px 0 var(--cyan) !important;
}

/* Signature / single-element text rows */
.manifest-copy .signature {
    background: #0c0f17 !important;
    color: #e8eaf0 !important;
    border: 3px solid var(--cyan) !important;
    box-shadow: 5px 5px 0 var(--red) !important;
    padding: 12px 18px !important;
    margin-top: 14px !important;
}

/* Faculty role label — inverted neon stamp */
.faculty-card div small {
    display: block !important;
    background: var(--cyan) !important;
    color: #0a0a0a !important;
    border: 2px solid #0a0a0a !important;
    box-shadow: 4px 4px 0 var(--red) !important;
    font: 800 9px/1 "Barlow Condensed" !important;
    letter-spacing: .24em !important;
    padding: 5px 10px !important;
    margin-bottom: 10px !important;
}

/* Event panel category label */
.event-panel small {
    display: inline-block !important;
    background: var(--red) !important;
    color: #fff !important;
    border: 2px solid #0a0a0a !important;
    box-shadow: 3px 3px 0 var(--cyan) !important;
    font: 800 8px/1 "Barlow Condensed" !important;
    letter-spacing: .22em !important;
    padding: 4px 9px !important;
    margin-bottom: 8px !important;
}

/* Countdown paragraph width */
.countdown-copy p {
    max-width: 100% !important;
}

/* Hero paragraph — positioned within the dark hero */
.hero-left p {
    max-width: 480px !important;
}

/* Mobile */
@media (max-width: 700px) {

    .manifest-copy p,
    .info-panel p,
    .society-copy p,
    .faculty-card div p,
    .about-v-grid div p,
    .countdown-copy p,
    .event-panel div p,
    .hero-left p {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .manifest-copy p:nth-child(odd),
    .info-panel p:nth-child(odd),
    .society-copy p:nth-child(odd),
    .about-v-grid div p:nth-child(odd),
    .faculty-card div p:nth-child(odd),
    .countdown-copy p:nth-child(odd),
    .event-panel div p:nth-child(odd),
    .hero-left p:nth-child(odd) {
        box-shadow: 4px 4px 0 var(--red) !important;
    }

    .manifest-copy p:nth-child(even),
    .info-panel p:nth-child(even),
    .society-copy p:nth-child(even),
    .about-v-grid div p:nth-child(even),
    .faculty-card div p:nth-child(even),
    .countdown-copy p:nth-child(even),
    .event-panel div p:nth-child(even),
    .hero-left p:nth-child(even) {
        box-shadow: 4px 4px 0 var(--cyan) !important;
    }
}

/* =========================================================
   V49 — NEON 3-COLOUR BLOCK SHADOW ON ALL HEADINGS
   Red / Cyan / Pink offset — matches the site's glitch language.
   ========================================================= */

.hero h1,
.manifest-copy h2,
.info-panel h2,
.society-copy h2,
.about-v-grid h2,
.faculty-card h3,
.events-title h2,
.gallery-title h2,
.sponsors-title h2,
.countdown-copy h2,
.final-copy h2,
.intro-title,
.intro-six,
.department-verse-visual h2,
.verse-header h2,
.chapter-copy h3 {
    font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif !important;
    text-shadow:
        3px 0 0 rgba(255, 16, 36, .90),
        -3px 0 0 rgba(0, 245, 230, .82),
        0 3px 0 rgba(255, 22, 106, .65),
        5px 5px 0 rgba(255, 16, 36, .50),
        -5px 5px 0 rgba(0, 245, 230, .40),
        8px 8px 0 rgba(0, 0, 0, .55) !important;
    letter-spacing: -.04em !important;
}

/* Red em elements — deep neon-red depth shadow */
.hero h1 strong,
.manifest-copy h2 em,
.society-copy h2 em,
.about-v-grid h2 em,
.events-title h2 em,
.gallery-title h2 em,
.sponsors-title h2 em,
.final-copy h2 em,
.chapter-copy h3 i {
    color: var(--red) !important;
    text-shadow:
        3px 0 0 rgba(255, 100, 0, .85),
        -3px 0 0 rgba(255, 16, 36, .70),
        0 3px 0 rgba(180, 0, 0, .60),
        5px 5px 0 rgba(120, 0, 0, .55),
        8px 8px 0 rgba(0, 0, 0, .50) !important;
}

/* Faculty card h3 — neon red/cyan offset */
.faculty-card h3 {
    text-shadow:
        2px 0 0 rgba(255, 16, 36, .80),
        -2px 0 0 rgba(0, 245, 230, .70),
        4px 4px 0 rgba(255, 22, 106, .45),
        6px 6px 0 rgba(0, 0, 0, .50) !important;
}

/* Event panel h3 — constant chromatic comic text */
.event-panel h3 {
    color: #ffffff !important;
    font-family: "Anton", Impact, sans-serif !important;
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin: 8px 0 10px 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    text-shadow:
        2px 0 0 rgba(255, 16, 36, .85),
        -2px 0 0 rgba(0, 245, 230, .75),
        3px 3px 0 rgba(255, 22, 106, .45),
        5px 5px 0 rgba(0, 0, 0, .65) !important;
}

.event-panel h3::before,
.event-panel h3::after {
    display: none !important;
}

/* SFX words — vivid neon block shadow */
.dossier .sfx-dossier-1,
.info-panels .sfx-dept-1,
.events-expanded .sfx-events-1,
.gallery-expanded .sfx-gallery-1 {
    text-shadow:
        4px 0 0 rgba(255, 16, 36, .95),
        -4px 0 0 rgba(0, 245, 230, .88),
        0 4px 0 rgba(255, 22, 106, .70),
        6px 6px 0 rgba(255, 16, 36, .55),
        -6px 6px 0 rgba(0, 245, 230, .45),
        10px 10px 0 rgba(0, 0, 0, .45) !important;
}

@media (max-width: 700px) {

    .hero h1,
    .manifest-copy h2,
    .society-copy h2,
    .about-v-grid h2,
    .events-title h2,
    .gallery-title h2,
    .countdown-copy h2,
    .final-copy h2,
    .department-verse-visual h2 {
        text-shadow:
            1px 1px 0 #000,
            2px 2px 0 #000,
            3px 3px 0 #000,
            4px 4px 0 #000,
            5px 5px 0 rgba(0, 0, 0, .5) !important;
    }
}

/* =========================================================
   COUNTDOWN / SYSTEM TIMER — WHITE & PINK COMIC AESTHETIC
   ========================================================= */
.countdown-top {
    color: #ffffff !important;
    text-shadow: 1px 0 rgba(255, 40, 181, 0.7), -1px 0 rgba(0, 245, 230, 0.7) !important;
}

.countdown-top span {
    color: #ffffff !important;
}

.countdown-copy small {
    color: #ff53c8 !important;
    text-shadow: 2px 0 0 rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 83, 200, 0.5) !important;
}

.countdown-copy h2 {
    color: #ffffff !important;
    text-shadow:
        1px 1px 0 #000,
        2px 2px 0 #000,
        3px 3px 0 #000,
        4px 4px 0 #000,
        5px 5px 0 #000,
        6px 6px 0 #000,
        7px 7px 0 #000,
        8px 8px 0 rgba(0, 0, 0, .6) !important;
}

.countdown-copy h2 em {
    color: #ff28b5 !important;
    text-shadow:
        1px 1px 0 #7b0058,
        2px 2px 0 #68004a,
        3px 3px 0 #55003c,
        4px 4px 0 #42002e,
        5px 5px 0 #300021,
        6px 6px 0 #1e0015,
        7px 7px 0 #0d000a,
        8px 8px 0 rgba(0, 0, 0, .55),
        4px 0 0 #00eaff !important;
}

.countdown-copy h2::before {
    background: #ff28b5 !important;
    box-shadow: 0 0 14px rgba(255, 40, 181, 0.6) !important;
}

@media (max-width: 700px) {
    .countdown-copy h2 em {
        text-shadow:
            1px 1px 0 #7b0058,
            2px 2px 0 #55003c,
            3px 3px 0 #300021,
            4px 4px 0 rgba(0, 0, 0, .55),
            3px 0 0 #00eaff !important;
    }
}

/* =========================================================
   FACULTY SECTION — COMPACT & FIT PROPORTIONATELY ON PAGE
   ========================================================= */
.faculty {
    padding: clamp(35px, 4.5vw, 60px) clamp(20px, 6vw, 80px) !important;
    max-width: 1440px;
    margin: 0 auto;
}

.faculty-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(16px, 2.2vw, 28px) !important;
    align-items: stretch !important;
}

.faculty-card {
    display: grid !important;
    grid-template-columns: clamp(130px, 11vw, 170px) 1fr !important;
    gap: clamp(14px, 1.6vw, 22px) !important;
    align-items: center !important;
    padding: clamp(14px, 1.5vw, 20px) !important;
    min-height: auto !important;
}

.faculty-card img {
    width: 100% !important;
    height: clamp(170px, 15vw, 215px) !important;
    max-height: 215px !important;
    object-fit: cover !important;
}

.faculty-card>div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.faculty-card div small {
    margin-bottom: 6px !important;
    padding: 4px 8px !important;
    font-size: 8.5px !important;
    display: inline-block !important;
    width: fit-content !important;
}

.faculty-card h3 {
    font-size: clamp(20px, 2.1vw, 34px) !important;
    line-height: .92 !important;
    margin: 6px 0 8px !important;
}

.faculty-card div p {
    padding: 10px 14px !important;
    margin: 6px 0 0 !important;
    font-size: clamp(12px, 0.9vw, 13px) !important;
    line-height: 1.55 !important;
}

@media (max-width: 900px) {
    .faculty-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .faculty-card {
        grid-template-columns: 100px 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .faculty-card img {
        height: 140px !important;
    }

    .faculty-card h3 {
        font-size: 20px !important;
    }
}

/* =========================================================
   V50 — FIX BLACK TEXT INVISIBLE ON DARK BACKGROUNDS
   "THE" in department panel and "PEOPLE"/"WORLDS." in gallery
   were inheriting dark colors from parent sections.
   ========================================================= */

/* Gallery title: inherits color:#111 from .comic-gallery but
   sits over the dark (#08090d) gallery-expanded background */
.gallery-title h2 {
    color: #fff !important;
}

/* Department panel: had color:#090a0e making "THE" invisible */
.department-verse-visual h2 {
    color: #fff !important;
}

/* =========================================================
   V51 — FINAL HERO LANDSCAPE SPACING FIX
   Keeps the original composition while adding breathing room.
   Applies only to desktop landscape viewports.
   ========================================================= */

@media (min-width: 851px) and (max-height: 1000px) {
    .hero-left {
        left: 8vw;
        top: 48%;
        transform: translateY(-50%);
        max-width: 620px;
        z-index: 10;
    }

    .hero h1 {
        font-size: clamp(78px, 8.5vw, 135px);
        line-height: .70;
        letter-spacing: -.04em;
        margin: 16px 0 22px;
    }

    .hero-left p {
        max-width: 480px !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        line-height: 1.65 !important;
    }

    .hero-actions {
        gap: 14px;
        margin-top: 22px;
    }

    .hero-v {
        right: 18%;
        top: 18%;
        width: 290px;
        height: 290px;
    }

    .hero-caption {
        right: 5vw;
        bottom: 105px;
    }

    .hero-number {
        right: 3vw;
        bottom: 65px;
    }

    .ticker {
        bottom: 0;
    }
}

/* Extra-wide landscape displays */
@media (min-width: 1600px) and (max-height: 1000px) {
    .hero-left {
        left: 7.5vw;
        max-width: 650px;
    }

    .hero h1 {
        font-size: clamp(84px, 8.5vw, 145px);
        margin-bottom: 24px;
    }

    .hero-v {
        right: 15%;
        width: 320px;
        height: 320px;
    }
}

/* Short desktop screens (laptops <= 850px height like 1536x742, 1366x768) */
@media (min-width: 851px) and (max-height: 850px) {
    .hero-left {
        top: 47%;
        transform: translateY(-50%);
    }

    .hero h1 {
        font-size: clamp(66px, 7.5vw, 110px);
        margin: 12px 0 16px;
    }

    .hero-left p {
        padding: 12px 18px !important;
        line-height: 1.55 !important;
        font-size: 13px !important;
        margin-top: 6px !important;
    }

    .hero-actions {
        margin-top: 18px;
    }

    .hero-v {
        top: 14%;
        width: 250px;
        height: 250px;
    }
}

/* Very short desktop screens (<= 720px height) */
@media (min-width: 851px) and (max-height: 720px) {
    .hero-left {
        top: 46%;
        transform: translateY(-50%);
    }

    .hero h1 {
        font-size: clamp(56px, 6.5vw, 92px);
        margin: 8px 0 12px;
    }

    .hero-left p {
        padding: 10px 14px !important;
        line-height: 1.45 !important;
        font-size: 12px !important;
        margin-top: 4px !important;
    }

    .hero-actions {
        margin-top: 14px;
    }
}

/* =========================================================
   INTRO SCREEN RESPONSIVE SCALING
   Ensures intro badge, logo, and loading bar fit comfortably
   without vertical clipping on laptops (e.g. 1536x742, 1366x768).
   ========================================================= */

@media (max-height: 850px) {
    .intro-stage .logo-stack {
        width: min(150px, 26vw) !important;
        height: min(150px, 26vw) !important;
    }

    .panel-tag {
        margin-bottom: 8px;
        padding: 4px 10px;
    }

    .intro-title {
        font-size: clamp(48px, 6.5vw, 92px);
    }

    .intro-six {
        font-size: clamp(52px, 6vw, 80px);
    }

    .intro-line {
        margin-top: 10px;
    }

    .intro-stage button {
        margin-top: 16px;
        padding: 10px 18px;
    }

    .intro-powered {
        margin-top: 10px;
    }

    .intro-stage .init-status {
        margin-top: 6px !important;
    }

    .intro-stage .init-bar {
        margin-top: 6px !important;
    }
}

@media (max-height: 700px) {
    .intro-stage .logo-stack {
        width: min(110px, 20vw) !important;
        height: min(110px, 20vw) !important;
    }

    .intro-title {
        font-size: clamp(40px, 5vw, 72px);
    }

    .intro-six {
        font-size: clamp(44px, 4.5vw, 64px);
    }

    .intro-stage button {
        margin-top: 12px;
        padding: 8px 16px;
    }

    .intro-powered {
        margin-top: 6px;
    }
}

/* -- EVENT PANEL LINK STYLES -- */
/* event-panel hover — transform only (GPU composited, no paint) */
button.event-panel,
a.event-panel {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    will-change: transform;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s cubic-bezier(.16, 1, .3, 1), border-color .2s ease;
}

button.event-panel:hover,
a.event-panel:hover {
    transform: translateX(10px) translateY(-3px) !important;
}

.event-details-cta {
    display: inline-block;
    margin-top: 12px;
    font: 700 11px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .2em;
    color: var(--red);
    border-bottom: 1px solid rgba(255, 16, 24, .4);
    padding-bottom: 2px;
    text-transform: uppercase;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), color .2s, border-color .2s;
}

button.event-panel:hover .event-details-cta,
a.event-panel:hover .event-details-cta {
    transform: translateX(6px);
    color: var(--cyan) !important;
    border-color: var(--cyan) !important;
}

/* --------------------------------------
   EVENT DETAIL OVERLAY
-------------------------------------- */
.ev-overlay {
    position: fixed;
    inset: 0;
    z-index: 2300;
    background: rgba(7, 8, 11, 0);
    backdrop-filter: blur(0px);
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .38s ease, background .38s ease, backdrop-filter .38s ease, visibility .38s ease;
}

.ev-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(7, 8, 11, .78);
    backdrop-filter: blur(6px);
}

.ev-panel {
    position: relative;
    width: min(780px, 100vw);
    height: 100%;
    background: #0d0f14;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--red);
    box-shadow: -20px 0 50px rgba(0, 0, 0, .85), -4px 0 0 var(--cyan);
}

.ev-overlay.open .ev-panel {
    transform: translateX(0);
}

.ev-hero,
.ev-col,
.ev-cta {
    transform: translateX(25px);
    opacity: 0;
    transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .38s ease;
}

.ev-overlay.open .ev-hero {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .12s;
}

.ev-overlay.open .ev-col:nth-child(1) {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .18s;
}

.ev-overlay.open .ev-col:nth-child(2) {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .24s;
}

.ev-overlay.open .ev-col:nth-child(3) {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .30s;
}

.ev-overlay.open .ev-col:nth-child(4) {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .36s;
}

.ev-overlay.open .ev-cta {
    transform: translateX(0);
    opacity: 1;
    transition-delay: .40s;
}

.ev-scroll {
    overflow-y: auto;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.ev-close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 10;
    width: 42px;
    height: 42px;
    background: #111318;
    border: 1px solid #333;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .12s, border-color .12s;
}

.ev-close:hover {
    background: var(--red);
    border-color: var(--red);
}

/* hero strip */
.ev-hero {
    position: relative;
    padding: 52px 36px 32px;
    background: #111318;
    border-bottom: 3px solid #0b0c10;
    overflow: hidden;
}

.ev-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.ev-num {
    position: absolute;
    right: 24px;
    top: 16px;
    font: 900 clamp(70px, 10vw, 130px)/.8 'Anton', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .06);
    letter-spacing: -.04em;
    pointer-events: none;
}

.ev-kicker {
    display: inline-block;
    background: var(--red);
    color: #fff;
    padding: 4px 10px;
    font: 800 10px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .22em;
    box-shadow: 3px 3px 0 #0b0c10;
    margin-bottom: 16px;
    transform: skewX(-6deg);
}

.ev-title {
    font: 900 clamp(36px, 6vw, 70px)/.84 'Barlow Condensed', sans-serif;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #f7f5ee;
    text-shadow: 4px 4px 0 #0b0c10, 7px 7px 0 var(--red);
    margin-bottom: 12px;
}

.ev-title em {
    color: var(--cyan);
    font-style: normal;
    text-shadow: 4px 4px 0 #0b0c10, 7px 7px 0 var(--cyan);
}

.ev-tagline {
    font: 500 13px/1.6 Inter, sans-serif;
    color: rgba(247, 245, 238, .6);
    max-width: 520px;
    margin-bottom: 20px;
}

.ev-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ev-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font: 700 10px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .16em;
    border: 1.5px solid currentColor;
}

.ev-badge-type {
    color: var(--cyan);
}

.ev-badge-date {
    color: var(--yellow);
}

.ev-badge-fee {
    color: var(--pink);
}

/* body panels */
.ev-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: #0b0c10;
    padding: 2px;
}

.ev-col {
    background: #111318;
    padding: 24px 28px;
}

.ev-section-head {
    font: 800 10px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .28em;
    color: var(--cyan);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(0, 245, 230, .18);
    text-transform: uppercase;
}

/* info table */
.ev-info-table {
    display: flex;
    flex-direction: column;
    border: 1.5px solid #1a1c22;
}

.ev-info-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    border-bottom: 1px solid #1a1c22;
    font: 500 12px/1 Inter, sans-serif;
}

.ev-info-row:last-child {
    border-bottom: none;
}

.ev-info-label {
    padding: 11px 13px;
    color: var(--cyan);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-right: 1px solid #1a1c22;
    background: rgba(0, 245, 230, .03);
}

.ev-info-value {
    padding: 11px 13px;
    color: #f7f5ee;
}

/* rules */
.ev-rules {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: ev-rule;
}

.ev-rules li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    font: 500 12px/1.6 Inter, sans-serif;
    color: rgba(247, 245, 238, .78);
    counter-increment: ev-rule;
}

.ev-rules li::before {
    content: counter(ev-rule, decimal-leading-zero);
    font: 800 10px/1 'Barlow Condensed', sans-serif;
    color: var(--red);
    padding-top: 3px;
}

.ev-rules li strong {
    color: #fff;
    font-weight: 700;
}

/* prizes */
.ev-prizes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ev-prize {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1.5px solid #1a1c22;
}

.ev-prize-rank {
    font: 900 clamp(18px, 2.5vw, 28px)/1 'Barlow Condensed', sans-serif;
    text-align: center;
}

.ev-prize-1 .ev-prize-rank {
    color: var(--yellow);
}

.ev-prize-2 .ev-prize-rank {
    color: rgba(192, 198, 210, 1);
}

.ev-prize-3 .ev-prize-rank {
    color: rgba(205, 127, 50, 1);
}

.ev-prize-label {
    font: 700 10px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .12em;
    color: rgba(247, 245, 238, .45);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.ev-prize-amount {
    font: 700 16px/1 'Barlow Condensed', sans-serif;
    color: #f7f5ee;
}

/* coordinator */
.ev-coord {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ev-coord-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1.5px solid #1a1c22;
    background: #111318;
    position: relative;
    transition: transform .15s ease, border-color .15s ease;
}

.ev-coord-card:hover {
    border-color: var(--cyan);
    transform: translateX(3px);
}

.ev-coord-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--red);
    display: grid;
    place-items: center;
    font: 900 17px/1 'Barlow Condensed', sans-serif;
    color: #fff;
    border: 2px solid #0b0c10;
    box-shadow: 2px 2px 0 var(--cyan);
    flex-shrink: 0;
    transition: transform .15s ease;
}

.ev-coord-card:hover .ev-coord-avatar {
    transform: scale(1.05) rotate(-3deg);
}

.ev-coord-card:nth-child(3n+2) .ev-coord-avatar {
    background: var(--cyan);
    color: #0b0c10;
    box-shadow: 2px 2px 0 var(--pink);
}

.ev-coord-card:nth-child(3n) .ev-coord-avatar {
    background: var(--yellow);
    color: #0b0c10;
    box-shadow: 2px 2px 0 var(--red);
}

.ev-coord-name {
    font: 700 13px/1.2 'Barlow Condensed', sans-serif;
    letter-spacing: .05em;
    color: #f7f5ee;
    margin-bottom: 3px;
}

.ev-coord-role {
    font: 500 10px/1 Inter, sans-serif;
    color: var(--cyan);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ev-coord-phone {
    font: 500 12px/1 Inter, sans-serif;
    color: rgba(247, 245, 238, .55);
    margin-top: 5px;
    display: inline-block;
    text-decoration: none;
}

/* cta */
.ev-cta {
    padding: 40px 36px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    border-top: 3px solid #0b0c10;
    background: #111318;
    position: relative;
}

.ev-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 245, 230, .07), transparent 55%);
    pointer-events: none;
}

.ev-cta-label {
    font: 800 10px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .3em;
    color: rgba(247, 245, 238, .35);
    text-transform: uppercase;
}

.ev-cta-title {
    font: 900 clamp(28px, 4vw, 48px)/.9 'Barlow Condensed', sans-serif;
    color: #f7f5ee;
    text-shadow: 3px 3px 0 #0b0c10, 5px 5px 0 var(--cyan);
    text-transform: uppercase;
}

.ev-cta-title em {
    color: var(--cyan);
    font-style: normal;
}

.ev-btn-register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 34px;
    background: var(--red);
    color: #fff;
    font: 800 12px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    border: 3px solid #0b0c10;
    box-shadow: 6px 6px 0 #0b0c10;
    text-decoration: none;
    transition: transform .12s, box-shadow .12s;
}

.ev-btn-register:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #0b0c10;
}

.ev-cta-note {
    font: 500 11px/1.5 Inter, sans-serif;
    color: rgba(247, 245, 238, .3);
}

/* button.event-panel reset — targeted instead of all:unset (avoids full style recalc) */
button.event-panel {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    color: inherit;
}

@media(max-width:600px) {
    .ev-body {
        grid-template-columns: 1fr;
    }

    .ev-hero {
        padding: 52px 20px 24px;
    }

    .ev-col {
        padding: 18px 20px;
    }

    .ev-cta {
        padding: 32px 20px;
    }
}

/* --------------------------------------
   SCROLL REVEAL ANIMATIONS
   GPU-only: transform + opacity (no layout)
-------------------------------------- */

/* Default hidden state   applied by JS on page load */
.sr {
    opacity: 0;
    transform: translateY(32px) translateZ(0);
    transition: opacity .55s cubic-bezier(.16, 1, .3, 1),
        transform .55s cubic-bezier(.16, 1, .3, 1);
}

.sr.sr-left {
    transform: translateX(-40px) translateZ(0);
}

.sr.sr-right {
    transform: translateX(40px) translateZ(0);
}

.sr.sr-scale {
    transform: scale(.92) translateZ(0);
}

.sr.sr-pop {
    transform: translateY(20px) scale(.95) translateZ(0);
}

/* Visible state   added by IntersectionObserver */
.sr.in {
    opacity: 1;
    transform: translate(0, 0) scale(1) translateZ(0);
}

/* Event panel smooth slide-in */
.event-panel.sr {
    opacity: 0;
    transform: translateX(-32px) translateZ(0);
    transition: opacity .42s cubic-bezier(.16, 1, .3, 1), transform .42s cubic-bezier(.16, 1, .3, 1);
}

.event-panel.sr.in {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

/* Exit is instant — only entrance animates, so scroll-up reset is clean */
.sr:not(.in) {
    transition-duration: 0s !important;
    transition-delay: 0ms !important;
}

/* Stagger delay via CSS custom property set by JS */
.sr {
    transition-delay: var(--sr-delay, 0ms);
}

/* Comic-book panel flash on entry */
@keyframes sr-flash {
    0% {
        outline: 2px solid rgba(255, 16, 24, .6);
        outline-offset: 0px;
    }

    40% {
        outline: 2px solid rgba(0, 245, 230, .5);
        outline-offset: 3px;
    }

    100% {
        outline: 2px solid transparent;
        outline-offset: 6px;
    }
}

.sr.in.sr-flash-in {
    animation: sr-flash .5s ease-out forwards;
}

/* =========================================================
   V52 — FINAL PANEL DISPLAY & VISIBILITY FIX
   Ensures Line 706 (<section class="final">) renders clearly,
   displays the Nikola Tesla quote and free accommodation,
   and prevents overflow clipping or grid layout distortion.
   ========================================================= */
.final {
    height: auto !important;
    min-height: 100vh !important;
    background: #030405 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 110px 6vw 90px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

/* Force decorative background layers to remain absolutely positioned */
.final .final-grid,
.final .final-web,
.final .final-ink {
    position: absolute !important;
    pointer-events: none !important;
}

.final .final-grid {
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) !important;
    background-size: 60px 60px !important;
}

.final .final-web {
    z-index: 1 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(120vw, 1100px) !important;
    height: min(120vw, 1100px) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
}

.final .final-ink {
    z-index: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 55vw !important;
    height: 80vh !important;
}

.final-copy {
    position: relative !important;
    z-index: 5 !important;
    max-width: 860px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.final-copy > span {
    display: inline-block !important;
    font: 800 12px/1 "Barlow Condensed", sans-serif !important;
    letter-spacing: .35em !important;
    color: var(--cyan) !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
}

.final-copy img.final-logo {
    width: 170px !important;
    max-width: 170px !important;
    height: auto !important;
    max-height: 120px !important;
    margin: 12px auto 16px !important;
    display: block !important;
    object-fit: contain !important;
    mix-blend-mode: screen !important;
    filter: drop-shadow(0 0 20px rgba(0, 240, 255, .35)) drop-shadow(0 0 32px rgba(255, 0, 153, .2)) !important;
}

.final-copy h2 {
    font-family: "Anton", Impact, sans-serif !important;
    font-size: clamp(52px, 8vw, 110px) !important;
    line-height: 0.88 !important;
    margin: 0 0 16px !important;
    letter-spacing: -.03em !important;
    color: #fff !important;
    text-shadow: 3px 0 0 rgba(255, 16, 36, .9), -3px 0 0 rgba(0, 245, 230, .85), 6px 6px 0 rgba(0, 0, 0, .6) !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.final-copy h2 em {
    font-style: normal !important;
    color: var(--red) !important;
    text-shadow: 3px 0 0 rgba(255, 100, 0, .85), -3px 0 0 rgba(255, 16, 36, .7), 5px 5px 0 rgba(0, 0, 0, .6) !important;
}

/* Accommodation Banner */
.final-callout-strip {
    margin: 20px auto 12px !important;
    width: 100% !important;
    max-width: 740px !important;
}

.final-acc-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: rgba(0, 240, 255, 0.09) !important;
    border: 2px solid var(--cyan) !important;
    padding: 12px 24px !important;
    box-shadow: 4px 4px 0 #000 !important;
    text-transform: uppercase !important;
}

.final-acc-badge .bolt {
    color: var(--yellow) !important;
    font-size: 20px !important;
}

.final-acc-badge .acc-text {
    font: 800 clamp(12px, 1.8vw, 15px)/1.2 "Barlow Condensed", sans-serif !important;
    letter-spacing: 0.18em !important;
    color: #fff !important;
}

/* Nikola Tesla Tribute Card */
.tesla-tribute-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 26px !important;
    max-width: 760px !important;
    width: 100% !important;
    margin: 20px auto 14px !important;
    padding: 20px 24px !important;
    background: linear-gradient(135deg, rgba(8, 18, 30, 0.94) 0%, rgba(14, 12, 22, 0.96) 100%) !important;
    border: 2px solid var(--cyan) !important;
    border-left: 6px solid var(--red) !important;
    box-shadow: 6px 6px 0 #000, 0 0 25px rgba(0, 240, 255, 0.18) !important;
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.tesla-media-col {
    flex-shrink: 0 !important;
}

.tesla-img-wrapper {
    position: relative !important;
    width: 135px !important;
    height: 170px !important;
    border: 2px solid #fff !important;
    box-shadow: 4px 4px 0 #000, 0 0 16px rgba(0, 240, 255, 0.35) !important;
    overflow: hidden !important;
    background: #000 !important;
}

.tesla-portrait-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    mix-blend-mode: normal !important;
    filter: contrast(1.06) brightness(1.02) !important;
}

.tesla-badge {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--red) !important;
    color: #fff !important;
    font: 800 9px/1.2 "Barlow Condensed", sans-serif !important;
    letter-spacing: 0.18em !important;
    text-align: center !important;
    padding: 4px 2px !important;
    text-transform: uppercase !important;
}

.tesla-quote-col {
    flex: 1 !important;
    min-width: 0 !important;
}

.tesla-kicker {
    font: 800 11px/1 "Barlow Condensed", sans-serif !important;
    letter-spacing: 0.22em !important;
    color: var(--yellow) !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}

.tesla-quote-text {
    margin: 0 0 10px !important;
    font: 600 clamp(15px, 2.1vw, 18px)/1.45 "Inter", sans-serif !important;
    color: #f7f5ee !important;
    font-style: italic !important;
    letter-spacing: 0.01em !important;
}

.tesla-cite {
    display: block !important;
    font: 800 12px/1.3 "Barlow Condensed", sans-serif !important;
    letter-spacing: 0.2em !important;
    color: var(--cyan) !important;
    text-transform: uppercase !important;
    font-style: normal !important;
}

.tesla-cite .cite-sub {
    color: #aaa !important;
    font-weight: 600 !important;
}

/* Event Rules & Timing Situation Notice */
.event-situation-notice {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    max-width: 760px !important;
    width: 100% !important;
    margin: 14px auto 18px !important;
    padding: 12px 20px !important;
    background: rgba(255, 170, 0, 0.09) !important;
    border: 1px dashed var(--yellow, #ffaa00) !important;
    border-left: 4px solid var(--yellow, #ffaa00) !important;
    box-shadow: 3px 3px 0 #000 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.event-situation-notice .notice-icon {
    font-size: 20px !important;
    color: var(--yellow, #ffc400) !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.event-situation-notice .notice-text {
    font: 700 clamp(11px, 1.6vw, 13px)/1.45 "Barlow Condensed", sans-serif !important;
    letter-spacing: 0.12em !important;
    color: #f0ede0 !important;
    text-transform: uppercase !important;
}

.event-situation-notice .notice-text strong {
    color: var(--yellow, #ffc400) !important;
    letter-spacing: 0.16em !important;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .tesla-tribute-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 18px 16px !important;
        gap: 16px !important;
    }
    .tesla-img-wrapper {
        width: 130px !important;
        height: 160px !important;
        margin: 0 auto !important;
    }
    .tesla-quote-col {
        text-align: center !important;
    }
    .event-situation-notice {
        flex-direction: row !important;
        text-align: center !important;
        padding: 10px 14px !important;
    }
}

.final-copy p {
    font: 800 11px/1.4 "Barlow Condensed", sans-serif !important;
    letter-spacing: .28em !important;
    color: #888 !important;
    margin: 16px 0 20px !important;
    text-transform: uppercase !important;
}

.final-copy .btn.red {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}