/* PREMIUM SHARED STYLES — Rami Levy Mobility */

/* Extended CSS Variables */
:root {
  --teal-glow: rgba(0,164,178,0.25);
  --dark-card: #111827;
  --dark-surface: #1A1F2E;
  --shadow: 0 4px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 40px var(--teal-glow);
  --radius: 16px;
  --radius-lg: 24px;
  --transition: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideRight { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideLeft { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes countUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes gradientShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes borderGlow { 0%,100% { border-color:rgba(0,164,178,0.3); } 50% { border-color:rgba(0,164,178,0.7); } }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(40px); transition: opacity 0.8s var(--transition), transform 0.8s var(--transition); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

/* NAV — GLASS MORPHISM UPGRADE */
.nav { background:rgba(255,255,255,0.92) !important; backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(0,0,0,0.06) !important; transition:all 0.3s ease; }
.nav.scrolled { box-shadow:0 4px 30px rgba(0,0,0,0.08); }
.nav-logo img { transition:0.3s; }
.nav-logo .sep { background:linear-gradient(to bottom, transparent, #ddd, transparent) !important; }

/* NAV LINKS HOVER EFFECTS */
.nav-links a { transition:all 0.3s !important; border-radius:10px !important; }
.nav-links a:hover { color:var(--teal) !important; background:var(--teal-light) !important; }
.nav-links a.active { color:var(--teal) !important; font-weight:600 !important; }

/* NAV CTA BUTTON */
.nav-cta { box-shadow:0 4px 15px rgba(0,164,178,0.3) !important; transition:all 0.3s var(--transition) !important; }
.nav-cta:hover { background:var(--teal-dark) !important; transform:translateY(-2px) !important; box-shadow:0 8px 25px rgba(0,164,178,0.4) !important; }

/* TOPBAR GRADIENT ANIMATION */
.topbar { background:linear-gradient(90deg, var(--red) 0%, var(--red-dark) 50%, var(--red) 100%) !important; background-size:200% 100% !important; animation:gradientShift 4s ease infinite !important; }

/* PREMIUM BUTTONS */
.btn-primary, a.btn-primary { background:linear-gradient(135deg, var(--teal), var(--teal-dark)) !important; border-radius:14px !important; font-weight:700 !important; transition:all 0.4s var(--transition) !important; position:relative; overflow:hidden; box-shadow:0 4px 20px rgba(0,164,178,0.3) !important; }
.btn-primary:hover { transform:translateY(-3px) !important; box-shadow:0 12px 35px rgba(0,164,178,0.4) !important; }

.btn-secondary, a.btn-secondary { transition:all 0.4s var(--transition) !important; backdrop-filter:blur(10px); }
.btn-secondary:hover { transform:translateY(-3px) !important; }

/* SECTION HEADERS */
.section-title h2, .section-header h2 { font-weight:900 !important; }

/* CARD HOVER EFFECTS */
.spec-card, .step-card, .faq-item, .feature-card { transition:all 0.4s var(--transition) !important; }
.spec-card:hover, .step-card:hover, .feature-card:hover { transform:translateY(-6px) !important; box-shadow:var(--shadow-lg) !important; }

/* FAQ PREMIUM STYLES */
.faq-item { border-radius:var(--radius) !important; border:1px solid rgba(0,0,0,0.06) !important; margin-bottom:12px !important; transition:all 0.3s var(--transition) !important; overflow:hidden; }
.faq-item:hover { border-color:rgba(0,164,178,0.2) !important; box-shadow:0 4px 20px rgba(0,164,178,0.08) !important; }

/* URGENCY SECTION GLOW */
.urgency { position:relative; overflow:hidden; }
.urgency::before { content:''; position:absolute; top:-50%; right:-20%; width:600px; height:600px; background:radial-gradient(circle, rgba(0,164,178,0.08) 0%, transparent 70%); border-radius:50%; pointer-events:none; }

/* FOOTER UPGRADE */
.footer { position:relative; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--teal), transparent); }
.footer a { transition:all 0.3s !important; }
.footer a:hover { color:var(--teal) !important; }

/* CONFIGURATOR COLOR DOT HOVER */
.color-dot { transition:all 0.3s var(--transition) !important; }
.color-dot:hover { transform:scale(1.15) !important; }
.color-dot.active { transform:scale(1.2) !important; box-shadow:0 0 0 3px var(--teal), 0 4px 15px rgba(0,164,178,0.3) !important; }

/* GALLERY HOVER */
.gallery-grid img, .gallery img { transition:all 0.5s var(--transition) !important; border-radius:var(--radius) !important; }
.gallery-grid img:hover, .gallery img:hover { transform:scale(1.03) !important; box-shadow:var(--shadow-lg) !important; }

/* BENEFITS STRIP UPGRADE */
.benefits-strip { position:relative; }
.benefit-strip-item { transition:all 0.3s !important; }
.benefit-strip-item:hover { background:rgba(0,164,178,0.08) !important; }

/* SMOOTH SCROLLBAR */
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }

/* STICKY CTA MOBILE UPGRADE */
.sticky-cta { backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important; }