:root {
    /* Premium Color Palette */
    --primary: #FFFFFF;
    --primary-alt: #A3D9C9;
    --accent-gold: #D4AF37;
    --accent-gold-light: rgba(212, 175, 55, 0.15);

    /* Background Gradient */
    --bg-base: #1E3E34;
    --bg-gradient: radial-gradient(circle at 50% 0%, #2E594A 0%, #1E3E34 60%, #132720 100%);

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-white: #FFFFFF;
    --text-secondary: #E0E0E0;

    /* Glass UI */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --card-bg: rgba(255, 255, 255, 0.03);

    /* Typography */
    --font-heading: 'Helvetica Neue', 'Inter', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Transitions */
    --transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: all 0.2s ease;
}

/* ============================================
   GLOBAL LAYOUT OVERRIDES (CRITICAL)
   ============================================ */
@media (min-width: 768px) {
    .feature-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
        gap: 4rem !important;
    }

    .feature-row.reverse {
        flex-direction: row-reverse !important;
    }
}

.side-features-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
    width: 100% !important;
}

.side-feature-card {
    color: #FFFFFF !important;
}

.testimonial-author h4,
.side-feature-card p,
.side-feature-card h4 {
    color: #FFFFFF !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-body);
    background: var(--bg-gradient);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Swiss Minimal Pattern - Subtle Grid */
.geometric-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0.03;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 5%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-store-icons {
    display: flex;
    gap: 0.8rem;
}

.nav-store-link {
    color: var(--text-primary);
    opacity: 0.9;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 32px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    padding: 0 4px;
}

.nav-store-link:hover {
    opacity: 1;
    transform: translateY(-2px);
    background: transparent;
}

/* Logo - Handwritten Script */
.logo {
    font-family: 'Kaushan Script', cursive;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: normal;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
    z-index: 20;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0.6rem 1.2rem;
    border-radius: 99px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lang-btn:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.lang-menu {
    position: absolute;
    top: 120%;
    right: 0;
    background: rgba(30, 62, 52, 0.98);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lang-dropdown.active .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    background: none;
    border: none;
    padding: 0.8rem 1rem;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #FFFFFF;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--primary-alt);
}


/* ============================================
   HERO SECTION - Revised Layout
   ============================================ */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 7% 4rem;
    /* Reduced top padding from 6rem to 3.5rem to lift content */
    max-width: 1700px;
    /* Increased from 1350px for a "Fuller" look */
    margin: 0 auto;
    min-height: 90vh;
    position: relative;
    overflow: visible;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    width: 100%;
    align-items: center;
}

.hero-text-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* More space between text and buttons */
    z-index: 2;
    align-items: center;
    /* Center on mobile */
    text-align: center;
}

.hero-cta-group {
    display: flex;
    flex-direction: row;
    /* Side-by-side buttons */
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .hero-content {
        grid-template-columns: 1.1fr 0.9fr;
        /* Slightly more balanced spread */
        gap: 5rem;
        /* More space between text and phone */
    }

    .hero-text-container {
        align-items: flex-start;
        text-align: left;
    }

    .hero-cta-group {
        justify-content: flex-start;
    }

    .hero-visual {
        margin-left: auto;
        /* Push to right edge of grid cell */
        transform: translateY(-130px) translateX(30px);
        /* Move Further Up and Right */
    }
}

h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    /* Reduced size */
    line-height: 1.1;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.2rem;
    /* Added small gap between title and description */
}

.hero-text p {
    color: var(--text-secondary);
    font-size: 1.4rem;
    /* Bigger text */
    max-width: 650px;
    font-weight: 300;
    line-height: 1.6;
    opacity: 0.95;
}

/* ============================================
   PREMIUM STORE BADGES - Official Style
   ============================================ */
.store-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.store-badge {
    display: flex;
    align-items: center;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 8px 16px;
    /* Specific padding */
    text-decoration: none;
    transition: var(--transition);
    min-width: 160px;
}

/* ============================================
   FEATURE BADGES (Button Style Titles)
   ============================================ */
.feature-title-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.8rem 2rem;
    border-radius: 99px;
    /* Pill shape */
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--accent-gold);
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ============================================
   PHONE MOCKUP REFINEMENTS
   ============================================ */
.screen-content {
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    /* App-like subtle gradient */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 38px !important;
    overflow: hidden !important;
    padding: 15px;
    /* Prevent flush content */
}

/* Specific overrides for Nav Bar to span full width despite padding */
.mock-nav {
    margin: auto -15px -15px;
    /* Negative margin to pull back to edges */
    padding: 15px 25px 30px;
    width: calc(100% + 30px);
}

.status-bar {
    margin: -5px -5px 10px;
    /* Adjust for padding */
    padding: 0 10px;
}

/* Word of the Day Card */
.word-day-card {
    background: #eff7f2 !important;
    border-left: 4px solid #34584a !important;
    border-radius: 14px;
    padding: 1px 12px;
    margin: auto 14px;
    /* Center perfectly in available space */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    opacity: 0.95;
    text-align: left;
}

.w-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-gold);
    margin-bottom: 4px;
}

.w-text {
    font-size: 0.9rem;
    font-style: italic;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.4;
}

.w-source {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    text-align: right;
}

/* Community Screen Refinements */
.community-header {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    margin-bottom: 10px;
}

.post-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

.post-amen {
    font-size: 0.75rem;
    color: #fff;
    background: rgba(255, 64, 129, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mock Nav Icons */
.mock-nav {
    margin-top: auto;
    /* Push to bottom */
    display: flex;
    justify-content: space-around;
    padding: 15px 10px 25px;
    /* Extra padding for bottom home bar */
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-item {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.2rem;
    transition: 0.3s;
}

.nav-item.active {
    color: var(--accent-gold);
    transform: translateY(-2px);
}

.nav-item i {
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3));
}

/* High Fidelity Text Styling */
.mock-input-field label {
    font-family: var(--font-body);
    font-weight: 500;
}



.store-badge {
    display: flex;
    align-items: center;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0;
    text-decoration: none;
    transition: var(--transition);
    overflow: hidden;
    min-width: 180px;
    height: 56px;
}

.store-badge:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

.store-badge:active {
    transform: translateY(-2px) scale(1.01);
}

.badge-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    height: 100%;
}

