:root { --blue:#0B4A8C; --orange:#F1770F; --dark:#1A1F2B; --muted:#5B6470; --light:#F7F9FC; --white:#FFF; --line:#E4E9F0; --shadow:0 14px 35px rgba(18,43,75,.09); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:Inter,system-ui,sans-serif; color:var(--dark); line-height:1.65; } a { color:inherit; text-decoration:none; } .container { width:min(1120px, calc(100% - 40px)); margin:auto; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); border-bottom:1px solid transparent; backdrop-filter:blur(14px); } .site-header.scrolled { border-color:var(--line); box-shadow:0 4px 16px rgba(20,36,56,.04); }
.navbar { min-height:76px; display:flex; align-items:center; justify-content:space-between; } .brand { display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-weight:800; font-size:1rem; letter-spacing:-.04em; } .brand-mark { width:34px; height:34px; flex:none; }
.nav-links { display:flex; gap:27px; align-items:center; font-size:.88rem; font-weight:600; } .nav-links > a:not(.button) { color:var(--muted); } .nav-links > a:hover { color:var(--blue); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--orange); color:var(--white); border:1px solid var(--orange); border-radius:4px; padding:13px 20px; font:700 .9rem Inter,sans-serif; cursor:pointer; transition:transform .2s,background .2s,box-shadow .2s; } .button:hover { background:#d86408; border-color:#d86408; transform:translateY(-2px); box-shadow:0 8px 16px rgba(241,119,15,.22); } .button-small { padding:10px 16px; }.button-outline { color:var(--blue); background:transparent; border-color:var(--blue); }.button-outline:hover { color:var(--white); background:var(--blue); border-color:var(--blue); }.button-light { color:var(--blue); background:var(--white); border-color:var(--white); }.button-light:hover { color:var(--blue); background:#edf4fc; border-color:#edf4fc; }
.menu-toggle { display:none; border:0; background:none; padding:9px; cursor:pointer; }.menu-toggle span { display:block; height:2px; width:24px; margin:5px 0; background:var(--blue); transition:.2s; }
.hero { overflow:hidden; padding:78px 0 83px; background:linear-gradient(115deg,#fff 55%,#f1f6fc 100%); }.hero-grid { display:grid; align-items:center; gap:45px; }.eyebrow { margin:0 0 12px; color:var(--orange); letter-spacing:.13em; font-size:.72rem; font-weight:800; }.hero h1,.section-heading h2,.why-copy h2,.contact-copy h2,.cta-banner h2 { margin:0; font-family:Poppins,sans-serif; font-weight:800; letter-spacing:-.045em; line-height:1.17; }.hero h1 { max-width:680px; font-size:clamp(2.35rem,7vw,4.3rem); }.hero h1 span { color:var(--blue); }.lead { max-width:580px; margin:22px 0 28px; color:var(--muted); font-size:1rem; }.hero-actions { display:flex; flex-wrap:wrap; gap:13px; }.hero-proof { display:flex; flex-wrap:wrap; gap:15px; margin-top:31px; color:var(--muted); font-size:.76rem; }.hero-proof span+span { border-left:1px solid var(--line); padding-left:15px; }.hero-proof strong { color:var(--dark); }
.hero-visual { position:relative; min-height:395px; max-width:510px; width:100%; margin:auto; }.workflow-lines { position:absolute; inset:0; width:100%; height:100%; }.workflow-card { position:absolute; z-index:2; display:flex; align-items:center; gap:9px; min-width:186px; padding:13px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); font-size:.76rem; font-weight:700; }.workflow-card b { color:var(--orange); margin-left:auto; }.card-top { left:5%; top:12%; }.card-middle { right:0; top:43%; }.card-bottom { left:15%; bottom:5%; }.dot { width:10px; height:10px; border-radius:50%; }.orange { background:var(--orange); }.blue { background:var(--blue); }.green { background:#32A887; }.visual-center { position:absolute; z-index:2; top:42%; left:40%; width:78px; height:78px; padding:16px; color:var(--blue); background:#fff; border-radius:50%; box-shadow:0 10px 30px rgba(11,74,140,.18); }.visual-center svg { width:100%; }.visual-orbit { position:absolute; border:1px solid #dbe7f3; border-radius:50%; }.orbit-one { width:330px; height:330px; top:35px; left:90px; }.orbit-two { width:245px; height:245px; top:78px; left:132px; border-style:dashed; }
.section { padding:78px 0; }.services { background:var(--light); }.section-heading { max-width:640px; margin-bottom:38px; }.section-heading h2,.why-copy h2,.contact-copy h2 { font-size:clamp(1.85rem,4vw,2.7rem); }.section-heading > p:last-child { color:var(--muted); margin:14px 0 0; }.services-grid { display:grid; gap:18px; }.service-card { padding:27px; background:var(--white); border:1px solid transparent; border-radius:7px; transition:.25s; }.service-card:hover { border-color:#bad1e9; box-shadow:var(--shadow); transform:translateY(-5px); }.icon-box { display:grid; place-items:center; width:45px; height:45px; margin-bottom:19px; color:var(--blue); background:#eaf2fa; border-radius:6px; }.icon-box svg { width:25px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.service-card h3,.value-card h3 { margin:0 0 9px; font-size:1.03rem; }.service-card p,.value-card p { margin:0; color:var(--muted); font-size:.86rem; }
.why-grid { display:grid; gap:38px; align-items:center; }.why-copy > p:not(.eyebrow) { color:var(--muted); }.text-link { display:inline-flex; gap:8px; align-items:center; margin-top:8px; color:var(--blue); font-weight:700; font-size:.9rem; }.text-link span { color:var(--orange); }.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.value-card { padding:22px; border:1px solid var(--line); border-radius:6px; }.value-number { display:block; margin-bottom:21px; color:var(--orange); font-size:.75rem; font-weight:800; }
.testimonials { overflow:hidden; }.testimonial-track { display:flex; gap:18px; overflow-x:auto; padding:4px 1px 16px; scrollbar-width:thin; scroll-snap-type:x mandatory; }.testimonial-card { flex:0 0 min(330px,86vw); min-height:260px; display:flex; flex-direction:column; margin:0; padding:26px; border:1px solid var(--line); border-radius:7px; scroll-snap-align:start; }.stars { color:var(--orange); letter-spacing:2px; font-size:.8rem; }.testimonial-card blockquote { margin:18px 0; font-size:.91rem; line-height:1.7; }.testimonial-card figcaption { margin-top:auto; display:flex; flex-direction:column; font-size:.8rem; }.testimonial-card figcaption strong { font-size:.88rem; }.testimonial-card figcaption span { color:var(--muted); }
.cta-banner { padding:73px 0; text-align:center; color:#fff; background:var(--blue); }.cta-banner .container { max-width:750px; }.cta-banner p { margin:0 0 9px; color:#c9dcef; font-size:.91rem; }.cta-banner h2 { margin-bottom:26px; font-size:clamp(1.8rem,4.5vw,3rem); }
footer { background:#f4f7fb; }.contact-grid { display:grid; gap:36px; padding:76px 0 57px; }.contact-copy > p:not(.eyebrow) { max-width:440px; color:var(--muted); }.email-link { display:inline-flex; align-items:center; gap:10px; margin-top:16px; color:var(--blue); font-weight:700; }.email-link svg { width:19px; stroke:var(--orange); fill:none; stroke-width:1.8; }.contact-form { display:grid; gap:15px; padding:25px; background:#fff; border:1px solid var(--line); border-radius:7px; }.contact-form label { display:grid; gap:6px; font-size:.78rem; font-weight:700; }.contact-form input,.contact-form textarea { width:100%; padding:10px; resize:vertical; border:1px solid #cfd8e3; border-radius:3px; font:400 .9rem Inter,sans-serif; }.contact-form input:focus,.contact-form textarea:focus { outline:2px solid rgba(241,119,15,.35); border-color:var(--orange); }.contact-form .button { justify-self:start; }.form-message { min-height:1.25em; margin:0; font-size:.8rem; font-weight:600; }.form-message.error { color:#b42318; }.form-message.success { color:#087443; }.footer-bottom { display:grid; gap:16px; padding:27px 0; border-top:1px solid var(--line); font-size:.77rem; }.footer-bottom p { margin:0; color:var(--muted); }.footer-links { display:flex; gap:17px; color:var(--muted); }.footer-links a:hover { color:var(--blue); } small { color:var(--muted); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1; transform:none; }.hero-animate { animation:rise .75s both; }.hero-visual { animation-delay:.15s; } @keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } } a:focus-visible,button:focus-visible { outline:3px solid rgba(241,119,15,.48); outline-offset:3px; }
@media (min-width:480px) { .services-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px) { .nav-links { position:absolute; top:76px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 20px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 10px 18px rgba(20,36,56,.08); }.nav-links.open { display:flex; }.nav-links > a { padding:12px 0; }.nav-links .button { margin-top:8px; }.menu-toggle { display:block; }.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } }
@media (min-width:768px) { .hero { padding:107px 0; }.hero-grid { grid-template-columns:1.08fr .92fr; }.services-grid { grid-template-columns:repeat(3,1fr); }.why-grid { grid-template-columns:.78fr 1.22fr; }.contact-grid { grid-template-columns:1fr 1fr; align-items:start; }.footer-bottom { grid-template-columns:1.2fr 1.4fr 1fr auto; align-items:center; }.footer-bottom .brand { grid-row:span 1; } }
@media (min-width:1024px) { .services-grid .service-card:nth-child(4) { grid-column:1 / 2; }.services-grid .service-card:nth-child(5) { grid-column:2 / 3; }.testimonial-track { overflow:hidden; }.testimonial-card { flex-basis:calc(25% - 14px); } }
@media (min-width:1440px) { .container { width:min(1240px,calc(100% - 80px)); }.hero { padding:123px 0; }.section { padding:100px 0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal { opacity:1; transform:none; } }