/* ============================================
   Cauta Solutions Group — careers.cautagroup.com
   style.css

   Self-contained, like every other marketing package here: Cloudflare Pages
   serves these files directly, so there is no build step and no shared
   stylesheet to import across origins. The tokens, reset, buttons, navbar,
   hero and footer are deliberately identical to packages/website-csg so the
   careers subdomain reads as the same company — the sections below the navbar
   are the part that is specific to hiring.
   ============================================ */

:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #EEF2FF;
  --accent: #7C3AED;
  --accent-cyan: #22D3EE;
  --text: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --bg: #FFFFFF;
  --bg-alt: #F8FAFC;
  --bg-dark: #0B1220;
  --border: #E5E7EB;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow: 0 4px 6px -1px rgba(15,23,42,0.07), 0 2px 4px -2px rgba(15,23,42,0.05);
  --shadow-lg: 0 20px 25px -5px rgba(15,23,42,0.10), 0 8px 10px -6px rgba(15,23,42,0.05);
  --gradient: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary) 45%, var(--accent) 100%);
  --transition: 0.2s ease;
  --max-width: 1160px;
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
html, body { overflow-x: hidden; width: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; }

/* ============ UTILITIES ============ */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
/* The second line of the hero headline. Solid brand blue rather than a
   gradient: it sits at the largest type size on the site, where a
   three-stop gradient reads as decoration and costs contrast on the
   lighter end. The --gradient token is still used elsewhere. */
.hero-accent { color: var(--primary); }
/* No eyebrow pill above a section heading — the h2 opens the block itself. */
.section-header { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.section-header h2 { font-size: 2.25rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.02em; }
.section-header p { color: var(--text-secondary); font-size: 1.08rem; }
.section-alt { background: var(--bg-alt); }
.section-foot { text-align: center; margin-top: 36px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; padding: 10px 24px;
  border-radius: 10px; cursor: pointer; transition: all var(--transition);
  border: 2px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* ============ NAVBAR ============ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: all 0.3s;
}
.navbar.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { height: 40px; width: auto; flex-shrink: 0; }
/* "Cauta Solutions Group" plus a "Careers" tag, so a visitor landing on this
   subdomain from a job board knows whose careers site they are on. */
.brand-word { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text); }
.brand-sub {
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary); border-left: 1px solid var(--border); padding-left: 10px;
}
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--text-secondary); transition: color var(--transition); }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
/* Language switcher — same shape as the group site's, so the two read as one
   navigation even though they are separate Pages projects. */
.nav-links a.nav-lang {
  display: inline-flex; align-items: center; font-weight: 600;
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
}
.nav-links a.nav-lang:hover { border-color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s; }

/* ============ HERO ============ */
.hero { position: relative; padding: 140px 0 84px; overflow: hidden; }
.hero-compact { padding: 130px 0 56px; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-gradient {
  position: absolute; top: -240px; right: -180px; width: 820px; height: 820px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.10) 0%, rgba(124,58,237,0.06) 45%, transparent 72%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 72%);
}
.hero-content { position: relative; text-align: center; max-width: 820px; margin: 0 auto; }
.hero h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.08; margin-bottom: 22px; letter-spacing: -0.03em; }
.hero-compact h1 { font-size: 2.6rem; }
.hero-subtitle { font-size: 1.18rem; color: var(--text-secondary); max-width: 660px; margin: 0 auto 36px; line-height: 1.7; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Hero search — the first thing a candidate wants is the box that takes them
   to the board, so it sits above the fold and submits straight to jobs.html. */
.hero-search { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 18px; }
.hero-search input {
  flex: 1; padding: 15px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); font-size: 1rem; box-shadow: var(--shadow-sm); color: var(--text);
}
.hero-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.hero-hint { font-size: 0.88rem; color: var(--text-muted); }
.hero-hint a { color: var(--primary); font-weight: 600; }

