/*
Theme Name: Raha Landing
Theme URI: https://raha.com.sa
Author: Raha
Description: صفحة هبوط راحة لخدمات العمالة المنزلية
Version: 1.0
Text Domain: raha
*/

:root {
    --purple: #411046;
    --purple-dark: #2d0b30;
    --purple-light: #5a1760;
    --green: #9fc43e;
    --green-dark: #7fa832;
    --green-light: #b8d95a;
    --gray-light: #f8f9fa;
    --gray: #6c757d;
    --text: #2d2d2d;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Tajawal', sans-serif; color: var(--text); background: #fff; overflow-x: hidden; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }

/* TOP BAR */
.top-bar { background: var(--purple-dark); color: white; padding: 10px 0; font-size: 0.88em; }
.top-bar-inner { max-width: 1200px; margin: auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.top-bar-links { display: flex; gap: 25px; align-items: center; }
.top-bar-links a { color: rgba(255,255,255,0.85); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color 0.3s; }
.top-bar-links a:hover { color: var(--green); }
.top-bar-links i { color: var(--green); }
.top-bar-badge { background: var(--green); color: white; padding: 3px 14px; border-radius: 20px; font-weight: 700; font-size: 0.85em; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.7} }

/* HEADER */
header { background: white; box-shadow: 0 2px 20px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 1000; }
.header-inner { max-width: 1200px; margin: auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; height: 75px; }
.logo-text { font-size: 1.9em; font-weight: 900; color: var(--purple); letter-spacing: -1px; }
.logo-text span { color: var(--green); }
nav ul { list-style: none; display: flex; gap: 5px; }
nav a { text-decoration: none; color: var(--text); font-weight: 600; padding: 8px 16px; border-radius: 8px; transition: all 0.3s; font-size: 0.95em; }
nav a:hover { color: var(--purple); background: rgba(65,16,70,0.07); }
.nav-cta { background: var(--purple) !important; color: white !important; border-radius: 25px !important; }
.nav-cta:hover { background: var(--green) !important; }

/* HERO */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(159,196,62,0.15) 0%, transparent 60%), linear-gradient(135deg, #2d0b30 0%, #411046 40%, #5a1760 100%); }
.shape { position: absolute; border-radius: 50%; opacity: 0.06; background: var(--green); }
.shape-1 { width: 600px; height: 600px; top: -200px; left: -200px; animation: floatUp 8s ease-in-out infinite; }
.shape-2 { width: 400px; height: 400px; bottom: -100px; right: -100px; animation: floatDown 10s ease-in-out infinite; }
.shape-3 { width: 200px; height: 200px; top: 30%; right: 20%; animation: floatUp 6s ease-in-out infinite reverse; }
@keyframes floatUp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }
@keyframes floatDown { 0%,100%{transform:translateY(0)} 50%{transform:translateY(20px)} }

.hero-inner { max-width: 1200px; margin: auto; padding: 120px 20px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.hero-content { color: white; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(159,196,62,0.2); border: 1px solid rgba(159,196,62,0.4); color: var(--green-light); padding: 8px 18px; border-radius: 30px; font-size: 0.9em; font-weight: 600; margin-bottom: 25px; }
.hero h1 { font-size: 3.4em; font-weight: 900; line-height: 1.2; margin-bottom: 20px; }
.hero h1 .hl { color: var(--green); }
.hero p { font-size: 1.1em; color: rgba(255,255,255,0.8); line-height: 1.8; margin-bottom: 35px; font-weight: 300; }
.hero-btns { display: flex; gap: 15px; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 35px; background: var(--green); color: white; text-decoration: none; border-radius: 50px; font-weight: 700; transition: all 0.3s; box-shadow: 0 8px 25px rgba(159,196,62,0.4); }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-3px); }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; padding: 16px 35px; background: transparent; color: white; text-decoration: none; border-radius: 50px; font-weight: 700; border: 2px solid rgba(255,255,255,0.4); transition: all 0.3s; }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: white; transform: translateY(-3px); }
.hero-stats { display: flex; gap: 35px; margin-top: 45px; padding-top: 35px; border-top: 1px solid rgba(255,255,255,0.1); }
.hero-stat h4 { font-size: 2em; font-weight: 900; color: var(--green); }
.hero-stat p { font-size: 0.82em; color: rgba(255,255,255,0.6); }

