/* SECTION: hero — single immersive "main frame":
   live 3D VRM Robi center-stage, floating top island (brand + nav),
   chat dock at the bottom (VN-style intro dialog + real AI input),
   side hint cards that slide in during the intro. */

.sec-hero { padding-block: 0; }

.sec-hero .hero-wrap {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
.sec-hero .hero-stage {
  position: relative;
  /* full-bleed frame: fills the viewport under the nav (56px) */
  height: max(calc(100vh - 56px), 560px);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-card);
}

/* ---------- layers: backdrop 0 / aurora video 0 / vignette 1 / fallback 1 / billboard 2 / 3D 3 ---------- */
.sec-hero .hero-backdrop {
  position: absolute; inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 130% 95% at 50% 40%, #101a1d, #070b0c 80%);
}
/* looping 4K aurora hall — the room Robi actually stands in */
.sec-hero .hero-video {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  opacity: 0;
  animation: hero-video-in 1.2s var(--ease-glide) 0.15s forwards;
}
@keyframes hero-video-in { to { opacity: 1; } }
/* keeps the chat + billboard readable over the bright aurora */
.sec-hero .hero-vignette {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7, 11, 12, 0.72) 0%, rgba(7, 11, 12, 0) 26%),
    linear-gradient(to top, rgba(7, 11, 12, 0.82) 0%, rgba(7, 11, 12, 0.25) 22%, rgba(7, 11, 12, 0) 42%),
    radial-gradient(ellipse 78% 62% at 50% 46%, transparent 40%, rgba(7, 11, 12, 0.5) 100%);
}
/* ---------- boot curtain (while the VRM streams) ----------
   Black over everything, one lime bar, nothing else. Starts at opacity 0 and is
   switched on by hero3d.js: if the script never runs (no WebGL, a module error,
   JS off) the curtain simply never appears and the aurora shows · a curtain that
   defaulted to visible would strand those visitors on a black hero forever. */
.sec-hero .hero-boot {
  position: absolute; inset: 0;
  z-index: 4;                       /* above the VRM canvas, below the island */
  display: grid;
  place-items: center;
  background: #07090A;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-glide);
}
.sec-hero .hero-vrm-loading .hero-boot { opacity: 1; }
/* both endings lift it: ready reveals Robi, failed reveals the empty hall */
.sec-hero .hero-vrm-ready .hero-boot,
.sec-hero .hero-vrm-failed .hero-boot { opacity: 0; }

/* The drifting scanline also sits at z-index 4 and painted a lime band straight
   across the curtain · black plus one bar means exactly that, so it stays off
   until the curtain lifts. Its lime sweep on ready is untouched. */
.sec-hero .hero-vrm-loading .hero-scan { opacity: 0; }
.sec-hero .hero-vrm-loading .hero-boot { z-index: 5; }

.sec-hero .hero-boot-bar {
  width: min(210px, 42vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}

.sec-hero .hero-boot-fill {
  display: block;
  height: 100%;
  width: calc(var(--vrm-p, 0) * 100%);   /* --vrm-p is set from ev.loaded/ev.total */
  background: var(--accent);
  border-radius: 2px;
  /* eases the jumps between chunk callbacks · the bytes arrive in bursts */
  transition: width 0.25s var(--ease-glide);
}

@media (prefers-reduced-motion: reduce) {
  .sec-hero .hero-boot,
  .sec-hero .hero-boot-fill { transition: none; }
}
.sec-hero .hero-vrm {
  position: absolute; inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-glide);
  /* lift Robi so the chat dock never covers the hoodie logo */
  transform: translateY(-3.5%);
}
.sec-hero .hero-vrm-ready .hero-vrm { opacity: 1; }
.sec-hero .hero-vrm-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* Lite hero (phones, Save-Data, no WebGL): js/sections/hero.js skips the 17 MB
   model and drops this still of her into the same layer. It was captured from
   the live canvas, whose camera frames her by HEIGHT on every viewport, so
   fitting the still to the stage height and centring it reproduces the live
   framing exactly; narrow stages crop her shoulders the same way the canvas does. */
.sec-hero .hero-vrm-still {
  position: absolute; left: 50%; bottom: 0;
  height: 100%; width: auto; max-width: none;
  transform: translateX(-50%);
  display: block;
  user-select: none;
}

