:root{
  --bg:#FBFBF9; --ink:#1C293C; --yellow:#FDC800; --blue:#432DD7; --pink:#FF6B9D; --green:#16A34A; --cyan:#3D5BD0;
  --r:14px; --maxw:1140px; --sh:6px 6px 0 var(--ink); --sh-lg:10px 10px 0 var(--ink);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:Inter,system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:radial-gradient(var(--ink) .9px, transparent .9px); background-size:26px 26px; background-position:-3px -3px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:inherit; text-decoration:none}
.mono{font-family:"JetBrains Mono",monospace}
.kicker{display:inline-block; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; background:var(--ink); color:var(--yellow); padding:5px 11px; border-radius:6px}

.btn{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:15px; padding:13px 22px; border:3px solid var(--ink); border-radius:12px; cursor:pointer; box-shadow:var(--sh); transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink)}
.btn-y{background:var(--yellow); color:var(--ink)}
.btn-b{background:var(--blue); color:#fff}
.btn-w{background:#fff; color:var(--ink)}

header{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:3px solid var(--ink)}
nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:11px; font-weight:900; font-size:21px; letter-spacing:-.02em}
.logo{width:38px; height:38px; border:3px solid var(--ink); border-radius:10px; background:var(--yellow); display:grid; place-items:center; box-shadow:3px 3px 0 var(--ink)}
.navlinks{display:flex; gap:26px; font-weight:700; font-size:15px}
.navlinks a{padding:4px 2px; border-bottom:3px solid transparent}
.navlinks a:hover{border-color:var(--blue)}
.navlinks a.lang{font-weight:800; padding:2px 9px; border:2px solid var(--ink); border-radius:7px; margin-left:6px; background:var(--yellow)}
.navwrap{display:flex; align-items:center; gap:28px}

.hero{padding:74px 0 60px; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center}
.hero h1{font-size:clamp(40px,6.2vw,72px); font-weight:900; line-height:.98; letter-spacing:-.03em}
.hl{background:var(--yellow); padding:0 8px; border:3px solid var(--ink); border-radius:8px; display:inline-block; box-shadow:var(--sh); transform:rotate(-1.5deg)}
.hl.big{font-size:1.18em; padding:0 14px; transform:rotate(-2.5deg)}
.hero p.sub{font-size:19px; font-weight:500; margin:26px 0 32px; max-width:520px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-art{background:#fff; border:3px solid var(--ink); border-radius:var(--r); box-shadow:var(--sh-lg); padding:22px; transform:rotate(1.5deg)}
.hero-art .row{display:flex; align-items:center; gap:12px; padding:13px; border:3px solid var(--ink); border-radius:10px; margin-bottom:12px; font-weight:700}
.hero-art .row:last-child{margin-bottom:0}
.chip{width:34px; height:34px; border:3px solid var(--ink); border-radius:8px; display:grid; place-items:center; flex:none; font-family:"JetBrains Mono",monospace; font-weight:700}
.bar{flex:1; height:12px; border:2px solid var(--ink); border-radius:999px; overflow:hidden; background:#fff}
.bar > i{display:block; height:100%}

.marquee{border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); background:var(--ink); color:var(--yellow); overflow:hidden; white-space:nowrap}
.marquee div{display:inline-block; padding:13px 0; font-family:"JetBrains Mono",monospace; font-weight:700; letter-spacing:.1em; animation:scroll 22s linear infinite}
.marquee span{padding:0 26px}
@keyframes scroll{to{transform:translateX(-50%)}}

section{padding:74px 0}
.sec-head{margin-bottom:42px}
.sec-head h2{font-size:clamp(30px,4.6vw,48px); font-weight:900; letter-spacing:-.02em; margin-top:14px; line-height:1}
.sec-head p{font-weight:500; font-size:17px; margin-top:12px; max-width:560px}

.products{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; justify-content:center; justify-items:center}
.card{background:#fff; border:3px solid var(--ink); border-radius:var(--r); box-shadow:var(--sh); padding:24px; transition:transform .12s, box-shadow .12s; grid-column:span 2}
.card:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink)}
.card.big{grid-column:span 3}
.card .ico{width:50px; height:50px; border:3px solid var(--ink); border-radius:11px; display:grid; place-items:center; margin-bottom:16px; box-shadow:3px 3px 0 var(--ink)}
.card h3{font-size:21px; font-weight:900; margin-bottom:4px}
.card .tag{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; background:var(--ink); color:#fff; padding:3px 8px; border-radius:6px; display:inline-block; margin-bottom:10px}
.card p{font-weight:500; font-size:15px}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step{background:#fff; border:3px solid var(--ink); border-radius:var(--r); padding:24px; box-shadow:var(--sh); position:relative}
.step .num{position:absolute; top:-16px; left:18px; width:38px; height:38px; border:3px solid var(--ink); border-radius:9px; display:grid; place-items:center; font-weight:900; box-shadow:3px 3px 0 var(--ink)}
.step h4{font-size:18px; font-weight:900; margin:16px 0 6px}
.step p{font-weight:500; font-size:14.5px}

.cta{background:var(--blue); color:#fff; border:3px solid var(--ink); border-radius:24px; box-shadow:var(--sh-lg); padding:60px 34px; text-align:center}
.cta h2{font-size:clamp(30px,5vw,54px); font-weight:900; line-height:1; letter-spacing:-.02em}
.cta p{font-weight:600; font-size:18px; margin:18px auto 30px; max-width:480px}
.cta .btn-w{box-shadow:6px 6px 0 #000}

footer{border-top:3px solid var(--ink); padding:36px 0; background:var(--yellow)}
.foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-weight:700}

@media(max-width:900px){
  .navlinks{display:none}
  .hero{grid-template-columns:1fr; gap:36px}
  .products{grid-template-columns:1fr 1fr}
  .card,.card.big{grid-column:span 1}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){ .products,.steps{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto}}

.hero.solo{grid-template-columns:1fr}