.hero-section {
  --hs-spacing: .25rem;
  --hs-color-primary: #1e3a5f;
  --hs-color-white: #fff;
  --hs-color-slate-100: #f1f5f9;
  --hs-color-green-400: oklch(79.2% .209 151.711);
  --hs-text-xs: .75rem;
  --hs-text-sm: .875rem;
  --hs-text-base: 1rem;
  --hs-text-lg: 1.125rem;
  --hs-text-2xl: 1.5rem;
  --hs-text-3xl: 1.875rem;
  --hs-text-4xl: 2.25rem;
  --hs-text-5xl: 3rem;
  --hs-text-6xl: 3.75rem;
  --hs-radius-lg: .75rem;
  --hs-radius-xl: 1rem;
  --hs-blur-sm: 8px;
}

/* Layout */
.hero-section .hs-relative     { position: relative }
.hero-section .hs-mx-auto      { margin-inline: auto }
.hero-section .hs-max-w-7xl    { max-width: 80rem }
.hero-section .hs-max-w-3xl    { max-width: 48rem }
.hero-section .hs-max-w-2xl    { max-width: 42rem }

/* Display */
.hero-section .hs-inline-block { display: inline-block }
.hero-section .hs-inline-flex  { display: inline-flex }
.hero-section .hs-flex         { display: flex }
.hero-section .hs-grid         { display: grid }

/* Sizing */
.hero-section .hs-h-2 { height: calc(var(--hs-spacing) * 2) }
.hero-section .hs-h-4 { height: calc(var(--hs-spacing) * 4) }
.hero-section .hs-w-2 { width: calc(var(--hs-spacing) * 2) }
.hero-section .hs-w-4 { width: calc(var(--hs-spacing) * 4) }

/* Margin */
.hero-section .hs-mt-1  { margin-top: calc(var(--hs-spacing) * 1) }
.hero-section .hs-mt-6  { margin-top: calc(var(--hs-spacing) * 6) }
.hero-section .hs-mt-10 { margin-top: calc(var(--hs-spacing) * 10) }
.hero-section .hs-mt-16 { margin-top: calc(var(--hs-spacing) * 16) }
.hero-section .hs-mb-6  { margin-bottom: calc(var(--hs-spacing) * 6) }

/* Padding */
.hero-section .hs-px-4   { padding-inline: calc(var(--hs-spacing) * 4) }
.hero-section .hs-px-6   { padding-inline: calc(var(--hs-spacing) * 6) }
.hero-section .hs-py-1-5 { padding-block: calc(var(--hs-spacing) * 1.5) }
.hero-section .hs-py-3   { padding-block: calc(var(--hs-spacing) * 3) }
.hero-section .hs-py-24  { padding-block: calc(var(--hs-spacing) * 24) }
.hero-section .hs-p-6    { padding: calc(var(--hs-spacing) * 6) }

/* Flexbox & Grid */
.hero-section .hs-flex-col      { flex-direction: column }
.hero-section .hs-items-center  { align-items: center }
.hero-section .hs-justify-center { justify-content: center }
.hero-section .hs-gap-2         { gap: calc(var(--hs-spacing) * 2) }
.hero-section .hs-gap-4         { gap: calc(var(--hs-spacing) * 4) }
.hero-section .hs-grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)) }

/* Border & Radius */
.hero-section .hs-rounded-full { border-radius: 9999px }
.hero-section .hs-rounded-lg   { border-radius: var(--hs-radius-lg) }
.hero-section .hs-rounded-xl   { border-radius: var(--hs-radius-xl) }
.hero-section .hs-border       { border-style: solid; border-width: 1px }
.hero-section .hs-border-white-10 { border-color: rgba(255,255,255,.10) }
.hero-section .hs-border-white-20 { border-color: rgba(255,255,255,.20) }
.hero-section .hs-border-white-30 { border-color: rgba(255,255,255,.30) }

