@font-face {
    font-family: "Vatsal-logo";
    src: url("../../assets/data/vatsal-logo-font.woff2") format("woff2");
    font-display: swap;
}
:root{
    --bg:#050816;
    --card:#0b1228;
    --border:rgba(255,255,255,.08);
    --text:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;

    background:
        radial-gradient(circle at top,#18264b 0%,#081120 45%,#04070f 100%);

    color:white;

    min-height:100vh;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* ===================================
BACKGROUND
=================================== */

.bg{
    position:fixed;
    inset:0;
    z-index:-2;
    overflow:hidden;
}

.stars{
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.9),transparent),
        radial-gradient(2px 2px at 70% 60%,rgba(255,255,255,.8),transparent),
        radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.8),transparent),
        radial-gradient(2px 2px at 90% 20%,rgba(255,255,255,.9),transparent);

    background-size:400px 400px;

    opacity:.55;

    animation:starsMove 80s linear infinite;
}

@keyframes starsMove{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-500px);
    }
}

.orb{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.25;
}

.orb1{
    width:500px;
    height:500px;
    background:#0077ff;
    top:-150px;
    left:-100px;
}

.orb2{
    width:450px;
    height:450px;
    background:#a855ff;
    right:-100px;
    top:0;
}

.orb3{
    width:600px;
    height:600px;
    background:#00d5ff;
    bottom:-300px;
    left:20%;
}

/* ===================================
LAYOUT
=================================== */

.container{
    width:min(1500px,90%);

    margin:auto;

    padding:28px 0 100px;
}
/* ===================================
HERO
=================================== */

.hero{
    margin-bottom:24px;
}

.title{
    font-family:'Orbitron',sans-serif;

    font-size:clamp(3rem,8vw,7rem);

    font-weight:800;

    line-height:.9;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#fff;

    text-shadow:
        0 8px 30px rgba(0,0,0,.8),
        0 0 40px rgba(255,255,255,.12);

    margin-bottom:16px;
}

.subtitle{
    color:rgba(255,255,255,.68);

    font-size:1rem;

    margin-bottom:8px;

    font-weight:600;

    letter-spacing:.04em;
}

/* ===================================
GRID
=================================== */

.grid{
    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:30px;

    align-items:stretch;
}

/* ===================================
CARD — CINEMATIC REDESIGN
=================================== */

.card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 28px 28px 22px;
    min-height: 200px;
    width: 100%;
    background: rgba(6, 12, 28, 0.85);
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(24px);
    transition: transform .35s ease, box-shadow .35s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (hover:hover){

    .card:hover{
        transform:translateY(-4px);
    }

}

/* scan-line texture overlay */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,.012) 3px,
        rgba(255,255,255,.012) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* top-left corner accent */

.card.blue   { box-shadow: 0 0 0 1px rgba(58,215,255,.06), 0 20px 50px rgba(0,0,0,.5); }
.card.purple { box-shadow: 0 0 0 1px rgba(181,109,255,.06), 0 20px 50px rgba(0,0,0,.5); }
.card.green  { box-shadow: 0 0 0 1px rgba(44,255,200,.06), 0 20px 50px rgba(0,0,0,.5); }
.card.orange { box-shadow: 0 0 0 1px rgba(255,179,71,.06), 0 20px 50px rgba(0,0,0,.5); }

.top{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:28px;
}

.emoji{
    font-size:1.5rem;
}
.label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    line-height: 1.4;
}

/* ===================================
TIME
=================================== */

.time {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
    letter-spacing: .06em;
    position: relative;
    z-index: 1;
}

.left {
    font-size: .82rem;
    color: rgba(255,255,255,.45);
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: .02em;
    position: relative;
    z-index: 1;
}
/* ===================================
BAR — CINEMATIC
=================================== */

.bar-shell {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 2px;
    background: rgba(255,255,255,.06);
    margin-bottom: 14px;
    overflow: visible;
}

/* tick marks */
.bar-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(25% - 1px),
        rgba(255,255,255,.08) calc(25% - 1px),
        rgba(255,255,255,.08) 25%
    );
    border-radius: 2px;
    z-index: 0;
}

.bar-fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width .3s linear;
    z-index: 1;
}

