/* ==========================================================================
   TuConnect · styles.css
   Design tokens, reset, base typography, layout primitives, utilities.
   Shared by every page. Load order: styles.css → components.css → pages.css
   --------------------------------------------------------------------------
   This file reconciles the original prototype's tokens with the accessible
   values introduced for the AI Resume Builder. The brand palette is preserved
   exactly; the only additions are ACCESSIBLE VARIANTS for the colours that
   failed WCAG AA as text (documented inline). Nothing visual on the existing
   Home / Grow / Hire pages changes except that low-contrast text becomes
   legible.
/* ==========================================================================
   Self-Hosted Typography — Manrope WOFF2
   ========================================================================== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-variable.woff2') format('woff2-variations'),
       url('../fonts/manrope-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800.woff2') format('woff2');
}

:root {
  /* ---- Brand palette (EXACTLY UNCHANGED in both themes) ---- */
  --blue: #3F29CF;          /* primary brand · Grow */
  --blue-dark: #2A1B95;     /* hover / pressed */
  --blue-ink: #3F29CF;      /* brand blue as TEXT · 8.64:1 on white */
  --green: #3CAC1A;         /* brand green */
  --pink: #FF006B;          /* brand pink */

  /* ---- Light Theme Defaults ---- */
  --blue-tint: #EFECFC;
  --blue-tint-2: #E1DBF9;
  --green-tint: #E7F5E1;

  --ink: #15111F;
  --ink-soft: #5B5670;
  --ink-faint: #8B87A0;

  --paper: #FFFFFF;
  --paper-soft: #F7F6FC;
  --paper-card: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F7F6FC;
  --border-color: #E6E3F3;
  --nav-bg: rgba(255, 255, 255, .86);
  --mobile-nav-bg: #FFFFFF;

  --line: #E6E3F3;
  --line-strong: #CFC9E8;
  --border-subtle: #E4E2ED;

  --green-ink: #27730E;
  --pink-ink: #D10058;

  --product-grow: var(--blue);
  --product-hire: var(--green-ink);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-tertiary: var(--ink-soft);
  --text-on-dark: #FFFFFF;
  --text-on-dark-soft: rgba(255, 255, 255, .80);

  /* ---- Dedicated Brand & Gradient Section Semantic Tokens ---- */
  --text-on-brand-primary: #FFFFFF;
  --text-on-brand-secondary: rgba(255, 255, 255, .85);
  --text-on-brand-muted: rgba(255, 255, 255, .70);

  /* ---- Dedicated Footer Semantic Custom Properties ---- */
  --footer-bg: #15111F;
  --footer-heading: #FFFFFF;
  --footer-link: rgba(255, 255, 255, .82);
  --footer-link-hover: #FFFFFF;
  --footer-text: rgba(255, 255, 255, .72);
  --footer-muted: rgba(255, 255, 255, .55);
  --footer-border: rgba(255, 255, 255, .14);

  /* ---- Dedicated Navigation Semantic Custom Properties ---- */
  --nav-background: rgba(255, 255, 255, .86);
  --nav-border: #E6E3F3;
  --nav-logo-text: var(--blue);
  --nav-text-muted: #5B5670;
  --nav-text-active: #3F29CF;
  --nav-link-bg-active: #EFECFC;
  --nav-link-bg-hover: #EFECFC;
  --nav-secondary-button-bg: transparent;
  --nav-secondary-button-border: #CFC9E8;
  --nav-secondary-button-text: #15111F;
  --nav-secondary-button-hover-bg: #EFECFC;
  --nav-secondary-button-hover-border: #3F29CF;
  --nav-secondary-button-hover-text: #3F29CF;
  --nav-mobile-bg: #FFFFFF;

  /* ---- Dedicated Button Semantic Custom Properties ---- */
  --btn-primary-bg: #3F29CF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover-bg: #2A1B95;
  --btn-primary-shadow: 0 12px 32px -12px rgba(63, 41, 207, .25);

  --btn-secondary-bg: #F7F6FC;
  --btn-secondary-text: #15111F;
  --btn-secondary-border: #E6E3F3;
  --btn-secondary-hover-bg: #EFECFC;
  --btn-secondary-hover-border: #3F29CF;

  --btn-ghost-text: #15111F;
  --btn-ghost-border: #CFC9E8;
  --btn-ghost-hover-bg: #EFECFC;
  --btn-ghost-hover-text: #3F29CF;
  --btn-ghost-hover-border: #3F29CF;

  --btn-dark-bg: #15111F;
  --btn-dark-text: #FFFFFF;
  --btn-dark-hover-bg: #2A1B95;

  --btn-on-dark-bg: #FFFFFF;
  --btn-on-dark-text: #3F29CF;
  --btn-on-dark-hover-bg: #EFECFC;
  --btn-on-dark-hover-text: #2A1B95;

  --btn-outline-light-border: rgba(255, 255, 255, .50);
  --btn-outline-light-text: #FFFFFF;
  --btn-outline-light-hover-bg: rgba(255, 255, 255, .14);

  /* ---- Dedicated Card & Surface Semantic Custom Properties ---- */
  --surface-1: #FFFFFF;
  --surface-2: #F7F6FC;
  --surface-3: #FFFFFF;

  --surface-page: #FFFFFF;
  --surface-section: #F7F6FC;
  --surface-alt: #15111F;

  --card-background: #FFFFFF;
  --card-border: #E4E2ED;
  --card-border-hover: var(--blue-tint-2);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  --stat-primary: var(--blue);
  --stat-secondary: var(--green-ink);

  /* ---- Dedicated Category Badge Semantic Custom Properties ---- */
  --badge-text: #15111F;
  --badge-text-on-dark: #FFFFFF;
  --badge-bg-purple: #EFECFC;
  --badge-bg-green: #E6F9F2;
  --badge-border: #CFC9E8;
  --badge-border-green: #B2F0D6;

  /* ---- Dedicated Call-to-Action (CTA) Semantic Custom Properties ---- */
  --surface-cta: #201A38;
  /* The closing CTA band. Brand indigo, deliberately identical in both themes:
     this is the moment we ask for the click, so it stays on brand colour rather
     than following the page surface. */
  --surface-cta-brand: linear-gradient(150deg, var(--blue) 0%, var(--blue-dark) 100%);
  --surface-cta-border: rgba(63, 41, 207, .40);
  --cta-heading: #FFFFFF;
  --cta-body: rgba(255, 255, 255, .84);

  --success: var(--green-ink);   --success-surface: var(--green-tint);
  --warning: #B45309;            --warning-surface: #FEF3C7;
  --danger: #C81E1E;             --danger-surface: #FEE9E9;
  --focus-ring: var(--pink-ink);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(21, 17, 31, .04), 0 1px 1px rgba(21, 17, 31, .03);
  --shadow-md: 0 12px 32px -12px rgba(63, 41, 207, .18);
  --shadow-lg: 0 24px 60px -20px rgba(63, 41, 207, .28);

  --font-display: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1260px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Dark Theme Custom Properties (Explicit & System Fallback) ---- */
