@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

/* =========================================================
   GOVT EXAM PREP — SSC Chsl MOCK TEST DASHBOARD
   Premium Maroon + Champagne Gold
   Fully responsive: PC / Laptop / Tablet / Mobile
========================================================= */

:root{
    --maroon:#7b0000;
    --maroon-dark:#430000;
    --maroon-deep:#2a0000;
    --maroon-light:#a91414;
    --gold:#d5ad57;
    --gold-light:#efd48f;
    --gold-pale:#fff5d9;

    --cream:#f8f2e9;
    --paper:#fffdf9;
    --paper-warm:#fff9f0;

    --ink:#241818;
    --muted:#776966;
    --muted-light:#998a86;

    --line:#eaded4;
    --line-gold:rgba(177,133,47,.28);

    --green:#178449;
    --orange:#ed7207;
    --red:#d92b2b;

    --shadow-sm:0 8px 25px rgba(63,24,24,.055);
    --shadow-md:0 18px 45px rgba(63,24,24,.095);
    --shadow-lg:0 28px 70px rgba(63,24,24,.14);
}

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

html{
    width:100%;
    min-height:100%;
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
    font-family:"DM Sans",Inter,Arial,sans-serif;
    color:var(--ink);
    background:
        radial-gradient(circle at 8% 8%,rgba(123,0,0,.055),transparent 24%),
        radial-gradient(circle at 92% 82%,rgba(213,173,87,.08),transparent 26%),
        linear-gradient(135deg,#fffdf9 0%,#f8f1e8 52%,#f3e7d9 100%);
}

/* Subtle paper texture */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.17;
    background-image:
        radial-gradient(rgba(92,35,35,.16) .55px,transparent .55px);
    background-size:18px 18px;
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar{
    position:relative;
    z-index:20;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 clamp(18px,6vw,90px);

    background:rgba(255,253,249,.88);
    border-bottom:1px solid rgba(128,0,0,.09);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 5px 25px rgba(64,20,20,.035);
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;

    color:var(--maroon);
    text-decoration:none;

    font-size:19px;
    font-weight:800;
    letter-spacing:-.5px;
}

.logo-mark{
    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(145deg,var(--maroon-light),var(--maroon-dark));

    border:1px solid rgba(213,173,87,.6);

    box-shadow:
        0 8px 20px rgba(123,0,0,.18),
        inset 0 1px rgba(255,255,255,.16);
}

.nav-links{
    display:flex;
    align-items:center;
    gap:26px;
}

.nav-links a{
    position:relative;

    color:#5c4e4b;
    text-decoration:none;

    font-size:13px;
    font-weight:600;

    transition:color .2s ease;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:-7px;

    height:1px;

    background:var(--gold);

    transition:right .25s ease;
}

.nav-links a:hover{
    color:var(--maroon);
}

.nav-links a:hover::after{
    right:0;
}

.nav-cta{
    color:#fff!important;
    background:
        linear-gradient(135deg,var(--maroon-light),var(--maroon-dark));

    padding:10px 16px!important;
    border-radius:9px;

    border:1px solid rgba(213,173,87,.65);

    box-shadow:
        0 8px 20px rgba(123,0,0,.18),
        inset 0 1px rgba(255,255,255,.14);
}

/* =========================================================
   HERO
========================================================= */

.hero{
    position:relative;
    z-index:1;

    overflow:hidden;

    color:#fff;
    text-align:center;

    padding:78px 20px 82px;

    background:
        radial-gradient(circle at 15% 20%,rgba(255,255,255,.11),transparent 25%),
        radial-gradient(circle at 85% 75%,rgba(213,173,87,.19),transparent 30%),
        radial-gradient(circle at 50% 120%,rgba(255,255,255,.06),transparent 35%),
        linear-gradient(135deg,#420000 0%,#700000 46%,#970f0f 100%);

    box-shadow:
        inset 0 -1px rgba(213,173,87,.45),
        0 18px 45px rgba(67,0,0,.12);
}

/* Decorative circles */
.hero::before,
.hero::after{
    content:"";
    position:absolute;
    pointer-events:none;
    border:1px solid rgba(239,212,143,.14);
    border-radius:50%;
}

.hero::before{
    width:520px;
    height:520px;
    left:-270px;
    top:-330px;
}

.hero::after{
    width:600px;
    height:600px;
    right:-300px;
    bottom:-430px;
}

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

/* Eyebrow */
.hero .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:9px 16px;

    color:#fff3d0;

    background:rgba(255,248,224,.075);

    border:1px solid rgba(239,212,143,.34);
    border-radius:50px;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;

    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        0 8px 25px rgba(0,0,0,.08);

    backdrop-filter:blur(10px);
}

.dot{
    position:relative;

    width:7px;
    height:7px;
    flex:0 0 7px;

    border-radius:50%;

    background:var(--gold-light);

    box-shadow:
        0 0 8px rgba(239,212,143,.95),
        0 0 20px rgba(213,173,87,.45);

    animation:goldPulse 1.6s ease-in-out infinite;
}

.dot::after{
    content:"";
    position:absolute;

    inset:-2px;

    border:1px solid rgba(239,212,143,.7);
    border-radius:50%;

    animation:goldRing 1.6s ease-out infinite;
}

@keyframes goldPulse{
    0%,100%{
        opacity:1;
        transform:scale(1);
    }
    50%{
        opacity:.48;
        transform:scale(.72);
    }
}

@keyframes goldRing{
    0%{
        opacity:.75;
        transform:scale(1);
    }
    100%{
        opacity:0;
        transform:scale(2.7);
    }
}

.hero h1{
    margin:21px auto 17px;

    max-width:900px;

    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(42px,5.4vw,66px);
    line-height:1.03;
    letter-spacing:-1.7px;

    text-shadow:0 8px 25px rgba(0,0,0,.12);
}

.hero h1 em{
    color:#f0d184;
    font-style:normal;
}

.hero p{
    max-width:720px;
    margin:auto;

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

    font-size:15px;
    line-height:1.75;
}

/* =========================================================
   CONTENT HEADER
========================================================= */

.container{
    position:relative;
    z-index:2;

    width:min(1160px,91%);
    margin:0 auto;

    padding:46px 0 78px;
}

.top-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;

    margin-bottom:25px;
}

