/* IntelUpsell marketing site — shared styles.
 *
 * DARK THEME, from the "Lumina Analytics" design system (stitch_dark_mode_product_showcase).
 *
 * WHY THE TOKENS AND NOT THE PROSE. That design doc carries two palettes: a machine-readable token block
 * (#0b1326 surfaces, #adc6ff / #ddb7ff accents) and a narrative paragraph naming Tailwind-ish values
 * (#0F172A, #3B82F6). They disagree. The tokens are what the reference implementation actually compiles,
 * and its primary button is a #4d8eff -> #6f00be gradient — which is the brand mark's own blue-to-purple.
 * So the tokens win, and the prose is read as description rather than specification.
 *
 * Variable names carried over from the light theme are no longer literal — "navy" is now a pale blue —
 * but the pages already reference them, so renaming would mean editing seven HTML files to change nothing
 * a reader sees. The comment on each line is what keeps them honest.
 */
:root{
  /* SURFACES — a tonal ramp, not one flat black. Depth here comes from layering rather than shadow, which
     is why cards sit on --surface-1 and the page on --surface-0 rather than both being #000. */
  --surface-0:#0b1326;        /* background / surface-dim — the floor */
  --surface-1:#131b2e;        /* surface-container-low — sections that need separation */
  --surface-2:#171f33;        /* surface-container — cards */
  --surface-3:#222a3d;        /* surface-container-high — raised, hover */
  --outline:#424754;          /* outline-variant — hairlines between surfaces */

  /* TEXT. --ink is body copy, --muted is secondary. Both are blue-tinted rather than pure grey so they
     sit in the same family as the surfaces instead of looking washed out on top of them. */
  --ink:#dae2fd;              /* on-surface */
  --muted:#c2c6d6;            /* on-surface-variant */
  --dim:#8c909f;              /* quiet metadata */

  /* ACCENTS. --accent is for TEXT and links (the pale tone is legible on a dark ground); the gradient pair
     is for FILLED surfaces, where a pale blue would leave white text unreadable. Using one for the other's
     job is the usual way a dark theme ends up with invisible buttons. */
  --accent:#adc6ff;           /* primary */
  --accent-hover:#d8e2ff;     /* primary-fixed — brighter, since hover on dark means MORE light */
  /* DELIBERATELY DARKER THAN THE TOKEN'S #4d8eff, and this is the one place the design system is not
     followed literally. Measured across the whole gradient: white on #4d8eff bottoms out at 3.17:1, under
     the 4.5:1 needed for 16px text. The reference's own answer — dark #00285d text — is worse still, 1.66:1
     against the purple end, because no single text colour can sit on a ramp that runs from light blue to
     deep purple. Darkening the START to #2563eb lifts the worst point to 5.17:1 while keeping the blue
     vivid and the brand gradient intact. An unreadable primary button is not a style choice. */
  --grad-from:#2563eb;        /* primary-container, darkened for contrast */
  --grad-to:#6f00be;          /* secondary-container */
  --on-grad:#ffffff;

  /* --navy is still referenced by 13 inline styles across the pages. It is no longer navy — it is the pale
     accent — but renaming it would mean editing seven HTML files to change nothing anyone sees. --rule is
     kept for the same reason. The two that nothing referenced any more are gone. */
  --navy:#adc6ff;
  --rule:#424754;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface-0);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* header — glassmorphism, so content scrolling under it stays suggested rather than hidden */
header.site{position:sticky;top:0;z-index:20;background:rgba(11,19,38,.72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--rule)}
/* min-height, NOT height. A fixed 64px cannot contain a row that wraps, so on a phone the wrapped CTA
   spilled out of the bar and landed on top of the wordmark. Now the bar grows instead of overflowing —
   which is the safety net; the breakpoint below is what stops it needing to. */
.nav{display:flex;align-items:center;justify-content:space-between;
  min-height:64px;flex-wrap:wrap;gap:10px}
.brand{font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
/* The brand mark's own blue-to-purple, so the wordmark matches the logo rather than merely coordinating. */
.brand span{background-image:linear-gradient(to right,var(--grad-from),var(--grad-to));
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav a{color:var(--muted);font-size:15.5px;font-weight:600}
.nav a:hover{color:var(--ink);text-decoration:none}
/* nowrap: a pill that breaks across two lines stops looking like a button. */
.nav .cta{background-image:linear-gradient(to right,var(--grad-from),var(--grad-to));
  color:var(--on-grad);padding:9px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 0 15px rgba(173,198,255,.2)}
.nav .cta:hover{color:var(--on-grad);filter:brightness(1.12);text-decoration:none}

/* hero — a low-opacity radial glow instead of a flat panel, so the top of the page has depth without a
   visible edge where the section stops. */
.hero{position:relative;overflow:hidden;padding:76px 0 64px;border-bottom:1px solid var(--rule);
  background:
    radial-gradient(60% 90% at 50% -10%, rgba(77,142,255,.16) 0%, rgba(77,142,255,0) 70%),
    radial-gradient(45% 70% at 85% 0%, rgba(111,0,190,.16) 0%, rgba(111,0,190,0) 70%),
    linear-gradient(180deg,var(--surface-1) 0%,var(--surface-0) 100%)}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 18px;font-weight:800;letter-spacing:-.02em;max-width:16ch;
  background-image:linear-gradient(to right,var(--accent),#ddb7ff);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
.hero p.lede{font-size:20px;color:var(--muted);max-width:60ch;margin:0 0 28px}
.btn{display:inline-block;background-image:linear-gradient(to right,var(--grad-from),var(--grad-to));
  color:var(--on-grad);font-weight:700;padding:13px 24px;border-radius:9px;font-size:16px;
  box-shadow:0 0 15px rgba(173,198,255,.2);transition:filter .15s ease}
.btn:hover{color:var(--on-grad);filter:brightness(1.12);text-decoration:none}
/* Outline style: the border brightens on hover rather than the fill appearing, which reads as the element
   catching light — the same idea as the glow on the primary button. */
.btn.ghost{background:transparent;background-image:none;color:var(--accent);
  border:1.5px solid var(--outline);margin-left:10px;box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--accent);filter:none}

/* generic page header */
.page-head{background:var(--surface-1);border-bottom:1px solid var(--rule);padding:52px 0}
.page-head h1{color:var(--ink);font-size:38px;margin:0;font-weight:800;letter-spacing:-.01em}
.page-head p{color:var(--muted);font-size:18px;margin:10px 0 0}

section.block{padding:56px 0}
section.block.alt{background:var(--surface-1);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
h2.h{color:var(--ink);font-size:30px;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
h3{color:var(--ink);font-size:20px;margin:0 0 6px}
p{margin:14px 0}
.lead{color:var(--muted);font-size:18.5px;max-width:66ch}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
/* The 1px lighter top edge is the design's "light hitting the edge" — it is what separates a card from the
   page without drawing a heavy border around it. */
.card{border:1px solid var(--rule);border-top-color:rgba(173,198,255,.18);
  border-radius:14px;padding:24px;background:var(--surface-2);transition:background .15s ease}
.card:hover{background:var(--surface-3)}
.card h3{margin-top:0;color:var(--ink)}
.card p{margin:6px 0 0;color:var(--muted);font-size:16px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

/* contact */
.contact-card{border:1px solid var(--rule);border-top-color:rgba(173,198,255,.18);border-radius:14px;
  padding:26px 28px;background:var(--surface-2);line-height:1.9;font-size:17px}
.contact-card .k{color:var(--dim);display:inline-block;min-width:120px}
.note{background:var(--surface-1);border:1px solid var(--rule);border-radius:12px;padding:20px 24px;
  margin-top:24px;font-size:15.5px;color:var(--muted)}

/* footer — the lowest surface in the ramp, so the page reads as settling rather than stopping */
footer.site{background:#060e20;color:var(--muted);padding:44px 0 32px;margin-top:20px;
  border-top:1px solid var(--rule)}
footer.site .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
footer.site h4{color:var(--ink);font-size:15px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--ink)}
footer.site ul{list-style:none;padding:0;margin:0;line-height:2}
.foot-bottom{border-top:1px solid var(--rule);margin-top:28px;padding-top:18px;font-size:14px;color:var(--dim)}

@media (max-width:820px){
  .grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .nav ul{gap:16px}
  .nav .label-hide{display:none}
}

/* PHONE. At ~390px the wordmark plus three links plus the pill cannot share one row, and forcing them to
   is what pushed the pill onto a second line and over the wordmark.
   The pill is what goes, because it is the one thing here that is DUPLICATED: it points at the same page as
   the "Contact" link sitting immediately beside it, and the hero carries its own Contact Us button a
   thumb's width below. Dropping a link would cost navigation; dropping this costs nothing. */
@media (max-width:560px){
  .brand{font-size:18px}
  .nav ul{gap:15px}
  .nav a{font-size:15px}
  .nav li:has(.cta){display:none}
  /* Fallback for engines without :has() — the pill hides even if its <li> cannot be collapsed. */
  .nav .cta{display:none}
}