/* ============================================================
 * Dunova VPN — Warm Sand theme (Web)
 *
 * Flutter app の "Warm Sand" デザイン (sand bg + ほぼ白カード +
 * サンドゴールド/teal アクセントの **明色テーマ**) を Web に移植した
 * オーバーライド CSS。既存 Bootstrap/Owl.carousel ベースの style.css
 * を読み込んだ「後」にロードして色・タイポ・サーフェスを差し替える。
 *
 * 旧 "Midnight Glass" (dark glassmorphism) からの全面刷新。ファイル名と
 * `--mg-*` 変数名は 30+ 箇所から参照されているため **名前は維持したまま
 * 値だけ light に再割当て**している (歴史的経緯。名前と実際の色は不一致)。
 *  - `--mg-midnight-*`  … 実体はサンド背景グラデの各段。
 *  - `--mg-on-dark*`    … 実体は「明色地に乗せるダークインク」階調。
 *  - `--mg-surface-glass*` … 実体は「サンド地に浮くほぼ白のカード」。
 *
 * アプリ app_theme.dart の AppColors と同値:
 *   sand  #ECE5D8 / #E6DECF / #E0D8C7
 *   card  #FBF8F1 / #FFFFFF        border rgba(0,0,0,.08)
 *   ink   #2A2722 / #6E685C / #7C7565 / #B8B2A4
 *   gold  #A8965F (accent) / #8A7A4F (deep CTA)
 *   teal  #2FB8C4 / #38C6D2        error #D64550
 * ============================================================ */

:root {
  /* ===== Override existing style.css design tokens =====
   * style.css declares its own custom properties. Re-declaring them HERE —
   * after style.css load — recolors every element that consumes them,
   * without needing per-rule !important overrides.
   */
  --primary-color: #8A7A4F;                   /* headings/accent text → deep gold */
  --secondary-color: #2FB8C4;                 /* teal */
  --primary-bg-color: #ECE5D8;                /* body bg (sand top) */
  --primary-bg-color-2: #FBF8F1;              /* "card" bg used in reviews etc */
  --primary-bg-color-3: #FFFFFF;
  --primary-l-color: rgba(0,0,0,0.08);        /* light borders */
  --primary-p-color: #6E685C;                 /* paragraph text (ink 72) */
  --secondary-bg-color: #E6DECF;
  --secondary-bg-color-2: #E0D8C7;
  --secondary-bg-color-3: #FBF8F1;
  --card-bg-color: #FBF8F1;
  --white-color: #2A2722;                     /* "white" text slots → dark ink */
  --hero-bg-color: transparent;

  /* Sand background gradient */
  --mg-midnight-top: #ECE5D8;
  --mg-midnight-mid: #E6DECF;
  --mg-midnight-bottom: #E0D8C7;

  /* Surface / card (sand 地に浮くほぼ白カード) */
  --mg-surface-glass: #FBF8F1;
  --mg-surface-glass-strong: #FFFFFF;
  --mg-surface-glass-border: rgba(0, 0, 0, 0.08);

  /* Gold accent */
  --mg-gold: #A8965F;
  --mg-gold-deep: #8A7A4F;
  --mg-gold-bright: #B9A878;

  /* Teal accent */
  --mg-teal: #2FB8C4;
  --mg-teal-bright: #38C6D2;

  /* Text (明色地のダークインク) */
  --mg-on-dark: #2A2722;
  --mg-on-dark-72: #6E685C;
  --mg-on-dark-54: #7C7565;
  --mg-on-dark-12: rgba(0, 0, 0, 0.08);

  /* Misc */
  --mg-radius-lg: 24px;
  --mg-radius-md: 16px;
  --mg-radius-sm: 12px;
  --mg-radius-pill: 999px;
  --mg-shadow-card: 0 12px 32px -14px rgba(42, 39, 34, 0.18);
  --mg-shadow-glow: 0 10px 28px -10px rgba(138, 122, 79, 0.40);
}

