:root {
      --bg-base: #030712;
      --accent-blue: #2563eb;
      --accent-cyan: #06b6d4;
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    }

    * {
      box-sizing: border-box;
      user-select: none;
      -webkit-user-drag: none;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: var(--bg-base);
      color: #f8fafc;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    html {
      overflow-y: auto;
      overflow-x: hidden;
    }

    body {
      overflow-y: visible;
      overflow-x: hidden;
    }

    /* 背景网格与星环科技感光晕 */
    .cyber-grid {
      background-size: 56px 56px;
      background-image:
        linear-gradient(to right, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
      mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 100%);
    }

    /* 全屏滑动容器与丝滑曲线 */
    #fullpage-wrapper {
      width: 100%;
      height: 100%;
      transition: transform 0.95s var(--ease-out-expo);
      will-change: transform;
    }

    .fp-section {
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* 屏间元素的自然入场与融合过渡 */
    .reveal-item {
      opacity: 0;
      transform: translateY(32px) scale(0.98);
      transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo);
    }

    .fp-section.active .reveal-item {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .delay-100 {
      transition-delay: 0.12s;
    }

    .delay-200 {
      transition-delay: 0.24s;
    }

    .delay-300 {
      transition-delay: 0.36s;
    }

    .delay-400 {
      transition-delay: 0.48s;
    }

    /* 星环科技感玻璃拟态卡片 */
    .tw-card {
      background: linear-gradient(155deg, rgba(15, 25, 48, 0.72) 0%, rgba(7, 13, 27, 0.85) 100%);
      border: 1px solid rgba(59, 130, 246, 0.18);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(16px);
      transition: all 0.4s var(--ease-out-expo);
    }

    .tw-card:hover {
      border-color: rgba(59, 130, 246, 0.55);
      transform: translateY(-4px);
      box-shadow: 0 24px 60px rgba(40, 112, 255, 0.22), inset 0 1px 0 0 rgba(59, 130, 246, 0.35);
    }

    /* ==================== 大卡片专用：边框顺时针流光环绕动效 (.card-border-flow) ==================== */
    @property --flow-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes border-flow-cw {
      0% {
        --flow-angle: 0deg;
      }

      100% {
        --flow-angle: 360deg;
      }
    }

    .card-border-flow {
      /* 可调参数：循环时长、高光段弧长、品牌皇家科技蓝主副色、底层常驻边框色、弥散辉光强度 */
      --flow-duration: 3000ms;
      --flow-arc: 72deg;
      --flow-color-core: #2870FF;
      --flow-color-bright: #3B82F6;
      --flow-color-tip: #93C5FD;
      --flow-base-border: rgba(40, 112, 255, 0.30);
      --flow-glow-spread: 14px;
      --flow-glow-color: rgba(40, 112, 255, 0.55);
      position: relative;
      box-shadow:
        0 0 var(--flow-glow-spread) rgba(40, 112, 255, 0.22),
        0 20px 50px rgba(0, 0, 0, 0.48),
        inset 0 1px 2px 0 rgba(255, 255, 255, 0.38);
    }

    .card-border-flow::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1.5px;
      /* 底层 30% 常驻同色系边框 + 从左上角 (315deg) 出发顺时针环绕的渐隐拖尾高光段 */
      background:
        conic-gradient(from calc(var(--flow-angle) - 45deg),
          var(--flow-base-border) 0deg,
          var(--flow-base-border) calc(360deg - var(--flow-arc)),
          rgba(40, 112, 255, 0.45) calc(360deg - var(--flow-arc) * 0.65),
          var(--flow-color-core) calc(360deg - var(--flow-arc) * 0.32),
          var(--flow-color-bright) calc(360deg - 6deg),
          var(--flow-color-tip) 359deg,
          var(--flow-base-border) 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      filter: drop-shadow(0 0 8px var(--flow-glow-color)) drop-shadow(0 0 var(--flow-glow-spread) rgba(59, 130, 246, 0.38));
      pointer-events: none;
      z-index: 1;
      animation: border-flow-cw var(--flow-duration) linear infinite;
    }

    /* ==================== 内部胶囊与子卡片专用：斜向玻璃扫光 (.pill-sheen) ==================== */
    @keyframes pill-sheen-sweep {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -100% 0;
      }
    }

    .pill-sheen {
      /* 可调参数：扫光斜角(125deg≈35°斜向)、扫光周期(2.5s)、峰值与次级透明度(20%-25%玻璃反光) */
      --sheen-angle: 125deg;
      --sheen-duration: 2.5s;
      --sheen-color-edge: rgba(147, 197, 253, 0.10);
      --sheen-color-peak: rgba(186, 230, 253, 0.24);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .pill-sheen::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-image: linear-gradient(var(--sheen-angle),
          rgba(186, 230, 253, 0) 0%,
          rgba(186, 230, 253, 0) 36%,
          var(--sheen-color-edge) 44%,
          var(--sheen-color-peak) 50%,
          var(--sheen-color-edge) 56%,
          rgba(186, 230, 253, 0) 64%,
          rgba(186, 230, 253, 0) 100%);
      background-size: 260% 100%;
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: 0;
      animation: pill-sheen-sweep var(--sheen-duration) linear infinite;
    }

    /* 图一品牌皇家科技蓝主按钮 */
    .btn-brand-blue {
      background: linear-gradient(180deg, #3B82F6 0%, #2870FF 100%);
      border: 1px solid rgba(96, 165, 250, 0.55);
      box-shadow: 0 6px 24px rgba(40, 112, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
      color: #ffffff;
      transition: all 0.3s ease;
    }

    .btn-brand-blue:hover {
      background: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%);
      box-shadow: 0 8px 30px rgba(40, 112, 255, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.45);
      transform: translateY(-1px);
    }

    /* 03/04/06 页面专属高透水晶玻璃材质：通透不挡底图 + 冰晶高光折射边缘 */
    .tw-card-bright {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(56, 189, 248, 0.08) 100%);
      border: 1px solid rgba(255, 255, 255, 0.32);
      border-top-color: rgba(255, 255, 255, 0.55);
      border-left-color: rgba(255, 255, 255, 0.45);
      box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        inset 0 1px 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 1px 0 rgba(56, 189, 248, 0.2);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      transition: all 0.4s var(--ease-out-expo);
    }

    .tw-card-bright:hover {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(56, 189, 248, 0.14) 100%);
      border-color: rgba(255, 255, 255, 0.65);
      transform: translateY(-4px);
      box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(255, 255, 255, 0.12),
        inset 0 1px 3px 0 rgba(255, 255, 255, 0.65);
    }

    /* 04 页面内部子卡片高透薄玻璃材质 */
    .tw-subcard-bright {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
      border: 1px solid rgba(255, 255, 255, 0.26);
      border-top-color: rgba(255, 255, 255, 0.42);
      box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: all 0.3s ease;
    }

    .tw-subcard-bright:hover {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.07) 100%);
      border-color: rgba(255, 255, 255, 0.55);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 2px 0 rgba(255, 255, 255, 0.5);
    }

    /* 透明玻璃小标签 */
    .glass-pill {
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.32);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
    }

    /* 胶囊标签光效 */
    .hero-capsule {
      background: linear-gradient(90deg, rgba(15, 28, 55, 0.85) 0%, rgba(10, 19, 38, 0.9) 100%);
      border: 1px solid rgba(56, 189, 248, 0.28);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      transition: all 0.35s ease;
    }

    .hero-capsule:hover {
      border-color: #38bdf8;
      background: linear-gradient(90deg, rgba(29, 78, 216, 0.35) 0%, rgba(14, 116, 144, 0.3) 100%);
      box-shadow: 0 0 25px rgba(56, 189, 248, 0.3);
      transform: translateY(-2px);
    }

    /* 渐变科技文字 */
    .text-gradient-tech {
      background: linear-gradient(135deg, #ffffff 15%, #bae6fd 55%, #38bdf8 95%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* 环境氛围灯平滑过渡 */
    .ambient-orb {
      position: fixed;
      border-radius: 9999px;
      filter: blur(110px);
      pointer-events: none;
      z-index: 0;
      transition: all 1.2s var(--ease-out-expo);
    }

    /* 首屏白色星星点点闪烁粒子效果 */
    @keyframes twinkle {

      0%,
      100% {
        opacity: 0.25;
        transform: scale(0.85);
      }

      50% {
        opacity: 1;
        transform: scale(1.25);
      }
    }

    .star-particle {
      position: absolute;
      background: #ffffff;
      border-radius: 9999px;
      box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.85);
      pointer-events: none;
      animation: twinkle var(--dur, 4s) ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }

    /* 右侧进度点动画 */
    .fp-dot {
      transition: all 0.4s var(--ease-out-expo);
    }

    /* 01 - 06 页面直接原图贴图样式（01、02、05 直接贴在页面底部 center bottom） */
    .bg-sec-01 {
      background-color: #000000;
      background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.5) 100%),
        url('../images/index3/img-01.png');
      background-size: 100% 100%, cover, cover;
      background-position: center center, center bottom, center bottom;
      background-repeat: no-repeat;
    }

    .bg-sec-02 {
      background-color: #02050d;
      background-image:
        linear-gradient(180deg, rgba(3, 7, 18, 0.35) 0%, rgba(3, 7, 18, 0.15) 50%, rgba(3, 7, 18, 0.55) 100%),
        url('../images/index3/img-02.png');
      background-size: 100% 100%, cover, cover;
      background-position: center center, center bottom, center bottom;
      background-repeat: no-repeat;
    }

    .bg-sec-03 {
      background-color: #020611;
      background-image:
        linear-gradient(180deg, rgba(3, 7, 18, 0.48) 0%, rgba(3, 7, 18, 0.22) 50%, rgba(3, 7, 18, 0.68) 100%),
        url('../images/index3/img-03.png');
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
    }

    .bg-sec-04 {
      background-color: #020611;
      background-image:
        linear-gradient(180deg, rgba(3, 7, 18, 0.5) 0%, rgba(3, 7, 18, 0.25) 50%, rgba(3, 7, 18, 0.7) 100%),
        url('../images/index3/img-04.png');
      background-size: 100% 100%, cover;
      background-position: center center, center bottom;
      background-repeat: no-repeat;
    }

    .bg-sec-05 {
      background-color: #02050d;
      background-image:
        linear-gradient(90deg, rgba(3, 7, 18, 0.12) 0%, rgba(3, 7, 18, 0.52) 55%, rgba(3, 7, 18, 0.75) 100%),
        url('../images/index3/img-05.png');
      background-size: 100% 100%, cover, cover, cover;
      background-position: center center, center bottom, center bottom, center bottom;
      background-repeat: no-repeat;
    }

    .bg-sec-06 {
      background-color: #02050d;
      background-image:
        linear-gradient(180deg, rgba(3, 7, 18, 0.45) 0%, rgba(3, 7, 18, 0.25) 50%, rgba(3, 7, 18, 0.75) 100%),
        url('../images/index3/img-06.png');
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
    }

    /* 允许内容超出一屏的页面在屏内自然滚动查看底部模块 */
    .fp-section.scrollable-sec {
      justify-content: flex-start;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
    }

    .fp-section.scrollable-sec::-webkit-scrollbar {
      width: 5px;
    }

    .fp-section.scrollable-sec::-webkit-scrollbar-thumb {
      background: rgba(56, 189, 248, 0.3);
      border-radius: 9999px;
    }

    /* ==================== 小屏笔记本与高缩放比屏幕（13-15寸）自适应防溢出适配 ==================== */
    .sec-inner-scale {
      transform-origin: center center;
      transition: transform 0.3s ease;
    }

    /* 针对常见笔记本视口高度（小于 900px）自动收紧垂直间距与卡片最小高度 */
    @media (max-height: 900px) {
      .hero-content-shift {
        transform: translateY(calc(-12vh + 70px)) !important;
        margin-top: 0 !important;
      }

      .sec-inner-scale {
        transform: scale(0.9);
      }
    }

    @media (max-height: 780px) {
      .hero-content-shift {
        transform: translateY(calc(-8vh + 70px)) !important;
      }

      .sec-inner-scale {
        transform: scale(0.82);
      }
    }

    @media (max-height: 680px) {
      .sec-inner-scale {
        transform: scale(0.74);
      }
    }