/* Background */
.hero-section .hs-bg-green-400 { background-color: var(--hs-color-green-400) }
.hero-section .hs-bg-white     { background-color: var(--hs-color-white) }
.hero-section .hs-bg-white-5   { background-color: rgba(255,255,255,.05) }
.hero-section .hs-bg-white-10  { background-color: rgba(255,255,255,.10) }

/* Typography */
.hero-section .hs-text-center { text-align: center }
.hero-section .hs-text-xs   { font-size: var(--hs-text-xs);   line-height: calc(1/.75) }
.hero-section .hs-text-sm   { font-size: var(--hs-text-sm);   line-height: calc(1.25/.875) }
.hero-section .hs-text-base { font-size: var(--hs-text-base);  line-height: 1.5 }
.hero-section .hs-text-2xl  { font-size: var(--hs-text-2xl);  line-height: calc(2/1.5) }
.hero-section .hs-text-3xl  { font-size: var(--hs-text-3xl);  line-height: 1.2 }
.hero-section .hs-font-bold      { font-weight: 700 }
.hero-section .hs-font-extrabold { font-weight: 800 }
.hero-section .hs-font-semibold  { font-weight: 600 }
.hero-section .hs-tracking-tight { letter-spacing: -.025em }
.hero-section .hs-leading-tight   { line-height: 1.25 }
.hero-section .hs-leading-relaxed { line-height: 1.625 }
.hero-section .hs-text-white    { color: var(--hs-color-white) }
.hero-section .hs-text-white-70 { color: rgba(255,255,255,.70) }
.hero-section .hs-text-white-85 { color: rgba(255,255,255,.85) }
.hero-section .hs-text-primary  { color: var(--hs-color-primary) }

/* Effects */
.hero-section .hs-shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
}
.hero-section .hs-backdrop-blur-sm {
  -webkit-backdrop-filter: blur(var(--hs-blur-sm));
  backdrop-filter: blur(var(--hs-blur-sm));
}
.hero-section .hs-transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

/* Animation */
.hero-section .hs-animate-pulse {
  animation: hs-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes hs-pulse { 50% { opacity: .5 } }

/* Hover */
@media (hover: hover) {
  .hero-section .hover-hs-bg-slate-100:hover { background-color: var(--hs-color-slate-100) }
  .hero-section .hover-hs-bg-white-10:hover  { background-color: rgba(255,255,255,.10) }
}

/* sm ≥640px */
@media (min-width: 40rem) {
  .hero-section .sm-hs-px-6        { padding-inline: calc(var(--hs-spacing) * 6) }
  .hero-section .sm-hs-py-32       { padding-block: calc(var(--hs-spacing) * 32) }
  .hero-section .sm-hs-flex-row    { flex-direction: row }
  .hero-section .sm-hs-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .hero-section .sm-hs-text-sm     { font-size: var(--hs-text-sm);  line-height: calc(1.25/.875) }
  .hero-section .sm-hs-text-lg     { font-size: var(--hs-text-lg);  line-height: calc(1.75/1.125) }
  .hero-section .sm-hs-text-3xl    { font-size: var(--hs-text-3xl); line-height: 1.2 }
  .hero-section .sm-hs-text-4xl    { font-size: var(--hs-text-4xl); line-height: calc(2.5/2.25) }
}

/* md ≥768px */
@media (min-width: 48rem) {
  .hero-section .md-hs-text-5xl { font-size: var(--hs-text-5xl); line-height: 1 }
}

/* lg ≥1024px */
@media (min-width: 64rem) {
  .hero-section .lg-hs-px-8    { padding-inline: calc(var(--hs-spacing) * 8) }
  .hero-section .lg-hs-py-40   { padding-block: calc(var(--hs-spacing) * 40) }
  .hero-section .lg-hs-text-6xl { font-size: var(--hs-text-6xl); line-height: 1 }
}