/* ============================================================
   BeyondCV — style.css
   Design system: DM Sans · Green #2D5F2E · Offwhite #F6FAF2
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:       #2D5F2E;
  --green-mid:   #3D7A3E;
  --green-light: #7AB648;
  --green-pale:  #EBF5E1;
  --green-faint: #F4FAF0;
  --mint:        #C8E6A0;
  --amber:       #E8A020;
  --amber-pale:  #FEF6E7;
  --ink:         #1A2E1A;
  --ink-80:      rgba(26,46,26,0.80);
  --ink-60:      rgba(26,46,26,0.60);
  --ink-30:      rgba(26,46,26,0.30);
  --ink-10:      rgba(26,46,26,0.08);
  --red:         #C0392B;
  --white:       #FFFFFF;
  --offwhite:    #F6FAF2;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   100px;
  --shadow-sm:   0 2px 12px rgba(26,46,26,0.07);
  --shadow-md:   0 6px 32px rgba(26,46,26,0.10);
  --shadow-lg:   0 16px 48px rgba(26,46,26,0.14);
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--offwhite);
  color: var(--ink);
  line-height: 1.75;
  font-size: 18px;
  font-weight: 500;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* ---- Nav ---- */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 60px;
  background: var(--white);
  border-bottom: 1px solid var(--ink-10);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 2rem;
}

.nav-logo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-60);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-xl);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-links a:hover  { color: var(--ink); background: var(--ink-10); }
.nav-links a.active { color: var(--green); font-weight: 600; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.nav-divider { width: 1px; height: 18px; background: var(--ink-10); margin: 0 0.25rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-xl);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary     { background: var(--green); color: var(--white); border-color: var(--green); }
.btn-primary:hover { background: var(--green-mid); border-color: var(--green-mid); }
.btn-outline     { background: transparent; color: var(--green); border-color: var(--ink-10); }
.btn-outline:hover { border-color: var(--green); background: var(--green-faint); }
.btn-ghost       { background: transparent; color: var(--ink-60); border-color: transparent; font-weight: 500; }
.btn-ghost:hover { color: var(--ink); background: var(--ink-10); }
.btn-white       { background: var(--white); color: var(--green); border-color: var(--white); }
.btn-white:hover { background: var(--green-pale); }
.btn-white-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-white-outline:hover { background: rgba(255,255,255,0.12); border-color: white; }
.btn-lg    { padding: 0.85rem 1.75rem; font-size: 0.95rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Layout ---- */
.container    { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }
.container-sm { max-width: 760px;  margin: 0 auto; padding: 0 2rem; }
section { padding: 5rem 0; }

/* ---- Ticker ---- */
.ticker { background: var(--green); color: rgba(255,255,255,0.75); overflow: hidden; padding: 0.6rem 0; font-size: 0.8rem; font-weight: 500; }
.ticker-inner { display: flex; gap: 3rem; width: max-content; animation: ticker 28s linear infinite; }
.ticker-item  { white-space: nowrap; }
.ticker-dot   { color: var(--green-light); margin: 0 0.5rem; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Hero (photo strip) ---- */
.hero-strip { position: relative; height: 260px; overflow: hidden; background: #1a3d1b; display:block; line-height:0; }
.hero-strip img { width:100%; height:100%; object-fit:cover; object-position:center center; filter:brightness(0.6); position:absolute; top:0; left:0; right:0; bottom:0; display:block; }
.hero-strip-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 1.5rem; }
.hero-strip-overlay h1 { font-size:2.2rem; font-weight:700; color:var(--white); letter-spacing:-0.03em; line-height:1.2; margin-bottom:0.5rem; }
.hero-strip-overlay p  { color:rgba(255,255,255,0.8); font-size:1rem; font-weight:500; }

/* ---- Page hero ---- */
.page-hero { background:var(--offwhite); padding:4.5rem 2rem 3.5rem; text-align:center; }
.page-hero h1 { font-size:2.8rem; font-weight:700; letter-spacing:-0.035em; line-height:1.15; color:var(--ink); margin-bottom:1rem; }
.page-hero h1 em { font-style:italic; color:var(--green); }
.page-hero p  { font-size:1rem; color:var(--ink-60); font-weight:500; max-width:560px; margin:0 auto 2rem; }

/* ---- Eyebrow ---- */
.eyebrow {
  font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--green); display:flex; align-items:center; gap:0.4rem; margin-bottom:0.75rem;
}
.eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green-light); }

