/* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: #f1f4ff;
      color: #1a2340;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; height: auto; }

    /* ── Layout ── */
    .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    section { padding: 72px 0; }

    /* ── Typography ── */
    .label {
      font-size: 11px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: #6b7fc4; margin-bottom: 10px;
    }
    .title {
      font-size: clamp(1.7rem, 4vw, 2.8rem);
      font-weight: 900; color: #0f1d4a; line-height: 1.12; margin-bottom: 14px;
    }
    .sub { font-size: 1rem; color: #4a5680; max-width: 640px; }
    .center { text-align: center; }
    .center .sub { margin: 0 auto; }

    /* ── Divider ── */
    .divider {
      height: 2px;
      background: linear-gradient(90deg, transparent, #c8d0f8, transparent);
      max-width: 960px; margin: 0 auto;
    }

    /* ══════════════════════════════════════
       HERO
    ══════════════════════════════════════ */
    #hero { padding: 0; }
    .hero-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 580px;
    }
    .hero-img { overflow: hidden; }
    .hero-img img { width: 100%; height: 100%; object-fit: cover; }
    .hero-copy {
      display: flex; flex-direction: column;
      justify-content: center;
      padding: 64px 56px;
      background: #f1f4ff;
    }
    .hero-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: #6b7fc4; margin-bottom: 20px;
    }
    .hero-h1 {
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 900; color: #0f1d4a;
      line-height: 1.06; margin-bottom: 18px;
    }
    .hero-h1 em { font-style: normal; color: #3d5af1; }
    .hero-desc { font-size: 1.05rem; color: #4a5680; margin-bottom: 32px; max-width: 400px; }
    .tags { display: flex; gap: 10px; flex-wrap: wrap; }
    .tag {
      background: rgba(61,90,241,.1); color: #3d5af1;
      border-radius: 100px; padding: 6px 16px;
      font-size: 0.8rem; font-weight: 700; letter-spacing: .4px;
    }

    /* ══════════════════════════════════════
       PRODUCT SHOWCASE — 7 × 1:1
    ══════════════════════════════════════ */
    #showcase { background: #f1f4ff; }
    .grid-4 {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
    }
    .grid-3 {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
      max-width: 900px; margin: 16px auto 0;
    }
    .sq-card {
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 4px 22px rgba(15,29,74,.10);
      aspect-ratio: 1/1; background: #e4e8fa;
      transition: transform .3s, box-shadow .3s;
    }
    .sq-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(15,29,74,.18); }
    .sq-card img { width: 100%; height: 100%; object-fit: cover; }

    /* ══════════════════════════════════════
       MOBILE SERIES — 8 × 1:1 marquee
    ══════════════════════════════════════ */
    #mobile-series { background: #ebeffe; padding-bottom: 72px; }
    .marquee-outer {
      overflow: hidden; position: relative; margin: 0 -24px;
    }
    .marquee-outer::before,
    .marquee-outer::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 90px;
      z-index: 2; pointer-events: none;
    }
    .marquee-outer::before { left: 0; background: linear-gradient(90deg,#ebeffe,transparent); }
    .marquee-outer::after  { right:0; background: linear-gradient(-90deg,#ebeffe,transparent); }
    .marquee-track {
      display: flex; gap: 16px; padding: 8px 60px;
      width: max-content;
      animation: slide 35s linear infinite;
    }
    .marquee-track:hover { animation-play-state: paused; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .m-card {
      flex-shrink: 0; width: 290px; height: 290px;
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 4px 20px rgba(15,29,74,.12);
      background: #d8dcf5;
    }
    .m-card img { width: 100%; height: 100%; object-fit: cover; }

    /* ══════════════════════════════════════
       DESKTOP SERIES — 8 × 16:9
    ══════════════════════════════════════ */
    #desktop-series { background: #f1f4ff; }
    .wide-full {
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 4px 28px rgba(15,29,74,.11);
      aspect-ratio: 16/6; margin-bottom: 20px;
      background: #dde2f8;
      transition: transform .3s, box-shadow .3s;
    }
    .wide-full:hover { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(15,29,74,.18); }
    .wide-full img { width: 100%; height: 100%; object-fit: cover; }
    .grid-wide-2 {
      display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    }
    .w-card {
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 4px 22px rgba(15,29,74,.10);
      aspect-ratio: 16/9; background: #dde2f8;
      transition: transform .3s, box-shadow .3s;
    }
    .w-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(15,29,74,.18); }
    .w-card img { width: 100%; height: 100%; object-fit: cover; }
    .w-card.span2 { grid-column: 1/-1; aspect-ratio: 16/7; }

    /* ══════════════════════════════════════
       FEATURES
    ══════════════════════════════════════ */
    #features { background: #ebeffe; }
    .feat-grid {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 22px;
    }
    .feat-card {
      background: #f1f4ff; border-radius: 20px; padding: 30px 22px;
      text-align: center; box-shadow: 0 2px 16px rgba(15,29,74,.07);
      transition: transform .25s;
    }
    .feat-card:hover { transform: translateY(-4px); }
    .feat-icon {
      width: 54px; height: 54px; border-radius: 14px;
      background: linear-gradient(135deg,#3d5af1,#6b7fc4);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; font-size: 22px;
    }
    .feat-name { font-size: .95rem; font-weight: 800; color: #0f1d4a; margin-bottom: 8px; }
    .feat-desc { font-size: .85rem; color: #5a6585; line-height: 1.55; }

    /* ══════════════════════════════════════
       SPECS
    ══════════════════════════════════════ */
    #specs { background: #f1f4ff; }
    .specs-wrap {
      display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
    }
    table.specs {
      width: 100%; border-collapse: collapse;
      border-radius: 16px; overflow: hidden;
      box-shadow: 0 2px 16px rgba(15,29,74,.08);
    }
    table.specs thead th {
      background: #0f1d4a; color: #fff; padding: 14px 20px;
      font-size: .88rem; font-weight: 700; text-align: left; letter-spacing: .4px;
    }
    table.specs tbody td {
      padding: 13px 20px; font-size: .87rem; text-align: left;
    }
    table.specs tbody tr:nth-child(odd)  td { background: #f5f7ff; }
    table.specs tbody tr:nth-child(even) td { background: #ebeffe; }
    table.specs tbody td:first-child { font-weight: 700; color: #3d5af1; }
    .specs-img { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(15,29,74,.12); }
    .specs-img img { width: 100%; }

    /* ══════════════════════════════════════
       FAQ
    ══════════════════════════════════════ */
    #faq { background: #ebeffe; }
    .faq-list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
    .faq-item {
      background: #f1f4ff; border-radius: 16px;
      box-shadow: 0 2px 12px rgba(15,29,74,.07); overflow: hidden;
    }
    .faq-btn {
      width: 100%; background: none; border: none; cursor: pointer;
      padding: 22px 28px; display: flex; justify-content: space-between;
      align-items: center; gap: 16px;
      font-size: .98rem; font-weight: 700; color: #0f1d4a; text-align: left;
    }
    .faq-btn:hover { color: #3d5af1; }
    .faq-icon {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      background: rgba(61,90,241,.1); color: #3d5af1;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; transition: transform .3s;
    }
    .faq-item.open .faq-icon { transform: rotate(180deg); }
    .faq-body {
      max-height: 0; overflow: hidden; transition: max-height .4s ease;
    }
    .faq-item.open .faq-body { max-height: 320px; }
    .faq-body-inner {
      padding: 0 28px 22px; font-size: .92rem; color: #4a5680; line-height: 1.75;
    }

    /* ══════════════════════════════════════
       CLOSING
    ══════════════════════════════════════ */
    #closing {
      background: #0f1d4a; padding: 88px 24px; text-align: center;
    }
    .closing-h2 {
      font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900;
      color: #fff; margin-bottom: 14px;
    }
    .closing-h2 span { color: #6b9dfc; }
    .closing-sub { font-size: 1.05rem; color: #c8d0f8; margin-bottom: 44px; }
    .closing-img {
      max-width: 960px; margin: 0 auto;
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,.45);
    }
    .closing-img img { width: 100%; }
    .badges {
      display: flex; justify-content: center;
      gap: 16px; margin-top: 44px; flex-wrap: wrap;
    }
    .badge {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 100px; padding: 10px 24px;
      font-size: .82rem; color: #c8d0f8; font-weight: 600; letter-spacing: .4px;
    }

    /* ── Footer ── */
    footer {
      background: #090e24; color: #6a78a0;
      text-align: center; padding: 28px 24px; font-size: .8rem;
    }

    /* ══════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════ */
    @media (max-width: 1024px) {
      .hero-wrap { grid-template-columns: 1fr; }
      .hero-img { height: 360px; }
      .hero-copy { padding: 48px 32px; }
      .feat-grid { grid-template-columns: repeat(2,1fr); }
      .grid-wide-2 { grid-template-columns: 1fr; }
      .w-card.span2 { aspect-ratio: 16/9; }
      .specs-wrap { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      section { padding: 52px 0; }
      .grid-4 { grid-template-columns: repeat(2,1fr); gap: 12px; }
      .grid-3 { grid-template-columns: repeat(2,1fr); }
      .m-card { width: 240px; height: 240px; }
      .faq-btn { font-size: .9rem; padding: 18px 20px; }
      .faq-body-inner { padding: 0 20px 18px; }
    }
    @media (max-width: 480px) {
      .hero-copy { padding: 36px 20px; }
      .hero-h1 { font-size: 2rem; }
      .feat-grid { grid-template-columns: 1fr; }
      .grid-3 { grid-template-columns: 1fr; }
    }