/* ============================================================
 * Base body + ambient gradient background
 * ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background: var(--mg-midnight-bottom) !important;
  color: var(--mg-on-dark) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Noto Sans JP", "Helvetica Neue", Arial, sans-serif !important;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}

.mg-card p,
.mg-card li,
.mg-faq-answer,
.mg-faq-item summary {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    /* Top-left warm sand glow */
    radial-gradient(ellipse 80% 60% at 15% 5%, rgba(168, 150, 95, 0.14), transparent 60%),
    /* Right-side teal hint */
    radial-gradient(ellipse 70% 50% at 95% 25%, rgba(47, 184, 196, 0.08), transparent 65%),
    /* Bottom gold warmth */
    radial-gradient(ellipse 90% 50% at 70% 110%, rgba(168, 150, 95, 0.12), transparent 60%),
    /* Sand gradient */
    linear-gradient(180deg, #ECE5D8 0%, #E6DECF 45%, #E0D8C7 100%);
  z-index: -2;
  pointer-events: none;
}

/* Soft floating warm blobs for depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle 280px at 10% 18%, rgba(168, 150, 95, 0.10) 0, transparent 70%),
    radial-gradient(circle 340px at 88% 70%, rgba(47, 184, 196, 0.07) 0, transparent 70%),
    radial-gradient(circle 220px at 70% 12%, rgba(185, 168, 120, 0.10) 0, transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.9;
}

/* ============================================================
 * Typography reset
 * ============================================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--mg-on-dark) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem) !important; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem) !important; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important; }

p, li {
  color: var(--mg-on-dark-72) !important;
  line-height: 1.7;
}

a {
  color: var(--mg-gold-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--mg-gold); }

/* ============================================================
 * Navbar
 * ============================================================ */
.navbar,
.gameon-navbar,
header,
#header {
  background: transparent !important;
  border-bottom: none;
}

/* Smart scroll behavior on the home navbar:
   - at top: fully transparent (lets hero bg show through)
   - scrolling up but not at top: light "glass"
   - scrolling down: hidden (slides above viewport) */
#header .navbar.gameon-navbar {
  background: transparent !important;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    transform 0.35s cubic-bezier(.2, .8, .2, 1),
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    border-bottom-color 0.3s ease;
  will-change: transform;
}

#header .navbar.gameon-navbar.is-glass {
  background: rgba(251, 248, 241, 0.82) !important;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom-color: var(--mg-surface-glass-border);
}

#header .navbar.gameon-navbar.is-hidden {
  transform: translateY(-110%);
}

.navbar .nav-link,
.gameon-navbar .nav-link {
  color: var(--mg-on-dark-72) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--mg-gold-deep) !important;
}

.dropdown-menu {
  background: var(--mg-surface-glass-strong) !important;
  border: 1px solid var(--mg-surface-glass-border) !important;
  border-radius: var(--mg-radius-md) !important;
  box-shadow: var(--mg-shadow-card);
  backdrop-filter: blur(20px);
}
.dropdown-menu .nav-link {
  color: var(--mg-on-dark-72) !important;
}
.dropdown-menu .nav-link:hover {
  color: var(--mg-gold-deep) !important;
  background: rgba(168, 150, 95, 0.10) !important;
}

/* Language dropdown (32 locales) — scrollable column when over viewport. */
.dropdown-menu.lang-dropdown {
  max-height: min(70vh, 480px);
  overflow-y: auto;
  min-width: 220px;
  padding: 6px 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 150, 95, 0.5) transparent;
}
.dropdown-menu.lang-dropdown::-webkit-scrollbar {
  width: 6px;
}
.dropdown-menu.lang-dropdown::-webkit-scrollbar-thumb {
  background: rgba(168, 150, 95, 0.5);
  border-radius: 3px;
}
.dropdown-menu.lang-dropdown .nav-link {
  padding: 0.5rem 1.25rem !important;
}
.dropdown-menu.lang-dropdown .nav-link.active {
  color: var(--mg-gold-deep) !important;
  background: rgba(168, 150, 95, 0.12) !important;
  font-weight: 600;
}

/* ============================================================
 * Buttons (gold pill)
 * ============================================================ */
.btn-bordered-white,
.btn,
.btn-primary,
.btn-secondary,
.gameon-btn,
.button {
  background: linear-gradient(180deg, var(--mg-gold) 0%, var(--mg-gold-deep) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--mg-radius-pill) !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: var(--mg-shadow-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-bordered-white:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.gameon-btn:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(138, 122, 79, 0.55);
  color: #FFFFFF !important;
}

/* Outline / secondary button variant */
.btn-outline,
.btn-outline-light {
  background: var(--mg-surface-glass) !important;
  border: 1px solid var(--mg-surface-glass-border) !important;
  color: var(--mg-on-dark) !important;
}
.btn-outline:hover,
.btn-outline-light:hover {
  background: var(--mg-surface-glass-strong) !important;
  border-color: var(--mg-gold) !important;
}

/* ============================================================
 * Sections / cards
 * ============================================================ */
section,
.section {
  background: transparent !important;
  padding: clamp(60px, 8vw, 96px) 0 !important;
}

.card,
.feature-item,
.review-item,
.team-single,
.team-content,
.gameon-feature,
.welcome-area .card,
.gameon-counter,
.image-box,
.image-box.layout-2,
.reviews,
.reviews.card {
  position: relative;
  background: var(--mg-surface-glass) !important;
  border: 1px solid var(--mg-surface-glass-border) !important;
  border-radius: var(--mg-radius-lg) !important;
  color: var(--mg-on-dark) !important;
  box-shadow: var(--mg-shadow-card);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover,
.feature-item:hover,
.review-item:hover,
.image-box:hover,
.reviews:hover,
.gameon-feature:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 150, 95, 0.45) !important;
  box-shadow:
    0 22px 50px -20px rgba(42, 39, 34, 0.22),
    0 0 0 1px rgba(168, 150, 95, 0.12) !important;
}

.card *, .feature-item * {
  color: inherit !important;
}

/* ===== style.css の `.image-box` / `.reviews` 文字色を強制上書き ===== */
.image-box,
.image-box.layout-2 {
  color: var(--mg-on-dark) !important;
  background: var(--mg-surface-glass) !important;
}
/* 内側の content / 見出し / 本文は **背景透明**。カード地の上に直接乗せる
   (背景色を付けると文字を囲う帯が出て窮屈に見えるため)。 */
.image-box .content,
.image-box .content h4,
.image-box .content p,
.image-box .content h3 {
  color: var(--mg-on-dark) !important;
  background: transparent !important;
}
.image-box .content h4 {
  color: var(--mg-on-dark) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  margin-top: 18px !important;
}
.image-box .content p {
  color: var(--mg-on-dark-72) !important;
  font-size: 0.95rem;
  line-height: 1.7;
}
.image-box .icon {
  color: var(--mg-gold-deep) !important;
  font-size: 2.4rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 30%, rgba(168, 150, 95, 0.20), rgba(168, 150, 95, 0.05) 70%) !important;
  border: 1px solid rgba(168, 150, 95, 0.25);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.reviews,
.reviews.card,
.reviews .content,
.reviews .content p,
.reviews .reviewer-name,
.reviews .reviewer {
  color: var(--mg-on-dark) !important;
}
.reviews .content p { color: var(--mg-on-dark-72) !important; }
.reviews .reviewer-name { color: var(--mg-gold-deep) !important; font-weight: 700; }

/* レビューカード下半分の meta バーをサンドゴールドの淡いトーンに */
.reviews .review-meta,
.reviews .review-meta.primary-bg {
  background: rgba(168, 150, 95, 0.10) !important;
  border-top: 1px solid var(--mg-surface-glass-border) !important;
}

/* レビューカードの装飾引用符アイコン — 明色地に合わせてゴールド化 */
.reviews .quot-icon img {
  opacity: 0.5;
  filter:
    invert(60%)
    sepia(28%)
    saturate(520%)
    hue-rotate(2deg)
    brightness(92%)
    contrast(88%);
}

/* Star icons */
.fas.fa-star.text-warning,
.review-icon .fa-star { color: var(--mg-gold) !important; }

/* ===== Hero / section 背景画像のクリーンアップ ===== */
.welcome-area,
.hero-section,
.has-overlay,
.overlay-gradient,
.overlay-dark,
section[class*="welcome"],
section[class*="download-area"] {
  background-image: none !important;
}

