/* ==========================================================================
   Home — Blue Lily landing, sections 03–14.
   Loaded on the home page only (after hero-flow.css, whose --bl-* palette it
   uses).

   Rules every scene here keeps:
     * moving things move by transform or opacity, on their own element
     * nothing continuous runs off screen: .v2.is-live gates every animation
     * without JavaScript, or with motion reduced, every section is complete
       and still -- scroll-drawn lines are drawn, reveals are revealed
   ========================================================================== */

/* ================================================================ base === */
/* THE SITE'S VERTICAL RHYTHM. Three steps, declared once, used by every page.
   Before this every stylesheet picked its own clamp and the site ran on three
   incompatible scales at once -- an AI section breathed at 56px while an About
   section breathed at 168px. A section may choose a STEP; it may not invent a
   number. */
:root {
  /* Tightened once the type scale came down: headings are about 40% smaller
     than they were, and padding set against the old sizes left every section
     floating. The ratio of air to ink is what reads as considered, not the
     absolute number. */
  --v2-pad-tight: clamp(44px, 4.6vw, 68px);    /* diagram-dense sections */
  --v2-pad:       clamp(60px, 6vw, 92px);      /* the standard */
  --v2-pad-loose: clamp(76px, 7.6vw, 116px);   /* a deliberate breath */
  --v2-pad-hero:  clamp(64px, 6.6vw, 104px);   /* an opening */
}
.v2 {
  position: relative;
  isolation: isolate;
  padding-block: var(--v2-pad);
  overflow: clip;
}
.v2--warm   { background: var(--bl-off-white); }
.v2--white  { background: #FFFFFF; }
.v2--mist   { background-color: #EEF4FD; background-image: linear-gradient(180deg, #F3F7FE 0%, #EAF2FD 100%); }
.v2--navy   { background-color: var(--bl-midnight);
              background-image: linear-gradient(160deg, #0B1630 0%, #10264A 70%, #122E58 100%); }
.v2--indigo { background-color: #0F1437;
              background-image: linear-gradient(165deg, #0B1630 0%, #151A46 55%, #1E1B4B 100%); }

/* dark sections share type colours */
.v2--navy, .v2--indigo, .v2--horizon, .v2--finale { color: #E8F0FE; }

.v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--space-4);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1D4ED8;                               /* 6.3:1 on off-white */
}
.v2-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bl-electric), var(--bl-violet));
}
.v2--navy .v2-eyebrow, .v2--indigo .v2-eyebrow,
.v2--horizon .v2-eyebrow, .v2--finale .v2-eyebrow { color: #BFDBFE; }

.v2-head h2,
.v2-finale__copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: #0B1630;
  text-wrap: balance;
}
.v2--navy .v2-head h2, .v2--indigo .v2-head h2,
.v2--horizon .v2-head h2, .v2-finale__copy h2 { color: #FFFFFF; }
.v2-head--center { text-align: center; }
.v2-head--center .v2-eyebrow { justify-content: center; }
/* The field must sit far enough inside the section that a petal can sway
   without crossing the edge -- `.v2` clips, so a petal that leaves gets
   sliced mid-drift, which reads as the animation being cut. */
.v2-head > .petal-field { inset: -20% -10% -6%; }

.v2-lead {
  margin: var(--space-5) 0 0;
  max-width: 36em;
  font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem);
  line-height: 1.65;
  color: var(--bl-slate);                        /* 7.2:1 */
}
.v2--navy .v2-lead, .v2--indigo .v2-lead,
.v2--horizon .v2-lead, .v2--finale .v2-lead { color: #C9D8EE; }
.v2--horizon .v2-lead { color: #E8F0FE; }   /* sits nearest the horizon glow */
/* the finale's line sits over the bloom and the centre of its glow:
   #C9D8EE measured 4.25:1 there */
.v2-finale__copy .v2-lead { color: #EEF4FF; }
.v2-small { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--bl-slate); max-width: 36em; }
.v2-small--dark { color: #B7C8E2; }
.v2-note { margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--bl-slate); }
.v2-note--center { text-align: center; }
.v2-overline {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #1D4ED8;
}
.v2-pill { margin: 0 0 var(--space-4); }
.v2 .btn-row { margin-top: var(--space-8); }

.v2-center { max-width: 760px; margin: 0 auto; text-align: center; }
.v2-center .v2-lead { margin-inline: auto; }

/* ============================================================== layout === */
.v2-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.v2-split--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.v2-split--top { align-items: start; }
.v2-split--flip > :first-child { order: 2; }
.v2-copy { min-width: 0; }

/* ============================================================== frames === */
.v2-frame { margin: var(--space-8) 0 0; }
.v2-split > .v2-frame { margin: 0; }
.v2-frame picture {
  display: block;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 24px 60px -28px rgba(11, 22, 48, .45), 0 0 0 1px rgba(37, 99, 235, .08);
}
.v2-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
.v2-frame figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--bl-slate); }
.v2-frame--dark picture { box-shadow: 0 24px 60px -24px rgba(4, 10, 26, .9), 0 0 0 1px rgba(147, 197, 253, .18); }
.v2-frame--dark figcaption { color: #B7C8E2; }
.v2-frame--small { max-width: 380px; }
@media (hover: hover) {
  .v2-frame:hover img { transform: scale(1.035); }
}
[data-tilt] { transition: transform .5s cubic-bezier(.22, .61, .36, 1); will-change: transform; }

/* ====================================================== buttons (v2) === */
.v2-btn { transition: box-shadow .45s ease, background-color .3s ease, border-color .3s ease, color .3s ease; }
.v2-btn--primary, .v2-btn--glow {
  background: var(--bl-royal);
  color: #FFFFFF;
  border: 1px solid rgba(147, 197, 253, .45);
  box-shadow: 0 10px 28px -12px rgba(37, 99, 235, .85);
}
.v2-btn--primary:hover, .v2-btn--glow:hover,
.v2-btn--primary:focus-visible, .v2-btn--glow:focus-visible {
  background: #1D4ED8;
  color: #FFFFFF;
  box-shadow: 0 14px 36px -10px rgba(37, 99, 235, .95), 0 0 30px rgba(77, 168, 255, .4);
}
.v2-btn--secondary { background: transparent; color: #1D4ED8; border: 1.5px solid rgba(37, 99, 235, .45); }
.v2-btn--secondary:hover { border-color: #1D4ED8; box-shadow: 0 0 24px rgba(77, 168, 255, .25); color: #1E40AF; }
.v2-btn--ghost { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(191, 219, 254, .55); }
.v2-btn--ghost:hover, .v2-btn--ghost:focus-visible {
  border-color: #BFDBFE; color: #FFFFFF;
  box-shadow: 0 0 28px rgba(77, 168, 255, .35), inset 0 0 16px rgba(77, 168, 255, .12);
}
.v2-btn:focus-visible { outline: 3px solid var(--bl-soft); outline-offset: 3px; }

/* ================================================== links (shared) === */
/* A link inside a scene answers the pointer the way a button does: on the
   site's own ease, over the same short beat, instead of snapping. Only the
   colour, the underline's colour and the opacity move, so the text never
   reflows. Buttons keep their own rules.

   The underline itself is deliberately NOT made transparent here: a link
   set in running prose needs its line at rest, and that is the only thing
   marking it as a link. Where a link should have its underline arrive on
   hover instead, the page opts in with .v2-link--fade. */
.v2 a:not(.v2-btn):not(.btn) {
  transition: color .28s cubic-bezier(.22, .61, .36, 1),
              text-decoration-color .28s cubic-bezier(.22, .61, .36, 1),
              opacity .28s cubic-bezier(.22, .61, .36, 1);
}
.v2 a.v2-link--fade { text-decoration-line: underline; text-decoration-color: transparent; }
.v2 a.v2-link--fade:hover,
.v2 a.v2-link--fade:focus-visible { text-decoration-color: currentColor; }

/* ============================================================== reveal === */
/* Heading first, supporting content a beat later; each scene adds its own
   entrance below. The petal cluster follows the heading. */
.js .v2-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
}
.js .v2-reveal--late { transition-delay: .22s; }
.js .v2.is-in .v2-reveal { opacity: 1; transform: none; }
.v2 .petal-field { transition-delay: .25s; }

/* ================================================= 03 FLOWING LIGHT === */
.v2-flow {
  position: relative;
  margin-top: clamp(16px, 2vw, 32px);
  aspect-ratio: 1200 / 220;
  will-change: transform;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.v2-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v2-flow__track { fill: none; stroke: rgba(37, 99, 235, .12); stroke-width: 2; }
.v2-flow__line {
  fill: none;
  stroke: url(#v2FlowGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;                /* drawn by default; JS draws it on scroll */
}
.js .v2-flow__line { stroke-dashoffset: 1; }
.v2-flow__light { fill: #4DA8FF; opacity: .85; }
.v2-flow__stops { list-style: none; margin: 0; padding: 0; }
.v2-flow__stop {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 0;
  height: 0;
}
.v2-flow__dot {
  position: absolute;
  left: -8px; top: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #2563EB;
  box-shadow: 0 0 0 6px rgba(77, 168, 255, .16);
  transition: box-shadow .6s ease, transform .6s ease;
}
.v2-flow__petal {
  position: absolute;
  left: -9px; top: -52px;
  width: 18px; height: 40px;
  color: var(--petal-electric);
  transform: scale(1) rotate(-8deg);
  transform-origin: 50% 100%;
  transition: transform .9s cubic-bezier(.34, 1.4, .64, 1), opacity .6s ease;
}
.v2-flow__petal svg { width: 100%; height: 100%; }
.js .v2-flow__stop:not(.is-reached) .v2-flow__petal { transform: scale(0) rotate(-40deg); opacity: 0; }
.v2-flow__stop.is-reached .v2-flow__dot { box-shadow: 0 0 0 8px rgba(77, 168, 255, .22), 0 0 24px rgba(37, 99, 235, .45); }
.v2-flow__label {
  position: absolute;
  top: 18px;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #0B1630;
}

/* ================================================ 04A GUEST JOURNEY === */
.v2-duo { position: relative; padding: 0 0 6% 8%; }
.v2-duo__main, .v2-duo__inset { margin: 0; }
.v2-duo__main img { aspect-ratio: 16 / 11; }
.v2-duo__inset {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  z-index: 1;
}
.v2-duo__inset picture { border: 4px solid #FFFFFF; }
.v2-duo__inset img { aspect-ratio: 4 / 3; }

.v2-journey { position: relative; margin-top: clamp(32px, 3.6vw, 52px); }
.v2-journey__rail {
  position: absolute;
  left: 10%; right: 10%;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .15), rgba(37, 99, 235, .5), rgba(139, 92, 246, .35));
}
/* the one travelling light on Home's rail: a point, not a petal */
.v2-journey__light {
  position: absolute;
  inset: 0;
  animation: v2-run 9s linear infinite;
}
.v2-journey__light::after {
  content: '';
  position: absolute;
  right: -2px; top: -3px;
  width: 26px; height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(77, 168, 255, 0), #7DC0FF);
  box-shadow: 0 0 12px rgba(77, 168, 255, .7);
}
@keyframes v2-run {
  0%   { transform: translate3d(-100%, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 0; }
}
.v2-journey__stages {
  list-style: none;
  margin: 0;
  padding: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.v2-stage {
  position: relative;
  padding: 14px 14px 18px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(37, 99, 235, .1);
  box-shadow: 0 12px 30px -20px rgba(11, 22, 48, .35);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.v2-stage__link {
  position: absolute;
  left: 50%;
  top: -43px;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #2563EB;
  transition: box-shadow .45s ease, transform .45s ease;
}
.v2-stage__img { overflow: hidden; border-radius: 12px; margin-bottom: 12px; }
.v2-stage__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
                     transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.v2-stage__icon {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin-bottom: 12px;
  border-radius: 12px;
  color: #2563EB;
  background: radial-gradient(circle at 50% 40%, rgba(77, 168, 255, .18), rgba(37, 99, 235, .04) 70%);
}
.v2-stage__step { margin: 0; font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600;
                  letter-spacing: .14em; color: #1D4ED8; }
.v2-stage h3 { margin: 4px 0 6px; font-size: var(--text-base); color: #0B1630; }
.v2-stage p:last-child { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--bl-slate); }
.v2-stage:hover, .v2-stage:focus-visible {
  transform: translate3d(0, -6px, 0);
  border-color: rgba(37, 99, 235, .4);
  box-shadow: 0 22px 44px -22px rgba(37, 99, 235, .55), 0 0 0 1px rgba(77, 168, 255, .2);
  outline: none;
}
.v2-stage:hover .v2-stage__link, .v2-stage:focus-visible .v2-stage__link {
  transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(77, 168, 255, .25), 0 0 20px rgba(37, 99, 235, .6);
}
.v2-stage:hover .v2-stage__img img { transform: scale(1.06); }
/* the stages arrive in order, left to right */
/* The entrance uses `translate`, so the hover lift (`transform`) keeps its
   own quick timing instead of inheriting the staggered entrance delay. */
.js .v2-stage { opacity: 0; translate: 0 24px; }
.js .v2-journey.is-in .v2-stage {
  opacity: 1;
  translate: 0 0;
  transition: opacity .7s ease calc(.05s + var(--i) * .1s),
              translate .7s cubic-bezier(.22, .61, .36, 1) calc(.05s + var(--i) * .1s),
              transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}

/* ============================================ 04B CONNECTED COMMERCE === */
.v2-board {
  position: relative;
  min-height: clamp(380px, 32vw, 470px);
  border-radius: 28px;
  background: linear-gradient(160deg, #FFFFFF, #F3F7FE);
  border: 1px solid rgba(37, 99, 235, .12);
  box-shadow: 0 30px 70px -40px rgba(11, 22, 48, .4);
  overflow: hidden;
  perspective: 900px;
}
.v2-board__grid {
  position: absolute;
  inset: -12%;
  background-image:
    linear-gradient(rgba(37, 99, 235, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .09) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.v2-board__glow {
  position: absolute;
  left: 0; top: 0;
  width: 320px; height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(77, 168, 255, .22), transparent);
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}
.v2-board.has-pointer .v2-board__glow { opacity: 1; }
.v2-board__paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-board__paths path {
  fill: none;
  stroke: #4DA8FF;
  stroke-width: 1.6;
  stroke-dasharray: 4 7;
  vector-effect: non-scaling-stroke;
}
/* The paths breathe as one layer rather than marching their dashes: a moving
   dash repaints the whole board every frame, an opacity change repaints
   nothing. */
.v2-board__paths { opacity: .7; animation: v2-breathe 3.2s ease-in-out infinite alternate; }
.v2-board__card {
  position: absolute;
  margin: 0;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, .14);
  box-shadow: 0 20px 44px -24px rgba(11, 22, 48, .55);
  background: #FFFFFF;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.v2-board__card picture, .v2-ui__panel picture { display: block; height: 100%; }
.v2-board__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-board__card--main { left: 6%; top: 12%; width: 58%; aspect-ratio: 4 / 3; }
.v2-board__card--side { right: 5%; bottom: 8%; width: 42%; aspect-ratio: 4 / 3; }
.v2-board__card:hover { box-shadow: 0 26px 50px -22px rgba(37, 99, 235, .6), 0 0 30px rgba(77, 168, 255, .35); }
.v2-board__nodes { list-style: none; margin: 0; padding: 0; }
.v2-node {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #0B1630;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(37, 99, 235, .22);
  box-shadow: 0 10px 24px -14px rgba(37, 99, 235, .6);
  white-space: nowrap;
}
.v2-node svg { color: #2563EB; flex: none; }
.v2-board__petal {
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 27px;
  color: var(--petal-violet);
  opacity: .7;
  pointer-events: none;
}
.v2-board__petal svg { width: 100%; height: 100%; }
.v2-board__petal--a { left: 30%; top: 70%; animation: v2-petal-a 16s ease-in-out infinite alternate; }
.v2-board__petal--b { left: 82%; top: 40%; color: var(--petal-electric); animation: v2-petal-b 19s ease-in-out infinite alternate; }
@keyframes v2-petal-a { to { transform: translate3d(120px, -90px, 0) rotate(140deg); } }
@keyframes v2-petal-b { to { transform: translate3d(-140px, 70px, 0) rotate(-120deg); } }
/* entrance: the grid assembles, then the cards settle onto it */
.js .v2-board__card { opacity: 0; translate: 0 20px; scale: .96; }
.js .v2-board.is-in .v2-board__card { opacity: 1; translate: 0 0; scale: 1;
  transition: opacity .8s ease .45s, translate .9s cubic-bezier(.22, .61, .36, 1) .45s,
              scale .9s cubic-bezier(.22, .61, .36, 1) .45s, transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease; }
.js .v2-board.is-in .v2-board__card--side { transition-delay: .65s, .65s, .65s, 0s, 0s; }
.js .v2-board__grid { opacity: 0; }
.js .v2-board.is-in .v2-board__grid { opacity: 1; transition: opacity 1.2s ease .2s, transform .9s cubic-bezier(.22, .61, .36, 1); }

/* ============================================ 05 INTELLIGENT ORBIT === */
.v2-navy__bg { position: absolute; inset: 0; z-index: -1; }
.v2-navy__bg picture, .v2-navy__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-navy__bg img { opacity: .14; }
.v2-navy__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 75% 50%, rgba(37, 99, 235, .22), transparent 70%),
              linear-gradient(90deg, rgba(11, 22, 48, .92) 0%, rgba(11, 22, 48, .55) 60%, rgba(11, 22, 48, .7) 100%);
}
.v2-orbit-wrap { position: relative; perspective: 1100px; }
.v2-orbit {
  --size: min(520px, 100%);
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  margin: 0 auto;

  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.v2-orbit__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(147, 197, 253, .22); }
.v2-orbit__ring--outer { inset: 11%; border-style: dashed; }
.v2-orbit__ring--inner { inset: 30%; border-color: rgba(147, 197, 253, .14); }
.v2-orbit__core {
  position: absolute;
  inset: 35%;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border-radius: 50%;
  text-align: center;
  color: #FFFFFF;
  background-color: #14306A;
  background-image: radial-gradient(circle at 50% 35%, #2B5FD9 0%, #14306A 60%, #0E2350 100%);
  border: 1px solid rgba(147, 197, 253, .45);
  box-shadow: 0 0 0 10px rgba(77, 168, 255, .06), 0 0 70px rgba(77, 168, 255, .45);
}
.v2-orbit__core svg { color: #BFDBFE; }
.v2-orbit__core strong { font-family: var(--font-display); font-size: clamp(.9rem, .8rem + .4vw, 1.05rem); }
.v2-orbit__core::after {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 168, 255, .3), transparent);
  z-index: -1;
  animation: v2-breathe 5s ease-in-out infinite alternate;
}
@keyframes v2-breathe { from { opacity: .45; } to { opacity: 1; } }
.v2-orbit__track {
  position: absolute;
  inset: 11%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: v2-spin 110s linear infinite;
}
.v2-orbit__item { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.v2-orbit__spoke {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 50%;
  background: linear-gradient(180deg, rgba(147, 197, 253, .5), rgba(147, 197, 253, .06));
  overflow: hidden;
  transition: background .4s ease;
}
.v2-orbit__spoke i {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, #BFDBFE);
  /* a light running down each spoke toward the core. The delay is derived
     from the spoke's own angle, so the nine never fall in step. */
  animation: v2-fall 3.6s linear infinite;
  animation-delay: calc(var(--a) / 100deg * -1s);
}
@keyframes v2-fall { from { transform: translate3d(0, -20px, 0); } to { transform: translate3d(0, 400%, 0); } }
.v2-orbit__chip {
  position: absolute;
  left: 50%;
  top: 0;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}
.v2-orbit__chip > * { pointer-events: none; }
.v2-orbit__chip svg, .v2-orbit__chip span { display: block; }
.v2-orbit__chip {
  /* the face turns against the track so labels stay upright */
  animation: v2-counter 110s linear infinite;
}
@keyframes v2-counter {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
  to   { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); }
}
@keyframes v2-spin { to { transform: rotate(360deg); } }
.v2-orbit__chip {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 104px;
  padding: 10px 8px;
  border-radius: 16px;
  color: #FFFFFF;
  background: rgba(16, 38, 74, .92);
  border: 1px solid rgba(147, 197, 253, .35);
  box-shadow: 0 12px 26px -12px rgba(4, 10, 26, .9);
  transition: box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
.v2-orbit__chip svg { color: #93C5FD; }
.v2-orbit__chip span { font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; }
.v2-orbit__chip:hover, .v2-orbit__chip:focus-visible {
  outline: none;
  background: #1B3A78;
  border-color: #BFDBFE;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, .35), 0 0 34px rgba(77, 168, 255, .55);
}
.v2-orbit__item:hover .v2-orbit__spoke,
.v2-orbit__item:focus-within .v2-orbit__spoke { background: linear-gradient(180deg, #BFDBFE, rgba(147, 197, 253, .3)); }
/* hovering or focusing the orbit holds it still, so a module can be read.
   A ring that turns while you are trying to read it is not a feature. */
.v2-orbit:hover .v2-orbit__track, .v2-orbit:focus-within .v2-orbit__track,
.v2-orbit:hover .v2-orbit__chip, .v2-orbit:focus-within .v2-orbit__chip,
.v2-orbit:hover .v2-orbit__petals, .v2-orbit:focus-within .v2-orbit__petals,
.v2-orbit:hover .v2-orbit__spoke i, .v2-orbit:focus-within .v2-orbit__spoke i {
  animation-play-state: paused;
}
.v2-orbit__petals { position: absolute; inset: 20%; animation: v2-spin 46s linear infinite reverse; pointer-events: none; }
.v2-orbit__petals span { position: absolute; inset: 0; transform: rotate(var(--r)); }
.v2-orbit__petals svg {
  position: absolute;
  left: 50%; top: 0;
  width: 10px; height: 22px;
  margin-left: -5px;
  color: var(--petal-soft);
  opacity: .6;
}
.v2-orbit__info {
  /* Fixed height, sized to the longest module description (measured:
     8.25em from tablet up, 9.9em at 375px, 11.55em at 320px). A panel that
     grew and shrank as the pointer crossed modules pushed the rest of the
     page up and down -- the jolt in this section. */
  height: 8.5em;
  overflow: hidden;
  max-width: 440px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: var(--text-sm);
  color: #C9D8EE;
}
.v2-orbit__info strong { color: #FFFFFF; }
.js .v2-orbit { opacity: 0; scale: .9; rotate: -8deg; }
.js .v2-orbit-wrap.is-in .v2-orbit { opacity: 1; scale: 1; rotate: 0deg;
  transition: opacity 1.2s ease .3s, scale 1.4s cubic-bezier(.22, .61, .36, 1) .3s,
              rotate 1.4s cubic-bezier(.22, .61, .36, 1) .3s, transform .8s cubic-bezier(.22, .61, .36, 1); }

/* =========================================== 06 LIVING INTERFACE === */
.v2-ui {
  position: relative;
  max-width: 1080px;
  height: clamp(360px, 44vw, 580px);
  margin: clamp(40px, 5vw, 64px) auto 0;
  perspective: 1400px;

  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.v2-ui__panel {
  position: absolute;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #0B1630;
  border: 1px solid rgba(37, 99, 235, .18);
  box-shadow: 0 40px 80px -40px rgba(11, 22, 48, .6), 0 0 0 6px rgba(255, 255, 255, .6);
}
.v2-ui__panel::before {           /* a window bar: three soft dots */
  content: '';
  position: absolute;
  z-index: 1;
  left: 14px; top: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  box-shadow: 14px 0 0 rgba(255, 255, 255, .55), 28px 0 0 rgba(255, 255, 255, .35);
}
.v2-ui__panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-ui__panel--main { left: 17%; top: 0; width: 66%; height: 86%; z-index: 2; }
.v2-ui__panel--left { left: 0; top: 34%; width: 32%; height: 56%; z-index: 3; }
.v2-ui__panel--right { right: 0; top: 14%; width: 32%; height: 56%; z-index: 1; }
.v2-ui__chips {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(16px, 2vw, 24px);
}
.v2-ui__chip {
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #0B1630;
  background: #FFFFFF;
  border: 1px solid rgba(37, 99, 235, .22);
  box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .55);
}
/* scroll entrance: main screen, then side panels slide in, then chips */
.js .v2-ui__panel--main { opacity: 0; transform: translate3d(0, 40px, 0) scale(.96); }
.js .v2-ui__panel--left { opacity: 0; transform: translate3d(-60px, 20px, 0); }
.js .v2-ui__panel--right { opacity: 0; transform: translate3d(60px, 20px, 0); }
.js .v2-ui__chip { opacity: 0; transform: translate3d(0, 14px, 0) scale(.9); }
.js .v2-ui.is-in .v2-ui__panel { opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1); }
.js .v2-ui.is-in .v2-ui__panel--main { transition-delay: .05s; }
.js .v2-ui.is-in .v2-ui__panel--left { transition-delay: .25s; }
.js .v2-ui.is-in .v2-ui__panel--right { transition-delay: .38s; }
.js .v2-ui.is-in ~ .v2-ui__chips .v2-ui__chip { opacity: 1; transform: none;
  transition: opacity .6s ease calc(.55s + var(--i) * .08s), transform .6s cubic-bezier(.34, 1.4, .64, 1) calc(.55s + var(--i) * .08s); }

/* ============================================ 07 LIVING INTELLIGENCE === */
.v2-net { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .9; }
.v2-net__line { stroke: rgba(147, 197, 253, .26); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .v2-net__line { stroke-dashoffset: 1; }
.js .v2.is-in .v2-net__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease calc(var(--i) * .06s); }
.v2-net__node { fill: #93C5FD; transition: fill .4s ease; }
.v2-net__halo { fill: rgba(77, 168, 255, .28); opacity: 0; transition: opacity .5s ease; }
.v2-net__halo.is-near { opacity: 1; }
.v2-net__node.is-near { fill: #FFFFFF; }
.v2-net__pulse { fill: #DBEAFE; }
.v2-ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.v2-ai-card {
  padding: var(--space-6);
  border-radius: 20px;
  background: rgba(16, 26, 70, .82);
  border: 1px solid rgba(147, 197, 253, .2);
  box-shadow: 0 20px 44px -26px rgba(4, 10, 26, .9);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-color .45s ease, box-shadow .45s ease;
}
.v2-ai-card:hover { transform: translate3d(0, -5px, 0); border-color: rgba(191, 219, 254, .55);
                    box-shadow: 0 26px 50px -24px rgba(4, 10, 26, .9), 0 0 30px rgba(139, 92, 246, .25); }
.v2-ai-card__icon {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: var(--space-4);
  border-radius: 12px;
  color: #C4B5FD;
  background: rgba(139, 92, 246, .16);
  border: 1px solid rgba(196, 181, 253, .3);
}
.v2-ai-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); color: #FFFFFF; }
.v2-ai-card p { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: 1.55; color: #C9D8EE; }
.js .v2-ai-card { opacity: 0; translate: 0 26px; }
.js .v2-ai-grid.is-in .v2-ai-card { opacity: 1; translate: 0 0;
  transition: opacity .7s ease calc(.05s + var(--i) * .08s), translate .8s cubic-bezier(.22, .61, .36, 1) calc(.05s + var(--i) * .08s),
              transform .45s cubic-bezier(.22, .61, .36, 1), border-color .45s ease, box-shadow .45s ease; }

/* ============================================== 08 FLOWING JOURNEY === */
.v2-stack { position: relative; margin-top: clamp(24px, 3vw, 36px); padding: 0 0 9% 18%; }
.v2-stack__back, .v2-stack__front { margin: 0; }
.v2-stack__back { position: absolute; left: 0; bottom: 0; width: 42%; z-index: 1; }
.v2-stack__back picture { border: 4px solid #FFFFFF; transform: rotate(-3deg); }
.v2-stack__front img { aspect-ratio: 16 / 11; }
.v2-steps { position: relative; padding-left: 72px; }
.v2-steps__line { position: absolute; left: 6px; top: 0; width: 40px; height: 100%; overflow: visible;
                  will-change: transform; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.v2-steps__track { fill: none; stroke: rgba(37, 99, 235, .12); stroke-width: 2; }
.v2-steps__draw { fill: none; stroke: #2563EB; stroke-width: 3; stroke-linecap: round;
                  stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .v2-steps__draw { stroke-dashoffset: 1; }
.v2-steps__petal { position: absolute; left: 19px; top: -12px; width: 12px; height: 27px; color: var(--petal-electric);
                   will-change: transform; }
.v2-steps__petal svg { width: 100%; height: 100%; }
.v2-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 48px); }
.v2-step { position: relative; }
.v2-step__bloom {
  position: absolute;
  left: -72px;
  top: -4px;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: #FFFFFF;
  background: radial-gradient(circle at 40% 35%, #4DA8FF, #2563EB 70%);
  box-shadow: 0 0 0 6px rgba(77, 168, 255, .15), 0 10px 24px -10px rgba(37, 99, 235, .8);
  transition: transform .8s cubic-bezier(.34, 1.4, .64, 1), opacity .5s ease;
}
.v2-step__num { margin: 0; font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600;
                letter-spacing: .14em; color: #1D4ED8; }
.v2-step h3 { margin: 4px 0 6px; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); color: #0B1630; }
.v2-step p:last-child { margin: 0; color: var(--bl-slate); max-width: 30em; }
.js .v2-step { opacity: .35; transition: opacity .6s ease; }
.js .v2-step .v2-step__bloom { transform: scale(.35); opacity: .6; }
.v2-step.is-lit { opacity: 1; }
.v2-step.is-lit .v2-step__bloom { transform: none; opacity: 1; }

/* ================================================ 09 CONNECTED PATHS === */
.v2-ring-wrap { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; }
.v2-ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
           transition: transform .9s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.v2-ring__item { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.v2-ring__spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 2px;
  margin-top: -1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(37, 99, 235, .45), rgba(37, 99, 235, .12));
  overflow: hidden;
  transition: background .35s ease, box-shadow .35s ease;
}
/* Five lights running inward along the spokes toward the hub -- the section's
   whole idea, convergence, said once every 3.2s rather than once on arrival.
   The negative delay staggers them off each spoke's index so the five never
   arrive together. */
.v2-ring__spoke i {
  position: absolute;
  inset: 0;
  animation: v2-run 3.2s linear infinite;
  animation-delay: calc(var(--i) * -.4s);
}
.v2-ring__spoke i::after {
  content: '';
  position: absolute;
  right: 0; top: -2px;
  width: 22px; height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #4DA8FF);
}
.v2-ring__node {
  position: absolute;
  left: 86%;
  top: 50%;
  pointer-events: auto;
  display: grid;
  gap: 2px;
  width: max-content;
  padding: 10px 14px;
  white-space: nowrap;
  border-radius: 14px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid rgba(37, 99, 235, .2);
  box-shadow: 0 14px 30px -18px rgba(11, 22, 48, .45);
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  transition: box-shadow .35s ease, border-color .35s ease;
}
/* "Property & Operations" is the one name long enough to push its box past
   the ring's edge -- every other label clears it. Only that one wraps, so it
   sits at the same size as the Communication box and nothing else moves. */
.v2-ring__item:nth-child(5) .v2-ring__node { white-space: normal; max-width: 15ch; }
.v2-ring__item:nth-child(5) .v2-ring__node strong { text-wrap: balance; }

.v2-ring__node strong { font-family: var(--font-display); font-size: var(--text-base); color: #0B1630; }
.v2-ring__node em { font-style: normal; font-size: 13px; color: var(--bl-slate); }
/* A node is a label, not a control. It carries no behaviour and hides no
   detail -- the category and what it covers are both printed on it -- so it
   is not focusable, and there is deliberately no focus state here to imply
   that it is. Pointer feedback only. */
.v2-ring__item:hover .v2-ring__spoke {
  background: linear-gradient(90deg, #2563EB, #8B5CF6);
  box-shadow: 0 0 14px rgba(77, 168, 255, .7);
}
.v2-ring__node:hover {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(77, 168, 255, .25), 0 18px 34px -16px rgba(37, 99, 235, .6);
}
.v2-ring__hub {
  position: absolute;
  inset: 33%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 50%;
  text-align: center;
  color: #FFFFFF;
  background-color: #0B1630;
  background-image: radial-gradient(circle at 50% 35%, #2B5FD9, #10264A 70%);
  box-shadow: 0 0 0 10px rgba(77, 168, 255, .1), 0 24px 60px -20px rgba(37, 99, 235, .8);
}
.v2-ring__hub svg { color: #BFDBFE; }
.v2-ring__hub strong { font-family: var(--font-display); font-size: var(--text-base); }
.v2-ring__hub span { font-size: 13px; color: #C9D8EE; }
/* entrance: connections draw out from the hub, then the points appear */
.js .v2-ring__spoke { transform: scaleX(0); }
.js .v2-ring-wrap.is-in .v2-ring__spoke { transform: none; transition: transform .9s cubic-bezier(.22, .61, .36, 1) calc(.05s + var(--i) * .06s), background .35s ease, box-shadow .35s ease; }
.js .v2-ring__node { opacity: 0; }
.js .v2-ring-wrap.is-in .v2-ring__node { opacity: 1; transition: opacity .6s ease calc(.35s + var(--i) * .06s), box-shadow .35s ease, border-color .35s ease; }

/* ============================================ 10 GROWING INTELLIGENCE === */
.v2-dash {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  perspective: 1200px;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.v2-dash__card {
  padding: var(--space-5);
  border-radius: 20px;
  background-color: #FFFFFF;
  background-image: linear-gradient(160deg, #FFFFFF, #F4F8FF);
  border: 1px solid rgba(37, 99, 235, .14);
  box-shadow: 0 24px 50px -30px rgba(11, 22, 48, .45);
}
.v2-dash__card--wide { grid-column: 1 / -1; }
.v2-dash__card svg { display: block; width: 100%; height: auto; }
.v2-dash__label { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; color: #0B1630; }
.v2-dash__note { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); color: var(--bl-slate); }
.v2-chart__area { fill: rgba(77, 168, 255, .14); }
.v2-chart__line { fill: none; stroke: #2563EB; stroke-width: 3; stroke-linecap: round;
                  stroke-dasharray: 1; stroke-dashoffset: 0; }
.v2-chart__ring { fill: none; stroke-width: 14; transform: rotate(-90deg); transform-origin: 60px 60px; }
.v2-chart__ring--track { stroke: rgba(37, 99, 235, .1); }
.v2-chart__ring--a { stroke: #2563EB; stroke-dasharray: 46 100; }
.v2-chart__ring--b { stroke: #8B5CF6; stroke-dasharray: 28 100; stroke-dashoffset: -50; }
.v2-chart__bar { fill: url(#v2FlowGrad); transform-box: fill-box; transform-origin: 50% 100%; }
.js .v2-dash__card { opacity: 0; transform: translate3d(0, 24px, 0); }
.js .v2-dash.is-in .v2-dash__card { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1); }
.js .v2-dash.is-in .v2-dash__card:nth-child(2) { transition-delay: .2s; }
.js .v2-dash.is-in .v2-dash__card:nth-child(3) { transition-delay: .35s; }
.js .v2-chart__line { stroke-dashoffset: 1; }
.js .v2-dash.is-in .v2-chart__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease .2s; }
.js .v2-chart__ring--a, .js .v2-chart__ring--b { stroke-dasharray: 0 100; }
.js .v2-dash.is-in .v2-chart__ring--a { stroke-dasharray: 46 100; transition: stroke-dasharray 1.3s ease .25s; }
.js .v2-dash.is-in .v2-chart__ring--b { stroke-dasharray: 28 100; transition: stroke-dasharray 1.3s ease .45s; }
.js .v2-chart__bar { transform: scaleY(0); }
.js .v2-dash.is-in .v2-chart__bar { transform: none; transition: transform .9s cubic-bezier(.22, .61, .36, 1) calc(.25s + var(--i) * .07s); }

/* ================================================= 02 THE CHANGE === */
/* Two photographs either side of one rule: the operation kept in a dozen
   places, and the same operation on one record. The whole of the movement is
   a little light arriving on the left picture and a little scale on the
   right, written by js/home-scenes.js as the section is read. Nothing wipes,
   nothing slides, and with motion off both sit at their finished state. */
.v2-change__head { max-width: 46rem; }
.v2-change__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(26px, 3.4vw, 44px);
}
.v2-change__side { margin: 0; }
.v2-change__side picture, .v2-change__side img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.v2-change__side img {
  aspect-ratio: 16 / 11;
  object-fit: cover;
  box-shadow: 0 30px 60px -34px rgba(11, 22, 48, .55);
}
.v2-change__side figcaption {
  margin-top: 12px;
  font-size: var(--text-sm);
  color: var(--bl-slate);
}
/* the left picture is the operation as it is: present, but not the point */
.v2-change__side--was { opacity: .82; }
.v2-change__side--was img { filter: saturate(.82); }
.v2-change__side--is { transform-origin: 50% 50%; }
.v2-change__rule {
  align-self: stretch;
  width: 1px;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0),
              rgba(37, 99, 235, .34) 22%, rgba(37, 99, 235, .34) 78%,
              rgba(37, 99, 235, 0));
}
.v2-change__principle {
  margin: clamp(26px, 3vw, 40px) 0 0;
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.32rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.02em;
  color: var(--bl-ink);
}
.js .v2-change__side--was { opacity: .78; }
.js .v2-change__side--is { transform: scale(1); }

/* --------------------------------------------- a route out of a section --- */
/* Buttons are for the two decisions the page asks for. Everywhere else a
   section points onward with a link, so the middle of the page stops
   reading as a row of menu items. */
.v2-route { margin: var(--space-5) 0 0; }
.v2-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bl-blue, #2563EB);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .28s cubic-bezier(.22, .61, .36, 1),
              color .28s cubic-bezier(.22, .61, .36, 1);
}
.v2-link svg { transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.v2-link:hover, .v2-link:focus-visible { text-decoration-color: currentColor; }
.v2-link:hover svg, .v2-link:focus-visible svg { transform: translateX(3px); }
.v2--navy .v2-link, .v2--nightfall .v2-link, .v2--indigo .v2-link,
.v2--teal .v2-link, .v2--finale .v2-link { color: #BFDBFE; }
/* A route is a line of text, so its box is only as tall as the line. Where
   the pointer is a finger that is not enough to hit reliably, so below the
   tablet breakpoint the box grows to the 44px minimum around the same
   text. */
@media (max-width: 767px) {
  .v2-link { min-height: 44px; }
}

@media (max-width: 767px) {
  /* the pair stacks, and the rule lies down between the two pictures */
  .v2-change__pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v2-change__rule {
    min-height: 0;
    width: 60%;
    height: 1px;
    justify-self: center;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0),
                rgba(37, 99, 235, .34) 22%, rgba(37, 99, 235, .34) 78%,
                rgba(37, 99, 235, 0));
  }
  .v2-change__side img { aspect-ratio: 4 / 3; }
}

/* ============================================= 11 CONFIDENCE RINGS === */
.v2-shield-wrap { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin: 0 auto; }
.v2-ring-r { position: absolute; border-radius: 50%; }
/* Three rings turning at different rates and directions around the shield. */
.v2-ring-r--1 { inset: 4%; border: 1px dashed rgba(147, 197, 253, .3); animation: v2-spin 90s linear infinite; }
.v2-ring-r--2 { inset: 14%; border: 2px solid transparent; border-top-color: rgba(77, 168, 255, .55);
                border-right-color: rgba(139, 92, 246, .35); animation: v2-spin 60s linear infinite reverse; }
.v2-ring-r--3 { inset: 24%; border: 1px dotted rgba(191, 219, 254, .35); animation: v2-spin 120s linear infinite; }
.v2-shield {
  position: absolute;
  inset: 30% 32%;
  overflow: hidden;
  clip-path: polygon(50% 0, 100% 13%, 100% 48%, 88% 76%, 50% 100%, 12% 76%, 0 48%, 0 13%);
}
.v2-shield svg { display: block; width: 100%; height: 100%; }
.v2-shield::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(77, 168, 255, .5), transparent);
  animation: v2-breathe 4s ease-in-out infinite alternate;
}
.v2-shield__shine {
  position: absolute;
  left: 50%; top: 40%;
  width: 90%; height: 90%;
  margin: -45% 0 0 -45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent);
  pointer-events: none;
  will-change: transform;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.v2-shield__petal {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 27px;
  margin: -13px 0 0 -6px;
  color: var(--petal-soft);
  opacity: .6;
  transform: rotate(var(--r)) translate3d(0, -205%, 0);
}
.v2-shield__petal svg { width: 100%; height: 100%; }
.v2-shield-wrap::after {       /* a slow ring of petals around the outside */
  content: '';
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(77, 168, 255, .12) inset;
}
.v2-points { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid;
             grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.v2-points h3 { margin: 0 0 4px; font-size: var(--text-base); color: #FFFFFF; }
.v2-points p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: #C9D8EE; }
.v2-points li { padding-left: 16px; border-left: 2px solid rgba(77, 168, 255, .5); }

/* ================================================= 12 BLOOMING IDEAS === */
.v2-why-visual { display: grid; gap: var(--space-8); }
.v2-bloom { position: relative; width: min(380px, 100%); aspect-ratio: 1; margin: 0 auto; }
.v2-bloom__rosette { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.v2-bloom__petal {
  position: absolute;
  left: calc(50% - 30px);
  top: calc(50% - 134px);
  width: 60px; height: 134px;
  transform-origin: 50% 100%;
  transform: rotate(var(--r)) scale(1);
  color: var(--petal-electric);
  opacity: .6;
  transition: transform 1.2s cubic-bezier(.34, 1.3, .64, 1) calc(var(--i) * .09s), opacity .8s ease calc(var(--i) * .09s);
}
.v2-bloom__petal:nth-child(3n + 2) { color: var(--petal-violet); }
.v2-bloom__petal:nth-child(3n) { color: var(--petal-soft); }
.v2-bloom__petal svg { width: 100%; height: 100%; }
.js .v2-bloom__petal { transform: rotate(var(--r)) scale(.1); opacity: 1; }
.js .v2-bloom.is-in .v2-bloom__petal { transform: rotate(var(--r)) scale(1); opacity: .6; }
.v2-bloom__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 22%; height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, #BFDBFE 35%, rgba(77, 168, 255, .25) 70%, transparent 72%);
  box-shadow: 0 0 40px rgba(77, 168, 255, .45);
}
.v2-bloom__label {
  position: absolute;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #0B1630;
  background: #FFFFFF;
  border: 1px solid rgba(37, 99, 235, .2);
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .5);
}
.v2-bloom__label--0 { left: 50%; top: -4%; transform: translateX(-50%); }
.v2-bloom__label--1 { right: -6%; top: 50%; transform: translateY(-50%); }
.v2-bloom__label--2 { left: 50%; top: 90%; transform: translateX(-50%); }   /* top, not bottom: see contrast_probe */
.v2-bloom__label--3 { left: -6%; top: 50%; transform: translateY(-50%); }
.v2-principles { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid;
                 grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.v2-principles li { position: relative; padding-left: 22px; }
.v2-principle__dot { position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%;
                     background: radial-gradient(circle, #4DA8FF, #2563EB); box-shadow: 0 0 0 4px rgba(77, 168, 255, .16); }
.v2-principles h3 { margin: 0 0 2px; font-size: var(--text-base); color: #0B1630; }
.v2-principles p { margin: 0; font-size: var(--text-sm); color: var(--bl-slate); }
.js .v2-principles li { opacity: 0; transform: translate3d(0, 14px, 0); }
.js .v2-principles.is-in li { opacity: 1; transform: none;
  transition: opacity .6s ease calc(.05s + var(--i) * .07s), transform .7s cubic-bezier(.22, .61, .36, 1) calc(.05s + var(--i) * .07s); }

/* ================================================= 13 FORWARD MOTION === */
.v2--horizon { min-height: clamp(400px, 38vw, 540px); display: grid; align-items: start; background: #0B1630; }
.v2-horizon { position: absolute; inset: 0; z-index: -1; }
.v2-horizon__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0B1630 0%, #10264A 40%, #2A2A6E 72%, #3B3F9A 86%, #10264A 100%);
}
.v2-horizon__sun {
  position: absolute;
  left: 50%;
  top: 72%;                     /* below the copy now the section is shorter */
  width: min(900px, 120vw);
  height: 360px;
  margin: -180px 0 0 calc(min(900px, 120vw) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191, 219, 254, .75), rgba(77, 168, 255, .35) 30%, rgba(139, 92, 246, .15) 60%, transparent);
  opacity: .5;
  will-change: opacity, transform;
}
.v2-horizon__svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.v2-horizon__ground { fill: #0B1630; opacity: .92; }
.v2-horizon__path { fill: none; stroke: url(#v2FlowGrad); stroke-width: 3; stroke-linecap: round; opacity: .9; }
.v2-horizon__path--b { opacity: .5; stroke-width: 2; }
.v2-horizon__runner { color: #BFDBFE; }

/* =================================================== 14 FINALE === */
.v2--finale {
  min-height: clamp(500px, 46vw, 660px);
  display: grid;
  align-items: center;
  background: #0B1630;
}
.v2-finale__sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(219, 234, 254, .8), transparent),
    radial-gradient(1.5px 1.5px at 28% 68%, rgba(219, 234, 254, .6), transparent),
    radial-gradient(1px 1px at 44% 14%, rgba(219, 234, 254, .7), transparent),
    radial-gradient(1.5px 1.5px at 66% 30%, rgba(219, 234, 254, .6), transparent),
    radial-gradient(1px 1px at 80% 72%, rgba(219, 234, 254, .7), transparent),
    radial-gradient(1.5px 1.5px at 90% 18%, rgba(219, 234, 254, .6), transparent),
    radial-gradient(60% 60% at 50% 50%, rgba(37, 99, 235, .3), transparent 70%),
    linear-gradient(180deg, #0B1630, #10264A 60%, #0B1630);
}
.v2-finale__bloom {
  position: absolute;
  left: 50%; top: 50%;
  z-index: -2;
  /* The third cap is the section's own min-height, so the bloom can never be
     taller than the box that clips it. At 1435px and wider this resolves to
     640px exactly -- the approved desktop composition is untouched -- and
     below that the whole bloom scales down together instead of having its
     top and bottom tips cut off. */
  width: min(640px, 110vw, clamp(500px, 46vw, 660px));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: transform 1s cubic-bezier(.22, .61, .36, 1), rotate .8s cubic-bezier(.22, .61, .36, 1);
  /* its own layer: the pointer turns it every frame, and without one the
     whole 640px bloom repainted each time (39fps against 60) */
  will-change: transform, rotate;
}
.v2-finale__petal {
  position: absolute;
  /* Percentages of the bloom box, not fixed pixels. 18.75% and 42.1875% of
     640px are exactly 120px and 270px, so desktop is unchanged to the pixel,
     but the petals now shrink WITH the bloom instead of outgrowing it. A
     fixed-size child inside a viewport-scaled parent is what caused this. */
  left: 40.625%;
  top: 7.8125%;
  width: 18.75%; height: 42.1875%;
  transform-origin: 50% 100%;
  transform: rotate(var(--r)) scale(1);
  color: var(--petal-electric);
  opacity: .16;
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1) calc(var(--i) * .08s), opacity 1.2s ease calc(var(--i) * .08s);
}
.v2-finale__petal:nth-child(even) { color: var(--petal-violet); }
.v2-finale__petal svg { width: 100%; height: 100%; }
.js .v2-finale__petal { transform: rotate(var(--r)) scale(.05); opacity: 0; }
.js .v2.is-in .v2-finale__petal { transform: rotate(var(--r)) scale(1); opacity: .16; }
/* ============================================ THE SECOND BLOOM (Home) ===
   The bloom is restored to the composition that was approved: the shared
   finale geometry, untouched, at Home's own weight. Everything I added on
   top of it -- a section-sized box, a mask, petals restated at 1.9x, a
   centre pushed below the foot of the section, three breakpoints of petal
   sizing -- is gone. It made the lily the subject of the section; it is a
   signature, and the headline is the subject.

   What remains Home's own is exactly two things: the glow does not breathe,
   and the petals carry .3 instead of the shared .16, because .16 read as a
   watermark. The one-shot opening is the shared one, with its own
   var(--i) * .08s stagger -- nothing holds it back now that no line has to
   land first.
   ====================================================================== */
.v2-finale--rest .v2-finale__glow { animation: none; opacity: .86; }
.v2-finale--rest .v2-finale__petal { opacity: .3; }
.js .v2-finale--rest.is-in .v2-finale__petal { opacity: .3; }
.v2-finale__glow {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  /* capped at .3: the heading and its small eyebrow sit on this glow's
     centre, and .45 took the eyebrow to 4.15:1 */
  background: radial-gradient(closest-side, rgba(147, 197, 253, .3), transparent);
  animation: v2-breathe 6s ease-in-out infinite alternate;
}
.v2-finale__rise { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v2-rise {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: 14px; height: 32px;
  color: var(--petal-soft);
  opacity: 0;
  animation: v2-rise var(--d) linear infinite;
  animation-delay: var(--o);
}
.v2-rise svg { width: 100%; height: 100%; }
/* petals rise, turn, and end as points of light drawn toward the centre */
@keyframes v2-rise {
  0%   { transform: translate3d(0, 0, 0) rotate(0) scale(1); opacity: 0; }
  12%  { opacity: .75; }
  70%  { opacity: .6; }
  100% { transform: translate3d(var(--sx), -560px, 0) rotate(220deg) scale(.2); opacity: 0; }
}
.v2-finale__copy { position: relative; z-index: 1; }
/* The label sits on the brightest point of the glow with a bloom petal
   behind it; #DBEAFE measured 4.35:1 there once the petals were counted. */
.v2-finale__copy .v2-eyebrow { color: #F5F9FF; }
.v2-finale__copy h2 { font-size: var(--t-display); }
.v2-finale__btns { justify-content: center; }

/* ================================================= scene gating === */
/* Nothing continuous runs in a section that is off screen. */
.js .v2:not(.is-live) :is(.v2-journey__light, .v2-board__paths, .v2-board__petal,
  .v2-orbit__track, .v2-orbit__chip, .v2-orbit__petals, .v2-orbit__spoke i,
  .v2-ring__spoke i, .v2-ring-r, .v2-finale__glow, .v2-rise) {
  animation-play-state: paused;
}
/* pseudo-elements cannot sit inside :is(), so they are listed on their own */
.js .v2:not(.is-live) .v2-orbit__core::after,
.js .v2:not(.is-live) .v2-shield::before { animation-play-state: paused; }

/* ============================================================ responsive */
@media (max-width: 1024px) {
  /* the orbit and the ring need the full width to stay legible */
  /* minmax(0, 1fr), not 1fr: a bare 1fr cannot shrink below its content */
  #medha-cloud .v2-split, #integrations .v2-split { grid-template-columns: minmax(0, 1fr); }
  /* The six AI cards are a grid INSIDE a split, so the two divisions
     multiply: at 768 the split gave its right half 337px and the card grid
     halved that again, leaving the card copy fifteen characters a line --
     the tightest text on the site. The split stacks here so the card grid
     gets the whole container and keeps its two columns. */
  .v2-split--top { grid-template-columns: minmax(0, 1fr); }
  .v2 { --v2-gap: 32px; }
  .v2-split { gap: 32px; }
  .v2-journey__stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .v2-journey__rail { display: none; }
  .v2-stage__link { display: none; }
  .v2-ui { height: clamp(320px, 60vw, 520px); }
  .v2-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .v2-split, .v2-split--wide, .v2-split--product { grid-template-columns: 1fr; }
  .v2-split--flip > :first-child { order: 0; }
}
@media (max-width: 720px) {
  .v2 { padding-block: var(--v2-pad-tight); }
  /* Flowing light becomes a vertical path of stops */
  .v2-flow { aspect-ratio: auto; margin-top: 40px; }
  .v2-flow__svg { display: none; }
  .v2-flow__stops { display: grid; gap: 22px; padding-left: 28px; border-left: 2px solid rgba(37, 99, 235, .35); }
  .v2-flow__stop { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .v2-flow__dot { left: -38px; top: 2px; }
  .v2-flow__petal { display: none; }
  .v2-flow__label { position: static; transform: none; font-size: var(--text-base); }

  .v2-journey__stages { grid-template-columns: 1fr 1fr; }
  .v2-duo { padding: 0; }
  .v2-duo__inset { position: relative; width: 70%; margin: -18% 0 0 auto; }

  /* the commerce board lays its pieces out in a column */
  .v2-board { min-height: 0; padding: 16px; display: grid; gap: 12px; }
  .v2-board__card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; }
  .v2-board__paths, .v2-board__petal { display: none; }
  .v2-board__nodes { display: flex; flex-wrap: wrap; gap: 8px; }
  .v2-node { position: static; }

  .v2-orbit__chip { width: 86px; padding: 7px 5px; border-radius: 12px; }
  .v2-orbit__chip svg { width: 16px; height: 16px; }
  .v2-orbit__chip span { font-size: 13px; }

  .v2-ui { height: auto; perspective: none; display: grid; gap: 14px; }
  .v2-ui__panel { position: relative; left: auto; right: auto; top: auto; width: 100%; height: auto; }
  .v2-ui__panel img { aspect-ratio: 16 / 10; height: auto; }
  .v2-ui__chips { margin-top: 4px; }
  .v2-points { grid-template-columns: 1fr; }
  .v2-principles { gap: var(--space-4) var(--space-4); }
  .v2-board { grid-template-columns: 1fr 1fr; }
  .v2-board__card--main, .v2-board__nodes { grid-column: 1 / -1; }
  .v2-cloud-foot { grid-template-columns: 1fr; }
  .v2-float-card--strip { max-width: 320px; }

  .v2-steps { padding-left: 64px; }
  .v2-stack { padding: 0 0 22% 10%; }

  /* the integration ring becomes a list under its hub */
  .v2-ring-wrap { aspect-ratio: auto; display: grid; gap: 12px; }
  .v2-ring__hub { position: relative; inset: auto; width: 150px; aspect-ratio: 1; margin: 0 auto 8px; order: -1; }
  .v2-ring { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .v2-ring__item { position: static; transform: none; }
  .v2-ring__spoke { display: none; }
  .v2-ring__node { position: static; transform: none; min-width: 0; }
  .js .v2-ring__node { opacity: 1; }

  .v2-bloom { width: min(300px, 86%); }
  .v2-bloom__petal { left: calc(50% - 22px); top: calc(50% - 98px); width: 44px; height: 98px; }
  .v2-rise:nth-child(n + 4) { display: none; }
}


/* ======================================================================
   Rhythm refinement: colour atmospheres, placeholders, compositions
   ====================================================================== */

/* ---------------------------------------------------- atmospheres --- */
/* 03: warm off-white with a faint blue and violet light, not flat white */
.v2--glow {
  background-image:
    radial-gradient(50% 60% at 88% 18%, rgba(77, 168, 255, .12), transparent 70%),
    radial-gradient(40% 50% at 6% 92%, rgba(139, 92, 246, .08), transparent 70%);
}
/* 04B Retail: deep teal into navy, its own identity between two worlds */
.v2--teal {
  color: #E8F0FE;
  background-color: #0C2334;
  background-image:
    radial-gradient(55% 70% at 88% 28%, rgba(20, 184, 166, .22), transparent 70%),
    linear-gradient(160deg, #0B1630 0%, #0E2A3A 60%, #0F3640 100%);
}
/* 08 How it works: a soft Royal-Blue tint */
.v2--blue {
  background-color: #EAF1FF;
  background-image: linear-gradient(180deg, #F2F6FF 0%, #E4EDFF 100%);
}
/* 09 Integrations: navy into indigo, where glowing paths read best */
.v2--nightfall {
  color: #E8F0FE;
  background-color: #121C47;
  background-image:
    radial-gradient(50% 60% at 78% 50%, rgba(139, 92, 246, .22), transparent 70%),
    linear-gradient(165deg, #0B1630 0%, #14204F 55%, #231A55 100%);
}
/* 10 Business intelligence: white with a faint Electric-Blue wash */
.v2--wash {
  background-image: radial-gradient(55% 60% at 12% 30%, rgba(77, 168, 255, .09), transparent 70%);
}

/* type on the two new dark atmospheres */
.v2--teal .v2-eyebrow, .v2--nightfall .v2-eyebrow { color: #BFDBFE; }
.v2--teal .v2-head h2, .v2--nightfall .v2-head h2 { color: #FFFFFF; }
.v2--teal .v2-lead, .v2--nightfall .v2-lead { color: #C9D8EE; }
.v2-note--dark { color: #B7C8E2; }
.v2--teal .petal__drift, .v2--nightfall .petal__drift { --petal-halo: rgba(147, 197, 253, .26); }

/* Retail board on teal-navy: dark glass, teal light paths */
.v2--teal .v2-board {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border-color: rgba(94, 234, 212, .22);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .7);
}
.v2--teal .v2-board__grid {
  background-image:
    linear-gradient(rgba(94, 234, 212, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, .12) 1px, transparent 1px);
}
.v2--teal .v2-board__glow { background: radial-gradient(closest-side, rgba(20, 184, 166, .28), transparent); }
.v2--teal .v2-board__paths path { stroke: #5EEAD4; }
.v2--teal .v2-board__card { border-color: rgba(94, 234, 212, .25); box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .8); }
.v2--teal .v2-node {
  color: #FFFFFF;
  background: rgba(11, 22, 48, .9);
  border-color: rgba(94, 234, 212, .38);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8);
}
.v2--teal .v2-node svg { color: #5EEAD4; }
.v2-board__card--main  { left: 5%; top: 11%; width: 52%; }
.v2-board__card--third { right: 5%; top: 7%; width: 36%; aspect-ratio: 4 / 3; }
.v2-board__card--side  { right: 9%; bottom: 7%; width: 40%; }
.js .v2-board.is-in .v2-board__card--main  { transition-delay: .2s, .2s, .2s, 0s, 0s; }
.js .v2-board.is-in .v2-board__card--third { transition-delay: .5s, .5s, .5s, 0s, 0s; }

/* Integrations ring on nightfall: dark glass nodes, electric spokes */
.v2--nightfall .v2-ring__node {
  background: rgba(16, 26, 70, .92);
  border-color: rgba(147, 197, 253, .3);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8);
}
.v2--nightfall .v2-ring__node strong { color: #FFFFFF; }
.v2--nightfall .v2-ring__node em { color: #C9D8EE; }
.v2--nightfall .v2-ring__spoke { background: linear-gradient(90deg, rgba(77, 168, 255, .7), rgba(77, 168, 255, .14)); }
.v2--nightfall .v2-ring__node:hover {
  border-color: #BFDBFE;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, .3), 0 0 30px rgba(77, 168, 255, .45);
}
.v2--nightfall .v2-ring__hub { box-shadow: 0 0 0 10px rgba(77, 168, 255, .12), 0 0 60px rgba(77, 168, 255, .45); }

/* ---------------------------------------------------- placeholders --- */
/* A reserved image space: the same size as the picture it awaits, drawn as
   a designed tile (soft brand gradient, the stage icon, a faint lily). */
.v2-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 12px;
  color: #2563EB;
  background-color: #E8F0FF;
  background-image:
    radial-gradient(70% 90% at 20% 15%, rgba(255, 255, 255, .9), transparent 60%),
    linear-gradient(135deg, #EEF4FD 0%, #DCE8FF 55%, #E7E1FD 100%);
  border: 1px solid rgba(37, 99, 235, .12);
}
.v2-placeholder > svg {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .55);
}
.v2-placeholder__lily {
  position: absolute;
  right: 4%;
  bottom: -18%;
  width: 22%;
  aspect-ratio: 20 / 45;
  color: var(--petal-violet);
  opacity: .22;
  transform: rotate(24deg);
}
.v2-placeholder__lily svg { width: 100%; height: 100%; }

/* ------------------------------------------------------ float cards --- */
/* An image card set into a visual composition instead of stacked under the
   copy: the orbit (05) and the shield (11). */
.v2-float-card {
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 8px 8px 10px;
  border-radius: 16px;
  background: rgba(16, 38, 74, .92);
  border: 1px solid rgba(147, 197, 253, .25);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
}
.v2-float-card picture { display: block; overflow: hidden; border-radius: 10px; }
.v2-float-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.v2-float-card figcaption { margin: 8px 4px 0; font-size: 13px; line-height: 1.4; color: #B7C8E2; }
.v2-float-card--shield { right: -6%; bottom: -4%; width: 46%; z-index: 2; }

/* ----------------------------------------------------- stats strip --- */
/* image and true counts share one strip under the orbit */
.v2-cloud-foot {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(147, 197, 253, .16);
}
.v2-float-card--strip { position: relative; }
.v2-cloud-foot .v2-stats { margin: 0; }

/* -------------------------------------------------- product split --- */
.v2-split--product { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.v2-split--product .v2-ui { margin: 0; height: clamp(340px, 34vw, 470px); }

/* ------------------------------------------------ why: layered bloom --- */
/* The rosette has its own space above the photograph. The labels sit
   outside the petals, so the bloom is given room for them. */
.v2-why-visual { position: relative; display: grid; gap: clamp(16px, 2vw, 28px); }
.v2-why-visual .v2-bloom {
  order: -1;
  position: relative;
  width: min(300px, 70%);
  margin: 0 auto;
}
.v2-why-visual .v2-frame { margin: 0; }
.v2-why-visual .v2-frame img { aspect-ratio: 16 / 9; }
.v2-why-visual .v2-bloom__petal {
  left: calc(50% - 26px);
  top: calc(50% - 112px);
  width: 52px;
  height: 112px;
}
.js .v2-bloom.is-in .v2-bloom__petal { opacity: .72; }

/* ------------------------------------------------------- tablet --- */
@media (max-width: 1024px) {
  .v2-float-card--shield { width: 50%; }
}

/* ------------------------------------------------------- mobile --- */
@media (max-width: 767px) {
  .v2-why-visual .v2-bloom { width: min(260px, 72%); }
  .v2-float-card--shield { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 16px; }
  .v2-split--product .v2-ui { height: auto; }
}
@media (max-width: 720px) {
  /* long card lists become swipeable rows, the next card peeking in */
  .v2-journey__stages, .v2-ai-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter, 16px));
    padding: 4px var(--gutter, 16px) 12px;
    scroll-padding-inline: var(--gutter, 16px);
    scrollbar-width: thin;
  }
  .v2-stage { flex: 0 0 74%; scroll-snap-align: start; }
  .v2-ai-card { flex: 0 0 82%; scroll-snap-align: start; }
  .v2-frame img { aspect-ratio: 16 / 10; }
  .v2-stats { gap: var(--space-4); }
}


/* ------------------------------------------------ phone rhythm --- */
/* Phones get their own spacing, not desktop spacing scaled down: the same
   content, set tighter, with compositions layered rather than stacked. */
@media (max-width: 720px) {
  .v2-orbit__info { height: 10.2em; }
  /* 05: image above the four counts, not beside them. This restates the
     single column because the desktop strip rule comes later in the file. */
  .v2-cloud-foot { grid-template-columns: minmax(0, 1fr); }
  .v2-cloud-foot .v2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 09: integration labels may wrap on a phone; unwrapped they forced the
     column to 398px and the section clipped its own text */
  .v2-ring__node { width: auto; white-space: normal; }
  .v2-ring__node em { font-size: 13px; }
  /* 05: compact counts, smaller image card */
  .v2-stats { gap: var(--space-4) var(--space-5); }
  .v2-stat__num { font-size: 1.9rem; }
  .v2-stat__wave { margin: 6px 0; }
  .v2-float-card--strip { max-width: 240px; }

  /* 12: a smaller rosette above the photo, labels kept on screen */
  .v2-why-visual .v2-bloom__petal { left: calc(50% - 20px); top: calc(50% - 86px); width: 40px; height: 86px; }
  .v2-bloom__label { font-size: 13px; padding: 4px 9px; }
  .v2-why-visual .v2-bloom__label--3 { left: -4%; }
  .v2-why-visual .v2-bloom__label--1 { right: -4%; }

  /* 04B: the board's three photographs as a two-column grid (these follow
     the desktop placements above, so they must restate every offset) */
  .v2-board__card--main, .v2-board__card--side, .v2-board__card--third {
    position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto;
  }

  /* 11: the four points two-up */
  .v2-points { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .v2-points li { padding-left: 10px; }

  /* 08: steps a little closer */
  .v2-steps__list { gap: 20px; }

  /* 09: smaller hub, tighter list */
  .v2-ring__hub { width: 116px; }
  .v2-ring__node { padding: 8px 10px; }
  #integrations .v2-frame--small { max-width: 280px; }

  /* 02: the three facts in one compact row */
  .hf-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hf-facts dd { font-size: 13px; }
}
@media (max-width: 360px) {
  .v2-orbit__info { height: 11.8em; }
  .v2-points { grid-template-columns: 1fr; }
  .hf-facts { grid-template-columns: 1fr 1fr; }
}

/* ======================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Nothing in a scene loops or travels. Transitions are not cut here:
     the global rule in style.css already limits them to colour, light
     and opacity, so a button in a scene still answers the pointer. */
  .v2 *, .v2 *::before, .v2 *::after { animation: none !important; }
  .js .v2-reveal, .js .v2-stage, .js .v2-board__card, .js .v2-board__grid, .js .v2-orbit,
  .js .v2-ui__panel, .js .v2-ui__chip, .js .v2-ai-card, .js .v2-dash__card, .js .v2-principles li,
  .js .v2-ring__node, .js .v2-step { opacity: 1 !important; transform: none !important;
    translate: none !important; scale: none !important; rotate: none !important; }
  .js .v2-flow__line, .js .v2-steps__draw, .js .v2-net__line, .js .v2-chart__line { stroke-dashoffset: 0 !important; }
  .js .v2-flow__stop .v2-flow__petal { transform: none !important; opacity: 1 !important; }
  .js .v2-step .v2-step__bloom { transform: none !important; opacity: 1 !important; }
  .js .v2-ring__spoke, .js .v2-chart__bar { transform: none !important; }
  .js .v2-chart__ring--a { stroke-dasharray: 46 100 !important; }
  .js .v2-chart__ring--b { stroke-dasharray: 28 100 !important; }
  .js .v2-bloom__petal { transform: rotate(var(--r)) scale(1) !important; opacity: .6 !important; }
  .js .v2-finale__petal { transform: rotate(var(--r)) scale(1) !important; opacity: .16 !important; }
  .js .v2-finale--rest .v2-finale__petal { opacity: .3 !important; }
  .v2-rise, .v2-flow__light, .v2-net__pulse, .v2-horizon__runner { display: none; }
  .v2-horizon__sun { opacity: .85 !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 721px) {
  /* the rule above clears every transform, but a ring node's transform is its
     place, not motion: without the counter-rotation, the nodes on the lower
     half of the ring are drawn upside down */
  .js .v2-ring__node { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))) !important; }
}


/* =====================================================================
   PUBLIC-PRESENTATION MIGRATION: code-drawn compositions that replace
   the app-screen photographs (files kept; see site-migration-plan.md)
   ===================================================================== */

/* ---------------------------------------- 05: stats-only foot strip --- */
.v2-cloud-foot--stats { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------- 06: the operational day --- */
.v2-ui--day {
  height: clamp(470px, 40vw, 540px);
  margin: 0;
  perspective: none;
}
.v2-day__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.v2-day__lines path {
  fill: none;
  stroke: #93C5FD;
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  vector-effect: non-scaling-stroke;
}
.v2-day__core {
  position: absolute;
  left: 50%;
  top: 87%;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: clamp(104px, 11vw, 132px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  color: #FFFFFF;
  background: radial-gradient(circle at 36% 22%, #5B9BF8 0%, #2563EB 40%, #1D4ED8 100%);
  box-shadow: 0 0 0 10px rgba(37, 99, 235, .10), 0 24px 50px -18px rgba(37, 99, 235, .7);
}
.v2-day__core strong { font: 600 14px/1.2 var(--font-display); letter-spacing: .01em; }
.v2-day__list { list-style: none; margin: 0; padding: 0; }
.v2-day__stop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: min(28%, 196px);
  translate: -50% 0;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(37, 99, 235, .12);
  box-shadow: 0 22px 44px -26px rgba(11, 22, 48, .45);
}
.v2-day__icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 10px;
  color: #1D4ED8;
  background: #EDF3FC;
}
.v2-day__time {
  float: right;
  margin-top: 8px;
  font: 600 13px/1 var(--font-body);
  letter-spacing: .06em;
  color: #1D4ED8;
}
.v2-day__stop h3 {
  margin: 0 0 4px;
  font: 600 16px/1.25 var(--font-display);
  color: #0B1630;
}
.v2-day__stop p { margin: 0; font-size: 15px; line-height: 1.45; color: #475569; }
.v2-day__petal {
  position: absolute;
  left: 62%;
  top: 70%;
  z-index: 1;
  width: 16px;
  color: var(--petal-violet);
  opacity: .55;
  rotate: 34deg;
}
.v2-day__petal svg { display: block; width: 100%; height: auto; }
/* entrance: stops rise in order once the composition is in view */
.js .v2-day__stop { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .v2-ui--day .v2-day__core { opacity: 0; scale: .85; }
.js .v2-ui--day.is-in .v2-day__core { opacity: 1; scale: 1;
  transition: opacity .8s ease, scale 1s cubic-bezier(.34, 1.4, .64, 1); }
.js .v2-ui--day.is-in .v2-day__stop { opacity: 1; transform: none;
  transition: opacity .7s ease calc(.25s + var(--i) * .1s),
              transform .9s cubic-bezier(.22, .61, .36, 1) calc(.25s + var(--i) * .1s); }

/* --------------------------------------- 08: connected workflow card --- */
.v2-flowcard { overflow: hidden; border-radius: 22px;
  box-shadow: 0 24px 60px -28px rgba(11, 22, 48, .45), 0 0 0 1px rgba(37, 99, 235, .08); }
.v2-flowcard__svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------- 10: clarity composition --- */
.v2-clarity { overflow: hidden; border-radius: 22px;
  box-shadow: 0 24px 60px -28px rgba(11, 22, 48, .45), 0 0 0 1px rgba(37, 99, 235, .08); }
.v2-clarity__svg { display: block; width: 100%; height: auto; }

@media (max-width: 1024px) {
  .v2-day__stop { width: min(30%, 180px); }
}
@media (max-width: 1024px) {
  /* the operational day needs the full width to stay legible (as the orbit
     and the ring do): squeezed into 7/11 of a tablet, its cards wrap tall
     enough to collide. Placed here so it wins over the unconditional
     4fr/7fr product split above. */
  .v2-split--product { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
  /* the day keeps the height it has at 1440 (470px): the product split's
     general clamp(340px, 34vw, 470px) is too short below that for two rows
     of cards and the record beneath them, and the cards collided */
  .v2-split--product .v2-ui--day { height: 470px; }
}
@media (max-width: 767px) {
  /* the unconditional 4fr/7fr product split above would otherwise win here */
  .v2-split--product { grid-template-columns: minmax(0, 1fr); }
  .v2-ui--day { height: auto; padding-bottom: 0; }
  .v2-day__lines, .v2-day__petal { display: none; }
  .v2-day__core { position: relative; left: auto; top: auto; translate: none;
    margin: 0 auto var(--space-5); width: 104px; }
  .v2-day__list { display: grid; gap: 12px; }
  .v2-day__stop { position: relative; left: auto; top: auto; translate: none; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .v2-day__stop, .js .v2-ui--day .v2-day__core { opacity: 1; transform: none; scale: 1; transition: none; }
}

/* Focus ring by section tone (Design System focus-ring token): Royal-deep on
   light sections (5.9:1+), Soft Blue on dark ones. Soft Blue on light was
   1.72:1, under the 3:1 minimum. */
.v2-btn:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 3px; }
.v2--navy .v2-btn:focus-visible, .v2--indigo .v2-btn:focus-visible,
.v2--teal .v2-btn:focus-visible, .v2--nightfall .v2-btn:focus-visible,
.v2--horizon .v2-btn:focus-visible, .v2--finale .v2-btn:focus-visible {
  outline-color: var(--bl-soft);
}

/* AI section: the network's travelling light-dots pass behind the copy
   column. A soft halo in the ground colour keeps every line of copy at full
   contrast whatever is passing behind it. */
.v2--indigo .v2-copy p { text-shadow: 0 0 2px #0F1437, 0 0 6px #0F1437, 0 0 12px #0F1437; }

/* The net is a full-bleed backdrop, so a node -- not only a travelling
   light -- can come to rest directly behind a line of copy, where a 4.5px
   #93C5FD disc against body text measures barely 1.6:1. A scrim in the
   section's own tone sits between the net and the text: the copy always has
   an even dark field under it, at every width, and the net keeps its full
   brightness in the open. */
.v2--indigo[data-scene="neural"] .v2-copy { position: relative; }
.v2--indigo[data-scene="neural"] .v2-copy::before {
  content: "";
  position: absolute;
  inset: -72px -104px -64px -96px;
  z-index: -1;
  pointer-events: none;
  background: rgba(15, 21, 61, .94);
  /* masked to an inscribed ellipse so it has no edge of its own: solid over
     the text, gone by the time it reaches the open field */
  -webkit-mask-image: radial-gradient(closest-side at 42% 50%, #000 0%,
                      #000 58%, rgba(0, 0, 0, .55) 78%, transparent 100%);
          mask-image: radial-gradient(closest-side at 42% 50%, #000 0%,
                      #000 58%, rgba(0, 0, 0, .55) 78%, transparent 100%);
}

/* ==================================================== 02 MADE IN INDIA ===
   A statement of origin. Behind it, a meridian: long arcs crossing the way a
   globe is ruled — a place, without a flag and without a map, either of
   which would be decoration standing in for an idea. Four petals lift
   through it, which is the only motion.
   ======================================================================== */
.v2-mii { overflow: clip; }
.v2-mii__field {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1120px, 118%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}
.v2-mii__arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: var(--h);
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, .14);
  transform: translate(-50%, -50%) rotate(var(--r));
}
.v2-mii__arc:nth-child(2) { border-color: rgba(139, 92, 246, .12); }
.v2-mii__glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 168, 255, .13), transparent 72%);
}
.v2-mii__rise { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v2-mii__petal {
  position: absolute;
  left: var(--x);
  bottom: -14%;
  width: 20px;
  height: 46px;
  color: var(--petal-soft);
  opacity: .34;
}
.v2-mii__petal svg { width: 100%; height: 100%; }
.v2-mii__copy { position: relative; }
.v2-mii__claim {
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.015em;
  background: linear-gradient(100deg, #1D4ED8, #2563EB 44%, #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* the arcs draw in, and the petals lift — gated so nothing runs off screen */
.js .v2-mii__arc { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.9); }
.js .v2.is-in .v2-mii__arc {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--r));
  transition: opacity 1.4s ease calc(var(--i) * .14s),
              transform 1.6s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .14s);
}
@keyframes v2-mii-lift {
  0%   { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: 0; }
  14%  { opacity: .34; }
  86%  { opacity: .34; }
  100% { transform: translate3d(14px, -112vh, 0) rotate(10deg); opacity: 0; }
}
.js .v2-mii.is-live .v2-mii__petal {
  animation: v2-mii-lift var(--d) linear infinite;
  animation-delay: var(--o);
}
@media (prefers-reduced-motion: reduce) {
  .v2-mii__petal { animation: none !important; bottom: 22%; opacity: .3; }
}