/* TalentConnect Pro — marketing design system
 *
 * From the Proposed UI blueprints: white with soft icy-blue gradients and wave
 * shapes, Cambria editorial typography, navy text, electric blue/cyan accents,
 * glass cards with thin pale-blue borders and generous rounding.
 *
 * Deliberately separate from assets/app.css. The workspace is a dense tool and
 * the marketing site is an editorial page; one stylesheet trying to be both
 * ends up serving neither.
 */

:root {
  /* Exact tokens from the Extreme pack's global design system. */
  --navy:#0B1F52;  --navy-deep:#07183F; --ink:#0B1F52;
  --blue:#0862FE;  --blue-bright:#1477FF;
  --cyan:#00C6FF;  --cyan-light:#8BE8FF;
  --violet:#765CF5; --green:#10B981; --amber:#F5A623; --red:#EF4444;

  --page:#F7FAFE;
  --page-blue:#EEF7FF;
  --glass:rgba(255,255,255,.85);
  --line:#DCE8F5;
  --muted:#64748B;
  --faint:#94A7BF;

  /* Cambria first — it is the brief's font and is present on Windows and Office
     installs. Georgia is the closest widely-available metric fallback; the page
     is designed to hold up on either. */
  --serif: Cambria, Georgia, "Times New Roman", serif;
  --ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r:18px; --r-lg:22px;
  --shadow-sm:0 4px 14px rgba(20,80,140,.05);
  --shadow:0 12px 40px rgba(20,80,140,.07);
  --shadow-lg:0 24px 64px rgba(20,80,140,.13);
  --glow:0 10px 30px rgba(8,98,254,.30);
}

*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }   /* must outrank any layout rule */

