:root{
  --qf-green:#063b35;--qf-green2:#0f5149;--qf-green3:#0b3f39;--qf-gold:#d8b55b;--qf-gold2:#f4d27b;
  --qf-bg:#f5f7f6;--qf-ink:#123b35;--qf-muted:#31554f;--qf-line:rgba(15,81,73,.14);--qf-card:#fff;
  --qf-shadow:0 18px 48px rgba(0,0,0,.10)
}
[data-qf-theme="dark"]{--qf-bg:#081c1a;--qf-card:#102b27;--qf-ink:#f3f8f5;--qf-muted:#c6dad3;--qf-line:rgba(216,181,91,.20);--qf-shadow:0 18px 56px rgba(0,0,0,.32)}
html,body{max-width:100%;overflow-x:hidden}body{background:var(--qf-bg);color:var(--qf-ink)}.qf-page,.qf-page *{box-sizing:border-box}.qf-page{width:100%;max-width:100%;overflow-x:hidden;background:var(--qf-bg);color:var(--qf-ink)}.qf-page img{max-width:100%;height:auto}.qf-page .container-xl{max-width:1240px;width:100%;padding-left:clamp(14px,3vw,24px);padding-right:clamp(14px,3vw,24px)}
.qf-hero{position:relative;min-height:410px;display:flex;align-items:center;color:#fff;background:linear-gradient(100deg,rgba(6,59,53,.97),rgba(15,81,73,.72)),radial-gradient(circle at 80% 15%,rgba(216,181,91,.24),transparent 30%),url('../images/banner4.jpg') center/cover no-repeat;overflow:hidden}.qf-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 24%,rgba(216,181,91,.28),transparent 27%),radial-gradient(circle at 92% 80%,rgba(255,255,255,.12),transparent 24%)}.qf-hero-inner{position:relative;z-index:2}.qf-stars{position:absolute;inset:0;background-image:radial-gradient(rgba(244,210,123,.45) 1px,transparent 1px);background-size:34px 34px;opacity:.18;animation:qfFloat 14s linear infinite;pointer-events:none}@keyframes qfFloat{from{transform:translateY(0)}to{transform:translateY(-34px)}}
.qf-title{font-size:clamp(32px,5vw,58px);font-weight:950;letter-spacing:-.04em;line-height:1;margin:0 0 14px}.qf-ayah{max-width:760px;color:#f8e6b8;font-size:clamp(15px,1.9vw,20px);font-weight:900;line-height:1.65;margin:0 0 12px}.qf-ayah span{display:block;color:rgba(255,255,255,.76);font-size:.82em;font-weight:800;margin-top:2px}.qf-subtitle{max-width:760px;color:rgba(255,255,255,.92);font-size:clamp(15px,1.7vw,19px);line-height:1.75;margin:0}.qf-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.qf-btn-gold,.qf-btn-glass{border-radius:999px;font-weight:900;padding:12px 20px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;min-height:48px;white-space:nowrap}.qf-btn-gold{background:var(--qf-gold);color:#063b35;box-shadow:0 12px 28px rgba(216,181,91,.24)}.qf-btn-gold:hover{background:#efca68;color:#063b35}.qf-btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}.qf-btn-glass:hover{background:rgba(255,255,255,.2);color:#fff}
.qf-phone-preview{width:min(300px,82vw);aspect-ratio:9/12;border-radius:38px;padding:15px;background:linear-gradient(145deg,#092c28,#11564e);box-shadow:0 30px 70px rgba(0,0,0,.35);border:1px solid rgba(216,181,91,.28);transform:rotate(3deg)}.qf-mini-screen{height:100%;border-radius:28px;background:radial-gradient(circle at 50% 35%,rgba(216,181,91,.22),transparent 38%),rgba(5,29,26,.92);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.qf-mini-kaaba{width:88px;height:88px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 0 0 12px rgba(216,181,91,.13)}.qf-mini-kaaba img{width:62px;height:62px;object-fit:contain}.qf-mini-ring{position:absolute;width:210px;height:210px;border:2px dashed rgba(216,181,91,.42);border-radius:50%;animation:qfSpin 16s linear infinite}.qf-mini-arrow{position:absolute;width:6px;height:95px;background:linear-gradient(var(--qf-gold),transparent);top:58px;border-radius:999px;transform-origin:50% 100%;animation:qfNeedle 5s ease-in-out infinite}.qf-mini-screen small{position:absolute;bottom:24px;color:#f8ecd0;font-weight:800;letter-spacing:.02em}@keyframes qfSpin{to{transform:rotate(360deg)}}@keyframes qfNeedle{0%,100%{transform:rotate(36deg)}50%{transform:rotate(58deg)}}
.qf-main{padding:42px 0;background:var(--qf-bg);color:var(--qf-ink)}.qf-app-card,.qf-side-card{background:var(--qf-card);border:1px solid var(--qf-line);border-radius:28px;box-shadow:var(--qf-shadow)}.qf-app-card{padding:clamp(18px,3vw,26px);overflow:hidden;position:relative}.qf-app-card:before{content:"";position:absolute;inset:auto -20% -40% -20%;height:240px;background:radial-gradient(circle,rgba(216,181,91,.16),transparent 65%);pointer-events:none}.qf-app-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;position:relative;z-index:1}.qf-app-header h2{color:var(--qf-green);font-size:clamp(24px,4.5vw,30px);font-weight:950;letter-spacing:-.04em;margin:0 0 4px}[data-qf-theme="dark"] .qf-app-header h2{color:var(--qf-gold2)}.qf-app-header p{margin:0;color:var(--qf-muted);line-height:1.6;font-weight:700}.qf-live-dot{white-space:nowrap;border:1px solid #cfe7dd;background:#eef8f3;color:#063b35;border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px}.qf-live-dot i{display:inline-block;width:8px;height:8px;background:#1fb56f;border-radius:50%;margin-right:6px;box-shadow:0 0 0 5px rgba(31,181,111,.12)}
.qf-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0;position:relative;z-index:1}.qf-status-card{border:1px solid var(--qf-line);background:linear-gradient(180deg,rgba(15,81,73,.05),rgba(216,181,91,.04));border-radius:16px;padding:12px;min-height:86px;min-width:0}.qf-status-card span{display:block;color:var(--qf-muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}.qf-status-card strong{display:block;color:var(--qf-ink);font-size:14px;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
.qf-compass-wrap{display:flex;justify-content:center;margin:24px auto;position:relative;z-index:1;width:100%;max-width:100%;overflow:visible}.qf-compass{position:relative;width:min(340px,84vw);height:min(340px,84vw);max-width:100%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0,#f9fbfb 58%,#eef5f2 100%);border:clamp(6px,2vw,9px) solid var(--qf-green);box-shadow:inset 0 0 20px rgba(0,0,0,.08),0 12px 36px rgba(0,0,0,.13);flex:0 0 auto}.qf-compass-marks{position:absolute;inset:10px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#063b35 0deg 1deg,transparent 1deg 15deg,#063b35 15deg 16.5deg,transparent 16.5deg 30deg);opacity:.17}.qf-dir{position:absolute;font-weight:950;font-size:clamp(14px,4vw,18px);color:var(--qf-green);z-index:4}.qf-n{top:9px;left:50%;transform:translateX(-50%);color:#c43b2f}.qf-e{right:12px;top:50%;transform:translateY(-50%)}.qf-s{bottom:9px;left:50%;transform:translateX(-50%)}.qf-w{left:12px;top:50%;transform:translateY(-50%)}.qf-deg{position:absolute;color:#40645f;font-weight:800;font-size:clamp(10px,3vw,13px);z-index:3}.qf-d30{right:25%;top:12%}.qf-d60{right:10%;top:29%}.qf-d120{right:11%;bottom:29%}.qf-d150{right:27%;bottom:12%}.qf-d210{left:27%;bottom:12%}.qf-d240{left:11%;bottom:29%}.qf-d300{left:10%;top:29%}.qf-d330{left:25%;top:12%}
.qf-kaaba-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(72px,22vw,92px);height:clamp(72px,22vw,92px);border-radius:50%;background:#fff;border:4px solid #edf6f2;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.12);z-index:10}.qf-kaaba-center img{width:clamp(38px,13vw,54px);height:clamp(38px,13vw,54px)}.qf-kaaba-center span{font-size:10px;font-weight:900;color:var(--qf-green);line-height:1}.qf-needle-wrapper{position:absolute;inset:0;transform:rotate(calc(var(--qibla-angle,0deg) - var(--device-heading,0deg)));will-change:transform;z-index:5;transition:transform .18s linear}.qf-needle{position:absolute;left:50%;top:14px;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:calc(min(340px,84vw) / 2 - 24px) solid var(--qf-gold);transform:translateX(-50%);filter:drop-shadow(0 5px 8px rgba(0,0,0,.18))}.qf-needle:after{content:"";position:absolute;top:calc(min(340px,84vw) / 2 - 25px);left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:44px solid rgba(6,59,53,.38)}.qf-tip-dot{position:absolute;left:50%;top:9px;width:14px;height:14px;border-radius:50%;background:#28e27f;box-shadow:0 0 18px rgba(40,226,127,.8);transform:translateX(-50%)}.qf-pivot{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--qf-green);left:50%;top:50%;transform:translate(-50%,-50%);z-index:13;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.qf-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;position:relative;z-index:1}.qf-primary,.qf-secondary{width:100%;border:0;padding:12px 14px;font-weight:900;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;text-align:center}.qf-primary{background:var(--qf-green);color:#fff}.qf-secondary{background:rgba(15,81,73,.08);color:var(--qf-green);border:1px solid var(--qf-line)}[data-qf-theme="dark"] .qf-primary{background:var(--qf-gold);color:#051513}[data-qf-theme="dark"] .qf-secondary{background:rgba(255,255,255,.08);color:#fff}.qf-readout{background:rgba(15,81,73,.05);border:1px solid var(--qf-line);padding:13px;border-radius:14px;font-size:14px;text-align:center;margin:16px 0 10px;position:relative;z-index:1;line-height:1.55}.qf-readout.qf-aligned{background:#d1e7dd;color:#0f5132;border-color:#badbcc;font-weight:900}.qf-instruction{font-size:12px;text-align:center;color:var(--qf-muted);line-height:1.65;margin:0;position:relative;z-index:1;font-weight:700}.qf-side-card{padding:22px;margin-bottom:18px}.qf-side-icon{width:44px;height:44px;border-radius:14px;background:#eef8f3;color:var(--qf-green);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}[data-qf-theme="dark"] .qf-side-icon{background:rgba(216,181,91,.14);color:var(--qf-gold2)}.qf-side-card h3{font-size:20px;font-weight:950;color:var(--qf-green);margin:0 0 8px}[data-qf-theme="dark"] .qf-side-card h3{color:var(--qf-gold2)}.qf-side-card p{margin:0;color:var(--qf-muted);line-height:1.75;font-weight:650}
.qf-calibration-overlay{position:fixed;inset:0;background:rgba(5,21,19,.86);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}.qf-calibration-box{background:var(--qf-card);color:var(--qf-ink);width:100%;max-width:380px;border-radius:28px;padding:26px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.4);border:1px solid var(--qf-line)}.qf-calibration-box h3{font-size:22px;font-weight:950;margin:0 0 10px;color:var(--qf-green)}[data-qf-theme="dark"] .qf-calibration-box h3{color:var(--qf-gold2)}.qf-calibration-box p{font-size:14px;color:var(--qf-muted);line-height:1.6;margin:0 0 20px}.qf-eight{width:160px;height:80px;margin:10px auto 24px;display:block}.qf-eight-path{fill:none;stroke:var(--qf-line);stroke-width:4;stroke-linecap:round}.qf-moving-phone{fill:var(--qf-gold);animation:qfFigure8 3s linear infinite;offset-path:path("M 50,50 C 20,20 20,80 50,50 C 80,20 170,20 140,50 C 110,80 80,80 50,50 Z")}@keyframes qfFigure8{0%{offset-distance:0%}100%{offset-distance:100%}}.qf-close-calibration{background:var(--qf-green);color:#fff;border:0;padding:11px 22px;border-radius:12px;font-size:14px;font-weight:900;width:100%;margin-top:2px}[data-qf-theme="dark"] .qf-close-calibration{background:var(--qf-gold);color:#051513}.prayer-btn{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:1045;width:62px;height:62px;cursor:pointer;filter:drop-shadow(0 10px 20px rgba(0,0,0,.28))}.prayer-btn img{width:100%;height:100%;object-fit:contain;display:block}
@media(min-width:576px){.qf-status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:991px){.qf-hero{min-height:auto;padding:58px 0 52px;text-align:center}.qf-hero-actions{justify-content:center}.qf-main{padding:28px 0}.qf-app-header{display:block;text-align:center}.qf-live-dot{display:inline-flex;margin-top:12px}.qf-actions{grid-template-columns:1fr}.qf-side-card{text-align:left}.qf-page .row{--bs-gutter-x:0}.qf-page .container-xl{overflow:hidden}}
@media(max-width:575.98px){.qf-page .container-xl{padding-left:14px;padding-right:14px}.qf-title{font-size:38px}.qf-ayah{font-size:15px}.qf-subtitle{font-size:15px}.qf-btn-gold,.qf-btn-glass{width:auto;max-width:100%;padding:11px 18px}.qf-status-grid{gap:9px}.qf-status-card{padding:10px;min-height:78px}.qf-status-card strong{font-size:13px}.qf-compass{width:min(318px,88vw);height:min(318px,88vw)}.qf-deg{display:none}.qf-app-card{border-radius:24px;padding:18px}.qf-compass-wrap{margin:20px auto}.prayer-btn{width:56px;height:56px;right:12px;bottom:14px}.qf-main .col-lg-8,.qf-main .col-lg-4{padding-left:0;padding-right:0}}
@media(max-width:380px){.qf-compass{width:292px;height:292px}.qf-kaaba-center{width:70px;height:70px}.qf-kaaba-center img{width:40px;height:40px}.qf-primary,.qf-secondary{font-size:14px}.qf-title{font-size:34px}.qf-status-card span{font-size:10px}.qf-status-card strong{font-size:12px}}