:root {
  --cyan: #00f7fb;
  --scene-scale: 1;
  --content-width: 900px;
  --content-top: 174px;
  --logo-width: 345px;
  --headline-size: 72px;
  --services-size: 24px;
  --social-size: 68px;
  --social-icon-size: 32px;
  --social-gap: 16px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; background: #fff; }
body { overflow: hidden; color: #000; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }

.hero { position: relative; isolation: isolate; width: 100vw; min-height: 620px; height: 100svh; overflow: hidden; background: #fff; }
.scene { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--scene-scale)); transform-origin: center; pointer-events: none; }
.doodle { position: absolute; will-change: transform; }
.doodle img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 8px 7px rgb(0 0 0 / 16%)); }

.back-ring { z-index: 1; top: -399.42px; left: 118.04px; width: 1695.91px; }
.content { position: absolute; z-index: 4; top: var(--content-top); left: 50%; display: flex; width: var(--content-width); flex-direction: column; align-items: center; transform: translateX(-50%); text-align: center; pointer-events: auto; will-change: transform; }
.logo { display: block; width: var(--logo-width); height: auto; margin: 0 auto 3px; }

.content h1 { margin: 0; color: #000; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif; font-size: var(--headline-size); font-weight: 900; line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; }
.services { margin: 26px 0 0; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: var(--services-size); font-weight: 600; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.service-separator { display: inline-block; width: 3px; height: 0.92em; margin: 0 0.4em -0.11em; background: var(--cyan); }

.socials { display: flex; justify-content: center; gap: var(--social-gap); margin-top: 32px; }
.social { display: grid; width: var(--social-size); height: var(--social-size); place-items: center; border-radius: 50%; color: #fff; background: #000; text-decoration: none; transition: transform 180ms ease, background 180ms ease, color 180ms ease; }
.social:hover, .social:focus-visible { color: #000; background: var(--cyan); transform: translateY(-4px) scale(1.04); }
.social:focus-visible, .motion-permission:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.social svg { display: block; width: var(--social-icon-size); height: var(--social-icon-size); fill: currentColor; }
.social.behance { font: 900 27px/1 "Arial Black", Arial, sans-serif; letter-spacing: -2px; }

.fg-tl, .fg-tr, .fg-bl, .fg-br { -webkit-mask-image: radial-gradient(ellipse 44% 32% at 100% 100%, transparent 0%, rgb(0 0 0 / 10%) 20%, rgb(0 0 0 / 55%) 42%, #000 70%); mask-image: radial-gradient(ellipse 44% 32% at 100% 100%, transparent 0%, rgb(0 0 0 / 10%) 20%, rgb(0 0 0 / 55%) 42%, #000 70%); }
.fg-tl { z-index: 7; top: -915.01px; left: -7.47px; width: 923.41px; }
.fg-tr { z-index: 7; top: -915.10px; left: 1108.08px; width: 818.99px; -webkit-mask-image: radial-gradient(ellipse 46% 32% at 0 100%, transparent 0%, rgb(0 0 0 / 10%) 20%, rgb(0 0 0 / 55%) 42%, #000 70%); mask-image: radial-gradient(ellipse 46% 32% at 0 100%, transparent 0%, rgb(0 0 0 / 10%) 20%, rgb(0 0 0 / 55%) 42%, #000 70%); }
.fg-bl { z-index: 8; top: 518.97px; left: -7.62px; width: 1087.05px; -webkit-mask-image: radial-gradient(ellipse 44% 32% at 100% 0, transparent 0%, rgb(0 0 0 / 8%) 18%, rgb(0 0 0 / 58%) 40%, #000 69%); mask-image: radial-gradient(ellipse 44% 32% at 100% 0, transparent 0%, rgb(0 0 0 / 8%) 18%, rgb(0 0 0 / 58%) 40%, #000 69%); }
.fg-br { z-index: 8; top: 540.85px; left: 1015.24px; width: 912.25px; -webkit-mask-image: radial-gradient(ellipse 46% 32% at 0 0, transparent 0%, rgb(0 0 0 / 8%) 18%, rgb(0 0 0 / 58%) 40%, #000 69%); mask-image: radial-gradient(ellipse 46% 32% at 0 0, transparent 0%, rgb(0 0 0 / 8%) 18%, rgb(0 0 0 / 58%) 40%, #000 69%); }

.hint { position: absolute; z-index: 30; bottom: 14px; left: 50%; margin: 0; transform: translateX(-50%); font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.24; pointer-events: none; }
.mobile-mid { display: none; }
.motion-permission { position: fixed; z-index: 999; bottom: 18px; left: 50%; display: none; padding: 11px 16px; border: 2px solid #000; border-radius: 999px; transform: translateX(-50%); color: #000; background: #fff; box-shadow: 0 6px 20px rgb(0 0 0 / 15%); cursor: pointer; font: 800 11px/1 Arial, Helvetica, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.motion-permission.show { display: block; }
.motion-permission:hover { background: var(--cyan); }

@media (max-width: 760px) {
  .content { padding: 0 8px; }
  .content h1 { max-width: 100%; line-height: 0.98; }
  .services { max-width: 100%; line-height: 1.35; white-space: normal; }
  .hint { display: none; }
}

@media (max-width: 760px) and (orientation: portrait) {
  .scene { width: 100vw; height: 100svh; overflow: visible; transform: translate(-50%, -50%) scale(1) !important; }
  .mobile-mid { display: block; }
  .back-ring { top: 5vh; left: -35vw; width: 170vw; }
  .mobile-top { z-index: 2; top: -79vw; left: -35vw; width: 170vw; }
  .mobile-bottom { z-index: 2; bottom: -35vw; left: -27.5vw; width: 155vw; }
  .fg-tl { top: -52vw; left: -48vw; width: 94vw; }
  .fg-tr { top: -52vw; right: -45vw; left: auto; width: 88vw; }
  .fg-bl { bottom: -48vw; left: -58vw; top: auto; width: 104vw; }
  .fg-br { right: -55vw; bottom: -46vw; left: auto; top: auto; width: 98vw; }
  .content { top: 17vh !important; width: 90vw !important; padding: 0 4vw; }
  .logo { width: min(47vw, 190px) !important; }
  .content h1 { font-size: clamp(28px, 8.6vw, 38px) !important; line-height: 0.99; white-space: normal; }
  .services { max-width: 88vw; margin-top: 18px; font-size: clamp(10px, 2.8vw, 12px) !important; line-height: 1.42; white-space: normal; }
  .socials { margin-top: 22px; }
  .social { width: clamp(44px, 12vw, 50px) !important; height: clamp(44px, 12vw, 50px) !important; }
  .social svg { width: clamp(21px, 5.7vw, 24px) !important; height: clamp(21px, 5.7vw, 24px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .doodle { transform: none !important; }
  .content { transform: translateX(-50%) !important; }
  .hint { display: none; }
}