:root { --ink:#0d2c34; --muted:#64747d; --accent:#d3593a; --paper:#fffdfd; --pale:#f0f8fc; --line:#d6e0e2; --navy:#283949; --serif:Georgia, 'Times New Roman', serif; --sans:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; } a { color:inherit; text-decoration:none; } .site-header { height:82px; display:flex; align-items:center; gap:42px; padding:0 clamp(24px,5vw,76px); border-bottom:1px solid var(--line); background:rgba(255,253,253,.95); position:relative; z-index:5; } .logo { display:grid; grid-template-columns:auto auto; width:52px; font:700 14px/1 var(--sans); letter-spacing:-.05em; } .logo span { background:var(--ink); color:#fff; padding:7px 5px 5px; } .logo strong { background:var(--accent); color:#fff; padding:7px 5px 5px; } .main-nav { display:flex; gap:30px; margin-left:auto; font-size:13px; } .main-nav a { position:relative; } .main-nav a:after { content:''; position:absolute; width:0; height:1px; background:var(--accent); left:0; bottom:-5px; transition:width .2s; } .main-nav a:hover:after { width:100%; } .header-actions { display:flex; align-items:center; gap:24px; } .language-switcher { display:flex; gap:9px; font-size:12px; color:var(--muted); } .language-switcher .active { color:var(--ink); font-weight:700; } .header-cta { font-size:12px; color:var(--accent); font-weight:700; } .hero { min-height:570px; padding:clamp(70px,9vw,135px) clamp(24px,10vw,150px) 90px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.8fr); gap:80px; overflow:hidden; background:linear-gradient(110deg,#fffdfd 0%,#fffdfd 58%,#eef6f9 58%); } .eyebrow { margin:0 0 16px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.14em; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.045em; line-height:1.08; } h1 { max-width:680px; margin-bottom:28px; font:400 clamp(46px,5.5vw,78px)/.98 var(--serif); } h1 em { color:var(--accent); font-style:italic; } .hero-lead { max-width:530px; color:var(--muted); font-size:19px; } .hero-actions { display:flex; align-items:center; gap:26px; margin-top:40px; } .button { display:inline-flex; align-items:center; gap:25px; padding:15px 19px; border:0; font:700 13px var(--sans); cursor:pointer; } .button-accent { background:var(--accent); color:#fff; } .button-dark { background:var(--ink); color:#fff; width:max-content; } .hero-actions p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; } .hero-actions strong { color:var(--ink); font-weight:700; } .dossier-scene { position:relative; min-height:340px; align-self:center; } .dossier { width:min(100%,390px); min-height:315px; padding:24px; position:absolute; border:1px solid #cbd9dd; box-shadow:0 22px 45px rgba(13,44,52,.13); } .dossier-back { transform:rotate(8deg); right:10px; top:27px; background:#dbecef; color:#799399; font-size:10px; letter-spacing:.14em; padding-top:280px; } .dossier-main { right:36px; top:0; background:#fff; transform:rotate(-2.5deg); } .dossier-topline,.dossier-foot { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.12em; } .dossier-topline { padding-bottom:46px; border-bottom:1px solid var(--line); } .dossier-label { margin:22px 0 8px; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.12em; } .dossier h2 { margin-bottom:24px; font:400 29px/1.04 var(--serif); } .dossier-list { border-top:1px solid var(--line); padding-top:12px; font-size:12px; } .dossier-list p { margin:7px 0; } .dossier-list span { color:var(--accent); font-weight:700; } .dossier-foot { position:absolute; right:24px; bottom:22px; left:24px; align-items:center; color:var(--muted); } .seal { display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; height:31px; width:31px; color:var(--ink); font:bold 11px var(--serif); } .paperclip { position:absolute; right:26px; top:-9px; height:58px; width:21px; border:4px solid var(--accent); border-bottom:0; border-radius:12px 12px 0 0; transform:rotate(25deg); z-index:2; } .workflow-bar { position:sticky; top:0; z-index:4; background:var(--ink); color:#fff; } .workflow-inner { max-width:1200px; margin:auto; padding:14px 28px 16px; position:relative; display:grid; grid-template-columns:145px 1fr; gap:25px; align-items:center; } .workflow-title { margin:0; color:#8faab1; font-size:10px; letter-spacing:.13em; } .workflow-bar ol { display:flex; justify-content:space-between; padding:0; margin:0; list-style:none; } .workflow-bar li { color:#91a7ad; font-size:12px; } .workflow-bar li.is-active { color:#fff; } .workflow-bar li span { margin-right:6px; color:var(--accent); font-size:10px; font-weight:bold; } .workflow-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.14); } .workflow-progress i { display:block; width:0; height:100%; background:var(--accent); transition:width .18s linear; } .section { padding:108px max(24px,10vw); } .intro { text-align:center; } .section h2 { margin-bottom:20px; font:400 clamp(36px,4vw,56px)/1.02 var(--serif); } .section-lead { max-width:630px; margin:0 auto; color:var(--muted); font-size:19px; } .service-grid { display:grid; grid-template-columns:repeat(3,1fr); max-width:1100px; margin:70px auto 0; border-top:1px solid var(--line); text-align:left; } .service-grid article { padding:30px 28px 10px; border-right:1px solid var(--line); } .service-grid article:last-child { border:0; } .service-grid span,.step-number { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.1em; } .service-grid h3 { margin:25px 0 10px; font-size:21px; } .service-grid p { color:var(--muted); font-size:15px; } .workflow-section { background:var(--pale); display:grid; grid-template-columns:.8fr 1.1fr; gap:90px; } .workflow-steps { border-top:1px solid #c9dce0; } .workflow-steps article { display:grid; grid-template-columns:75px 1fr; gap:20px; padding:33px 0; border-bottom:1px solid #c9dce0; scroll-margin-top:86px; } .step-kicker { margin:0 0 7px; color:var(--accent); font-size:10px; letter-spacing:.12em; font-weight:700; } .workflow-steps h3 { margin-bottom:11px; font-size:25px; } .workflow-steps article div > p:last-child { margin-bottom:0; color:var(--muted); } .expertise { text-align:center; } .expertise-questions { max-width:800px; margin:55px auto 0; border-top:1px solid var(--line); } .expertise-questions p { margin:0; padding:19px 10px; border-bottom:1px solid var(--line); font:400 21px/1.25 var(--serif); } .contact-section { padding:84px max(24px,10vw); display:grid; grid-template-columns:1fr 1fr; gap:90px; background:var(--navy); color:#fff; } .contact-section h2 { margin-bottom:0; font:400 clamp(38px,4vw,58px)/1 var(--serif); } .contact-form { display:flex; flex-direction:column; gap:18px; } .contact-form label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#bad0d6; } input { display:block; width:100%; padding:10px 0; background:transparent; border:0; border-bottom:1px solid #728790; color:#fff; font:17px var(--sans); outline:none; } input:focus { border-color:var(--accent); } input::placeholder { color:#91a5ad; } .contact-form p { margin:0; color:#abc0c6; font-size:11px; } .site-footer { padding:35px max(24px,5vw); display:flex; gap:25px; align-items:center; color:var(--muted); font-size:12px; } .site-footer p:last-child { margin-left:auto; } @media (max-width:800px) { .site-header { height:70px; gap:18px; padding:0 20px; } .main-nav { display:none; } .header-actions { margin-left:auto; gap:15px; } .header-cta { display:none; } .hero { min-height:auto; grid-template-columns:1fr; gap:35px; padding:70px 24px 60px; background:linear-gradient(160deg,#fffdfd 0%,#fffdfd 58%,#eef6f9 58%); } .dossier-scene { min-height:315px; max-width:400px; margin:auto; width:100%; } .dossier-main { right:10px; } .workflow-inner { display:block; padding:13px 20px 16px; overflow:hidden; } .workflow-title { margin-bottom:9px; } .workflow-bar ol { width:620px; gap:25px; justify-content:start; } .section { padding:75px 24px; } .service-grid,.workflow-section,.contact-section { grid-template-columns:1fr; gap:38px; } .service-grid { margin-top:44px; } .service-grid article { border-right:0; border-bottom:1px solid var(--line); padding:24px 0; } .workflow-section { padding:75px 24px; } .contact-section { padding:65px 24px; } .site-footer { flex-wrap:wrap; } .site-footer p:last-child { margin-left:0; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .workflow-progress i { transition:none; } }