:root { color-scheme: light dark; --canvas:#f7f8fb; --surface:#fff; --soft:#eef1f7; --ink:#172033; --muted:#59657a; --line:#dce2ec; --accent:#4355d7; --accent-deep:#2d3eae; --accent-soft:#e9edff; --radius:16px; --wrap:1140px; --shadow:0 18px 52px rgba(26,39,74,.1); --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media (prefers-color-scheme:dark) { :root { --canvas:#10131b; --surface:#171c27; --soft:#1d2430; --ink:#edf1fa; --muted:#b2bdcf; --line:#30394a; --accent:#93a2ff; --accent-deep:#b9c3ff; --accent-soft:#252d55; --shadow:0 18px 52px rgba(0,0,0,.22); } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font); line-height:1.58; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .wrap { width:min(var(--wrap),calc(100% - 40px)); margin:0 auto; }
.nav { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 90%,transparent); backdrop-filter:blur(14px); } .nav__inside { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:26px; } .brand img { width:98px; } .nav__links { display:flex; gap:22px; align-items:center; color:var(--muted); font-size:.9rem; } .nav__links a:hover { color:var(--ink); }
.button { min-height:44px; display:inline-flex; justify-content:center; align-items:center; padding:0 18px; border:1px solid transparent; border-radius:999px; font:inherit; font-weight:750; cursor:pointer; white-space:nowrap; transition:transform .18s ease,background .18s ease,border-color .18s ease; } .button:active { transform:translateY(1px); } .button--primary { background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(67,85,215,.22); } .button--primary:hover { background:var(--accent-deep); } .button--quiet { color:var(--ink); border-color:var(--line); } .button--quiet:hover { border-color:var(--accent); color:var(--accent-deep); }
.page-hero { padding:76px 0 58px; background:var(--surface); } .page-hero__grid { display:grid; grid-template-columns:1fr .92fr; align-items:end; gap:58px; } .page-hero__image { overflow:hidden; border-radius:var(--radius); min-height:310px; } .page-hero__image img { width:100%; height:100%; min-height:310px; object-fit:cover; object-position:68% center; } .eyebrow { margin:0 0 14px; color:var(--accent-deep); font-size:.86rem; font-weight:780; } h1,h2,h3,p { margin-top:0; } h1 { max-width:13ch; margin-bottom:18px; font-size:clamp(2.55rem,5vw,4.7rem); line-height:.99; letter-spacing:-.06em; } h2 { max-width:17ch; margin-bottom:14px; font-size:clamp(1.9rem,3.5vw,3.15rem); line-height:1.05; letter-spacing:-.052em; } h3 { margin-bottom:8px; font-size:1.22rem; letter-spacing:-.026em; } .lead { max-width:48ch; margin-bottom:24px; color:var(--muted); font-size:1.12rem; } .section { padding:78px 0; } .section--surface { background:var(--surface); } .intro { max-width:690px; } .intro p,.card p,.prose p,.notice p { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px; } .card { padding:28px; min-height:200px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .card--soft { background:var(--accent-soft); border-color:transparent; } .card--wide { grid-column:span 2; min-height:150px; } .link-card { display:flex; flex-direction:column; justify-content:space-between; gap:24px; } .link-card strong { color:var(--accent-deep); }
.process-list { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; } .process-list article { padding-top:16px; border-top:2px solid var(--line); } .process-list article:first-child { border-color:var(--accent); } .process-list p { color:var(--muted); } .number { display:block; margin-bottom:22px; color:var(--accent-deep); font-size:.88rem; font-weight:800; }
.prose { max-width:760px; } .prose h2 { margin-top:48px; } .prose ul { padding-left:20px; color:var(--muted); } .prose li { margin:9px 0; } .notice { padding:26px; border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; background:var(--soft); }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; } .price { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .price--featured { background:var(--accent-soft); border-color:transparent; } .price__amount { margin:20px 0 5px; font-size:2rem; line-height:1; font-weight:800; letter-spacing:-.05em; } .price ul { padding-left:19px; color:var(--muted); }
.assessment { max-width:820px; padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); } .question { padding:21px 0; border-bottom:1px solid var(--line); } .question:last-child { border:0; } .question legend { font-weight:750; } .options { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } .options label { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:.92rem; } .result { margin-top:18px; padding:18px; border-radius:10px; background:var(--soft); } .result[hidden] { display:none; }
.form { max-width:760px; padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); } .form__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .field { display:grid; gap:7px; } .field--full { grid-column:1 / -1; } label { font-size:.9rem; font-weight:720; } input,textarea,select { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--canvas); font:inherit; } textarea { min-height:112px; resize:vertical; } input:focus,textarea:focus,select:focus { outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent); border-color:var(--accent); } .form__helper,.form__status { margin:14px 0 0; color:var(--muted); font-size:.86rem; } .form__status[hidden] { display:none; } .form__status[data-state="error"] { color:#b42318; } .form__status[data-state="success"] { color:#067647; }
footer { padding:28px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; } .footer__inside { display:flex; justify-content:space-between; gap:20px; } .reveal { opacity:0; transform:translateY(12px); transition:opacity .5s ease,transform .5s ease; } .reveal.is-visible { opacity:1; transform:none; }
@media (max-width:840px) { .nav__links { display:none; } .page-hero { padding:48px 0; } .page-hero__grid { grid-template-columns:1fr; gap:28px; } .process-list { grid-template-columns:1fr 1fr; } .price-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .wrap { width:min(var(--wrap),calc(100% - 28px)); } .nav__inside { gap:10px; } .button { min-height:42px; padding:0 14px; font-size:.91rem; } .section { padding:62px 0; } .cards,.process-list,.form__grid { grid-template-columns:1fr; } .card--wide,.field--full { grid-column:auto; } .form,.assessment { padding:22px; } .footer__inside { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }