/*
 * Homepage v2 (front-page-v2.php). Loaded by inc/home-v2.php only while v2 is
 * on, after main.css and the motion layer.
 *
 * Rules that hold everywhere in this file:
 *  1. Scoped under body.aib-v2, or under v2-only class names, so nothing here
 *     can reach another page or the live homepage.
 *  2. Only transform and opacity move. No blur, no animated layout property,
 *     and the hero text is painted in the first frame.
 *  3. A hidden starting state sits behind `.v2-js`, which home-v2.js adds to
 *     <html> only when it is running and motion is allowed. Without it the
 *     page is the finished state: that is what reduced motion and a failed
 *     script both get. main.css already stops every animation and transition
 *     for reduced motion.
 *  4. Bangla line-height never below 1.3 (tasks/lessons.md).
 *  5. Effects for a mouse sit behind (hover: hover) and (pointer: fine).
 *
 * THE MOTION SYSTEM. One language, so no section is static and none shouts.
 * Each section has one signature moment; everything else is the shared
 * vocabulary below, driven by home-v2.js and the markup hooks listed at the
 * top of front-page-v2.php:
 *   rise     a block arrives 18px up, once, on first sight (data-v2-r)
 *   words    a heading's words rise one after another (data-v2-w)
 *   kicker   a section label slides in and draws its underline
 *   wave     a list's items arrive a beat apart (data-v2-r="kids")
 *   count    figures count up in their own digits (data-v2-count)
 * One ease for arrivals (--v2-ease), one springy ease for stamps and pops
 * (--v2-pop). Signature moments, top to bottom: the hero demo typing, the
 * pinned problem lines, the quiz screens sliding, the path cards dealt in,
 * the cycle drawing itself, the review belt and its stars, the founder's
 * depth, the price card's count down, strike and seal. The phone buy bar and
 * the reading hairline under the header tie the page together.
 */

.aib-v2 {
  --v2-tint: #EEF1FE;
  --v2-warm: #F6F4EF;
  --v2-money: #38C793;
  --v2-pad: clamp(64px, 9vw, 96px);
  --v2-ease: cubic-bezier(.2, .7, .2, 1);
  --v2-pop: cubic-bezier(.3, 1.5, .5, 1);
}

/* ---------------------------------------------------------------- grounds
   Each section names the ground above it (--from) and its own (--bg). A strip
   straddling the boundary fades one into the other, so bands meet as a
   gradient instead of a hard cut. The strip sits under every section's
   content (z-index), and inside the padding, so it never covers text. */

.aib-v2 .v2-j,
.aib-v2 .quiz-sec {
  position: relative;
  background: var(--bg);
  padding: var(--v2-pad) 0;
}
.aib-v2 .v2-j::before,
.aib-v2 .quiz-sec::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -56px;
  height: 112px;
  background: linear-gradient(var(--from), var(--bg));
  pointer-events: none;
}
.aib-v2 .v2-j > *,
.aib-v2 .quiz-sec > * { position: relative; z-index: 1; }

/* in page order (front-page-v2.php) */
.aib-v2 .v2-problem { --from: var(--kagoj); --bg: var(--nil); color: #fff; padding: 0; }
.aib-v2 .quiz-sec   { --from: var(--nil);   --bg: var(--v2-tint); }
.aib-v2 .v2-method  { --from: var(--v2-tint); --bg: var(--kagoj); }
.aib-v2 .v2-reviews { --from: var(--kagoj); --bg: var(--v2-warm); }
.aib-v2 .v2-skills  { --from: var(--v2-warm); --bg: var(--nil); color: #fff; }
.aib-v2 .v2-price   { --from: var(--nil);   --bg: var(--v2-tint); }
.aib-v2 .v2-founder { --from: var(--v2-tint); --bg: var(--nil); }
.aib-v2 .v2-books   { --from: var(--nil);   --bg: var(--v2-warm); }
.aib-v2 .v2-faq     { --from: var(--v2-warm); --bg: var(--kagoj); }
.aib-v2 .v2-close   { --from: var(--kagoj); --bg: var(--nil); color: #fff; }
/* and the last band into the footer */
.aib-v2 .v2-close::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -56px;
  height: 112px;
  background: linear-gradient(var(--nil), var(--nil-deep));
  pointer-events: none;
}

/* ---------------------------------------------------------------- shared */

.aib-v2 .v2-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  color: var(--gada);
}
.aib-v2 .v2-problem .v2-label { color: var(--gada-bright); }
.aib-v2 .v2-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.aib-v2 .v2-head h2 { font-size: var(--fs-h2); font-weight: 700; }
.aib-v2 .v2-center { flex-direction: column; align-items: center; text-align: center; }
.aib-v2 .v2-sub { margin-top: 8px; font-size: var(--fs-base); color: var(--dhoa-dark); line-height: 1.6; }

/* small round pause/play button for the two loops */
.aib-v2 .v2-hold {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.aib-v2 .v2-hold[hidden] { display: none; }
.aib-v2 .v2-hold:hover, .aib-v2 .v2-hold:focus-visible { opacity: 1; }
.aib-v2 .v2-hold i { width: 10px; height: 11px; border-inline: 3px solid currentColor; }
.aib-v2 .v2-hold[aria-pressed="true"] i {
  border: 0;
  width: 0; height: 0;
  border-left: 10px solid currentColor;
  border-block: 6px solid transparent;
  margin-left: 3px;
}

/* ---------------------------------------------------------------- motion system
   The shared vocabulary (see the top of this file). Hidden states only
   behind .v2-js; the transitions themselves are harmless without it. */

.v2-js [data-v2-r] { transition: opacity .6s ease, transform .7s var(--v2-ease); }
.v2-js [data-v2-r]:not(.v2-in) { opacity: 0; transform: translateY(18px); }
.v2-js [data-v2-r="fade"]:not(.v2-in) { transform: none; }

/* wave: the group stays put, its items arrive a beat apart (--i from JS) */
.v2-js [data-v2-r="kids"]:not(.v2-in) { opacity: 1; transform: none; }
.v2-js [data-v2-r="kids"] > * {
  transition: opacity .5s ease, transform .65s var(--v2-ease);
  transition-delay: calc(min(var(--i, 0), 8) * 70ms);
}
.v2-js [data-v2-r="kids"]:not(.v2-in) > * { opacity: 0; transform: translateY(16px); }

/* words: no mask (a mask clips Bangla matras), just a short rise per word */
.v2-js [data-v2-w] .v2-w {
  display: inline-block;
  transition: opacity .5s ease, transform .75s var(--v2-ease);
  transition-delay: calc(min(var(--i), 12) * 45ms);
}
.v2-js [data-v2-w]:not(.v2-in) .v2-w { opacity: 0; transform: translateY(.55em); }

/* kicker: the label slides in, then its underline draws. The underline is
   part of the label's look, so the finished page has it too. */
.aib-v2 [data-v2-r="label"] { position: relative; display: inline-block; }
.aib-v2 [data-v2-r="label"]::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 26px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: left;
  transition: transform .6s var(--v2-ease) .3s;
}
.v2-js [data-v2-r="label"]:not(.v2-in) { transform: translateX(-14px); }
.v2-js [data-v2-r="label"]:not(.v2-in)::after { transform: scaleX(0); }

/* count: each figure is held at its final width while it counts */
.v2-js .v2-num { display: inline-block; text-align: right; }

/* one sweep of light across a button, once */
@keyframes v2-sheen { to { transform: translateX(130%); } }
.aib-v2 .v2-hero .btn-primary,
.aib-v2 .v2-buy .btn { position: relative; overflow: hidden; }
.aib-v2 .v2-hero .btn-primary::after,
.aib-v2 .v2-buy .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}
.aib-v2 .v2-hero .btn-primary::after { animation: v2-sheen 1.1s 1.3s var(--v2-ease) 1 both; }
.v2-js .v2-pcard.v2-done .v2-buy .btn::after { animation: v2-sheen 1.1s .5s var(--v2-ease) 1 both; }

/* the reading hairline under the header (home-v2.js adds it and scales it) */
.aib-v2 .v2-prog {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--gada), var(--gada-bright));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 1 · hero
   main.css starts .rise at opacity 0; here it only settles a few pixels, so
   every line of hero text is on screen in the first frame. The demo card
   settles too (never hidden), then on a mouse it leans toward the cursor. */

@keyframes v2-settle { from { transform: translateY(10px); } }
.aib-v2 .hero .rise { animation-name: v2-settle; }
.aib-v2 .v2-hero { padding-bottom: 72px; }
@keyframes v2-demo-in { from { translate: 0 28px; scale: .97; } }
.aib-v2 .v2-demo {
  animation: v2-demo-in 1s .2s var(--v2-ease) backwards;
  transition: transform .6s var(--v2-ease);
}

.aib-v2 .v2-demo {
  position: relative;
  max-width: 560px;
  margin: 40px auto 0;
  text-align: left;
  background: var(--nil);
  color: #fff;
  border-radius: 16px;
  padding-bottom: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 34px 70px -34px rgba(31, 75, 255, .6);
}
.aib-v2 .v2-demo-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 54px 12px 16px;
  border-bottom: 1px solid var(--line-dark);
}
.aib-v2 .v2-demo-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-dark); }
.aib-v2 .v2-demo-bar span {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--gada-bright);
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: 0 9px;
}
.aib-v2 .v2-demo .v2-hold { position: absolute; top: 7px; right: 12px; color: #fff; }

.aib-v2 .v2-demo-stage { display: grid; padding: 16px 18px 0; }
.aib-v2 .v2-ex { grid-area: 1 / 1; transition: opacity .35s ease; }
.aib-v2 .v2-ex:not(.on) { opacity: 0; pointer-events: none; }
.aib-v2 .v2-ex-p {
  width: fit-content;
  max-width: 88%;
  margin-left: auto;
  background: var(--gada);
  border-radius: 14px 14px 4px 14px;
  padding: 9px 14px;
  font-size: var(--fs-base);
  line-height: 1.55;
}
.aib-v2 .v2-ex-a {
  list-style: none;
  position: relative;
  margin: 14px 0 0;
  padding: 0 0 0 36px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #D6D8DE;
}
.aib-v2 .v2-ex-a::before {
  content: "AI";
  position: absolute;
  left: 0; top: 1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: var(--nil-soft);
  font: 600 .62rem/24px var(--f-mono);
  text-align: center;
  color: var(--gada-bright);
}
.aib-v2 .v2-ex-a li + li { margin-top: 5px; }
.aib-v2 .v2-tag {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 14px 0 0 auto;
  padding: 6px 13px 7px;
  border-radius: 10px;
  background: var(--v2-money);
  color: #06281C;
  font-size: var(--fs-xs);
  line-height: 1.4;
  transform: rotate(-3deg);
  box-shadow: 0 12px 24px -12px rgba(56, 199, 147, .8);
}
.aib-v2 .v2-tag span { white-space: nowrap; }
.aib-v2 .v2-tag b { font-size: var(--fs-lg); font-weight: 700; }
.aib-v2 .v2-tag small { font-size: var(--fs-xs); font-weight: 700; opacity: .8; }

/* motion: words arrive one by one behind a caret, answer lines rise, the
   rate pops on with a little overshoot */
.v2-js .v2-ex-p .w { opacity: 0; }
.v2-js .v2-ex-p .w.in { opacity: 1; }
.v2-js .v2-ex-p .w.cur::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 3px;
  vertical-align: -.12em;
  background: #fff;
  animation: v2-blink .7s steps(1) infinite;
}
@keyframes v2-blink { 50% { opacity: 0; } }
.v2-js .v2-ex-a li { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.v2-js .v2-ex-a li.in { opacity: 1; transform: none; }
.v2-js .v2-tag { opacity: 0; transform: rotate(-10deg) scale(.4); transition: opacity .2s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.v2-js .v2-tag.in { opacity: 1; transform: rotate(-3deg); }

/* ---------------------------------------------------------------- 2 · problem
   Static: three lines, one under another. With motion: the track is tall,
   the panel is pinned for its length, and home-v2.js turns the scroll into
   progress: a third of the pinned stretch per line. The incoming line's
   words rise one after another, the outgoing one lifts away, and each bar
   under them fills with the scroll itself (--f, 0 to 1). */

.aib-v2 .v2-prob-stick { padding: var(--v2-pad) 0; text-align: center; }
.aib-v2 .v2-prob-lines { margin-top: 14px; }
.aib-v2 .v2-pl {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.38;
  max-width: 22ch;
  margin-inline: auto;
}
.aib-v2 .v2-pl + .v2-pl { margin-top: 18px; }
.aib-v2 p.v2-pl:nth-child(2) { color: #C9CEDD; }
.aib-v2 p.v2-pl:nth-child(3) { color: var(--gada-bright); }
.aib-v2 .v2-prob-dots { display: none; }
.aib-v2 .v2-problem [data-v2-r="label"]::after { left: 50%; margin-left: -13px; transform-origin: center; }
.v2-js .v2-problem [data-v2-r="label"]:not(.v2-in) { transform: translateY(10px); }

.v2-js .v2-prob-track { --H: 250vh; --V: 100vh; height: var(--H); }
@supports (height: 100svh) { .v2-js .v2-prob-track { --H: 250svh; --V: 100svh; } }
.v2-js .v2-prob-stick {
  position: sticky;
  top: 0;
  height: var(--V);
  padding: 0;
  display: flex;
  align-items: center;
}
.v2-js .v2-prob-stick > .wrap { width: 100%; }
.v2-js .v2-prob-lines { display: grid; }
.v2-js .v2-pl { grid-area: 1 / 1; margin: 0 auto; }
.v2-js .v2-pl + .v2-pl { margin-top: 0; }
.v2-js .v2-pl .v2-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity .3s ease, transform .6s var(--v2-ease);
}
.v2-js .v2-pl.was .v2-w { transform: translateY(-.45em); }
.v2-js .v2-pl.on .v2-w {
  opacity: 1;
  transform: none;
  transition-delay: calc(.15s + min(var(--i), 14) * 40ms);
}
.v2-js .v2-prob-dots { display: flex; justify-content: center; gap: 8px; list-style: none; margin: 30px 0 0; padding: 0; }
.v2-js .v2-prob-dots li {
  width: 34px; height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.v2-js .v2-prob-dots li::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--gada-bright);
  transform: scaleX(var(--f, 0));
  transform-origin: left;
  transition: transform .12s linear;
}

/* ---------------------------------------------------------------- 3 · quiz
   The ground changes for the gradient join, and the heading joins the word
   rise (home-v2.js marks it). The screens' own transitions live in quiz.css. */

/* ---------------------------------------------------------------- 4 · paths
   One card per masterclass. A row that scrolls sideways with snap points:
   swipe on a phone, two-finger swipe on a trackpad, arrows on a desktop with
   a mouse. The whole card is its link (the link's ::after covers the card),
   so the tap target is the card, and the link text names the course for
   screen readers. */

.aib-v2 .v2-skills .v2-sub { color: var(--dhoa); }
.aib-v2 .v2-arrows { display: none; gap: 8px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .aib-v2 .v2-arrows { display: flex; }
}
.aib-v2 .v2-arr {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: var(--nil-soft);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0 0 4px;
  cursor: pointer;
  transition: border-color .2s ease, opacity .2s ease;
}
.aib-v2 .v2-arr:hover:not(:disabled) { border-color: var(--gada-bright); }
.aib-v2 .v2-arr:disabled { opacity: .3; cursor: default; }

.aib-v2 .v2-row {
  list-style: none;
  display: flex;
  gap: 14px;
  margin: 0 -22px;
  padding: 6px 22px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 22px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.aib-v2 .v2-row::-webkit-scrollbar { display: none; }
.aib-v2 .v2-row:focus-visible { outline: 2px solid var(--gada-bright); outline-offset: -2px; }

.aib-v2 .v2-sk {
  flex: 0 0 min(76vw, 262px);
  scroll-snap-align: start;
  display: flex;
}
.aib-v2 .v2-sk-f {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--nil-soft);
  transition: border-color .2s ease;
}
.aib-v2 .v2-sk-f:focus-within { border-color: var(--gada-bright); }
@media (hover: hover) and (pointer: fine) {
  .aib-v2 .v2-sk-f:hover { border-color: rgba(90, 123, 255, .6); }
}

.aib-v2 .v2-who {
  align-self: flex-start;
  padding: 0 9px;
  border: 1px solid rgba(90, 123, 255, .4);
  border-radius: 99px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--gada-bright);
}
.aib-v2 .v2-sk h3 { margin-top: 10px; font-size: var(--fs-md); line-height: 1.45; }
.aib-v2 .v2-mc { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.5; color: var(--dhoa); }
.aib-v2 .v2-sk-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 14px;
}
.aib-v2 .v2-sk-p { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; color: var(--v2-money); }
.aib-v2 .v2-go {
  color: var(--gada-bright);
  font: 600 .95rem/1.5 var(--f-bn);
  text-decoration: none;
}
.aib-v2 .v2-go::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.aib-v2 .v2-go:focus-visible { outline: none; }
/* keyboard focus rings the whole card, which is what the link covers */
.aib-v2 .v2-go:focus-visible::after { outline: 2px solid var(--gada-bright); outline-offset: 2px; }
.aib-v2 .v2-go:hover { color: #fff; }

/* the last card: the all-access pass */
.aib-v2 .v2-sk-all .v2-sk-f {
  border-color: rgba(90, 123, 255, .55);
  background: linear-gradient(160deg, #1A2550, var(--nil-soft) 70%);
}
.aib-v2 .v2-sk-all .v2-label { color: var(--gada-bright); }
.aib-v2 .v2-sk-all h3 { font-size: var(--fs-md); }
.aib-v2 .v2-sk-all .v2-sk-foot { justify-content: flex-start; margin-top: 12px; }
.aib-v2 .v2-sk-all s { font-size: var(--fs-sm); color: var(--dhoa); }
.aib-v2 .v2-sk-all .btn { align-self: flex-start; margin-top: auto; }

/* entrance: the hand of cards slides in from the right, one after another.
   Then: on a mouse a card lifts and a soft light follows the cursor (--x,
   --y from home-v2.js); on a touch screen it gives a little under the thumb. */
@media (hover: hover) and (pointer: fine) {
  .aib-v2 .v2-sk-f { isolation: isolate; overflow: hidden; transition: border-color .2s ease, transform .35s var(--v2-ease); }
  .aib-v2 .v2-sk-f:hover { transform: translateY(-4px); }
  .aib-v2 .v2-sk-f::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    z-index: -1;
    width: 280px; height: 280px;
    margin: -140px 0 0 -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 123, 255, .26), rgba(90, 123, 255, .06) 45%, transparent 68%);
    opacity: 0;
    transform: translate(var(--x, 50%), var(--y, 0));
    transition: opacity .3s ease;
    pointer-events: none;
  }
  .aib-v2 .v2-sk-f:hover::before { opacity: 1; }
}
@media (hover: none) {
  .aib-v2 .v2-sk-f { transition: border-color .2s ease, transform .2s ease; }
  .aib-v2 .v2-sk-f:active { transform: scale(.97); }
}
.v2-js .v2-sk { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.v2-js .v2-skills:not(.v2-in) .v2-sk { opacity: 0; transform: translateX(48px); }
.v2-js .v2-sk:nth-child(2) { transition-delay: .07s; }
.v2-js .v2-sk:nth-child(3) { transition-delay: .14s; }
.v2-js .v2-sk:nth-child(4) { transition-delay: .21s; }
.v2-js .v2-sk:nth-child(n+5) { transition-delay: .28s; }

/* ---- the little scenes, CSS only. Their resting state (what reduced
        motion shows) is the finished picture; the loops run only while the
        row is on screen. */

.aib-v2 .v2-vis {
  position: relative;
  height: 88px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid var(--line-dark);
  background: linear-gradient(135deg, #18213F, #0B0C10 70%);
  overflow: hidden;
}
.aib-v2 .v2-vis i { position: absolute; display: block; }
.aib-v2 .v2-vis i { animation-duration: 3.6s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
.v2-js .v2-skills:not(.v2-run) .v2-vis i { animation-play-state: paused; }

@keyframes v2-pulse { 50% { transform: scale(1.14); } }
@keyframes v2-grow-x { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes v2-pop { 0%, 8% { opacity: 0; transform: scale(.5); } 18%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes v2-sweep { 0% { transform: translateX(-140%) skewX(-18deg); } 60%, 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes v2-rise { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes v2-float { 0% { opacity: 0; transform: translateY(14px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-44px); } }
@keyframes v2-knob { 0%, 30% { transform: none; } 45%, 80% { transform: translateX(16px); } 95%, 100% { transform: none; } }

/* video: a play mark that breathes over a progress bar that fills */
.aib-v2 .v2-vis-video i:nth-child(1) {
  left: 50%; top: 22px;
  margin-left: -10px;
  border-left: 22px solid #fff;
  border-block: 13px solid transparent;
  animation-name: v2-pulse;
  animation-duration: 1.8s;
}
.aib-v2 .v2-vis-video i:nth-child(2),
.aib-v2 .v2-vis-video i:nth-child(3) { left: 14px; right: 14px; bottom: 14px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.aib-v2 .v2-vis-video i:nth-child(3) { background: var(--gada-bright); transform-origin: left; transform: scaleX(.62); animation-name: v2-grow-x; animation-timing-function: linear; }

/* ad: the product zooms, the price sticker pops, a light sweeps across */
.aib-v2 .v2-vis-ad i:nth-child(1) {
  left: 50%; top: 16px;
  width: 54px; height: 54px;
  margin-left: -27px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--gada-bright), #8E5BFF);
  animation-name: v2-pulse;
}
.aib-v2 .v2-vis-ad i:nth-child(2) {
  left: calc(50% + 16px); top: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--v2-money);
  animation-name: v2-pop;
}
.aib-v2 .v2-vis-ad i:nth-child(2)::before { content: "৳"; display: block; text-align: center; font: 700 .85rem/26px var(--f-bn); color: #06281C; }
.aib-v2 .v2-vis-ad i:nth-child(3) {
  top: -10px; bottom: -10px; left: 0;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-140%);
  animation-name: v2-sweep;
}

/* first income: a payment slip, the ৳ stamp pops on, the amount bar fills */
.aib-v2 .v2-vis-pay i:nth-child(1) { left: 50%; top: 14px; width: 92px; height: 58px; margin-left: -46px; border-radius: 8px; background: rgba(255, 255, 255, .09); border: 1px solid var(--line-dark); }
.aib-v2 .v2-vis-pay i:nth-child(2) { left: calc(50% + 26px); top: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--v2-money); animation-name: v2-pop; }
.aib-v2 .v2-vis-pay i:nth-child(2)::before { content: "৳"; display: block; text-align: center; font: 700 .95rem/30px var(--f-bn); color: #06281C; }
.aib-v2 .v2-vis-pay i:nth-child(3) { left: calc(50% - 34px); top: 50px; width: 56px; height: 6px; border-radius: 6px; background: var(--v2-money); transform-origin: left; animation-name: v2-grow-x; }

/* reply bot: the conversation plays out bubble by bubble */
.aib-v2 .v2-vis-bot i { height: 14px; border-radius: 8px; animation-name: v2-pop; }
.aib-v2 .v2-vis-bot i:nth-child(odd) { left: 14px; background: #3A3E48; transform-origin: left; }
.aib-v2 .v2-vis-bot i:nth-child(even) { right: 14px; background: var(--gada); transform-origin: right; }
.aib-v2 .v2-vis-bot i:nth-child(1) { top: 10px; width: 50%; }
.aib-v2 .v2-vis-bot i:nth-child(2) { top: 29px; width: 58%; animation-delay: .35s; }
.aib-v2 .v2-vis-bot i:nth-child(3) { top: 48px; width: 34%; animation-delay: .7s; }
.aib-v2 .v2-vis-bot i:nth-child(4) { top: 67px; width: 46%; height: 12px; animation-delay: 1.05s; }

/* app: a browser bar, a switch that flips, an install bar that fills */
.aib-v2 .v2-vis-app i:nth-child(1) { left: 0; right: 0; top: 0; height: 18px; background: rgba(255, 255, 255, .07); border-bottom: 1px solid var(--line-dark); }
.aib-v2 .v2-vis-app i:nth-child(2) { left: 16px; top: 32px; width: 36px; height: 20px; border-radius: 99px; background: rgba(90, 123, 255, .35); }
.aib-v2 .v2-vis-app i:nth-child(3) { left: 19px; top: 35px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateX(16px); animation-name: v2-knob; }
.aib-v2 .v2-vis-app i:nth-child(4) { left: 16px; right: 16px; bottom: 16px; height: 6px; border-radius: 6px; background: var(--v2-money); transform-origin: left; animation-name: v2-grow-x; }

/* viral: the view bars climb in a wave and a heart floats up */
.aib-v2 .v2-vis-viral i { bottom: 12px; width: 14px; border-radius: 3px 3px 0 0; background: var(--gada-bright); transform-origin: bottom; animation-name: v2-rise; animation-duration: 1.8s; }
.aib-v2 .v2-vis-viral i:nth-child(1) { left: 18px; height: 28px; }
.aib-v2 .v2-vis-viral i:nth-child(2) { left: 38px; height: 40px; animation-delay: .15s; }
.aib-v2 .v2-vis-viral i:nth-child(3) { left: 58px; height: 34px; animation-delay: .3s; }
.aib-v2 .v2-vis-viral i:nth-child(4) { left: 78px; height: 52px; animation-delay: .45s; }
.aib-v2 .v2-vis-viral i:nth-child(5) { left: 98px; height: 62px; animation-delay: .6s; background: var(--v2-money); }
.aib-v2 .v2-vis-viral i:nth-child(6) { left: auto; right: 26px; bottom: 16px; width: auto; height: auto; background: none; color: #FF6B8B; font-size: 1.4rem; line-height: 1; animation-name: v2-float; animation-duration: 2.4s; }
.aib-v2 .v2-vis-viral i:nth-child(6)::before { content: "♥"; }

/* article: lines of text write themselves */
.aib-v2 .v2-vis-text i { left: 16px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .55); transform-origin: left; animation-name: v2-grow-x; }
.aib-v2 .v2-vis-text i:nth-child(1) { top: 16px; width: 44%; height: 10px; background: #fff; }
.aib-v2 .v2-vis-text i:nth-child(2) { top: 38px; width: 78%; animation-delay: .3s; }
.aib-v2 .v2-vis-text i:nth-child(3) { top: 52px; width: 70%; animation-delay: .6s; }
.aib-v2 .v2-vis-text i:nth-child(4) { top: 66px; width: 52%; animation-delay: .9s; }

/* automation: three steps joined by a line, a signal travels along it and
   each step lights as it arrives */
@keyframes v2-travel { 0% { opacity: 0; transform: translateX(0); } 10%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(176px); } }
.aib-v2 .v2-vis-flow i:nth-child(-n+3) { top: 34px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--gada-bright); background: #18213F; z-index: 1; animation-name: v2-pulse; animation-duration: 1.8s; }
.aib-v2 .v2-vis-flow i:nth-child(1) { left: 16px; }
.aib-v2 .v2-vis-flow i:nth-child(2) { left: calc(50% - 10px); animation-delay: .6s; }
.aib-v2 .v2-vis-flow i:nth-child(3) { right: 16px; animation-delay: 1.2s; border-color: var(--v2-money); }
.aib-v2 .v2-vis-flow i:nth-child(4) { left: 26px; right: 26px; top: 43px; height: 2px; background: rgba(255, 255, 255, .16); }
.aib-v2 .v2-vis-flow i:nth-child(5) { left: 22px; top: 40px; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-money); z-index: 2; animation-name: v2-travel; animation-duration: 1.8s; animation-timing-function: linear; }

/* ---------------------------------------------------------------- 5 · method
   The arc is a quarter of the ring. `--s` (a step count that only goes up)
   turns it a quarter at a time, so it always ends on the step in focus. The
   step names are buttons laid over the ring where the old SVG labels sat. */

.aib-v2 .v2-method .v2-head { margin-bottom: 10px; }
.aib-v2 .v2-cyc-fig { position: relative; width: min(460px, 100%); margin: 0 auto; }
.aib-v2 .v2-cyc-ring { position: relative; }
.aib-v2 .v2-cyc-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.aib-v2 .v2-ring { fill: none; stroke: var(--ink); stroke-opacity: .14; stroke-width: 1.5; }
.aib-v2 .v2-arc {
  fill: none;
  stroke: var(--gada);
  stroke-width: 3;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 130px 130px;
  transform: rotate(calc(var(--s, 0) * 90deg - 180deg));
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .4s ease;
}
.aib-v2 .v2-n {
  fill: var(--kagoj);
  stroke: var(--gada);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .4s ease .5s;
}
.aib-v2 .v2-n.on { fill: var(--gada); transform: scale(1.5); }
.aib-v2 .v2-cl {
  position: absolute;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: 700 clamp(.88rem, 2.6vw, 1rem)/1.45 var(--f-bn);
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.aib-v2 .v2-cl.on, .aib-v2 .v2-cl:hover { color: var(--gada); }
.aib-v2 .v2-cl-0 { left: 50%; top: 5.5%; }
.aib-v2 .v2-cl-1 { left: 77.5%; top: 52%; transform: translate(0, -50%); }
.aib-v2 .v2-cl-2 { left: 50%; top: 96%; }
.aib-v2 .v2-cl-3 { right: 77.5%; top: 52%; transform: translate(0, -50%); }

.aib-v2 .v2-cyc-lines {
  list-style: none;
  display: grid;
  gap: 6px;
  max-width: 440px;
  margin: 30px auto 0;
  padding: 0;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--dhoa-dark);
}
.aib-v2 .v2-cyc-lines b { color: var(--ink); margin-right: 4px; }

/* entrance: the ring opens out, the arc spins into place, the four nodes pop
   in turn, the step names follow, then the centre line; after that the walk
   starts. Animations with backwards fill, so they wait unseen and never
   leave a delay on the step changes that follow. */
.aib-v2 .v2-ring { transform-box: view-box; transform-origin: 130px 130px; transition: opacity .6s ease, transform 1s var(--v2-ease); }
.v2-js [data-v2-cyc]:not(.v2-in) .v2-ring { opacity: 0; transform: scale(.72) rotate(-50deg); }
.v2-js [data-v2-cyc]:not(.v2-in) .v2-arc { opacity: 0; transform: rotate(-450deg); }
@keyframes v2-node { from { transform: scale(0); } }
@keyframes v2-lab { from { opacity: 0; scale: .6; } }
.v2-js [data-v2-cyc].v2-in .v2-n { animation: v2-node .55s var(--v2-pop) backwards; }
.v2-js [data-v2-cyc].v2-in .v2-n:nth-of-type(3) { animation-delay: .35s; }
.v2-js [data-v2-cyc].v2-in .v2-n:nth-of-type(4) { animation-delay: .47s; }
.v2-js [data-v2-cyc].v2-in .v2-n:nth-of-type(5) { animation-delay: .59s; }
.v2-js [data-v2-cyc].v2-in .v2-n:nth-of-type(6) { animation-delay: .71s; }
.v2-js [data-v2-cyc].v2-in .v2-cl { animation: v2-lab .5s var(--v2-ease) backwards; }
.v2-js [data-v2-cyc].v2-in .v2-cl-0 { animation-delay: .5s; }
.v2-js [data-v2-cyc].v2-in .v2-cl-1 { animation-delay: .62s; }
.v2-js [data-v2-cyc].v2-in .v2-cl-2 { animation-delay: .74s; }
.v2-js [data-v2-cyc].v2-in .v2-cl-3 { animation-delay: .86s; }

/* with motion: one line at a time, in the middle of the ring */
.v2-js .v2-cyc-lines {
  position: absolute;
  left: 50%; top: 50%;
  width: 36%;
  margin: 0;
  gap: 0;
  text-align: center;
  font-size: var(--fs-base);
  line-height: 1.45;
  transform: translate(-50%, -50%);
  transition: opacity .5s ease 1s;
}
.v2-js [data-v2-cyc]:not(.v2-in) .v2-cyc-lines { opacity: 0; }
.v2-js .v2-cyc-lines li { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.v2-js .v2-cyc-lines li.on { opacity: 1; transform: none; transition-delay: .35s; }
.v2-js .v2-cyc-lines b { display: block; margin: 0 0 2px; color: var(--gada); font-size: 1.15em; }

/* ---------------------------------------------------------------- 6 · reviews
   A slow endless belt. Two identical sets side by side, the run slides one
   set's width and starts over, so the seam never shows. Pauses on hover, on
   keyboard focus, off screen and with the button; reduced motion gets the
   reviews as a still, wrapped list. */

.aib-v2 .v2-reviews .v2-head { margin-bottom: 22px; }
.aib-v2 .v2-reviews .v2-sub { color: #6B675C; }
.aib-v2 .v2-reviews .v2-sub b { color: var(--ink); }
.aib-v2 .v2-stars { color: #F5A524; letter-spacing: 1px; }
.aib-v2 .v2-reviews .v2-hold { margin-top: 10px; color: var(--ink); }
.aib-v2 .v2-marq {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.aib-v2 .v2-marq-run { display: flex; width: max-content; }
.aib-v2 .v2-marq-set { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 4px 16px 4px 0; list-style: none; }
.aib-v2 .v2-q {
  width: max-content;
  max-width: min(340px, 78vw);
  padding: 14px 18px;
  border: 1px solid #E7E2D6;
  border-radius: 14px;
  background: var(--kagoj-card);
  line-height: 1.5;
}
.aib-v2 .v2-q p { font-weight: 700; font-size: var(--fs-base); }
.aib-v2 .v2-q .v2-q-ans { margin-top: 6px; font-weight: 400; font-size: var(--fs-xs); color: var(--gada); }
.aib-v2 .v2-q-crit { border-color: #D9CFB6; }
.aib-v2 .v2-q-who { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: #6B675C; }

/* entrance: the stars fill one by one while the figures count up, and the
   belt glides in from the right before it starts to run. On a mouse, the
   review under the cursor lifts (the belt has already paused). */
.v2-js .v2-st { display: inline-block; font-style: normal; transition: opacity .3s ease, transform .5s var(--v2-pop); transition-delay: calc(.3s + var(--i) * 90ms); }
.aib-v2 .v2-st { font-style: normal; }
.v2-js .v2-sub:not(.v2-in) .v2-st { opacity: .15; transform: scale(.4); }
.v2-js [data-v2-marq] .v2-marq-run { transition: opacity .8s ease, translate 1.1s var(--v2-ease); }
.v2-js [data-v2-marq]:not(.v2-in) .v2-marq-run { opacity: 0; translate: 90px 0; }
@media (hover: hover) and (pointer: fine) {
  .aib-v2 .v2-q { transition: transform .3s var(--v2-ease), border-color .2s ease; }
  .aib-v2 .v2-q:hover { transform: translateY(-4px); border-color: #CFC6AE; }
}

@keyframes v2-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .aib-v2 .v2-marq-run { animation: v2-marq 46s linear infinite; }
  .aib-v2 .v2-marq:hover .v2-marq-run,
  .aib-v2 .v2-marq:focus-within .v2-marq-run,
  .aib-v2 .v2-marq.v2-held .v2-marq-run,
  .v2-js .v2-marq:not(.v2-run) .v2-marq-run { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .aib-v2 .v2-marq { -webkit-mask-image: none; mask-image: none; }
  .aib-v2 .v2-marq-run { width: auto; }
  .aib-v2 .v2-marq-set { flex-wrap: wrap; justify-content: center; padding: 0 22px; }
  .aib-v2 .v2-marq-set[aria-hidden] { display: none; }
}

/* ---------------------------------------------------------------- 7 · founder
   The cut-out's frame is copied from motion.css so v2 does not depend on the
   motion switch; the portrait's rise, the tilt toward a mouse and the
   credentials' stagger still come from the motion layer when it is on. Here:
   the kicker, the name's words, the student count and the depth below. */

.aib-v2 .instructor .photo.has-cut {
  overflow: visible;
  box-shadow: 10px 10px 0 rgba(31, 75, 255, .32);
  margin-top: 40px;
}
/* the depth: home-v2.js scales this box (.95 to 1.04) from the cut-out's
   feet as the section crosses the screen, so the figure grows toward the
   reader while the frame stays put. The box is the frame's own size, so the
   picture sits exactly where it did without it. */
.aib-v2 .v2-par { position: absolute; inset: 0; display: block; z-index: 2; transform-origin: 50% 100%; }
.aib-v2 .instructor .photo img.founder-cut {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: auto;
  height: 120%;
  max-width: none;
  object-fit: contain;
  transform: translateX(-50%);
  clip-path: inset(0 0 7% 0);
}

/* ---------------------------------------------------------------- 8 · price
   One card: price, what is in it, the separate total struck through, the
   payback count down and the refund seal. */

.aib-v2 .v2-price .wrap { max-width: 1000px; }
.aib-v2 .v2-pcard {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: 20px;
  background: var(--kagoj-card);
  box-shadow: 0 1px 2px rgba(13, 18, 41, .06), 0 40px 80px -40px rgba(31, 75, 255, .45);
}
/* entrance: the card rises and settles, its dark side slides in after it;
   the inclusions arrive in a wave with the lesson count counting up; then
   the strike, the count down, the seal, and one sweep across the button. */
.aib-v2 .v2-pcard { transition: opacity .7s ease, transform .9s var(--v2-ease); }
.v2-js [data-v2-price]:not(.v2-in) { opacity: 0; transform: translateY(30px) scale(.98); }
.aib-v2 .v2-pc-side { transition: transform 1s var(--v2-ease) .15s; }
.v2-js [data-v2-price]:not(.v2-in) .v2-pc-side { transform: translateX(36px); }
.aib-v2 .v2-pc-main { padding: clamp(22px, 4vw, 40px); }
.aib-v2 .v2-pc-main h2 { margin-top: 6px; font-size: var(--fs-2xl); font-weight: 700; }
.aib-v2 .v2-pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 14px; }
.aib-v2 .v2-pc-price > b { font-family: var(--f-display); font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.aib-v2 .v2-was { font-size: var(--fs-sm); line-height: 1.5; color: var(--dhoa-dark); }
.aib-v2 .v2-was s { position: relative; margin-left: 4px; font-size: var(--fs-md); text-decoration: none; }
/* the strike is drawn, not a text decoration, so it can draw itself in */
.aib-v2 .v2-was s::after {
  content: "";
  position: absolute;
  left: -3px; right: -3px; top: 52%;
  height: 2px;
  border-radius: 2px;
  background: var(--gada);
  transform: rotate(-9deg);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1) .45s;
}
.v2-js .v2-pcard:not(.v2-in) .v2-was s::after { transform: rotate(-9deg) scaleX(0); }

.aib-v2 .v2-inc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.aib-v2 .v2-inc li { padding: 3px 11px; border-radius: 99px; background: var(--gada-soft); color: #1A2A80; font-size: var(--fs-xs); line-height: 1.6; }
.aib-v2 .v2-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; }
.aib-v2 .v2-pay { font-size: var(--fs-xs); line-height: 1.5; color: var(--dhoa-dark); }
.aib-v2 .v2-alt { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; font-size: var(--fs-xs); line-height: 1.6; }
.aib-v2 .v2-alt a { color: var(--dhoa-dark); text-decoration: underline; text-underline-offset: 3px; }
.aib-v2 .v2-alt a:hover { color: var(--ink); }

.aib-v2 .v2-pc-side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(22px, 4vw, 36px);
  background: var(--nil);
  color: #fff;
}
.aib-v2 .v2-m-l { display: block; font-size: var(--fs-xs); line-height: 1.5; color: var(--dhoa); }
.aib-v2 .v2-m-n { display: block; margin-top: 4px; font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 700; line-height: 1.15; color: var(--v2-money); }
.aib-v2 .v2-jobs { display: flex; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.aib-v2 .v2-jobs li {
  position: relative;
  isolation: isolate;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  font-size: var(--fs-xs);
  color: var(--dhoa);
}
.aib-v2 .v2-jobs li::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 8px;
  background: var(--v2-money);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.aib-v2 .v2-jobs li.on { color: #06281C; }
.aib-v2 .v2-jobs li.on::before { opacity: 1; transform: none; }
.aib-v2 .v2-m-r { margin-top: 12px; font-weight: 700; line-height: 1.5; color: var(--v2-money); }
.aib-v2 .v2-meter small { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.5; color: var(--dhoa); }
.v2-js .v2-m-n { color: #fff; transition: color .3s ease; }
.v2-js .v2-meter.done .v2-m-n { color: var(--v2-money); }
.v2-js .v2-m-r { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.v2-js .v2-meter.done .v2-m-r { opacity: 1; transform: none; }

/* the refund seal stamps in once the price is paid back */
.aib-v2 .v2-seal {
  align-self: flex-start;
  width: 128px; height: 128px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 2px dashed var(--v2-money);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 199, 147, .2), transparent 70%);
  box-shadow: 0 0 0 6px rgba(56, 199, 147, .1);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transform: rotate(-8deg);
}
.aib-v2 .v2-seal:hover { color: #fff; box-shadow: 0 0 0 6px rgba(56, 199, 147, .25); }
.v2-js .v2-seal { opacity: 0; transform: rotate(-20deg) scale(1.6); transition: opacity .2s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.v2-js .v2-pcard.v2-done .v2-seal { opacity: 1; transform: rotate(-8deg); }

@media (max-width: 820px) {
  .aib-v2 .v2-pcard { grid-template-columns: 1fr; }
  .aib-v2 .v2-pc-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .aib-v2 .v2-meter { flex: 1 1 220px; }
  .aib-v2 .v2-seal { align-self: center; }
}

/* ---------------------------------------------------------------- 9 · FAQ + close */

.aib-v2 .v2-faq .wrap { max-width: 800px; }
.aib-v2 .v2-faqs { margin: 0 auto; }
.aib-v2 .v2-faqs details { border-radius: 12px; background: var(--kagoj-card); }
.v2-js .v2-faqs[data-v2-r] > details { transition: opacity .5s ease, transform .65s var(--v2-ease), border-color .2s ease; }
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .aib-v2 .v2-faqs { interpolate-size: allow-keywords; }
    .aib-v2 .v2-faqs details::details-content {
      height: 0;
      overflow: clip;
      transition: height .32s cubic-bezier(.2, .7, .2, 1), content-visibility .32s allow-discrete;
    }
    .aib-v2 .v2-faqs details[open]::details-content { height: auto; }
  }
  .aib-v2 .v2-faqs details[open] .a { animation: v2-fade .4s ease both; }
}
@keyframes v2-fade { from { opacity: 0; transform: translateY(-4px); } }

/* free books: the price card's pills, centred under a centred head */
.aib-v2 .v2-books .v2-inc { justify-content: center; max-width: 720px; margin: 0 auto; }
.aib-v2 .v2-faqs .a a { color: var(--gada); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.aib-v2 .v2-faq-free { margin-top: 18px; text-align: center; font-size: var(--fs-sm); line-height: 1.6; }
.aib-v2 .v2-faq-free a { color: var(--gada); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.aib-v2 .v2-close { text-align: center; }
.aib-v2 .v2-close h2 { max-width: 24ch; margin: 0 auto; font-size: var(--fs-2xl); font-weight: 700; }
.aib-v2 .v2-close-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 26px; }
.aib-v2 .v2-free { color: var(--dhoa); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.aib-v2 .v2-free:hover { color: #fff; }
/* one slow ring off the closing button, a quiet "this is the door" */
@keyframes v2-ring { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.18, 1.45); } }
@media (prefers-reduced-motion: no-preference) {
  .aib-v2 .v2-close .btn-primary { position: relative; }
  .aib-v2 .v2-close .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--gada-bright);
    animation: v2-ring 2.8s ease-out infinite;
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------- phone buy bar
   The price and the button, pinned to the bottom of a phone screen. Shown by
   home-v2.js (`v2-bar-on` on <html>) only while the hero, the quiz, the price
   card and the close are all off screen. It slides; with reduced motion it
   simply appears. Hidden from the tab order while it is away. The chat
   bubble steps up out of its way. */

.aib-v2 .v2-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--nil-deep);
  color: #fff;
  border-top: 1px solid var(--line-dark);
  box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .6);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .4s var(--v2-ease), visibility 0s linear .4s;
}
.aib-v2 .v2-bar[hidden] { display: none; }
.v2-bar-on .aib-v2 .v2-bar { transform: none; visibility: visible; transition: transform .4s var(--v2-ease), visibility 0s; }
.aib-v2 .v2-bar-p { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 8px; margin: 0; line-height: 1.3; }
.aib-v2 .v2-bar-p b { font-size: var(--fs-lg); font-weight: 700; }
.aib-v2 .v2-bar-p s { font-size: var(--fs-xs); color: var(--dhoa); }
.aib-v2 .v2-bar-p small { grid-column: 1 / -1; font-size: var(--fs-xs); line-height: 1.45; color: var(--v2-money); }
.aib-v2 .v2-bar .btn { flex: none; padding: 11px 18px; font-size: var(--fs-sm); }
.aib-v2 .wpsr-fm-chat-wrapper { transition: transform .4s var(--v2-ease); }
@media (max-width: 820px) {
  .v2-bar-on .aib-v2 .wpsr-fm-chat-wrapper { transform: translateY(-70px); }
}
@media (min-width: 821px) {
  .aib-v2 .v2-bar { display: none; }
}

/* Refund line under the hero button: the first answer to "ঠকব না তো?". */
.hero-assure{margin:.7rem 0 0;font-size:var(--fs-xs);line-height:1.5;opacity:.8}

/* ---- No sliders (owner, October 2026): the skills row is a plain grid,
   1, 2, then 3 per row, and its scroll arrows are hidden. The reveal rises
   instead of sliding in from the right, so nothing ever sits off screen. */
.aib-v2 .v2-arrows { display: none !important; }
.aib-v2 .v2-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  margin: 0; padding: 6px 0 10px; overflow: visible; scroll-snap-type: none;
}
.aib-v2 .v2-sk { flex: none; min-width: 0; }
.v2-js .v2-skills:not(.v2-in) .v2-sk { transform: translateY(16px); }
@media (min-width: 600px) { .aib-v2 .v2-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .aib-v2 .v2-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }