/* =========================================
       GLOBAL STYLES
       All classes use vk- prefix
    ========================================= */

    .vk-product-page {
      --vk-primary: #153e68;
      --vk-primary-dark: #102d4b;
      --vk-accent: #18a5a5;
      --vk-text: #202b38;
      --vk-muted: #647181;
      --vk-light: #f4f7fa;
      --vk-border: #e0e6ed;
      --vk-white: #ffffff;

      width: 100%;
      color: var(--vk-text);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      overflow: hidden;
      background: var(--vk-white);
    }

    .vk-product-page *,
    .vk-product-page *::before,
    .vk-product-page *::after {
      box-sizing: border-box;
    }

    .vk-product-page img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
    }

    .vk-container {
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
    }

    .vk-section {
      padding: 76px 0;
    }

    .vk-section-light {
      background: var(--vk-light);
    }

    .vk-eyebrow {
      margin: 0 0 12px;
      color: var(--vk-accent);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.8px;
      text-transform: uppercase;
    }

    .vk-section-heading {
      max-width: 800px;
      margin: 0 auto 42px;
      text-align: center;
    }

    .vk-section-heading h2 {
      margin: 0 0 16px;
      color: var(--vk-primary-dark);
      font-size: clamp(27px, 3.4vw, 40px);
      line-height: 1.2;
      font-weight: 750;
    }

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

    .vk-product-page h1,
    .vk-product-page h2,
    .vk-product-page h3,
    .vk-product-page p {
      overflow-wrap: anywhere;
    }

    .vk-product-page a {
      color: inherit;
    }

    /* =========================================
       HERO SECTION
    ========================================= */

    .vk-hero {
      position: relative;
      padding: 72px 0;
      background:
        radial-gradient(
          circle at 85% 30%,
          rgba(24, 165, 165, 0.13),
          transparent 32%
        ),
        linear-gradient(135deg, #f4f8fc 0%, #eaf1f7 100%);
    }

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

    .vk-hero-content h1 {
      margin: 0 0 22px;
      color: var(--vk-primary-dark);
      font-size: clamp(34px, 4.2vw, 54px);
      line-height: 1.12;
      letter-spacing: -1.2px;
    }

    .vk-hero-description {
      margin: 0 0 26px;
      color: #536375;
      font-size: 17px;
      line-height: 1.8;
    }

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

    .vk-hero-tags li {
      padding: 8px 13px;
      border: 1px solid #d5e2ec;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.78);
      color: var(--vk-primary);
      font-size: 13px;
      font-weight: 700;
    }

    .vk-hero-image-wrap {
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.65);
      box-shadow: 0 20px 55px rgba(21, 62, 104, 0.1);
    }

    .vk-image-hero {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: contain;
      border-radius: 10px;
      background: #e9eef3;
    }

    /* =========================================
       QUICK SPECIFICATION STRIP
    ========================================= */

    .vk-quick-specs {
      position: relative;
      z-index: 2;
      margin-top: -1px;
      background: var(--vk-primary-dark);
      color: var(--vk-white);
    }

    .vk-quick-specs-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .vk-quick-spec {
      padding: 25px 18px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.16);
    }

    .vk-quick-spec:last-child {
      border-right: 0;
    }

    .vk-quick-spec strong {
      display: block;
      margin-bottom: 5px;
      color: #ffffff;
      font-size: 25px;
      line-height: 1.25;
    }

    .vk-quick-spec span {
      color: #d4e2ee;
      font-size: 13px;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    .vk-intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 54px;
    }

    .vk-intro-image {
      overflow: hidden;
      border-radius: 12px;
      background: #edf1f5;
    }

    .vk-intro-image img {
      aspect-ratio: 5 / 4;
      object-fit: cover;
    }

    .vk-intro-content h2 {
      margin: 0 0 20px;
      color: var(--vk-primary-dark);
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.25;
    }

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

    .vk-check-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 20px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }

    .vk-check-list li {
      position: relative;
      padding-left: 25px;
      color: var(--vk-text);
      font-size: 14px;
      font-weight: 600;
    }

    .vk-check-list li::before {
      position: absolute;
      top: 0;
      left: 0;
      color: var(--vk-accent);
      content: "✓";
      font-weight: 800;
    }

    /* =========================================
       KEY FEATURES
    ========================================= */

    .vk-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .vk-feature-card {
      height: 100%;
      overflow: hidden;
      border: 1px solid var(--vk-border);
      border-radius: 12px;
      background: var(--vk-white);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .vk-feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(16, 45, 75, 0.09);
    }

    .vk-feature-image {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      background: #e8edf2;
    }

    .vk-feature-content {
      padding: 23px;
    }

    .vk-feature-content h3 {
      margin: 0 0 10px;
      color: var(--vk-primary-dark);
      font-size: 20px;
      line-height: 1.35;
    }

    .vk-feature-content p {
      margin: 0;
      color: var(--vk-muted);
      font-size: 14px;
      line-height: 1.8;
    }

    .vk-feature-label {
      display: inline-block;
      margin-bottom: 12px;
      color: var(--vk-accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.3px;
      text-transform: uppercase;
    }

    /* =========================================
       INDUSTRIAL DESIGN
    ========================================= */

    .vk-design-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      align-items: center;
      gap: 54px;
    }

    .vk-design-photo {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border-radius: 12px;
      background: #e8edf2;
    }

    .vk-design-content h2 {
      margin: 0 0 18px;
      color: var(--vk-primary-dark);
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.25;
    }

    .vk-design-content > p {
      margin: 0 0 25px;
      color: var(--vk-muted);
    }

    .vk-design-point {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 15px;
      margin-bottom: 22px;
    }

    .vk-design-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 8px;
      background: #e6f5f5;
      color: var(--vk-primary);
      font-size: 15px;
      font-weight: 800;
    }

    .vk-design-point h3 {
      margin: 0 0 5px;
      color: var(--vk-primary-dark);
      font-size: 17px;
    }

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

    /* =========================================
       APPLICATIONS
    ========================================= */

    .vk-app-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .vk-app-card {
      overflow: hidden;
      border-radius: 12px;
      background: var(--vk-white);
      box-shadow: 0 5px 20px rgba(16, 45, 75, 0.06);
    }

    .vk-app-image {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      background: #e8edf2;
    }

    .vk-app-content {
      padding: 22px;
    }

    .vk-app-content h3 {
      margin: 0 0 9px;
      color: var(--vk-primary-dark);
      font-size: 19px;
    }

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

    /* =========================================
       TECHNICAL SPECIFICATIONS
    ========================================= */

    .vk-spec-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--vk-border);
      border-radius: 10px;
      background: var(--vk-white);
    }

    .vk-spec-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    .vk-spec-table th,
    .vk-spec-table td {
      padding: 16px 20px;
      border-bottom: 1px solid var(--vk-border);
      vertical-align: top;
      font-size: 14px;
    }

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

    .vk-spec-table th {
      width: 34%;
      background: #f7f9fb;
      color: var(--vk-primary-dark);
      font-weight: 700;
    }

    .vk-spec-table td {
      color: #536375;
    }

    .vk-spec-note {
      margin: 17px 0 0;
      color: var(--vk-muted);
      font-size: 12px;
      line-height: 1.7;
    }

    /* =========================================
       OEM / ODM CUSTOMIZATION
    ========================================= */

    .vk-oem-section {
      background:
        radial-gradient(
          circle at 90% 15%,
          rgba(24, 165, 165, 0.13),
          transparent 28%
        ),
        #102d4b;
      color: var(--vk-white);
    }

    .vk-oem-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 54px;
    }

    .vk-oem-content .vk-eyebrow {
      color: #72d6d2;
    }

    .vk-oem-content h2 {
      margin: 0 0 20px;
      color: var(--vk-white);
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.25;
    }

    .vk-oem-content > p {
      margin: 0 0 24px;
      color: #d4e0eb;
    }

    .vk-oem-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 13px 20px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .vk-oem-list li {
      padding-left: 24px;
      position: relative;
      color: #ffffff;
      font-size: 14px;
    }

    .vk-oem-list li::before {
      position: absolute;
      left: 0;
      content: "✓";
      color: #72d6d2;
      font-weight: 800;
    }

    .vk-oem-image-wrap {
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
    }

    .vk-oem-image {
      width: 100%;
      aspect-ratio: 5 / 4;
      object-fit: cover;
      border-radius: 7px;
      background: #e8edf2;
    }

    /* =========================================
       FAQ
    ========================================= */

    .vk-faq-list {
      max-width: 900px;
      margin: 0 auto;
    }

    .vk-faq-item {
      margin-bottom: 12px;
      overflow: hidden;
      border: 1px solid var(--vk-border);
      border-radius: 9px;
      background: var(--vk-white);
    }

    .vk-faq-item summary {
      position: relative;
      padding: 19px 50px 19px 20px;
      color: var(--vk-primary-dark);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5;
      cursor: pointer;
      list-style: none;
    }

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

    .vk-faq-item summary::after {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      color: var(--vk-accent);
      content: "+";
      font-size: 25px;
      font-weight: 400;
    }

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

    .vk-faq-answer {
      padding: 0 20px 20px;
      color: var(--vk-muted);
      font-size: 14px;
    }

    .vk-faq-answer p {
      margin: 0;
    }

    /* =========================================
       FINAL PRODUCT SUMMARY
    ========================================= */

    .vk-summary {
      padding: 48px 0;
      background: #f4f7fa;
      border-top: 1px solid var(--vk-border);
    }

    .vk-summary-inner {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

    .vk-summary h2 {
      margin: 0 0 15px;
      color: var(--vk-primary-dark);
      font-size: clamp(25px, 3vw, 34px);
      line-height: 1.3;
    }

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

    /* =========================================
       RESPONSIVE: TABLETS
    ========================================= */

    @media (max-width: 900px) {
      .vk-section {
        padding: 58px 0;
      }

      .vk-hero {
        padding: 52px 0;
      }

      .vk-hero-grid,
      .vk-intro-grid,
      .vk-design-grid,
      .vk-oem-grid {
        gap: 32px;
      }

      .vk-feature-grid,
      .vk-app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .vk-quick-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .vk-quick-spec:nth-child(2) {
        border-right: 0;
      }

      .vk-quick-spec:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      }
    }

    /* =========================================
       RESPONSIVE: MOBILE
    ========================================= */

    @media (max-width: 600px) {
      .vk-container {
        width: calc(100% - 32px);
      }

      .vk-section {
        padding: 44px 0;
      }

      .vk-hero {
        padding: 38px 0 42px;
      }

      .vk-hero-grid,
      .vk-intro-grid,
      .vk-design-grid,
      .vk-oem-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .vk-hero-content h1 {
        font-size: 34px;
        letter-spacing: -0.7px;
      }

      .vk-hero-description {
        font-size: 15px;
      }

      .vk-hero-image-wrap {
        padding: 10px;
      }

      .vk-image-hero {
        aspect-ratio: 4 / 3;
      }

      .vk-quick-spec {
        padding: 19px 10px;
      }

      .vk-quick-spec strong {
        font-size: 22px;
      }

      .vk-quick-spec span {
        font-size: 12px;
      }

      .vk-section-heading {
        margin-bottom: 28px;
      }

      .vk-section-heading h2 {
        font-size: 28px;
      }

      .vk-feature-grid,
      .vk-app-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .vk-feature-content,
      .vk-app-content {
        padding: 19px;
      }

      .vk-intro-image img,
      .vk-design-photo {
        aspect-ratio: 4 / 3;
      }

      .vk-check-list,
      .vk-oem-list {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .vk-spec-table th,
      .vk-spec-table td {
        padding: 12px;
        font-size: 13px;
      }

      .vk-spec-table th {
        width: 40%;
      }

      .vk-faq-item summary {
        padding: 16px 42px 16px 15px;
        font-size: 14px;
      }

      .vk-faq-item summary::after {
        right: 14px;
      }

      .vk-faq-answer {
        padding: 0 15px 16px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .vk-feature-card {
        transition: none;
      }

      .vk-feature-card:hover {
        transform: none;
      }
    }