/* Hero section styles. */

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
    align-items: center;
}

.hero__eyebrow {
    /* Fix #1: The extracted design placed trust markers as a comma-separated string
       with weird gaps. This container is display:block so the eyebrow never breaks
       across lines with awkward padding. */
    display: block;
    white-space: normal;
    word-spacing: normal;
}

.hero__ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* Trust markers — flex row with reliable gaps. This was the source of feedback #1. */
.hero__trust {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.hero__visual {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero__glow {
    position: absolute;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 160, 74, .20), rgba(212, 160, 74, 0) 68%);
}
.hero__logo {
    position: relative;
    width: min(430px, 88%);
    height: auto;
    filter: drop-shadow(0 20px 44px rgba(27, 42, 78, .16));
}

.hero__shape {
    position: absolute;
    display: block;
}
.hero__shape--1 { top: 6%;    inset-inline-start: 5%;  width: 16px; height: 16px; background: var(--c-gold); border-radius: 4px;  transform: rotate(45deg); animation: ahFloat  6s   ease-in-out infinite; }
.hero__shape--2 { bottom: 11%; inset-inline-end: 7%;    width: 11px; height: 11px; background: var(--c-navy); border-radius: 3px;  transform: rotate(45deg); animation: ahFloat2 7.5s ease-in-out infinite; }
.hero__shape--3 { top: 20%;    inset-inline-end: 11%;   width: 9px;  height: 9px;  background: var(--c-gold); border-radius: 50%;                             animation: ahFloat3 5s   ease-in-out infinite; }
.hero__shape--4 { bottom: 24%; inset-inline-start: 9%;  width: 8px;  height: 8px;  background: var(--c-navy); border-radius: 50%;                             animation: ahFloat3 6.5s ease-in-out infinite; }

@keyframes ahFloat  { 0%, 100% { transform: translateY(0)    rotate(45deg); } 50% { transform: translateY(-14px) rotate(53deg); } }
@keyframes ahFloat2 { 0%, 100% { transform: translateY(0)    rotate(45deg); } 50% { transform: translateY(12px)  rotate(37deg); } }
@keyframes ahFloat3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 880px) {
    .hero__grid    { grid-template-columns: 1fr; gap: 36px; }
    .hero__visual  { order: -1; min-height: 300px; }
    .hero__logo    { width: min(300px, 70%); }
}