[data-theme="dark"] {
  --blue-ink: #A395FF;       /* brand blue as TEXT on dark · 6.55:1 on --paper-card */
  --blue-tint: rgba(63, 41, 207, .26);
  --blue-tint-2: rgba(63, 41, 207, .40);
  --green-tint: rgba(60, 172, 26, .20);

  --ink: #F4F3F8;
  --ink-soft: #A9A4BA;
  --ink-faint: #7A758B;

  --paper: #0F0C1B;          /* Layer 0: Deep Charcoal Page BG */
  --paper-soft: #18142B;     /* Layer 1: Section BG */
  --paper-card: #201A38;     /* Layer 2: Elevated Card Surface */
  --bg-surface: #201A38;
  --bg-subtle: rgba(255, 255, 255, .06);
  --border-color: rgba(255, 255, 255, .12);
  --nav-bg: rgba(15, 12, 27, .88);
  --mobile-nav-bg: #141024;

  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --border-subtle: rgba(255, 255, 255, .12);

  --green-ink: #4ADE80;
  --pink-ink: #FF4D94;

  --text-primary: #F4F3F8;
  --text-secondary: #B0ACB8;
  --text-tertiary: #8E899D;

  --footer-bg: #0A0814;
  --footer-heading: #FFFFFF;
  --footer-link: rgba(255, 255, 255, .84);
  --footer-link-hover: #FFFFFF;
  --footer-text: rgba(255, 255, 255, .72);
  --footer-muted: rgba(255, 255, 255, .58);
  --footer-border: rgba(255, 255, 255, .14);

  --nav-background: rgba(15, 12, 27, .88);
  --nav-border: rgba(255, 255, 255, .12);
  --nav-logo-text: #FFFFFF;
  --nav-text-muted: rgba(255, 255, 255, .76);
  --nav-text-active: #FFFFFF;
  --nav-link-bg-active: rgba(63, 41, 207, .32);
  --nav-link-bg-hover: rgba(255, 255, 255, .08);
  --nav-secondary-button-bg: rgba(255, 255, 255, .05);
  --nav-secondary-button-border: rgba(255, 255, 255, .22);
  --nav-secondary-button-text: #FFFFFF;
  --nav-secondary-button-hover-bg: rgba(255, 255, 255, .12);
  --nav-secondary-button-hover-border: #FFFFFF;
  --nav-secondary-button-hover-text: #FFFFFF;
  --nav-mobile-bg: #141024;

  --btn-primary-bg: #3F29CF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover-bg: #5B47EB;
  --btn-primary-shadow: 0 12px 32px -12px rgba(63, 41, 207, .60);

  --btn-secondary-bg: #201A38;
  --btn-secondary-text: #F4F3F8;
  --btn-secondary-border: rgba(255, 255, 255, .18);
  --btn-secondary-hover-bg: rgba(63, 41, 207, .32);
  --btn-secondary-hover-border: #3F29CF;

  --btn-ghost-text: #F4F3F8;
  --btn-ghost-border: rgba(255, 255, 255, .20);
  --btn-ghost-hover-bg: rgba(255, 255, 255, .12);
  --btn-ghost-hover-text: #FFFFFF;
  --btn-ghost-hover-border: rgba(255, 255, 255, .40);

  --btn-dark-bg: #2A2248;
  --btn-dark-text: #FFFFFF;
  --btn-dark-hover-bg: #3F29CF;

  --btn-on-dark-bg: #FFFFFF;
  --btn-on-dark-text: #3F29CF;
  --btn-on-dark-hover-bg: #EFECFC;
  --btn-on-dark-hover-text: #2A1B95;

  --btn-outline-light-border: rgba(255, 255, 255, .50);
  --btn-outline-light-text: #FFFFFF;
  --btn-outline-light-hover-bg: rgba(255, 255, 255, .16);

  --surface-1: #0F0C1B;
  --surface-2: #18142B;
  --surface-3: #201A38;

  --surface-page: #0F0C1B;
  --surface-section: #18142B;
  --surface-alt: #141024;

  --card-background: #201A38;
  --card-border: rgba(255, 255, 255, .12);
  --card-border-hover: rgba(63, 41, 207, .50);
  --card-shadow: 0 4px 16px rgba(0, 0, 0, .40);
  --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, .60);

  --stat-primary: #818CF8;
  --stat-secondary: #4ADE80;

  --badge-text: #FFFFFF;
  --badge-text-on-dark: #FFFFFF;
  --badge-bg-purple: rgba(63, 41, 207, .32);
  --badge-bg-green: rgba(60, 172, 26, .28);
  --badge-border: rgba(63, 41, 207, .50);
  --badge-border-green: rgba(60, 172, 26, .45);

  --surface-cta: #201A38;
  --surface-cta-border: rgba(63, 41, 207, .50);
  --cta-heading: #FFFFFF;
  --cta-body: rgba(255, 255, 255, .84);   /* CTA band is brand-constant, so its text is too */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, .40);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .60);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue-ink: #A395FF;       /* brand blue as TEXT on dark · 6.55:1 on --paper-card */
    --blue-tint: rgba(63, 41, 207, .26);
    --blue-tint-2: rgba(63, 41, 207, .40);
    --green-tint: rgba(60, 172, 26, .20);

    --ink: #F4F3F8;
    --ink-soft: #A9A4BA;
    --ink-faint: #7A758B;

    --paper: #0F0C1B;
    --paper-soft: #18142B;
    --paper-card: #201A38;
    --bg-surface: #201A38;
    --bg-subtle: rgba(255, 255, 255, .06);
    --border-color: rgba(255, 255, 255, .12);
    --nav-bg: rgba(15, 12, 27, .88);
    --mobile-nav-bg: #141024;

    --line: rgba(255, 255, 255, .10);
    --line-strong: rgba(255, 255, 255, .18);
    --border-subtle: rgba(255, 255, 255, .12);

    --green-ink: #4ADE80;
    --pink-ink: #FF4D94;

    --text-primary: #F4F3F8;
    --text-secondary: #B0ACB8;
    --text-tertiary: #8E899D;

    --footer-bg: #0A0814;
    --footer-heading: #FFFFFF;
    --footer-link: rgba(255, 255, 255, .84);
    --footer-link-hover: #FFFFFF;
    --footer-text: rgba(255, 255, 255, .72);
    --footer-muted: rgba(255, 255, 255, .58);
    --footer-border: rgba(255, 255, 255, .14);

    --nav-background: rgba(15, 12, 27, .88);
    --nav-border: rgba(255, 255, 255, .12);
    --nav-logo-text: #FFFFFF;
    --nav-text-muted: rgba(255, 255, 255, .76);
    --nav-text-active: #FFFFFF;
    --nav-link-bg-active: rgba(63, 41, 207, .32);
    --nav-link-bg-hover: rgba(255, 255, 255, .08);
    --nav-secondary-button-bg: rgba(255, 255, 255, .05);
    --nav-secondary-button-border: rgba(255, 255, 255, .22);
    --nav-secondary-button-text: #FFFFFF;
    --nav-secondary-button-hover-bg: rgba(255, 255, 255, .12);
    --nav-secondary-button-hover-border: #FFFFFF;
    --nav-secondary-button-hover-text: #FFFFFF;
    --nav-mobile-bg: #141024;

    --btn-primary-bg: #3F29CF;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover-bg: #5B47EB;
    --btn-primary-shadow: 0 12px 32px -12px rgba(63, 41, 207, .60);

    --btn-secondary-bg: #201A38;
    --btn-secondary-text: #F4F3F8;
    --btn-secondary-border: rgba(255, 255, 255, .18);
    --btn-secondary-hover-bg: rgba(63, 41, 207, .32);
    --btn-secondary-hover-border: #3F29CF;

    --btn-ghost-text: #F4F3F8;
    --btn-ghost-border: rgba(255, 255, 255, .20);
    --btn-ghost-hover-bg: rgba(255, 255, 255, .12);
    --btn-ghost-hover-text: #FFFFFF;
    --btn-ghost-hover-border: rgba(255, 255, 255, .40);

    --btn-dark-bg: #2A2248;
    --btn-dark-text: #FFFFFF;
    --btn-dark-hover-bg: #3F29CF;

    --btn-on-dark-bg: #FFFFFF;
    --btn-on-dark-text: #3F29CF;
    --btn-on-dark-hover-bg: #EFECFC;
    --btn-on-dark-hover-text: #2A1B95;

    --btn-outline-light-border: rgba(255, 255, 255, .50);
    --btn-outline-light-text: #FFFFFF;
    --btn-outline-light-hover-bg: rgba(255, 255, 255, .16);

    --surface-1: #0F0C1B;
    --surface-2: #18142B;
    --surface-3: #201A38;

    --surface-page: #0F0C1B;
    --surface-section: #18142B;
    --surface-alt: #141024;

    --card-background: #201A38;
    --card-border: rgba(255, 255, 255, .12);
    --card-border-hover: rgba(63, 41, 207, .50);
    --card-shadow: 0 4px 16px rgba(0, 0, 0, .40);
    --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, .60);

    --stat-primary: #818CF8;
    --stat-secondary: #4ADE80;

    --badge-text: #FFFFFF;
    --badge-text-on-dark: #FFFFFF;
    --badge-bg-purple: rgba(63, 41, 207, .32);
    --badge-bg-green: rgba(60, 172, 26, .28);
    --badge-border: rgba(63, 41, 207, .50);
    --badge-border-green: rgba(60, 172, 26, .45);

    --surface-cta: #201A38;
    --surface-cta-border: rgba(63, 41, 207, .50);
    --cta-heading: #FFFFFF;
    --cta-body: rgba(255, 255, 255, .84);   /* CTA band is brand-constant, so its text is too */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, .40);
    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .60);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
