/* ===================================================
   Salat on Time — Landing Page
   Design: Peaceful Minimalism
   =================================================== */

:root {
    --bg:        #060B14;
    --bg-subtle: #0C1322;
    --surface:   rgba(255,255,255,0.03);
    --border:    rgba(255,255,255,0.06);
    --white:     #ffffff;
    --white-90:  rgba(255,255,255,0.90);
    --white-60:  rgba(255,255,255,0.55);
    --white-40:  rgba(255,255,255,0.35);
    --teal:      #2dd4bf;
    --teal-rgb:  45,212,191;
    --gold:      #fbbf24;
    --gold-rgb:  251,191,36;
    --font:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --arabic:    'Amiri', serif;
    --ease:      cubic-bezier(0.16, 1, 0.3, 1);
    --max-w:     1120px;
}

/* === Reset === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body { font-family:var(--font); background:var(--bg); color:var(--white); line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* === Utilities === */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.label {
    font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
    color:var(--teal); margin-bottom:16px;
}
.section-head { text-align:center; margin-bottom:80px; }
.section-head h2 {
    font-size:clamp(2rem,5vw,3.2rem); font-weight:700; letter-spacing:-.03em;
    line-height:1.15; color:var(--white);
}
.section-sub {
    color:var(--white-60); font-size:1.05rem; max-width:520px; margin:16px auto 0;
    line-height:1.7;
}

/* === Button === */
.btn {
    display:inline-flex; align-items:center; gap:10px;
    font-weight:600; font-size:.95rem; border-radius:14px;
    transition: all .3s var(--ease);
}
.btn-primary {
    background:var(--white); color:var(--bg); padding:16px 32px;
    box-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.btn-lg { padding:20px 44px; font-size:1.05rem; border-radius:16px; }

/* === Phone Device === */
.phone-device {
    position:relative;
    background:none;
    border-radius:32px; padding:0;
    border:none;
}
.phone-screen {
    border-radius:32px; overflow:hidden; background:#000;
    position:relative;
    border: 1px solid rgba(255,255,255,.35);
}
.phone-screen img { width:100%; display:block; }

/* Phone sizes */
.phone-device       { width:320px; }
.phone-device.phone-sm { width:280px; }
.phone-device.phone-md { width:260px; }

/* === Navigation === */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:20px 0;
    transition: all .4s var(--ease);
}
.nav::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
    opacity:1; transition:opacity .4s ease; pointer-events:none; z-index:-1;
}
.nav.scrolled::after { opacity:0; }
.nav.scrolled {
    padding:14px 0;
}
.nav-inner {
    display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
    display:flex; align-items:center; gap:12px;
    color:var(--teal); font-weight:700; font-size:1rem;
}
.nav-logo-img {
    border-radius:10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-logo:hover .nav-logo-img {
    transform:scale(1.08);
    box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.18);
}
.nav-logo span { color:var(--white); }
.nav-links {
    display:flex; gap:8px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:6px;
}
.nav-links a {
    font-size:.85rem; font-weight:500; color:var(--white-60);
    padding:8px 18px; border-radius:10px;
    transition:all .2s ease;
}
.nav-links a:hover {
    color:var(--white);
    background:rgba(255,255,255,.08);
}
.nav-download {
    display:inline-flex; align-items:center; gap:8px;
    font-size:.85rem; font-weight:600; color:var(--white);
    padding:10px 22px; border-radius:12px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
    border:1px solid rgba(255,255,255,.08);
    transition: all .3s var(--ease);
}
.nav-download:hover {
    background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14);
}

