@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

  :root {
    --navy: #0B1628;
    --navy-mid: #111E35;
    --navy-surface: #172340;
    --bg-white: #FFFFFF;
    --bg-light: #F4F5F9;
    --border: #E0E3ED;
    --border-dark: rgba(255,255,255,0.07);
    --border-accent: rgba(37,99,235,0.18);
    --text-dark: #111827;
    --text-body: #4B5563;
    --text-muted: #9CA3AF;
    --text-on-dark: #E8EAF0;
    --text-on-dark-body: rgba(232,234,240,0.65);
    --text-on-dark-dim: rgba(232,234,240,0.35);

    /* V6 palette — buttons, accents, gradients */
    --blue: #2563EB;
    --blue-light: #3B82F6;
    --blue-bright: #60A5FA;
    --blue-pale: #EFF6FF;
    --blue-dark: #1D4ED8;

    /* Logo blue — used ONLY for "Select" wordmark */
    --vale-blue: #4A9BDC;

    --teal: #0D9488;
    --teal-pale: #F0FDFA;
    --violet: #7C3AED;
    --violet-pale: #F5F3FF;
    --orange: #EA580C;
    --green: #16A34A;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 100px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg-white);
    color: var(--text-body);
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ===== NAV ===== */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 14px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(11, 22, 40, 0.94);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    border-bottom: 1px solid var(--border-dark);
  }
  .nav-logo {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
  }
  .nav-logo .hire    { color: #fff; }
  .nav-logo .select  { color: var(--vale-blue); }
  .nav-logo .dot-com { color: rgba(255,255,255,0.3); font-weight: 500; }
  .nav-logo .bizfirst-attr {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.01em;
    margin-left: 12px;
    vertical-align: middle;
    font-style: normal;
    text-decoration: none;
    transition: color 0.2s;
  }
  .nav-logo .bizfirst-attr:hover {
    color: rgba(255,255,255,0.5);
  }

  .nav-right { display: flex; align-items: center; gap: 28px; }
  .nav-right a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s;
  }
  .nav-right a:hover { color: #fff; }

  .btn-primary {
    background: var(--blue);
    color: #fff !important;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.25s;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3);
  }
  .btn-primary:hover {
    background: var(--blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  }

  .container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

  .section-tag {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .section-tag.light { color: var(--blue); }
  .section-tag.dark  { color: var(--blue-bright); }

  /* ===== HERO ===== */
  .hero {
    background: var(--navy);
    padding: 155px 0 110px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
  }

  .hero-orb-1 {
    position: absolute;
    top: -10%; right: -5%;
    width: 650px; height: 650px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(30px);
  }
  .hero-orb-2 {
    position: absolute;
    bottom: -15%; left: -8%;
    width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.09) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(30px);
  }
  .hero-orb-3 {
    position: absolute;
    top: 20%; left: 40%;
    width: 400px; height: 300px;
    background: radial-gradient(ellipse, rgba(96, 165, 250, 0.08) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(50px);
  }

  .hero-grid {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center 35%, rgba(0,0,0,0.5) 0%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at center 35%, rgba(0,0,0,0.5) 0%, transparent 65%);
    pointer-events: none;
  }

  .hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 32px;
    backdrop-filter: blur(8px);
  }
  .hero-badge .dot {
    width: 7px; height: 7px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(22, 163, 74, 0.6);
    animation: pulse 2.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(22, 163, 74, 0.6); }
    50%       { opacity: 0.35; box-shadow: 0 0 4px rgba(22, 163, 74, 0.2); }
  }

  .hero h1 {
    font-size: clamp(38px, 5.5vw, 62px);
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -0.045em;
    margin-bottom: 26px;
  }
  .hero h1 .accent {
    background: linear-gradient(135deg, var(--blue-bright) 0%, #818CF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-sub {
    font-size: 18px;
    color: var(--text-on-dark-body);
    max-width: 570px;
    margin: 0 auto 42px;
    line-height: 1.8;
  }
  .hero-sub strong { color: var(--text-on-dark); font-weight: 600; }

  .hero-cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .hero-cta-wrap .btn-primary {
    font-size: 15px;
    padding: 14px 36px;
    box-shadow: 0 0 24px rgba(37,99,235,0.35), 0 4px 12px rgba(0,0,0,0.2);
  }
  .hero-note {
    font-size: 13px;
    color: var(--text-on-dark-dim);
  }

  .proof-bar {
    margin-top: 64px;
    display: flex;
    gap: 56px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 44px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .proof-item { text-align: center; }
  .proof-val {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .proof-val .unit {
    font-size: 18px;
    color: var(--blue-bright);
    font-weight: 700;
  }
  .proof-label {
    font-size: 11px;
    color: var(--text-on-dark-dim);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 8px;
  }

  /* ===== TRANSITIONS ===== */
  .transition-dark-to-light-gray  { height: 80px; background: linear-gradient(to bottom, var(--navy), var(--bg-light)); }
  .transition-light-gray-to-white { height: 48px; background: linear-gradient(to bottom, var(--bg-light), var(--bg-white)); }
  .transition-white-to-dark       { height: 80px; background: linear-gradient(to bottom, var(--bg-white), var(--navy)); }
  .transition-dark-to-white       { height: 80px; background: linear-gradient(to bottom, var(--navy), var(--bg-white)); }
  .transition-light-to-final      { height: 80px; background: linear-gradient(to bottom, var(--bg-light), var(--navy)); }

  /* ===== PROBLEM (LIGHT GRAY) ===== */
  .problem-section { background: var(--bg-light); padding: 100px 0; }
  .problem-header  { margin-bottom: 48px; }
  .problem-header h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.03em;
  }

  .pain-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 28px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    transition: all 0.25s;
  }
  .pain-card:hover {
    border-color: var(--border-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  }
  .pain-num {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--blue);
    background: var(--blue-pale);
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .pain-text {
    font-size: 16.5px;
    color: var(--text-dark);
    line-height: 1.6;
    font-weight: 500;
    padding-top: 6px;
  }
  .pain-text .cost { color: var(--orange); font-weight: 700; }

  /* ===== HOW IT WORKS (WHITE) ===== */
  .how-section  { background: var(--bg-white); padding: 80px 0 100px; }
  .how-header   { text-align: center; margin-bottom: 64px; }
  .how-header h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.03em;
    margin-bottom: 12px;
  }
  .how-header p { font-size: 17px; color: var(--text-body); }

  .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .step-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 30px 36px;
    transition: all 0.3s;
  }
  .step-card:hover {
    border-color: var(--border-accent);
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
    transform: translateY(-4px);
  }
  .step-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 22px;
  }
  .step-icon.s1 { background: var(--blue-pale);   color: var(--blue); }
  .step-icon.s2 { background: var(--violet-pale);  color: var(--violet); }
  .step-icon.s3 { background: var(--teal-pale);    color: var(--teal); }
  .step-card h3 {
    font-size: 19px; font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .step-card p { font-size: 15px; color: var(--text-body); line-height: 1.7; }

  /* ===== COMPARISON (DARK NAVY) ===== */
  .compare-section {
    background: var(--navy);
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
  }
  .compare-section .orb {
    position: absolute;
    top: -60px; right: -80px;
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(20px);
  }
  .compare-header {
    text-align: center;
    margin-bottom: 56px;
    position: relative; z-index: 1;
  }
  .compare-header h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
  }
  .compare-header p { font-size: 17px; color: var(--text-on-dark-body); }

  .compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 940px;
    margin: 0 auto;
    position: relative; z-index: 1;
  }
  .compare-col { border-radius: var(--radius); padding: 40px 34px; }
  .compare-col.them {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .compare-col.us {
    background: var(--bg-white);
    border: 1px solid var(--border);
    position: relative;
    box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(37,99,235,0.12);
  }
  .compare-col.us::before {
    content: 'RECOMMENDED';
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--blue);
    color: #fff;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em;
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(37,99,235,0.35);
  }
  .compare-col h3 {
    font-size: 18px; font-weight: 700;
    margin-bottom: 26px;
    padding-bottom: 18px;
  }
  .compare-col.them h3 { color: var(--text-on-dark-dim); border-bottom: 1px solid rgba(255,255,255,0.06); }
  .compare-col.us   h3 { color: var(--blue); border-bottom: 1px solid var(--border); }

  .compare-row {
    display: flex; align-items: flex-start;
    gap: 10px; margin-bottom: 18px;
    font-size: 15px; line-height: 1.6;
  }
  .compare-row .icon { flex-shrink: 0; margin-top: 3px; font-size: 14px; width: 18px; text-align: center; }
  .compare-col.them .compare-row { color: var(--text-on-dark-body); }
  .compare-col.them .icon        { color: rgba(248,113,113,0.45); }
  .compare-col.us   .compare-row { color: var(--text-dark); }
  .compare-col.us   .icon        { color: var(--green); }

  .compare-price { margin-top: 28px; padding-top: 22px; font-size: 13px; }
  .compare-col.them .compare-price { border-top: 1px solid rgba(255,255,255,0.06); color: var(--text-on-dark-dim); }
  .compare-col.us   .compare-price { border-top: 1px solid var(--border); color: var(--text-muted); }
  .compare-price .amount {
    font-size: 30px; font-weight: 800;
    letter-spacing: -0.03em;
    display: block; margin-bottom: 4px;
  }
  .compare-col.them .amount { color: var(--text-on-dark-dim); text-decoration: line-through; text-decoration-color: rgba(248,113,113,0.35); }
  .compare-col.us   .amount { color: var(--blue); }

  /* ===== DELIVERABLE (WHITE) ===== */
  .deliverable-section { background: var(--bg-white); padding: 80px 0 100px; }
  .del-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px; align-items: start;
  }
  .del-text h2 {
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 800; color: var(--text-dark);
    letter-spacing: -0.03em; margin-bottom: 14px;
  }
  .del-desc { font-size: 16px; color: var(--text-body); margin-bottom: 40px; line-height: 1.75; }

  .del-feature { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
  .del-icon {
    width: 38px; height: 38px;
    background: var(--blue-pale); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 16px; color: var(--blue);
  }
  .del-feature-title  { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
  .del-feature-desc   { font-size: 14px; color: var(--text-body); line-height: 1.65; }

  .del-cards { display: flex; flex-direction: column; gap: 14px; }
  .cand-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 24px 26px;
    transition: all 0.25s;
    border-left: 3px solid var(--blue);
  }
  .cand-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.06); transform: translateY(-2px); }
  .cand-top       { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .cand-name      { font-size: 15px; font-weight: 700; color: var(--text-dark); }
  .cand-fit {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .cand-fit.strong { color: var(--teal); background: var(--teal-pale); }
  .cand-fit.good   { color: var(--blue); background: var(--blue-pale); }
  .cand-tags       { display: flex; gap: 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
  .cand-tags .check { color: var(--green); margin-right: 3px; }
  .cand-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 4px;
  }
  .cand-summary    { font-size: 14px; color: var(--text-body); line-height: 1.65; }
  .cand-note       { font-size: 13px; color: var(--text-muted); margin-top: 8px; font-style: italic; }
  .cand-card.faded { opacity: 0.3; border-left-style: dashed; }
  .cand-card.faded:hover { transform: none; box-shadow: none; }

  /* ===== CREDIBILITY (LIGHT GRAY) ===== */
  .cred-section { background: var(--bg-light); padding: 100px 0; text-align: center; }
  .cred-card {
    max-width: 640px; margin: 40px auto 0;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 52px 44px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  }
  .cred-stat { font-size: 60px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.04em; line-height: 1; }
  .cred-stat span { color: var(--blue); }
  .cred-stat-label {
    font-family: 'DM Mono', monospace;
    font-size: 12px; color: var(--text-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-top: 8px; margin-bottom: 32px;
  }
  .cred-bio {
    font-size: 16.5px; color: var(--text-body);
    line-height: 1.8; margin-bottom: 32px;
    max-width: 490px; margin-left: auto; margin-right: auto;
  }
  .cred-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    background: var(--blue-pale); border: 1px solid var(--border-accent);
    border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 600; color: var(--blue);
  }
  .cred-badge .dot {
    width: 7px; height: 7px;
    background: var(--green); border-radius: 50%;
    animation: pulse 2.5s ease-in-out infinite;
  }

  /* ===== FINAL CTA (DARK NAVY) ===== */
  .final-cta {
    background: var(--navy);
    padding: 80px 0 130px;
    text-align: center;
    position: relative; overflow: hidden;
  }
  .final-cta .glow {
    position: absolute;
    bottom: 5%; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(37,99,235,0.15) 0%, rgba(124,58,237,0.05) 45%, transparent 70%);
    pointer-events: none; filter: blur(40px);
  }
  .final-content { position: relative; z-index: 1; }
  .final-cta h2 {
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 800; color: #fff;
    letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 18px;
  }
  .final-cta h2 .accent {
    background: linear-gradient(135deg, var(--blue-bright) 0%, #818CF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .final-sub {
    font-size: 18px; color: var(--text-on-dark-body);
    margin-bottom: 44px; max-width: 480px;
    margin-left: auto; margin-right: auto; line-height: 1.75;
  }
  .final-cta .btn-primary {
    font-size: 16px; padding: 17px 44px;
    box-shadow: 0 0 28px rgba(37,99,235,0.35), 0 4px 12px rgba(0,0,0,0.2);
  }
  .final-proof {
    margin-top: 26px; font-size: 14px; color: var(--text-on-dark-dim);
  }
  .final-proof span { margin: 0 8px; opacity: 0.35; }
  .final-email { margin-top: 18px; font-size: 14px; }
  .final-email a {
    color: var(--text-on-dark-body); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.12); transition: all 0.2s;
  }
  .final-email a:hover { color: var(--blue-bright); border-color: var(--blue-bright); }

  /* ===== FOOTER ===== */
  footer {
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,0.04);
    padding: 32px 48px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: var(--text-on-dark-dim);
  }
  footer a { color: var(--text-on-dark-dim); text-decoration: none; }
  footer a:hover { color: var(--text-on-dark-body); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    nav { padding: 12px 20px; }
    .nav-right a:not(.btn-primary) { display: none; }
    .bizfirst-attr { display: none; }
    .btn-primary { padding: 9px 16px; font-size: 13px; }
    .container { padding: 0 20px; }
    .steps-grid   { grid-template-columns: 1fr; }
    .compare-grid { grid-template-columns: 1fr; }
    .compare-col.us::before { display: none; }
    .del-layout   { grid-template-columns: 1fr; }
    .proof-bar    { gap: 32px; }
    .cred-card    { padding: 40px 28px; }
    .hero-grid    { display: none; }
    .transition-dark-to-light-gray,
    .transition-light-gray-to-white,
    .transition-white-to-dark,
    .transition-dark-to-white,
    .transition-light-to-final { height: 48px; }
    footer { flex-direction: column; gap: 10px; text-align: center; padding: 24px 20px; }
  }