/* Premium section eyebrow */
.section-label{
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:8px;

    color:var(--maroon);

    font-size:10px;
    font-weight:800;
    letter-spacing:2.1px;
    text-transform:uppercase;
}

.section-label::before{
    content:"";

    width:27px;
    height:2px;

    border-radius:20px;

    background:
        linear-gradient(90deg,var(--maroon),var(--gold));
}

/* Main heading */
.section-title{
    position:relative;

    margin:0;
    padding-bottom:14px;

    color:#271919;

    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(31px,3.2vw,43px);
    font-weight:700;

    letter-spacing:-.8px;
    line-height:1.1;
}

.section-title::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:62px;
    height:3px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--maroon),
            var(--gold)
        );
}

/* =========================================================
   PROGRESS
========================================================= */

.progress-box{
    min-width:245px;

    padding:16px 18px;

    background:
        linear-gradient(145deg,#fffefa,#fff8ee);

    border:1px solid rgba(174,130,47,.25);
    border-radius:15px;

    box-shadow:
        var(--shadow-sm),
        inset 0 1px rgba(255,255,255,.9);
}

.progress-head{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:10px;

    color:#3e3230;

    font-size:12px;
    font-weight:800;
}

.progress-head span:last-child{
    color:var(--maroon);
    font-weight:900;
}

.progress-track{
    height:7px;

    overflow:hidden;

    border-radius:20px;

    background:#ece3dc;
}

.progress-fill{
    height:100%;
    width:0;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--maroon-dark),
            var(--maroon-light),
            var(--gold)
        );

    box-shadow:0 0 10px rgba(123,0,0,.16);

    transition:width .5s cubic-bezier(.22,1,.36,1);
}

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

.mock-grid{
    display:grid;

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

    gap:18px;
}

/* =========================================================
   MOCK CARD — PREMIUM
========================================================= */

.mock-card{
    position:relative;

    min-width:0;
    min-height:158px;

    display:flex;
    align-items:center;
    gap:18px;

    overflow:hidden;

    padding:21px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(255,250,243,.96)
        );

    border:1px solid rgba(125,72,61,.14);

    border-radius:18px;

    box-shadow:
        0 8px 24px rgba(58,25,25,.055),
        0 1px 0 rgba(255,255,255,.9) inset;

    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        box-shadow .28s ease,
        border-color .28s ease;
}

