/* enhanced-theme-v2.css - 超軽量 & 超エモい */

/* ========== スクロールプログレスバー ========== */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #4a9d9c, #5bb3b2, #4a9d9c);
  background-size: 200% 100%;
  z-index: 10000;
  box-shadow: 0 0 10px rgba(74, 157, 156, 0.5);
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ========== 3D効果の準備 ========== */
#messaging > div > div > div,
#pricing > div > div:first-child,
[data-plan-card] {
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ホバー時のグロー（めっちゃ派手） */
#messaging > div > div > div:hover,
#pricing > div > div:first-child:hover,
[data-plan-card]:hover {
  box-shadow: 
    0 30px 90px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(74, 157, 156, 0.4),
    inset 0 0 30px rgba(74, 157, 156, 0.1);
  filter: brightness(1.1);
}

/* ========== ボタンの超エモいエフェクト ========== */
button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* リップル効果 */
button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

button:hover::before {
  width: 400px;
  height: 400px;
}

/* グローエフェクト */
button::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, transparent, rgba(74, 157, 156, 0.5), transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background-size: 200% 200%;
  animation: border-glow 3s linear infinite;
}

button:hover::after {
  opacity: 1;
}

@keyframes border-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

button:active {
  transform: scale(0.95);
}

/* ========== テキストアニメーション用 ========== */
.char-anim {
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity;
}

/* ========== ヒーローセクションの超派手な背景 ========== */
#hero {
  position: relative;
  background: 
    radial-gradient(circle at 20% 50%, rgba(74, 157, 156, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(91, 179, 178, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a1a 0%, #242424 50%, #1a1a1a 100%);
  overflow: hidden;
}

/* 動く光の玉 */
#hero::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  top: -300px;
  right: -300px;
  background: radial-gradient(circle, rgba(74, 157, 156, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: float-glow 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float-glow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-100px, 50px) scale(1.2);
    opacity: 1;
  }
}

/* もう一つの光 */
#hero::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  bottom: -200px;
  left: -200px;
  background: radial-gradient(circle, rgba(91, 179, 178, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: float-glow-2 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float-glow-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(80px, -60px) scale(1.3);
    opacity: 0.8;
  }
}

/* ========== ヒーロー画像のグロー ========== */
#hero img {
  filter: drop-shadow(0 0 30px rgba(74, 157, 156, 0.4));
  animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(74, 157, 156, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(74, 157, 156, 0.6));
  }
}

/* ========== セクションの背景グラデーション ========== */
section {
  position: relative;
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at top right,
    rgba(74, 157, 156, 0.05) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* ========== ナビゲーションの強化 ========== */
nav {
  backdrop-filter: blur(10px) saturate(180%);
  background: rgba(26, 26, 26, 0.7) !important;
  border-bottom: 1px solid rgba(74, 157, 156, 0.1);
  transition: all 0.3s ease;
}

nav.nav-scrolled {
  backdrop-filter: blur(20px) saturate(200%);
  background: rgba(26, 26, 26, 0.9) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(74, 157, 156, 0.3);
}

/* ========== カードの背景 ========== */
#messaging > div > div > div,
#pricing > div > div:first-child,
[data-plan-card] {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(74, 157, 156, 0.15);
  backdrop-filter: blur(10px);
}

#messaging > div > div > div,
#pricing > div > div:first-child {
  /* 見出しブロックの“半透明四角”だけを消す（文言・レイアウトは触らない） */
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

#messaging > div > div > div:hover,
#pricing > div > div:first-child:hover {
  box-shadow: none !important;
  filter: none !important;
}

/* ========== FAQの強化 ========== */
.raku-faq-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(224, 224, 224, 0.3);
}

.raku-faq-item:hover:not(.is-open) {
  transform: translateX(12px) scale(1.02);
  box-shadow: 
    -6px 0 0 rgba(74, 157, 156, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.15);
  border-color: rgba(74, 157, 156, 0.3);
}

/* ========== リンクのエフェクト ========== */
a {
  position: relative;
  transition: color 0.3s ease;
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #4a9d9c, #5bb3b2);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover::after {
  width: 100%;
}

/* ========== Showcaseセクション ========== */
#showcase img {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(0.95) contrast(1.05);
}

#showcase:hover img {
  filter: brightness(1.05) contrast(1.1) drop-shadow(0 0 40px rgba(74, 157, 156, 0.4));
}

/* ========== プライシングカードの浮き上がり ========== */
#pricing [data-plan-card] {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#pricing [data-plan-card]:hover {
  transform: translateY(-12px) scale(1.02);
}

