:root{--bg: #070a14;--bg2: #0c1120;--teal: #2dd4bf;--teal-dim: #1a8a7d;--gold: #d4a853;--text: #f1f5f9;--muted: #475569;--muted2: #64748b;--border: rgba(255,255,255,.07);--card-bg: rgba(255,255,255,.02)}[data-theme=light]{--bg: #ffffff;--bg2: #f3f4f6;--teal: #0d9488;--teal-dim: #14b8a6;--gold: #b45309;--text: #1f2937;--muted: #9ca3af;--muted2: #6b7280;--border: rgba(0,0,0,.1);--card-bg: rgba(0,0,0,.03)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:Space Mono,monospace;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:.6}#stars{position:fixed;inset:0;z-index:0;pointer-events:none}#clouds{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}[data-theme=light] #clouds{display:block}[data-theme=light] body:before{display:none}.geo-bg{position:absolute;opacity:.04;pointer-events:none}.container{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 24px}section{position:relative}.tag{display:inline-block;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal-dim);padding:4px 14px;border-radius:100px;margin-bottom:20px}.divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}.nav-brand{font-family:Cinzel,serif;font-size:14px;letter-spacing:1px;color:var(--text);text-decoration:none;white-space:nowrap}.nav-brand span{color:var(--teal)}.nav-links{display:flex;align-items:center;gap:24px}.nav-links a{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);text-decoration:none;transition:color .2s}.nav-links a:hover{color:var(--teal)}.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#070a14;font-family:Space Mono,monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;padding:8px 18px;border-radius:8px;transition:all .2s;white-space:nowrap}.nav-cta:hover{background:#5ee8d4;transform:translateY(-1px)}.nav-cta svg{width:16px;height:16px;flex-shrink:0}.theme-toggle{background:none;border:1px solid var(--border);border-radius:8px;padding:8px;cursor:pointer;color:var(--muted2);display:flex;align-items:center;justify-content:center;transition:all .2s}.theme-toggle:hover{border-color:var(--teal);color:var(--teal)}.theme-toggle svg{width:18px;height:18px}@media(max-width:600px){.nav-links{display:none}}.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.islamic-date{font-family:Cinzel,serif;font-size:14px;letter-spacing:2px;color:var(--gold);margin-bottom:12px;opacity:0;animation:fadeUp .7s .05s forwards}.hero-eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--teal);margin-bottom:16px;opacity:0;animation:fadeUp .7s .1s forwards}.hero-title{font-family:Cinzel,serif;font-size:clamp(32px,4.5vw,58px);font-weight:700;line-height:1.15;letter-spacing:1px;margin-bottom:24px;opacity:0;animation:fadeUp .7s .25s forwards}.hero-title .accent{color:var(--teal)}.hero-title .gold{color:var(--gold)}.hero-desc{font-size:13px;line-height:1.9;color:var(--muted2);margin-bottom:40px;max-width:480px;opacity:0;animation:fadeUp .7s .4s forwards}.hero-btns{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .7s .55s forwards}.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--teal);color:#070a14;font-family:Space Mono,monospace;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;padding:14px 28px;border-radius:10px;transition:all .25s}.btn-primary:hover{background:#5ee8d4;transform:translateY(-2px);box-shadow:0 12px 30px #2dd4bf40}.btn-primary svg{width:20px;height:20px}.btn-ghost{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--border);color:var(--muted2);font-family:Space Mono,monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;padding:14px 28px;border-radius:10px;transition:all .25s}.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}.hero-visual{display:flex;justify-content:center;align-items:center;opacity:0;animation:fadeIn 1s .6s forwards}.phone-frame{position:relative;width:280px;background:var(--bg2);border-radius:36px;border:1.5px solid var(--border);box-shadow:0 0 80px #2dd4bf14,0 40px 80px #0000004d;overflow:hidden;padding:20px 0 0;animation:float 5s ease-in-out infinite,glow-pulse 5s ease-in-out infinite}.phone-notch{width:80px;height:6px;background:var(--muted);border-radius:3px;margin:0 auto 20px}.chat-header{padding:12px 18px;background:var(--bg);display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.chat-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dim));display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.chat-name{font-size:11px;font-weight:700;color:var(--text);letter-spacing:.5px}.chat-status{font-size:10px;color:var(--teal);margin-top:2px}.chat-body{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:340px}.msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:11px;line-height:1.6;animation:msgPop .3s ease backwards}.msg-bot{background:var(--card-bg);border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--text);align-self:flex-start}.msg-user{background:var(--teal);border-bottom-right-radius:4px;color:#fff;align-self:flex-end}.msg-time{font-size:9px;color:var(--muted);margin-top:4px;text-align:right}.prayer-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-top:4px;align-self:flex-start;max-width:92%}.prayer-card-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:10px}.prayer-row{display:flex;justify-content:space-between;font-size:10px;padding:4px 0;border-bottom:1px solid var(--border);color:var(--muted2)}.prayer-row:last-child{border-bottom:none}.prayer-row .ptime{color:var(--text);font-weight:700}.phone-bottom{height:24px;background:var(--bg);margin-top:8px}.prayer-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-change-btn{background:transparent;border:1px solid var(--border);border-radius:6px;padding:4px;cursor:pointer;color:var(--muted2);transition:all .2s;display:flex;align-items:center;justify-content:center}.zone-change-btn:hover{border-color:var(--teal);color:var(--teal)}.zone-change-btn svg{width:14px;height:14px}.zone-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:20px;width:280px;z-index:1000;box-shadow:0 20px 60px #00000080;display:none}.zone-popup.active{display:block}.zone-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;font-weight:700;color:var(--text)}.zone-popup-close{background:transparent;border:none;color:var(--muted2);font-size:20px;cursor:pointer;line-height:1;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.zone-popup-close:hover{color:var(--text)}.zone-popup-content{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.zone-popup-content select{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-family:Space Mono,monospace;font-size:11px;cursor:pointer}.zone-popup-content select:disabled{opacity:.5;cursor:not-allowed}.zone-popup-content select option{background:var(--bg2)}.zone-popup-apply{width:100%;background:var(--teal);border:none;border-radius:8px;padding:12px;color:#070a14;font-family:Space Mono,monospace;font-weight:700;font-size:11px;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.zone-popup-apply:hover{background:#5ee8d4}.features{padding:100px 0}.section-header{text-align:center;margin-bottom:64px}.section-title{font-family:Cinzel,serif;font-size:clamp(26px,3.5vw,40px);font-weight:700;letter-spacing:1px;margin-bottom:14px}.section-sub{font-size:13px;color:var(--muted2);max-width:500px;margin:0 auto;line-height:1.8}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.feature-card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:32px 28px;transition:all .3s ease;position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:0;transition:opacity .3s}.feature-card:hover{border-color:#2dd4bf33;transform:translateY(-4px);background:#2dd4bf08}.feature-card:hover:before{opacity:1}.feature-icon{width:52px;height:52px;border-radius:14px;background:#2dd4bf14;border:1px solid rgba(45,212,191,.15);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px}.feature-title{font-family:Cinzel,serif;font-size:15px;font-weight:600;margin-bottom:10px;color:var(--text)}.feature-desc{font-size:12px;line-height:1.8;color:var(--muted2)}.commands{padding:80px 0 100px}.commands-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.commands-list{display:flex;flex-direction:column;gap:12px}.cmd-item{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:16px;transition:all .2s;cursor:default}.cmd-item:hover{border-color:#2dd4bf40;background:#2dd4bf0a}.cmd-code{font-size:12px;font-weight:700;color:var(--teal);background:#2dd4bf1a;padding:3px 10px;border-radius:6px;white-space:nowrap;flex-shrink:0}.cmd-desc{font-size:11px;color:var(--muted2);line-height:1.5}.chart-section{padding:100px 0}.chart-section .container{display:flex;flex-direction:column;align-items:center}.filter-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;width:100%;max-width:960px}.filter-group{display:flex;flex-direction:column;gap:6px}.filter-group label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.filter-group select{background:#ffffff0a;border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-family:Space Mono,monospace;font-size:12px;padding:9px 32px 9px 14px;cursor:pointer;outline:none;transition:border-color .2s;width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.filter-group select:focus{border-color:var(--teal)}.filter-group select option{background:#0f1629;color:var(--text)}.filter-group select:disabled{opacity:.4;cursor:not-allowed}.btn-submit{grid-column:1 / -1;width:100%;height:42px;border-radius:10px;border:1.5px solid var(--teal);background:#2dd4bf1a;color:var(--teal);font-family:Space Mono,monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;cursor:pointer;transition:all .2s ease}.btn-submit:hover:not(:disabled){background:#2dd4bf33}.btn-submit:disabled{opacity:.4;cursor:not-allowed}@media(min-width:600px){.filter-form{grid-template-columns:1fr 1fr 1fr auto;align-items:flex-end}.btn-submit{grid-column:auto;width:auto;padding:0 24px}}.status-bar{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px;min-height:18px;width:100%;max-width:960px}.status-bar.loading{color:#facc15}.status-bar.error{color:#f87171}.status-bar.success{color:var(--teal)}.toggles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:32px}.toggle-btn{padding:6px 16px;border-radius:100px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-size:11px;letter-spacing:1.5px;font-family:Space Mono,monospace;text-transform:uppercase;cursor:pointer;transition:all .2s ease}.toggle-btn.active{font-weight:700}.toggle-btn:hover{transform:translateY(-2px)}.chart-wrap{width:100%;max-width:960px;background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:32px 24px;height:484px;transition:height .4s cubic-bezier(.4,0,.2,1);overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.chart-zone-label{font-family:Cinzel,serif;font-size:18px;color:var(--text);letter-spacing:2px;text-align:center;margin-bottom:20px;width:100%;max-width:960px;padding:16px 24px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px}.chart-zone-label .zone{color:var(--teal);font-weight:700}.chart-zone-label .state{color:var(--gold)}.chart-zone-label .year{color:var(--muted2)}.hint{color:var(--muted);font-size:11px;margin-top:20px;letter-spacing:1px}.drift-section{width:100%;max-width:960px;background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:32px 24px;margin-top:32px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.drift-title{font-family:Cinzel,serif;font-size:16px;color:var(--text);text-align:center;margin-bottom:8px}.drift-subtitle{font-size:11px;color:var(--muted2);text-align:center;margin-bottom:24px;letter-spacing:1px}.drift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.drift-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}.drift-card .prayer-name{font-size:11px;color:var(--teal);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}.drift-card .prayer-diff{font-size:24px;font-weight:700;color:var(--text);font-family:Cinzel,serif}.drift-card .prayer-diff span{font-size:12px;color:var(--muted2);font-weight:400}.drift-card .prayer-range{font-size:10px;color:var(--muted2);margin-top:6px}@media(max-width:600px){.drift-grid{grid-template-columns:repeat(2,1fr)}}.cta-banner{padding:80px 0 100px}.cta-inner{background:linear-gradient(135deg,#2dd4bf0f,#818cf80f);border:1px solid var(--border);border-radius:28px;padding:72px 48px;text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.cta-inner:before{content:"";position:absolute;top:-120px;left:50%;transform:translate(-50%);width:400px;height:400px;background:radial-gradient(circle,rgba(45,212,191,.07) 0%,transparent 70%);pointer-events:none}.cta-title{font-family:Cinzel,serif;font-size:clamp(26px,4vw,44px);font-weight:700;margin-bottom:16px;position:relative}.cta-sub{font-size:13px;color:var(--muted2);margin-bottom:40px;line-height:1.8;position:relative}.cta-btn{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--teal);color:#070a14;font-family:Space Mono,monospace;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;padding:16px 36px;border-radius:12px;transition:all .25s}.cta-btn:hover{background:#5ee8d4;transform:translateY(-3px);box-shadow:0 16px 40px #2dd4bf4d}.cta-btn svg{width:22px;height:22px}footer{border-top:1px solid var(--border);padding:32px 24px;text-align:center;font-size:11px;color:var(--muted);letter-spacing:1px;position:relative;z-index:1}footer a{color:var(--teal);text-decoration:none}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes msgPop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 40px #2dd4bf14,0 40px 80px #00000080}50%{box-shadow:0 0 80px #2dd4bf2e,0 40px 80px #00000080}}.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}.reveal-delay-5{transition-delay:.5s}details[open] summary span{transform:rotate(45deg)}details summary::-webkit-details-marker{display:none}.mobile-prayer-bar{display:none;margin-top:32px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:left}.mobile-prayer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}.mobile-prayer-title{font-size:11px;letter-spacing:1px;color:var(--teal);text-transform:uppercase}.mobile-zone-btn{background:transparent;border:1px solid var(--border);border-radius:6px;padding:4px;cursor:pointer;color:var(--muted2);transition:all .2s;display:flex;align-items:center;justify-content:center}.mobile-zone-btn:hover{border-color:var(--teal);color:var(--teal)}.mobile-zone-btn svg{width:14px;height:14px}.mobile-prayer-times{display:flex;flex-wrap:wrap;gap:8px}.mobile-prayer-item{display:flex;align-items:center;gap:6px;font-size:11px;background:var(--bg);padding:6px 10px;border-radius:6px;border:1px solid var(--border)}.mobile-prayer-name{color:var(--muted2);text-transform:uppercase;letter-spacing:.5px}.mobile-prayer-time{color:var(--text);font-weight:700}.prayer-row.current-prayer{background:#2dd4bf14;border-radius:6px;margin:0 -6px;padding:4px 6px}.prayer-row.current-prayer .prayer-name{color:var(--teal);font-weight:700}.prayer-row.current-prayer .ptime{color:var(--teal);font-weight:700;text-shadow:0 0 8px rgba(45,212,191,.5)}.mobile-prayer-item.current-prayer{background:#2dd4bf26;border-color:var(--teal);box-shadow:0 0 12px #2dd4bf4d}.mobile-prayer-item.current-prayer .mobile-prayer-name{color:var(--teal)}.mobile-prayer-item.current-prayer .mobile-prayer-time{color:var(--teal);font-weight:700}.prayer-row.next-prayer{background:#d4a85314;border-radius:6px;margin:0 -6px;padding:4px 6px}.prayer-row.next-prayer .prayer-name{color:var(--gold);font-weight:700}.prayer-row.next-prayer .ptime{color:var(--gold);font-weight:700;text-shadow:0 0 8px rgba(212,168,83,.5)}.mobile-prayer-item.next-prayer{background:#d4a85326;border-color:var(--gold);box-shadow:0 0 12px #d4a8534d}.mobile-prayer-item.next-prayer .mobile-prayer-name{color:var(--gold)}.mobile-prayer-item.next-prayer .mobile-prayer-time{color:var(--gold);font-weight:700}@media(max-width:900px){.features-grid{grid-template-columns:1fr 1fr}}@media(max-width:700px){.hero-inner{grid-template-columns:1fr;text-align:center}.hero-desc{margin:0 auto 40px}.hero-btns{justify-content:center}.hero-visual{display:none}.mobile-prayer-bar{display:block}.features-grid,.commands-inner{grid-template-columns:1fr}.commands-copy{order:-1;text-align:center}.cta-inner{padding:48px 24px}}
