/* Glossy jelly rings and curved labels from the supplied bubble reference. */
.bubble-controls { display: flex; gap: 6px; flex-shrink: 0; }
.bubble-controls button { background: var(--surface); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 12px; }
.bubble-controls button:hover { border-color: var(--accent); color: var(--accent); }
.bubble-stage { height: 420px; position: relative; overflow: hidden; margin-top: 12px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 100%, var(--tint), transparent 70%); }
.tool-bubble { position: absolute; top: 0; left: 0; border: 0; padding: 0; border-radius: 50%; cursor: grab; background: none; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.tool-bubble:active { cursor: grabbing; }
.bubble-ring { position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(circle at 28% 20%, color-mix(in srgb, var(--bubble-color), white 42%), var(--bubble-color) 54%, color-mix(in srgb, var(--bubble-color), black 38%) 100%); box-shadow: inset 1px 2px 3px #ffffff80, inset -2px -3px 5px #0004, 0 4px 8px #0002; }
.bubble-ring::before { content: ''; position: absolute; left: 15%; top: 9%; width: 30%; height: 8%; border-radius: 50%; transform: rotate(-32deg); background: #ffffffb3; filter: blur(1px); }
.bubble-logo { position: absolute; inset: 22%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%, #fff, #f4f6fc 70%, #dbe3f0); box-shadow: 0 0 0 2px #0002, inset 0 2px 5px #fff; overflow: hidden; }
.bubble-logo img { position: absolute; width: 72%; height: 72%; object-fit: contain; border-radius: 50%; }
.bubble-initial { font-weight: 700; font-size: 20px; color: var(--bubble-color); }
.bubble-label { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bubble-label text { fill: var(--bubble-label-ink, white); font: 700 10px Inter, sans-serif; letter-spacing: .1px; }

/* Centered physics area behind the foreground hero content. */
.hero-bubbles { position: relative; isolation: isolate; overflow: visible; min-height: 640px; display: grid; align-items: center; padding: 110px 0 150px; }
.hero-bubbles .bubble-stage { position: absolute; inset: -65px 10% 0; width: 80%; z-index: 0; height: calc(100% + 65px); margin: 0; border: 0; border-radius: 0 0 64px 64px; background: none; }
.hero-bubbles .bubble-stage::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 64px; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, var(--tint), transparent 70%); -webkit-mask-image: linear-gradient(to bottom, transparent 80px, #000 200px); mask-image: linear-gradient(to bottom, transparent 80px, #000 200px); }
.hero-bubbles::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 25%, transparent 65%); }
.hero-bubbles .hero-copy { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.hero-bubbles .hero-copy a { pointer-events: auto; }
.hero-bubbles .hero-actions { margin-top: 32px; }
.hero-bubbles .bubble-controls { position: absolute; right: calc(10% + 20px); bottom: 20px; z-index: 3; }
@media (max-width: 760px) {
  .hero-bubbles { min-height: 600px; padding: 90px 0 150px; }
  .bubble-controls button { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .tool-bubble { will-change: auto; } }

.hero-bubbles h1 { position: relative; top: -24px; }

/* Exact fill used by the logo’s l. */
.hero-bubbles h1 em { color: #4492d4; }