/* FlowMule visual refinement v3 — deliberate, visible, delicate */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #16181d;
  --ink-soft: #2c3038;
  --muted: #667085;
  --muted-2: #98a2b3;

  /* Clearly different canvas: warm paper + cool wash */
  --bg: #f7f4ef;
  --bg-soft: #efeae3;
  --line: rgba(22, 24, 29, 0.08);

  --sky: #4f7cff;
  --sky-soft: #b8ccff;
  --mint: #5ec4b2;
  --gold: #ecc44a;
  --gold-deep: #d9ad2e;

  --glass: #ffffff;
  --shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 8px 24px rgba(22, 24, 29, 0.05);
  --shadow-lg: 0 2px 4px rgba(22, 24, 29, 0.04), 0 16px 40px rgba(22, 24, 29, 0.08);

  --font: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", sans-serif;

  /* Smaller, finer radii */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  --max: 1120px;
  --header-h: 64px;
}

/* —— Background: top band on html (visible), fades to white —— */
html {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, #ffffff 100%),
    url("../images/hero-bg.webp") !important;
  background-repeat: no-repeat !important;
  background-position: top center, right top !important;
  background-size:
    100% clamp(480px, 58vw, 920px),
    100% clamp(480px, 58vw, 920px) !important;
  background-attachment: scroll !important;
}

body {
  font-family: var(--font) !important;
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: var(--ink);
  background: transparent !important;
}

/* Kill ambient mesh overlays from main.css */
body::before,
body::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* —— Type: refined, not oversized —— */
.hero-pebbles h1 {
  font-size: clamp(1.85rem, 3.6vw, 2.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
  margin-bottom: 14px !important;
}

.hero-pebbles .hero-sub {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--muted) !important;
  max-width: 32em !important;
  margin-bottom: 22px !important;
}

.roi-head h2,
.outcomes-head h2,
.inside-head h2,
.steps-head h2,
.assets-head h2,
.section-head h2,
.final-copy h2 {
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.22 !important;
}

.roi-head p,
.outcomes-head p,
.inside-head p,
.steps-head p,
.assets-head p,
.section-head p,
.final-copy > p {
  font-size: 0.9375rem !important;
  color: var(--muted) !important;
}

.section-eyebrow {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #4f7cff !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.nav-desktop a {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

.logo-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.btn {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
}

.btn-header {
  padding: 8px 14px !important;
  font-size: 0.8125rem !important;
}

.btn-primary {
  background: var(--ink) !important;
  box-shadow: none !important;
}

.btn-accent,
.btn-lime {
  background: var(--gold) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.btn-ghost {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid var(--line) !important;
}

.hero-brand {
  font-size: 0.75rem !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

/* —— Surfaces: only interactive panels keep weight —— */
.collage-card,
.outcome-panel,
.form-shell,
.modal,
.split-visual .panel {
  border-radius: 12px !important;
}

.collage-card {
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  background: #fff !important;
  border: 1px solid rgba(22, 24, 29, 0.06) !important;
}

.metric-cell,
.split-open,
.step-cell,
.case-quote {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.outcome-tab {
  font-size: 0.8125rem !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
}

.outcome-tab.is-active {
  background: var(--ink) !important;
  color: #fff !important;
}

.outcome-panel {
  padding: 24px 22px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(22, 24, 29, 0.08) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.outcome-panel h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}

.outcome-panel li {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 11px 0 !important;
}

.split-open {
  padding: 0 !important;
  border: none !important;
}

.split-copy .pain {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #4f7cff !important;
}

.split-copy h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

.split-copy p {
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}

.tag-row span {
  font-size: 0.75rem !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--muted) !important;
}

.split-visual {
  border-radius: 12px !important;
  min-height: 200px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(22, 24, 29, 0.06) !important;
}

.split-visual .panel {
  border-radius: 10px !important;
}

.step-cell .n {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  font-size: 0.75rem !important;
  background: none !important;
  color: #4f7cff !important;
}

.step-cell h3 {
  font-size: 1.02rem !important;
}

.step-cell p {
  font-size: 0.875rem !important;
}

.case-quote blockquote {
  font-size: clamp(1.05rem, 2vw, 1.4rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.45 !important;
}

.case-meta strong {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.case-tags span {
  border-radius: 0 !important;
  font-size: 0.75rem !important;
  padding: 0 !important;
  background: none !important;
}

.form-shell {
  padding: 28px 24px !important;
  background: #fff !important;
  border: 1px solid rgba(22, 24, 29, 0.08) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 12px !important;
}

.form-group input,
.form-group textarea {
  border-radius: 8px !important;
  padding: 11px 12px !important;
  font-size: 0.9rem !important;
  border: 1px solid var(--line) !important;
  background: #fafafa !important;
}

.form-group input:focus,
.form-group textarea:focus {
  background: #fff !important;
  border-color: rgba(79, 124, 255, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1) !important;
}

.industry-tile {
  background: #ffffff !important;
  border: 1px solid rgba(22, 24, 29, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 8px 24px rgba(22, 24, 29, 0.05) !important;
}

.industry-tile span {
  font-size: 0.975rem !important;
  font-weight: 600 !important;
}

.trust-strip {
  padding: 18px 0 !important;
}

.site-header {
  height: 64px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(10px);
}

.site-footer {
  background: rgba(255, 255, 255, 0.55) !important;
}

.contact-chip {
  border-radius: 8px !important;
  font-size: 0.75rem !important;
}

.modal {
  border-radius: 14px !important;
}

.mini-row {
  border-radius: 8px !important;
}

.feed-status {
  border-radius: 6px !important;
}

/* Spacing: editorial rhythm */
.hero-pebbles {
  padding: 40px 0 28px !important;
}

.roi {
  padding: 56px 0 36px !important;
}

.outcomes,
.inside,
.steps,
.assets-band,
.testimonial {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.section-head {
  margin-bottom: 28px !important;
}

@media (min-width: 900px) {
  .hero-pebbles {
    padding: 48px 0 40px !important;
  }

  .form-shell {
    padding: 32px 28px !important;
  }

  .outcome-panel {
    padding: 28px 26px !important;
  }

  .section-head {
    margin-bottom: 36px !important;
  }
}