@import url('local-fonts.css');
:root{--blue:#4454e8;--navy:#182638;--muted:#7a8799;--line:#e5e9f2;--bg:#f8f9fd;--lav:#ecedff;--green:#0f9276}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--navy);background:var(--bg);font-family:'DM Sans',system-ui,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:auto;padding:0 26px}
.header{height:82px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header .container{height:100%;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:10px}
.mark{background:var(--blue);color:white;width:39px;height:39px;border-radius:12px;display:grid;place-items:center;font-weight:800;letter-spacing:-1px;box-shadow:0 8px 20px #4454e829}
.brand b{display:block;font-family:Manrope;font-size:16px;letter-spacing:-.6px}
.brand small{color:#a0a8b5;font-size:10px}
.links{display:flex;align-items:center;gap:29px;margin:auto}
.links a{font-weight:700;font-size:13px;color:#667489}
.links a:hover{color:var(--blue)}
.header-actions{display:flex;gap:10px}
.btn{background:var(--blue);color:white;border:1px solid var(--blue);border-radius:11px;padding:13px 18px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 20px #4454e828;transition:.15s}
.btn:hover{transform:translateY(-1px);background:#3545d1}
.btn.outline{background:white;color:#27384c;border-color:#dfe4ee;box-shadow:none}
.btn.light{background:#fff;color:var(--blue);border:0;box-shadow:none}
.mobile-menu{display:none}
.hero{--hero-accent:#284a63;background:#f5f7f9;padding:78px 0 85px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:45px}
.tag{display:inline-flex;border-radius:6px;background:#e7edf2;color:var(--hero-accent);padding:7px 10px;font-size:11px;font-weight:700;letter-spacing:.04em}
.hero h1{font:650 clamp(37px,4.4vw,58px)/1.14 'DM Sans',system-ui,sans-serif;letter-spacing:-.035em;margin:23px 0}
.hero h1 em{font-style:normal}
.hero p{font-size:16px;line-height:1.7;color:#4b5d6e;max-width:535px;margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-actions .btn{background:var(--hero-accent);border-color:var(--hero-accent);border-radius:8px;font-weight:700;box-shadow:none}
.hero-actions .btn:hover{background:#1e394d}
.hero-actions .btn.outline{background:white;color:var(--hero-accent);border-color:#aebcca}
.hero-actions .btn.outline:hover{background:#e7edf2}
.micro{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;color:#546575;font-size:12px;margin-top:29px}
.micro b{color:#26364b}
.micro-dot{width:7px;height:7px;background:#4c766d;border-radius:50%}
.visual{position:relative;min-height:470px;display:grid;place-items:center}
.visual-back{position:absolute;width:85%;height:91%;background:#e3eaf0;border-radius:44% 56% 48% 52%;transform:rotate(-15deg)}
.person-card{width:70%;height:395px;border-radius:26px;background:linear-gradient(150deg,#e9eff9,#fafcff 40%,#d5dfef);position:relative;box-shadow:0 27px 80px #38488a25;overflow:hidden;display:flex;align-items:end;justify-content:center}
.person-art{position:absolute;width:100%;height:100%;inset:0}
.person-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.floating{position:absolute;background:#fff;border:1px solid #eef1f6;box-shadow:0 15px 45px #34436d20;border-radius:15px;padding:15px;z-index:2}
.float-job{left:-3%;top:19%;width:205px;transform:rotate(-4deg)}
.float-app{right:-8%;bottom:17%;width:220px;transform:rotate(4deg)}
.f-title{font-size:11px;color:#8b95a4;margin-bottom:7px}
.floating strong{font-size:13px}
.pill{display:inline-block;background:#e8f8f0;color:#14886b;padding:5px 9px;border-radius:100px;font-size:10px;font-weight:800}
.icon-square{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eff0ff;color:var(--blue);font-size:18px}
.floating-row{display:flex;align-items:center;gap:10px}
.section{padding:83px 0}
.eyebrow{color:var(--blue);font-weight:800;font-size:11px;letter-spacing:1.8px;text-transform:uppercase}
.section-header{text-align:center;max-width:650px;margin:0 auto 34px}
.section-header h2{font:800 clamp(27px,3vw,39px)/1.25 Manrope;letter-spacing:-1.35px;margin:13px 0}
.section-header p{color:#7c879a;font-size:14px;line-height:1.8}
.categories {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 45px) / 4);
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: 4px 14px;
}
.categories .category { min-width: 0; scroll-snap-align: start; }
.categories .category:focus-visible { outline: 2px solid #4558e8; outline-offset: -3px; }
.category-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.category-controls[hidden] { display: none; }
.category-controls button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: #18243a;
    font-size: 20px;
    cursor: pointer;
}
.category-controls button:disabled { opacity: .45; cursor: default; }
.category{background:white;border:1px solid var(--line);border-radius:17px;padding:23px;min-height:174px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 10px 34px #28395807;transition:.2s}
.category:hover{transform:translateY(-4px);border-color:#b8c0ff;box-shadow:0 18px 42px #293c8220}
.category .emoji{font-size:28px;background:#f0f2ff;width:55px;height:55px;display:grid;place-items:center;border-radius:15px;margin-bottom:19px}
.category strong{font-size:15px;margin-bottom:6px}
.category span:last-child{font-size:12px;color:#9aa4b1}
.search-band{background:#fff;padding:22px;border:1px solid var(--line);border-radius:20px;display:grid;grid-template-columns:1.3fr 1fr auto;gap:12px;box-shadow:0 20px 55px #293d7510;margin-top:30px}
.search-field{display:flex;align-items:center;gap:11px;padding:0 14px;border:1px solid #e3e8f2;border-radius:12px;background:#fbfcff;color:#94a0b0}
.search-field input{width:100%;border:0;outline:0;background:transparent;padding:16px 0;color:#29394e;font-size:13px}
.search-field span{font-size:19px}
.search-band .btn{padding-left:25px;padding-right:25px}
.jobs-section{background:#fff;border-top:1px solid #edf0f5;border-bottom:1px solid #edf0f5}
.job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.job{border:1px solid var(--line);background:#fff;border-radius:18px;padding:21px;box-shadow:0 11px 30px #29394e08;transition:.2s}
.job:hover{border-color:#aab5ff;transform:translateY(-3px)}
.job-top{display:flex;justify-content:space-between;align-items:center}
.job-icon{width:47px;height:47px;background:#eef0ff;color:var(--blue);border-radius:13px;display:grid;place-items:center;font-size:23px}
.job h3{font-size:16px;line-height:1.4;margin:18px 0 10px}
.job small{font-size:12px;color:#8793a3}
.job-details{display:grid;gap:10px;margin:20px 0;color:#7d899a;font-size:12px}
.job-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid #edf0f5}
.job-bottom b{font-size:15px}
.job-bottom a{background:none;border:0;color:var(--blue);font-weight:800;font-size:12px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:23px;margin-top:42px}
.step{padding:20px 22px;text-align:center}
.step .number{height:67px;width:67px;border-radius:21px;background:#eff0ff;color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:24px;margin:0 auto 18px}
.step h3{font-size:17px;margin:0 0 8px}
.step p{font-size:13px;line-height:1.75;color:#8490a2;margin:0}
.choice-section{padding:70px 0}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.choice-card{border-radius:23px;padding:38px;min-height:266px;background:#eef0ff;position:relative;overflow:hidden}
.choice-card:nth-child(2){background:#e7f7f1}
.choice-card .mini{font-size:11px;font-weight:900;letter-spacing:1.4px;color:#5463b9}
.choice-card:nth-child(2) .mini{color:#138e70}
.choice-card h2{font:800 27px/1.2 Manrope;letter-spacing:-.9px;margin:14px 0}
.choice-card p{max-width:340px;font-size:13px;line-height:1.7;color:#707c91}
.choice-card button{margin-top:12px}
.choice-art{font-size:100px;position:absolute;right:20px;bottom:-15px;opacity:.15;transform:rotate(-12deg)}
.faq{max-width:780px;margin:20px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:20px 5px}
.faq summary{cursor:pointer;font-weight:800;font-size:15px;list-style:none;display:flex;justify-content:space-between}
.faq summary:after{content:'+';font-size:22px;color:var(--blue)}
.faq details[open] summary:after{content:'−'}
.faq p{font-size:13px;line-height:1.8;color:#7d889b;max-width:690px}
.bottom-cta{background:linear-gradient(115deg,#3b4dd5,#596af1);color:white;padding:55px 60px;border-radius:28px;display:flex;justify-content:space-between;gap:35px;align-items:center}
#top{padding-bottom:24px}
.bottom-cta h2{font:800 31px/1.25 Manrope;letter-spacing:-1px;max-width:570px;margin:0 0 12px}
.bottom-cta p{color:#e1e5ff;font-size:13px;line-height:1.7;margin:0}
.footer{padding:65px 0 27px;background:#172637;color:white;margin-top:80px}
.footer-grid{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:35px}
.footer p{color:#aeb9c6;font-size:12px;line-height:1.8;max-width:285px}
.footer h4{font-size:13px}
.footer a{display:block;color:#aeb9c6;font-size:12px;margin:13px 0}
.footer-bottom{border-top:1px solid #304053;padding-top:25px;margin-top:40px;display:flex;justify-content:space-between;color:#a0afbf;font-size:11px}
.demo-label{display:inline-block;color:#8793a4;font-size:11px;margin-top:10px}
.mobile-actions{display:none}
@media(max-width:1000px){.links{gap:15px}
.hero-grid{gap:10px}
.visual{transform:scale(.88)}
.categories{grid-auto-columns:calc((100% - 15px) / 2)}
.job-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.container{padding:0 19px}
.header{height:70px}
.header .container{gap:8px}
.links,.header-actions{display:none}
.mobile-menu{display:block;margin-left:auto;border:1px solid var(--line);border-radius:10px;background:white;padding:8px 11px;font-size:18px}
.mobile-actions.open{display:grid;position:absolute;left:0;right:0;top:69px;background:white;padding:14px 19px 20px;gap:12px;box-shadow:0 20px 30px #12213913}
.mobile-actions a{padding:9px 0;font-size:13px;font-weight:750}
.hero{padding:55px 0 42px}
.hero-grid{display:block}
.hero h1{font-size:clamp(32px,6.2vw,43px);margin:18px 0}
.hero p{font-size:14px}
.hero-actions .btn{flex:1}
.visual{min-height:380px;transform:scale(.8);margin:-10px -12px -30px}
.person-card{height:340px}
.float-job{left:-4%}
.float-app{right:-6%}
.section{padding:62px 0}
.search-band{grid-template-columns:1fr;padding:15px}
.search-field input{padding:14px 0}
.categories{grid-auto-columns:75%;gap:10px}
.category{min-height:152px;padding:18px}
.category .emoji{width:48px;height:48px;font-size:24px;margin-bottom:14px}
.category strong{font-size:13px}
.job-grid{grid-template-columns:1fr}
.how{grid-template-columns:1fr;gap:8px;margin-top:25px}
.choice{grid-template-columns:1fr}
.choice-card{min-height:250px;padding:28px}
.bottom-cta{display:block;padding:35px 26px}
.bottom-cta h2{font-size:25px}
.bottom-cta .btn{margin-top:22px}
.footer-grid{grid-template-columns:1fr 1fr;gap:25px}
.footer-grid>div:first-child{grid-column:1/-1}
.footer-bottom{display:block;line-height:1.8}
.section-header h2{font-size:29px}}

.skip-link{position:fixed;left:1rem;top:-5rem;z-index:30}
.skip-link:focus{top:1rem}
#jobs,#categories,#how,#faq{scroll-margin-top:85px}