/* The homepage hero, ported from sixlabs-screen-library/src/components/b2b (b2b.css and the Tailwind classes in
   B2BHero.tsx, Stats.tsx, CtaBlock.tsx, BgDetail.tsx). Values are the source's. */
.home {
  --page-rgb: 249 250 251;
  --b2b-ink: #0b0b0d;
  --b2b-muted: #5f636b;
  --b2b-blue: #0066CC;
  --b2b-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* the copy's sizes, onBlue's dark hero ladder: width steps first, short-screen steps after so they win */
  --h1: 48px;
  --lede: 15.5px;
  --lede-mt: 18px;
  --actions-mt: 26px;
  --cta-h: 44px;
  --cta-fs: 15px;
  --cta-pad: 26px;
  --alt: 13.5px;
}
@media (max-width: 900px) { .home { --h1: 36px; --lede: 16.5px; --cta-h: 52px; --cta-fs: 16.5px; } }
@media (max-width: 560px) { .home { --h1: 34px; --lede: 16px; } }
@media (min-width: 901px) and (max-width: 1279px) { .home { --h1: 42px; --lede: 15px; --lede-mt: 14px; --actions-mt: 20px; --cta-h: 42px; --cta-fs: 14.5px; } }
@media (min-width: 1280px) and (max-width: 1599px) { .home { --h1: 54px; --lede: 16px; } }
@media (min-width: 1600px) { .home { --h1: 64px; --lede: 18px; --lede-mt: 22px; --actions-mt: 30px; --cta-h: 48px; --cta-fs: 16.5px; } }
@media (min-width: 1920px) { .home { --h1: 76px; --lede: 20px; --cta-h: 52px; --cta-fs: 17.5px; --cta-pad: 30px; } }
@media (min-width: 2560px) { .home { --h1: 88px; --lede: 22px; } }
@media (min-width: 901px) and (max-height: 850px) { .home { --h1: 40px; --lede-mt: 12px; --actions-mt: 16px; } }
@media (min-width: 901px) and (max-height: 720px) { .home { --h1: 34px; --lede: 14px; --cta-h: 40px; } }

/* one screen, always */
.b2b-hero { position: relative; display: flex; flex-direction: column; height: 100svh; min-height: 560px; overflow: hidden; }

/* the ground: the drum's horizon field, fading into the page at the foot */
.b2b-field { position: absolute; inset: 0; isolation: isolate; pointer-events: none; background: radial-gradient(70% 55% at 50% 52%, rgb(0 102 204 / 0.16), rgb(0 102 204 / 0) 70%), linear-gradient(180deg, #eaf2ff 0%, #e4edfb 55%, #f6f7f8 100%); }
.b2b-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.b2b-field::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(var(--page-rgb) / 0) 62%, rgb(var(--page-rgb)) 100%); }
.b2b-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.b2b-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' amplitude='1.055' exponent='0.4167' offset='-0.055'/%3E%3CfeFuncG type='gamma' amplitude='1.055' exponent='0.4167' offset='-0.055'/%3E%3CfeFuncB type='gamma' amplitude='1.055' exponent='0.4167' offset='-0.055'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.3333 -0.3333 -0.3333 0 1'/%3E%3CfeComposite in2='t' operator='in'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat;
}
.b2b-foot { position: absolute; inset: auto 0 0 0; height: 22%; pointer-events: none; background: linear-gradient(180deg, rgb(var(--page-rgb) / 0), rgb(var(--page-rgb))); }

/* the sheet's crop marks and notes (BgDetail.tsx), not on phones */
.b2b-sheet { position: absolute; inset: 100px 32px 20px; pointer-events: none; }
.b2b-sheet .mark { position: absolute; width: 14px; height: 14px; border: 0 solid rgb(0 102 204 / 0.4); }
.b2b-sheet .mark.tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.b2b-sheet .mark.tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.b2b-sheet .mark.bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.b2b-sheet .mark.br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.b2b-sheet .note { position: absolute; font: 400 10px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(0 102 204 / 0.55); }
.b2b-sheet .note.tl { left: 24px; top: 0; } .b2b-sheet .note.tr { right: 24px; top: 0; }
.b2b-sheet .note.bl { left: 24px; bottom: 0; } .b2b-sheet .note.br { right: 24px; bottom: 0; }
@media (max-width: 767px) { .b2b-sheet { display: none; } }

/* the illustration fills the top, the copy and the call sit together at the foot */
.b2b-top { position: relative; display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; justify-content: center; padding-top: calc(73px + clamp(8px, 2vh, 24px)); }
@media (min-width: 768px) { .b2b-top { padding-top: calc(89px + clamp(8px, 2.5vh, 32px)); } }
.b2b-stage { position: relative; flex: 1 1 auto; min-height: 150px; }
@media (min-width: 768px) { .b2b-stage { max-height: 340px; } }
.b2b-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* the numbers out at the edges, the 6labs mark at work between them (Stats.tsx) */
.b2b-stats { margin-top: 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; width: 100%; padding-inline: 20px; }
@media (min-width: 768px) { .b2b-stats { padding-inline: 4vw; } }
.b2b-stats .side { width: fit-content; }
.b2b-stats .side.right { justify-self: end; text-align: right; }
.b2b-stats .side.right canvas { margin-left: auto; }
.b2b-stats canvas { display: block; }
.b2b-stats .lbl { margin-top: 12px; font: 400 10px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--b2b-muted); }
@media (min-width: 768px) { .b2b-stats .lbl { font-size: 11px; } }
.b2b-mark { position: relative; width: 40px; height: 40px; }
@media (min-width: 768px) { .b2b-mark { width: 48px; height: 48px; } }
.b2b-mark svg, .b2b-mark > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-arc-0, .logo-arc-1, .logo-arc-2 { will-change: transform; }
.logo-arc-0 { animation: logo-arc-0 1.5s ease-in-out infinite both; }
.logo-arc-1 { animation: logo-arc-1 1.5s ease-in-out infinite both; }
.logo-arc-2 { animation: logo-arc-2 1.5s ease-in-out infinite both; }
@keyframes logo-arc-0 { 0%, 33.333%, 100% { transform: translate3d(0, 0, 0); } 16.667% { transform: translate3d(-1.6px, -2.5px, 0); } }
@keyframes logo-arc-1 { 0%, 33.333%, 100% { transform: translate3d(0, 0, 0); } 16.667% { transform: translate3d(3px, 0, 0); } }
@keyframes logo-arc-2 { 0%, 33.333%, 100% { transform: translate3d(0, 0, 0); } 16.667% { transform: translate3d(-1.7px, 2.5px, 0); } }

