/* Components - Buttons, Cards, Badges, Forms */

/* Button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;
  border-radius:var(--r-md);
  font-size:var(--fs-md);font-weight:var(--fw-semibold);
  letter-spacing:-0.01em;
  transition:transform var(--transition),background var(--transition),box-shadow var(--transition);
  white-space:nowrap;cursor:pointer;border:none;
}
.btn-primary{background:var(--brand-500);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:0 12px 32px rgba(31,122,252,.32)}
.btn-secondary{background:var(--gray-100);color:var(--text)}
.btn-secondary:hover{background:var(--gray-200)}
.btn-outline{background:transparent;color:var(--brand-600);border:1.5px solid var(--brand-200)}
.btn-outline:hover{background:var(--brand-50);border-color:var(--brand-500)}
.btn-ghost{background:transparent;color:var(--text-sub)}
.btn-ghost:hover{background:var(--gray-100);color:var(--text)}
.btn-lg{padding:18px 32px;font-size:var(--fs-lg);border-radius:var(--r-lg)}
.btn-sm{padding:8px 14px;font-size:var(--fs-sm)}
.btn-block{width:100%}

/* Card */
.card{
  background:var(--surface);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--gray-300)}
.card-flat{box-shadow:var(--sh-xs)}
.card-elevated{box-shadow:var(--sh-md);border:none}
.card-pad{padding:24px}
.card-pad-lg{padding:32px}
.card-head{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-head h3{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-0.02em}
.card-body{padding:20px 24px}
.card-link{font-size:var(--fs-sm);color:var(--text-mute);font-weight:var(--fw-medium);transition:color var(--transition)}
.card-link:hover{color:var(--brand-600)}

/* Badge */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  border-radius:var(--r-pill);
  letter-spacing:0;
}
.badge-brand{background:var(--brand-50);color:var(--brand-700)}
.badge-orange{background:#FFF3E8;color:#C04F00}
.badge-mint{background:#E0FAF3;color:#00876A}
.badge-pink{background:#FFEEF4;color:#C24177}
.badge-gray{background:var(--gray-100);color:var(--gray-700)}
.badge-dot::before{content:'';width:6px;height:6px;background:currentColor;border-radius:50%}

/* List */
.list-divided li{padding:14px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.list-divided li:last-child{border-bottom:none}
.list-divided a{color:var(--text);font-size:var(--fs-sm);font-weight:var(--fw-medium);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--transition)}
.list-divided a:hover{color:var(--brand-600)}
.list-divided .meta{color:var(--text-mute);font-size:var(--fs-xs);flex-shrink:0}

/* Featured list (with description) */
.list-featured li{padding:16px 0;border-bottom:1px solid var(--border)}
.list-featured li:last-child{border-bottom:none}
.list-featured a{display:block;color:var(--text);transition:color var(--transition)}
.list-featured a:hover{color:var(--brand-600)}
.list-featured strong{display:block;font-size:var(--fs-md);font-weight:var(--fw-semibold);margin-bottom:6px;letter-spacing:-0.01em}
.list-featured p{font-size:var(--fs-sm);color:var(--text-mute);line-height:var(--lh-snug);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Section */
.section{padding:var(--s-12) 0}
.section-sm{padding:var(--s-9) 0}
.section-head{margin-bottom:var(--s-8);text-align:center}
.section-head .eyebrow{display:inline-block;color:var(--brand-600);font-weight:var(--fw-semibold);font-size:var(--fs-sm);letter-spacing:0.02em;margin-bottom:12px;text-transform:uppercase}
.section-head h2{font-size:var(--fs-4xl);margin-bottom:12px}
.section-head p{font-size:var(--fs-lg);color:var(--text-mute);max-width:640px;margin:0 auto}

/* Stat */
.stat{text-align:center;padding:var(--s-6) var(--s-4)}
.stat-num{font-size:var(--fs-4xl);font-weight:var(--fw-black);color:var(--brand-600);letter-spacing:-0.03em;line-height:1}
.stat-label{font-size:var(--fs-sm);color:var(--text-mute);margin-top:8px;font-weight:var(--fw-medium)}

/* Service icon card */
.service{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:28px;
  background:var(--surface);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  transition:all var(--transition);
}
.service:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand-200)}
.service .icon{width:52px;height:52px;border-radius:var(--r-md);background:var(--brand-50);display:flex;align-items:center;justify-content:center;color:var(--brand-600);transition:background var(--transition),color var(--transition)}
.service:hover .icon{background:var(--brand-500);color:#fff}
.service .icon img{width:28px;height:28px}
.service .icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service h4{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-0.02em}
.service p{font-size:var(--fs-sm);color:var(--text-mute);line-height:var(--lh-snug)}
.service .arrow{margin-top:auto;font-size:var(--fs-sm);color:var(--brand-600);font-weight:var(--fw-semibold);transition:gap var(--transition)}
.service .arrow::after{content:' →';display:inline-block;transition:transform var(--transition)}
.service:hover .arrow::after{transform:translateX(4px)}

/* Quick chip */
.chip{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 8px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--border);
  transition:all var(--transition);
  text-align:center;
  min-width:80px;
}
.chip:hover{border-color:var(--brand-300);background:var(--brand-50);transform:translateY(-2px)}
.chip-icon{width:44px;height:44px;border-radius:var(--r-pill);background:var(--brand-50);display:flex;align-items:center;justify-content:center;color:var(--brand-600);transition:transform .25s cubic-bezier(.2,.8,.2,1),background var(--transition)}
.chip-icon img,.chip-icon svg{width:24px;height:24px;object-fit:contain}
.chip-icon svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip span{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-sub);line-height:1.3}
.chip:hover span{color:var(--brand-700)}

/* Form */
.field{margin-bottom:18px}
.label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin-bottom:8px;color:var(--text)}
.input,.textarea,.select{
  width:100%;
  padding:14px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:var(--fs-md);
  background:var(--surface);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.textarea{min-height:140px;resize:vertical;font-family:inherit;line-height:var(--lh-normal)}

/* Floating quick CTA */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:90;
  display:flex;flex-direction:column;gap:8px;
}
.fab a{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;background:var(--brand-500);color:#fff;
  border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-sm);
  box-shadow:var(--sh-brand);
  transition:all var(--transition);
}
.fab a:hover{background:var(--brand-600);transform:translateY(-2px)}
.fab a.alt{background:var(--gray-900);box-shadow:0 8px 24px rgba(25,31,40,.25)}
.fab a.alt:hover{background:#000}

/* Marquee for partners */
.marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 60px,#000 calc(100% - 60px),transparent);position:relative}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marquee 30s linear infinite;align-items:center}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track img{height:48px;width:auto;opacity:.7;transition:opacity var(--transition)}
.marquee-track:hover{animation-play-state:paused}
.marquee-track img:hover{opacity:1}

/* Hero */
.hero{
  position:relative;overflow:hidden;
  padding:var(--s-12) 0 var(--s-11);
  background:linear-gradient(180deg,var(--brand-50) 0%,var(--bg) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:var(--fs-hero);letter-spacing:-0.03em;margin-bottom:20px;color:var(--gray-900)}
.hero h1 .accent{color:var(--brand-600)}
.hero .lead{font-size:var(--fs-lg);color:var(--text-sub);line-height:var(--lh-relaxed);margin-bottom:32px;max-width:520px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative}
.hero-visual img{border-radius:var(--r-xl);box-shadow:var(--sh-lg);width:100%}
.hero-bullet{display:inline-flex;align-items:center;gap:6px;background:var(--surface);padding:8px 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--brand-700);margin-bottom:20px;border:1px solid var(--brand-100)}
.hero-bullet::before{content:'●';color:var(--brand-500);font-size:8px}

@media(max-width:768px){
  .hero{padding:var(--s-9) 0 var(--s-8)}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero h1{font-size:32px}
  .hero .lead{font-size:var(--fs-md)}
  .fab{right:12px;bottom:12px}
  .fab a{padding:12px 14px;font-size:var(--fs-xs)}
}