:root {
  /* Add missing shadow tokens used in base CSS */
  --shadow-md: 0 10px 20px rgba(0,0,0,0.12), 0 6px 6px rgba(0,0,0,0.08);
  --shadow-xl: 0 25px 50px rgba(0,0,0,0.25), 0 10px 20px rgba(0,0,0,0.12);
  /* Tame overly harsh brutalist shadows for V4 */
  --shadow-brutal: 3px 3px 0 var(--border-bold);
  --shadow-organic: 0 8px 20px rgba(0,0,0,0.10), 0 3px 6px rgba(0,0,0,0.06);
  --shadow-handmade: 0 6px 16px rgba(0,0,0,0.08);
  --shadow-asymmetric: 0 10px 24px rgba(0,0,0,0.12);
}

/* Loading Overlay */
.countdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
    url('./assets/プレスホルダー画像.png') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
}

/* Mobile optimized background */
@media (max-width: 767px) {
  .countdown-overlay {
    background: 
      linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
      url('./assets/プレスホルダー画像_mobile.webp') center/cover;
  }
}

.countdown-overlay.slide-out {
  transform: translateY(-100%);
}

.countdown-container {
  text-align: center;
}

.loading-logo {
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(45deg, #ff6b35, #f7931e);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: logoFadeIn 0.8s ease forwards;
}

.loading-tagline {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0;
  animation: taglineFadeIn 0.8s ease 0.3s forwards;
  margin-bottom: 2rem;
}

.loading-progress {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  opacity: 0;
  animation: progressFadeIn 0.6s ease 0.6s forwards;
}

.loading-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.loading-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b35, #f7931e);
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s ease-out;
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
}

@keyframes progressFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes taglineFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .loading-logo {
    font-size: 2.5rem;
  }
  .loading-tagline {
    font-size: 1rem;
    padding: 0 2rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
  }
  .loading-progress {
    max-width: 250px;
  }
  .loading-bar {
    height: 2px;
  }
}

/* Fabric Pattern Background */
.fabric-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('./assets/プレスホルダー画像.png') center/cover;
  opacity: 1;
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 3;
  transform: scale(1);
}

/* Mobile optimized fabric background */
@media (max-width: 767px) {
  .fabric-pattern-bg {
    background: 
      linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
      url('./assets/プレスホルダー画像_mobile.webp') center/cover;
  }
}

/* Fabric animation - subtle movement and scale */
.fabric-pattern-bg.animate {
  transform: scale(1.01);
}

/* Fabric fades as video appears */
.fabric-pattern-bg.fade-to-video {
  opacity: 0;
  transform: scale(1.02);
}


/* Hero Content Animation */
.hero-content {
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}

.hero-content.show {
  opacity: 1;
}

.hero-content h1 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-content.show h1 {
  opacity: 1;
  transform: translateY(0);
}

.hero-subtitle {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.hero-content.show .hero-subtitle {
  opacity: 1;
  transform: translateY(0);
}

.hero-buttons {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

.hero-content.show .hero-buttons {
  opacity: 1;
  transform: translateY(0);
}

.highlight {
  background: linear-gradient(45deg, #ff6b35, #f7931e);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
  .loading-main-number {
    font-size: 5rem;
  }
  .loading-main-text {
    font-size: 1.5rem;
  }
  .loading-sub-text {
    font-size: 1rem;
  }
}

.fabric-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  opacity: 0.8;
}

.fabric-layer-1 {
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(45, 52, 65, 0.95) 0px,
      rgba(45, 52, 65, 0.95) 3px,
      rgba(25, 32, 45, 0.8) 3px,
      rgba(25, 32, 45, 0.8) 6px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(55, 62, 75, 0.9) 0px,
      rgba(55, 62, 75, 0.9) 3px,
      rgba(35, 42, 55, 0.7) 3px,
      rgba(35, 42, 55, 0.7) 6px
    );
  animation: fabricShift1 8s ease-in-out infinite;
}

.fabric-layer-2 {
  background: 
    repeating-linear-gradient(
      45deg,
      rgba(45, 52, 65, 0.6) 0px,
      rgba(45, 52, 65, 0.6) 1px,
      transparent 1px,
      transparent 6px
    );
  animation: fabricShift2 12s ease-in-out infinite reverse;
}

.fabric-layer-3 {
  background: 
    radial-gradient(
      circle at 20% 80%, 
      rgba(65, 72, 85, 0.4) 0%, 
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%, 
      rgba(55, 62, 75, 0.4) 0%, 
      transparent 50%
    );
  animation: fabricShift3 15s ease-in-out infinite;
}

@keyframes fabricShift1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-10px, -5px) rotate(0.5deg); }
  66% { transform: translate(5px, -10px) rotate(-0.5deg); }
}

