/* Redesign page — inherits tokens from index.css */

/* Hero */
.re-hero { padding: calc(6rem + var(--navH)) 0 2rem; }
.re-hero__grid{
  display: grid; align-items: center; gap: 3rem;
  grid-template-columns: 1.2fr 1fr;
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
}
.re-hero__cta { display:flex; gap: .75rem; margin-top: 1rem; }

@media (max-width: 1024px){
  .re-hero__grid{ grid-template-columns: 1fr; text-align:center; }
  .re-hero__cta{ justify-content:center; }
}

/* Device mock (reuse pattern from web dev page) */
.hero-mock{
  position: relative; display: grid; place-items: center; min-height: 340px;
}
.hero-mock .mock{
  display:block; border-radius:14px; background:#0b1020;
  border:1px solid rgba(255,255,255,.06); object-fit:cover;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.mock.laptop{ width:min(520px, 88%); aspect-ratio:16/10; transform:rotate(-2deg) translateY(6px); }
.mock.phone{
  position:absolute; right:6%; bottom:-6%;
  width:150px; max-width:28%; aspect-ratio:10/19; border-radius:24px; transform:rotate(8deg);
}
@media (max-width: 980px){ .mock.phone{ right:3%; bottom:-4%; width:130px; } }

/* Reasons */
.reasons .reasons-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(4, 1fr);
  max-width:1200px; margin: 0 auto; padding: 0 2rem;
}
@media (max-width: 1100px){ .reasons .reasons-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .reasons .reasons-grid{ grid-template-columns: 1fr; } }

.reason-card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.25rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.reason-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.reason-icon{ font-size:1.4rem; margin-bottom:.4rem; }

/* Before/After slider */
.ba .container{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.ba-gallery{
  display:grid; gap:1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px){ .ba-gallery{ grid-template-columns: 1fr; } }

.ba-item{
  position:relative; border-radius:16px; overflow:hidden;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  --split: 50; /* default slider percent */
}
.ba-img{
  display:block; width:100%; height: clamp(240px, 40vw, 420px); object-fit:cover;
}
.ba-img.before{ filter: saturate(.8) brightness(.9); }
.ba-img.after{
  position:absolute; inset:0;
  clip-path: inset(0 calc(100% - var(--split)*1%) 0 0);
}
.ba-range{
  position:absolute; left:50%; transform: translateX(-50%);
  bottom:14px; width:min(420px, 80%); -webkit-appearance:none; appearance:none;
  background: rgba(255,255,255,.08); height: 6px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}
.ba-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background: var(--primary); border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 3px rgba(79,70,229,.25);
}
.ba-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background: var(--primary);
  border: 2px solid rgba(255,255,255,.9);
}

/* Process — horizontal cards */
.process .container{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.process-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns: clamp(220px, 26vw, 280px);
  gap:1rem; overflow-x:auto; padding-bottom:.25rem; scroll-snap-type:x mandatory; list-style: none;
}
.process-rail::-webkit-scrollbar{ height:8px; }
.process-rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius:999px; }

.step{
  scroll-snap-align:start;
  background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background: rgba(var(--primary-rgb), .12); color: var(--text-light);
  border:1px solid rgba(var(--primary-rgb), .25); font-weight:600; margin-bottom:.35rem;
}

/* Desktop: show more at once */
@media (min-width: 1100px){
  .process-rail{
    overflow: visible; grid-auto-flow: initial; grid-auto-columns: initial;
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Benefits */
.benefits .container{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.benefits-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){ .benefits-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .benefits-grid{ grid-template-columns: 1fr; } }

.b-card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.2rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.b-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

.cta-row{ display:flex; gap:.75rem; justify-content:center; margin-top: 2rem; }

/* Perf niceties */
.re-hero, .reasons, .ba, .process, .benefits{ content-visibility:auto; contain-intrinsic-size: 800px; }

/* Respect reduced motion; keep look, just remove hover motion */
@media (prefers-reduced-motion: reduce){
  .reason-card:hover,
  .step:hover,
  .b-card:hover { transform: none; box-shadow: none; }
}

/* Contain BA items to their own paint/layer box (perf) */
.ba-item { contain: paint; }

/* Smoother clip-path updates while dragging the slider (only during interaction) */
.ba-item.interacting .ba-img.after { will-change: clip-path; }


/* ===== Redesign Pricing — Horizontal scroller ===== */
#pricing-redesign .price-scroller-wrap{ position:relative; }
#pricing-redesign .price-scroller{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scroll-snap-type: x mandatory;
}
#pricing-redesign .price-scroller::-webkit-scrollbar{ height: 8px; }
#pricing-redesign .price-scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }

#pricing-redesign .hplan{
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:grid; grid-template-rows: auto 1fr auto; gap: .7rem;
  min-height: 260px;
}
#pricing-redesign .hplan:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
#pricing-redesign .hplan.featured{ border-color: rgba(var(--primary-rgb,64,92,156), .35); box-shadow: 0 14px 36px rgba(0,0,0,.24); }

#pricing-redesign .ribbon{
  position:absolute; top: 12px; right: 12px;
  background: var(--gradient, linear-gradient(135deg,#405c9c,#fec200));
  color:#fff; font-size:.78rem; font-weight:600;
  padding:.35rem .55rem; border-radius:999px;
}

#pricing-redesign .hplan-head{ margin-bottom: .2rem; }
#pricing-redesign .hplan-name{ color: var(--white); margin: 0 0 .1rem; font-size: 1.12rem; }
#pricing-redesign .hplan-tag{ color: var(--text-gray); margin: 0; }

#pricing-redesign .hprice span{
  display:inline-flex; align-items:baseline; gap:.3rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding:.42rem .7rem;
  color: var(--text-light);
}
#pricing-redesign .hprice strong{ color: var(--white); font-size: 1.05rem; }

#pricing-redesign .hplan-list{
  list-style: none; padding: 0; margin: 0;
  display:grid; gap:.42rem; color: var(--text-light);
}
#pricing-redesign .hplan-list li::before{ content:"✓ "; color: var(--primary-light, #9fb6ff); }

#pricing-redesign .hplan-cta{ display:grid; gap:.35rem; }
#pricing-redesign .hplan-cta .note{ color: var(--text-gray); font-size:.85rem; }

/* Desktop: switch to clean 3-up grid, no horizontal scroll */
@media (min-width: 1100px){
  #pricing-redesign .price-scroller{
    overflow: visible;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(3, 1fr);
    scroll-snap-type: none;
  }
}

/* Add-ons */
#pricing-redesign .addons-title{
  color: var(--white);
  margin: 1.1rem 0 .4rem; font-size: 1.05rem;
}
#pricing-redesign .addons-list{
  list-style: none; padding: 0; margin: 0 0 .6rem;
  display: grid; gap: .35rem; color: var(--text-light);
}
#pricing-redesign .addons-note{ color: var(--text-gray); }