body {
  margin:0; color:var(--ink); background:var(--page);
  font:16px/1.65 var(--serif); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Soft icy-blue atmosphere + the flowing wave shapes, painted rather than
   imaged so they scale to any viewport and cost nothing to load. */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 82% -8%, #DCEBFF 0%, rgba(220,235,255,0) 62%),
    radial-gradient(900px 520px at -6% 18%, #E6F4FF 0%, rgba(230,244,255,0) 60%),
    radial-gradient(800px 500px at 50% 108%, #E4F1FF 0%, rgba(228,241,255,0) 64%),
    var(--page);
}
body::after {
  content:""; position:fixed; left:0; right:0; bottom:0; height:38vh; z-index:-1;
  pointer-events:none; opacity:.55;
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(37,99,235,.10), transparent 70%),
    radial-gradient(50% 100% at 78% 100%, rgba(6,182,212,.10), transparent 70%);
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
  mask-image:linear-gradient(to top, #000, transparent);
}

h1,h2,h3,h4 { margin:0; font-family:var(--serif); color:var(--navy); line-height:1.12; font-weight:700; }
p { margin:0 0 18px; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
img, svg { max-width:100%; }

/* Container follows mimihodari.com: a narrow centred measure (1120px there)
   with generous side margins, rather than filling the viewport. Measured at
   1521px wide: 1120px container, 201px gutters. */
.wrap { max-width:1240px; margin:0 auto; padding:0 24px; }

/* A grid or flex item defaults to min-width:auto, which refuses to shrink below
   its content's intrinsic width. Combined with width:fit-content on the eyebrow
   and the hero headline, a long kicker sized its own track and pushed the whole
   document past the viewport: measured on Pricing at 375px, "FLEXIBLE PLANS.
   MAXIMUM VALUE." came out 368px inside a 327px column and the page scrolled
   sideways at 406px. min-width:0 lets the track shrink so the text wraps
   instead. body { overflow-x:hidden } would have hidden the symptom without
   fixing the layout. */
.cols > * { min-width:0; }
@media (max-width:760px){ .wrap { padding:0 20px; } }
.grow { flex:1 1 auto; }
.centre { text-align:center; }
.muted { color:var(--muted); }
.ui { font-family:var(--ui); }

/* ------------------------------------------------------------------ header */
/* FROZEN, and colourful by request.
   The pack said to float the header with no background; the brand owner asked for
   a fixed, colourful bar instead, so that wins. The treatment stays light —
   a frosted white base under a soft spectrum wash drawn from the signature
   underline — because navy nav text on a saturated fill would fail contrast. */
header.site {
  position:fixed; top:0; left:0; right:0; z-index:100;
  /* An aurora mix: overlapping colour fields rather than a flat ramp, so the bar
     reads as one rich surface instead of a striped gradient.

     The colour is carried at HIGH ALPHA in LIGHT HUES, not low alpha in deep
     ones. That is the whole trick, and it is measurable rather than a matter of
     taste. Navy (#0B1F52) has a relative luminance of 0.021, so any backdrop
     above ~0.27 clears 4.5:1 — and every hue below sits between 0.40 and 0.68,
     which is 6.3:1 at worst. Deep blue at 38% opacity and bright periwinkle at
     90% are about equally colourful; only one of them also darkens the surface
     the nav has to be read against. */
  background:
    /* Two light pools, on top so the colour blooms out from behind the content
       rather than across it: one under the logo, one under the nav. They are
       the answer to the same problem in two places. Contrast ratios said the
       violet-pink middle was fine at 6:1, and it was — but a ratio measures
       lightness alone, and navy on lavender is two readings of the same blue.
       Too little separation in HUE reads as murky whatever the number says, and
       the nav is the one thing on the page that must never be squinted at. */
    /* Two small, gentle pools — a lift, not a clearing. Broad opaque pools were
       tried and they did make the content crisp, by deleting the band through
       the middle of the bar. Legibility here is bought at the glyphs instead
       (see the white halo on .logo img and nav.main a): a few pixels of light
       hugging each letterform costs the colour almost nothing, where 500px of
       white costs it everything. Light where it is needed, not where the
       element happens to be. */
    /* The logo pool is the larger of the two by design: the wordmark is navy on
       a transparent PNG and the mark is blue/cyan, so the lockup needs more
       help than four words of type do. It is still a lift rather than a
       clearing — sky blue reads through it. */
    radial-gradient(23% 96% at 9% 50%,  rgba(255,255,255,.76) 0%, rgba(255,255,255,0) 84%),
    radial-gradient(21% 80% at 49% 50%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 84%),
    /* One family, symmetrical: sky → ice-cyan → periwinkle → AZURE →
       periwinkle → ice-cyan → sky. The greens are out; every field is now a
       blue, which is also the brand's own colour and the logo's.

       Movement comes from HUE ROTATION INSIDE the family — sky leans warm-blue,
       ice-cyan green-blue, periwinkle violet-blue — rather than from crossing
       into another family. That is what keeps a single-hue band from reading as
       one flat wash while still reading as one colour. Lightness stays put
       (0.56-0.62), so the bar's legibility does not move across its width. */
    radial-gradient(34% 175% at 1% 50%,  rgba(150,206,255,.95) 0%, rgba(150,206,255,0) 72%),
    radial-gradient(40% 180% at 19% 42%, rgba(142,222,250,.95) 0%, rgba(142,222,250,0) 72%),
    radial-gradient(44% 170% at 35% 62%, rgba(164,198,255,.92) 0%, rgba(164,198,255,0) 70%),
    radial-gradient(40% 165% at 50% 36%, rgba(128,214,252,.92) 0%, rgba(128,214,252,0) 68%),
    radial-gradient(44% 170% at 65% 62%, rgba(164,198,255,.92) 0%, rgba(164,198,255,0) 70%),
    radial-gradient(40% 180% at 81% 42%, rgba(142,222,250,.95) 0%, rgba(142,222,250,0) 72%),
    radial-gradient(34% 175% at 99% 50%, rgba(150,206,255,.95) 0%, rgba(150,206,255,0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
  backdrop-filter:blur(16px) saturate(1.28);
  box-shadow:0 4px 26px rgba(20,80,140,.12);
}
header.site .wrap { display:flex; align-items:center; gap:34px; height:86px; }

/* The bar is fixed, so content needs to start below it. */
body { padding-top:86px; }


/* Logo is the supplied artwork, not a redrawn mark. The wordmark's light
   variant was derived from the same file so it reads on a white page; the
   original ships as logo-on-dark.png for navy surfaces. */
.logo { display:flex; align-items:center; flex:none; }
.logo:hover { text-decoration:none; }
/* The halo that lets the aurora stay saturated underneath. drop-shadow follows
   the PNG's alpha, so the light hugs the mark and the wordmark rather than
   boxing them — no rectangle, no plate, nothing you can see as a shape. Two
   passes: a tight one for edge definition, a wider soft one to separate the
   whole lockup from whatever colour it is sitting on. */
.logo img {
  height:38px; width:auto; display:block;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95))
         drop-shadow(0 0 7px rgba(255,255,255,.85))
         drop-shadow(0 0 16px rgba(255,255,255,.55));
}

/* Navigation is centred in the container, per the reference. */
nav.main { display:flex; gap:38px; position:absolute; left:50%; transform:translateX(-50%); }
/* 600, not 400. On a white page a regular weight is plenty; on a colour field
   the thin strokes are the first thing to go, and thickening them buys more
   legibility than darkening the ink can (it is already the darkest navy). */
nav.main a {
  font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink);
  position:relative; padding:6px 0;
  /* The same trick as the logo, done with text-shadow: a white glow tight
     around each letter. It reads as crispness rather than as a background,
     which is why the band behind it can stay fully saturated. */
  text-shadow:0 0 1px rgba(255,255,255,.95),
              0 0 6px rgba(255,255,255,.90),
              0 0 15px rgba(255,255,255,.70);
}
nav.main a:hover { color:var(--blue); text-decoration:none; }
nav.main a.on { color:var(--navy); font-weight:700; }
/* the active tab's soft blue glow underline */
nav.main a.on::after {
  content:""; position:absolute; left:-2px; right:-2px; bottom:-3px; height:2.5px; border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 2px 10px 1px rgba(0,198,255,.55);
}
/* Below the desktop breakpoint the nav drops to a second row rather than
   disappearing. Hiding it left a phone with no way to reach the other pages at
   all, which the brief rules out — the site has to work on both. */
@media (max-width:980px){
  header.site .wrap { flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:10px; row-gap:8px; }
  .logo img { height:32px; }
  nav.main {
    position:static; transform:none; order:3; width:100%;
    justify-content:center; gap:22px; overflow-x:auto; padding-bottom:2px;
    scrollbar-width:none;
  }
  nav.main::-webkit-scrollbar { display:none; }
  nav.main a { font-size:15px; white-space:nowrap; }
  body { padding-top:126px; }
}
@media (max-width:420px){
  nav.main { gap:16px; justify-content:flex-start; }
  nav.main a { font-size:14.5px; }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:600 16px/1 var(--ui); padding:13px 24px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s, box-shadow .16s, background .16s;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:linear-gradient(135deg,var(--blue),var(--blue-bright)); color:#fff; box-shadow:var(--glow); }
.btn-primary:hover { box-shadow:0 14px 40px rgba(37,99,235,.42); }
.btn-ghost { background:#fff; border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-ghost:hover { border-color:#BBD4F2; }
.btn-lg { padding:17px 34px; font-size:17px; }
.btn-sm { padding:9px 15px; font-size:14px; border-radius:9px; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* ------------------------------------------------------------------ eyebrow + signature underline */
/* Classic editorial eyebrow: same size, but set the way a masthead kicker is —
   generous tracking, a lighter weight so the caps breathe, and a little extra
   space after each full stop. Heavy caps at tight tracking read as a label;
   wide caps at medium weight read as typography. */
.eyebrow {
  font:600 17px/1.1 var(--serif); letter-spacing:.22em; word-spacing:.08em;
  text-transform:uppercase; display:block; margin-bottom:12px;
  text-indent:.22em;   /* optical: tracking pads the right, this balances the left */
  /* Colour runs THROUGH the letters rather than sitting behind them.
     width:fit-content is load-bearing: a gradient is painted across the
     ELEMENT'S BOX, and a block-level kicker is as wide as the column. Fitted to
     the column, only the first third of the ramp ever lands on the words and the
     line comes out blue-to-violet with the green and amber painted onto empty
     space to the right. Shrink the box to the words and the whole ramp shows. */
  width:fit-content; max-width:100%;
  background:linear-gradient(96deg,#146BFF 0%,#6955F6 26%,#00A9DC 52%,#1BA86A 76%,#E0900E 100%);
  /* see .cols > * below: fit-content needs the track to be allowed to shrink */
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* background-clip:text is near-universal, but if it is missing the text must not
   vanish — fall back to solid brand blue. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .eyebrow { color:var(--blue); -webkit-text-fill-color:currentColor; }
}
@media (max-width:560px){ .eyebrow { letter-spacing:.16em; } }

/* The brush stroke is an inline SVG so the gradient can run blue → violet →
   cyan → green → amber along the path, which no CSS border can do. */
.brush { display:block; width:min(430px,86%); height:22px; margin:-2px 0 14px; }
/* A short hand-drawn rule sitting UNDER a heading rather than over it: narrower,
   so it underscores the last word or two instead of spanning the column. */
.underline .brush { width:min(248px,62%); height:19px; margin:4px 0 20px; }
@media (max-width:560px){ .underline .brush { width:min(210px,74%); } }

/* ------------------------------------------------------------------ cards */
.glass {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); transition:transform .16s, box-shadow .16s, border-color .16s;
}
.glass:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:#C6DCF4; }
.glass.zoom:hover { transform:scale(1.045); }
.pad { padding:30px; }

/* The signature spectrum along the foot of a process card, with a soft bloom of
   the same colours beneath it so the edge glows rather than just sitting there. */
/* --foot lets a page set its own ramp per card; unset, it is the site spectrum,
   so How it Works is untouched. The edge and the bloom read the same variable,
   which is the point — two declarations that could drift apart would eventually
   drift apart. */
.accent-foot {
  position:relative; overflow:visible;
  --foot:linear-gradient(90deg,#146BFF 0%,#6955F6 26%,#00C8FF 52%,#31C96B 76%,#FFC83D 100%);
}
.accent-foot::after {
  content:""; position:absolute; left:20px; right:20px; bottom:0; height:4px; border-radius:4px 4px 0 0;
  background:var(--foot);
}
.accent-foot::before {
  content:""; position:absolute; left:20px; right:20px; bottom:-2px; height:12px; border-radius:50%;
  background:var(--foot);
  filter:blur(9px); opacity:.42; transition:opacity .22s;
}

/* Hover zooms the whole card and lifts the glow. The footprint in the grid is
   unchanged — transform paints outside the box without reflowing neighbours. */
.zoom { transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; }
.zoom:hover { transform:scale(1.045); box-shadow:0 26px 60px rgba(20,80,140,.17); z-index:2; }
.zoom:hover.accent-foot::before { opacity:.75; }
@media (prefers-reduced-motion: reduce){ .zoom:hover { transform:none; } }

.numbadge {
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font:700 21px/1 var(--ui); color:#fff; box-shadow:0 8px 20px rgba(11,31,68,.18);
  background:linear-gradient(135deg,var(--accent,var(--blue)),#60A5FA);
}

/* ------------------------------------------------------------------ bits */
.ticks { list-style:none; padding:0; margin:0; }
.ticks li { position:relative; padding-left:44px; margin-bottom:17px; font-size:18px; color:var(--ink); }
.ticks li::before {
  content:"✓"; position:absolute; left:0; top:2px; width:27px; height:27px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-bright)); color:#fff;
  font:700 13px/26px var(--ui); text-align:center; box-shadow:0 4px 12px rgba(37,99,235,.3);
}

.pill {
  display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1 var(--ui);
  padding:7px 13px; border-radius:999px; background:#EAF3FF; color:var(--blue-600);
}
.pill-green { background:#E7F8F0; color:#047857; }
.pill-amber { background:#FEF5E7; color:#B45309; }
.pill-violet{ background:#F1EAFE; color:#6D28D9; }

.lede { font-size:20px; line-height:1.45; color:#3D5578; max-width:560px; }
section.band { padding:86px 0; }
h2.sec { font-size:clamp(32px,3.6vw,50px); margin-bottom:14px; }

/* ------------------------------------------------------------------ candidate cards (illustration) */
.floatcards { position:relative; min-height:340px; }
.ccard {
  position:absolute; width:190px; padding:14px; border-radius:18px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-lg); font-family:var(--ui);
  animation:bob 6s ease-in-out infinite;
}
.ccard .av { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#BFD9FF,#8FC3FF); }
.ccard .nm { font-weight:650; font-size:13px; color:var(--navy); margin-top:9px; }
.ccard .ro { font-size:11px; color:var(--faint); }
.ccard .pc { font:700 22px/1 var(--ui); margin-top:8px; }
.ccard .ln { height:5px; border-radius:3px; background:#EDF3FB; margin-top:7px; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }

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

/* Loading placeholder. Lived only in the workspace stylesheet before, so the
   marketing pages rendered an unstyled white box while /plans was in flight. */
.sk { background:linear-gradient(90deg,#EEF4FB 25%,#E3EDF8 37%,#EEF4FB 63%);
      background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:12px; }
@keyframes sk { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ------------------------------------------------------------------ footer */
/* Dark bluish footer, shared by every page through the injected chrome. */
footer.site {
  margin-top:70px; padding:48px 0 52px; font-size:14px; color:#A9BCD8; border-top:none;
  background:
    radial-gradient(70% 160% at 12% 0%, rgba(0,198,255,.16) 0%, rgba(0,198,255,0) 62%),
    radial-gradient(60% 160% at 88% 0%, rgba(124,92,246,.16) 0%, rgba(124,92,246,0) 62%),
    linear-gradient(180deg,#0B1F52 0%,#07183F 100%);
}
footer.site a { color:#CBD9EE; }
footer.site a:hover { color:#fff; }
/* a fine spectrum line where the footer meets the page */
footer.site { position:relative; }
footer.site::before {
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#146BFF,#6955F6,#00C8FF,#31C96B,#FFC83D);
}