/* ============================================================
   CanPeople — styles.css
   Design tokens, layout, components, animations
   ============================================================ */

/* ── RESET & TOKENS ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --red:#CC1A25; --red-light:#FDEAEA; --red-dark:#8C0E16;
  --red-glow:rgba(204,26,37,0.35);
  --navy:#1A2B6B; --navy-mid:#2D4299; --navy-light:#E8EBF5; --navy-dark:#0D1840;
  --white:#FFFFFF; --off:#F4F4F7;
  --gray-100:#E8E8ED; --gray-300:#B8B7BE; --gray-500:#6E6D78; --gray-700:#26262E;
  --font:'Montserrat',sans-serif;
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --shadow-sm:0 2px 8px rgba(26,43,107,.06);
  --shadow-md:0 8px 28px rgba(26,43,107,.09);
  --shadow-lg:0 20px 60px rgba(26,43,107,.13);
  --shadow-red:0 8px 28px rgba(204,26,37,.35);
}
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--off); color:var(--gray-700); overflow-x:hidden; }

/* ── SCROLL PROGRESS ── */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px;
  background:linear-gradient(90deg,var(--red),var(--navy));
  z-index:300; width:0%;
  box-shadow:0 0 10px var(--red-glow);
  transition:width .08s linear;
}

/* ── PARTICLES ── */
.particles { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.particle {
  position:absolute; border-radius:50%; opacity:.4;
  animation:floatP linear infinite;
}
@keyframes floatP { 0%{transform:translateY(110vh) scale(0.8)} 100%{transform:translateY(-10vh) scale(1.1)} }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 64px; height:80px;
  background:rgba(244,244,247,0.82);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:0.5px solid rgba(26,43,107,0.07);
  transition:height .35s var(--ease-spring), background .35s;
}
nav.shrink { height:64px; background:rgba(244,244,247,0.96); box-shadow:var(--shadow-sm); }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:44px; width:auto; display:block; transition:transform .3s var(--ease-spring); }
.nav-logo:hover img { transform:scale(1.04); }
nav.shrink .nav-logo img { height:36px; }
.nav-links { display:flex; align-items:center; gap:38px; list-style:none; }
.nav-links a {
  font-size:13.5px; font-weight:600; color:var(--gray-500);
  text-decoration:none; position:relative; transition:color .2s;
  letter-spacing:0.01em;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-5px;
  width:0; height:2px; background:var(--red); transition:width .3s;
}
.nav-links a:hover { color:var(--navy); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  background:var(--red) !important; color:#fff !important;
  padding:11px 26px; border-radius:10px; font-weight:700 !important;
  box-shadow:var(--shadow-red); transition:transform .2s, box-shadow .2s !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 14px 36px var(--red-glow) !important; }

/* ── BUTTONS ── */
.btn-primary {
  background:var(--red); color:#fff; padding:18px 36px;
  border-radius:12px; font-family:var(--font); font-size:16px; font-weight:700;
  border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  box-shadow:var(--shadow-red); letter-spacing:-.01em;
}
.btn-primary::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .55s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 44px var(--red-glow); }
.btn-primary:hover::before { left:100%; }
.btn-primary.large { padding:22px 48px; font-size:18px; }
.btn-ghost {
  background:rgba(255,255,255,.55); color:var(--navy); padding:18px 36px;
  border-radius:12px; font-family:var(--font); font-size:16px; font-weight:600;
  border:1.5px solid rgba(26,43,107,.2); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  backdrop-filter:blur(6px); transition:all .25s;
}
.btn-ghost:hover { border-color:var(--navy); background:var(--navy-light); transform:translateY(-2px); }
.btn-ghost-dark {
  background:rgba(255,255,255,.08); color:#fff; padding:18px 36px;
  border-radius:12px; font-family:var(--font); font-size:16px; font-weight:600;
  border:1.5px solid rgba(255,255,255,.2); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:all .25s;
}
.btn-ghost-dark:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); transform:translateY(-2px); }