/* ============================================
   Source: index3.html style blocks
   Auto-extracted on 2026-11-12
============================================ */

/* 生成的工具类样式；可离线运行 */
    *,
    ::before,
    ::after {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x: ;
      --tw-pan-y: ;
      --tw-pinch-zoom: ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position: ;
      --tw-gradient-via-position: ;
      --tw-gradient-to-position: ;
      --tw-ordinal: ;
      --tw-slashed-zero: ;
      --tw-numeric-figure: ;
      --tw-numeric-spacing: ;
      --tw-numeric-fraction: ;
      --tw-ring-inset: ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgb(59 130 246 / 0.5);
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      --tw-blur: ;
      --tw-brightness: ;
      --tw-contrast: ;
      --tw-grayscale: ;
      --tw-hue-rotate: ;
      --tw-invert: ;
      --tw-saturate: ;
      --tw-sepia: ;
      --tw-drop-shadow: ;
      --tw-backdrop-blur: ;
      --tw-backdrop-brightness: ;
      --tw-backdrop-contrast: ;
      --tw-backdrop-grayscale: ;
      --tw-backdrop-hue-rotate: ;
      --tw-backdrop-invert: ;
      --tw-backdrop-opacity: ;
      --tw-backdrop-saturate: ;
      --tw-backdrop-sepia: ;
      --tw-contain-size: ;
      --tw-contain-layout: ;
      --tw-contain-paint: ;
      --tw-contain-style:
    }

    ::backdrop {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x: ;
      --tw-pan-y: ;
      --tw-pinch-zoom: ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position: ;
      --tw-gradient-via-position: ;
      --tw-gradient-to-position: ;
      --tw-ordinal: ;
      --tw-slashed-zero: ;
      --tw-numeric-figure: ;
      --tw-numeric-spacing: ;
      --tw-numeric-fraction: ;
      --tw-ring-inset: ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgb(59 130 246 / 0.5);
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      --tw-blur: ;
      --tw-brightness: ;
      --tw-contrast: ;
      --tw-grayscale: ;
      --tw-hue-rotate: ;
      --tw-invert: ;
      --tw-saturate: ;
      --tw-sepia: ;
      --tw-drop-shadow: ;
      --tw-backdrop-blur: ;
      --tw-backdrop-brightness: ;
      --tw-backdrop-contrast: ;
      --tw-backdrop-grayscale: ;
      --tw-backdrop-hue-rotate: ;
      --tw-backdrop-invert: ;
      --tw-backdrop-opacity: ;
      --tw-backdrop-saturate: ;
      --tw-backdrop-sepia: ;
      --tw-contain-size: ;
      --tw-contain-layout: ;
      --tw-contain-paint: ;
      --tw-contain-style:
    }

    /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
    *,
    ::after,
    ::before {
      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
      border-color: #e5e7eb
    }

    ::after,
    ::before {
      --tw-content: ''
    }

    :host,
    html {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      -moz-tab-size: 4;
      tab-size: 4;
      font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-feature-settings: normal;
      font-variation-settings: normal;
      -webkit-tap-highlight-color: transparent
    }

    body {
      margin: 0;
      line-height: inherit
    }

    hr {
      height: 0;
      color: inherit;
      border-top-width: 1px
    }

    abbr:where([title]) {
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: inherit;
      font-weight: inherit
    }

    a {
      color: inherit;
      text-decoration: inherit
    }

    b,
    strong {
      font-weight: bolder
    }

    code,
    kbd,
    pre,
    samp {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-feature-settings: normal;
      font-variation-settings: normal;
      font-size: 1em
    }

    small {
      font-size: 80%
    }

    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline
    }

    sub {
      bottom: -.25em
    }

    sup {
      top: -.5em
    }

    table {
      text-indent: 0;
      border-color: inherit;
      border-collapse: collapse
    }

    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      font-size: 100%;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      color: inherit;
      margin: 0;
      padding: 0
    }

    button,
    select {
      text-transform: none
    }

    button,
    input:where([type=button]),
    input:where([type=reset]),
    input:where([type=submit]) {
      -webkit-appearance: button;
      background-color: transparent;
      background-image: none
    }

    :-moz-focusring {
      outline: auto
    }

    :-moz-ui-invalid {
      box-shadow: none
    }

    progress {
      vertical-align: baseline
    }

    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
      height: auto
    }

    [type=search] {
      -webkit-appearance: textfield;
      outline-offset: -2px
    }

    ::-webkit-search-decoration {
      -webkit-appearance: none
    }

    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      font: inherit
    }

    summary {
      display: list-item
    }

    blockquote,
    dd,
    dl,
    figure,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    p,
    pre {
      margin: 0
    }

    fieldset {
      margin: 0;
      padding: 0
    }

    legend {
      padding: 0
    }

    menu,
    ol,
    ul {
      list-style: none;
      margin: 0;
      padding: 0
    }

    dialog {
      padding: 0
    }

    textarea {
      resize: vertical
    }

    input::placeholder,
    textarea::placeholder {
      opacity: 1;
      color: #9ca3af
    }

    [role=button],
    button {
      cursor: pointer
    }

    :disabled {
      cursor: default
    }

    audio,
    canvas,
    embed,
    iframe,
    img,
    object,
    svg,
    video {
      display: block;
      vertical-align: middle
    }

    img,
    video {
      max-width: 100%;
      height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
      display: none
    }

    .pointer-events-none {
      pointer-events: none
    }

    .fixed {
      position: fixed
    }

    .absolute {
      position: absolute
    }

    .relative {
      position: relative
    }

    .inset-0 {
      inset: 0px
    }

    .-bottom-12 {
      bottom: -3rem
    }

    .-right-12 {
      right: -3rem
    }

    .bottom-0 {
      bottom: 0px
    }

    .bottom-6 {
      bottom: 1.5rem
    }

    .left-0 {
      left: 0px
    }

    .right-0 {
      right: 0px
    }

    .right-6 {
      right: 1.5rem
    }

    .top-0 {
      top: 0px
    }

    .top-1\/2 {
      top: 50%
    }

    .z-0 {
      z-index: 0
    }

    .z-10 {
      z-index: 10
    }

    .z-20 {
      z-index: 20
    }

    .z-50 {
      z-index: 50
    }

    .mx-auto {
      margin-left: auto;
      margin-right: auto
    }

    .my-7 {
      margin-top: 1.75rem;
      margin-bottom: 1.75rem
    }

    .-mt-12 {
      margin-top: -3rem
    }

    .mb-1\.5 {
      margin-bottom: 0.375rem
    }

    .mb-2 {
      margin-bottom: 0.5rem
    }

    .mb-3 {
      margin-bottom: 0.75rem
    }

    .mb-3\.5 {
      margin-bottom: 0.875rem
    }

    .mb-4 {
      margin-bottom: 1rem
    }

    .mb-5 {
      margin-bottom: 1.25rem
    }

    .mb-6 {
      margin-bottom: 1.5rem
    }

    .mb-7 {
      margin-bottom: 1.75rem
    }

    .mb-8 {
      margin-bottom: 2rem
    }

    .mt-1\.5 {
      margin-top: 0.375rem
    }

    .mt-2 {
      margin-top: 0.5rem
    }

    .mt-3 {
      margin-top: 0.75rem
    }

    .mt-4 {
      margin-top: 1rem
    }

    .mt-6 {
      margin-top: 1.5rem
    }

    .mt-8 {
      margin-top: 2rem
    }

    .block {
      display: block
    }

    .inline-block {
      display: inline-block
    }

    .flex {
      display: flex
    }

    .inline-flex {
      display: inline-flex
    }

    .grid {
      display: grid
    }

    .hidden {
      display: none
    }

    .h-1\.5 {
      height: 0.375rem
    }

    .h-10 {
      height: 2.5rem
    }

    .h-11 {
      height: 2.75rem
    }

    .h-16 {
      height: 4rem
    }

    .h-2 {
      height: 0.5rem
    }

    .h-4 {
      height: 1rem
    }

    .h-6 {
      height: 1.5rem
    }

    .h-60 {
      height: 15rem
    }

    .h-64 {
      height: 16rem
    }

    .h-7 {
      height: 1.75rem
    }

    .h-8 {
      height: 2rem
    }

    .h-\[500px\] {
      height: 500px
    }

    .h-\[620px\] {
      height: 620px
    }

    .h-full {
      height: 100%
    }

    .min-h-\[145px\] {
      min-height: 145px
    }

    .min-h-\[190px\] {
      min-height: 190px
    }

    .min-h-\[56px\] {
      min-height: 56px
    }

    .w-1\.5 {
      width: 0.375rem
    }

    .w-10 {
      width: 2.5rem
    }

    .w-4 {
      width: 1rem
    }

    .w-64 {
      width: 16rem
    }

    .w-7 {
      width: 1.75rem
    }

    .w-\[500px\] {
      width: 500px
    }

    .w-\[620px\] {
      width: 620px
    }

    .w-auto {
      width: auto
    }

    .w-full {
      width: 100%
    }

    .min-w-0 {
      min-width: 0px
    }

    .max-w-7xl {
      max-width: 80rem
    }

    .max-w-xl {
      max-width: 36rem
    }

    .flex-1 {
      flex: 1 1 0%
    }

    .shrink-0 {
      flex-shrink: 0
    }

    .-translate-x-\[20px\] {
      --tw-translate-x: -20px;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .-translate-y-1\/2 {
      --tw-translate-y: -50%;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .-translate-y-\[calc\(18vh-70px\)\] {
      --tw-translate-y: calc(calc(18vh - 70px) * -1);
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    @keyframes pulse {
      50% {
        opacity: .5
      }
    }

    .animate-pulse {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
    }

    .cursor-pointer {
      cursor: pointer
    }

    .select-none {
      -webkit-user-select: none;
      user-select: none
    }

    .grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .flex-col {
      flex-direction: column
    }

    .flex-wrap {
      flex-wrap: wrap
    }

    .flex-nowrap {
      flex-wrap: nowrap
    }

    .items-start {
      align-items: flex-start
    }

    .items-end {
      align-items: flex-end
    }

    .items-center {
      align-items: center
    }

    .items-stretch {
      align-items: stretch
    }

    .justify-start {
      justify-content: flex-start
    }

    .justify-end {
      justify-content: flex-end
    }

    .justify-center {
      justify-content: center
    }

    .justify-between {
      justify-content: space-between
    }

    .gap-2 {
      gap: 0.5rem
    }

    .gap-2\.5 {
      gap: 0.625rem
    }

    .gap-3 {
      gap: 0.75rem
    }

    .gap-3\.5 {
      gap: 0.875rem
    }

    .gap-4 {
      gap: 1rem
    }

    .gap-5 {
      gap: 1.25rem
    }

    .gap-6 {
      gap: 1.5rem
    }

    .gap-8 {
      gap: 2rem
    }

    .gap-x-6 {
      column-gap: 1.5rem
    }

    .gap-y-1\.5 {
      row-gap: 0.375rem
    }

    .gap-y-2\.5 {
      row-gap: 0.625rem
    }

    .space-y-1> :not([hidden])~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
    }

    .space-y-1\.5> :not([hidden])~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))
    }

    .space-y-2> :not([hidden])~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
    }

    .space-y-2\.5> :not([hidden])~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(0.625rem * var(--tw-space-y-reverse))
    }

    .space-y-3> :not([hidden])~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
    }

    .overflow-hidden {
      overflow: hidden
    }

    .whitespace-nowrap {
      white-space: nowrap
    }

    .rounded-2xl {
      border-radius: 1rem
    }

    .rounded-3xl {
      border-radius: 1.5rem
    }

    .rounded-full {
      border-radius: 9999px
    }

    .rounded-lg {
      border-radius: 0.5rem
    }

    .rounded-md {
      border-radius: 0.375rem
    }

    .rounded-xl {
      border-radius: 0.75rem
    }

    .border {
      border-width: 1px
    }

    .border-b {
      border-bottom-width: 1px
    }

    .border-l-4 {
      border-left-width: 4px
    }

    .border-t {
      border-top-width: 1px
    }

    .border-blue-300\/40 {
      border-color: rgb(147 197 253 / 0.4)
    }

    .border-blue-500\/20 {
      border-color: rgb(59 130 246 / 0.2)
    }

    .border-blue-500\/30 {
      border-color: rgb(59 130 246 / 0.3)
    }

    .border-cyan-300\/40 {
      border-color: rgb(103 232 249 / 0.4)
    }

    .border-white\/10 {
      border-color: rgb(255 255 255 / 0.1)
    }

    .border-white\/15 {
      border-color: rgb(255 255 255 / 0.15)
    }

    .border-white\/20 {
      border-color: rgb(255 255 255 / 0.2)
    }

    .border-white\/25 {
      border-color: rgb(255 255 255 / 0.25)
    }

    .border-white\/\[0\.07\] {
      border-color: rgb(255 255 255 / 0.07)
    }

    .border-l-blue-400 {
      --tw-border-opacity: 1;
      border-left-color: rgb(96 165 250 / var(--tw-border-opacity, 1))
    }

    .border-l-cyan-400 {
      --tw-border-opacity: 1;
      border-left-color: rgb(34 211 238 / var(--tw-border-opacity, 1))
    }

    .bg-\[\#02050b\] {
      --tw-bg-opacity: 1;
      background-color: rgb(2 5 11 / var(--tw-bg-opacity, 1))
    }

    .bg-\[\#030712\]\/70 {
      background-color: rgb(3 7 18 / 0.7)
    }

    .bg-\[\#2870FF\]\/20 {
      background-color: rgb(40 112 255 / 0.2)
    }

    .bg-blue-500\/20 {
      background-color: rgb(59 130 246 / 0.2)
    }

    .bg-blue-600\/20 {
      background-color: rgb(37 99 235 / 0.2)
    }

    .bg-blue-950\/60 {
      background-color: rgb(23 37 84 / 0.6)
    }

    .bg-cyan-400 {
      --tw-bg-opacity: 1;
      background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1))
    }

    .bg-cyan-500\/15 {
      background-color: rgb(6 182 212 / 0.15)
    }

    .bg-cyan-500\/20 {
      background-color: rgb(6 182 212 / 0.2)
    }

    .bg-slate-600 {
      --tw-bg-opacity: 1;
      background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1))
    }

    .bg-slate-950\/45 {
      background-color: rgb(2 6 23 / 0.45)
    }

    .bg-white\/5 {
      background-color: rgb(255 255 255 / 0.05)
    }

    .bg-white\/\[0\.04\] {
      background-color: rgb(255 255 255 / 0.04)
    }

    .bg-white\/\[0\.08\] {
      background-color: rgb(255 255 255 / 0.08)
    }

    .bg-gradient-to-r {
      background-image: linear-gradient(to right, var(--tw-gradient-stops))
    }

    .from-blue-950\/60 {
      --tw-gradient-from: rgb(23 37 84 / 0.6) var(--tw-gradient-from-position);
      --tw-gradient-to: rgb(23 37 84 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

    .via-white\/\[0\.08\] {
      --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.08) var(--tw-gradient-via-position), var(--tw-gradient-to)
    }

    .to-transparent {
      --tw-gradient-to: transparent var(--tw-gradient-to-position)
    }

    .object-contain {
      object-fit: contain
    }

    .object-cover {
      object-fit: cover
    }

    .object-bottom {
      object-position: bottom
    }

    .p-3 {
      padding: 0.75rem
    }

    .p-5 {
      padding: 1.25rem
    }

    .p-6 {
      padding: 1.5rem
    }

    .p-7 {
      padding: 1.75rem
    }

    .px-3 {
      padding-left: 0.75rem;
      padding-right: 0.75rem
    }

    .px-3\.5 {
      padding-left: 0.875rem;
      padding-right: 0.875rem
    }

    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem
    }

    .px-5 {
      padding-left: 1.25rem;
      padding-right: 1.25rem
    }

    .px-6 {
      padding-left: 1.5rem;
      padding-right: 1.5rem
    }

    .px-7 {
      padding-left: 1.75rem;
      padding-right: 1.75rem
    }

    .py-1 {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem
    }

    .py-1\.5 {
      padding-top: 0.375rem;
      padding-bottom: 0.375rem
    }

    .py-2 {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem
    }

    .py-3 {
      padding-top: 0.75rem;
      padding-bottom: 0.75rem
    }

    .py-4 {
      padding-top: 1rem;
      padding-bottom: 1rem
    }

    .py-5 {
      padding-top: 1.25rem;
      padding-bottom: 1.25rem
    }

    .py-6 {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem
    }

    .pb-1 {
      padding-bottom: 0.25rem
    }

    .pb-4 {
      padding-bottom: 1rem
    }

    .pb-5 {
      padding-bottom: 1.25rem
    }

    .pr-1 {
      padding-right: 0.25rem
    }

    .pt-1 {
      padding-top: 0.25rem
    }

    .pt-16 {
      padding-top: 4rem
    }

    .pt-20 {
      padding-top: 5rem
    }

    .pt-4 {
      padding-top: 1rem
    }

    .pt-5 {
      padding-top: 1.25rem
    }

    .text-center {
      text-align: center
    }

    .text-justify {
      text-align: justify
    }

    .font-mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
    }

    .text-2xl {
      font-size: 1.5rem;
      line-height: 2rem
    }

    .text-3xl {
      font-size: 1.875rem;
      line-height: 2.25rem
    }

    .text-4xl {
      font-size: 2.25rem;
      line-height: 2.5rem
    }

    .text-\[11px\] {
      font-size: 11px
    }

    .text-\[clamp\(1\.35rem\2c 3\.4vw\2c 3\.85rem\)\] {
      font-size: clamp(1.35rem, 3.4vw, 3.85rem)
    }

    .text-\[clamp\(2\.25rem\2c 5\.6vw\2c 6\.5rem\)\] {
      font-size: clamp(2.25rem, 5.6vw, 6.5rem)
    }

    .text-base {
      font-size: 1rem;
      line-height: 1.5rem
    }

    .text-lg {
      font-size: 1.125rem;
      line-height: 1.75rem
    }

    .text-sm {
      font-size: 0.875rem;
      line-height: 1.25rem
    }

    .text-xl {
      font-size: 1.25rem;
      line-height: 1.75rem
    }

    .text-xs {
      font-size: 0.75rem;
      line-height: 1rem
    }

    .font-bold {
      font-weight: 700
    }

    .font-extrabold {
      font-weight: 800
    }

    .font-medium {
      font-weight: 500
    }

    .font-normal {
      font-weight: 400
    }

    .font-semibold {
      font-weight: 600
    }

    .uppercase {
      text-transform: uppercase
    }

    .leading-\[1\.12\] {
      line-height: 1.12
    }

    .leading-\[1\.25\] {
      line-height: 1.25
    }

    .leading-\[1\.7\] {
      line-height: 1.7
    }

    .leading-none {
      line-height: 1
    }

    .leading-relaxed {
      line-height: 1.625
    }

    .leading-snug {
      line-height: 1.375
    }

    .leading-tight {
      line-height: 1.25
    }

    .tracking-tight {
      letter-spacing: -0.025em
    }

    .tracking-wide {
      letter-spacing: 0.025em
    }

    .tracking-wider {
      letter-spacing: 0.05em
    }

    .tracking-widest {
      letter-spacing: 0.1em
    }

    .text-\[\#3B82F6\] {
      --tw-text-opacity: 1;
      color: rgb(59 130 246 / var(--tw-text-opacity, 1))
    }

    .text-\[\#60A5FA\] {
      --tw-text-opacity: 1;
      color: rgb(96 165 250 / var(--tw-text-opacity, 1))
    }

    .text-blue-200 {
      --tw-text-opacity: 1;
      color: rgb(191 219 254 / var(--tw-text-opacity, 1))
    }

    .text-blue-300 {
      --tw-text-opacity: 1;
      color: rgb(147 197 253 / var(--tw-text-opacity, 1))
    }

    .text-cyan-200 {
      --tw-text-opacity: 1;
      color: rgb(165 243 252 / var(--tw-text-opacity, 1))
    }

    .text-cyan-300 {
      --tw-text-opacity: 1;
      color: rgb(103 232 249 / var(--tw-text-opacity, 1))
    }

    .text-slate-100 {
      --tw-text-opacity: 1;
      color: rgb(241 245 249 / var(--tw-text-opacity, 1))
    }

    .text-slate-200 {
      --tw-text-opacity: 1;
      color: rgb(226 232 240 / var(--tw-text-opacity, 1))
    }

    .text-slate-200\/80 {
      color: rgb(226 232 240 / 0.8)
    }

    .text-slate-200\/85 {
      color: rgb(226 232 240 / 0.85)
    }

    .text-slate-300 {
      --tw-text-opacity: 1;
      color: rgb(203 213 225 / var(--tw-text-opacity, 1))
    }

    .text-slate-400 {
      --tw-text-opacity: 1;
      color: rgb(148 163 184 / var(--tw-text-opacity, 1))
    }

    .text-slate-500 {
      --tw-text-opacity: 1;
      color: rgb(100 116 139 / var(--tw-text-opacity, 1))
    }

    .text-white {
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity, 1))
    }

    .text-white\/95 {
      color: rgb(255 255 255 / 0.95)
    }

    .opacity-0 {
      opacity: 0
    }

    .opacity-80 {
      opacity: 0.8
    }

    .opacity-95 {
      opacity: 0.95
    }

    .shadow-\[0_0_12px_\#22d3ee\] {
      --tw-shadow: 0 0 12px #22d3ee;
      --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

    .blur-2xl {
      --tw-blur: blur(40px);
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .drop-shadow-\[0_4px_20px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
      --tw-drop-shadow: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.8));
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .drop-shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.85\)\] {
      --tw-drop-shadow: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.85));
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .backdrop-blur-xl {
      --tw-backdrop-blur: blur(24px);
      -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
      backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
    }

    .transition-all {
      transition-property: all;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms
    }

    .transition-colors {
      transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms
    }

    .transition-opacity {
      transition-property: opacity;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms
    }

    .delay-100 {
      transition-delay: 100ms
    }

    .delay-200 {
      transition-delay: 200ms
    }

    .delay-300 {
      transition-delay: 300ms
    }

    .duration-500 {
      transition-duration: 500ms
    }

    .hover\:bg-\[\#2870FF\]\/30:hover {
      background-color: rgb(40 112 255 / 0.3)
    }

    .hover\:bg-slate-400:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1))
    }

    .hover\:bg-white\/\[0\.1\]:hover {
      background-color: rgb(255 255 255 / 0.1)
    }

    .hover\:text-\[\#60A5FA\]:hover {
      --tw-text-opacity: 1;
      color: rgb(96 165 250 / var(--tw-text-opacity, 1))
    }

    .hover\:text-blue-300:hover {
      --tw-text-opacity: 1;
      color: rgb(147 197 253 / var(--tw-text-opacity, 1))
    }

    .hover\:text-blue-400:hover {
      --tw-text-opacity: 1;
      color: rgb(96 165 250 / var(--tw-text-opacity, 1))
    }

    .hover\:text-cyan-400:hover {
      --tw-text-opacity: 1;
      color: rgb(34 211 238 / var(--tw-text-opacity, 1))
    }

    .hover\:text-white:hover {
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity, 1))
    }

    .focus\:outline-none:focus {
      outline: 2px solid transparent;
      outline-offset: 2px
    }

    .group:hover .group-hover\:scale-110 {
      --tw-scale-x: 1.1;
      --tw-scale-y: 1.1;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .group:hover .group-hover\:opacity-100 {
      opacity: 1
    }

    @media (min-width: 640px) {
      .sm\:mt-0 {
        margin-top: 0px
      }

      .sm\:inline-flex {
        display: inline-flex
      }

      .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .sm\:flex-row {
        flex-direction: row
      }

      .sm\:items-end {
        align-items: flex-end
      }

      .sm\:items-center {
        align-items: center
      }

      .sm\:p-8 {
        padding: 2rem
      }

      .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
      }

      .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
      }

      .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
      }

      .sm\:text-5xl {
        font-size: 3rem;
        line-height: 1
      }

      .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
      }

      .sm\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
      }

      .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem
      }

      .sm\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
      }
    }

    @media (min-width: 768px) {
      .md\:flex {
        display: flex
      }

      .md\:min-h-\[120px\] {
        min-height: 120px
      }

      .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }
    }

    @media (min-width: 1024px) {
      .lg\:col-span-2 {
        grid-column: span 2 / span 2
      }

      .lg\:col-span-3 {
        grid-column: span 3 / span 3
      }

      .lg\:col-span-4 {
        grid-column: span 4 / span 4
      }

      .lg\:col-span-5 {
        grid-column: span 5 / span 5
      }

      .lg\:col-span-6 {
        grid-column: span 6 / span 6
      }

      .lg\:col-span-7 {
        grid-column: span 7 / span 7
      }

      .lg\:col-span-9 {
        grid-column: span 9 / span 9
      }

      .lg\:block {
        display: block
      }

      .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
      }

      .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .lg\:flex-row {
        flex-direction: row
      }

      .lg\:items-center {
        align-items: center
      }

      .lg\:gap-12 {
        gap: 3rem
      }

      .lg\:gap-3\.5 {
        gap: 0.875rem
      }

      .lg\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem
      }

      .lg\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
      }

      .lg\:pr-4 {
        padding-right: 1rem
      }

      .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
      }

      .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem
      }
    }

    @media (min-width: 1280px) {
      .xl\:my-9 {
        margin-top: 2.25rem;
        margin-bottom: 2.25rem
      }

      .xl\:mb-11 {
        margin-bottom: 2.75rem
      }

      .xl\:mb-4 {
        margin-bottom: 1rem
      }

      .xl\:mb-6 {
        margin-bottom: 1.5rem
      }

      .xl\:mb-8 {
        margin-bottom: 2rem
      }

      .xl\:mb-9 {
        margin-bottom: 2.25rem
      }

      .xl\:mt-14 {
        margin-top: 3.5rem
      }

      .xl\:mt-3 {
        margin-top: 0.75rem
      }

      .xl\:mt-7 {
        margin-top: 1.75rem
      }

      .xl\:h-12 {
        height: 3rem
      }

      .xl\:h-20 {
        height: 5rem
      }

      .xl\:h-9 {
        height: 2.25rem
      }

      .xl\:h-\[290px\] {
        height: 290px
      }

      .xl\:min-h-\[135px\] {
        min-height: 135px
      }

      .xl\:min-h-\[175px\] {
        min-height: 175px
      }

      .xl\:w-12 {
        width: 3rem
      }

      .xl\:-translate-y-\[150px\] {
        --tw-translate-y: -150px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .xl\:flex-nowrap {
        flex-wrap: nowrap
      }

      .xl\:gap-10 {
        gap: 2.5rem
      }

      .xl\:gap-16 {
        gap: 4rem
      }

      .xl\:gap-5 {
        gap: 1.25rem
      }

      .xl\:gap-7 {
        gap: 1.75rem
      }

      .xl\:gap-8 {
        gap: 2rem
      }

      .xl\:gap-9 {
        gap: 2.25rem
      }

      .xl\:space-y-2\.5> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.625rem * var(--tw-space-y-reverse))
      }

      .xl\:space-y-3> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
      }

      .xl\:space-y-4> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse))
      }

      .xl\:p-10 {
        padding: 2.5rem
      }

      .xl\:p-7 {
        padding: 1.75rem
      }

      .xl\:p-8 {
        padding: 2rem
      }

      .xl\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
      }

      .xl\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
      }

      .xl\:px-9 {
        padding-left: 2.25rem;
        padding-right: 2.25rem
      }

      .xl\:py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
      }

      .xl\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
      }

      .xl\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
      }

      .xl\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
      }

      .xl\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem
      }

      .xl\:pb-7 {
        padding-bottom: 1.75rem
      }

      .xl\:pt-20 {
        padding-top: 5rem
      }

      .xl\:pt-5 {
        padding-top: 1.25rem
      }

      .xl\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
      }

      .xl\:text-5xl {
        font-size: 3rem;
        line-height: 1
      }

      .xl\:text-\[11\.5px\] {
        font-size: 11.5px
      }

      .xl\:text-\[15px\] {
        font-size: 15px
      }

      .xl\:text-\[17px\] {
        font-size: 17px
      }

      .xl\:text-\[20px\] {
        font-size: 20px
      }

      .xl\:text-\[22px\] {
        font-size: 22px
      }

      .xl\:text-\[28px\] {
        font-size: 28px
      }

      .xl\:text-\[38px\] {
        font-size: 38px
      }

      .xl\:text-\[54px\] {
        font-size: 54px
      }

      .xl\:text-\[56px\] {
        font-size: 56px
      }

      .xl\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
      }

      .xl\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
      }

      .xl\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem
      }

      .xl\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
      }
    }

