@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root{
  --hm-bg: #f6f8ff;
  --hm-card: #ffffff;
  --hm-text: #0b1020;
  --hm-muted: rgba(11,16,32,.64);
  --hm-border: rgba(15,23,42,.10);

  --hm-blue: #2f6bff;
  --hm-indigo: #6a5cff;
  --hm-cyan: #16c6ff;
  --hm-green: #3beaa6;
  --hm-pink: #ff4fd8;
  --hm-orange: #ff9a3b;

  --hm-radius: 18px;
  --hm-shadow: 0 18px 60px rgba(18, 34, 88, .10);
  --hm-shadow2: 0 10px 30px rgba(18, 34, 88, .08);
}

.hm-body{
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--hm-text);
  background: var(--hm-bg);
}

.hm-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Topbar */
.hm-topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246,248,255,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hm-border);
}

.hm-topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 16px;
}

.hm-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--hm-text);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hm-brand-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--hm-cyan), var(--hm-indigo));
  box-shadow: 0 10px 25px rgba(47,107,255,.22);
}

.hm-brand-name{ font-size: 18px; }
.hm-brand-tld{ font-size: 18px; opacity: .55; margin-left: 2px; }

.hm-nav{
  display: flex;
  gap: 18px;
  align-items: center;
}

.hm-nav a{
  text-decoration: none;
  color: rgba(11,16,32,.75);
  font-weight: 600;
  font-size: 14px;
}

.hm-nav a:hover{ color: rgba(11,16,32,1); }

/* Buttons */
.hm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}

.hm-btn-sm{ padding: 10px 14px; font-size: 13px; }

.hm-btn-primary{
  color: #fff;
  background: linear-gradient(135deg, var(--hm-blue), var(--hm-indigo));
  box-shadow: 0 16px 40px rgba(47,107,255,.22);
}

.hm-btn-primary:hover{ filter: brightness(1.02); }

.hm-btn-outline{
  color: var(--hm-text);
  background: rgba(255,255,255,.75);
  border-color: var(--hm-border);
}

.hm-btn-outline:hover{ background: #fff; }

.hm-btn-soft{
  color: var(--hm-text);
  background: rgba(255,255,255,.70);
  border-color: var(--hm-border);
}

.hm-btn-soft:hover{ background: #fff; }

.hm-btn-dark{
  color: #fff;
  background: rgba(11,16,32,1);
  box-shadow: 0 16px 40px rgba(11,16,32,.18);
}

.hm-btn-dark:hover{ filter: brightness(1.04); }

/* Hero */
.hm-hero{
  position: relative;
  overflow: hidden;
  padding: 44px 0 28px;
}

.hm-hero-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 460px at 18% 18%, rgba(106,92,255,.18), transparent 55%),
    radial-gradient(900px 420px at 82% 22%, rgba(22,198,255,.16), transparent 55%),
    radial-gradient(900px 520px at 60% 78%, rgba(59,234,166,.12), transparent 60%),
    linear-gradient(180deg, rgba(246,248,255,1), rgba(246,248,255,0));
  pointer-events: none;
}

.hm-hero-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: start;
}

.hm-chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hm-chip{
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid var(--hm-border);
}

.hm-h1{
  margin: 0;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hm-lead{
  margin: 14px 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--hm-muted);
  max-width: 560px;
}

.hm-search{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 18px 0 18px;
}

.hm-search-input{
  width: 100%;
  height: 50px;
  border-radius: 999px;
  border: 1px solid var(--hm-border);
  background: rgba(255,255,255,.88);
  padding: 0 18px;
  font-size: 14px;
  outline: none;
}

.hm-search-input:focus{
  border-color: rgba(47,107,255,.35);
  box-shadow: 0 0 0 6px rgba(47,107,255,.10);
}

.hm-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 18px;
}

.hm-stat{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--hm-border);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: var(--hm-shadow2);
}

.hm-stat-num{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.hm-stat-label{
  margin-top: 6px;
  font-size: 12px;
  color: var(--hm-muted);
  font-weight: 700;
}

.hm-cta-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hm-mini-chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.hm-mini-chip{
  text-decoration: none;
  color: rgba(11,16,32,.78);
  font-size: 12px;
  font-weight: 800;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--hm-border);
}

.hm-mini-chip:hover{ background: #fff; }

.hm-mini-chip-more{
  background: rgba(47,107,255,.10);
  border-color: rgba(47,107,255,.20);
  color: rgba(47,107,255,1);
}

/* Cards */
.hm-card{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow);
}

.hm-card-head{
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.hm-card-title{
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hm-card-sub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--hm-muted);
  font-weight: 700;
}

.hm-card-foot{
  padding: 12px 18px 16px;
}

.hm-link{
  color: rgba(47,107,255,1);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}

.hm-link:hover{ text-decoration: underline; }

.hm-trending-list{
  padding: 10px 10px 0;
}

.hm-trending-row{
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 10px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--hm-text);
}

.hm-trending-row:hover{
  background: rgba(47,107,255,.06);
}

.hm-trending-name{
  font-weight: 900;
  font-size: 13px;
}

.hm-trending-cat{
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,16,32,.55);
}

.hm-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.hm-dot-a{ background: radial-gradient(circle at 30% 30%, var(--hm-cyan), var(--hm-indigo)); }
.hm-dot-b{ background: radial-gradient(circle at 30% 30%, var(--hm-pink), var(--hm-indigo)); }
.hm-dot-c{ background: radial-gradient(circle at 30% 30%, var(--hm-green), var(--hm-cyan)); }
.hm-dot-d{ background: radial-gradient(circle at 30% 30%, var(--hm-orange), var(--hm-pink)); }
.hm-dot-e{ background: radial-gradient(circle at 30% 30%, var(--hm-blue), var(--hm-cyan)); }