/* style.css の hero 全面オーバーレイ層を消す (gold×teal が混じって濁るため) */
.has-overlay::after,
.has-overlay::before,
.hero-section.has-overlay::after,
.hero-section.has-overlay::before,
.overlay-gradient::after,
.overlay-gradient::before,
.overlay-dark::after,
.overlay-dark::before {
  background: transparent !important;
  background-image: none !important;
  display: none !important;
}

/* hero-section の `.shape-bottom` SVG path を背景サンドに溶け込ませる */
.hero-section .shape-bottom svg path,
.hero-section .shape-bottom svg g {
  fill: var(--mg-midnight-bottom) !important;
}

/* Hero overlay div を透明化 */
.hero-section .overlay-bg,
.welcome-area .overlay-bg,
.download-area .overlay-bg {
  background: transparent !important;
  display: none !important;
}

/* Hero text: deep ink title (明色地で力強く読める) */
.hero-section h1,
.welcome-area h1 {
  background: none;
  -webkit-text-fill-color: var(--mg-on-dark);
  color: var(--mg-on-dark) !important;
  text-shadow: none;
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  letter-spacing: -0.02em;
  font-weight: 800 !important;
}

.hero-section h2,
.hero-section .text-white,
.welcome-area h2,
.welcome-area .text-white,
/* Download CTA section sits on light sand — flip its white heading to ink */
.download-area h2,
.download-area .content h2,
.download-area .text-white {
  color: var(--mg-on-dark) !important;
}

/* Download CTA body copy → muted ink (was white-on-dark) */
.download-area p,
.download-area p.text-white,
.download-area .content p {
  color: var(--mg-on-dark-72) !important;
}
.hero-section p,
.welcome-area p,
.hero-section .sub-heading,
.welcome-area .sub-heading {
  color: var(--mg-on-dark-72) !important;
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Pre-title / section tagline */
.welcome-area .pre-title,
.hero-section .pre-title,
.section .pre-title,
.section-title {
  color: var(--mg-gold-deep) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-size: 0.85rem !important;
}

/* Big section titles */
section h2.title,
section .title {
  color: var(--mg-on-dark) !important;
  font-weight: 800 !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  letter-spacing: -0.01em;
}
section h2.title::after,
section .title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mg-gold) 0%, var(--mg-gold-deep) 100%);
}
.text-center h2.title::after,
.text-center .title::after { margin-left: auto; margin-right: auto; }

