@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
  --hai-page:         #FAFAF9;
  --hai-ink:          #0A0A0A;
  --hai-ink-muted:    rgba(10,10,10,0.6);
  --hai-ink-faint:    rgba(10,10,10,0.4);
  --hai-primary:      #5883E7;
  --hai-primary-a:    #4A6FD6;
  --hai-dark:         #0A0A0A;
  --hai-surface-soft: #F0F0EE;
  --hai-border:       rgba(0,0,0,0.08);
  --hai-surface-card: #FFFFFF;
  --hai-gradient-text: linear-gradient(135deg,#3399FE 0%,#4A6FD6 20%,#8200C4 40%,#A91797 60%,#E96139 80%,#FB8D1E 100%);
  --expo-out: cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  background:var(--hai-page);
  color:var(--hai-ink);
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--hai-primary);color:#FAFAF9}

.gradient-text{
  background:var(--hai-gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--expo-out),transform .7s var(--expo-out);
}
.reveal.visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Shared eyebrow label */
.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hai-primary);
  margin-bottom: 12px;
}

/* Shared button styles */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: var(--hai-primary);
  color: #fff;
  border-radius: 10px;
  font: 700 1rem 'Figtree', sans-serif;
  text-decoration: none;
  transition: background .2s, transform .2s;
  box-shadow: 0 4px 18px rgba(88,131,231,.25);
}
.btn-primary:hover { background: var(--hai-primary-a); transform: translateY(-1px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: transparent;
  color: var(--hai-primary);
  border-radius: 10px;
  font: 600 .95rem 'Figtree', sans-serif;
  text-decoration: none;
  border: 1.5px solid var(--hai-primary);
  transition: background .2s;
}
.btn-outline:hover { background: rgba(88,131,231,.06); }