/* ============ v3.0 Design System — Premium SaaS (Light) ============ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root{
    --v3-bg:#fffaf6; --v3-surface:#ffffff; --v3-card:#ffffff; --v3-card-hover:#fff6ee;
    --v3-border:#eee0d6; --v3-border-hover:#e8c9ae;
    --v3-text:#1a1a1f; --v3-muted:#6b6b76; --v3-muted-2:#9a9aa4;
    --v3-brand:#FF3D68; --v3-brand-2:#FF8A3D; --v3-brand-glow:rgba(255,61,104,.28);
    --v3-purple:#7B2FF7; --v3-blue:#0090FF; --v3-yellow:#FFC93D;
    --v3-success:#16a389; --v3-radius:24px; --v3-radius-sm:14px;
}
.v3{font-family:'Cairo',system-ui,sans-serif; background:var(--v3-bg); color:var(--v3-text); overflow-x:hidden; -webkit-font-smoothing:antialiased}
.v3 *{box-sizing:border-box}
.v3 a{color:inherit; text-decoration:none}
.v3 .wrap{max-width:1160px; margin:0 auto; padding:0 24px}

.v3-mesh{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.v3-mesh span{position:absolute; border-radius:50%; filter:blur(100px); opacity:.25}
.v3-mesh span:nth-child(1){width:520px; height:520px; background:var(--v3-brand); top:-160px; right:-100px; animation:v3float 16s ease-in-out infinite}
.v3-mesh span:nth-child(2){width:420px; height:420px; background:#a78bfa; bottom:-140px; left:-80px; animation:v3float 20s ease-in-out infinite reverse}
.v3-mesh span:nth-child(3){width:340px; height:340px; background:var(--v3-success); top:40%; left:50%; animation:v3float 24s ease-in-out infinite}
@keyframes v3float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}

.v3-nav{position:sticky; top:0; z-index:100; backdrop-filter:blur(20px) saturate(160%); background:rgba(255,250,246,.75); border-bottom:1px solid var(--v3-border)}
.v3-nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}
.v3-logo{font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px}
.platform-logo-img{
    height:var(--logo-h,50px); width:auto; object-fit:contain; display:block;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.v3-logo:hover .platform-logo-img{
    transform:scale(1.08) translateY(-1px);
    filter:drop-shadow(0 6px 14px var(--v3-brand-glow));
}
.v3-nav-links{display:flex; align-items:center; gap:22px; font-size:14px; color:var(--v3-muted)}
.v3-nav-links a:hover{color:var(--v3-text)}
.v3-btn{display:inline-flex; align-items:center; gap:6px; padding:11px 22px; border-radius:100px; font-weight:700; font-size:14px; border:none; cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease}
.v3-nav .v3-btn{ padding:9px 18px; font-size:13px; } /* زر النافبار أصغر شوي من أزرار الهيرو الكبيرة، بلا ما يأثر عليهم */
.v3-btn-primary{background:linear-gradient(135deg,var(--v3-brand),var(--v3-brand-2)); color:#fff; box-shadow:0 8px 24px -6px var(--v3-brand-glow)}
.v3-btn-primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 32px -6px var(--v3-brand-glow)}
.v3-btn-ghost{background:#fff; color:var(--v3-text); border:1px solid var(--v3-border)}
.v3-btn-ghost:hover{background:var(--v3-card-hover); border-color:var(--v3-border-hover)}

/* ===== Hero بجرأة لونية — تدرّج كامل بدل خلفية بيضا مع فقاعات ناعمة (شكل القوالب الجاهزة) ===== */
.v3-hero{position:relative; z-index:1; padding:100px 0 60px; text-align:center}
.v3-pill{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--v3-border); padding:7px 16px; border-radius:100px; font-size:13px; color:var(--v3-muted); margin-bottom:28px; box-shadow:0 4px 16px -8px rgba(0,0,0,.08)}
.v3-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--v3-success); box-shadow:0 0 8px var(--v3-success)}
.v3-hero h1{font-size:clamp(34px,6.5vw,68px); font-weight:900; line-height:1.15; margin:0 0 22px; letter-spacing:-.02em}
.v3-hero h1 .grad{background:linear-gradient(135deg,var(--v3-brand),var(--v3-brand-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.v3-hero p{font-size:clamp(16px,2vw,20px); color:var(--v3-muted); max-width:620px; margin:0 auto 36px; line-height:1.8}
.v3-hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:60px}
.v3-trust{display:flex; gap:24px; justify-content:center; flex-wrap:wrap; font-size:13px; color:var(--v3-muted-2)}
.v3-trust span{display:flex; align-items:center; gap:6px}
/* على الموبايل، مشغّل الموسيقى العائم (.v3-music-dock) ثابت بأسفل يسار الشاشة —
   بدون هامش إضافي هون كانت آخر شارة ("جاهز خلال دقائق") بتنكتب تحته وتصير مقروءة جزئياً بس */
@media(max-width:640px){ .v3-trust{margin-bottom:56px} }

.v3-preview{position:relative; z-index:1; max-width:920px; margin:0 auto; border-radius:var(--v3-radius); overflow:hidden; border:1px solid var(--v3-border); box-shadow:0 40px 100px -30px rgba(0,0,0,.18); transform:perspective(1200px) rotateX(2deg)}
.v3-preview img{width:100%; display:block}

.v3-section{position:relative; z-index:1; padding:100px 0}
.v3-eyebrow{text-align:center; color:var(--v3-brand); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px}
.v3-section h2{text-align:center; font-size:clamp(26px,4vw,42px); font-weight:800; margin:0 0 16px; letter-spacing:-.01em}
.v3-section .sub{text-align:center; color:var(--v3-muted); max-width:520px; margin:0 auto 56px; font-size:16px; line-height:1.8}

.v3-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:20px; max-width:820px; margin:0 auto}
.v3-stat{text-align:center}
.v3-stat .num{font-size:clamp(28px,4vw,42px); font-weight:900; background:linear-gradient(135deg,var(--v3-brand),var(--v3-brand-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.v3-stat .lbl{color:var(--v3-muted); font-size:13px; margin-top:4px}

.v3-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.v3-card{background:var(--v3-card); border:1px solid var(--v3-border); border-radius:var(--v3-radius-sm); padding:28px; transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease, box-shadow .25s ease}
.v3-card:hover{transform:translateY(-6px); border-color:var(--v3-border-hover); background:var(--v3-card-hover); box-shadow:0 20px 40px -20px rgba(0,0,0,.12)}
.v3-card .ic{width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--v3-brand),var(--v3-brand-2)); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; box-shadow:0 8px 18px -10px var(--v3-brand-glow)}
.v3-card:nth-child(2) .ic{background:linear-gradient(135deg,var(--v3-purple),var(--v3-blue))}
.v3-card:nth-child(3) .ic{background:linear-gradient(135deg,var(--v3-yellow),var(--v3-brand-2))}
.v3-card:nth-child(4) .ic{background:linear-gradient(135deg,var(--v3-success),var(--v3-blue))}
.v3-card:nth-child(5) .ic{background:linear-gradient(135deg,var(--v3-brand),var(--v3-purple))}
.v3-card:nth-child(6) .ic{background:linear-gradient(135deg,var(--v3-blue),var(--v3-success))}
.v3-card h3{font-size:16px; font-weight:700; margin:0 0 8px}
.v3-card p{color:var(--v3-muted); font-size:14px; line-height:1.8; margin:0}

.v3-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0; position:relative}
.v3-step{padding:0 20px; text-align:center; position:relative}
.v3-step .n{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--v3-brand),var(--v3-purple)); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-weight:900; font-size:16px; color:#fff; box-shadow:0 8px 18px -8px var(--v3-brand-glow)}
.v3-step:nth-child(2) .n{background:linear-gradient(135deg,var(--v3-brand-2),var(--v3-brand))}
.v3-step:nth-child(3) .n{background:linear-gradient(135deg,var(--v3-blue),var(--v3-purple))}
.v3-step:nth-child(4) .n{background:linear-gradient(135deg,var(--v3-success),var(--v3-blue))}
.v3-step h4{font-size:15px; font-weight:700; margin:0 0 6px}
.v3-step p{color:var(--v3-muted); font-size:13.5px; line-height:1.7}

