:root{
    --bg-deep:#0a1410;
    --bg-panel:#0f1e18;
    --accent:#5CF26B;
    --accent-dark:#3eaa49;
    --accent-soft:rgba(92,242,107,0.12);
    --text-main:#F4FBF6;
    --text-muted:#9FB6AA;
    --line:rgba(92,242,107,0.18);
    --font-display:'Tajawal', sans-serif;
    --font-num:'Manrope', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
    font-family:var(--font-display);
    background:#070f22;
    color:var(--text-main);
    overflow-x:hidden;
    direction:rtl;
    position:relative;
}

.companion-cards{
    background:linear-gradient(180deg, rgba(92,242,107,0.09), rgba(92,242,107,0.02)),;
}

.companion-left {
    margin: 18px 18px 0 0;
}
/* السماح للصورة تطلع من الكارد */
.companion-card {
    overflow: visible;
}

/* حاوية الصورة */
.companion-card-img-wrap {
    width: 190px;
    flex-shrink: 0;
    margin-top: -24px;
    margin-bottom: -24px;
}

/* الصورة الطولية */
.companion-card-img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    border-radius: 16px;
    transform: rotate(-4deg);
    transform-origin: center;
    display: block;
}

a.pg-link, a.pg-link:link, a.pg-link:visited  {
    color:rgb(39, 39, 39);
}

a, a:link, a:visited {
    color: inherit;
    text-decoration: none;
}

.card-glow{
    border:1px solid var(--line);border-radius:28px;
}
.dash-title {
    display: flex;        /* ← هذا يخليه block-level */
    align-items: center;
    gap: 12px;
}

.dash-title::before {
    content: '';
    width: 4px;
    height: 1.1em;       /* يتناسب مع حجم الخط تلقائياً */
    background: var(--accent);
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;      /* يمنعه من الانضغاط */
}

.dash-subtitle {
    display: flex;        /* ← هذا يخليه block-level */
    align-items: center;
    gap: 12px;
}

.dash-subtitle::before {
    content: '';
    width: 2px;
    height: 0.8em;       /* يتناسب مع حجم الخط تلقائياً */
    background: var(--accent-dark);
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;      /* يمنعه من الانضغاط */
}

.bg-glow{
    position:fixed;
    inset:0 0 0 0;
    height:100vh;
    z-index:-1;
    /* softer, full-height glow that fades smoothly */
    background:
        radial-gradient(circle at 85% 10%, rgba(57, 157, 67, 0.083) 0%, rgba(92,242,107,0.06) 35%, transparent 60%),
        radial-gradient(circle at 15% 85%, rgba(58, 154, 67, 0.08) 0%, rgba(92,242,107,0.03) 40%, transparent 70%),
        linear-gradient(180deg, #07111e 0%, #0a1530 25%, #0a1830 50%, #0c1e22 75%, #0a1f16 100%);
    background-blend-mode: screen, screen, normal;
    pointer-events:none;
    transition:opacity .6s ease;
}

nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 6%;
    position:relative;
    z-index:10;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    font-size:1.05rem;
    letter-spacing:1px;
}
.logo-mark{
    width:38px;height:38px;
    border:1.5px solid var(--accent);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);
    font-family:var(--font-num);
    font-weight:800;
    font-size:0.85rem;
    transform:rotate(45deg);
}
.logo-mark span{transform:rotate(-45deg);}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-text small{font-size:0.6rem;color:var(--text-muted);font-weight:500;letter-spacing:3px;}

.nav-links{
    display:flex;
    align-items:center;
    gap:36px;
    list-style:none;
    font-size:0.95rem;
    color:var(--text-muted);
}
.nav-links a{
    color:var(--text-muted);
    text-decoration:none;
    transition:color .25s;
}
.nav-links a:hover{color:var(--text-main);}
.nav-links .active{
    color:var(--text-main);
    border:1px solid var(--line);
    padding:10px 28px;
    border-radius:999px;
    background:rgba(92,242,107,0.05);
}

.btn-primary{
    background:var(--accent);
    color:#08130c;
    border:none;
    padding:14px 30px;
    border-radius:999px;
    font-weight:700;
    font-size:0.95rem;
    cursor:pointer;
    display:flex;align-items:center;gap:8px;
    transition:transform .25s, box-shadow .25s;
    box-shadow:0 8px 24px -8px rgba(92,242,107,0.55);
    font-family:var(--font-display);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(92,242,107,0.75);}
.btn-primary svg{width:16px;height:16px;}

