/* --- 🌿 粋清 SUISEI | Ultimate Luxury Design System --- */

:root {
  --color-bg-base: #e8e5df; /* Premium Warm Greige */
  --color-bg-card: #faf9f6; /* Melting Off-white */
  --color-text-main: #1d1d1f; /* High-end Charcoal */
  --color-text-sub: #2d2d30; /* High Contrast Body Text */
  --color-suisei-deep: #125e4c; /* Extra Rich Deep Emerald for High Visibility Labels */
  --color-suisei: rgba(178, 227, 215, 1); /* Figma Pale Green */
  --color-suisei-glow: rgba(178, 227, 215, 0.45);
  --color-suisei-navy: #152536; /* Deep Midnight Water Indigo */
  --color-suisei-navy-light: #2c425c; /* Lighter Mineral Navy */
  
  --font-serif: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --font-sans: 'Inter', sans-serif;
  --transition-smooth: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* --- ✨ Figma Star 68 Ambient Glow --- */
.light-ambient-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(63.3px);
  mix-blend-mode: screen;
  opacity: 0.4;
  animation: floatGlow 20s infinite alternate ease-in-out;
}

.glow-1 {
  top: -10%;
  right: 15%;
  width: min(80vw, 650px);
  height: min(80vw, 650px);
  background: radial-gradient(circle, #ffffff 0%, var(--color-suisei-glow) 60%, rgba(255,255,255,0) 100%);
  animation-duration: 25s;
}

.glow-2 {
  bottom: -15%;
  left: -5%;
  width: min(90vw, 700px);
  height: min(90vw, 700px);
  background: radial-gradient(circle, var(--color-suisei-glow) 0%, rgba(232, 229, 223, 0.3) 50%, rgba(255,255,255,0) 100%);
  animation-delay: -5s;
  animation-duration: 30s;
}

@keyframes floatGlow {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(40px, 20px) scale(1.03) rotate(30deg); }
}

/* --- Navigation (Glassmorphism) --- */
.suisei-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(232, 229, 223, 0.85); /* Slightly higher opacity for clean separation */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nav-brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 8px;
  color: var(--color-text-main);
  justify-self: start;
  margin-left: 10px; /* Give slight optical breathing room */
}

.nav-links {
  display: grid;
  grid-template-columns: repeat(3, 110px);
  gap: 0;
  text-align: center;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-sub);
  transition: var(--transition-smooth);
}

.nav-links a:hover {
  color: var(--color-suisei-deep);
  letter-spacing: 3px;
}

.nav-cta-btn {
  justify-self: end;
  margin-right: 10px; /* Prevent it from looking cramped against the right edge */
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 12px 28px;
  border-radius: 40px;
  background: rgba(18, 94, 76, 0.12); /* Translucent emerald glass */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-suisei-deep); /* #125e4c */
  border: 1px solid rgba(18, 94, 76, 0.3); /* Premium glass border */
  box-shadow: 0 4px 15px rgba(18, 94, 76, 0.05);
  transition: var(--transition-smooth);
}

