* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #fff;
  color: #222;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3); /* 薄い白背景 */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  backdrop-filter: blur(5px); /* オプション：背景にぼかし効果 */
}


.logo img {
  height: 50px;
}

.global-nav {
  margin-left: auto;
}

.global-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.global-nav a {
  white-space: nowrap;
  font-size: 0.95rem;
  color: #000;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.global-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.global-nav a:hover {
  color: #007b53; /* ロールオーバー時の文字色：ロゴの緑に */
}

.global-nav a:hover::after {
  transform: scaleX(1); /* 下線が伸びるアニメーション */
}

.menu-close {
  display: none;
  text-align: right;
  padding: 10px 20px;
  font-size: 1.8rem;
  cursor: pointer;
}
.hero {
 margin-bottom: 0;
}

.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


.hero-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}


/* PC向けサービスセクションの調整 */
.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 60px 40px;
  background-color: #f8f8f8;
  gap: 0; /* 隙間なしにする場合 */
}

.service-box {
  flex: 1 1 calc(33.333% - 20px); /* 3列、間に若干の余白を考慮するなら -20px など調整可 */
  margin: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: center;
}

/* 画像は全幅 */
.service-box img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 15px;
}


.service-box h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.service-box p {
  font-size: 0.95rem;
  color: #555;
}


/* === ヘッドラインセクション === */
.headline-section {
  position: relative;
  padding-top: 60px; /* 必要に応じて調整 */
}

.headline-tag {
  display: inline-block;
  background: #e6f4ec;
  color: #007b53;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.headline-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 30px;
  line-height: 1.5;
  color: #111;
}

.headline-button {
  display: inline-flex;
  align-items: center;
  background: #111;
  color: #fff;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  text-decoration: none;
  margin-bottom: 40px;
  transition: background-color 0.3s ease;
}

.headline-button:hover {
  background-color: #333;
}

.headline-button i {
  margin-left: 8px;
}

.headline-sub {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 12px;
}

.headline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.headline-tags span {
  background: #f1f3f5;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #333;
}

.headline-section {
  padding: 80px 20px;
  background: #f7f9f9; /* ← 薄い背景色を追加 */
  text-align: center;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .headline-title {
    font-size: 1.6rem;
  }
}




/* レスポンシブ対応 */

@media screen and (max-width: 1024px) {
  .global-nav ul {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
  }

  .global-nav ul {
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .hero-text {
    font-size: 1.4rem;
    bottom: 20px;
    left: 20px;
    transform: none;
    text-align: left;
  }

  .hero-text {
    white-space: normal; /* ← 改行を許可 */
    line-break: strict;  /* ← 日本語の自然な改行 */
    text-align: center;
    word-break: keep-all;
  }

  .hero-text h1 {
    display: inline-block;
    text-align: center;
  }

  /* 2行に見せるために、幅を制限して自動改行 */
  .hero-text {
    max-width: 80%;
    margin: 0 auto;
  }
  
  .services {
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }

  .service-box {
    width: 90%;
  }
}

/* ハンバーガーメニューのスタイル */
.menu-toggle {
  display: none;
}

.contact-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007b53;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  margin-top: 16px;
}

/* フッター全体 */
.site-footer {
  background-color: #f4f4f4;
  padding: 0;
  font-size: 0.9rem;
  color: #333;
  
}

/* CTAボタン */
.footer-cta {
  text-align: center;
  margin-bottom: 40px;
}

.footer-contact-button {
  display: inline-block;
  background-color: #111;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.footer-contact-button:hover {
  background-color: #333;
}

.footer-contact-button .arrow {
  margin-left: 10px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.footer-contact-button:hover .arrow {
  transform: translateX(3px);
}

/* フッターのメインセクション */
.footer-main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 30px;
  gap: 40px;
  padding: 40px 20px 20px;
}

/* カラム構成 */
.footer-columns {
  display: flex;
  gap: 60px;
  flex: 1;
}

.footer-column h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: bold;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 10px;
}

.footer-column a {
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: #000;
}

/* ロゴ配置 */
.footer-brand img {
  height: 48px;
}

