:root {
      --bg: oklch(96.5% 0.014 72);
      --surface: oklch(99% 0.006 72);
      --surface-2: oklch(92.5% 0.012 72);
      --fg: oklch(18% 0.012 68);
      --muted: oklch(48% 0.014 68);
      --border: oklch(86% 0.012 72);
      --accent: oklch(70% 0.19 40);
      --font-display: "SF Pro Display", "Manrope", system-ui, -apple-system, sans-serif;
      --font-body: "SF Pro Text", "Inter", system-ui, -apple-system, sans-serif;
      --font-mono: "SFMono-Regular", ui-monospace, Menlo, monospace;
      --container: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--bg); }
    body {
      margin: 0;
      color: var(--fg);
      background: var(--bg);
      font-family: var(--font-body);
      font-size: 17px;
      line-height: 1.55;
      letter-spacing: 0;
      overflow-x: hidden;
    }
    body.modal-open { overflow: hidden; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 600;
      text-wrap: balance;
    }
    h1 { font-size: clamp(3.25rem, 9vw, 7.5rem); line-height: 1.12; letter-spacing: -0.03em; }
    h2 { font-size: clamp(2.25rem, 5.5vw, 5rem); line-height: 1.12; letter-spacing: -0.025em; }
    h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.12; letter-spacing: -0.015em; }
    p { color: var(--muted); max-width: 62ch; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

    .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
    .section { padding-block: clamp(88px, 12vw, 168px); }
    .eyebrow {
      margin-bottom: 18px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .section-head { display: grid; gap: 20px; margin-bottom: 48px; }
    .section-head p { margin-bottom: 0; font-size: clamp(17px, 2vw, 21px); }
    .btn {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 21px;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 600;
      letter-spacing: .01em;
      transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: scale(.96); }
    .btn-primary { background: var(--accent); color: #130704; }
    .btn-secondary { color: var(--fg); background: color-mix(in oklch, var(--surface) 86%, transparent); border-color: var(--border); }
    .icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }

    .nav {
      position: fixed;
      z-index: 50;
      inset: 0 0 auto;
      height: 64px;
      border-bottom: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
      background: color-mix(in oklch, var(--bg) 82%, transparent);
      backdrop-filter: saturate(140%) blur(18px);
    }
    .nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .logo { display: flex; align-items: center; padding: 0; }
    .logo-img { height: 44px; width: auto; display: block; }
    .nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--muted); }
    .nav-links a:hover { color: var(--fg); }
    .nav .btn { min-height: 38px; padding: 8px 16px; font-size: 14px; }

    .hero {
      min-height: 100svh;
      padding-top: 64px;
      display: grid;
      align-items: center;
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }
    .hero::after {
      content: "";
      position: absolute;
      z-index: -2;
      inset: auto 10% -30% 10%;
      height: 48%;
      background: var(--accent);
      filter: blur(150px);
      opacity: .10;
      border-radius: 50%;
    }
    .hero-inner { display: grid; text-align: center; justify-items: center; padding-block: 32px; }
    .hero-copy { z-index: 2; width: 100%; }
    .hero-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
    .hero-logo { height: 44px; width: auto; }
    .hero-product-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; }
    .hero h1 { max-width: 9ch; margin-inline: auto; margin-bottom: 22px; }
    .hero-lede { font-size: clamp(18px, 2.2vw, 24px); margin: 0 auto 28px; max-width: 48ch; }
    .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
    .hero-visual {
      position: relative;
      width: min(760px, 82vw);
      margin-top: clamp(12px, 3vw, 38px);
      display: grid;
      place-items: center;
    }
    .hero-visual::before {
      content: "";
      position: absolute;
      width: 74%;
      aspect-ratio: 1;
      border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
      border-radius: 50%;
      animation: halo-breathe 4.8s ease-in-out infinite;
      opacity: .55;
    }
    .hero-product {
      width: min(720px, 78vw);
      filter: drop-shadow(0 26px 30px rgba(55,40,30,.26));
      transform: translateY(calc(3% + var(--hero-shift, 0px)));
      animation: settle 1.1s cubic-bezier(.2,.8,.2,1) both;
      will-change: transform;
      z-index: 2;
    }
    .hero-badge {
      position: absolute;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 8px 12px;
      border: 1px solid color-mix(in oklch, var(--accent) 28%, var(--border));
      border-radius: 999px;
      background: color-mix(in oklch, var(--surface) 84%, transparent);
      color: var(--fg);
      box-shadow: 0 16px 40px rgba(55,40,30,.13);
      backdrop-filter: blur(12px);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .02em;
      animation: badge-float 4.6s ease-in-out infinite;
    }
    .hero-badge svg, .orbit-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .hero-badge.bluetooth { inset: 18% auto auto 4%; animation-delay: -.8s; }
    .hero-badge.battery { inset: 36% 1% auto auto; animation-delay: -1.8s; }
    .hero-badge.micro { inset: auto auto 16% 11%; animation-delay: -2.8s; }
    @keyframes halo-breathe { 0%, 100% { transform: scale(.96); opacity: .34; } 50% { transform: scale(1.05); opacity: .68; } }
    @keyframes badge-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
    @keyframes icon-orbit { from { transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); } }
    @keyframes icon-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 18%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
    .orbit-icons {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: none;
      opacity: .84;
      --orbit-radius: min(250px, 21vw);
      z-index: 3;
    }
    .orbit-icon {
      position: absolute;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
      border-radius: 50%;
      background: color-mix(in oklch, var(--surface) 78%, transparent);
      backdrop-filter: blur(12px);
      animation: icon-orbit 18s linear infinite, icon-pulse 3.4s ease-in-out infinite;
    }
    .orbit-icon:nth-child(2) { animation-duration: 22s, 3.8s; animation-delay: -6s, -1s; }
    .orbit-icon:nth-child(3) { animation-duration: 26s, 4.2s; animation-delay: -12s, -2s; }
    .orbit-icon:nth-child(4) { animation-duration: 30s, 4.6s; animation-delay: -18s, -3s; }
    .product-wrap.bass-active .orbit-icon { border-color: color-mix(in oklch, var(--accent) 60%, var(--border)); background: color-mix(in oklch, var(--accent) 10%, var(--surface)); }
    .hero-stats {
      width: min(760px, 100%);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--border);
      margin-top: 6px;
      padding-top: 24px;
    }
    .hero-stat strong { display: block; font-family: var(--font-display); font-size: clamp(17px, 2vw, 22px); }
    .hero-stat span { color: var(--muted); font-size: 12px; letter-spacing: .03em; }
    .scroll-cue { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 30px; }
    @keyframes settle { from { opacity: 0; transform: translateY(10%) scale(.96); } to { opacity: 1; transform: translateY(calc(3% + var(--hero-shift, 0px))) scale(1); } }

    .story { position: relative; background: #f0ede7; }
    .story-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); gap: 6vw; }
    .product-stage {
      position: sticky;
      top: 64px;
      height: calc(100svh - 64px);
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .stage-label { position: absolute; inset: 28px auto auto 0; color: var(--muted); font: 12px/1 var(--font-mono); letter-spacing: .08em; }
    .product-wrap { position: relative; width: min(560px, 48vw); aspect-ratio: 930 / 670; display: grid; place-items: center; }
    .product-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 2;
      opacity: 0;
      transform: scale(.94) rotate(-2deg);
      filter: drop-shadow(0 28px 34px rgba(55,40,30,.28));
      transition: opacity .65s ease, transform .8s cubic-bezier(.2,.8,.2,1);
    }
    .product-image.active { opacity: 1; transform: scale(1) rotate(0); }
    .sound-rings { position: absolute; z-index: 1; inset: 22%; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
    .sound-rings.active { opacity: 1; }
    .sound-rings i {
      position: absolute; inset: 0; border: 1px solid color-mix(in oklch, var(--accent) 65%, transparent);
      border-radius: 50%; animation: ring 2.2s ease-out infinite;
    }
    .sound-rings i:nth-child(2) { animation-delay: .7s; }
    .sound-rings i:nth-child(3) { animation-delay: 1.4s; }
    @keyframes ring { from { opacity: .85; transform: scale(.55); } to { opacity: 0; transform: scale(2); } }
    .bass-active .product-image.active { animation: bass 1.35s ease-in-out infinite; }
    @keyframes bass { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
    .scenes { position: relative; }
    .scene { min-height: 100svh; display: flex; align-items: center; padding-block: 15vh; }
    .scene-copy { max-width: 530px; opacity: .32; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; }
    .scene.active .scene-copy { opacity: 1; transform: translateY(0); }
    .scene h2 { margin-bottom: 22px; }
    .scene p { font-size: clamp(17px, 1.8vw, 21px); }
    .spec-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
    .spec-line span { border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; color: var(--fg); background: color-mix(in oklch, var(--surface) 78%, transparent); font-size: 13px; }
    .scene-index { font: 12px/1 var(--font-mono); color: var(--muted); letter-spacing: .08em; margin-bottom: 24px; }

    .proof { background: var(--surface); color: var(--fg); }
    .proof p, .proof .eyebrow { color: #66666b; }
    .proof .eyebrow { color: #c84f23; }
    .video-grid { display: grid; grid-template-columns: 1.35fr .825fr .825fr; gap: 16px; }
    .video-card {
      position: relative;
      min-height: 300px;
      padding: 0;
      border: 0;
      border-radius: 18px;
      overflow: hidden;
      background: #d7d7d9;
      color: white;
      cursor: pointer;
      text-align: start;
    }
    .video-card:first-child { min-height: 470px; grid-row: span 2; }
    .video-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.54) saturate(.8); transition: transform .5s ease; }
    .video-card:hover img { transform: scale(1.035); }
    .video-overlay { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
    .play {
      width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
      color: #171717; background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
    }
    .play svg { width: 20px; height: 20px; fill: currentColor; transform: translateX(2px); }
    .video-card h3 { margin: 0; max-width: 18ch; color: white; }
    .video-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

    .reasons { background: #f5f2ed; color: var(--fg); }
    .reasons p { color: #66666b; }
    .reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #d4d4d7; border-inline-start: 1px solid #d4d4d7; }
    .reason { min-height: 210px; padding: 26px; border-inline-end: 1px solid #d4d4d7; border-bottom: 1px solid #d4d4d7; transition: background-color .25s ease, transform .25s ease; }
    .reason:hover { background: white; transform: translateY(-4px); }
    .reason-num { display: block; font: 12px/1 var(--font-mono); color: #8a8a8f; margin-bottom: 58px; }
    .reason h3 { margin-bottom: 10px; }
    .reason p { margin: 0; font-size: 15px; }

    .factory {
      position: relative;
      overflow: hidden;
      background: #faf8f4;
      color: var(--fg);
    }
    .factory::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(20,20,19,.045) 50%, transparent calc(50% + .5px)),
        linear-gradient(rgba(20,20,19,.035) 1px, transparent 1px);
      background-size: 100% 100%, 100% 96px;
      mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
    }
    .factory .container { position: relative; z-index: 1; }
    .factory-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, .62fr);
      align-items: end;
      gap: clamp(40px, 8vw, 112px);
      margin-bottom: clamp(42px, 6vw, 78px);
    }
    .factory-intro h2 { max-width: 11ch; margin: 0; }
    .factory-intro p { max-width: 43ch; margin: 0; color: #69665f; }
    .factory-layout {
      display: grid;
      grid-template-columns: minmax(300px, .84fr) minmax(0, 1.4fr);
      gap: clamp(18px, 2.4vw, 34px);
    }
    .factory-lead {
      position: relative;
      min-height: 430px;
      padding: clamp(30px, 4vw, 52px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      border-radius: 28px;
      background: #171715;
      color: #faf8f4;
    }
    .factory-lead::after {
      content: "";
      position: absolute;
      inline-size: 300px;
      block-size: 300px;
      inset: auto -95px -125px auto;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 50%;
      box-shadow: 0 0 0 42px rgba(255,255,255,.035), 0 0 0 86px rgba(255,255,255,.02);
    }
    .factory-mark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #b9b5ac;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .factory-mark::before { content: ""; inline-size: 28px; block-size: 2px; background: var(--accent); }
    .factory-lead strong {
      position: relative;
      z-index: 1;
      display: block;
      color: var(--accent);
      font-family: var(--font-display);
      font-size: clamp(5.5rem, 10vw, 9.5rem);
      font-weight: 600;
      line-height: .78;
      letter-spacing: -.065em;
    }
    .factory-lead h3 { position: relative; z-index: 1; max-width: 12ch; margin: 26px 0 0; color: #faf8f4; font-size: clamp(1.45rem, 2.3vw, 2rem); }
    .factory-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid #dedad1;
      border-radius: 28px;
      overflow: hidden;
      background: rgba(255,255,255,.68);
      box-shadow: 0 20px 60px rgba(20,20,19,.045);
    }
    .factory-metric {
      min-height: 215px;
      padding: clamp(26px, 3vw, 40px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .factory-metric:nth-child(2) { border-inline-end: 1px solid #dedad1; }
    .factory-metric:first-child { grid-column: 1 / -1; min-height: 240px; border-bottom: 1px solid #dedad1; }
    .factory-metric-index { color: #918d85; font: 11px/1 var(--font-mono); letter-spacing: .06em; }
    .factory-metric strong {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(3.3rem, 5.6vw, 6rem);
      font-weight: 600;
      line-height: .84;
      letter-spacing: -.055em;
    }
    .factory-metric:first-child strong { font-size: clamp(4.4rem, 7.5vw, 7.4rem); }
    .factory-metric span { display: block; margin-top: 16px; color: #57544e; font-size: 14px; font-weight: 600; }
    .factory-note { margin-top: 28px; color: #85817a; font-size: 13px; }

    .products { background: #f0ede7; }
    .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .product-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      transition: transform .3s ease, border-color .3s ease;
      cursor: pointer;
    }
    .product-card:hover, .product-card:focus-visible { transform: translateY(-6px); border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
    .product-card:focus-visible { outline: 3px solid color-mix(in oklch, var(--accent) 38%, transparent); outline-offset: 3px; }
    .product-card img { width: 100%; aspect-ratio: 1 / 1.03; object-fit: contain; padding: 10%; background: #e9e9e9; }
    .product-card.featured img { background: #f2f2f2; }
    .product-info { padding: 20px; }
    .product-info h3 { margin-bottom: 5px; }
    .product-info p { margin: 0 0 16px; font-size: 14px; }
    .product-link { padding: 0; border: 0; color: var(--accent); background: none; font: 600 14px/1.4 var(--font-body); cursor: pointer; }

    .reviews { background: #f7f4ef; color: var(--fg); }
    .reviews p { color: #66666b; }
    .review-shell { position: relative; }
    .review-viewport {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      overscroll-behavior-inline: contain;
    }
    .review-viewport::-webkit-scrollbar { display: none; }
    .review-track { display: flex; gap: 18px; }
    .review-track::after { content: ""; flex: 0 0 calc((100% - 18px) / 2); }
    .review {
      position: relative;
      flex: 0 0 calc((100% - 18px) / 2);
      min-height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      scroll-snap-align: start;
      background: #fff;
      border: 1px solid #dedee1;
      border-radius: 18px;
      padding: clamp(28px, 3.4vw, 48px);
    }
    .review-index {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 44px;
      color: #8a8780;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .review-stars { color: var(--accent); letter-spacing: .12em; }
    .review blockquote {
      margin: 0 0 48px;
      font-family: var(--font-display);
      font-size: clamp(1.65rem, 2.4vw, 2.35rem);
      line-height: 1.18;
      letter-spacing: -.02em;
    }
    .review-person { display: flex; align-items: center; gap: 12px; }
    .avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #171717; color: white; font-weight: 700; }
    .review-person strong, .review-person span { display: block; }
    .review-person span { color: #77777b; font-size: 13px; }
    .review-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 28px;
    }
    .review-dots { display: flex; align-items: center; gap: 8px; }
    .review-dot {
      width: 7px;
      height: 7px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: #c9c5be;
      transition: width .25s ease, background .25s ease;
      cursor: pointer;
    }
    .review-dot.active { width: 28px; background: var(--accent); }
    .review-arrows { display: flex; gap: 10px; }
    .review-arrow {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 1px solid #d8d4cc;
      border-radius: 50%;
      background: #fff;
      color: #171715;
      font: 400 27px/1 var(--font-body);
      cursor: pointer;
      transition: transform .25s ease, border-color .25s ease, opacity .25s ease;
    }
    .review-arrow:hover { transform: translateY(-2px); border-color: var(--accent); }
    .review-arrow:disabled { opacity: .32; cursor: default; transform: none; }
    .review-disclaimer { margin-top: 18px; font-size: 12px; color: #8a8780; }

    .final-cta { min-height: 78svh; display: grid; align-items: center; text-align: center; position: relative; overflow: hidden; }
    .final-cta .container { display: grid; justify-items: center; }
    .final-cta h2 { max-width: 11ch; margin-bottom: 24px; }
    .final-cta p { font-size: 20px; margin: 0 auto 30px; }
    .commitments { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 36px; color: var(--muted); font-size: 13px; }
    .commitments span::before { content: "✓"; color: var(--accent); margin-inline-end: 7px; }

    footer { padding: 52px 0 104px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
    .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
    .footer-logo { color: var(--fg); margin-bottom: 12px; }
    .footer-contact { text-align: end; }

    .floating-contact {
      position: fixed;
      z-index: 45;
      inset: auto 22px 22px auto;
      display: flex;
      gap: 10px;
    }
    .float-btn {
      min-width: 54px;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 17px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: color-mix(in oklch, var(--surface) 88%, transparent);
      backdrop-filter: blur(14px);
      box-shadow: 0 12px 30px rgba(0,0,0,.24);
      font-size: 14px;
      font-weight: 600;
    }
    .float-btn.zalo { background: var(--accent); color: #180805; border-color: transparent; animation: gentle 3s ease-in-out infinite; }
    @keyframes gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

    .modal {
      position: fixed; z-index: 100; inset: 0; display: none; place-items: center; padding: 20px;
      background: rgba(0,0,0,.8); backdrop-filter: blur(18px);
    }
    .modal.open { display: grid; }
    @keyframes modal-in { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
    .modal-panel { width: min(920px, 100%); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #111; }
    .modal.open .modal-panel { animation: modal-in .22s ease; }
    .modal-panel.portrait { width: min(420px, 90vw); }
    .modal-media { aspect-ratio: 16/9; display: grid; place-items: center; color: var(--muted); background: #080808; text-align: center; padding: 24px; }
    .modal-panel.portrait .modal-media { aspect-ratio: 9/16; max-height: 72vh; padding: 0; }
    .modal-media iframe { width: 100%; height: 100%; border: 0; display: block; }
    .modal-bar { min-height: 56px; padding: 10px 12px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.07); }
    .modal-yt-link { font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; opacity: .8; transition: opacity .15s; }
    .modal-yt-link:hover { opacity: 1; color: var(--fg); }
    .modal-bar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .close-modal { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.06); color: var(--fg); cursor: pointer; font-size: 20px; display: grid; place-items: center; transition: background .15s; }
    .close-modal:hover { background: rgba(255,255,255,.14); }

    .product-modal { z-index: 110; background: rgba(20,18,16,.68); }
    .product-dialog {
      width: min(1180px, 100%);
      max-height: min(900px, calc(100svh - 32px));
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
      overflow: hidden;
      border: 1px solid #dedbd4;
      border-radius: 24px;
      background: #faf9f5;
      color: #171715;
      box-shadow: 0 30px 90px rgba(20,18,16,.28);
    }
    .product-gallery { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #efede8; }
    .zoom-stage {
      position: relative;
      min-height: 520px;
      display: grid;
      place-items: center;
      overflow: hidden;
      touch-action: pan-y;
    }
    .zoom-stage img {
      width: min(82%, 640px);
      height: min(68vh, 620px);
      object-fit: contain;
      transform: scale(var(--zoom, 1));
      transition: transform .22s ease, opacity .18s ease;
      transform-origin: center;
      user-select: none;
      -webkit-user-drag: none;
    }
    .gallery-control {
      width: 44px; height: 44px; position: absolute; top: 50%; z-index: 2;
      display: grid; place-items: center; border: 1px solid #d7d3cb; border-radius: 50%;
      background: rgba(250,249,245,.86); color: #171715; cursor: pointer; backdrop-filter: blur(10px);
    }
    .gallery-control:hover { background: white; }
    .gallery-control[hidden] { display: none; }
    .gallery-control.prev { inset-inline-start: 18px; transform: translateY(-50%); }
    .gallery-control.next { inset-inline-end: 18px; transform: translateY(-50%); }
    .zoom-tools {
      position: absolute; inset: 18px 18px auto auto; z-index: 3;
      display: flex; gap: 6px; padding: 6px; border: 1px solid #d7d3cb;
      border-radius: 999px; background: rgba(250,249,245,.88); backdrop-filter: blur(10px);
    }
    .zoom-tools button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #171715; cursor: pointer; font-size: 18px; }
    .zoom-tools button:hover { background: #e4e0d8; }
    .zoom-level { min-width: 44px; display: grid; place-items: center; font: 11px/1 var(--font-mono); color: #69665f; }
    .gallery-count {
      position: absolute; inset: auto auto 18px 18px; z-index: 2;
      padding: 8px 11px; border-radius: 999px; background: rgba(23,23,21,.78); color: white;
      font: 11px/1 var(--font-mono); letter-spacing: .04em;
    }
    .thumbnail-row {
      display: flex; gap: 9px; min-height: 94px; padding: 12px 16px 16px; overflow-x: auto;
      scrollbar-width: thin; border-top: 1px solid #ddd9d1;
    }
    .thumbnail {
      width: 76px; min-width: 76px; height: 66px; padding: 4px; overflow: hidden;
      border: 1px solid #d5d1c9; border-radius: 10px; background: #f7f5f1; cursor: pointer;
    }
    .thumbnail.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    .thumbnail img { width: 100%; height: 100%; object-fit: contain; }
    .product-detail {
      min-width: 0; overflow-y: auto; padding: clamp(28px, 4vw, 52px);
      border-inline-start: 1px solid #ddd9d1;
    }
    .detail-top { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
    .product-detail .close-modal { flex: 0 0 auto; border-color: #d5d1c9; color: #171715; }
    .detail-kicker { margin-bottom: 12px; color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
    .product-detail h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.6rem); color: #171715; }
    .detail-tagline { margin: 12px 0 24px; color: #69665f; font-size: 18px; }
    .detail-description { color: #55524d; }
    .detail-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 30px 0; border-top: 1px solid #ddd9d1; }
    .detail-spec { padding: 16px 10px 16px 0; border-bottom: 1px solid #ddd9d1; }
    .detail-spec span, .detail-spec strong { display: block; }
    .detail-spec span { margin-bottom: 5px; color: #85817a; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
    .detail-spec strong { font-size: 14px; }
    .detail-note { margin: -10px 0 24px; color: #85817a; font-size: 13px; }
    .detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .detail-actions .btn { width: 100%; }

    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }

    @media (min-width: 981px) {
      .container { width: min(calc(100% - 64px), var(--container)); }
      .section { padding-block: clamp(104px, 9vw, 152px); }
      .section-head {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr);
        align-items: end;
        column-gap: clamp(56px, 8vw, 120px);
        margin-bottom: 60px;
      }
      .section-head p { justify-self: end; }

      .hero { min-height: max(760px, 100svh); }
      .hero-inner { padding-block: 40px; }
      .hero h1 { font-size: clamp(5rem, 7.2vw, 6.9rem); }
      .hero-visual { width: min(660px, 58vw); margin-top: 22px; }
      .hero-product { width: min(620px, 55vw); }
      .hero-stats { width: min(820px, 76vw); margin-top: 12px; padding-top: 22px; }

      .story-layout {
        grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
        gap: clamp(52px, 6vw, 96px);
      }
      .product-wrap { width: min(520px, 42vw); }
      .orbit-icons { --orbit-radius: min(220px, 18vw); }
      .scene-copy { max-width: 500px; }
      .scene h2 { font-size: clamp(3.35rem, 4.5vw, 4.75rem); }

      .video-grid { gap: 20px; }
      .reason-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .reason { min-height: 230px; padding: 30px; }
      .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
      .product-card img { aspect-ratio: 1 / .96; }
      .product-info { padding: 22px; }
      .review-track { gap: 20px; }
      .review-track::after { flex-basis: calc((100% - 20px) / 2); }
      .review { flex-basis: calc((100% - 20px) / 2); }

      .product-dialog {
        width: min(1240px, calc(100vw - 64px));
        grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
      }
      .zoom-stage { min-height: min(620px, calc(100svh - 150px)); }
      .zoom-stage img { width: min(78%, 680px); }
      .product-detail { padding: clamp(36px, 3.2vw, 52px); }
      .product-detail h2 { font-size: clamp(3rem, 4.2vw, 4.5rem); }
    }

    @media (min-width: 1280px) {
      .hero-visual { width: 700px; }
      .hero-product { width: 650px; }
      .story-layout { grid-template-columns: minmax(0, 1.06fr) minmax(400px, .78fr); }
      .product-wrap { width: 540px; }
      .product-grid { gap: 22px; }
      .product-card:hover, .product-card:focus-visible { transform: translateY(-8px); }
    }

    @media (min-width: 981px) and (max-height: 850px) {
      .hero { min-height: 760px; }
      .hero-inner { padding-block: 28px; }
      .hero h1 { font-size: clamp(4.7rem, 6.5vw, 5.8rem); margin-bottom: 16px; }
      .hero-lede { margin-bottom: 20px; }
      .hero-visual { width: min(540px, 48vw); margin-top: 8px; }
      .hero-product { width: min(510px, 46vw); }
      .hero-badge.bluetooth { inset-block-start: 14%; }
      .hero-badge.battery { inset-block-start: 32%; }
      .hero-badge.micro { inset-block-end: 12%; }
      .hero-stats { padding-top: 16px; }
      .scroll-cue { margin-top: 18px; }
      .product-wrap { width: min(470px, 40vw); }
      .orbit-icons { --orbit-radius: min(198px, 17vw); }
    }

    @media (max-width: 980px) {
      .nav-links { display: none; }
      .story-layout { display: block; }
      .product-stage { top: 64px; height: 48svh; z-index: 2; background: #f0ede7; }
      .product-wrap { width: min(520px, 78vw); }
      .stage-label { inset-inline-start: 20px; }
      .scenes { z-index: 3; }
      .scene { min-height: 72svh; align-items: end; padding: 28vh 20px 11vh; }
      .scene-copy { padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in oklch, var(--surface) 88%, transparent); backdrop-filter: blur(16px); }
      .video-grid { grid-template-columns: 1fr 1fr; }
      .video-card:first-child { grid-column: 1 / -1; grid-row: auto; }
      .reason-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
      .factory-intro { grid-template-columns: 1fr; gap: 20px; }
      .factory-layout { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); }
      .factory-lead { min-height: 390px; }
      .product-dialog { grid-template-columns: 1fr; overflow-y: auto; }
      .product-gallery { min-height: 54svh; }
      .zoom-stage { min-height: 430px; }
      .product-detail { overflow: visible; border-inline-start: 0; border-top: 1px solid #ddd9d1; }
    }

    @media (max-width: 640px) {
      body { font-size: 16px; }
      .container { width: min(calc(100% - 28px), var(--container)); }
      .nav { height: 58px; }
      .nav .btn { min-height: 36px; }
      .hero { padding-top: 58px; }
      .hero-inner { padding-block: 28px; }
      .hero-visual { width: 92vw; max-width: 520px; margin-inline: 0; }
      .hero-product { width: 100%; }
      .hero-badge { min-height: 38px; padding: 7px 10px; font-size: 11px; }
      .hero-badge.bluetooth { inset: 12% auto auto 0; }
      .hero-badge.battery { inset: 35% -3% auto auto; }
      .hero-badge.micro { inset: auto auto 8% 4%; }
      .hero-badge span { display: none; }
      .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
      .hero-stat:nth-child(odd) { border-inline-end: 1px solid var(--border); }
      .scroll-cue { display: none; }
      .product-stage { top: 58px; height: 42svh; }
      .product-wrap { width: 88vw; max-width: 440px; }
      .orbit-icons { --orbit-radius: min(178px, 39vw); opacity: .72; }
      .orbit-icon { width: 38px; height: 38px; }
      .orbit-icon svg { width: 16px; height: 16px; }
      .scene { min-height: 74svh; padding: 25vh 14px 8vh; }
      .scene h2 { font-size: clamp(2.15rem, 12vw, 3.4rem); }
      .scene-copy { width: 100%; padding: 22px; }
      .video-grid, .reason-grid, .product-grid { grid-template-columns: 1fr; }
      .review-track { gap: 12px; }
      .review-track::after { flex-basis: 12%; }
      .review { flex-basis: 88%; min-height: 390px; padding: 28px 24px; }
      .review-index { margin-bottom: 34px; }
      .review blockquote { font-size: clamp(1.55rem, 7vw, 2rem); }
      .review-controls { margin-top: 22px; }
      .review-arrow { width: 44px; height: 44px; }
      .video-card, .video-card:first-child { min-height: 310px; grid-column: auto; }
      .reason { min-height: 170px; }
      .reason-num { margin-bottom: 36px; }
      .factory-layout { grid-template-columns: 1fr; }
      .factory-lead { min-height: 330px; border-radius: 22px; }
      .factory-metrics { border-radius: 22px; }
      .factory-metric, .factory-metric:first-child { min-height: 180px; }
      .factory-metric { padding: 24px 20px; }
      .factory-metric strong, .factory-metric:first-child strong { font-size: clamp(3.3rem, 16vw, 5rem); }
      .factory-note { margin-top: 20px; }
      .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .product-info { padding: 15px; }
      .product-info h3 { font-size: 18px; }
      .product-info p { min-height: 42px; }
      .product-modal { padding: 0; place-items: stretch; }
      .product-dialog { max-height: 100svh; border: 0; border-radius: 0; }
      .product-gallery { min-height: 52svh; }
      .zoom-stage { min-height: 360px; }
      .zoom-stage img { width: 86%; height: 42svh; }
      .zoom-tools { inset: 12px 12px auto auto; }
      .gallery-control { width: 40px; height: 40px; }
      .gallery-control.prev { inset-inline-start: 10px; }
      .gallery-control.next { inset-inline-end: 10px; }
      .gallery-count { inset: auto auto 12px 12px; }
      .thumbnail-row { min-height: 82px; padding: 10px 12px 12px; }
      .thumbnail { width: 66px; min-width: 66px; height: 58px; }
      .product-detail { padding: 28px 20px calc(108px + env(safe-area-inset-bottom)); }
      .detail-specs { grid-template-columns: 1fr; }
      .detail-actions { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-contact { text-align: start; }
      .floating-contact {
        inset: auto 0 0;
        display: grid;
        grid-template-columns: 1fr 1.25fr;
        gap: 0;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: color-mix(in oklch, var(--bg) 90%, transparent);
        border-top: 1px solid var(--border);
        backdrop-filter: blur(18px);
      }
      .float-btn { height: 48px; border-radius: 10px; box-shadow: none; }
      footer { padding-bottom: 120px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }