/* ==========================================
   ROOT
========================================== */

:root {

    --maroon: #7b1e1e;
    --gold: #c89b3c;

    --parchment: #f8f1e3;
    --cream: #fffaf3;

    --ink: #2d2d2d;

    --radius: 18px;

    --shadow:
        0 15px 35px rgba(0,0,0,.08);
}

/* ==========================================
   RESET
========================================== */

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

body {

    font-family:
        "Noto Sans Telugu",
        "Segoe UI",
        sans-serif;

    background: var(--cream);

    color: var(--ink);

    line-height: 1.7;
}

/* ==========================================
   CONTAINER
========================================== */

.container {

    width: min(1200px, 92%);
    margin: auto;
}

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

.site-header {

    background: white;

    position: sticky;
    top: 0;

    z-index: 999;

    box-shadow:
        0 2px 10px rgba(0,0,0,.05);
}

.header-wrap {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 0;
}

.logo img {

    height: 55px;
}

.header-actions {

    display: flex;

    gap: 12px;

    align-items: center;
}

.welcome-user {

    color: var(--maroon);

    font-weight: 700;
}

/* ==========================================
   BUTTONS
========================================== */

.btn {

    text-decoration: none;

    padding: 12px 22px;

    border-radius: 999px;

    font-weight: 700;

    transition: .3s;
}

.btn-primary {

    background: var(--maroon);

    color: white;
}

.btn-primary:hover {

    transform: translateY(-2px);
}

.btn-secondary {

    background: var(--gold);

    color: white;
}

.btn-outline {

    border: 2px solid var(--maroon);

    color: var(--maroon);
}

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

.hero {

    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            var(--parchment),
            var(--cream)
        );
}

.hero-grid {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 60px;

    align-items: center;
}

.hero-badge {

    display: inline-block;

    background: var(--gold);

    color: white;

    padding: 8px 18px;

    border-radius: 999px;

    margin-bottom: 20px;

    font-weight: 700;
}

.hero h1 {

    font-size: clamp(2.8rem, 5vw, 4.5rem);

    color: var(--maroon);

    margin-bottom: 20px;
}

.hero-highlight {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--gold);

    margin-bottom: 25px;
}

.hero-description {

    font-size: 1.1rem;

    max-width: 650px;

    margin-bottom: 30px;
}

.hero-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;
}
.hero-manifesto{

    font-size:1.9rem;

    font-weight:800;

    color:var(--gold);

    line-height:1.6;

    margin:20px 0 30px;
}
.bhuvana-card{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

    border-top:5px solid var(--gold);
}

.era-title{

    text-align:center;

    font-weight:700;

    color:var(--maroon);

    margin-bottom:20px;
}

.era-title.modern{

    color:var(--gold);

    margin-top:30px;
}

.chain{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;
}

.chain-box{

    background:var(--parchment);

    padding:10px 25px;

    border-radius:999px;

    font-weight:700;
}

.chain-arrow{

    color:var(--gold);

    font-size:1.4rem;
}

.divider{

    height:2px;

    background:#eee;

    margin:30px 0;
}

/* ==========================================
   WELCOME SECTION
========================================== */

.welcome-section{

    padding:90px 0;
}

.section-title{

    text-align:center;

    color:var(--maroon);

    margin-bottom:50px;

    font-size:2rem;
}

.welcome-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;
}

.welcome-card{

    background:#fff;

    padding:40px;

    border-radius:24px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    position:relative;
}

.reader-card{

    border-top:5px solid #d4a537;
}

.writer-card{

    border-top:5px solid #8b1f1f;
}

.welcome-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#f5efe2;

    font-weight:700;

    margin-bottom:20px;
}

.welcome-hero-line{

    font-size:1.7rem;

    font-weight:800;

    line-height:1.7;

    margin-bottom:25px;

    color:var(--maroon);
}

.welcome-card p{

    line-height:1.9;

    color:#555;

    margin-bottom:15px;
}

.writer-quote{

    background:#faf5ea;

    border-left:4px solid #d4a537;

    padding:18px;

    border-radius:12px;

    margin:20px 0;

    font-weight:600;

    color:#7a5a00;
}
.hero-punchline{

    margin:25px 0;

    font-size:1.4rem;

    font-weight:800;

    color:var(--maroon);

    line-height:1.8;
}
@media(max-width:768px){

    .welcome-grid{

        grid-template-columns:1fr;
    }

    .welcome-card{

        padding:28px;
    }

    .welcome-hero-line{

        font-size:1.35rem;
    }
}
/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .welcome-grid{

        grid-template-columns:1fr;
    }

    .welcome-card{

        padding:30px;
    }

}
/* ==========================================
   QUOTE CARD
========================================== */

.hero-quote {

    background: white;

    padding: 40px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    border-top: 5px solid var(--gold);

    text-align: center;

    font-size: 1.2rem;

    line-height: 1.9;
}

.hero-quote hr {

    margin: 25px auto;

    width: 80px;

    border: 0;

    border-top: 2px solid var(--gold);
}

/* ==========================================
   STATS
========================================== */

.stats-section {

    padding: 60px 0;
}

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap: 25px;
}

.stat-card {

    background: white;

    border-radius: var(--radius);

    padding: 30px;

    text-align: center;

    box-shadow: var(--shadow);
}

.stat-number {

    font-size: 2.5rem;

    color: var(--maroon);

    font-weight: 800;
}

.stat-label {

    margin-top: 10px;

    color: #666;
}

/* ==========================================
   FEATURED AUTHORS
========================================== */

.featured-authors {

    padding: 80px 0;
}

.featured-authors h2 {

    text-align: center;

    margin-bottom: 50px;

    font-size: 2.2rem;

    color: var(--maroon);
}

.authors-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap: 30px;
}

.author-card {

    background: white;

    border-radius: var(--radius);

    padding: 25px;

    text-align: center;

    text-decoration: none;

    color: inherit;

    box-shadow: var(--shadow);

    transition: .3s;
}

.author-card:hover {

    transform: translateY(-5px);
}

.author-card img {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 15px;
}

.author-card h3 {

    color: var(--maroon);

    margin-bottom: 10px;
}

.author-stars {

    color: var(--gold);

    font-size: 1.2rem;

    margin-bottom: 10px;
}

.author-card p {

    color: #666;

    font-size: .95rem;
}
/* =========================================
   READER JOURNEY
========================================= */

.journey-section{

    padding:80px 0;

    background:#faf8f2;
}

.journey-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:24px;

    margin-top:40px;
}

.journey-card{

    background:#fff;

    padding:30px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;
}

.journey-card:hover{

    transform:translateY(-5px);
}

.journey-icon{

    font-size:2.5rem;

    margin-bottom:15px;
}

.journey-card h3{

    color:var(--maroon);

    font-size:1.15rem;

    margin-bottom:15px;

    line-height:1.5;
}

.journey-card p{

    color:#555;

    line-height:1.8;
}
/* ==========================================
   READER REWARD
========================================== */

.reader-reward{

    padding:80px 0;
}

.reward-card{

    background:linear-gradient(
        135deg,
        var(--maroon),
        #5d1515
    );

    color:white;

    padding:50px;

    border-radius:25px;

    text-align:center;

    box-shadow:var(--shadow);
}

.reward-icon{

    font-size:3rem;

    margin-bottom:15px;
}

.reward-card h2{

    margin-bottom:20px;
}

.reward-highlight{

    font-size:1.9rem;

    font-weight:800;

    color:#f3c35a;

    margin:20px 0;

    line-height:1.6;
}

.reward-note{

    margin-top:25px;

    opacity:.9;
}/* =========================================
   GRATITUDE GIFT
========================================= */

.gratitude-section{

    padding:70px 0;

    background:#faf8f2;
}

.gratitude-card{

    max-width:850px;

    margin:0 auto;

    background:linear-gradient(
        135deg,
        #fff9e6,
        #fff3cc
    );

    border:2px solid #e6c15a;

    border-radius:24px;

    padding:50px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.gift-icon{

    font-size:3rem;

    margin-bottom:15px;
}

.gratitude-card h2{

    color:#7a1020;

    margin-bottom:20px;

    font-size:2rem;
}

.gratitude-intro{

    font-size:1.1rem;

    line-height:2;

    color:#444;
}

.gratitude-benefits{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin:30px 0;
}

.gratitude-benefits span{

    background:#fff;

    padding:10px 18px;

    border-radius:30px;

    font-weight:600;

    box-shadow:0 4px 10px rgba(0,0,0,.05);
}

.gratitude-highlight{

    font-size:1.2rem;

    color:#7a1020;

    margin:25px 0;
}

.gratitude-closing{

    margin-top:30px;

    font-size:1.15rem;

    font-weight:700;

    color:#7a1020;

    line-height:2;
}
.krishnadevaraya-quote{

    max-width:700px;

    margin:35px auto 10px;

    padding:30px;

    text-align:center;

    background:#fffaf0;

    border:2px solid #e0c16a;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.quote-icon{

    font-size:42px;

    color:#d4a017;

    line-height:1;

    margin-bottom:10px;
}

.quote-line-1,
.quote-line-2{

    color:#7a1020;

    font-size:1.35rem;

    line-height:1.9;

    font-weight:600;
}

.quote-line-1 span,
.quote-line-2 span{

    display:block;

    font-size:1.6rem;

    font-weight:700;
}

.quote-divider{

    width:120px;

    height:2px;

    background:#d4a017;

    margin:18px auto;
}
.krishnadevaraya-motto{
   

    font-family:
        "Noto Serif Telugu",
        serif;

    margin-top:35px;

    padding:30px;

    text-align:center;

    background:#fffaf0;

    border:2px solid #e6c15a;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.motto-icon{

    font-size:2rem;

    margin-bottom:15px;
}

.motto-line{

    font-size:1.2rem;

    color:#7a1020;

    line-height:1.8;
}

.motto-highlight{

    font-size:1.6rem;

    font-weight:700;

    color:#7a1020;

    margin-bottom:10px;
}

.motto-divider{

    width:120px;

    height:2px;

    background:#d4a017;

    margin:18px auto;
}
/* ==========================================
   WHY SAHITISILPI
========================================== */

.why-sahitisilpi{

    padding:80px 0;

    background:var(--parchment);
}

.why-sahitisilpi h2{

    text-align:center;

    color:var(--maroon);

    margin-bottom:50px;

    font-size:2.2rem;
}

.why-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.why-card{

    background:white;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:var(--shadow);
}

.why-icon{

    font-size:2.5rem;

    margin-bottom:15px;
}

.why-card h3{

    color:var(--maroon);

    margin-bottom:15px;
}
/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px) {

    .hero-grid {

        grid-template-columns: 1fr;
    }

    .hero {

        text-align: center;
    }

    .header-wrap {

        flex-direction: column;

        gap: 15px;
    }

    .hero-buttons {

        justify-content: center;
    }
}