/* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: #f1f4ff;
      color: #1a1a2e;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ── CSS Variables ── */
    :root {
      --bg: #f1f4ff;
      --accent-blue: #2563eb;
      --accent-indigo: #4f46e5;
      --accent-teal: #0d9488;
      --accent-orange: #ea580c;
      --accent-yellow: #ca8a04;
      --card-bg: #ffffff;
      --border: #dde3f8;
      --text-main: #1a1a2e;
      --text-muted: #5a6080;
      --radius: 16px;
      --radius-sm: 10px;
      --shadow: 0 4px 24px rgba(37,99,235,.10);
      --shadow-hover: 0 8px 36px rgba(37,99,235,.18);
    }

    /* ── Hero Banner ── */
    .hero {
      background: linear-gradient(135deg, #e8eeff 0%, #f1f4ff 40%, #eaf6ff 100%);
      padding: 60px 24px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -80px; left: -80px;
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(79,70,229,.12) 0%, transparent 70%);
      border-radius: 50%;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: -60px; right: -60px;
      width: 250px; height: 250px;
      background: radial-gradient(circle, rgba(13,148,136,.10) 0%, transparent 70%);
      border-radius: 50%;
    }
    .hero-eyebrow {
      display: inline-block;
      background: linear-gradient(90deg,#2563eb,#4f46e5);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 5px 16px;
      border-radius: 99px;
      margin-bottom: 18px;
    }
    .hero h1 {
      font-size: clamp(26px, 5vw, 48px);
      font-weight: 800;
      color: var(--text-main);
      max-width: 760px;
      margin: 0 auto 16px;
      letter-spacing: -.5px;
    }
    .hero h1 span { color: var(--accent-indigo); }
    .hero-sub {
      font-size: clamp(15px, 2.5vw, 18px);
      color: var(--text-muted);
      max-width: 580px;
      margin: 0 auto 32px;
    }
    .hero-tags {
      display: flex; flex-wrap: wrap; gap: 10px;
      justify-content: center;
      margin-bottom: 8px;
    }
    .tag {
      background: #fff;
      border: 1.5px solid var(--border);
      color: var(--accent-indigo);
      font-size: 13px;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 99px;
    }

    /* ── Section Wrapper ── */
    .section { padding: 56px 24px; max-width: 1200px; margin: 0 auto; }
    .section-title {
      font-size: clamp(20px, 3.5vw, 32px);
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 6px;
    }
    .section-title span { color: var(--accent-indigo); }
    .section-sub {
      font-size: 15px;
      color: var(--text-muted);
      margin-bottom: 36px;
    }
    .divider {
      width: 48px; height: 4px;
      background: linear-gradient(90deg,#2563eb,#4f46e5);
      border-radius: 99px;
      margin-bottom: 12px;
    }

    /* ── Main Image Showcase ── */
    .main-image-wrap {
      max-width: 860px;
      margin: 0 auto 16px;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: #fff;
    }
    .main-image-wrap img {
      width: 100%;
      display: block;
      aspect-ratio: 1/1;
      object-fit: cover;
      cursor: pointer;
      transition: transform .3s ease;
    }
    .main-image-wrap img:hover { transform: scale(1.02); }

    /* Thumbnail Row */
    .thumb-row {
      display: flex; flex-wrap: wrap; gap: 10px;
      justify-content: center;
      max-width: 860px;
      margin: 0 auto;
    }
    .thumb-row img {
      width: 72px; height: 72px;
      object-fit: cover;
      border-radius: 10px;
      border: 2.5px solid transparent;
      cursor: pointer;
      transition: border-color .2s, transform .2s, box-shadow .2s;
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }
    .thumb-row img:hover, .thumb-row img.active {
      border-color: var(--accent-indigo);
      transform: scale(1.08);
      box-shadow: 0 4px 16px rgba(79,70,229,.25);
    }

    /* ── Gallery Grid – 7 Square Photos ── */
    .gallery-7 {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }
    .gallery-7 .gcard {
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: #fff;
      box-shadow: var(--shadow);
      transition: transform .25s, box-shadow .25s;
    }
    .gallery-7 .gcard:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .gallery-7 .gcard img {
      width: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
      display: block;
    }
    .gcard-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      padding: 8px 12px;
      text-align: center;
      letter-spacing: .04em;
    }

    /* ── Full-Width Banner Images (16:9) ── */
    .banner-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .banner-card {
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
      box-shadow: var(--shadow);
      transition: box-shadow .25s;
      position: relative;
    }
    .banner-card:hover { box-shadow: var(--shadow-hover); }
    .banner-card img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
    }
    .banner-overlay {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: linear-gradient(transparent, rgba(26,26,46,.55));
      padding: 20px 20px 14px;
    }
    .banner-overlay span {
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    @media(min-width: 700px) {
      .banner-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media(min-width: 1024px) {
      .banner-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── Features Strip ── */
    .features-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      margin-bottom: 0;
    }
    .feat-card {
      background: var(--card-bg);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 24px 18px;
      text-align: center;
      box-shadow: 0 2px 12px rgba(37,99,235,.07);
      transition: box-shadow .2s, transform .2s;
    }
    .feat-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
    .feat-icon {
      font-size: 32px;
      margin-bottom: 10px;
      display: block;
    }
    .feat-card h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 6px;
    }
    .feat-card p {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* ── Spec Table ── */
    .spec-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--card-bg);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .spec-table tr { border-bottom: 1px solid var(--border); }
    .spec-table tr:last-child { border-bottom: none; }
    .spec-table td {
      padding: 16px 20px;
      font-size: 14px;
    }
    .spec-table td:first-child {
      font-weight: 700;
      color: var(--accent-indigo);
      width: 38%;
      background: #f7f8ff;
    }
    .spec-table td:last-child { color: var(--text-main); }

    /* ── Topics Grid ── */
    .topics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
    }
    .topic-pill {
      background: var(--card-bg);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px 10px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
      box-shadow: 0 2px 8px rgba(37,99,235,.06);
      transition: background .2s, color .2s;
    }
    .topic-pill:hover {
      background: var(--accent-indigo);
      color: #fff;
      border-color: var(--accent-indigo);
    }
    .topic-pill span { display: block; font-size: 20px; margin-bottom: 4px; }

    /* ── FAQ ── */
    .faq-list { display: flex; flex-direction: column; gap: 12px; }
    .faq-item {
      background: var(--card-bg);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(37,99,235,.06);
    }
    .faq-q {
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 22px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      text-align: left;
      gap: 12px;
    }
    .faq-q .icon {
      flex-shrink: 0;
      width: 26px; height: 26px;
      background: var(--bg);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      color: var(--accent-indigo);
      transition: transform .3s;
      font-style: normal;
    }
    .faq-item.open .faq-q .icon { transform: rotate(45deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .3s ease;
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
    }
    .faq-a-inner { padding: 0 22px 18px; }
    .faq-item.open .faq-a { max-height: 400px; }

    /* ── Use Cases ── */
    .use-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 16px;
    }
    .use-card {
      background: var(--card-bg);
      border-radius: var(--radius-sm);
      padding: 24px 20px;
      box-shadow: var(--shadow);
      border-left: 4px solid var(--accent-indigo);
      transition: box-shadow .2s;
    }
    .use-card:hover { box-shadow: var(--shadow-hover); }
    .use-card .ico { font-size: 28px; margin-bottom: 10px; }
    .use-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
    .use-card p { font-size: 13px; color: var(--text-muted); }
    .use-card:nth-child(2) { border-left-color: var(--accent-teal); }
    .use-card:nth-child(3) { border-left-color: var(--accent-orange); }
    .use-card:nth-child(4) { border-left-color: var(--accent-yellow); }

    /* ── Footer ── */
    footer {
      background: #1a1a2e;
      color: rgba(255,255,255,.55);
      text-align: center;
      font-size: 13px;
      padding: 28px 24px;
    }
    footer strong { color: rgba(255,255,255,.85); }

    /* ── Lightbox ── */
    #lb-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(15,15,35,.88);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #lb-overlay.show { display: flex; }
    #lb-img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: var(--radius);
      box-shadow: 0 8px 60px rgba(0,0,0,.5);
      object-fit: contain;
    }
    #lb-close {
      position: fixed;
      top: 20px; right: 24px;
      font-size: 32px;
      color: #fff;
      cursor: pointer;
      background: none;
      border: none;
      line-height: 1;
      z-index: 1001;
    }

    /* ── Responsive tweaks ── */
    @media(max-width: 480px) {
      .hero { padding: 40px 16px 32px; }
      .section { padding: 40px 16px; }
      .thumb-row img { width: 56px; height: 56px; }
    }