/* ── SECTION COMMON ── */
section { padding:130px 80px; position:relative; z-index:1; }
.reveal {
  opacity:0; transform:translateY(44px);
  transition:opacity .8s var(--ease-spring), transform .8s var(--ease-spring);
}
.reveal.in { opacity:1; transform:translateY(0); }
.reveal.d1{transition-delay:.1s} .reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s} .reveal.d4{transition-delay:.4s}
.reveal.d5{transition-delay:.5s}
.s-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.s-eyebrow-line { width:30px; height:2px; background:var(--red); flex-shrink:0; }
.s-eyebrow span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--red); }
.s-title {
  font-size:clamp(36px,4.2vw,58px); font-weight:900; color:var(--navy-dark);
  line-height:1.06; letter-spacing:-.03em; margin-bottom:28px;
}
.s-title .grad {
  background:linear-gradient(115deg,var(--red) 0%,#FF5A4D 50%,var(--red) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 4s linear infinite;
}
.s-subtitle { font-size:18px; line-height:1.65; color:var(--gray-500); font-weight:400; max-width:580px; margin-bottom:14px; }
.center-block { text-align:center; max-width:680px; margin:0 auto 88px; }
.center-block .s-eyebrow { justify-content:center; }
.center-block .s-subtitle { margin:0 auto; }
@keyframes shimmer { to { background-position:200% center; } }

/* ── HERO ── */
.hero { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; position:relative; z-index:1; }
.hero-left { display:flex; flex-direction:column; justify-content:center; padding:130px 60px 90px 80px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:10px; margin-bottom:30px;
  background:rgba(204,26,37,.08); border:1px solid rgba(204,26,37,.22);
  padding:9px 18px; border-radius:99px; width:fit-content;
}
.hero-badge .pulse { width:8px; height:8px; border-radius:50%; background:var(--red); position:relative; flex-shrink:0; }
.hero-badge .pulse::after {
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--red);
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(3.2);opacity:0} }
.hero-badge span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--red); }
.hero h1 { font-size:clamp(44px,5.2vw,78px); font-weight:900; line-height:1.04; color:var(--navy-dark); margin-bottom:24px; letter-spacing:-.03em; }
.shimmer-text {
  background:linear-gradient(115deg, var(--red), #FF5A4D, #FF9D9D, #FF5A4D, var(--red));
  background-size:300% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
  font-weight:900;
  letter-spacing:-.02em;
}
.hero-sub { font-size:18px; line-height:1.65; color:var(--gray-500); max-width:500px; margin-bottom:18px; font-weight:400; }
.hero-sub strong { color:var(--navy-dark); font-weight:700; }
.hero-tagline { font-size:22px; font-weight:800; color:var(--navy-dark); letter-spacing:-.02em; margin-bottom:36px; }
.hero-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:40px; }
.hero-pills { display:flex; gap:10px; flex-wrap:wrap; }
.hero-pill {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.7); border:1px solid rgba(26,43,107,.1);
  padding:8px 16px; border-radius:99px; font-size:12px; font-weight:700; color:var(--navy);
  backdrop-filter:blur(6px);
}
.hero-pill::before { content:'✓'; color:var(--red); font-weight:900; }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.hero-left > * { opacity:0; animation:fadeUp .7s ease forwards; }
.hero-badge{animation-delay:.1s} .hero h1{animation-delay:.24s} .hero-sub{animation-delay:.38s}
.hero-tagline{animation-delay:.48s} .hero-actions{animation-delay:.56s} .hero-pills{animation-delay:.68s}
.hero-right { animation:fadeUp .9s .3s ease forwards; opacity:0; }

/* hero right */
.hero-right {
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:130px 56px 90px 48px; background:var(--navy-dark); overflow:hidden;
}
.hero-mesh {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 20% 25%,rgba(204,26,37,.24) 0%,transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 75%,rgba(45,66,153,.45) 0%,transparent 60%);
  animation:meshMove 14s ease-in-out infinite alternate;
}
@keyframes meshMove { 0%{transform:scale(1)} 100%{transform:scale(1.15) translate(-18px,16px)} }

