:root {
  --primary: #1d2c8c;
  --primary-deep: #14205f;
  --primary-soft: #eef1ff;
  --accent: #e3062b;
  --accent-dark: #b90423;
  --ink: #18213d;
  --muted: #667085;
  --border: #e4e7ec;
  --surface: #ffffff;
  --soft: #f7f8fc;
  --shadow: 0 22px 55px rgba(29, 44, 140, .12);
  --radius-lg: 28px;
  --radius-md: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: Inter, "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; border-radius: 10px; color: #fff; background: var(--primary); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 5; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; }
.brand img { width: min(245px, 56vw); height: auto; }
.header-store-link { padding: 10px 16px; border: 1px solid #d6dcfb; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: .78rem; font-weight: 900; letter-spacing: .035em; text-decoration: none; text-transform: uppercase; transition: color .2s ease, background .2s ease, transform .2s ease; }
.header-store-link:hover, .header-store-link:focus-visible { color: #fff; background: var(--primary); transform: translateY(-1px); }

.hero { overflow: hidden; padding: 72px 0 76px; background: radial-gradient(circle at 85% 18%, rgba(227,6,43,.15), transparent 32%), linear-gradient(135deg, #f7f8ff 0%, #fff 54%, #fff4f6 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); align-items: center; gap: 54px; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-light { color: #ffb7c4; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { max-width: 720px; margin: 0; font-size: clamp(2.55rem, 6vw, 4.9rem); line-height: .98; letter-spacing: -.055em; }
.hero-lead { max-width: 650px; margin: 24px 0 30px; color: #475467; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.quote-card { width: min(520px, 100%); padding: 20px 23px; border: 1px solid rgba(29,44,140,.14); border-radius: var(--radius-md); background: rgba(255,255,255,.92); box-shadow: var(--shadow); display: grid; gap: 2px; }
.quote-card span { color: var(--primary); font-size: .9rem; font-weight: 850; }
.quote-card strong { color: var(--accent); font-size: clamp(2.35rem, 5vw, 3.55rem); line-height: 1.12; letter-spacing: -.04em; }
.quote-card small { color: var(--muted); }
.quote-card.is-error strong { color: var(--muted); font-size: 1.35rem; letter-spacing: 0; }
.hero-art { position: relative; width: 100%; display: grid; justify-items: center; }
.hero-product-card { position: relative; width: min(510px, 100%); min-height: 520px; border: 1px solid rgba(29,44,140,.1); border-radius: 34px; background: rgba(255,255,255,.76); box-shadow: var(--shadow); overflow: hidden; }
.hero-product-card::before { content: ""; position: absolute; inset: 10% -20% auto auto; width: 310px; height: 310px; border-radius: 50%; background: rgba(227,6,43,.09); }
.hero-hormicoint-logo { position: absolute; z-index: 2; top: 30px; left: 28px; width: min(330px, calc(100% - 56px)); height: auto; }
.hero-cement-bag { position: absolute; z-index: 1; right: -42px; bottom: -68px; width: 92%; height: auto; filter: drop-shadow(0 24px 22px rgba(20,32,95,.18)); }
.equivalence-pill { margin-top: -20px; position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 14px 22px; border-radius: 999px; color: #fff; background: var(--accent); box-shadow: 0 16px 35px rgba(227,6,43,.26); text-align: center; }
.equivalence-pill span { opacity: .72; }

.section { padding: 86px 0; }
.section-soft { padding: 58px 0; background: var(--soft); }
.split-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); align-items: end; gap: 60px; }
.split-heading h2, .section-heading h2, .backing-copy h2, .history-grid h2, .closing-card h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; letter-spacing: -.035em; }
.split-heading > p { margin: 0; color: var(--muted); font-size: 1.08rem; }
.section-heading { max-width: 740px; margin-bottom: 34px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.step-card { min-height: 245px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: 0 12px 32px rgba(16,24,40,.06); }
.step-number { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 28px; border-radius: 14px; color: #fff; background: var(--primary); font-weight: 900; }
.step-card:nth-child(4) .step-number { background: var(--accent); }
.step-card h3 { margin: 0 0 8px; color: var(--primary); font-size: 1.25rem; }
.step-card p { margin: 0; color: var(--muted); }

.backing-section { color: #fff; background: linear-gradient(135deg, var(--primary-deep), var(--primary) 58%, #3549ba); }
.backing-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(440px, 1.05fr); align-items: center; gap: 64px; }
.backing-copy p:last-child { margin: 22px 0 0; color: #dce2ff; font-size: 1.05rem; }
.backing-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.backing-facts div { min-height: 152px; padding: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.08); }
.backing-facts dt { margin-bottom: 8px; color: #fff; font-size: 1.12rem; font-weight: 900; }
.backing-facts dd { margin: 0; color: #dce2ff; line-height: 1.42; }

.conditions-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.conditions-grid li { position: relative; min-height: 132px; padding: 22px 22px 20px 58px; border: 1px solid var(--border); border-radius: 18px; background: #fff; }
.conditions-grid li::before { content: "✓"; position: absolute; top: 22px; left: 20px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #fff; background: var(--accent); font-weight: 900; }
.conditions-grid strong, .conditions-grid span { display: block; }
.conditions-grid strong { margin-bottom: 4px; color: var(--primary); }
.conditions-grid span { color: var(--muted); font-size: .92rem; line-height: 1.45; }

.history-section { background: var(--soft); }
.history-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(380px,.85fr); align-items: center; gap: 64px; }
.history-grid p { color: var(--muted); }
.history-note { padding-left: 14px; border-left: 4px solid var(--accent); font-size: .88rem; }
.history-visual { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow); }
.history-dates { display: flex; justify-content: space-between; color: var(--primary); font-size: .82rem; font-weight: 850; }
.timeline { position: relative; height: 8px; margin: 22px 5px 28px; border-radius: 99px; background: linear-gradient(90deg, #dfe4f6, var(--primary), var(--accent)); }
.timeline i { position: absolute; top: 50%; width: 20px; height: 20px; border: 4px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--primary); transform: translateY(-50%); }
.timeline i:first-child { left: 0; }.timeline i:last-child { right: 0; background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.history-visual ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.history-visual li { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .88rem; font-weight: 750; }
.legend { width: 10px; height: 10px; border-radius: 50%; }.legend-cement { background: #12a150; }.legend-dollar { background: #d31977; }.legend-fixed { background: #98a2b3; }

.closing-section { padding: 34px 0 86px; background: var(--soft); }
.closing-card { padding: clamp(32px, 6vw, 64px); border-radius: var(--radius-lg); color: #fff; background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.16), transparent 34%), linear-gradient(135deg, var(--accent-dark), var(--accent)); box-shadow: 0 26px 60px rgba(227,6,43,.2); }
.closing-card p:last-child { max-width: 760px; margin: 18px 0 0; color: #ffe0e6; font-size: 1.08rem; }

.site-footer { padding: 42px 0; color: #d9def5; background: #10194d; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 42px; }
.footer-brand img { width: 240px; height: auto; filter: brightness(0) invert(1); }
.footer-action { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: end; gap: 2px 20px; }
.footer-action span { color: #fff; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.footer-phone { color: #d9def5; font-size: .9rem; text-decoration: none; }
.footer-phone:hover, .footer-phone:focus-visible { color: #fff; text-decoration: underline; }
.footer-cta { grid-column: 2; grid-row: 1 / span 2; padding: 13px 19px; border-radius: 999px; color: #fff; background: var(--accent); font-size: .82rem; font-weight: 900; letter-spacing: .025em; text-decoration: none; text-transform: uppercase; box-shadow: 0 12px 28px rgba(227,6,43,.22); transition: background .2s ease, transform .2s ease; }
.footer-cta:hover, .footer-cta:focus-visible { background: #ff2449; transform: translateY(-1px); }

@media (max-width: 900px) {
  .hero-grid, .backing-grid, .history-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-lead, .quote-card { margin-inline: auto; }
  .hero-art { max-width: 580px; margin-inline: auto; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .conditions-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split-heading { grid-template-columns: 1fr; gap: 20px; }
  .footer-inner { align-items: flex-start; }
}

@media (max-width: 600px) {
  .shell { width: min(100% - 28px, 1120px); }
  .header-inner { min-height: 68px; }
  .brand img { width: min(210px, 48vw); }
  .header-store-link { max-width: 142px; padding: 8px 11px; font-size: .65rem; line-height: 1.2; text-align: center; }
  .hero { padding: 48px 0 58px; }
  h1 { font-size: clamp(2.45rem, 13vw, 3.65rem); }
  .hero-grid { gap: 30px; }
  .quote-card { text-align: left; }
  .hero-product-card { min-height: 420px; }
  .hero-hormicoint-logo { top: 24px; left: 20px; width: calc(100% - 40px); }
  .hero-cement-bag { right: -34px; bottom: -44px; width: 96%; }
  .equivalence-pill { margin-top: -6px; border-radius: 18px; gap: 6px; flex-direction: column; }
  .section { padding: 64px 0; }
  .section-soft { padding: 46px 0; }
  .steps-grid, .conditions-grid, .backing-facts { grid-template-columns: 1fr; }
  .step-card { min-height: 0; }
  .backing-grid, .history-grid { gap: 34px; }
  .history-visual ul { display: grid; grid-template-columns: 1fr 1fr; }
  .closing-section { padding-bottom: 64px; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-action { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .footer-cta { grid-column: 1; grid-row: auto; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}