.apple-logo {
    width: 28px;
    height: 28px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.play-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.badge-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.badge-subtitle {
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.3px;
    font-family: var(--font-body);
}

.google-play .badge-subtitle {
    font-size: 0.6rem;
    letter-spacing: 1px;
}

/* CTA Section Store Badges */
.cta-badges {
    margin-top: 2.5rem;
    justify-content: center !important;
}

/* Hero Visual (Mockup) */
.hero-visual {
    position: relative;
    width: 320px;
    height: 640px;
}

.hero-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 90%;
    background: radial-gradient(circle, rgba(163, 217, 201, 0.12) 0%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    animation: pulseGlow 8s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

/* Phone Frame - Realistic iPhone 15 Pro Max */
.phone-wrapper {
    position: relative;
    width: 340px;
    height: 680px;
    margin: 0 auto;
    perspective: 1000px;
    will-change: transform;
}

/* End Base Wrapper */

.phone-frame {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 48px;
    border: 4px solid #2a2a2a;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease;
}

.phone-wrapper:hover .phone-frame {
    transform: translateY(-10px) rotateX(2deg);
}

.dynamic-island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 24px;
    background: #000;
    border-radius: 20px;
    z-index: 10;
}

/* ============================================
   HIGH-FIDELITY PHONE MOCKUPS
   ============================================ */

/* Screen Content - General Refinements */
/* Real App UI Content Container */
.app-ui-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 62px;
    /* Pad for the absolutely positioned nav bar (height ~60-62px) */
    position: relative;
    box-sizing: border-box;
}

.screen-content {
    width: 100%;
    height: 100%;
    background: #F4F9F6;
    /* Default Light Theme from Screenshot 1 */
    color: #1B3A32;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
}

/* Mock Status Bar */
.status-bar {
    padding: 16px 24px 0;
    /* More inside as requested */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.9;
    z-index: 20;
    pointer-events: none;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.status-right i {
    font-size: 10px;
}

/* Mock Bottom Nav */
.mock-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 5px;
}

.nav-item {
    font-size: 1.2rem;
    opacity: 0.5;
}

.nav-item.active {
    opacity: 1;
    background: #E8F3EF;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

/* Hero Mock (Home - Screenshot 0) */
.hero-screen {
    background: #F4F9F6;
    padding: 1rem;
}

.hero-screen .mock-header {
    text-align: left;
    margin-bottom: 2rem;
}

.hero-screen .mock-date {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1B3A32;
}

.hero-screen .mock-location {
    font-size: 0.7rem;
    color: #5E8B7E;
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-timer-circle {
    width: 200px;
    /* Reduced from 220px to save space */
    height: 200px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    position: relative;
}

.timer-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7A9F94;
}

.timer-value {
    font-size: 2.2rem;
    font-weight: 300;
    color: #1B3A32;
}

.timer-badge {
    background: #D1E2DB;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 700;
    margin-top: 5px;
}

.prayer-grid-mock {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 1rem;
}

.p-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 10px;
    text-align: center;
    border: 1px solid #E8F3EF;
}

.p-card.active {
    background: #3D5A4F;
    color: #FFFFFF;
}

.p-card span:first-child {
    display: block;
    font-size: 0.6rem;
    opacity: 0.7;
}

.p-card span:last-child {
    font-size: 0.9rem;
    font-weight: 700;
}

/* Dream Mock (Screenshot 1) */
.dream-screen {
    background: linear-gradient(180deg, #1A1A35 0%, #0F0F1A 100%);
    color: #FFFFFF;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.dream-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

.dream-mock-header {
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.dream-moon-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.15rem auto 0.4rem;
    font-size: 1.2rem;
    color: #F1C40F;
}

.dream-mock-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0px;
    letter-spacing: 0.5px;
}

.dream-mock-subtitle-new {
    font-size: 0.65rem;
    opacity: 0.6;
    line-height: 1.2;
    max-width: 90%;
    margin: 0 auto 0.4rem;
}

.dream-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.8rem;
    margin-bottom: 0.4rem;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}

.card-label {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.mock-input-group {
    margin-bottom: 0.4rem;
    flex: 1;
}

.mock-input-group label {
    display: block;
    font-size: 0.55rem;
    opacity: 0.5;
    margin-bottom: 0.2rem;
}

.mock-input-field {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.9);
}

.mock-input-field.mini {
    padding: 0.35rem 0.5rem;
}

.mock-row {
    display: flex;
    gap: 6px;
}

.dream-text-card {
    min-height: auto;
}

.mock-textarea-field {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    min-height: 45px;
}

.mock-textarea-field p {
    font-size: 0.7rem;
    opacity: 0.4;
    line-height: 1.3;
}