.hero{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:40px;
    padding:40px 6% 100px;
    position:relative;
    min-height:88vh;
}
.hero-text{z-index:5;order:2;text-align:right;}
.badge{
    display:inline-flex;align-items:center;gap:10px;
    border:1px solid var(--line);
    background:linear-gradient(90deg, rgba(92,242,107,0.10), transparent);
    color:var(--accent);padding:10px 22px;border-radius:999px;
    font-size:0.9rem;font-weight:700;margin-bottom:32px;
}
h1{font-size:3.4rem;font-weight:900;line-height:1.35;margin-bottom:28px;}
h1 .highlight{color:var(--accent);position:relative;}
.subtitle{
    color:var(--text-muted);font-size:1.05rem;line-height:2;
    max-width:560px;margin-bottom:48px;margin-right:0;margin-left:auto;
}
.download-section{display:flex;flex-direction:column;gap:18px;}
.download-label{font-size:1.2rem;font-weight:700;color:var(--text-main);}
.store-buttons{display:flex;gap:14px;}
.store-btn{
    display:flex;align-items:center;gap:10px;
    background:#101f17;border:1px solid var(--line);border-radius:14px;
    padding:10px 20px;color:var(--text-main);text-decoration:none;
    transition:border-color .25s, transform .25s;
}
.store-btn:hover{border-color:var(--accent);transform:translateY(-2px);}
.store-btn svg{width:26px;height:26px;flex-shrink:0;}
.store-btn .store-text{display:flex;flex-direction:column;line-height:1.3;text-align:left;}
.store-btn .store-text small{font-size:0.65rem;color:var(--text-muted);}
.store-btn .store-text strong{font-size:1rem;font-family:var(--font-num);}

.hero-visual{order:2;position:relative;display:flex;justify-content:center;align-items:center;min-height:640px;}
.hero-visual picture{display:flex;justify-content:center;width:100%;}
.hero-visual img{display:block;width:100%;height:auto;max-width:420px;}
.arc-glow{
    position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);
    width:120%;height:120px;background:var(--accent);filter:blur(60px);
    opacity:0.35;border-radius:50%;z-index:0;
}
.phone{
    position:absolute;width:240px;height:500px;border-radius:34px;
    border:6px solid #1c2b24;background:#0d1813;overflow:hidden;
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.7);
}
.phone-back-left{right:255px;top:60px;transform:rotate(-7deg);opacity:0.85;filter:brightness(0.75);z-index:1;}
.phone-back-right{left:255px;top:80px;transform:rotate(7deg);opacity:0.85;filter:brightness(0.75);z-index:1;}
.phone-front{z-index:3;box-shadow:0 40px 100px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(92,242,107,0.15);}
.phone-status{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 18px 6px;font-family:var(--font-num);font-size:0.7rem;color:#fff;position:relative;z-index:5;
}
.signal{display:flex;align-items:center;gap:5px;}
.signal svg{width:14px;height:14px;}
.phone-screen{height:100%;width:100%;position:relative;}
.phone-front .phone-image{
    height:62%;
    background:linear-gradient(180deg, rgba(10,20,15,0) 40%, rgba(10,20,15,0.95) 100%), url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=600&auto=format&fit=crop');
    background-size:cover;background-position:center 20%;
}
.phone-front .phone-content{padding:22px 22px 26px;text-align:center;}
.phone-front .phone-content h3{font-size:1.15rem;font-weight:800;margin-bottom:10px;}
.phone-front .phone-content p{font-size:0.78rem;color:var(--text-muted);line-height:1.8;margin-bottom:18px;}
.progress-dots{display:flex;justify-content:center;gap:6px;margin-bottom:16px;}
.progress-dots span{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,0.2);}
.progress-dots span.active{width:24px;background:var(--accent);}
.phone-next-btn{
    background:var(--accent);color:#08130c;border:none;width:100%;
    padding:13px;border-radius:999px;font-weight:800;font-size:0.85rem;
    font-family:var(--font-display);cursor:pointer;
}
.phone-back-left .phone-screen{padding:20px 16px;}
.ring-wrap{display:flex;justify-content:center;margin:18px 0 10px;}
.ring{
    width:140px;height:140px;border-radius:50%;
    background:conic-gradient(var(--accent) 0deg 360deg, rgba(255,255,255,0.06) 360deg 360deg);
    display:flex;align-items:center;justify-content:center;position:relative;
}
.ring::before{content:'';position:absolute;width:112px;height:112px;border-radius:50%;background:#0d1813;}
.ring-label{position:relative;font-family:var(--font-num);font-weight:800;font-size:1.4rem;color:var(--accent);}
.dash-title{text-align:center;font-size:0.85rem;color:var(--text-muted);margin:14px 0 16px;}
.stat-pill{
    display:flex;justify-content:space-between;align-items:center;
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);
    border-radius:14px;padding:10px 14px;margin-bottom:10px;
}
.stat-pill .label{font-size:0.7rem;color:var(--text-muted);}
.stat-pill .value{font-family:var(--font-num);font-weight:800;font-size:1rem;}
.stat-pill.green{
    background:rgba(92,242,107,0.12);border-color:rgba(92,242,107,0.25);
    justify-content:center;font-size:0.75rem;color:var(--accent);font-weight:700;text-align:center;
}
.phone-back-right .phone-image{
    height:55%;
    background:linear-gradient(180deg, rgba(10,20,15,0) 30%, rgba(10,20,15,0.95) 100%), url('https://images.unsplash.com/photo-1599058917212-d750089bc07e?q=80&w=600&auto=format&fit=crop');
    background-size:cover;background-position:center;
}
.phone-back-right .phone-content{padding:18px 20px;text-align:center;}
.phone-back-right .phone-content h3{font-size:1.05rem;font-weight:800;margin-bottom:8px;}
.phone-back-right .phone-content p{font-size:0.72rem;color:var(--text-muted);line-height:1.8;margin-bottom:14px;}

