/* NineGravity theme — design tokens (Signal palette + layout values) */

/* NineGravity shared tokens + primitives — light theme v2 */
:root {
  --paper: #FFFFFF;
  --bone: #FAFAF7;
  --sand: #F2F2EC;
  --line-soft: #F0F0EA;
  --line: #E6E6DE;
  --line-2: #D1D1C8;
  --ink: #0E1116;
  --ink-2: #2A2F39;
  --ink-3: #5A6170;
  --ink-4: #8A909C;
  --ink-5: #C7CAD1;
  --signal: #2B59FF;
  --signal-ink: #132873;
  --signal-hi: #1D3BC7;
  --signal-tint: #EEF1FB;
  --signal-tint-2: #F5F8FF;
  --good: #0E8A4F;
  --warn: #C17B3A;
  --bad:  #C94A3A;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* reset inside artboards (they're fixed-size frames) */
.ng { font-family: var(--body); color: var(--ink); background: var(--paper); font-size: 15px; line-height: 1.5; }
.ng *, .ng *::before, .ng *::after { box-sizing: border-box; }
.ng h1,.ng h2,.ng h3,.ng h4,.ng h5 { margin:0; font-weight: 500; letter-spacing: -0.02em; }

/* Shared: buttons */
.ng-btn { display:inline-flex; align-items:center; gap:10px; padding: 14px 22px; border-radius: 2px; font-weight:500; font-size: 15px; cursor:pointer; border: 1px solid var(--ink); background: var(--ink); color: #fff; transition: all .15s ease; letter-spacing: -0.005em; }
.ng-btn:hover { background: var(--ink-2); }
.ng-btn--lg { padding: 18px 26px; font-size: 16px; }
.ng-btn--signal { background: var(--signal); border-color: var(--signal); }
.ng-btn--signal:hover { background: var(--signal-hi); border-color: var(--signal-hi); }
.ng-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.ng-btn--ghost:hover { border-color: var(--ink); }
.ng-btn .price { opacity: .6; font-variant-numeric: tabular-nums; padding-left: 10px; margin-left: 4px; border-left: 1px solid rgba(255,255,255,.2); }
.ng-btn--ghost .price { border-left-color: var(--line); opacity: .55; }

.ng-link { display:inline-flex; align-items:center; gap:8px; font-weight:500; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: gap .15s ease; white-space: nowrap; }
.ng-link:hover { gap: 12px; }
.ng-link .arr { transition: transform .15s ease; }
.ng-link:hover .arr { transform: translateX(2px); }

/* Eyebrow */
.ng-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display:inline-flex; align-items:center; gap:10px; }
.ng-eyebrow::before { content:""; width:18px; height:1px; background: var(--ink-3); }
.ng-eyebrow--nobar::before { display:none; }

/* Section rhythm */
.ng-sec { padding: 96px 72px; }
.ng-sec-lg { padding: 128px 72px; }
.ng-sec-sm { padding: 56px 72px; }
.ng-container { max-width: 1296px; margin: 0 auto; }

/* Utility */
.ng-hair { height:1px; background: var(--line); border:0; margin:0; }
.ng-num { font-variant-numeric: tabular-nums; }
.ng-mono { font-family: var(--mono); }

/* Nav */
.ng-nav { display:flex; align-items:center; justify-content:space-between; padding: 20px 40px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); position: sticky; top:0; z-index: 50; }
.ng-nav__logo { height: 22px; }
.ng-nav__menu { display:flex; gap: 32px; align-items:center; font-size: 14px; color: var(--ink-2); }
.ng-nav__menu a { transition: color .15s; }
.ng-nav__menu a:hover { color: var(--ink); }
.ng-nav__menu .dd { display:inline-flex; align-items:center; gap:4px; cursor:pointer; }