.dream-action-btn {
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.6rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-top: 0.1rem;
    margin-bottom: 0.4rem;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

.dream-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.dream-screen .status-bar {
    margin-bottom: 1rem;
}

/* Mock Input Field refinements used in some mocks */
.mock-input-field-old {
    padding: 12px;
    margin-bottom: 1rem;
    text-align: left;
}

.mock-input-field-old label {
    font-size: 0.65rem;
    opacity: 0.5;
    display: block;
}

.mock-input-field-old span {
    font-size: 0.85rem;
}

/* Dhikr Mock (Conscious Dhikr - Ultra Compact Fit) */
.dhikr-screen {
    background: #0B241E;
    color: #FFFFFF;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.dhikr-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.4rem;
    padding-bottom: 65px;
    /* Account for 60px navbar + margin */
    overflow: hidden;
    height: calc(100% - 40px);
    /* Account for status bar */
}

/* TOP SECTION - Zikirmatik */
.dhikr-top-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.zikirmatik-device {
    width: 85px;
    height: 100px;
    background: #1A1A1A;
    border-radius: 18px;
    border: 2px solid #2A2A2A;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}

.device-screen {
    background: #B8C9C3;
    width: 85%;
    height: 24px;
    border-radius: 4px;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
}

.device-label {
    font-size: 0.35rem;
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
}

.device-count {
    font-size: 0.75rem;
    color: #000;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: 1px;
}

.device-main-btn {
    width: 32px;
    height: 32px;
    background: #2D6A4F;
    border-radius: 50%;
    margin-top: 5px;
    border: 2px solid #1B4332;
    box-shadow: 0 2px 0 #1B4332;
}

.device-small-btn {
    width: 8px;
    height: 8px;
    background: #444;
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.dhikr-mock-header {
    text-align: center;
    margin-top: 0.15rem;
    margin-bottom: 0;
}

.dhikr-mock-title {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0;
}

.dhikr-mock-subtitle {
    font-size: 0.45rem;
    opacity: 0.6;
    margin: 0;
}

/* MIDDLE SECTION */
.dhikr-middle-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: -0.1rem;
}

.dhikr-or-divider {
    text-align: center;
    position: relative;
    margin: 0.02rem 0;
    padding: 0 10%;
}

.dhikr-or-divider span {
    font-size: 0.4rem;
    opacity: 0.35;
    font-weight: 700;
    letter-spacing: 1px;
}

.dhikr-or-divider::before,
.dhikr-or-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.dhikr-or-divider::before {
    left: 5%;
}

.dhikr-or-divider::after {
    right: 5%;
}

.dhikr-main-section {
    text-align: center;
    margin-bottom: 0;
    margin-top: -0.08rem;
}

.dhikr-main-title {
    font-size: 0.6rem;
    font-weight: 400;
    font-family: var(--font-heading);
    margin-bottom: 0;
}

.dhikr-main-desc {
    font-size: 0.32rem;
    opacity: 0.5;
    line-height: 1.1;
    max-width: 98%;
    margin: 0 auto;
}

/* FORM CARD - Matching Dream Screen Style */
.dhikr-form-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.55rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: -0.26rem;
}

.dhikr-form-card .mock-input-group {
    margin-bottom: 0.18rem;
}

.dhikr-form-card .mock-input-group label {
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.7;
    margin-bottom: 0.15rem;
    display: block;
}

.dhikr-form-card .mock-input-field {
    padding: 0.45rem 0.6rem;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.dhikr-form-card .mock-input-field.mini {
    padding: 0.4rem 0.5rem;
}

.dhikr-form-card .mock-row {
    display: flex;
    gap: 6px;
}

.dhikr-form-card .mock-textarea-field {
    min-height: 45px;
    padding: 0.4rem;
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.dhikr-form-card .mock-textarea-field p {
    font-size: 0.6rem;
    line-height: 1.3;
    opacity: 0.65;
}

/* BOTTOM SECTION */
.dhikr-bottom-section {
    flex-shrink: 0;
    padding: 0.12rem 0;
}

.dhikr-action-btn {
    width: 100%;
    background: #E9D8A6;
    color: #0B241E;
    border: none;
    border-radius: 8px;
    padding: 0.5rem;
    font-weight: 800;
    font-size: 0.65rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(233, 216, 166, 0.15);
}

.dhikr-mock-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.dhikr-mock-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.dhikr-mock-subtitle {
    font-size: 0.75rem;
    opacity: 0.6;
}

.dhikr-or-divider {
    text-align: center;
    position: relative;
    margin-bottom: 1.5rem;
}

.dhikr-or-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 40%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.dhikr-or-divider::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 40%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.dhikr-or-divider span {
    font-size: 0.7rem;
    opacity: 0.4;
    font-weight: 700;
}

.dhikr-main-section {
    text-align: center;
    margin-bottom: 1.5rem;
}

.dhikr-main-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.dhikr-main-desc {
    font-size: 0.8rem;
    opacity: 0.7;
    line-height: 1.5;
    max-width: 90%;
    margin: 0 auto;
}

.dhikr-form-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dhikr-intent-area {
    min-height: 80px;
}

/* Removed duplicate .dhikr-action-btn - now using the compact version above */

/* Fix for previous stray lines */
.zikir-progress-mock {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.device-btn {
    width: 70px;
    height: 70px;
    background: #4CAF50;
    border-radius: 50%;
    margin: 0 auto;
    border: 4px solid #388E3C;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Quran Mock (Screenshot 3) */
.quran-screen {
    background: #F4F9F6;
    padding: 1rem;
}

.juz-item {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #E8F3EF;
}

.juz-num {
    width: 36px;
    height: 36px;
    background: #E8F3EF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #3D5A4F;
}

.juz-text {
    text-align: left;
}

.juz-text span {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
}

.juz-text small {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Community Mock (Screenshot 4) */
.community-screen {
    background: #F4F9F6;
    padding: 1rem;
}

.community-post {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    text-align: left;
    border: 1px solid #E8F3EF;
}

.post-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: #E8F3EF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.user-meta span {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
}

.user-meta small {
    font-size: 0.6rem;
    opacity: 0.5;
}

.post-content {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 12px;
    color: #444;
}

.post-amen {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #3D5A4F;
    background: #E8F3EF;
    padding: 6px 12px;
    border-radius: 99px;
    width: fit-content;

    .community-screen .mock-nav {
        background: #FFFFFF;
    }

    .quran-header-mock {
        font-family: var(--font-heading);
        font-size: 1.2rem;
        margin-bottom: 2rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .arabic-text-mock {
        font-family: 'Amiri', serif;
        font-size: 1.8rem;
        line-height: 2;
        margin-bottom: 3rem;
        color: #1B3A32;
        direction: rtl;
    }

    .audio-bar-mock {
        width: 90%;
        height: 50px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 25px;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        gap: 1rem;
    }

    .play-btn-mock {
        color: var(--primary-alt);
        font-size: 1.2rem;
    }

    .waveform-mock {
        flex: 1;
        font-family: monospace;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 2px;
        overflow: hidden;
        white-space: nowrap;
    }

    /* ============================================
   FEATURES FLOW SECTION
   ============================================ */
    .features-flow {
        display: flex;
        flex-direction: column;
    }

    .feature-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4rem;
        padding: 6rem 5%;
        max-width: 1200px;
        margin: 0 auto;
        min-height: 70vh;
        justify-content: center;
    }

    @media (min-width: 768px) {
        .feature-row {
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-between !important;
            align-items: center !important;
            text-align: left !important;
            gap: 4rem !important;
        }

        .feature-row.reverse {
            flex-direction: row-reverse;
        }

        .feature-content {
            max-width: 65% !important;
            text-align: left;
        }

        .feature-content h3 {
            font-size: 2.8rem;
        }
    }

    .feature-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: inherit;
    }

    .feature-content h3 {
        font-family: var(--font-heading);
        font-size: 2.2rem;
        color: var(--primary);
        line-height: 1.2;
    }

    .feature-content p {
        color: var(--text-secondary);
        font-size: 1.15rem;
        line-height: 1.8;
        font-weight: 300;
        opacity: 0.95;
    }

    .feature-visual-container {
        width: 100%;
        max-width: 400px;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    /* ============================================
   SOCIAL PROOF SECTION
   ============================================ */
    .social-proof {
        padding: 6rem 5%;
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .proof-header {
        margin-bottom: 4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .proof-header h2 {
        font-family: var(--font-heading);
        font-size: 3rem;
        color: var(--primary);
    }

    .rating-badge {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: rgba(255, 255, 255, 0.05);
        padding: 0.75rem 1.75rem;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .stars {
        color: #F1C40F;
        letter-spacing: 3px;
        font-size: 1.1rem;
    }

    .rating-text {
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--text-primary);
    }

    /* Achievement Badges */
    .achievement-badges {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
        margin-bottom: 5rem;
    }

    .badge-item {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
        padding: 1.5rem 2.5rem;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        transition: var(--transition);
    }

    .badge-item:hover {
        transform: translateY(-5px);
        border-color: rgba(212, 175, 55, 0.3);
    }

    .badge-icon {
        font-size: 2.5rem;
        background: var(--accent-gold-light);
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .badge-text-info {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .badge-text-info strong {
        font-size: 1.15rem;
        color: var(--text-primary);
    }

    .badge-text-info span {
        font-size: 0.9rem;
        color: var(--text-secondary);
        opacity: 0.8;
    }

    /* ============================================
   TESTIMONIALS - Premium Cards
   ============================================ */
    .testimonials-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
    }

    .testimonial-card {
        background: rgba(255, 255, 255, 0.9) !important;
        /* Lighter background for black border contrast */
        backdrop-filter: blur(20px) !important;
        border: 2px solid #000000 !important;
        /* Black border as requested */
        border-radius: 32px;
        /* Pill/Button shape */
        padding: 2rem;
        text-align: left;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        min-width: 320px;
        color: #000 !important;
    }

    /* Vibrant Color Themes for Testimonials */
    .testimonial-card .testimonial-text,
    .testimonial-card .author-name,
    .testimonial-card .author-location,
    .testimonial-card .testimonial-stars {
        color: #000000 !important;
    }



    .testimonial-card::before {
        content: '"';
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        font-size: 5rem;
        font-family: Georgia, serif;
        color: rgba(212, 175, 55, 0.15);
        line-height: 1;
    }

    .testimonial-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.4) !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    }

    .testimonial-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #2E594A, #1B3A32);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    .avatar::before {
        content: '';
        width: 20px;
        height: 20px;
        background: #fff;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") no-repeat center;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") no-repeat center;
        opacity: 0.8;
    }

    .avatar.gradient-2 {
        background: linear-gradient(135deg, #4A8B7C, #2E594A);
    }

    .avatar.gradient-3 {
        background: linear-gradient(135deg, #D4AF37, #B8962E);
    }

    /* Avatar Initials hidden/removed */
    .avatar-initials {
        display: none;
    }

    .verified-badge {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 20px;
        height: 20px;
        background: linear-gradient(135deg, #34A853, #2E8B57);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--bg-base);
    }

    .verified-badge svg {
        color: #fff;
    }

    .author-info {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .author-name {
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--text-primary);
    }

    .author-location {
        font-size: 0.85rem;
        color: var(--primary-alt);
        opacity: 0.9;
    }

    .testimonial-stars {
        color: #F1C40F;
        font-size: 0.9rem;
        letter-spacing: 2px;
    }

    .testimonial-text {
        font-size: 1.1rem;
        line-height: 1.7;
        color: #FFFFFF;
        margin-bottom: 2rem;
        position: relative;
        z-index: 1;
    }

    .testimonial-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .review-date {
        font-size: 0.8rem;
        color: var(--text-secondary);
        opacity: 0.7;
    }

    .review-platform {
        font-size: 0.75rem;
        color: var(--primary-alt);
        background: rgba(163, 217, 201, 0.15);
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-weight: 600;
    }

    /* ============================================
   FINAL CTA SECTION
   ============================================ */
    .final-cta {
        padding: 8rem 5%;
        background: linear-gradient(180deg, transparent, rgba(27, 58, 50, 0.5));
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .final-cta h2 {
        font-family: var(--font-heading);
        font-size: 3rem;
        color: var(--primary);
    }

    .final-cta p {
        font-size: 1.25rem;
        color: var(--text-secondary);
        max-width: 600px;
        margin-bottom: 0.5rem;
    }

    /* ============================================
   FOOTER
   ============================================ */
    .footer {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: #1B3A32;
        padding: 5rem 5% 3rem;
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
    }

    .footer-logo {
        font-family: 'Kaushan Script', cursive;
        font-weight: 400;
        font-size: 2.5rem;
        color: var(--primary);
    }

    .footer-links {
        display: flex;
        gap: 2.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-links a {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        font-size: 1rem;
        transition: var(--transition);
        padding: 0.5rem 1rem;
        border-radius: 8px;
    }

    .footer-links a:hover {
        color: var(--primary);
        background: rgba(255, 255, 255, 0.05);
    }

    .copyright {
        margin-top: 2rem;
        color: var(--text-secondary);
        font-size: 0.9rem;
        opacity: 0.6;
    }

    /* ============================================
   PRIVACY MODAL - Enhanced
   ============================================ */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(12px);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .modal.show {
        opacity: 1;
    }

    .modal-content {
        background: linear-gradient(160deg, rgba(30, 62, 52, 0.98), rgba(27, 58, 50, 0.98));
        margin: 3% auto;
        padding: 3rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
        width: 90%;
        max-width: 850px;
        border-radius: 28px;
        box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
        position: relative;
        transform: translateY(20px);
        transition: transform 0.3s ease;
        color: #fff;
    }

    .modal.show .modal-content {
        transform: translateY(0);
    }

    .modal-content h2 {
        font-family: var(--font-heading);
        font-size: 2rem;
        margin-bottom: 0.5rem;
        color: var(--primary);
    }

    .close-modal {
        color: rgba(255, 255, 255, 0.6);
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        font-size: 28px;
        font-weight: 300;
        cursor: pointer;
        transition: var(--transition-fast);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
    }

    .close-modal:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.15);
    }

    .scrollable-content {
        max-height: 70vh;
        overflow-y: auto;
        margin-top: 1.5rem;
        padding-right: 1rem;
        line-height: 1.9;
        color: rgba(255, 255, 255, 0.9);
    }

    .scrollable-content h3 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: var(--primary-alt);
        font-family: var(--font-heading);
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .scrollable-content h3::before {
        content: '';
        width: 4px;
        height: 20px;
        background: var(--primary-alt);
        border-radius: 2px;
    }

    .scrollable-content p {
        margin-bottom: 1rem;
        color: rgba(255, 255, 255, 0.85);
    }

    .scrollable-content ul {
        margin-left: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .scrollable-content li {
        margin-bottom: 0.6rem;
        color: rgba(255, 255, 255, 0.85);
    }

    .scrollable-content strong {
        color: var(--primary);
    }

    /* Custom Scrollbar for Modal */
    .scrollable-content::-webkit-scrollbar {
        width: 8px;
    }

    .scrollable-content::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .scrollable-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    .scrollable-content::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    /* ============================================
   RESPONSIVE DESIGN
   ============================================ */
    @media (max-width: 768px) {
        .navbar {
            padding: 1.5rem 5%;
        }

        .logo {
            font-size: 2rem;
        }

        .hero {
            padding: 2rem 5% 4rem;
            min-height: auto;
        }

        h1 {
            font-size: 2.4rem;
        }

        .hero-text p {
            font-size: 1.1rem;
        }

        .store-badges {
            flex-direction: column;
            align-items: center;
        }

        .store-badge {
            min-width: 200px;
        }

        .hero-visual {
            width: 280px;
            height: 560px;
        }

        .phone-wrapper {
            width: 280px;
            height: 570px;
        }

        .feature-row {
            padding: 4rem 5%;
            min-height: auto;
            gap: 3rem;
        }

        .feature-content h3 {
            font-size: 1.8rem;
        }

        .proof-header h2 {
            font-size: 2.2rem;
        }

        .achievement-badges {
            flex-direction: column;
            align-items: center;
        }

        .badge-item {
            width: 100%;
            max-width: 300px;
        }

        .testimonials-container {
            grid-template-columns: 1fr;
        }

        .testimonial-card {
            padding: 1.5rem;
        }

        .final-cta {
            padding: 5rem 5%;
        }

        .final-cta h2 {
            font-size: 2.2rem;
        }

        .modal-content {
            margin: 5% auto;
            padding: 2rem;
        }
    }

    @media (max-width: 480px) {
        .nav-store-icons {
            display: none;
        }

        .store-badge {
            width: 100%;
            max-width: 200px;
        }

        .badge-title {
            font-size: 1.2rem;
        }

        .testimonial-header {
            flex-wrap: wrap;
        }

        .testimonial-stars {
            width: 100%;
            margin-top: 0.5rem;
            color: #000 !important;
        }
    }





    .side-feature-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 1.5rem;
        transition: all 0.25s ease;
        cursor: pointer;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.2rem;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        text-align: left;
    }

    .side-feature-card:hover {
        transform: translateY(-5px);
        border-color: rgba(241, 196, 15, 0.5);
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 15px 40px rgba(241, 196, 15, 0.15);
    }

    .s-feat-icon {
        font-size: 1.8rem;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(230, 126, 34, 0.2));
        border-radius: 14px;
        flex-shrink: 0;
    }

    .s-feat-content h4 {
        font-size: 1rem;
        color: #ffffff;
        margin-bottom: 0.3rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .s-feat-content p {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.4;
        margin: 0;
    }

    .side-feature-card h4 {
        font-size: 1.1rem;
        color: var(--primary);
        /* Keep dark text from primary color */
        margin-bottom: 0.3rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .side-feature-card p {
        font-size: 0.9rem;
        color: #666;
        /* Slightly softer text */
        line-height: 1.4;
        opacity: 0.9;
        margin: 0;
    }

    /* Highlighted Testimonial */
    .testimonial-card.highlighted {
        border-color: var(--accent-gold);
        background: linear-gradient(145deg, rgba(212, 175, 55, 0.08), rgba(255, 255, 255, 0.02));
        box-shadow: 0 15px 40px rgba(212, 175, 55, 0.1);
    }

    @media (min-width: 992px) {
        .testimonial-card.highlighted {
            grid-column: span 2;
        }
    }

    .testimonial-card.highlighted::after {
        content: 'TOP REVIEW';
        position: absolute;
        top: 15px;
        left: -25px;
        background: var(--accent-gold);
        color: #000;
        font-size: 0.65rem;
        font-weight: 800;
        padding: 5px 30px;
        transform: rotate(-45deg);
        letter-spacing: 1px;
    }

    /* Official Store Badge Refinements */
    .store-badge {
        background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .store-badge:hover {
        background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
        border-color: rgba(255, 255, 255, 0.4);
    }
}

/* ============================================
   NEW: QUOTE CARD (Screenshot Match)
   ============================================ */
.quote-card-styled {
    background-color: #f0fdf8;
    /* Light mint/white */
    border-left: 5px solid #2d5c48;
    /* Dark green accent */
    border-radius: 16px;
    padding: 20px 24px;
    margin: 15px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.quote-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.quote-header i {
    color: #2d5c48;
    font-size: 1.2rem;
}

.q-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #2d5c48;
    font-family: var(--font-heading);
}

.q-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-weight: 500;
}

.q-source {
    font-size: 0.75rem;
    color: #2d5c48;
    text-transform: uppercase;
    font-weight: 700;
    text-align: right;
    letter-spacing: 0.5px;
}


/* ============================================
   NEW: FEATURE TEXT CARD (Button Style)
   ============================================ */
.feature-text-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 1rem 4rem;
    /* Reduced vertical padding as requested */
    transition: transform 0.3s ease, border-color 0.3s ease;
    max-width: 720px !important;
    /* Broader width */
    width: 100% !important;
}

/* Feature Colors */
.ftc-dream {
    border-left: 6px solid #9b59b6;
    /* Purple for Dream */
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.05) 0%, transparent 100%);
}

.ftc-dhikr {
    border-left: 6px solid #2ecc71;
    /* Green for Dhikr */
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.05) 0%, transparent 100%);
}

.ftc-quran {
    border-left: 6px solid #f1c40f;
    /* Gold for Quran */
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.05) 0%, transparent 100%);
}

.ftc-comm {
    border-left: 6px solid #3498db;
    /* Blue for Community */
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.05) 0%, transparent 100%);
}

/* Alignment for Reverse Rows (Phone Left, Text Right) */
.feature-text-card.align-right {
    margin-left: auto !important;
    margin-right: 8% !important;
    /* Adjusted for wider card */
}

/* Ensure container aligns correctly */
.feature-row.reverse .feature-content {
    display: flex;
    justify-content: flex-end;
    /* Align card to right */
}

.feature-row:not(.reverse) .feature-text-card {
    margin-right: auto !important;
    margin-left: 8% !important;
    /* Adjusted for wider card */
}

.feature-text-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.feature-text-card h3 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    /* Reduced scale for a more elegant look */
    font-weight: 700;
    margin-bottom: 0.8rem;
    /* Reduced margin-bottom */
    color: #fff;
    line-height: 1.1;
}

/* Override gradients if we want solid colors for headers based on theme, or keep as is. Keeping simple. */

.feature-text-card p {
    font-size: 1.1rem;
    /* Reduced size for better proportions */
    line-height: 1.6;
    color: var(--text-secondary);
    opacity: 0.95;
    max-width: 800px;
}


/* ============================================
   UPDATED NAV BAR (Screenshot Match)
   ============================================ */
.mock-nav {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 25px 20px !important;
    /* Reduced padding to fit button and text */
    background: rgba(22, 22, 22, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-item {
    color: #6b7280;
    /* Grey inactive */
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    /* Soft square */
    transition: all 0.3s ease;
}

.nav-item.active {
    color: var(--primary);
    /* Green icon */
    background-color: rgba(45, 92, 72, 0.15);
    /* Soft green background */
}

/* Hero Screen Specific Overrides */
.hero-screen .mock-nav {
    background: #FFFFFF !important;
    border-top: 1px solid #f0f0f0;
}


/* Hero Screen Specific Overrides */
.hero-screen .mock-nav {
    background: #FFFFFF !important;
    border-top: 1px solid #f0f0f0;
}

/* ============================================
   MOCKUP VISUAL CONTAINER (Sizing & Padding)
   ============================================ */
.feature-visual-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    /* More padding so phone doesn't touch edge */
}

/* Standardized phone-wrapper used from base definition */

/* Header with Side Actions */
.app-header-row {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between !important;
    width: 100%;
    margin-bottom: 2px;
    /* Pull content up */
}

.header-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-actions-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-inline-start: auto;
}

