/* ============================================================
   CLAIPOT — HOMEPAGE (corporate refresh)
   Clean SaaS layout | clay as accent only | plain-language
   ============================================================ */

/* ---- tighter, more structured cards ---- */
.home .card,
.home .bento-cell { border-radius: 14px; }
.home .section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }

/* ---- HERO ---- */
.h-hero { position: relative; padding: 8.5rem 0 4rem; overflow: hidden; }
.h-hero-inner { max-width: 880px; }
.h-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem;
  border-radius: 50px; background: var(--white); border: 1px solid var(--clay-200);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); box-shadow: var(--shadow-sm);
}
.h-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.h-hero h1 {
  font-family: var(--font-display); font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  line-height: 1.1; letter-spacing: -0.02em; margin: 1.4rem 0 1.1rem;
}
.h-hero h1 .accent { color: var(--clay-700); }
.h-hero-sub { font-size: var(--fs-lg); color: var(--ink-soft); max-width: 620px; }
.h-hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.h-hero-meta { display: flex; gap: 0.5rem 1.4rem; flex-wrap: wrap; margin-top: 1.5rem;
  font-size: var(--fs-sm); color: var(--ink-faint); }
.h-hero-meta span { display: flex; align-items: center; gap: 0.4rem; }
.h-hero-meta svg { width: 16px; height: 16px; stroke: var(--clay-600); }

/* hero product preview strip */
.h-preview {
  margin-top: 3.5rem; border: 1px solid var(--clay-200); border-radius: 16px;
  background: var(--white); box-shadow: var(--shadow-lg); overflow: hidden;
}
.h-preview-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--clay-200); background: var(--cream-2); }
.h-preview-bar .d { width: 10px; height: 10px; border-radius: 50%; background: var(--clay-300); }
.h-preview-bar .lbl { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); margin-left: 0.4rem; }
.h-preview-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--clay-200); }
.h-preview-app { background: var(--white); padding: 1.25rem; transition: background var(--dur-fast) var(--ease-clay); }
.h-preview-app:hover { background: var(--cream); }
.h-preview-app .pa-ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: var(--clay-100); margin-bottom: 0.6rem; }
.h-preview-app .pa-ico svg { width: 19px; height: 19px; stroke: var(--clay-700); }
.h-preview-app h4 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; }
.h-preview-app p { font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.45; margin-top: 0.15rem; }

/* ---- "what is claipot" clarity band ---- */
.h-what { background: var(--white); border-top: 1px solid var(--clay-200);
  border-bottom: 1px solid var(--clay-200); }
.h-what-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; }
.h-what h2 { font-size: var(--fs-2xl); margin-bottom: 0.9rem; }
.h-what p { color: var(--ink-soft); font-size: var(--fs-base); }
.h-define { display: grid; gap: 0.75rem; }
.h-define-row { display: flex; gap: 0.9rem; padding: 1rem 1.15rem; border: 1px solid var(--clay-200);
  border-radius: 12px; background: var(--cream); }
.h-define-row .n { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  color: var(--clay-700); padding-top: 2px; }
.h-define-row h4 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; }
.h-define-row p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 0.1rem; }

/* ---- product grid (clean, corporate) ---- */
.h-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.h-prod {
  display: flex; flex-direction: column; padding: 1.6rem; background: var(--white);
  border: 1px solid var(--clay-200); border-radius: 14px;
  transition: border-color var(--dur-fast) var(--ease-clay), transform var(--dur-fast) var(--ease-clay),
    box-shadow var(--dur-fast) var(--ease-clay);
}
.h-prod:hover { border-color: var(--clay-400); transform: translateY(-3px); box-shadow: var(--shadow); }
.h-prod-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.h-prod-ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--clay-100); }
.h-prod-ico svg { width: 22px; height: 22px; stroke: var(--clay-700); }
.h-prod-tag { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-faint);
  font-family: var(--font-mono); }
.h-prod h3 { font-size: var(--fs-lg); margin-bottom: 0.35rem; }
.h-prod .role { font-size: var(--fs-xs); font-weight: 600; color: var(--clay-700);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.h-prod p { font-size: var(--fs-sm); color: var(--ink-soft); flex: 1; }
.h-prod .more { margin-top: 1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--clay-700);
  display: inline-flex; align-items: center; gap: 0.35rem; }
.h-prod .more svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-clay); }
.h-prod:hover .more svg { transform: translateX(3px); }

/* ---- audience columns ---- */
.h-aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.h-aud-card { padding: 1.6rem; border: 1px solid var(--clay-200); border-radius: 14px; background: var(--white); }
.h-aud-card h3 { font-size: var(--fs-lg); margin: 0.6rem 0 0.4rem; }
.h-aud-card p { font-size: var(--fs-sm); color: var(--ink-soft); }
.h-aud-card ul { margin-top: 0.9rem; }
.h-aud-card li { font-size: var(--fs-sm); color: var(--ink-soft); padding: 0.3rem 0;
  display: flex; gap: 0.5rem; }
.h-aud-card li svg { width: 16px; height: 16px; stroke: var(--clay-700); flex-shrink: 0; margin-top: 3px; }

/* ---- how it works (3 steps, plain) ---- */
.h-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.h-step { padding: 1.6rem; border: 1px solid var(--clay-200); border-radius: 14px; background: var(--white); }
.h-step .sn { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--clay-700); }
.h-step h3 { font-size: var(--fs-lg); margin: 0.7rem 0 0.4rem; }
.h-step p { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---- metrics band ---- */
.h-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.h-metric { text-align: center; }
.h-metric .v { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; }
.h-metric .l { font-size: var(--fs-sm); color: var(--ink-faint); margin-top: 0.2rem; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .h-preview-body { grid-template-columns: repeat(2, 1fr); }
  .h-what-grid { grid-template-columns: 1fr; gap: 2rem; }
  .h-products, .h-aud, .h-steps { grid-template-columns: repeat(2, 1fr); }
  .h-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .h-hero { padding-top: 7rem; }
  .h-preview-body { grid-template-columns: 1fr; }
  .h-products, .h-aud, .h-steps { grid-template-columns: 1fr; }
}