/* 下部コピーライト */
.footer-bottom {
  background-color: #007b53; /* ロゴの緑（調整可） */
  border-top: none;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #fff; /* ← コピーライトを白に */
}


/* アイコン */
.footer-icons a {
  color: #fff; /* ← アイコンを白に */
  margin-left: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-icons a:hover {
  color: #ccc; /* ホバー時は明るめグレーなどでアクセント */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-columns {
    flex-direction: column;
    gap: 30px;
  }

  .footer-brand {
    margin-top: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .footer-icons a {
    margin: 0 10px;
  }
}

/* === 流体境界アニメーション === */
.fluid-divider {
  position: relative;
  margin-top: -120px; /* ヒーローに食い込ませる */
  z-index: 20;
}

.fluid-divider svg {
  width: 100%;
  height: 180px;
  display: block;
}

.fluid-divider path {
  fill: #f7f9f9; /* ← headline-sectionの背景色に合わせる */
  animation: none;
}


@keyframes wave {
  0% {
    d: path("M0,50 Q480,100 960,50 T1920,50 L1920,150 L0,150 Z");
  }
  50% {
    d: path("M0,60 Q480,30 960,80 T1920,60 L1920,150 L0,150 Z");
  }
  100% {
    d: path("M0,50 Q480,100 960,50 T1920,50 L1920,150 L0,150 Z");
  }
}

@media screen and (max-width: 768px) {
  .fluid-divider path {
    animation: none;
  }
}

@keyframes waveMobile {
  0% {
    d: path("M0,50 Q480,70 960,50 T1920,50 L1920,150 L0,150 Z");
  }
  50% {
    d: path("M0,55 Q480,60 960,55 T1920,55 L1920,150 L0,150 Z");
  }
  100% {
    d: path("M0,50 Q480,70 960,50 T1920,50 L1920,150 L0,150 Z");
  }
}



/* heroセクションをrelativeにしてdividerを重ねる */
.hero {
  position: relative;
  z-index: 10; /* ヒーローを前面に */
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
  /* ハンバーガーアイコン */
.menu-toggle {
  display: block;
  font-size: 2rem;
  cursor: pointer;
  color: #000;
  position: absolute;
  top: 2px;
  margin-top: -8px;
  right: 16px;
  width: 40px; /* ← 横幅を明示して揃える */
  text-align: center; /* ← この中で中央揃え */
  z-index: 1100;
}

.menu-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  margin-top: 0px;
  line-height: 0;
  white-space: nowrap;
}

  .global-nav {
    display: none;
    width: 100%;
  }

  .global-nav.active {
    display: block;
  }

  .global-nav ul {
    flex-direction: column;
    background-color: #fff;
    padding: 10px 0;
    margin: 0;
    border-top: 1px solid #ccc;
  }

  .global-nav li {
    padding: 10px 20px;
  }
  .menu-close {
    display: block;
    background-color: #fff;
    color: #000;
    font-weight: bold;
  }
  .hero {
    height: 40vh; /* スマホ用に高さを拡張 */
  }

  .hero-text {
    font-size: 1.4rem;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0 10px;
    width: 100%;
  }

  .logo img {
    height: 25px;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
  }

  .services {
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }

  .service-box {
    width: 90%;
  }

 .footer-main {
    flex-direction: column;
    align-items: center; /* ← 中央寄せに変更 */
    text-align: center;  /* ← テキスト中央揃え */
  }

  .footer-columns {
    flex-direction: column;
    align-items: center; /* ← カラム全体も中央揃え */
    text-align: center;
    gap: 24px;
  }

  .footer-column a {
    display: inline-block;
  }

  .footer-brand {
    margin-top: 20px;
    text-align: center;
  }

  .footer-brand img {
    display: block;
    margin: 0 auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .footer-icons a {
    margin: 0 10px;
  }
}

/* ===== Contact page scoped styles (safe, namespaced) ===== */
.contact .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.hero--contact { padding: 64px 0 24px; }
.hero--contact .hero__title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
.hero--contact .hero__lead { color: #555; margin: 0; }
.section--contact-form { padding: 16px 0 72px; }

.contact-form { width: 100%; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.contact-form .form-group { display: grid; gap: 8px; }
.contact-form label { font-weight: 600; }
.contact-form .req { color: #d33; font-weight: 700; font-size: 0.9em; margin-left: .25em; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.contact-form textarea { resize: vertical; min-height: 180px; }
.contact-form .radios { display: flex; flex-wrap: wrap; gap: 16px; }
.contact-form .radios label { font-weight: 500; }
.contact-form .checkbox { display: inline-flex; align-items: center; gap: 8px; }
.contact-form .agree-note { font-size: 0.9rem; color: #666; margin-top: 6px; }
.contact-form .form-actions { margin-top: 24px; }

/* Buttons — try to reuse existing .btn styles if present, otherwise provide fallback */
.btn { display: inline-block; padding: 12px 20px; border-radius: 999px; text-decoration: none; border: none; cursor: pointer; }
.btn--primary { background: #16a34a; color: #fff; }
.btn--primary:hover { filter: brightness(0.95); }

/* Responsive 2-col on larger screens */
@media (min-width: 768px) {
  .contact-form .form-row { grid-template-columns: 1fr 1fr; }
}

/* Honeypot (hidden) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* h1の位置を少し下げる */
.hero--contact .hero__title {
  margin-top: 32px; /* 追加: 見出しの余白を下げる */
  margin-bottom: 16px; /* 少し広めに */
}

/* ラベルと入力欄の間隔を広げる */
.contact-form .form-group {
  gap: 12px; /* 元8px → やや広めに */
  margin-bottom: 20px; /* 各グループの下に余白を追加 */
}

/* 2カラムのフォーム全体の間隔を少し広くする */
.contact-form .form-row {
  gap: 24px; /* 元16px → やや広めに */
}


/* ===== Company page scoped styles ===== */
.company .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.hero--company { padding: 72px 0 24px; }
.hero--company .hero__title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
.hero--company .hero__lead { color: #555; margin: 0; }

.section { padding: 24px 0 56px; }

.company .grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.company .card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 20px; }
.company .card h2 { margin: 0 0 8px; font-size: 1.25rem; }

.biz-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.biz { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 20px; }
.biz h3 { margin: 0 0 6px; }
.biz p { margin: 0 0 8px; }

.table-like { display: grid; gap: 8px; }
.table-like > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline;
  background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 12px 16px; }
.table-like dt { font-weight: 700; }
.table-like dd { margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #e5e7eb; }
.timeline .time { font-weight: 700; }
.timeline .desc { color: #333; }

@media (min-width: 768px) {
  .company .grid { grid-template-columns: repeat(3, 1fr); }
  .biz-list { grid-template-columns: repeat(2, 1fr); }
  .hero--company { padding-top: 96px; }
}


/* === Drone page scoped styles（案B） === */
    .drone .container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
    .hero--drone { position: relative; min-height: 52svh; background: #143426; color: #fff; }
    .hero--drone::before {
      content:""; position:absolute; inset:0;
      background: url("../images/drone/hero.jpg") center/cover no-repeat;
      opacity:.65;
    }
    .hero--drone::after {
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.0) 10%, rgba(0,0,0,.45) 70%);
    }
    .hero--drone .inner { position: relative; z-index: 1; padding: 120px 0 80px; }
    .hero--drone .hero__title { font-size: clamp(32px, 5vw, 56px); margin: 0 0 12px; }
    .hero--drone .hero__lead { font-size: clamp(16px, 2.2vw, 20px); color: #e8f6f0; margin: 0 0 24px; }
    .hero--drone .btn--primary { background:#0a7c5a; color:#fff; border-radius: 999px; padding: 12px 22px; display:inline-block; text-decoration:none; }

    .section { padding: 72px 0; }
    .cards-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
    .card { background:#fff; border:1px solid #e6e8ea; border-radius:16px; padding:20px; }
    .card h3 { margin: 0 0 8px; font-size: 22px; }
    .thumb { width:100%; height:140px; border-radius:12px; object-fit:cover; background:#cfd8d4; margin-bottom:12px; }

    .flow { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; counter-reset: step; }
    .flow li { list-style:none; background:#fff; border:1px solid #e6e8ea; border-radius:12px; padding:16px; position:relative; }
    .flow li::before {
      counter-increment: step; content: counter(step);
      position:absolute; left:-10px; top:-10px; width:28px; height:28px; border-radius:50%;
      background:#0a7c5a; color:#fff; display:grid; place-items:center; font-weight:700;
    }

    .pricing { display:grid; grid-template-columns: 1.4fr .9fr; gap:24px; }
    .box { background:#fff; border:1px solid #e6e8ea; border-radius:16px; padding:20px; }
    .box h3 { margin:0 0 10px; }
    .sample-photo { width:100%; height:160px; border-radius:12px; object-fit:cover; background:#dbe2e0; }
    /* 料金ボックスを中央寄せ・読みやすい幅に */
.box--pricing{ max-width: 960px; margin: 0 auto; }

/* 旧グリッド用の .pricing を使わなくなるので、特に変更不要。
   もし .pricing のまま残すなら上書きで解除：
   .pricing{ display:block; }
*/
    .faq details { background:#fff; border:1px solid #e6e8ea; border-radius:12px; padding:14px 16px; margin:10px 0; }
    .faq summary { cursor:pointer; font-weight:700; }

    .section--cta { background:#fff; padding: 56px 0; text-align:center; border-top:1px solid #eef1f1; }
    .section--cta h2 { margin:0 0 8px; }
    .section--cta p { margin:0 0 16px; color:#445; }

    /* === 導入事例＋カーゴ === */
    .case-flex { display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; }
    .case-hero img { width:100%; height:auto; border-radius:16px; }
    .case-hero figcaption { margin-top:12px; color:#445; }
    .cargo h3 { margin:0 0 10px; }
    .chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; padding:0; list-style:none; }
    .chips li { background:#f0f5f3; color:#0a7c5a; border:1px solid #cfe3db; border-radius:999px; padding:6px 10px; font-size:14px; }
    .cargo-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    .cargo-grid figure { background:#fff; border:1px solid #e6e8ea; border-radius:12px; padding:10px; }
    .cargo-grid img { width:100%; height:160px; object-fit:cover; border-radius:8px; background:#dbe2e0; }
    .cargo-grid figcaption { font-size:14px; margin-top:6px; color:#333; }
    .cargo .note { margin-top:12px; font-size:14px; color:#445; }

    @media (max-width: 900px){
      .cards-3 { grid-template-columns:1fr; }
      .flow { grid-template-columns:1fr; }
      .pricing { grid-template-columns:1fr; }
      .hero--drone .inner { padding: 96px 0 56px; }
      .case-flex { grid-template-columns:1fr; }
      .cargo-grid { grid-template-columns:1fr; }
    }

.section--clients { padding: 56px 0; }
.clients__title { margin: 0 0 16px; }

.logo-track{
  --gap: 36px;           /* ロゴ間隔 */
  --h: 72px;             /* ロゴ行の高さ（PC） */
  --speed: 38s;          /* 1周の速度 */
  position: relative;
  overflow: hidden;
  border: 1px solid #e6e8ea;
  border-radius: 16px;
  background: #fff;
  padding: 16px 0;
  margin-bottom: 16px;
}
.logo-track[data-speed="slower"]{ --speed: 46s; opacity: .95; }

.logo-row{
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: var(--h);
  /* キーフレームで左へ流す。JSで2本化して継ぎ目ゼロに */
  animation: marquee var(--speed) linear infinite;
  will-change: transform;
}
.logo-track:hover .logo-row{ animation-play-state: paused; }

.logo-row li{ flex: 0 0 auto; display: flex; align-items: center; }
.logo-row img{
  height: calc(var(--h) - 16px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: none; /* 必要なら grayscale(100%) など */
}
/* PC: 行の高さを72px → 108px（=1.5倍）に */
.section--clients .logo-track{ --h: 108px; }

/* ロゴ画像の最大幅も 180px → 270px（=1.5倍）に */
.section--clients .logo-row img{
  height: calc(var(--h) - 16px);
  max-width: 270px;
}

/* SP最適化 */
@media (max-width: 900px){
  .logo-track{ --h: 64px; --gap: 24px; }
}
/* SP時は見やすいよう64px → 96px */
@media (max-width: 900px){
  .section--clients .logo-track{ --h: 96px; }
}

/* スクロール用キーフレーム（JSが幅に合わせて補正する） */
@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
/* 固定・中央ぞろえ・1段（アニメOFF） */
.section--clients .logo-track{
  --h: 108px;          /* ロゴサイズ 1.5倍のまま */
  padding: 24px 0;
}
.section--clients .logo-row{
  display: flex;
  align-items: center;
  justify-content: center;  /* 中央寄せ */
  gap: 72px;                /* ロゴ間隔（お好みで） */
  height: auto;
  animation: none !important;   /* 流しを停止 */
  will-change: auto;
  flex-wrap: nowrap;            /* PCは1段固定 */
}
.section--clients .logo-row img{
  max-width: 270px;             /* 1.5倍に合わせて */
  height: auto;
  max-height: calc(var(--h) - 16px);
}

/* スマホは横幅が足りない時だけ折り返し可 */
@media (max-width: 900px){
  .section--clients .logo-row{
    flex-wrap: wrap;            /* 必要時だけ2段に */
    gap: 36px;
  }
  .section--clients .logo-track{ --h: 96px; }
}

/* ===== ページ固有（VR） ===== */
  .vr .container{max-width:1120px;margin:0 auto;padding:0 16px}
  .hero--vr{position:relative;min-height:52svh;color:#fff;background:#143426}
  .hero--vr::before{content:"";position:absolute;inset:0;background:url("../images/vr/hero.jpg") center/cover no-repeat;opacity:.65}
  .hero--vr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 10%,rgba(0,0,0,.45) 70%)}
  .hero--vr .inner{position:relative;z-index:1;padding:120px 0 80px}
  .hero--vr .hero__title{font-size:clamp(32px,5vw,56px);margin:0 0 12px}
  .hero--vr .hero__lead{font-size:clamp(16px,2.2vw,20px);color:#e8f6f0;margin:0 0 24px}
  .btn--primary{background:#0a7c5a;color:#fff;border-radius:999px;padding:12px 22px;display:inline-block;text-decoration:none}

  .section{padding:72px 0}
  .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .card{background:#fff;border:1px solid #e6e8ea;border-radius:16px;padding:20px}
  .card h3{margin:0 0 8px;font-size:22px}
  .thumb{width:100%;height:140px;border-radius:12px;object-fit:cover;background:#cfd8d4;margin-bottom:12px}

  .usecase .card p{min-height:3.6em}

  .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
  .flow li{list-style:none;background:#fff;border:1px solid #e6e8ea;border-radius:12px;padding:16px;position:relative}
  .flow li::before{counter-increment:step;content:counter(step);position:absolute;left:-10px;top:-10px;width:28px;height:28px;border-radius:50%;background:#0a7c5a;color:#fff;display:grid;place-items:center;font-weight:700}

  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .plan{background:#fff;border:1px solid #e6e8ea;border-radius:16px;padding:18px}
  .plan h3{margin:0 0 8px}
  .plan .price{font-weight:700;margin:6px 0 10px}

  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px;background:#dbe2e0}

  .section--cta{text-align:center;border-top:1px solid #eef1f1;padding:56px 0}
  .section--cta h2{margin:0 0 8px}

  .devices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .devices li{list-style:none;background:#fff;border:1px solid #e6e8ea;border-radius:12px;padding:14px}

  .faq{max-width:900px;margin:0 auto}
  .faq dt{font-weight:700;margin:16px 0 6px}
  .faq dd{margin:0 0 12px}

  @media(max-width:900px){
    .cards-3,.plans,.gallery,.flow,.devices{grid-template-columns:1fr}
    .hero--vr .inner{padding:96px 0 56px}
  }