.section { position: relative; padding: 168px var(--gutter) 104px; overflow: hidden; } .glow { position: absolute; top: -240px; left: 50%; transform: translateX(-50%); width: 900px; height: 560px; background: radial-gradient( ellipse at center, rgba(233, 165, 44, 0.09) 0%, rgba(233, 165, 44, 0.03) 45%, transparent 70% ); pointer-events: none; } .grid { position: relative; max-width: var(--container-wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 9fr); gap: 64px; align-items: center; } .copy { max-width: 560px; } .headline { font-size: var(--text-display); font-weight: 800; line-height: 1.05; color: var(--hive-50); margin-bottom: 24px; } .headlineEmphasis { color: var(--honey-400); } .subhead { font-size: var(--text-lead); line-height: 1.6; color: var(--hive-300); margin-bottom: 36px; max-width: 34em; } .ctaRow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 28px; } .microcopy { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; row-gap: 8px; font-family: var(--mono); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.02em; } .microItem { display: inline-flex; align-items: center; gap: 8px; } .microDot { width: 4px; height: 4px; border-radius: 50%; background: var(--honey-500); display: inline-block; } .visual { display: flex; align-items: center; justify-content: center; min-width: 0; } @media (max-width: 1023px) { .section { padding-top: 136px; padding-bottom: 80px; } .grid { grid-template-columns: 1fr; gap: 56px; } .copy { max-width: 640px; } } /* Round-7: one benchmark strip in the hero's dead bottom quarter. Wave R Lane E: the 86.49% number is lifted to a flagship stat chip (larger mono, honey-wash lozenge) so the leaderboard claim carries weight near the CTAs; the rest stays quiet supporting mono copy. */ .proofStrip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; max-width: 40em; color: var(--honey-500); text-decoration: none; } .proofStat { flex-shrink: 0; display: inline-flex; align-items: baseline; padding: 6px 12px; border-radius: 10px; background: var(--honey-wash); border: 1px solid var(--honey-line); font-family: var(--mono); font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--honey-400); transition: border-color 0.15s ease, background 0.15s ease; } .proofLabel { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.02em; line-height: 1.5; color: var(--text-muted); } .proofStrip:hover .proofStat { border-color: var(--honey-500); background: rgba(233, 165, 44, 0.16); } .proofStrip:hover .proofLabel { color: var(--hive-300); }