/* ========== フッターのグラデーション ========== */
footer {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, 1) 0%,
    rgba(18, 18, 18, 1) 100%
  );
  border-top: 1px solid rgba(74, 157, 156, 0.2);
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(74, 157, 156, 0.5),
    transparent
  );
}

/* ========== スムーズスクロール ========== */
html {
  /* Lenis handles smooth scrolling; keep wheel/trackpad behavior crisp. */
  scroll-behavior: auto !important;
}

/* ========== スクロールバーのカスタマイズ ========== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(26, 26, 26, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4a9d9c, #5bb3b2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5bb3b2, #6cc5c4);
}

/* ========== 微細なグリッド（超軽量） ========== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(rgba(74, 157, 156, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 157, 156, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  opacity: 0.4;
}

/* ========== パフォーマンス最適化 ========== */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* transformとopacityだけを使う（GPU加速） */
section,
#messaging > div > div > div,
#pricing > div > div:first-child,
[data-plan-card],
button,
.char-anim {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========== モバイル対応 ========== */
@media (max-width: 768px) {
  /* 3D効果を軽減 */
  #messaging > div > div > div:hover,
  #pricing > div > div:first-child:hover,
  [data-plan-card]:hover {
    transform: none;
  }
  
  /* グローを軽減 */
  #hero::before,
  #hero::after {
    display: none;
  }
}

/* ========== アクセシビリティ ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  body::before {
    opacity: 0.1;
  }
}

/* ========== レイヤー管理 ========== */
body > *:not(#scroll-indicator) {
  position: relative;
  z-index: 1;
}

/* ========== テキストグリッチ（オプション） ========== */
@keyframes glitch {
  0%, 100% { 
    text-shadow: 0 0 0 transparent; 
    transform: translate(0);
  }
  20% { 
    text-shadow: -2px 0 0 #4a9d9c, 2px 0 0 #5bb3b2; 
    transform: translate(-2px, 0);
  }
  40% { 
    text-shadow: 2px 0 0 #4a9d9c, -2px 0 0 #5bb3b2; 
    transform: translate(2px, 0);
  }
  60% { 
    text-shadow: -2px 0 0 #5bb3b2, 2px 0 0 #4a9d9c; 
    transform: translate(-1px, 0);
  }
  80% { 
    text-shadow: 2px 0 0 #5bb3b2, -2px 0 0 #4a9d9c; 
    transform: translate(1px, 0);
  }
}

/* 特定の見出しにグリッチを適用（オプション） */
h1:hover {
  animation: glitch 0.3s;
  animation-timing-function: steps(2, end);
}



/* ========== V3: "限界"レベルのマイクロインタラクション追加 ========== */

/* Cursor aura (GPU only: transform + opacity) */
#fx-cursor, #fx-cursor-dot{
  position: fixed;
  top: 0; left: 0;
  width: 42px; height: 42px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-999px,-999px,0);
  opacity: 0;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
#fx-cursor{
  width: 54px; height: 54px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(74,157,156,.25) 35%, rgba(74,157,156,0) 70%);
  filter: blur(10px);
}
#fx-cursor-dot{
  width: 10px; height: 10px;
  background: rgba(255,255,255,.9);
  filter: drop-shadow(0 0 12px rgba(74,157,156,.65));
}

/* Scroll progress bar (top) */
#fx-progress{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 9998;
  pointer-events: none;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
#fx-progress > div{
  height: 100%;
  width: 0%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(74,157,156,.2), rgba(74,157,156,1), rgba(243,156,18,1));
  box-shadow: 0 0 16px rgba(74,157,156,.45);
}

/* Cinematic scanlines + subtle grain (static, cheap) */
#fx-grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* above backgrounds, below content (content is z-10 in most sections) */
  opacity: .06;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0, rgba(255,255,255,.18) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px),
    radial-gradient(circle at 20% 10%, rgba(74,157,156,.35), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 80% 30%, rgba(243,156,18,.22), rgba(0,0,0,0) 60%);
  mix-blend-mode: overlay;
  transform: translateZ(0);
}

/* Spotlight + specular highlight on cards */
.fx-card{
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}
.fx-card::before{
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  background:
    radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
      rgba(74,157,156,.25),
      rgba(74,157,156,0) 55%);
}
.fx-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  background:
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,.22),
      rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
  transform: translateZ(1px);
}
.fx-card:hover::before,
.fx-card:hover::after{
  opacity: 1;
}

/* "Edge glow" (cheap) */
.fx-card.fx-active{
  box-shadow:
    0 16px 50px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 30px rgba(74,157,156,.22);
}

