/* Reset + base typography + layout primitives */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.06; letter-spacing: 0.005em; font-weight: 600; color: var(--text); }
h1 { font-weight: 700; }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
p { color: var(--text-2); }

/* Layout */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--navy { position: relative; overflow: hidden; background: var(--navy); color: var(--text-inverse); }
.section--navy::before { content:""; position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(48% 90% at 88% 0%, rgba(193,120,23,0.20), transparent 60%),
    radial-gradient(42% 80% at 0% 100%, rgba(36,53,86,0.65), transparent 62%); }
.section--navy::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px; }
.section--navy > .container { position: relative; z-index: 1; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--cream { background: var(--bg-cream); }
.section--warm { background: linear-gradient(180deg, #FBEFD6 0%, #F3E1C2 100%); }
.section--gray { background: var(--bg-2); }
/* Dark sections (navy) with amber glow + faint dot texture */
.section--dark { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--text-on-navy); }
.section--dark::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(48% 66% at 88% 0%, rgba(237,154,31,0.24), transparent 60%),
    radial-gradient(44% 66% at 0% 100%, rgba(36,53,86,0.75), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px); }
.section--dark > .container { position: relative; z-index: 1; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .eyebrow { color: var(--amber-light); }
.section--dark p, .section--dark .section-head p, .section--dark .showrow p { color: var(--text-on-navy); }
/* Each section gets a DISTINCT backdrop pattern so the page reads varied. */
.section--features, .section--cream, .section--warm, .section--dots { position: relative; overflow: hidden; }
.section--features > .container, .section--cream > .container, .section--warm > .container, .section--dots > .container { position: relative; z-index: 1; }

/* Features: blueprint grid lines + amber glow */
.section--features::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(44% 58% at 90% 4%, rgba(237,154,31,0.18), transparent 66%),
    linear-gradient(rgba(27,42,74,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,42,74,0.06) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px; }

/* Warm pricing: concentric-ring spotlight radiating from behind the card */
.section--warm::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 50% 36%, rgba(165,101,16,0.09) 0 1.5px, transparent 1.5px 34px),
    radial-gradient(54% 64% at 50% 30%, rgba(237,154,31,0.18), transparent 72%); }

/* Cream: large soft colour blobs (no pattern) */
.section--cream::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(40% 60% at 12% 10%, rgba(237,154,31,0.16), transparent 70%),
    radial-gradient(44% 64% at 92% 96%, rgba(36,53,86,0.12), transparent 70%); }

/* Dots: classic dot grid + cool glow */
.section--dots::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(40% 52% at 4% 8%, rgba(27,42,74,0.09), transparent 70%),
    radial-gradient(rgba(27,42,74,0.12) 1.6px, transparent 1.6px);
  background-size: auto, 24px 24px; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}
.section--navy .eyebrow { color: var(--amber-light); }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-family: var(--font-accent); font-weight: 500; font-size: var(--fs-xl); line-height: 1.3; margin-top: 16px; }
.section--navy .section-head p { color: var(--text-on-navy); }

.lede { font-family: var(--font-accent); font-weight: 500; font-size: var(--fs-xl); line-height: 1.35; color: var(--text-2); }

/* Scroll-reveal animations. Hidden state ONLY when JS is active (.js on <html>),
   so content is always visible if JS fails or is disabled. */
.js [data-reveal], .js [data-reveal-stagger] > *,
.js .pagehero .container, .js .soln__row, .js .cust-card, .js .post-item,
.js .pricecard, .js .article__head, .js .article__body, .js .demo-layout {
  opacity: 0; transform: translateY(30px);
  transition: opacity .75s cubic-bezier(.16,.7,.2,1), transform .75s cubic-bezier(.16,.7,.2,1);
  will-change: opacity, transform;
}
.js [data-reveal].is-in, .js [data-reveal-stagger] > .is-in,
.js .pagehero .container.is-in, .js .soln__row.is-in, .js .cust-card.is-in,
.js .post-item.is-in, .js .pricecard.is-in, .js .article__head.is-in,
.js .article__body.is-in, .js .demo-layout.is-in { opacity: 1 !important; transform: none !important; }
.js [data-reveal-delay="1"] { transition-delay: .1s; }
.js [data-reveal-delay="2"] { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-stagger] > *,
  .js .pagehero .container, .js .soln__row, .js .cust-card, .js .post-item,
  .js .pricecard, .js .article__head, .js .article__body, .js .demo-layout {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Accessibility */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }

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