.hero-intro{padding:clamp(28px,3.2vw,48px);border-radius:16px}
.hero-intro__top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.hero-intro__eyebrow{color:var(--muted);font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hero-intro .tech-text-toggle{position:static;flex:none;width:32px;height:32px;font-size:12px}
.hero-intro .headline{font-size:clamp(52px,5.8vw,104px);line-height:1.08;letter-spacing:-.05em}
.hero-intro .sub{margin:20px 0 0;font-size:16px;line-height:1.6;color:color-mix(in srgb,var(--text) 70%,var(--bg))}
.hero-intro .actions{align-items:center;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.hero-intro .btn-p,.hero-intro .btn-g{justify-content:center;min-height:48px;font:600 13px/1.2 var(--sans);letter-spacing:-.015em;text-transform:none}
.hero-intro .btn-p{gap:24px;padding:0 18px;border-radius:4px}
.hero-intro .btn-p span{font-size:17px;font-weight:400}
.hero-intro .btn-g{position:relative;gap:8px;padding:0;border:0;background:transparent}
.hero-intro .btn-g::after{position:absolute;top:calc(50% + 12px);right:0;left:0;height:1px;background:currentColor;content:'';opacity:0;pointer-events:none}
.hero-intro .btn-g:is(:hover,:focus-visible)::after{opacity:1}
.hero-intro .btn-g:hover{background:transparent;color:var(--text);text-decoration:none;transform:none}
.hero-intro .actions a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:820px){
  .hero-intro{max-width:600px;padding:32px}
  .hero-intro .headline{font-size:clamp(40px,10vw,88px)}
}
@media(max-width:620px){
  .hero-intro{padding:24px}
  .hero-intro__top{margin-bottom:22px}
  .hero-intro .tech-text-toggle{width:44px;height:44px;margin:-6px -6px -6px 0}
  .hero-intro .headline{font-size:clamp(40px,11.5vw,64px)}
  .hero-intro .sub{margin-top:16px;font-size:15px}
  .hero-intro .actions{gap:20px;margin-top:28px;padding-top:22px}
  .hero-intro .actions .btn-p,.hero-intro .actions .btn-g{flex:none}
  .hero-intro .actions .btn-p{padding-inline:16px}
  .hero-intro .actions .btn-g{padding:0}
}
@media(max-width:359px){
  .hero-intro{padding:20px}
  .hero-intro .actions{flex-direction:column;align-items:stretch;gap:4px}
  .hero-intro .actions .btn-p{width:100%;justify-content:space-between}
  .hero-intro .actions .btn-g{align-self:flex-start;min-height:44px}
  .hero-intro .btn-p,.hero-intro .btn-g{font-size:12px}
  .hero-intro .btn-p{gap:12px}
}