/* glowing head dot */
.bar-fill::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.blue .bar-fill {
    background: linear-gradient(90deg, rgba(58,215,255,.4), #3ad7ff);
    box-shadow: 0 0 14px rgba(58,215,255,.7);
}
.blue .bar-fill::after {
    box-shadow: 0 0 8px 3px rgba(58,215,255,.9);
}

.purple .bar-fill {
    background: linear-gradient(90deg, rgba(181,109,255,.4), #b56dff);
    box-shadow: 0 0 14px rgba(181,109,255,.7);
}
.purple .bar-fill::after {
    box-shadow: 0 0 8px 3px rgba(181,109,255,.9);
}

.green .bar-fill {
    background: linear-gradient(90deg, rgba(44,255,200,.4), #2cffc8);
    box-shadow: 0 0 14px rgba(44,255,200,.7);
}
.green .bar-fill::after {
    box-shadow: 0 0 8px 3px rgba(44,255,200,.9);
}

.orange .bar-fill {
    background: linear-gradient(90deg, rgba(255,179,71,.4), #ffb347);
    box-shadow: 0 0 14px rgba(255,179,71,.7);
}
.orange .bar-fill::after {
    box-shadow: 0 0 8px 3px rgba(255,179,71,.9);
}

/* ===================================
BOTTOM META
=================================== */

.meta{
    display:flex;
    justify-content:space-between;

    color:rgba(255,255,255,.78);

    font-size:.88rem;

    font-weight:700;

    letter-spacing:.05em;
}

@media(max-width:900px){

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

    .title{
        font-size:3.8rem;
        letter-spacing:.12em;
    }
}
.final-card{
    position:relative;

    grid-column:1/-1;

    overflow:hidden;

    border-radius:40px;

    padding:90px 40px;

    text-align:center;

    background:
        radial-gradient(
            circle at left,
            rgba(0,180,255,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at right,
            rgba(180,80,255,.14),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(3,10,28,.96),
            rgba(2,6,18,.98)
        );

    box-shadow:
        0 0 140px rgba(0,120,255,.08),
        0 0 180px rgba(180,80,255,.06);

    margin-top:20px;
}

.final-inner{
    position:relative;
    z-index:2;
}

.final-emoji{
    font-size:5rem;

    margin-bottom:22px;

    filter:
        drop-shadow(0 0 30px rgba(80,180,255,.35));
}

.final-title{
    font-family:'Orbitron',sans-serif;

    font-size:clamp(3rem,5vw,5.5rem);

    font-weight:800;

    color:#fff;

    margin-bottom:18px;

    text-shadow:
        0 4px 24px rgba(0,0,0,.8),
        0 0 40px rgba(255,255,255,.08);
}

.final-subtitle{
    font-size:1.5rem;

    color:rgba(255,255,255,.82);

    margin-bottom:28px;

    font-weight:600;
}

.final-message{
    font-size:1.2rem;

    color:rgba(255,255,255,.62);

    margin-bottom:34px;
}

.final-bar{
    width:min(720px,90%);

    height:18px;

    margin:auto;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,.08);

    box-shadow:
        inset 0 2px 12px rgba(0,0,0,.6);
}

.final-bar-fill{
    width:70%;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #248bff,
            #9c5dff,
            #ffffff
        );

    background-size:300% 100%;

    animation:
        cosmicFlow 5s linear infinite;

    box-shadow:
        0 0 30px rgba(120,140,255,.45);
}

@keyframes cosmicFlow{

    from{
        background-position:0% 0;
    }

    to{
        background-position:300% 0;
    }
}
/* ===================================
VATSAL HEADER
=================================== */
.vatsal-header {
    position: relative;
    z-index: 100;
    margin: 0;
    padding: 12px 20px;
    width: 100%;
    box-sizing: border-box;
}

.vatsal-home {
    font-family: "Vatsal-logo" !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* ===================================
VATSAL FOOTER
=================================== */
.vatsal-related {
    width: min(1500px, 90%);
    margin: 60px auto 40px;
}

.vatsal-related-title,
.vatsal-footer,
.vatsal-footer a {
    font-family: "Vatsal-logo" !important;
    color: #ffffff !important;
}
.blue .percent   { color: #3ad7ff; }
.purple .percent { color: #b56dff; }
.green .percent  { color: #2cffc8; }
.orange .percent { color: #ffb347; }

.percent {
    font-family: 'Orbitron', sans-serif;
    font-size: .85rem;
    letter-spacing: .06em;
}
/* ===================================
TABLET
=================================== */

@media (max-width: 900px){

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

    .container{
        width:94%;
        padding:10px 0 70px;
    }

    .title{
        font-size:clamp(2.8rem,12vw,4.5rem);
        letter-spacing:.08em;
        line-height:.92;
    }

    .subtitle{
        font-size:.9rem;
    }

    .card{
        min-height:180px;
        padding:22px;
    }
}

/* ===================================
PHONE
=================================== */

@media (max-width: 600px){

    .container{
        width:95%;
    }

    .hero{
        margin-bottom:18px;
    }

    .title{
        font-size:2.4rem;
        letter-spacing:.05em;
        line-height:.95;
    }

    .subtitle{
        display:none;
    }

    .card{
        min-height:auto;
        padding:18px;
        border-radius:18px;
    }

    .top{
        gap:10px;
        margin-bottom:18px;
    }

    .emoji{
        font-size:1.2rem;
    }

    .label{
        font-size:.72rem;
        letter-spacing:.10em;
    }

    .time{
        font-size:2rem;
    }

    .left{
        font-size:.75rem;
        margin-bottom:14px;
    }

    .bar-shell{
        height:6px;
    }

    .meta{
        font-size:.75rem;
    }

    .final-card{
        border-radius:24px;
        padding:50px 20px;
    }

    .final-emoji{
        font-size:3rem;
    }

    .final-title{
        font-size:2rem;
        line-height:1.05;
    }

    .final-subtitle{
        font-size:1rem;
    }

    .final-message{
        font-size:.9rem;
    }

    .final-bar{
        height:12px;
    }
}
@media (max-width:600px){

    .orb{
        opacity:.12;
        filter:blur(90px);
    }

    .orb1{
        width:260px;
        height:260px;
    }

    .orb2{
        width:240px;
        height:240px;
    }

    .orb3{
        width:300px;
        height:300px;
    }

}