.elementor-23323 .elementor-element.elementor-element-0c58663{--display:flex;}.elementor-23323 .elementor-element.elementor-element-26124fd{--display:flex;}.elementor-23323 .elementor-element.elementor-element-afc49e1{--display:flex;}.elementor-23323 .elementor-element.elementor-element-c0a4297{--display:flex;}.elementor-23323 .elementor-element.elementor-element-2f87d57{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-widget-text-editor{color:var( --e-global-color-text );font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-23323 .elementor-element.elementor-element-505fc88{--display:flex;}.elementor-23323 .elementor-element.elementor-element-0133dd0{--display:flex;}.elementor-23323 .elementor-element.elementor-element-bee14c9 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-23323 .elementor-element.elementor-element-bee14c9 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-23323 .elementor-element.elementor-element-196e37e{--display:flex;}.elementor-23323 .elementor-element.elementor-element-dbacd48{--display:flex;}.elementor-23323 .elementor-element.elementor-element-7e43423 .elementor-heading-title{color:#B43D3D;}.elementor-23323 .elementor-element.elementor-element-a26ea47{--display:flex;}.elementor-23323 .elementor-element.elementor-element-9fa52ec{--display:flex;}.elementor-23323 .elementor-element.elementor-element-d1dff04{--display:flex;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-23323 .elementor-element.elementor-element-1960ae1 .elementor-icon-wrapper{text-align:center;}@media(max-width:1364px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS for container, class: .elementor-element-afc49e1 */.sc-placeholder {
        background: color-mix(in srgb, currentColor 8%, transparent);
        border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
        border-radius: 2px;
        box-sizing: border-box;
        overflow: hidden;
      }
      @keyframes sc-shine {
        0% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      html.sc-dc-streaming .sc-placeholder,
      html.sc-dc-streaming .sc-interp.sc-missing {
        position: relative;
        background: color-mix(in srgb, currentColor 5%, transparent);
        border-color: transparent;
      }
      html.sc-dc-streaming .sc-placeholder::before,
      html.sc-dc-streaming .sc-interp.sc-missing::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          rgba(217, 119, 87, 0) 25%,
          rgba(247, 225, 211, 0.95) 37%,
          rgba(217, 119, 87, 0) 63%
        );
        background-size: 400% 100%;
        animation: sc-shine 1.4s ease infinite;
      }
      html.sc-dc-streaming
        .sc-placeholder:nth-child(n + 9 of .sc-placeholder)::before,
      html.sc-dc-streaming
        .sc-interp.sc-missing:nth-child(
          n + 9 of .sc-interp.sc-missing
        )::before {
        animation: none;
        background: color-mix(in srgb, currentColor 8%, transparent);
      }
      .sc-placeholder-error {
        padding: 4px 8px;
        font:
          11px/1.4 ui-monospace,
          monospace;
        color: color-mix(in srgb, currentColor 70%, transparent);
        word-break: break-word;
      }
      .sc-interp.sc-missing {
        display: inline-block;
        width: 2em;
        height: 1em;
        overflow: hidden;
        vertical-align: text-bottom;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(0, 0, 0, 0.5);
        border-radius: 2px;
        box-sizing: border-box;
        color: transparent;
        user-select: none;
      }
      .sc-interp.sc-unresolved {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        color: color-mix(in srgb, currentColor 50%, transparent);
        background: color-mix(in srgb, currentColor 10%, transparent);
        border-radius: 3px;
        padding: 0 3px;
      }
      .sc-host.sc-has-error {
        position: relative;
      }
      .sc-logic-error {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2147483647;
        max-width: 60ch;
        padding: 6px 10px;
        background: #b00020;
        color: #fff;
        font:
          12px/1.4 ui-monospace,
          monospace;
        border-radius: 4px;
        white-space: pre-wrap;
        pointer-events: none;
      }

      @media print {
        @page {
          margin: 0.5cm;
        }
        figure,
        table {
          break-inside: avoid;
        }
        #dc-root,
        #dc-root > .sc-host {
          height: auto;
        }
        *,
        *::before,
        *::after {
          print-color-adjust: exact;
          -webkit-print-color-adjust: exact;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          animation-delay: -99s !important;
          animation-duration: 0.001s !important;
          animation-iteration-count: 1 !important;
          animation-fill-mode: both !important;
          animation-play-state: running !important;
          transition-duration: 0s !important;
        }
      }

      * {
        box-sizing: border-box;
      }
      a {
        color: #1e5fd0;
      }
      a:hover {
        color: #1a52b8;
      }
      .wrap {
        font-family: "Manrope", system-ui, sans-serif;
        background: #f6f7f9;
        color: #0e1726;
        padding: 72px 24px;
        overflow-x: hidden;
      }
      .inner {
        max-width: 1040px;
        margin: 0 auto;
      }
      .topbar {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        margin-top: -72px;
        padding: 16px 24px;
        margin-bottom: 48px;
        background: #fff;
        border-bottom: 1px solid #e9ebef;
      }
      .topbarinner {
        max-width: 1600px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .logoslot {
        width: 64px;
        height: 64px;
      }
      .brandname {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.025em;
        color: #0e1726;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #e7f0fd;
        color: #1e5fd0;
        padding: 8px 15px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin: 0 0 14px;
      }
      .h2 {
        font-size: 31px;
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.12;
        margin: 0 0 12px;
      }
      .sub {
        font-size: 17px;
        line-height: 1.5;
        color: #556072;
        margin: 0 0 40px;
        max-width: 560px;
      }
      .list {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .card {
        display: flex;
        align-items: center;
        gap: 24px;
        background: #fff;
        border: 1px solid #edeef1;
        border-radius: 16px;
        padding: 24px 28px;
        text-decoration: none;
        color: inherit;
        box-shadow:
          0 1px 3px rgba(16, 24, 40, 0.04),
          0 10px 24px -14px rgba(16, 24, 40, 0.14);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }
      .icon {
        flex: none;
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: #e7f0fd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1e5fd0;
      }
      .icon svg {
        width: 26px;
        height: 26px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .body {
        flex: 1;
        min-width: 0;
      }
      .tag {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #1e5fd0;
        background: #eef4fe;
        padding: 4px 10px;
        border-radius: 999px;
        margin: 0 0 9px;
      }
      .title {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0 0 6px;
        line-height: 1.25;
      }
      .desc {
        font-size: 15px;
        line-height: 1.5;
        color: #556072;
        margin: 0;
      }
      .cta {
        flex: none;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #1e5fd0;
        white-space: nowrap;
      }
      .cta svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.18s ease;
      }
      .arrow {
        flex: none;
        color: #c3cad4;
        display: none;
      }
      .support {
        margin-top: 56px;
        background:
          radial-gradient(rgba(30, 95, 208, 0.07) 1.4px, transparent 1.5px) 0
            0/22px 22px,
          linear-gradient(120deg, #e8f0fd, #d4e2fb);
        border: 1px solid #cfdefb;
        box-shadow: 0 24px 48px -26px rgba(30, 95, 208, 0.5);
        border-radius: 20px;
        padding: 44px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        color: #0e1726;
      }
      .supicon {
        flex: none;
        width: 58px;
        height: 58px;
        border-radius: 16px;
        background: linear-gradient(160deg, #2f6fe0, #1a52b8);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12px 24px -8px rgba(30, 95, 208, 0.6);
      }
      .supicon svg {
        width: 27px;
        height: 27px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .support .body {
        flex: 1;
        min-width: 0;
      }
      .support h3 {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0 0 8px;
      }
      .support p {
        font-size: 16px;
        line-height: 1.5;
        color: #5b6472;
        margin: 0;
        max-width: 460px;
      }
      .btn {
        flex: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        background: #1e5fd0;
        color: #fff;
        padding: 15px 28px;
        border-radius: 12px;
        transition:
          transform 0.16s ease,
          background 0.16s ease;
      }
      .btn:hover {
        transform: translateY(-2px);
        background: #1a52b8;
      }
      .overlay {
        position: fixed;
        inset: 0;
        background: rgba(14, 23, 38, 0.55);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        z-index: 1000;
        animation: fade 0.18s ease;
      }
      @keyframes fade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .modal {
        background: #fff;
        border-radius: 20px;
        width: 100%;
        max-width: 460px;
        padding: 36px;
        position: relative;
        box-shadow: 0 24px 60px rgba(14, 23, 38, 0.3);
        animation: pop 0.2s ease;
      }
      @keyframes pop {
        from {
          opacity: 0;
          transform: translateY(12px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 36px;
        height: 36px;
        border: none;
        background: #f0f2f5;
        border-radius: 10px;
        cursor: pointer;
        color: #556072;
        font-size: 20px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .close:hover {
        background: #e4e7ec;
      }
      .modal h3 {
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0 0 6px;
        color: #0e1726;
      }
      .modal .lead {
        font-size: 15px;
        line-height: 1.5;
        color: #556072;
        margin: 0 0 24px;
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 16px;
      }
      .field label {
        font-size: 13px;
        font-weight: 700;
        color: #0e1726;
      }
      .field input,
      .field textarea {
        font-family: inherit;
        font-size: 15px;
        color: #0e1726;
        border: 1px solid #d7dce3;
        border-radius: 10px;
        padding: 12px 14px;
        width: 100%;
        resize: vertical;
      }
      .field input:focus,
      .field textarea:focus {
        outline: none;
        border-color: #1e5fd0;
        box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.15);
      }
      .submit {
        width: 100%;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        background: #1e5fd0;
        color: #fff;
        padding: 14px;
        border-radius: 12px;
        margin-top: 4px;
      }
      .submit:hover {
        background: #1a52b8;
      }
      .alt {
        display: flex;
        gap: 20px;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid #eceef1;
      }
      .alt a {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #556072;
        text-decoration: none;
      }
      .alt a:hover {
        color: #1e5fd0;
      }
      .alt svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .done {
        text-align: center;
        padding: 12px 0;
      }
      .done .check {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #e7f0fd;
        color: #1e5fd0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
      }
      .done .check svg {
        width: 32px;
        height: 32px;
        stroke: currentColor;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .faq {
        margin-top: 56px;
      }
      .faqhead {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0 0 20px;
        color: #0e1726;
      }
      .faq .h2 {
        margin-bottom: 22px;
      }
      .faqlist {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .qa {
        background: #fff;
        border: 1px solid #edeef1;
        border-radius: 14px;
        overflow: hidden;
        box-shadow:
          0 1px 3px rgba(16, 24, 40, 0.04),
          0 10px 24px -14px rgba(16, 24, 40, 0.12);
      }
      .q {
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 24px;
        font-size: 17px;
        font-weight: 700;
        color: #0e1726;
        transition: background 0.16s ease;
      }
      .q:hover {
        background: #fafbfc;
      }
      .q .chev {
        flex: none;
        width: 22px;
        height: 22px;
        stroke: #1e5fd0;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s ease;
      }
      .qa.on .chev {
        transform: rotate(180deg);
      }
      .a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
      }
      .qa.on .a {
        max-height: 420px;
      }
      .a p {
        margin: 0;
        padding: 0 24px 22px;
        font-size: 15px;
        line-height: 1.55;
        color: #556072;
      }
      .guides {
        margin-bottom: 64px;
      }
      .gcards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .gcard {
        background: #fff;
        border: 1px solid #e9ebef;
        border-radius: 18px;
        padding: 26px 24px 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        text-decoration: none;
        color: inherit;
        box-shadow:
          0 1px 2px rgba(16, 24, 40, 0.04),
          0 12px 26px -16px rgba(16, 24, 40, 0.16);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }
      .gcard:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 38px -14px rgba(30, 95, 208, 0.28);
        border-color: #c9dcfb;
      }
      .gnum {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: #eef4fe;
        color: #1e5fd0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.18s ease,
          color 0.18s ease;
      }
      .gcard:hover .gnum {
        background: #1e5fd0;
        color: #fff;
      }
      .gnum svg {
        width: 23px;
        height: 23px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .gtitle {
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -0.015em;
        margin: 0;
        line-height: 1.22;
        color: #0e1726;
      }
      .gpre {
        display: block;
        font-family: "Newsreader", Georgia, serif;
        font-weight: 500;
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 0.01em;
        color: #8b94a3;
        margin-bottom: 2px;
      }
      .gdesc {
        font-size: 14px;
        line-height: 1.5;
        color: #5b6472;
        margin: 0;
        flex: 1;
      }
      .glink {
        font-size: 14px;
        font-weight: 700;
        color: #1e5fd0;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 2px;
      }
      .glink svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.18s ease;
      }
      .gcard:hover .glink svg {
        transform: translateX(3px);
      }
      @media (max-width: 760px) {
        .gcards {
          grid-template-columns: 1fr;
        }
      }
      .webinars {
        margin-bottom: 64px;
      }
      .weblist {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .web {
        display: flex;
        align-items: center;
        gap: 24px;
        background: #fff;
        border: 1px solid #edeef1;
        border-radius: 16px;
        padding: 20px 24px;
        box-shadow:
          0 1px 3px rgba(16, 24, 40, 0.04),
          0 10px 24px -14px rgba(16, 24, 40, 0.14);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }
      .web:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(14, 23, 38, 0.08);
        border-color: #1e5fd0;
      }
      .webdate {
        flex: none;
        width: 72px;
        height: 72px;
        border-radius: 14px;
        background: linear-gradient(160deg, #2f6fe0, #1a52b8);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-shadow: 0 8px 18px -8px rgba(30, 95, 208, 0.55);
      }
      .webday {
        font-size: 26px;
        font-weight: 800;
      }
      .webmon {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 3px;
        color: #cfe0fb;
      }
      .webbody {
        flex: 1;
        min-width: 0;
      }
      .webmeta {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 600;
        color: #9aa3b1;
        margin: 0 0 6px;
      }
      .webchip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #e7f0fd;
        color: #1e5fd0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
      }
      .webtimewrap {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .webmeta svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .webtitle {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
        line-height: 1.25;
        color: #0e1726;
      }
      .webdesc {
        font-size: 14px;
        line-height: 1.5;
        color: #556072;
        margin: 5px 0 0;
        max-width: 560px;
      }
      .webbtn {
        flex: none;
        border: 1px solid #1e5fd0;
        background: #fff;
        cursor: pointer;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        color: #1e5fd0;
        padding: 11px 22px;
        border-radius: 11px;
        text-decoration: none;
        white-space: nowrap;
        transition:
          background 0.16s ease,
          color 0.16s ease;
      }
      .webbtn:hover {
        background: #1e5fd0;
        color: #fff;
      }
      @media (max-width: 640px) {
        .web {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }
        .webbtn {
          align-self: stretch;
          text-align: center;
        }
      }
      .films {
        margin-top: 56px;
      }
      .filmtabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 26px;
      }
      .filmtab {
        border: 1px solid #dfe3e8;
        background: #fff;
        color: #556072;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 18px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition:
          background 0.16s ease,
          border-color 0.16s ease,
          color 0.16s ease;
      }
      .filmtab:hover {
        border-color: #1e5fd0;
        color: #1e5fd0;
      }
      .filmtab.on {
        background: #1e5fd0;
        border-color: #1e5fd0;
        color: #fff;
      }
      .filmrow {
        margin-top: 0;
        position: relative;
      }
      .filmtrackwrap {
        position: relative;
      }
      .filmfade {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 10px;
        width: 72px;
        background: linear-gradient(
          to right,
          rgba(246, 247, 249, 0),
          #f6f7f9 88%
        );
        pointer-events: none;
        z-index: 2;
      }
      .filmrowhead {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 22px;
      }
      .filmarrows {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .filmcount {
        font-size: 14px;
        font-weight: 700;
        color: #556072;
        min-width: 54px;
        text-align: center;
      }
      .filmarrow {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        border: none;
        background: #1e5fd0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(30, 95, 208, 0.32);
        transition:
          background 0.16s ease,
          transform 0.16s ease;
      }
      .filmarrow:hover {
        background: #1a52b8;
        transform: translateY(-1px);
      }
      .filmarrow:active {
        transform: translateY(0);
      }
      .filmarrow svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2.4;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .filmtrack {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 2px 2px 8px;
        scrollbar-width: none;
      }
      .filmtrack::-webkit-scrollbar {
        display: none;
      }
      .film {
        flex: 0 0 300px;
        scroll-snap-align: start;
        background: #fff;
        border: 1px solid #edeef1;
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        box-shadow:
          0 1px 3px rgba(16, 24, 40, 0.04),
          0 10px 24px -14px rgba(16, 24, 40, 0.14);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }
      .film:hover .filmplay {
        transform: scale(1.1);
      }
      .film:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(14, 23, 38, 0.08);
        border-color: #1e5fd0;
      }
      .filmposter {
        position: relative;
        aspect-ratio: 16/9;
        background: radial-gradient(circle at 50% 40%, #e6effb 0%, #c4d8f2 72%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .filmthumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .filmposter.solid {
        background: radial-gradient(circle at 50% 40%, #e6effb 0%, #c4d8f2 72%);
      }
      .filmtagbadge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #fff;
        color: #1e5fd0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 6px 12px;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(20, 40, 80, 0.16);
      }
      .filmposter iframe,
      .filmposter video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
      }
      .filmplay {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 6px 18px rgba(20, 40, 80, 0.22),
          0 0 0 6px rgba(255, 255, 255, 0.35);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease;
      }
      .film:hover .filmplay {
        transform: scale(1.1);
        box-shadow:
          0 10px 24px rgba(20, 40, 80, 0.28),
          0 0 0 9px rgba(255, 255, 255, 0.42);
      }
      .filmplay svg {
        width: 22px;
        height: 22px;
        fill: #1e5fd0;
        margin-left: 3px;
      }
      .filmdur {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(14, 23, 38, 0.8);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 6px;
      }
      .filmbody {
        padding: 18px 20px;
      }
      .filmtag {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #9aa3b1;
        margin: 0 0 5px;
      }
      .filmtitle {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
        line-height: 1.3;
        color: #0e1726;
      }
      @media (max-width: 760px) {
        .film {
          flex: 0 0 78%;
        }
      }
      .intro {
        margin-bottom: 72px;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        padding: 0 24px;
      }
      .introwrap {
        max-width: 1280px;
        margin: 0 auto;
        position: relative;
      }
      .introdots {
        position: absolute;
        top: -38px;
        bottom: -38px;
        right: -34px;
        left: 52%;
        z-index: 0;
        background: radial-gradient(#c2ccd9 1.5px, transparent 1.6px) 0 0/17px
          17px;
        pointer-events: none;
      }
      .introbox {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.2fr);
        gap: 0;
        background: linear-gradient(
          120deg,
          #3a7ea8 0%,
          #6aa8cd 52%,
          #b6d8ec 100%
        );
        background-size: 180% 180%;
        background-position: 0% 50%;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 32px 80px rgba(43, 106, 144, 0.32);
        animation: introShift 22s ease-in-out infinite;
      }
      @keyframes introShift {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .introbox {
          animation: none;
        }
      }
      .introleft {
        padding: 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
      }
      .introleft .eyebrow {
        display: inline-flex;
        background: transparent;
        padding: 0;
        color: #fff;
        font-size: clamp(38px, 4.2vw, 56px);
        font-weight: 800;
        letter-spacing: -0.025em;
        text-transform: none;
        line-height: 1.05;
        margin-bottom: 22px;
        overflow-wrap: break-word;
        word-break: break-word;
      }
      .introleft .eyebrow::before {
        display: none;
      }
      .introleft h2 {
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.12;
        margin: 0 0 18px;
      }
      .introleft p {
        font-size: 21px;
        line-height: 1.6;
        color: #d6e4fb;
        margin: 0;
      }
      .introright {
        position: relative;
        min-height: 520px;
        padding: 56px;
        display: flex;
        align-items: center;
      }
      .introright .video {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
      }
      @media (max-width: 900px) {
        .introright {
          min-height: 0;
          padding: 28px;
        }
        .introleft {
          padding: 40px;
        }
        .introleft h2 {
          font-size: 30px;
        }
      }
      @media (max-width: 900px) {
        .introbox {
          grid-template-columns: 1fr;
        }
        .introleft {
          padding: 36px;
        }
      }
      .video {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 20px;
        overflow: hidden;
        background: #0e1726;
        box-shadow: 0 20px 50px rgba(14, 23, 38, 0.18);
      }
      .video iframe,
      .video video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
      }
      .poster {
        position: absolute;
        inset: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(circle at 22% 25%, #3a7bff 0%, transparent 46%),
          radial-gradient(circle at 82% 28%, #18b6cc 0%, transparent 44%),
          radial-gradient(circle at 65% 88%, #7857f0 0%, transparent 52%),
          linear-gradient(135deg, #16255a, #0e1b3c);
        background-size: 170% 170%;
        animation: posterFloat 16s ease-in-out infinite;
      }
      @keyframes posterFloat {
        0% {
          background-position: 0% 0%;
        }
        50% {
          background-position: 100% 100%;
        }
        100% {
          background-position: 0% 0%;
        }
      }
      .play {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: #1e5fd0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 30px rgba(30, 95, 208, 0.5);
        transition: transform 0.18s ease;
      }
      .poster:hover .play {
        transform: scale(1.08);
      }
      .play svg {
        width: 34px;
        height: 34px;
        fill: #fff;
        margin-left: 4px;
      }
      .postertxt {
        position: absolute;
        bottom: 22px;
        left: 0;
        right: 0;
        font-family: "Manrope", monospace;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #8794a8;
      }
      @media (max-width: 640px) {
        .h2 {
          font-size: 30px;
        }
        .card {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
          padding: 22px;
        }
        .cta {
          align-self: flex-start;
        }
        .support {
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          padding: 32px;
        }
        .support .btn {
          align-self: stretch;
        }
      }
      .intro {
        margin-bottom: 56px;
      }
      .guides {
        margin: 0;
      }
      .webinars,
      .tipsec,
      .films,
      .faq,
      .support {
        margin-top: 56px;
        padding-top: 56px;
        border-top: 1px solid #e6e9ed;
      }
      .footer {
        margin-top: 56px;
        padding-top: 32px;
        border-top: 1px solid #e6e9ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
      }
      .footbrand {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #0e1726;
      }
      .footlink {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #1e5fd0;
        text-decoration: none;
      }
      .footlink svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.18s ease;
      }
      .footlink:hover svg {
        transform: translateX(3px);
      }
      @media (max-width: 600px) {
        .wrap {
          padding: 36px 16px;
        }
        .h2 {
          font-size: 26px;
        }
        .sub {
          font-size: 16px;
          margin-bottom: 28px;
        }
        .eyebrow {
          font-size: 12px;
          margin-bottom: 12px;
        }
        .intro {
          margin-bottom: 40px;
          padding: 0 16px;
        }
        .introdots {
          display: none;
        }
        .topbar {
          padding: 12px 16px;
          margin-top: -36px;
          margin-bottom: 32px;
        }
        .introbox {
          border-radius: 20px;
          box-shadow: 0 18px 44px rgba(30, 95, 208, 0.26);
        }
        .introleft {
          padding: 32px 24px;
        }
        .introleft .eyebrow {
          font-size: 32px;
          margin-bottom: 16px;
        }
        .introleft p {
          font-size: 17px;
          line-height: 1.55;
        }
        .introright {
          padding: 0 24px 32px;
        }
        .webinars,
        .tipsec,
        .films,
        .faq,
        .support {
          margin-top: 40px;
          padding-top: 40px;
        }
        .gcard {
          padding: 22px;
        }
        .web {
          padding: 18px;
        }
        .webdate {
          width: 60px;
          height: 60px;
        }
        .webday {
          font-size: 22px;
        }
        .webtitle,
        .gtitle,
        .filmtitle {
          font-size: 17px;
        }
        .card {
          padding: 20px;
        }
        .title {
          font-size: 18px;
        }
        .faqhead,
        .support h3 {
          font-size: 22px;
        }
        .q {
          padding: 16px 18px;
          font-size: 15px;
        }
        .a p {
          padding: 0 18px 18px;
        }
        .support {
          padding: 28px 22px;
          border-radius: 16px;
        }
        .support p {
          font-size: 15px;
        }
        .filmtab {
          padding: 9px 15px;
          font-size: 13px;
        }
        .filmtabs {
          flex-wrap: nowrap;
          overflow-x: auto;
          scrollbar-width: none;
          margin-left: -16px;
          margin-right: -16px;
          padding: 0 16px 4px;
        }
        .filmtabs::-webkit-scrollbar {
          display: none;
        }
        .filmtab {
          flex: none;
        }
        .modal {
          padding: 28px 22px;
        }
        .brandname {
          font-size: 20px;
        }
        .logoslot {
          width: 48px;
          height: 48px;
        }
        .footer {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          padding-top: 28px;
        }
        .supicon {
          width: 50px;
          height: 50px;
        }
        .supicon svg {
          width: 24px;
          height: 24px;
        }
      }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-26124fd */.sc-placeholder {
        background: color-mix(in srgb, currentColor 8%, transparent);
        border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
        border-radius: 2px;
        box-sizing: border-box;
        overflow: hidden;
      }
      @keyframes sc-shine {
        0% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      html.sc-dc-streaming .sc-placeholder,
      html.sc-dc-streaming .sc-interp.sc-missing {
        position: relative;
        background: color-mix(in srgb, currentColor 5%, transparent);
        border-color: transparent;
      }
      html.sc-dc-streaming .sc-placeholder::before,
      html.sc-dc-streaming .sc-interp.sc-missing::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          rgba(217, 119, 87, 0) 25%,
          rgba(247, 225, 211, 0.95) 37%,
          rgba(217, 119, 87, 0) 63%
        );
        background-size: 400% 100%;
        animation: sc-shine 1.4s ease infinite;
      }
      html.sc-dc-streaming
        .sc-placeholder:nth-child(n + 9 of .sc-placeholder)::before,
      html.sc-dc-streaming
        .sc-interp.sc-missing:nth-child(
          n + 9 of .sc-interp.sc-missing
        )::before {
        animation: none;
        background: color-mix(in srgb, currentColor 8%, transparent);
      }
      .sc-placeholder-error {
        padding: 4px 8px;
        font:
          11px/1.4 ui-monospace,
          monospace;
        color: color-mix(in srgb, currentColor 70%, transparent);
        word-break: break-word;
      }
      .sc-interp.sc-missing {
        display: inline-block;
        width: 2em;
        height: 1em;
        overflow: hidden;
        vertical-align: text-bottom;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(0, 0, 0, 0.5);
        border-radius: 2px;
        box-sizing: border-box;
        color: transparent;
        user-select: none;
      }
      .sc-interp.sc-unresolved {
        font-family: ui-monospace, monospace;
        font-size: 0.85em;
        color: color-mix(in srgb, currentColor 50%, transparent);
        background: color-mix(in srgb, currentColor 10%, transparent);
        border-radius: 3px;
        padding: 0 3px;
      }
      .sc-host.sc-has-error {
        position: relative;
      }
      .sc-logic-error {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2147483647;
        max-width: 60ch;
        padding: 6px 10px;
        background: #b00020;
        color: #fff;
        font:
          12px/1.4 ui-monospace,
          monospace;
        border-radius: 4px;
        white-space: pre-wrap;
        pointer-events: none;
      }

      @media print {
        @page {
          margin: 0.5cm;
        }
        figure,
        table {
          break-inside: avoid;
        }
        #dc-root,
        #dc-root > .sc-host {
          height: auto;
        }
        *,
        *::before,
        *::after {
          print-color-adjust: exact;
          -webkit-print-color-adjust: exact;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          animation-delay: -99s !important;
          animation-duration: 0.001s !important;
          animation-iteration-count: 1 !important;
          animation-fill-mode: both !important;
          animation-play-state: running !important;
          transition-duration: 0s !important;
        }
      }

      * {
        box-sizing: border-box;
      }
      a {
        color: #1e5fd0;
      }
      a:hover {
        color: #1a52b8;
      }
      .wrap {
        font-family: "Manrope", system-ui, sans-serif;
        background: #f6f7f9;
        color: #0e1726;
        padding: 72px 24px;
        overflow-x: hidden;
      }
      .inner {
        max-width: 1040px;
        margin: 0 auto;
      }
      .topbar {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        margin-top: -72px;
        padding: 16px 24px;
        margin-bottom: 48px;
        background: #fff;
        border-bottom: 1px solid #e9ebef;
      }
      .topbarinner {
        max-width: 1600px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .logoslot {
        width: 64px;
        height: 64px;
      }
      .brandname {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.025em;
        color: #0e1726;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #e7f0fd;
        color: #1e5fd0;
        padding: 8px 15px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin: 0 0 14px;
      }
      .h2 {
        font-size: 31px;
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.12;
        margin: 0 0 12px;
      }
      .sub {
        font-size: 17px;
        line-height: 1.5;
        color: #556072;
        margin: 0 0 40px;
        max-width: 560px;
      }
      .list {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .card {
        display: flex;
        align-items: center;
        gap: 24px;
        background: #fff;
        border: 1px solid #edeef1;
        border-radius: 16px;
        padding: 24px 28px;
        text-decoration: none;
        color: inherit;
        box-shadow:
          0 1px 3px rgba(16, 24, 40, 0.04),
          0 10px 24px -14px rgba(16, 24, 40, 0.14);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }
      .icon {
        flex: none;
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: #e7f0fd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1e5fd0;
      }
      .icon svg {
        width: 26px;
        height: 26px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .body {
        flex: 1;
        min-width: 0;
      }
      .tag {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #1e5fd0;
        background: #eef4fe;
        padding: 4px 10px;
        border-radius: 999px;
        margin: 0 0 9px;
      }
      .title {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0 0 6px;
        line-height: 1.25;
      }
      .desc {
        font-size: 15px;
        line-height: 1.5;
        color: #556072;
        margin: 0;
      }
      .cta {
        flex: none;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #1e5fd0;
        white-space: nowrap;
      }
      .cta svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.18s ease;
      }
      .arrow {
        flex: none;
        color: #c3cad4;
        display: none;
      }
      .support {
        margin-top: 56px;
        background:
          radial-gradient(rgba(30, 95, 208, 0.07) 1.4px, transparent 1.5px) 0
            0/22px 22px,
          linear-gradient(120deg, #e8f0fd, #d4e2fb);
        border: 1px solid #cfdefb;
        box-shadow: 0 24px 48px -26px rgba(30, 95, 208, 0.5);
        border-radius: 20px;
        padding: 44px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        color: #0e1726;
      }
      .supicon {
        flex: none;
        width: 58px;
        height: 58px;
        border-radius: 16px;
        background: linear-gradient(160deg, #2f6fe0, #1a52b8);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12px 24px -8px rgba(30, 95, 208, 0.6);
      }
      .supicon svg {
        width: 27px;
        height: 27px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .support .body {
        flex: 1;
        min-width: 0;
      }
      .support h3 {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0 0 8px;
      }
      .support p {
        font-size: 16px;
        line-height: 1.5;
        color: #5b6472;
        margin: 0;
        max-width: 460px;
      }
      .btn {
        flex: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        background: #1e5fd0;
        color: #fff;
        padding: 15px 28px;
        border-radius: 12px;
        transition:
          transform 0.16s ease,
          background 0.16s ease;
      }
      .btn:hover {
        transform: translateY(-2px);
        background: #1a52b8;
      }
      .overlay {
        position: fixed;
        inset: 0;
        background: rgba(14, 23, 38, 0.55);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        z-index: 1000;
        animation: fade 0.18s ease;
      }
      @keyframes fade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      .modal {
        background: #fff;
        border-radius: 20px;
        width: 100%;
        max-width: 460px;
        padding: 36px;
        position: relative;
        box-shadow: 0 24px 60px rgba(14, 23, 38, 0.3);
        animation: pop 0.2s ease;
      }
      @keyframes pop {
        from {
          opacity: 0;
          transform: translateY(12px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 36px;
        height: 36px;
        border: none;
        background: #f0f2f5;
        border-radius: 10px;
        cursor: pointer;
        color: #556072;
        font-size: 20px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .close:hover {
        background: #e4e7ec;
      }
      .modal h3 {
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0 0 6px;
        color: #0e1726;
      }
      .modal .lead {
        font-size: 15px;
        line-height: 1.5;
        color: #556072;
        margin: 0 0 24px;
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 16px;
      }
      .field label {
        font-size: 13px;
        font-weight: 700;
        color: #0e1726;
      }
      .field input,
      .field textarea {
        font-family: inherit;
        font-size: 15px;
        color: #0e1726;
        border: 1px solid #d7dce3;
        border-radius: 10px;
        padding: 12px 14px;
        width: 100%;
        resize: vertical;
      }
      .field input:focus,
      .field textarea:focus {
        outline: none;
        border-color: #1e5fd0;
        box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.15);
      }
      .submit {
        width: 100%;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        background: #1e5fd0;
        color: #fff;
        padding: 14px;
        border-radius: 12px;
        margin-top: 4px;
      }
      .submit:hover {
        background: #1a52b8;
      }
      .alt {
        display: flex;
        gap: 20px;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid #eceef1;
      }
      .alt a {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #556072;
        text-decoration: none;
      }
      .alt a:hover {
        color: #1e5fd0;
      }
      .alt svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .done {
        text-align: center;
        padding: 12px 0;
      }
      .done .check {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #e7f0fd;
        color: #1e5fd0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
      }
      .done .check svg {
        width: 32px;
        height: 32px;
        stroke: currentColor;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .faq {
        margin-top: 56px;
      }
      .faqhead {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0 0 20px;
        color: #0e1726;
      }
      .faq .h2 {
        margin-bottom: 22px;
      }
      .faqlist {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .qa {
        background: #fff;
        border: 1px solid #edeef1;
        border-radius: 14px;
        overflow: hidden;
        box-shadow:
          0 1px 3px rgba(16, 24, 40, 0.04),
          0 10px 24px -14px rgba(16, 24, 40, 0.12);
      }
      .q {
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 24px;
        font-size: 17px;
        font-weight: 700;
        color: #0e1726;
        transition: background 0.16s ease;
      }
      .q:hover {
        background: #fafbfc;
      }
      .q .chev {
        flex: none;
        width: 22px;
        height: 22px;
        stroke: #1e5fd0;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s ease;
      }
      .qa.on .chev {
        transform: rotate(180deg);
      }
      .a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
      }
      .qa.on .a {
        max-height: 420px;
      }
      .a p {
        margin: 0;
        padding: 0 24px 22px;
        font-size: 15px;
        line-height: 1.55;
        color: #556072;
      }
      .guides {
        margin-bottom: 64px;
      }
      .gcards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .gcard {
        background: #fff;
        border: 1px solid #e9ebef;
        border-radius: 18px;
        padding: 26px 24px 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        text-decoration: none;
        color: inherit;
        box-shadow:
          0 1px 2px rgba(16, 24, 40, 0.04),
          0 12px 26px -16px rgba(16, 24, 40, 0.16);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }
      .gcard:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 38px -14px rgba(30, 95, 208, 0.28);
        border-color: #c9dcfb;
      }
      .gnum {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: #eef4fe;
        color: #1e5fd0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.18s ease,
          color 0.18s ease;
      }
      .gcard:hover .gnum {
        background: #1e5fd0;
        color: #fff;
      }
      .gnum svg {
        width: 23px;
        height: 23px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .gtitle {
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -0.015em;
        margin: 0;
        line-height: 1.22;
        color: #0e1726;
      }
      .gpre {
        display: block;
        font-family: "Newsreader", Georgia, serif;
        font-weight: 500;
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 0.01em;
        color: #8b94a3;
        margin-bottom: 2px;
      }
      .gdesc {
        font-size: 14px;
        line-height: 1.5;
        color: #5b6472;
        margin: 0;
        flex: 1;
      }
      .glink {
        font-size: 14px;
        font-weight: 700;
        color: #1e5fd0;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 2px;
      }
      .glink svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.18s ease;
      }
      .gcard:hover .glink svg {
        transform: translateX(3px);
      }
      @media (max-width: 760px) {
        .gcards {
          grid-template-columns: 1fr;
        }
      }
      .webinars {
        margin-bottom: 64px;
      }
      .weblist {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .web {
        display: flex;
        align-items: center;
        gap: 24px;
        background: #fff;
        border: 1px solid #edeef1;
        border-radius: 16px;
        padding: 20px 24px;
        box-shadow:
          0 1px 3px rgba(16, 24, 40, 0.04),
          0 10px 24px -14px rgba(16, 24, 40, 0.14);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }
      .web:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(14, 23, 38, 0.08);
        border-color: #1e5fd0;
      }
      .webdate {
        flex: none;
        width: 72px;
        height: 72px;
        border-radius: 14px;
        background: linear-gradient(160deg, #2f6fe0, #1a52b8);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-shadow: 0 8px 18px -8px rgba(30, 95, 208, 0.55);
      }
      .webday {
        font-size: 26px;
        font-weight: 800;
      }
      .webmon {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 3px;
        color: #cfe0fb;
      }
      .webbody {
        flex: 1;
        min-width: 0;
      }
      .webmeta {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 600;
        color: #9aa3b1;
        margin: 0 0 6px;
      }
      .webchip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #e7f0fd;
        color: #1e5fd0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
      }
      .webtimewrap {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .webmeta svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .webtitle {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
        line-height: 1.25;
        color: #0e1726;
      }
      .webdesc {
        font-size: 14px;
        line-height: 1.5;
        color: #556072;
        margin: 5px 0 0;
        max-width: 560px;
      }
      .webbtn {
        flex: none;
        border: 1px solid #1e5fd0;
        background: #fff;
        cursor: pointer;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        color: #1e5fd0;
        padding: 11px 22px;
        border-radius: 11px;
        text-decoration: none;
        white-space: nowrap;
        transition:
          background 0.16s ease,
          color 0.16s ease;
      }
      .webbtn:hover {
        background: #1e5fd0;
        color: #fff;
      }
      @media (max-width: 640px) {
        .web {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }
        .webbtn {
          align-self: stretch;
          text-align: center;
        }
      }
      .films {
        margin-top: 56px;
      }
      .filmtabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 26px;
      }
      .filmtab {
        border: 1px solid #dfe3e8;
        background: #fff;
        color: #556072;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 18px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition:
          background 0.16s ease,
          border-color 0.16s ease,
          color 0.16s ease;
      }
      .filmtab:hover {
        border-color: #1e5fd0;
        color: #1e5fd0;
      }
      .filmtab.on {
        background: #1e5fd0;
        border-color: #1e5fd0;
        color: #fff;
      }
      .filmrow {
        margin-top: 0;
        position: relative;
      }
      .filmtrackwrap {
        position: relative;
      }
      .filmfade {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 10px;
        width: 72px;
        background: linear-gradient(
          to right,
          rgba(246, 247, 249, 0),
          #f6f7f9 88%
        );
        pointer-events: none;
        z-index: 2;
      }
      .filmrowhead {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 22px;
      }
      .filmarrows {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .filmcount {
        font-size: 14px;
        font-weight: 700;
        color: #556072;
        min-width: 54px;
        text-align: center;
      }
      .filmarrow {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        border: none;
        background: #1e5fd0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(30, 95, 208, 0.32);
        transition:
          background 0.16s ease,
          transform 0.16s ease;
      }
      .filmarrow:hover {
        background: #1a52b8;
        transform: translateY(-1px);
      }
      .filmarrow:active {
        transform: translateY(0);
      }
      .filmarrow svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2.4;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .filmtrack {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 2px 2px 8px;
        scrollbar-width: none;
      }
      .filmtrack::-webkit-scrollbar {
        display: none;
      }
      .film {
        flex: 0 0 300px;
        scroll-snap-align: start;
        background: #fff;
        border: 1px solid #edeef1;
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        box-shadow:
          0 1px 3px rgba(16, 24, 40, 0.04),
          0 10px 24px -14px rgba(16, 24, 40, 0.14);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease;
      }
      .film:hover .filmplay {
        transform: scale(1.1);
      }
      .film:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(14, 23, 38, 0.08);
        border-color: #1e5fd0;
      }
      .filmposter {
        position: relative;
        aspect-ratio: 16/9;
        background: radial-gradient(circle at 50% 40%, #e6effb 0%, #c4d8f2 72%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .filmthumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .filmposter.solid {
        background: radial-gradient(circle at 50% 40%, #e6effb 0%, #c4d8f2 72%);
      }
      .filmtagbadge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #fff;
        color: #1e5fd0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 6px 12px;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(20, 40, 80, 0.16);
      }
      .filmposter iframe,
      .filmposter video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
      }
      .filmplay {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 6px 18px rgba(20, 40, 80, 0.22),
          0 0 0 6px rgba(255, 255, 255, 0.35);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease;
      }
      .film:hover .filmplay {
        transform: scale(1.1);
        box-shadow:
          0 10px 24px rgba(20, 40, 80, 0.28),
          0 0 0 9px rgba(255, 255, 255, 0.42);
      }
      .filmplay svg {
        width: 22px;
        height: 22px;
        fill: #1e5fd0;
        margin-left: 3px;
      }
      .filmdur {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(14, 23, 38, 0.8);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 6px;
      }
      .filmbody {
        padding: 18px 20px;
      }
      .filmtag {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #9aa3b1;
        margin: 0 0 5px;
      }
      .filmtitle {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0;
        line-height: 1.3;
        color: #0e1726;
      }
      @media (max-width: 760px) {
        .film {
          flex: 0 0 78%;
        }
      }
      .intro {
        margin-bottom: 72px;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        padding: 0 24px;
      }
      .introwrap {
        max-width: 1280px;
        margin: 0 auto;
        position: relative;
      }
      .introdots {
        position: absolute;
        top: -38px;
        bottom: -38px;
        right: -34px;
        left: 52%;
        z-index: 0;
        background: radial-gradient(#c2ccd9 1.5px, transparent 1.6px) 0 0/17px
          17px;
        pointer-events: none;
      }
      .introbox {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.2fr);
        gap: 0;
        background: linear-gradient(
          120deg,
          #3a7ea8 0%,
          #6aa8cd 52%,
          #b6d8ec 100%
        );
        background-size: 180% 180%;
        background-position: 0% 50%;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 32px 80px rgba(43, 106, 144, 0.32);
        animation: introShift 22s ease-in-out infinite;
      }
      @keyframes introShift {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .introbox {
          animation: none;
        }
      }
      .introleft {
        padding: 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
      }
      .introleft .eyebrow {
        display: inline-flex;
        background: transparent;
        padding: 0;
        color: #fff;
        font-size: clamp(38px, 4.2vw, 56px);
        font-weight: 800;
        letter-spacing: -0.025em;
        text-transform: none;
        line-height: 1.05;
        margin-bottom: 22px;
        overflow-wrap: break-word;
        word-break: break-word;
      }
      .introleft .eyebrow::before {
        display: none;
      }
      .introleft h2 {
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.12;
        margin: 0 0 18px;
      }
      .introleft p {
        font-size: 21px;
        line-height: 1.6;
        color: #d6e4fb;
        margin: 0;
      }
      .introright {
        position: relative;
        min-height: 520px;
        padding: 56px;
        display: flex;
        align-items: center;
      }
      .introright .video {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
      }
      @media (max-width: 900px) {
        .introright {
          min-height: 0;
          padding: 28px;
        }
        .introleft {
          padding: 40px;
        }
        .introleft h2 {
          font-size: 30px;
        }
      }
      @media (max-width: 900px) {
        .introbox {
          grid-template-columns: 1fr;
        }
        .introleft {
          padding: 36px;
        }
      }
      .video {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 20px;
        overflow: hidden;
        background: #0e1726;
        box-shadow: 0 20px 50px rgba(14, 23, 38, 0.18);
      }
      .video iframe,
      .video video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
      }
      .poster {
        position: absolute;
        inset: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(circle at 22% 25%, #3a7bff 0%, transparent 46%),
          radial-gradient(circle at 82% 28%, #18b6cc 0%, transparent 44%),
          radial-gradient(circle at 65% 88%, #7857f0 0%, transparent 52%),
          linear-gradient(135deg, #16255a, #0e1b3c);
        background-size: 170% 170%;
        animation: posterFloat 16s ease-in-out infinite;
      }
      @keyframes posterFloat {
        0% {
          background-position: 0% 0%;
        }
        50% {
          background-position: 100% 100%;
        }
        100% {
          background-position: 0% 0%;
        }
      }
      .play {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: #1e5fd0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 30px rgba(30, 95, 208, 0.5);
        transition: transform 0.18s ease;
      }
      .poster:hover .play {
        transform: scale(1.08);
      }
      .play svg {
        width: 34px;
        height: 34px;
        fill: #fff;
        margin-left: 4px;
      }
      .postertxt {
        position: absolute;
        bottom: 22px;
        left: 0;
        right: 0;
        font-family: "Manrope", monospace;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #8794a8;
      }
      @media (max-width: 640px) {
        .h2 {
          font-size: 30px;
        }
        .card {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
          padding: 22px;
        }
        .cta {
          align-self: flex-start;
        }
        .support {
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          padding: 32px;
        }
        .support .btn {
          align-self: stretch;
        }
      }
      .intro {
        margin-bottom: 56px;
      }
      .guides {
        margin: 0;
      }
      .webinars,
      .tipsec,
      .films,
      .faq,
      .support {
        margin-top: 56px;
        padding-top: 56px;
        border-top: 1px solid #e6e9ed;
      }
      .footer {
        margin-top: 56px;
        padding-top: 32px;
        border-top: 1px solid #e6e9ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
      }
      .footbrand {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #0e1726;
      }
      .footlink {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #1e5fd0;
        text-decoration: none;
      }
      .footlink svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.18s ease;
      }
      .footlink:hover svg {
        transform: translateX(3px);
      }
      @media (max-width: 600px) {
        .wrap {
          padding: 36px 16px;
        }
        .h2 {
          font-size: 26px;
        }
        .sub {
          font-size: 16px;
          margin-bottom: 28px;
        }
        .eyebrow {
          font-size: 12px;
          margin-bottom: 12px;
        }
        .intro {
          margin-bottom: 40px;
          padding: 0 16px;
        }
        .introdots {
          display: none;
        }
        .topbar {
          padding: 12px 16px;
          margin-top: -36px;
          margin-bottom: 32px;
        }
        .introbox {
          border-radius: 20px;
          box-shadow: 0 18px 44px rgba(30, 95, 208, 0.26);
        }
        .introleft {
          padding: 32px 24px;
        }
        .introleft .eyebrow {
          font-size: 32px;
          margin-bottom: 16px;
        }
        .introleft p {
          font-size: 17px;
          line-height: 1.55;
        }
        .introright {
          padding: 0 24px 32px;
        }
        .webinars,
        .tipsec,
        .films,
        .faq,
        .support {
          margin-top: 40px;
          padding-top: 40px;
        }
        .gcard {
          padding: 22px;
        }
        .web {
          padding: 18px;
        }
        .webdate {
          width: 60px;
          height: 60px;
        }
        .webday {
          font-size: 22px;
        }
        .webtitle,
        .gtitle,
        .filmtitle {
          font-size: 17px;
        }
        .card {
          padding: 20px;
        }
        .title {
          font-size: 18px;
        }
        .faqhead,
        .support h3 {
          font-size: 22px;
        }
        .q {
          padding: 16px 18px;
          font-size: 15px;
        }
        .a p {
          padding: 0 18px 18px;
        }
        .support {
          padding: 28px 22px;
          border-radius: 16px;
        }
        .support p {
          font-size: 15px;
        }
        .filmtab {
          padding: 9px 15px;
          font-size: 13px;
        }
        .filmtabs {
          flex-wrap: nowrap;
          overflow-x: auto;
          scrollbar-width: none;
          margin-left: -16px;
          margin-right: -16px;
          padding: 0 16px 4px;
        }
        .filmtabs::-webkit-scrollbar {
          display: none;
        }
        .filmtab {
          flex: none;
        }
        .modal {
          padding: 28px 22px;
        }
        .brandname {
          font-size: 20px;
        }
        .logoslot {
          width: 48px;
          height: 48px;
        }
        .footer {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          padding-top: 28px;
        }
        .supicon {
          width: 50px;
          height: 50px;
        }
        .supicon svg {
          width: 24px;
          height: 24px;
        }
      }/* End custom CSS */
/* Start custom CSS */.e-con {
    --container-max-width: 0 !important;
    --container-default-padding-top: 0 !important;
    --container-default-padding-right: 0 !important;
    --container-default-padding-bottom: 0 !important;
    --container-default-padding-left: 0 !important;
    --gap: 0 !important;
    --row-gap: 0 !important;
    --column-gap: 0 !important;
}


.sc-placeholder {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 2px;
  box-sizing: border-box;
  overflow: hidden;
}

@keyframes sc-shine {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
html.sc-dc-streaming .sc-placeholder,
html.sc-dc-streaming .sc-interp.sc-missing {
  position: relative;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-color: transparent;
}

html.sc-dc-streaming .sc-placeholder::before,
html.sc-dc-streaming .sc-interp.sc-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(217, 119, 87, 0) 25%, rgba(247, 225, 211, 0.95) 37%, rgba(217, 119, 87, 0) 63%);
  background-size: 400% 100%;
  animation: sc-shine 1.4s ease infinite;
}

html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before {
  animation: none;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.sc-placeholder-error {
  padding: 4px 8px;
  font: 11px/1.4 ui-monospace, monospace;
  color: color-mix(in srgb, currentColor 70%, transparent);
  word-break: break-word;
}

.sc-interp.sc-missing {
  display: inline-block;
  width: 2em;
  height: 1em;
  overflow: hidden;
  vertical-align: text-bottom;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  box-sizing: border-box;
  color: transparent;
  user-select: none;
}

.sc-interp.sc-unresolved {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 3px;
  padding: 0 3px;
}

.sc-host.sc-has-error {
  position: relative;
}

.elementor-location-footer {
    display: none
}

.sc-logic-error {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2147483647;
  max-width: 60ch;
  padding: 6px 10px;
  background: #b00020;
  color: #fff;
  font: 12px/1.4 ui-monospace, monospace;
  border-radius: 4px;
  white-space: pre-wrap;
  pointer-events: none;
}

@media print {
  @page {
    margin: 0.5cm;
  }
  figure,
  table {
    break-inside: avoid;
  }
  #dc-root,
  #dc-root > .sc-host {
    height: auto;
  }
  *,
  *::before,
  *::after {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important;
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    transition-duration: 0s !important;
  }
}
* {
  box-sizing: border-box;
}

a {
  color: #1e5fd0;
}

a:hover {
  color: #1a52b8;
}

body {
  font-family: "Manrope", system-ui, sans-serif;
  background: #f6f7f9;
  color: #0e1726;
  padding: 0px 24px;
  overflow-x: hidden;
}

.inner {
  max-width: 1040px;
  margin: 0 auto;
}

.topbar {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -72px;
  padding: 16px 24px;
  margin-bottom: 48px;
  background: #fff;
  border-bottom: 1px solid #e9ebef;
}

.topbarinner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.logoslot {
  width: 64px;
  height: 64px;
}

.brandname {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0e1726;
}

.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #e7f0fd !important;
  color: #1e5fd0 !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  margin: 0 0 14px !important;
}

.h2 h2 {
  font-size: 31px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.12 !important;
  margin: 0 0 12px !important;
  color: #0e1726 !important;
}

.sub {
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: #556072 !important;
  margin: 0 0 40px !important;
  max-width: 560px !important;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1px solid #edeef1;
  border-radius: 16px;
  padding: 24px 28px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 10px 24px -14px rgba(16, 24, 40, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #e7f0fd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e5fd0;
}

.icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.body {
  flex: 1;
  min-width: 0;
}

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1e5fd0;
  background: #eef4fe;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 9px;
}

.title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.25;
}

.desc {
  font-size: 15px;
  line-height: 1.5;
  color: #556072;
  margin: 0;
}

.cta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1e5fd0;
  white-space: nowrap;
}

.cta svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.arrow {
  flex: none;
  color: #c3cad4;
  display: none;
}

.support {
  margin-top: 56px;
  background: radial-gradient(rgba(30, 95, 208, 0.07) 1.4px, transparent 1.5px) 0 0/22px 22px, linear-gradient(120deg, #e8f0fd, #d4e2fb);
  border: 1px solid #cfdefb;
  box-shadow: 0 24px 48px -26px rgba(30, 95, 208, 0.5);
  border-radius: 20px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #0e1726;
}

.supicon {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(160deg, #2f6fe0, #1a52b8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -8px rgba(30, 95, 208, 0.6);
}

.supicon svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support .body {
  flex: 1;
  min-width: 0;
}

.support h3 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.support p {
  font-size: 16px;
  line-height: 1.5;
  color: #5b6472;
  margin: 0;
  max-width: 460px;
}

.btn {
  flex: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  background: #1e5fd0;
  color: #fff;
  padding: 15px 28px;
  border-radius: 12px;
  transition: transform 0.16s ease, background 0.16s ease;
}

.btn:hover {
  transform: translateY(-2px);
  background: #1a52b8;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 23, 38, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  animation: fade 0.18s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
  padding: 36px;
  position: relative;
  box-shadow: 0 24px 60px rgba(14, 23, 38, 0.3);
  animation: pop 0.2s ease;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: none;
  background: #f0f2f5;
  border-radius: 10px;
  cursor: pointer;
  color: #556072;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close:hover {
  background: #e4e7ec;
}

.modal h3 {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: #0e1726;
}

.modal .lead {
  font-size: 15px;
  line-height: 1.5;
  color: #556072;
  margin: 0 0 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-size: 13px;
  font-weight: 700;
  color: #0e1726;
}

.field input,
.field textarea {
  font-family: inherit;
  font-size: 15px;
  color: #0e1726;
  border: 1px solid #d7dce3;
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #1e5fd0;
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.15);
}

.submit {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  background: #1e5fd0;
  color: #fff;
  padding: 14px;
  border-radius: 12px;
  margin-top: 4px;
}

.submit:hover {
  background: #1a52b8;
}

.alt {
  display: flex;
  gap: 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #eceef1;
}

.alt a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #556072;
  text-decoration: none;
}

.alt a:hover {
  color: #1e5fd0;
}

.alt svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.done {
  text-align: center;
  padding: 12px 0;
}

.done .check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e7f0fd;
  color: #1e5fd0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.done .check svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq {
  margin-top: 56px;
}

.faqhead {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: #0e1726;
}

.faq .h2 {
  margin-bottom: 22px;
}

.faqlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qa {
  background: #fff;
  border: 1px solid #edeef1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 10px 24px -14px rgba(16, 24, 40, 0.12);
}

.q {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 700;
  color: #0e1726;
  transition: background 0.16s ease;
}

.q:hover {
  background: #fafbfc;
}

.q .chev {
  flex: none;
  width: 22px;
  height: 22px;
  stroke: #1e5fd0;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.qa.on .chev {
  transform: rotate(180deg);
}

.a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.qa.on .a {
  max-height: 420px;
}

.a p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.55;
  color: #556072;
}

.guides {
  margin-bottom: 64px;
}

.gcards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.gcard {
  background: #fff !important;
  border: 1px solid #e9ebef !important;
  border-radius: 18px !important;
  padding: 26px 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 26px -16px rgba(16, 24, 40, 0.16) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.gcard:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 38px -14px rgba(30, 95, 208, 0.28) !important;
  border-color: #c9dcfb !important;
}

.gnum {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: #eef4fe !important;
  color: #1e5fd0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

.gcard:hover .gnum {
  background: #1e5fd0 !important;
  color: #fff !important;
}

.gnum svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gtitle h2 {
  font-size: 19px !important;
  font-weight: 800!important; 
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  line-height: 1.22 !important;
  color: #0e1726 !important;
}

.gpre * {
  display: block !important;
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  color: #8b94a3 !important;
  margin-bottom: 2px !important;
}

.gdesc * {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #5b6472 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.glink * {
  font-size: 14px !important;
  font-weight: 700;
  color: #1e5fd0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.glink svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: transform 0.18s ease !important;
}

.gcard:hover .glink svg {
  transform: translateX(3px !important;
}

@media (max-width: 760px) {
  .gcards {
    grid-template-columns: 1fr;
  }
}
.webinars {
  margin-bottom: 64px;
}

.weblist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.web {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1px solid #edeef1;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 10px 24px -14px rgba(16, 24, 40, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.web:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(14, 23, 38, 0.08);
  border-color: #1e5fd0;
}

.webdate {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: linear-gradient(160deg, #2f6fe0, #1a52b8);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 8px 18px -8px rgba(30, 95, 208, 0.55);
}

.webday {
  font-size: 26px;
  font-weight: 800;
}

.webmon {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
  color: #cfe0fb;
}

.webbody {
  flex: 1;
  min-width: 0;
}

.webmeta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #9aa3b1;
  margin: 0 0 6px;
}

.webchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e7f0fd;
  color: #1e5fd0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.webtimewrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.webmeta svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.webtitle {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
  color: #0e1726;
}

.webdesc {
  font-size: 14px;
  line-height: 1.5;
  color: #556072;
  margin: 5px 0 0;
  max-width: 560px;
}

.webbtn {
  flex: none;
  border: 1px solid #1e5fd0;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #1e5fd0;
  padding: 11px 22px;
  border-radius: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}

.webbtn:hover {
  background: #1e5fd0;
  color: #fff;
}

@media (max-width: 640px) {
  .web {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .webbtn {
    align-self: stretch;
    text-align: center;
  }
}
.films {
  margin-top: 56px;
}

.filmtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.filmtab {
  border: 1px solid #dfe3e8;
  background: #fff;
  color: #556072;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.filmtab:hover {
  border-color: #1e5fd0;
  color: #1e5fd0;
}

.filmtab.on {
  background: #1e5fd0;
  border-color: #1e5fd0;
  color: #fff;
}

.filmrow {
  margin-top: 0;
  position: relative;
}

.filmtrackwrap {
  position: relative;
}

.filmfade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  width: 72px;
  background: linear-gradient(to right, rgba(246, 247, 249, 0), #f6f7f9 88%);
  pointer-events: none;
  z-index: 2;
}

.filmrowhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.filmarrows {
  display: flex;
  align-items: center;
  gap: 14px;
}

.filmcount {
  font-size: 14px;
  font-weight: 700;
  color: #556072;
  min-width: 54px;
  text-align: center;
}

.filmarrow {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: none;
  background: #1e5fd0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(30, 95, 208, 0.32);
  transition: background 0.16s ease, transform 0.16s ease;
}

.filmarrow:hover {
  background: #1a52b8;
  transform: translateY(-1px);
}

.filmarrow:active {
  transform: translateY(0);
}

.filmarrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.filmtrack {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}

.filmtrack::-webkit-scrollbar {
  display: none;
}

.film {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #edeef1;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 10px 24px -14px rgba(16, 24, 40, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.film:hover .filmplay {
  transform: scale(1.1);
}

.film:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(14, 23, 38, 0.08);
  border-color: #1e5fd0;
}

.filmposter {
  position: relative;
  aspect-ratio: 16/9;
  background: radial-gradient(circle at 50% 40%, #e6effb 0%, #c4d8f2 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.filmthumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filmposter.solid {
  background: radial-gradient(circle at 50% 40%, #e6effb 0%, #c4d8f2 72%);
}

.filmtagbadge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  color: #1e5fd0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(20, 40, 80, 0.16);
}

.filmposter iframe,
.filmposter video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

.filmplay {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(20, 40, 80, 0.22), 0 0 0 6px rgba(255, 255, 255, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.film:hover .filmplay {
  transform: scale(1.1);
  box-shadow: 0 10px 24px rgba(20, 40, 80, 0.28), 0 0 0 9px rgba(255, 255, 255, 0.42);
}

.filmplay svg {
  width: 22px;
  height: 22px;
  fill: #1e5fd0;
  margin-left: 3px;
}

.filmdur {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(14, 23, 38, 0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.filmbody {
  padding: 18px 20px;
}

.filmtag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa3b1;
  margin: 0 0 5px;
}

.filmtitle {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
  color: #0e1726;
}

@media (max-width: 760px) {
  .film {
    flex: 0 0 78%;
  }
}
.intro {
  margin-bottom: 72px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 24px;
}

.introwrap {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.introdots {
  position: absolute;
  top: -38px;
  bottom: -38px;
  right: -34px;
  left: 52%;
  z-index: 0;
  background: radial-gradient(#c2ccd9 1.5px, transparent 1.6px) 0 0/17px 17px;
  pointer-events: none;
}

.introbox {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.2fr);
  gap: 0;
  background: linear-gradient(120deg, #3a7ea8 0%, #6aa8cd 52%, #b6d8ec 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(43, 106, 144, 0.32);
  animation: introShift 22s ease-in-out infinite;
}

@keyframes introShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .introbox {
    animation: none;
  }
}
.introleft {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.introleft .eyebrow {
  display: inline-flex;
  background: transparent;
  padding: 0;
  color: #fff;
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: none;
  line-height: 1.05;
  margin-bottom: 22px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.introleft .eyebrow::before {
  display: none;
}

.introleft h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 18px;
}

.introleft p {
  font-size: 21px;
  line-height: 1.6;
  color: #d6e4fb;
  margin: 0;
}

.introright {
  position: relative;
  min-height: 520px;
  padding: 56px;
  display: flex;
  align-items: center;
}

.introright .video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) {
  .introright {
    min-height: 0;
    padding: 28px;
  }
  .introleft {
    padding: 40px;
  }
  .introleft h2 {
    font-size: 30px;
  }
}
@media (max-width: 900px) {
  .introbox {
    grid-template-columns: 1fr;
  }
  .introleft {
    padding: 36px;
  }
}
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  background: #0e1726;
  box-shadow: 0 20px 50px rgba(14, 23, 38, 0.18);
}

.video iframe,
.video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

.poster {
  position: absolute;
  inset: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 22% 25%, #3a7bff 0%, transparent 46%), radial-gradient(circle at 82% 28%, #18b6cc 0%, transparent 44%), radial-gradient(circle at 65% 88%, #7857f0 0%, transparent 52%), linear-gradient(135deg, #16255a, #0e1b3c);
  background-size: 170% 170%;
  animation: posterFloat 16s ease-in-out infinite;
}

@keyframes posterFloat {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #1e5fd0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(30, 95, 208, 0.5);
  transition: transform 0.18s ease;
}

.poster:hover .play {
  transform: scale(1.08);
}

.play svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  margin-left: 4px;
}

.postertxt {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  font-family: "Manrope", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8794a8;
}

@media (max-width: 640px) {
  .h2 {
    font-size: 30px;
  }
  .card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
  }
  .cta {
    align-self: flex-start;
  }
  .support {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 32px;
  }
  .support .btn {
    align-self: stretch;
  }
}
.intro {
  margin-bottom: 56px;
}

.guides {
  margin: 0;
}

.webinars,
.tipsec,
.films,
.faq,
.support {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid #e6e9ed;
}

.footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid #e6e9ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footbrand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0e1726;
}

.footlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1e5fd0;
  text-decoration: none;
}

.footlink svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.footlink:hover svg {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .wrap {
    padding: 36px 16px;
  }
  .h2 {
    font-size: 26px;
  }
  .sub {
    font-size: 16px;
    margin-bottom: 28px;
  }
  .eyebrow {
    font-size: 12px;
    margin-bottom: 12px;
  }
  .intro {
    margin-bottom: 40px;
    padding: 0 16px;
  }
  .introdots {
    display: none;
  }
  .topbar {
    padding: 12px 16px;
    margin-top: -36px;
    margin-bottom: 32px;
  }
  .introbox {
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(30, 95, 208, 0.26);
  }
  .introleft {
    padding: 32px 24px;
  }
  .introleft .eyebrow {
    font-size: 32px;
    margin-bottom: 16px;
  }
  .introleft p {
    font-size: 17px;
    line-height: 1.55;
  }
  .introright {
    padding: 0 24px 32px;
  }
  .webinars,
  .tipsec,
  .films,
  .faq,
  .support {
    margin-top: 40px;
    padding-top: 40px;
  }
  .gcard {
    padding: 22px;
  }
  .web {
    padding: 18px;
  }
  .webdate {
    width: 60px;
    height: 60px;
  }
  .webday {
    font-size: 22px;
  }
  .webtitle,
  .gtitle,
  .filmtitle {
    font-size: 17px;
  }
  .card {
    padding: 20px;
  }
  .title {
    font-size: 18px;
  }
  .faqhead,
  .support h3 {
    font-size: 22px;
  }
  .q {
    padding: 16px 18px;
    font-size: 15px;
  }
  .a p {
    padding: 0 18px 18px;
  }
  .support {
    padding: 28px 22px;
    border-radius: 16px;
  }
  .support p {
    font-size: 15px;
  }
  .filmtab {
    padding: 9px 15px;
    font-size: 13px;
  }
  .filmtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 4px;
  }
  .filmtabs::-webkit-scrollbar {
    display: none;
  }
  .filmtab {
    flex: none;
  }
  .modal {
    padding: 28px 22px;
  }
  .brandname {
    font-size: 20px;
  }
  .logoslot {
    width: 48px;
    height: 48px;
  }
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 28px;
  }
  .supicon {
    width: 50px;
    height: 50px;
  }
  .supicon svg {
    width: 24px;
    height: 24px;
  }
}/* End custom CSS */