.footer-strip{width:100%;line-height:0;margin-top:-2px;}
.footer-strip svg{display:block;width:100%;height:60px;filter:drop-shadow(0 0 16px rgba(92,242,107,0.7));}

.why-section{padding:60px 6% 55px;position:relative;z-index:5;}
.why-header{text-align:center;font-size:1.9rem;font-weight:900;line-height:1.6;margin-bottom:48px;}
.why-header .highlight{color:var(--accent);}
.why-grid-top{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;margin-bottom:24px;}
.why-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:32px 24px;text-align:center;}
.why-card h3{font-size:1.05rem;font-weight:800;margin-bottom:12px;}
.why-card p{font-size:0.85rem;color:var(--text-muted);line-height:1.9;margin-bottom:28px;min-height:48px;}
.why-icon{display:flex;justify-content:center;}
.why-icon svg{width:90px;height:70px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.why-grid-bottom{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;}
.why-row-bottom{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;}
.feature-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:32px;display:flex;align-items:center;gap:32px;}
.feature-card.split-reverse{flex-direction:row-reverse;}
.feature-card .feature-text{flex:1;text-align:right;}
.feature-card h3{font-size:1.15rem;font-weight:800;margin-bottom:12px;}
.feature-card p{font-size:0.85rem;color:var(--text-muted);line-height:1.9;}
.feature-phone-img{flex-shrink:0;width:160px;height:210px;border-radius:18px;overflow:hidden;position:relative;background:#0d1813;border:1px solid rgba(255,255,255,0.08);}
.feature-phone-img img{width:100%;height:100%;object-fit:cover;}
.feature-phone-img .phone-overlay{
    position:absolute;bottom:14px;left:14px;right:14px;
    background:var(--accent);color:#08130c;text-align:center;
    font-size:0.7rem;font-weight:700;padding:8px;border-radius:999px;
}
.feature-card.promo{flex-direction:column;text-align:center;align-items:center;gap:16px;padding:36px 28px;}
.feature-card.promo .brand{color:var(--accent);font-weight:900;font-size:1.3rem;letter-spacing:2px;}
.feature-card.promo h3{font-size:1.2rem;text-align:center;}
.feature-card.promo .download-label-sm{font-size:0.85rem;color:var(--text-muted);margin-top:6px;}
.feature-card.promo .store-buttons{gap:10px;margin-top:10px;}
.feature-card.promo .store-btn{padding:8px 14px;}
.feature-card.promo .store-btn svg{width:20px;height:20px;}
.feature-card.promo .store-btn .store-text strong{font-size:0.85rem;}
.feature-card.promo .store-btn .store-text small{font-size:0.55rem;}
.feature-card.small{flex-direction:column;align-items:flex-start;gap:18px;}
.feature-card.small .feature-text{text-align:right;width:100%;}
.feature-card.small .feature-visual{width:100%;display:flex;justify-content:center;}
.feature-card.small .feature-visual img{width:140px;border-radius:18px;border:1px solid rgba(255,255,255,0.08);}
.ring-graphic{
    width:120px;height:120px;border-radius:50%;
    background:conic-gradient(from 0deg, #5CF26B 0deg 100deg, #4a7cff 100deg 200deg, rgba(255,255,255,0.05) 200deg 360deg);
    position:relative;display:flex;align-items:center;justify-content:center;
}
.ring-graphic::before{content:'';position:absolute;width:92px;height:92px;border-radius:50%;background:var(--bg-deep);}
.ring-graphic::after{content:'';position:absolute;width:64px;height:64px;border-radius:50%;border:2px solid rgba(92,242,107,0.4);}

.steps-section{
    padding:60px 6% 100px;
    position:relative;
    z-index:5;
}
.steps-header{
    text-align:center;
    margin-bottom:48px;
}
.steps-header h2{
    font-size:1.9rem;
    font-weight:900;
    line-height:1.6;
    margin-bottom:14px;
}
.steps-header h2 .highlight{color:var(--accent);}
.steps-header p{
    color:var(--text-muted);
    font-size:0.95rem;
}

.steps-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.step-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    border:1px solid var(--line);
    border-radius:24px;
    padding:32px;
    background:rgba(255,255,255,0.015);
}
.step-card.reverse{
    flex-direction:column;
}
.step-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    width:100%;
    margin-bottom:32px;
}
.step-card.reverse .step-top{
    flex-direction:row-reverse;
}
.step-number{
    font-size:4.5rem;
    font-weight:900;
    color:rgba(92,242,107,0.18);
    font-family:var(--font-num);
    line-height:1;
    flex-shrink:0;
}
.step-top picture{display:block;}
.step-img{
    display:block;
    width:100%;
    height:auto;
    max-width:220px;
    border-radius:16px;
}
.step-content{
    text-align:center;
    width:100%;
}
.step-content h3{
    font-size:1.1rem;
    font-weight:800;
    margin-bottom:10px;
}
.step-content p{
    font-size:0.85rem;
    color:var(--text-muted);
    line-height:1.9;
}


.mini-phone{
    flex-shrink:0;width:180px;height:320px;border-radius:22px;
    border:5px solid #1c2b24;background:#0d1813;overflow:hidden;
    box-shadow:0 20px 50px -15px rgba(0,0,0,0.6);
}
.mini-phone .ms-status{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 4px;font-family:var(--font-num);font-size:0.6rem;color:#fff;}
.mini-phone .ms-status .signal svg{width:10px;height:10px;}
.mini-phone .ms-content{padding:0 12px 12px;}
.mini-progress{height:4px;border-radius:4px;background:rgba(255,255,255,0.1);margin-bottom:10px;position:relative;overflow:hidden;}
.mini-progress span{position:absolute;inset:0;width:60%;background:var(--accent);border-radius:4px;}
.mini-step-label{font-size:0.6rem;color:var(--text-muted);margin-bottom:8px;text-align:center;}
.mini-img{width:100%;height:90px;border-radius:10px;background:#1a1a1a;margin-bottom:10px;background-size:cover;background-position:center;}
.mini-title{font-size:0.7rem;font-weight:700;text-align:center;margin-bottom:6px;}
.mini-desc{font-size:0.55rem;color:var(--text-muted);text-align:center;line-height:1.6;margin-bottom:10px;}
.mini-option{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.04);border-radius:8px;padding:7px 10px;margin-bottom:6px;font-size:0.62rem;}
.mini-option .check{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mini-option.checked .check{background:var(--accent);border-color:var(--accent);}
.mini-option .check svg{width:8px;height:8px;stroke:#08130c;stroke-width:3;fill:none;}
.mini-avatar{width:24px;height:24px;border-radius:6px;background-size:cover;background-position:center;flex-shrink:0;}
.mini-card-title{font-size:0.7rem;font-weight:700;text-align:center;margin:6px 0 10px;}
.mini-ring-wrap{display:flex;justify-content:center;margin:14px 0 6px;}
.mini-ring{width:90px;height:90px;border-radius:50%;background:conic-gradient(var(--accent) 0deg 360deg);display:flex;align-items:center;justify-content:center;position:relative;}
.mini-ring::before{content:'';position:absolute;width:72px;height:72px;border-radius:50%;background:#0d1813;}
.mini-ring-label{position:relative;font-family:var(--font-num);font-weight:800;font-size:0.85rem;color:var(--accent);}
.mini-stat-row{display:flex;justify-content:center;gap:18px;margin-bottom:10px;}
.mini-stat{text-align:center;}
.mini-stat .val{font-family:var(--font-num);font-weight:800;font-size:0.7rem;}
.mini-stat .lbl{font-size:0.5rem;color:var(--text-muted);}
.mini-green-pill{background:rgba(92,242,107,0.12);border:1px solid rgba(92,242,107,0.25);border-radius:8px;padding:6px 10px;font-size:0.55rem;color:var(--accent);text-align:center;font-weight:700;margin-bottom:6px;}
.mini-btn{background:var(--accent);color:#08130c;border:none;width:100%;padding:9px;border-radius:999px;font-weight:800;font-size:0.6rem;font-family:var(--font-display);margin-top:8px;}

.testimonials-section{padding:40px 0 100px;position:relative;z-index:5;overflow:hidden;}
.testimonials-header{display:flex;align-items:center;justify-content:center;gap:24px;text-align:center;margin-bottom:48px;}
.testimonials-header h2{font-size:1.9rem;font-weight:900;line-height:1.6;}
.arm-icon svg{width:60px;height:60px;stroke:var(--accent);fill:none;stroke-width:2;}
.testimonials-track{display:flex;flex-direction:column;gap:20px;overflow:hidden;}
.testimonials-row{display:flex;gap:24px;width:max-content;animation:scrollLeft 40s linear infinite;}
.testimonials-row.row-reverse{animation:scrollRight 40s linear infinite;}
@keyframes scrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes scrollRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.testimonial-card{flex:0 0 280px;flex-shrink:0;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:18px;padding:24px;text-align:center;}
.testimonial-avatar{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;background-size:cover;background-position:center;border:2px solid rgba(92,242,107,0.3);}
.testimonial-card h4{font-size:0.95rem;font-weight:800;margin-bottom:10px;}
.testimonial-card p{font-size:0.8rem;color:var(--text-muted);line-height:1.8;}

.cta-section{padding:0 6% 80px;position:relative;z-index:5;}
.cta-banner{border:1px solid var(--line);border-radius:28px;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;position:relative;}
.cta-arc{position:absolute;width:140px;height:140px;border:22px solid var(--accent);border-radius:50%;opacity:0.9;}
.cta-arc.top-left{top:-50px;left:120px;border-color:var(--accent) var(--accent) transparent transparent;}
.cta-arc.top-right{top:-60px;right:-60px;border-color:transparent transparent var(--accent) var(--accent);}
.cta-arc.bottom-left{bottom:-70px;left:-50px;border-color:transparent var(--accent) var(--accent) transparent;}
.cta-arc.bottom-right{bottom:-60px;right:90px;border-color:var(--accent) transparent transparent var(--accent);}
.cta-content{padding:48px;text-align:right;position:relative;z-index:2;}
.cta-content h2{font-size:1.7rem;font-weight:900;line-height:1.6;margin-bottom:28px;}
.cta-download-label{text-align:center;font-size:1.05rem;font-weight:700;margin-bottom:16px;}
.cta-content .store-buttons{justify-content:center;margin-bottom:28px;}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:10px;}
.qr-box img{width:90px;height:90px;border-radius:10px;background:#fff;padding:6px;}
.qr-box span{font-size:0.75rem;color:var(--text-muted);letter-spacing:1px;}
.cta-visual{position:relative;display:flex;justify-content:center;align-items:center;height:100%;min-height:340px;z-index:2;}
.cta-visual .phone{position:relative;transform:rotate(-4deg);}
.cta-visual .phone .phone-image{height:100%;background:url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=400&auto=format&fit=crop');background-size:cover;background-position:center;}
.cta-visual .phone .phone-content{position:absolute;bottom:18px;left:18px;right:18px;text-align:center;}
.cta-visual .phone .phone-content h3{font-size:0.95rem;font-weight:800;margin-bottom:8px;}
.cta-visual .phone .phone-content p{font-size:0.7rem;color:var(--text-muted);line-height:1.7;margin-bottom:12px;}

/* ========== FOOTER - UPDATED ========== */
footer{
    border-top:2px solid rgba(92,242,107,0.3);
    padding:0;
    position:relative;
    z-index:5;
    background:#0a1530;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:0;
    text-align:right;
}
.footer-col{
    padding:52px 40px;
}
.footer-col h4{
    font-size:1rem;
    font-weight:800;
    margin-bottom:22px;
    color:var(--text-main);
}
.footer-col ul{
    list-style:none;
}
.footer-col ul li{
    margin-bottom:14px;
    font-size:0.85rem;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    cursor:pointer;
    transition:color .2s;
}
.footer-col ul li:hover{color:var(--text-main);}
.footer-col ul li::before{
    content:'•';
    color:white;
    font-size:0.9rem;
}
.footer-store-buttons{
    display:flex;
    gap:10px;
    justify-content:flex-start;
    margin-bottom:20px;
}
.footer-store-buttons .store-btn{padding:7px 12px;}
.footer-store-buttons .store-btn svg{width:18px;height:18px;}
.footer-store-buttons .store-text strong{font-size:0.75rem;}
.footer-store-buttons .store-text small{font-size:0.5rem;}
.footer-qr{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}
.footer-qr img{
    width:84px;height:84px;
    background:#fff;border-radius:10px;padding:5px;
}
.footer-qr span{
    font-size:0.65rem;color:var(--text-muted);letter-spacing:1px;
}
.footer-brand{text-align:right;}
.footer-brand .logo{
    justify-content: flex-start;

    margin-bottom:18px;
}
.footer-brand .logo .logo-mark{
    width:44px;height:44px;font-size:1rem;
}
.footer-brand .logo .logo-text span{font-size:1.15rem;}
.footer-brand p{
    font-size:0.85rem;color:var(--text-muted);line-height:1.9;
    margin-bottom:24px;max-width:354px;margin-right:0;margin-left:auto;
}
.footer-socials{
    display:flex;gap:12px;justify-content:flex-start;
}
.footer-socials a{
    width:38px;height:38px;border-radius:50%;
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);text-decoration:none;
    transition:background .25s, border-color .25s;
}
.footer-socials a:hover{background:rgba(92,242,107,0.1);border-color:var(--accent);}
.footer-socials svg{width:16px;height:16px;fill:currentColor;}
.footer-bottom{
    border-top:1px solid rgba(92,242,107,0.12);
    padding:18px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.78rem;
    color:var(--text-muted);
}
.footer-bottom .fb-brand{color:var(--accent);font-weight:700;}
/* ========================================= */

@media (max-width:1100px){
    .hero{grid-template-columns:1fr;padding:20px 5% 70px;min-height:auto;}
    .hero-visual{order:1;min-height:auto;}
    .hero-text{order:1;text-align:center;}
    .subtitle{margin:0 auto 40px;}
    .download-section{align-items:center;}
    h1{font-size:2.4rem;}
    .nav-links{display:none;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .footer-col{border-left:none;border-bottom:1px solid rgba(92,242,107,0.12);}
}
@media (max-width:600px){
    .hero{padding:16px 5% 50px;}
    .hero-visual{min-height:auto;}
    .hero-visual img{max-width:280px;}
    .store-buttons{flex-wrap:wrap;justify-content:center;}
    h1{font-size:1.9rem;}
    nav{padding:18px 5%;}
    .btn-primary{padding:11px 20px;font-size:0.85rem;}
    .why-grid-top{grid-template-columns:1fr;}
    .why-grid-bottom{grid-template-columns:1fr;}
    .why-row-bottom{grid-template-columns:1fr;grid-column:1;}
    .feature-card{flex-direction:column;text-align:center;}
    .feature-card .feature-text{text-align:center;}
    .why-header{font-size:1.4rem;}
    .steps-grid{grid-template-columns:1fr;padding:0;}
    .step-card, .step-card.reverse{flex-direction:column;text-align:center;padding:24px;}
    .step-top, .step-card.reverse .step-top{flex-direction:column;gap:12px;margin-bottom:20px;}
    .step-number{font-size:3rem;}
    .step-content{text-align:center;}
    .mini-phone{width:160px;height:280px;}
    .testimonials-header{flex-direction:column;gap:10px;}
    .arm-icon svg{width:40px;height:40px;}
    .steps-header h2{font-size:1.4rem;}
    .testimonials-header h2{font-size:1.4rem;}
    .cta-banner{grid-template-columns:1fr;}
    .cta-visual{min-height:260px;order:-1;}
    .cta-visual .phone{width:160px;height:320px;}
    .cta-content h2{font-size:1.3rem;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-col{padding:32px 24px;border-left:none;border-bottom:1px solid rgba(92,242,107,0.1);}
    .footer-col ul li{justify-content:center;}
    .footer-store-buttons, .footer-qr, .footer-brand .logo, .footer-socials{justify-content:center;}
    .footer-brand{text-align:center;}
    .footer-qr{align-items:center;}
    .footer-brand p{margin:0 auto 24px;}
    .footer-bottom{flex-direction:column;gap:8px;text-align:center;padding:18px 24px;}
}


/* ============================================================
   CONTACT PAGE  –  scoped under .contact-page
   لا يتعارض مع أي كلاس موجود في باقي الصفحات
   ============================================================ */

/* ── Page wrapper: يحل محل body styles الخاصة بالكونتاكت ── */
.contact-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
}

/* ── Grid layout ── */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 960px;
    width: 100%;
    align-items: center;
}

/* ── Online badge (داخل info panel) ── */
.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: var(--text-muted);
    letter-spacing: .02em;
    margin-bottom: 1rem;
}
.contact-badge__dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--accent);
    animation: contactPulse 2s infinite;
    flex-shrink: 0;
}
@keyframes contactPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* ── Info panel (يمين) ── */
.contact-info {
    text-align: right;
}
.contact-info__title {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 1rem;
    color: var(--text-main);
}
.contact-info__title em {
    color: var(--accent);
    font-style: italic;
}
.contact-info__desc {
    font-size: .95rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 2.5rem;
    max-width: 340px;
}

/* ── Contact detail rows ── */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-bottom: 2rem;
}
.contact-detail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .85rem;
}
.contact-detail__text {
    text-align: right;
}
.contact-detail__label {
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: .15rem;
}
.contact-detail__value {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-main);
    direction: ltr;
}
.contact-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(92,242,107,0.06);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Social buttons ── */
.contact-socials {
    display: flex;
    gap: .75rem;
    justify-content: flex-start;
}
.contact-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(92,242,107,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.contact-social:hover {
    border-color: var(--accent);
    background: rgba(92,242,107,0.1);
}
.contact-social svg {
    width: 15px;
    height: 15px;
    fill: var(--text-muted);
    transition: fill .2s;
}
.contact-social:hover svg { fill: var(--accent); }

/* ── Form card (يسار) ── */
.contact-form-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2.25rem 2rem;
}

/* ── Fields ── */
.contact-field {
    margin-bottom: 1.35rem;
}
.contact-field__label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: .55rem;
    letter-spacing: .01em;
}
.contact-field__input,
.contact-field__textarea {
    width: 100%;
    background: #152f29;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .75rem 1rem;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: .88rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    text-align: right;
    direction: rtl;
}
.contact-field__input::placeholder,
.contact-field__textarea::placeholder {
    color: rgba(159,182,170,0.4);
}
.contact-field__input:focus,
.contact-field__textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(92,242,107,0.1);
}
.contact-field__textarea {
    resize: none;
    height: 130px;
}

/* ── Submit button ── */
.contact-submit {
    width: 100%;
    padding: .9rem;
    background: var(--accent);
    color: #08130c;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 8px 24px -8px rgba(92,242,107,0.5);
    letter-spacing: .03em;
}
.contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(92,242,107,0.7);
}
.contact-submit:active { transform: scale(.98); }

/* ── Responsive ── */
@media (max-width: 720px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .contact-info {
        order: -1;
    }
    .contact-info__title { font-size: 1.8rem; }
    .contact-info__desc  { max-width: 100%; }
    .contact-socials, .contact-detail { justify-content: flex-start; }
}
/* ============================================================ */



/* ============================================================
   MUSCLE MAP SECTION
   ============================================================ */
