*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue:    #0057b8;
      --dark:    #0a2540;
      --white:   #ffffff;
      --offwhite:#f7f9fc;
      --grey:    #666;
      --border:  #e4eaf4;
    }

   

    /* ══════════════════════════════════
       HERO
    ══════════════════════════════════ */
    .hero {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background: var(--dark);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .hero-overlay {
      position: relative;
      z-index: 2;
      padding: 60px 7% 52px;
      background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
      width: 100%;
    }
    .breadcrumb {
      font-size: 13px;
      color: rgba(255,255,255,.7);
      margin-bottom: 14px;
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }
    .breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
    .breadcrumb a:hover { color: #fff; }
    .breadcrumb .sep { color: rgba(255,255,255,.35); }
    .hero h1 {
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 700;
      color: #fff;
      line-height: 1.18;
      max-width: 640px;
    }
    .hero-sub {
      margin-top: 16px;
      font-size: 15px;
      color: rgba(255,255,255,.82);
      max-width: 600px;
      line-height: 1.7;
    }

    /* ══════════════════════════════════
       INTRO
    ══════════════════════════════════ */
    .intro {
      background: var(--offwhite);
      padding: 60px 7%;
      text-align: center;
    }
    .intro h2 {
      font-size: clamp(20px, 2.5vw, 28px);
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 16px;
    }
    .intro p {
      font-size: 15.5px;
      color: #444;
      max-width: 780px;
      margin: 0 auto;
      line-height: 1.75;
    }

    /* ══════════════════════════════════
       SOLUTIONS — scroll-driven
    ══════════════════════════════════ */

    /* outer wrapper — height expanded by JS */
    #solWrap {
      position: relative;
      background: var(--white);
    }

    /* section header above the sticky zone */
    .sol-header {
      padding: 64px 7% 0;
      text-align: center;
    }
    .sol-header h2 {
      font-size: clamp(20px, 2.5vw, 30px);
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 6px;
    }

    /* ── "( Keep Scrolling )" — vertical rotated label on right edge of image ── */
    .sol-keep-scrolling {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      transform-origin: center center;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 4;
      pointer-events: none;
      white-space: nowrap;
      transition: opacity .4s;
    }
    .sol-keep-scrolling span {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255,255,255,.65);
    }
    .sol-keep-scrolling .ks-line {
      display: block;
      width: 36px;
      height: 1px;
      background: rgba(255,255,255,.4);
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    .sol-keep-scrolling .ks-line::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(255,255,255,.85);
      animation: ks-sweep 1.6s ease-in-out infinite;
      transform: translateX(-100%);
    }
    @keyframes ks-sweep {
      0%   { transform: translateX(-100%); }
      60%  { transform: translateX(0%);    }
      100% { transform: translateX(100%);  }
    }
    .sol-keep-scrolling.hidden { opacity: 0; }

    /* sticky viewport */
    #solSticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
    }

    /* ── LEFT: full-bleed image panel ── */
    #solLeft {
      position: relative;
      width: 55%;
      height: 100%;
      flex-shrink: 0;
      background: var(--dark);
      overflow: hidden;
    }

    .sol-img {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .75s ease;
      will-change: opacity;
    }
    .sol-img.active { opacity: 1; }
    .sol-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      /* subtle zoom-in on entry */
      transform: scale(1.04);
      transition: transform .85s ease;
    }
    .sol-img.active img { transform: scale(1); }

    /* dark gradient right edge — blends into white panel */
    #solLeft::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, transparent 50%, rgba(10,37,64,.18) 100%);
      pointer-events: none;
      z-index: 1;
    }

    /* big ghost number watermark */
    .sol-img-num {
      position: absolute;
      bottom: 40px;
      left: 44px;
      font-size: 160px;
      font-weight: 900;
      line-height: 1;
      color: rgba(255,255,255,.07);
      letter-spacing: -6px;
      user-select: none;
      z-index: 2;
      pointer-events: none;
      font-feature-settings: 'tnum';
    }

    /* thumbnail strip at bottom */
    .sol-thumbs {
      position: absolute;
      bottom: 0;
      left: 0; right: 0;
      display: flex;
      z-index: 3;
    }
    .sol-thumb {
      flex: 1;
      height: 5px;
      background: rgba(255,255,255,.22);
      cursor: pointer;
      transition: background .25s;
      position: relative;
    }
    .sol-thumb.active { background: var(--blue); }
    .sol-thumb::after {
      content: attr(data-label);
      position: absolute;
      bottom: 100%;
      left: 0;
      padding: 4px 8px 8px;
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,.0);
      white-space: nowrap;
      transition: color .2s;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .sol-thumb:hover::after,
    .sol-thumb.active::after { color: rgba(255,255,255,.75); }

    /* ── RIGHT: text panel ── */
    #solRight {
      width: 45%;
      height: 100%;
      background: var(--white);
      position: relative;
      display: flex;
      align-items: stretch;
    }

    /* vertical progress line on far left of right panel */
    .sol-line {
      width: 3px;
      background: var(--border);
      flex-shrink: 0;
      position: relative;
    }
    .sol-line-fill {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 25%;
      background: var(--blue);
      transition: height .5s cubic-bezier(.4,0,.2,1);
      border-radius: 0 0 2px 2px;
    }

    .sol-panels {
      flex: 1;
      position: relative;
    }

    .sol-panel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      padding: 0 8% 0 7%;
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .6s ease, transform .6s ease;
      pointer-events: none;
    }
    .sol-panel.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .sol-panel-inner { max-width: 400px; }

    /* eyebrow */
    .sol-eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .sol-eyebrow-num {
      font-size: 13px;
      font-weight: 700;
      color: var(--blue);
      letter-spacing: 3px;
      text-transform: uppercase;
      line-height: 1;
    }
    .sol-eyebrow-bar {
      flex: 0 0 40px;
      height: 2px;
      background: var(--blue);
      border-radius: 2px;
    }

    .sol-panel-inner h3 {
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 700;
      color: var(--dark);
      line-height: 1.22;
      margin-bottom: 18px;
    }
    .sol-panel-inner p {
      font-size: 15px;
      color: #555;
      line-height: 1.78;
      margin-bottom: 34px;
    }
    .sol-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 30px;
      background: var(--blue);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: 6px;
      text-decoration: none;
      letter-spacing: .3px;
      transition: background .2s, gap .2s;
    }
    .sol-btn::after {
      content: '→';
      font-size: 16px;
      transition: transform .2s;
    }
    .sol-btn:hover { background: #003f8a; color: #fff; text-decoration: none !important;}
    .sol-btn:hover::after { transform: translateX(4px); }

    /* ── right-side dot nav ── */
    .sol-dots {
      position: absolute;
      right: 28px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 10;
    }
    .sol-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--border);
      border: 2px solid var(--border);
      cursor: pointer;
      transition: background .25s, border-color .25s, transform .25s;
    }
    .sol-dot.active {
      background: var(--blue);
      border-color: var(--blue);
      transform: scale(1.5);
    }

    /* ── mobile ── */
    @media (max-width: 768px) {
      #solSticky {
        position: static;
        height: auto;
        flex-direction: column;
      }
      #solLeft  { width: 100%; height: 56vw; min-height: 220px; }
      #solRight { width: 100%; height: auto; }
      .sol-panels { position: static; }
      .sol-panel {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        padding: 36px 6%;
        display: none;
      }
      .sol-panel.active { display: flex; }
      #solWrap { height: auto !important; }
      .sol-line { display: none; }
      .sol-dots { display: none; }
      .sol-header { padding-bottom: 0; }
      .sol-header .sol-scroll-hint { display: none; }
      /* mobile tab bar */
      .sol-mob-tabs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        background: #fff;
        border-bottom: 2px solid var(--border);
      }
      .sol-mob-tabs::-webkit-scrollbar { display: none; }
      .sol-mob-tab {
        flex-shrink: 0;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 600;
        color: #888;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        cursor: pointer;
        white-space: nowrap;
      }
      .sol-mob-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
    }
    @media (min-width: 769px) {
      .sol-mob-tabs { display: none; }
    }

    /* ══════════════════════════════════
       MULTI-PLATFORM COMPATIBILITY
    ══════════════════════════════════ */
    .compat-section {
      padding: 100px 80px;
      background: #f0f5fb;
      overflow: hidden;
    }
    .compat-header {
      text-align: center;
      padding: 0 7%;
    }
    .compat-header h2 {
      font-size: clamp(20px, 2.5vw, 28px);
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 12px;
    }
    .compat-header p {
      font-size: 14px;
      color: var(--grey);
      max-width: 660px;
      margin: 0 auto;
      line-height: 1.75;
    }

    .mq-outer {
      position: relative;
      overflow: hidden;
    }
    .mq-outer + .mq-outer { margin-top: 20px; }
    .mq-outer::before,
    .mq-outer::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 160px;
      z-index: 2;
      pointer-events: none;
    }
    .mq-outer::before { left:  0; background: linear-gradient(to right, #f0f5fb, transparent); }
    .mq-outer::after  { right: 0; background: linear-gradient(to left,  #f0f5fb, transparent); }

    .mq-track {
      display: flex;
      gap: 18px;
      width: max-content;
      padding: 4px 0;
    }
    .mq-track.fwd { animation: mq-fwd 32s linear infinite; }
    .mq-track.rev { animation: mq-rev 38s linear infinite; }
    .mq-track:hover { animation-play-state: paused; }

    @keyframes mq-fwd { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
    @keyframes mq-rev { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

    .cp-card {
      flex-shrink: 0;
      width: 158px;
      background: #fff;
      border-radius: 14px;
      border: 1.5px solid var(--border);
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 18px 12px 14px;
      gap: 10px;
      cursor: default;
      user-select: none;
      transition: box-shadow .22s, border-color .22s, transform .22s;
    }
    .cp-card:hover {
      box-shadow: 0 8px 28px rgba(0,87,184,.13);
      border-color: var(--blue);
      transform: translateY(-4px);
    }
    .cp-logo {
      width: 100%;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      overflow: hidden;
      background: #f8fafc;
    }
    .cp-logo img {
      width: 100%; height: 100%;
      object-fit: contain;
    }
    .cp-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--dark);
      text-align: center;
      line-height: 1.3;
    }

    /* ══════════════════════════════════
       NEWSLETTER
    ══════════════════════════════════ */
    .newsletter {
      background: var(--dark);
      color: #fff;
      padding: 72px 7%;
      text-align: center;
    }
    .newsletter h2 {
      font-size: clamp(20px, 2.5vw, 26px);
      font-weight: 700;
      margin-bottom: 10px;
    }
    .newsletter > p {
      font-size: 14.5px;
      color: rgba(255,255,255,.68);
      margin-bottom: 36px;
    }
    .nl-form {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 520px;
      margin: 0 auto;
    }
    .nl-form input {
      flex: 1 1 220px;
      padding: 13px 16px;
      border-radius: 6px;
      border: none;
      font-size: 14px;
      outline: none;
    }
    .nl-form button {
      padding: 13px 28px;
      background: var(--blue);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background .2s;
    }
    .nl-form button:hover { background: #003f8a; }
    .nl-agree {
      margin-top: 16px;
      font-size: 12px;
      color: rgba(255,255,255,.45);
    }
    .nl-agree a { color: rgba(255,255,255,.65); text-decoration: underline; }