/* HERO CARD */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-card-stack { position: relative; width: 380px; height: 430px; }
.hero-main-card { position: absolute; top: 0; right: 0; width: 320px; background: white; border-radius: 24px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.35); }
.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.card-avatar { width: 48px; height: 48px; background: linear-gradient(135deg, var(--purple), var(--green)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2em; }
.card-info h4 { color: var(--purple); font-weight: 700; font-size: 0.95em; }
.card-info p { color: var(--gray); font-size: 0.78em; }
.card-rating { display: flex; gap: 2px; margin-top: 3px; }
.card-rating i { color: #ffc107; font-size: 0.72em; }
.card-services { display: flex; flex-direction: column; gap: 10px; }
.card-svc { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--gray-light); border-radius: 10px; }
.card-svc i { color: var(--green); width: 16px; font-size: 0.9em; }
.card-svc span { font-size: 0.85em; font-weight: 600; color: var(--text); }
.card-svc .badge { margin-right: auto; color: var(--green); font-weight: 700; font-size: 0.8em; }
.float-card { position: absolute; background: white; border-radius: 16px; padding: 14px 18px; box-shadow: 0 15px 40px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 12px; }
.float-card.c1 { bottom: 50px; left: 0; animation: floatUp 4s ease-in-out infinite; }
.float-card.c2 { top: 20px; left: 10px; animation: floatDown 5s ease-in-out infinite; }
.float-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1em; }
.fi-g { background: rgba(159,196,62,0.15); color: var(--green); }
.fi-p { background: rgba(65,16,70,0.1); color: var(--purple); }
.float-text h5 { font-size: 0.82em; font-weight: 700; color: var(--text); }
.float-text p { font-size: 0.72em; color: var(--gray); }

/* TRUST BAR */
.trust-bar { background: var(--gray-light); padding: 22px 0; border-bottom: 1px solid #eee; }
.trust-bar-inner { max-width: 1200px; margin: auto; padding: 0 20px; display: flex; justify-content: center; align-items: center; gap: 45px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 0.9em; font-weight: 600; }
.trust-item i { color: var(--green); font-size: 1.2em; }

/* SECTIONS */
section { padding: 90px 0; }
.container { max-width: 1200px; margin: auto; padding: 0 20px; }
.sec-label { display: inline-flex; align-items: center; gap: 8px; background: rgba(159,196,62,0.1); color: var(--green-dark); padding: 6px 16px; border-radius: 20px; font-size: 0.85em; font-weight: 700; margin-bottom: 15px; border: 1px solid rgba(159,196,62,0.3); }
.sec-title { font-size: 2.4em; font-weight: 900; color: var(--purple); margin-bottom: 15px; line-height: 1.2; }
.sec-sub { font-size: 1.05em; color: var(--gray); max-width: 600px; line-height: 1.7; }
.sec-head { margin-bottom: 55px; }
.sec-head.center { text-align: center; }
.sec-head.center .sec-sub { margin: 0 auto; }

/* SERVICES */
.services { background: white; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.svc-card { background: var(--gray-light); border-radius: 20px; padding: 35px 30px; transition: all 0.4s; position: relative; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.svc-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--purple), var(--purple-light)); opacity: 0; transition: opacity 0.4s; }
.svc-card:hover { transform: translateY(-8px); border-color: var(--purple); box-shadow: 0 20px 50px rgba(65,16,70,0.15); }
.svc-card:hover::before { opacity: 1; }
.svc-card > * { position: relative; z-index: 1; }
.svc-icon { width: 65px; height: 65px; background: white; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.7em; margin-bottom: 20px; transition: all 0.4s; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.svc-card:hover .svc-icon { background: rgba(255,255,255,0.2); }
.svc-card h3 { font-size: 1.15em; font-weight: 800; color: var(--purple); margin-bottom: 10px; transition: color 0.4s; }
.svc-card p { font-size: 0.9em; color: var(--gray); line-height: 1.7; margin-bottom: 20px; transition: color 0.4s; }
.svc-card:hover h3, .svc-card:hover p { color: white; }
.svc-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 700; font-size: 0.9em; text-decoration: none; transition: color 0.4s; }
.svc-card:hover .svc-link { color: var(--green-light); }
.svc-link i { transition: transform 0.3s; }
.svc-card:hover .svc-link i { transform: translateX(-5px); }

/* HOW IT WORKS */
.how { background: var(--gray-light); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; }
.steps-grid::before { content: ''; position: absolute; top: 40px; right: 12%; left: 12%; height: 2px; background: linear-gradient(to left, var(--green), var(--purple)); z-index: 0; }
.step { text-align: center; position: relative; z-index: 1; }
.step-num { width: 80px; height: 80px; background: white; border: 3px solid var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: 900; color: var(--purple); margin: 0 auto 20px; box-shadow: 0 8px 25px rgba(159,196,62,0.2); transition: all 0.3s; }
.step:hover .step-num { background: var(--purple); border-color: var(--purple); color: white; transform: scale(1.1); }
.step h3 { font-size: 1.05em; font-weight: 800; color: var(--purple); margin-bottom: 8px; }
.step p { font-size: 0.88em; color: var(--gray); line-height: 1.6; }

/* OFFERS */
.offers { background: white; }
.offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.offer-card { border-radius: 24px; padding: 40px 35px; position: relative; overflow: hidden; transition: all 0.4s; border: 2px solid #eee; background: white; }
.offer-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(65,16,70,0.12); }
.offer-card.featured { background: linear-gradient(135deg, var(--purple), var(--purple-light)); border-color: var(--purple); }
.offer-badge { position: absolute; top: 20px; left: 20px; background: var(--green); color: white; padding: 5px 14px; border-radius: 20px; font-size: 0.8em; font-weight: 700; }
.offer-card.featured .offer-badge { background: white; color: var(--purple); }
.offer-icon { font-size: 2.5em; margin-bottom: 15px; }
.offer-title { font-size: 1.5em; font-weight: 900; color: var(--purple); margin-bottom: 8px; }
.offer-card.featured .offer-title { color: white; }
.offer-price { font-size: 1.3em; font-weight: 800; color: var(--green); margin-bottom: 5px; }
.offer-card.featured .offer-price { color: var(--green-light); }
.offer-sub { font-size: 0.85em; color: var(--gray); margin-bottom: 25px; }
.offer-card.featured .offer-sub { color: rgba(255,255,255,0.65); }
.offer-divider { height: 1px; background: rgba(0,0,0,0.08); margin: 20px 0; }
.offer-card.featured .offer-divider { background: rgba(255,255,255,0.15); }
.offer-feats { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.offer-feat { display: flex; align-items: center; gap: 10px; font-size: 0.9em; color: var(--text); font-weight: 500; }
.offer-card.featured .offer-feat { color: white; }
.offer-feat i { color: var(--green); width: 16px; }
.offer-card.featured .offer-feat i { color: var(--green-light); }
.offer-btn { display: block; text-align: center; padding: 14px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: all 0.3s; font-size: 0.95em; }
.ob-purple { background: var(--purple); color: white; }
.ob-purple:hover { background: var(--purple-dark); transform: translateY(-2px); }
.ob-green { background: var(--green); color: white; }
.ob-green:hover { background: var(--green-dark); transform: translateY(-2px); }
.ob-white { background: white; color: var(--purple); }
.ob-white:hover { background: var(--gray-light); transform: translateY(-2px); }

/* STATS */
.stats { background: linear-gradient(135deg, var(--purple-dark), var(--purple)); padding: 80px 0; position: relative; overflow: hidden; }
.stats::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(159,196,62,0.08) 1px, transparent 1px); background-size: 30px 30px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; position: relative; z-index: 1; text-align: center; }
.stat-icon { font-size: 2em; color: var(--green); margin-bottom: 15px; }
.stat-num { font-size: 3.2em; font-weight: 900; color: white; line-height: 1; margin-bottom: 8px; }
.stat-num span { color: var(--green); }
.stat-label { color: rgba(255,255,255,0.7); font-size: 0.95em; }

/* WHY US */
.why { background: var(--gray-light); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.why-visual { position: relative; }
.why-img { width: 100%; height: 450px; background: linear-gradient(135deg, var(--purple), var(--green)); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 7em; position: relative; overflow: hidden; }
.why-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(65,16,70,0.85), rgba(159,196,62,0.6)); }
.why-img span { position: relative; z-index: 1; }
.why-float { position: absolute; background: white; border-radius: 16px; padding: 16px 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px; }
.why-float.f1 { bottom: -20px; right: -20px; }
.why-float.f2 { top: -20px; left: -20px; }
.wf-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1em; }
.wf-g { background: rgba(159,196,62,0.15); color: var(--green); }
.wf-p { background: rgba(65,16,70,0.1); color: var(--purple); }
.wf-text h5 { font-size: 0.88em; font-weight: 800; color: var(--text); }
.wf-text p { font-size: 0.76em; color: var(--gray); }
.why-feats { display: flex; flex-direction: column; gap: 18px; margin-top: 35px; }
.why-feat { display: flex; gap: 18px; align-items: flex-start; padding: 20px; background: white; border-radius: 16px; transition: all 0.3s; border: 2px solid transparent; }
.why-feat:hover { border-color: var(--green); box-shadow: 0 8px 25px rgba(159,196,62,0.12); transform: translateX(-5px); }
.wf-ico { width: 50px; height: 50px; min-width: 50px; background: rgba(159,196,62,0.1); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; color: var(--green); }
.wf-body h4 { font-size: 1em; font-weight: 800; color: var(--purple); margin-bottom: 5px; }
.wf-body p { font-size: 0.88em; color: var(--gray); line-height: 1.6; }

/* TESTIMONIALS */
.testimonials { background: white; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.testi-card { background: var(--gray-light); border-radius: 20px; padding: 30px; transition: all 0.3s; border: 2px solid transparent; }
.testi-card:hover { border-color: var(--green); box-shadow: 0 15px 40px rgba(159,196,62,0.1); transform: translateY(-5px); }
.testi-stars { display: flex; gap: 4px; margin-bottom: 15px; }
.testi-stars i { color: #ffc107; font-size: 0.9em; }
.testi-text { font-size: 0.95em; color: var(--text); line-height: 1.8; margin-bottom: 20px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.author-av { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--green)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.1em; }
.author-info h5 { font-size: 0.9em; font-weight: 700; color: var(--purple); }
.author-info p { font-size: 0.78em; color: var(--gray); }

/* CONTACT */
.contact { background: var(--gray-light); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.contact-card { background: white; border-radius: 20px; padding: 35px 30px; text-align: center; transition: all 0.3s; border: 2px solid transparent; }
.contact-card:hover { border-color: var(--purple); box-shadow: 0 15px 40px rgba(65,16,70,0.1); transform: translateY(-5px); }
.contact-ico { width: 70px; height: 70px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 1.8em; margin: 0 auto 20px; }
.ci-p { background: rgba(65,16,70,0.08); color: var(--purple); }
.ci-g { background: rgba(159,196,62,0.12); color: var(--green); }
.ci-w { background: rgba(37,211,102,0.1); color: #25d366; }
.contact-card h3 { font-size: 1.15em; font-weight: 800; color: var(--purple); margin-bottom: 10px; }
.contact-card p { font-size: 0.9em; color: var(--gray); line-height: 1.7; }
.contact-card a { color: var(--green); text-decoration: none; font-weight: 700; }
.contact-card a:hover { text-decoration: underline; }

/* FOOTER */
footer { background: var(--purple-dark); color: white; padding: 60px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 50px; }
.footer-brand .logo-text { font-size: 2em; margin-bottom: 15px; display: block; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9em; line-height: 1.8; margin-bottom: 25px; }
.social-links { display: flex; gap: 12px; }
.social-link { width: 40px; height: 40px; background: rgba(255,255,255,0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s; }
.social-link:hover { background: var(--green); transform: translateY(-3px); }
.footer-col h4 { color: var(--green); font-size: 1em; font-weight: 800; margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.9em; transition: color 0.3s; display: flex; align-items: center; gap: 8px; }
.footer-col ul li a:hover { color: var(--green); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 25px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.footer-bottom p { color: rgba(255,255,255,0.5); font-size: 0.88em; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.88em; transition: color 0.3s; }
.footer-bottom-links a:hover { color: var(--green); }

/* WHATSAPP FLOAT */
.wa-float { position: fixed; bottom: 30px; left: 30px; z-index: 9999; }
.wa-float a { display: flex; align-items: center; gap: 10px; background: #25d366; color: white; text-decoration: none; padding: 14px 22px; border-radius: 50px; font-weight: 700; font-size: 0.95em; box-shadow: 0 8px 30px rgba(37,211,102,0.4); transition: all 0.3s; animation: waPulse 2.5s infinite; }
.wa-float a:hover { background: #1da851; transform: translateY(-3px); }
.wa-float i { font-size: 1.3em; }
@keyframes waPulse { 0%,100%{box-shadow:0 8px 30px rgba(37,211,102,0.4)} 50%{box-shadow:0 8px 40px rgba(37,211,102,0.7)} }
.scroll-top { position: fixed; bottom: 30px; right: 30px; z-index: 9999; width: 48px; height: 48px; background: var(--purple); color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1.1em; box-shadow: 0 5px 20px rgba(65,16,70,0.3); transition: all 0.3s; opacity: 0; pointer-events: none; }
.scroll-top.show { opacity: 1; pointer-events: all; transform: translateY(-3px); }
html { overflow-x: hidden; max-width: 100%; }

@media (max-width: 768px) {
    .hero-inner { grid-template-columns: 1fr; padding: 80px 20px 60px; gap: 30px; }
    .hero-visual { display: none; }
    .hero-card-stack { display: none; }
    .float-card { display: none; }
    .hero h1 { font-size: 2.2em; }
    .hero-stats { gap: 20px; }
    .hero-btns { flex-direction: column; gap: 12px; }
    .btn-primary, .btn-outline { width: 100%; justify-content: center; }
}