.muscle-section{
    max-width:1000px;
    margin:60px auto;
    padding:48px 40px 0;
    border:1px solid var(--line);
    border-radius:28px;
    background:rgba(255,255,255,0.015);
    position:relative;
}

.muscle-header{
    text-align:center;
    margin-bottom:36px;
}
.muscle-header h1{
    font-size:1.7rem;
    font-weight:900;
    line-height:1.7;
    margin-bottom:18px;
}
.muscle-header h1 .highlight{color:var(--accent);display:block;font-size:1.65rem;}
.muscle-header p{
    color:var(--text-muted);
    font-size:0.92rem;
    line-height:1.9;
    max-width:480px;
    margin:0 auto 28px;
}

.cta-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid var(--line);
    color:var(--accent);
    font-weight:800;
    font-size:1rem;
    padding:16px 32px;
    border-radius:18px;
    background:rgba(92,242,107,0.04);
    margin:0 auto 36px;
    text-align:center;
    line-height:1.6;
}

/* body figures */
.bodies-wrap{
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
    padding-bottom:40px;
}
.body-figure{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
}
.body-figure svg{
    width:200px;
    height:auto;
    overflow:visible;
}

/* muscle hotspot regions */
.hotspot{
    fill:#d99b80;
    stroke:rgba(255,255,255,0.08);
    stroke-width:0.6;
    cursor:pointer;
    transition:fill .2s, opacity .2s;
}
.hotspot:hover{fill:var(--accent);}
.hotspot.active{fill:var(--accent);}
.skin-base{fill:#c98a6e;}
.skin-shade{fill:#b87a60;}
.head{fill:#cfa088;}
.body-outline{fill:none;}

.view-toggle{
    border:1px solid var(--line);
    color:var(--text-main);
    background:rgba(255,255,255,0.02);
    font-family:var(--font-display);
    font-weight:700;
    font-size:0.85rem;
    padding:9px 26px;
    border-radius:999px;
    cursor:pointer;
    transition:border-color .2s, background .2s;
}
.view-toggle:hover{border-color:var(--accent);background:rgba(92,242,107,0.06);}

/* tooltip label that floats near cursor on hover (optional small label under figure) */
.figure-caption{
    font-size:0.78rem;
    color:var(--text-muted);
    min-height:18px;
}

/* ============================================================
   EXERCISE RESULT CARD
   ============================================================ */
.exercise-result{
    border-top:1px solid var(--line);
    padding:40px 0 48px;
}
.exercise-result.show{display:block;animation:fadeSlide .35s ease;}
@keyframes fadeSlide{
    from{opacity:0; transform:translateY(14px);}
    to{opacity:1; transform:translateY(0);}
}

.exercise-card{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:0;
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    background:rgba(255,255,255,0.015);
}
.exercise-info{
    padding:32px 36px;
    text-align:right;
}
.muscle-tag{
    display:inline-block;
    background:rgba(92,242,107,0.1);
    border:1px solid rgba(92,242,107,0.25);
    color:var(--accent);
    font-size:0.78rem;
    font-weight:700;
    padding:6px 18px;
    border-radius:999px;
    margin-bottom:18px;
}
.exercise-info h2{
    font-size:1.2rem;
    font-weight:800;
    margin-bottom:6px;
}
.exercise-info .en-name{
    font-family:var(--font-num);
    font-size:0.85rem;
    color:var(--text-muted);
    margin-bottom:16px;
    direction:ltr;
    text-align:right;
}
.exercise-info p{
    font-size:0.85rem;
    color:var(--text-muted);
    line-height:1.95;
    margin-bottom:20px;
}
.exercise-info p .en-term{direction:ltr; display:inline-block; font-family:var(--font-num);}
.read-more{
    color:var(--accent);
    font-size:0.85rem;
    font-weight:700;
    text-decoration:underline;
    cursor:pointer;
}
.exercise-thumb{
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.exercise-thumb img{
    width:100%;
    max-height:280px;
    object-fit:contain;
}

.empty-state{
    text-align:center;
    color:var(--text-muted);
    font-size:0.9rem;
    padding:30px 0 46px;
}
.empty-state span{color:var(--accent); font-weight:700;}

@media (max-width:720px){
    .muscle-section{margin:32px 16px; padding:32px 20px 0;}
    .muscle-header h1{font-size:1.3rem;}
    .muscle-header h1 .highlight{font-size:1.25rem;}
    .cta-pill{font-size:0.85rem; padding:14px 22px;}
    .bodies-wrap{gap:30px;}
    .body-figure svg{width:150px;}
    .exercise-card{grid-template-columns:1fr;}
    .exercise-thumb{order:-1; padding:24px;}
    .exercise-info{padding:26px 22px;}
}

/* كل الـ paths اللي جوف <a> في الـ SVG */
svg a .hotspot {
    fill: rgba(255, 255, 255, 0.834);
    transition: fill 0.2s ease;
    cursor: pointer;
}

svg a:hover .hotspot {
    fill: #22c55e; /* أخضر — غيّره لأي لون عندك */
}

/* ============================================================
   COMPANION SECTION  –  all-day health companion
   (theme/shape only — layout & spacing handled by Tailwind utilities)
   ============================================================ */
.companion-section{
    padding:60px 6% 80px;
    position:relative;
    z-index:5;

}
.companion-section .highlight{color:var(--accent);}      /* .highlight is scoped — needs this */
.companion-section p{color:var(--text-muted);line-height:1.9;}
.companion-time-sub{color:var(--text-muted);}

/* RTL-aware vertical timeline line, sitting beside the time column */
.companion-timeline{position:relative;}
.companion-timeline::before{
    content:'';
    position:absolute;
    top:8px;
    bottom:8px;
    right:150px;
    width:2px;
    background:var(--line);
}

.companion-card{
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:18px;
    transition:border-color .25s, transform .25s;
}
.companion-card:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
}

.companion-card-icon{
    width:46px;
    height:46px;
    border-radius:12px;
    background:var(--accent-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.companion-card-icon svg{
    width:22px;
    height:22px;
    stroke:var(--accent);
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* dashed placeholder — real app screenshot drops in here later */
.companion-img-placeholder{
    height:120px;
    border:1.5px dashed var(--line);
    border-radius:12px;
    background:rgba(255,255,255,0.015);
}

.companion-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid rgba(92,242,107,0.25);
    background:var(--accent-soft);
    color:var(--accent);
    padding:8px 16px;
    border-radius:999px;
    font-size:0.8rem;
    font-weight:700;
}

/* once the time|cards split stacks (below Tailwind's md), drop the timeline line */
@media (max-width:767px){
    .companion-timeline::before{display:none;}
}