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

/*
  Hanhi Landing – UI skin
  Primary colors come from Settings via CSS vars on .hanhi-wrap:
  - --primary
  - --primary2
*/

.hanhi-wrap{
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color: #0f172a;
}

.hanhi-topbar{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.hanhi-brand{
  letter-spacing: -0.015em;
}

.hanhi-hero{
  background:
    radial-gradient(900px circle at 12% 18%, rgba(124,58,237,.16), transparent 48%),
    radial-gradient(800px circle at 88% 10%, rgba(37,99,235,.18), transparent 52%),
    linear-gradient(180deg, #ffffff, #f8fafc 70%, #f1f5f9);
}

.hanhi-pill{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.72);
}

.hanhi-h1{
  letter-spacing: -0.03em;
}

.hanhi-h2, .hanhi-h3{
  letter-spacing: -0.02em;
}

.hanhi-card, .hanhi-proof-card, .hanhi-form{
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.06);
}

.hanhi-btn{
  border-radius: 16px;
}

.hanhi-btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 18px 40px rgba(37,99,235,.22);
}

.hanhi-btn-primary:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.hanhi-btn-ghost{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
}

.hanhi-btn-ghost:hover{
  background: rgba(255,255,255,.92);
}

.hanhi-badges .hanhi-badge{
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.66);
}

.hanhi-product{
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 16px 40px rgba(2,6,23,.06);
}

.hanhi-product:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(2,6,23,.10);
}

.hanhi-sticky{
  border-top: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
}

.hanhi-sticky-item{
  border-radius: 999px;
}

.hanhi-sticky-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
}

.hanhi-float-btn{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
}

.hanhi-float-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border-color: transparent;
}

.hanhi-proof-card a{
  text-decoration: none;
}

.hanhi-proof-card a:hover{
  text-decoration: underline;
}

/* Keep mobile header clean */
@media (max-width: 920px){
  .hanhi-topcta .hanhi-btn{ padding: 10px 12px; }
  .hanhi-topcta .hanhi-btn-text{ display:none; }
  .hanhi-topcta .hanhi-btn{ border-radius: 14px; }
}