.nav-cta-btn:hover {
  background: rgba(18, 94, 76, 0.25); /* Richer glass emerald */
  border-color: rgba(18, 94, 76, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(18, 94, 76, 0.2);
}

/* --- 🌸 Hero Section (Full-screen Video with Smooth Fadeout Mask) --- */
.suisei-hero {
  height: 180vh; /* Adjusted to 1.8vh for a perfectly proportioned layout */
  display: block; /* Block layout to center the content perfectly in the first fold */
  position: relative;
  text-align: center;
  padding: 0;
  overflow: hidden;
}

/* Elegant radial vignette to remove white glare and enhance atmospheric depth */
.suisei-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(232, 229, 223, 0.15) 0%, rgba(26, 37, 34, 0.08) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Smooth Gradient Fadeout Layer: Eliminates hard video boundary */
.suisei-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120vh; /* Extremely smooth, expansive fade transition to Warm Greige background */
  background: linear-gradient(to bottom, rgba(232, 229, 223, 0) 0%, rgba(232, 229, 223, 0.3) 50%, var(--color-bg-base) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Video Background styling */
.hero-video-bg {
  position: absolute;
  top: -20px; /* Offset to permanently cover top browser rendering artifacts */
  left: -20px;
  width: calc(100% + 40px); /* Expand boundary to guarantee total coverage */
  height: calc(100% + 40px);
  object-fit: cover;
  z-index: 0;
  opacity: 0.20; /* Reduced to 0.20 to lessen the stark white glare and enrich the warm greige */
  pointer-events: none;
  transform: scale(1.12); /* Seamlessly zoom to crop any intrinsic letterboxing in the mp_.mp4 file */
  transform-origin: center top;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* PERFECTLY CENTER ON THE FIRST FOLD */
  height: 100vh; /* Exactly 100vh viewport height */
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2; /* Ensures content stays above fadeout layer */
}

/* --- 💫 Elegant SUISEI Brand Logo (Figma Inspired) --- */
.suisei-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px; /* Restored luxurious breathing room for an elegant, premium lockup */
  user-select: none;
}

.suisei-logo-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(66px, 9.5vw, 110px); /* Further 1.1x scale up */
  font-weight: 400;
  letter-spacing: 42px; /* Extra 0.1em spacing */
  margin-right: -42px; /* Center compensation */
  padding-left: 10px; /* Balance S vs I */
  text-transform: uppercase;
  transform: translateX(-10px); /* Absolute manual offset to correct S weight */
  background: linear-gradient(135deg, #104a3c 0%, #173b32 50%, #0a2620 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85; /* Allow subtle video feedthrough for crystalline/glass elegance */
  line-height: 1;
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.95));
  animation: logoSoftGlow 6s infinite alternate ease-in-out;
}

.suisei-logo-sub {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 400; /* Increased weight for visibility against water splash */
  color: var(--color-text-sub);
  margin-top: 16px;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(26, 37, 34, 0.3); /* Subtle dark halo to separate from bright background */
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(1px); /* micro-adjustment */
}

.kanji-gap {
  width: 24px; /* matches the gap in subtitle */
}

@keyframes logoSoftGlow {
  0% { filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 10px rgba(178, 227, 215, 0.15)); }
  100% { filter: drop-shadow(0 2px 15px rgba(255, 255, 255, 1)) drop-shadow(0 0 20px rgba(178, 227, 215, 0.4)); }
}



/* Outstanding Heading Visibility: Prevents video contrast conflict */
.hero-heading {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.5vw, 38px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 6px;
  color: #1a2522; /* High contrast charcoal-emerald */
  transform: none; /* Let hanging punctuation handle the perfect optical centering */
  text-shadow: 
    0 2px 20px rgba(255, 255, 255, 1), 
    0 0 35px rgba(255, 255, 255, 0.95),
    0 0 50px rgba(232, 229, 223, 0.9); /* Luminous multilayered backlighting */
}

.hero-line-1 {
  display: inline-block;
  transform: translateX(6px); /* Manually offset upper catchphrase line to the right per guidance */
}

.hanging-punct {
  display: inline-block;
  margin-right: -1em; /* True hanging punctuation: pulls bounding box so optical center rests on the characters */
}

/* Scroll Hint */
.scroll-down-hint {
  position: absolute;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.scroll-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-text-sub);
}

.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-text-sub), rgba(255,255,255,0));
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: var(--color-suisei);
  animation: scrollDownAnim 2s infinite ease-in-out;
}

@keyframes scrollDownAnim {
  0% { top: -20px; }
  100% { top: 60px; }
}

/* --- Section Layouts --- */
.section {
  padding: 240px 40px; /* Greatly expanded vertical padding for elite spacious breathing room */
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-label {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 8px;
  color: var(--color-suisei-deep); /* Robust contrast emerald */
  margin-bottom: 30px;
}

.section-label-cta {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 8px;
  color: var(--color-suisei-deep);
  margin-bottom: 30px;
}

.section-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  letter-spacing: 4px;
  line-height: 1.5;
  margin-bottom: 72px;
}

/* --- Concept Section --- */
.concept-section {
  background: linear-gradient(to bottom, var(--color-bg-base) 0%, var(--color-bg-card) 30%, var(--color-bg-card) 70%, var(--color-bg-base) 100%);
  border-top: none;
  border-bottom: none; /* Removed all harsh borders for a completely borderless page flow */
  padding: 240px 80px !important;
}

.concept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px; /* Expanded spacing */
  align-items: center;
}

/* --- Evidence Section --- */
.evidence-section {
  background: var(--color-bg-base);
  padding: 120px 80px !important;
}

.evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
}

.evidence-para {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  line-height: 2.0;
  letter-spacing: 1.5px;
  color: var(--color-text-sub);
  margin-bottom: 32px;
  text-align: justify;
  max-width: 35em;
}

.evidence-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.concept-para {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  line-height: 2.0;
  letter-spacing: 1.5px;
  color: var(--color-text-sub);
  margin-bottom: 32px;
  text-align: justify;
  max-width: 35em;
}

.concept-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Beautiful soft mist/vapor glow behind the organic liquid card */
.concept-visual::before {
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  background: radial-gradient(circle, rgba(18, 94, 76, 0.12) 0%, rgba(232, 229, 223, 0) 70%);
  filter: blur(45px); /* Soft vapor blur */
  z-index: 0;
  pointer-events: none;
}

.visual-card {
  width: 100%;
  max-width: 480px;
  height: 520px;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; /* Smooth organic stone/pool shape */
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(18, 94, 76, 0.04);
  z-index: 1;
  animation: fluidBlob 16s ease-in-out infinite alternate; /* Slow liquid breathing */
  transition: var(--transition-smooth);
}

/* Blurred edge modifier to avoid cheap box look */
.concept-blurred-edge, .evidence-blurred-edge {
  border-radius: 0;
  box-shadow: none;
  animation: none;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 65%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 65%);
}

/* Animated organic morphing shape to resemble fluid water or riverbed pebbles */
@keyframes fluidBlob {
  0% {
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  }
  50% {
    border-radius: 50% 50% 60% 40% / 40% 50% 60% 50%;
  }
  100% {
    border-radius: 40% 60% 50% 50% / 50% 40% 50% 60%;
  }
}

.visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(232, 229, 223, 0) 50%, rgba(232, 229, 223, 0.15) 100%);
  z-index: 1;
}

.visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.evidence-visual .visual-img {
  object-position: 100% center; 
  /* Mathematically flawless trick: scaling up by 20% while locked to the right wall
     logically swells the internal components (like her face) toward the center of the frame,
     without ever revealing the edge of the photo file! Super clean! */
  transform: scale(1.22); 
  transform-origin: right center;
}

.visual-card:hover .visual-img {
  transform: scale(1.05);
}

.evidence-visual .visual-card:hover .visual-img {
  transform: scale(1.27); /* Slightly zoom from our baseline 1.22 */
  transform-origin: right center;
}

/* --- Products Section --- */
.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px; /* Extremely spacious grid */
  max-width: 1000px;
  margin: 0 auto;
}

.product-card {
  background: rgba(250, 249, 246, 0.85); /* Sleek glassmorphism */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 40px;
  padding: 64px 40px; /* Elegant, spacious breathing room */
  transition: var(--transition-smooth);
  box-shadow: 0 15px 45px rgba(0,0,0,0.01);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-10px);
  background: var(--color-bg-card);
  box-shadow: 0 30px 60px rgba(18, 94, 76, 0.08); /* Subtle soft emerald glow */
  border-color: rgba(18, 94, 76, 0.25);
}

.product-img-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 32px;
}

.product-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: var(--color-suisei);
  filter: blur(50px);
  opacity: 0;
  transition: var(--transition-smooth);
  z-index: 0;
}

.product-card:hover .product-glow {
  opacity: 0.3;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: var(--transition-smooth);
}

.product-card:hover .product-img {
  transform: scale(1.04);
}

.series-card .product-img {
  transform: scale(1.15); /* Visually align scale of 3-bottle shot to single bottles */
}

.product-card.series-card:hover .product-img {
  transform: scale(1.19);
}

.product-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-info h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  font-weight: 600; /* Enhanced contrast */
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-align: center;
}

.product-info h3 .en {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--color-suisei-deep);
  margin-top: 4px;
  letter-spacing: 2px;
  font-weight: 500;
}

.product-info .price {
  font-family: 'Playfair Display', serif; /* Gorgeous luxury editorial serif digits */
  font-variant-numeric: lining-nums; /* Flawless baseline alignment */
  color: var(--color-suisei-deep); /* Distinct, high-contrast emerald pricing */
  margin-bottom: 24px;
  letter-spacing: 1px;
  
  /* Use Grid to perfectly center the main price while allowing tax on the right */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
}

.product-info .price::before {
  content: ""; /* Left spacer to balance grid */
}

.product-info .price-val {
  grid-column: 2;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
}

.product-info .price .tax {
  grid-column: 3;
  text-align: left;
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  font-weight: 300; /* Thinner weight for elegance while maintaining visibility */
  color: #999999;
  letter-spacing: 1px;
  padding-left: 8px;
  white-space: nowrap; /* Prevents '税込' from breaking onto multiple lines */
}

.product-info .desc {
  font-family: 'Noto Serif JP', serif;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
  letter-spacing: 1px;
  text-align: left;
  flex-grow: 1;
}

/* --- CTA Section --- */
.cta-section {
  background: linear-gradient(to bottom, var(--color-bg-base) 0%, #e0ddd4 100%); /* Grounding plane color */
  padding: 200px 40px !important; /* 200px luxurious margin */
}

.cta-container {
  max-width: 1000px;
  margin: 0 auto;
}

.cta-card {
  background: transparent; /* Box removed to let section ground it */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  box-shadow: none;
}

.cta-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 300;
  letter-spacing: 3px;
  margin-bottom: 24px;
}

.cta-desc {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  line-height: 2.3; /* Enhanced for airy readability */
  letter-spacing: 1.5px;
  color: var(--color-text-sub);
  max-width: 35em;
  margin: 0 auto 48px auto;
}

.cta-btn {
  display: inline-block;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* Upscaled font */
  font-weight: 600;
  letter-spacing: 6px;
  padding: 32px 80px; /* 1.5x larger padding */
  border-radius: 60px;
  background: rgba(18, 94, 76, 0.12); /* Translucent emerald glass */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: var(--color-suisei-deep); /* #125e4c */
  border: 1.5px solid rgba(18, 94, 76, 0.3); /* Premium glass border */
  box-shadow: 0 8px 32px rgba(18, 94, 76, 0.05);
  transition: var(--transition-smooth);
}

