/* ════════════════════════════════════════════════════════════════
   MYMAHALLU — MARKETING FLYER / LANDING PAGE  v1.2
   Premium Emerald + Gold · Modern · Fully Responsive
   ════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
    --primary:#0f5132;
    --primary-600:#166534;
    --primary-700:#14532d;
    --primary-800:#0b3b22;
    --primary-light:#e8f5ed;
    --primary-lighter:#f2faf5;
    --accent:#D4AF37;
    --accent-deep:#a8841f;
    --accent-light:#fdf6e3;
    --text-dark:#0f172a;
    --text-muted:#52616b;
    --text-soft:#7a8a86;
    --white:#ffffff;
    --gold-gradient:linear-gradient(135deg,#FFDF73 0%,#D4AF37 55%,#a8841f 100%);
    --green-gradient:linear-gradient(135deg,#0c4a2e 0%,#198754 55%,#0f5132 100%);
    --radius:18px;
    --radius-sm:13px;
    --radius-lg:30px;
    --radius-pill:100px;
    --card-shadow:0 18px 45px -20px rgba(10,66,41,.18);
    --hover-shadow:0 30px 60px -22px rgba(10,66,41,.28);
    --border:rgba(212,175,55,.30);
    --font-heading:"Outfit","Noto Serif Malayalam","Noto Sans Malayalam",sans-serif;
    --font-body:"Inter","Noto Serif Malayalam","Noto Sans Malayalam",sans-serif;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
    font-family:var(--font-body);
    background:var(--white);
    color:var(--text-dark);
    line-height:1.65;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    position:relative;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

/* Decorative layered background */
body::before{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(circle at 12% 8%,rgba(212,175,55,.10),transparent 38%),
        radial-gradient(circle at 88% 18%,rgba(15,81,50,.12),transparent 42%),
        radial-gradient(circle at 50% 100%,rgba(15,81,50,.07),transparent 45%);
}
body::after{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:
        linear-gradient(rgba(212,175,55,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(212,175,55,.035) 1px,transparent 1px),
        linear-gradient(rgba(15,81,50,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,81,50,.02) 1px,transparent 1px);
    background-size:60px 60px,60px 60px,30px 30px,30px 30px;
}

.container{
    width:100%;max-width:1200px;margin:0 auto;padding:0 22px;
    position:relative;z-index:2;
}
.section-padding{padding:84px 0;}

/* Utility */
.me-2{margin-right:.5rem;}
.text-danger{color:var(--red) !important;}
.text-warning{color:var(--accent) !important;}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    font-family:var(--font-heading);font-weight:700;font-size:1rem;
    padding:.9rem 1.7rem;border-radius:var(--radius-pill);
    border:2px solid transparent;cursor:pointer;
    transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}
