/* SpecEnvoy homepage hero v3 — brand hex → gold sun-glare hexes → each hex morphs into
   a petal (tech woven into life). Self-contained colours; transform/opacity/d only. */
.home-hero {
  --hf-royal: #3b6fe0; --hf-purple: #7d3c98; --hf-gold: #f3c849; --hf-pink: #ff5d8f; --hf-ink: #eef2fb;
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; min-height: min(78vh, 720px); padding: 6px 16px 20px;
  overflow-x: clip;   /* the warmth/rays layers use negative insets — don't let them push the page wider */
}
.hf-wrap { position: relative; z-index: 1; width: min(94%, 540px); aspect-ratio: 1; margin: 0 auto; }
.hf-svg { width: 100%; height: 100%; display: block; overflow: visible;
  filter: drop-shadow(0 24px 60px rgba(10,6,30,.55)); }

/* ambient background: petals drifting down with a gentle 3D tumble, at random intervals */
.hf-fall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hf-petal { position: absolute; top: -9vh; perspective: 520px; will-change: transform; }
.hf-petal > .pf { display: block; will-change: transform; }
@keyframes hf-fall { 0% { transform: translate(0,0); opacity: 0; } 9% { opacity: .62; } 88% { opacity: .56; } 100% { transform: translate(var(--drift,0px), 98vh); opacity: 0; } }
@keyframes hf-tumble { to { transform: rotate3d(1, .7, .25, 360deg); } }

/* soft warm diffused light behind the flower (lit after the bloom) */
.hf-warmth { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(58% 52% at 50% 46%,
    rgba(255,196,92,.40), rgba(255,120,150,.18) 40%, rgba(140,70,190,.08) 66%, transparent 80%);
  transition: opacity 2s ease; transform-origin: 50% 46%; mix-blend-mode: screen; }
/* dimmed again by the golden long end (0.62 x 0.618 ~ 0.38) — Chrome's screen blend ran hot */
.hf-warmth.on { opacity: .38; animation: hf-warm 11s ease-in-out infinite; }
@keyframes hf-warm { 0%,100% { transform: scale(1); opacity: .31; } 50% { transform: scale(1.16); opacity: .38; } }

/* warm light RAYS streaming in diagonally from a top corner across the scene (in-plane,
   not toward the viewer). Masked so they're strong near the corner and fade across. */
