/* Basic reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #fff; color: #223343; }

/* Frame and panel */
.wrapper { position: relative; max-width: 1466px; margin: 32px auto; padding: 24px; background: #fff; border-radius: 32px; }
.panel { position: relative; border-radius: 58px; padding: clamp(16px, 4vw, 48px) clamp(16px, 4vw, 64px); background-color: #f5f6f7; background-image: radial-gradient(#d9dde1 1px, transparent 1px); background-size: 18px 18px; overflow: visible; }

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: clamp(12px, 3vw, 32px); }
.brand { display: flex; align-items: flex-end; gap: 18px; }
.logo-hhs { display: block; height: 32px; width: auto; image-rendering: -webkit-optimize-contrast; }
.logo-cmd { display: block; height: 32px; width: auto; image-rendering: -webkit-optimize-contrast; }
.divider { width: 1px; height: 32px; background: #cfd6dc; }

/* Lang switcher */
.lang { display: flex; align-items: center; gap: 12px; }
.lang button, .lang-link { background: #fff; border: 2px solid #00b1cd; padding: 2px 8px; font-weight: 600; font-size: 14px; color: #000; letter-spacing: -0.02em; line-height: 1.2; cursor: pointer; border-radius: 2px; text-decoration: none; display: inline-block; }
.lang .sep { width: 25px; height: 1px; transform: rotate(90deg); background: #cfd6dc; }

/* Main */
.main { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; padding: clamp(8px, 2vw, 16px) 0 32px; }
.hero-title { font-weight: 600; font-size: clamp(32px, 5.2vw, 66px); line-height: 1.1; letter-spacing: -0.06em; max-width: 640px; margin: clamp(8px, 2vw, 16px) 0; }
.cta { display: inline-flex; align-items: center; justify-content: center; background: #ffba00; color: #000; padding: 12px 20px; font-weight: 500; letter-spacing: -0.03em; text-decoration: none; width: fit-content; }
.union { position: absolute; width: 68px; aspect-ratio: 68/118; right: clamp(24px, 8vw, 120px); top: clamp(80px, 14vw, 240px); object-fit: contain; }

/* Cursor subtle left-right motion */
@keyframes cursorFloatX {
  0% { transform: translateX(-6px); }
  100% { transform: translateX(6px); }
}
.union { animation: cursorFloatX 2s ease-in-out infinite alternate; }

/* Illustration pinned to bottom of panel */
.illustration { display: block; position: relative; left: 50%; transform: translateX(-50%); width: 140vw; max-width: none; height: auto; margin: clamp(8px, 3vw, 16px) auto 0; object-fit: contain; }

/* CTA variants */
.cta { transition: background-color .2s ease, transform .1s ease; }
.cta:hover { background: #e5aa00; }
.cta:active { transform: translateY(1px); }
.cta--blue { background: #00b1cd; color: #fff; }
.cta--blue:hover { background: #0097b0; }

/* Language switcher hover */
.lang button, .lang-link { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.lang button:hover, .lang-link:hover { background: #00b1cd; color: #fff; border-color: #00b1cd; }
.lang button:active, .lang-link:active { transform: translateY(1px); }

/* Responsive tweaks */
@media (max-width: 760px) {
  .brand img { max-height: 24px; }
  .union { display: none; }
  .illustration { width: 160vw; }
}