.cta-btn:hover {
  background: rgba(18, 94, 76, 0.25); /* Richer glass emerald */
  border-color: rgba(18, 94, 76, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(18, 94, 76, 0.2);
}



/* --- Footer --- */
.suisei-footer {
  text-align: center;
  padding: 60px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.suisei-footer p {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--color-text-sub);
}

/* --- Scroll Animations --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive Media Queries --- */
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .concept-grid,
  .evidence-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

@media (max-width: 768px) {
  .nav-container {
    grid-template-columns: 1fr auto;
    padding: 16px 20px;
  }
  .nav-links {
    display: none;
  }
  .section {
    padding: 100px 24px;
  }
  /* Force padding overrides for specific sections on mobile to counter desktop !important */
  .concept-section,
  .evidence-section,
  .cta-section {
    padding: 100px 24px !important;
  }
  .cta-card {
    padding: 40px 20px;
  }
  /* Adjust logo sizes on mobile */
  .suisei-logo-container {
    margin-bottom: 32px !important; /* Expanded for robust breathing room and high-end luxury balance */
  }
  .suisei-logo-main {
    font-size: clamp(44px, 11vw, 60px);
    letter-spacing: 24px; /* Reduced letter spacing to fit mobile width */
    margin-right: -24px;
  }
  .visual-card {
    height: 380px; /* Reduce height to avoid awkward long stretching on mobile */
  }
}

/* Extra support for Very Small Mobile */
@media (max-width: 480px) {
  .cta-btn {
    padding: 20px 32px;
    font-size: 14px;
    letter-spacing: 3px;
    line-height: 1.4;
    width: 90%; /* Allow more space */
  }
  .suisei-logo-main {
    letter-spacing: 12px;
    margin-right: -12px;
  }
  .nav-container {
    padding: 12px 16px;
  }
  .nav-cta-btn {
    padding: 10px 18px;
    font-size: 11px;
  }
  .hero-heading {
    letter-spacing: 3px;
    font-size: 24px;
  }
  .section-title {
    font-size: 24px;
    margin-bottom: 48px;
  }
}

/* --- FAQ Section --- */
.faq-section {
  padding: 100px 24px;
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg-base) 100%);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-accordion-wrapper {
  margin-top: 16px;
  border-top: 1px solid rgba(18, 94, 76, 0.15);
}

.faq-item {
  border-bottom: 1px solid rgba(18, 94, 76, 0.15);
  background: rgba(255, 255, 255, 0.2);
  transition: var(--transition-smooth);
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.5);
}

.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.faq-question {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-text-dark);
  font-family: "Noto Serif JP", serif;
}

.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent-primary);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.faq-icon::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: 1px;
  transform: translateX(-50%);
}

.faq-item.active .faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.faq-item.active .faq-content {
  grid-template-rows: 1fr;
}

.faq-inner {
  min-height: 0;
}

.faq-inner p {
  padding: 0 32px 28px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* --- Mobile Sticky Floating CTA --- */
.sticky-floating-cta {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  opacity: 0;
  z-index: 9999;
  
  width: 85%;
  max-width: 300px;
  text-align: center;
  padding: 18px 24px;
  
  /* Ultra premium aesthetic upgrade */
  background: linear-gradient(135deg, #125e4c 0%, #1c8a70 100%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  
  /* Soft ambient inner glow and deep external shadow */
  box-shadow: 
    0 15px 35px rgba(18, 94, 76, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 5px rgba(0, 0, 0, 0.1);
  
  color: #ffffff !important;
  font-family: var(--font-serif); /* Use the high-end serif */
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  
  display: none;
  visibility: hidden; /* Controlled by JS logic in step below */
}

/* Shine Effect on sticky button */
.sticky-floating-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: autoShine 5s infinite;
}

@keyframes autoShine {
  0% { left: -100%; }
  20% { left: 150%; }
  100% { left: 150%; }
}

.sticky-floating-cta.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.sticky-floating-cta:hover {
  transform: translateX(-50%) translateY(-4px);
  background: linear-gradient(135deg, #0e4a3c 0%, #17735c 100%);
  box-shadow: 
    0 25px 50px rgba(18, 94, 76, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
  .sticky-floating-cta {
    display: flex; 
  }
}

@media (max-width: 768px) {
  .faq-trigger {
    padding: 20px 24px;
  }
  .faq-question {
    font-size: 16px;
  }
  .faq-inner p {
    padding: 0 24px 24px;
    font-size: 14px;
  }
  .faq-section {
    padding: 80px 20px;
  }
}