/* the copy at the foot */
.b2b-copy { position: relative; flex: none; width: 100%; max-width: 1180px; margin-inline: auto; padding: clamp(12px, 3vh, 36px) 20px clamp(20px, 5vh, 56px); text-align: center; }
@media (min-width: 768px) { .b2b-copy { padding-inline: 48px; } }
.b2b-copy h1 { width: fit-content; margin-inline: auto; display: block; font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; color: #1D1D1F; font-size: var(--h1); }
.b2b-copy h1 .accent { color: var(--b2b-blue); }
.b2b-lede { width: fit-content; margin: var(--lede-mt) auto 0; font-family: var(--font); line-height: 1.55; letter-spacing: -0.015em; color: #6E6E73; font-size: var(--lede); }
@media (min-width: 768px) { .b2b-lede { white-space: nowrap; } }
.b2b-actions { margin-top: var(--actions-mt); }
.b2b-cta-wrap { width: fit-content; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.b2b-cta { height: var(--cta-h); padding: 0 var(--cta-pad); font-size: var(--cta-fs); }
.b2b-cta [data-cta-cells] { display: inline-flex; white-space: pre; }
.b2b-cta [data-cta-cells] span { display: inline-block; text-align: center; }
.b2b-alt { margin-top: var(--actions-mt); font-family: var(--mono); font-size: var(--alt); letter-spacing: -0.01em; color: var(--b2b-muted); }
.b2b-alt .pr { color: rgb(0 102 204 / 0.7); }
.b2b-alt #b2b-live { color: rgb(0 102 204 / 0.8); font-variant-numeric: tabular-nums; }
.b2b-alt .block { display: inline-block; width: 0.5em; height: 1em; margin-left: 4px; transform: translateY(0.16em); background: rgb(0 102 204 / 0.6); animation: b2b-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes b2b-pulse { 50% { opacity: 0.5; } }

/* the typed accent words (TypedWord.tsx, .tw-* in globals.css) */
.tw-letter { --tw-start: 0.5s; --tw-step: 90ms; position: relative; opacity: 0; animation: tw-in 1ms linear forwards; animation-delay: calc(var(--tw-start) + var(--i) * var(--tw-step)); }
.tw-letter::after {
  content: ""; position: absolute; right: -3px; top: 15%; height: 70%; width: 2px; border-radius: 1px;
  background: #0066CC; box-shadow: 0 0 10px rgba(0,102,204, 0.55); opacity: 0; pointer-events: none;
  animation: tw-turn var(--tw-step) linear; animation-delay: calc(var(--tw-start) + var(--i) * var(--tw-step));
}
.tw-last::after { animation: tw-linger 1s linear; animation-delay: calc(var(--tw-start) + var(--i) * var(--tw-step)); }
@keyframes tw-in { to { opacity: 1; } }
@keyframes tw-turn { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tw-linger { 0%, 34% { opacity: 1; } 35%, 59% { opacity: 0; } 60%, 80% { opacity: 1; } 100% { opacity: 0; } }
.tw-wait .tw-letter, .tw-wait .tw-letter::after { animation-play-state: paused; }
.tw-done .tw-letter { animation: none; opacity: 1; }
.tw-done .tw-letter::after { display: none; }

/* the entrance (b2b.css): the stage first, then the numbers, then the copy, each from its --d */
.b2b-in-soft { animation: b2b-soft 1.05s var(--b2b-ease) var(--d, 0s) backwards; }
.b2b-in-mask { display: block; animation: b2b-mask 1.05s var(--b2b-ease) var(--d, 0s) backwards; }
.b2b-in-btn { animation: b2b-btn 1.05s var(--b2b-ease) var(--d, 0s) backwards; }
.b2b-line { display: block; overflow: hidden; padding: 0.06em 0.15em 0.14em; margin: -0.06em -0.15em -0.14em; }
@keyframes b2b-soft { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes b2b-mask { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes b2b-btn { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .b2b-in-soft, .b2b-in-mask, .b2b-in-btn { animation: none; }
  .tw-letter { animation: none; opacity: 1; }
  .tw-letter::after { display: none; }
}

/* the open page after the hero, then the footer */
.home .after-hero { height: var(--section-gap); } /* the footer rises into this */

/* smooth load: no pre-script flash of the accent word, canvases fade in */
.b2b-stage canvas, .b2b-stats canvas { animation: b2b-canvas-in .6s ease both; }
@keyframes b2b-canvas-in { from { opacity: 0; } to { opacity: 1; } }
/* reserve the number canvases' final height so the centre mark never shifts */
/* the numbers row (with the centre mark) only fades in, so the mark holds its position */
.b2b-in-soft:has(> .b2b-stats) { animation-name: b2b-fade; }
@keyframes b2b-fade { from { opacity: 0; } to { opacity: 1; } }
/* headline reads at once; the typing lives on the live count line */
.b2b-typed .tw-letter { animation: none; opacity: 1; }
.b2b-typed .tw-letter::after { display: none; }
/* the live line waits for the hero, then types in (hero.js) */
.b2b-alt.lt-wait { visibility: hidden; }
.b2b-alt.b2b-in-soft { animation: none; }
/* the live count keeps one width as it gains a digit, so the line never shifts */
.b2b-alt #b2b-live { display: inline-block; min-width: 9ch; text-align: right; }
/* the dot-matrix numbers hold their final size before the script draws them, so nothing above or below them
   moves on the first frames (dot pitch: 2.8px phones, 3.4px small tablets, 4.6px wider; 7 dots tall) */
.b2b-stats canvas { --p: 4.6px; height: calc(var(--p) * 7); }
@media (max-width: 767px) { .b2b-stats canvas { --p: 3.4px; } }
@media (max-width: 479px) { .b2b-stats canvas { --p: 2.8px; } }
#b2b-people { width: calc(var(--p) * 11); }
#b2b-twins { width: calc(var(--p) * 45); }
/* phones: the live line can run to two lines while it types; hold both from the start so the copy never jumps */
@media (max-width: 479px) { .b2b-alt { min-height: calc(2 * 1.5em); line-height: 1.5; } }
.b2b-field::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(75% 60% at 50% 50%, rgb(0 102 204 / 0.11), rgb(0 102 204 / 0) 72%), linear-gradient(180deg, rgb(0 102 204 / 0.06), rgb(0 102 204 / 0) 60%); }