.v3-plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.v3-plan{background:linear-gradient(180deg,var(--v3-card),var(--v3-card-hover) 130%); border:1px solid var(--v3-border); border-radius:var(--v3-radius-sm); padding:32px; position:relative; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.v3-plan:hover{transform:translateY(-6px); box-shadow:0 20px 44px -20px rgba(0,0,0,.16)}
.v3-plan.featured{border-color:var(--v3-brand); background:linear-gradient(180deg,rgba(255,107,53,.08),var(--v3-card) 45%)}
.v3-plan .badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--v3-brand),var(--v3-brand-2)); color:#fff; font-size:11px; font-weight:800; padding:5px 16px; border-radius:100px; white-space:nowrap}
.v3-plan h3{font-size:17px; font-weight:700; margin:14px 0 4px}
.v3-plan .price{font-size:36px; font-weight:900; margin:8px 0; display:flex; align-items:baseline; gap:4px}
.v3-plan .price span{font-size:13px; color:var(--v3-muted); font-weight:400}
.d-none{display:none !important}
.v3-plan-more{list-style:none; padding:0; margin:0}
.v3-plan-toggle-more{display:block; width:100%; background:none; border:none; color:var(--v3-brand); font-weight:700; font-size:13px; padding:6px 0 14px; cursor:pointer; text-align:center}
.v3-plan-toggle-more:hover{text-decoration:underline}
.v3-plan-save{display:inline-block; font-size:11.5px; font-weight:800; color:var(--v3-success); background:rgba(22,163,137,.1); padding:3px 10px; border-radius:100px; margin-bottom:10px}
.v3-plan ul{list-style:none; padding:0; margin:20px 0; font-size:13.5px; color:var(--v3-muted)}
.v3-plan ul li{border-top:1px solid var(--v3-border)}
.v3-plan ul li:first-child{border-top:none}

/* مبدّل شهري/سنوي فوق كروت الباقات */
.v3-plans-toggle{display:flex; align-items:center; justify-content:center; gap:14px; margin:22px 0 30px}
.v3-toggle-label{font-size:14px; font-weight:700; color:var(--v3-muted); cursor:pointer; display:flex; align-items:center; gap:6px; transition:color .2s ease}
.v3-toggle-label.active{color:var(--v3-text)}
.v3-toggle-save{font-size:11px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--v3-brand),var(--v3-brand-2)); padding:2px 9px; border-radius:100px}
.v3-switch{position:relative; display:inline-block; width:48px; height:27px; flex-shrink:0}
.v3-switch input{opacity:0; width:0; height:0}
.v3-switch-slider{position:absolute; inset:0; background:var(--v3-border-hover); border-radius:30px; cursor:pointer; transition:background .25s ease}
.v3-switch-slider::before{content:''; position:absolute; height:21px; width:21px; right:3px; top:3px; background:#fff; border-radius:50%; transition:transform .25s cubic-bezier(.2,.8,.2,1); box-shadow:0 2px 6px rgba(0,0,0,.2)}
.v3-switch input:checked + .v3-switch-slider{background:linear-gradient(135deg,var(--v3-brand),var(--v3-brand-2))}
.v3-switch input:checked + .v3-switch-slider::before{transform:translateX(-21px)}

.v3-cta-band{background:linear-gradient(135deg,#fff3e9,#fffaf6); border:1px solid var(--v3-border); border-radius:var(--v3-radius); padding:60px 30px; text-align:center; position:relative; overflow:hidden}
.v3-cta-band::before{content:'';position:absolute; inset:-2px; background:radial-gradient(circle at 30% 20%, var(--v3-brand-glow), transparent 60%); opacity:.6}
.v3-cta-band > *{position:relative; z-index:1}
.v3-cta-band h3{font-size:clamp(22px,4vw,32px); font-weight:800; margin:0 0 12px}
.v3-cta-band p{color:var(--v3-muted); margin:0 0 28px}

.v3-footer{border-top:1px solid var(--v3-border); color:var(--v3-muted-2); font-size:13px}
.v3-footer a{color:var(--v3-muted); text-decoration:none}

.v3-reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.v3-reveal.in{opacity:1; transform:translateY(0)}

.v3-music-toggle{background:#fff; border:1.5px solid var(--v3-border); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,.15); transition:transform .2s ease}
.v3-music-toggle:hover{transform:scale(1.08)}
.v3-music-toggle .bars{display:flex; gap:2px; align-items:flex-end; height:13px; transition:transform .3s ease}
.v3-music-toggle .bars span{width:3px; background:var(--v3-brand); border-radius:2px; height:4px; transition:height .2s ease}
.v3-music-toggle.playing .bars{animation:v3pulse 1.6s ease-in-out infinite}
.v3-music-toggle.playing .bars span{animation:v3eq 1s ease-in-out infinite}
.v3-music-toggle .bars span:nth-child(2){animation-delay:.2s}
.v3-music-toggle .bars span:nth-child(3){animation-delay:.4s}
@keyframes v3eq{0%,100%{height:4px}50%{height:15px}}
@keyframes v3pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.v3-music-dock{position:fixed; bottom:20px; left:20px; display:flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--v3-border); border-radius:100px; padding:5px; box-shadow:0 10px 28px -10px rgba(0,0,0,.18); z-index:999}
.v3-track-btn{background:transparent; border:none; border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; color:var(--v3-muted); transition:background .15s ease, color .15s ease}
.v3-track-btn:hover{background:var(--v3-bg); color:var(--v3-brand)}

@media(max-width:720px){
    .v3-nav .wrap{padding:14px 20px}
    .platform-logo-img{height:calc(var(--logo-h,50px) * .82)}
    .v3-hero{padding:60px 0 40px}
    .v3-section{padding:64px 0}
    .v3-nav-links{display:none}
    .v3-steps{grid-template-columns:1fr}
    .v3-music-dock{bottom:14px; left:14px; padding:4px}
    .v3-music-toggle{width:38px; height:38px}
    .v3-track-btn{width:32px; height:32px; font-size:13px}
}