/* === Language Switcher === */
.lang-switcher {
    position:relative;
}
.lang-btn {
    display:inline-flex; align-items:center; gap:6px;
    font-size:.85rem; font-weight:500; color:var(--white-60);
    padding:10px 22px; border-radius:12px;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
    border:1px solid rgba(255,255,255,.08);
    transition:all .2s ease; cursor:pointer;
}
.lang-btn:hover {
    color:var(--white); background:rgba(255,255,255,.08);
}
.lang-icon { opacity:.6; }
.lang-arrow { opacity:.4; transition:transform .2s ease; }
.lang-switcher.open .lang-arrow { transform:rotate(180deg); }
.lang-current { letter-spacing:.05em; }
.lang-dropdown {
    position:absolute; bottom:calc(100% + 8px); right:0;
    background:rgba(12,19,34,.95);
    backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:4px;
    min-width:140px;
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:all .2s ease;
    z-index:200;
    box-shadow:0 -12px 40px rgba(0,0,0,.5);
}
.lang-switcher.open .lang-dropdown {
    opacity:1; visibility:visible; transform:translateY(0);
}
.lang-option {
    display:block; width:100%;
    padding:10px 14px; border-radius:8px;
    font-size:.85rem; font-weight:500; color:var(--white-60);
    text-align:left; background:none; border:none; cursor:pointer;
    transition:all .15s ease; font-family:var(--font);
}
.lang-option:hover {
    color:var(--white); background:rgba(255,255,255,.08);
}
.lang-option.active {
    color:var(--teal); background:rgba(var(--teal-rgb),.08);
}

