/* Hero backdrop: night sky with parliament silhouette */
    .hero-fame{
    position:relative;
    overflow:hidden;
    color:#fff;

    min-height:280px;

    display:flex;
    align-items:center;

    padding-top:36px;
    padding-bottom:36px;

    background:
        linear-gradient(
            90deg,
            rgba(2,16,27,.96) 0%,
            rgba(2,16,27,.88) 30%,
            rgba(2,16,27,.55) 55%,
            rgba(2,16,27,.20) 75%,
            rgba(2,16,27,.05) 100%
        ),
        url("../images/fame.f31f291d30d8.png");

    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
}

.hero-fame-container{
    width:100%;
    max-width:1400px;
    margin:auto;

    padding:0 32px;

    display:flex;
    align-items:center;
}

.hero-content{
    max-width:650px;
}

.hero-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 16px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);

    border-radius:50px;

    font-size:14px;

    margin-bottom:24px;

    backdrop-filter:blur(8px);
}

.hero-content h1{
    font-family:'Playfair Display', Georgia, serif;
    font-size:72px;
    line-height:1.05;
    margin-bottom:24px;
}

.hero-content h1 span{
    color:#E8B84E;
    font-style:italic;
}

.hero-content p{
    font-size:20px;
    line-height:1.8;
    color:rgba(255,255,255,.82);
    max-width:560px;
}

.hero-buttons{
    display:flex;
    gap:16px;
    margin-top:40px;
    flex-wrap:wrap;
}

.btn-primary{
    background:#E8B84E;
    color:#111;
    padding:15px 30px;
    border-radius:8px;
    font-weight:600;
    text-decoration:none;
}

.btn-secondary{
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    padding:15px 30px;
    border-radius:8px;
    text-decoration:none;
    backdrop-filter:blur(10px);
}