/* ---------- boot FX: scanline while streaming, lime sweep on go-live ---------- */
.sec-hero .hero-scan {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
/* drifting scanline: reads as "she is being streamed in" over the static art */
.sec-hero .hero-scan::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 16%;
  background: linear-gradient(to bottom,
    transparent,
    rgba(52, 183, 221, 0.05) 55%,
    rgba(52, 183, 221, 0.16) 90%,
    rgba(230, 255, 120, 0.75) 99.4%,
    transparent 100%);
  box-shadow: 0 2px 16px rgba(52, 183, 221, 0.28);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sec-hero .hero-vrm-loading .hero-scan::before {
  opacity: 1;
  animation: heroScanDrift 3.4s linear infinite;
}
@keyframes heroScanDrift {
  from { transform: translateY(-110%); }
  to   { transform: translateY(740%); }
}
/* kill the drifting bar instantly on ready/fail (its transform resets with the
   animation, so a soft fade would flash it at the top of the frame) */
.sec-hero .hero-vrm-ready .hero-scan::before,
.sec-hero .hero-vrm-failed .hero-scan::before { transition: none; opacity: 0; }
/* one-shot materialize bar: rides the reveal edge (sibling of .hero-vrm so the
   clip-path below can't cut it) */
.sec-hero .hero-scan::after {
  content: "";
  position: absolute; left: 5%; right: 5%; top: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(52, 183, 221, 0.9), transparent);
  box-shadow: 0 0 22px rgba(52, 183, 221, 0.5), 0 0 60px rgba(52, 183, 221, 0.25);
  opacity: 0;
}
.sec-hero .hero-vrm-ready .hero-scan::after {
  animation: heroMaterializeBar 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes heroMaterializeBar {
  0%   { top: 100%; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: -1%; opacity: 0; }
}
/* live VRM materializes bottom→top in sync with the bar + crossfade */
.sec-hero .hero-vrm-ready .hero-vrm {
  animation: heroMaterialize 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes heroMaterialize {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---------- contest billboard (peeks out around Robi) ---------- */
.sec-hero .hero-billboard {
  position: absolute;
  top: 84px; left: 0; right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease-glide);
}
.sec-hero .hero-vrm-ready .hero-billboard { opacity: 1; }
.sec-hero .hero-bb-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
}
.sec-hero .hero-bb-group { display: inline-flex; align-items: baseline; gap: 1px; }
.sec-hero .hero-bb-num { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.sec-hero .hero-bb-unit { color: var(--accent); font-size: 12px; font-weight: 500; }
.sec-hero .hero-bb-sep { color: var(--text-faint); font-weight: 200; font-size: 13px; }
.sec-hero .hero-bb-kicker {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.sec-hero .hero-bb-prize {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  color: var(--accent);
  margin-top: -4px;
}
.sec-hero .hero-bb-prize-num {
  font-family: var(--font-display);
  font-size: clamp(52px, 7.5vw, 100px);
  font-weight: 700;
  letter-spacing: var(--ls-display, -0.04em);
  line-height: 1;
  text-shadow: 0 0 44px rgba(52, 183, 221, 0.28);
}
.sec-hero .hero-bb-laurel {
  height: clamp(34px, 6vw, 48px);
  width: auto;
  flex: none;
  color: var(--accent);
}
.sec-hero .hero-bb-laurel-r { transform: scaleX(-1); }

/* ---------- floating terminal chips ---------- */
.sec-hero .hero-chip {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-overlay-glass);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  animation: hero-chip-bob 5s ease-in-out infinite;
}
.sec-hero .hero-chip-1 { top: 84px; left: 20px; }
.sec-hero .hero-chip-2 { top: 84px; right: 20px; animation-delay: 2.2s; }
.sec-hero .hero-chip-up { color: var(--accent); }
.sec-hero .hero-chip-down { color: var(--red-down); }
@keyframes hero-chip-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ---------- top island ---------- */
.sec-hero .hero-island {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(100% - 32px);
  padding: 8px 8px 8px 16px;
  background: linear-gradient(180deg, rgba(24, 32, 34, 0.38), rgba(9, 13, 14, 0.46));
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  backdrop-filter: blur(34px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.sec-hero .hero-island-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.sec-hero .hero-island-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(52, 183, 221, 0.8);
  animation: hero-island-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-island-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.sec-hero .hero-island-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin: 0;
}
.sec-hero .hero-island-title span { color: var(--text-faint); font-weight: 500; }
.sec-hero .hero-island-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sec-hero .hero-island-nav .btn { padding: 8px 14px; font-size: 13px; }

/* ---------- side hint cards ---------- */
.sec-hero .hero-hint {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 248px;
  padding: 12px 14px 14px;
  background: var(--bg-overlay-glass);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med, 0.3s) var(--ease-pop),
              transform var(--dur-med, 0.3s) var(--ease-pop),
              visibility 0s linear 0.3s;
}
.sec-hero .hero-hint-left { left: 20px; transform: translate(-14px, -50%); }
.sec-hero .hero-hint-right { right: 20px; transform: translate(14px, -50%); }
.sec-hero .hero-hint.hero-hint-in {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity var(--dur-med, 0.3s) var(--ease-pop),
              transform var(--dur-med, 0.3s) var(--ease-pop);
}
.sec-hero .hero-hint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sec-hero .hero-hint-k {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.sec-hero .hero-hint-x {
  font-size: 10px;
  line-height: 1;
  padding: 4px;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease-ui);
}
.sec-hero .hero-hint-x:hover { color: var(--text-primary); }
.sec-hero .hero-hint-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 8px;
  margin-inline: -8px;
  border-radius: var(--radius-sm);
}
.sec-hero .hero-hint-link { text-decoration: none; transition: background-color var(--dur-fast) var(--ease-ui); }
.sec-hero .hero-hint-link:hover { background: rgba(255, 255, 255, 0.06); }
.sec-hero .hero-hint-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sec-hero .hero-hint-desc { font-size: 12px; color: var(--text-faint); }

/* ---------- chat dock: one frosted glass composer ---------- */
.sec-hero .hero-chat {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: min(1080px, calc(100% - 48px));
}
.sec-hero .hero-glass {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 18px 9px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(24, 32, 34, 0.38), rgba(9, 13, 14, 0.46));
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  backdrop-filter: blur(34px) saturate(170%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.sec-hero .hero-dialog {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 2px 0;
}
.sec-hero .hero-dialog-tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #0A0C0D;
  background: var(--accent);
  border-radius: var(--radius-badge);
  padding: 3px 7px;
  margin-top: 1px;
}
.sec-hero .hero-dialog-tag.hero-tag-you { color: var(--text-secondary); background: rgba(255, 255, 255, 0.1); }
.sec-hero .hero-dialog-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  min-height: 22px;
}
.sec-hero .hero-dialog-text .tw-caret { margin-left: 1px; }
.sec-hero .hero-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sec-hero .hero-sug {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  transition: color var(--dur-fast) var(--ease-ui),
              border-color var(--dur-fast) var(--ease-ui),
              background-color var(--dur-fast) var(--ease-ui);
}
.sec-hero .hero-sug:hover {
  color: #0A0C0D;
  background: var(--accent);
  border-color: var(--accent);
}
.sec-hero .hero-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  transition: border-color var(--dur-fast) var(--ease-ui), background-color var(--dur-fast) var(--ease-ui);
}
.sec-hero .hero-input:focus-within {
  border-color: rgba(52, 183, 221, 0.5);
  background: rgba(0, 0, 0, 0.36);
}
.sec-hero .hero-input-field {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-ui, Inter, sans-serif);
  font-size: 15px;
  color: var(--text-primary);
  padding: 10px 0;
}
.sec-hero .hero-input-field::placeholder { color: var(--text-faint); }
.sec-hero .hero-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: #0A0C0D;
  background: var(--accent);
  box-shadow: 0 0 22px rgba(52, 183, 221, 0.35);
  transition: transform var(--dur-med) var(--ease-pop), opacity var(--dur-fast) var(--ease-ui);
}
.sec-hero .hero-send:hover { transform: scale(1.06); }
.sec-hero .hero-send:disabled { opacity: 0.4; transform: none; box-shadow: none; }
.sec-hero .hero-model-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  padding-left: 4px;
}
.sec-hero .hero-model-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
/* tiny progress ring: replaces the dot while the VRM streams (fill driven by
   --vrm-p, set on .hero-stage from the loader's real progress) */