/* Mockup Action Icons Styles */
.action-circle {
    width: 38px;
    height: 38px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.action-circle:nth-child(1) i {
    color: #22c55e;
}

/* Compass - Green */
.action-circle:nth-child(2) i {
    color: #facc15;
}

/* TV - Yellow */
.action-circle:nth-child(3) i {
    color: #f97316;
}

/* Bag - Orange */
.action-circle:nth-child(4) i {
    color: #ef4444;
}

/* Handshake - Red */

.action-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #F4F9F6;
    /* Matches screen background in Screenshot 1 */
}

/* ============================================
   SOCIAL PROOF SECTION (Professional Wrapper)
   ============================================ */
.social-proof-section {
    padding: 100px 20px;
    position: relative;
}

.social-proof-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.badge-pill {
    display: inline-block;
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
}

.social-proof-section h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.social-proof-section p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* ============================================
   INFINITE MARQUEE (Testimonials)
   ============================================ */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: marquee-scroll 150s linear infinite;
    will-change: transform;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-track .testimonial-card {
    min-width: 320px;
    max-width: 320px;
    /* Ensure fixed width for smooth scroll */
    will-change: transform;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.3333%);
    }
}

/* ============================================
   PREMIUM FOOTER (Start Your Journey)
   ============================================ */