@keyframes fabricShift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5px, 5px) scale(1.02); }
}

@keyframes fabricShift3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  25% { transform: translate(10px, -5px); opacity: 0.6; }
  75% { transform: translate(-5px, 10px); opacity: 0.3; }
}

/* Video Background */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

.hero-video.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



/* Promo pricing visuals */
.old-price { color: var(--text-secondary); text-decoration: line-through; font-weight: 600; }
.new-price { color: var(--primary-color); font-weight: 900; }
.promo-badge { display:inline-block; padding:.15rem .5rem; border-radius:999px; border:1px solid #f59e0b; background:#fff7ed; color:#9a3412; font-weight:800; font-size:.75rem; vertical-align: middle; }

.trustbar {
  background: var(--bg-light);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.trustbar-inner { display:flex; align-items:center; gap:2rem; padding: 1rem 0; }
.trust-title { font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.trust-logos { display:flex; gap:.75rem; flex-wrap:wrap; }
.trust-logo { background:#fff; border:1px dashed var(--border-color); border-radius:8px; padding:.5rem .75rem; color:var(--text-secondary); font-weight:600; }

.process-section { padding:80px 0; background:#fff; }
.process-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem; margin-top:2rem; }
.process-card { background:#fff; border:2px solid var(--border-color); border-radius:14px; padding:1.5rem; text-align:center; box-shadow: var(--shadow-md); }
.process-step { width:48px; height:48px; border-radius:50%; background:var(--brutalist-yellow); display:flex; align-items:center; justify-content:center; font-weight:900; margin:0 auto 1rem; border:3px solid var(--border-bold); }

.testimonials-section { padding:80px 0; background:var(--bg-light); }
.testimonials-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1.5rem; }
.testimonial-card { background:#fff; border:2px solid var(--border-color); border-radius:14px; padding:1.5rem; box-shadow: var(--shadow-md); }
.testimonial-card .stars { color:#f59e0b; font-weight:800; margin-bottom:.5rem; }
.testimonial-card .quote { color:var(--text-primary); margin-bottom:.5rem; }
.testimonial-card .author { color:var(--text-secondary); font-size:.9rem; }

.consent-label { display:flex; align-items:center; gap:.5rem; margin: .75rem 0 1rem; font-size:.9rem; color:var(--text-secondary); }

/* Mobile sticky CTA */
.mobile-sticky-cta { position:fixed; left:0; right:0; bottom:0; background:#111827; display:flex; gap:.5rem; padding:.5rem; z-index:999; border-top:3px solid var(--border-bold); }
.mobile-sticky-cta .sticky-btn { flex:1; text-align:center; color:#fff; text-decoration:none; font-weight:800; padding:.9rem 1rem; border:2px solid #374151; border-radius:10px; background:#1f2937; }
.mobile-sticky-cta .sticky-btn.primary { background: var(--primary-color); border-color:#000; box-shadow: var(--shadow-md); }
/* LINE相談 button — use official LINE green */
.mobile-sticky-cta .sticky-btn.line-cta { background:#06C755; border-color:#000; color:#fff; box-shadow: var(--shadow-md); }

@media (min-width: 768px) {
  .mobile-sticky-cta { display:none; }
}

/* Promo Spot Pop */
.promo-pop { position: fixed; right: 16px; bottom: 16px; max-width: 320px; background:#fff; border:2px solid var(--border-color); border-radius:14px; box-shadow: var(--shadow-md); padding: .9rem 1rem; z-index: 1001; opacity:0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.promo-pop.show { opacity:1; transform: translateY(0); }
.promo-pop-title { font-weight:900; letter-spacing:.01em; margin-bottom:.25rem; }
.promo-pop-sub { color: var(--text-secondary); font-size:.9rem; margin-bottom:.5rem; }
.promo-pop-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.promo-pop-cta { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background: var(--primary-color); color:#fff; text-decoration:none; font-weight:900; padding:.5rem .75rem; border-radius:10px; border:2px solid #111; }
.promo-pop-link { color: var(--text-primary); text-decoration: underline; font-weight:700; }
.promo-pop-close { position:absolute; top:6px; right:8px; border:none; background:transparent; font-size:1rem; cursor:pointer; color:#6b7280; }

@media (max-width: 768px) {
  .promo-pop { left: 12px; right: 12px; bottom: 78px; max-width: none; }
}

/* Benefits strip */
.benefits-strip { background: linear-gradient(90deg,#0f172a 0%, #1f2937 100%); color:#fff; border-top:4px solid var(--border-bold); border-bottom:4px solid var(--border-bold); }
.benefits-inner { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; padding:1rem 0; }
.benefit { display:flex; align-items:center; justify-content:center; gap:.6rem; font-weight:800; letter-spacing:.01em; }
.benefit i { color: var(--brutalist-yellow); }
@media (max-width: 768px){ .benefits-inner{ grid-template-columns: repeat(2,1fr);} }

/* Stats bar */
.statsbar { background: linear-gradient(90deg,#0f172a 0%, #111827 60%, #0b1220 100%); color:#fff; border-top:4px solid var(--border-bold); border-bottom:4px solid var(--border-bold); }
.statsbar-inner { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; padding:1.1rem 0; }
.stat { text-align:center; position:relative; }
.stat:not(:last-child)::after { content:''; position:absolute; top:20%; right:0; height:60%; width:1px; background: rgba(255,255,255,.15); }
.stat-num { font-weight:900; font-size:2.2rem; letter-spacing:-0.02em; background: linear-gradient(180deg,#fff 0%, #e5e7eb 100%); -webkit-background-clip: text; background-clip:text; color:transparent; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.stat-label { color:#cbd5e1; font-size:.85rem; letter-spacing:.02em; text-transform: none; opacity:.9; }
@media (max-width:768px){ .statsbar-inner { grid-template-columns: repeat(2,1fr);} }

/* Steps */
.steps-section { padding:60px 0; background:#fff; }
.steps-sub { text-align:center; color: var(--text-secondary); margin-top:.25rem; margin-bottom:1.25rem; }
.steps-grid { display:flex; flex-direction: column; align-items:stretch; gap:.75rem; }
.step-card { background:#fff; border:2px solid var(--border-color); border-radius:14px; box-shadow: var(--shadow-md); overflow:hidden; display:flex; flex-direction:column; }
.step-media { aspect-ratio: 16/9; background:#f9fafb; }
.step-media img { width:100%; height:100%; object-fit: cover; display:block; }
.step-meta { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .75rem; border-top:1px solid var(--border-color); }
.step-label { font-weight:900; color:#6b7280; font-size:.85rem; }
.step-title { font-weight:900; }
.step-time { color:#6b7280; font-weight:700; font-size:.85rem; }
.step-arrow { flex:0 0 auto; color:#6b7280; font-size:1.1rem; display:flex; align-items:center; justify-content:center; }
.step-arrow .arrow-right { display:none; }
.step-arrow .arrow-down { display:inline-block; }

@media (max-width: 768px) {
  .step-card { width:100%; }
  .step-arrow { padding:.25rem 0; }
}
/* Urgency banner */
.urgency-banner { background: #fff7ed; border-top: 2px dashed #f59e0b; border-bottom: 2px dashed #f59e0b; }
.urgency-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .75rem 0; }
.urgency-inner .u-msg { font-weight:800; color:#9a3412; }
.urgency-inner .u-cta { text-decoration:none; font-weight:800; padding:.6rem 1rem; border:2px solid #9a3412; border-radius:10px; color:#9a3412; }

/* Guarantee */
.guarantee-section { padding:80px 0; background:#fff; }
.guarantee-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1.25rem; margin-top:2rem; }
.guarantee-card { border:2px solid var(--border-color); border-radius:14px; background:#fff; padding:1.25rem; box-shadow: var(--shadow-md); }
.g-icon { width:48px; height:48px; border-radius:12px; background: var(--brutalist-yellow); display:flex; align-items:center; justify-content:center; border:2px solid var(--border-bold); margin-bottom:.75rem; font-size:1.1rem; }

/* FAQ */
.faq-section { padding:80px 0; background: var(--bg-light); }
.faq-list details { background:#fff; border:2px solid var(--border-color); border-radius:12px; padding:1rem 1.2rem; box-shadow: var(--shadow-organic); }
.faq-list details + details { margin-top:.75rem; }
.faq-list summary { cursor:pointer; font-weight:700; }
.faq-list p { color: var(--text-secondary); margin-top:.5rem; }

/* Comparison */
.comparison-section { padding:80px 0; background:#fff; }
.comparison-wrap { max-width: 980px; margin: 0 auto; }
.comparison-table { width:100%; border-collapse: separate; border-spacing:0; background:#fff; border:2px solid var(--border-color); border-radius:14px; overflow:hidden; box-shadow: var(--shadow-md); }
.comparison-table th, .comparison-table td { padding:.9rem 1rem; text-align:center; border-bottom:1px solid #e5e7eb; }
.comparison-table thead th { background: var(--bg-light); font-weight:800; color: var(--text-primary); }
.comparison-table tbody tr:last-child td { border-bottom:none; }
.comparison-table td:first-child, .comparison-table th:first-child { text-align:left; font-weight:800; color: var(--text-primary); }
.comparison-table td { font-weight:700; }
.comparison-note { margin-top:.75rem; color: var(--text-secondary); display:flex; gap:.5rem; align-items:flex-start; }
.comparison-note .note-icon { color:#111827; font-size:1rem; line-height:1; margin-top:.2rem; }


/* Pricing badges */
.pricing-benefits { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom: 1rem; }
.p-badge { display:inline-flex; align-items:center; gap:.4rem; border:2px solid var(--border-bold); padding:.5rem .75rem; border-radius:999px; font-weight:800; background:#fff; }

/* Pricing note */
.pricing-note { margin: 1rem 0 0; color: var(--text-secondary); font-size: .9rem; display:flex; gap:.5rem; align-items:flex-start; max-width: 980px; margin-left:auto; margin-right:auto; }
.pricing-note .note-icon { display:inline-flex; align-items:center; justify-content:center; color:#111827; font-size:1rem; line-height:1; margin-top:.2rem; }

/* Trustbar visual refresh */
.trustbar { background:#fff; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
.trustbar-inner { display:flex; align-items:center; gap:1rem; padding:.8rem 0; }
.trust-title { font-weight:800; color:#6b7280; text-transform:uppercase; font-size:.9rem; letter-spacing:.06em; }
.trust-logos { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.trust-logo { background:#f3f4f6; border:1px solid #e5e7eb; color:#111827; font-weight:800; letter-spacing:.01em; padding:.35rem .7rem; border-radius:999px; }
.trust-logo:hover { background:#e5e7eb; }

/* BEFORE/AFTER arrow sizing and shadow (softer) */
.arrow-icon { width: 56px !important; height: 56px !important; box-shadow: none !important; filter: none !important; border-width: 0 !important; font-size: 1.1rem !important; }
.arrow-icon::before { width: 20px !important; height: 20px !important; }

/* Pricing: avoid permanent heavy shadow on popular card */
.pricing-card.popular { transform: none !important; box-shadow: var(--shadow-md) !important; border-color: var(--primary-color) !important; }
.popular-badge { background: var(--primary-color) !important; color:#fff !important; }

/* Hero note */
.hero-note { margin-top: .75rem; font-size: .95rem; opacity: .9; }
.hero h1 { text-wrap: balance; }
.no-wrap { white-space: nowrap; }

/* Hero subtle background video */
.hero { position: relative; }
.hero-bg { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.hero-bg video { width:100%; height:100%; object-fit: cover; opacity:.45; filter: saturate(1) contrast(1) brightness(.9); }
.hero-bg-tint { position:absolute; inset:0; background: linear-gradient(180deg, rgba(17,24,39,.35), rgba(17,24,39,.45)); z-index: 0; }

/* Hero video mesh overlay */
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.06) 3px,
            rgba(0,0,0,0.06) 6px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.06) 3px,
            rgba(0,0,0,0.06) 6px
        );
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}
/* Ensure content sits above */
.hero .hero-content { position: relative; z-index: 3; }

/* Manga explanation section */
.manga-section {
  padding: 80px 0;
  background: var(--bg-light);
}

.manga-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.manga-item {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-organic);
  transition: transform 0.3s ease;
}

.manga-item:hover {
  transform: translateY(-5px);
}

.manga-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Manga CTA */
.manga-cta {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-radius: 20px;
  border: 3px solid var(--border-bold);
  box-shadow: var(--shadow-organic);
}

.manga-cta-text {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(45deg, #ff6b35, #f7931e);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .manga-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 400px;
  }
  
  .manga-section {
    padding: 60px 0;
  }

  .manga-cta {
    margin-top: 2rem;
    padding: 1.5rem;
  }

  .manga-cta-text {
    font-size: 1.5rem;
  }
}

/* Hero cost reduction refresh */
.cost-reduction { border-width:4px !important; box-shadow: var(--shadow-md); }
.cost-figure { display:flex; align-items:center; justify-content:center; margin-bottom:.25rem; }
.cost-reduction-number { font-size:3.6rem !important; font-weight:900; background: linear-gradient(180deg,#111 0%, #ef4444 40%, #f59e0b 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; letter-spacing:-0.01em; }
.cost-caption { font-weight:900; letter-spacing:.01em; }
.cost-mini { font-size:.8rem; color: var(--text-secondary); }

/* Instagram section */
.ig-section { padding:80px 0; background:#fff; }
.ig-sub { text-align:center; color: var(--text-secondary); max-width: 780px; margin: 0 auto 2rem; }
.ig-deliverables { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.ig-item { display:flex; align-items:center; gap:.75rem; border:2px solid var(--border-color); border-radius:12px; padding: .9rem 1rem; background:#fff; }
.ig-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: var(--brutalist-yellow); border:2px solid var(--border-bold); }
.ig-title { font-weight:700; }
.ig-cta-row { display:flex; gap:.75rem; justify-content:center; margin: 1rem 0 1.25rem; flex-wrap:wrap; }
.ig-hints { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:.75rem; color: var(--text-secondary); }
.ig-hints .hint { background: var(--bg-light); border:1px dashed var(--border-color); border-radius:10px; padding:.75rem 1rem; }

/* IG horizontal strip */
.ig-strip-section { padding: 40px 0; background: #fff; }
.ig-strip-sub { text-align:center; color: var(--text-secondary); margin-bottom: .75rem; }
.ig-scroll { display:flex; gap: 16px; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type: x mandatory; }
.ig-scroll.auto { overflow-x: hidden; }
.ig-track { display:flex; gap:16px; }
.ig-scroll.auto .ig-track { animation: ig-marquee 18s linear infinite; }
.ig-scroll.auto .ig-track, .ig-scroll.marquee .ig-track { will-change: transform; }
/* Mobile JS marquee uses transform; hide scrollbar like desktop auto */
.ig-scroll.marquee { overflow-x: hidden; }
@keyframes ig-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ig-scroll::-webkit-scrollbar { height: 6px; }
.ig-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }
.ig-card { flex: 0 0 280px; background:#fff; border:1px solid #e5e7eb; border-radius:16px; scroll-snap-align: start; }
.ig-card-header { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-bottom:1px solid #e5e7eb; }
.ig-avatar { width:28px; height:28px; border-radius:50%; background:#e5e7eb; border:1px solid #d1d5db; }
.ig-meta { flex:1; }
.ig-name { font-weight:800; font-size:.9rem; }
.ig-time { color:#6b7280; font-size:.75rem; }
.ig-media { aspect-ratio: 4/5; background:#f8fafc; overflow:hidden; }
.ig-media img, .ig-media video { width:100%; height:100%; object-fit: cover; display:block; }
.ig-actions { display:flex; align-items:center; justify-content:space-between; padding:.5rem .8rem; }
.ig-actions .left i { margin-right:.6rem; }
.ig-caption { padding: .2rem .8rem .8rem; font-size:.9rem; color:#111827; }
.ig-strip-note { text-align:center; color: var(--text-secondary); margin-top: .6rem; font-size: .85rem; }

/* Add-on card */
.addon-section { padding:60px 0; background: var(--bg-light); }
.addon-card { position:relative; background:#fff; border:2px solid var(--border-color); border-radius:16px; padding:1.25rem; max-width:900px; margin: 0 auto; box-shadow: var(--shadow-md); }
.addon-badge { position:absolute; top:-12px; left:16px; background: var(--primary-color); color:#fff; padding:.3rem .6rem; border-radius:8px; font-weight:800; font-size:.85rem; box-shadow: var(--shadow-md); }
.addon-title { font-size:1.3rem; margin-left: .1rem; }
.addon-price { color: var(--primary-color); font-weight:800; margin-left:.5rem; }
.addon-list { margin: .75rem 0 1rem 1.1rem; }
.addon-ctas { display:flex; gap:.75rem; flex-wrap:wrap; }

/* IG Preview placeholders */
.ig-preview-section { padding: 40px 0; background: #fff; }
.ig-preview-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.ph-card { background:#fff; border:2px dashed var(--border-color); border-radius:14px; padding: .75rem; display:flex; align-items:center; justify-content:center; }
.ph { position:relative; width:100%; border-radius:10px; background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px); display:flex; align-items:center; justify-content:center; color:#6b7280; font-weight:900; letter-spacing:.05em; }
.ph span { position:absolute; }
.ph small { position:absolute; bottom:6px; right:8px; font-weight:700; background:rgba(255,255,255,.8); padding:.1rem .3rem; border-radius:6px; color:#374151; }
.ph-9x16 { aspect-ratio: 9/16; }
.ph-4x5 { aspect-ratio: 4/5; }
.ph-1x1 { aspect-ratio: 1/1; }
.ph-cover { aspect-ratio: 9/16; border: 3px solid var(--border-bold); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* Example: show entire flat-lay without cropping */
.comparison-image-contain { object-fit: contain !important; background:#fff; padding:6px; }

/* MECE section (EC vs Instagram) */
.mece-section { padding:80px 0; background: var(--bg-light); }
.mece-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:1.25rem; }
.mece-col { background:#fff; border:2px solid var(--border-color); border-radius:16px; padding:1rem; box-shadow: var(--shadow-organic); }
.mece-title { font-weight:900; margin:.25rem 0 .5rem; }
.mece-list, .mece-sol { list-style:none; margin:0 0 .75rem 0; padding:0; }
.mece-list li, .mece-sol li { display:flex; align-items:flex-start; gap:.5rem; padding:.4rem 0; }
.mece-list i { color: #dc2626; margin-top:.1rem; }
.mece-sol i { color: #16a34a; margin-top:.1rem; }

/* Line button (header & CTAs) */
.line-button { background:#06C755; color:#fff; padding:.6rem .9rem; border-radius:10px; font-weight:800; text-decoration:none; border:2px solid #000; box-shadow: var(--shadow-md); }

/* CTA section LINE button – solid with diagonal stripe overlay */
.cta-section .line-cta {
  display:inline-flex; align-items:center; gap:.5rem;
  background:#06C755; color:#fff; text-decoration:none;
  padding:.9rem 1.2rem; border-radius:12px;
  border:3px solid #111; box-shadow: var(--shadow-md);
  font-weight:900; position:relative; overflow:hidden;
}
.cta-section .line-cta::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.25;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.18), rgba(255,255,255,.18) 6px, transparent 6px, transparent 12px);
}
.cta-section .line-cta:hover { transform: translateY(-2px) rotate(-0.5deg); }
/* CTA subtle background video */
.cta-section { position: relative; overflow:hidden; }
.cta-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cta-bg video { width:100%; height:100%; object-fit: cover; opacity:.35; filter: saturate(1) contrast(1) brightness(.9); }
.cta-bg-tint { position:absolute; inset:0; background: linear-gradient(180deg, rgba(17,24,39,.30), rgba(17,24,39,.40)); }

/* CTA video mesh overlay */
.cta-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 4px,
            rgba(255,255,255,0.03) 4px,
            rgba(255,255,255,0.03) 8px
        );
    pointer-events: none;
    z-index: 1;
}
.cta-section .cta-content { position: relative; z-index: 2; }
.cost-info { align-items: flex-start; }
.cost-value > div { line-height: 1.2; }
.cost-value .cost-spot { color: var(--text-secondary); font-weight: 600; font-size: 1rem; }

/* ========================================
   ✨ REFINED MICRO INTERACTIONS
   ======================================== */

/* Button hover - subtle elevation only */
.btn, .line-button, .cta-button, .hero-button {
  transition: box-shadow 0.2s ease-out;
}

.btn:hover, .line-button:hover, .cta-button:hover, .hero-button:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Smooth scroll enhancement */
html {
  scroll-behavior: smooth;
}

/* Focus states for accessibility */
.btn:focus, .line-button:focus, .cta-button:focus, .hero-button:focus {
  outline: 2px solid #ff6b35;
  outline-offset: 2px;
}

/* Text selection highlight */
::selection {
  background: rgba(255, 107, 53, 0.2);
  color: inherit;
}

/* ========================================
   ✨ DEMO SITE BANNER
   ======================================== */

.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  color: white;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
}

.demo-banner.hidden {
  transform: translateY(-100%);
}

.demo-banner-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.demo-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.demo-text i {
  font-size: 1rem;
}

.demo-close {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.demo-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Adjust header positioning and z-index when demo banner is visible */
body:not(.demo-banner-hidden) .header {
  top: 45px;
}

.header {
  z-index: 1100 !important; /* Above demo banner */
}

/* Mobile header adjustments */
@media (max-width: 768px) {
  body:not(.demo-banner-hidden) .header {
    top: 0; /* No top offset needed on mobile */
  }
  
  .header .nav {
    flex-wrap: nowrap;
    overflow: visible;
  }
  
  .header .nav > div {
    flex-shrink: 0;
    min-width: 0;
  }
}

body:not(.demo-banner-hidden) .hero {
  padding-top: calc(80px + 45px);
}

@media (max-width: 768px) {
  .demo-banner {
    top: auto;
    bottom: 100px; /* Even more space above the mobile sticky CTA */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    left: 10px;
    right: 10px;
    border-radius: 8px;
  }
  
  .demo-banner.hidden {
    transform: translateY(100%);
  }
  
  .demo-banner-content {
    padding: 0.5rem 1rem;
  }
  
  .demo-text {
    font-size: 0.8rem;
  }
  
  .demo-close {
    right: 0.5rem;
    font-size: 1rem;
  }
  
  /* Reset header positioning on mobile */
  body:not(.demo-banner-hidden) .header {
    top: 0;
  }
  
  body:not(.demo-banner-hidden) .hero {
    padding-top: 80px;
  }
}

/* ========================================
   ✨ SUCCESS PAGE STYLING
   ======================================== */

.success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  padding: 2rem;
}

.success-content {
  background: var(--bg-white);
  padding: 3rem;
  border-radius: 14px;
  box-shadow: var(--shadow-organic);
  border: 2px solid var(--border-color);
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.success-content h1 {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.success-content p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.success-actions {
  margin-bottom: 2rem;
}

.contact-info {
  padding: 1.5rem;
  background: var(--bg-paper);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.contact-info h3 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.contact-info p {
  font-size: 0.9rem;
  margin: 0;
}

/* ========================================
   ✨ COMPETITIVE DIFFERENTIATION SECTION
   ======================================== */

.competitive-section {
  padding: 80px 0;
  background: var(--bg-light);
}

.competitive-section .section-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
  font-weight: 500;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.benefit-card {
  background: var(--bg-white);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: var(--shadow-handmade);
  border: 2px solid var(--border-color);
  transition: all 0.2s ease;
  position: relative;
}

.benefit-card:hover {
  box-shadow: var(--shadow-asymmetric);
  transform: translateY(-2px);
}

.benefit-card.featured {
  border: 3px solid var(--primary-color);
  background: linear-gradient(135deg, #fef7f7 0%, var(--bg-white) 100%);
}

.benefit-card.featured::before {
  content: '重要';
  position: absolute;
  top: -10px;
  right: 1rem;
  background: var(--primary-color);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: var(--shadow-brutal);
  transform: rotate(-2deg);
}


.user-question {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.answer-section {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.problem-point,
.our-solution {
  padding: 1.2rem;
  border-radius: 8px;
  position: relative;
}

.problem-point {
  background: #fdfbfb;
}

.our-solution {
  background: #fbfdfb;
}

.problem-label,
.solution-label {
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.6rem;
}

.problem-label {
  color: var(--primary-dark);
}

.solution-label {
  color: var(--accent-color);
}

.problem-point p,
.our-solution p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
  font-weight: 500;
}

.solution-example {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 2px solid var(--border-color);
}

.example-comparison {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.example-before,
.example-after {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem;
  border-radius: 6px;
}

.example-before {
  background: #fff1f2;
}

.example-after {
  background: #f0fdf4;
}

.example-label {
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

.example-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.competitive-cta {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--bg-white);
  border-radius: 14px;
  box-shadow: var(--shadow-organic);
  border: 3px solid var(--border-bold);
}

.competitive-cta h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.competitive-cta p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: var(--text-secondary);
}

.competitive-cta .cta-button {
  background: var(--gradient-organic);
  color: white;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
  font-size: 1rem;
  border: 3px solid var(--border-bold);
  box-shadow: var(--shadow-brutal);
}

.competitive-cta .cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 5px 5px 0px var(--border-bold);
}

@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .benefit-card {
    padding: 1.5rem;
  }
  
  .benefit-icon {
    font-size: 2rem;
  }
  
  .benefit-title {
    font-size: 1.25rem;
  }
  
  .competitive-cta {
    padding: 2rem 1.5rem;
  }
  
  .competitive-cta h3 {
    font-size: 1.5rem;
  }
  
  .competitive-cta .cta-button {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}