/* ============================================================
   PROBIZMATE — "SUN-FADED IRISH"
   Three-act narrative palette.
   Act I (anxious): cool sage on cream
   Act II (confident): sea blue
   Act III (triumphant): weathered orange
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Inter+Tight:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Surfaces ── */
  --bg:           #F2EEE6;   /* warm cream paper */
  --bg-2:         #E9E4D8;   /* recessed panels */
  --surface:      #FBF9F3;   /* elevated cards */
  --surface-ink:  #16201E;   /* deep slate-teal, not pure black */
  --surface-ink-2:#1F2B28;

  /* Three act surfaces — soft tints of the act colour over cream */
  --bg-sage:      #E5E5DD;   /* Act I — anxious, cooler than cream */
  --bg-sea:       #DDE6E8;   /* Act II — confident calm */
  --bg-orange:    #F1E0CF;   /* Act III — warm triumphant */

  /* ── Ink ── */
  --ink:          #16201E;   /* slate-teal black, more grounded */
  --ink-soft:     #2E3A37;
  --ink-mute:     #6E7773;

  /* ── Rules ── */
  --rule:         #16201E;
  --rule-soft:    rgba(22,32,30,0.14);
  --rule-fine:    rgba(22,32,30,0.08);
  --rule-inv:     rgba(245,242,234,0.14);

  /* ── ACT COLOURS ── (the sun-faded Irish palette) */
  --sage:         #8FA68A;   /* Act I anxious — soft, cold, pastoral */
  --sage-deep:    #6F8A6A;
  --sage-tint:    rgba(143,166,138,0.14);

  --sea:          #3E6B7E;   /* Act II confident — deep sea blue */
  --sea-bright:   #5C8FA3;
  --sea-tint:     rgba(62,107,126,0.10);

  --orange:       #C7693B;   /* Act III triumphant — weathered orange */
  --orange-bright:#E08754;   /* on dark backgrounds */
  --orange-deep:  #A4501F;
  --orange-tint:  rgba(199,105,59,0.12);

  /* ── Backwards-compat: --go now means "current act accent" ──
     Each act <section> overrides --go on itself. Hero/global default = orange (it's the brand). */
  --go:           var(--orange);
  --go-bright:    var(--orange-bright);
  --go-tint:      var(--orange-tint);

  /* tiny safety yellow — only for the LIVE pulse dot */
  --signal:       #F2C94C;

  /* ── Type ── */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Motion ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mech:    cubic-bezier(0.7, 0, 0.3, 1);

  /* ── Layout ── */
  --container:    1320px;
  --gutter:       28px;
}

/* Per-act scoping. Apply data-act on a Section to retint it. */
[data-act="1"] {
  --go: var(--sage-deep);
  --go-bright: var(--sage);
  --go-tint: var(--sage-tint);
}
[data-act="2"] {
  --go: var(--sea);
  --go-bright: var(--sea-bright);
  --go-tint: var(--sea-tint);
}
[data-act="3"] {
  --go: var(--orange);
  --go-bright: var(--orange-bright);
  --go-tint: var(--orange-tint);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  font-feature-settings: "ss01", "cv11";
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; outline: 0; }
img { max-width: 100%; display: block; }

/* ─────────── Layout ─────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 6rem 0; position: relative; }
.section--ink     { background: var(--surface-ink); color: #F1ECE0; }
.section--panel   { background: var(--bg-2); }
.section--white   { background: var(--surface); }
.section--sage    { background: var(--bg-sage); }
.section--sea     { background: var(--bg-sea); }
.section--orange  { background: var(--bg-orange); }
.section--go      { background: var(--go); color: var(--surface); }

/* ─────────── Type ─────────── */
.tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tag--go { color: var(--go); }
.tag--ink { color: var(--ink); }
.tag--inv { color: rgba(241,236,224,0.7); }

.label-strip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
}
.label-strip--go { background: var(--go-tint); border-color: var(--go); color: var(--go); }

/* The big display headline */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 4.6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
}
@media (max-width: 1100px) { .display { font-size: clamp(38px, 4.4vw, 56px); } }
@media (max-width: 720px)  { .display { font-size: clamp(36px, 8.4vw, 56px); } }

.display .mute { color: var(--ink-mute); }
.display .underline-go { position: relative; display: inline-block; }
.display .underline-go::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em;
  height: 0.14em; background: var(--go); z-index: -1; opacity: 0.85;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 5.2vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 580px;
}

.body { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 60ch; }

.num {
  font-family: var(--font-display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.spec {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spec--mute { color: var(--ink-mute); }

.underline-go {
  position: relative; display: inline-block;
}
.underline-go::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em;
  height: 0.14em; background: var(--go); z-index: -1; opacity: 0.85;
}

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 22px;
  background: var(--orange);
  color: var(--surface);
  border-radius: 0;
  position: relative;
  transition: background 220ms var(--ease-mech), transform 200ms var(--ease-out);
}
.btn:hover { background: var(--orange-deep); transform: translateY(-1px); }
.btn .arrow { transition: transform 240ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 22px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background 220ms var(--ease-mech), color 220ms var(--ease-mech);
}
.btn-ghost:hover { background: var(--ink); color: var(--surface); }

.btn-inv {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 22px;
  background: var(--go-bright);
  color: var(--surface-ink);
}

/* ─────────── Selection ─────────── */
::selection { background: var(--go); color: var(--surface); }

/* ─────────── Reveal ─────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ─────────── Console ─────────── */
.console { background: var(--surface-ink); color: #E9E4D8; font-family: var(--font-mono); }
.kv { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule-fine); }
.kv__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.kv__v { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--ink); }

/* ─────────── Act divider rail ─────────── */
.act-rail {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}