/* First section: the supplied copy stays in HTML; the 16:9 artwork contains no text. */
.site-header {
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: linear-gradient(180deg, rgb(22 22 22 / 96%), rgb(8 8 8 / 90%));
  box-shadow: 0 1px 0 rgb(255 255 255 / 3%) inset, 0 10px 32px rgb(0 0 0 / 20%);
}

.header-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.header-tagline {
  font: 400 12px/1.2 'Noto Sans KR', sans-serif;
  letter-spacing: -.025em;
  opacity: .62;
}

.desktop-nav .header-contact {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 4px;
  background: linear-gradient(145deg, #252525, #111);
  box-shadow: 0 1px 0 rgb(255 255 255 / 7%) inset, 0 5px 14px rgb(0 0 0 / 22%);
  transition: color .2s, border-color .2s, background .2s, translate .25s, box-shadow .25s;
}

.desktop-nav .header-contact:hover {
  background: rgb(255 255 255 / 6%);
  border-color: var(--orange);
}

.site-header.scrolled .header-contact,
.site-header.menu-open .header-contact {
  border-color: var(--line);
}

.hero.hero--sweet-spot {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: auto;
  min-height: clamp(720px, 100svh, 900px);
  padding: 148px 0 128px;
  background: radial-gradient(ellipse at 84% 43%, #23150d 0, #100d0b 29%, #080808 62%);
  color: #fff;
}

.hero--sweet-spot::before,
.hero--sweet-spot::after {
  content: '';
  position: absolute;
  inset: auto;
  z-index: -2;
  pointer-events: none;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  opacity: 1;
  animation: none;
  transform: none;
}

.hero--sweet-spot::before {
  top: -20%;
  right: -6%;
  width: 70%;
  height: 105%;
  background: radial-gradient(ellipse, rgb(243 107 33 / 13%), transparent 64%);
}

.hero--sweet-spot::after {
  right: 3%;
  bottom: 9%;
  width: 47%;
  height: 19%;
  background: radial-gradient(ellipse, rgb(243 107 33 / 9%), transparent 67%);
}

.hero-visual {
  position: absolute;
  z-index: -1;
  top: 74px;
  bottom: 66px;
  left: 36%;
  width: 86%;
  overflow: hidden;
  pointer-events: none;
}

.hero-visual::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 4% 3% 26% 29%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 65% 25%, rgb(255 149 72 / 12%), transparent 63%);
  mix-blend-mode: screen;
}

.hero-visual::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 29%;
  bottom: 11%;
  width: 45%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(0 0 0 / 68%), transparent 69%);
}

.hero-target-image {
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: none;
  object-fit: contain;
  filter: saturate(.82) brightness(.82) contrast(1.2);
  transform: translateY(-50%);
  mask-image: radial-gradient(ellipse 68% 66% at 54% 50%, #000 38%, transparent 81%);
}

.hero-visual-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, #080808 0%, rgb(8 8 8 / 80%) 9%, transparent 34%);
}

.hero--sweet-spot .hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  text-align: left;
  align-items: flex-start;
}

.hero--sweet-spot .hero-overline {
  gap: 10px;
  margin: 0 0 36px;
  color: #bdbdbd;
  font: 600 12px/1.5 Arial, sans-serif;
  letter-spacing: .17em;
}

.hero--sweet-spot .hero-overline::before {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 13px rgb(243 107 33 / 48%);
}

.hero--sweet-spot h1 {
  max-width: 750px;
  margin: 0;
  font: 800 clamp(54px, 4.8vw, 82px)/1.3 'Noto Sans KR', sans-serif;
  letter-spacing: -.065em;
}

.hero--sweet-spot h1 > span {
  display: block;
}

.hero-title-accent {
  color: #f1ddd0;
  text-shadow: 0 3px 24px rgb(243 107 33 / 9%);
}

.hero--sweet-spot .hero-detail {
  max-width: 650px;
  margin: 36px 0 30px;
  color: #d4d4d4;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.95;
  letter-spacing: -.03em;
}

.hero-detail > span {
  display: block;
}