/* ============================================
   Source: index3.html style blocks
   Auto-extracted on 2026-11-12
============================================ */

/* ===== 自适应优化：不缩放整个区块，内容不足时自然增高 ===== */
    html {
      height: auto;
      scroll-behavior: smooth;
    }

    body {
      height: auto;
      min-height: 100%;
      overflow-x: clip;
      overflow-y: auto;
    }

    * {
      user-select: text;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    button:focus-visible,
    a:focus-visible {
      outline: 2px solid #67e8f9;
      outline-offset: 4px;
    }

    #fullpage-wrapper {
      height: auto;
      transform: none;
      transition: none;
      will-change: auto;
    }

    .fp-section {
      height: auto;
      min-height: 100vh;
      min-height: 100svh;
      overflow: clip;
      padding-top: clamp(96px, 10vh, 130px);
      padding-bottom: clamp(48px, 6vh, 80px);
    }

    .fp-section>.sec-inner-scale {
      transform: none !important;
      min-width: 0;
    }

    .fp-section .grid>*,
    .fp-section .flex>* {
      min-width: 0;
    }

    .hero-content-shift {
      transform: none !important;
      margin-top: 0 !important;
    }

    .hero-content-shift h1 span {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .hero-content-shift h1 span:first-child {
      font-size: clamp(2rem, 5.6vw, 6.5rem);
    }

    .hero-content-shift h1 span:nth-child(2) {
      font-size: clamp(1.2rem, 3.4vw, 3.85rem);
    }

    .hero-capsule {
      max-width: 100%;
      white-space: normal;
      text-align: center;
    }

    .bg-sec-06 .grid:has(> .glass-pill) {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    }

    .bg-sec-06 .glass-pill {
      min-height: 44px;
      height: auto;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .fp-section.active footer.reveal-item {
      transform: none;
    }

    .bg-sec-04 h4,
    .bg-sec-04 p,
    .bg-sec-06 .glass-pill {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .bg-sec-04 .tw-subcard-bright p {
      font-size: max(14px, .75rem);
    }

    .bg-sec-05 .reveal-item span {
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .fp-section[data-index="6"] {
      padding-bottom: 0;
    }

    .fp-section[data-index="6"]>div {
      height: auto;
      min-height: calc(100svh - 96px);
      overflow: visible;
    }

    .fp-section[data-index="6"]>div>div:first-child {
      padding-top: 48px;
      padding-bottom: 48px;
    }

    .fp-section footer .-translate-x-\[20px\] {
      transform: none;
    }

    .fp-section footer p {
      overflow-wrap: anywhere;
    }

    .mobile-menu-button {
      display: none;
      width: 44px;
      height: 44px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 10px;
      background: rgba(15, 25, 48, .8);
      flex-direction: column;
      justify-content: center;
      gap: 5px;
    }

    .mobile-menu-button span {
      height: 2px;
      width: 100%;
      background: #e2e8f0;
      border-radius: 2px;
    }

    @media (max-width: 767px) {
      .mobile-menu-button {
        display: flex;
      }

      #main-navigation.menu-open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 16px;
        background: rgba(3, 7, 18, .97);
        border-bottom: 1px solid rgba(96, 165, 250, .25);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
      }

      #main-navigation.menu-open button {
        min-height: 44px;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
      }

      .fp-section {
        padding-top: 96px;
        padding-bottom: 56px;
      }

      .fp-section[data-index="0"] {
        min-height: 100svh;
      }

      .hero-content-shift h1 span:first-child {
        font-size: clamp(2rem, 9vw, 3.5rem);
      }

      .hero-content-shift h1 span:nth-child(2) {
        font-size: clamp(1.2rem, 5.4vw, 2rem);
        line-height: 1.4;
      }

      .hero-content-shift .hero-capsule {
        font-size: 13px;
      }

      .fp-section[data-index="6"]>div {
        min-height: 0;
      }

      .fp-section[data-index="6"]>div>div:first-child {
        min-height: 0;
      }
    }

    @media (max-width: 420px) {
      .fp-section .max-w-7xl {
        padding-left: 20px;
        padding-right: 20px;
      }

      .bg-sec-05 .grid.grid-cols-2 {
        gap: 10px;
      }

      .bg-sec-05 .grid.grid-cols-2>div {
        padding: 18px 14px;
      }

      .bg-sec-05 .grid.grid-cols-2 .text-4xl {
        font-size: clamp(1.8rem, 9vw, 2.25rem);
      }
    }

    /* 参考图版式：电脑端首屏标题略向上，让地球与宇航员保持完整可见。 */
    @media (min-width: 768px) and (min-height: 640px) {
      .hero-content-shift {
        transform: translateY(calc(-1 * clamp(55px, 16vh, 155px))) !important;
      }
    }

    .nav-link.text-cyan-400 {
      color: #22d3ee;
    }

    .back-to-top {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    body.is-last-section .back-to-top {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    @media (min-width: 1280px) {
      .bg-sec-06 .grid:has(> .glass-pill) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .bg-sec-06 .grid>.glass-pill {
        font-size: 14px;
        padding-left: 8px;
        padding-right: 8px;
        white-space: nowrap;
      }
    }

    /* 技术实力：仅压低背景高光，前景文字和卡片不变。 */
    .bg-sec-05::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(ellipse at 32% 40%, rgba(3, 7, 18, .42) 0%, rgba(3, 7, 18, .30) 24%, rgba(3, 7, 18, .12) 55%, rgba(3, 7, 18, .08) 100%);
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }

      .reveal-item {
        opacity: 1;
        transform: none;
      }
    }

/* CCTV 央视卡片 —— 背景图 + 渐变遮罩 + hover 放大 (参考 index.html) */
.cctv-cover {
  isolation: isolate;
}
.cctv-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../static2/images/cctv-boromi-cover.jpg') center/cover no-repeat;
  opacity: 0.72;
  transition: transform 0.7s ease-out, opacity 0.5s ease;
  z-index: 0;
}
.cctv-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 25%, rgba(245, 158, 66, 0.14) 0%, transparent 50%),
    linear-gradient(180deg, rgba(4, 8, 18, 0.35) 0%, rgba(4, 8, 18, 0.15) 45%, rgba(4, 8, 18, 0.82) 100%);
  pointer-events: none;
  z-index: 1;
}
.cctv-cover:hover::before {
  transform: scale(1.04);
  opacity: 0.85;
}
.cctv-cover > * {
  position: relative;
  z-index: 2;
}