*{box-sizing:border-box}html{scroll-behavior:smooth}:root{--g:#0d7554;--g2:#09533d;--deep:#071f18;--ink:#12231c;--muted:#6d7c75;--line:#dfe9e4;--soft:#edf6f2;--white:#fff;--shadow:0 24px 70px rgba(8,45,33,.12)}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f7faf8;overflow-x:hidden}a{color:inherit}.container{width:min(1220px,calc(100% - 40px));margin:auto}
.topline{height:34px;background:#06251c;color:#bad3ca;font-size:10px}.topline .container{height:100%;display:flex;align-items:center;justify-content:space-between}.online:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#54d69f;margin-right:7px;box-shadow:0 0 0 4px #54d69f18}
.hero{position:relative;padding:38px 0 28px;background:radial-gradient(circle at 85% 10%,#cce7db 0,transparent 27%),linear-gradient(180deg,#eef7f3,#fff);overflow:hidden}.hero-shell{position:relative;min-height:600px;border-radius:30px;overflow:hidden;background:linear-gradient(135deg,#102f25,#537467);box-shadow:0 30px 90px rgba(5,37,27,.2)}.hero-scene{position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,#9ab5a277,transparent 26%),linear-gradient(120deg,#092b22,#17483a99 46%,#79998b55)}.hero-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061d17e8,#08281fb8 40%,transparent 78%),linear-gradient(0deg,#061d17d9,transparent 48%)}.hero-content{position:relative;z-index:2;min-height:600px;padding:52px;display:flex;flex-direction:column;justify-content:space-between;color:white}.hero-meta{display:flex;justify-content:space-between}.pill{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #ffffff20;border-radius:999px;background:#071d1777;backdrop-filter:blur(12px);font-size:10px;font-weight:800}.pulse{width:7px;height:7px;border-radius:50%;background:#ff5b52;animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 9px #ff5b5200}}
.hero-copy{max-width:730px}.kicker,.eyebrow{font-size:9px;letter-spacing:2.2px;text-transform:uppercase;font-weight:900;color:var(--g);margin-bottom:10px}.hero .kicker{color:#b8dfd0}.hero h1{font-family:Georgia,serif;font-size:clamp(52px,7vw,92px);line-height:.92;letter-spacing:-3px;margin:0 0 22px}.hero h1 span{color:#cce9dd}.hero-copy p{max-width:610px;font-size:16px;line-height:1.75;color:#d5e4de}.actions{display:flex;gap:11px;margin-top:27px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:13px 17px;border-radius:12px;font-size:12px;font-weight:850;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:white;color:#0a513c}.btn.glass{border:1px solid #ffffff25;background:#ffffff0d;color:white}.hero-bottom{display:flex;gap:12px}.micro{padding:11px 14px;border:1px solid #ffffff18;background:#ffffff0b;border-radius:13px;backdrop-filter:blur(8px);font-size:10px;color:#d1e3dc}
.section{padding:76px 0}.section.alt{background:#f0f6f3}.head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px}.head h2{font-family:Georgia,serif;font-size:38px;line-height:1;margin:0}.head p{font-size:13px;color:var(--muted)}.link{font-size:12px;font-weight:850;color:var(--g);text-decoration:none}.notice{display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:17px;background:white;margin-bottom:12px;transition:.2s}.notice:hover{transform:translateX(4px)}.notice-icon{width:52px;height:52px;border-radius:15px;background:#fff3d9;display:grid;place-items:center}.notice h3{font-size:14px;margin:0 0 5px}.notice p{font-size:12px;color:var(--muted);margin:0;line-height:1.55}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-card{overflow:hidden;border:1px solid var(--line);background:white;border-radius:20px;text-decoration:none;transition:.3s}.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.media{height:210px;background:linear-gradient(145deg,#d8e8e1,#719786);display:grid;place-items:center;font-size:40px;overflow:hidden}.media img{width:100%;height:100%;object-fit:cover;transition:.5s}.news-card:hover img{transform:scale(1.04)}.card-content{padding:20px}.tag{font-size:9px;text-transform:uppercase;color:var(--g);font-weight:900}.card-content h3{font-size:17px;line-height:1.35;margin:9px 0}.card-content p{font-size:12px;line-height:1.65;color:var(--muted)}
.events{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.event{display:flex;align-items:center;gap:17px;padding:18px;border:1px solid var(--line);background:white;border-radius:17px;text-decoration:none;transition:.2s}.event:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.datebox{width:62px;height:67px;min-width:62px;border-radius:15px;background:var(--soft);display:grid;place-items:center;text-align:center;color:var(--g)}.datebox b{display:block;font-size:23px}.datebox span{font-size:8px;font-weight:900}.event h3{font-size:14px;margin:0 0 7px}.event p{font-size:11px;color:var(--muted)}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick{min-height:180px;padding:23px;border-radius:20px;background:white;border:1px solid var(--line);text-decoration:none;transition:.25s}.quick:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.quick-icon{width:46px;height:46px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:20px}.quick strong{display:block;margin:22px 0 6px;font-size:14px}.quick span{font-size:11px;color:var(--muted)}
.cta{padding:0 0 75px}.cta-box{border-radius:26px;padding:45px;background:linear-gradient(120deg,#0a503c,#092d24);color:white}.cta h2{font-family:Georgia,serif;font-size:37px;margin:0 0 10px}.cta p{color:#c5ddd4;font-size:13px}
.footer{background:#061e17;color:#9eb8ae;padding:55px 0 22px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px}.foot-brand{color:white;font-size:21px;font-weight:850}.footer p,.footer a{font-size:11px;line-height:1.8}.footer h4{color:white;font-size:11px;text-transform:uppercase}.footer a{display:block;text-decoration:none;margin:8px 0}.copyright{border-top:1px solid #ffffff0e;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;font-size:10px}.empty{padding:35px;border:1px dashed #bfd1c9;border-radius:18px;text-align:center;color:var(--muted)}.reveal{opacity:0;transform:translateY(18px);transition:.65s}.reveal.visible{opacity:1;transform:none}

/* =========================================
   HOME — WORLD CTA
   ========================================= */

.home-world-cta {
    padding: 72px 0;
    margin: 0;
    background: #f7faf8;
}

.home-world-cta > .container {
    display: flex;
    align-items: center;
}

.home-world-cta .cta-box {
    width: 100%;
    min-height: 245px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: 42px 48px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(40, 151, 111, .20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #063b2d 0%,
            #07533e 55%,
            #06382c 100%
        );

    box-shadow:
        0 20px 50px rgba(5, 48, 36, .10);
}

.home-world-cta .eyebrow {
    margin-bottom: 14px;

    color: #9bd4be;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.home-world-cta h2 {
    max-width: 760px;
    margin: 0;

    color: #fff;

    font-family: Georgia, serif;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -.7px;
}

.home-world-cta p {
    max-width: 720px;
    margin: 18px 0 0;

    color: rgba(255, 255, 255, .78);

    font-size: 14px;
    line-height: 1.65;
}

.world-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 22px;
    padding: 11px 15px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;

    background: rgba(255,255,255,.08);

    color: #fff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 800;

    transition: .2s ease;
}

.world-cta-link:hover {
    background: #fff;
    color: #064633;
    transform: translateY(-1px);
}

@media (max-width: 700px) {

    .home-world-cta {
        padding: 42px 0;
    }

    .home-world-cta .cta-box {
        min-height: auto;
        padding: 30px 24px;
        border-radius: 23px;
    }

    .home-world-cta h2 {
        font-size: 32px;
    }

    .home-world-cta p {
        font-size: 13px;
    }
}

/* =========================================================
   BREZNITSA NOW — PREMIUM PRAYER CARD
   ========================================================= */

.now-grid {
    align-items: stretch;
}

.now-card {
    min-height: 345px;
}


/* PRAYER CARD */

.prayer-now {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 345px;
    padding: 22px;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 88% 80%,
            rgba(21, 139, 100, .25),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #063b2d 0%,
            #07513d 58%,
            #064534 100%
        );
}


/* HEADER */

.prayer-now .now-card-top {
    position: relative;
    z-index: 3;

    color: rgba(255,255,255,.78);
}

.prayer-now .now-card-top > span:first-child {
    color: #a7dfc9;
}


/* DECORATIVE CRESCENT */

.prayer-decoration {
    position: absolute;
    right: 25px;
    bottom: 18px;

    z-index: 0;

    color: rgba(255,255,255,.045);

    font-size: 145px;
    line-height: 1;

    pointer-events: none;
    user-select: none;
}


/* SIX PRAYER TIMES */

.prayer-now .prayer-mini {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(6, 1fr);

    gap: 7px;

    margin-top: 14px;
}

.prayer-now .prayer-mini > div {
    min-width: 0;

    padding: 13px 7px;

    border: 1px solid rgba(255,255,255,.035);
    border-radius: 13px;

    background: rgba(255,255,255,.045);

    text-align: center;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.prayer-now .prayer-mini > div span {
    display: block;

    margin-bottom: 6px;

    color: rgba(196, 235, 220, .68);

    font-size: 9px;
    font-weight: 700;
}

.prayer-now .prayer-mini > div b {
    display: block;

    color: #fff;

    font-size: 15px;
    font-weight: 900;
}

.prayer-now .prayer-mini > div.active {
    border-color: rgba(135, 225, 190, .38);

    background: rgba(26, 147, 105, .28);

    transform: translateY(-1px);
}

.prayer-now .prayer-mini > div.active span {
    color: #a9ead0;
}


/* NEXT PRAYER */

.next-prayer-premium {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;
    padding: 20px 22px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);
}

.next-prayer-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.next-prayer-label {
    margin-bottom: 6px;

    color: #8fd5ba;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.next-prayer-copy strong {
    color: #fff;

    font-family: Georgia, serif;
    font-size: 25px;
    line-height: 1.05;
}

.next-prayer-copy small {
    min-height: 16px;
    margin-top: 7px;

    color: rgba(255,255,255,.63);

    font-size: 10px;
    font-weight: 600;
}


/* BIG TIME */

.next-prayer-time {
    flex: 0 0 auto;

    text-align: right;
}

.next-prayer-time span {
    display: block;

    color: #fff;

    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;
}

.next-prayer-time small {
    display: block;

    margin-top: 6px;

    color: #91d9bd;

    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}


/* FOOTER */

.prayer-card-footer {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-top: auto;
    padding-top: 18px;
}

.prayer-date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prayer-date-info > span:first-child {
    color: rgba(255,255,255,.58);

    font-size: 10px;
    font-weight: 700;
}

.prayer-hijri {
    color: #99d9c0 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
}

.prayer-calendar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #fff;

    font-size: 10px;
    font-weight: 800;
}


/* WEATHER / PRAYER HEIGHT CONSISTENCY */

.weather-now,
.prayer-now {
    height: 100%;
}


/* TABLET */

@media (max-width: 1050px) {

    .prayer-now .prayer-mini {
        grid-template-columns: repeat(3, 1fr);
    }

    .now-card {
        min-height: auto;
    }

    .prayer-card-footer {
        margin-top: 20px;
    }
}


/* MOBILE */

@media (max-width: 700px) {

    .prayer-now {
        padding: 18px;
    }

    .prayer-now .prayer-mini {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .prayer-now .prayer-mini > div {
        padding: 11px 6px;
    }

    .next-prayer-premium {
        margin-top: 14px;
        padding: 17px;
    }

    .next-prayer-copy strong {
        font-size: 22px;
    }

    .next-prayer-time span {
        font-size: 29px;
    }

    .prayer-card-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .prayer-decoration {
        right: -5px;
        bottom: 10px;

        font-size: 120px;
    }
}