.sec-hero .hero-model-ring {
  display: none;
  width: 12px; height: 12px;
  flex: none;
  transform: rotate(-90deg);
}
.sec-hero .hero-model-ring circle { fill: none; stroke-width: 2; }
.sec-hero .hero-model-ring-track { stroke: rgba(52, 183, 221, 0.18); }
.sec-hero .hero-model-ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 31.42;
  stroke-dashoffset: calc(31.42 * (1 - var(--vrm-p, 0)));
  transition: stroke-dashoffset 0.25s linear;
}
.sec-hero .hero-vrm-loading .hero-model-ring { display: block; }
.sec-hero .hero-vrm-loading .hero-model-dot { display: none; }
.sec-hero .hero-model-sep { opacity: 0.5; }
.sec-hero .hero-model-mcp {
  margin-left: auto;
  color: var(--text-faint);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-ui);
}
.sec-hero .hero-model-mcp:hover { color: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .sec-hero .hero-hint { width: 216px; }
  .sec-hero .hero-chip { display: none; }
}

@media (max-width: 860px) {
  .sec-hero .hero-hint { display: none; }
  .sec-hero .hero-island-title span { display: none; }
}

@media (max-width: 760px) {
  .sec-hero .hero-stage { height: max(calc(100dvh - 56px), 480px); }
  .sec-hero .hero-billboard { top: 72px; gap: 6px; }
  .sec-hero .hero-bb-kicker { font-size: 15px; }
  .sec-hero .hero-bb-count { font-size: 12px; }
  .sec-hero .hero-island {
    top: 10px;
    gap: 10px;
    padding: 6px 6px 6px 12px;
    width: calc(100% - 20px);
    justify-content: space-between;
  }
  .sec-hero .hero-island-title { font-size: 12px; }
  .sec-hero .hero-island-nav .btn { padding: 7px 10px; font-size: 12px; }
  .sec-hero .hero-island-nav .btn-dark { display: none; }
  .sec-hero .hero-chat { bottom: 10px; width: calc(100% - 20px); }
  .sec-hero .hero-dialog-text { font-size: 13px; min-height: 38px; }
  .sec-hero .hero-model-line { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sec-hero .hero-chip,
  .sec-hero .hero-island-dot { animation: none; }
  .sec-hero .hero-vrm,
  .sec-hero .hero-billboard,
  .sec-hero .hero-hint { transition: none; }
  .sec-hero .hero-scan::before,
  .sec-hero .hero-scan::after,
  .sec-hero .hero-vrm-ready .hero-vrm { animation: none; }
}

/* ---------- $ROBI contract pill (under the island) ----------
   Ships [hidden]: no trace of it until admin saves a contract address
   (Tokenomics -> "ca") · then js/cms/token-block.js reveals it. */
.sec-hero .hero-ca {
  position: absolute;
  top: 76px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  max-width: calc(100% - 32px);
  background: linear-gradient(180deg, rgba(24, 32, 34, 0.38), rgba(9, 13, 14, 0.46));
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  backdrop-filter: blur(34px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-ui), transform var(--dur-fast) var(--ease-pop);
}
.sec-hero .hero-ca:hover { border-color: rgba(52, 183, 221, 0.55); transform: translateX(-50%) scale(1.03); }
.sec-hero .hero-ca:active { transform: translateX(-50%) scale(0.98); }
.sec-hero .hero-ca[hidden] { display: none; }
.sec-hero .hero-ca-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(52, 183, 221, 0.8);
  animation: hero-island-pulse 2.4s ease-in-out infinite;
}
.sec-hero .hero-ca-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  white-space: nowrap;
}
.sec-hero .hero-ca-val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sec-hero .hero-ca-copy { width: 13px; height: 13px; color: var(--text-faint); flex: none; }
.sec-hero .hero-ca:hover .hero-ca-copy { color: var(--accent); }
@media (max-width: 560px) {
  .sec-hero .hero-ca { top: 70px; }
  .sec-hero .hero-ca-tag { display: none; }
}

/* Palette adaptation affects the aurora only, never character skin or artwork. */
.sec-hero .hero-video { filter: hue-rotate(74deg) saturate(.7); }

/* Match the deployed Robi island at desktop despite the shorter brand name.
   Measured on the same browser at 1280px: 538.4296875 x 54 CSS pixels. */
@media (min-width: 861px) {
  .sec-hero .hero-island { width: 538.43px; justify-content: space-between; }
}