.hero--sweet-spot .hero-cta {
  min-width: 230px;
  min-height: 58px;
  padding: 17px 22px;
  border: 1px solid #ff984f;
  border-radius: 8px;
  background: linear-gradient(145deg, #ff994e, var(--orange) 70%);
  color: #080808;
  box-shadow: 0 1px 0 rgb(255 255 255 / 30%) inset, 0 4px 0 #85320d, 0 15px 32px rgb(243 107 33 / 15%);
  transition: transform .25s, background .25s, box-shadow .25s;
  font-size: 14px;
  font-weight: 700;
}

.hero--sweet-spot .hero-cta:hover {
  transform: translateY(-4px);
  background: linear-gradient(145deg, #ffad68, #ff8038 75%);
  border-color: #ff8b4c;
  box-shadow: 0 1px 0 rgb(255 255 255 / 35%) inset, 0 4px 0 #85320d, 0 20px 38px rgb(243 107 33 / 22%);
}

.floating-contact {
  border: 1px solid #ff984f;
  background: linear-gradient(145deg, #ff994e, var(--orange) 75%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 25%) inset, 0 3px 0 #85320d, 0 12px 28px rgb(0 0 0 / 45%);
  transition: translate .25s, background .25s, box-shadow .25s;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .desktop-nav .header-contact:hover,
  .floating-contact:hover { translate: 0 -3px; }
}

.hero--sweet-spot .hero-cta:focus-visible,
.hero--sweet-spot .hero-bottom a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.hero--sweet-spot .hero-bottom {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 23px;
  border-top: 1px solid rgb(255 255 255 / 13%);
  color: #a8a8a8;
  font: 400 10px/1.5 Arial, sans-serif;
  letter-spacing: .12em;
}

.hero--sweet-spot .hero-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: #d4d4d4;
  font: inherit;
}

.hero-scroll-arrow {
  font-size: 20px;
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-visual {
    animation: hero-visual-enter 1.4s .12s ease-out backwards;
  }

  .hero--sweet-spot .hero-scroll-arrow {
    animation: hero-scroll-cue 2.6s 1.4s ease-in-out infinite;
  }

  .hero--sweet-spot .hero-cta {
    animation-delay: .43s;
  }
}

@keyframes hero-visual-enter {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-scroll-cue {
  0%, 70%, 100% { transform: translateY(0); }
  35% { transform: translateY(5px); }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .hero--sweet-spot h1 { font-size: 54px; }
  .hero--sweet-spot .hero-detail { font-size: 15px; }
  .desktop-nav { gap: 18px; font-size: 13px; }
  .desktop-nav .header-contact { gap: 10px; padding: 10px 12px; }
}

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .site-header .mobile-nav:not([hidden]) { display: block; }

  .hero.hero--sweet-spot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 152px 0 94px;
  }

  .hero--sweet-spot .hero-content { width: min(calc(100% - 72px), 650px); }
  .hero--sweet-spot h1 { font-size: clamp(43px, 6.8vw, 64px); }
  .hero--sweet-spot .hero-overline { margin-bottom: 24px; }
  .hero--sweet-spot .hero-detail { margin: 28px 0 25px; font-size: 16px; }
  .hero.hero--sweet-spot { background: radial-gradient(ellipse at 65% 65%, #21140d, #080808 58%); }
  .hero--sweet-spot::before { top: 29%; right: -30%; width: 130%; height: 75%; }
  .hero--sweet-spot::after { right: 12%; bottom: 12%; width: 75%; height: 12%; }

  .hero-visual {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: min(100%, 820px);
    aspect-ratio: 16 / 9;
    margin: 16px auto 0;
  }

  .hero-visual-shade {
    background: linear-gradient(0deg, #080808, transparent 20%, transparent 78%, #080808),
      linear-gradient(90deg, #080808, transparent 15%, transparent 85%, #080808);
  }
}

@media (max-width: 760px) {
  .site-header { height: 76px; }
  .header-inner { width: calc(100% - 40px); }
  .header-brand { font-size: 20px; gap: 7px; }
  .header-tagline { font-size: 10px; }

  .hero.hero--sweet-spot { padding-top: 128px; padding-bottom: 82px; }
  .hero--sweet-spot .hero-content { width: calc(100% - 40px); }
  .hero--sweet-spot .hero-overline { font-size: 10px; letter-spacing: .12em; margin-bottom: 22px; }
  .hero--sweet-spot h1 { font-size: clamp(32px, 8.6vw, 58px); line-height: 1.38; }
  .hero--sweet-spot .hero-detail { max-width: 450px; margin: 26px 0 25px; font-size: 13px; line-height: 1.9; }
  .hero--sweet-spot .hero-cta { min-width: 216px; min-height: 52px; padding: 14px 18px; font-size: 13px; }
  .hero--sweet-spot .hero-bottom { width: calc(100% - 40px); bottom: 25px; padding-top: 18px; gap: 20px; font-size: 8px; letter-spacing: .08em; }
  .hero--sweet-spot .hero-bottom > span { max-width: 150px; }
  .hero--sweet-spot .hero-bottom a { gap: 10px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--sweet-spot .hero-cta:hover { transform: none; }
  .hero--sweet-spot *,
  .hero--sweet-spot *::before,
  .hero--sweet-spot *::after { animation: none !important; transition: none !important; }
}