:root {
    --e: #0d9255;
    --ed: #087a47;
    --el: #e8f7ef;
    --eg: rgba(13, 146, 85, 0.12);
    --g: #c8a84e;
    --i: #1a1a2e;
    --is: #3a3a5c;
    --p: #fafaf7;
    --pw: #f5f4f0;
    --w: #ffffff;
    --b: #e2e0da;
    --ss: 0 1px 3px rgba(0, 0, 0, 0.06);
    --sm: 0 4px 16px rgba(0, 0, 0, 0.08);
    --r: 12px
}

[data-theme="dark"] {
    --e: #10b96c;
    --ed: #0d9255;
    --el: rgba(16, 185, 108, 0.12);
    --eg: rgba(16, 185, 108, 0.08);
    --g: #d4b85c;
    --i: #e8e6e1;
    --is: #a8a6a0;
    --p: #111113;
    --pw: #1a1a1e;
    --w: #222226;
    --b: #333338;
    --ss: 0 1px 3px rgba(0, 0, 0, 0.3);
    --sm: 0 4px 16px rgba(0, 0, 0, 0.4)
}

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--p);
    color: var(--i);
    min-height: 100vh;
    direction: ltr;
    overflow-x: hidden;
    transition: background .3s, color .3s
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 15% 20%, var(--eg) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(200, 168, 78, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0
}

.hdr {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--w) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--b);
    padding: 0 24px;
    transition: background .3s
}

.hdr-in {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none
}

.logo-i {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--e), var(--ed));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(13, 146, 85, 0.3)
}

.logo-t {
    font-size: 20px;
    font-weight: 700;
    color: var(--i);
    letter-spacing: -.5px;
    transition: color .3s
}

.logo-t span {
    color: var(--e)
}

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

.nav a,
.nav button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    text-decoration: none;
    background: transparent;
    color: var(--is);
    white-space: nowrap
}

.nav a:hover,
.nav button:hover {
    background: var(--pw);
    color: var(--i)
}

.nav a.active {
    background: var(--el);
    color: var(--e);
    font-weight: 600
}

.dm-toggle {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--is);
    font-size: 18px;
    transition: all .15s;
    padding: 0;
    position: relative
}

.dm-toggle:hover {
    background: var(--el);
    color: var(--e)
}

.owl-nudge {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    animation: owl-fly-in .9s cubic-bezier(.34,1.4,.64,1) forwards, owl-perch-bob 2.8s ease-in-out .9s infinite;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.45))
}

.owl-lid {
    transform-box: fill-box;
    transform-origin: center;
    animation: owl-blink 3.5s ease-in-out 2s infinite
}

.owl-lid-r {
    animation-delay: 2.15s
}

@keyframes owl-fly-in {
    0%   { transform: translate(200px, -80px) rotate(20deg); opacity: .5 }
    45%  { transform: translate(15px, 10px)   rotate(-8deg); opacity: 1 }
    65%  { transform: translate(-6px, -4px)   rotate(3deg) }
    82%  { transform: translate(3px, 2px)     rotate(-1deg) }
    100% { transform: translate(0, 0) rotate(0deg) }
}

@keyframes owl-perch-bob {
    0%,100% { transform: translate(0, 0) rotate(0deg) }
    30%     { transform: translate(0, -2px) rotate(1deg) }
    70%     { transform: translate(0, -1px) rotate(-.5deg) }
}

@keyframes owl-blink {
    0%,35%,100% { transform: scaleY(1) }
    40%,50%     { transform: scaleY(.05) }
    55%         { transform: scaleY(1) }
}

@keyframes owl-fly-out {
    to { transform: translate(200px, -80px) rotate(30deg); opacity: 0 }
}

.hamburger {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--is);
    font-size: 22px;
    padding: 0
}

.hamburger:hover {
    background: var(--pw)
}

.mob-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--w);
    border-bottom: 1px solid var(--b);
    padding: 12px 24px;
    z-index: 99;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--sm)
}

.mob-menu.show {
    display: flex
}

.mob-menu a {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--is);
    text-decoration: none;
    transition: all .15s
}

.mob-menu a:hover,
.mob-menu a.active {
    background: var(--el);
    color: var(--e)
}

.dd-wrap {
    position: relative
}

.dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    background: transparent;
    color: var(--is);
    white-space: nowrap
}

.dd-btn:hover {
    background: var(--pw);
    color: var(--i)
}

.dd-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--w);
    border: 1px solid var(--b);
    border-radius: 10px;
    box-shadow: var(--sm);
    padding: 6px;
    min-width: 220px;
    z-index: 200
}

.dd-menu.show {
    display: block
}

.dd-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--is);
    text-decoration: none;
    transition: all .12s;
    white-space: nowrap
}

.dd-menu a:hover {
    background: var(--el);
    color: var(--e)
}

.mob-divider {
    height: 1px;
    background: var(--b);
    margin: 4px 0
}