.btn-primary:hover,
.btn-secondary:hover{
    transform:translateY(-2px);
}
    .hero-stars{
      background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1px 1px at 45% 18%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1px 1px at 62% 52%, rgba(255,255,255,.4), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1px 1px at 92% 66%, rgba(255,255,255,.5), transparent 60%);
    }

    /* subtle grain */
    .grain::after{
      content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
    }

    /* Tab underline */
    .tab-btn{ position:relative; padding:.65rem 1rem; font-weight:500; color:#4b5563; border-radius:.5rem; white-space:nowrap; transition:all .2s ease;}
    .tab-btn:hover{ color:#0F5D3D; background:#F1EFE6; }
    .tab-btn.active{ background:#0F5D3D; color:#fff; }

    /* rank badge ribbon */
    .rank-badge{
      background: linear-gradient(180deg,#F5D77A,#E8B84E);
      color:#5A3E00;
      box-shadow: 0 4px 10px -4px rgba(232,184,78,.7), inset 0 -2px 0 rgba(0,0,0,.06);
    }
    .rank-badge.rk-2{ background: linear-gradient(180deg,#D6DCE4,#9CA6B4); color:#1f2937; box-shadow: 0 4px 10px -4px rgba(156,166,180,.7); }
    .rank-badge.rk-3{ background: linear-gradient(180deg,#E6B48A,#C77B4A); color:#3b1a06; box-shadow: 0 4px 10px -4px rgba(199,123,74,.6); }
    .rank-badge.rk-4{ background: #0F5D3D; color:#fff; }
    .rank-badge.rk-5{ background: #0F5D3D; color:#fff; }

    /* scroll-x helper */
    .no-scrollbar::-webkit-scrollbar{display:none}
    .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none;}

    /* Kerala map placeholder */
    .kerala-map{
      background:
        radial-gradient(circle at 30% 20%, #B7E4C7 0 8px, transparent 9px),
        radial-gradient(circle at 55% 42%, #FFD59E 0 10px, transparent 11px),
        radial-gradient(circle at 40% 60%, #F8AD9D 0 9px, transparent 10px),
        radial-gradient(circle at 60% 78%, #C8B6FF 0 8px, transparent 9px),
        linear-gradient(160deg,#E9F5DB,#F1E8FF);
      clip-path: polygon(45% 0, 68% 6%, 78% 20%, 82% 38%, 74% 58%, 78% 72%, 62% 88%, 42% 100%, 30% 92%, 22% 74%, 28% 58%, 22% 40%, 30% 22%, 38% 10%);
    }

    /* micro hover lift */
    .lift{ transition: transform .25s ease, box-shadow .25s ease; }
    .lift:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px -12px rgba(15,23,42,.18); }

    /* pill category tag */
    .pill{ display:inline-flex; align-items:center; padding:.2rem .6rem; font-size:.72rem; font-weight:500; border-radius:9999px;}

    /* dotted arrow separator */
    .dotted-arrow{
      flex:1; height:2px;
      background-image: radial-gradient(circle, #d6bf7a 1px, transparent 1.5px);
      background-size: 10px 2px; background-repeat: repeat-x;
    }

    /* selection */
    ::selection{ background:#0F5D3D; color:#FFF9EC; }

    /* animated entrance */
    @keyframes rise { from { opacity:0; transform: translateY(12px);} to{ opacity:1; transform:none;} }
    .rise{ animation: rise .7s ease both; }
    .rise-1{ animation-delay:.05s} .rise-2{ animation-delay:.15s} .rise-3{ animation-delay:.25s} .rise-4{ animation-delay:.35s}
/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */

/* Large Desktop (1600px+) */
@media (min-width:1600px){

    .hero-fame{
        min-height:85vh;
    }

    .hero-fame-container{
        max-width:1500px;
    }

    .hero-content{
        max-width:720px;
    }

    .hero-content h1{
        font-size:84px;
    }

    .hero-content p{
        font-size:22px;
    }
}


/* Laptop (1200px - 1399px) */
@media (max-width:1399px){

    .hero-content h1{
        font-size:62px;
    }

    .hero-content p{
        font-size:18px;
    }

    .hero-fame-container{
        padding:0 28px;
    }

}


/* Small Laptop */
@media (max-width:1199px){

    .hero-fame{
        min-height:70vh;
        padding-top:110px;
        padding-bottom:70px;
    }

    .hero-content{
        max-width:560px;
    }

    .hero-content h1{
        font-size:54px;
    }

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

}


/* Tablet Landscape */
@media (max-width:991px){

    .hero-fame{

        min-height:auto;

        padding-top:110px;
        padding-bottom:70px;

        background-position:center right;
    }

    .hero-fame-container{

        justify-content:center;

        text-align:center;

        padding:0 24px;
    }

    .hero-content{

        max-width:100%;
    }

    .hero-content h1{

        font-size:46px;
        line-height:1.15;
    }

    .hero-content p{

        margin:auto;
        font-size:17px;
    }

    .hero-buttons{

        justify-content:center;
    }

}


/* Tablet Portrait */
@media (max-width:768px){

    .hero-fame{

        padding-top:100px;
        padding-bottom:60px;

        background-position:65% center;
    }

    .hero-fame-container{

        padding:0 20px;
    }

    .hero-tag{

        font-size:13px;
        padding:7px 14px;
    }

    .hero-content h1{

        font-size:38px;
    }

    .hero-content p{

        font-size:16px;
        line-height:1.7;
    }

    .hero-buttons{

        gap:12px;
        margin-top:30px;
    }

    .btn-primary,
    .btn-secondary{

        padding:14px 24px;
        font-size:15px;
    }

}


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

    .hero-fame{

        padding-top:90px;
        padding-bottom:50px;

        min-height:auto;

        background-position:70% center;
    }

    .hero-fame-container{

        padding:0 16px;
    }

    .hero-tag{

        font-size:12px;
        padding:6px 12px;
        margin-bottom:18px;
    }

    .hero-content h1{

        font-size:32px;
        line-height:1.2;
        margin-bottom:18px;
    }

    .hero-content p{

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

    .hero-buttons{

        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;
        text-align:center;

        padding:14px 18px;
    }

}


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

    .hero-content h1{

        font-size:28px;
    }

    .hero-content p{

        font-size:14px;
    }

    .hero-tag{

        font-size:12px;
    }

    .hero-fame-container{

        padding:0 14px;
    }

}


/* Horizontal Scroll Tabs */
@media (max-width:768px){

    .tab-wrapper{

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
    }

    .tab-wrapper::-webkit-scrollbar{

        display:none;
    }

    .tab-btn{

        flex-shrink:0;
        font-size:14px;
    }

}


/* Cards */
@media (max-width:768px){

    .lift{

        border-radius:16px;
    }

}


/* Rank Badge */
@media (max-width:576px){

    .rank-badge{

        font-size:12px;
        padding:.4rem .7rem;
    }

}


/* Kerala Map */
@media (max-width:768px){

    .kerala-map{

        width:100%;
        max-width:320px;
        margin:auto;
    }

}


/* Dotted Arrow */
@media (max-width:768px){

    .dotted-arrow{

        display:none;
    }

}
.no-scrollbar::-webkit-scrollbar{
    display:none;
}
.no-scrollbar{
    -ms-overflow-style:none;
    scrollbar-width:none;
}
@media (max-width:640px){

    .lift{
        padding:14px;
    }

    .lift h3{
        font-size:15px;
    }

    .lift p{
        font-size:13px;
    }

}