/* ============================================================
   Before After Slider — Serenity Toolkit Pro
============================================================ */
.bas { font-family:'DM Sans',sans-serif; background-color:#1c1c1c; padding:80px 40px 100px; --bas-accent:#aaff00; }
.bas-inner { max-width:1160px; margin:0 auto; }

/* heading */
.bas-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:56px; gap:40px; }
.bas-eyebrow { font-size:10px; letter-spacing:.22em; color:var(--bas-accent,#aaff00); text-transform:uppercase; font-weight:500; margin-bottom:14px; display:block; }
.bas-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(42px,5.5vw,72px); color:#f0f0f0; letter-spacing:.02em; line-height:.95; }
.bas-sub { font-size:14px; color:#666; font-weight:300; line-height:1.7; max-width:280px; text-align:right; }

/* body grid */
.bas-body { display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:center; }

/* ── SLIDER ── */
.bas-slider-wrap { position:relative; border-radius:20px; overflow:hidden; user-select:none; cursor:ew-resize; height:560px; box-shadow:0 32px 80px rgba(0,0,0,.4); }

/* panels */
.bas-after,
.bas-before { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.bas-after   { background-color:#0f1f0a; }
.bas-before  { background-color:#1e1e1e; }

.bas-before-wrap { position:absolute; inset:0; clip-path:inset(0 50% 0 0); transition:clip-path .05s linear; }

/* panel content — phone + stats stacked */
.bas-panel-content { display:flex; flex-direction:column; align-items:center; gap:20px; padding:28px 20px; height:100%; justify-content:center; }

/* ── PHONE MOCKUP ── */
.bas-phone {
  width:180px;
  border-radius:28px;
  border:2.5px solid rgba(255,255,255,0.18);
  background:#0a0a0a;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.bas-phone-notch {
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:48px; height:5px; background:rgba(255,255,255,0.14); border-radius:3px; z-index:2;
}
/* subtle screen glare */
.bas-phone::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
  background:linear-gradient(145deg, rgba(255,255,255,0.06) 0%, transparent 50%);
}
.bas-phone-screen { width:100%; padding-top:26px; /* clears notch */ }
.bas-phone-screen img { width:100%; height:auto; display:block; object-fit:cover; }

/* placeholder when no image */
.bas-phone-placeholder { width:100%; aspect-ratio:9/16; }
.bas-ph-before { background:linear-gradient(160deg,#2a2a2a,#1a1a1a); }
.bas-ph-after  { background:linear-gradient(160deg,#1a3a0f,#0f1f0a); }

/* panel stats */
.bas-panel-stats { display:flex; gap:16px; justify-content:center; }
.bas-pstat { text-align:center; }
.bas-pstat-num { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:.06em; display:block; line-height:1; }
.bas-pstat-label { font-size:9px; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; display:block; }
.bas-panel-stats--before .bas-pstat-num   { color:#555; }
.bas-panel-stats--before .bas-pstat-label { color:#444; }
.bas-panel-stats--after  .bas-pstat-num   { color:var(--bas-accent,#aaff00); }
.bas-panel-stats--after  .bas-pstat-label { color:rgba(170,255,0,.5); }

/* pills */
.bas-pill { position:absolute; top:16px; font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:.14em; padding:7px 16px; border-radius:100px; z-index:4; pointer-events:none; }
.bas-pill-before { left:16px;  background:rgba(0,0,0,.55); color:#f0f0f0; border:.5px solid rgba(255,255,255,.2); }
.bas-pill-after  { right:16px; background:var(--bas-accent,#aaff00); color:#111; }

/* handle */
.bas-handle { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:2px; background:#fff; z-index:5; pointer-events:none; }
.bas-handle-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,0,0,.4); pointer-events:none; }
.bas-handle-btn svg { width:20px; height:20px; color:#111; }
.bas-hint { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.35); white-space:nowrap; z-index:5; pointer-events:none; animation:bas-hint 3s ease 1s forwards; }
@keyframes bas-hint { 0%,70%{opacity:1} 100%{opacity:0} }

/* ── RIGHT STATS ── */
.bas-stats { display:flex; flex-direction:column; gap:16px; }
.bas-stat-card { background:#232323; border:.5px solid rgba(255,255,255,.06); border-radius:16px; padding:20px 24px; opacity:0; transform:translateX(32px); transition:opacity .6s ease,transform .6s ease; }
.bas-stat-card:nth-child(1){transition-delay:.1s} .bas-stat-card:nth-child(2){transition-delay:.2s}
.bas-stat-card:nth-child(3){transition-delay:.3s} .bas-stat-card:nth-child(4){transition-delay:.4s}
.bas-stat-card.risen { opacity:1; transform:translateX(0); }
.bas-stat-label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#555; margin-bottom:8px; display:block; }
.bas-stat-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.bas-stat-before { font-family:'Bebas Neue',sans-serif; font-size:26px; color:#444; letter-spacing:.04em; line-height:1; text-decoration:line-through; text-decoration-color:#333; }
.bas-stat-arrow { color:var(--bas-accent,#aaff00); font-size:13px; }
.bas-stat-after { font-family:'Bebas Neue',sans-serif; font-size:32px; color:var(--bas-accent,#aaff00); letter-spacing:.04em; line-height:1; }
.bas-stat-growth { margin-left:auto; font-size:10px; color:var(--bas-accent,#aaff00); background:rgba(170,255,0,.1); border:.5px solid rgba(170,255,0,.2); padding:3px 9px; border-radius:100px; letter-spacing:.06em; font-weight:500; align-self:center; }
.bas-client { margin-top:8px; padding-top:20px; border-top:.5px solid rgba(255,255,255,.05); display:flex; align-items:center; gap:12px; opacity:0; transform:translateX(32px); transition:opacity .6s ease .5s,transform .6s ease .5s; }
.bas-client.risen { opacity:1; transform:translateX(0); }
.bas-client-avatar { width:38px; height:38px; border-radius:50%; background:rgba(170,255,0,.15); border:1px solid rgba(170,255,0,.25); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:13px; color:var(--bas-accent,#aaff00); flex-shrink:0; }
.bas-client-name { font-size:13px; font-weight:500; color:#f0f0f0; line-height:1.2; }
.bas-client-handle { font-size:11px; color:#555; font-weight:300; }
.bas-period { font-size:10px; color:#555; letter-spacing:.08em; text-transform:uppercase; margin-left:auto; }

/* ── RESPONSIVE ── */
@media(max-width:860px) {
  .bas { padding:60px 24px 80px; }
  .bas-head { flex-direction:column; align-items:flex-start; }
  .bas-sub { text-align:left; max-width:100%; }
  .bas-body { grid-template-columns:1fr; }
  .bas-slider-wrap { height:460px; }
  .bas-stats { flex-direction:row; flex-wrap:wrap; }
  .bas-stat-card { flex:1 1 calc(50% - 8px); transform:translateY(24px); }
  .bas-stat-card.risen { transform:translateY(0); }
  .bas-client { transform:translateY(24px); flex:1 1 100%; }
  .bas-client.risen { transform:translateY(0); }
  .bas-phone { width:140px; }
}
@media(max-width:520px) {
  .bas { padding:48px 18px 72px; }
  .bas-slider-wrap { height:400px; }
  .bas-stats { flex-direction:column; }
  .bas-stat-card { flex:none; }
  .bas-phone { width:120px; border-radius:20px; }
}