.hero{padding-bottom:32px}
#about{padding-top:48px}
#about,#services,#faq,#request{scroll-margin-top:16px}
.links{display:flex;gap:32px;font-size:.9375rem;font-weight:500}
.links a:hover{text-decoration:underline;color:inherit}
.more{text-align:center;margin-top:40px}
@media (max-width:860px){.links{display:none}#about{padding-top:40px}}
/* dark request section */
.req{background:#000 radial-gradient(circle at 1px 1px,#1c1c1c 1px,transparent 0) 0 0/22px 22px;color:#fff;padding:88px 0}
.req h2{margin-bottom:10px}
.req .lead{color:#a8a8a8;font-size:.9375rem;margin-bottom:44px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.req h3{font-size:1.125rem;font-weight:500;margin-bottom:28px}
.steps{list-style:none;position:relative}
.steps li{display:flex;gap:18px;padding-bottom:34px;position:relative}
.steps li:last-child{padding-bottom:0}
.steps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:1px;background:#333}
.dot{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #444;display:grid;place-items:center}
.dot::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.steps b{display:block;font-weight:500;font-size:.9375rem}
.steps span{display:block;font-size:.9375rem;color:#a8a8a8;max-width:42ch}
.form{background:#111;border:1px solid #1f1f1f;border-radius:var(--r);padding:28px;display:grid;gap:14px}
.form input,.form textarea{width:100%;background:#1d1d1d;border:1px solid #1d1d1d;border-radius:10px;padding:14px 16px;color:#fff;font:inherit;font-size:.9375rem}
.form textarea{min-height:120px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#8a8a8a}
.form input:focus,.form textarea:focus{outline:none;border-color:#fff}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-foot small{font-size:.75rem;color:#8a8a8a;max-width:30ch;line-height:1.5}
.form-foot small a{text-decoration:underline}
.form button{border:0;cursor:pointer;font-family:inherit}
.ok{display:none;background:#1d1d1d;border-radius:10px;padding:14px 16px;font-size:.9375rem}
.ok.show{display:block}

/* faq */
.faq-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.faq-grid h2{margin-bottom:28px}
details{background:#fff;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.07);margin-bottom:14px}
summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;padding:18px 22px;font-weight:500;font-size:.9375rem}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-size:1.25rem;width:16px;text-align:center;line-height:1}
details[open] summary::before{content:"\2212"}
details p{padding:0 22px 20px 52px;color:var(--grey);font-size:.9375rem}
summary:focus-visible{outline:2px solid #000;outline-offset:2px;border-radius:14px}
.faq-art{width:100%;max-width:380px;margin:0 auto}
@media (max-width:860px){.req-grid,.faq-grid{grid-template-columns:1fr}.req,section.faq{padding:64px 0}.faq-art{max-width:240px}}

/* spacing, background, carousel */
body{background:#f7f7f7}
.hero{padding:72px 0 16px}
section{padding:44px 0}
#about{padding-top:24px}
.areas{background:transparent}
.req{padding:56px 0}
.req .lead{margin-bottom:32px}
.stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:32px}
.stat{display:flex;align-items:center;gap:14px}
.stat b{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:500;line-height:1}
.stat span{font-size:.9375rem;max-width:11ch;line-height:1.4}
.carousel{overflow:hidden;padding:0 0 44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:20px;width:max-content;animation:slide 45s linear infinite}
.carousel:hover .track{animation-play-state:paused}
.track img{flex:none;width:240px;aspect-ratio:540/680;object-fit:cover;border-radius:var(--r)}
@keyframes slide{to{transform:translateX(calc(-50% - 10px))}}
@media (prefers-reduced-motion:reduce){.track{animation:none}.carousel{overflow-x:auto}}
@media (max-width:860px){.hero{padding:48px 0 12px}section{padding:32px 0}.req{padding:40px 0}.track img{width:180px}.carousel{padding-bottom:32px}}

.hero p{margin-bottom:0}
.hero p.upd{margin-top:14px}
main{padding-bottom:40px}
.dev{padding:44px 0 64px}
.dev-card{background:#fff;border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.06);padding:48px;max-width:820px;margin:0 auto;text-align:center}
.dev-card .tag{margin-bottom:20px}
.dev-card h2{margin-bottom:16px}
.dev-card p{color:var(--grey);max-width:60ch;margin:0 auto 12px}
.dev-card p:last-child{margin-bottom:0}
@media (max-width:860px){.dev-card{padding:32px 24px}.dev{padding:32px 0 48px}}