/* ---- Split hero ---- */
.split-hero { display:grid; grid-template-columns:1fr 1fr; }
.split-hero-left {
  background:var(--offwhite); padding:5rem 4rem;
  display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
}
.split-hero-left h2 { font-size:2.2rem; font-weight:700; letter-spacing:-0.03em; line-height:1.2; color:var(--ink); }
.split-hero-left h2 em { font-style:italic; color:var(--green); }
.split-hero-left p { font-size:0.95rem; color:var(--ink-60); font-weight:500; line-height:1.7; }
.hero-btns { display:flex; gap:0.75rem; flex-wrap:wrap; }
.hero-note  { font-size:0.78rem; color:var(--ink-30); font-weight:500; }
.hero-note a { color:var(--green); font-weight:500; }
.split-hero-right { background:var(--green); padding:4rem 3rem; display:flex; align-items:center; justify-content:center; }

/* ---- Preview cards (hero) ---- */
.preview-cards { display:flex; flex-direction:column; gap:1rem; width:100%; max-width:340px; }
.preview-card { background:var(--white); border-radius:var(--radius-md); padding:1.25rem; box-shadow:var(--shadow-md); }
.preview-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.5rem; }
.preview-num  { font-size:0.7rem; color:var(--ink-30); font-weight:500; }
.match-badge  { font-size:0.7rem; font-weight:700; color:var(--green); background:var(--green-pale); padding:0.2rem 0.6rem; border-radius:var(--radius-xl); }
.preview-card blockquote { font-size:0.875rem; color:var(--ink); font-weight:500; line-height:1.45; margin-bottom:0.75rem; font-style:italic; }
.tag-row { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:0.75rem; }
.tag { font-size:0.7rem; font-weight:600; color:var(--green); background:var(--green-pale); padding:0.2rem 0.6rem; border-radius:var(--radius-xl); }
.preview-card-foot { display:flex; justify-content:space-between; align-items:center; font-size:0.75rem; color:var(--ink-60); }
.status-dot { font-size:0.7rem; font-weight:700; padding:0.2rem 0.65rem; border-radius:var(--radius-xl); }
.status-available { background:var(--green-pale); color:var(--green); }
.status-interest  { background:var(--amber-pale); color:var(--amber); }
.status-later     { background:var(--ink-10); color:var(--ink-60); }

/* ---- Section titles ---- */
.section-title { font-size:2rem; font-weight:700; letter-spacing:-0.03em; line-height:1.2; color:var(--ink); margin-bottom:0.75rem; }
.section-title em { font-style:italic; color:var(--green); }
.section-sub { font-size:0.925rem; color:var(--ink-60); font-weight:500; }

/* ---- Steps ---- */
.steps-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.steps-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.step-card { background:var(--white); border-radius:var(--radius-md); padding:1.75rem; border:1px solid var(--ink-10); }
.step-num { font-size:2.5rem; font-weight:700; line-height:1; color:var(--green-pale); margin-bottom:1rem; font-style:italic; }
.step-card h3 { font-size:0.95rem; font-weight:700; margin-bottom:0.5rem; color:var(--ink); }
.step-card p  { font-size:0.85rem; color:var(--ink-60); font-weight:500; line-height:1.65; }

/* ---- Checklist ---- */
.check-list { display:flex; flex-direction:column; gap:0.6rem; }
.check-list li { display:flex; gap:0.65rem; align-items:flex-start; font-size:0.9rem; color:var(--ink-60); font-weight:500; }
.check-list li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; line-height:1.5; }