.sf-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px}
.sf-brand .sf-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.sf-brand .sf-logo .s{color:var(--blue-bright)}
.sf-brand p{font-size:13.5px;line-height:1.6;color:var(--text-on-dark-dim);margin-top:12px;max-width:26ch}
.sf-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-dim);margin-bottom:14px;font-weight:700}
.sf-col a{display:block;font-size:14px;color:var(--text-on-dark-body);text-decoration:none;margin-bottom:10px}
.sf-col a:hover{color:var(--blue-bright)}
.sf-bottom{max-width:1120px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--border-dark);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--text-on-dark-dim)}
.sf-bottom a{color:var(--text-on-dark-body);text-decoration:none}
.sf-grid{grid-template-columns:1fr 1fr}
.sf-grid{grid-template-columns:1fr}
@media(max-width:860px){.sf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sf-grid{grid-template-columns:1fr}}


.site-footer{background:var(--navy);color:var(--text-on-dark-body);padding:64px 24px 34px}
.sf-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px}
.sf-brand .sf-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.sf-brand .sf-logo .s{color:var(--blue-bright)}
.sf-brand p{font-size:13.5px;line-height:1.6;color:var(--text-on-dark-dim);margin-top:12px;max-width:26ch}
.sf-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-dim);margin-bottom:14px;font-weight:700}
.sf-col a{display:block;font-size:14px;color:var(--text-on-dark-body);text-decoration:none;margin-bottom:10px}
.sf-col a:hover{color:var(--blue-bright)}
.sf-bottom{max-width:1120px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--border-dark);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--text-on-dark-dim)}
.sf-bottom a{color:var(--text-on-dark-body);text-decoration:none}
@media(max-width:860px){.sf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sf-grid{grid-template-columns:1fr}}


  .faq-section{background:var(--bg-light);padding:96px 0}
  .faq-header{text-align:center;max-width:640px;margin:0 auto 48px}
  .faq-header h2{font-size:clamp(28px,4vw,40px);color:var(--text-dark);line-height:1.15;letter-spacing:-0.02em;margin-top:10px}
  .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
  .faq-item{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:22px 26px}
  .faq-item h3{font-size:17px;color:var(--text-dark);font-weight:700;margin-bottom:8px;line-height:1.35}
  .faq-item p{font-size:15px;color:var(--text-body);line-height:1.65}


  .parent-band{background:var(--navy-surface);border-top:1px solid var(--border-dark);padding:80px 24px}
  .parent-inner{max-width:840px;margin:0 auto;text-align:center}
  .parent-kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:18px}
  .parent-wordmark{display:inline-block;font-size:clamp(38px,6vw,56px);font-weight:800;letter-spacing:-.025em;color:#fff;text-decoration:none;margin-bottom:20px;line-height:1}
  .parent-wordmark .b{color:var(--blue-bright)}
  .parent-desc{font-size:18px;line-height:1.7;color:var(--text-on-dark-body);margin:0 auto 32px;max-width:660px}
  .parent-desc a{color:var(--blue-bright);text-decoration:none;font-weight:600}
  .parent-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--blue-light),var(--blue-dark));color:#fff;font-size:18px;font-weight:700;padding:18px 38px;border-radius:var(--radius-pill);text-decoration:none;box-shadow:0 10px 30px rgba(37,99,235,.35)}
  .parent-btn span{font-size:20px}

