/* ===================================================
   HOME — hero section and visual collage
   =================================================== */

.hero {
  position: relative;
  padding: clamp(50px, 7vw, 96px) 0 clamp(60px, 8vw, 120px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .hero-visual { display: none; } }

.hero h1 { margin-top: 22px; }
.hero h1 .serif {
  font-family: var(--a-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--royal);
}

/* .hl highlight styles live in components.css so all pages can use them */
/* Prevent line-break inside highlighted words in the narrow hero grid column */
.hero h1 .hl { white-space: nowrap; }

.hero p.lede { font-size: 1.15rem; color: var(--slate); margin-top: 22px; max-width: 540px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

.hero-meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-2);
}
.hero-meta .item .k {
  font-family: var(--h-sora); font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 4px;
}
.hero-meta .item .v { font-family: var(--h-sora); font-weight: 600; color: var(--ink); font-size: 15px; }

/* ---- Hero visual collage ---- */
.hero-visual {
  position: relative;
  aspect-ratio: 1/1.02;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

.hv-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.hv-c1 {
  width: 78%; height: 78%; right: -6%; top: 4%;
  background: radial-gradient(circle at 30% 30%, #FBD968, var(--sun) 60%, var(--amber));
  box-shadow: var(--shadow-lg);
  animation: floatC1 9s ease-in-out infinite;
}
.hv-c2 {
  width: 36%; height: 36%; left: 2%; bottom: 4%;
  background: var(--sky); border: 1px solid var(--line-2);
  animation: floatC2 12s ease-in-out infinite;
  animation-delay: -5s;
}

/* Balloon drift — two independent paths so they never move in sync */
@keyframes floatC1 {
  0%   { transform: translate(0px,    0px); }
  20%  { transform: translate(7px,  -14px); }
  45%  { transform: translate(-5px, -22px); }
  70%  { transform: translate(10px, -12px); }
  100% { transform: translate(0px,    0px); }
}
@keyframes floatC2 {
  0%   { transform: translate(0px,   0px); }
  30%  { transform: translate(-8px, -16px); }
  55%  { transform: translate(6px,  -10px); }
  80%  { transform: translate(-4px, -20px); }
  100% { transform: translate(0px,   0px); }
}

/* 3D tilt perspective wrapper */
.hv-tilt { position: absolute; width: 62%; left: 8%; top: 12%; perspective: 900px; z-index: 2; }

.hv-logo {
  position: relative;
  background: var(--paper); border-radius: var(--r-lg);
  padding: 22px 26px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(-3deg);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.hv-logo.tilting { transition: transform 125ms ease-out; }
.hv-logo img { width: 100%; height: auto; pointer-events: none; }

/* Floating info cards */
.hv-card {
  position: absolute; background: var(--paper); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: var(--shadow-md);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--h-sora); font-weight: 600; font-size: 14px; color: var(--ink);
}
.hv-card .chip {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--sky); color: var(--royal);
}
.hv-card .chip.gold { background: #FCEFC4; color: var(--amber); }
.hv-card .meta { font-family: var(--b-sans); font-weight: 400; font-size: 12px; color: var(--slate); }

.hv-card-1 { top: 4%; right: 2%; z-index: 5; }
.hv-card-2 { bottom: 28%; left: 2%; z-index: 5; }
.hv-card-3 { bottom: 6%; right: 8%; z-index: 5; }