/* Reset */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;line-height:1.6;color:#0f172a;background:#f8fafc}

    /* Layout container */
    .container{max-width:1100px;margin:0 auto;padding:1rem}

    /* Utilities */
    .text-center{text-align:center}
    .mb-4{margin-bottom:1rem}
    .mb-6{margin-bottom:1.5rem}
    .mb-8{margin-bottom:2rem}
    .mb-12{margin-bottom:3rem}
    .py-20{padding:5rem 0}
    .rounded-lg{border-radius:0.5rem}
    .rounded-xl{border-radius:0.75rem}
    .rounded-2xl{border-radius:1rem}
    .shadow-lg{box-shadow:0 8px 24px rgba(2,6,23,0.06)}
    .shadow-xl{box-shadow:0 12px 40px rgba(2,6,23,0.08)}
    .overflow-hidden{overflow:hidden}
    .flex{display:flex}
    .items-center{align-items:center}
    .justify-center{justify-content:center}
    .gap-4{gap:1rem}
    .muted{color:#475569}
    .lead{font-size:1.05rem;color:#334155}

    /* Badge */
    .badge{display:inline-block;padding:.35rem .75rem;border-radius:9999px;font-weight:700;font-size:.9rem}
    .badge-emerald{background:#d1fae5;color:#065f46}

    /* Buttons */
    .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:.5rem;font-weight:700;text-decoration:none;cursor:pointer;border:0}
    .btn-primary{background:#059669;color:#fff}
    .btn-primary:hover{background:#047857}
    .btn-outline{background:transparent;border:2px solid #059669;color:#065f46}
    .btn-outline:hover{background:rgba(5,150,105,0.06)}

    /* Section background */
    .section-quran{background:linear-gradient(90deg,#ecfdf5 0%,#f0fdfa 100%);}

    /* Card */
    .card{background:#fff;border-radius:.75rem;border:1px solid #e6f6ef;overflow:hidden}
    .card .grid{display:grid;grid-template-columns:1fr;gap:0}
    @media(min-width:900px){ .card .grid{grid-template-columns:1fr 1fr} }

    .image-wrap{position:relative;height:320px}
    @media(min-width:900px){ .image-wrap{height:100%} }
    .image-wrap img{width:100%;height:100%;object-fit:cover;display:block}

    .overlay-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,120,87,0.85),transparent);display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem;color:#fff}

    .p-8{padding:2rem}
    .p-12{padding:3rem}

    /* Grid lists */
    .grid-2{display:grid;gap:1.25rem}
    @media(min-width:900px){ .grid-2{grid-template-columns:repeat(2,1fr)} }

    .feature{background:#fff;padding:1.5rem;border-radius:.75rem;border:1px solid #e6f6ef}
    .feature .icon{width:56px;height:56px;border-radius:.5rem;background:#d1fae5;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
    .feature h3{color:#065f46;margin-bottom:.5rem}
    .feature p{color:#475569;margin-bottom:.75rem}

    .info-box{background:#ecfdf5;padding:1rem;border-radius:.5rem;border:1px solid #d1fae5}

    /* Callout (dark) */
    .callout{background:#065f46;color:#e6fffa;padding:2rem;border-radius:1rem;position:relative;overflow:hidden}
    .callout .decor{position:absolute;border-radius:50%;background:rgba(4,120,87,0.9);opacity:.45}
    .callout .decor.top-right{width:220px;height:220px;right:-110px;top:-110px}
    .callout .decor.bottom-left{width:220px;height:220px;left:-110px;bottom:-110px}
    .callout h3{font-size:1.5rem;margin-bottom:1rem;text-align:center}
    .callout p{max-width:900px;margin:0 auto 1rem;text-align:center;color:#d1fae5;line-height:1.6}

    /* Small helpers */
    ul.checks{list-style:none;padding-left:0}
    ul.checks li{display:flex;gap:.5rem;align-items:flex-start;margin-bottom:.5rem}
    .check-svg{flex-shrink:0;margin-top:.25rem;color:#065f46}

    /* Accessibility: reduce motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none!important}
    }