.site-header { position: sticky; top: 0; z-index: 45; border-bottom: 1px solid var(--border); background: var(--surface); }
.site-nav { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 25px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand img { width: 43px; height: 43px; }
.brand span { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font-size: 1.32rem; letter-spacing: -.04em; }
.brand small { margin-top: 6px; color: var(--brand-text); font-size: .64rem; font-weight: 900; letter-spacing: .13em; }
.site-links { display: flex; align-items: center; gap: 27px; }
.site-links a { color: var(--text-soft); font-size: .92rem; font-weight: 800; text-decoration: none; }
.site-links a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 5px; }
.site-tools { display: flex; align-items: center; gap: 9px; }
.public-menu { display: none; }
.hero { position: relative; overflow: hidden; padding: clamp(74px, 10vw, 128px) 0 94px; background: var(--page); }
.hero::before { content: ""; position: absolute; top: -210px; right: -170px; width: 600px; height: 600px; border: 90px solid var(--surface-strong); border-radius: 50%; opacity: .65; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(350px, .72fr); gap: clamp(45px, 7vw, 92px); align-items: center; }
.hero h1 { max-width: 770px; margin: 15px 0 22px; font-size: clamp(2.7rem, 6vw, 5.1rem); letter-spacing: -.055em; line-height: .98; }
.hero h1 span { color: var(--brand-text); }
.hero-copy > p { max-width: 680px; margin: 0; color: var(--text-soft); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.proof-list { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 30px 0 0; padding: 0; color: var(--text-soft); font-size: .82rem; font-weight: 700; list-style: none; }
.proof-list li::before { content: "✓"; display: inline-grid; width: 22px; height: 22px; margin-right: 7px; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-weight: 900; }
.hero-card { padding: 25px; border: 2px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.hero-card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.hero-card-top h2 { margin: 0; font-size: 1.2rem; }
.hero-card-top small { color: var(--muted); }
.large-progress { margin: 28px 0 24px; }
.large-progress strong { display: block; margin-bottom: 8px; font-size: 2.5rem; line-height: 1; }
.progress-track { height: 11px; overflow: hidden; border-radius: 8px; background: var(--surface-strong); }
.progress-track span { display: block; width: 63%; height: 100%; border-radius: inherit; background: var(--brand); }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero-stat { padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.hero-stat small, .hero-stat strong { display: block; }
.hero-stat small { color: var(--muted); font-size: .72rem; }
.hero-stat strong { margin-top: 3px; font-size: 1.25rem; }
.section { padding: clamp(72px, 9vw, 110px) 0; }
.section-surface { background: var(--surface); }
.section-head { max-width: 730px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { margin: 10px 0 14px; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.045em; }
.section-head p { margin: 0; color: var(--text-soft); }
.grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.benefit { padding: 27px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.benefit-number { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 13px; background: var(--brand-soft); color: var(--brand-text); font-size: .78rem; font-weight: 900; }
.benefit h3 { margin: 19px 0 8px; font-size: 1.15rem; }
.benefit p { margin: 0; color: var(--text-soft); font-size: .9rem; }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.role-card { padding: clamp(27px, 4vw, 43px); border: 2px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }
.role-card.admin-role { background: var(--surface-soft); }
.role-card h3 { margin: 15px 0 10px; font-size: clamp(1.65rem, 3vw, 2.35rem); }
.role-card p { color: var(--text-soft); }
.role-card ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 15px; margin: 25px 0 29px; padding: 0; list-style: none; }
.role-card li { position: relative; padding-left: 19px; font-size: .84rem; font-weight: 700; }
.role-card li::before { content: "•"; position: absolute; left: 3px; color: var(--brand); font-weight: 900; }
.cta { padding: 0 0 90px; background: var(--surface); }
.cta-inner { padding: clamp(35px, 6vw, 66px); border: 2px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--brand-soft); text-align: center; }
.cta-inner h2 { margin: 0 auto 12px; max-width: 720px; font-size: clamp(1.9rem, 4vw, 3rem); }
.cta-inner p { margin: 0 auto 25px; max-width: 650px; color: var(--text-soft); }
.site-footer { padding: 48px 0 27px; border-top: 1px solid var(--border); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(2, .7fr); gap: 38px; }
.footer-copy p { max-width: 370px; color: var(--muted); font-size: .82rem; }
.footer-col strong { font-size: .85rem; }
.footer-col ul { margin: 12px 0 0; padding: 0; list-style: none; }
.footer-col li { margin-top: 8px; }
.footer-col a { color: var(--text-soft); font-size: .8rem; text-decoration: none; }
.footer-bottom { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: .74rem; }
@media (max-width: 940px) { .site-links { display: none; position: absolute; top: 80px; right: 17px; left: 17px; align-items: stretch; flex-direction: column; gap: 0; padding: 10px; border: 2px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-md); } .site-links.is-open { display: flex; } .site-links a { padding: 11px 12px; } .public-menu { display: inline-grid; } .hero-grid { grid-template-columns: 1fr; } .hero-card { width: min(100%, 580px); margin-inline: auto; } .benefit-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-two { grid-template-columns: 1fr; } }
@media (max-width: 660px) { .theme-label { display: none; } .site-tools > .button { display: none; } .hero { padding: 62px 0 66px; } .hero h1 { font-size: 2.65rem; } .hero-actions { flex-direction: column; } .hero-actions .button { width: 100%; } .proof-list { flex-direction: column; } .benefit-grid, .role-grid { grid-template-columns: 1fr; } .role-card ul { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } }