/* Fidapak — shared stylesheet (W1 demo)
   Palette follows the orange/white machinery in the licensed product photos. */
:root {
  --navy: #0b2545;
  --navy-2: #123a6b;
  --navy-3: #1b4c86;
  --orange: #f5821f;
  --orange-dark: #d96b0d;
  --ink: #16202e;
  --muted: #5c6b7f;
  --line: #e3e8ef;
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --white: #ffffff;
  --radius: 10px;
  --maxw: 1200px;
  --shadow: 0 10px 30px rgba(11, 37, 69, .09);
  /* W12: the sticky header's height is now a single variable. It used to be
     hard-coded as 74px in TWO places (the header itself and the mobile menu's
     top offset), so changing one would silently break the other. */
  --header-h: 74px;
}

* { box-sizing: border-box; }
/* W12: the header is sticky and opaque, so a in-page jump (e.g. a hero slide
   deep-linking to videos/#clip-*) used to land the target UNDER the header —
   measured 75px of the heading hidden. scroll-padding-top reserves the header
   plus a breathing gap for every hash scroll, without touching any anchor id. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
.container { width: min(var(--maxw), calc(100% - 48px)); margin: 0 auto; }
.section { padding: 88px 0; }
.section--soft { background: var(--bg-soft); }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); color: var(--navy); }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; font-weight: 700; color: var(--orange); margin-bottom: 14px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.04em; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--orange); position: relative; flex: none;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 9px 8px; border: 2px solid #fff; border-radius: 2px;
  border-top-color: transparent;
}
.brand span { color: var(--orange); }
.nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.nav a { font-size: 15px; font-weight: 600; color: var(--ink); }
.nav a:hover { color: var(--orange); }
.lang-switch { display: flex; gap: 4px; border-left: 1px solid var(--line); padding-left: 20px; }
.lang-switch a {
  font-size: 13px; font-weight: 700; padding: 6px 9px; border-radius: 5px; color: var(--muted);
}
.lang-switch a[aria-current="page"] { background: var(--navy); color: #fff; }
.lang-switch a:not([aria-current="page"]):hover { background: var(--bg-soft); color: var(--navy); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 6px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: .2s ease;
}
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 26px; color: var(--navy); cursor: pointer; }

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  /* W10: the hero now carries a real video (poster + loop), so the old
     1920px hero-line.jpg background was a second, redundant full-bleed
     download on the critical path. Navy stays as the pre-paint colour. */
  background: var(--navy);
  min-height: 620px; display: flex; align-items: center;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* W10: a <video> slide keeps its poster until JS calls play(). No autoplay
   attribute exists in the markup, so a motion-sensitive visitor is never
   handed a spontaneously moving hero. */
.hero-slide[data-hero-slide] { background: var(--navy); }
.hero-slide:first-child { display: block; }
/* W14: the scrim used to run .95 -> .86 (at 42%) -> .25 (at 100%), i.e. it was
   still 25% solid navy at the right-hand edge and 86% across the middle. Measured
   against the footage, that left only 2% / 4% / 9% of the picture's local
   contrast in the left third and 45% at the far right — the client's "still
   blurry, is the opacity not enough?" was describing this veil, not the codec.
   The veil now has to finish its job where the copy ends and get out of the way:
   91% over the headline, ~5% by x=68%, 0 from 80% on. The right third of the
   hero is now the actual video at full contrast. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(9,26,49,.55) 0%, rgba(9,26,49,.18) 12%, rgba(9,26,49,0) 26%),
    linear-gradient(90deg, rgba(9,26,49,.92) 0%, rgba(9,26,49,.88) 44%,
                    rgba(9,26,49,.62) 56%, rgba(9,26,49,.18) 68%, rgba(9,26,49,0) 80%);
}
/* A hairline shadow buys legibility on the few bright pixels (a lit machine, a
   window) that no scrim can fully cover without turning the picture to mud. */
.hero h1, .hero p.lead, .hero .eyebrow, .hero-stats strong, .hero-stats small {
  text-shadow: 0 1px 3px rgba(4,14,28,.55);
}
.hero .container { position: relative; z-index: 2; padding: 90px 0; }
.hero h1 { font-size: clamp(36px, 5.4vw, 62px); max-width: 760px; margin-bottom: 20px; }
.hero p.lead { font-size: 19px; max-width: 620px; color: #d7e2f0; margin-bottom: 34px; }
.hero .eyebrow { color: #ffb066; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 46px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.22); }
.hero-stats strong { display: block; font-size: 34px; line-height: 1.1; color: #fff; }
.hero-stats small { color: #aac0da; font-size: 13px; letter-spacing: .04em; }

/* ---------- W9 hero poster carousel ---------- */
/* Default: first poster visible, ALL clip links visible, controls hidden.
   A crawler, a JS-off browser and a reduced-motion visitor get exactly this:
   full hero copy, three working deep links, no empty box, no dead buttons. */
.hero-clips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.hero-clips-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #aac0da; margin-right: 4px; }
.hero-clip {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
  /* W14: the scrim now fades out under this row, so the chip has to carry its
     own contrast instead of leaning on the page veil (was .42). */
  background: rgba(9,26,49,.62); color: #fff; text-decoration: none; font-size: 13px;
}
.hero-clip:hover, .hero-clip.is-active { border-color: var(--orange); background: rgba(9,26,49,.72); }
.hero-clip-watch { color: #ffb066; font-size: 12px; white-space: nowrap; }
.hero-clip-watch i { font-style: normal; }
.hero-controls { display: none; position: absolute; right: 34px; bottom: 34px; z-index: 3; align-items: center; gap: 10px; }
/* W16: 981-1180px is the band where the LONGEST language decides whether the
   header fits. At 990px the Russian nav needed 104px more than it had, so the
   page itself scrolled sideways (measured on all 28 pages, 18 of them red).
   1180px upward is unchanged; <=980px already uses the burger menu. */
@media (min-width: 981px) and (max-width: 1180px) {
  .header-inner { gap: 18px; }
  .nav { gap: 14px; }
  .nav a { font-size: 14px; }
  .brand { font-size: 22px; }
  .nav .btn { padding: 11px 16px; font-size: 14px; }
  .lang-switch { padding-left: 12px; }
}

/* W16: the dots used to BE the 11px dot, so a phone got three 11x11 tap targets
   for the carousel — a thumb cannot hit that, and WCAG 2.5.8 asks for 24x24 at
   minimum. The button is now 36x36 and the dot is drawn by ::before, so the
   picture is unchanged while the target is 3.3x larger. gap goes to 0 and the
   row carries negative margin, because the extra 25px per button is padding
   the eye should not see — the dots must still read as a 19px-spaced cluster. */
.hero-dots { display: flex; gap: 0; align-items: center; margin: 0 -9px; }
.hero-arrow, .hero-pause, .hero-dot {
  cursor: pointer; font: inherit; border: 1px solid rgba(255,255,255,.5);
  background: rgba(9,26,49,.66); color: #fff; border-radius: 8px; padding: 7px 12px;
}
.hero-dot {
  width: 36px; height: 36px; padding: 0; border: 0; background: transparent;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.hero-dot::before {
  content: ""; display: block; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); background: rgba(9,26,49,.66);
}
.hero-dot[aria-current="true"]::before { background: var(--orange); border-color: var(--orange); }
.hero-scroll {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3;
  color: #d7e2f0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
}
.hero[data-hero-live="1"] .hero-controls { display: flex; }
.hero[data-hero-live="1"] .hero-slide:first-child { display: none; }
.hero[data-hero-live="1"] .hero-slide.is-active { display: block; animation: heroFade .6s ease both; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- products ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: .22s ease; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #cbd8ea; }
.card-media { aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: .35s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 19px; color: var(--navy); margin-bottom: 8px; }
.card-body p { color: var(--muted); font-size: 14.5px; margin-bottom: 16px; flex: 1; }
.card-link { font-size: 14px; font-weight: 700; color: var(--orange); }
.card-link:hover { text-decoration: underline; }

/* ---------- why us ---------- */
.why-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.why-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.why-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.feature:last-child { border-bottom: 0; }
.feature-num {
  flex: none; width: 42px; height: 42px; border-radius: 8px;
  background: rgba(245, 130, 31, .12); color: var(--orange-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.feature h3 { font-size: 17px; color: var(--navy); margin: 0 0 4px; }
.feature p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ---------- industries ---------- */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.industry { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 230px; }
.industry img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: .35s ease; }
.industry:hover img { transform: scale(1.07); }
.industry::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,26,49,.88), rgba(9,26,49,.05)); }
.industry span { position: absolute; bottom: 18px; left: 18px; z-index: 2; color: #fff; font-weight: 700; font-size: 16px; }

/* ---------- about ---------- */
.about-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.about-photo img { border-radius: var(--radius); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--shadow); }
.about-stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.about-stats strong { display: block; font-size: 30px; color: var(--navy); }
.about-stats small { color: var(--muted); font-size: 13px; }

/* ---------- CTA ---------- */
.cta {
  position: relative; color: #fff; text-align: center; padding: 96px 0;
  background: var(--navy) url("../img/cta-robots.jpg") center / cover no-repeat;
}
.cta::before { content: ""; position: absolute; inset: 0; background: rgba(9, 26, 49, .88); }
.cta .container { position: relative; z-index: 2; }
.cta h2 { font-size: clamp(28px, 4vw, 42px); }
.cta p { color: #d7e2f0; max-width: 620px; margin: 0 auto 30px; font-size: 17px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- inquiry ---------- */
.inquiry-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-line { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-line strong { min-width: 92px; color: var(--navy); }
.form-note {
  background: #fff8ec; border: 1px solid #f6d9ae; color: #8a5a12;
  padding: 12px 16px; border-radius: 6px; font-size: 13.5px; margin-bottom: 20px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; color: var(--navy); }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 14.5px; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid rgba(245,130,31,.35); border-color: var(--orange); }
.field textarea { min-height: 110px; resize: vertical; }
.form-status { margin-top: 12px; font-size: 14px; font-weight: 600; min-height: 22px; }

/* ---------- footer ---------- */
.site-footer { background: #081b33; color: #b9c9dd; padding: 64px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.site-footer a { display: block; padding: 4px 0; font-size: 14px; }
.site-footer a:hover { color: var(--orange); }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { font-size: 14px; max-width: 300px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- W2: product centre & detail pages ---------- */
.breadcrumb { background: #f4f7fb; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.breadcrumb .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; padding-bottom: 14px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb span[aria-current] { color: var(--navy); font-weight: 700; }
.breadcrumb .sep { color: #a9b6c7; }

.detail-hero { padding: 64px 0 56px; }
.detail-hero-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; }
.detail-hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.14; margin: 12px 0 18px; }
.detail-hero p.lead { font-size: 17px; color: var(--muted); line-height: 1.75; margin-bottom: 26px; }
.detail-hero-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.detail-hero .hero-actions { margin-bottom: 0; }

.detail-body-layout { display: grid; grid-template-columns: 1.35fr .85fr; gap: 52px; align-items: start; }
.detail-body h2 { font-size: 26px; margin: 0 0 18px; }
.detail-body h3 { font-size: 17px; margin: 0 0 6px; }
.detail-body p { color: var(--muted); line-height: 1.8; margin-bottom: 16px; }
.cap-list { display: grid; gap: 18px; margin: 22px 0 8px; }
.cap { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cap:last-child { border-bottom: 0; }
.cap-num { width: 34px; height: 34px; border-radius: 8px; background: rgba(245,130,31,.12); color: var(--orange); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.cap p { margin: 0; font-size: 14.5px; }

.spec-card { background: #f4f7fb; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.spec-card h3 { margin: 0 0 14px; font-size: 18px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--navy); font-weight: 700; width: 46%; padding-right: 12px; }
.spec-table td { color: var(--muted); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-note { margin-top: 16px; padding: 12px 14px; background: #fff7ed; border-left: 3px solid var(--orange); border-radius: 4px; font-size: 13px; color: #8a5a20; line-height: 1.6; }

.prod-index-hero { padding: 70px 0 56px; background: linear-gradient(135deg, #0b2545 0%, #123a6b 100%); color: #fff; }
.prod-index-hero h1 { font-size: clamp(32px, 4vw, 50px); margin: 12px 0 14px; }
.prod-index-hero p { color: #c4d5ea; max-width: 720px; line-height: 1.75; font-size: 16.5px; }
.prod-index-hero .eyebrow { color: var(--orange); }

/* ---------- video library (W3) ---------- */
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.video-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.video-frame { position: relative; background: var(--navy); aspect-ratio: 16 / 9; overflow: hidden; }
/* W15: the <video> is deliberately OUT OF FLOW. In flow, a preload="none"
   player exposes its POSTER's ratio as its intrinsic size, and this frame is
   a flex item in a column card where `min-height: auto` lets that intrinsic
   height beat `aspect-ratio` — the grid came out 437/388/475 px tall on a
   582 px column, so no two cards lined up. Absolute positioning takes it out
   of that calculation entirely; the 16:9 box always wins. */
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-meta { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.video-meta h3 { color: var(--navy); font-size: 20px; margin: 0 0 .4em; }
/* W15: descriptions are pinned to the bottom of the card. In a two-column
   row the titles do not all wrap the same way (at 1024px some are one line,
   some two), which used to start the right-hand description 24px higher
   than the left-hand one. Bottom-pinning aligns the copy line-for-line
   without reserving two empty title lines at every width. */
.video-meta p { color: var(--muted); font-size: 14.5px; margin: auto 0 0; }
.video-badge {
  display: inline-block; margin-bottom: 12px; padding: 4px 11px;
  border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--navy); letter-spacing: .04em;
  align-self: flex-start;
}
.video-note {
  max-width: 760px; margin: 34px auto 0; text-align: center;
  color: var(--muted); font-size: 14px;
}
.video-teaser { text-align: center; margin: 34px 0 0; }
.video-teaser a { color: var(--navy-3); font-weight: 700; border-bottom: 2px solid var(--orange); padding-bottom: 3px; }

/* ---------- W7 homepage rotating showcase ---------- */
/* Default = static, all cards readable, controls hidden. This is what a
   crawler, a JS-off browser and a reduced-motion visitor always get. */
.floor-stage { position: relative; }
.floor-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.floor-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, opacity .35s ease;
}
.floor-card:hover { transform: translateY(-4px); }
.floor-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--navy); overflow: hidden; }
.floor-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.floor-badge {
  position: absolute; left: 12px; bottom: 12px; padding: 3px 9px;
  border-radius: 999px; background: rgba(11, 37, 69, .86);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.floor-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  border-radius: 50%; background: var(--orange);
  box-shadow: 0 4px 18px rgba(11, 37, 69, .28);
}
.floor-play::before {
  content: ""; position: absolute; top: 17px; left: 21px;
  border-left: 15px solid #fff;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.floor-info { padding: 18px 20px 22px; }
.floor-info h3 { color: var(--navy); font-size: 17px; margin: 0 0 .45em; }
.floor-info a {
  color: var(--navy-3); font-weight: 700; font-size: 14px;
  border-bottom: 2px solid var(--orange); padding-bottom: 2px;
}
.floor-note { text-align: center; margin: 26px 0 0; color: var(--muted); font-size: 14.5px; }
.floor-note a { color: var(--navy-3); font-weight: 700; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }

/* W9: #floor is a STATIC grid. The single auto-rotation now lives in the hero. */

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .detail-hero-layout, .detail-body-layout { grid-template-columns: 1fr; gap: 32px; }
  .detail-hero-media { order: -1; }
  .video-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .why-layout, .about-layout, .inquiry-layout { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; padding: 12px 24px 20px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .lang-switch { border-left: 0; padding-left: 0; margin-top: 12px; }
}
@media (max-width: 620px) {
  .container { width: min(100% - 32px, var(--maxw)); }
  .section { padding: 60px 0; }
  .grid-3, .grid-5 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 24px; }
  .hero-stats strong { font-size: 26px; }
  .hero-clips { gap: 8px; }
  .hero-controls { right: 16px; bottom: 16px; }
  .hero-scroll { display: none; }
}

/* ---------- W7 showcase: responsive + reduced motion ---------- */
@media (max-width: 980px) {
  .floor-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .floor-track { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .floor-card { transition: none; animation: none !important; }
  .hero-slide { animation: none !important; }
  html { scroll-behavior: auto; }
}