:root { --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --surface: #fff; --soft: #f8fafc; --accent: #16a34a; --accent-dark: #15803d; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--soft); color: var(--ink); font-family: Inter, system-ui, sans-serif; margin: 0; } a { color: inherit; }
.ats-topbar { align-items: center; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 14px clamp(18px, 5vw, 72px); position: sticky; top: 0; z-index: 3; }.ats-topbar nav { align-items: center; display: flex; gap: 24px; }.ats-topbar nav a { color: var(--muted); font-size: .78rem; text-decoration: none; }.ats-topbar nav a:hover { color: var(--accent); }.ats-brand { align-items: center; display: inline-flex; font-size: 1.1rem; font-weight: 800; gap: 8px; letter-spacing: -.06em; text-decoration: none; }.ats-brand img { border-radius: 6px; height: 28px; width: 28px; }.ats-brand-name { color: var(--ink); white-space: nowrap; }.ats-brand-name > span { color: var(--accent); }
.ats-hero, .ats-section, .ats-cta-section { margin: 0 auto; max-width: 1180px; }.ats-hero { align-items: center; display: grid; gap: 70px; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); min-height: 610px; padding: 90px 24px 80px; }.ats-eyebrow { color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 14px; text-transform: uppercase; }.ats-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.08em; line-height: .98; margin: 0; max-width: 760px; }.ats-hero-copy { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin: 22px 0 0; max-width: 670px; }.ats-actions { align-items: center; display: flex; gap: 22px; margin-top: 30px; }.ats-button { background: var(--accent); border-radius: 7px; color: #fff; display: inline-flex; font-size: .82rem; font-weight: 750; gap: 10px; padding: 13px 17px; text-decoration: none; }.ats-button:hover { background: var(--accent-dark); }.ats-button-small { font-size: .7rem; padding: 9px 12px; }.ats-text-link { color: var(--muted); font-size: .78rem; text-decoration: none; }.ats-text-link:hover { color: var(--accent); }.ats-hero-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,.08); display: flex; flex-direction: column; gap: 8px; padding: 30px; }.ats-card-label { color: var(--accent); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.ats-hero-card strong { font-size: 1rem; }.ats-line { background: #bbf7d0; height: 1px; margin: 15px 0; width: 100%; }
.ats-section { padding: 88px 24px; }.ats-section-soft { background: #fff; max-width: none; padding-left: max(24px, calc((100vw - 1132px) / 2)); padding-right: max(24px, calc((100vw - 1132px) / 2)); }.ats-two-columns { display: grid; gap: 80px; grid-template-columns: .9fr 1.1fr; }.ats-two-columns h2, .ats-cta-section h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -.07em; line-height: 1.02; margin: 0; }.ats-two-columns p, .ats-cta-section p { color: var(--muted); font-size: .92rem; line-height: 1.7; margin: 0 0 16px; }.ats-muted { margin-top: 18px !important; }.ats-grid-three { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }.ats-grid-three article { border: 1px solid var(--line); border-radius: 10px; padding: 24px; }.ats-section-soft .ats-grid-three article { background: var(--soft); }.ats-grid-three h3 { font-size: 1rem; margin: 18px 0 8px; }.ats-grid-three p { color: var(--muted); font-size: .82rem; line-height: 1.6; margin: 0; }.ats-icon { color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }.ats-check-list { display: grid; gap: 16px; }.ats-check-list > div { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 13px; padding-bottom: 16px; }.ats-check-list b { color: var(--accent); font-size: 1.1rem; }.ats-check-list strong, .ats-check-list small { display: block; }.ats-check-list strong { font-size: .85rem; }.ats-check-list small { color: var(--muted); font-size: .78rem; line-height: 1.5; margin-top: 4px; }
.ats-faq { border-top: 1px solid var(--line); }.ats-faq details { border-bottom: 1px solid var(--line); padding: 19px 0; }.ats-faq summary { cursor: pointer; font-size: .95rem; font-weight: 700; }.ats-faq p { color: var(--muted); font-size: .82rem; line-height: 1.6; margin: 12px 0 0; max-width: 720px; }.ats-cta-section { background: #ecfdf5; border-radius: 14px; margin-bottom: 80px; padding: 60px; }.ats-cta-section h2 { max-width: 570px; }.ats-cta-section p { max-width: 620px; margin: 16px 0 24px; }.ats-footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: .7rem; justify-content: space-between; padding: 24px clamp(18px, 5vw, 72px); }.ats-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }.ats-footer a { text-decoration: none; }.ats-footer a:hover { color: var(--accent); }
.ats-reference-title { font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -.07em; line-height: 1.02; margin: 0; }.ats-reference-intro { color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 680px; }.ats-reference-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 28px; }.ats-reference-grid a { background: var(--soft); border: 1px solid var(--line); border-radius: 9px; display: flex; flex-direction: column; gap: 8px; padding: 20px; text-decoration: none; }.ats-reference-grid a:hover { border-color: #86efac; }.ats-reference-grid strong { font-size: .82rem; line-height: 1.4; }.ats-reference-grid span { color: var(--muted); font-size: .75rem; line-height: 1.5; }
@media (max-width: 800px) { .ats-topbar nav a:not(.ats-button-small) { display: none; }.ats-hero { gap: 40px; grid-template-columns: 1fr; min-height: 0; padding-top: 64px; }.ats-two-columns { gap: 30px; grid-template-columns: 1fr; }.ats-grid-three, .ats-reference-grid { grid-template-columns: 1fr; }.ats-cta-section { border-radius: 0; margin-bottom: 0; padding: 48px 24px; } }
@media (max-width: 520px) { .ats-hero h1 { font-size: 2.65rem; }.ats-hero-copy { font-size: .92rem; }.ats-actions { align-items: stretch; flex-direction: column; gap: 16px; }.ats-actions .ats-button, .ats-text-link { text-align: center; }.ats-section { padding: 60px 20px; }.ats-section-soft { padding-left: 20px; padding-right: 20px; }.ats-footer { align-items: flex-start; flex-direction: column; gap: 14px; } }