/* Hero aurora layer (CSS only, cheap) */
#hero::before,
#final-cta::before{
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background:
    radial-gradient(800px 520px at 20% 20%, rgba(74,157,156,.18), rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(243,156,18,.10), rgba(0,0,0,0) 55%),
    radial-gradient(700px 500px at 70% 80%, rgba(74,157,156,.12), rgba(0,0,0,0) 58%);
  filter: blur(18px);
  opacity: .9;
  transform: translate3d(0,0,0);
  animation: fx-aurora 12s ease-in-out infinite;
}
@keyframes fx-aurora{
  0%,100%{ transform: translate3d(-2%, -1%, 0) scale(1.02); }
  50%{ transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

/* "Glitch" hover for hero title (no text changes) */
.fx-glitch{
  position: relative;
}
.fx-glitch::before,
.fx-glitch::after{
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}
.fx-glitch::before{
  transform: translate3d(2px, -1px, 0);
  text-shadow: -2px 0 rgba(74,157,156,.65);
}
.fx-glitch::after{
  transform: translate3d(-2px, 1px, 0);
  text-shadow: 2px 0 rgba(243,156,18,.65);
}
.fx-glitch:hover::before,
.fx-glitch:hover::after{
  opacity: 1;
  animation: fx-glitch 420ms steps(2,end);
}
@keyframes fx-glitch{
  0%{ clip-path: inset(0 0 85% 0); }
  20%{ clip-path: inset(10% 0 55% 0); }
  40%{ clip-path: inset(40% 0 30% 0); }
  60%{ clip-path: inset(65% 0 10% 0); }
  80%{ clip-path: inset(25% 0 55% 0); }
  100%{ clip-path: inset(0 0 0 0); }
}

/* High-end "magnetic" button sheen */
.fx-magnetic{
  position: relative;
  transform: translate3d(0,0,0);
}
.fx-magnetic::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.28),
      rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  transition: opacity 200ms ease;
}
.fx-magnetic:hover::after{ opacity:1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #fx-cursor, #fx-cursor-dot, #fx-grain{ display:none !important; }
  #hero::before, #final-cta::before{ animation:none !important; }
}


/* V3 helper */
.fx-char{ display:inline-block; will-change: transform, opacity; }


/* ========== User tweak: remove hover/cursor "glow" light ========== */
/* Cursor aura */
#fx-cursor, #fx-cursor-dot{ display:none !important; }

/* Blocks/cards hover glow */
#messaging > div > div > div:hover,
#pricing > div > div:first-child:hover,
[data-plan-card]:hover{
  box-shadow: none !important;
  filter: none !important;
}

/* V3 spotlight/specular on cards */
.fx-card::before,
.fx-card::after,
.fx-card:hover::before,
.fx-card:hover::after{
  opacity: 0 !important;
}
.fx-card.fx-active{
  box-shadow:
    0 16px 50px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.12) inset !important;
}

/* Button hover light (ripple + border glow) */
button:hover::before{ width: 0 !important; height: 0 !important; }
button:hover::after{ opacity: 0 !important; }

/* Magnetic sheen light */
.fx-magnetic::after,
.fx-magnetic:hover::after{ opacity: 0 !important; }

/* 最短保存の流れを見る ボタンのホバー下線を無効化 */
#btn-save-flow::after,
#btn-save-flow:hover::after {
  content: none !important;
  display: none !important;
}

/* ========== Patch: 左上・左下の薄い光だけ削除 ========== */
#hero {
  background:
    radial-gradient(circle at 80% 80%, rgba(91, 179, 178, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a1a 0%, #242424 50%, #1a1a1a 100%) !important;
}

#hero::after {
  display: none !important;
}

#hero::before {
  background:
    radial-gradient(900px 600px at 80% 10%, rgba(243,156,18,.10), rgba(0,0,0,0) 55%),
    radial-gradient(700px 500px at 70% 80%, rgba(74,157,156,.12), rgba(0,0,0,0) 58%) !important;
}

#fx-grain {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0, rgba(255,255,255,.18) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px),
    radial-gradient(circle at 80% 30%, rgba(243,156,18,.22), rgba(0,0,0,0) 60%) !important;
}

/* ========== Patch v2: 画面幅を狭めた時に左上の光が再出現するのを防ぐ ========== */
/* 原因: #hero::before の aurora レイヤーが inset:-30% + blur で小さい横幅時に左側まで回り込む */
#hero::before {
  inset: -18% -12% -18% 34% !important;
  background:
    radial-gradient(820px 540px at 96% 8%, rgba(243,156,18,.10), rgba(0,0,0,0) 55%),
    radial-gradient(720px 520px at 88% 82%, rgba(74,157,156,.12), rgba(0,0,0,0) 58%) !important;
}