/* Premium gold/maroon edge */
.mock-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:
        linear-gradient(
            180deg,
            var(--maroon-light),
            var(--maroon),
            var(--gold)
        );
}

/* Soft light inside card */
.mock-card::after{
    content:"";

    position:absolute;

    width:170px;
    height:170px;

    right:-95px;
    top:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(213,173,87,.10),
            transparent 68%
        );

    pointer-events:none;
}

.mock-card:hover{
    transform:translateY(-5px);

    border-color:rgba(123,0,0,.22);

    box-shadow:
        0 20px 45px rgba(58,25,25,.11),
        0 1px 0 rgba(255,255,255,.95) inset;
}

/* Number */
.number{
    position:relative;
    z-index:2;

    flex:0 0 58px;

    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    border-radius:16px;

    color:var(--maroon);

    background:
        linear-gradient(
            145deg,
            #fff7f3,
            #f5e8e4
        );

    border:1px solid rgba(123,0,0,.10);

    font-size:14px;
    font-weight:900;

    box-shadow:
        inset 0 1px rgba(255,255,255,.95),
        0 7px 16px rgba(123,0,0,.06);
}

.mock-info{
    position:relative;
    z-index:2;

    flex:1;
    min-width:0;
}

.mock-tag{
    margin-bottom:6px;

    color:#927d77;

    font-size:9px;
    font-weight:900;

    letter-spacing:1.35px;
    text-transform:uppercase;
}

.mock-info h3{
    margin-bottom:7px;

    color:#271b1b;

    font-size:18px;
    font-weight:800;
    letter-spacing:-.35px;
    line-height:1.25;
}

.mock-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;

    color:#8b7c78;

    font-size:10px;
    font-weight:500;
}

.mock-meta span{
    white-space:nowrap;
}

/* Start button */
.mock-btn{
    position:relative;
    z-index:3;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    min-width:120px;

    padding:12px 17px;

    color:#fff;
    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            #9e1010 0%,
            #790000 52%,
            #500000 100%
        );

    border:1px solid rgba(213,173,87,.58);
    border-radius:11px;

    font-family:inherit;
    font-size:12px;
    font-weight:800;

    box-shadow:
        0 9px 20px rgba(123,0,0,.20),
        inset 0 1px rgba(255,255,255,.14);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.mock-btn::after{
    content:"→";

    margin-left:8px;

    color:var(--gold-light);

    transition:transform .2s ease;
}

.mock-btn:hover{
    transform:translateY(-2px);

    border-color:var(--gold-light);

    box-shadow:
        0 14px 27px rgba(123,0,0,.27),
        inset 0 1px rgba(255,255,255,.16);
}

.mock-btn:hover::after{
    transform:translateX(3px);
}

/* Completed */
.mock-btn.completed{
    color:var(--green);

    background:
        linear-gradient(
            135deg,
            #effaf3,
            #e5f5eb
        );

    border-color:#bfe1ca;

    box-shadow:none;

    cursor:default;
}

.mock-btn.completed::after{
    content:"";
    margin:0;
}

/* =========================================================
   FOOTER
========================================================= */

footer{
    position:relative;
    z-index:2;

    padding:28px 20px;

    color:#d9c8c5;

    text-align:center;

    font-size:11px;

    background:
        linear-gradient(
            135deg,
            #240000,
            #430000
        );

    border-top:1px solid rgba(213,173,87,.30);
}

footer strong{
    color:#f0d184;
}

/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width:1100px){

    .navbar{
        padding:0 4.5%;
    }

    .container{
        width:min(940px,92%);
    }

    .nav-links{
        gap:18px;
    }

    .hero{
        padding:68px 24px 72px;
    }

    .mock-grid{
        gap:15px;
    }
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width:900px){

    .navbar{
        height:66px;
        padding:0 4%;
    }

    .logo{
        font-size:17px;
    }

    .nav-links{
        gap:13px;
    }

    .nav-links a{
        font-size:11px;
    }

    .hero{
        padding:58px 22px 64px;
    }

    .hero h1{
        font-size:clamp(37px,6.3vw,51px);
    }

    .hero p{
        max-width:620px;
        font-size:14px;
    }

    .container{
        width:92%;
        padding:36px 0 58px;
    }

    .top-row{
        align-items:flex-start;
        gap:18px;
    }

    .progress-box{
        min-width:215px;
    }

    .mock-card{
        padding:18px;
        min-height:145px;
        gap:14px;
    }

    .number{
        flex-basis:52px;
        width:52px;
        height:52px;
    }

    .mock-info h3{
        font-size:16px;
    }

    .mock-meta{
        gap:7px 10px;
    }

    .mock-btn{
        min-width:105px;
        padding:11px 13px;
    }
}