/* ---- Review cards ---- */
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.review-card { background:var(--white); border-radius:var(--radius-md); padding:1.5rem; border:1px solid var(--ink-10); }
.role-pill { display:inline-block; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:0.25rem 0.65rem; border-radius:var(--radius-xl); margin-bottom:0.75rem; }
.role-kandidaat { background:var(--green-pale); color:var(--green); }
.role-werkgever  { background:var(--amber-pale); color:var(--amber); }
.stars { color:var(--amber); font-size:0.95rem; margin-bottom:0.75rem; }
.review-card blockquote { font-size:0.875rem; color:var(--ink-60); font-style:italic; line-height:1.6; margin-bottom:0.85rem; font-weight:500; }
.review-meta { font-size:0.78rem; color:var(--ink-30); font-weight:600; }

/* ---- Talent cards ---- */
.talent-card { background:var(--white); border-radius:var(--radius-md); padding:1.5rem; border:1px solid var(--ink-10); display:flex; flex-direction:column; gap:0.85rem; }
.talent-card-top { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--ink-30); font-weight:500; }
.talent-card blockquote { font-size:0.9rem; font-style:italic; color:var(--ink); line-height:1.45; font-weight:500; }
.talent-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.location-text { font-size:0.78rem; color:var(--ink-60); font-weight:500; }
.locked-overlay { background:linear-gradient(to bottom, rgba(246,250,242,0) 0%, var(--offwhite) 60%); border-radius:0 0 var(--radius-md) var(--radius-md); padding:2rem 1.5rem 1.5rem; text-align:center; margin-top:-2rem; }
.locked-overlay p { font-size:0.82rem; color:var(--ink-60); margin-bottom:0.5rem; font-weight:500; }

/* ---- Info boxes ---- */
.info-box { background:var(--green-pale); border:1px solid var(--mint); border-radius:var(--radius-md); padding:1rem 1.25rem; font-size:0.875rem; color:var(--ink-60); font-weight:500; display:flex; gap:0.75rem; line-height:1.6; }
.info-box strong { color:var(--ink); font-weight:600; }
.info-box-icon { flex-shrink:0; }
.amber-box { background:var(--amber-pale); border:1px solid #F5D68A; border-radius:var(--radius-md); padding:1rem 1.25rem; font-size:0.875rem; color:var(--ink-60); font-weight:500; display:flex; gap:0.75rem; line-height:1.6; }
.amber-box strong { color:var(--ink); font-weight:600; }

/* ---- Filters ---- */
.filters-bar { display:flex; gap:0.5rem; flex-wrap:wrap; padding:1.25rem 0; border-bottom:1px solid var(--ink-10); margin-bottom:2rem; }
.filter-btn { padding:0.45rem 1rem; border-radius:var(--radius-xl); border:1.5px solid var(--ink-10); background:var(--white); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:0.825rem; font-weight:500; color:var(--ink-60); cursor:pointer; transition:all 0.15s; }
.filter-btn:hover  { border-color:var(--green); color:var(--green); }
.filter-btn.active { background:var(--green); color:var(--white); border-color:var(--green); }
.filter-input { padding:0.45rem 1rem; border-radius:var(--radius-xl); border:1.5px solid var(--ink-10); background:var(--white); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:0.825rem; color:var(--ink); outline:none; min-width:110px; }
.filter-input:focus { border-color:var(--green); }

/* ---- Pricing ---- */
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:620px; }
.pricing-card { background:var(--white); border:1.5px solid var(--ink-10); border-radius:var(--radius-md); padding:1.75rem; }
.pricing-card.featured { background:var(--green); border-color:var(--green); color:var(--white); }
.pricing-label { font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-30); margin-bottom:0.5rem; }
.pricing-card.featured .pricing-label { color:rgba(255,255,255,0.55); }
.pricing-price  { font-size:2.2rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:0.2rem; }
.pricing-period { font-size:0.8rem; color:var(--ink-60); margin-bottom:1.25rem; font-weight:500; }
.pricing-card.featured .pricing-period { color:rgba(255,255,255,0.65); }
.pricing-features { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.5rem; }
.pricing-features li { font-size:0.85rem; display:flex; gap:0.5rem; align-items:flex-start; }
.pricing-features li::before { content:'✓'; color:var(--green-light); font-weight:700; flex-shrink:0; }
.extra-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:620px; margin-top:1.25rem; }
.extra-card { background:var(--green-faint); border:1px solid var(--ink-10); border-radius:var(--radius-md); padding:1.5rem; }
.extra-price { font-size:1.6rem; font-weight:700; color:var(--green); letter-spacing:-0.02em; margin-bottom:0.25rem; }
.extra-label { font-size:0.85rem; font-weight:700; margin-bottom:0.4rem; color:var(--ink); }
.extra-desc  { font-size:0.8rem; color:var(--ink-60); font-weight:500; line-height:1.55; }

