:root {
      --blue: #1457ff;
      --blue-2: #003bd9;
      --cyan: #00c7ff;
      --yellow: #ffd84d;
      --ink: #07142f;
      --ink-2: #132245;
      --muted: #5b6780;
      --pale: #f2f6ff;
      --pale-2: #eaf1ff;
      --line: #d9e3f6;
      --white: #fff;
      --green: #15b77e;
      --shadow: 0 24px 70px rgba(18, 48, 114, .14);
      --radius: 28px;
      --container: 1180px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px
    }

    html,
    body {
      overflow-x: hidden
    }

    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased
    }

    body.menu-open {
      overflow: hidden
    }

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

    img,
    svg {
      max-width: 100%
    }

    button,
    input,
    select,
    textarea {
      font: inherit
    }

    button {
      cursor: pointer
    }

    .container {
      width: min(calc(100% - 40px), var(--container));
      margin-inline: auto
    }

    .section {
      padding: 112px 0;
      position: relative
    }

    .section-title {
      margin: 0;
      font-size: clamp(34px, 4.3vw, 58px);
      line-height: 1.22;
      letter-spacing: -.05em
    }

    .section-title .blue {
      color: var(--blue)
    }

    .section-lead {
      margin: 24px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 2
    }

    .label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--blue);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .label::before {
      content: "";
      width: 28px;
      height: 3px;
      background: var(--blue);
      border-radius: 3px
    }

    .label.light {
      color: #9fc3ff
    }

    .label.light::before {
      background: #69dcff
    }

    .desktop-only {
      display: block
    }

    .mobile-only {
      display: none
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important
    }

    .site-header {
      position: fixed;
      z-index: 1000;
      inset: 0 0 auto;
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(16, 57, 143, .1)
    }

    .header-inner {
      height: 78px;
      display: flex;
      align-items: center;
      gap: 28px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: max-content
    }

    .brand-word {
      font-size: 18px;
      font-weight: 1000;
      letter-spacing: .08em
    }

    .brand-service {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 900
    }

    .brand-service::before {
      content: "";
      width: 1px;
      height: 24px;
      background: #cbd5e9;
      margin-right: 4px
    }

    .brand-type {
      display: inline-block;
      font-weight: 1000;
      line-height: 1;
      letter-spacing: -.07em;
      color: #0758d8;
      background: linear-gradient(135deg, #0877ea 0%, #0758d8 52%, #5b38df 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 5px 18px rgba(7, 88, 216, .12)
    }

    .brand-service .brand-type {
      font-size: 29px
    }

    .brand-type.hero-logo {
      font-size: clamp(64px, 8vw, 106px);
      filter: saturate(.92) contrast(1.06)
    }

    .footer .brand-type {
      background: linear-gradient(135deg, #46b7ff 0%, #6a8cff 55%, #9a72ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: none
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-left: auto
    }

    .nav a {
      font-size: 13px;
      font-weight: 800;
      color: #30405f
    }

    .nav a:hover {
      color: var(--blue)
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 25px;
      border: 0;
      border-radius: 10px;
      font-weight: 900;
      transition: .2s ease;
      white-space: nowrap
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(20, 87, 255, .22)
    }

    .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--blue-2));
      box-shadow: 0 10px 24px rgba(20, 87, 255, .22)
    }

    .btn-yellow {
      color: var(--ink);
      background: var(--yellow);
      box-shadow: 0 10px 24px rgba(255, 216, 77, .28)
    }

    .btn-outline {
      color: var(--blue);
      border: 2px solid var(--blue);
      background: #fff
    }

    .btn-small {
      min-height: 44px;
      padding-inline: 17px;
      font-size: 13px
    }

    .btn-large {
      min-height: 64px;
      padding-inline: 32px;
      font-size: 16px
    }

    .menu-button {
      display: none;
      flex-shrink: 0;
      width: 46px;
      height: 46px;
      border: 0;
      background: transparent;
      position: relative
    }

    .menu-button span,
    .menu-button::before,
    .menu-button::after {
      content: "";
      position: absolute;
      left: 9px;
      width: 28px;
      height: 2px;
      background: var(--ink);
      transition: .25s
    }

    .menu-button span {
      top: 22px
    }

    .menu-button::before {
      top: 14px
    }

    .menu-button::after {
      top: 30px
    }

    .menu-button.open span {
      opacity: 0
    }

    .menu-button.open::before {
      top: 22px;
      transform: rotate(45deg)
    }

    .menu-button.open::after {
      top: 22px;
      transform: rotate(-45deg)
    }

    .mobile-menu {
      display: none
    }

    .announcement {
      margin-top: 78px;
      color: #fff;
      background: var(--ink);
      font-size: 13px;
      font-weight: 800
    }

    .announcement-inner {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      text-align: center
    }

    .announcement b {
      color: var(--yellow)
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 70px 0 84px;
      background:
        radial-gradient(circle at 88% 15%, rgba(0, 199, 255, .22), transparent 27%),
        radial-gradient(circle at 70% 80%, rgba(20, 87, 255, .16), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f7faff 100%)
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(20, 87, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 87, 255, .045) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to right, #000, transparent 70%)
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.04fr .96fr;
      align-items: center;
      gap: 54px
    }

    .hero-product {
      display: flex;
      align-items: flex-end;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .hero-product span {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: .03em;
      padding-bottom: 12px
    }

    .hero-product .brand-type {
      display: inline-block
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(37px, 4.7vw, 67px);
      line-height: 1.23;
      letter-spacing: -.06em
    }

    .hero h1 .marker {
      position: relative;
      display: inline-block;
      z-index: 1
    }

    .hero h1 .marker::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: -3px;
      right: -3px;
      bottom: 6px;
      height: 17px;
      background: var(--yellow);
      transform: skewX(-8deg)
    }

    .hero-lead {
      margin: 28px 0 0;
      max-width: 720px;
      color: #43516d;
      font-size: 18px;
      line-height: 2
    }

    .hero-lead strong {
      color: var(--ink)
    }

    .hero-actions {
      display: flex;
      gap: 13px;
      margin-top: 34px
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px
    }

    .proof-chip {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 12px;
      border: 1px solid #d5e0f5;
      border-radius: 999px;
      background: rgba(255, 255, 255, .86);
      font-size: 12px;
      font-weight: 800;
      color: #34425f
    }

    .proof-chip::before {
      content: "✓";
      display: grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      color: #fff;
      background: var(--green);
      font-size: 11px
    }

    .hero-visual {
      position: relative;
      min-height: 590px;
      display: grid;
      place-items: center
    }

    .dashboard {
      position: relative;
      width: 100%;
      max-width: 540px;
      border: 1px solid rgba(60, 103, 194, .2);
      border-radius: 26px;
      background: #fff;
      box-shadow: 0 34px 90px rgba(17, 55, 130, .2);
      overflow: hidden;
      transform: perspective(1200px) rotateY(-4deg) rotateX(1deg)
    }

    .dash-head {
      height: 52px;
      display: flex;
      align-items: center;
      padding: 0 18px;
      border-bottom: 1px solid #e5ebf6;
      background: #f9fbff
    }

    .dash-dots {
      display: flex;
      gap: 6px
    }

    .dash-dots i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e8
    }

    .dash-dots i:first-child {
      background: #ff7171
    }

    .dash-dots i:nth-child(2) {
      background: #ffd65a
    }

    .dash-dots i:nth-child(3) {
      background: #5bd594
    }

    .dash-title {
      margin: auto;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      color: #71809d
    }

    .dash-body {
      display: grid;
      grid-template-columns: 118px 1fr;
      min-height: 430px
    }

    .dash-side {
      padding: 18px 12px;
      background: var(--ink)
    }

    .dash-logo {
      color: #fff;
      font-size: 12px;
      font-weight: 1000;
      letter-spacing: .05em;
      margin-bottom: 26px
    }

    .dash-logo b {
      color: #6edfff
    }

    .dash-nav {
      display: grid;
      gap: 9px
    }

    .dash-nav span {
      height: 31px;
      display: flex;
      align-items: center;
      padding: 0 9px;
      border-radius: 7px;
      color: #9bb0d5;
      font-size: 9px;
      font-weight: 800
    }

    .dash-nav span.active {
      color: #fff;
      background: rgba(20, 87, 255, .6)
    }

    .dash-main {
      padding: 20px;
      background: #f5f8fe
    }

    .status-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .status-card {
      padding: 13px;
      border: 1px solid #e1e8f5;
      border-radius: 11px;
      background: #fff
    }

    .status-card small {
      display: block;
      color: #7b89a5;
      font-size: 8px;
      font-weight: 800
    }

    .status-card strong {
      display: block;
      margin-top: 4px;
      font-size: 18px;
      line-height: 1.2
    }

    .status-card strong.ok {
      color: var(--green)
    }

    .graph-card {
      margin-top: 11px;
      padding: 15px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid #e1e8f5
    }

    .graph-title {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      font-weight: 900;
      color: #50607f
    }

    .graph {
      height: 98px;
      margin-top: 12px;
      position: relative;
      background: repeating-linear-gradient(to bottom, #eef2f8 0, #eef2f8 1px, transparent 1px, transparent 24px)
    }

    .graph svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .ticket-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 11px
    }

    .ticket {
      padding: 12px;
      border: 1px solid #e1e8f5;
      border-radius: 11px;
      background: #fff
    }

    .ticket-top {
      display: flex;
      justify-content: space-between;
      gap: 7px;
      font-size: 8px;
      font-weight: 900
    }

    .ticket-tag {
      color: var(--blue);
      background: #eaf0ff;
      padding: 2px 6px;
      border-radius: 999px
    }

    .ticket p.ticket-title {
      margin: 9px 0 5px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.45;
      color: inherit
    }

    .ticket p {
      margin: 0;
      color: #7d89a0;
      font-size: 8px;
      line-height: 1.55
    }

    .ai-bubble {
      position: absolute;
      right: -22px;
      top: 82px;
      width: 218px;
      padding: 16px;
      border: 1px solid rgba(20, 87, 255, .24);
      border-radius: 18px;
      background: linear-gradient(145deg, #153885, #0c1e46);
      color: #fff;
      box-shadow: 0 20px 42px rgba(5, 27, 78, .3);
      animation: float 4.5s ease-in-out infinite
    }

    .ai-bubble small {
      color: #82dbff;
      font-weight: 900
    }

    .ai-bubble strong {
      display: block;
      margin: 5px 0;
      font-size: 14px
    }

    .ai-bubble p {
      margin: 0;
      color: #c8d5ee;
      font-size: 10px;
      line-height: 1.6
    }

    .human-bubble {
      position: absolute;
      left: -18px;
      bottom: 54px;
      width: 210px;
      padding: 15px;
      border: 1px solid #dbe4f4;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 18px 42px rgba(26, 60, 125, .16);
      animation: float 5s ease-in-out infinite reverse
    }

    .human-bubble small {
      color: var(--blue);
      font-weight: 900
    }

    .human-bubble strong {
      display: block;
      margin: 5px 0;
      font-size: 13px
    }

    .human-bubble p {
      margin: 0;
      color: #66738d;
      font-size: 10px;
      line-height: 1.6
    }

    .saving-badge {
      position: absolute;
      right: 10px;
      bottom: 8px;
      width: 145px;
      height: 145px;
      display: grid;
      place-items: center;
      text-align: center;
      border: 8px solid #fff;
      border-radius: 50%;
      color: var(--ink);
      background: var(--yellow);
      box-shadow: 0 20px 45px rgba(72, 59, 0, .18);
      transform: rotate(6deg)
    }

    .saving-badge span {
      font-size: 11px;
      font-weight: 900
    }

    .saving-badge strong {
      display: block;
      font-size: 36px;
      line-height: .95;
      letter-spacing: -.06em
    }

    .saving-badge small {
      font-size: 10px;
      font-weight: 900
    }

    @keyframes float {
      50% {
        transform: translateY(-9px)
      }
    }

    .logo-strip {
      padding: 22px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #fff
    }

    .logo-strip-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 42px;
      flex-wrap: wrap;
      color: #50607d
    }

    .logo-strip-inner b {
      font-size: 13px;
      color: var(--ink)
    }

    .logo-strip-inner span {
      font-size: 12px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .logo-strip-inner span::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--blue)
    }

    .problem {
      background: linear-gradient(180deg, #fff, #f5f8ff)
    }

    .problem-head {
      text-align: center;
      max-width: 900px;
      margin: 0 auto
    }

    .problem-head .section-title strong {
      position: relative;
      z-index: 1
    }

    .problem-head .section-title strong::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: -2px;
      right: -2px;
      bottom: 3px;
      height: 13px;
      background: var(--yellow)
    }

    .pain-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 58px
    }

    .pain {
      position: relative;
      min-height: 272px;
      padding: 34px 31px 30px;
      border: 1px solid #dce5f6;
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 18px 48px rgba(24, 65, 145, .08);
      overflow: hidden
    }

    .pain::after {
      content: "";
      position: absolute;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      right: -36px;
      bottom: -46px;
      background: #eef3ff
    }

    .pain-icon {
      width: 60px;
      height: 60px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: var(--blue);
      background: #eaf0ff;
      font-size: 32px
    }

    .pain-icon-lg {
      font-size: 48px;
      line-height: 1
    }

    .pain h3 {
      margin: 25px 0 10px;
      font-size: 21px;
      line-height: 1.45;
      letter-spacing: -.03em
    }

    .pain p {
      margin: 0;
      color: var(--muted);
      font-size: 14px
    }

    .pain-no {
      position: absolute;
      right: 22px;
      top: 18px;
      color: #d7e2f5;
      font-size: 40px;
      font-weight: 1000;
      line-height: 1
    }

    .problem-answer {
      max-width: 920px;
      margin: 50px auto 0;
      text-align: center;
      font-size: clamp(25px, 3vw, 38px);
      font-weight: 1000;
      line-height: 1.55;
      letter-spacing: -.04em
    }

    .problem-answer em {
      font-style: normal;
      color: var(--blue)
    }

    .definition {
      overflow: hidden;
      background: var(--ink);
      color: #fff
    }

    .definition::before {
      content: "AI";
      position: absolute;
      right: -30px;
      top: -115px;
      font-size: 400px;
      line-height: 1;
      font-weight: 1000;
      color: rgba(255, 255, 255, .025);
      letter-spacing: -.15em
    }

    .definition-grid {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: 80px;
      align-items: start;
      position: relative
    }

    .definition-copy {
      position: sticky;
      top: 120px
    }

    .definition-copy .section-lead {
      color: #b7c3d8
    }

    .definition-copy .section-title {
      font-size: clamp(30px, 3.2vw, 40px)
    }

    .definition-steps {
      display: grid;
      gap: 1px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 26px;
      overflow: hidden
    }

    .definition-step {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 20px;
      padding: 32px;
      background: #0e1d3b
    }

    .definition-step:nth-child(even) {
      background: #102347
    }

    .step-number {
      font-size: 42px;
      line-height: 1;
      font-weight: 1000;
      color: #3e68c9
    }

    .definition-step h3 {
      margin: 0 0 8px;
      font-size: 24px
    }

    .definition-step p {
      margin: 0;
      color: #b8c4d9
    }

    .definition-step b {
      color: #69ddff
    }

    .human-gate {
      margin-top: 22px;
      padding: 24px 28px;
      display: flex;
      gap: 18px;
      align-items: center;
      border: 1px solid rgba(105, 221, 255, .35);
      border-radius: 20px;
      background: rgba(0, 199, 255, .08)
    }

    .human-gate-icon {
      flex: 0 0 auto;
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--ink);
      background: var(--yellow);
      font-weight: 1000
    }

    .human-gate strong {
      display: block;
      font-size: 19px
    }

    .human-gate p {
      margin: 3px 0 0;
      color: #bac8dd;
      font-size: 13px
    }

    .reason {
      background: #fff
    }

    .reason-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      align-items: center
    }

    .reason-visual {
      position: relative;
      padding: 28px;
      border-radius: 30px;
      background: var(--pale);
      border: 1px solid var(--line)
    }

    .cost-column {
      display: grid;
      grid-template-columns: 1fr 24px 1fr;
      gap: 16px;
      align-items: center
    }

    .cost-box {
      padding: 27px 20px;
      border-radius: 20px;
      text-align: center;
      background: #fff;
      border: 1px solid #dce5f5
    }

    .cost-box.before {
      opacity: .72
    }

    .cost-box.after {
      color: #fff;
      border: 0;
      background: linear-gradient(150deg, var(--blue), #0a3dbd);
      box-shadow: 0 20px 48px rgba(20, 87, 255, .25)
    }

    .cost-box span {
      display: block;
      font-size: 12px;
      font-weight: 900
    }

    .cost-box strong {
      display: block;
      margin: 8px 0;
      font-size: 34px;
      line-height: 1;
      letter-spacing: -.06em;
      white-space: nowrap
    }

    .cost-box small {
      font-size: 11px
    }

    .cost-arrow {
      font-size: 20px;
      text-align: center;
      color: var(--blue);
      font-weight: 1000
    }

    .work-bars {
      margin-top: 24px;
      padding: 20px;
      border-radius: 18px;
      background: #fff
    }

    .work-row {
      display: grid;
      grid-template-columns: 80px 1fr 44px;
      align-items: center;
      gap: 12px;
      margin: 10px 0;
      font-size: 11px;
      font-weight: 800
    }

    .bar {
      height: 13px;
      border-radius: 999px;
      background: #e9eef7;
      overflow: hidden
    }

    .bar i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #9eacc3
    }

    .work-row.ai .bar i {
      background: linear-gradient(90deg, var(--blue), var(--cyan))
    }

    .work-row.ai b {
      color: var(--blue)
    }

    .reason-copy .section-title {
      font-size: clamp(26px, 3.6vw, 46px)
    }

    .reason-copy .section-lead strong {
      color: var(--ink)
    }

    .reason-points {
      display: grid;
      gap: 19px;
      margin-top: 32px
    }

    .reason-point {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 15px
    }

    .reason-point i {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #fff;
      background: var(--blue);
      font-style: normal;
      font-weight: 1000
    }

    .reason-point h3 {
      margin: 0 0 3px;
      font-size: 18px
    }

    .reason-point p {
      margin: 0;
      color: var(--muted);
      font-size: 14px
    }

    .migration {
      background: var(--pale)
    }

    .migration-head {
      display: flex;
      justify-content: space-between;
      gap: 50px;
      align-items: end
    }

    .migration-head>div {
      max-width: 780px
    }

    .migration-note {
      max-width: 330px;
      color: var(--muted);
      font-size: 14px
    }

    .timeline {
      position: relative;
      margin-top: 58px;
      padding: 48px 34px 34px;
      border: 1px solid #d7e2f4;
      border-radius: 28px;
      background: #fff;
      box-shadow: var(--shadow)
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 9%;
      right: 9%;
      top: 83px;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--cyan));
      border-radius: 4px
    }

    .timeline-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      position: relative
    }

    .phase {
      text-align: center
    }

    .phase-dot {
      width: 72px;
      height: 72px;
      margin: 0 auto 22px;
      display: grid;
      place-items: center;
      border: 7px solid #e9f0ff;
      border-radius: 50%;
      color: #fff;
      background: var(--blue);
      font-weight: 1000;
      font-size: 18px;
      position: relative;
      z-index: 2
    }

    .phase:nth-child(2) .phase-dot {
      background: #176fff
    }

    .phase:nth-child(3) .phase-dot {
      background: #0097e6
    }

    .phase:nth-child(4) .phase-dot {
      background: var(--green)
    }

    .phase small {
      color: var(--blue);
      font-weight: 900
    }

    .phase h3 {
      margin: 5px 0 8px;
      font-size: 18px
    }

    .phase p {
      margin: 0;
      color: var(--muted);
      font-size: 13px
    }

    .parallel-note {
      margin-top: 26px;
      padding: 18px 20px;
      border-radius: 14px;
      color: #fff;
      background: var(--ink);
      text-align: center;
      font-weight: 900
    }

    .parallel-note b {
      color: var(--yellow)
    }

    .cta-band {
      padding: 52px 0;
      color: #fff;
      background: linear-gradient(105deg, #0945db, var(--blue) 50%, #00aede);
      position: relative;
      overflow: hidden
    }

    .cta-band::before,
    .cta-band::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1)
    }

    .cta-band::before {
      width: 240px;
      height: 240px;
      left: -90px;
      top: -120px
    }

    .cta-band::after {
      width: 320px;
      height: 320px;
      right: -90px;
      bottom: -240px
    }

    .cta-band-inner {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 38px
    }

    .cta-band h2 {
      margin: 0;
      font-size: clamp(28px, 3vw, 42px);
      line-height: 1.35;
      letter-spacing: -.04em
    }

    .cta-band p {
      margin: 8px 0 0;
      color: #dfeaff
    }

    .cta-band-actions {
      display: flex;
      gap: 12px;
      flex: 0 0 auto
    }

    .half {
      background: #fff
    }

    .half-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 55px;
      align-items: center
    }

    .half-number {
      position: relative;
      min-height: 440px;
      display: grid;
      place-items: center
    }

    .half-illustration {
      width: min(420px, 100%);
      height: auto;
      display: block;
      position: relative;
      z-index: 1;
      grid-area: 1 / 1
    }

    .half-number::before {
      content: "";
      grid-area: 1 / 1;
      width: calc(min(420px, 100%) * .98);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(7, 20, 47, .26) 0%, rgba(7, 20, 47, .14) 62%, rgba(7, 20, 47, .05) 82%, rgba(7, 20, 47, 0) 100%);
      transform: translateY(5%);
      pointer-events: none
    }

    .half-copy .section-title {
      font-size: clamp(26px, 3vw, 40px)
    }

    .half-copy .section-lead strong {
      color: var(--ink)
    }

    .condition-box {
      margin-top: 27px;
      padding: 22px;
      border-left: 5px solid var(--blue);
      background: var(--pale);
      font-size: 13px;
      color: #4d5c77
    }

    .condition-box strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-size: 15px
    }

    .calculator {
      background: linear-gradient(180deg, #f4f8ff, #eaf2ff)
    }

    .calculator-grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 70px;
      align-items: center
    }

    .calculator-copy .section-title {
      font-size: clamp(34px, 4vw, 48px)
    }

    .calc-panel {
      padding: 34px;
      border: 1px solid #d8e3f5;
      border-radius: 28px;
      background: #fff;
      box-shadow: var(--shadow)
    }

    .calc-panel>label {
      display: block;
      margin-bottom: 9px;
      font-size: 12px;
      font-weight: 900
    }

    .money-input {
      display: flex;
      align-items: center;
      border: 2px solid #dce5f6;
      border-radius: 14px;
      padding: 0 17px
    }

    .money-input:focus-within {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(20, 87, 255, .09)
    }

    .money-input span {
      color: var(--blue);
      font-size: 24px;
      font-weight: 1000
    }

    .money-input input {
      width: 100%;
      border: 0;
      outline: 0;
      padding: 13px 8px;
      font-size: 30px;
      font-weight: 1000;
      color: var(--ink);
      background: transparent
    }

    .calc-options {
      display: grid;
      gap: 17px;
      margin-top: 24px
    }

    .calc-question {
      padding: 18px;
      border: 1px solid #dce5f6;
      border-radius: 17px;
      background: #f9fbff
    }

    .calc-question-head {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin-bottom: 13px
    }

    .calc-question-head>span {
      display: grid;
      place-items: center;
      flex: 0 0 25px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      color: #fff;
      background: var(--blue);
      font-size: 11px;
      font-weight: 1000
    }

    .calc-question-head strong {
      display: block;
      color: var(--ink);
      font-size: 14px
    }

    .calc-question-head small {
      display: block;
      margin-top: 3px;
      color: #71809a;
      font-size: 10px;
      line-height: 1.55
    }

    .choice-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .choice-card {
      position: relative;
      display: block;
      margin: 0;
      cursor: pointer
    }

    .choice-card input {
      position: absolute;
      opacity: 0;
      pointer-events: none
    }

    .choice-card span {
      display: block;
      height: 100%;
      padding: 13px 14px;
      border: 2px solid #e0e7f4;
      border-radius: 13px;
      color: #465572;
      background: #fff;
      transition: .18s
    }

    .choice-card b {
      display: block;
      color: var(--ink);
      font-size: 13px
    }

    .choice-card small {
      display: block;
      margin-top: 3px;
      font-size: 9px;
      line-height: 1.45
    }

    .choice-card input:checked+span {
      border-color: var(--blue);
      color: #244a9e;
      background: #edf4ff;
      box-shadow: 0 6px 17px rgba(20, 87, 255, .12)
    }

    .choice-card input:focus-visible+span {
      outline: 3px solid rgba(20, 87, 255, .2);
      outline-offset: 2px
    }

    .calc-rate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 20px;
      padding: 17px 20px;
      border-radius: 15px;
      color: #fff;
      background: linear-gradient(135deg, #071b48, #0d3c9f)
    }

    .calc-rate span {
      font-size: 12px;
      font-weight: 900
    }

    .calc-rate strong {
      font-size: 31px;
      letter-spacing: -.05em
    }

    .calc-condition {
      margin: 9px 2px 0;
      color: #687793;
      font-size: 10px;
      text-align: right
    }

    .calc-results {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 14px
    }

    .calc-result {
      padding: 20px;
      border-radius: 16px;
      background: #f2f6fd
    }

    .calc-result.highlight {
      color: #fff;
      background: linear-gradient(140deg, var(--blue), #0f3eb8)
    }

    .calc-result span {
      display: block;
      font-size: 11px;
      font-weight: 800
    }

    .calc-result strong {
      display: block;
      margin-top: 5px;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -.04em
    }

    .calc-result.highlight span {
      color: #cddcff
    }

    .calc-note {
      margin: 14px 0 0;
      padding: 12px 14px;
      border-left: 3px solid #9bb6ec;
      color: #687793;
      background: #f5f8fd;
      font-size: 10px;
      line-height: 1.7
    }

    .calc-note b {
      color: #3b4b68
    }

    .calc-note a {
      color: var(--blue);
      font-weight: 900;
      text-decoration: underline
    }

    .cases {
      background: #fff
    }

    .cases-head {
      text-align: center;
      max-width: 850px;
      margin: 0 auto
    }

    .case-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 52px
    }

    .case {
      position: relative;
      padding: 29px;
      border: 1px solid #dce5f5;
      border-radius: 23px;
      background: #fff;
      overflow: hidden
    }

    .case.featured {
      color: #fff;
      border: 0;
      background: linear-gradient(150deg, #09204b, #1457ff);
      transform: translateY(-12px);
      box-shadow: 0 24px 55px rgba(20, 87, 255, .22)
    }

    .case-tag {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--blue);
      background: #eaf0ff;
      font-size: 10px;
      font-weight: 900
    }

    .featured .case-tag {
      color: #fff;
      background: rgba(255, 255, 255, .14)
    }

    .case h3 {
      margin: 20px 0 18px;
      font-size: 20px
    }

    .case-price {
      display: flex;
      align-items: end;
      gap: 9px
    }

    .case-price del {
      color: #8290a8;
      font-size: 14px
    }

    .case-price strong {
      font-size: 32px;
      line-height: 1;
      color: var(--blue);
      letter-spacing: -.06em
    }

    .featured .case-price strong {
      color: var(--yellow)
    }

    .case-save {
      margin: 16px 0 17px;
      padding: 13px;
      border-radius: 12px;
      background: #f3f7fe;
      font-weight: 900
    }

    .featured .case-save {
      background: rgba(255, 255, 255, .12)
    }

    .case p {
      margin: 0;
      color: var(--muted);
      font-size: 13px
    }

    .featured p {
      color: #d5e1f6
    }

    .case small {
      display: block;
      margin-top: 20px;
      color: #8996ac;
      font-size: 10px
    }

    .featured small {
      color: #9eb9ed
    }

    .coverage {
      background: var(--ink);
      color: #fff
    }

    .coverage-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 70px
    }

    .coverage-copy .section-title {
      font-size: clamp(28px, 3vw, 38px)
    }

    .coverage-copy .section-lead {
      color: #b7c5dc
    }

    .coverage-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
    }

    .coverage-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 14px;
      background: rgba(255, 255, 255, .045);
      font-weight: 800;
      font-size: 14px
    }

    .coverage-item i {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--ink);
      background: #70deff;
      font-style: normal
    }

    .seo-copy {
      margin-top: 42px;
      padding-top: 34px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      color: #b8c6dc;
      font-size: 14px;
      line-height: 2
    }

    .seo-copy h3 {
      color: #fff;
      font-size: 22px;
      margin: 0 0 14px
    }

    .seo-copy strong {
      color: #fff
    }

    .security {
      background: #fff
    }

    .security-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center
    }

    .security-visual {
      position: relative;
      min-height: 470px;
      display: grid;
      place-items: center
    }

    .shield {
      width: 340px;
      height: 350px;
      display: grid;
      place-items: center;
      clip-path: polygon(50% 0, 95% 17%, 88% 72%, 50% 100%, 12% 72%, 5% 17%);
      background: linear-gradient(145deg, var(--blue), #07246e);
      box-shadow: 0 40px 80px rgba(20, 87, 255, .25)
    }

    .shield-inner {
      width: 262px;
      height: 278px;
      display: grid;
      place-items: center;
      text-align: center;
      clip-path: inherit;
      background: #fff
    }

    .shield-inner strong {
      font-size: 26px
    }

    .shield-inner span {
      display: block;
      color: var(--blue);
      font-size: 54px;
      line-height: 1
    }

    .orbit {
      position: absolute;
      width: 460px;
      height: 460px;
      border: 1px dashed #b5c8ed;
      border-radius: 50%;
      animation: spin 18s linear infinite
    }

    .orbit i {
      position: absolute;
      width: 72px;
      height: 72px;
      display: grid;
      place-items: center;
      border: 1px solid #d5e2f5;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 15px 36px rgba(20, 58, 128, .13);
      font-style: normal;
      font-size: 11px;
      font-weight: 900;
      text-align: center
    }

    .orbit i:first-child {
      top: -24px;
      left: 194px
    }

    .orbit i:nth-child(2) {
      right: -24px;
      top: 194px
    }

    .orbit i:nth-child(3) {
      bottom: -24px;
      left: 194px
    }

    .orbit i:nth-child(4) {
      left: -24px;
      top: 194px
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .orbit i {
      animation: counter 18s linear infinite
    }

    @keyframes counter {
      to {
        transform: rotate(-360deg)
      }
    }

    .security-points {
      display: grid;
      gap: 10px;
      margin-top: 30px
    }

    .security-point {
      padding: 18px 20px;
      border: 1px solid #dce5f5;
      border-radius: 15px;
      background: #fff
    }

    .security-point summary {
      list-style: none;
      cursor: pointer;
      font-weight: 900;
      position: relative;
      padding-right: 30px
    }

    .security-point summary::-webkit-details-marker {
      display: none
    }

    .security-point summary::after {
      content: "+";
      position: absolute;
      right: 0;
      color: var(--blue);
      font-size: 22px;
      top: -5px
    }

    .security-point[open] summary::after {
      content: "−"
    }

    .security-point p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px
    }

    .faq {
      background: var(--pale)
    }

    .faq-grid {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 70px
    }

    .faq-copy {
      position: sticky;
      top: 118px;
      align-self: start
    }

    .faq-list {
      display: grid;
      gap: 10px
    }

    .faq-item {
      border: 1px solid #d8e3f5;
      border-radius: 16px;
      background: #fff;
      overflow: hidden
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 60px 22px 26px;
      font-weight: 900;
      position: relative
    }

    .faq-item summary::-webkit-details-marker {
      display: none
    }

    .faq-item summary::before {
      content: "Q";
      margin-right: 12px;
      color: var(--blue);
      font-size: 20px
    }

    .faq-item summary::after {
      content: "+";
      position: absolute;
      right: 24px;
      top: 16px;
      color: var(--blue);
      font-size: 28px
    }

    .faq-item[open] summary::after {
      content: "−"
    }

    .faq-item p {
      margin: 0;
      padding: 0 28px 24px 57px;
      color: var(--muted);
      font-size: 14px
    }

    .contact {
      overflow: hidden;
      color: #fff;
      background: linear-gradient(135deg, #06132f, #0b2d75)
    }

    .contact::before {
      content: "";
      position: absolute;
      right: -120px;
      top: -110px;
      width: 500px;
      height: 500px;
      border: 90px solid rgba(0, 199, 255, .08);
      border-radius: 50%
    }

    .contact-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: .84fr 1.16fr;
      gap: 65px;
      align-items: start
    }

    .contact-copy .section-lead {
      color: #c1cee2
    }

    .contact-checks {
      display: grid;
      gap: 10px;
      margin-top: 28px
    }

    .contact-checks span {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #d9e4f5;
      font-size: 14px;
      font-weight: 800
    }

    .contact-checks span::before {
      content: "✓";
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      color: var(--ink);
      background: var(--yellow);
      font-size: 12px;
      font-weight: 1000
    }

    .contact-form {
      padding: 34px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 25px;
      background: rgba(255, 255, 255, .09);
      backdrop-filter: blur(14px)
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px
    }

    .form-field.full {
      grid-column: 1/-1
    }

    .form-field label {
      display: block;
      margin-bottom: 6px;
      color: #e7eef9;
      font-size: 11px;
      font-weight: 900
    }

    .form-help {
      display: block;
      margin: -1px 0 8px;
      color: #9fb0ca;
      font-size: 9px;
      line-height: 1.55
    }

    .required {
      color: var(--yellow);
      margin-left: 5px
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 11px;
      padding: 13px 14px;
      color: #fff;
      background: rgba(1, 10, 29, .45);
      outline: 0
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: #8495b5
    }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      border-color: #6cdcff;
      box-shadow: 0 0 0 3px rgba(0, 199, 255, .12)
    }

    .form-field select option {
      color: #111
    }

    .file-upload {
      position: relative;
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 86px;
      margin: 0 !important;
      padding: 16px;
      border: 1px dashed rgba(108, 220, 255, .55);
      border-radius: 13px;
      color: #ddecff !important;
      background: rgba(1, 10, 29, .28);
      text-align: center;
      cursor: pointer;
      transition: .2s
    }

    .file-upload:hover {
      border-color: #6cdcff;
      background: rgba(0, 199, 255, .08)
    }

    .file-upload input {
      position: absolute;
      width: 1px !important;
      height: 1px;
      padding: 0 !important;
      opacity: 0
    }

    .file-upload-icon {
      display: grid;
      place-items: center;
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      color: #06132f;
      background: #6cdcff;
      font-size: 20px;
      font-weight: 1000
    }

    .file-upload-text strong {
      display: block;
      font-size: 12px
    }

    .file-upload-text small {
      display: block;
      margin-top: 4px;
      color: #9fb0ca;
      font-size: 9px
    }

    .file-list {
      display: grid;
      gap: 5px;
      margin-top: 8px;
      color: #c7d8f2;
      font-size: 9px
    }

    .file-list span {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 7px 9px;
      border-radius: 8px;
      background: rgba(1, 10, 29, .32)
    }

    .honeypot {
      position: absolute !important;
      left: -9999px !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important
    }

    .contact-form .btn {
      width: 100%;
      margin-top: 18px
    }

    .form-note {
      margin: 11px 0 0;
      color: #91a2bf;
      text-align: center;
      font-size: 10px
    }

    .form-note a {
      text-decoration: underline
    }

    .form-message {
      margin: 12px 0 0;
      color: #98ffd7;
      text-align: center;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.6
    }

    .form-message.error {
      color: #ffd0d0
    }

    .footer {
      padding: 42px 0 26px;
      color: #9ca9bf;
      background: #030b1c
    }

    .footer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px
    }

    .footer .brand-word {
      color: #fff
    }

    .footer .brand-service {
      color: #fff
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      font-size: 12px;
      font-weight: 800
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      font-size: 11px
    }

    .mobile-cta {
      display: none
    }

    .reveal {
      opacity: 1;
      transform: none
    }

    .js .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s ease, transform .7s ease
    }

    .js .reveal.in {
      opacity: 1;
      transform: none
    }

    @media(max-width:1050px) {
      .nav {
        display: none
      }

      .header-actions .btn-outline {
        display: none
      }

      .menu-button {
        display: block;
        margin-left: auto
      }

      .header-inner {
        gap: 12px
      }

      .header-actions {
        margin-left: auto
      }

      .mobile-menu {
        position: fixed;
        z-index: 999;
        inset: 78px 0 0;
        display: block;
        padding: 30px 20px;
        background: #fff;
        transform: translateX(100%);
        transition: .28s
      }

      .mobile-menu.open {
        transform: none
      }

      .mobile-menu nav {
        display: grid;
        gap: 4px
      }

      .mobile-menu nav a {
        padding: 16px;
        border-bottom: 1px solid var(--line);
        font-weight: 900
      }

      .mobile-menu .btn {
        margin-top: 22px;
        width: 100%
      }

      .hero-grid,
      .definition-grid,
      .reason-grid,
      .half-grid,
      .calculator-grid,
      .coverage-grid,
      .security-grid,
      .faq-grid,
      .contact-grid {
        grid-template-columns: minmax(0, 1fr)
      }

      .hero-copy {
        max-width: 780px
      }

      .hero-visual {
        min-height: 530px
      }

      .dashboard {
        max-width: 600px
      }

      .ai-bubble {
        right: -10px;
        top: -18px;
        width: 190px;
        padding: 13px
      }

      .human-bubble {
        left: -8px;
        bottom: 40px;
        width: 185px;
        padding: 13px
      }

      .saving-badge {
        width: 120px;
        height: 120px;
        border-width: 6px;
        right: 4px;
        bottom: -2px
      }

      .saving-badge strong {
        font-size: 30px
      }

      .definition-copy,
      .faq-copy {
        position: static
      }

      .reason-visual {
        order: 2
      }

      .migration-head {
        display: block
      }

      .migration-note {
        max-width: none;
        margin-top: 18px
      }

      .coverage-list {
        grid-template-columns: repeat(3, 1fr)
      }

      .case-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:760px) {
      html {
        scroll-padding-top: 70px
      }

      .container {
        width: min(calc(100% - 28px), var(--container))
      }

      .section {
        padding: 78px 0
      }

      .desktop-only {
        display: none
      }

      .mobile-only {
        display: block
      }

      .site-header .header-inner {
        height: 68px
      }

      .brand-word {
        font-size: 14px
      }

      .brand-service {
        font-size: 12px;
        gap: 6px
      }

      .brand-service .brand-type {
        font-size: 23px
      }

      .brand-service::before {
        height: 20px
      }

      .header-actions {
        display: none
      }

      .announcement {
        margin-top: 68px
      }

      .announcement-inner {
        min-height: 38px;
        font-size: 11px;
        gap: 7px
      }

      .hero {
        padding: 48px 0 64px
      }

      .hero-grid {
        gap: 20px
      }

      .hero-product {
        align-items: center;
        margin-bottom: 16px
      }

      .hero-product span {
        font-size: 14px;
        padding: 0
      }

      .hero h1 {
        font-size: 36px
      }

      .hero h1 .marker::after {
        height: 11px;
        bottom: 3px
      }

      .hero-lead {
        font-size: 15px;
        line-height: 1.9
      }

      .hero-actions {
        display: grid
      }

      .hero-actions .btn {
        width: 100%
      }

      .hero-proof {
        gap: 7px
      }

      .proof-chip {
        font-size: 10px;
        padding: 7px 9px
      }

      .hero-visual {
        min-height: 470px;
        margin-top: 10px
      }

      .dashboard {
        transform: none;
        border-radius: 18px
      }

      .dash-body {
        grid-template-columns: 82px 1fr;
        min-height: 330px
      }

      .dash-side {
        padding: 13px 8px
      }

      .dash-main {
        padding: 12px
      }

      .dash-nav span {
        font-size: 7px;
        height: 25px
      }

      .status-card {
        padding: 9px
      }

      .status-card strong {
        font-size: 13px
      }

      .graph {
        height: 65px
      }

      .ticket-list {
        grid-template-columns: 1fr
      }

      .ticket:nth-child(2) {
        display: none
      }

      .ai-bubble {
        right: -6px;
        top: -26px;
        width: 167px;
        padding: 11px
      }

      .human-bubble {
        left: -5px;
        bottom: -54px;
        width: 168px;
        padding: 11px
      }

      .saving-badge {
        width: 106px;
        height: 106px;
        border-width: 5px;
        right: 2px;
        bottom: -54px
      }

      .saving-badge strong {
        font-size: 28px
      }

      .logo-strip-inner {
        gap: 12px 20px;
        justify-content: flex-start
      }

      .logo-strip-inner b {
        width: 100%
      }

      .hero-product {
        gap: 10px
      }

      .hero-product span {
        font-size: 15px;
        padding-bottom: 4px
      }

      .hero-product .brand-type.hero-logo {
        font-size: 58px
      }

      .section-title {
        font-size: 34px
      }

      .section-lead {
        font-size: 15px;
        line-height: 1.9
      }

      .pain-grid,
      .case-grid {
        grid-template-columns: 1fr
      }

      .pain {
        min-height: auto
      }

      .problem-answer {
        font-size: 24px;
        text-align: left
      }

      .definition::before {
        font-size: 220px
      }

      .definition-step {
        grid-template-columns: 54px 1fr;
        padding: 24px 20px
      }

      .step-number {
        font-size: 30px
      }

      .definition-step h3 {
        font-size: 20px
      }

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

      .cost-column {
        grid-template-columns: 1fr 38px 1fr;
        gap: 8px
      }

      .cost-box {
        padding: 20px 8px
      }

      .cost-box strong {
        font-size: 28px
      }

      .migration-head {
        display: block
      }

      .migration-head .section-title {
        font-size: 28px
      }

      .cases-head .section-title {
        font-size: 26px
      }

      .coverage-copy .section-title {
        font-size: 28px
      }

      .contact-copy .section-title {
        font-size: 28px
      }

      .cta-band h2 {
        font-size: 21px
      }

      .timeline {
        padding: 25px 20px
      }

      .timeline::before {
        left: 35px;
        right: auto;
        top: 50px;
        bottom: 50px;
        width: 4px;
        height: auto
      }

      .timeline-grid {
        grid-template-columns: 1fr;
        gap: 20px
      }

      .phase {
        display: grid;
        grid-template-columns: 66px 1fr;
        text-align: left;
        gap: 16px
      }

      .phase-dot {
        width: 58px;
        height: 58px;
        margin: 0
      }

      .phase small {
        display: block
      }

      .parallel-note {
        position: relative;
        z-index: 1;
        text-align: left;
        font-size: 13px
      }

      .cta-band-inner {
        display: block
      }

      .cta-band-actions {
        display: grid;
        margin-top: 24px
      }

      .calc-panel {
        padding: 23px
      }

      .choice-grid {
        grid-template-columns: 1fr
      }

      .calc-question {
        padding: 15px
      }

      .calc-results {
        grid-template-columns: 1fr
      }

      .case.featured {
        transform: none
      }

      .coverage-list {
        grid-template-columns: 1fr 1fr
      }

      .coverage-item {
        font-size: 12px;
        padding: 13px
      }

      .security-visual {
        min-height: 390px
      }

      .shield {
        width: 235px;
        height: 285px
      }

      .shield-inner {
        width: 180px;
        height: 222px
      }

      .orbit {
        width: 330px;
        height: 330px
      }

      .orbit i {
        width: 60px;
        height: 60px
      }

      .orbit i:first-child {
        left: 135px
      }

      .orbit i:nth-child(2) {
        top: 135px
      }

      .orbit i:nth-child(3) {
        left: 135px
      }

      .orbit i:nth-child(4) {
        top: 135px
      }

      .faq-grid {
        gap: 38px
      }

      .faq-item summary {
        padding: 20px 48px 20px 18px;
        font-size: 14px
      }

      .faq-item p {
        padding: 0 20px 22px 48px
      }

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

      .contact-form {
        padding: 22px
      }

      .footer-top,
      .footer-bottom {
        display: block
      }

      .footer-links {
        margin-top: 20px
      }

      .footer-bottom span {
        display: block;
        margin-top: 6px
      }

      .mobile-cta {
        position: fixed;
        z-index: 900;
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: .7fr 1.3fr;
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(12, 48, 124, .12);
        border-radius: 16px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 14px 45px rgba(5, 26, 71, .22);
        backdrop-filter: blur(14px)
      }

      .mobile-cta .btn {
        min-height: 48px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 10px
      }

      .footer {
        padding-bottom: 100px
      }
    }

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

      .reveal {
        opacity: 1;
        transform: none;
        transition: none
      }

      .ai-bubble,
      .human-bubble,
      .orbit,
      .orbit i {
        animation: none
      }
    }

    .compare {
      background: var(--pale)
    }

    .compare-head {
      text-align: center;
      max-width: 850px;
      margin: 0 auto
    }

    .compare-wrap {
      margin-top: 52px
    }

    .compare-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 23px;
      background: #fff;
      box-shadow: var(--shadow);
      font-size: 15px;
      line-height: 1.7
    }

    .compare-table th,
    .compare-table td {
      padding: 20px 22px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top
    }

    .compare-table tbody tr:last-child th,
    .compare-table tbody tr:last-child td {
      border-bottom: 0
    }

    .compare-table thead th {
      color: var(--muted);
      background: #f8faff;
      font-size: 14px;
      font-weight: 900
    }

    .compare-table tbody th {
      width: 17%;
      color: var(--ink);
      font-weight: 900;
      white-space: nowrap
    }

    .compare-table td {
      color: #4d5c77
    }

    .compare-table .is-ours {
      color: var(--ink);
      background: var(--pale-2);
      font-weight: 700
    }

    .compare-table thead .is-ours {
      color: #fff;
      background: var(--blue)
    }

    .compare-note {
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 12px
    }

    .company {
      background: #fff
    }

    .company-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 64px;
      align-items: start
    }

    .company-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 24px;
      margin: 24px 0 0;
      font-size: 14px;
      font-weight: 900
    }

    .company-links a {
      color: var(--blue)
    }

    .company-table {
      margin: 0;
      border-top: 2px solid var(--ink)
    }

    .company-table > div {
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 16px;
      padding: 18px 0;
      border-bottom: 1px solid var(--line)
    }

    .company-table dt {
      font-weight: 900
    }

    .company-table dd {
      margin: 0;
      color: #4d5c77
    }

    @media(max-width:1050px) {
      .company-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }
    }

    @media(max-width:760px) {
      .compare-wrap {
        margin-top: 36px
      }

      .compare-table,
      .compare-table tbody,
      .compare-table tr,
      .compare-table th,
      .compare-table td {
        display: block;
        width: 100%
      }

      .compare-table {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 14px
      }

      .compare-table thead {
        display: none
      }

      .compare-table tbody tr {
        margin-bottom: 16px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff
      }

      .compare-table tbody th {
        width: 100%;
        padding: 14px 18px;
        color: #fff;
        background: var(--ink);
        white-space: normal
      }

      .compare-table td {
        display: grid;
        grid-template-columns: 7.5em 1fr;
        gap: 12px;
        padding: 12px 18px
      }

      .compare-table tbody tr td:last-child {
        border-bottom: 0
      }

      .compare-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 900
      }

      .compare-table td.is-ours::before {
        color: var(--blue)
      }

      .company-table > div {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 0
      }
    }

    .company-logo {
      display: block;
      width: 240px;
      height: auto;
      margin-top: 28px
    }

    @media(max-width:760px) {
      .company-logo {
        width: 200px;
        margin-top: 22px
      }
    }

    .brand-logo {
      display: block;
      width: auto;
      height: 31px
    }

    .site-header .brand {
      gap: 14px
    }

    .site-header .brand-service .brand-type {
      font-size: 28px
    }

    @media(max-width:760px) {
      .brand-logo {
        height: 23px
      }

      .site-header .brand {
        gap: 9px
      }

      .site-header .brand-service .brand-type {
        font-size: 22px
      }
    }

    .announcement-inner b,
    .announcement-inner span {
      white-space: nowrap
    }

    @media(max-width:400px) {
      .announcement-inner {
        font-size: 10px;
        letter-spacing: -.03em;
        flex-wrap: wrap;
        gap: 0 6px;
        padding-block: 4px
      }
    }

    @media(max-width:760px) {
      .problem-head .section-title {
        font-size: min(34px, 8.6vw)
      }
    }

    @media(max-width:400px) {
      .security-visual {
        zoom: .87
      }
    }

    @media(max-width:356px) {
      .security-visual {
        zoom: .76
      }
    }

    .coverage-item > span {
      min-width: 0;
      overflow-wrap: anywhere
    }

    .coverage-item > span > span {
      display: inline-block
    }

    @media(max-width:760px) {
      .coverage-list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .coverage-item {
        gap: 8px;
        padding: 12px;
        font-size: 11px
      }
    }

    @media(max-width:360px) {
      .coverage-list {
        grid-template-columns: minmax(0, 1fr)
      }

      .coverage-item {
        font-size: 12px
      }
    }

    .thanks {
      padding-top: 78px;
      background: linear-gradient(180deg, #fff 0%, var(--pale) 100%)
    }

    .thanks-inner {
      max-width: 760px
    }

    .thanks-box {
      margin-top: 40px;
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: 23px;
      background: #fff;
      box-shadow: var(--shadow)
    }

    .thanks-box h2 {
      margin: 0 0 18px;
      font-size: 20px
    }

    .thanks-steps {
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: step
    }

    .thanks-steps li {
      position: relative;
      padding: 0 0 18px 48px;
      counter-increment: step
    }

    .thanks-steps li:last-child {
      padding-bottom: 0
    }

    .thanks-steps li::before {
      content: counter(step, decimal-leading-zero);
      position: absolute;
      top: 0;
      left: 0;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: #fff;
      background: var(--blue);
      font-size: 12px;
      font-weight: 900
    }

    .thanks-steps b {
      display: block;
      font-size: 16px
    }

    .thanks-steps span {
      display: block;
      color: var(--muted);
      font-size: 14px
    }

    .thanks .condition-box a {
      color: var(--blue);
      text-decoration: underline;
      overflow-wrap: anywhere
    }

    .thanks-back {
      margin-top: 36px
    }

    @media(max-width:760px) {
      .thanks {
        padding-top: 68px
      }

      .thanks-box {
        padding: 22px
      }

      .thanks .section-title {
        font-size: min(34px, 8.6vw)
      }
    }

    .thanks + .footer .footer-bottom {
      margin-top: 0;
      padding-top: 0;
      border-top: 0
    }

    .consent {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 22px;
      color: #e7eef9;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer
    }

    .consent input {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      margin: 0;
      accent-color: var(--yellow);
      cursor: pointer
    }

    .consent a {
      color: #6cdcff;
      text-decoration: underline
    }

    .consent .required {
      font-size: 11px
    }

    @media(max-width:360px) {
      .consent {
        font-size: 12px
      }
    }

    .contact-copy .section-title .phrase {
      display: inline-block
    }

    @media(min-width:761px) {
      .contact-copy .section-title {
        font-size: clamp(34px, 3.6vw, 46px)
      }
    }

    @media(max-width:760px) {
      .contact-copy .section-title {
        font-size: min(34px, 8.6vw)
      }
    }

    .turnstile-box {
      display: flex;
      justify-content: center;
      min-height: 65px;
      margin-top: 16px
    }