.hm-banner{
  margin-top: 14px;
  border-radius: var(--hm-radius);
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(500px 220px at 20% 20%, rgba(47,107,255,.18), transparent 55%),
    radial-gradient(520px 240px at 80% 60%, rgba(22,198,255,.16), transparent 55%),
    rgba(255,255,255,.72);
  box-shadow: var(--hm-shadow2);
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hm-banner-title{ font-weight: 900; letter-spacing: -0.02em; }
.hm-banner-sub{ margin-top: 4px; font-size: 13px; color: var(--hm-muted); font-weight: 700; }

/* Sections */
.hm-section{
  padding: 26px 0;
}

.hm-headrow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hm-h2{
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.hm-muted{
  color: var(--hm-muted);
  font-weight: 700;
  font-size: 13px;
}

/* Category cards */
.hm-cat-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hm-cat{
  text-decoration: none;
  color: var(--hm-text);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow2);
  padding: 16px 16px;
  position: relative;
  overflow: hidden;
}

.hm-cat:hover{
  background: #fff;
  transform: translateY(-1px);
  transition: transform .15s ease;
}

.hm-cat-name{ font-weight: 900; letter-spacing: -0.02em; }
.hm-cat-desc{ margin-top: 6px; font-size: 13px; color: var(--hm-muted); font-weight: 700; }
.hm-cat-cta{
  margin-top: 12px;
  display: inline-flex;
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,16,32,.72);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.70);
}

/* Why tiles */
.hm-why-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.hm-why{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--hm-border);
  border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow2);
  padding: 16px 16px;
}

.hm-why-ic{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-bottom: 10px;
  border: 1px solid rgba(15,23,42,.10);
}

.hm-ic-a{ background: rgba(22,198,255,.14); color: rgba(11,16,32,.85); }
.hm-ic-b{ background: rgba(59,234,166,.14); color: rgba(11,16,32,.85); }
.hm-ic-c{ background: rgba(255,154,59,.16); color: rgba(11,16,32,.85); }
.hm-ic-d{ background: rgba(106,92,255,.14); color: rgba(11,16,32,.85); }

.hm-why-title{ font-weight: 900; letter-spacing: -0.02em; }
.hm-why-text{ margin-top: 6px; font-size: 13px; color: var(--hm-muted); font-weight: 700; }

/* CTA band */
.hm-cta{
  padding: 26px 0;
}

.hm-cta-inner{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(700px 240px at 20% 20%, rgba(255,79,216,.18), transparent 55%),
    radial-gradient(700px 240px at 80% 60%, rgba(47,107,255,.18), transparent 55%),
    radial-gradient(700px 260px at 55% 95%, rgba(59,234,166,.16), transparent 60%),
    #ffffff;
  box-shadow: var(--hm-shadow);
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hm-cta-title{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.hm-cta-sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--hm-muted);
  font-weight: 700;
}

/* Tabs */
.hm-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.hm-tab{
  text-decoration: none;
  color: rgba(11,16,32,.75);
  background: rgba(255,255,255,.70);
  border: 1px solid var(--hm-border);
  font-weight: 900;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 999px;
}

.hm-tab:hover{ background: #fff; }

.hm-tab-on{
  background: rgba(47,107,255,.10);
  border-color: rgba(47,107,255,.20);
  color: rgba(47,107,255,1);
}

/* Product cards */
.hm-grid-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.hm-prod{
  text-decoration: none;
  color: var(--hm-text);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--hm-border);
  border-radius: 22px;
  box-shadow: var(--hm-shadow2);
  overflow: hidden;
}

.hm-prod:hover{
  background: #fff;
  transform: translateY(-1px);
  transition: transform .15s ease;
}

.hm-prod-img{
  aspect-ratio: 16/10;
  background:
    radial-gradient(320px 140px at 20% 20%, rgba(22,198,255,.18), transparent 60%),
    radial-gradient(320px 140px at 80% 70%, rgba(106,92,255,.16), transparent 60%),
    rgba(245,248,255,1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hm-prod-img img{
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(18,34,88,.10));
}

.hm-prod-body{
  padding: 14px 14px 16px;
}

.hm-prod-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 14px;
}

.hm-prod-text{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hm-muted);
  font-weight: 700;
  min-height: 40px;
}

.hm-prod-meta{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hm-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.72);
  color: rgba(11,16,32,.78);
}

.hm-pill-soft{
  border-color: rgba(47,107,255,.18);
  background: rgba(47,107,255,.10);
  color: rgba(47,107,255,1);
}

/* Footer */
.hm-footer{
  margin-top: 18px;
  border-top: 1px solid var(--hm-border);
  background: rgba(255,255,255,.70);
}

.hm-footer-inner{
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Responsive */
@media (max-width: 980px){
  .hm-hero-grid{ grid-template-columns: 1fr; }
  .hm-grid-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-why-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-h1{ font-size: 44px; }
  .hm-nav{ display: none; }
}

@media (max-width: 560px){
  .hm-grid-cards{ grid-template-columns: 1fr; }
  .hm-why-grid{ grid-template-columns: 1fr; }
  .hm-cat-grid{ grid-template-columns: 1fr; }
  .hm-stats{ grid-template-columns: 1fr; }
  .hm-search{ grid-template-columns: 1fr; }
}