/* Scroll reveals (only animate once in view) */
.ng-reveal { opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.ng-reveal.is-in { opacity:1; transform: none; }

/* Card */
.ng-card { background: var(--paper); border: 1px solid var(--line); padding: 36px; position: relative; }
.ng-card--sand { background: var(--sand); border-color: transparent; }
.ng-card--bone { background: var(--bone); border-color: var(--line); }
.ng-card--ink { background: var(--ink); color: #fff; border-color: transparent; }

/* Number block */
.ng-metric__v { font-family: var(--display); font-weight: 400; font-size: 88px; line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.ng-metric__l { font-size: 13px; color: var(--ink-3); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }

/* Form */
.ng-input { border:1px solid var(--line-2); background: #fff; padding: 14px 16px; font-family: var(--body); font-size:15px; color: var(--ink); outline: none; transition: border-color .12s; border-radius: 2px; width: 100%; }
.ng-input:focus { border-color: var(--ink); }

/* Badge logos placeholder */
.logo-mono { filter: grayscale(1) contrast(1.2); opacity: .55; }


/* --- Signal accents (originally a separate stylesheet, merged) --- */
/* NineGravity Homepage A — Signal Blue accents overlay
   Loaded AFTER nga-homepage.css. Keeps buttons ink; adds minimal, deliberate blue moments. */

:root { --signal: #2B59FF; --signal-ink: #132873; --signal-tint: #EEF1FB; }

/* Eyebrow: replace muted bar + tint the text slightly warmer-cool */
.ng .ng-eyebrow { color: var(--ink-3); }
.ng .ng-eyebrow::before { background: var(--signal); width: 22px; height: 2px; }

/* Hero italic accent */
.nga-hero__h em { color: var(--signal); }

/* Hero meta dots already use --signal; bump contrast slightly */
.nga-hero__meta-item .dot { box-shadow: 0 0 0 3px rgba(43,89,255,0.12); }

/* Trust strip — tint the "big" number subtly; keep everything else neutral */
.nga-trust__big { color: var(--signal-ink); }

/* PageSpeed gauge stays green (performance semantic) — leave alone */

/* Dual path — list check icons in signal; keep cards neutral */
.nga-dual__list li svg { color: var(--signal); }

/* Audit — icon per row in signal (tiny accent); keep big figures ink */
.nga-audit__icon { color: var(--signal); }
/* Subtle left edge on the price anchor line */
.nga-audit__price { border-top-color: var(--ink); }
.nga-audit__price::before {
  /* no-op; keep bold ink rule */
}

/* Services — a thin signal tick on hover only */
.nga-services__card { position: relative; }
.nga-services__card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 2px; height: 0;
  background: var(--signal);
  transition: height .25s ease;
}
.nga-services__card:hover::before { height: 100%; }
.nga-services__icon { color: var(--signal); }

/* Case study — metric bar fill & percent pill in signal family */
.nga-case__m-bar div { background: var(--signal); }
.nga-case__m-pct { background: var(--signal-tint); color: var(--signal-ink); }

/* Reviews — stars stay amber (clutch-like); tint the score number */
.nga-reviews__score-n { color: var(--signal-ink); }

/* Automattic bar — tiny signal divider */
.nga-automattic__left > svg:first-child { filter: none; } /* leave badge as-is */
.nga-automattic__t::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
  margin-right: 10px; vertical-align: middle;
  transform: translateY(-1px);
}

/* Newsletter — accent the eyebrow underline + form focus */
.nga-news .ng-eyebrow::before { background: var(--signal); }
.nga-news__input:focus { /* no visible border, but signal underline on parent */ }
.nga-news__input-row:focus-within { border-bottom-color: var(--signal); }
.nga-news__ok svg { color: var(--signal); }
.nga-news__mini { color: rgba(255,255,255,0.5); }

/* Post tags in signal */
.nga-post__tag { color: rgba(145,170,255,0.95); }

/* ng-link: keep black underline, but a small signal chevron on hover */
.ng .ng-link { position: relative; }
.ng .ng-link:hover .arr { color: var(--signal); }

/* Footer — list hover gets a tiny signal dot */
.nga-foot__col a { position: relative; transition: color .15s, padding-left .15s; }
.nga-foot__col a:hover { color: var(--ink); padding-left: 10px; }
.nga-foot__col a::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--signal);
  transition: width .15s ease;
}
.nga-foot__col a:hover::before { width: 6px; }

/* Selection color */
.ng ::selection { background: var(--signal); color: #fff; }

/* In-page hash targets: subtle signal flash when landed on */
.ng section:target { animation: nga-target 1.2s ease; }
@keyframes nga-target {
  0%   { box-shadow: inset 3px 0 0 var(--signal); }
  100% { box-shadow: inset 0 0 0 var(--signal); }
}

/* Nav: dropdown price tag in signal-ink for recognition */
.nga-dd__tag { color: var(--signal-ink); }

/* Watermark — keep it subtle */


/* --- Layout-overlay tokens (recoloured from Royal to Signal) --- */
:root {
  /* ------ Core brand tokens (remapped so existing selectors inherit new palette)
     --signal is the primary CTA color per existing conventions. Per brief,
     primary CTAs are VIOLET (not Royal Blue) — so --signal maps to Violet.
     Royal Blue is reserved for secondary accents/links. */
  --signal:        #2B59FF;           /* Violet — primary CTAs */
  --signal-ink:    #0E1116;           /* Deep Aubergine — headlines */
  --signal-hi:     #1D3BC7;           /* Violet hover */
  --signal-tint:   #EEF1FB;           /* Soft violet tint */
  --signal-tint-2: #F5F8FF;           /* Lightest violet tint */

  /* Washes: soft, never full-section */
  --signal-wash:      linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%);
  --signal-wash-soft: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 60%, #FAFAF7 100%);
  --signal-wash-flat: #FAFAF7;

  /* ------ Text / structure — brief: Deep Aubergine, not pure black */
  --ink:   #0E1116;
  --ink-2: #1A1E25;
  --ink-3: #6B7280;

  /* ------ New accent tokens */
  --royal:      #2B59FF;              /* Secondary CTAs / links */
  --royal-ink:  #132873;
  --royal-tint: #EEF1FB;
  --coral:      #2B59FF;              /* Warm accents / testimonials */
  --coral-ink:  #132873;
  --coral-wash: linear-gradient(180deg, rgba(43,89,255,0.28) 0%, rgba(43,89,255,0) 100%);
  --violet:     #2B59FF;              /* Primary CTA (same as --signal) */
  --violet-ink: #132873;
  --violet-wash:linear-gradient(180deg, rgba(43,89,255,0.22) 0%, rgba(43,89,255,0) 100%);

  /* ------ Neutral scale */
  --paper: #FFFFFF;
  --bone:  #FAFAF7;                   /* Warm Cream — editorial alternating bg */
  --sand:  #FAFAF7;
  --line:       #EAEAEA;
  --line-soft:  #F0F0EA;
  --line-hard:  #CCCCCC;
}

/* --- Global resets / page bg --- */

  html, body { background: var(--paper); }
  body { overflow-x: hidden; }
  html { scroll-behavior: smooth; }
  #app { min-height: 100vh; }
.svc-crumb {
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.svc-hero .svc-crumb a {
    color: var(--signal-ink);
}