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

body {
  font-family: 'Inter', sans-serif;
  background:#0b1020; color:#e6edf3; line-height:1.6;
  animation: fadeIn .8s ease-in;
}

/* Animations */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Hero */
.hero {
  text-align:center; padding:60px 20px;
  background:linear-gradient(135deg,#0b1020,#111831);
}
.avatar {
  width:140px; height:140px; border-radius:50%;
  border:3px solid #34d399; margin-bottom:15px; object-fit:cover;
  transition:transform .3s ease, box-shadow .3s ease;
}
.avatar:hover { transform:scale(1.08); box-shadow:0 0 15px #34d399; }
.hero h1 { font-size:28px; margin:10px 0 4px; }
.hero h2 { font-size:18px; color:#60a5fa; margin-bottom:8px; }
.hero p { max-width:640px; margin:0 auto; color:#94a3b8; }

/* Toggle */
.toggle {
  margin-top:14px; padding:8px 16px; border:none; border-radius:8px;
  background:#1d274a; color:#e6edf3; cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.toggle:hover { transform:translateY(-2px); background:#243062; }

/* Sections */
section { max-width:980px; margin:48px auto; padding:0 20px; animation:slideUp .6s ease; }
section h2 { color:#60a5fa; font-size:22px; margin-bottom:14px; border-bottom:2px solid #34d399; display:inline-block; padding-bottom:4px; }
section h3 { margin-top:8px; color:#cbd5e1; font-size:16px; }
ul { list-style:none; }
ul li { margin-bottom:8px; }

/* Cards */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.card {
  background:#111831; padding:20px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform:translateY(-8px); box-shadow:0 8px 20px rgba(0,0,0,.6); }
.card h3 { margin-bottom:10px; font-size:18px; color:#34d399; }
.card p { color:#94a3b8; font-size:14px; }
.card ul li { color:#cbd5e1; }

/* Links */
a { color:#34d399; text-decoration:none; }
a:hover { color:#60a5fa; text-decoration:underline; }

/* Footer */
footer { text-align:center; padding:20px; background:#111831; color:#94a3b8; font-size:14px; }

/* ===== Contact icons ===== */
.contact-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  justify-content: center;
}

.contact-icons a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111831;
  border: 1px solid #1f2937;
  padding: 10px 14px;
  border-radius: 10px;
  color: #e6edf3;
  font-size: 14px;
  text-decoration: none;
  transition: transform .2s ease, background .25s ease, border-color .25s ease;
}

.contact-icons a i {
  font-size: 18px;
  color: #34d399;
}

.contact-icons a:hover {
  transform: translateY(-3px);
  background: #16213a;
  border-color: #243062;
}

/* Light mode */
body.light { background:#f9fafb; color:#111; }
body.light .hero { background:linear-gradient(135deg,#e2e8f0,#f9fafb); }
body.light .hero h2 { color:#2563eb; }
body.light section h2 { color:#2563eb; border-color:#2563eb; }
body.light .card { background:#ffffff; color:#111; box-shadow:0 4px 12px rgba(0,0,0,.08); }
body.light .card h3 { color:#2563eb; }
body.light .card p, body.light .card ul li { color:#374151; }
body.light footer { background:#e2e8f0; color:#111; }
body.light a { color:#2563eb; }
body.light a:hover { color:#111; }
body.light .toggle { background:#e2e8f0; color:#111; }
body.light .toggle:hover { background:#cfd8e3; }
body.light .contact-icons a {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
}
body.light .contact-icons a i {
  color: #2563eb;
}
body.light .contact-icons a:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

/* ===== Proof (Overlay Slider) — Scoped & Strict ===== */
#proof .card.proof-card { padding: 0; background: transparent; }
#proof .card.proof-card > img { display: none !important; } /* safety: hide any stray img directly under card */

#proof .ba-slider { position: relative; overflow: hidden; border-radius: 12px; background: #000; }
#proof .ba-slider img { width: 100%; height: auto; display: block; }
#proof .ba-slider .resize { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; }
#proof .ba-slider .resize img { width: 100%; height: auto; display: block; }
#proof .ba-slider .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #34d399; cursor: ew-resize; }

#proof .ba-slider::before,
#proof .ba-slider::after {
  position: absolute; top: 10px; padding: 4px 10px; font-size: 13px; font-weight: 700;
  border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; z-index: 5;
}
#proof .ba-slider::before { content: "Before"; left: 10px; }
#proof .ba-slider::after  { content: "After";  right: 10px; }