.btn-primary{background:var(--green-gradient);color:#fff;box-shadow:0 12px 28px -10px rgba(15,81,50,.55);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(15,81,50,.6);}
.btn-outline{background:#fff;color:var(--primary);border-color:rgba(15,81,50,.35);}
.btn-outline:hover{background:var(--primary-light);transform:translateY(-3px);}
.btn-google-play{
    background:#041F13;color:#fff;border-radius:16px;
    padding:.55rem 1.25rem;min-height:56px;box-shadow:0 12px 28px -12px rgba(0,0,0,.5);
}
.btn-google-play:hover{transform:translateY(-3px);background:#0b2b1b;}
.btn-google-play .fa-google-play{font-size:1.6rem;}
.play-btn-text{display:flex;flex-direction:column;line-height:1.05;text-align:left;}
.play-sub{font-size:.62rem;letter-spacing:.12em;opacity:.85;}
.play-title{font-size:1.02rem;font-weight:800;font-family:var(--font-heading);}
/* ── Header & Navigation ───────────────────────────────────────── */
header{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:2px solid rgba(212,175,55,.12);
    position:sticky;top:0;z-index:100;
    box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.nav-container{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px;}
.logo-area{display:flex;align-items:center;gap:10px;flex-shrink:0;position:relative;z-index:2;}
.logo-img{width:44px;height:44px;border-radius:13px;object-fit:cover;
    border:2px solid rgba(212,175,55,.5);box-shadow:0 6px 16px rgba(15,81,50,.2);}
.logo-title{font-family:var(--font-heading);font-weight:800;font-size:1.45rem;
    letter-spacing:-.02em;color:var(--primary);}
.nav-menu{display:flex;align-items:center;gap:6px;}
.nav-link{
    font-family:var(--font-heading);font-weight:600;font-size:.95rem;color:var(--text-dark);
    padding:.55rem 1rem;border-radius:var(--radius-pill);transition:all .2s ease;
}
.nav-link:hover{color:var(--primary);background:var(--primary-light);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.lang-toggle{
    font-weight:800;font-size:1rem;color:var(--primary);
    background:var(--primary-light);border:1px solid rgba(15,81,50,.18);
    padding:.5rem .8rem;border-radius:var(--radius-pill);transition:all .2s ease;
}
.lang-toggle:hover{background:var(--primary);color:#fff;}
.login-btn-outline{
    font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:var(--primary);
    border:1.6px solid rgba(15,81,50,.4);padding:.55rem 1.3rem;border-radius:var(--radius-pill);
    transition:all .2s ease;
}
.login-btn-outline:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.nav-cta{
    font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:#fff;
    background:var(--green-gradient);padding:.6rem 1.4rem;border-radius:var(--radius-pill);
    box-shadow:0 10px 22px -10px rgba(15,81,50,.6);transition:all .2s ease;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(15,81,50,.65);}

/* ── Hero ──────────────────────────────────────────────────────── */
.hero-section{padding:70px 0 78px;position:relative;z-index:2;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.hero-content{max-width:600px;}
.hero-tag{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-heading);font-weight:700;font-size:.82rem;color:var(--accent-deep);
    background:var(--accent-light);border:1px solid rgba(212,175,55,.35);
    padding:.45rem 1rem;border-radius:var(--radius-pill);margin-bottom:20px;
    box-shadow:0 6px 18px -8px rgba(212,175,55,.5);
}
.hero-title{
    font-family:var(--font-heading);font-weight:800;font-size:clamp(2.5rem,6vw,4.2rem);
    line-height:1.02;letter-spacing:-.03em;color:var(--primary);
    background:var(--green-gradient);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;margin-bottom:16px;
}
.hero-subtitle{
    font-size:clamp(1rem,2.2vw,1.18rem);color:var(--text-muted);line-height:1.7;
    margin-bottom:30px;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* Phone mockup */
.hero-visuals{display:flex;justify-content:center;position:relative;z-index:2;}
.phone-mockup{
    position:relative;z-index:2;width:min(320px,78vw);
    border-radius:44px;padding:12px;
    background:linear-gradient(160deg,#0b3b22,#198754 55%,#0f5132);
    box-shadow:0 40px 80px -30px rgba(10,66,41,.55),inset 0 0 0 2px rgba(255,255,255,.12);
    animation:float 6s ease-in-out infinite;
}
@keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
}
.phone-statusbar{
    display:flex;justify-content:space-between;align-items:center;
    padding:4px 8px 10px;color:#fff;font-size:.72rem;font-weight:600;
}
.phone-statusbar-icons{display:flex;gap:6px;font-size:.68rem;}
.phone-screen{
    border-radius:32px;overflow:hidden;background:#fff;
    border:1px solid rgba(255,255,255,.25);aspect-ratio:9/19;
}
.phone-screen img{width:100%;height:100%;object-fit:cover;}

/* Decorative rings behind the phone */
.hero-visuals::before,.hero-visuals::after{
    content:'';position:absolute;border-radius:50%;z-index:1;
}
.hero-visuals::before{
    width:340px;height:340px;border:2px dashed rgba(212,175,55,.35);
    animation:spin 26s linear infinite;
}
.hero-visuals::after{
    width:430px;height:430px;border:1.5px solid rgba(15,81,50,.14);
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Stats Bar ─────────────────────────────────────────────────── */
.stats-section{position:relative;z-index:2;padding:0 0 70px;}
.stats-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
    background:var(--white);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:34px 26px;
    box-shadow:var(--card-shadow);
}
.stat-item{text-align:center;padding:8px;}
.stat-icon{
    width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;color:var(--primary);background:var(--primary-light);
    border-radius:16px;box-shadow:inset 0 0 0 1px rgba(15,81,50,.12);
}
.stat-item h3{font-family:var(--font-heading);font-weight:800;font-size:clamp(1.3rem,3vw,1.9rem);color:var(--primary);}
.stat-item p{color:var(--text-muted);font-size:.9rem;margin-top:2px;}
/* ── Section Headers ───────────────────────────────────────────── */
.section-header{text-align:center;max-width:760px;margin:0 auto 48px;}
.section-header h2{
    font-family:var(--font-heading);font-weight:800;
    font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.18;letter-spacing:-.02em;
    color:var(--primary);margin-bottom:12px;
}
.section-header p{color:var(--text-muted);font-size:clamp(.98rem,2vw,1.1rem);}

/* ── Features Grid ─────────────────────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.feature-card{
    position:relative;background:rgba(255,255,255,.9);
    border:1px solid rgba(15,81,50,.10);border-radius:var(--radius);
    padding:28px 24px;box-shadow:var(--card-shadow);
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
    overflow:hidden;display:flex;flex-direction:column;
}
.feature-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:var(--green-gradient);opacity:.9;
}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--hover-shadow);border-color:var(--border);}
.card-icon{
    width:58px;height:58px;display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;color:var(--primary);background:var(--primary-light);
    border-radius:16px;margin-bottom:18px;
    box-shadow:inset 0 0 0 1px rgba(15,81,50,.14),0 8px 18px -8px rgba(15,81,50,.3);
}
.feature-card h3{font-family:var(--font-heading);font-weight:700;font-size:1.12rem;color:var(--text-dark);margin-bottom:8px;line-height:1.35;}
.feature-card p{color:var(--text-muted);font-size:.93rem;line-height:1.6;}

/* "NEW" badge on freshly added modules */
.card-badge{
    position:absolute;top:16px;right:16px;
    font-family:var(--font-heading);font-weight:800;font-size:.65rem;letter-spacing:.08em;
    color:#fff;background:var(--accent-gradient,#D4AF37);
    background:linear-gradient(135deg,#FFDF73,#D4AF37 60%,#a8841f);
    color:#4a3400;padding:.28rem .6rem;border-radius:var(--radius-pill);
    box-shadow:0 6px 14px -6px rgba(212,175,55,.7);
}

/* ── Timeline / Steps ──────────────────────────────────────────── */
.timeline-section{position:relative;z-index:2;
    background:var(--primary-lighter);border-top:1px solid rgba(212,175,55,.15);
    border-bottom:1px solid rgba(212,175,55,.15);}
.timeline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;}
.timeline-grid::before{
    content:'';position:absolute;top:38px;left:16%;right:16%;height:3px;
    background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent);
    border-radius:var(--radius-pill);opacity:.7;z-index:0;
}
.timeline-card{
    background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
    padding:34px 24px 26px;text-align:center;box-shadow:var(--card-shadow);
    position:relative;z-index:2;transition:transform .28s ease;
}
.timeline-card:hover{transform:translateY(-6px);}
.timeline-step{
    width:78px;height:78px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-heading);font-weight:800;font-size:1.9rem;color:#fff;
    background:var(--green-gradient);border-radius:50%;
    box-shadow:0 0 0 6px var(--accent-light),0 14px 26px -10px rgba(15,81,50,.5);
}
.timeline-card h3{font-family:var(--font-heading);font-weight:700;font-size:1.2rem;color:var(--primary);margin-bottom:8px;}
.timeline-card p{color:var(--text-muted);font-size:.93rem;}
/* ── FAQ ───────────────────────────────────────────────────────── */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-list details{
    background:var(--white);border:1px solid rgba(15,81,50,.12);
    border-radius:var(--radius-sm);box-shadow:var(--card-shadow);overflow:hidden;
    transition:border-color .25s ease;
}
.faq-list details[open]{border-color:var(--border);}
.faq-list summary{
    font-family:var(--font-heading);font-weight:600;font-size:1.02rem;color:var(--text-dark);
    padding:18px 22px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::before{
    content:'\f059';font-family:'Font Awesome 6 Free';font-weight:900;
    color:var(--accent);flex-shrink:0;
}
.faq-list summary::after{
    content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;
    margin-left:auto;color:var(--text-soft);transition:transform .25s ease;
}
.faq-list details[open] summary::after{transform:rotate(180deg);}
.faq-answer{padding:0 22px 18px 52px;color:var(--text-muted);font-size:.95rem;line-height:1.7;}

/* ── Pricing Table ─────────────────────────────────────────────── */
.pricing-wrap{
    max-width:940px;margin:0 auto;overflow-x:auto;background:var(--white);
    border-radius:var(--radius-lg);box-shadow:var(--card-shadow);
    border:1px solid var(--border);
}
.pricing-table{width:100%;border-collapse:collapse;text-align:left;min-width:640px;}
.pricing-table th{
    font-family:var(--font-heading);padding:22px 20px;background:#f8fafc;
    border-bottom:2px solid var(--border);color:var(--text-dark);font-size:1.05rem;
}
.pricing-table th:first-child{width:52%;}
.pricing-table th:nth-child(2){color:var(--primary);text-align:center;}
.pricing-table th:nth-child(3){color:var(--accent-deep);text-align:center;}
.pricing-table td{padding:15px 20px;font-weight:500;border-bottom:1px solid rgba(15,81,50,.08);}
.pricing-table td:not(:first-child){text-align:center;color:#10b981;font-size:1.05rem;}
.pricing-table td .xmark{color:#ef4444;}
.pricing-table .cat-row td{
    background:var(--primary-light);font-weight:800;color:var(--primary);
    font-size:.94rem;text-transform:uppercase;letter-spacing:.04em;
}
.pricing-table tr.shade td{background:#fafafa;}

/* ── CTA Banner ────────────────────────────────────────────────── */
.cta-banner{
    position:relative;z-index:2;text-align:center;overflow:hidden;
    background:var(--green-gradient);color:#fff;border-radius:var(--radius-lg);
    padding:56px 30px;box-shadow:0 30px 60px -24px rgba(10,66,41,.6);
}
.cta-banner::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.14),transparent 40%),
               radial-gradient(circle at 80% 80%,rgba(212,175,55,.25),transparent 45%);
}
.cta-banner h2{position:relative;z-index:2;font-family:var(--font-heading);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:12px;}
.cta-banner p{position:relative;z-index:2;opacity:.94;max-width:620px;margin:0 auto 28px;font-size:1.05rem;}
.contact-pill-box{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:20px;}
.contact-pill{
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
    color:#fff;font-weight:600;padding:.8rem 1.4rem;border-radius:var(--radius-pill);
    backdrop-filter:blur(6px);transition:all .25s ease;
}
.contact-pill:hover{background:rgba(255,255,255,.24);transform:translateY(-3px);}
.whatsapp-ico{color:#25D366;font-size:1.15rem;}
.cta-banner p:last-child{font-size:.85rem;opacity:.75;margin-bottom:0;}

/* ── Footer ────────────────────────────────────────────────────── */
footer{position:relative;z-index:2;background:var(--primary-deep,#041F13);color:rgba(255,255,255,.75);margin-top:84px;}
.footer-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:34px 22px;}
.footer-logo{display:flex;align-items:center;gap:10px;}
.footer-logo-img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:2px solid rgba(212,175,55,.45);}
.footer-logo-title{font-family:var(--font-heading);font-weight:800;font-size:1.25rem;color:#fff;}
.footer-links{display:flex;align-items:center;gap:10px;font-size:.92rem;}
.footer-links a{color:rgba(255,255,255,.8);transition:color .2s ease;}
.footer-links a:hover{color:var(--accent);}
.footer-note{font-size:.85rem;opacity:.7;text-align:center;}
/* ── Responsive: Tablet ────────────────────────────────────────── */
@media screen and (max-width:1024px){
    .features-grid{grid-template-columns:repeat(2,1fr);}
    .hero-grid{grid-template-columns:1fr;gap:50px;}
    .hero-content{max-width:100%;text-align:center;}
    .hero-content .hero-tag{margin-left:auto;margin-right:auto;}
    .hero-ctas{justify-content:center;}
    .hero-visuals{order:-1;margin-top:6px;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── Responsive: Mobile ────────────────────────────────────────── */
@media screen and (max-width:720px){
    .section-padding{padding:60px 0;}
    .nav-menu{display:none;}
    .nav-actions{gap:8px;}
    .login-btn-outline{display:none;}
    .nav-cta{padding:.55rem 1.1rem;font-size:.9rem;}
    .hero-section{padding:44px 0 56px;}
    .hero-title{font-size:clamp(2.2rem,9vw,3rem);}
    .hero-ctas{flex-direction:column;align-items:stretch;width:100%;}
    .hero-ctas .btn{width:100%;}
    .btn-google-play{justify-content:center;}
    .phone-mockup{width:min(300px,80vw);}
    .features-grid{grid-template-columns:1fr;}
    .timeline-grid{grid-template-columns:1fr;gap:20px;}
    .timeline-grid::before{display:none;}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:26px 16px;}
    .stat-icon{width:48px;height:48px;font-size:1.2rem;}
    .footer-container{flex-direction:column;text-align:center;justify-content:center;}
    .cta-banner{padding:44px 20px;}
    .contact-pill-box{flex-direction:column;}
}

@media screen and (max-width:420px){
    .stats-grid{grid-template-columns:1fr 1fr;}
    .logo-title{font-size:1.2rem;}
    .hero-subtitle{font-size:.98rem;}
}

/* Language toggle micro-breakpoint (kept for backward compat) */
.lang-toggle-mobile{display:none;}
@media screen and (max-width:480px){
    .lang-toggle-desktop{display:none;}
    .lang-toggle-mobile{display:inline;}
}