히어로 섹션

<div class="hero">
  <div class="copy">
    <span class="badge">NEW · v2.0</span>
    <h1>Ship your product<br/>10&times; faster</h1>
    <p>The all-in-one toolkit for teams who move quick.</p>
    <div class="ctas">
      <button class="btn primary">Start free trial</button>
      <button class="btn ghost">Watch demo</button>
    </div>
  </div>
  <div class="visual">
    <span class="blob"></span>
    <div class="card"><i></i><i></i><i></i></div>
  </div>
</div>

.hero{width:min(94%,880px);height:min(90%,300px);display:flex;align-items:center;gap:5%}
.copy{flex:1.35;display:flex;flex-direction:column;gap:clamp(6px,1.5vmin,10px)}
.badge{align-self:flex-start;font-size:clamp(8px,1.3vmin,11px);font-weight:700;letter-spacing:.06em;
  padding:.35em .9em;border-radius:999px;background:color-mix(in oklab,var(--accent) 16%,var(--surface));
  color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 35%,var(--line))}
h1{margin:0;font-size:clamp(15px,4.4vmin,32px);line-height:1.12;font-weight:800;letter-spacing:-.01em}
.copy p{margin:0;font-size:clamp(8px,1.8vmin,13px);color:var(--muted);max-width:32ch}
.ctas{display:flex;gap:clamp(6px,1.2vmin,10px);margin-top:clamp(2px,.6vmin,4px)}
.btn{font-size:clamp(8px,1.5vmin,12px);font-weight:700;padding:.6em 1.2em;border-radius:8px;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px color-mix(in oklab,var(--accent) 40%,transparent)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--fg)}
.visual{flex:1;position:relative;aspect-ratio:4/3;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.blob{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(18px);opacity:.55;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent-3),var(--accent));
  animation:spin 8s linear infinite}
.card{position:relative;width:64%;aspect-ratio:5/3;border-radius:10px;background:var(--bg);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:14%;padding:10%;
  box-shadow:0 10px 24px rgba(0,0,0,.12)}
.card i{display:block;height:14%;border-radius:3px;background:var(--line)}
.card i:nth-child(1){width:60%;background:var(--accent-2)}
.card i:nth-child(2){width:85%}
.card i:nth-child(3){width:40%}
@keyframes spin{to{transform:rotate(360deg)}}