/* slider */
.slider-outer { position:relative; z-index:3; }
.slider-label {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:rgba(255,255,255,.35); margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.slider-label::before {
  content:''; width:6px; height:6px; border-radius:50%; background:var(--red);
  box-shadow:0 0 8px var(--red); flex-shrink:0;
  animation:pulseSmall 2s ease-out infinite;
}
@keyframes pulseSmall {
  0%{box-shadow:0 0 0 0 rgba(204,26,37,.7)}
  70%{box-shadow:0 0 0 8px rgba(204,26,37,0)}
  100%{box-shadow:0 0 0 0 rgba(204,26,37,0)}
}
.slider-track-wrap { overflow:hidden; border-radius:20px; box-shadow:0 28px 64px rgba(0,0,0,.4); }
.slider-track { display:flex; transition:transform .6s var(--ease-spring); will-change:transform; }
.slide-card {
  min-width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11);
  border-radius:20px; padding:28px; box-sizing:border-box; backdrop-filter:blur(16px);
}
.sc-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.sc-avatar { width:52px; height:52px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:#fff; }
.sc-name { font-size:16px; font-weight:700; color:#fff; line-height:1.3; }
.sc-role { font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; font-weight:500; }
.sc-badge { margin-left:auto; flex-shrink:0; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:5px 12px; border-radius:99px; }
.badge-active { background:rgba(204,26,37,.25); border:1px solid rgba(204,26,37,.4); color:#FF9D9D; }
.badge-placed { background:rgba(29,158,117,.2); border:1px solid rgba(29,158,117,.35); color:#5DCAA5; }
.badge-new { background:rgba(45,66,153,.3); border:1px solid rgba(45,66,153,.5); color:#A0B4FF; }
.sc-skills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.sc-skill { background:rgba(255,255,255,.09); border:.5px solid rgba(255,255,255,.13); color:rgba(255,255,255,.72); font-size:11px; font-weight:600; padding:5px 11px; border-radius:7px; }
.sc-match-row { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.sc-match-label { font-size:11px; color:rgba(255,255,255,.4); white-space:nowrap; font-weight:600; }
.sc-bar { flex:1; height:4px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.sc-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--red),#FF5A4D); transition:width 1.4s var(--ease-spring); }
.sc-pct { font-size:13px; font-weight:700; color:#fff; min-width:32px; text-align:right; }
.sc-detail { display:flex; gap:8px; padding-top:16px; border-top:.5px solid rgba(255,255,255,.08); }
.sc-detail-item { flex:1; background:rgba(255,255,255,.05); border-radius:10px; padding:10px 12px; text-align:center; }
.sc-detail-val { font-size:14px; font-weight:800; color:#fff; margin-bottom:2px; }
.sc-detail-key { font-size:10px; color:rgba(255,255,255,.4); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.slider-dots { display:flex; align-items:center; justify-content:space-between; margin-top:20px; }
.dots-row { display:flex; gap:8px; }
.dot { width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.2); cursor:pointer; transition:all .35s var(--ease-spring); }
.dot.active { background:var(--red); width:24px; box-shadow:0 0 10px var(--red); }
.slider-arrows { display:flex; gap:8px; }
.slider-arrow { width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:all .2s; backdrop-filter:blur(6px); font-family:inherit; }
.slider-arrow:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.hero-stats { display:flex; gap:1px; margin-top:20px; background:rgba(255,255,255,.06); border-radius:14px; overflow:hidden; position:relative; z-index:3; }
.hero-stat { flex:1; padding:18px 16px; background:rgba(255,255,255,.03); text-align:center; transition:background .2s; }
.hero-stat:hover { background:rgba(255,255,255,.07); }
.hero-stat-num { font-size:22px; font-weight:900; color:#fff; letter-spacing:-.03em; margin-bottom:3px; }
.hero-stat-num .accent { color:var(--red); }
.hero-stat-label { font-size:11px; color:rgba(255,255,255,.4); font-weight:600; text-transform:uppercase; letter-spacing:.06em; line-height:1.3; }

/* ── PROBLEM ── */
.problem { background:var(--white); text-align:center; }
/* Problem cards wrapper */
.problem-cards-wrap { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:1100px; margin:64px auto 0; }
.problem-card { border-radius:24px; padding:48px 40px; text-align:left; transition:transform .3s, box-shadow .3s; position:relative; overflow:hidden; }
.problem-card:hover { transform:translateY(-6px); }
/* Left card - challenge */
.problem-card-left { background:var(--off); border:1px solid var(--gray-100); }
/* Right card - solution */
.problem-card-right {
  background:linear-gradient(135deg, var(--navy-dark) 0%, #1a3a7f 100%);
  color:#fff;
  box-shadow:0 20px 60px rgba(13,24,64,.25);
}
.card-badge { display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; padding:6px 14px; border-radius:8px; margin-bottom:20px; }
.problem-card-left .card-badge { background:var(--gray-100); color:var(--gray-500); }
.problem-card-right .card-badge { background:var(--red); color:#fff; }
.card-heading { font-size:26px; font-weight:900; margin-bottom:28px; letter-spacing:-.02em; line-height:1.15; }
.problem-card-left .card-heading { color:var(--navy-dark); }
.problem-card-right .card-heading { color:#fff; }
.card-list { list-style:none; display:flex; flex-direction:column; gap:14px; }
.card-list li {
  font-size:14.5px; font-weight:500; line-height:1.6;
  display:flex; align-items:flex-start; gap:12px;
}
.problem-card-left .card-list li { color:var(--gray-700); }
.problem-card-right .card-list li { color:rgba(255,255,255,.85); }
.list-icon { font-weight:800; font-size:12px; flex-shrink:0; margin-top:2px; }
.problem-card-left .list-icon { color:var(--gray-300); }
.problem-card-right .list-icon { color:var(--gray-300); }
.list-icon.check { color:#4CAF50; }
/* Mobile */
@media(max-width:900px) {
  .problem-cards-wrap { grid-template-columns:1fr; gap:24px; margin:48px auto 0; }
  .problem-card { padding:32px 28px; }
  .card-heading { font-size:22px; }
}
.problem-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:900px; margin:88px auto 0; text-align:center; }
.problem-stat { padding:36px 20px; border-radius:20px; transition:transform .3s, background .3s; }
.problem-stat:hover { transform:translateY(-8px); background:var(--off); }
.problem-stat-num { font-size:72px; font-weight:900; color:var(--red); line-height:1; margin-bottom:12px; letter-spacing:-.04em; }
.problem-stat-label { font-size:15px; color:var(--gray-500); line-height:1.5; max-width:200px; margin:0 auto; font-weight:500; }

/* ── WHAT ── */
.what { background:var(--off); }
.what-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.what-item {
  display:flex; gap:20px; padding:22px 0;
  border-bottom:.5px solid rgba(26,43,107,.08);
  opacity:0; transform:translateX(30px);
  transition:opacity .6s, transform .6s;
}
.what-item.in { opacity:1; transform:translateX(0); }
.what-item:last-child { border-bottom:none; }
.what-item-icon {
  width:44px; height:44px; border-radius:11px; background:var(--navy-light);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:var(--navy-dark);
  flex-shrink:0; transition:transform .3s;
}
.what-item:hover .what-item-icon { transform:scale(1.12) rotate(-6deg); }
.what-item-title { font-size:15px; font-weight:700; color:var(--navy-dark); margin-bottom:5px; }
.what-item-desc { font-size:13px; color:var(--gray-500); line-height:1.55; font-weight:400; }

/* ── REVERSE RECRUITMENT PROCESS — HORIZONTAL ── */
.rr-process-section {
  background:var(--off);
  padding:130px 80px;
}
.process-container {
  max-width:1320px;
  margin:0 auto;
}
.process-journey-horizontal {
  position:relative;
  margin-top:100px;
}
.process-line-bg-horizontal {
  position:absolute;
  top:48px;
  left:0;
  right:0;
  height:3px;
  background:var(--gray-100);
  z-index:0;
}
.process-line-fill-horizontal {
  position:absolute;
  top:48px;
  left:0;
  height:3px;
  background:linear-gradient(90deg, var(--red) 0%, var(--navy) 100%);
  z-index:1;
  transition:width .1s ease-out;
}
.process-grid-horizontal {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  position:relative;
  z-index:2;
}
.process-col-horizontal {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.process-step-group {
  width:100%;
  text-align:center;
  opacity:0;
  transform:translateY(44px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.process-col-horizontal:nth-child(1) .process-step-group { transition-delay:0.1s; }
.process-col-horizontal:nth-child(2) .process-step-group { transition-delay:0.2s; }
.process-col-horizontal:nth-child(3) .process-step-group { transition-delay:0.3s; }
.process-col-horizontal:nth-child(4) .process-step-group { transition-delay:0.4s; }
.process-col-horizontal.in .process-step-group {
  opacity:1;
  transform:translateY(0);
}
.process-circle-top {
  display:flex;
  justify-content:center;
  margin-bottom:28px;
}
.process-circle-outer-horizontal {
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  border-radius:50%;
  background:var(--white);
  border:3px solid var(--red-light);
  box-shadow:0 12px 32px rgba(204,26,37,.18);
  position:relative;
  animation:circlePulseHorizontal 2.6s ease-out infinite;
}
@keyframes circlePulseHorizontal {
  0% {
    box-shadow:0 12px 32px rgba(204,26,37,.18);
    transform:scale(1);
  }
  50% {
    box-shadow:0 16px 48px rgba(204,26,37,.25);
  }
  100% {
    box-shadow:0 12px 32px rgba(204,26,37,.18);
    transform:scale(1);
  }
}
.process-circle-inner-horizontal {
  display:flex;
  align-items:center;
  justify-content:center;
  width:68px;
  height:68px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--red) 0%, #FF5A4D 100%);
  box-shadow:0 6px 16px var(--red-glow);
}
.process-icon-horizontal {
  width:40px;
  height:40px;
  color:#fff;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.process-content-below {
  flex:1;
}
.process-step-title-horizontal {
  font-size:18px;
  font-weight:800;
  color:var(--navy-dark);
  margin-bottom:12px;
  letter-spacing:-.01em;
  line-height:1.35;
}
.process-step-desc-horizontal {
  font-size:13px;
  color:var(--gray-500);
  line-height:1.65;
  margin-bottom:16px;
  font-weight:400;
}
.process-step-list-horizontal {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.process-step-list-horizontal li {
  font-size:12px;
  font-weight:500;
  color:var(--navy-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  transition:transform .3s ease;
}
.process-step-list-horizontal li::before {
  content:'✓';
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  background:var(--red);
  border-radius:50%;
  color:#fff;
  font-size:9px;
  font-weight:900;
  flex-shrink:0;
  transition:transform .3s ease;
}
.process-col-horizontal:hover .process-circle-outer-horizontal {
  transform:scale(1.1);
  border-color:var(--red);
}
.process-col-horizontal:hover .process-step-list-horizontal li {
  transform:translateY(-2px);
}
.process-col-horizontal:hover .process-step-list-horizontal li::before {
  transform:scale(1.2);
}

/* Mobile */
@media(max-width:1200px) {
  .rr-process-section {
    padding:96px 28px;
  }
  .process-journey-horizontal {
    margin-top:80px;
  }
  .process-grid-horizontal {
    gap:20px;
  }
  .process-circle-top {
    margin-bottom:24px;
  }
}
@media(max-width:992px) {
  .rr-process-section {
    padding:80px 20px;
  }
  .process-grid-horizontal {
    grid-template-columns:repeat(2, 1fr);
    gap:32px;
  }
  .process-line-bg-horizontal,
  .process-line-fill-horizontal {
    display:none;
  }
  .process-circle-outer-horizontal {
    width:80px;
    height:80px;
  }
  .process-circle-inner-horizontal {
    width:56px;
    height:56px;
  }
  .process-step-number-horizontal {
    font-size:20px;
  }
  .process-step-title-horizontal {
    font-size:16px;
    margin-bottom:10px;
  }
  .process-step-desc-horizontal {
    font-size:12px;
    margin-bottom:14px;
  }
  .process-step-list-horizontal li {
    font-size:11px;
  }
}
@media(max-width:640px) {
  .rr-process-section {
    padding:60px 16px;
  }
  .process-grid-horizontal {
    grid-template-columns:1fr;
    gap:24px;
  }
  .process-journey-horizontal {
    margin-top:60px;
  }
  .process-circle-outer-horizontal {
    width:72px;
    height:72px;
  }
  .process-circle-inner-horizontal {
    width:48px;
    height:48px;
  }
  .process-step-number-horizontal {
    font-size:18px;
  }
  .process-step-title-horizontal {
    font-size:15px;
    margin-bottom:8px;
  }
  .process-step-desc-horizontal {
    font-size:12px;
    margin-bottom:12px;
    line-height:1.6;
  }
}

/* ── HOW IT WORKS — SCROLL JOURNEY ── */
.how { background:var(--white); }
.steps-journey {
  max-width:860px; margin:0 auto;
  position:relative;
}
/* the animated progress line */
.steps-line {
  position:absolute;
  left:31px; top:32px; bottom:32px;
  width:2px;
  background:var(--gray-100);
  border-radius:99px;
  overflow:hidden;
}
.steps-line-fill {
  position:absolute;
  top:0; left:0; right:0;
  height:0%;
  background:linear-gradient(to bottom, var(--red), var(--navy));
  border-radius:99px;
  transition:height .6s var(--ease-spring);
}
.step-row {
  display:flex; gap:36px; align-items:flex-start;
  padding:20px 0; position:relative;
  opacity:0; transform:translateX(-24px);
  transition:opacity .65s var(--ease-spring), transform .65s var(--ease-spring);
}
.step-row.in { opacity:1; transform:translateX(0); }
/* red connector dot — center-aligned with .step-num circle
   step-num-wrap has padding-top:6px; step-num is 64px tall
   so circle center = 6px + 32px = 38px from step-row top */
.step-dot {
  position:absolute;
  left:24px;
  top:38px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--gray-100);
  border:2px solid var(--gray-300);
  transform:translate(-50%, -50%);
  z-index:3;
  transition:all .4s var(--ease-spring);
  flex-shrink:0;
}
.step-row.active-step .step-dot {
  background:var(--red);
  border-color:var(--red);
  box-shadow:0 0 0 6px rgba(204,26,37,.15), 0 0 18px var(--red-glow);
  transform:translate(-50%, -50%) scale(1.25);
}
.step-num-wrap { position:relative; z-index:2; flex-shrink:0; padding-top:6px; }
.step-num {
  width:64px; height:64px; border-radius:50%; background:var(--off);
  border:2px solid var(--gray-100); display:flex; align-items:center; justify-content:center;
  transition:all .4s var(--ease-spring); position:relative;
}
.step-row.active-step .step-num {
  background:var(--navy-dark); border-color:var(--navy-dark);
  box-shadow:0 8px 24px rgba(13,24,64,.25);
}
.step-num-inner { font-size:10px; font-weight:900; color:var(--gray-300); letter-spacing:.08em; text-align:center; transition:color .4s; }
.step-row.active-step .step-num-inner { color:#fff; }
.step-body {
  flex:1; background:var(--off); border-radius:18px; padding:28px 32px;
  border:1px solid rgba(26,43,107,.06);
  transition:transform .3s, box-shadow .3s, border-color .3s, background .3s;
  margin-bottom:12px;
}
.step-row.active-step .step-body {
  background:var(--white);
  border-color:rgba(204,26,37,.18);
  box-shadow:0 12px 36px rgba(204,26,37,.07);
}
.step-body:hover { transform:translateX(4px); box-shadow:var(--shadow-md); }
.step-title { font-size:20px; font-weight:800; color:var(--navy-dark); margin-bottom:10px; letter-spacing:-.02em; transition:color .3s; }
.step-row.active-step .step-title { color:var(--red); }
.step-desc { font-size:15px; line-height:1.65; color:var(--gray-500); font-weight:400; }
/* scroll progress navigator */
.steps-nav {
  position:sticky; top:100px; float:right;
  display:flex; flex-direction:column; gap:8px;
  margin-right:-60px; padding:8px;
  z-index:10;
}
.step-nav-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--gray-100); border:1.5px solid var(--gray-300);
  cursor:pointer; transition:all .35s var(--ease-spring);
}
.step-nav-dot.active { background:var(--red); border-color:var(--red); transform:scale(1.4); box-shadow:0 0 8px var(--red-glow); }
.step-nav-dot:hover { background:var(--navy-light); border-color:var(--navy); }

/* ── WHY ── */
.why { background:var(--navy-dark); position:relative; overflow:hidden; }
.why::before {
  content:''; position:absolute; top:-200px; right:-200px; width:700px; height:700px;
  border-radius:50%; background:radial-gradient(circle,rgba(204,26,37,.16),transparent 70%);
  animation:meshMove 14s ease-in-out infinite alternate;
}
.why .s-title { color:#fff; }
.why .s-subtitle { color:rgba(255,255,255,.5); }
.why .s-eyebrow span { color:#FF9D9D; }
.why .s-eyebrow-line { background:#FF9D9D; }
.why-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(255,255,255,.08); border-radius:22px; overflow:hidden; position:relative; z-index:2;
}
.why-item { background:var(--navy-dark); padding:52px; transition:background .3s; }
.why-item:hover { background:rgba(255,255,255,.04); }
.why-num { font-size:52px; font-weight:900; color:rgba(204,26,37,.3); line-height:1; margin-bottom:26px; letter-spacing:-.04em; }
.why-title { font-size:19px; font-weight:700; color:#fff; margin-bottom:14px; line-height:1.35; }
.why-desc { font-size:15px; line-height:1.7; color:rgba(255,255,255,.5); font-weight:400; }

/* ── SERVICES ── */
.services { background:var(--off); }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:1600px; margin:0 auto; }
.service-card {
  background:var(--white); border-radius:20px; padding:38px;
  border:1px solid rgba(26,43,107,.07);
  transition:transform .35s var(--ease-spring), box-shadow .35s;
  position:relative; overflow:hidden;
}
.service-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--red),var(--navy));
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.service-card:hover::before { transform:scaleX(1); }
.service-icon-box {
  width:48px; height:48px; border-radius:12px; background:var(--navy-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; transition:transform .3s var(--ease-bounce);
}
.service-card:hover .service-icon-box { transform:scale(1.12) rotate(-6deg); }
.service-icon-char { font-size:13px; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.service-name { font-size:18px; font-weight:800; color:var(--navy-dark); margin-bottom:12px; letter-spacing:-.02em; line-height:1.3; }
.service-desc { font-size:14px; line-height:1.65; color:var(--gray-500); font-weight:400; }
.service-badge { display:inline-block; margin-top:16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:5px 12px; border-radius:99px; }
.badge-red { background:var(--red-light); color:var(--red-dark); }
.badge-navy { background:var(--navy-light); color:var(--navy-dark); }
.badge-gray { background:var(--gray-100); color:var(--gray-500); }

/* ── WHO WE HELP ── */
.who {
  background:var(--white);
  padding:130px 80px;
}
.who-container {
  max-width:1320px;
  margin:0 auto;
}
.who-comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  max-width:1320px;
  margin:88px auto 0;
}
.who-comparison-card {
  border-radius:28px;
  padding:56px 48px;
  position:relative;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.who-comparison-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:0;
  opacity:0;
  transition:opacity .5s ease;
}
.who-comparison-card:hover {
  transform:translateY(-12px);
}
.who-comparison-card:hover::before {
  opacity:1;
}

/* Traditional Card */
.who-comparison-traditional {
  background:var(--off);
  border:1.5px solid var(--gray-100);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.who-comparison-traditional::before {
  background:linear-gradient(135deg, rgba(26,43,107,.04) 0%, transparent 100%);
}
.who-comparison-traditional:hover {
  box-shadow:0 28px 64px rgba(26,43,107,.12);
  border-color:rgba(26,43,107,.1);
}

/* CanPeople Card */
.who-comparison-canpeople {
  background:linear-gradient(135deg, var(--navy-dark) 0%, #1a3a7f 100%);
  box-shadow:0 16px 48px rgba(13,24,64,.25);
}
.who-comparison-canpeople::before {
  background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 100%);
}
.who-comparison-canpeople:hover {
  box-shadow:0 32px 80px rgba(204,26,37,.3);
}

/* Badge Styling */
.who-comparison-badge {
  display:inline-block;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.15em;
  padding:8px 14px;
  border-radius:12px;
  margin-bottom:28px;
  position:relative;
  z-index:2;
}
.who-badge-gray {
  background:rgba(26,43,107,.08);
  color:var(--gray-500);
}
.who-badge-red {
  background:var(--red);
  color:#fff;
}

/* Title Styling */
.who-comparison-title {
  font-size:32px;
  font-weight:900;
  margin-bottom:36px;
  letter-spacing:-.03em;
  line-height:1.3;
  position:relative;
  z-index:2;
}
.who-comparison-traditional .who-comparison-title {
  color:var(--navy-dark);
}
.who-comparison-canpeople .who-comparison-title {
  color:#fff;
}

/* List Styling */
.who-comparison-list {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  z-index:2;
}
.who-comparison-list li {
  font-size:15px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:16px;
  line-height:1.65;
  transition:transform .3s ease, opacity .3s ease;
}
.who-comparison-traditional .who-comparison-list li {
  color:var(--gray-500);
}
.who-comparison-canpeople .who-comparison-list li {
  color:rgba(255,255,255,.85);
}

.list-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  flex-shrink:0;
  font-size:13px;
  font-weight:800;
  transition:transform .3s ease, background .3s ease;
}
.who-comparison-list-x .list-icon {
  background:rgba(26,43,107,.08);
  color:var(--gray-300);
}
.who-comparison-list-plus .list-icon {
  background:rgba(76,175,80,.15);
  color:#4CAF50;
}

.who-comparison-card:hover .who-comparison-list li {
  transform:translateX(6px);
}
.who-comparison-card:hover .list-icon {
  transform:scale(1.15);
}

/* Mobile */
@media(max-width:1100px) {
  .who {
    padding:96px 28px;
  }
  .who-comparison {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:64px;
  }
  .who-comparison-card {
    padding:40px 32px;
  }
  .who-comparison-title {
    font-size:26px;
  }
}
@media(max-width:640px) {
  .who-comparison-card {
    padding:32px 24px;
  }
  .who-comparison-title {
    font-size:22px;
    margin-bottom:28px;
  }
  .who-comparison-list li {
    font-size:14px;
    gap:12px;
  }
}
.who-card-0 .who-card-list li::before { color:rgba(204,26,37,.6); }
.who-card-1 .who-card-list li::before { color:var(--navy-mid); }
.who-card-2 .who-card-list li::before { color:var(--red); }
.who-card-3 .who-card-list li::before { color:var(--navy); }

/* ── DIFFERENCE ── */
.difference { background:var(--off); }
.diff-wrap { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:960px; margin:0 auto; }
.diff-col { border-radius:22px; padding:52px; }
.diff-col.old { background:var(--white); border:1px solid var(--gray-100); }
.diff-col.new { background:var(--navy-dark); position:relative; overflow:hidden; }
.diff-col.new::after { content:''; position:absolute; top:-100px; right:-100px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(204,26,37,.28),transparent 70%); }
.diff-tag { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:6px 14px; border-radius:99px; margin-bottom:26px; }
.diff-col.old .diff-tag { background:var(--gray-100); color:var(--gray-500); }
.diff-col.new .diff-tag { background:var(--red); color:#fff; position:relative; z-index:2; }
.diff-col h3 { font-size:24px; font-weight:800; margin-bottom:30px; line-height:1.2; letter-spacing:-.02em; position:relative; z-index:2; }
.diff-col.old h3 { color:var(--gray-700); }
.diff-col.new h3 { color:#fff; }
.diff-list { list-style:none; display:flex; flex-direction:column; gap:14px; position:relative; z-index:2; }
.diff-list li { font-size:15px; line-height:1.5; display:flex; align-items:flex-start; gap:12px; font-weight:500; }
.diff-col.old .diff-list li { color:var(--gray-500); }
.diff-col.new .diff-list li { color:rgba(255,255,255,.85); }
.diff-ic { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; margin-top:1px; }
.diff-col.old .diff-ic { background:var(--gray-100); color:var(--gray-300); }
.diff-col.new .diff-ic { background:rgba(93,202,165,.2); color:#5DCAA5; }

/* ── CONTACT FORM ── */
.contact { background:var(--white); }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:start; max-width:1100px; margin:0 auto; }
.contact-left {}
.contact-left .s-title { font-size:clamp(32px,3.2vw,46px); }
.contact-detail { display:flex; align-items:flex-start; gap:14px; margin-top:28px; margin-bottom:20px; }
.contact-detail-icon { width:40px; height:40px; border-radius:10px; background:var(--navy-light); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--navy); flex-shrink:0; }
.contact-detail-text { font-size:14px; color:var(--gray-500); line-height:1.6; font-weight:400; }
.contact-detail-text strong { display:block; font-size:15px; font-weight:700; color:var(--navy-dark); margin-bottom:2px; }
.contact-form { background:var(--off); border-radius:24px; padding:44px; border:1px solid rgba(26,43,107,.07); position:relative; overflow:hidden; }
.contact-form::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(204,26,37,.06),transparent 70%); pointer-events:none; }
.contact-form-title { font-size:20px; font-weight:800; color:var(--navy-dark); margin-bottom:6px; letter-spacing:-.02em; }
.contact-form-sub { font-size:14px; color:var(--gray-500); margin-bottom:28px; font-weight:400; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-group:last-of-type { margin-bottom:0; }
.form-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-500); }
.form-input {
  font-family:var(--font); font-size:14px; font-weight:500;
  padding:13px 16px; border-radius:10px;
  border:1.5px solid var(--gray-100); background:var(--white); color:var(--gray-700);
  outline:none; transition:border-color .2s, box-shadow .2s; width:100%;
}
.form-input:focus { border-color:var(--navy); box-shadow:0 0 0 4px rgba(26,43,107,.07); }
.form-input::placeholder { color:var(--gray-300); font-weight:400; }
.form-input.error { border-color:var(--red); box-shadow:0 0 0 4px rgba(204,26,37,.07); }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%236E6D78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer; }
.form-submit { width:100%; margin-top:24px; justify-content:center; }
.form-success { display:none; text-align:center; padding:32px; }
.form-success.show { display:block; }
.form-success-icon { font-size:40px; font-weight:900; color:var(--red); margin-bottom:14px; }
.form-success-title { font-size:20px; font-weight:800; color:var(--navy-dark); margin-bottom:8px; }
.form-success-text { font-size:15px; color:var(--gray-500); line-height:1.6; }

/* ── FAQ ── */
.faq { background:var(--off); }
.faq-list { max-width:780px; margin:0 auto; }
.faq-item { border:1px solid var(--gray-100); border-radius:16px; margin-bottom:14px; overflow:hidden; transition:border-color .3s, box-shadow .3s; background:var(--white); }
.faq-item.open { border-color:rgba(204,26,37,.25); box-shadow:0 10px 30px rgba(204,26,37,.06); }
.faq-q { display:flex; justify-content:space-between; align-items:center; padding:28px 32px; cursor:pointer; font-size:17px; font-weight:700; color:var(--navy-dark); user-select:none; }
.faq-q .toggle { font-size:24px; color:var(--red); transition:transform .3s; font-weight:300; line-height:1; flex-shrink:0; }
.faq-item.open .toggle { transform:rotate(135deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease; font-size:15px; line-height:1.7; color:var(--gray-500); font-weight:400; padding:0 32px; }
.faq-item.open .faq-a { max-height:240px; padding:0 32px 28px; }

/* ── FINAL CTA ── */
.final-cta { background:var(--navy-dark); position:relative; overflow:hidden; padding:150px 80px; text-align:center; }
.final-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 40%,rgba(204,26,37,.2),transparent 65%); animation:meshMove 12s ease-in-out infinite alternate; }
.final-cta-inner { position:relative; z-index:2; max-width:740px; margin:0 auto; }
.final-cta .s-eyebrow { justify-content:center; }
.final-cta .s-eyebrow span { color:#FF9D9D; }
.final-cta .s-eyebrow-line { background:#FF9D9D; }
.final-title { font-size:clamp(40px,4.8vw,68px); color:#fff; font-weight:900; line-height:1.04; margin-bottom:20px; letter-spacing:-.03em; }
.final-title .grad { background:linear-gradient(115deg,#FF9D9D,#FF5A4D,#FF9D9D); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 4s linear infinite; }
.final-sub { font-size:19px; line-height:1.65; color:rgba(255,255,255,.6); font-weight:400; margin-bottom:16px; }
.final-tagline { font-size:22px; font-weight:800; color:rgba(255,255,255,.85); margin-bottom:40px; letter-spacing:-.02em; }
.final-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.final-micro { margin-top:28px; font-size:14px; color:rgba(255,255,255,.35); font-weight:500; }

/* ── FOOTER ── */
footer { background:var(--gray-700); padding:40px 80px; position:relative; z-index:1; }
.footer-inner { display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; }
.footer-brand { display:flex; align-items:center; margin-bottom:12px; }
.footer-brand img { height:28px; width:auto; display:block; filter:brightness(0) invert(1); opacity:.85; }
.footer-tagline { font-size:13px; color:rgba(255,255,255,.35); line-height:1.6; max-width:360px; font-weight:400; }
.footer-tagline strong { color:rgba(255,255,255,.6); font-weight:600; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; justify-content:flex-end; }
.footer-links a { font-size:12px; color:rgba(255,255,255,.35); text-decoration:none; transition:color .2s; font-weight:500; }
.footer-links a:hover { color:rgba(255,255,255,.8); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding-top:20px; border-top:.5px solid rgba(255,255,255,.08); }
.footer-copy { font-size:11px; color:rgba(255,255,255,.25); font-weight:500; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  nav { padding:0 24px; height:66px; }
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-left { padding:96px 28px 60px; }
  .hero-right { display:none; }
  section { padding:96px 28px; }
  .problem-grid { grid-template-columns:1fr; }
  .what-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .who-grid { grid-template-columns:1fr 1fr; }
  .why-grid { grid-template-columns:1fr; }
  .diff-wrap { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-links { justify-content:flex-start; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .problem-stat-row { grid-template-columns:1fr; }
  .steps-nav { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* ── WHO WE HELP ── */
.who-help { background: var(--white); }
.who-help-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.who-help-card {
  background: var(--off);
  border: 1px solid var(--gray-100);
  border-radius: 20px;
  padding: 36px 32px 40px;
  transition: transform .3s var(--ease-spring), box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.who-help-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  opacity: 0;
  transition: opacity .3s;
  background: radial-gradient(circle at top right, rgba(204,26,37,.06), transparent 70%);
}
.who-help-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.who-help-card:hover::before { opacity: 1; }
.who-help-card--active {
  background: var(--navy-dark);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.who-help-card--active::before {
  background: radial-gradient(circle at top right, rgba(204,26,37,.3), transparent 65%);
  opacity: 1;
}
.who-help-category {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray-300);
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.who-help-card--active .who-help-category { color: rgba(255,255,255,.45); }
.who-help-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy-dark);
  margin-bottom: 22px;
  letter-spacing: -.02em;
  position: relative;
  z-index: 2;
}
.who-help-card--active .who-help-title { color: #fff; }
.who-help-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.who-help-list li {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 10px;
}
.who-help-list li::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: var(--gray-300);
  flex-shrink: 0;
  border-radius: 2px;
}
.who-help-card--active .who-help-list li { color: rgba(255,255,255,.7); }
.who-help-card--active .who-help-list li::before { background: rgba(255,255,255,.3); }
@media(max-width:900px) {
  .who-help-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:560px) {
  .who-help-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   CanPeople — Visibility Section
   visibility-section.css
   ============================================================ */

/* Note: global resets (*, :root, html, body) intentionally removed — inherited from main stylesheet */

/* ── SECTION SHELL ── */
.vis-visibility{
  min-height:100vh;
  background:var(--navy-dark);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:64px 80px;
}
/* ambient glows — same recipe as cover */
.vis-visibility::before{
  content:'';position:absolute;top:-220px;right:-180px;
  width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(204,26,37,0.18),transparent 64%);
  pointer-events:none;
}
.vis-visibility::after{
  content:'';position:absolute;bottom:-200px;left:-120px;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,66,153,0.32),transparent 65%);
  pointer-events:none;
}
/* subtle mono grid texture for the "futuristic" feel */
.vis-grid-texture{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 80%);
}

.vis-inner{
  position:relative;z-index:2;
  width:100%;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:72px;align-items:center;
}

/* ── LEFT: NARRATIVE ── */
.vis-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  background:rgba(204,26,37,0.12);border:1px solid rgba(204,26,37,0.25);
  padding:7px 16px;border-radius:99px;
}
.vis-eyebrow .vis-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:vis-pulse 2s ease-out infinite;}
.vis-eyebrow span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--red);}
@keyframes vis-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3);opacity:0}}

.vis-title{
  font-size:clamp(38px,4.4vw,62px);font-weight:900;line-height:1.0;
  letter-spacing:-0.04em;color:#fff;margin-bottom:24px;
}
.vis-title .vis-grad{
  background:linear-gradient(115deg,var(--red) 0%,#FF5A4D 50%,#FF9D9D 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.vis-narrative{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;}
.vis-line{font-size:16px;line-height:1.55;color:rgba(255,255,255,0.62);font-weight:400;max-width:480px;}
.vis-line strong{color:#fff;font-weight:700;}
.vis-line.vis-lead{font-size:18px;color:rgba(255,255,255,0.85);font-weight:500;}

/* the "Why?" beat */
.vis-why{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--red);letter-spacing:0.04em;margin-bottom:14px;
  display:inline-flex;align-items:center;gap:8px;
}
.vis-why::before{content:'';width:24px;height:1.5px;background:var(--red);border-radius:2px;}

/* closing contrast statement */
.vis-close{
  margin-top:30px;padding:22px 24px;border-radius:16px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);
  border-left:3px solid var(--red);max-width:480px;
}
.vis-close p{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.55);font-weight:400;}
.vis-close p + p{margin-top:10px;}
.vis-close .vis-hl{color:#fff;font-weight:700;}

/* ── RIGHT: GATE CHECKLIST (glass panel) ── */
.vis-gate-panel{
  position:relative;
  background:rgba(13,24,64,0.55);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:22px;
  padding:34px 32px;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.vis-gate-panel::after{
  content:'';position:absolute;top:-70px;right:-70px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(204,26,37,0.25),transparent 70%);pointer-events:none;
}
.vis-gate-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;position:relative;z-index:2;
}
.vis-gate-head-title{font-size:13px;font-weight:800;color:#fff;letter-spacing:-0.01em;}
.vis-gate-head-meta{font-family:var(--mono);font-size:10px;font-weight:500;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.06em;}
.vis-gate-sub{font-size:12px;color:rgba(255,255,255,0.45);font-weight:400;margin-bottom:22px;position:relative;z-index:2;}

.vis-gate-list{display:flex;flex-direction:column;gap:11px;position:relative;z-index:2;}
.vis-gate-item{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,0.05);
  border:0.5px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:14px 16px;
  transition:transform .25s var(--ease-spring),background .25s,border-color .25s;
}
.vis-gate-item:hover{
  transform:translateX(5px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(204,26,37,0.35);
}
.vis-gate-check{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(29,158,117,0.16);color:#3FD99B;
  font-size:14px;font-weight:900;
}
.vis-gate-label{font-size:14px;font-weight:600;color:rgba(255,255,255,0.9);letter-spacing:-0.01em;flex:1;}
.vis-gate-index{font-family:var(--mono);font-size:11px;font-weight:500;color:rgba(255,255,255,0.3);}

.vis-gate-foot{
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;gap:10px;position:relative;z-index:2;
}
.vis-gate-foot-dot{width:7px;height:7px;border-radius:50%;background:#3FD99B;box-shadow:0 0 10px rgba(63,217,155,0.6);flex-shrink:0;}
.vis-gate-foot-text{font-size:11.5px;font-weight:600;color:rgba(255,255,255,0.5);letter-spacing:0.01em;}

/* ── ENTRANCE ANIMATION ── */
.vis-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.vis-reveal.vis-in{opacity:1;transform:none;}
.vis-reveal.vis-d1{transition-delay:.08s;}
.vis-reveal.vis-d2{transition-delay:.16s;}
.vis-reveal.vis-d3{transition-delay:.24s;}
.vis-gate-item{opacity:0;transform:translateX(18px);}
.vis-gate-item.vis-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .vis-visibility{padding:72px 28px;}
  .vis-inner{grid-template-columns:1fr;gap:44px;}
  .vis-title{font-size:clamp(34px,9vw,52px);}
  .vis-gate-panel{padding:28px 22px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .vis-reveal,.vis-gate-item{opacity:1;transform:none;}
}