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

:root {
  --page-background: #e9eaec;
  --text-primary: #09090b;
  --text-secondary: #26272b;
  --line-color: rgba(9, 9, 11, 0.45);
  --accent: #2f6dff;
  --accent-hover: #2456c9;
}

html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 3rem;
  background: var(--page-background);
  color: var(--text-primary);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

.page-shell {
  width: min(100%, 76rem);
  margin: 0 auto;
}

.site-name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.divider {
  width: 100%;
  height: 1px;
  margin: 1.25rem 0 4rem;
  background: var(--line-color);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  min-height: 62vh;
}

.hero-copy {
  max-width: 44rem;
}

h1 {
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 5.2rem);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.07em;
}

.contact-copy {
  max-width: 30rem;
  margin: 2rem 0 0;
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-secondary);
}

.email-link {
  color: var(--accent);
  text-decoration: none;
}

.email-link:hover,
.email-link:focus-visible {
  color: var(--accent-hover);
  text-decoration: underline;
}

.hero-visual {
  position: relative;
  min-height: clamp(21rem, 36vw, 32rem);
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hero-visual::before {
  inset: 9% 0 0 10%;
  background:
    radial-gradient(circle at 26% 76%, rgba(255, 35, 119, 0.85), rgba(255, 35, 119, 0) 18%),
    radial-gradient(circle at 71% 34%, rgba(33, 98, 255, 0.8), rgba(33, 98, 255, 0) 16%),
    radial-gradient(circle at 79% 59%, rgba(118, 12, 205, 0.82), rgba(118, 12, 205, 0) 19%),
    radial-gradient(circle at 58% 74%, rgba(255, 162, 143, 0.92), rgba(255, 162, 143, 0) 21%);
  filter: blur(22px);
  opacity: 0.96;
}

.hero-visual::after {
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--page-background) 0 33%, rgba(233, 234, 236, 0) 35%),
    conic-gradient(
      from 205deg,
      rgba(255, 35, 119, 0.98) 0deg,
      rgba(255, 158, 138, 0.98) 62deg,
      rgba(255, 255, 255, 0) 128deg,
      rgba(33, 98, 255, 0.95) 245deg,
      rgba(118, 12, 205, 0.97) 308deg,
      rgba(255, 35, 119, 0.98) 360deg
    );
  filter: blur(36px);
  transform: rotate(18deg) scale(0.86);
  opacity: 0.94;
}

@media (max-width: 900px) {
  body {
    padding: 2rem 1.5rem;
  }

  .divider {
    margin-bottom: 2.5rem;
  }

  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
  }

  .hero-visual {
    order: 2;
    min-height: 18rem;
    max-width: 28rem;
    width: 100%;
    margin-left: auto;
  }
}

@media (max-width: 540px) {
  body {
    padding: 1.25rem;
  }

  .divider {
    margin: 1rem 0 2rem;
  }

  .contact-copy {
    margin-top: 1.5rem;
    max-width: 20rem;
  }

  .hero-visual {
    min-height: 14rem;
  }
}