.mob-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--is);
    padding: 6px 16px 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

@media(max-width:768px) {
    .nav a:not(.dm-toggle-wrap) {
        display: none
    }

    .hamburger {
        display: flex
    }

    .dd-wrap {
        display: none
    }
}

.ftr-hw-btn{display:inline-flex;align-items:center;gap:6px;background:var(--e);color:#fff !important;font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;text-decoration:none;transition:background .2s;margin-bottom:6px}
.ftr-hw-btn:hover{background:var(--ed)}
.ftr-hw-icon{display:inline-block;animation:ftr-write 1s ease-in-out infinite}
@keyframes ftr-write{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}

.ftr {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--b);
    padding: 32px 24px;
    margin-top: 32px;
    transition: border-color .3s
}

.ftr-in {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between
}

.ftr-col {
    min-width: 180px
}

.ftr-col h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--i);
    margin-bottom: 12px
}

.ftr-col a {
    display: block;
    font-size: 13px;
    color: var(--is);
    text-decoration: none;
    padding: 2px 0;
    transition: color .15s
}

.ftr-col a:hover {
    color: var(--e)
}

.ftr-bottom {
    width: 100%;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--b);
    margin-top: 8px
}

.ftr-bottom p {
    font-size: 12px;
    color: var(--is);
    margin: 4px 0
}

.ftr-bottom .ur {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 14px;
    color: var(--i)
}

@media(max-width:768px) {
    .ftr-in {
        flex-direction: column;
        gap: 24px;
        text-align: center
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.mn {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    animation: fadeUp .5s ease
}

.hero {
    text-align: center;
    margin-bottom: 20px
}

.hero h1 {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 28px;
    color: var(--i);
    margin-bottom: 4px;
    font-weight: 700
}

.hero p {
    font-size: 15px;
    color: var(--is);
    margin: 0
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--is);
    margin-bottom: 16px;
    flex-wrap: wrap
}

.breadcrumb a {
    color: var(--e);
    text-decoration: none
}

.breadcrumb a:hover {
    text-decoration: underline
}

.page-title {
    text-align: center;
    margin-bottom: 32px
}

.page-title h1 {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 30px;
    color: var(--i);
    margin-bottom: 8px
}

.page-title p {
    font-size: 15px;
    color: var(--is)
}

.card {
    background: var(--w);
    border: 1px solid var(--b);
    border-radius: var(--r);
    padding: 32px;
    box-shadow: var(--sm);
    margin-bottom: 20px;
    transition: all .3s
}

.card h2 {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 22px;
    color: var(--i);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--el)
}

.card p,
.card li {
    font-size: 15px;
    line-height: 2;
    color: var(--is);
    margin-bottom: 12px
}

.card p.ur {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 17px;
    direction: rtl;
    line-height: 2.2
}

.cta-box {
    background: var(--el);
    border: 1px solid var(--e);
    border-radius: var(--r);
    padding: 24px;
    text-align: center;
    margin: 20px 0
}

.cta-box h3 {
    font-size: 18px;
    color: var(--i);
    margin-bottom: 8px
}

.cta-box p {
    font-size: 14px;
    color: var(--is);
    margin-bottom: 12px
}

.cta-box a {
    display: inline-block;
    padding: 10px 24px;
    background: var(--e);
    color: #fff;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background .2s
}

.cta-box a:hover {
    background: var(--ed)
}

.bt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--b);
    cursor: pointer;
    transition: all .2s;
    font-family: inherit
}

.bg {
    background: var(--w);
    color: var(--is)
}

.bg:hover {
    border-color: var(--e);
    color: var(--e);
    background: var(--el)
}

.bp {
    background: var(--e);
    color: #fff;
    border-color: var(--e)
}

.bp:hover {
    background: var(--ed);
    border-color: var(--ed)
}

@media(max-width:768px) {
    .mn {
        padding: 12px
    }

    .hero h1 {
        font-size: 22px
    }
}

@media print {
    .hdr,
    .ftr,
    .mob-menu {
        display: none !important
    }
}

/* Global Component Styles for Guides and Tools */
.toc{background:var(--pw);border:1px solid var(--b);border-radius:var(--r);padding:20px;margin-bottom:24px}
.toc-title{font-size:14px;font-weight:700;color:var(--i);margin-bottom:10px}
.toc a{display:block;font-size:13px;color:var(--e);text-decoration:none;padding:4px 0}.toc a:hover{text-decoration:underline}