/* ===== Store badge images (Google Play / App Store) ===== */
.store-badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.store-badges img,
img[src*="google-play"],
img[src*="app-store"],
img[src*="download-on"] {
  height: 56px !important;
  width: auto !important;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.store-badges img:hover,
img[src*="google-play"]:hover,
img[src*="app-store"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(42, 39, 34, 0.28);
}

.section-title-underline,
.title-line {
  background: linear-gradient(90deg, var(--mg-gold) 0%, transparent 100%) !important;
  height: 2px !important;
}

/* ============================================================
 * Hero / welcome area
 * ============================================================ */
.welcome-area,
#welcome,
.welcome-1,
.hero-section,
.hero-section.layout-1 {
  background: transparent !important;
  position: relative;
  padding-top: clamp(96px, 14vh, 160px) !important;
  padding-bottom: clamp(120px, 18vh, 200px) !important;
}

.hero-section .hero-thumb,
.welcome-area .hero-thumb {
  margin-top: 24px;
}

/* Override inline-bg images in welcome — soft warm glow under hero */
.welcome-area::before,
#welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(168, 150, 95, 0.14), transparent 60%),
    radial-gradient(circle at 75% 40%, rgba(47, 184, 196, 0.08), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

.welcome-area .container,
#welcome .container {
  position: relative;
  z-index: 1;
}

.welcome-area .pre-title,
.welcome-area .subtitle,
.section-title {
  color: var(--mg-gold-deep) !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ============================================================
 * Feature icons & screenshot carousel
 * ============================================================ */
.feature-icon,
.gameon-icon,
.icon-box,
.feature-thumb i,
.feature-thumb svg {
  color: var(--mg-gold-deep) !important;
}

.gameon-feature .feature-icon,
.feature-item .icon {
  background: linear-gradient(135deg, rgba(168, 150, 95, 0.16) 0%, rgba(168, 150, 95, 0.05) 100%) !important;
  border: 1px solid rgba(168, 150, 95, 0.25);
  border-radius: var(--mg-radius-md);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* Screenshot phones — keep aspect ratio, soft warm shadow */
.gameon-screenshot .owl-item img,
.screenshots-area img,
.app-screen img {
  border-radius: 28px;
  box-shadow:
    0 24px 50px -20px rgba(42, 39, 34, 0.30),
    0 0 0 1px var(--mg-surface-glass-border);
}

.owl-dot.active span,
.owl-nav button {
  background: var(--mg-gold) !important;
}

/* ============================================================
 * Footer (home page bootstrap footer, if used)
 * ============================================================ */
footer,
.footer,
#footer {
  background: #D8CFBC !important;
  border-top: 1px solid var(--mg-surface-glass-border);
  color: var(--mg-on-dark-72) !important;
  padding: 64px 0 24px !important;
}

footer a,
.footer a {
  color: var(--mg-on-dark-72) !important;
}
footer a:hover,
.footer a:hover {
  color: var(--mg-gold-deep) !important;
}

.footer-bottom {
  border-top: 1px solid var(--mg-surface-glass-border);
  margin-top: 32px;
  padding-top: 16px;
  font-size: 0.85rem;
}

/* ============================================================
 * Static content pages (privacy / terms / faq / account-deletion)
 *
 * Stand-alone Warm Sand layout for content-heavy pages.
 * ============================================================ */
.mg-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mg-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 241, 0.85);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--mg-surface-glass-border);
  padding: 16px 0;
}

.mg-topbar-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mg-topbar .mg-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mg-surface-glass-strong);
  border: 1px solid var(--mg-surface-glass-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mg-on-dark);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mg-topbar .mg-back:hover {
  background: rgba(168, 150, 95, 0.12);
  border-color: var(--mg-gold);
  color: var(--mg-gold-deep);
}

