.tool-icons-c{background:linear-gradient(135deg,rgba(10,132,255,.06),rgba(126,87,194,.08))}.tool-icons-c .section-heading{max-width:760px}.tool-icons-note{max-width:58ch;color:var(--muted);line-height:1.55}.tool-icon-grid-c{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:28px}.tool-icon-card-c{padding:10px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 14px 40px rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease}.tool-icon-card-c:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(0,0,0,.12)}.tool-icon-stage-c{margin:0 auto;padding:10px;max-width:96px;aspect-ratio:1;overflow:hidden;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid var(--line);transition:box-shadow .25s ease}.tool-icon-stage-c.is-playing{box-shadow:0 0 0 2px var(--blue),0 14px 30px rgba(10,132,255,.18)}.tool-icon-anim-c{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain;transform-origin:50% 100%;transform:scale(1.22)}.tool-icon-stage-c.is-playing .tool-icon-anim-c{transform:scale(1.13)}.tool-icon-card-c h3{margin:10px 2px 4px;font-size:.92rem}.tool-icon-card-c p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.4}.tool-icon-status-c{display:inline-block;margin-top:8px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-weight:800}@media(max-width:1100px){.tool-icon-grid-c{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:900px){.tool-icon-grid-c{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.tool-icon-grid-c{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tool-icon-card-c{padding:10px}.tool-icon-card-c h3{font-size:.86rem}}@media(prefers-reduced-motion:reduce){.tool-icon-card-c{transition:none}}

/* Feature/tool icon badge -- hover-animated soft 3D icon overlay */
.section, .page-hero { position: relative; }
.feature-icon-badge { position: absolute; top: 18px; right: 18px; z-index: 3; width: 50px; height: 50px; padding: 7px; border-radius: 14px; background: rgba(255,255,255,.82); box-shadow: 0 10px 26px rgba(17,19,24,.14); cursor: pointer; }
.feature-icon-badge img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.feature-icon-badge:hover img, .feature-icon-badge:focus img { transform: scale(1.08); }
@media (max-width: 650px) { .feature-icon-badge { top: 12px; right: 12px; width: 40px; height: 40px; padding: 5px; } }
@media (prefers-reduced-motion: reduce) { .feature-icon-badge img { transition: none !important; } }

/* Logo camera-hover effect: shutter click + comic flash + page glitch */
.camera-flash-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: #fff; }
.camera-flash-overlay.is-active { animation: cameraFlashPage 320ms ease-out; }
@keyframes cameraFlashPage {
  0%   { opacity: 0;    filter: blur(0px) saturate(1) hue-rotate(0deg); }
  8%   { opacity: .55;  filter: blur(2px) saturate(1.5) hue-rotate(6deg); }
  20%  { opacity: 1;    filter: blur(7px) saturate(2.2) hue-rotate(-10deg); }
  38%  { opacity: .8;   filter: blur(3px) saturate(1.6) hue-rotate(8deg); }
  60%  { opacity: .35;  filter: blur(1px) saturate(1.1); }
  100% { opacity: 0;    filter: blur(0px) saturate(1); }
}
.brand-mark, .footer img { cursor: pointer; }
.logo-comic-flash { position: absolute; inset: -60%; z-index: 5; pointer-events: none; opacity: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,214,10,.55) 35%, transparent 68%); }
.logo-comic-flash::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0deg 4deg, transparent 4deg 18deg); mix-blend-mode: screen; }
.logo-comic-flash.is-active { animation: logoComicFlash 340ms ease-out; }
@keyframes logoComicFlash {
  0%   { opacity: 0;   transform: scale(.3) rotate(0deg); }
  22%  { opacity: 1;   transform: scale(1.05) rotate(8deg); }
  100% { opacity: 0;   transform: scale(1.7) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { .camera-flash-overlay, .logo-comic-flash { animation: none !important; } }