:root {
    --blue: #0b63b6;
    --deep: #073763;
    --ice: #eef8ff;
    --soft: #f7fbff;
    --text: #1c2733;
    --muted: #667789;
    --line: #dceaf5;
    --white: #ffffff;
    --radius: 28px;
    --shadow: 0 22px 60px rgba(7, 55, 99, 0.12);
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #ffffff;
    line-height: 1.65;
  }

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

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .page {
    overflow: hidden;
    background: #ffffff;
  }

  .container {
    width: min(1200px, calc(100% - 36px));
    margin: 0 auto;
  }

  .image-frame {
    width: 100%;
    aspect-ratio: 1200 / 900;
    overflow: hidden;
    border-radius: 26px;
    background: #f1f6fb;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .image-frame img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .image-contain img {
    object-fit: contain;
    padding: 10px;
  }

  .image-cover img {
    object-fit: cover;
  }

  .hero {
    position: relative;
    background:
      radial-gradient(circle at 82% 18%, rgba(61, 165, 255, 0.22), transparent 34%),
      linear-gradient(135deg, #f7fcff 0%, #eaf7ff 48%, #ffffff 100%);
    padding: 70px 0 54px;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 42px;
    align-items: center;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--blue);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(11, 99, 182, 0.08);
    margin-bottom: 20px;
  }

  h1 {
    margin: 0;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.98;
    letter-spacing: -2.4px;
    color: var(--deep);
  }

  .hero-lead {
    margin: 24px 0 0;
    font-size: 19px;
    color: #43566a;
    max-width: 680px;
  }

  .price-card {
    margin-top: 30px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
  }

  .price-label {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .price {
    font-size: 34px;
    font-weight: 900;
    color: var(--blue);
    line-height: 1;
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 800;
    transition: 0.25s ease;
  }

  .btn-primary {
    background: var(--blue);
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(11, 99, 182, 0.28);
  }

  .btn-secondary {
    background: #ffffff;
    color: var(--deep);
    border: 1px solid var(--line);
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .hero-visual {
    position: relative;
  }

  .hero-image-card {
    background: #ffffff;
    border-radius: 34px;
    padding: 18px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
  }

  .hero-image-card .image-frame {
    aspect-ratio: 1200 / 900;
    border-radius: 24px;
  }

  .floating-spec {
    position: absolute;
    left: -20px;
    bottom: 26px;
    width: 220px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 18px 45px rgba(7, 55, 99, 0.16);
  }

  .floating-spec strong {
    display: block;
    color: var(--deep);
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
  }

  .floating-spec span {
    color: var(--muted);
    font-size: 14px;
  }

  .trust-strip {
    background: var(--deep);
    color: #ffffff;
    padding: 18px 0;
  }

  .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    text-align: center;
  }

  .trust-item {
    font-weight: 700;
    font-size: 15px;
    color: rgba(255,255,255,0.92);
  }

  .section {
    padding: 78px 0;
  }

  .section-soft {
    background: linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
  }

  .section-head {
    max-width: 760px;
    margin-bottom: 36px;
  }

  .section-kicker {
    color: var(--blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    margin-bottom: 10px;
  }

  h2 {
    margin: 0;
    color: var(--deep);
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.08;
    letter-spacing: -1.2px;
  }

  .section-head p {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 17px;
  }

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

  .benefit-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 26px 22px;
    box-shadow: 0 14px 36px rgba(7, 55, 99, 0.07);
  }

  .benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--ice);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-size: 24px;
    margin-bottom: 18px;
  }

  .benefit-card h3 {
    margin: 0 0 10px;
    color: var(--deep);
    font-size: 20px;
  }

  .benefit-card p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
  }

  .image-module {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: center;
    margin-bottom: 44px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 34px;
    padding: 24px;
    box-shadow: 0 18px 50px rgba(7, 55, 99, 0.08);
  }

  .image-module:nth-child(even) .module-image {
    order: 2;
  }

  .module-image {
    width: 100%;
  }

  .module-content {
    padding: 10px 18px;
  }

  .module-tag {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--ice);
    color: var(--blue);
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 14px;
  }

  .module-content h3 {
    margin: 0;
    color: var(--deep);
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.6px;
  }

  .module-content p {
    color: var(--muted);
    margin: 16px 0 0;
  }

  .module-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }

  .module-list li {
    position: relative;
    padding-left: 28px;
    color: #34495e;
  }

  .module-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--blue);
    font-weight: 900;
  }

  .spec-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 34px;
    align-items: start;
  }

  .spec-panel {
    background: var(--deep);
    color: #ffffff;
    border-radius: 34px;
    padding: 36px;
    position: sticky;
    top: 24px;
  }

  .spec-panel h2 {
    color: #ffffff;
  }

  .spec-panel p {
    color: rgba(255,255,255,0.78);
    margin: 18px 0 0;
  }

  .spec-table {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(7, 55, 99, 0.08);
  }

  .spec-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    border-bottom: 1px solid var(--line);
  }

  .spec-row:last-child {
    border-bottom: 0;
  }

  .spec-name {
    background: #f4f9fd;
    color: var(--deep);
    font-weight: 800;
    padding: 17px 20px;
  }

  .spec-value {
    padding: 17px 20px;
    color: #3d4f60;
  }

  .workflow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: steps;
  }

  .step {
    counter-increment: steps;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 26px 22px;
    box-shadow: 0 12px 34px rgba(7, 55, 99, 0.06);
  }

  .step::before {
    content: "0" counter(steps);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: var(--blue);
    color: #ffffff;
    font-weight: 900;
    margin-bottom: 18px;
  }

  .step h3 {
    margin: 0 0 10px;
    color: var(--deep);
    font-size: 20px;
  }

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

  .compare-box {
    background:
      radial-gradient(circle at 90% 20%, rgba(55, 158, 255, 0.18), transparent 32%),
      linear-gradient(135deg, #073763, #0b63b6);
    color: #ffffff;
    border-radius: 38px;
    padding: 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    overflow: hidden;
  }

  .compare-box h2 {
    color: #ffffff;
  }

  .compare-box p {
    color: rgba(255,255,255,0.82);
    margin-top: 16px;
  }

  .compare-list {
    display: grid;
    gap: 14px;
  }

  .compare-item {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 20px;
    padding: 18px;
    backdrop-filter: blur(8px);
  }

  .compare-item strong {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
  }

  .compare-item span {
    color: rgba(255,255,255,0.78);
    font-size: 14px;
  }

  .faq-wrap {
    display: grid;
    gap: 14px;
  }

  details {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 20px 22px;
    box-shadow: 0 10px 26px rgba(7, 55, 99, 0.05);
  }

  summary {
    cursor: pointer;
    color: var(--deep);
    font-weight: 900;
    font-size: 17px;
  }

  details p {
    margin: 12px 0 0;
    color: var(--muted);
  }

  .final-cta {
    padding: 72px 0;
    background:
      radial-gradient(circle at 15% 50%, rgba(255,255,255,0.18), transparent 32%),
      linear-gradient(135deg, #06294a, #0b63b6);
    color: #ffffff;
    text-align: center;
  }

  .final-cta h2 {
    color: #ffffff;
    max-width: 820px;
    margin: 0 auto;
  }

  .final-cta p {
    max-width: 680px;
    margin: 18px auto 0;
    color: rgba(255,255,255,0.82);
    font-size: 18px;
  }

  .final-cta .btn {
    margin-top: 28px;
    background: #ffffff;
    color: var(--deep);
  }

  @media (max-width: 980px) {
    .hero-grid,
    .image-module,
    .spec-layout,
    .compare-box {
      grid-template-columns: 1fr;
    }

    .image-module:nth-child(even) .module-image {
      order: 0;
    }

    .trust-grid,
    .benefit-grid,
    .workflow {
      grid-template-columns: repeat(2, 1fr);
    }

    .floating-spec {
      position: static;
      margin-top: 16px;
      width: 100%;
    }

    .spec-panel {
      position: static;
    }
  }

  @media (max-width: 620px) {
    .container {
      width: min(100% - 24px, 1200px);
    }

    .hero {
      padding: 46px 0 42px;
    }

    h1 {
      letter-spacing: -1.2px;
      font-size: clamp(34px, 10vw, 48px);
    }

    h2 {
      font-size: clamp(28px, 8vw, 38px);
    }

    .hero-lead {
      font-size: 16px;
    }

    .section {
      padding: 54px 0;
    }

    .trust-grid,
    .benefit-grid,
    .workflow {
      grid-template-columns: 1fr;
    }

    .image-module {
      padding: 16px;
      border-radius: 24px;
      gap: 22px;
    }

    .image-frame {
      border-radius: 18px;
    }

    .module-content {
      padding: 4px 0;
    }

    .module-content h3 {
      font-size: 25px;
    }

    .spec-row {
      grid-template-columns: 1fr;
    }

    .compare-box {
      padding: 28px 22px;
      border-radius: 28px;
    }

    .btn {
      width: 100%;
    }
  }