:root {
      --ink: #102536;
      --muted: #5c6b76;
      --blue: #006f9f;
      --deep: #06324b;
      --line: #d7e2e8;
      --soft: #f4f8fa;
      --gold: #8a7800;
      --white: #ffffff;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #eef4f7;
      color: var(--ink);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.62;
    }

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

    .page {
      max-width: 1000px;
      margin: 0 auto;
      background: var(--white);
      box-shadow: 0 18px 48px rgba(7, 47, 70, 0.12);
    }

    .hero {
      display: grid;
      grid-template-columns: 1.02fr 0.98fr;
      gap: 32px;
      align-items: center;
      padding: 42px 42px 34px;
      background: linear-gradient(135deg, #fafdff 0%, #e8f5f9 52%, #ffffff 100%);
    }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--blue);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 14px;
      font-size: clamp(34px, 4.4vw, 58px);
      line-height: 1.06;
      color: var(--deep);
    }

    h2 {
      margin-bottom: 14px;
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.15;
      color: var(--deep);
    }

    h3 {
      margin-bottom: 10px;
      font-size: 21px;
      line-height: 1.25;
      color: var(--deep);
    }

    .lead {
      margin-bottom: 22px;
      font-size: 18px;
      color: #314858;
    }

    .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .badges li {
      padding: 8px 12px;
      border: 1px solid #b7dce8;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.76);
      color: #16445d;
      font-size: 14px;
      font-weight: 700;
    }

    .image-frame {
      margin: 0;
      overflow: hidden;
      border-radius: 10px;
      background: #ffffff;
    }

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

    .image-frame.ratio-750-930 {
      aspect-ratio: 750 / 930;
    }

    .image-frame.ratio-750-930 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .image-frame.ratio-750-1338 {
      aspect-ratio: 750 / 1338;
    }

    .image-frame.ratio-750-1338 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .image-frame.ratio-750-1000 {
      aspect-ratio: 750 / 1000;
    }

    .image-frame.ratio-750-1000 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .image-frame.ratio-750-1300 {
      aspect-ratio: 750 / 1300;
    }

    .image-frame.ratio-750-1300 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .section {
      padding: 42px;
      border-top: 1px solid var(--line);
    }

    .section.alt {
      background: var(--soft);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      gap: 34px;
      align-items: center;
    }

    .feature-list {
      display: grid;
      gap: 12px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .feature-list li {
      position: relative;
      padding-left: 28px;
      color: #243f51;
    }

    .feature-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.58em;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 5px rgba(0, 111, 159, 0.12);
    }

    .parameter-table {
      width: 100%;
      margin-top: 20px;
      border-collapse: collapse;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #ffffff;
      font-size: 16px;
    }

    .parameter-table th,
    .parameter-table td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      text-align: left;
    }

    .parameter-table th {
      width: 46%;
      color: var(--gold);
      font-weight: 700;
    }

    .parameter-table tr:last-child th,
    .parameter-table tr:last-child td {
      border-bottom: 0;
    }

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

    .card {
      min-height: 124px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
    }

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

    .notice {
      margin-top: 24px;
      padding: 16px 18px;
      border-left: 4px solid var(--blue);
      background: #eef8fb;
      color: #24485b;
      font-size: 15px;
    }

    .offer-box {
      margin-top: 24px;
      padding: 20px;
      border: 1px solid #b7dce8;
      border-radius: 10px;
      background: #f4fbfe;
    }

    .offer-box strong {
      color: var(--deep);
      font-size: 26px;
    }

    .faq-section {
      padding: 42px;
      border-top: 1px solid var(--line);
      background: #ffffff;
    }

    .faq-section h2 {
      text-align: center;
      margin-bottom: 26px;
    }

    details {
      margin-bottom: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbfc;
      overflow: hidden;
    }

    summary {
      cursor: pointer;
      padding: 16px 18px;
      color: var(--deep);
      font-weight: 700;
      list-style: none;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "+";
      float: right;
      color: var(--blue);
      font-size: 22px;
      line-height: 1;
    }

    details[open] summary::after {
      content: "−";
    }

    details p {
      margin: 0;
      padding: 0 18px 18px;
      color: #314858;
    }

    .cta {
      padding: 34px 42px 42px;
      background: #062e46;
      color: #eaf8fc;
      text-align: center;
    }

    .cta h2 {
      color: #ffffff;
    }

    .cta p {
      max-width: 720px;
      margin: 0 auto;
      color: #c9e3ec;
    }

    @media (max-width: 760px) {
      .hero,
      .grid-2,
      .cards {
        grid-template-columns: 1fr;
      }

      .hero,
      .section,
      .faq-section,
      .cta {
        padding-left: 20px;
        padding-right: 20px;
      }

      .parameter-table {
        font-size: 14px;
      }

      .parameter-table th,
      .parameter-table td {
        padding: 12px;
      }
    }