/* =========================================================
   RESPONSIVE — TABLET PORTRAIT
========================================================= */

@media (max-width:760px){

    .nav-links{
        display:none;
    }

    .logo{
        font-size:16px;
    }

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

    .hero{
        padding:53px 20px 59px;
    }

    .hero h1{
        font-size:clamp(34px,8vw,45px);
        line-height:1.07;
    }

    .hero p{
        font-size:13.5px;
        line-height:1.7;
    }

    .container{
        width:92%;
        padding-top:31px;
    }

    .top-row{
        flex-direction:column;
        align-items:stretch;
        gap:18px;
    }

    .progress-box{
        width:100%;
        min-width:0;
    }

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

    .mock-card{
        min-height:145px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width:560px){

    .navbar{
        height:60px;
        padding:0 14px;
    }

    .logo{
        font-size:14px;
    }

    .logo-mark{
        width:31px;
        height:31px;
        border-radius:9px;
    }

    .nav-cta{
        padding:8px 11px!important;
        font-size:10px!important;
    }

    .hero{
        padding:45px 15px 50px;
    }

    .hero .eyebrow{
        padding:8px 13px;
        font-size:8.5px;
        letter-spacing:1.2px;
    }

    .hero h1{
        margin-top:18px;
        font-size:clamp(31px,9vw,39px);
        letter-spacing:-.8px;
    }

    .hero p{
        max-width:440px;
        font-size:12.5px;
        line-height:1.65;
    }

    .container{
        width:calc(100% - 28px);
        padding:28px 0 48px;
    }

    .section-label{
        font-size:9px;
        letter-spacing:1.7px;
        gap:7px;
    }

    .section-label::before{
        width:21px;
    }

    .section-title{
        font-size:clamp(28px,8.5vw,36px);
        letter-spacing:-.65px;
        padding-bottom:12px;
    }

    .section-title::after{
        width:50px;
        height:2px;
    }

    .progress-box{
        padding:14px;
        border-radius:13px;
    }

    .progress-head{
        font-size:11px;
    }

    .progress-track{
        height:6px;
    }

    .mock-grid{
        gap:13px;
    }

    /*
       Mobile card becomes a clean 2-row layout:
       number + information
       full-width CTA
    */
    .mock-card{
        display:grid;

        grid-template-columns:48px minmax(0,1fr);

        gap:12px;

        min-height:0;

        padding:16px;

        border-radius:15px;
    }

    .number{
        width:48px;
        height:48px;

        flex:none;

        border-radius:13px;

        font-size:13px;
    }

    .mock-tag{
        font-size:8px;
        letter-spacing:1px;
        margin-bottom:5px;
    }

    .mock-info h3{
        font-size:15px;
        line-height:1.25;
        margin-bottom:6px;
    }

    .mock-meta{
        gap:4px 9px;
        font-size:9px;
    }

    .mock-meta span{
        white-space:normal;
    }

    .mock-btn{
        grid-column:1/-1;

        width:100%;
        min-width:0;

        padding:11px 14px;

        border-radius:10px;

        font-size:11px;
    }

    footer{
        padding:22px 14px;
        font-size:10px;
        line-height:1.5;
    }
}

/* =========================================================
   RESPONSIVE — VERY SMALL PHONES
========================================================= */

@media (max-width:380px){

    .hero{
        padding:40px 13px 45px;
    }

    .hero h1{
        font-size:29px;
    }

    .hero p{
        font-size:12px;
    }

    .container{
        width:calc(100% - 22px);
    }

    .section-title{
        font-size:27px;
    }

    .mock-card{
        grid-template-columns:43px minmax(0,1fr);
        gap:10px;
        padding:14px;
    }

    .number{
        width:43px;
        height:43px;
        border-radius:11px;
    }

    .mock-info h3{
        font-size:14px;
    }

    .mock-btn{
        font-size:10.5px;
        padding:10px 12px;
    }
}

/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none) and (pointer:coarse){

    .mock-card:hover{
        transform:none;
    }

    .mock-btn:hover{
        transform:none;
    }

    .mock-btn:active{
        transform:scale(.985);
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}