/* ===================== WHAT AI UNLOCKS — timeline ===================== */
.ai-unlocks {
  position: relative;
  padding: clamp(70px, 8vw, 120px) clamp(20px, 4vw, 60px) clamp(70px, 8vw, 120px);
  background-color: #f6f8fc;
  /* paper grain + crisp ruled lines */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.45'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to bottom,
      rgba(84, 114, 168, 0.11) 0,
      rgba(84, 114, 168, 0.11) 1px,
      transparent 1px,
      transparent 40px);
  background-size: 200px 200px, auto;
  background-blend-mode: soft-light, normal;
  overflow: hidden;
}

/* faint left margin line, like notebook paper */
.ai-unlocks::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(28px, 7vw, 96px);
  width: 1.5px;
  background: rgba(225, 110, 95, 0.28);
  pointer-events: none;
}

/* blend the bottom edge into the white industries section below */
.ai-unlocks::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(246, 248, 252, 0), #ffffff);
  pointer-events: none;
}

/* ---------- Heading ---------- */
.ai-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(50px, 6vw, 90px);
}
.ai-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #2f6bd8;
  margin-bottom: 14px;
}
.ai-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.3vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #16202f;
}
.ai-title .grad {
  background: linear-gradient(100deg, #4aa0ff 0%, #2f6bd8 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ai-sub {
  margin-top: 16px;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 300;
  line-height: 1.6;
  color: #6b7689;
}

/* ---------- Timeline ---------- */
.ai-timeline {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

.ai-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(80, 130, 220, 0.25));
}

/* ---------- Sticky-note cards ---------- */
.ai-card {
  position: relative;
  z-index: 1;
  width: clamp(320px, 44%, 460px);
  margin-bottom: clamp(50px, 6vw, 100px);
  padding: 36px 34px 42px;
  border-radius: 22px;
  /* paper grain + soft tint gradient */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    var(--bg);
  background-size: 160px 160px, auto;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;
  box-shadow:
    0 28px 56px rgba(40, 60, 100, 0.16),
    0 4px 12px rgba(40, 60, 100, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}
.ai-card:last-child { margin-bottom: 0; }

/* subtle paper sheen across the top */
.ai-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

.ai-card:nth-child(odd)  { margin-left: clamp(0px, 4vw, 64px); margin-right: auto; }
.ai-card:nth-child(even) { margin-left: auto; margin-right: clamp(0px, 4vw, 64px); }
/* (svg counts as child 1, so card 1 = nth-child(2) = even-indexed; we fix via explicit color classes & sides below) */

.ai-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 30px 60px rgba(40, 60, 100, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* colors — soft paper tints + folded-corner tints */
.c1, .c4 { --acc: #ff7a1a; --bg: linear-gradient(150deg, #fff2e2 0%, #ffdfba 100%); --fold1: #ffd29a; --fold2: #ffbe72; }
.c2, .c5 { --acc: #3b82f6; --bg: linear-gradient(150deg, #ecf2ff 0%, #d4e1ff 100%); --fold1: #c3d6ff; --fold2: #a6c2ff; }
.c3      { --acc: #8b5cf6; --bg: linear-gradient(150deg, #f4ecff 0%, #e2d2ff 100%); --fold1: #d9c4ff; --fold2: #c3a4ff; }

/* folded page corner (dog-ear) */
.ai-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  background: linear-gradient(225deg, var(--fold2) 0%, var(--fold1) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  border-top-right-radius: 22px;
  filter: drop-shadow(-4px 4px 5px rgba(40, 60, 100, 0.20));
  pointer-events: none;
}

/* sides — zigzag (overrides nth-child) */
.c1, .c3, .c5 { margin-left: clamp(0px, 4vw, 64px) !important; margin-right: auto !important; }
.c2, .c4      { margin-left: auto !important; margin-right: clamp(0px, 4vw, 64px) !important; }

/* pin */
.ai-pin {
  display: none;
  position: absolute;
  top: -12px;
  left: 32px;
  width: 16px;
  height: 16px;
}
.ai-pin::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, var(--acc) 62%);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.28);
}
.ai-pin::after {
  content: "";
  position: absolute;
  top: 11px; left: 6px;
  width: 2px; height: 11px;
  background: linear-gradient(#5b5b5b, #1f1f1f);
  transform: rotate(9deg);
  border-radius: 1px;
}

.ai-num {
  position: relative;
  display: block;
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--acc);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}
.ai-card-title {
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #1a2440;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.ai-card-desc {
  position: relative;
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.62;
  color: #3f4a5e;
}
.ai-dot {
  position: absolute;
  bottom: 18px; right: 20px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acc);
  opacity: 0.7;
}

/* ===================== WHY CHOOSE JRS — grid ===================== */
.why-jrs {
  position: relative;
  padding: clamp(70px, 8vw, 120px) clamp(20px, 4vw, 60px);
  background: linear-gradient(180deg, #f1f1fb 0%, #eef0fb 100%);
}

.why-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(44px, 5vw, 76px);
}
.why-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #6d5cf0;
  margin-bottom: 14px;
}
.why-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #1c2536;
}
.why-sub {
  margin-top: 16px;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 300;
  line-height: 1.6;
  color: #5b6478;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 3vw, 52px) clamp(34px, 3.5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
}
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}
.why-ic {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #6d5cf0;
  background: linear-gradient(160deg, #ece8fc, #ddd6f8);
  box-shadow: 0 8px 20px rgba(109, 92, 240, 0.18);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.why-item:hover .why-ic { transform: scale(1.1) rotate(-6deg); }
.why-ic svg { width: 26px; height: 26px; }

.why-tx h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.18rem;
  color: #1c2536;
  margin-bottom: 8px;
}
.why-tx p {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  color: #5b6478;
}

/* ===================== Reveal ===================== */
.ai-unlocks .reveal,
.why-jrs .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-unlocks .reveal.in-view,
.why-jrs .reveal.in-view { opacity: 1; transform: translateY(0); }

/* cards slide in from their side */
.ai-card { opacity: 0; }
.c1, .c3, .c5 { transform: translateX(-44px); }
.c2, .c4      { transform: translateX(44px); }
.ai-card.in-view { opacity: 1; transform: translateX(0); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }

.why-item.reveal { transition-delay: 0.05s; }

/* ===================== Responsive ===================== */
@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ai-card,
  .ai-card:nth-child(odd),
  .ai-card:nth-child(even),
  .c1, .c2, .c3, .c4, .c5 {
    width: 100%;
    max-width: 420px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .c1, .c2, .c3, .c4, .c5 { transform: translateY(26px); }
  .ai-card.in-view { transform: translate(0, 0); }
  .why-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-card, .reveal { transition: none; }
  .ai-line path { stroke-dashoffset: 0 !important; }
}