/* ============ STATS BAND ============ */
.stats { padding: 48px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat strong { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; }
.stat span { color: var(--text-secondary); font-size: 0.9rem; }

/* ============ VALUE CARDS ============ */
.features { padding: 92px 0; }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.feature-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; transition: all 0.3s;
}
.feature-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.feature-icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; background: var(--icon-bg); color: var(--icon-color);
}
.feature-icon.fi-blue   { --icon-bg: #EFF6FF; --icon-color: #2563EB; }
.feature-icon.fi-purple { --icon-bg: #F5F3FF; --icon-color: #7C3AED; }
.feature-icon.fi-cyan   { --icon-bg: #ECFEFF; --icon-color: #0891B2; }
.feature-icon.fi-gold   { --icon-bg: #FFFBEB; --icon-color: #D97706; }
.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.feature-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; }

/* ============ BUILD / ENHANCE / MAINTAIN ============
   The three stages of a product's life. Each card borrows the accent its
   matching badge uses on a role, so the colour means the same in both places. */
.stages { padding: 92px 0; }
.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stage-card {
  background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--stage-color, var(--primary));
  border-radius: var(--radius); padding: 28px; transition: all 0.3s;
}
.stage-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.stage-build   { --stage-color: #2563EB; }
.stage-enhance { --stage-color: #7C3AED; }
.stage-maintain{ --stage-color: #0891B2; }
.stage-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--stage-color); margin-bottom: 10px;
}
.stage-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.stage-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; margin-bottom: 14px; }
.stage-link { font-size: 0.88rem; font-weight: 600; color: var(--stage-color); }
.stage-link:hover { text-decoration: underline; }

/* ============ BROWSE BY TEAM ============
   Rendered from the live board, so a tile only exists while that team is
   actually hiring and its count is never a number someone forgot to update. */
.teams { padding: 92px 0; }
.teams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.team-tile {
  display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; transition: all 0.3s;
}
.team-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.team-tile h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.team-tile p { color: var(--text-secondary); font-size: 0.9rem; }
.team-tile .team-count { color: var(--primary); font-weight: 700; }

/* ============ ROLES BOARD ============ */
.roles { padding: 92px 0; }
.roles-filters {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 14px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px;
}
.roles-filter { display: flex; flex-direction: column; gap: 6px; }
.roles-filter span { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.roles-filter input, .roles-filter select {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 0.92rem;
}
.roles-filter input:focus, .roles-filter select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.roles-count { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 24px; }
.roles-empty, .roles-closed { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; text-align: center; padding: 24px 0; }
.roles-closed {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 28px;
}
.roles-closed-cta { color: var(--text-muted); font-size: 0.92rem; margin-top: 10px; }
.roles-empty a, .roles-closed a { color: var(--primary); font-weight: 600; }

.role-group { margin-bottom: 36px; }
.role-group-title {
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.role-group-title span { color: var(--primary); }

/* One <details> per role: the whole board arrives in a single fetch, so
   opening a role costs nothing and two can be compared side by side. */
.role-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 12px; transition: border-color var(--transition), box-shadow var(--transition);
}
.role-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.role-card[open] { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.role-card summary { cursor: pointer; list-style: none; }
.role-card summary::-webkit-details-marker { display: none; }
.role-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.role-head h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 6px; }
.role-summary { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; max-width: 62ch; }
.role-badges { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.badge {
  font-size: 0.72rem; font-weight: 600; padding: 4px 12px; border-radius: 100px;
  background: var(--bg-alt); color: var(--text-secondary); border: 1px solid var(--border); white-space: nowrap;
}
.badge-stage { border: none; color: #fff; }
.badge-build    { background: #2563EB; }
.badge-enhance  { background: #7C3AED; }
.badge-maintain { background: #0891B2; }
.role-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.role-meta span {
  font-size: 0.78rem; color: var(--text-muted);
  background: var(--bg-alt); border-radius: 8px; padding: 3px 10px;
}
.role-body { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px; }
.role-body h4 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; }
.role-body ul { margin-bottom: 20px; }
.role-body li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65;
}
.role-body li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.role-stack { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 20px; }
/* Shown on the French edition when a role's long-form copy has not been
   translated yet: the detail below is in English, and saying so is better than
   letting a French reader wonder whether the page broke. */
.role-untranslated {
  font-size: 0.85rem; color: var(--text-muted); background: var(--bg-alt);
  border-left: 3px solid var(--primary); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 18px;
}
.role-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.role-share {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
}
.role-share:hover { color: var(--primary); }

/* Compact card used for the "latest roles" strip on the home page. */
.latest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.latest-card {
  display: block; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; transition: all 0.3s;
}
.latest-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.latest-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.latest-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin-bottom: 12px; }

/* ============ PROCESS ============ */
.process { padding: 92px 0; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.process-step { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.process-num {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--gradient);
  color: #fff; font-weight: 800; font-size: 0.95rem; margin-bottom: 14px;
}
.process-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.process-step p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }

/* ============ PERKS ============ */
.perks { padding: 92px 0; }
.perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.perk { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.perk strong { display: block; font-size: 0.95rem; margin-bottom: 6px; }
.perk span { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.55; }

/* ============ PROSE (life page) ============ */
.prose { max-width: 760px; margin: 0 auto; }
.prose h3 { font-size: 1.3rem; font-weight: 800; margin: 36px 0 12px; letter-spacing: -0.01em; }
.prose p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.75; margin-bottom: 14px; }
.prose ul { margin-bottom: 18px; }
.prose li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  color: var(--text-secondary); font-size: 1rem; line-height: 1.7;
}
.prose li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.prose a { color: var(--primary); font-weight: 600; }

/* ============ FAQ ============ */
.faq { padding: 92px 0; }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 12px; background: var(--bg); }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] { border-color: var(--primary); }
.faq-item p { color: var(--text-secondary); font-size: 0.96rem; line-height: 1.7; margin-top: 12px; }
.faq-item a { color: var(--primary); font-weight: 600; }

/* ============ TALENT POOL CTA ============ */
.talent { padding: 84px 0; }
.talent-card {
  background: var(--bg-dark); color: #fff; border-radius: var(--radius-lg);
  padding: 48px; text-align: center; box-shadow: var(--shadow-lg);
}
.talent-card h2 { font-size: 2rem; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.02em; }
.talent-card p { color: rgba(255,255,255,0.75); font-size: 1.02rem; line-height: 1.7; max-width: 560px; margin: 0 auto 26px; }
.talent-card .btn-outline { color: #fff; border-color: rgba(255,255,255,0.35); }
.talent-card .btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }

/* ============ APPLY ============ */
.apply { padding: 92px 0; }
.apply-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.apply-intro h2 { font-size: 2.25rem; font-weight: 800; line-height: 1.2; margin: 12px 0 20px; letter-spacing: -0.02em; }
.apply-intro p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.7; margin-bottom: 18px; }
.apply-note { font-size: 0.9rem !important; color: var(--text-muted) !important; line-height: 1.65 !important; }
.apply-note strong { color: var(--text-secondary); }
.apply-note a { color: var(--primary); }
.apply-form-wrapper {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow);
}
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.form-group .optional { font-weight: 400; color: var(--text-muted); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-alt); transition: border-color var(--transition), box-shadow var(--transition); color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); background: var(--bg);
}
.form-group textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-hint { display: block; margin-top: 5px; font-size: 0.78rem; color: var(--text-muted); }
.apply-form input[type="file"] {
  border-style: dashed; background: var(--bg-alt); font-size: 0.88rem;
  color: var(--text-secondary); cursor: pointer; padding: 10px 12px;
}
.apply-form input[type="file"]:hover { border-color: var(--primary); }
.apply-consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px;
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; cursor: pointer;
}
.apply-consent input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.form-note { margin-top: 12px; font-size: 0.85rem; text-align: center; min-height: 1.2em; }
.form-note.ok { color: #16A34A; }
.form-note.err { color: #DC2626; }
.apply-success { text-align: center; padding: 20px 0; }
.apply-success h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 12px; }
.apply-success p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.7; }

