:root {
      --bg: #f5fbff;
      --surface: #ffffff;
      --surface-2: #eef8ff;
      --text: #10233f;
      --muted: #58708d;
      --line: #d9e8f5;
      --primary: #0d7cc1;
      --primary-dark: #08598d;
      --accent: #18a3ff;
      --success: #e8f8f0;
      --shadow: 0 10px 30px rgba(16, 35, 63, 0.08);
      --radius: 22px;
      --container: 1200px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, Arial, Helvetica, sans-serif;
      color: var(--text);
      background: linear-gradient(180deg, #f7fcff 0%, #eef8ff 45%, #ffffff 100%);
      line-height: 1.65;
    }

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

    a {
      color: var(--primary);
      text-decoration: none;
    }

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

    .section {
      padding: 72px 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border: 1px solid rgba(13, 124, 193, 0.18);
      background: rgba(255,255,255,0.8);
      color: var(--primary-dark);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1.06fr .94fr;
      gap: 36px;
      align-items: center;
    }

    .hero {
      padding: 28px 0 42px;
      position: relative;
      overflow: hidden;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      filter: blur(12px);
      z-index: 0;
    }

    .hero::before {
      width: 360px;
      height: 360px;
      background: rgba(24, 163, 255, 0.14);
      top: -90px;
      right: -80px;
    }

    .hero::after {
      width: 280px;
      height: 280px;
      background: rgba(13, 124, 193, 0.08);
      bottom: -60px;
      left: -50px;
    }

    .hero-inner,
    .section-inner { position: relative; z-index: 1; }

    .breadcrumbs {
      font-size: 14px;
      color: var(--muted);
      margin: 10px 0 26px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .breadcrumbs span.sep { color: #9db2c6; }

    h1 {
      margin: 18px 0 16px;
      font-size: clamp(2rem, 4.6vw, 3.7rem);
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

    .lead {
      font-size: 1.08rem;
      color: var(--muted);
      max-width: 60ch;
      margin-bottom: 28px;
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin: 28px 0;
    }

    .hero-point,
    .feature-card,
    .spec-card,
    .faq-item,
    .mini-card,
    .protocol-card,
    .application-card,
    .contact-card {
      background: rgba(255,255,255,0.9);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .hero-point {
      padding: 18px;
    }

    .hero-point strong {
      display: block;
      font-size: 1rem;
      margin-bottom: 6px;
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 700;
      transition: all .25s ease;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      color: #fff;
      box-shadow: 0 12px 24px rgba(13, 124, 193, 0.2);
    }

    .btn-secondary {
      background: #fff;
      color: var(--primary-dark);
      border-color: var(--line);
    }

    .hero-media {
      background: linear-gradient(180deg, #ffffff 0%, #edf7ff 100%);
      border: 1px solid var(--line);
      border-radius: 30px;
      padding: 22px;
      box-shadow: var(--shadow);
    }

    .hero-figure {
      aspect-ratio: 1 / 1;
      border-radius: 24px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid #e9f2f9;
      padding: 18px;
    }

    .hero-figure img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .thumbs {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .thumb {
      aspect-ratio: 1 / 1;
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid #e6eff7;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
    }

    .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
    }

    .stats-strip {
      margin-top: 42px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .mini-card {
      padding: 22px;
      text-align: center;
    }

    .mini-card strong {
      display: block;
      font-size: 1.6rem;
      color: var(--primary-dark);
      line-height: 1.1;
      margin-bottom: 8px;
    }

    .section-title {
      max-width: 780px;
      margin-bottom: 22px;
    }

    h2 {
      font-size: clamp(1.7rem, 3vw, 2.6rem);
      line-height: 1.15;
      margin: 16px 0 14px;
      letter-spacing: -0.025em;
    }

    .section-subtitle {
      color: var(--muted);
      max-width: 68ch;
    }

    .features-grid,
    .applications-grid,
    .protocols-grid,
    .faq-grid,
    .contact-grid {
      display: grid;
      gap: 18px;
    }

    .features-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 28px;
    }

    .feature-card {
      padding: 24px;
      min-height: 100%;
    }

    .feature-card h3,
    .application-card h3,
    .protocol-card h3,
    .contact-card h3 {
      margin: 0 0 10px;
      font-size: 1.1rem;
    }

    .feature-icon {
      width: 52px;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(24,163,255,.16), rgba(13,124,193,.08));
      color: var(--primary-dark);
      font-weight: 800;
      margin-bottom: 18px;
    }

    .split-panel {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 28px;
      align-items: stretch;
      margin-top: 30px;
    }

    .media-card,
    .spec-card {
      background: rgba(255,255,255,0.9);
      border: 1px solid var(--line);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .media-frame {
      aspect-ratio: 4 / 3;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .media-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .media-caption {
      padding: 18px 22px 22px;
      color: var(--muted);
      font-size: .98rem;
    }

    .spec-card {
      padding: 26px;
    }

    .spec-table-wrap {
      width: 100%;
      overflow-x: auto;
      border-radius: 18px;
      border: 1px solid #e5eef7;
      background: #fff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 560px;
    }

    th, td {
      padding: 15px 16px;
      text-align: left;
      border-bottom: 1px solid #e8f0f7;
      vertical-align: top;
      font-size: .98rem;
    }

    th {
      width: 34%;
      background: #f7fbff;
      color: var(--primary-dark);
      font-weight: 700;
    }

    tr:last-child th,
    tr:last-child td { border-bottom: none; }

    .note {
      font-size: .95rem;
      color: var(--muted);
      margin-top: 14px;
    }

    .applications-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 24px;
    }

    .application-card {
      overflow: hidden;
    }

    .application-card .media-frame { aspect-ratio: 4 / 3; }
    .application-content { padding: 20px 22px 24px; }

    .protocols-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 22px;
    }

    .protocol-card {
      padding: 24px;
    }

    .protocol-card ul,
    .contact-card ul {
      padding-left: 18px;
      margin: 10px 0 0;
    }

    .faq-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 24px;
    }

    .faq-item {
      padding: 22px 22px 20px;
    }

    .faq-item h3 {
      margin: 0 0 10px;
      font-size: 1.02rem;
    }

    .contact-grid {
      grid-template-columns: 1.15fr .85fr;
      align-items: stretch;
      margin-top: 28px;
    }

    .contact-card {
      padding: 28px;
    }

    .contact-card p:last-child { margin-bottom: 0; }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 18px 0 0;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      background: var(--surface-2);
      border: 1px solid #d9ecfb;
      color: var(--primary-dark);
      font-size: .92rem;
      font-weight: 600;
    }

    .footer {
      padding: 28px 0 48px;
      color: var(--muted);
      font-size: .95rem;
    }

    @media (max-width: 1100px) {
      .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .applications-grid,
      .protocols-grid,
      .faq-grid,
      .contact-grid,
      .grid-2,
      .split-panel { grid-template-columns: 1fr; }
      .hero-points { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      .section { padding: 54px 0; }
      .container { width: min(var(--container), calc(100% - 20px)); }
      .hero { padding-top: 18px; }
      .hero-points,
      .stats-strip,
      .features-grid,
      .applications-grid,
      .protocols-grid,
      .faq-grid { grid-template-columns: 1fr; }
      .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-figure,
      .media-frame { aspect-ratio: auto; min-height: 260px; }
      h1 { font-size: clamp(2rem, 9vw, 3rem); }
      .btn { width: 100%; }
      table { min-width: 520px; }
    }