.nav-mobile {
    display:none; width:40px; height:40px;
    flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.nav-mobile span {
    display:block; width:20px; height:1.5px; background:var(--white);
    border-radius:2px; transition:all .3s ease;
}
.nav-mobile.active span:first-child { transform:rotate(45deg) translate(3px,3px); }
.nav-mobile.active span:last-child  { transform:rotate(-45deg) translate(3px,-3px); }

/* === Hero === */
.hero {
    min-height:100vh;
    display:flex; align-items:center;
    padding:140px 0 100px;
    position:relative; overflow:hidden; overflow-x:clip;
}
.hero::before {
    content:''; position:absolute;
    top:-200px; left:50%; transform:translateX(-50%);
    width:900px; height:900px;
    background:radial-gradient(circle, rgba(var(--teal-rgb),.08) 0%, transparent 60%);
    pointer-events:none;
}
.hero-inner {
    display:flex; align-items:flex-start; gap:80px;
}
.hero-phone {
    margin-top:0;
}
.hero-text { flex:1; max-width:520px; }
.hero-eyebrow {
    font-size:.8rem; font-weight:500; color:var(--teal);
    letter-spacing:.05em; margin-bottom:20px;
    display:flex; align-items:center; gap:8px;
}
.hero-eyebrow::before {
    content:''; width:6px; height:6px; border-radius:50%;
    background:var(--teal);
    box-shadow: 0 0 8px rgba(var(--teal-rgb),.6);
}
.hero h1 {
    font-size:clamp(2.8rem,5.5vw,4.2rem);
    font-weight:800; line-height:1.08; letter-spacing:-.04em;
    margin-bottom:24px;
}
.hero-sub {
    font-size:1.1rem; color:var(--white-60); line-height:1.75;
    margin-bottom:40px;
}
.hero-phone {
    flex:1; display:flex; justify-content:center;
    position:relative;
}
.hero-glow {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:600px; height:600px;
    background:radial-gradient(circle, rgba(var(--teal-rgb),.18) 0%, rgba(var(--teal-rgb),.06) 40%, transparent 65%);
    pointer-events:none; z-index:-1;
    animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe {
    0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(1); }
    50%     { opacity:1;  transform:translate(-50%,-50%) scale(1.08); }
}

/* Floating social icons */
.floating-icons {
    position:absolute; inset:0; z-index:3; pointer-events:none;
}
.floating-icon {
    position:absolute;
    width:56px; height:56px;
    opacity:0;
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.floating-icon img:not(.blocked-lock) {
    width:100%; height:100%; object-fit:cover;
    border-radius:14px;
    filter:grayscale(.3) brightness(.7);
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.blocked-lock {
    position:absolute; top:-6px; right:-6px;
    width:16px; height:16px; border-radius:50%;
    background:#ef4444;
    padding:5px;
    box-sizing:content-box;
    object-fit:contain;
    box-shadow: 0 2px 8px rgba(239,68,68,.5);
    z-index:2;
}

body.loaded .floating-icon { opacity:.75; }
body.loaded .floating-icon:hover { opacity:1; }
body.loaded .floating-icon:hover img:not(.blocked-lock) { filter:none; }

.icon-instagram {
    top:5%; left:-10%;
    animation: float-1 5s ease-in-out infinite;
}
.icon-tiktok {
    top:12%; right:-12%;
    animation: float-2 6s ease-in-out infinite;
}
.icon-x {
    bottom:28%; left:-16%;
    animation: float-3 5.5s ease-in-out infinite;
}
.icon-facebook {
    bottom:10%; right:-8%;
    animation: float-4 6.5s ease-in-out infinite;
}
.icon-snapchat {
    top:42%; right:-18%;
    animation: float-5 5.8s ease-in-out infinite;
}

@keyframes float-1 {
    0%,100% { transform:translateY(0) rotate(-3deg); }
    50%     { transform:translateY(-14px) rotate(2deg); }
}
@keyframes float-2 {
    0%,100% { transform:translateY(0) rotate(4deg); }
    50%     { transform:translateY(-18px) rotate(-2deg); }
}
@keyframes float-3 {
    0%,100% { transform:translateY(0) rotate(2deg); }
    50%     { transform:translateY(-12px) rotate(-4deg); }
}
@keyframes float-4 {
    0%,100% { transform:translateY(0) rotate(-2deg); }
    50%     { transform:translateY(-16px) rotate(3deg); }
}
@keyframes float-5 {
    0%,100% { transform:translateY(0) rotate(3deg); }
    50%     { transform:translateY(-10px) rotate(-3deg); }
}

/* Hero load animation */
.hero-phone { }
.hero-text {
    opacity:0; transform:translateY(30px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero-phone .phone-device {
    opacity:0; transform:translateY(50px) scale(.95);
    transition: opacity 1s var(--ease) .15s, transform 1s var(--ease) .15s;
}
body.loaded .hero-text {
    opacity:1; transform:none;
}
body.loaded .hero-phone .phone-device {
    opacity:1; transform:none;
}

/* === Features === */
.features {
    padding:140px 0;
    position:relative;
}
.feature-row {
    display:flex; align-items:center; gap:80px;
    margin-bottom:120px;
}
.feature-row:last-child { margin-bottom:0; }
.feature-row.reverse { flex-direction:row-reverse; }
.feature-info { flex:1; }
.feature-phone { flex:1; display:flex; justify-content:center; }
.feature-num {
    font-size:.8rem; font-weight:700; color:var(--teal);
    letter-spacing:.1em; margin-bottom:16px;
    opacity:.6;
}
.feature-info h3 {
    font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700;
    letter-spacing:-.02em; margin-bottom:16px; line-height:1.2;
}
.feature-info p {
    color:var(--white-60); font-size:1.05rem; line-height:1.75;
    max-width:420px;
}

/* Reveal — scoped under .js so content stays visible if JS fails (SEO safe) */
.js .feature-row,
.js .step,
.js .journey-phones,
.js .verse-inner,
.js .download-inner {
    opacity:0; transform:translateY(32px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.feature-row.visible,
.step.visible,
.journey-phones.visible,
.verse-inner.visible,
.download-inner.visible { opacity:1; transform:none; }

/* === How it Works === */
.how {
    padding:140px 0;
    background:var(--bg-subtle);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.steps {
    display:grid; grid-template-columns:repeat(3,1fr); gap:48px;
}
.step { text-align:center; }
.step-icon {
    width:64px; height:64px; margin:0 auto 24px;
    border:1.5px solid rgba(var(--teal-rgb),.25); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--teal);
    transition:all .3s var(--ease);
}
.step-icon svg { width:26px; height:26px; }
.step:hover .step-icon {
    background:rgba(var(--teal-rgb),.1);
    border-color:rgba(var(--teal-rgb),.4);
    transform:translateY(-4px);
}
.step h4 {
    font-size:1.15rem; font-weight:600; margin-bottom:10px;
    letter-spacing:-.01em;
}
.step p { color:var(--white-60); font-size:.95rem; line-height:1.65; max-width:280px; margin:0 auto; }

/* === Journey === */
.journey { padding:140px 0; }
.journey-phones {
    display:flex; justify-content:center; align-items:center;
    gap:24px;
}
.center-phone {
    width:280px; z-index:2;
    transform:translateY(-12px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 30px 80px rgba(0,0,0,.6),
        0 80px 160px rgba(0,0,0,.4);
}
.fade-phone {
    width:240px; opacity:.5;
    transform:scale(.92);
    transition:all .4s var(--ease);
}
.fade-phone:hover { opacity:.8; transform:scale(.95); }

/* === Verse === */
.verse {
    padding:120px 0;
    background:var(--bg-subtle);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.verse-inner { text-align:center; max-width:700px; margin:0 auto; border:none; padding:0; }
.verse-arabic {
    font-family:var(--arabic); font-size:clamp(1.4rem,3vw,2rem);
    color:rgba(var(--gold-rgb),.35);
    line-height:1.6; direction:rtl;
    margin-bottom:32px;
}
.verse-english {
    font-size:clamp(1.15rem,2.5vw,1.5rem);
    font-style:italic; color:var(--white-90);
    line-height:1.7; margin-bottom:16px;
}
.verse-ref {
    font-size:.85rem; color:var(--teal); font-weight:500; font-style:normal; display:block;
}

/* === FAQ === */
.faq { padding:120px 0; }
.faq-list {
    max-width:720px; margin:0 auto;
    display:flex; flex-direction:column; gap:0;
}
.faq-item {
    border-bottom:1px solid var(--border);
}
.faq-item summary {
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 0; cursor:pointer;
    font-size:1.05rem; font-weight:600; color:var(--white);
    list-style:none; transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
    content:'+'; font-size:1.4rem; font-weight:300;
    color:var(--white-40); transition:transform .3s var(--ease), color .2s ease;
    flex-shrink:0; margin-left:16px;
}
.faq-item[open] summary::after {
    content:'\2212'; color:var(--teal);
}
.faq-item summary:hover { color:var(--teal); }
.faq-item p {
    padding:0 0 24px; margin:0;
    color:var(--white-60); font-size:.95rem; line-height:1.7;
}

/* === Download === */
.download {
    padding:160px 0;
    position:relative; text-align:center;
}
.download::before {
    content:''; position:absolute;
    top:50%; left:50%; transform:translate(-50%,-50%);
    width:700px; height:700px;
    background:radial-gradient(circle, rgba(var(--teal-rgb),.07) 0%, transparent 55%);
    pointer-events:none;
}
.download-inner { position:relative; }
.download h2 {
    font-size:clamp(2rem,5vw,3.2rem); font-weight:700;
    letter-spacing:-.03em; margin-bottom:16px;
}
.download > .download-inner > p {
    color:var(--white-60); font-size:1.1rem; margin-bottom:40px;
    line-height:1.7;
}

/* === Footer === */
.footer {
    padding:48px 0;
    border-top:1px solid var(--border);
}
.footer-inner {
    display:flex; align-items:center; justify-content:space-between;
}
.footer-brand {
    display:flex; align-items:center;
}
.footer-logo-img {
    border-radius:10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.footer-logo-img:hover {
    transform:scale(1.08);
    box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.18);
}
.footer-links { display:flex; gap:28px; }
.footer-links a {
    font-size:.85rem; color:var(--white-40);
    transition:color .2s ease;
}
.footer-links a:hover { color:var(--white); }
.footer-copy { font-size:.8rem; color:var(--white-40); }

/* =================================================
   Responsive
   ================================================= */

@media (max-width:1024px) {
    .hero-inner { gap:48px; }
    .feature-row { gap:48px; }
    .feature-row, .feature-row.reverse { flex-direction:column; text-align:center; }
    .feature-info p { margin:0 auto; }
    .phone-device.phone-sm { width:240px; }
    .journey-phones { gap:16px; }
    .center-phone { width:240px; }
    .fade-phone { width:200px; }
}

@media (max-width:1024px) {
    .floating-icon { width:48px; height:48px; }
    .floating-icon img:not(.blocked-lock) { border-radius:12px; }
    .icon-instagram { left:-4%; }
    .icon-tiktok { right:-4%; }
    .icon-x { left:-8%; }
    .icon-facebook { right:-2%; }
    .icon-snapchat { right:-8%; }
}

@media (max-width:768px) {
    .nav-links, .nav-download { display:none; }
    .nav-mobile { display:flex; }
    .nav-links.open {
        display:flex; flex-direction:column;
        position:fixed; top:72px; left:16px; right:16px;
        background:rgba(255,255,255,.04);
        backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
        padding:8px; gap:4px; border-radius:14px;
        border:1px solid rgba(255,255,255,.08);
        box-shadow:0 20px 60px rgba(0,0,0,.5);
    }
    .nav-links.open a {
        padding:14px 16px; border-radius:10px; text-align:center;
        font-size:1rem; color:var(--white-60);
    }
    .nav-links.open a:hover { background:rgba(255,255,255,.08); color:var(--white); }

    .hero { padding:100px 0 60px; min-height:auto; }
    .hero-inner { flex-direction:column; text-align:center; gap:40px; }
    .hero-text { max-width:100%; }
    .hero-sub br { display:none; }
    .hero h1 { font-size:2.2rem; }
    .hero-phone { margin-top:0; width:320px; max-width:85vw; align-items:center; margin-left:auto; margin-right:auto; }
    .phone-device { width:240px; border-radius:28px; padding:0; }
    .phone-screen { border-radius:28px; }
    .phone-device.phone-sm { width:220px; }

    .floating-icon { width:60px; height:60px; }
    .floating-icon img:not(.blocked-lock) { border-radius:14px; }
    .blocked-lock { width:16px; height:16px; top:-6px; right:-6px; }
    .icon-instagram { top:-4%; left:-6%; }
    .icon-tiktok { top:4%; right:-10%; }
    .icon-x { bottom:32%; left:-10%; }
    .icon-facebook { bottom:8%; right:-6%; }
    .icon-snapchat { top:40%; right:-14%; }

    .features { padding:100px 0; }
    .feature-row { margin-bottom:80px; }

    .steps { grid-template-columns:1fr; gap:40px; }

    .journey-phones { flex-direction:column; align-items:center; gap:20px; }
    .center-phone { width:260px; transform:none; }
    .fade-phone { width:240px; opacity:.7; transform:none; }

    .footer-inner { flex-direction:column; gap:20px; text-align:center; }
    .footer-links { gap:20px; }

    .section-head { margin-bottom:56px; }
    .section-head h2 br { display:none; }
}

@media (max-width:480px) {
    .hero h1 { font-size:1.8rem; }
    .phone-device { width:220px; }
    .phone-device.phone-sm { width:200px; }
    .center-phone { width:220px; }
    .fade-phone { width:200px; }
    .btn-primary { width:100%; justify-content:center; }
    .btn-lg { width:100%; justify-content:center; padding:18px 32px; }

    .floating-icon { width:54px; height:54px; }
    .floating-icon img:not(.blocked-lock) { border-radius:12px; }
    .blocked-lock { width:14px; height:14px; top:-5px; right:-5px; }
}

/* =================================================
   RTL Overrides (Arabic & Urdu)
   ================================================= */

[dir="rtl"] {
    font-family: 'Noto Naskh Arabic', 'Amiri', var(--font);
}
[dir="rtl"] .nav-links { direction:rtl; }
[dir="rtl"] .nav-download { direction:rtl; }
[dir="rtl"] .hero-inner { direction:rtl; }
[dir="rtl"] .hero-text { text-align:right; }
[dir="rtl"] .feature-info { text-align:right; }
[dir="rtl"] .feature-info p { margin-left:auto; margin-right:0; }
[dir="rtl"] .feature-row.reverse { flex-direction:row-reverse; }

/* FAQ summary arrow on the left side for RTL */
[dir="rtl"] .faq-item summary { direction:rtl; text-align:right; }
[dir="rtl"] .faq-item summary::after { margin-left:0; margin-right:16px; }
[dir="rtl"] .faq-item p { text-align:right; }

/* Footer */
[dir="rtl"] .footer-inner { direction:rtl; }

/* Steps */
[dir="rtl"] .step { direction:rtl; }

/* Download */
[dir="rtl"] .download { direction:rtl; }

/* Buttons */
[dir="rtl"] .btn { direction:rtl; }

/* Verse English in RTL stays centered */
[dir="rtl"] .verse-english { direction:rtl; }

/* Language dropdown text-align */
[dir="rtl"] .lang-option { text-align:right; }
[dir="rtl"] .lang-dropdown { right:0; left:auto; }

/* Journey section */
[dir="rtl"] .section-sub { direction:rtl; }

@media (max-width:1024px) {
    [dir="rtl"] .feature-row,
    [dir="rtl"] .feature-row.reverse { text-align:center; }
    [dir="rtl"] .feature-info p { margin:0 auto; }
}

@media (max-width:768px) {
    [dir="rtl"] .hero-inner { text-align:center; }
    [dir="rtl"] .hero-text { text-align:center; }
    [dir="rtl"] .feature-info { text-align:center; }
}