.hf-rays { position: absolute; inset: -30% -25%; z-index: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(var(--ray-angle, 118deg),
    transparent 0 72px, rgba(255,216,146,.06) 90px, rgba(255,216,146,.12) 106px, rgba(255,216,146,.06) 122px, transparent 140px);
  -webkit-mask-image: radial-gradient(135% 120% at 15% -6%, #000 0%, rgba(0,0,0,.5) 42%, transparent 82%);
          mask-image: radial-gradient(135% 120% at 15% -6%, #000 0%, rgba(0,0,0,.5) 42%, transparent 82%);
  mix-blend-mode: screen; transition: opacity 2.6s ease; }
.hf-rays.on { opacity: .24; animation: hf-rays 20s ease-in-out infinite alternate; }   /* dimmed again by golden long end (0.38 x 0.618) */
@keyframes hf-rays { from { transform: translate(-26px,-12px); } to { transform: translate(26px,12px); } }
.paused .hf-warmth, .paused .hf-rays, .paused .hf-petal, .paused .pf { animation-play-state: paused; }

/* homepage: undo the old layout's negative top margin on the search pill */
.search-hero { margin: 22px auto 12px; }

/* ---- gold sun-glare hexes: a field fading in & out of each other ---- */
.ghex { fill: url(#hfGold); stroke: #f3c849; stroke-width: .6; stroke-opacity: .3; opacity: 0;
  transition: opacity .5s ease; }
.glare-on .ghex { animation: hf-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--p) * -2.6s); }
@keyframes hf-twinkle { 0%,100% { opacity: .10; } 50% { opacity: .58; } }
.flowered .ghex { opacity: 0 !important; animation: none; }

/* ---- seed brand hex (continues from the loader) ---- */
.seed { transform-box: view-box; transform-origin: 200px 200px; transition: opacity .5s ease, transform .6s cubic-bezier(.5,0,.2,1); }
.glare-on .seed { opacity: 0; transform: scale(.32); }

/* ---- petals: start as gold wire-hexes (d/fill driven by JS morph), end as fire-lily petals ---- */
.petals { opacity: 0; transition: opacity .5s ease; }
.glare-on .petals { opacity: 1; }
.ppath { fill: url(#hfPetal); stroke-width: 1.7; stroke-linejoin: round; }
/* the six gold hexes spin + scale OUT of the initial centre hex, staggered */
/* each flower has its own spawn (from-transform / stagger / duration / easing via CSS vars) */
.pout { cursor: pointer; transform-box: view-box; transform-origin: 200px 200px;
  transform: var(--sp-from, scale(.04) rotate(-100deg));
  transition: transform var(--sp-dur, .62s) var(--sp-ease, cubic-bezier(.2,.86,.32,1.08));
  transition-delay: calc(var(--i) * var(--sp-stag, .07s)); }
.glare-on .pout { transform: none; }
.flowered .pout { transition: transform .45s cubic-bezier(.34,1.4,.5,1); transition-delay: 0s; }

/* inner purple whorl (restores v1's fuller flower) — blooms in once the petals open */
.pin { fill: url(#hfInner); opacity: .95; transform-box: view-box; transform-origin: 0 0;
  transform: translate(200px,200px) rotate(var(--r)) scale(0);
  transition: transform .7s cubic-bezier(.22,.9,.24,1) .1s; }
.flowered .pin { transform: translate(200px,200px) rotate(var(--r)) scale(1); }

/* ---- throat + inner rays bloom in once the petals are open ---- */
.ray { transform-box: view-box; transform-origin: 0 0;
  transform: translate(200px,200px) rotate(var(--r)) scale(0);
  transition: transform .55s cubic-bezier(.22,.9,.24,1) .1s; fill: var(--hf-gold); opacity: .9; }
.core { fill: url(#hfCore); transform-box: view-box; transform-origin: 200px 200px; transform: scale(0);
  transition: transform .55s cubic-bezier(.22,.9,.24,1) .15s; filter: drop-shadow(0 0 10px rgba(243,200,73,.65)); }
.core-hint { fill: #6b3a12; opacity: 0; transition: opacity .4s ease .3s; }
.flowered .ray { transform: translate(200px,200px) rotate(var(--r)) scale(1); }
.flowered .core { transform: scale(1); }
.flowered .core-hint { opacity: .5; }

/* ---- labels ---- */
.plabel { fill: #cdd8f5; font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  text-anchor: middle; dominant-baseline: middle; opacity: 0; letter-spacing: .3px; pointer-events: none;
  transition: opacity .4s ease, fill .2s ease; }
.flowered .plabel { opacity: .5; }
.plabel.on { fill: var(--hf-gold); opacity: 1; }
.plabel-link { cursor: pointer; } .plhit { fill: transparent; }

/* ---- idle life (breathing + out-of-sync petal sway + core pulse) ---- */
.flowered .bloom { transform-box: view-box; transform-origin: 200px 200px; animation: hf-breathe 6s ease-in-out infinite 1s; }
/* each petal sways clearly on its own clock — so a couple are always visibly waving */
.flowered .pout > .ppath { transform-box: view-box; transform-origin: 200px 200px;
  animation: hf-sway calc(3.4s + var(--i) * .5s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.05s); }
.flowered .core { animation: hf-corepulse 4s ease-in-out infinite 1.4s; }
@keyframes hf-breathe { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.04) rotate(1.4deg); } }
@keyframes hf-sway { 0% { transform: rotate(calc(var(--sway,3deg) * -0.8)); } 50% { transform: rotate(var(--sway,3deg)); } 100% { transform: rotate(calc(var(--sway,3deg) * -0.8)); } }
@keyframes hf-corepulse { 0%,100% { filter: drop-shadow(0 0 9px rgba(243,200,73,.55)); } 50% { filter: drop-shadow(0 0 15px rgba(243,200,73,.9)); } }

/* some recipes rock the whole flower slowly instead of per-petal sway */
.rot-idle.flowered .bloom { animation: hf-rock 9s ease-in-out infinite; }
.rot-idle.flowered .pout > .ppath { animation: none; }
@keyframes hf-rock { 0%,100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.02); } }

/* fold back toward the hex before a different flower blooms */
.collapsing .bloom { transform-box: view-box; transform-origin: 200px 200px;
  transform: scale(.14) rotate(40deg); opacity: 0;
  transition: transform .72s cubic-bezier(.5,0,.6,1), opacity .6s ease; animation: none; }
.collapsing .plabel, .collapsing .seed, .collapsing .ghex { opacity: 0 !important; transition: opacity .45s ease; }

/* ---- hover / focus ---- */
.flowered .pout.on { transform: scale(1.06); }
.pout.on > .ppath { filter: brightness(1.14) drop-shadow(0 0 7px rgba(243,200,73,.8)); }
.petals:hover .pout:not(.on), .petals:focus-within .pout:not(.on) { opacity: .82; }
.throat { cursor: pointer; }
.throat:focus-visible { outline: none; }
.throat:focus-visible .core { filter: drop-shadow(0 0 12px rgba(243,200,73,1)); }

.paused * { animation-play-state: paused !important; }
.snap * { transition-duration: .01s !important; }

.hf-hint { margin: 6px 0 0; color: #8ea3cc; font-size: 14px; letter-spacing: .2px; opacity: 0; transition: opacity .6s ease; }
.hf-hint.show { opacity: 1; }

/* subtle "more below" cue — pinned to the viewport bottom, gently bobbing, gone on scroll */
.hf-scroll { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: none; border: 0; padding: 6px 18px; cursor: pointer; color: #9fb0d4; z-index: 30;
  opacity: 0; transition: opacity .7s ease; -webkit-tap-highlight-color: transparent; }
.hf-scroll svg { width: 30px; height: 30px; display: block; animation: hf-bob 1.9s ease-in-out infinite;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.hf-scroll.show { opacity: .68; }
.hf-scroll.gone { opacity: 0 !important; pointer-events: none; }
.hf-scroll:hover, .hf-scroll:focus-visible { opacity: .85; outline: none; }
@keyframes hf-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.home-tag { max-width: 46ch; margin: 2px auto 0; color: var(--muted, #97a3c2); font-size: 15.5px; line-height: 1.5; }

/* ---- below-fold directory ---- */
.home-dir { max-width: 720px; margin: 8px auto 0; }
.home-dir .dir-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.home-dir a.dir { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.045);
  color: inherit; text-decoration: none; transition: .16s; }
.home-dir a.dir:hover { border-color: rgba(243,200,73,.45); background: rgba(243,200,73,.07); transform: translateY(-2px); }
.home-dir .dir b { font-size: 15.5px; color: var(--ink, #eef2fb); font-weight: 600; }
.home-dir .dir span { font-size: 12.5px; line-height: 1.4; color: var(--muted, #97a3c2); }

@media (max-width: 560px) {
  .hf-wrap { width: min(94%, 440px); }
  .home-dir .dir-grid { grid-template-columns: 1fr; }
  .plabel { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ghex, .seed, .pout, .ray, .core, .plabel, .hf-hint, .bloom,
  .flowered .pout > .ppath, .flowered .core, .flowered .bloom { transition: none !important; animation: none !important; }
  .no-anim .ghex, .no-anim .seed { opacity: 0; }
  .hf-hint { opacity: 1; }
  .hf-scroll svg { animation: none !important; }
  .hf-scroll.show { opacity: .68; }
}

/* ================= compact fold (homepage) =================
   The flower shares the first viewport with the headline instead of owning it.
   Value proposition + CTA are visible at first paint; the flower blooms
   instantly (home-hero.js compact mode) and keeps its idle life + cycling. */
.home-fold { width: min(94vw, 1000px); position: relative; left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 6px 18px;
  text-align: left; margin-top: 4px; }
.fold-copy { z-index: 2; padding: 14px 0 10px 6px; }
.fold-h1 { font-size: clamp(29px, 4.4vw, 44px); line-height: 1.14; font-weight: 750;
  letter-spacing: -.015em; margin: 0 0 12px; color: var(--ink, #eef2fb); }
.fold-h1 .hl { color: #7fb0ff; }
.fold-sub { color: var(--muted, #97a3c2); font-size: 15.5px; line-height: 1.65;
  max-width: 46ch; margin: 0 0 18px; }
.fold-ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---- the orange field (--orange, first application) ----
   Orange is a FIELD colour: it carries the value prop as one filled panel instead of
   appearing as small accents. That forces DARK ink — light text on #f37021 is 2.94 and
   fails AA, navy is 6.04. It's the same reason a luxury box is printed dark-on-orange
   rather than white-on-orange.
   Gold is kept OFF this panel entirely (gold-on-orange = 1.84, invisible); it stays
   outside on the navy with the flower. That role split — orange fills, gold details,
   never touching — is what lets two colours only 22° apart share a view. */
.fold-field { background: var(--orange, #f37021); border-radius: 18px;
  padding: 26px 26px 24px; box-shadow: 0 18px 44px rgba(10, 6, 30, .45); }
.fold-field .fold-h1 { color: #0e1730; }
/* .hl can't be a COLOUR here. Every ink on orange must be dark (cream is 2.94, fails),
   and two dark inks are mutually 1.31 — indistinguishable. So the emphasis becomes a
   cream rule under navy text instead: the word colour stays legible, the highlight is
   carried by decoration rather than hue. */
.fold-field .fold-h1 .hl { color: #0e1730; text-decoration: underline;
  text-decoration-color: rgba(255, 248, 240, .8); text-decoration-thickness: 3px;
  text-underline-offset: 7px; }
.fold-field .fold-sub { color: rgba(14, 23, 48, .82); }  /* 4.80 on orange */
/* the site's blue primary scores 1.58 on orange and would vanish — go dark instead */
.fold-field .btn-primary { background: #0e1730; color: #fff; }
.fold-field .btn-ghost { color: #0e1730; border-color: rgba(14, 23, 48, .38); }
.fold-field .btn-ghost:hover { border-color: rgba(14, 23, 48, .7); }

.fold-copy .search-hero { margin: 18px 0 0; }
.home-hero.compact { min-height: 0; padding: 0; }
.home-hero.compact .hf-wrap { width: min(100%, 430px); }
.home-hero.compact .hf-hint { font-size: 12.5px; }
@media (max-width: 880px) {
  .home-fold { grid-template-columns: 1fr; text-align: center; gap: 0; margin-top: 0; }
  .fold-copy { order: 0; padding: 10px 4px 0; }
  .home-hero.compact { order: 1; }
  .fold-sub { margin-inline: auto; }
  .fold-ctas { justify-content: center; }
  .fold-copy .search-hero { margin: 16px auto 0; }
  .home-hero.compact .hf-wrap { width: min(74%, 330px); }
}

/* ---- proof strip: real screenshots of what's inside, each a doorway ---- */
.home-proof { width: min(94vw, 1000px); position: relative; left: 50%; transform: translateX(-50%);
  margin: 24px 0 2px; }
.home-proof .proof-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr);
  gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.home-proof a { display: block; border-radius: 13px; overflow: hidden; text-decoration: none;
  border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.03);
  transition: transform .16s ease, border-color .16s ease; }
.home-proof a:hover, .home-proof a:focus-visible { transform: translateY(-2px); border-color: rgba(243,200,73,.5); }
.home-proof img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; }
.home-proof .cap { display: block; padding: 8px 11px 9px; font-size: 12.5px; line-height: 1.35;
  color: var(--muted, #97a3c2); text-align: left; }