/* INTOIT — site styles. Ported from the static design (see modules/intoit/README.md). */

html, body { margin: 0; padding: 0; height: auto; min-height: 100%; background: #fff; overflow-x: clip; }
/* the design set the font on a per-page wrapper; keep it on body so the header,
   mobile menu and footer — which live in the layout — inherit it too */
body { overflow-y: visible; font-family: "Poppins", system-ui, sans-serif; color: #0E2340; }
body.p-home { background: #dce9f5; }
body.hero-lock { overflow: hidden !important; height: 100vh !important; overscroll-behavior: none; }
* { box-sizing: border-box; }
a { color: #0E2340; text-decoration: none; }
a:hover { color: #2C5AA0; }
@keyframes heroCue { 0%, 100% { transform: translateY(0); opacity: .9 } 50% { transform: translateY(6px); opacity: .5 } }
.hero-cue svg { animation: heroCue 1.6s cubic-bezier(.22,1,.36,1) infinite; }
@media (prefers-reduced-motion: reduce) { .hero-cue svg { animation: none; } }

/* mobile navigation: hidden above the breakpoint, faded in by the is-open class */
.hero-menu { display: none; opacity: 0; pointer-events: none; }
.hero-menu.is-open { opacity: 1; pointer-events: auto; }

/* FAQ accordion (shared by the brands and media-buyers pages) */
.ifaq-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 320ms cubic-bezier(.22,1,.36,1), opacity 240ms ease; }
.ifaq.is-open .ifaq-panel { opacity: 1; }
.ifaq.is-open .ifaq-plus { transform: rotate(45deg); }

/* hover / focus / active states, lifted out of the design's inline style-* attributes */

.inav:hover { background:rgba(255,255,255,0.6); }
.inavy:hover { opacity:0.9; color:#fff; }
.inavy:active { transform:scale(0.97); }
.isubmit:hover { box-shadow:0 10px 30px rgba(14,35,64,.28); }
.isubmit:active { transform:scale(0.97); }
.isoc:hover { background:#000; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.45); }
.ilink:hover { color:#2f63f6; }
.ifield:focus { border-color:#2f63f6; background:#fff; }



/* ==========================================================================
   LANDING
   ========================================================================== */

  @media (max-width: 1024px) {
    .hero-nav { display: none !important; }
    .hero-pill { padding: 0 !important; background: transparent !important; backdrop-filter: none !important; border: 0 !important; gap: 10px !important; }
    .hero-burger {
      display: inline-flex !important; order: 2; margin: 0 !important;
      width: 44px !important; height: 44px !important; border-radius: 100px;
      background: rgba(255,255,255,0.42) !important;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.55) !important;
    }
    .hero-cta { order: 1; padding: 13px 20px !important; }
    .hero-menu { display: flex !important; }
    .hero-head { padding-left: 20px !important; padding-right: 20px !important; }
    .hero-body { padding-left: 20px !important; padding-right: 20px !important; }
    .hero-slide { left: 20px !important; right: 20px !important; }
    .hero-grid { grid-template-columns: 1fr !important; gap: 22px !important; align-items: start !important; }
    .hero-col { justify-self: start !important; max-width: 620px !important; gap: 20px !important; }
  }

/* ===== merged from sections-2-6.html ===== */

  /* ===== INTOIT SECTIONS — scoped base ===== */
  .isec, .isec * { margin: 0; padding: 0; box-sizing: border-box; }
  .isec {
    font-family: "Poppins", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    --blue: #2f63f6;
    --blue-soft: #8fb3ff;
    --ink: #0c1320;
    --ink-soft: #5b6678;
    --navy: #0a1426;
    --navy-deep: #060d1a;
  }
  .isec img { max-width: 100%; display: block; }
  .isec ul { list-style: none; }
  .isec em { font-style: italic; font-weight: 400; }
  .isec h2 em, .isec h3 em { color: var(--blue); }
  .isec .on-dark h3 em, .isec .on-dark h2 em { color: #fff; }

  /* buttons — unified spec */
  .ibtn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; font-weight: 500; font-size: 16px; line-height: 1;
    padding: 16px 30px; border-radius: 100px; border: none; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: transform 140ms ease, box-shadow 240ms cubic-bezier(.22,1,.36,1), opacity 240ms ease;
  }
  .ibtn-white, .ibtn-white:visited { background: #fff; color: #0c1320; box-shadow: 0 0 0 rgba(255,255,255,0); }
  .ibtn-white:hover, .ibtn-white:focus, .ibtn-white:active { color: #0c1320; box-shadow: 0 4px 34px rgba(255,255,255,.55); }
  .ibtn-dark, .ibtn-dark:visited { background: #0e2340; color: #fff; }
  .ibtn-dark:hover, .ibtn-dark:focus, .ibtn-dark:active { color: #fff; box-shadow: 0 10px 30px rgba(14,35,64,.28); }
  .ibtn:active { transform: scale(.97); }

  .ieyebrow {
    font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.42);
  }
  .ieyebrow-dark { color: rgba(12,19,32,.42); }

  /* ========== S2 — WHAT YOU GET ========== */
  .s2b-get {
    background: #fff; color: var(--ink);
    padding: clamp(72px, 9vw, 130px) clamp(20px, 5vw, 72px);
  }
  .s2g-inner { max-width: 1320px; margin: 0 auto; }
  .s2g-head { text-align: center; max-width: 900px; margin: 0 auto; }
  .s2g-head h2 {
    font-size: clamp(30px, 4.2vw, 54px); font-weight: 400; line-height: 1.08;
    letter-spacing: -.025em; text-wrap: balance;
  }
  .s2g-head p {
    margin-top: 22px; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6;
    color: var(--ink-soft); text-wrap: pretty;
  }
  .s2g-cards {
    margin-top: clamp(40px, 5vw, 68px);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px);
  }
  .s2g-card {
    position: relative; overflow: hidden; border-radius: 22px;
    min-height: clamp(420px, 46vw, 620px);
    padding: clamp(26px, 2.6vw, 40px);
    display: flex; flex-direction: column; gap: 20px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
  }
  .s2g-card h3 {
    font-size: clamp(24px, 2vw, 32px); font-weight: 400; line-height: 1.12; letter-spacing: -.02em;
  }
  .s2g-card ul { display: flex; flex-direction: column; gap: 10px; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.35; }
  .s2g-card .spacer { flex: 1; }
  /* hover reveal: title only at rest, list + CTA on hover */
  .s2g-reveal {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .38s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }
  .s2g-card:hover .s2g-reveal,
  .s2g-card:focus-within .s2g-reveal { opacity: 1; transform: none; }
  .s2g-reveal ul { overflow: hidden; }
  .s2g-card .ibtn { align-self: flex-start; }
  @media (hover: none) {
    .s2g-reveal { opacity: 1; transform: none; }
  }
  .s2g-dark { color: #fff; background-color: #050b16; }
  .s2g-dark > * { position: relative; z-index: 1; }
  .s2g-dark ul { color: #ffffff; }
  .s2g-light { color: var(--ink); background-color: #e9eef5; }
  .s2g-light ul { color: #0c1320; }
  .s2g-cards.is-two { grid-template-columns: repeat(2, 1fr); max-width: 1100px; margin-left: auto; margin-right: auto; }
  .s2g-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 22px; }
  .s2g-body p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; text-wrap: pretty; }
  .s2g-dark .s2g-body p { color: rgba(255,255,255,.92); }
  .s2g-light .s2g-body p { color: #26364b; }
  @media (max-width: 760px) { .s2g-cards.is-two { grid-template-columns: 1fr; } }


  /* ========== S2B — AI INFRASTRUCTURE ========== */
  .s2b {
    background: radial-gradient(120% 90% at 8% 0%, #12305e 0%, #0a1729 42%, #060d1a 100%);
    color: #eaf1ff;
    padding: clamp(64px, 8vw, 110px) 0 clamp(56px, 7vw, 96px);
  }
  .s2b-pad { padding: 0 clamp(20px, 5vw, 72px); }
  .s2b-inner { max-width: 1320px; margin: 0 auto; }
  .s2b-head h2 {
    margin-top: 26px;
    font-size: clamp(30px, 4.3vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em;
    max-width: 18ch;
  }
  .s2b-head h2 em { color: var(--blue-soft); }
  .s2b-lead {
    margin-top: clamp(30px, 4vw, 52px);
    font-size: clamp(20px, 2vw, 30px); font-weight: 400; line-height: 1.22; letter-spacing: -.02em;
    max-width: 24ch;
  }
  .s2b-head p.s2b-body {
    margin-top: 22px; max-width: 76ch;
    font-size: clamp(15px, 1.2vw, 18px); line-height: 1.62; color: rgba(210,224,255,.72);
    text-wrap: pretty;
  }

  .ai-scene { position: relative; height: 500vh; }
  .ai-scene-sticky {
    position: sticky; top: 0; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(24px, 4vh, 56px) 0;
  }
  .ai-frame { max-width: 1320px; margin: 0 auto; width: 100%; padding: 0 clamp(20px, 5vw, 72px); }

  .ai-rail { position: relative; }
  .ai-rail-line {
    position: absolute; left: 0; right: 0; top: 7px; height: 2px;
    background: rgba(255,255,255,.12);
  }
  .ai-rail-fill {
    position: absolute; left: 0; top: 0; height: 100%; width: 0%;
    background: linear-gradient(90deg, #2f63f6, #8fb3ff);
    box-shadow: 0 0 14px rgba(143,179,255,.7);
    transition: width .5s cubic-bezier(.22,1,.36,1);
  }
  .ai-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .ai-step {
    background: none; border: none; font-family: inherit; text-align: left; cursor: pointer;
    padding: 0; color: inherit; display: flex; flex-direction: column; gap: 14px;
  }
  .ai-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: #16233c; border: 2px solid #3b4a69;
    transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
  }
  .ai-step.is-active .ai-dot,
  .ai-step.is-done .ai-dot { background: #8fb3ff; border-color: #8fb3ff; }
  .ai-step.is-active .ai-dot { box-shadow: 0 0 18px rgba(143,179,255,.9); transform: scale(1.12); }
  .ai-num { font-size: 12px; letter-spacing: .2em; color: rgba(180,199,235,.45); }
  .ai-name {
    font-size: clamp(14px, 1.15vw, 18px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(180,199,235,.45); transition: color .35s ease;
  }
  .ai-step.is-active .ai-name { color: #fff; }
  .ai-step.is-done .ai-name { color: rgba(210,224,255,.66); }

  .ai-panels { position: relative; margin-top: clamp(32px, 5vh, 64px); }
  .ai-stage {
    position: absolute; inset: 0 0 auto 0;
    opacity: 0; transform: translateY(18px); pointer-events: none;
    transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
  }
  .ai-stage.is-active { opacity: 1; transform: none; pointer-events: auto; }
  .ai-stage-lead {
    font-size: clamp(17px, 1.5vw, 22px); line-height: 1.42; max-width: 62ch; color: #eaf1ff;
  }
  .ai-cards { margin-top: clamp(22px, 3vh, 38px); display: grid; gap: clamp(14px, 1.6vw, 24px); }
  .ai-cards.is-three { grid-template-columns: repeat(3, 1fr); }
  .ai-card {
    border-radius: 18px; padding: clamp(20px, 2vw, 30px);
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.07);
  }
  .ai-card h4 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; letter-spacing: -.01em; }
  .ai-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
  .ai-chip {
    font-size: clamp(13px, 1vw, 15px); line-height: 1;
    padding: 12px 16px; border-radius: 10px;
    background: rgba(47,99,246,.16); border: 1px solid rgba(143,179,255,.24);
    color: #dbe6ff;
  }
  .ai-kicker {
    margin-top: clamp(18px, 2.4vh, 30px);
    font-style: italic; font-weight: 500;
    font-size: clamp(16px, 1.4vw, 21px); color: var(--blue-soft);
  }

  .s2b-outro {
    margin-top: clamp(48px, 7vw, 104px); padding-top: clamp(40px, 5vw, 72px);
    border-top: 1px solid rgba(255,255,255,.1);
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start;
  }
  .s2b-outro h3 {
    font-size: clamp(30px, 3.6vw, 52px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em;
  }
  .s2b-outro h3 em { color: var(--blue-soft); }
  .s2b-outro p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(210,224,255,.76); }
  .s2b-outro .strong { color: #fff; font-weight: 500; }
  .s2b-outro-col { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

  /* ========== S3 — MEDIA BUYING TEAMS ON DEMAND (pinned horizontal track) ========== */
  .s3t {
    position: relative; background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
    color: var(--ink);
  }
  .s3t-scene { position: relative; }
  .s3t-sticky {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    overflow-x: clip; overflow-y: visible;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 0;
  }
  .s3t-head {
    flex: 0 0 auto;
    padding: 54px clamp(20px, 5vw, 72px) clamp(18px, 3vh, 32px);
  }
  .s3t-head h2 {
    font-size: clamp(30px, 4.3vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em;
    max-width: 18ch;
  }
  .s3t-sub { margin-top: 22px; max-width: 62ch; display: flex; flex-direction: column; gap: 14px; }
  .s3t-sub p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--ink-soft); }
  .s3t-vid {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
  }
  .s3t-head { position: relative; z-index: 1; }
  .s3t-viewport {
    flex: 1 1 auto; min-height: 0;
    overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0px;
    display: flex; align-items: flex-start; position: relative; z-index: 1;
    padding-block: 22px 36px;
  }
  .s3t-track {
    display: flex; gap: clamp(16px, 1.7vw, 24px);
    width: max-content; will-change: transform;
    padding-inline: clamp(20px, 5vw, 72px);
    perspective: 1400px;
  }
  .s3t-card {
    position: relative;
    flex: 0 0 auto; width: clamp(280px, 23vw, 400px);
    height: auto; max-height: 100%; min-height: 0;
    background: rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 20px; padding: clamp(22px, 2.2vw, 32px);
    display: flex; flex-direction: column; gap: 14px; overflow: hidden;
    box-shadow: 0 22px 54px rgba(40,72,122,.13), inset 0 1px 0 rgba(255,255,255,.65);
    transform-style: preserve-3d; will-change: transform;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
    --mx: 50%; --my: 0%;
  }
  .s3t-card.is-accent { background: linear-gradient(135deg, #d8ecfb, #e6e2f8 55%, #f7dfe8); }
  .s3t-card.is-active {
    transition: transform .08s linear, box-shadow .3s ease;
    box-shadow: 0 36px 80px rgba(40,72,122,.22), inset 0 1px 0 rgba(255,255,255,.8);
    z-index: 3;
  }
  .s3t-card > .fx {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: inherit; opacity: 0; transition: opacity .4s ease;
  }
  .s3t-card.is-active > .fx-spec { opacity: .55; }
  .s3t-card.is-active > .fx-irid { opacity: .6; }
  .s3t-card > .fx-noise { opacity: .12; }
  .fx-spec {
    background: radial-gradient(ellipse 60% 60% at var(--mx) var(--my), #7aa8ff 0%, transparent 70%);
    mix-blend-mode: screen;
  }
  .fx-irid {
    background: conic-gradient(from 210deg at var(--mx) var(--my), #6ad6ff, #9bb8ff, #c9a8ff, #ffb0e6, #a8f0d8, #6ad6ff);
    -webkit-mask: radial-gradient(ellipse 42% 42% at var(--mx) var(--my), #000 0%, transparent 65%);
    mask: radial-gradient(ellipse 42% 42% at var(--mx) var(--my), #000 0%, transparent 65%);
    mix-blend-mode: screen;
  }
  .fx-noise {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE0MCcgaGVpZ2h0PScxNDAnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nLjUnLz48L3N2Zz4=");
    background-size: 140px 140px; mix-blend-mode: overlay;
  }
  .s3t-card > .s3t-num, .s3t-card > h3, .s3t-card > p { position: relative; z-index: 2; }
  @media (prefers-reduced-motion: reduce) {
    .s3t-card { transition: none; }
    .s3t-card > .fx { display: none; }
  }
  .s3t-num { font-size: 13px; font-weight: 500; letter-spacing: .18em; color: var(--blue); }
  .s3t-card h3 { font-size: clamp(21px, 1.8vw, 27px); font-weight: 400; line-height: 1.14; letter-spacing: -.02em; }
  .s3t-card p { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.52; color: var(--ink-soft); }
  .s3t-progress {
    position: relative; z-index: 2; flex: 0 0 2px; height: 2px; min-height: 2px;
    border-radius: 2px; overflow: hidden;
    margin: clamp(12px, 2vh, 28px) clamp(20px, 5vw, 72px) 54px;
    background: #dfe5ee;
  }
  .s3t-progress-fill { position: absolute; left: 0; top: 0; height: 2px; width: 0%; background: #0c1320; border-radius: 2px; }

  /* ========== S4 — BUILD YOUR OWN TEAM ========== */
  .s4b {
    background: #fff; color: var(--ink); overflow: hidden;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 72px);
  }
  .s4b-grid {
    max-width: 1320px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(300px, .8fr) 1.2fr; gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  .s4b-text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
  .s4b-text h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em; }
  .s4b-text p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--ink-soft); max-width: 42ch; }
  .s4b-text h3 { margin-top: 10px; font-size: clamp(22px, 2.1vw, 30px); font-weight: 400; letter-spacing: -.02em; }
  .s4b-field { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 760px; margin: 0 auto; }
  .s4b-field > img {
    position: absolute; left: 50%; top: 49%; width: 98%; transform: translate(-50%, -50%);
    pointer-events: none; user-select: none;
  }
  .s4b-orb {
    position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center; text-align: center;
    border-radius: 50%;
    background:
      radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 60%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 86%, rgba(120,160,205,.42) 92.5%, rgba(182,208,236,.16) 96.5%, rgba(112,154,206,.55) 99.2%, rgba(182,208,236,0) 100%);
    border: 1px solid rgba(150,184,224,.4);
    backdrop-filter: blur(2px);
    font-size: clamp(13px, 1.15vw, 17px); font-weight: 400; line-height: 1.2; color: #142033;
    padding: 8px;
    will-change: left, top, transform, opacity;
    transition:
      opacity .6s ease,
      transform .7s cubic-bezier(.34,1.3,.5,1),
      border-color .4s ease,
      box-shadow .45s ease;
  }
  .s4b-orb:hover {
    z-index: 6;
    transform: translate(-50%, -50%) scale(1.16);
    border-color: rgba(110,152,205,.75);
    box-shadow: 0 22px 54px rgba(70,110,170,.3);
  }
  @media (prefers-reduced-motion: no-preference) {
    .s4b-orb { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
    .s4b-orb.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .s4b-orb.is-in:hover { transform: translate(-50%, -50%) scale(1.16); }
  }

  /* ========== S5 — VERTICALS (page-scroll horizontal track) ========== */
  .s5v { background: #fff; color: var(--ink); padding: 0 0 clamp(40px, 5vw, 72px); }
  .s5v-head {
    flex: 0 0 auto; max-width: none; margin: 0;
    padding: clamp(24px, 4vh, 72px) clamp(20px, 5vw, 72px) clamp(24px, 5vh, 60px);
  }
  .s5v-inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
  .s5v h2 { font-size: clamp(32px, 4.3vw, 56px); font-weight: 400; font-style: normal; color: var(--ink); letter-spacing: -.03em; }
  .s5v h3 { margin-top: 18px; font-size: clamp(20px, 1.9vw, 27px); font-weight: 400; letter-spacing: -.02em; }
  .s5v-sub { margin-top: 14px; max-width: 60ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--ink-soft); }

  .s5v-scene { position: relative; }
  .s5v-sticky {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    overflow-x: clip; overflow-y: visible;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 0 0 clamp(16px, 3vh, 32px);
  }
  .s5v-viewport {
    flex: 1 1 auto; min-height: 0;
    overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0px;
    display: flex; align-items: flex-start;
  }
  .s5v-viewport { overflow: hidden; }
  .s5v-track {
    display: flex; align-items: stretch; gap: clamp(16px, 1.7vw, 24px);
    width: max-content; will-change: transform;
    padding-inline: clamp(20px, 5vw, 72px);
  }
  .s5v-card {
    position: relative; overflow: hidden; isolation: isolate;
    flex: 0 0 auto; width: clamp(300px, 24vw, 460px);
    height: auto; max-height: none; min-height: 0;
    border-radius: 22px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
  }
  .s5v-card h4 { font-size: clamp(19px, 1.5vw, 25px); font-weight: 400; line-height: 1.14; letter-spacing: -.02em; }
  .s5v-card ul {
    display: flex; flex-direction: column; gap: 5px;
    font-size: clamp(12px, .92vw, 15px); line-height: 1.3;
    opacity: 0; transform: translateY(8px);
    transition: opacity .36s ease, transform .48s cubic-bezier(.22,1,.36,1);
  }
  .s5v-card:hover ul, .s5v-card:focus-within ul { opacity: 1; transform: none; }
  @media (hover: none) {
    .s5v-card ul { opacity: 0; transform: translateY(10px); }
    .s5v-card.is-open ul { opacity: 1; transform: none; }
  }
  .s5v-dark { color: #f5f8ff; background-color: #050b16; }
  .s5v-dark ul { color: rgba(226,234,250,.88); }
  .s5v-light { color: #11202e; background-color: #e9eef5; }
  .s5v-light ul { color: rgba(40,54,70,.88); }
  .s5v-progress {
    position: relative; flex: 0 0 2px; height: 2px; min-height: 2px;
    border-radius: 2px; overflow: hidden;
    margin: clamp(20px, 3vh, 44px) clamp(20px, 5vw, 72px) 0;
    background: #e7e9ee;
  }
  .s5v-progress-fill { position: absolute; left: 0; top: 0; height: 2px; width: 0%; background: #0c1320; border-radius: 2px; }

  /* ========== S6 — WHY THESE VERTICALS ========== */
  .s6w { background: #f2f4f6; color: var(--ink); padding: clamp(56px, 7vw, 100px) clamp(20px, 5vw, 72px) clamp(64px, 8vw, 120px); }
  .s6w-inner { max-width: 1320px; margin: 0 auto; }
  .s6w-head { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(24px, 4vw, 64px); align-items: start; }
  .s6w-head h2 { margin-top: 22px; font-size: clamp(30px, 4.3vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em; }
  .s6w-head p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
  .s6w-bento {
    margin-top: clamp(34px, 4vw, 62px);
    display: grid; grid-template-columns: 1.42fr 1fr 1fr;
    grid-auto-rows: minmax(180px, auto);
    gap: clamp(14px, 1.6vw, 22px);
  }
  .s6w-p1 { grid-column: 1; grid-row: 1 / span 2; }
  .s6w-p2 { grid-column: 2; grid-row: 1; }
  .s6w-p3 { grid-column: 3; grid-row: 1 / span 2; }
  .s6w-p4 { grid-column: 2; grid-row: 2; }
  .s6w-p5 { grid-column: 1; grid-row: 3; }
  .s6w-p6 { grid-column: 2; grid-row: 3; }
  .s6w-p7 { grid-column: 3; grid-row: 3; }
  .s6w-bento.is-four {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: clamp(300px, 30vw, 420px) clamp(300px, 30vw, 420px);
    align-items: stretch;
  }
  .s6w-bento.is-four .s6w-card {
    background-repeat: no-repeat; background-color: #fff;
    border: 0; border-radius: 26px; min-height: 0;
    padding: clamp(24px, 2.4vw, 38px);
  }
  .s6w-bento.is-four .s6w-card h4 {
    font-size: clamp(22px, 2vw, 34px); font-weight: 400; line-height: 1.2;
    letter-spacing: -.02em; max-width: none; text-wrap: pretty;
  }
  .s6w-bento.is-four .s6w-card h4 em { font-style: italic; font-weight: 500; color: inherit; }
  .s6w-q1 { grid-column: 1; grid-row: 1; }
  .s6w-q2 { grid-column: 2; grid-row: 1; }
  .s6w-q3 { grid-column: 3; grid-row: 1 / span 2; }
  .s6w-q4 { grid-column: 1 / span 2; grid-row: 2; }
  .s6w-bento.is-four .s6w-q4 { position: relative; overflow: hidden; background-color: #05070c; }
  .s6w-bento.is-four .s6w-q4 h4 {
    color: #fff; font-size: clamp(22px, 2vw, 34px); line-height: 1.2;
    max-width: 20ch;
  }
  .s6w-bento.is-four .s6w-q4 h4 em { display: block; }

  .s6w-card {
    position: relative; overflow: hidden; border-radius: 18px;
    padding: clamp(20px, 2vw, 32px); min-height: 180px;
    display: flex; flex-direction: column; gap: 14px;
    background-size: cover; background-position: center;
    border: 1px solid rgba(18,40,80,.08);
  }
  .s6w-card .s6w-num { font-size: 13px; letter-spacing: .2em; color: rgba(12,19,32,.4); }
  .s6w-card h4 { font-size: clamp(21px, 1.9vw, 30px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
  .s6w-card p { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; color: var(--ink-soft); max-width: 30ch; }
  .s6w-dark { color: #fff; background-color: #050b16; border-color: transparent; }
  .s6w-dark .s6w-num { color: rgba(226,236,255,.5); }
  .s6w-dark p { color: rgba(226,236,255,.8); }
  .s6w-tall { min-height: clamp(420px, 44vw, 620px); }
  .s6w-banner {
    margin-top: clamp(24px, 3vw, 40px); position: relative; overflow: hidden;
    border-radius: 20px; min-height: clamp(300px, 30vw, 420px);
    padding: clamp(28px, 3.4vw, 56px);
    display: flex; flex-direction: column; gap: 18px; align-items: flex-start; justify-content: center;
    background: #050b16 center / cover no-repeat;
    color: #fff;
  }
  .s6w-banner-veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(5,11,22,.62) 0%, rgba(5,11,22,.24) 52%, rgba(5,11,22,0) 100%);
  }
  .s6w-banner > h3, .s6w-banner > p, .s6w-banner > a { position: relative; z-index: 2; }
  .s6w-banner h3 { font-size: clamp(28px, 3.4vw, 50px); font-weight: 400; letter-spacing: -.03em; }
  .s6w-banner h3 em { color: var(--blue-soft); }
  .s6w-banner p { font-size: clamp(15px, 1.2vw, 18px); color: rgba(226,236,255,.84); }

  /* ========== S7 — ECOSYSTEM FORM ========== */
  .s7e {
    position: relative; overflow: clip; color: #eaf1ff;
    background:
      radial-gradient(90% 70% at 50% 100%, rgba(47,99,246,.5) 0%, rgba(6,13,26,0) 62%),
      radial-gradient(60% 50% at 78% 40%, rgba(47,99,246,.22) 0%, rgba(6,13,26,0) 70%),
      #03060d;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 72px);
  }
  .s7e-vid {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  .s7e-veil { display: none; }
  .s7e-grid {
    max-width: 1320px; margin: 0 auto; position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center;
  }
  .s7e h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 400; line-height: 1.06; letter-spacing: -.03em; }
  .s7e h2 em { color: #fff; }
  .s7e-lead { margin-top: clamp(24px, 3vw, 44px); max-width: 46ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: #e8f0ff; }
  .s7e h2, .s7e-lead { text-shadow: 0 2px 18px rgba(3,6,13,.55); }
  .s7e-form {
    border-radius: 20px; padding: clamp(22px, 2.6vw, 40px);
    background: #fff;
    border: 1px solid rgba(12,19,32,.08);
    box-shadow: 0 24px 60px rgba(4,10,22,.28);
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px);
  }
  .s7e-field { display: flex; flex-direction: column; gap: 10px; }
  .s7e-field.is-wide { grid-column: 1 / -1; }
  .s7e-field label { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #5b6678; }
  .s7e-field input, .s7e-field textarea {
    font-family: inherit; font-size: 16px; color: #0c1320;
    padding: 15px 18px; border-radius: 12px;
    background: #f5f7fa; border: 1px solid rgba(12,19,32,.14);
    outline: none; transition: border-color .24s ease, background .24s ease;
  }
  .s7e-field textarea { min-height: 118px; resize: vertical; }
  .s7e-field input::placeholder, .s7e-field textarea::placeholder { color: #8b97a8; }
  .s7e-field input:focus, .s7e-field textarea:focus { border-color: #2f63f6; background: #fff; }
  .s7e-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .s7e-note { font-size: 14px; color: #5b6678; }

  /* ========== FOOTER ========== */
  .ifoot {
    background: #fff; color: #8b93a7;
    padding: clamp(48px, 5vw, 72px) clamp(20px, 5vw, 72px) clamp(28px, 3vw, 40px);
  }
  .ifoot-inner { max-width: 1320px; margin: 0 auto; }
  .ifoot-top {
    display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
    padding-bottom: clamp(28px, 3.5vw, 48px);
  }
  .ifoot img { height: 46px; width: auto; color: #0d1220; }
  .ifoot-top nav { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); font-size: 20px; }
  .ifoot-top nav a { color: #4b5566; }
  .ifoot-top nav a:hover { color: #0d1220; }
  .ifoot-bottom {
    border-top: 1px solid rgba(13,18,32,.1);
    padding-top: clamp(20px, 2.5vw, 32px);
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
    font-size: 16px;
  }
  .ifoot a { color: #8b93a7; text-decoration: none; transition: color .24s ease; }
  .ifoot a:hover { color: #0d1220; }
  .ifoot-legal { display: flex; gap: 10px; }

  /* ===== entrance ===== */
  @keyframes iRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .ir { opacity: 1; }
  .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay: var(--rd, 0s); }
  .rv.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

  /* ===== responsive ===== */
  @media (max-width: 1100px) {
    .s2g-cards { grid-template-columns: 1fr 1fr; }
    .ai-cards.is-three { grid-template-columns: 1fr; }
    .s6w-bento, .s6w-bento.is-four { grid-template-columns: 1fr 1fr; }
    .s6w-bento.is-four { grid-template-rows: auto; }
    .s6w-bento.is-four .s6w-card { min-height: 300px; }
    .s6w-q1, .s6w-q2, .s6w-q3, .s6w-q4 { grid-column: auto !important; grid-row: auto !important; }
    .s6w-p1, .s6w-p2, .s6w-p3, .s6w-p4, .s6w-p5, .s6w-p6, .s6w-p7,
    .s6w-q1, .s6w-q2, .s6w-q3, .s6w-q4 { grid-column: auto; grid-row: auto; }
    .s6w-tall { min-height: 420px; }
  }
  @media (max-width: 860px) {
    .ai-scene { height: auto !important; }
    .ai-scene-sticky { position: static !important; min-height: 0 !important; padding: 0 !important; }
    .ai-panels { position: static; margin-top: 26px; }
    .ai-stage { position: static; opacity: 1; transform: none; pointer-events: auto; display: none; }
    .ai-stage.is-active { display: block; }
    .ai-steps { grid-template-columns: repeat(5, 1fr); column-gap: 8px; row-gap: 22px; }
    .ai-step { align-items: center; gap: 10px; }
    .ai-name { display: none; }
    .ai-num { font-size: 13px; letter-spacing: .12em; }
    .ai-rail { margin-top: 36px; }
    .ai-rail-line { display: none; }
    .s5v-scene { height: auto !important; }
    .s5v-sticky { position: static; height: auto; min-height: 0; overflow: visible; padding: 0; }
    .s5v-head { padding-top: clamp(56px, 8vw, 96px); }
    .s5v-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .s5v-viewport::-webkit-scrollbar { display: none; }
    .s5v-track { transform: none !important; }
    .s5v-viewport { display: block; }
    .s3t-scene { height: auto !important; }
    .s3t-sticky { position: static; height: auto; overflow: visible; padding: 0 0 clamp(40px, 8vw, 72px); }
    .s3t-viewport { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .s3t-viewport::-webkit-scrollbar { display: none; }
    .s3t-track { transform: none !important; }
    .s3t-card { height: auto; max-height: none; }
    .s5v-card { height: clamp(280px, 62vw, 400px); max-height: none; }
    .s2b-outro, .s6w-head, .s7e-grid, .s4b-grid { grid-template-columns: 1fr; }
    .s2g-cards { grid-template-columns: 1fr; }
    .s2g-card { min-height: 380px; }
    .s6w-bento, .s6w-bento.is-four { grid-template-columns: 1fr; }
    .s6w-bento.is-four .s6w-card { min-height: 280px; }
    .s7e-form { grid-template-columns: 1fr; }
    .s4b-field { max-width: 520px; }
  }

  @media (max-width: 860px) {
    .ft-grid { grid-template-columns: 1fr !important; }
    .ft-cols { gap: 40px !important; }
  }
  @media (max-width: 560px) {
    .ft-right { padding: 24px !important; }
    .ft-bottom { flex-direction: column; align-items: flex-start !important; }
    .ft-sub { width: 100% !important; }
    .ft-badge { right: 12px !important; top: -28px !important; }
    .ft-cube { width: 72px !important; height: 72px !important; }
  }


/* ==========================================================================
   FOR BRANDS
   ========================================================================== */

  .wd-viewport::-webkit-scrollbar { display: none; }
  /* cards all match the tallest card's own content height, regardless of screen height */
  .wd-viewport { align-items: flex-start !important; }
  #wdTrack { align-items: stretch; height: auto; }
  .wd-card { max-height: none !important; }
  @media (max-width: 860px) {
    #wdScene { height: auto !important; }
    .wd-sticky { position: static !important; height: auto !important; padding-bottom: clamp(40px,8vw,72px); }
    .wd-viewport { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #wdTrack { transform: none !important; }
  }
  @media (max-width: 1024px) {
    .bp-nav { display:none !important; }
    .hero-pill { padding: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; gap: 10px !important; }
    .hero-burger {
      display: inline-flex !important; order: 2; margin: 0 !important;
      width: 44px !important; height: 44px !important; border-radius: 100px;
      background: rgba(255,255,255,0.42) !important;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.55) !important;
    }
    .hero-cta { order: 1; padding: 13px 20px !important; }
    .hero-menu { display: flex !important; }
  }
  @media (max-width: 900px) {
    .bp-grid2 { grid-template-columns:1fr !important; }
    .bp-grid3 { grid-template-columns:1fr !important; }
    .bp-hero-h1 { max-width:none !important; }
  }
  /* ===== WHAT'S INCLUDED ===== */
  .wi { background:#f2f6fb; color:#0c1320; padding:clamp(64px,8vw,120px) clamp(20px,5vw,72px); }
  .wi-inner { max-width:1320px; margin:0 auto; }
  .wi-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
  .wi-eyebrow { padding:7px 16px; border-radius:100px; background:#eaf1ff; color:#2f63f6; font-size:12px; font-weight:500; letter-spacing:.18em; }
  .wi-head h2 { margin:0; font-size:clamp(30px,4.2vw,54px); font-weight:400; line-height:1.08; letter-spacing:-.025em; }
  .wi-head p { margin:0; max-width:56ch; font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:#6b7686; text-wrap:pretty; }
  .wi-grid { margin-top:clamp(30px,4vw,54px); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
  .wi-grid > * { grid-column:span 3; }
  .wi-grid > :nth-child(n+5) { grid-column:span 4; }
  .wi-card { display:flex; flex-direction:column; gap:14px; background:#fff; border-radius:22px; padding:clamp(20px,1.9vw,28px); }
  .wi-card h3 { margin:0; font-size:clamp(16px,1.3vw,20px); font-weight:500; line-height:1.24; letter-spacing:-.01em; color:#0E2340; text-wrap:pretty; }
  .wi-card p { margin:0; font-size:clamp(14px,1.05vw,16px); line-height:1.5; color:#6b7686; text-wrap:pretty; }
  .wi-icon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:15px; background:#eff4fe; color:#2f63f6; }
  .wi-icon svg { width:26px; height:26px; }
  .wi-rise { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--rd,0s), transform .8s cubic-bezier(.22,1,.36,1) var(--rd,0s); }
  .wi-rise.is-in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .wi-rise { opacity:1; transform:none; transition:none; } }
  @media (max-width:1100px) { .wi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .wi-grid > *, .wi-grid > :nth-child(n+5) { grid-column:auto; } }
  @media (max-width:620px) { .wi-grid { grid-template-columns:1fr; } .wi-grid > *, .wi-grid > :nth-child(n+5) { grid-column:auto; } }
  @media (max-width: 900px) {
    .hww-row { grid-template-columns: 44px 1fr !important; }
    .hww-row > .hww-side { grid-column: 2 !important; justify-content: flex-start !important; text-align: left !important; align-items: flex-start !important; }
    .hww-row > .hww-spine { grid-column: 1 !important; grid-row: 1 !important; }
    .hww-row > .hww-media { order: -1; grid-column: 2 !important; justify-content: flex-start !important; }
    #hwwTrack > .hww-row:nth-of-type(2n+1) > .hww-media { flex-direction: row-reverse; justify-content: flex-end !important; }
  }
  @media (max-width: 860px) {
    .ft-grid { grid-template-columns: 1fr !important; }
    .ft-cols { gap: 40px !important; }
  }
  @media (max-width: 560px) {
    .ft-right { padding: 24px !important; }
    .ft-bottom { flex-direction: column; align-items: flex-start !important; }
    .ft-sub { width: 100% !important; }
    .ft-badge { right: 12px !important; top: -28px !important; }
    .ft-cube { width: 72px !important; height: 72px !important; }
  }


/* ==========================================================================
   FOR MEDIA BUYERS
   ========================================================================== */

  @media (max-width: 860px) { .mb-field { max-width: 520px !important; } }
  /* ===== WHAT YOU GET (flip cards) ===== */
  .wg h2, .wg h3, .wg p, .wg ul, .wg li { margin:0; padding:0; }
  .wg ul { list-style:none; }
  .wg { background:#F2F6FB; color:#0c1320; padding:clamp(72px,9vw,130px) clamp(20px,5vw,72px); }
  .wg-inner { max-width:1200px; margin:0 auto; }
  .wg-head { text-align:center; max-width:900px; margin:0 auto; }
  .wg-head h2 { font-size:clamp(30px,4.2vw,54px); font-weight:400; line-height:1.08; letter-spacing:-.025em; }
  .wg-grid { align-items:start; margin-top:clamp(34px,4.5vw,60px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,26px); }
  .wg-card {
    position:relative; display:flex; flex-direction:column; overflow:hidden; justify-content:flex-start;
    background:#fff; border-radius:26px; --p:clamp(20px,2vw,30px); padding:var(--p);
    min-height:clamp(520px,47vw,660px);
    box-shadow:0 1px 2px rgba(12,19,32,.04), 0 18px 46px rgba(12,19,32,.05);
  }
  .wg-media {
    overflow:hidden; background-size:cover; background-repeat:no-repeat; background-position:center top;
    flex:0 0 auto; align-self:stretch; aspect-ratio:654/584; min-height:0; max-height:900px;
    margin:calc(-1 * var(--p)) calc(-1 * var(--p)) 0; width:calc(100% + var(--p) * 2);
    opacity:1; transition:max-height .58s cubic-bezier(.4,0,.2,1), opacity .34s cubic-bezier(.4,0,.2,1), margin .58s cubic-bezier(.4,0,.2,1), width .58s cubic-bezier(.4,0,.2,1);
  }
  .wg-card.is-open .wg-media { max-height:0; opacity:0; margin:0; width:100%; }
  .wg-media.is-grad { position:relative; background-image:url('../images/wg-3.webp'); }
  .wg-bolt {
    position:absolute; top:clamp(14px,1.4vw,22px); left:clamp(14px,1.4vw,22px);
    width:clamp(46px,4vw,62px); height:clamp(46px,4vw,62px); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(6px);
    color:#fff;
  }
  .wg-card.is-open { justify-content:flex-start; }
  .wg-card h3 { position:relative; z-index:2; margin-top:clamp(14px,1.4vw,20px); font-size:clamp(21px,1.85vw,29px); font-weight:400; line-height:1.14; letter-spacing:-.02em; }
  .wg-card h3 em { font-style:italic; font-weight:600; color:inherit; }
  .wg-head h2 em { color:inherit; font-weight:400; }
  .wg-rest { position:relative; z-index:2; margin-top:14px; display:flex; flex-direction:column; gap:22px; align-items:flex-start;
    overflow:hidden; opacity:1;
    transition:max-height .58s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1), margin-top .58s cubic-bezier(.4,0,.2,1); }
  .wg-card.is-open .wg-rest { max-height:0; margin-top:0; opacity:0; pointer-events:none; }
  .wg-rest p { font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:#5b6678; text-wrap:pretty; }
  .wg-flip {
    position:relative; z-index:2; overflow:hidden; max-height:0; opacity:0; transform:translateY(10px); pointer-events:none;
    transition:max-height .58s cubic-bezier(.4,0,.2,1), opacity .38s cubic-bezier(.4,0,.2,1) .08s, transform .58s cubic-bezier(.4,0,.2,1) .08s, margin-top .58s cubic-bezier(.4,0,.2,1);
  }
  .wg-card.is-open .wg-flip { opacity:1; transform:none; margin-top:18px; }
  .wg-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .wg-chip { padding:7px 13px; border-radius:100px; background:#eff4fe; color:#2f63f6; font-size:clamp(12px,.92vw,14px); line-height:1.25; }
  .wg-checks { display:flex; flex-direction:column; gap:13px; }
  .wg-checks li { display:grid; grid-template-columns:22px 1fr; gap:14px; align-items:center; font-size:clamp(14px,1.05vw,16px); line-height:1.4; color:#0c1320; }
  .wg-checks svg { width:22px; height:22px; flex:0 0 auto; }
  @media (max-width:1000px) { .wg-grid { grid-template-columns:1fr; } .wg-card { min-height:480px; } }
  .wg-rise { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
  .wg-rise.is-in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .wg-rise { opacity:1; transform:none; transition:none; } }
  .wg-more {
    margin-top:auto; position:relative; z-index:2; padding-top:18px; display:inline-flex; align-items:center; gap:9px;
    background:none; border:0; cursor:pointer; font:inherit;
    font-size:clamp(14px,1.05vw,16px); font-weight:500; color:#2f63f6; align-self:flex-start;
    transition:opacity .24s ease;
  }
  .wg-more:hover { opacity:.7; }
  .wg-more svg { transition:transform .58s cubic-bezier(.4,0,.2,1); }
  .wg-card.is-open .wg-more svg { transform:rotate(180deg); }


  .mbo-field { position:relative; width:100%; aspect-ratio:1/1; max-width:680px; margin:0 auto; }
  .mbo-field > img { position:absolute; left:50%; top:49%; width:98%; transform:translate(-50%,-50%); pointer-events:none; user-select:none; }
  .mbo-orb {
    position:absolute; left:50%; top:50%; width:23%; aspect-ratio:1/1; transform:translate(-50%,-50%);
    display:flex; align-items:center; justify-content:center; text-align:center; border-radius:50%;
    background:
      radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 60%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 86%, rgba(120,160,205,.42) 92.5%, rgba(182,208,236,.16) 96.5%, rgba(112,154,206,.55) 99.2%, rgba(182,208,236,0) 100%);
    border:1px solid rgba(150,184,224,.4); backdrop-filter:blur(2px);
    font-size:clamp(12px,1.05vw,16px); font-weight:400; line-height:1.2; color:#142033; padding:8px;
    will-change:left, top, transform, opacity;
    transition:opacity .6s ease, transform .7s cubic-bezier(.34,1.3,.5,1), border-color .4s ease, box-shadow .45s ease;
  }
  .mbo-orb:hover { z-index:6; transform:translate(-50%,-50%) scale(1.16); border-color:rgba(110,152,205,.75); box-shadow:0 22px 54px rgba(70,110,170,.3); }
  @media (prefers-reduced-motion: no-preference) {
    .mbo-orb { opacity:0; transform:translate(-50%,-50%) scale(.4); }
    .mbo-orb.is-in { opacity:1; transform:translate(-50%,-50%) scale(1); }
    .mbo-orb.is-in:hover { transform:translate(-50%,-50%) scale(1.16); }
  }
  @media (max-width: 1024px) {
    .bp-nav { display:none !important; }
    .hero-pill { padding: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; gap: 10px !important; }
    .hero-burger {
      display: inline-flex !important; order: 2; margin: 0 !important;
      width: 44px !important; height: 44px !important; border-radius: 100px;
      background: rgba(255,255,255,0.42) !important;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.55) !important;
    }
    .hero-cta { order: 1; padding: 13px 20px !important; }
    .hero-menu { display: flex !important; }
  }
  @media (max-width: 900px) {
    .jt-stack { grid-template-columns: minmax(0,1fr) !important; }
    .jt-stack > * { grid-column: 1 / -1 !important; }
    .bp-grid2 { grid-template-columns:1fr !important; }
    .bp-grid3 { grid-template-columns:1fr !important; }
  }
  @media (max-width: 860px) {
    .ft-grid { grid-template-columns: 1fr !important; }
    .ft-cols { gap: 40px !important; }
  }
  @media (max-width: 560px) {
    .ft-right { padding: 24px !important; }
    .ft-bottom { flex-direction: column; align-items: flex-start !important; }
    .ft-sub { width: 100% !important; }
    .ft-badge { right: 12px !important; top: -28px !important; }
    .ft-cube { width: 72px !important; height: 72px !important; }
  }