:root{
    --navy:#12233F;
    --text:#3D4C5E;
    --blue:#1B3B66;
    --blue-soft:#EAF0F6;
    --gray-bg:#F4F5F6;
    --line:#E4E7EB;
    --white:#FFFFFF;
    --max:1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--text);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2{ color:var(--navy); }
  ul{list-style:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 40px;}
  a:focus-visible, button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{transition-duration:0.01ms !important;} }

  /* ---------- hero ---------- */
  .hero{ padding:64px 0 40px; }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:64px;
    align-items:center;
  }

  .gallery-main{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    aspect-ratio:16/10.5;
    background:#DCE2E7;
  }
  .gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s ease; }
  .main-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,0.92);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.18);
    cursor:pointer; border:none;
    color:var(--navy); font-size:17px;
    z-index:2;
    transition:background .15s, transform .15s;
  }
  .main-arrow:hover{ background:var(--white); transform:translateY(-50%) scale(1.06); }
  .main-arrow.left{ left:14px; }
  .main-arrow.right{ right:14px; }

  .thumb-nav{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
  }
  .thumb-arrow{
    flex-shrink:0;
    width:28px; height:28px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--white);
    color:var(--navy);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-size:14px;
    transition:border-color .15s, color .15s;
  }
  .thumb-arrow:hover{ border-color:var(--blue); color:var(--blue); }
  .thumb-arrow:disabled{ opacity:0.35; cursor:default; pointer-events:none; }

  .thumb-track-wrap{
    overflow:hidden;
    flex:1;
    min-width:0;
  }
  .thumb-track{
    display:flex;
    gap:12px;
    transition:transform .3s ease;
  }
  .thumb{
    flex:0 0 calc(25% - 9px);
    aspect-ratio:16/11;
    border-radius:4px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    opacity:0.6;
    transition:opacity .15s, border-color .15s;
  }
  .thumb.active, .thumb:hover{ opacity:1; border-color:var(--blue); }
  .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

  .hero-copy h1{
    font-size:clamp(26px, 3vw, 34px);
    line-height:1.28;
    font-weight:700;
    margin-bottom:22px;
  }
  .hero-list{ margin-bottom:28px; }
  .hero-list li{
    display:flex; gap:10px;
    font-size:14.5px; line-height:1.6;
    padding:6px 0;
  }
  .hero-list li::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:var(--blue);
    margin-top:8px;
    flex-shrink:0;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--blue); color:var(--white);
    font-size:14px; font-weight:600;
    padding:13px 24px;
    border-radius:4px;
    border:none; cursor:pointer;
    transition:background .15s;
  }
  .btn:hover{ background:var(--navy); }

  /* ---------- product sections ---------- */
  .section{ padding:72px 0; }
  .section.alt{ background:var(--gray-bg); }
  .section-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:56px;
    align-items:center;
  }
  .section-grid.reverse{ grid-template-columns:1.15fr 0.85fr; }
  .section-grid.reverse .art{ order:1; }
  .section-grid.reverse .copy{ order:2; }

  .copy h2{
    font-size:clamp(21px, 2.2vw, 25px);
    font-weight:700;
    margin-bottom:20px;
  }
  .feature-list li{
    position:relative;
    padding:8px 0 8px 16px;
    font-size:14.5px; line-height:1.65;
  }
  .feature-list li::before{
    content:"";
    position:absolute; left:0; top:16px;
    width:6px; height:6px;
    background:var(--blue);
  }
  .feature-list strong{
    font-weight:600;
    color:var(--navy);
  }

  .art{
    border-radius:6px;
    overflow:hidden;
    aspect-ratio:16/10.5;
    background:#DCE2E7;
  }
  .art img{ width:100%; height:100%; object-fit:cover; display:block; }

  @media (max-width: 860px){
    .hero-grid, .section-grid, .section-grid.reverse{
      grid-template-columns:1fr !important;
    }
    .section-grid.reverse .art{ order:1; }
    .section-grid.reverse .copy{ order:2; }
    .section{ padding:48px 0; }
    .wrap{ padding:0 20px; }
    .hero{ padding:40px 0 24px; }
  }