/* Original blue studio treatment inspired by playful editorial agency sites. */
.premium-hero { background: radial-gradient(ellipse at 12% 30%, #cfe5ff 0, transparent 48%), radial-gradient(ellipse at 88% 72%, #dfdcff 0, transparent 45%), #f8fbff; }
.premium-hero .hero-title { font-size: clamp(3rem, 6.5vw, 6rem); line-height: 1.02; letter-spacing: -.065em !important; max-width: 950px; }
.studio-kicker { display: block; font-size: 11px; letter-spacing: .2em; font-weight: 800; color: #2351a0; margin-bottom: 22px; }
.studio-hero-label { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #c4d6f2; border-radius: 99px; padding: 8px 15px; background: #ffffffb8; margin-bottom: 26px; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #20477f; }
.studio-hero-label::before { content: '✦'; color: #175cd3; font-size: 18px; animation: studio-spin 18s linear infinite; }
.studio-invite { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; padding: clamp(28px, 5vw, 70px); margin-bottom: 65px; border: 1px solid #d1e0f5; border-radius: 32px; background: radial-gradient(ellipse at 95% 90%, #cee0ff, transparent 60%), radial-gradient(ellipse at 10% 0%, #e2efff, transparent 60%), #f6faff; overflow: hidden; text-align: left; }
.studio-invite h2 { color: #102b50; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(2.4rem, 4.8vw, 4.5rem); letter-spacing: -.065em; line-height: 1.06; margin: 0 0 24px; font-weight: 800 !important; }
.studio-invite h2 span { color: #175cd3; }
.studio-invite p { max-width: 440px; font-size: 16px !important; color: #435b79; line-height: 1.8; }
.studio-links { display: grid; gap: 16px; margin-top: 28px; }
.studio-link { display: flex; align-items: center; gap: 14px; width: fit-content; color: #143d7a; font-size: 15px; font-weight: 800; text-decoration: none; }
.studio-link small { display: block; color: #4b6381; font-size: 12px; font-weight: 500; margin-top: 3px; }
.studio-link-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #abc6ee; border-radius: 50%; color: #175cd3; font-size: 25px; background: #fff9; transition: transform .3s, background .3s, color .3s; }
.studio-link:hover { color: #1247a6; text-decoration: none; }
.studio-link:hover .studio-link-icon { transform: rotate(45deg); background: #175cd3; color: #fff; }
.studio-link:focus-visible { outline: 3px solid #175cd3; outline-offset: 6px; border-radius: 8px; }
.studio-playground { position: relative; min-height: 360px; pointer-events: none; }
.studio-robot { position: absolute; width: 61%; height: 87%; object-fit: contain; left: 20%; top: 3%; filter: drop-shadow(0 28px 20px #175cd32b); animation: studio-hover 7s ease-in-out infinite; }
.studio-orbit { position: absolute; width: 86%; aspect-ratio: 1; left: 8%; top: 7%; border: 1px solid #84a9e1; border-radius: 50%; transform: rotate(-25deg) scaleY(.65); box-shadow: 0 0 0 28px #175cd305, 0 0 0 55px #175cd304; }
.studio-spark { position: absolute; left: 5%; top: 5%; color: #2557d6; font-size: 85px; line-height: 1; animation: studio-spin 24s linear infinite; }
.studio-code { position: absolute; right: 0; top: 30%; background: #fff; color: #175cd3; padding: 12px 18px; border-radius: 20px; border: 1px solid #c9daf3; font: 800 28px monospace; transform: rotate(12deg); animation: studio-bob 6s ease-in-out infinite -2s; }
.studio-sticker { position: absolute; bottom: 4%; left: 6%; border-radius: 100px; padding: 12px 20px; background: #175cd3; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; transform: rotate(-8deg); box-shadow: 0 8px 25px #175cd329; }
.studio-dot { position: absolute; bottom: 14%; right: 2%; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #70aaff 45%, #1644a9); animation: studio-bob 5s ease-in-out infinite; }
.studio-workstation .studio-robot { width: 100%; height: 92%; left: 0; top: 0; object-fit: contain; animation: none; }
.studio-workstation .studio-sticker { bottom: 0; left: 12%; }
.studio-workstation .studio-spark { font-size: 45px; left: 0; top: 0; }
.studio-workstation .studio-code { right: -2%; top: 5%; font-size: 20px; }
.studio-enter { animation: studio-enter .8s cubic-bezier(.2,.7,.2,1) both; }
.studio-contact-page { background: #fbfdff; }
.studio-contact-page .contact-header { padding: 64px 0 32px; }
.studio-contact-page .header-title { color: #102b50; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.06em; }
.studio-contact-page .header-title span { color: #175cd3; }
.studio-contact-page .premium-nav { background: #fff; }
.studio-contact-page .contact-info-list a { color: #174dbd; }
.studio-contact-page .map-box { border-radius: 24px; border-color: #d1e0f5; }
.studio-contact-page .column-title, .studio-contact-page .opening-hours-title { color: #102b50; border-color: #dbe5f1; }
.studio-contact-page .motion-toggle { position: static; margin-left: auto; border: 1px solid #c4d6f2; border-radius: 30px; padding: 7px 13px; background: #f6faff; color: #20477f; font-size: 12px; }
.motion-paused .studio-invite *, .motion-paused .studio-hero-label::before { animation-play-state: paused !important; }
@keyframes studio-hover { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-20px) rotate(3deg); } }
@keyframes studio-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes studio-spin { to { rotate: 360deg; } }
@keyframes studio-enter { from { opacity: .3; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .studio-invite { grid-template-columns: 1fr; border-radius: 24px; gap: 8px; }
  .studio-playground { min-height: 280px; max-width: 360px; width: 100%; margin: 0 auto; }
  .studio-hero-label { max-width: 100%; font-size: 9px; }
  .premium-hero .hero-title { font-size: clamp(2.7rem, 9vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-invite *, .studio-hero-label::before, .studio-enter { animation: none !important; transition: none !important; }
}