.mg-topbar h1 {
  font-size: 1.25rem !important;
  margin: 0 !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mg-lang-switch {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mg-lang-switch select {
  background-color: var(--mg-surface-glass-strong);
  border: 1px solid var(--mg-surface-glass-border);
  color: var(--mg-on-dark);
  padding: 6px 28px 6px 10px;
  border-radius: var(--mg-radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A7A4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.mg-lang-switch select:focus {
  outline: none;
  border-color: var(--mg-gold);
}
/* Native <option> dropdown items */
.mg-lang-switch select option {
  background-color: var(--mg-surface-glass-strong);
  color: var(--mg-on-dark);
}
.mg-lang-switch select option:checked,
.mg-lang-switch select option:hover {
  background-color: rgba(168, 150, 95, 0.16);
  color: var(--mg-gold-deep);
}

.mg-content {
  flex: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 24px 16px;
  width: 100%;
}

.mg-card {
  background: var(--mg-surface-glass);
  border: 1px solid var(--mg-surface-glass-border);
  border-radius: var(--mg-radius-lg);
  box-shadow: var(--mg-shadow-card);
  padding: 32px;
  margin-bottom: 24px;
}

.mg-card h2 {
  font-size: 1.4rem !important;
  margin-top: 0;
  margin-bottom: 16px !important;
  color: var(--mg-gold-deep) !important;
}

.mg-card h3 {
  font-size: 1.1rem !important;
  margin-top: 24px;
  margin-bottom: 12px !important;
}

.mg-card p,
.mg-card li {
  color: var(--mg-on-dark-72) !important;
  line-height: 1.75;
  font-size: 0.95rem;
}

.mg-card ol,
.mg-card ul {
  padding-left: 1.5rem;
}

.mg-effective {
  color: var(--mg-on-dark-54) !important;
  font-size: 0.85rem;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--mg-surface-glass-border);
}

/* FAQ accordion */
.mg-faq-item {
  background: var(--mg-surface-glass);
  border: 1px solid var(--mg-surface-glass-border);
  border-radius: var(--mg-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--mg-shadow-card);
  transition: border-color 0.2s ease;
}
.mg-faq-item[open] {
  border-color: rgba(168, 150, 95, 0.45);
}
.mg-faq-item summary {
  cursor: pointer;
  padding: 18px 24px;
  font-weight: 600;
  color: var(--mg-on-dark) !important;
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mg-faq-item summary::-webkit-details-marker { display: none; }
.mg-faq-item summary::after {
  content: "+";
  margin-left: auto;
  color: var(--mg-gold-deep);
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform 0.2s ease;
}
.mg-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.mg-faq-answer {
  padding: 0 24px 18px;
  color: var(--mg-on-dark-72);
  line-height: 1.75;
  font-size: 0.95rem;
}

/* ============================================================
 * Footer with policy links (used both on top page & sub-pages)
 * ============================================================ */
.mg-footer-nav {
  background: #D8CFBC !important;
  border-top: 1px solid var(--mg-surface-glass-border);
  padding: 36px 24px;
  margin-top: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 2;
}

/* Default `section { padding: 130px 0 }` makes the download CTA top-heavy. */
.download-area {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* style.css の `filter: brightness(0) invert(1)` (ロゴをモノクロ白シルエット化)
   を無効化。新しいカラフルな Dunova アイコンの色を保持する。 */
header .navbar-expand .navbar-brand img,
header .navbar-expand:not(.navbar-sticky) .navbar-brand:not(.invert) img {
  filter: none !important;
}

/* サンドゴールドのフレームでブランドロゴを縁取り */
header .navbar-brand {
  display: inline-block !important;
  padding: 4px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg,
      #C9B888 0%,
      #8A7A4F 35%,
      #A8965F 65%,
      #6F6238 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(42, 39, 34, 0.20),
    0 8px 22px rgba(168, 150, 95, 0.28);
  line-height: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

header .navbar-brand:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 8px rgba(42, 39, 34, 0.25),
    0 12px 30px rgba(168, 150, 95, 0.42);
}

header .navbar-brand img {
  border-radius: 11px !important;
  display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.mg-footer-nav-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.mg-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 8px;
}
.mg-footer-links a {
  color: var(--mg-on-dark-72) !important;
  font-size: 0.9rem;
}
.mg-footer-links a:hover {
  color: var(--mg-gold-deep) !important;
}
.mg-footer-copy {
  color: var(--mg-on-dark-54);
  font-size: 0.8rem;
  margin-top: 12px;
}

/* ============================================================
 * Misc — animations, transitions, hide loud bootstrap defaults
 * ============================================================ */
.preloader-main {
  background: var(--mg-midnight-bottom) !important;
}

.preloader-main .dot {
  fill: var(--mg-gold-deep) !important;
}

.welcome-area[style*="background-image"],
.section[style*="background-image"] {
  background-image: none !important;
}

html { scroll-behavior: smooth; }

::selection {
  background: rgba(168, 150, 95, 0.30);
  color: var(--mg-on-dark);
}

/* ============================================================
 * Responsive: narrow viewport (≤ 480px)
 * ============================================================ */
@media (max-width: 480px) {
  .mg-content {
    padding: 20px 14px 12px;
  }
  .mg-card {
    padding: 20px 18px;
    border-radius: var(--mg-radius-md);
  }
  .mg-topbar-inner {
    padding: 0 14px;
    gap: 10px;
  }
  .mg-topbar h1 {
    font-size: 1.05rem !important;
  }
  .mg-lang-switch select {
    font-size: 0.78rem;
    padding: 5px 24px 5px 8px;
  }
  .mg-faq-item summary {
    padding: 14px 16px;
    font-size: 0.95rem;
  }
  .mg-faq-answer {
    padding: 0 16px 14px;
    font-size: 0.9rem;
  }
  .mg-card h2 {
    font-size: 1.15rem !important;
  }
  .mg-card h3 {
    font-size: 1rem !important;
  }
  .mg-footer-nav {
    padding: 12px 16px;
    margin-top: 0;
  }
}