/* ============ FOOTER ============ */
.footer { background: var(--bg); color: var(--text-secondary); padding: 68px 0 34px; border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-brand .footer-logo { margin-bottom: 16px; }
.footer-brand .brand-word { color: var(--text); }
.footer-logo .logo-mark { height: 50px; }
.footer-brand p { font-size: 0.92rem; line-height: 1.65; max-width: 340px; }
.footer-links h4 { color: var(--text); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.footer-links a { display: block; font-size: 0.9rem; padding: 4px 0; transition: color var(--transition); }
.footer-links a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; text-align: center; }
.footer-bottom p { font-size: 0.8rem; color: var(--text-muted); }

/* ============ 404 ============ */
.notfound { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 140px 24px 80px; }
.notfound h1 { font-size: 3rem; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.02em; }
.notfound p { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 28px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .nav-links {
    position: fixed; top: 72px; left: 0; right: 0;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    flex-direction: column; gap: 0; padding: 8px 24px 20px; border-bottom: 1px solid var(--border);
    transform: translateY(-140%); transition: transform 0.3s; box-shadow: var(--shadow);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 1rem; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .brand-sub { display: none; }
  .hero h1 { font-size: 2.6rem; }
  .features-grid, .stage-grid, .process-grid, .latest-grid { grid-template-columns: 1fr 1fr; }
  .teams-grid, .perks-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .roles-filters { grid-template-columns: 1fr 1fr; }
  .apply-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .brand-word { font-size: 0.95rem; }
  .hero { padding: 124px 0 64px; }
  .hero h1, .hero-compact h1 { font-size: 2.1rem; }
  .hero-subtitle { font-size: 1.04rem; }
  .section-header h2, .apply-intro h2, .talent-card h2 { font-size: 1.8rem; }
  .features-grid, .stage-grid, .process-grid, .latest-grid,
  .teams-grid, .perks-grid, .stats-grid, .roles-filters, .form-row { grid-template-columns: 1fr; }
  .hero-search { flex-direction: column; }
  .apply-form-wrapper, .talent-card { padding: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .role-badges { width: 100%; }
}