/* ===== shared content-page components ===== */
a{color:var(--blue);}
.nav-logo-wrap{display:flex;align-items:baseline;gap:11px}
.bizfirst-attr{font-size:14px;font-weight:500;color:rgba(255,255,255,0.34);text-decoration:none;letter-spacing:.01em;transition:color .2s;white-space:nowrap}
.bizfirst-attr:hover{color:rgba(255,255,255,0.62)}
@media(max-width:600px){.bizfirst-attr{display:none}}
.page-hero{position:relative;background:var(--navy);color:var(--text-on-dark);padding:132px 0 68px;overflow:hidden}
.page-hero .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(900px 500px at 70% -10%,#000,transparent 72%)}
.page-hero .orb{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.5;background:radial-gradient(circle,rgba(37,99,235,.55),transparent 62%);top:-220px;right:-120px;pointer-events:none}
.page-hero .container{position:relative}
.crumbs{font-size:13px;color:var(--text-on-dark-dim);margin-bottom:20px;font-weight:500}
.crumbs a{color:var(--text-on-dark-body);text-decoration:none}
.crumbs a:hover{color:var(--blue-bright)}
.crumbs .sep{margin:0 8px;opacity:.5}
.page-hero h1{font-size:clamp(34px,5.2vw,56px);line-height:1.06;letter-spacing:-.025em;color:#fff;font-weight:800;max-width:16ch}
.page-hero h1 .accent{color:var(--blue-bright)}
.page-hero .ph-sub{font-size:clamp(16px,2vw,20px);color:var(--text-on-dark-body);margin-top:22px;max-width:60ch;line-height:1.6}
.page-hero .ph-cta{margin-top:34px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.page-hero .ph-note{font-size:13px;color:var(--text-on-dark-dim);margin-top:14px}
.sec{padding:80px 0}
.sec.tight{padding:56px 0}
.sec.light{background:var(--bg-light)}
.sec.white{background:var(--bg-white)}
.measure{max-width:760px}
.eyebrow2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.sec h2{font-size:clamp(26px,3.6vw,38px);line-height:1.14;letter-spacing:-.02em;color:var(--text-dark);margin-bottom:18px}
.sec h3{font-size:20px;color:var(--text-dark);margin:26px 0 8px;letter-spacing:-.01em}
.prose p{font-size:17px;line-height:1.75;color:var(--text-body);margin-bottom:18px}
.prose p strong{color:var(--text-dark)}
.prose ul{list-style:none;margin:6px 0 22px}
.prose li{position:relative;padding-left:38px;font-size:16.5px;line-height:1.6;color:var(--text-body);margin-bottom:15px}
.prose li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(160deg,var(--blue-light),var(--blue-dark));box-shadow:0 3px 9px rgba(37,99,235,.32)}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:12px}
.tile{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px}
.tile .k{font-family:'DM Mono',monospace;font-size:13px;color:var(--blue);font-weight:500;margin-bottom:10px}
.tile h3{font-size:18px;color:var(--text-dark);margin:0 0 8px}
.tile p{font-size:15px;color:var(--text-body);line-height:1.6;margin:0}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.linkcard{position:relative;display:block;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s;overflow:hidden}
.linkcard::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--_ac,var(--blue));opacity:0;transition:opacity .18s}
.linkcard:hover{border-color:var(--_ac,var(--blue));transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,22,40,.09)}
.linkcard:hover::after{opacity:1}
.lc-icon{width:50px;height:50px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.lc-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.linkcard .lc-title{font-size:18px;font-weight:700;color:var(--text-dark);margin-bottom:6px}
.linkcard .lc-desc{font-size:14px;color:var(--text-muted);line-height:1.55}
.linkcard .lc-go{color:var(--blue);font-weight:700;font-size:14px;margin-top:10px;display:inline-block}
.statband{text-align:center;padding:10px 0}
.statrow{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin:0}
.statpill{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:32px 46px;font-size:15px;color:var(--text-muted);text-align:center;min-width:210px;box-shadow:0 8px 26px rgba(11,22,40,.06)}
.statpill b{display:block;font-size:44px;line-height:1;color:var(--blue);font-weight:800;letter-spacing:-.02em;margin-bottom:10px;font-family:'Plus Jakarta Sans',sans-serif}
.statnote{max-width:600px;margin:30px auto 0;font-size:16.5px;line-height:1.65;color:var(--text-body)}
/* compact comparison for content pages */
.mini-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.mini-compare .mc{border-radius:var(--radius);padding:24px;border:1px solid var(--border)}
.mini-compare .them{background:var(--bg-white)}
.mini-compare .us{background:var(--navy);border-color:transparent;color:var(--text-on-dark)}
.mini-compare .mc h3{margin:0 0 14px;font-size:17px}
.mini-compare .us h3{color:#fff}
.mini-compare .row{font-size:14.5px;padding:7px 0;line-height:1.5}
.mini-compare .them .row{color:var(--text-body)}
.mini-compare .us .row{color:var(--text-on-dark-body)}
.mini-compare .amt{margin-top:14px;font-family:'DM Mono',monospace;font-size:20px;font-weight:600}
.mini-compare .them .amt{color:var(--text-dark)}
.mini-compare .us .amt{color:var(--blue-bright)}
/* CTA band (reusable) */
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:84px 24px;position:relative;overflow:hidden}
.cta-band .glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(100px);background:radial-gradient(circle,rgba(37,99,235,.4),transparent 60%);top:-260px;left:50%;transform:translateX(-50%)}
.cta-band .inner{position:relative;max-width:640px;margin:0 auto}
.cta-band h2{font-size:clamp(28px,4vw,40px);line-height:1.12;color:#fff;letter-spacing:-.02em;margin-bottom:14px}
.cta-band h2 .accent{color:var(--blue-bright)}
.cta-band p{font-size:17px;color:var(--text-on-dark-body);margin-bottom:28px}
.cta-band .ctanote{font-size:13px;color:var(--text-on-dark-dim);margin-top:16px}
/* FAQ (shared, matches homepage) */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:22px 26px}
.faq-item h3{font-size:17px;color:var(--text-dark);font-weight:700;margin:0 0 8px;line-height:1.35}
.faq-item p{font-size:15px;color:var(--text-body);line-height:1.65;margin:0}
/* Parent (BizFirst) band */
.parent-band{background:var(--navy-surface);border-top:1px solid var(--border-dark);padding:72px 24px;text-align:center}
.parent-band .pk{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:14px}
.parent-band .pw{display:inline-block;font-size:clamp(32px,5vw,46px);font-weight:800;letter-spacing:-.025em;color:#fff;text-decoration:none;margin-bottom:16px;line-height:1}
.parent-band .pw .b{color:var(--blue-bright)}
.parent-band .pd{font-size:16px;line-height:1.7;color:var(--text-on-dark-body);max-width:620px;margin:0 auto 26px}
.parent-band .pd a{color:var(--blue-bright);text-decoration:none;font-weight:600}
.parent-band .pbtn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--blue-light),var(--blue-dark));color:#fff;font-size:16px;font-weight:700;padding:15px 32px;border-radius:var(--radius-pill);text-decoration:none;box-shadow:0 10px 30px rgba(37,99,235,.32)}
/* Site footer (directory) */
.site-footer{background:var(--navy);color:var(--text-on-dark-body);padding:64px 24px 34px}
.sf-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px}
.sf-brand .sf-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.sf-brand .sf-logo .s{color:var(--blue-bright)}
.sf-brand p{font-size:13.5px;line-height:1.6;color:var(--text-on-dark-dim);margin-top:12px;max-width:26ch}
.sf-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-dim);margin-bottom:14px;font-weight:700}
.sf-col a{display:block;font-size:14px;color:var(--text-on-dark-body);text-decoration:none;margin-bottom:10px}
.sf-col a:hover{color:var(--blue-bright)}
.sf-bottom{max-width:1120px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--border-dark);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--text-on-dark-dim)}
.sf-bottom a{color:var(--text-on-dark-body);text-decoration:none}
@media(max-width:860px){.sf-grid{grid-template-columns:1fr 1fr}.mini-compare{grid-template-columns:1fr}}
@media(max-width:560px){.sf-grid{grid-template-columns:1fr}.page-hero{padding:112px 0 54px}}