.main-footer {
    background: linear-gradient(180deg, #0e2a22 0%, #05100d 100%);
    color: #fff;
    padding-top: 6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-cta-container {
    text-align: center;
    padding: 0 5% 4rem;
    max-width: 800px;
    margin: 0 auto;
}

.footer-headline {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff 0%, #a3d9c9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.footer-subheadline {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.footer-store-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Larger Store Badge for Footer */
.store-badge-large {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.08);
    /* Glass */
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.8rem 1.8rem;
    border-radius: 16px;
    min-width: 200px;
    transition: var(--transition);
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.store-badge-large i {
    font-size: 2rem;
    color: #fff;
}

.store-badge-large .badge-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.store-badge-large .badge-subtitle {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.store-badge-large .badge-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.store-badge-large:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    opacity: 1;
}

.modal-content {
    background: var(--card-bg);
    margin: 5% auto;
    padding: 3rem;
    border-radius: 24px;
    width: 90%;
    max-width: 700px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal.show .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    right: 25px;
    top: 20px;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.close-modal:hover {
    color: var(--primary);
}

.modal-title {
    margin-bottom: 2rem;
    color: var(--text-primary);
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    text-align: center;
}

.privacy-scroll-area {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 15px;
    text-align: left;
}

.privacy-scroll-area h4 {
    color: var(--primary);
    margin: 1.5rem 0 0.5rem 0;
    font-family: 'Playfair Display', serif;
}

.privacy-scroll-area p,
.privacy-scroll-area li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.privacy-scroll-area ul {
    padding-left: 20px;
    margin-bottom: 1rem;
}

[data-lang="ar"] .privacy-scroll-area {
    text-align: right;
    padding-right: 0;
    padding-left: 15px;
}

.modal-body {
    line-height: 1.8;
    font-size: 1.05rem;
}

.modal-body h3 {
    margin: 1.5rem 0 0.5rem;
    color: var(--primary);
}

.modal-body ol,
.modal-body ul {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.modal-body li {
    margin-bottom: 0.8rem;
}

.modal-body a {
    color: var(--primary);
    text-decoration: none;
}

.modal-body a:hover {
    text-decoration: underline;
}

/* Footer Bottom Row */
.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-brand {
    flex: 1;
}

.footer-brand .footer-logo-text {
    font-family: 'Kaushan Script', cursive;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-links {
    display: flex;
    gap: 4rem;
    justify-content: center;
    flex: 2;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
    padding-bottom: 2px;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: var(--transition);
}

.footer-links a:hover {
    color: #fff;
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    text-align: right;
    flex: 1;
}

@media (max-width: 992px) {
    .footer-bottom-row {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .footer-brand,
    .footer-links,
    .footer-copyright {
        flex: none;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .footer-headline {
        font-size: 2.2rem;
    }

    .footer-bottom-row {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .store-badge-large {
        width: 100%;
        max-width: 300px;
    }
}

/* ============================================
   MOCKUP REPLICATION: DREAM
   ============================================ */
.dream-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.dream-mock-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.back-btn,
.profile-btn {
    width: 32px;
    height: 32px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #333;
}

.dream-input-card {
    background: #fff;
    border-radius: 20px;
    margin: 10px 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.dream-input-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    font-weight: 600;
    color: #333;
}

.dream-date {
    color: #888;
    font-weight: 400;
    font-size: 0.9rem;
}

.dream-textarea-mock {
    height: 100px;
    color: #aaa;
    font-size: 0.95rem;
}

.dream-btn-mock {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
}

/* ============================================
   MOCKUP REPLICATION: DHIKR
   ============================================ */
.dhikr-screen {
    background: linear-gradient(135deg, #183D3D 0%, #040D12 100%) !important;
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* Old Dhikr styles removed or kept for legacy if needed */
.dc-screen-old {
    background: #254441;
    border: 4px solid #436662;
    border-radius: 12px;
    width: 140px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.dc-label {
    font-size: 8px;
    opacity: 0.7;
    letter-spacing: 1px;
}

.dc-count {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.dc-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #436662;
    border: 4px solid #5C807B;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.dhikr-content-scroll {
    background: #fff;
    border-radius: 30px 30px 0 0;
    flex: 1;
    margin-top: 20px;
    padding: 25px 20px;
    color: #333;
    overflow: hidden;
}

.dhikr-title-mock {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #000;
}

.dhikr-subtitle-mock {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.dhikr-divider {
    text-align: center;
    margin: 15px 0;
    position: relative;
}

.dhikr-divider span {
    background: #fff;
    padding: 0 10px;
    color: #ccc;
    font-size: 0.8rem;
}

.dhikr-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #eee;
    z-index: -1;
}

.dhikr-form-mock label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 5px;
    margin-top: 15px;
}

.df-input,
.df-textarea,
.df-pill {
    background: #f9f9f9;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #333;
    border: 1px solid #eee;
}

.df-row {
    display: flex;
    gap: 10px;
}

.df-col {
    flex: 1;
}

.dhikr-create-btn {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 14px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 20px;
}

/* ============================================
   MOCKUP REPLICATION: QURAN
   ============================================ */
.quran-header-enhanced {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}

.back-circle {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #333;
}

.quran-title-group h3 {
    font-size: 1.1rem;
    margin: 0;
    color: #000;
}

.quran-title-group span {
    font-size: 0.8rem;
    color: #888;
}

.quran-play-btn-large {
    width: 50px;
    height: 50px;
    background: #000;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 20px;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quran-cards-list {
    padding: 0 15px;
}

.quran-verse-card {
    background: #fff;
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #f5f5f5;
}

.qvc-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.verse-num-badge {
    width: 24px;
    height: 24px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #555;
    font-weight: bold;
}

.qvc-arabic {
    font-family: 'Amiri', serif;
    font-size: 1.4rem;
    text-align: right;
    margin-bottom: 8px;
    color: #000;
}

.qvc-trans {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
}

/* ============================================
   MOCKUP REPLICATION: COMMUNITY
   ============================================ */
/* Community Redesign (Screenshot 3) */
.community-screen {
    background: #E8F3EF !important;
    height: 128% !important;
    /* Compansate for 0.78 scale */
    width: 128% !important;
    /* Compansate for 0.78 scale */
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    transform: scale(0.78);
    /* Very aggressive to ensure 100% fit without scrolling */
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
}

/* Specific button in community header to match screenshot */
.community-header .back-circle {
    width: 42px;
    height: 42px;
    background: #eef7f4;
    border: none;
    color: #1a4a3a;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.community-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    /* Further reduced */
    background: transparent;
    z-index: 10;
}

.comm-page-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a4a3a;
}

.header-right-btns {
    display: flex;
    gap: 12px;
}

.category-filters {
    display: flex;
    gap: 6px;
    padding: 0 1rem 0.5rem;
    /* Tighter */
    overflow-x: auto;
    scrollbar-width: none;
}

.category-filters::-webkit-scrollbar {
    display: none;
}

.cat-pill {
    padding: 6px 16px;
    border-radius: 20px;
    background: #fff;
    color: #666;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.cat-pill.active {
    background: #2D5C48;
    color: #fff;
    border-color: #2D5C48;
}

.action-circle-btn {
    width: 42px;
    height: 42px;
    background: #111 !important;
    /* Dark as per screenshot */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-circle-btn .fa-bell {
    color: #FFD700;
    /* Yellow bell */
}

.btn-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #e63946;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 12px;
    border: 2px solid #fff;
    font-weight: 800;
}

.community-feed-scroll {
    padding: 0 1rem 0.5rem;
    flex: 1;
    overflow: hidden !important;
    /* Disable scroll totally */
}

.community-feed-scroll::-webkit-scrollbar {
    display: none;
}

.feed-card {
    background: #fff;
    border-radius: 18px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    text-align: left;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.card-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.user-avatar-mock {
    width: 30px;
    /* Smaller */
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
}

.user-avatar-mock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info-text {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #000;
}

.user-meta {
    font-size: 0.7rem;
    opacity: 0.5;
}

.card-type-tag {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.card-type-tag.hatim {
    background: #E9F6F0;
    /* Softest mint */
    color: #2D5C48;
}

.card-type-tag.prayer {
    background: #EBF4FC;
    /* Softest blue */
    color: #4A90E2;
}

.card-type-tag.zikir {
    background: #FEF6E7;
    /* Softest orange/gold */
    color: #F39C12;
}

.main-label-row {
    font-size: 0.65rem;
    font-weight: 800;
    color: #2D5C48;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-headline {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
    color: #1a4a3a;
    line-height: 1.1;
}

.card-desc {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-left .share-btn {
    font-size: 0.85rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.status-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.status-pill.green {
    background: #E8FAF1;
    color: #00B058;
}

.report-btn {
    font-size: 0.85rem;
    color: #D69E2E;
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.prayer-pill {
    background: #F7F7F7;
    color: #666;
}

.zikir-pill {
    background: #F7F7F7;
    color: #666;
}

.count.highlight {
    color: #2D5C48;
}

.chevron-nav {
    font-size: 0.8rem;
    color: #aaa;
}

.progress-bar-container {
    margin: 1rem 0;
}

.pb-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    opacity: 0.6;
}

.pb-track {
    height: 8px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.pb-fill {
    height: 100%;
    background: #2D5C48;
    border-radius: 10px;
}

.community-fab {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #2D5C48;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 20px rgba(45, 92, 72, 0.3);
    z-index: 20;
}

/* ============================================
   RESPONSIVE HERO ADJUSTMENTS
   ============================================ */
@media (max-width: 992px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }

    .hero-text-container {
        max-width: 100%;
        align-items: center;
    }

    .hero-text h1 {
        font-size: 3rem;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-visual {
        justify-content: center;
        margin-top: 1rem;
    }

    .phone-wrapper {
        transform: scale(0.9);
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 2.2rem;
    }

    .phone-wrapper {
        transform: scale(0.75);
        margin-bottom: -50px;
        /* Pull up overlay */
    }
}

/* 1. Responsiveness & Scale */
@media (min-width: 992px) {
    .phone-wrapper {
        transform: scale(1.0);
        /* Back to full size or slightly larger if fits */
        transform-origin: center top;
        margin-top: 40px;
    }

    .hero-visual {
        transform: translateY(-30px) translateX(20px) !important;
        /* Lowered position as requested */
    }
}

/* ============================================
   SYSTEM UPDATE: HERO PHONE REFINEMENTS
   ============================================ */

@media (min-width: 992px) {
    .phone-wrapper {
        transform: scale(1.0);
        transform-origin: center top;
        margin-top: 20px;
    }

    .hero-visual {
        transform: translateY(-60px) translateX(10px) !important;
        /* Slightly nudged up and left as requested */
    }
}

/* 2. Prayer Times as Buttons */
.prayer-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0 10px;
    margin-bottom: 0px;
    /* Reset to 0 to ensure equidistant spacing via card margins */
}

.p-grid-card {
    background: #f5f5f5;
    /* Light Gray button bg */
    border: 1px solid #eee;
    border-radius: 10px;
    /* Slimmer corners */
    padding: 4px 2px;
    /* Further reduced from 6px 4px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.p-grid-card:hover {
    background: #eee;
}

.p-grid-card.active-prayer {
    background: #34584a !important;
    /* Brand Green instead of Black */
    border-color: #34584a;
}

.p-grid-card.active-prayer .pg-name,
.p-grid-card.active-prayer .pg-time {
    color: #fff !important;
    /* White text on black active bg */
}

.pg-name {
    font-size: 0.52rem;
    /* Reduced from 0.58rem */
    font-weight: 700;
    color: #888;
    margin-bottom: 0px;
}

.pg-time {
    font-size: 0.72rem;
    /* Reduced from 0.78rem */
    font-weight: 800;
    color: #111;
}

/* 3. Word of the Day (Screenshot Match) */

.w-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1px;
    /* Shorter: reduced from 2px */
    /* Reduced to decrease height */
}

.w-header i {
    color: #34584a;
    font-size: 0.75rem;
}

.w-label {
    color: #34584a !important;
    font-weight: 900;
    font-size: 0.5rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.95;
}

.w-text {
    font-family: 'Amiri', serif;
    font-size: 0.82rem;
    line-height: 1.3;
    color: #1a1a1a;
    font-weight: 500;
    margin-bottom: 1px;
    text-align: left;
}

.w-source {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    color: #34584a;
    display: block;
    text-align: right;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.9;
}


/* 4. Bottom Nav - Perfectly Flush (No Gaps) */
.mock-nav {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 0 38px 38px !important;
    /* Match internal radius */
    padding: 12px 20px 25px !important;
    background: #fff !important;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    z-index: 10;
}

.nav-item {
    color: #616161;
    font-size: 1.3rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.nav-item.active {
    color: #2d5c48 !important;
    background: #eff7f2;
}

.timer-container-large {
    display: flex;
    justify-content: center;
    margin: -40px 0 -10px;
    position: relative;
    z-index: 1;
}

.timer-circle {
    position: relative;
    width: 200px;
    /* Reduced from 220px */
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-content-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.t-label {
    font-size: 0.62rem;
    /* Reduced from 0.7rem */
    text-transform: uppercase;
    color: #666 !important;
    letter-spacing: 1px;
}

.wod-card::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 120px;
    color: rgba(76, 175, 80, 0.1);
    font-family: serif;
}

.wod-label {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.wod-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.wod-source {
    color: var(--accent-gold);
    font-size: 1.1rem;
    font-weight: 500;
}

.t-time {
    font-size: 1.9rem;
    /* Reduced from 2.1rem */
    /* Reduced per feedback */
    font-weight: 600;
    color: #000 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    margin: -2px 0;
    /* Reduced margin */
}

.t-next-pill {
    background: #e0eae4 !important;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #34584a !important;
    margin-top: 10px;
}

/* 6. Hero Screen Background */
.hero-screen {
    background: #eff7f2 !important;
    /* Light Mint */
}

/* Ensure progress ring is visible on white background */
.progress-ring__circle {
    stroke: #eee !important;
}

/* Dynamic Location Fixes for Community */
.cc-loc {
    color: #666 !important;
}

.cc-name {
    color: #000 !important;
}

.cc-text {
    color: #333 !important;
}

.comm-title {
    color: #000 !important;
}

.community-top-bar {
    background: #fff !important;
    border-bottom: 1px solid #eee;
}

.comm-tabs {
    background: #f9f9f9 !important;
}

.comm-tab {
    color: #666 !important;
}

.comm-tab.active {
    color: #000 !important;
    border-bottom-color: #000 !important;
}

/* ============================================
   RTL LAYOUT FIXES (Arabic Support)
   ============================================ */

[dir="rtl"] .word-day-card {
    border-left: none !important;
    border-right: 4px solid #34584a !important;
    text-align: right;
}

[dir="rtl"] .w-text {
    text-align: right;
}

[dir="rtl"] .w-source {
    text-align: left;
}

[dir="rtl"] .hero-visual {
    transform: translateY(-60px) translateX(-10px) !important;
    /* Mirror the horizontal shift */
}

/* Ensure prayer grid order is RTL */
[dir="rtl"] .prayer-grid-compact {
    direction: rtl;
}

/* Align header text to right in RTL */
[dir="rtl"] .header-text-col {
    text-align: right;
}

/* Fix header action column position in RTL */
[dir="rtl"] .header-actions-col {
    margin-inline-start: 0;
    margin-inline-end: auto;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Ensure icons/text in header-row flip correctly */
[dir="rtl"] .app-header-row {
    flex-direction: row;
    /* Flex auto-mirrors with dir="rtl" */
}

[dir="rtl"] .action-badge {
    right: auto;
    left: -6px;
}

/* ============================================
   SECONDARY FEATURES (SIDE SCAN) - MOVED TO END
   ============================================ */
.secondary-features {
    padding: 8rem 5%;
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.secondary-features .section-header {
    text-align: center;
    margin: 0 auto 3rem auto;
    background: rgba(233, 216, 166, 0.75);
    /* More prominent yelllow */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 3rem;
    /* Reduced height */
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(233, 216, 166, 0.1);
    position: relative;
    border: 1px solid rgba(233, 216, 166, 0.3);
    width: fit-content;
    /* More compact */
    max-width: 90%;
    backdrop-filter: blur(10px);
}

.secondary-features h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    /* Slightly larger */
    color: #fff;
    /* White text */
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle depth for white text */
}



.secondary-features p {
    font-size: 1.1rem;
    color: #fff;
    /* Changed to white */
    opacity: 0.95;
    /* Increased opacity for clarity */
    font-weight: 500;
    max-width: 600px;
}

.side-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* Force 3 columns */
    justify-content: center !important;
    gap: 2rem !important;
    margin-top: 4rem !important;
    width: 100% !important;
    max-width: 1200px;
    /* Ensure it stays within container */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 992px) {
    .side-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 columns on tablet */
    }

    .secondary-features .section-header {
        width: 90%;
        padding: 2rem;
    }
}

@media (max-width: 600px) {
    .side-features-grid {
        grid-template-columns: 1fr !important;
        /* 1 column on mobile */
    }
}

.side-feature-card {
    /* Removed flex properties, using grid */
    min-height: 160px;
    /* Consistent height */
    /* Button Base Styles */
    background: rgba(255, 255, 255, 0.05);
    /* Default fallback */
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    /* Slightly rounder */
    padding: 2rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy pop */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* Vertical stack for better button look? User said 'ucu yanyana', maybe icons left? let's stick to row/col based on content fit */
    align-items: flex-start;
    /* Left align text */
    justify-content: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.side-feature-card .s-feat-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.side-feature-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* 1. Hatim (Green) */
.side-feature-card:nth-child(1) {
    background: rgba(46, 204, 113, 0.1);
    border-color: #2ecc71;
}

.side-feature-card:nth-child(1):hover {
    background: rgba(46, 204, 113, 0.2);
    box-shadow: 0 15px 30px rgba(46, 204, 113, 0.2);
}

/* 2. Qibla (Blue) */
.side-feature-card:nth-child(2) {
    background: rgba(52, 152, 219, 0.1);
    border-color: #3498db;
}

.side-feature-card:nth-child(2):hover {
    background: rgba(52, 152, 219, 0.2);
    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.2);
}

/* 3. Kaaba (Black/Gold) */
.side-feature-card:nth-child(3) {
    background: rgba(20, 20, 20, 0.4);
    border-color: #D4AF37;
}

.side-feature-card:nth-child(3):hover {
    background: rgba(20, 20, 20, 0.6);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2);
}

/* 4. Shop (Purple) */
.side-feature-card:nth-child(4) {
    background: rgba(155, 89, 182, 0.1);
    border-color: #9b59b6;
}

.side-feature-card:nth-child(4):hover {
    background: rgba(155, 89, 182, 0.2);
    box-shadow: 0 15px 30px rgba(155, 89, 182, 0.2);
}

/* 5. Mosque (Teal) */
.side-feature-card:nth-child(5) {
    background: rgba(26, 188, 156, 0.1);
    border-color: #1abc9c;
}

.side-feature-card:nth-child(5):hover {
    background: rgba(26, 188, 156, 0.2);
    box-shadow: 0 15px 30px rgba(26, 188, 156, 0.2);
}

/* 6. Zakat (Gold) */
.side-feature-card:nth-child(6) {
    background: rgba(243, 156, 18, 0.1);
    border-color: #f39c12;
}

.side-feature-card:nth-child(6):hover {
    background: rgba(243, 156, 18, 0.2);
    box-shadow: 0 15px 30px rgba(243, 156, 18, 0.2);
}