/* 左側のフィルム/グレイン側にある淡い色も完全に右寄せ */
#fx-grain {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0, rgba(255,255,255,.18) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px),
    radial-gradient(circle at 88% 30%, rgba(243,156,18,.22), rgba(0,0,0,0) 60%) !important;
}

/* デスクトップで幅を狭めた時も左側に色が戻らないようにさらに制限 */
@media (max-width: 1400px) {
  #hero::before {
    inset: -14% -10% -14% 42% !important;
    background:
      radial-gradient(760px 500px at 100% 10%, rgba(243,156,18,.10), rgba(0,0,0,0) 54%),
      radial-gradient(640px 460px at 92% 84%, rgba(74,157,156,.11), rgba(0,0,0,0) 58%) !important;
  }
}

@media (max-width: 1100px) {
  #hero::before {
    inset: -10% -8% -10% 50% !important;
  }
}

/* ========== Patch v3: 中央に出る光の玉を除去し、右上の雰囲気だけ残す ========== */
/* 原因: #hero::before が大きい radial-gradient + blur + aurora animation のまま生きていて、
   画面幅によって中央側へ回り込み、光の玉に見えていた */
#hero::before {
  width: auto !important;
  height: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: -8% -6% -10% 58% !important;
  border-radius: 0 !important;
  animation: none !important;
  filter: blur(14px) !important;
  opacity: .72 !important;
  background:
    radial-gradient(620px 380px at 112% 10%, rgba(243,156,18,.08), rgba(0,0,0,0) 50%),
    radial-gradient(520px 360px at 108% 82%, rgba(74,157,156,.08), rgba(0,0,0,0) 52%) !important;
}

@media (max-width: 1400px) {
  #hero::before {
    inset: -6% -5% -8% 64% !important;
    background:
      radial-gradient(560px 340px at 114% 10%, rgba(243,156,18,.075), rgba(0,0,0,0) 50%),
      radial-gradient(460px 320px at 110% 82%, rgba(74,157,156,.075), rgba(0,0,0,0) 52%) !important;
  }
}

@media (max-width: 1100px) {
  #hero::before {
    inset: -4% -4% -6% 70% !important;
  }
}

/* ========== Patch v4: 右下・右端に残る青緑の光を完全除去 ========== */
/* 原因: #hero 本体の radial-gradient(circle at 80% 80%, ...) が残っていた */
#hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #242424 50%, #1a1a1a 100%) !important;
}

/* 念のため、右下寄りのシアン層も切る */
#hero::before {
  background:
    radial-gradient(620px 380px at 112% 10%, rgba(243,156,18,.08), rgba(0,0,0,0) 50%) !important;
}

@media (max-width: 1400px) {
  #hero::before {
    background:
      radial-gradient(560px 340px at 114% 10%, rgba(243,156,18,.075), rgba(0,0,0,0) 50%) !important;
  }
}

/* ========== Patch v5: 右上に残るアンバーの光を完全除去 ========== */
/* 原因: #hero::before の上側 radial-gradient が右上にだけ残っていた */
#hero::before {
  display: none !important;
  background: none !important;
}

@media (max-width: 1400px) {
  #hero::before {
    display: none !important;
    background: none !important;
  }
}

@media (max-width: 1100px) {
  #hero::before {
    display: none !important;
    background: none !important;
  }
}

/* ========== Patch v6: 右下のアイコンボタン周辺の残留グローだけ除去 ========== */
/* 目的: テキストCTAは触らず、SVGだけの丸いツールボタン周辺の発光・にじみだけ落とす */
#hero button:has(svg):not(:has(span)),
#hero a:has(svg):not(:has(span)),
#hero [role="button"]:has(svg):not(:has(span)) {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#hero button:has(svg):not(:has(span))::before,
#hero button:has(svg):not(:has(span))::after,
#hero a:has(svg):not(:has(span))::before,
#hero a:has(svg):not(:has(span))::after,
#hero [role="button"]:has(svg):not(:has(span))::before,
#hero [role="button"]:has(svg):not(:has(span))::after {
  content: none !important;
  display: none !important;
}

#hero button:has(svg):not(:has(span)) svg,
#hero a:has(svg):not(:has(span)) svg,
#hero [role="button"]:has(svg):not(:has(span)) svg {
  filter: none !important;
}