:root {
      --primary:#1792d1;
      --primary-dark:#0e6b9a;
      --accent:#00c0a3;
      --text:#1e2430;
      --muted:#6f7a8a;
      --bg:#f5f7fb;
      --card-bg:#ffffff;
      --border:#e1e4ee;
      --radius-lg:18px;
      --radius-md:12px;
      --shadow-soft:0 18px 45px rgba(15,35,80,0.12);
      --shadow-light:0 8px 20px rgba(15,35,80,0.08);
    }

    * {
      box-sizing:border-box;
      margin:0;
      padding:0;
    }

    body {
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.6;
    }

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

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

    .page-wrapper {
      max-width:1200px;
      margin:0 auto;
      padding:18px 16px 40px;
    }

    header {
      display:flex;
      flex-wrap:wrap;
      gap:28px;
      align-items:center;
      background:linear-gradient(135deg,#ffffff,#e9f5ff);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-soft);
      padding:26px 24px;
      margin-bottom:26px;
    }

    .hero-media {
      flex:1 1 320px;
      min-width:260px;
      text-align:center;
    }

    .hero-media img {
      border-radius:var(--radius-md);
      box-shadow:var(--shadow-light);
    }

    .hero-content {
      flex:1 1 360px;
      min-width:280px;
    }

    .badge {
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:rgba(23,146,209,0.08);
      border-radius:999px;
      padding:4px 12px;
      font-size:12px;
      color:var(--primary-dark);
      margin-bottom:10px;
    }
    .badge-dot {
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
    }

    h1 {
      font-size:30px;
      margin-bottom:8px;
    }

    .subtitle {
      font-size:15px;
      color:var(--muted);
      margin-bottom:18px;
    }

    .hero-meta {
      display:flex;
      flex-wrap:wrap;
      gap:12px 20px;
      font-size:13px;
      color:var(--muted);
      margin-bottom:18px;
    }
    .hero-meta span {
      display:flex;
      align-items:center;
      gap:6px;
    }

    .hero-actions {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .btn-primary,
    .btn-outline {
      border-radius:999px;
      padding:10px 22px;
      font-size:14px;
      border:1px solid transparent;
      cursor:pointer;
      transition:all .18s ease-out;
      display:inline-flex;
      align-items:center;
      gap:8px;
      text-decoration:none;
    }

    .btn-primary {
      background:var(--primary);
      color:#fff;
      box-shadow:var(--shadow-light);
    }
    .btn-primary:hover {
      background:var(--primary-dark);
      transform:translateY(-1px);
      box-shadow:var(--shadow-soft);
    }

    .btn-outline {
      background:#fff;
      color:var(--primary-dark);
      border-color:var(--border);
    }
    .btn-outline:hover {
      border-color:var(--primary);
      transform:translateY(-1px);
      box-shadow:var(--shadow-light);
    }

    main {
      display:grid;
      grid-template-columns:2.1fr 1.2fr;
      gap:26px;
    }

    section { margin-bottom:22px; }

    .card {
      background:var(--card-bg);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-light);
      padding:20px 18px;
    }

    .card h2 {
      font-size:20px;
      margin-bottom:10px;
    }

    .card h3 {
      font-size:16px;
      margin:16px 0 6px;
    }

    .tagline {
      font-size:14px;
      color:var(--muted);
      margin-bottom:8px;
    }

    .feature-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:16px;
      margin-top:12px;
    }

    .feature-item {
      border-radius:var(--radius-md);
      border:1px solid var(--border);
      padding:12px;
      font-size:13px;
    }
    .feature-item strong {
      display:block;
      margin-bottom:4px;
    }

    .color-list {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      gap:10px;
      margin-top:10px;
      font-size:13px;
    }

    .color-pill {
      border-radius:var(--radius-md);
      border:1px solid var(--border);
      padding:8px 10px;
      background:#fbfcff;
    }

    .color-pill span {
      font-weight:600;
      display:block;
    }

    .spec-table {
      width:100%;
      border-collapse:collapse;
      margin-top:10px;
      font-size:13px;
    }
    .spec-table th,
    .spec-table td {
      border:1px solid var(--border);
      padding:8px 10px;
      text-align:left;
    }
    .spec-table th {
      width:35%;
      background:#f3f5fb;
      font-weight:600;
    }

    .benefits-list,
    .list-simple {
      margin-top:6px;
      padding-left:18px;
      font-size:14px;
    }
    .benefits-list li { margin-bottom:4px; }

    .side-column .card { margin-bottom:18px; }

    .badge-list {
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:8px;
      font-size:12px;
    }
    .badge-soft {
      border-radius:999px;
      border:1px solid var(--border);
      padding:4px 9px;
      background:#fff;
    }

    .faq-item + .faq-item {
      margin-top:10px;
      border-top:1px solid var(--border);
      padding-top:10px;
    }
    .faq-item h3 {
      margin:0 0 4px;
      font-size:14px;
    }

    .contact-box p {
      font-size:13px;
      margin-bottom:4px;
    }

    .mini-note {
      font-size:11px;
      color:var(--muted);
      margin-top:6px;
    }

    footer {
      text-align:center;
      font-size:11px;
      color:var(--muted);
      margin-top:18px;
    }

    /* ---- IMAGE GALLERY ---- */
    .gallery {
      margin-top:16px;
    }

    .gallery-main {
      margin-bottom:12px;
    }

    .gallery-main img {
      width:700px;           /* desktop logical size */
      max-width:100%;        /* responsive */
      height:auto;
      border-radius:var(--radius-md);
      box-shadow:var(--shadow-light);
      margin:0 auto;
    }

    .thumb-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
      gap:10px;
    }

    .thumb-item img {
      width:240px;
      height:auto;
      max-width:100%;
      border-radius:var(--radius-md);
      border:1px solid var(--border);
      background:#fff;
    }

    .thumb-caption {
      font-size:12px;
      color:var(--muted);
      margin-top:4px;
      text-align:center;
    }

    /* Responsive */
    @media (max-width:900px) {
      main { grid-template-columns:1fr; }
    }

    @media (max-width:640px) {
      header { padding:20px 16px; }
      h1 { font-size:24px; }
      .card { padding:16px 14px; }
      .hero-actions {
        flex-direction:column;
        align-items:flex-start;
      }
    }