@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root { --black: #080808; --black-soft: #111111; --white: #f5f5f2; --muted: #a4a4a4; --muted-dark: #6f6f6a; --line: rgba(245,245,242,.16); --line-light: rgba(8,8,8,.16); --gold-dark: #a88945; --gold: #c6a55b; --gold-soft: #dcc58c; --type-reduction: 5px; --container: min(100% - 96px, 1320px); --section-space: clamp(7rem, 13vw, 13rem); --ease-premium: cubic-bezier(.22,1,.36,1); --ui: 'Inter', Arial, sans-serif; --display: 'Cormorant Garamond', Georgia, serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: var(--ui); font-size: .9375rem; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--white); }
.brand__mark { display: grid; width: 2.35rem; height: 2.35rem; border: 1px solid var(--gold); color: var(--gold-soft); place-items: center; font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.brand strong { display: block; font-size: .98rem; letter-spacing: .16em; }
.brand small { display: block; margin-top: .2rem; color: var(--gold); font-size: .47rem; letter-spacing: .22em; }
.eyebrow { margin: 0; color: var(--gold); font-size: .75rem; font-weight: 600; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3rem; padding: 1rem 1.2rem; border: 1px solid transparent; cursor: pointer; font-size: .68rem; font-weight: 600; letter-spacing: .12em; line-height: 1; text-transform: uppercase; transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms var(--ease-premium); }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button--gold { background: var(--gold); color: var(--black); }
.button--gold:hover, .button--gold:focus-visible { background: var(--gold-soft); }
.button--light { background: var(--white); color: var(--black); }
.button--light:hover, .button--light:focus-visible { background: var(--gold-soft); }
.text-link { display: inline-flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.text-link:hover { color: var(--gold-soft); }
.site-header { position: fixed; z-index: 20; top: 0; right: 0; left: 0; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; width: var(--container); min-height: 5.5rem; margin: auto; border-bottom: 1px solid rgba(245,245,242,.12); }
.site-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.5rem); color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.site-nav a:not(.button):hover { color: var(--white); }
.hero-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); align-items: end; gap: clamp(3rem, 8vw, 9rem); min-height: max(45rem, 100svh); width: var(--container); margin: auto; padding: 13rem 0 3.5rem; }
.hero-copy { max-width: 620px; }
.hero-copy h1 { margin: 1.5rem 0 1.7rem; font-family: var(--ui); font-size: calc(clamp(3.7rem, 5.2vw, 6rem) - var(--type-reduction) - 20px); font-weight: 600; letter-spacing: -.055em; line-height: 1.02; }
.hero-copy h1 em { color: var(--gold-soft); font-style: italic; }
.hero-copy__text { max-width: 34rem; margin: 0; color: var(--muted); font-size: max(.75rem, calc(clamp(.95rem, 1vw, 1.05rem) - var(--type-reduction) + 5px)); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.6rem; }
.hero-visual { position: relative; min-height: 420px; display: grid; place-items: center; }
.visual-window { position: relative; z-index: 1; width: min(100%, 520px); border: 1px solid var(--line); background: rgba(17,17,17,.9); box-shadow: 0 2rem 5rem rgba(0,0,0,.35); transform: rotate(2deg); }
.visual-window__top { display: flex; align-items: center; gap: .35rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }
.visual-window__top span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--gold-dark); }
.visual-window__top small { margin-left: auto; }
.visual-window__body { display: grid; grid-template-columns: 3.8rem 1fr; min-height: 300px; }
.visual-sidebar { display: grid; align-content: start; justify-items: center; gap: 1.3rem; padding: 1.2rem .5rem; border-right: 1px solid var(--line); color: var(--muted); }
.visual-sidebar strong { color: var(--gold-soft); font-family: var(--display); font-size: 2rem; font-weight: 500; }
.visual-sidebar .is-active { color: var(--gold); }
.visual-content { padding: 2.3rem 2rem; }
.visual-content h2 { max-width: 14rem; margin: 1rem 0 3rem; font-family: var(--display); font-size: 2.8rem; font-weight: 500; line-height: .9; }
.visual-status { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .66rem; }
.visual-status i { width: .5rem; height: .5rem; border-radius: 50%; background: #6fbf8a; box-shadow: 0 0 0 .25rem rgba(111,191,138,.12); }
.visual-status strong { margin-left: auto; color: #6fbf8a; font-size: .58rem; letter-spacing: .1em; }
.visual-line { width: 100%; height: 1px; margin-top: 2.3rem; background: var(--line); }
.visual-line--short { width: 64%; margin-top: 1rem; }
.hero-visual__glow { position: absolute; width: 70%; height: 70%; border-radius: 50%; background: rgba(198,165,91,.14); filter: blur(70px); }
.proof-strip { display: flex; justify-content: space-between; gap: 2rem; width: var(--container); margin: auto; padding: 3rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .65rem; font-weight: 600; letter-spacing: .18em; }
.feature-section { width: var(--container); margin: auto; padding: var(--section-space) 0; }
.section-heading { max-width: 620px; }
.section-heading h2, .cta-section h2 { margin: 1.2rem 0; font-family: var(--display); font-size: calc(clamp(2.8rem, 4.8vw, 5.3rem) - var(--type-reduction)); font-weight: 500; letter-spacing: -.035em; line-height: .96; }
.section-heading > p:last-child { max-width: 30rem; color: var(--muted); font-size: .95rem; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 5rem; background: var(--line); }
.feature-grid article { min-height: 240px; padding: 1.7rem; background: var(--black-soft); }
.feature-grid article > span { color: var(--gold); font-family: var(--display); font-size: 1.5rem; }
.feature-grid h3 { margin: 3.2rem 0 .7rem; font-size: 1.05rem; font-weight: 500; }
.feature-grid p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.cta-section { display: grid; place-items: center; min-height: 440px; padding: var(--section-space) 1.5rem; background: var(--gold); color: var(--black); text-align: center; }
.cta-section .eyebrow { color: var(--black); }
.cta-section h2 { max-width: 700px; }
.site-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem max(3rem, calc((100% - 1320px)/2)); border-top: 1px solid var(--line); color: var(--muted); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.auth-shell { display: grid; min-height: 100vh; padding: 2rem; place-items: center; background: radial-gradient(circle at 80% 15%, rgba(198,165,91,.14), transparent 32%), var(--black); }
.auth-card { width: min(100%, 430px); padding: 2.5rem; border: 1px solid var(--line); background: rgba(17,17,17,.92); box-shadow: 0 2rem 6rem rgba(0,0,0,.35); }
.auth-shell:not(.auth-shell--register) { background: linear-gradient(90deg, transparent 49.95%, rgba(198,165,91,.08) 50%, transparent 50.05%), radial-gradient(circle at 75% 20%, rgba(198,165,91,.15), transparent 28%), var(--black); }
.auth-shell:not(.auth-shell--register) .auth-card { width: min(100%, 400px); padding: clamp(1.75rem, 5vw, 2.75rem); background: rgba(17,17,17,.86); box-shadow: 0 2rem 6rem rgba(0,0,0,.3); }
.auth-shell:not(.auth-shell--register) .auth-card__brand { margin-bottom: 3.5rem; }
.auth-shell:not(.auth-shell--register) .auth-card h1 { margin: 0; font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: -.04em; line-height: .9; }
.auth-shell:not(.auth-shell--register) .auth-intro { max-width: 32rem; margin: 1.5rem 0 2rem; font-size: .9rem; line-height: 1.7; }
.auth-shell:not(.auth-shell--register) .form { gap: .5rem; }
.auth-shell:not(.auth-shell--register) .form label { margin-top: .55rem; font-size: .7rem; letter-spacing: .12em; }
.auth-shell:not(.auth-shell--register) .form input { padding: .75rem .85rem; }
.auth-shell:not(.auth-shell--register) .form .button { width: 100%; margin-top: 1rem; }
.auth-card--wide { width: min(100%, 760px); }
.auth-card__brand { margin-bottom: 4rem; }
.auth-card--wide .auth-card__brand { margin-bottom: 3rem; }
.auth-card h1 { margin: .8rem 0 0; font-family: var(--display); font-size: 4.4rem; font-weight: 500; line-height: .85; }
.auth-intro { margin: 1.3rem 0 2rem; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.form { display: grid; gap: .55rem; }
.form label { margin-top: .45rem; color: var(--muted); font-size: .64rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.form input, .form select { width: 100%; padding: .78rem .85rem; border: 1px solid var(--line); border-radius: 0; outline: 0; background: var(--black); color: var(--white); font: inherit; }
.form input:focus, .form select:focus { border-color: var(--gold); }
.form select option { background: var(--black-soft); }
.form .button { margin-top: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.2rem; }
.field { min-width: 0; display: grid; gap: .2rem; }
#employee_field[hidden], #user_count_field[hidden] { display: none !important; }
.field--full { grid-column: 1 / -1; }
.password-strength { display: grid; gap: .35rem; margin-top: .35rem; }
.password-strength__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.password-strength__header strong { color: #817b72; font-size: .58rem; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.password-strength[data-level="weak"] .password-strength__header strong { color: #cb8172; }
.password-strength[data-level="medium"] .password-strength__header strong { color: var(--gold-soft); }
.password-strength[data-level="strong"] .password-strength__header strong { color: #6fbf8a; }
.password-strength__meter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; height: .24rem; }
.password-strength__segment { border-radius: 999px; background: #383838; transition: background-color 180ms ease; }
.password-strength[data-level="weak"] .password-strength__segment.is-active { background: #cb8172; }
.password-strength[data-level="medium"] .password-strength__segment.is-active { background: var(--gold); }
.password-strength[data-level="strong"] .password-strength__segment.is-active { background: #6fbf8a; }
.form-hint { margin: .7rem 0 0; color: var(--muted); font-size: .68rem; }
.form-alert { margin: 1rem 0; padding: .75rem .85rem; border: 1px solid; font-size: .75rem; line-height: 1.5; }
.form-alert--error { border-color: rgba(220,120,105,.45); color: #e6aba2; }
.auth-footer { margin: 1.7rem 0 0; color: var(--muted); font-size: .72rem; }
.auth-footer a, .back-link { color: var(--gold-soft); }
.back-link { display: inline-block; margin-top: 2rem; font-size: .68rem; }
.dashboard-body { min-height: 100vh; background: #f2f0eb; color: #171614; }
.dashboard-app { display: flex; min-height: 100vh; }
.dashboard-sidebar { position: fixed; z-index: 2; inset: 0 auto 0 0; display: flex; width: 280px; flex-direction: column; padding: 1.5rem 1.15rem; border-right: 1px solid #ded9d0; background: #fbfaf7; }
.dashboard-sidebar .brand { color: #171614; }
.dashboard-sidebar__top { display: grid; justify-items: start; gap: 1.1rem; padding: .3rem .45rem 2.3rem; }
.dashboard-sidebar__label { color: var(--gold-dark); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.dashboard-nav { display: grid; gap: 0; }
.dashboard-nav a { display: flex; align-items: center; min-height: 2.65rem; gap: .8rem; padding: .65rem .75rem; border: 1px solid transparent; border-bottom-color: #ded9d0; color: #746e66; font-size: .76rem; font-weight: 500; }
.dashboard-nav a span { display: grid; width: 1.1rem; color: var(--gold-dark); place-items: center; text-align: center; }
.dashboard-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.dashboard-nav a:hover, .dashboard-nav a.is-active { border-color: #e7d7b0; background: #f0e7d3; color: #171614; }
.dashboard-sidebar__user { display: grid; gap: .3rem; margin-top: auto; padding: 1.3rem .8rem 0; border-top: 1px solid #ded9d0; }
.dashboard-sidebar__user strong { color: #28251f; font-size: .78rem; }
.dashboard-sidebar__user small { overflow: hidden; color: #a88945; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-sidebar__user button { display: flex; align-items: center; gap: .8rem; padding: 0; border: 0; background: transparent; color: #746e66; cursor: pointer; font: inherit; font-size: .7rem; text-align: left; }
.dashboard-sidebar__user button:hover { color: #a88945; }
.dashboard-workspace { width: 100%; min-width: 0; margin-left: 280px; }
.dashboard-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; margin: 1.1rem 2.25rem 0; padding: .8rem 1rem; border: 1px solid #e5e0d8; border-radius: 1.1rem; background: rgba(255,254,251,.9); box-shadow: 0 .75rem 2.5rem rgba(40,33,24,.05); }
.dashboard-topbar__actions { display: flex; align-items: center; gap: .6rem; }
.dashboard-action-button { display: grid; width: 2.65rem; height: 2.65rem; padding: 0; border: 1px solid #e7d7b0; border-radius: .8rem; background: #fffefa; color: var(--gold-dark); cursor: pointer; place-items: center; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.dashboard-action-button:hover, .dashboard-action-button:focus-visible { border-color: var(--gold); background: #f4ead5; color: #8f6b2d; }
.dashboard-action-button .dashboard-icon { width: 1rem; height: 1rem; }
.dashboard-topbar p { margin: 0; color: #817b72; font-size: .76rem; }
.dashboard-topbar__mobile { display: none; }
.dashboard-topbar__identity { display: flex; align-items: center; gap: .55rem; color: #4e6c50; font-size: .72rem; font-weight: 600; }
.dashboard-topbar__identity i { width: .5rem; height: .5rem; border-radius: 50%; background: #6fbf8a; }
.dashboard-main { padding: 3.5rem 2.25rem 5rem; }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.dashboard-heading h1 { margin: .7rem 0 0; color: #171614; font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -.06em; line-height: .95; }
.dashboard-heading p:last-child { margin: .8rem 0 0; color: #817b72; font-size: .85rem; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.2rem; }
.dashboard-metrics article, .dashboard-panel { border: 1px solid #e4ded4; border-radius: 1.1rem; background: #fffefa; box-shadow: 0 .75rem 2rem rgba(40,33,24,.04); }
.dashboard-metrics article { min-height: 160px; padding: 1.25rem; }
.metric-icon { display: grid; width: 2.3rem; height: 2.3rem; margin-bottom: 1.3rem; border-radius: .7rem; background: #f4ead5; color: var(--gold-dark); place-items: center; }
.metric-icon .dashboard-icon { width: 1.1rem; height: 1.1rem; stroke-width: 1.6; }
.dashboard-metrics small { display: block; color: #766f66; font-size: .63rem; font-weight: 700; letter-spacing: .06em; }
.dashboard-metrics strong { display: block; margin-top: .5rem; color: #24211d; font-size: 1.55rem; }
.dashboard-metrics p { margin: .45rem 0 0; color: #9a9186; font-size: .68rem; }
.dashboard-lower { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-top: 1rem; }
.dashboard-panel { min-height: 250px; padding: 1.5rem; }
.dashboard-panel h2 { max-width: 31rem; margin: 1rem 0 .8rem; color: #24211d; font-family: var(--display); font-size: 2.25rem; font-weight: 500; line-height: .95; }
.dashboard-panel > p:not(.eyebrow) { max-width: 35rem; margin: 0 0 1.5rem; color: #817b72; font-size: .8rem; line-height: 1.7; }
.text-link--dark { color: #8f6b2d; }
.account-line { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #eee9e1; font-size: .75rem; }
.account-line span { color: #9a9186; }
.account-line strong { color: #28251f; text-align: right; }
@media (max-width: 700px) { .auth-shell:not(.auth-shell--register) { padding: 1rem; } .auth-shell:not(.auth-shell--register) .auth-card { padding: 1.75rem 1.35rem; } }
@media (max-width: 1100px) { :root { --container: min(100% - 64px, 1320px); } }
@media (max-width: 900px) { .site-header__inner, .hero-section, .proof-strip, .feature-section { width: var(--container); } .site-nav a:not(.button) { display: none; } .hero-section { grid-template-columns: 1fr; padding-top: 11rem; } .hero-visual { min-height: 330px; } .feature-grid, .dashboard-metrics, .dashboard-lower { grid-template-columns: 1fr; } .dashboard-sidebar { transform: translateX(-100%); transition: transform 180ms ease; } .dashboard-sidebar:target, .dashboard-sidebar.is-open { transform: translateX(0); } .dashboard-workspace { margin-left: 0; } .dashboard-main { padding-inline: 1.2rem; } .dashboard-topbar { margin-inline: 1.2rem; } }
@media (max-width: 800px) { :root { --container: min(100% - 40px, 720px); --section-space: clamp(5.5rem, 16vw, 8rem); } .hero-section { min-height: max(44rem, 100svh); padding-top: 11rem; padding-bottom: 2rem; } .hero-copy h1 { font-size: calc(clamp(3.4rem, 10vw, 5rem) - var(--type-reduction) - 20px); } .hero-actions { gap: 1rem 1.5rem; } .section-heading h2, .cta-section h2 { font-size: calc(clamp(2.8rem, 9vw, 4.8rem) - var(--type-reduction)); } }
@media (max-width: 600px) { :root { --container: min(100% - 32px, 480px); } .site-header__inner { min-height: 4.7rem; } .brand strong { font-size: .82rem; } .hero-copy h1 { font-size: calc(clamp(3.4rem, 15vw, 4.5rem) - var(--type-reduction) - 12px); } .hero-actions, .site-footer, .dashboard-heading { align-items: flex-start; flex-direction: column; } .proof-strip { flex-direction: column; gap: .7rem; padding-block: 2rem; } .feature-section { padding: var(--section-space) 0; } .form-grid { grid-template-columns: 1fr; } .field--full { grid-column: auto; } .auth-shell { padding: 1rem; } .auth-card { padding: 1.6rem; } .auth-card__brand { margin-bottom: 3rem; } .auth-card h1 { font-size: 3.7rem; } .dashboard-topbar__mobile { display: inline; color: #28251f; font-size: .8rem; font-weight: 700; } .dashboard-topbar p { display: none; } .dashboard-main { padding-top: 2.5rem; } }