.hero.particle-live {
  position: relative;
  isolation: isolate;
  height: max(760px, 100svh);
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  overflow: hidden;
  padding: 122px 4vw 88px;
  background:
    radial-gradient(circle at 75% 45%, rgba(184, 255, 0, 0.09), transparent 36%),
    linear-gradient(135deg, #0b0b0b, #0b0b0b 62%);
}

.particle-live #essence-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.particle-live .particle-aurora {
  position: absolute;
  z-index: 1;
  top: 8%;
  right: 5%;
  width: 56vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 255, 0, 0.12), rgba(184, 255, 0, 0.03) 45%, transparent 70%);
  filter: blur(26px);
  animation: particle-breathe 7s ease-in-out infinite;
}

.particle-live .grain { z-index: 3; pointer-events: none; }

.particle-live .particle-copy {
  position: relative;
  z-index: 5;
  width: 58%;
  pointer-events: none;
}

.particle-live .hero-kicker {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 27px;
  color: #bcbcbc;
  font-size: 10px;
  letter-spacing: 0.22em;
  opacity: 0;
  animation: particle-resolve 0.8s 0.15s forwards;
}

.particle-live .hero-kicker::before {
  content: "";
  width: 36px;
  height: 1px;
  background: #b8ff00;
}

.particle-live h1 {
  position: relative;
  z-index: 5;
  margin: 0;
  font-size: clamp(62px, 7.3vw, 126px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 600;
  font-family: Pretendard, sans-serif;
}

.particle-live h1 span {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 0;
  text-align: left;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(24px) scale(0.985);
  animation: particle-resolve 1.1s cubic-bezier(.18,.84,.2,1) forwards;
}

.particle-live h1 span:nth-child(1) { animation-delay: 0.35s; }
.particle-live h1 span:nth-child(2) { padding-left: 0; animation-delay: 0.58s; }
.particle-live h1 span:nth-child(3) { text-align: left; animation-delay: 0.81s; }
.particle-live h1 .outline {
  margin-left: 6.5vw;
  color: transparent;
  -webkit-text-stroke: 1.4px #f4f5f7;
}
.particle-live h1 .particle-blue {
  margin-left: 2vw;
  color: #b8ff00;
  font-size: 0.83em;
}

.particle-live .particle-description {
  width: min(430px, 80%);
  margin: 34px 0 0 1px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #aaaaaa;
  font-size: 14px;
  line-height: 1.75;
  opacity: 0;
  animation: particle-resolve 0.8s 1.05s forwards;
}

.particle-live .hero-bottom {
  z-index: 7;
  right: auto;
  width: min(520px, 48vw);
  border-top: 0;
  padding-top: 0;
}
.particle-live .hero-bottom p { display: none; }
.particle-live .hero-bottom a { color: #bababa; font-size: 9px; }
.particle-live .hero-bottom .hero-next { color:#bababa; font-size:9px; letter-spacing:.12em; }

@keyframes particle-resolve {
  from { opacity: 0; filter: blur(14px); transform: translateY(24px) scale(0.985); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes particle-breathe { 50% { transform: scale(1.1); opacity: 0.72; } }

@media (max-width: 900px) {
  .hero.particle-live {
    height: auto;
    min-height: 100svh;
    display: block;
    padding: 110px 20px 92px;
  }
  .particle-live .particle-copy { width: 100%; padding-top: calc(min(70vw, 300px) - 24px); }
  .particle-live h1 { font-size: clamp(42px, 10.4vw, 72px); }
  .particle-live h1 .outline, .particle-live h1 .particle-blue { margin-left: 0; }
  .particle-live .particle-description { width: 100%; margin-top: 28px; font-size: 12px; }


  .particle-live .hero-bottom { left: 20px; bottom: 25px; width: auto; }

}

@media (max-width: 520px) {
  .particle-live .particle-copy { padding-top: calc(min(70vw, 300px) - 24px); }
  .particle-live .hero-kicker { margin-bottom: 20px; font-size: 8px; }
  .particle-live h1 { font-size: clamp(34px, 9.3vw, 45px); }
  .particle-live .particle-description { font-size: 11px; }

}

@media (prefers-reduced-motion: reduce) {
  .particle-live .particle-aurora,
  .particle-live .hero-kicker,
  .particle-live h1 span,
  .particle-live .particle-description { animation: none !important; }
  .particle-live .hero-kicker,
  .particle-live h1 span,
  .particle-live .particle-description { opacity: 1; filter: none; transform: none; }
}

/* Brand typography and accessible palette contrast. */
body, button, input, select, textarea { font-family: Pretendard, sans-serif; }
.particle-live h1 span { white-space: nowrap; }
.particle-live h1 .particle-blue { font-size: .74em; }
.particle-live .grain { opacity: .035; }
.form-action button, .submission-dialog button, .submission-icon, .service-chooser button:hover { color: #0b0b0b; }
.submission-dialog .submission-eyebrow { color: #4b4b4b; }
.project-form .form-action button, .project-form .form-action button:disabled { color:#0b0b0b; }
.project-form .form-head p, .brief-progress b, .project-form .field-hint,
.project-form #form-status, .project-form #form-status.is-loading,
.package-toggle input:checked+span b { color:#4b4b4b; }
.brief-group>span, .package-toggle input:checked+span,
.project-form #form-status.is-loading { background:#efffc7; color:#0b0b0b; }
.service-chooser button:hover, .service-chooser button:focus-visible, .service-chooser a:hover { background:#b8ff00; color:#0b0b0b; }
@media(max-width:900px) {
  .topbar { height: 60px; align-items:center; }
  .topbar .logo { display:flex; align-items:center; }
  .topbar .logo img { height:auto; width:112px; object-fit:contain; }
  .particle-live h1 { line-height:1.12; letter-spacing:-.025em; }
  .particle-live h1 .outline { -webkit-text-stroke:.8px #f8f8f6; }
}
@media(max-width:520px) {
  .particle-live .hero-kicker { letter-spacing:.10em; font-size:9px; gap:8px; }
  .particle-live .hero-kicker::before { width:20px; flex-shrink:0; }
  .particle-live h1 { font-size:clamp(32px,9.3vw,45px); }
  .particle-live .particle-description { font-size:13px; }
}