.development-main{background-color:#f3f3f4;background-image:linear-gradient(90deg,rgba(19,19,18,.04) 1px,transparent 1px),linear-gradient(0deg,rgba(19,19,18,.04) 1px,transparent 1px);background-size:58px 58px;background-position:0 0;color:var(--black)}
.development-hero{position:relative;padding:clamp(52px,4.8vw,84px) 0 clamp(42px,4vw,60px);overflow:hidden;background:transparent}
.development-hero::after{content:"WEB";position:absolute;right:-.04em;bottom:-.22em;color:rgba(219,37,16,.035);font-size:clamp(10rem,24vw,25rem);line-height:1;font-weight:950;pointer-events:none}
.development-hero .container{position:relative;z-index:1;max-width:1310px}
.development-hero__content{width:100%;max-width:1280px}
.development-hero__title{max-width:1280px;margin:0;color:var(--black);font-size:clamp(2.35rem,5.5vw,5.7rem);line-height:1;font-weight:950;text-transform:uppercase;letter-spacing:-.03em}
.development-hero__title span{display:block;color:var(--red)}
.development-hero__lead{max-width:760px;margin:26px 0 0;color:rgba(19,19,18,.72);font-size:16px;line-height:1.55;font-weight:600}
.development-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.development-section{padding:clamp(78px,8vw,118px) 0}
.development-section--white{background:#fff}
.development-section--dark{background:#09090b;color:#fff}
.development-section--why{background:#f3f3f4}
.development-section__head{margin-bottom:clamp(34px,4vw,54px)}
.development-section__text-light{color:rgba(255,255,255,.68)!important}
.development-type-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.development-type-link{position:relative;display:flex;flex-direction:column;min-height:300px;padding:34px 36px 32px;border:1px solid rgba(19,19,18,.1);border-radius:28px;background:#f7f7f8;color:var(--black);text-decoration:none;overflow:hidden;isolation:isolate;transition:border-color .24s ease,transform .24s ease,background-color .24s ease}
.development-type-link::before{content:"";position:absolute;left:34px;top:0;width:78px;height:3px;background:var(--red);z-index:2}
.development-type-link::after{content:"";position:absolute;right:-70px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(219,37,16,.16),rgba(219,37,16,.045) 45%,transparent 72%);pointer-events:none;z-index:0}
.development-type-link:nth-child(1),.development-type-link:nth-child(4){border:1px dashed rgba(219,37,16,.58);background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px),#111113;background-size:44px 44px;color:#fff}
.development-type-link:hover{transform:translateY(-2px);border-color:rgba(219,37,16,.58)}
.development-type-link__num{position:absolute;right:30px;top:26px;z-index:1;color:transparent;-webkit-text-stroke:1.5px rgba(219,37,16,.78);font-size:clamp(4rem,5.4vw,6.5rem);line-height:.78;font-weight:950;letter-spacing:-.06em;opacity:.88;pointer-events:none}
.development-type-link>div{position:relative;z-index:2;max-width:78%;padding-top:26px}
.development-type-link h3{max-width:520px;margin:0 0 16px;font-size:clamp(1.9rem,2.55vw,3rem);line-height:.98;font-weight:950;letter-spacing:-.035em}
.development-type-link p{max-width:540px;margin:0;color:rgba(19,19,18,.64);font-size:15px;line-height:1.58;font-weight:600}
.development-type-link:nth-child(1) h3,.development-type-link:nth-child(4) h3{color:#fff}
.development-type-link:nth-child(1) p,.development-type-link:nth-child(4) p{color:rgba(255,255,255,.66)}
.development-type-link__more{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:max-content;min-height:42px;margin-top:auto;padding:0 18px;border:1px solid rgba(219,37,16,.58);border-radius:999px;color:var(--red);font-size:13px;line-height:1;font-weight:900;transition:background-color .22s ease,color .22s ease,border-color .22s ease}
.development-type-link:hover .development-type-link__more{background:var(--red);border-color:var(--red);color:#fff}
.development-solution-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.development-solution-card{position:relative;min-height:430px;padding:34px;border:1px dashed rgba(219,37,16,.64);border-radius:28px;background:#121214;overflow:hidden;display:flex;flex-direction:column}
.development-solution-card__num{display:block;margin-bottom:42px;color:var(--red);font-size:clamp(2.2rem,3vw,3.3rem);line-height:1;font-weight:950}
.development-solution-card h3{max-width:600px;margin:0 0 16px;color:#fff;font-size:clamp(1.75rem,2.6vw,3rem);line-height:1;font-weight:950;letter-spacing:-.035em}
.development-solution-card p{max-width:650px;margin:0 0 24px;color:rgba(255,255,255,.68);font-size:15px;line-height:1.58;font-weight:600}
.development-solution-card strong{display:block;margin:0 0 12px;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.development-solution-card ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0 0 30px;padding:0;list-style:none}
.development-solution-card li{position:relative;padding-left:18px;color:rgba(255,255,255,.78);font-size:14px;line-height:1.4;font-weight:700}
.development-solution-card li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.development-solution-card__cta{align-self:flex-start;margin-top:auto}

.development-includes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.development-includes-grid article{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:190px;padding:26px;border:1px solid rgba(19,19,18,.1);border-radius:24px;background:linear-gradient(180deg,rgba(248,248,249,.98) 0%,rgba(246,246,247,.96) 100%);overflow:hidden;isolation:isolate}
.development-includes-grid article::before{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:right center;background-size:contain;opacity:.5;filter:saturate(.95) contrast(1.04);z-index:0;pointer-events:none}
.development-includes-grid article::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,248,249,.99) 0%,rgba(248,248,249,.95) 34%,rgba(248,248,249,.72) 53%,rgba(248,248,249,.34) 74%,rgba(248,248,249,.12) 100%),radial-gradient(circle at right bottom,rgba(219,37,16,.10),transparent 36%);z-index:0;pointer-events:none}
.development-includes-grid article:nth-child(1)::before{background-image:url(../img/page/analiz-biznesu-ta-konkurentiv.webp)}
.development-includes-grid article:nth-child(2)::before{background-image:url(../img/page/proektuvannya-struktury-saitu.webp)}
.development-includes-grid article:nth-child(3)::before{background-image:url(../img/page/ux-ui-dyzain.webp)}
.development-includes-grid article:nth-child(4)::before{background-image:url(../img/page/adaptyvna-rozrobka.webp)}
.development-includes-grid article:nth-child(5)::before{background-image:url(../img/page/bazova-seo-pidhotovka.webp)}
.development-includes-grid article:nth-child(6)::before{background-image:url(../img/page/integratsiia-crm-ta-analityky.webp)}
.development-includes-grid article:nth-child(7)::before{background-image:url(../img/page/formy-chaty-ta-mesendzhery.webp)}
.development-includes-grid article:nth-child(8)::before{background-image:url(../img/page/testuvannia-pered-zapuskom.webp)}
.development-includes-grid article:nth-child(9)::before{background-image:url(../img/page/tekhnichnyi-suprovid-pislia-relizu.webp)}
.development-includes-grid span{position:relative;z-index:1;color:var(--red);font-size:22px;line-height:1;font-weight:950}
.development-includes-grid h3{position:relative;z-index:1;max-width:320px;margin:44px 0 0;color:var(--black);font-size:clamp(1.2rem,1.6vw,1.65rem);line-height:1.08;font-weight:950;letter-spacing:-.025em}
.development-cycle{padding:clamp(78px,8vw,118px) 0;background:#fff}
.development-cycle__shell{display:grid;grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);gap:clamp(54px,7vw,110px);align-items:center;padding:clamp(44px,5vw,72px);border-radius:34px;background:linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.038) 1px,transparent 1px),#101012;background-size:52px 52px;color:#fff;overflow:hidden}
.development-cycle__content{max-width:610px}
.development-cycle__content h2{max-width:610px;margin:0;color:#fff;font-size:clamp(2.75rem,3.8vw,4.55rem);line-height:.94;font-weight:950;text-transform:uppercase;letter-spacing:-.04em}
.development-cycle__content p{max-width:590px;margin:24px 0 0;color:rgba(255,255,255,.66);font-size:16px;line-height:1.62;font-weight:600}
.development-cycle__content .btn-primary{margin-top:30px}
.development-cycle__services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;row-gap:0;align-self:center;border-top:1px solid rgba(255,255,255,.12)}
.development-cycle__services span{position:relative;display:flex;align-items:center;min-height:64px;padding:16px 10px 16px 24px;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.88);font-size:14px;line-height:1.35;font-weight:800;transition:color .18s ease,transform .18s ease}
.development-cycle__services span::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;background:var(--red);transform:translateY(-50%)}
.development-cycle__services span:hover{color:#fff;transform:translateX(3px)}
.development-faq{background:#f3f3f4}
.development-faq .faq-visual{overflow:hidden;border-radius:24px}
.development-faq .faq-visual img{width:100%;height:100%;object-fit:cover;border-radius:24px}
.development-page .contact-section{background:#f3f3f4}
@media (max-width:1280px){
.development-hero__title{font-size:clamp(2.4rem,6vw,5rem)}
.development-includes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.development-includes-grid article::before{background-size:52%}
}
@media (max-width:980px){
.development-type-links,.development-solution-grid{grid-template-columns:1fr}
.development-cycle__shell{grid-template-columns:1fr;gap:38px}
}
@media (max-width:767px){
.development-main{background-size:42px 42px}.development-hero{padding:90px 0 42px}
.development-hero__title{font-size:clamp(2.55rem,12vw,4.2rem);line-height:.98}
.development-hero__lead{margin-top:22px;font-size:15px}
.development-hero__actions{display:grid;gap:12px;margin-top:24px;width:100%}
.development-hero__actions .btn-primary,.development-hero__actions .seo-link-button{width:100%;min-height:58px}
.development-section{padding:64px 0}
.development-section__head{margin-bottom:30px}
.development-type-links{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:100vw;margin-inline:calc(50% - 50vw);padding:0 16px 8px}
.development-type-links::-webkit-scrollbar{display:none}
.development-type-link{flex:0 0 calc(100vw - 52px);min-height:300px;padding:28px 24px 24px;scroll-snap-align:start;border-radius:24px;transform:none!important}
.development-type-link__num{right:20px;top:24px;font-size:4rem}
.development-type-link>div{max-width:82%;padding-top:24px}
.development-type-link h3{font-size:clamp(1.75rem,8vw,2.45rem)}
.development-type-link__more{margin-top:28px}
.development-solution-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:100vw;margin-inline:calc(50% - 50vw);padding:0 16px 8px}
.development-solution-grid::-webkit-scrollbar{display:none}
.development-solution-card{flex:0 0 calc(100vw - 52px);min-height:430px;padding:26px 24px;scroll-snap-align:start;border-radius:24px}
.development-solution-card__num{margin-bottom:30px;font-size:2.4rem}
.development-solution-card h3{font-size:clamp(1.65rem,8vw,2.35rem)}
.development-solution-card ul{grid-template-columns:1fr}
.development-solution-card__cta{width:100%;align-self:stretch}
.development-includes-grid{grid-template-columns:1fr}
.development-includes-grid article{min-height:150px;padding:22px}
.development-includes-grid article::before{background-size:58%;background-position:right 8px bottom 10px}
.development-includes-grid article::after{background:linear-gradient(90deg,rgba(248,248,249,.99) 0%,rgba(248,248,249,.96) 48%,rgba(248,248,249,.74) 72%,rgba(248,248,249,.28) 100%),radial-gradient(circle at right bottom,rgba(219,37,16,.10),transparent 34%)}
.development-includes-grid h3{margin-top:34px}
.development-cycle{padding:64px 0}
.development-cycle__shell{gap:34px;padding:30px 22px;border-radius:26px;background-size:42px 42px}
.development-cycle__content h2{font-size:clamp(2.3rem,10vw,3.5rem)}
.development-cycle__content .btn-primary{width:100%}
.development-cycle__services{grid-template-columns:1fr;column-gap:0;border-top-color:rgba(255,255,255,.14)}
.development-cycle__services span{min-height:56px;padding:13px 8px 13px 22px;font-size:13px}
.development-cycle__services span:hover{transform:none}
.development-faq .faq-layout{grid-template-columns:1fr;gap:28px}
.development-faq .faq-visual{max-width:none}
}
@media (max-width:430px){
.development-type-link{padding:26px 20px 22px}
.development-type-link::before{left:20px;width:64px}
.development-type-link__num{right:16px;top:22px;font-size:3.5rem}
.development-type-link>div{max-width:86%;padding-top:24px}
.development-type-link__more{margin-top:26px}
}
.development-why-head{display:grid;grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr);gap:clamp(34px,6vw,92px);align-items:end;margin-bottom:clamp(36px,4.5vw,58px)}
.development-why-head .section-title{max-width:720px}
.development-why-head .section-text{max-width:760px;margin:0 0 6px;color:rgba(19,19,18,.68);font-size:16px;line-height:1.62;font-weight:600}
.development-why-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.development-why-lead{position:relative;grid-column:1/-1;display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);grid-template-areas:"top top" "title text" "title tags";column-gap:clamp(34px,5vw,76px);row-gap:18px;min-height:280px;padding:clamp(30px,3.5vw,46px);border:1px solid rgba(219,37,16,.48);border-radius:30px;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px),#101012;background-size:46px 46px;color:#fff;overflow:hidden;isolation:isolate}
.development-why-lead::before{content:"";position:absolute;left:0;top:0;width:110px;height:3px;background:var(--red);z-index:2}
.development-why-lead::after{content:"";position:absolute;right:-90px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(219,37,16,.24) 0%,rgba(219,37,16,.08) 42%,transparent 70%);pointer-events:none;z-index:0}
.development-why-lead__top{grid-area:top;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1)}
.development-why-lead__top span{color:var(--red);font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:.1em;font-weight:950}
.development-why-lead__top strong{color:rgba(255,255,255,.42);font-size:13px;line-height:1;font-weight:900;letter-spacing:.05em}
.development-why-lead h3{grid-area:title;position:relative;z-index:1;align-self:center;max-width:520px;margin:0;color:#fff;font-size:clamp(2.5rem,3.6vw,4.6rem);line-height:.92;font-weight:950;letter-spacing:-.045em}
.development-why-lead p{grid-area:text;position:relative;z-index:1;align-self:end;max-width:660px;margin:0;color:rgba(255,255,255,.72);font-size:16px;line-height:1.62;font-weight:600}
.development-why-lead__tags{grid-area:tags;position:relative;z-index:1;display:flex;flex-wrap:wrap;align-self:start;gap:9px;margin:2px 0 0}
.development-why-lead__tags span{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border:1px solid rgba(219,37,16,.44);border-radius:999px;background:rgba(219,37,16,.07);color:#fff;font-size:11px;line-height:1;font-weight:850}
.development-why-card{position:relative;grid-column:span 3;display:flex;flex-direction:column;justify-content:space-between;min-height:170px;padding:25px 26px 24px;border:1px solid rgba(19,19,18,.11);border-radius:24px;background:#fff;overflow:hidden;isolation:isolate;transition:border-color .22s ease,transform .22s ease,background-color .22s ease}
.development-why-card:nth-child(n+6){grid-column:span 4}
.development-why-card::before{content:"";position:absolute;left:24px;top:0;width:54px;height:3px;background:rgba(219,37,16,.82);z-index:1}
.development-why-card::after{content:"";position:absolute;right:-58px;bottom:-72px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(219,37,16,.13),transparent 70%);pointer-events:none;z-index:0}
.development-why-card:hover{transform:translateY(-2px);border-color:rgba(219,37,16,.42);background:#fff}
.development-why-card span{position:relative;z-index:1;color:var(--red);font-size:clamp(2rem,2.4vw,2.75rem);line-height:1;font-weight:950;letter-spacing:-.04em}
.development-why-card strong{position:relative;z-index:1;max-width:300px;margin-top:34px;color:var(--black);font-size:clamp(1.08rem,1.25vw,1.38rem);line-height:1.12;font-weight:950}
.development-why-card--accent{border-color:rgba(219,37,16,.62);background:#fff7f5}
.development-why-card--accent::before{width:86px;background:var(--red)}
@media (max-width:1100px){
.development-why-head{grid-template-columns:1fr;gap:20px}
.development-why-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.development-why-lead{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-areas:"top top" "title text" "tags tags";min-height:auto}
.development-why-card,.development-why-card:nth-child(n+6){grid-column:span 1}
}
@media (max-width:767px){
.development-why-head{margin-bottom:28px}
.development-why-bento{grid-template-columns:1fr;gap:12px}
.development-why-lead{grid-column:auto;grid-template-columns:1fr;grid-template-areas:"top" "title" "text" "tags";gap:16px;padding:26px 22px;border-radius:24px}
.development-why-lead__top{padding-bottom:16px}
.development-why-lead h3{font-size:clamp(2.15rem,10vw,3rem)}
.development-why-lead p{font-size:15px}
.development-why-card,.development-why-card:nth-child(n+6){grid-column:auto;min-height:142px;padding:22px;border-radius:22px;transform:none!important}
.development-why-card::before{left:22px;width:48px}
.development-why-card span{font-size:2rem}
.development-why-card strong{margin-top:28px;font-size:1.16rem}
}