.button{border-radius:var(--radius-control);border:1px solid #0000;justify-content:space-between;align-items:center;gap:28px;min-height:56px;padding:17px 24px;font-size:.875rem;font-weight:700;line-height:1.4;transition:transform .2s,background .2s;display:inline-flex}.button:hover{transform:translateY(-3px)}.button--primary{color:var(--color-navy);background:var(--color-electric)}.button--dark{color:var(--color-white);background:var(--color-navy)}.button--light{color:var(--color-navy);background:var(--color-white)}.button--outline{color:inherit;background:0 0;border-color:currentColor}
.hero{background:var(--color-navy);color:var(--color-white);align-items:center;height:calc(100svh - 90px);min-height:600px;max-height:800px;padding-block:clamp(20px,3vh,36px);display:flex;overflow:clip}.hero__layout{grid-template-columns:1.15fr 1fr;align-items:center;gap:44px;display:grid}.hero__eyebrow{color:var(--color-turquoise);font-size:.69rem}.hero h1{letter-spacing:-.045em;font-size:clamp(3.4rem,5.2vw,5.3rem);line-height:.99}.hero h1>span{color:var(--color-turquoise)}.hero__dot{color:var(--color-electric)}.hero__description{max-width:450px;color:color-mix(in srgb, var(--color-white) 72%, var(--color-navy));margin-top:30px;font-size:1rem}.hero__actions{margin-top:34px}.hero__experience{font:400 1.75rem/1.1 var(--font-hand);color:var(--color-white);margin-top:40px}.hero__visual{min-width:0;padding:52px 8px 42px;position:relative}.hero__browser{border:1px solid color-mix(in srgb, var(--color-white) 30%, transparent);box-shadow:22px 22px 0 var(--color-violet);border-radius:14px;display:block;overflow:hidden;transform:rotate(3deg)}.hero__browser-bar{background:var(--color-navy);min-height:42px;color:color-mix(in srgb, var(--color-white) 70%, transparent);grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:6px 6px 6px 12px;font-size:.65rem;display:grid}.hero__browser-dots{align-items:center;display:flex}.hero__browser-dots button{background:0 0;border:0;place-items:center;width:24px;height:30px;padding:0;display:grid}.hero__browser-dots button:after{content:"";background:var(--color-turquoise);opacity:.55;border-radius:50%;width:6px;height:6px;transition:transform .3s,opacity .3s}.hero__browser-dots button.is-active:after{opacity:1;transform:scale(1.5)}.hero__browser-domain{white-space:nowrap}.hero__browser-nav{justify-self:end;gap:2px;display:flex}.hero__browser-nav button{background:color-mix(in srgb, var(--color-white) 10%, transparent);width:32px;height:32px;color:var(--color-white);opacity:.55;border:0;border-radius:50%;place-items:center;padding:0;transition:background .3s,color .3s,opacity .3s;display:grid}.hero__browser-nav button:hover,.hero__browser-nav button:focus-visible{background:var(--color-electric);color:var(--color-navy);opacity:1}.hero__browser-nav .arrow{width:18px;height:18px}.hero__browser-nav .hero__browser-prev .arrow{transform:rotate(180deg)}.hero__project{background:var(--color-navy);transition:opacity .3s;display:block;position:relative;overflow:hidden}.hero__project-image{aspect-ratio:4/3;position:relative;overflow:hidden}.hero__project-image img{object-fit:cover}.hero__project-caption{display:flex}.hero__project-info{background:var(--color-navy);flex-direction:column;gap:2px;width:100%;padding:12px 24px;display:flex}.hero__project-info strong{font:800 32px/1 var(--font-heading)}.hero__project-info span{align-items:center;gap:12px;font-size:.8rem;display:flex}.hero__project-info span .arrow{width:16px;height:16px}@media (max-width:1023px){.hero__layout{gap:24px}}@media (max-width:767px){.hero{height:auto;min-height:0;max-height:none;padding-block:45px 70px;display:block}.hero__layout{grid-template-columns:1fr;gap:42px}.hero h1{font-size:clamp(3rem,10vw,4.8rem)}.hero__visual{width:calc(100% - 24px);max-width:510px;margin:auto}}@starting-style{.hero__project{opacity:0}}@media (prefers-reduced-motion:reduce){.hero__project{transition:none}}
.projects{padding-block:110px}.projects__heading{justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:56px;display:flex}.projects__heading .eyebrow,.projects__heading h2 span{color:var(--color-violet)}.projects__heading .handwritten{color:var(--color-violet);margin:0 65px 15px 0;font-size:2.2rem;transform:rotate(-6deg)}.projects__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px;display:grid}.projects__card{--project-accent:var(--color-turquoise);min-width:0}.projects__card--violet{--project-accent:var(--color-violet)}.projects__card--electric{--project-accent:var(--color-electric)}.projects__card--navy{--project-accent:var(--color-navy)}.projects__card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 16px)}.projects__card:focus-within .projects__arrow{background:var(--color-violet);color:var(--color-white);transform:rotate(45deg)}.projects__image{background:var(--project-accent);border-radius:var(--radius-card);padding:34px 32px 0;position:relative;overflow:hidden}.projects__window-bar{background:var(--color-white);height:31px;color:var(--color-navy);border-radius:8px 8px 0 0;justify-content:space-between;align-items:center;padding:0 12px;font-size:.55rem;display:flex}.projects__window-bar>span:first-child{letter-spacing:3px;opacity:.5;font-size:6px}.projects__window-bar .arrow{width:12px;height:12px}.projects__image-frame{aspect-ratio:1.75;background:var(--color-paper);position:relative;overflow:hidden}.projects__image-frame:focus-visible{outline-offset:-4px}.projects__screenshot{object-fit:cover;object-position:center top;width:100%;height:100%;transition:object-position 5s}.projects__index{background:var(--color-white);color:var(--color-navy);pointer-events:none;border-radius:20px;padding:2px 10px;font-size:.65rem;position:absolute;bottom:14px;right:14px}.projects__caption{justify-content:space-between;align-items:center;gap:20px;padding-top:21px;display:flex}.projects__caption p{color:var(--color-muted);margin-bottom:6px;font-size:.72rem}.projects__caption h3{font-size:1.9rem}.projects__arrow{border:1px solid var(--color-line);border-radius:50%;place-items:center;width:46px;height:46px;transition:all .25s;display:grid}@media (min-width:1024px){.projects__card:hover .projects__screenshot,.projects__card:focus-within .projects__screenshot{object-position:center bottom}.projects__card:hover .projects__arrow,.projects__card:focus-within .projects__arrow{background:var(--color-violet);color:var(--color-white);transform:rotate(45deg)}}@media (max-width:1023px),(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.projects__hint-hover{display:none}.projects__hint-scroll{display:inline}.projects__image-frame{overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-violet) var(--color-paper);overflow-y:auto}.projects__screenshot{height:auto;transition:none}}@media (max-width:767px){.projects{padding-block:75px}.projects__heading{display:block}.projects__heading .handwritten{margin:28px 0 0 12px;font-size:1.9rem}.projects__grid{grid-template-columns:1fr;gap:36px}.projects__card:last-child:nth-child(odd){grid-column:auto;width:100%}.projects__image{padding:24px 20px 0}}
.process{background:var(--color-navy);color:var(--color-white);padding-block:100px}.process__heading{justify-content:space-between;align-items:center;gap:50px;margin-bottom:60px;display:flex}.process__heading .eyebrow,.process__heading h2 span{color:var(--color-turquoise)}.process__heading>p{max-width:380px;color:color-mix(in srgb, var(--color-white) 68%, var(--color-navy));font-size:.9rem}.process__grid{border-left:1px solid color-mix(in srgb, var(--color-white) 18%, transparent);border-top:1px solid color-mix(in srgb, var(--color-white) 18%, transparent);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.process__step{border-right:1px solid color-mix(in srgb, var(--color-white) 18%, transparent);border-bottom:1px solid color-mix(in srgb, var(--color-white) 18%, transparent);padding:34px;transition:background .25s}.process__step:hover{background:color-mix(in srgb, var(--color-violet) 20%, transparent)}.process__step--wide{background:color-mix(in srgb, var(--color-violet) 20%, transparent);grid-column:1/-1}.process__step h3{margin-bottom:16px;font-size:1.65rem}.process__step>p{color:color-mix(in srgb, var(--color-white) 68%, var(--color-navy));font-size:.85rem}.process__number{color:var(--color-turquoise);font:800 2.1rem/1 var(--font-heading);justify-content:space-between;align-items:center;margin-bottom:35px;display:flex}.process__number>span{font:400 1.3rem var(--font-body)}.process__foot{justify-content:flex-end;align-items:center;gap:28px;padding-top:35px;display:flex}.process__foot .handwritten{color:var(--color-electric);font-size:1.7rem}.process__line{background:var(--color-electric);width:75px;height:1px}@media (max-width:1023px){.process__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767px){.process{padding-block:75px}.process__heading{display:block}.process__heading>p{margin-top:25px}.process__grid{grid-template-columns:1fr}.process__step{padding:28px}.process__number{margin-bottom:24px}.process__line{display:none}}
.pricing{padding:110px 0 60px}.pricing__heading{text-align:center;margin-bottom:70px}.pricing__heading .eyebrow{color:var(--color-violet);justify-content:center}.pricing__heading h2 span{color:var(--color-violet)}.pricing__heading .handwritten{color:var(--color-muted);margin-top:20px}.pricing__grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:24px;display:grid}.pricing__card{background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--radius-card);flex-direction:column;padding:30px;display:flex;position:relative}.pricing__card h3{font-size:1.9rem;line-height:1.15}.pricing__card .button{width:100%;margin-top:auto}.pricing__card--featured{background:var(--color-violet);color:var(--color-white);border-color:var(--color-violet)}.pricing__card--featured .pricing__label,.pricing__card--featured .pricing__description,.pricing__card--featured .pricing__payment{color:color-mix(in srgb, var(--color-white) 80%, var(--color-violet))}.pricing__card--featured .pricing__features{border-color:color-mix(in srgb, var(--color-white) 25%, transparent)}.pricing__card--featured .pricing__features li>span{color:var(--color-electric)}.pricing__badge{background:var(--color-electric);color:var(--color-navy);letter-spacing:.08em;border-radius:5px;padding:7px 15px;font-size:.65rem;font-weight:800;position:absolute;top:-16px;left:30px}.pricing__label{color:var(--color-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;font-size:.68rem}.pricing__description{min-height:3.4em;color:var(--color-muted);margin-top:8px;font-size:.82rem}.pricing__price{font:800 clamp(3rem, 4.2vw, 4.4rem)/1 var(--font-heading);letter-spacing:-.05em;margin-top:18px}.pricing__price span{font-size:.6em}.pricing__payment{color:var(--color-muted);margin-top:6px;font-size:.7rem}.pricing__features{border-top:1px solid var(--color-line);margin:18px 0 0;padding:18px 0 22px;list-style:none}.pricing__features li{align-items:baseline;gap:12px;padding:4px 0;font-size:.8rem;display:flex}.pricing__features li>span{color:var(--color-violet);font-size:1rem;font-weight:700}.pricing__vat-note{color:var(--color-muted);text-align:center;margin-top:18px;font-size:.72rem}@media (max-width:1023px){.pricing__card{padding:30px 22px}}@media (max-width:767px){.pricing{padding:75px 0 35px}.pricing__grid{grid-template-columns:1fr;gap:36px;max-width:500px;margin:auto}.pricing__card{padding:32px}.pricing__description{min-height:auto}}
.contact__privacy{color:var(--color-muted);margin-bottom:16px;font-size:12px}.contact__privacy a{text-underline-offset:3px;text-decoration:underline}.contact{background:var(--color-violet);color:var(--color-white);padding-block:95px}.contact__layout{grid-template-columns:1fr 1.1fr;align-items:center;gap:80px;display:grid}.contact .eyebrow{color:var(--color-electric)}.contact h2{font-size:clamp(3rem,4.7vw,4.7rem)}.contact h2 span{color:var(--color-electric)}.contact .handwritten{max-width:340px;margin-top:24px;font-size:1.8rem;transform:rotate(-3deg)}.contact__description{color:color-mix(in srgb, var(--color-white) 80%, var(--color-violet));max-width:370px;margin-top:36px;font-size:.85rem}.contact__details{flex-wrap:wrap;gap:24px;margin-top:24px;font-size:.75rem;display:flex}.contact__form{background:var(--color-white);color:var(--color-navy);border-radius:var(--radius-card);padding:36px}.contact__form-heading{font:800 1.7rem var(--font-heading);justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.contact__form-heading .arrow{color:var(--color-violet)}.contact__fields{grid-template-columns:1fr 1fr;gap:18px;display:grid}.contact__field{margin-bottom:22px;font-size:.72rem;font-weight:700;display:block}.contact__field>span{font-weight:400}.contact__field input,.contact__field textarea,.contact__field select{background:var(--color-paper);width:100%;color:var(--color-navy);border:1px solid var(--color-line);border-radius:7px;min-width:0;margin-top:8px;padding:12px;font-size:16px;font-weight:400;display:block}.contact__field input:focus,.contact__field textarea:focus,.contact__field select:focus{outline:2px solid var(--color-violet);outline-offset:1px}.contact__field textarea{resize:vertical;min-height:120px}.contact__submit{border-radius:var(--radius-control);background:var(--color-navy);width:100%;color:var(--color-white);border:0;justify-content:space-between;align-items:center;gap:12px;padding:17px 20px;font-size:.875rem;font-weight:700;transition:background .2s;display:flex}.contact__submit:hover:not(:disabled){background:var(--color-violet)}.contact__submit:disabled{cursor:wait;opacity:.7}.contact__status{min-height:1.5em;color:var(--color-muted);margin-top:12px;font-size:.75rem;font-weight:700}.contact__status--success{color:#15803d;align-items:center;gap:6px;display:flex}.contact__status--success:before{content:"✓";font-size:1rem;line-height:1}.contact__status--error{color:var(--color-violet)}@media (max-width:1023px){.contact__layout{gap:35px}.contact__form{padding:28px}.contact__fields{grid-template-columns:1fr;gap:0}}@media (max-width:767px){.contact{padding-block:70px}.contact__layout{grid-template-columns:1fr;gap:45px}.contact__form{padding:25px}}