html{
  scroll-behavior:smooth;
  box-sizing:border-box;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:88px;
}
*,*:before,*:after{box-sizing:inherit;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100vw;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  letter-spacing:0;                 /* Manrope reads best with neutral body tracking */
  color:var(--text-primary);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;   /* guard: decorative glows/gradients never cause h-scroll */
  word-break:break-word;
  overflow-wrap:break-word;
}

h1,h2,h3,h4,h5{font-family:var(--font-display);margin:0;letter-spacing:-.018em;line-height:1.12;font-weight:700;}
h1{font-size:clamp(28px,6vw,48px);}
h2{font-size:clamp(22px,4.5vw,36px);}
h3{font-size:clamp(18px,3.5vw,24px);}

p{margin:0;}
blockquote{margin:0;text-align:left;font-style:normal;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
:target{scroll-margin-top:96px;}

/* Prevent iOS Safari auto-zoom on form inputs */
@media (max-width:768px){
  input,textarea,select{font-size:16px!important;}
}

/* ==========================================================================
   Global focus — accessible, non-colour-dependent
   ========================================================================== */
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:8px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
@media (max-width:1024px){
  .wrap{padding:0 24px;}
}
@media (max-width:600px){
  .wrap{padding:0 20px;}
}
@media (max-width:375px){
  .wrap{padding:0 16px;}
}

/* On very large desktops, let the container grow a little so the page uses the
   available width without leaving huge empty gutters — capped so text columns
   never become uncomfortably long. Scoped overrides (proof testimonials, CTA
   banners) keep their own explicit widths. */
@media (min-width:1728px){
  .wrap{max-width:1340px;}
}
.section{padding:var(--space-20) 0;}
.section--tight{padding:72px 0;}
@media (max-width:768px){
  .section{padding:64px 0;}
  .section--tight{padding:48px 0;}
}
@media (max-width:480px){
  .section{padding:48px 0;}
  .section--tight{padding:36px 0;}
}
.section--soft{background:var(--paper-soft);}
.section--dark{background:var(--paper-soft);color:var(--text-primary);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--text-primary);}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:16px;top:-64px;z-index:200;
  padding:12px 20px;background:var(--ink);color:#fff;
  border-radius:12px;font-weight:600;
  transition:top var(--duration-fast) var(--ease-out);
}
.skip-link:focus{top:16px;}

/* ==========================================================================
   Scroll reveal — progressive enhancement.
   Content is visible by default; JS adds .js to <html>, which arms the
   animation. Without JS (and for AI crawlers) everything simply shows.
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);}
.js .reveal.in-view{opacity:1;transform:none;}
.js .reveal-1{transition-delay:80ms;}
.js .reveal-2{transition-delay:160ms;}
.js .reveal-3{transition-delay:240ms;}

/* ==========================================================================
   Reduced motion — global
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none;}
}