/* ============================================================
   HireSelect v2 — edgy refresh: Space Grotesk + AI gradient
   (appended override block; cascades to all pages)
   ============================================================ */
:root{ --cyan:#2FE0D2; --hs-grad:linear-gradient(100deg, var(--blue-bright) 0%, #7C82F5 40%, var(--cyan) 90%); }

h1, h2, h3, h4,
.hero h1, .page-hero h1, .sec h2, .cta-band h2, .final-cta h2,
.faq-header h2, .compare-col h3, .mc h3,
.nav-logo, .sf-logo{
  font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;
  letter-spacing:-0.025em;
}
.proof-val, .cred-stat, .statpill b, .mini-compare .amt{
  font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;
}

/* Gradient accent text — used sparingly on .accent spans */
.hero h1 .accent, .page-hero h1 .accent, .sec h2 .accent,
.cta-band h2 .accent, .final-cta h2 .accent{
  background:var(--hs-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Cyan mono eyebrow on dark sections */
.section-tag.dark{ color:var(--cyan); }

/* Primary button -> gradient + glow */
.btn-primary{
  background:linear-gradient(100deg, var(--blue) 0%, #6D5EF6 100%) !important;
  box-shadow:0 12px 34px rgba(37,99,235,.40), inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border:none !important;
}
.btn-primary:hover{
  background:linear-gradient(100deg, var(--blue-dark) 0%, #5B4CE6 100%) !important;
  box-shadow:0 16px 46px rgba(37,99,235,.55) !important;
  transform:translateY(-1px);
}