.cta-btn{display:inline-block;padding:10px 24px;background:var(--e);color:#fff;border-radius:24px;text-decoration:none;font-weight:600;font-size:14px;transition:background .2s}
.cta-btn:hover{background:var(--ed)}

.faq-item{border-bottom:1px solid var(--b);padding:16px 0}.faq-item:last-child{border-bottom:none}
.faq-q{font-size:15px;font-weight:600;color:var(--i);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color .15s}.faq-q:hover{color:var(--e)}
.faq-a{font-size:14px;color:var(--is);line-height:1.8;margin-top:12px;display:none}
.faq-item.open .faq-a{display:block}
.faq-arrow{transition:transform .2s;font-size:12px}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.ep-wrap{position:fixed;bottom:24px;right:24px;width:300px;background:var(--w);border:1px solid var(--b);border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.14);padding:20px;z-index:9999;transform:translateY(120%);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.ep-wrap.ep-show{transform:translateY(0);opacity:1}
.ep-x{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;font-size:14px;color:var(--is);line-height:1;padding:4px 6px;border-radius:6px;transition:background .15s,color .15s}
.ep-x:hover{background:var(--pw);color:var(--i)}
.ep-en{font-size:15px;font-weight:700;color:var(--i);margin-bottom:12px;text-align:center}
.ep-ur{font-family:'Noto Nastaliq Urdu',serif;font-size:14px;color:var(--is);direction:rtl;margin-bottom:14px;line-height:1.8}
.ep-btns{display:flex;flex-direction:column;gap:8px}
.ep-btn{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;font-family:inherit;transition:all .18s;border:1px solid var(--b)}
.ep-bk{background:var(--el);color:var(--e);border-color:var(--e)}
.ep-bk:hover{background:var(--e);color:#fff}
.ep-hint{font-size:11px;opacity:.7;margin-left:auto}
.ep-sub-row{display:flex;gap:6px}
.ep-email{flex:1;padding:9px 12px;border-radius:8px;border:1px solid var(--b);background:var(--pw);color:var(--i);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;min-width:0}
.ep-email:focus{border-color:var(--e)}
.ep-sub-btn{padding:9px 14px;border-radius:8px;background:var(--e);color:#fff;border:none;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .18s;white-space:nowrap}
.ep-sub-btn:hover{background:var(--ed)}
.ep-done{width:100%;cursor:default;font-weight:600;justify-content:center}
.ep-err{font-size:12px;color:#e53e3e;margin:2px 0 0}
.ep-privacy{font-size:11px;color:var(--is);margin:6px 0 0;line-height:1.6;text-align:center}
.ep-privacy-ur{font-family:'Noto Nastaliq Urdu',serif;font-size:12px;direction:rtl;display:block}
@media(max-width:480px){.ep-wrap{width:100%;right:0;bottom:0;border-radius:var(--r) var(--r) 0 0;border-left:none;border-right:none;border-bottom:none}}
/* === Eco Flower Animation (top-left background) === */
.flw-scene{position:fixed;bottom:auto;top:55px;left:0;width:260px;height:270px;z-index:0;opacity:.45;pointer-events:none;overflow:visible}
.flw-stem-path{fill:none;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:flw-draw-stem var(--dur) ease-out var(--del) forwards}
@keyframes flw-draw-stem{to{stroke-dashoffset:0}}
.flw-bloom-g{opacity:0;transform-origin:var(--ox) var(--oy);animation:flw-bloom-in 3s ease-out var(--del) forwards,flw-gpulse 4s ease-in-out calc(var(--del) + 3s) infinite}
@keyframes flw-bloom-in{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes flw-gpulse{0%,100%{opacity:.85}50%{opacity:1}}
.flw-sway-g{transform-origin:var(--sx) var(--sy);animation:flw-sway var(--sd) ease-in-out var(--del) infinite}
@keyframes flw-sway{0%,100%{transform:rotate(0deg)}25%{transform:rotate(var(--sa))}75%{transform:rotate(calc(-1 * var(--sa)))}}
.flw-leaf-g{opacity:0;transform-origin:var(--lx) var(--ly);animation:flw-leaf-grow 2s ease-out var(--del) forwards}
@keyframes flw-leaf-grow{0%{opacity:0;transform:scale(0) rotate(var(--lr))}100%{opacity:1;transform:scale(1) rotate(var(--lr))}}
.flw-grass-b{transform-origin:bottom center;animation:flw-gsway var(--gd) ease-in-out var(--gdel) infinite}
@keyframes flw-gsway{0%,100%{transform:rotate(0)}50%{transform:rotate(var(--ga))}}
.flw-firefly{opacity:0;animation:flw-ffloat var(--fd) ease-in-out var(--fdel) infinite}
@keyframes flw-ffloat{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}50%{opacity:.5;transform:translate(var(--ffx),var(--ffy))}85%{opacity:.8}100%{opacity:0;transform:translate(var(--ffx2),var(--ffy2))}}
@media(prefers-reduced-motion:reduce){.flw-stem-path,.flw-bloom-g,.flw-sway-g,.flw-leaf-g,.flw-grass-b,.flw-firefly{animation:none;opacity:1;stroke-dashoffset:0}}
@media(max-width:480px){.flw-scene{transform:scale(.72);transform-origin:top left}}