/* ================================================================
   SOLVIX WEB — Extended Custom Styles (Full A–Z)
   Dark/Light mode, Lang switcher, RTL, all animations, all UI
================================================================ */

/* ── LIGHT MODE CSS VARIABLES ─────────────────────────────── */
:root {
  --color-primary:      #00E676;
  --color-primary-dark: #00B85A;
  --color-primary-glow: rgba(0,230,118,0.18);
  --color-bg:           #080808;
  --color-bg-card:      #111111;
  --color-bg-card2:     #151515;
  --color-border:       rgba(0,230,118,0.15);
  --color-text:         #EFEFEF;
  --color-muted:        #888888;
  --color-heading:      #FFFFFF;
}
body.light-mode {
  --color-primary:      #00A854;
  --color-primary-dark: #007a3d;
  --color-primary-glow: rgba(0,168,84,0.14);
  --color-bg:           #F2F4F0;
  --color-bg-card:      #FFFFFF;
  --color-bg-card2:     #F8FAF6;
  --color-border:       rgba(0,168,84,0.18);
  --color-text:         #1a1a1a;
  --color-muted:        #666666;
  --color-heading:      #0a0a0a;
}
body.light-mode { background-color: var(--color-bg); color: var(--color-text); }
body.light-mode .site-header { background: rgba(242,244,240,0.92) !important; border-bottom-color: var(--color-border); }
body.light-mode .mobile-menu { background: rgba(242,244,240,0.98); }
body.light-mode .site-footer { background: #e8ebe4; }
body.light-mode input,
body.light-mode textarea,
body.light-mode select { background: #fff; color: #1a1a1a; border-color: var(--color-border); }
body.light-mode .card,
body.light-mode .service-card,
body.light-mode .post-card,
body.light-mode .pricing-card,
body.light-mode .result-card,
body.light-mode .team-card { background: #fff; }
body.light-mode .main-nav a { color: #222; }
body.light-mode .main-nav a:hover { color: var(--color-primary); }
body.light-mode .page-title-wrap { background: linear-gradient(180deg,rgba(0,168,84,0.05) 0%,transparent 100%); }
body.light-mode .neon-divider { background: linear-gradient(90deg,transparent,var(--color-primary),transparent); }
body.light-mode .filter-btn { color: #444; border-color: rgba(0,168,84,0.25); }
body.light-mode .portfolio-cta { background: linear-gradient(135deg,rgba(0,168,84,0.06) 0%,rgba(242,244,240,0) 60%); }
body.light-mode .stat-number { color: var(--color-primary); }
body.light-mode .not-found-code { -webkit-text-stroke-color: var(--color-primary); }

/* ── THEME TOGGLE BUTTON ──────────────────────────────────── */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: all .25s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
  box-shadow: 0 0 12px var(--color-primary-glow);
}

/* ── LANGUAGE SWITCHER ────────────────────────────────────── */
.lang-switcher { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: .4rem;
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: .38rem .75rem;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: .72rem;
  letter-spacing: .08em;
  white-space: nowrap;
  transition: all .25s;
}
.lang-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lang-flag { font-size: 1.1rem; line-height: 1; }
.lang-code { font-weight: 700; }

/* Dropdown panel */
.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,230,118,0.08);
  z-index: 9999;
  padding: .5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}
.lang-dropdown.open { display: block; animation: drop-in .2s ease; }
@keyframes drop-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* Search box inside dropdown */
.lang-search {
  width: 100%;
  background: var(--color-bg-card2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: .45rem .75rem;
  color: var(--color-text);
  font-size: .8rem;
  margin-bottom: .5rem;
  outline: none;
  box-sizing: border-box;
}
.lang-search:focus { border-color: var(--color-primary); }

.lang-option {
  display: flex; align-items: center; gap: .65rem;
  width: 100%;
  padding: .5rem .75rem;
  border: none; border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font-size: .82rem;
  cursor: pointer;
  text-align: left;
  transition: all .18s;
}
.lang-option:hover { background: var(--color-primary-glow); color: var(--color-primary); }
.lang-option.active { color: var(--color-primary); background: rgba(0,230,118,0.06); font-weight: 600; }
.lang-option .opt-flag { font-size: 1.05rem; flex-shrink: 0; }
.lang-option .opt-native { color: var(--color-muted); font-size: .74rem; }

/* ── MOBILE LANG BUTTONS ──────────────────────────────────── */
.mobile-lang-btn {
  font-family: var(--font-heading);
  font-size: .65rem;
  letter-spacing: .1em;
  padding: .3rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: all .2s;
}
.mobile-lang-btn:hover,
.mobile-lang-btn.active {
  background: var(--color-primary);
  color: #000;
  border-color: var(--color-primary);
}

/* ── NAV CONTROLS WRAPPER ─────────────────────────────────── */
.nav-controls {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}

/* ── RTL SUPPORT ──────────────────────────────────────────── */
body.solvix-rtl .nav-inner { flex-direction: row-reverse; }
body.solvix-rtl .main-nav { flex-direction: row-reverse; }
body.solvix-rtl .footer-grid { direction: rtl; }
body.solvix-rtl .timeline { padding-left: 0; padding-right: 2rem; }
body.solvix-rtl .timeline::before { left: auto; right: 6px; }
body.solvix-rtl .timeline-dot { left: auto; right: -1.75rem; }
body.solvix-rtl .lang-dropdown { right: auto; left: 0; }
body.solvix-rtl .service-card::before { transform-origin: right; }
body.solvix-rtl input,
body.solvix-rtl textarea,
body.solvix-rtl select { text-align: right; }

/* ── ANIMATED GRID BACKGROUND ────────────────────────────── */
.solvix-grid-bg {
  background-image:
    linear-gradient(rgba(0,230,118,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,118,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}
body.light-mode .solvix-grid-bg {
  background-image:
    linear-gradient(rgba(0,168,84,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,168,84,0.05) 1px, transparent 1px);
}

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .65s ease,transform .65s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(40px); transition:opacity .65s ease,transform .65s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s} .reveal-delay-5{transition-delay:.5s}

/* ── HERO ────────────────────────────────────────────────── */
.solvix-hero { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; padding:6rem 1.5rem; }
.solvix-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,230,118,0.08), transparent 70%); pointer-events:none; }
.hero-eyebrow { display:inline-block; font-family:var(--font-heading); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:var(--color-primary); border:1px solid rgba(0,230,118,0.35); border-radius:100px; padding:.3rem 1rem; margin-bottom:1.5rem; }
.hero-title { font-family:var(--font-heading); font-size:clamp(2.2rem,7vw,5rem); font-weight:900; line-height:1.1; letter-spacing:.02em; margin-bottom:1.5rem; color:#fff; }
.hero-title .highlight { color:var(--color-primary); text-shadow:0 0 30px rgba(0,230,118,0.4); }
.hero-sub { font-size:clamp(1rem,2.5vw,1.25rem); color:var(--color-muted); max-width:600px; margin:0 auto 2.5rem; }
.hero-cta-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
body.light-mode .hero-title { color: #0a0a0a; }
body.light-mode .solvix-hero::before { background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,168,84,0.06), transparent 70%); }

/* ── STATS GRID ──────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat-item { padding:1.5rem; }
.stat-number { font-family:var(--font-heading); font-size:clamp(2rem,5vw,3.5rem); font-weight:900; color:var(--color-primary); line-height:1; margin-bottom:.4rem; }
.stat-label { font-size:.85rem; color:var(--color-muted); text-transform:uppercase; letter-spacing:.08em; }

/* ── SERVICES GRID ───────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.service-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius); padding:2rem; transition:all var(--transition); position:relative; overflow:hidden; }
.service-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:transform var(--transition); }
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover { border-color:var(--color-primary); box-shadow:0 0 30px var(--color-primary-glow); transform:translateY(-5px); }
.service-icon { width:56px; height:56px; background:rgba(0,230,118,0.1); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.25rem; color:var(--color-primary); transition:background var(--transition); }
.service-card:hover .service-icon { background:rgba(0,230,118,0.2); }
.service-title { font-family:var(--font-heading); font-size:1rem; margin-bottom:.65rem; color:#fff; }
body.light-mode .service-title { color:#0a0a0a; }
.service-desc { color:var(--color-muted); font-size:.9rem; }

/* ── PRICING CARDS ───────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:2rem; }
.pricing-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius); padding:2.5rem 2rem; position:relative; transition:all var(--transition); }
.pricing-card.featured { border-color:var(--color-primary); box-shadow:0 0 50px var(--color-primary-glow); }
.pricing-card:hover { transform:translateY(-5px); }
.pricing-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--color-primary); color:#000; font-family:var(--font-heading); font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; padding:.3rem 1rem; border-radius:100px; }
.pricing-tier { font-family:var(--font-heading); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-primary); margin-bottom:.75rem; }
.pricing-price { font-family:var(--font-heading); font-size:clamp(2.5rem,6vw,4rem); font-weight:900; color:#fff; line-height:1; }
body.light-mode .pricing-price { color:#0a0a0a; }
.pricing-period { color:var(--color-muted); font-size:.85rem; margin-bottom:2rem; }
.pricing-features { list-style:none; padding:0; margin-bottom:2rem; }
.pricing-features li { padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,0.05); display:flex; gap:.75rem; font-size:.9rem; color:var(--color-text); }
.pricing-features li .check { color:var(--color-primary); flex-shrink:0; }
.pricing-features li .cross { color:#555; flex-shrink:0; }
body.light-mode .pricing-features li { border-bottom-color: rgba(0,0,0,0.06); }

/* ── MARQUEE STRIP ───────────────────────────────────────── */
.marquee-wrap { background:rgba(0,230,118,0.04); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); padding:1rem 0; overflow:hidden; white-space:nowrap; }
.marquee-inner { display:inline-flex; gap:2.5rem; animation:marquee 28s linear infinite; }
.marquee-inner:hover { animation-play-state:paused; }
.marquee-tag { font-family:var(--font-heading); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--color-muted); display:inline-flex; align-items:center; gap:.6rem; }
.marquee-tag .dot { color:var(--color-primary); font-size:.6rem; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── TIMELINE (About) ────────────────────────────────────── */
.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; top:0; left:6px; bottom:0; width:2px; background:linear-gradient(180deg,var(--color-primary),transparent); }
.timeline-item { position:relative; padding-bottom:2.5rem; }
.timeline-dot { position:absolute; left:-1.75rem; top:.25rem; width:14px; height:14px; border-radius:50%; background:var(--color-primary); box-shadow:0 0 12px rgba(0,230,118,0.6); border:2px solid var(--color-bg); }
.timeline-year { font-family:var(--font-heading); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--color-primary); margin-bottom:.4rem; }
.timeline-title { font-size:1rem; color:#fff; margin-bottom:.5rem; }
body.light-mode .timeline-title { color:#0a0a0a; }
.timeline-text { color:var(--color-muted); font-size:.9rem; }

/* ── TEAM CARDS ──────────────────────────────────────────── */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:2rem; }
.team-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; transition:all var(--transition); text-align:center; }
.team-card:hover { border-color:var(--color-primary); box-shadow:0 0 30px var(--color-primary-glow); transform:translateY(-5px); }
.team-card img { width:100%; height:240px; object-fit:cover; }
.team-card-body { padding:1.5rem; }
.team-name { font-family:var(--font-heading); font-size:.95rem; color:#fff; margin-bottom:.3rem; }
body.light-mode .team-name { color:#0a0a0a; }
.team-role { font-size:.8rem; color:var(--color-primary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.75rem; }
.team-bio { font-size:.85rem; color:var(--color-muted); margin-bottom:1rem; }
.team-socials { display:flex; gap:.5rem; justify-content:center; }
.team-socials a { width:32px; height:32px; border-radius:8px; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; color:var(--color-muted); font-size:.85rem; transition:all var(--transition); }
.team-socials a:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* ── CONTACT FORM ────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-icon { width:48px; height:48px; flex-shrink:0; background:rgba(0,230,118,0.1); border-radius:10px; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--color-primary); }
.contact-info-label { font-family:var(--font-heading); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--color-primary); margin-bottom:.3rem; }
.contact-info-value { color:var(--color-text); font-size:.95rem; }
.contact-form { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius); padding:2.5rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-success { background:rgba(0,230,118,0.1); border:1px solid rgba(0,230,118,0.3); border-radius:var(--radius); padding:1rem 1.5rem; color:var(--color-primary); display:none; margin-bottom:1rem; }
.form-error { background:rgba(255,69,69,0.1); border:1px solid rgba(255,69,69,0.3); border-radius:var(--radius); padding:1rem 1.5rem; color:#ff6b6b; display:none; margin-bottom:1rem; }

/* ── FLOATING WHATSAPP ────────────────────────────────────── */
.whatsapp-float { position:fixed; bottom:2rem; right:2rem; z-index:9997; width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.5); transition:transform var(--transition),box-shadow var(--transition); text-decoration:none; font-size:1.5rem; color:#fff; }
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,0.7); color:#fff; }

/* ── RESULT CARDS ────────────────────────────────────────── */
.result-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }
.result-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:14px; padding:2rem; position:relative; overflow:hidden; transition:all .3s ease; }
.result-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.result-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,230,118,0.12); }
.result-card:hover::after { transform:scaleX(1); }
.result-num { font-family:var(--font-heading); font-size:2.5rem; font-weight:900; color:var(--color-primary); line-height:1; margin-bottom:.4rem; }
.result-label { color:var(--color-muted); font-size:.875rem; }
.result-project { font-size:.75rem; color:rgba(0,230,118,0.6); font-family:var(--font-heading); letter-spacing:.1em; margin-top:.5rem; }