/* ---- FAQ ---- */
.faq-grid { display:grid; grid-template-columns:1fr 2fr; gap:5rem; }
.faq-items { display:flex; flex-direction:column; }
.faq-item { padding:1.5rem 0; border-bottom:1px solid var(--ink-10); }
.faq-item:last-child { border-bottom:none; }
.faq-item h3 { font-size:0.95rem; font-weight:700; margin-bottom:0.6rem; color:var(--ink); }
.faq-item p  { font-size:0.875rem; color:var(--ink-60); font-weight:500; line-height:1.7; }

/* ---- Split section ---- */
.split-section { display:grid; grid-template-columns:1fr 1fr; }
.split-section > * { background:inherit; }
.split-img { overflow:hidden; min-height:300px; background:linear-gradient(135deg, #1a3d1b 0%, #2D5F2E 100%); }
.split-img img { width:100%; height:100%; max-height:400px; object-fit:cover; display:block; }
.split-content { padding:4rem 3.5rem; display:flex; flex-direction:column; justify-content:center; gap:1.25rem; background:inherit; }
.split-content h2 { font-size:1.9rem; font-weight:700; letter-spacing:-0.03em; line-height:1.2; color:var(--ink); }
.split-content h2 em { font-style:italic; color:var(--green); }
.split-content p { font-size:0.925rem; color:var(--ink-60); font-weight:500; line-height:1.7; }

/* ---- CTA banner ---- */
.cta-banner { background:var(--green); color:var(--white); text-align:center; padding:5rem 2rem; }
.cta-banner h2 { font-size:2.4rem; font-weight:700; color:var(--white); letter-spacing:-0.035em; margin-bottom:0.75rem; }
.cta-banner p  { color:rgba(255,255,255,0.7); font-size:1rem; font-weight:500; margin-bottom:2rem; }
.cta-btns { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }

/* ---- Footer ---- */
footer { background:#0E1F0F; color:rgba(255,255,255,0.45); padding:4rem 2rem 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:3rem; max-width:1160px; margin:0 auto 3rem; }
.footer-brand .logo-text { font-size:1.15rem; font-weight:700; color:var(--white); letter-spacing:-0.02em; margin-bottom:0.5rem; }
.footer-brand p { font-size:0.82rem; line-height:1.6; margin-bottom:0.5rem; }
.footer-brand a { color:var(--green-light); font-size:0.82rem; }
.footer-col h4 { font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:1rem; }
.footer-col ul { display:flex; flex-direction:column; gap:0.6rem; }
.footer-col ul li a { font-size:0.82rem; color:rgba(255,255,255,0.5); transition:color 0.15s; }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom { max-width:1160px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.08); font-size:0.75rem; }

/* ---- Utilities ---- */
.mt-8  { margin-top:0.5rem; }  .mt-16 { margin-top:1rem; }
.mt-24 { margin-top:1.5rem; } .mt-32 { margin-top:2rem; }
.mt-48 { margin-top:3rem; }   .mb-8  { margin-bottom:0.5rem; }
.mb-16 { margin-bottom:1rem; } .mb-24 { margin-bottom:1.5rem; }
.mb-32 { margin-bottom:2rem; } .mb-48 { margin-bottom:3rem; }
.text-center { text-align:center; }

/* ---- Responsive ---- */
@media (max-width:1024px) {
  .steps-grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-grid  { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .split-hero, .split-section { grid-template-columns:1fr; }
  .split-hero-left { padding:3rem 1.5rem; }
  .split-hero-right { padding:2.5rem 1.5rem; }
  .split-img { min-height:220px; }
  .cards-grid, .steps-grid, .steps-grid-4 { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; gap:2rem; }
  .pricing-grid, .extra-cards { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .page-hero h1 { font-size:2rem; }
  section { padding:3.5rem 0; }
}