/* ── CTA SECTION ─────────────────────────────────────────── */
.portfolio-cta { background:linear-gradient(135deg,rgba(0,230,118,0.08) 0%,rgba(0,0,0,0) 60%); border:1px solid var(--color-border); border-radius:20px; padding:5rem 3rem; text-align:center; position:relative; overflow:hidden; }
.portfolio-cta::before { content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(0,230,118,0.06),transparent 70%); pointer-events:none; }

/* ── ELEMENTOR OVERRIDES ─────────────────────────────────── */
.elementor-page .page-title-wrap { display:none !important; }
.elementor-section { position:relative !important; }
.elementor-widget-heading h1,.elementor-widget-heading h2,.elementor-widget-heading h3,.elementor-widget-heading h4 { font-family:var(--font-heading) !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px) { .stats-grid{grid-template-columns:repeat(2,1fr)} .contact-grid{grid-template-columns:1fr} }
@media(max-width:768px) {
  .nav-controls .nav-cta,.nav-controls .lang-switcher { display:none; }
  .theme-toggle { display:flex !important; }
  .stats-grid{grid-template-columns:1fr 1fr} .form-row{grid-template-columns:1fr}
  .section-pad{padding:4rem 0} .portfolio-cta{padding:3rem 1.5rem}
  .pricing-grid{grid-template-columns:1fr} .team-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px) { .team-grid{grid-template-columns:1fr} }