/* ============================================
   Main Stylesheet - Optimized Structure
   ============================================
   
   File Structure:
   1. Font Face Declarations
   2. CSS Variables (Design System)
   3. Base/Reset Styles
   4. Typography (Global Headings)
   5. Utility Classes (Flexbox, Typography, Spacing)
   6. Button Styles (Optimized)
   7. Section Heading Styles
   8. Icon Styles
   9. Layout & Container Styles
   10. Component Styles
   11. Section-specific Styles
   
   Media queries are in: public/css/media.css
   ============================================ */

@font-face {
	font-family: 'FORGE SANS';
	src: url('/fonts/FORGESANS.otf') format('opentype'),
		 url('/fonts/FORGESANS.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'FORGE SANS';
	src: url('/fonts/FORGESANS.otf') format('opentype'),
		 url('/fonts/FORGESANS.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================
   CSS Variables - Design System
   ============================================ */
:root {
	/* Colors - Primary */
	--color-black: #000;
	--color-white: #FFF;
	--color-orange: #FD9E10;
	--color-orange-hover: #FFC267;
	--color-green: #24CF45;
	--color-green-hover: #49DF66;
	
	/* Colors - Grayscale */
	--color-gray-text: #6d6d6d;
	--color-gray-light: #E1E1E1;
	--color-gray-border: #ECECEC;
	--color-gray-border-alt: #EBEBEB;
	--color-gray-bg: #F0F0F0;
	--color-gray-bg-alt: #F5F5F5;
	--color-gray-dark: #C2C2C2;
	--color-gray-darker: #333;
	--color-gray-darkest: #555;
	--color-gray-text-alt: #666;
	--color-gray-bg-dark: #232323;
	
	/* Colors - RGBA Black */
	--color-black-80: rgba(0, 0, 0, 0.8);
	--color-black-60: rgba(0, 0, 0, 0.6);
	--color-black-40: rgba(0, 0, 0, 0.4);
	--color-black-24: rgba(0, 0, 0, 0.24);
	--color-black-05: rgba(0, 0, 0, 0.05);
	
	/* Colors - RGBA White */
	--color-white-16: rgba(255, 255, 255, 0.16);
	--color-white-32: rgba(255, 255, 255, 0.32);
	--color-white-08: rgba(255, 255, 255, 0.08);
	--color-white-70: rgba(255, 255, 255, 0.7);
	--color-white-188: rgba(255, 255, 255, 0.1882352941);
	
	/* Spacing - Padding */
	--spacing-xs: 5px;
	--spacing-sm: 8px;
	--spacing-md: 12px;
	--spacing-base: 16px;
	--spacing-lg: 20px;
	--spacing-xl: 24px;
	--spacing-2xl: 28px;
	--spacing-3xl: 32px;
	--spacing-4xl: 40px;
	--spacing-5xl: 50px;
	--spacing-6xl: 60px;
	--spacing-section: 80px;
	--spacing-button-x: 32px;
	--spacing-button-x-icon: 28px;
	--spacing-container: 16px;
	--spacing-start-body: 72px;
	
	/* Spacing - Gap */
	--gap-xs: 5px;
	--gap-sm: 6px;
	--gap-md: 8px;
	--gap-base: 12px;
	--gap-lg: 16px;
	--gap-xl: 20px;
	--gap-2xl: 24px;
	--gap-3xl: 28px;
	--gap-4xl: 32px;
	--gap-5xl: 40px;
	--gap-6xl: 60px;
	
	/* Spacing - Margin */
	--margin-auto: auto;
	--margin-xs: 12px;
	
	/* Sizes - Dimensions */
	--size-icon: 24px;
	--size-icon-large: 48px;
	--size-button-height: 56px;
	--size-input-height: 48px;
	--size-container-max: 1440px;
	--size-container-min: 848px;
	
	/* Sizes - Border Radius */
	--radius-xs: 5px;
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-xl: 20px;
	--radius-2xl: 24px;
	--radius-3xl: 30px;
	--radius-full: 100px;
	--radius-round: 999px;
	
	/* Sizes - Border Width */
	--border-width: 1px;
	
	/* Typography - Font Sizes */
	--font-size-xs: 14px;
	--font-size-sm: 16px;
	--font-size-base: 16px;
	--font-size-lg: 40px;
	--font-size-xl: 50px;
	--font-size-2xl: 64px;
	--font-size-3xl: 112px;
	
	/* Typography - Line Heights */
	--line-height-xs: 20px;
	--line-height-sm: 24px;
	--line-height-base: 26px;
	--line-height-md: 28px;
	--line-height-lg: 40px;
	--line-height-xl: 64px;
	--line-height-2xl: 68px;
	--line-height-3xl: 112px;
	
	/* Typography - Letter Spacing */
	--letter-spacing-tight: -2.24px;
	--letter-spacing-base: -1.28px;
	--letter-spacing-md: -0.8px;
	--letter-spacing-sm: -0.16px;
	--letter-spacing-xs: -0.14px;
	--letter-spacing-normal: 0.03rem;
	
	/* Typography - Font Weights */
	--font-weight-light: 200;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	
	/* Typography - Font Families */
	--font-family-heading: var(--font-jura), 'Jura', sans-serif;
	--font-family-body: var(--font-tektur), 'Tektur', sans-serif;
	--font-family-special: 'FORGE SANS';
	--font-family-input: 'Noto Sans', sans-serif;
	
	/* Shadows */
	--shadow-sm: 0px 4px 20px -8px rgba(0, 0, 0, 0.24);
	--shadow-md: 0px 24px 40px -16px rgba(3, 7, 18, 0.16);
	--shadow-lg: 0 12px 28px rgba(26, 26, 26, 0.07);
	
	/* Transitions */
	--transition-fast: 0.1s;
	--transition-base: 0.2s;
}

/* ============================================
   Base/Reset Styles
   ============================================ */

/* Force Jura for all headings and emphasis - must be after @font-face */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
strong, b, mark, em,
.welcome-info > h1,
.welcome-info > h1 > span,
.welcome-info > h2,
.welcome-info > h3,
.robot-header > h2,
.rag-card > h3,
.name-project > h1,
.name-project > h2,
.service-info > h1,
.service-info > h1 > span,
.service-head > h1,
.service-head > h3,
.tech-info > h1 {
	font-family: 'Jura', sans-serif !important;
	font-optical-sizing: auto;
	font-style: normal;
}

/* Global h1 styles */
h1 {
	font-size: var(--font-size-xl) !important;
	line-height: var(--line-height-lg) !important;
	letter-spacing: var(--letter-spacing-xs) !important;
	color: #000;
}

/* Global h2 styles - Desktop */
h2 {
	font-size: 50px;
	color: #000;
	line-height: 45px;
}

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: "Tektur", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

/* Force Tektur for paragraphs and body text */
p, body, span, div, a, button, input, textarea, label, li, td, th {
    font-family: "Tektur", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

/* Text content styles */
p, body, span:not(h1 span):not(h2 span):not(h3 span):not(h4 span):not(h5 span):not(h6 span),
div:not(button):not(input):not(textarea):not(label):not(a) {
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-light);
    color: var(--color-gray-text);
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background: var(--color-white-188);
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-track-piece {
    background: var(--color-white-188);
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--radius-md);
}

::-webkit-resizer {
    background: rgba(0, 0, 0, 0);
    border-radius: var(--radius-md);
}

html {
    height: 100%;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: var(--color-white);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

img {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
}

a, button, textarea, input {
    outline: none;
    text-decoration: none;
}

/* ============================================
   Typography - Global Styles
   ============================================ */

/* ============================================
   Utility Classes
   ============================================ */

/* Flexbox utilities - optimized */
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.flex-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.flex-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.flex-start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.flex-center-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.flex-between-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

/* Typography utilities - reduce duplication */
.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}

.text-base {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.text-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-md);
}

.text-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
    letter-spacing: var(--letter-spacing-xs);
}

/* Spacing utilities - section padding */
.section-padding {
    padding: var(--spacing-section) 0;
}

.section-padding-sm {
    padding: var(--spacing-3xl) 0;
}

.section-padding-lg {
    padding: var(--spacing-4xl) 0;
}

/* ============================================
   Section Heading Styles - Optimized
   ============================================ */

/* Base styles for section headings - shared across all */
.service-info > h1,
.service-info > .section-title,
.tech-info > h1,
.tech-info > .section-title,
.maintenance-read > h1,
.maintenance-read > .section-title,
.head-about > h1,
.head-about > .section-title {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    display: block;
}

/* Section heading spans - shared orange color */
.service-info > h1 > span,
.service-info > .section-title > span,
.tech-info > h1 > span,
.tech-info > .section-title > span,
.maintenance-read > h1 > span,
.maintenance-read > .section-title > span,
.head-about > h1 > span,
.head-about > .section-title > span {
    font-family: var(--font-family-heading);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    color: var(--color-orange);
}

/* Service info headings - 70px with xl line-height */
.service-info > h1,
.service-info > .section-title {
    font-size: 70px;
    line-height: var(--line-height-xl);
    letter-spacing: var(--letter-spacing-base);
}
.service-info > h1 > span,
.service-info > .section-title > span {
    font-size: 70px;
    line-height: var(--line-height-xl);
    letter-spacing: var(--letter-spacing-base);
}

/* Tech info and about headings - 70px with 2xl line-height */
.tech-info > h1,
.tech-info > .section-title,
.head-about > h1,
.head-about > .section-title {
    font-size: 70px;
    line-height: var(--line-height-2xl);
    letter-spacing: var(--letter-spacing-base);
}
.tech-info > h1 > span,
.tech-info > .section-title > span,
.head-about > h1 > span,
.head-about > .section-title > span {
    font-size: 70px;
    line-height: var(--line-height-2xl);
    letter-spacing: var(--letter-spacing-base);
}

/* Maintenance headings - lg size */
.maintenance-read > h1,
.maintenance-read > .section-title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-md);
}
.maintenance-read > h1 > span,
.maintenance-read > .section-title > span {
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-md);
}

.icon-link {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.341 6.0216L18 6.0001L17.9796 15.6602' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 6.0015L6.0004 18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.icon-mess {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4462 10.0911H9.17098C8.77354 10.0911 8.45098 9.76853 8.45098 9.37111C8.45098 8.97367 8.77354 8.65111 9.17098 8.65111H14.4462C14.8436 8.65111 15.1662 8.97367 15.1662 9.37111C15.1662 9.76853 14.8436 10.0911 14.4462 10.0911ZM11.8302 13.7689H9.17098C8.77354 13.7689 8.45098 13.4463 8.45098 13.0489C8.45098 12.6514 8.77354 12.3289 9.17098 12.3289H11.8302C12.2276 12.3289 12.5502 12.6514 12.5502 13.0489C12.5502 13.4463 12.2276 13.7689 11.8302 13.7689ZM20.0795 10.1429C19.6974 6.24919 16.6273 3.10711 12.7815 2.67415C10.4987 2.41783 8.2849 3.08311 6.56266 4.55095C4.7377 6.10807 3.62506 8.43223 3.50794 10.9301C3.27466 15.9202 7.3105 19.7132 11.4174 20.8815C11.5038 20.9055 11.5911 20.918 11.6775 20.918C11.8811 20.918 12.0817 20.8508 12.2516 20.7231C12.4974 20.5378 12.6433 20.244 12.6433 19.9378L12.6423 18.5112C12.6423 18.5112 12.6471 18.5045 12.6615 18.5026C17.4567 17.9257 20.5067 14.4879 20.0795 10.1429Z' fill='%23FD9E10'/%3E%3C/svg%3E%0A");
}

.gallery-prev {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 19L8.5 12L15.5 5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.gallery-next {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 19L15.5 12L8.5 5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.go-project {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1213 8.02871L24 8.00005L23.9729 20.8801' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 8.002L8.00053 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.partner-items::after {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3_8844)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0V16H17C8.16138 15.9879 1 8.82912 1 0Z' fill='white'/%3E%3C/g%3E%3Crect width='1' height='16' fill='white'/%3E%3Crect y='17' width='0.999999' height='17' transform='rotate(-90 0 17)' fill='white'/%3E%3Cdefs%3E%3CclipPath id='clip0_3_8844'%3E%3Crect width='16' height='16' fill='white' transform='translate(1)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}


.link-ico::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.341 6.0216L18 6.00009L17.9796 15.6602' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 6.0015L6.0004 18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.techn-head > .item:last-child::before {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_507_10707)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44.9417 -71.9292L66.5375 -49.6067L74.0908 -79.7851C76.042 -79.9275 78.0125 -80 80 -80C81.8946 -80 83.7738 -79.9341 85.6354 -79.8046L93.1936 -49.6067L114.876 -72.0182C118.346 -70.3343 121.677 -68.4069 124.846 -66.2581L116.279 -36.2786L146.258 -44.8457C148.407 -41.6772 150.334 -38.3464 152.018 -34.8755L129.607 -13.1936L159.805 -5.63538C159.934 -3.77374 160 -1.89456 160 0C160 1.98749 159.928 3.95805 159.785 5.90918L129.607 13.4625L151.929 35.0583C150.226 38.5455 148.277 41.8906 146.105 45.0708L116.279 36.5475L124.781 66.3017C121.578 68.4695 118.209 70.4111 114.698 72.1039L93.1936 49.8756L85.7039 79.7998C83.8199 79.9325 81.9178 80 80 80C77.9892 80 75.9958 79.9258 74.0223 79.78L66.5375 49.8756L45.1185 72.0153C41.5911 70.3036 38.2083 68.3403 34.9935 66.1488L43.4525 36.5475L13.8512 45.0065C11.6597 41.7917 9.69642 38.4089 7.98468 34.8815L30.1244 13.4625L0.219964 5.97775C0.074184 4.00422 0 2.01077 0 0C0 -1.9178 0.0674831 -3.81985 0.200204 -5.70388L30.1244 -13.1936L7.89608 -34.6983C9.58885 -38.2095 11.5305 -41.5781 13.6983 -44.7813L43.4525 -36.2786L34.9292 -66.1049C38.1094 -68.2774 41.4545 -70.2264 44.9417 -71.9292Z' fill='%23FD9E10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_507_10707'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.items-maintenance > .item::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 6.85547C13.5636 9.48764 10.2433 14.2837 8.72078 17.1442C7.74399 15.5051 6.50533 14.0476 5 12.7764' stroke='%23FD9E10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.maintenance-ico {
    background-image: url("data:image/svg+xml,%3Csvg width='65' height='64' viewBox='0 0 65 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0787 0.0150513C30.6352 0.0334362 30.0276 0.0730381 29.9946 0.0857107C29.9774 0.092287 29.9548 0.139089 29.9342 0.210597C29.6265 1.27982 29.2042 2.09021 28.5406 2.88509C28.3665 3.0936 28.0046 3.45693 27.7837 3.64492C25.6616 5.45107 22.6472 5.83482 20.2008 4.61023C19.5718 4.29535 19.0707 3.94202 18.5097 3.41781C18.4135 3.32783 18.324 3.24821 18.3108 3.24087C18.2727 3.21951 17.187 3.78347 16.4367 4.21437C15.6438 4.66979 14.3734 5.47595 14.3284 5.55229C14.3168 5.57186 14.3287 5.64721 14.3713 5.8243C14.5836 6.70767 14.6286 7.55181 14.5092 8.41335C14.1058 11.3261 11.8198 13.7123 8.92284 14.2444C8.4911 14.3238 8.28274 14.3407 7.73518 14.3407C7.0666 14.3409 6.69487 14.2976 6.07488 14.1476C5.9449 14.1162 5.8284 14.0943 5.816 14.0991C5.75463 14.1227 4.96973 15.3722 4.50782 16.1817C4.13568 16.8339 3.50326 18.044 3.50326 18.1038C3.50326 18.1169 3.58067 18.2084 3.67526 18.3072C4.76393 19.4437 5.41126 20.8542 5.56001 22.414C5.59253 22.7551 5.58407 23.5189 5.54422 23.8381C5.37627 25.1836 4.8837 26.362 4.04938 27.4143C3.84721 27.6692 3.30863 28.2059 3.03927 28.4207C2.31263 29.0003 1.5341 29.3931 0.546565 29.6784C0.459591 29.7036 0.4262 29.7211 0.415672 29.7473C0.40788 29.7666 0.393624 29.9336 0.383976 30.1184C0.313818 31.4621 0.31665 32.7845 0.392248 33.974C0.419096 34.3966 0.421016 34.4031 0.524358 34.4224C0.644115 34.4448 1.05505 34.5801 1.3113 34.6816C2.23034 35.0457 2.96991 35.5383 3.6634 36.2486C4.38867 36.9913 4.9225 37.8754 5.2564 38.8868C5.67965 40.1688 5.72538 41.4829 5.39171 42.775C5.10357 43.8909 4.54073 44.8909 3.70569 45.7707C3.61196 45.8695 3.53526 45.9589 3.53526 45.9694C3.53526 46.0108 4.1137 47.1192 4.41926 47.6632C4.87655 48.4774 5.8061 49.9611 5.87563 49.9878C5.88955 49.9931 5.99893 49.9728 6.11868 49.9426C6.75222 49.783 7.38874 49.7191 8.07918 49.7456C10.1629 49.8256 12.1348 50.9177 13.3691 52.6754C13.9721 53.534 14.3973 54.6079 14.5341 55.618C14.6152 56.2167 14.615 56.8981 14.5335 57.4797C14.5007 57.7135 14.4247 58.1003 14.3755 58.2834C14.3537 58.3647 14.3399 58.4418 14.345 58.4549C14.371 58.5228 15.6695 59.3425 16.519 59.8272C17.2501 60.2444 18.2878 60.7839 18.3592 60.7839C18.3923 60.7839 18.4428 60.7454 18.5728 60.6212C19.071 60.1451 19.654 59.7323 20.2469 59.4358C21.2915 58.9135 22.5108 58.6621 23.6469 58.7348C25.1419 58.8305 26.4682 59.3367 27.6148 60.2492C27.8828 60.4625 28.42 60.9979 28.6249 61.2559C29.0616 61.8056 29.4026 62.3927 29.652 63.024C29.7534 63.2807 29.8887 63.6918 29.9109 63.811C29.9304 63.9153 29.9372 63.9173 30.3599 63.9435C31.04 63.9857 31.5383 64 32.3325 64C33.3328 64 34.5661 63.951 34.6075 63.9095C34.6168 63.9003 34.6534 63.7927 34.6888 63.6704C34.9406 62.8024 35.3594 61.9893 35.9121 61.2959C36.1216 61.033 36.6767 60.4751 36.9154 60.2876C38.0116 59.4263 39.1552 58.9552 40.5746 58.7804C40.8416 58.7476 41.7877 58.7529 42.0785 58.789C43.5943 58.9769 44.9281 59.6082 46.0196 60.6545C46.1214 60.752 46.2166 60.8319 46.2313 60.8319C46.2815 60.8319 47.3976 60.2533 47.9984 59.9158C48.7897 59.4713 50.2072 58.5861 50.2322 58.5207C50.2373 58.5076 50.2122 58.376 50.1764 58.2283C50.0348 57.6425 49.9904 57.2553 49.9909 56.6077C49.9914 55.9513 50.0328 55.5937 50.1761 55.0076C50.6076 53.2431 51.771 51.678 53.3503 50.7373C54.7111 49.9268 56.2487 49.6108 57.7892 49.8251C58.0543 49.862 58.2381 49.8977 58.5388 49.9708C58.6996 50.0098 58.7581 50.0182 58.7787 50.0052C58.8648 49.9509 59.695 48.6361 60.1665 47.8072C60.5684 47.1008 61.0863 46.1085 61.0859 46.0457C61.0858 46.0188 61.0313 45.949 60.9059 45.8151C60.1831 45.0427 59.6975 44.2464 59.3768 43.3076C58.9307 42.0015 58.891 40.5968 59.262 39.2435C59.7942 37.3024 61.1127 35.7123 62.9021 34.8533C63.27 34.6767 63.6749 34.5257 64.1205 34.3988C64.1929 34.3782 64.2388 34.356 64.2457 34.3384C64.2593 34.3035 64.2953 33.7329 64.3173 33.202C64.3382 32.6997 64.3389 31.3128 64.3185 30.8304C64.2876 30.0994 64.2672 29.7991 64.246 29.7653C64.2318 29.7428 64.1827 29.7207 64.0917 29.6959C62.0622 29.1432 60.4303 27.7197 59.5997 25.7777C59.185 24.8082 58.9901 23.736 59.0394 22.6953C59.1182 21.028 59.7487 19.5366 60.8956 18.3045C61.0048 18.1872 61.1044 18.0749 61.1168 18.055C61.138 18.0213 61.1239 17.9883 60.903 17.5563C60.547 16.8601 60.2672 16.3503 59.8952 15.7198C59.5282 15.0977 58.88 14.0879 58.8371 14.0714C58.8242 14.0664 58.7327 14.0832 58.6339 14.1086C57.3389 14.4417 55.9914 14.395 54.7396 13.9736C52.228 13.1282 50.3915 10.8947 50.0557 8.27735C49.9478 7.43572 50.0117 6.48606 50.2313 5.66676C50.2529 5.5862 50.2663 5.50911 50.261 5.49547C50.2375 5.43411 48.8847 4.5854 48.1104 4.14618C47.387 3.73579 46.3787 3.21311 46.3106 3.21311C46.2781 3.21311 46.2223 3.25543 46.0811 3.3872C45.7377 3.7075 45.4739 3.91921 45.1377 4.1443C43.9149 4.96297 42.4847 5.36139 41.0172 5.29218C37.9937 5.1496 35.4574 3.15989 34.6549 0.300969C34.6265 0.199764 34.5931 0.105504 34.5808 0.0915029C34.5569 0.0644777 34.3031 0.0458688 33.5027 0.0125072C33.0745 -0.00534967 31.5318 -0.00371759 31.0787 0.0150513Z' fill='%23FD9E10'/%3E%3C/svg%3E%0A");
}
.maintenance-ico.type-b {
    background-image: url("data:image/svg+xml,%3Csvg width='65' height='64' viewBox='0 0 65 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.4121 0.0150513C30.9686 0.0334362 30.361 0.0730381 30.3279 0.0857107C30.3108 0.092287 30.2882 0.139089 30.2676 0.210597C29.9598 1.27982 29.5375 2.09021 28.8739 2.88509C28.6998 3.0936 28.3379 3.45693 28.1171 3.64492C25.995 5.45107 22.9806 5.83482 20.5342 4.61023C19.9052 4.29535 19.4041 3.94202 18.8431 3.41781C18.7469 3.32783 18.6573 3.24821 18.6442 3.24087C18.606 3.21951 17.5203 3.78347 16.7701 4.21437C15.9771 4.66979 14.7068 5.47595 14.6617 5.55229C14.6502 5.57186 14.6621 5.64721 14.7046 5.8243C14.917 6.70767 14.9619 7.55181 14.8426 8.41335C14.4392 11.3261 12.1532 13.7123 9.25621 14.2444C8.82448 14.3238 8.61611 14.3407 8.06856 14.3407C7.39998 14.3409 7.02824 14.2976 6.40825 14.1476C6.27827 14.1162 6.16178 14.0943 6.14938 14.0991C6.088 14.1227 5.3031 15.3722 4.84119 16.1817C4.46906 16.8339 3.83664 18.044 3.83664 18.1038C3.83664 18.1169 3.91404 18.2084 4.00863 18.3072C5.0973 19.4437 5.74463 20.8542 5.89338 22.414C5.92591 22.7551 5.91744 23.5189 5.87759 23.8381C5.70964 25.1836 5.21707 26.362 4.38275 27.4143C4.18058 27.6692 3.642 28.2059 3.37264 28.4207C2.646 29.0003 1.86747 29.3931 0.879939 29.6784C0.792965 29.7036 0.759574 29.7211 0.749046 29.7473C0.741254 29.7666 0.726998 29.9336 0.71735 30.1184C0.647192 31.4621 0.650024 32.7845 0.725622 33.974C0.75247 34.3966 0.75439 34.4031 0.857732 34.4224C0.97749 34.4448 1.38843 34.5801 1.64468 34.6816C2.56372 35.0457 3.30329 35.5383 3.99678 36.2486C4.72204 36.9913 5.25587 37.8754 5.58977 38.8868C6.01303 40.1688 6.05875 41.4829 5.72508 42.775C5.43694 43.8909 4.8741 44.8909 4.03906 45.7707C3.94534 45.8695 3.86864 45.9589 3.86864 45.9694C3.86864 46.0108 4.44707 47.1192 4.75263 47.6632C5.20992 48.4774 6.13947 49.9611 6.20901 49.9878C6.22293 49.9931 6.3323 49.9728 6.45206 49.9426C7.0856 49.783 7.72211 49.7191 8.41255 49.7456C10.4963 49.8256 12.4682 50.9177 13.7025 52.6754C14.3055 53.534 14.7306 54.6079 14.8675 55.618C14.9486 56.2167 14.9483 56.8981 14.8668 57.4797C14.8341 57.7135 14.758 58.1003 14.7089 58.2834C14.6871 58.3647 14.6733 58.4418 14.6783 58.4549C14.7044 58.5228 16.0029 59.3425 16.8524 59.8272C17.5834 60.2444 18.6211 60.7839 18.6926 60.7839C18.7257 60.7839 18.7762 60.7454 18.9061 60.6212C19.4044 60.1451 19.9874 59.7323 20.5803 59.4358C21.6249 58.9135 22.8442 58.6621 23.9803 58.7348C25.4753 58.8305 26.8016 59.3367 27.9482 60.2492C28.2161 60.4625 28.7534 60.9979 28.9583 61.2559C29.3949 61.8056 29.736 62.3927 29.9854 63.024C30.0868 63.2807 30.2221 63.6918 30.2443 63.811C30.2638 63.9153 30.2706 63.9173 30.6933 63.9435C31.3734 63.9857 31.8717 64 32.6659 64C33.6662 64 34.8995 63.951 34.9409 63.9095C34.9501 63.9003 34.9867 63.7927 35.0222 63.6704C35.274 62.8024 35.6928 61.9893 36.2455 61.2959C36.455 61.033 37.0101 60.4751 37.2487 60.2876C38.3449 59.4263 39.4885 58.9552 40.9079 58.7804C41.1749 58.7476 42.1211 58.7529 42.4119 58.789C43.9277 58.9769 45.2615 59.6082 46.353 60.6545C46.4548 60.752 46.55 60.8319 46.5646 60.8319C46.6149 60.8319 47.731 60.2533 48.3318 59.9158C49.123 59.4713 50.5405 58.5861 50.5656 58.5207C50.5706 58.5076 50.5455 58.376 50.5098 58.2283C50.3681 57.6425 50.3238 57.2553 50.3243 56.6077C50.3248 55.9513 50.3661 55.5937 50.5095 55.0076C50.9409 53.2431 52.1044 51.678 53.6837 50.7373C55.0445 49.9268 56.5821 49.6108 58.1225 49.8251C58.3876 49.862 58.5714 49.8977 58.8722 49.9708C59.0329 50.0098 59.0914 50.0182 59.1121 50.0052C59.1982 49.9509 60.0284 48.6361 60.4999 47.8072C60.9018 47.1008 61.4197 46.1085 61.4193 46.0457C61.4192 46.0188 61.3647 45.949 61.2393 45.8151C60.5164 45.0427 60.0308 44.2464 59.7102 43.3076C59.264 42.0015 59.2243 40.5968 59.5954 39.2435C60.1276 37.3024 61.446 35.7123 63.2355 34.8533C63.6034 34.6767 64.0083 34.5257 64.4539 34.3988C64.5262 34.3782 64.5722 34.356 64.5791 34.3384C64.5927 34.3035 64.6287 33.7329 64.6507 33.202C64.6716 32.6997 64.6722 31.3128 64.6519 30.8304C64.621 30.0994 64.6006 29.7991 64.5794 29.7653C64.5652 29.7428 64.516 29.7207 64.425 29.6959C62.3956 29.1432 60.7637 27.7197 59.9331 25.7777C59.5184 24.8082 59.3235 23.736 59.3727 22.6953C59.4516 21.028 60.0821 19.5366 61.229 18.3045C61.3382 18.1872 61.4377 18.0749 61.4502 18.055C61.4714 18.0213 61.4572 17.9883 61.2363 17.5563C60.8804 16.8601 60.6006 16.3503 60.2286 15.7198C59.8616 15.0977 59.2133 14.0879 59.1705 14.0714C59.1575 14.0664 59.0661 14.0832 58.9673 14.1086C57.6723 14.4417 56.3248 14.395 55.073 13.9736C52.5613 13.1282 50.7248 10.8947 50.3891 8.27735C50.2812 7.43572 50.345 6.48606 50.5647 5.66676C50.5863 5.5862 50.5996 5.50911 50.5944 5.49547C50.5709 5.43411 49.2181 4.5854 48.4438 4.14618C47.7203 3.73579 46.7121 3.21311 46.6439 3.21311C46.6115 3.21311 46.5557 3.25543 46.4144 3.3872C46.0711 3.7075 45.8073 3.91921 45.4711 4.1443C44.2482 4.96297 42.8181 5.36139 41.3506 5.29218C38.3271 5.1496 35.7908 3.15989 34.9883 0.300969C34.9599 0.199764 34.9265 0.105504 34.9142 0.0915029C34.8903 0.0644777 34.6364 0.0458688 33.8361 0.0125072C33.4078 -0.00534967 31.8651 -0.00371759 31.4121 0.0150513Z' fill='%23EBEBEB'/%3E%3C/svg%3E%0A");
}

.head-select::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8.5L12 15.5L19 8.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.ico-com {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99021 7.18998C4.99021 5.97527 5.97443 4.99106 7.18913 4.99009H8.18988C8.77049 4.99009 9.32679 4.75959 9.73914 4.35112L10.4384 3.65089C11.2952 2.78922 12.6879 2.78533 13.5496 3.64117L13.5505 3.64214L13.5593 3.64992L14.2595 4.35015C14.6709 4.75959 15.2282 4.98911 15.8088 4.98911H16.8115C18.0262 4.98911 19.0114 5.9743 19.0114 7.18901V8.18878C19.0114 8.77036 19.2409 9.32666 19.6503 9.73902L20.3506 10.4392C21.2122 11.2961 21.2171 12.6887 20.3613 13.5504L19.6513 14.2604C19.2419 14.6718 19.0124 15.229 19.0124 15.8087V16.8123C19.0104 18.027 18.0252 19.0093 16.8115 19.0083H15.8068C15.2262 19.0083 14.669 19.2388 14.2576 19.6483L13.5574 20.3475C12.7025 21.2102 11.3098 21.216 10.4481 20.3611L10.4452 20.3592L9.7372 19.6512C9.32581 19.2417 8.76855 19.0122 8.18794 19.0113H7.18913C5.97443 19.0113 4.99021 18.027 4.99021 16.8123V15.8067C4.99021 15.2261 4.75972 14.6698 4.35028 14.2584L3.65102 13.5582C2.78837 12.7033 2.78254 11.3126 3.63643 10.4499C3.63643 10.4499 3.63935 10.448 3.64032 10.4461L4.34833 9.73707C4.75777 9.32569 4.98827 8.76842 4.98827 8.18684V7.18998' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.00391 12.1222L10.9811 14.1023L15.0541 10.0273' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.ico-mess {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7939 20.2989C14.1476 20.307 16.5039 19.319 18.1825 17.3275C20.6942 14.348 20.7732 9.8769 18.3612 6.81634C15.2212 2.83073 9.42134 2.58124 5.94737 6.06695C3.40789 8.61413 2.85941 12.388 4.28221 15.4748C4.4007 15.7711 4.85941 16.5854 5.16731 17.1212C5.34235 17.4256 5.3244 17.8012 5.12242 18.0877C4.91955 18.3741 4.66282 18.7407 4.46264 19.0416C4.10447 19.5793 4.48508 20.2998 5.1296 20.2989L5.6293 20.2987C7.82096 20.2978 11.0302 20.2964 11.7939 20.2989Z' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.08832 9.52283H12.1054M9.08832 13.6961H15.0739' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.ico-user {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9847 15.3462C8.11713 15.3462 4.81427 15.931 4.81427 18.2729C4.81427 20.6148 8.09617 21.2205 11.9847 21.2205C15.8524 21.2205 19.1543 20.6348 19.1543 18.2938C19.1543 15.9529 15.8733 15.3462 11.9847 15.3462Z' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9847 12.0059C14.5228 12.0059 16.58 9.94779 16.58 7.40969C16.58 4.8716 14.5228 2.81445 11.9847 2.81445C9.44664 2.81445 7.38852 4.8716 7.38852 7.40969C7.37997 9.93922 9.42378 11.9973 11.9524 12.0059H11.9847Z' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.button-fill::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5747 5.63484L16.4144 19.8657C16.037 21.1553 14.3156 21.3877 13.6122 20.2434L9.98244 14.336L4.09503 10.694C2.95454 9.98826 3.18619 8.26094 4.47146 7.88231L18.6543 3.70791C19.8293 3.36207 20.9194 4.45675 20.5747 5.63484Z' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6503 8.61914L10.0234 14.325' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.button-fill p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 8px;
}
.button-no-after::after {
	display: none !important;
	content: none !important;
}

.time-work::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.52148 8.13135H16.4842' stroke='black' stroke-opacity='0.8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5293 12.665H16.4842' stroke='black' stroke-opacity='0.8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.916 2.7998V5.16911' stroke='black' stroke-opacity='0.8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.09961 2.7998V5.16911' stroke='black' stroke-opacity='0.8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.0544 3.9375H6.95831C4.84352 3.9375 3.52344 5.11514 3.52344 7.27974V13.7961C3.52344 15.995 4.84352 17.1998 6.95831 17.1998H13.0482C15.1691 17.1998 16.483 16.016 16.483 13.8506V7.27974C16.4892 5.11514 15.1754 3.9375 13.0544 3.9375Z' stroke='black' stroke-opacity='0.8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.84375 8.13135V17.1999' stroke='black' stroke-opacity='0.8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.1621 8.13135V17.1999' stroke='black' stroke-opacity='0.8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.work-ico-a::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12C21 7.02908 16.9709 3 12 3C7.02908 3 3 7.02908 3 12C3 16.9699 7.02908 21 12 21C16.9709 21 21 16.9699 21 12Z' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.work-ico-a.active::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12C21 7.02908 16.9709 3 12 3C7.02908 3 3 7.02908 3 12C3 16.9699 7.02908 21 12 21C16.9709 21 21 16.9699 21 12Z' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.53516 12.0003L10.845 14.3091L15.4627 9.69141' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.work-ico-b::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9994 20.4711C16.7715 20.4711 20.6394 16.6023 20.6394 11.8311C20.6394 7.059 16.7715 3.19116 11.9994 3.19116C7.22721 3.19116 3.35938 7.059 3.35938 11.8311C3.35938 16.6023 7.22721 20.4711 11.9994 20.4711Z' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9657 11.8303C15.9657 14.0191 14.1917 15.7932 12.0029 15.7932C9.81406 15.7932 8.03906 14.0191 8.03906 11.8303C8.03906 9.6415 9.81406 7.86743 12.0029 7.86743C14.1917 7.86743 15.9657 9.6415 15.9657 11.8303Z' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.2007 14.6287L5.89062 17.9387' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8027 14.6326L18.1109 17.9407' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.89062 5.72241L9.19976 9.03152' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8027 9.02961L18.1099 5.72241' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.work-ico-c::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0469 6.27725L19.149 5.26489' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.3711 16.26L19.4973 17.2455' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.61767 6.26975L4.50195 5.27246' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.38532 16.7512L5.26172 17.7396' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.41904 12.0481L9.97419 3.37334C10.054 3.15583 10.2611 3.01123 10.4927 3.01123H15.2587C15.6398 3.01123 15.9065 3.38823 15.7794 3.74764L13.6718 8.69426C13.5447 9.05366 13.8113 9.43066 14.1926 9.43066H18.6928C19.1676 9.43066 19.4211 9.98993 19.1082 10.347L10.5636 20.1001C10.1785 20.5396 9.46384 20.1583 9.61438 19.5938L11.2432 13.4853C11.3367 13.1346 11.0725 12.7906 10.7096 12.7906H6.93759C6.55362 12.7906 6.28681 12.4086 6.41904 12.0481Z' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.work-ico-d::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9846 21.606C11.9846 21.606 19.6566 19.283 19.6566 12.879C19.6566 6.474 19.9346 5.974 19.3196 5.358C18.7036 4.742 12.9906 2.75 11.9846 2.75C10.9786 2.75 5.26557 4.742 4.65057 5.358C4.03457 5.974 4.31257 6.474 4.31257 12.879C4.31257 19.283 11.9846 21.606 11.9846 21.606Z' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.38672 11.8746L11.2787 13.7696L15.1767 9.86963' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.rate-items > .item {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9321 11.9334C14.7162 12.1426 14.6171 12.4451 14.6662 12.7418L15.4071 16.8418C15.4696 17.1893 15.3229 17.5409 15.0321 17.7418C14.7471 17.9501 14.3679 17.9751 14.0571 17.8084L10.3662 15.8834C10.2379 15.8151 10.0954 15.7784 9.94958 15.7743H9.72375C9.64541 15.7859 9.56875 15.8109 9.49875 15.8493L5.80708 17.7834C5.62458 17.8751 5.41791 17.9076 5.21541 17.8751C4.72208 17.7818 4.39291 17.3118 4.47375 16.8159L5.21541 12.7159C5.26458 12.4168 5.16541 12.1126 4.94958 11.9001L1.94041 8.98343C1.68875 8.73927 1.60125 8.3726 1.71625 8.04177C1.82791 7.71177 2.11291 7.47093 2.45708 7.41677L6.59875 6.81593C6.91375 6.78343 7.19041 6.59177 7.33208 6.30843L9.15708 2.56677C9.20041 2.48344 9.25625 2.40677 9.32375 2.34177L9.39875 2.28344C9.43791 2.2401 9.48291 2.20427 9.53291 2.1751L9.62375 2.14177L9.76541 2.08344H10.1162C10.4296 2.11594 10.7054 2.30344 10.8496 2.58344L12.6987 6.30843C12.8321 6.58094 13.0912 6.7701 13.3904 6.81593L17.5321 7.41677C17.8821 7.46677 18.1746 7.70844 18.2904 8.04177C18.3996 8.37594 18.3054 8.7426 18.0487 8.98343L14.9321 11.9334Z' fill='%23E1E1E1'/%3E%3C/svg%3E%0A");
}
.rate-items > .item.active {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9321 11.9334C14.7162 12.1426 14.6171 12.4451 14.6662 12.7418L15.4071 16.8418C15.4696 17.1893 15.3229 17.5409 15.0321 17.7418C14.7471 17.9501 14.3679 17.9751 14.0571 17.8084L10.3662 15.8834C10.2379 15.8151 10.0954 15.7784 9.94958 15.7743H9.72375C9.64541 15.7859 9.56875 15.8109 9.49875 15.8493L5.80708 17.7834C5.62458 17.8751 5.41791 17.9076 5.21541 17.8751C4.72208 17.7818 4.39291 17.3118 4.47375 16.8159L5.21541 12.7159C5.26458 12.4168 5.16541 12.1126 4.94958 11.9001L1.94041 8.98343C1.68875 8.73927 1.60125 8.3726 1.71625 8.04177C1.82791 7.71177 2.11291 7.47093 2.45708 7.41677L6.59875 6.81593C6.91375 6.78343 7.19041 6.59177 7.33208 6.30843L9.15708 2.56677C9.20041 2.48344 9.25625 2.40677 9.32375 2.34177L9.39875 2.28344C9.43791 2.2401 9.48291 2.20427 9.53291 2.1751L9.62375 2.14177L9.76541 2.08344H10.1162C10.4296 2.11594 10.7054 2.30344 10.8496 2.58344L12.6987 6.30843C12.8321 6.58094 13.0912 6.7701 13.3904 6.81593L17.5321 7.41677C17.8821 7.46677 18.1746 7.70844 18.2904 8.04177C18.3996 8.37594 18.3054 8.7426 18.0487 8.98343L14.9321 11.9334Z' fill='%23FD9E10'/%3E%3C/svg%3E%0A");
}

.icon-add {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.5 12C2.5 6.75294 6.75294 2.5 12 2.5C17.2471 2.5 21.5 6.75294 21.5 12C21.5 17.2461 17.2471 21.5 12 21.5C6.7529 21.5 2.5 17.2461 2.5 12ZM12.75 8.70386C12.75 8.28964 12.4142 7.95386 12 7.95386C11.5858 7.95386 11.25 8.28964 11.25 8.70386V11.2519H8.70006C8.28584 11.2519 7.95006 11.5877 7.95006 12.0019C7.95006 12.4161 8.28584 12.7519 8.70006 12.7519H11.25V15.2967C11.25 15.7109 11.5858 16.0467 12 16.0467C12.4142 16.0467 12.75 15.7109 12.75 15.2967V12.7519H15.2997C15.7139 12.7519 16.0497 12.4161 16.0497 12.0019C16.0497 11.5877 15.7139 11.2519 15.2997 11.2519H12.75V8.70386Z' fill='%23FD9E10'/%3E%3C/svg%3E%0A");
}

.head-faq::after {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0003 6.66675C16.7367 6.66675 17.3337 7.26371 17.3337 8.00008V14.6667H24.0003C24.7367 14.6667 25.3337 15.2637 25.3337 16.0001C25.3337 16.7365 24.7367 17.3334 24.0003 17.3334H17.3337V24.0001C17.3337 24.7365 16.7367 25.3334 16.0003 25.3334C15.2639 25.3334 14.667 24.7365 14.667 24.0001V17.3334H8.00033C7.26395 17.3334 6.66699 16.7365 6.66699 16.0001C6.66699 15.2637 7.26395 14.6667 8.00033 14.6667H14.667V8.00008C14.667 7.26371 15.2639 6.66675 16.0003 6.66675Z' fill='black'/%3E%3C/svg%3E%0A");
}

.faq-items > .item.active > .head-faq::after {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.0003 14.6667C24.7367 14.6667 25.3337 15.2637 25.3337 16.0001C25.3337 16.7365 24.7367 17.3334 24.0003 17.3334C13.7251 17.3334 17.4665 17.3334 8.00033 17.3334C7.26395 17.3334 6.66699 16.7365 6.66699 16.0001C6.66699 15.2637 7.26395 14.6667 8.00033 14.6667C18.96 14.6667 4.68311 14.6667 24.0003 14.6667Z' fill='black'/%3E%3C/svg%3E%0A");
}

.find-button {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.80687 17.2959C13.9437 17.2959 17.2973 13.9423 17.2973 9.80541C17.2973 5.66854 13.9437 2.31494 9.80687 2.31494C5.67 2.31494 2.31641 5.66854 2.31641 9.80541C2.31641 13.9423 5.67 17.2959 9.80687 17.2959Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.0176 15.4043L17.9543 18.3334' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.navigate-blog-items > .item::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.75 11.7256L4.75 11.7256' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.7012 5.70124L19.7512 11.7252L13.7012 17.7502' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.link-name > p::after {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1213 8.02871L24 8.00005L23.9729 20.8801' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 8.002L8.00053 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.go-back::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.54102 10.2285L16.041 10.2285' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.58203 15.2488L3.54036 10.2288L8.58203 5.20801' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.i-like {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1199 8.63932C8.80478 4.55362 9.47987 2.92612 10.7838 2.65812C11.282 2.55562 11.4888 2.56092 11.8828 2.94462C13.158 4.44822 15.3116 6.80202 16.4865 8.07632C16.79 8.40562 16.9418 8.57022 17.0494 8.75602C17.1496 8.92882 17.2213 9.11242 17.2648 9.30732C17.3116 9.51682 17.3116 9.73962 17.3116 10.1851V15.6389C17.3116 16.9419 17.3116 17.5933 17.0621 18.0927C16.833 18.5511 16.4614 18.9228 16.003 19.1518C15.5036 19.4014 14.8521 19.4014 13.5492 19.4014H7.84993C6.80057 19.4014 6.27589 19.4014 5.83589 19.2227C5.43085 19.0583 5.07761 18.7877 4.81336 18.4394C4.52631 18.0612 4.38967 17.5546 4.11641 16.5414L3.63475 14.7556C3.11874 12.8424 2.86072 11.8858 3.07643 11.129C3.27372 10.4368 3.72671 9.84542 4.34365 9.47472C5.01818 9.06942 6.00896 9.06942 7.99052 9.06942H9.81081C10.1512 9.06942 10.216 8.93802 10.1199 8.63932Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 19.0056V9.95693' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.i-dislike {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1199 15.3607C8.80478 19.4464 9.47987 21.0739 10.7838 21.3419C11.282 21.4444 11.4888 21.4391 11.8828 21.0554C13.158 19.5518 15.3116 17.198 16.4865 15.9237C16.79 15.5944 16.9418 15.4298 17.0494 15.244C17.1496 15.0712 17.2213 14.8876 17.2648 14.6927C17.3116 14.4832 17.3116 14.2604 17.3116 13.8149V8.36105C17.3116 7.05812 17.3116 6.40665 17.0621 5.90725C16.833 5.44886 16.4614 5.07721 16.003 4.84817C15.5036 4.59863 14.8521 4.59863 13.5492 4.59863H7.84993C6.80057 4.59863 6.27589 4.59863 5.83589 4.77727C5.43085 4.94172 5.07761 5.2123 4.81336 5.56055C4.52631 5.93884 4.38967 6.44543 4.11641 7.45857L3.63475 9.24438C3.11874 11.1576 2.86072 12.1142 3.07643 12.871C3.27372 13.5632 3.72671 14.1546 4.34365 14.5253C5.01818 14.9306 6.00896 14.9306 7.99052 14.9306H9.81081C10.1512 14.9306 10.216 15.062 10.1199 15.3607Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 4.99438V14.0431' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.ico-view {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1628 12.0531C15.1628 13.7991 13.7468 15.2141 12.0008 15.2141C10.2548 15.2141 8.83984 13.7991 8.83984 12.0531C8.83984 10.3061 10.2548 8.89111 12.0008 8.89111C13.7468 8.89111 15.1628 10.3061 15.1628 12.0531Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.998 19.355C15.806 19.355 19.289 16.617 21.25 12.053C19.289 7.48898 15.806 4.75098 11.998 4.75098H12.002C8.194 4.75098 4.711 7.48898 2.75 12.053C4.711 16.617 8.194 19.355 12.002 19.355H11.998Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.action-items > .item.active > .ico-ex.i-like {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1199 8.63932C8.80478 4.55362 9.47987 2.92612 10.7838 2.65812C11.282 2.55562 11.4888 2.56092 11.8828 2.94462C13.158 4.44822 15.3116 6.80202 16.4865 8.07632C16.79 8.40562 16.9418 8.57022 17.0494 8.75602C17.1496 8.92882 17.2213 9.11242 17.2648 9.30732C17.3116 9.51682 17.3116 9.73962 17.3116 10.1851V15.6389C17.3116 16.9419 17.3116 17.5933 17.0621 18.0927C16.833 18.5511 16.4614 18.9228 16.003 19.1518C15.5036 19.4014 14.8521 19.4014 13.5492 19.4014H7.84993C6.80057 19.4014 6.27589 19.4014 5.83589 19.2227C5.43085 19.0583 5.07761 18.7877 4.81336 18.4394C4.52631 18.0612 4.38967 17.5546 4.11641 16.5414L3.63475 14.7556C3.11874 12.8424 2.86072 11.8858 3.07643 11.129C3.27372 10.4368 3.72671 9.84542 4.34365 9.47472C5.01818 9.06942 6.00896 9.06942 7.99052 9.06942H9.81081C10.1512 9.06942 10.216 8.93802 10.1199 8.63932Z' fill='white' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 19.0059V9.95718' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.action-items > .item.active > .ico-ex.i-dislike {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1199 15.3607C8.80478 19.4464 9.47987 21.0739 10.7838 21.3419C11.282 21.4444 11.4888 21.4391 11.8828 21.0554C13.158 19.5518 15.3116 17.198 16.4865 15.9237C16.79 15.5944 16.9418 15.4298 17.0494 15.244C17.1496 15.0712 17.2213 14.8876 17.2648 14.6927C17.3116 14.4832 17.3116 14.2604 17.3116 13.8149V8.36105C17.3116 7.05812 17.3116 6.40665 17.0621 5.90725C16.833 5.44886 16.4614 5.07721 16.003 4.84817C15.5036 4.59863 14.8521 4.59863 13.5492 4.59863H7.84993C6.80057 4.59863 6.27589 4.59863 5.83589 4.77727C5.43085 4.94172 5.07761 5.2123 4.81336 5.56055C4.52631 5.93884 4.38967 6.44543 4.11641 7.45857L3.63475 9.24438C3.11874 11.1576 2.86072 12.1142 3.07643 12.871C3.27372 13.5632 3.72671 14.1546 4.34365 14.5253C5.01818 14.9306 6.00896 14.9306 7.99052 14.9306H9.81081C10.1512 14.9306 10.216 15.062 10.1199 15.3607Z' fill='white' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 4.99414V14.0428' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.example-action > .item {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.916 15.8334L6.08268 10.0001L11.916 4.16675' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.swip-action > .item {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.916 15.8334L6.08268 10.0001L11.916 4.16675' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.head-bracket::before, .head-bracket::after {
    background-image: url("data:image/svg+xml,%3Csvg width='5' height='20' viewBox='0 0 5 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20H0V0H5V1.8578H2.14915V18.1422H5V20Z' fill='%23FD9E10'/%3E%3C/svg%3E%0A");
}

.about-items > .item > .name-project > .go-project {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1213 8.02871L24 8.00005L23.9729 20.8801' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 8.002L8.00053 24' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.icon-vk {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9196 13.1009C16.3996 13.6452 16.8085 14.2644 17.1417 14.947C17.3173 15.3041 17.1685 15.7352 16.8114 15.9099C16.7097 15.9598 16.6021 15.9828 16.4956 15.9828C16.2297 15.9828 15.9733 15.835 15.8485 15.5787C15.5711 15.0123 15.2332 14.5006 14.8444 14.058C14.4796 13.6539 14.1033 13.3812 13.7001 13.2296C13.485 13.1537 13.2268 13.1192 12.9148 13.1105V15.2532C12.9148 15.6507 12.5922 15.9732 12.1948 15.9732C8.42006 15.9732 6.78614 11.682 6.78614 9.49323C6.78614 9.09579 7.1087 8.77323 7.50614 8.77323C7.90358 8.77323 8.22614 9.09579 8.22614 9.49323C8.22614 10.5118 9.02294 13.89 11.4748 14.4536V10.2132H11.0418C10.6444 10.2132 10.3218 9.89068 10.3218 9.49323C10.3218 9.09579 10.6444 8.77323 11.0418 8.77323H12.1948C12.5922 8.77323 12.9148 9.09579 12.9148 9.49323V11.6513C13.2373 11.636 13.4937 11.5985 13.7154 11.5208C14.1061 11.3739 14.4815 11.0993 14.8453 10.6865C15.2332 10.2555 15.5692 9.7486 15.8485 9.17739C16.0233 8.81931 16.4553 8.67339 16.8114 8.84619C17.1685 9.02091 17.3173 9.45195 17.1417 9.80908C16.8037 10.5003 16.3938 11.1176 15.9215 11.6436C15.669 11.9297 15.4012 12.1736 15.1199 12.3771C15.3973 12.5768 15.6623 12.8158 15.9196 13.1009ZM12.0009 2.88843C6.97238 2.88843 2.88086 6.97995 2.88086 12.0084C2.88086 17.0379 6.97238 21.1284 12.0009 21.1284C17.0303 21.1284 21.1209 17.0379 21.1209 12.0084C21.1209 6.97995 17.0303 2.88843 12.0009 2.88843Z' fill='white'/%3E%3C/svg%3E%0A");
}

.icon-wtsp {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.41 13.5042L14.3111 13.436C14.1105 13.2959 13.8331 13.3141 13.667 13.4792L13.4443 13.7039C13.2119 13.94 12.8462 13.9852 12.5611 13.8143C11.4551 13.148 10.9031 12.5048 10.2129 11.4786C10.0238 11.1964 10.0574 10.8191 10.2945 10.5752L10.5182 10.3448C10.6939 10.1653 10.715 9.89747 10.5719 9.68915C10.4193 9.476 10.2705 9.26192 10.1284 9.05744C10.0459 8.94032 9.91051 8.86352 9.76171 8.85104C9.74923 8.85008 9.73483 8.84912 9.71851 8.84912C9.62827 8.84912 9.49003 8.87408 9.37099 8.99408L9.25099 9.11504L9.24811 9.11792C8.22859 10.1404 9.32971 11.9701 10.7006 13.342C12.0542 14.6908 13.8667 15.7736 14.8862 14.7522L15.0273 14.6197C15.1511 14.494 15.1598 14.326 15.1521 14.2396C15.1444 14.1522 15.107 13.99 14.9428 13.8757C14.7662 13.749 14.5924 13.63 14.41 13.5042Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0271 15.655L15.885 15.7894C15.3282 16.3433 14.6552 16.6169 13.9055 16.6169C12.6498 16.6169 11.1791 15.8528 9.68246 14.3609C7.3055 11.984 6.74774 9.58584 8.22518 8.10264L8.3471 7.97976C8.7551 7.5708 9.32342 7.36344 9.88406 7.41624C10.4581 7.46616 10.9765 7.76376 11.3077 8.23416C11.4479 8.43672 11.5938 8.64504 11.7493 8.862C12.2332 9.5628 12.2111 10.4758 11.7292 11.1372C12.0738 11.6067 12.3944 11.9532 12.8514 12.2844C13.5157 11.7881 14.4325 11.767 15.1304 12.2528L15.2255 12.3171C15.4165 12.4496 15.5989 12.5744 15.7736 12.7011C16.2354 13.0217 16.534 13.5382 16.5858 14.1104C16.6376 14.6844 16.4332 15.247 16.0271 15.655ZM20.9576 10.2684C20.2741 6.63288 17.3711 3.7308 13.7356 3.0492C11.0351 2.54136 8.28854 3.24984 6.19382 4.98744C4.08758 6.73464 2.88086 9.29304 2.88086 12.008C2.88086 13.3731 3.1919 14.7296 3.80438 16.0361C3.8543 16.1494 3.86966 16.2636 3.84662 16.3692C3.69686 17.0499 3.38294 18.4198 3.15638 19.399C3.06134 19.8128 3.18614 20.2352 3.48758 20.528C3.78614 20.8179 4.20854 20.9321 4.61174 20.8256C5.5247 20.5952 6.77558 20.2889 7.56086 20.1056C7.66358 20.0816 7.77686 20.096 7.89494 20.1545C9.16118 20.792 10.581 21.128 12.0008 21.128C14.7138 21.128 17.2712 19.9212 19.0165 17.8179C20.757 15.7222 21.4636 12.9699 20.9576 10.2684Z' fill='white'/%3E%3C/svg%3E%0A");
}

.icon-tg {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.161 9.38966L8.87323 11.3394C8.74651 11.3865 8.71867 11.494 8.71387 11.5545C8.70907 11.6121 8.71771 11.7215 8.83579 11.7906L10.7011 12.8841L10.7002 12.886C10.823 12.9561 10.9277 13.0588 10.9939 13.1797L12.0768 15.0345C12.143 15.1458 12.2506 15.1564 12.311 15.1497C12.3696 15.1449 12.4762 15.117 12.5232 14.9913L14.4768 9.70455C14.5248 9.57398 14.4624 9.48662 14.4211 9.44534C14.3798 9.4031 14.2886 9.34262 14.161 9.38966Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8293 10.2036L13.8748 15.4932C13.6444 16.1096 13.0943 16.5272 12.4386 16.5838C12.3877 16.5886 12.3359 16.5915 12.285 16.5915C11.6898 16.5915 11.1445 16.2833 10.8373 15.764L9.83222 14.0436L8.10806 13.0328C7.54166 12.6996 7.22486 12.0862 7.28054 11.4305C7.33718 10.7748 7.75478 10.2228 8.37206 9.98956L13.6626 8.03883C14.2876 7.80843 14.9692 7.95627 15.4405 8.42571C15.9109 8.89611 16.0607 9.57675 15.8293 10.2036ZM12.0009 2.88843C6.97238 2.88843 2.88086 6.97995 2.88086 12.0084C2.88086 17.0369 6.97238 21.1284 12.0009 21.1284C17.0293 21.1284 21.1209 17.0369 21.1209 12.0084C21.1209 6.97995 17.0293 2.88843 12.0009 2.88843Z' fill='white'/%3E%3C/svg%3E%0A");
}

.ico-phone {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5317 12.4724C15.5208 16.4604 16.4258 11.8467 18.9656 14.3848C21.4143 16.8328 22.8216 17.3232 19.7192 20.4247C19.3306 20.737 16.8616 24.4943 8.1846 15.8197C-0.493478 7.144 3.26158 4.67244 3.57397 4.28395C6.68387 1.17385 7.16586 2.58938 9.61449 5.03733C12.1544 7.5765 7.54266 8.48441 11.5317 12.4724Z' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.check {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='23' height='23' rx='3.5' fill='%23DCDCDC' stroke='%23BEBEBE'/%3E%3C/svg%3E%0A");
}

.default-check > input:checked ~ .check-content > .check {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%23FD9E10'/%3E%3Cpath d='M17.8333 7.9895L9.81246 16.0103L6.16663 12.3645' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.item-nk::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.341 6.0216L18 6.0001L17.9796 15.6602' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 6.0015L6.0004 18' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.icon-ar {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.75 11.7256L4.75 11.7256' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.7002 5.70124L19.7502 11.7252L13.7002 17.7502' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.hide-modal {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4L12 12' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4L4 12' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.nav-toggle {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='32' viewBox='0 0 24 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.88892 22.2227H19.1111' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.88892 9.77734H19.1111' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.88892 16H19.1111' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.nav-toggle.active {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='32' viewBox='0 0 24 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9L19 23' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 9L5 23' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.none {
    display: none !important;
}

.responsive-main {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.responsive-main > *:last-child {
    margin-top: auto;
}

.responsive-wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================
   Component Styles
   ============================================ */

/* Components - development/debugging class (unused in production) */
.components {
    padding: 20px;
    background: #404040;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.components > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-2xl);
}

.def-button {
    border: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    -webkit-appearance: none;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    width: 100%;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
}

/* ============================================
   Button Styles - Optimized
   ============================================ */

/* Base button styles - common for all button variants */
.button-base,
.button-q,
.button-w,
.button-r,
.button-m,
.button-a,
.button-b,
.button-c,
.button-d,
.button-e {
    gap: var(--gap-sm);
    height: var(--size-button-height);
    padding: 0px var(--spacing-button-x);
    border-radius: var(--radius-full);
}

/* Icon positioning - shared across all button variants */
[class*="button-"].ico-l {
    padding-left: var(--spacing-button-x-icon);
}

[class*="button-"].ico-r {
    padding-right: var(--spacing-button-x-icon);
}

/* Button text styles - shared across all button variants */
[class*="button-"] > p {
    text-align: center;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}

.button-icon {
	width: var(--size-icon-large);
	min-width: var(--size-icon-large);
	max-width: var(--size-icon-large);
	height: var(--size-icon-large);
	min-height: var(--size-icon-large);
	max-height: var(--size-icon-large);
	padding: 0;
	border-radius: var(--radius-round);
	border: var(--border-width) solid var(--color-gray-border);
	background: var(--color-white);
	gap: 0;
}
.button-icon:hover {
	background: var(--color-black-05);
	border: var(--border-width) solid var(--color-black);
}

/* Button variants - only specific styles */
.button-q {
    background: var(--color-black);
}
.button-q:hover {
    background: var(--color-black-80);
}
.button-q > p {
    color: var(--color-white);
}

.button-w {
    background: var(--color-white);
    border: var(--border-width) solid var(--color-gray-border);
}
.button-w:hover {
    background: var(--color-black-05);
    border: var(--border-width) solid var(--color-black);
}
.button-w > p {
    color: var(--color-black);
}

.button-r {
    background: var(--color-green);
}
.button-r:hover {
    background: var(--color-green-hover);
}
.button-r > p {
    color: var(--color-white);
}

.button-m {
    background: #000;
}
.button-m:hover {
    background: #232323;
}
.button-m > p {
    color: #FFF;
}

.button-a {
    background: #FD9E10;
}
.button-a:hover {
    background: #FFC267;
}
.button-a > p {
    color: #000;
}

.button-b {
    background: rgba(255, 255, 255, 0.16);
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
}
.button-b:hover {
    background: rgba(255, 255, 255, 0.32);
}
.button-b > p {
    color: #FFF;
}

.button-c {
    background: #EBEBEB;
}
.button-c:hover {
    background: #C2C2C2;
}
.button-c > p {
    color: #000;
}

.button-d {
    background: #FFF;
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
}
.button-d:hover {
    background: #FD9E10;
}
.button-d > p {
    color: #000;
}

.button-e {
    background: #FFF;
}
.button-e:hover {
    background: #E1E1E1;
}
.button-e > p {
    color: #000;
}

.quiz-primary {
	border: 1px solid #EBEBEB;
	border-radius: 12px;
}

/* ============================================
   Icon Styles
   ============================================ */

/* Base icon styles - common for all icons */
.icon-base,
.def-ico {
    width: var(--size-icon);
    height: var(--size-icon);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.responsive-start {
    position: relative;
    isolation: isolate;
    padding: var(--spacing-section) 0;
}

.start-surface {
    background: #F2F4F7;
}

.start-body {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-start-body) var(--spacing-3xl);
    border-radius: var(--radius-2xl);
    border: var(--border-width) solid var(--color-white-08);
    background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 100%);
    -webkit-box-shadow: var(--shadow-md);
            box-shadow: var(--shadow-md);
}

.start-body > * {
    position: relative;
    z-index: 1;
}

.start-body .rain-background {
    opacity: 0.7;
}

/* ============================================
   Start Section - Glass Prism Styles
   ============================================ */

/* Фон секции - светло-серый */
.start-glass-prism {

}

/* Белая карточка на всю ширину */
.start-glass-card {
    position: relative;
    width: 100%;
    padding: var(--spacing-5xl) var(--spacing-4xl);
    background: var(--color-white);
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Обертка для двух колонок */
.start-glass-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    gap: var(--spacing-4xl);
    align-items: center;
    justify-content: center;
}

/* Изображение - 50% ширины */
.start-glass-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-glass-image-element {
    width: 100%;
    height: auto;
    max-width: 500px;
    object-fit: contain;
}

/* Оранжевое ambient свечение внутри карточки */
.start-glass-ambient {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(100px);
    animation: breathing 4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}


/* Контент карточки - 50% ширины */
.start-glass-content {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    align-items: flex-start;
    justify-content: center;
}

/* Заголовок с градиентом */
.start-glass-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-2xl);
    letter-spacing: var(--letter-spacing-base);
    margin: 0;
    background: linear-gradient(90deg, #0A1B3D 0%, #0A1B3D 60%, #565654 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.start-glass-title-span {
    background: linear-gradient(90deg, #f0cca8 0%, #eac7ad 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Описание серый */
.start-glass-description {
    color: #667085;
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    margin: 0;
}

/* Форма в одну строку */
.start-glass-form {
    width: 100%;
}

.start-glass-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: stretch;
}

.start-glass-form-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.start-glass-form-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.start-glass-form-button .def-button.button-w {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
}

.start-glass-form-button .def-button.button-w:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.24);
    border-radius: 0;
}

.start-glass-form-button .def-button.button-w > p {
    color: var(--color-black);
}

/* Соц. доказательство */
.start-glass-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-border);
}

.start-glass-proof-icon {
    font-size: 20px;
    line-height: 1;
}

.start-glass-proof-text {
    color: #667085;
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

/* Анимации */
@keyframes breathing {
    0%, 100% {
        transform: scale(1);
        opacity: 0.15;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.2;
    }
}


.responsive-header {
    position: relative;
    z-index: 1;
}

.header-head {
    background-color: var(--color-gray-bg-alt);
    position: relative;
    overflow: hidden;
    background-image: url('https://as2.ftcdn.net/v2/jpg/06/85/73/85/1000_F_685738564_NoccriZptTpViaBpwRL0w4HHjpzhpT3y.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(245, 245, 245, 0.7);
    z-index: 0;
}

.header-head > .container {
    position: relative;
    z-index: 1;
}

/* Header Soft Tech - Removed old styles */

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 20px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.welcome-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-base);
}

.welcome-content {
    padding-top: 64px;
    padding-bottom: 144px;
    max-width: 710px;
    width: 100%;
}

.welcome-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 28px;
}
.welcome-info > h1 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 112px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 112px;
    letter-spacing: -2.24px;
    text-transform: uppercase;
}
.welcome-info > h1 > span {
    color: #FF8C42;
    font-family: 'FORGE SANS';
    font-size: 112px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 112px;
    letter-spacing: -2.24px;
    text-transform: uppercase;
}
.welcome-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
            align-self: flex-start;
    gap: 10px;
    background: rgba(255, 140, 66, 0.15);
    color: #FF8C42;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 140, 66, 0.3);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: auto;
    max-width: 100%;
}

.welcome-badge .badge-icon {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 20px;
    height: 20px;
}
.badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    border: var(--border-width) solid var(--color-gray-border-alt);
    background: #FFF;
    color: #000;
    font-family: Noto Sans, 'Inter', sans-serif;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    margin-bottom: 20px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.badge__icon {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.badge__label {
    color: inherit;
}
.badge-icon--ai {
    background-image: url('/Master Icon/Artificial Intelligence/Mixed/SVG/rocket.svg');
}
.badge-icon--automation {
    background-image: url('/Master Icon/Artificial Intelligence/Mixed/SVG/robot.svg');
}
.badge-icon--collaboration {
    background-image: url('/Master Icon/Chat and Communication/Mixed/SVG/communication.svg');
}
.badge-icon--integrations {
    background-image: url('/Master Icon/App Development/Mixed/SVG/link website.svg');
}
.badge-icon--analytics {
    background-image: url('/Master Icon/Data Analysis/Mixed/SVG/data analysis.svg');
}
.individual-quiz {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}
.quiz-actions {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 auto;
}
.quiz-primary,
.quiz-secondary {
    min-width: 180px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.quiz-primary {
	background: #FFF;
	border: 1px solid #EBEBEB;
	border-radius: 12px;
}
.quiz-primary p {
    color: #000;
}

.quiz-hints {
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 6px;
	padding: 0;
	margin: 12px 0 0;
}
.quiz-hints li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 8px;
	color: rgba(0, 0, 0, 0.9);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: -0.14px;
}
.quiz-hints li::before {
	content: "";
	width: 16px;
	height: 16px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 8H12.25' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.75 3.5L12.25 8L8.75 12.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.quiz-hints-note {
	margin-top: 6px;
	color: rgba(0, 0, 0, 0.6);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.13px;
}
.quiz-step {
    gap: 20px;
}
.quiz-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-base);
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
.button-outline {
    padding: 16px 32px;
    background: #FFF;
    border: var(--border-width) solid var(--color-gray-border-alt);
    border-radius: var(--radius-lg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    color: #000;
    font-family: Noto Sans, 'Inter', sans-serif;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}
.button-outline p {
    margin: 0;
    color: inherit;
}

.inline-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.welcome-info > p {
    color: #FF8C42;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}
/* Robot Header with Icon */
.robot-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-lg);
    margin-top: 8px;
}

.robot-icon-header {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}

.robot-icon-header:hover {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
}

.robot-header > h2 {
    color: #333;
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    margin: 0;
}

.welcome-info > h2 {
    color: #333;
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    margin-top: 16px;
    margin-bottom: 12px;
}

/* RAG Card */
.rag-card {
    background: linear-gradient(135deg, rgba(255, 140, 66, 0.15) 0%, rgba(255, 140, 66, 0.08) 100%);
    border-left: 5px solid #FF8C42;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-top: 12px;
    -webkit-box-shadow: 0 4px 16px rgba(255, 140, 66, 0.15);
            box-shadow: 0 4px 16px rgba(255, 140, 66, 0.15);
    position: relative;
    overflow: hidden;
}

.rag-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 140, 66, 0.03);
    pointer-events: none;
}

.rag-card > h3 {
    color: #FF8C42;
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    margin: 0 0 16px 0;
    position: relative;
    z-index: 1;
}

.rag-card > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.rag-card > ul > li {
    color: #555;
    font-size: var(--font-size-sm);
    line-height: 1.8;
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
}

.rag-card > ul > li:last-child {
    margin-bottom: 0;
}

.rag-card > ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: #FF8C42;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 8px rgba(255, 140, 66, 0.5);
            box-shadow: 0 0 8px rgba(255, 140, 66, 0.5);
}

.welcome-info > h3 {
    color: #555;
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 12px;
}
.welcome-info > ul {
    color: #666;
    font-size: var(--font-size-sm);
    line-height: 1.8;
    margin: 12px 0;
    padding-left: 24px;
}
.welcome-info > ul > li {
    color: #666;
    margin-bottom: 8px;
}

.welcome-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
}

/* ============================================
   Layout & Container Styles
   ============================================ */

.container {
    max-width: var(--size-container-max);
    width: 100%;
    padding: 0px var(--spacing-container);
    margin: 0px var(--margin-auto);
}
.container.min {
    max-width: var(--size-container-min);
}

.gallery {
    height: 580px;
}

.welcome-gallery {
    overflow: hidden;
    padding-top: 64px;
    padding-bottom: 32px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.welcome {
    gap: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.item-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 16px;
    width: 100% !important;
    height: 100%;
}

.gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 580px;
}
.gallery .swiper-wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 100%;
}
.gallery .swiper-slide {
    height: 100%;
}

.gallery-content {
    border-radius: var(--radius-sm);
    background: #FFF;
    overflow: hidden;
}

.gallery-navigate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-md);
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
}
.gallery-navigate > * {
    margin: 0px !important;
    padding: 0;
    opacity: 1;
    outline: none !important;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border: none;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 6px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: #FFF;
}
.gallery-navigate > *.swiper-pagination-bullet-active {
    background: #FD9E10;
}
.gallery-navigate > *:only-child {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.gallery-action {
    background: #F0F0F0;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    padding: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-md);
    pointer-events: none;
}
.gallery-action > .item {
    pointer-events: all;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: #FFF;
    opacity: 1;
    width: 100%;
    border: none !important;
    outline: none !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.gallery-action > .item.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.tags-items {
    overflow-x: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
}
.tags-items.tags-wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.tags-items > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    padding: 2px 6px;
    border-radius: 4px;
    border-bottom: 2px solid #CCC;
    background: #EBEBEB;
    padding-bottom: 2px;
    letter-spacing: var(--letter-spacing-xs);
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.tags-items > .item:hover {
    border-bottom: 2px solid #CA7A02;
    background: #FD9E10;
}

.item-gallery-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.details-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 14px;
}
.details-gallery > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.name-project {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.name-project > h1,
.name-project > h2 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 32px;
    letter-spacing: -0.64px;
}

.go-project {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.item-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.item-gallery-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    max-width: 500px;
    height: 300px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.item-gallery-faq {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 800px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.item-gallery-image > img {
    -webkit-user-drag: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.item-gallery-image > img.gallery-icon,
.item-gallery-image > img.ai-icon {
    -o-object-fit: contain;
       object-fit: contain;
    padding: 40px;
    background: transparent;
    border-radius: var(--radius-sm);
}

.responsive-partners {
    pointer-events: none;
    overflow: hidden;
    width: 100%;
    margin-top: -80px;
    position: relative;
    z-index: 1;
    background: #FFF;
}

.partners-scroll {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.partners-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 60px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-animation: scroll-partners 30s linear infinite;
            animation: scroll-partners 30s linear infinite;
}

@-webkit-keyframes scroll-partners {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-33.333%);
                transform: translateX(-33.333%);
    }
}

@keyframes scroll-partners {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-33.333%);
                transform: translateX(-33.333%);
    }
}

.partner-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    opacity: 0.6;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.partner-item:hover {
    opacity: 1;
}

.partner-item > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: scale-down;
       object-fit: scale-down;
    max-width: 120px;
    max-height: 60px;
}

.responsive-service {
    padding: var(--spacing-section) 0;
}

.service-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* Section heading colors - Optimized: service-info specific */
.service-info > h1,
.service-info > .section-title {
    color: #000;
    text-align: center;
}
.service-info > h1 > span,
.service-info > .section-title > span {
    color: #FD9E10; /* Orange color already defined in base styles above */
}
.service-info > p {
    max-width: 604px;
    width: 100%;
    color: #6d6d6d;
    text-align: center;
    font-family: 'Tektur', sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-normal);
}

.service-items {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1px;
    background: #ECECEC;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.service-items > .item {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    border-radius: 0;
    overflow: hidden;
    background: #FFF;
    min-height: 400px;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    padding: 0;
    position: relative;
    border: none;
}

.service-items > .item:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

.service-items > .item:nth-child(-n+3) {
    isolation: auto;
    background: #FFF;
    position: relative;
}
.service-image-wrapper {
    position: relative;
    width: 100%;
    min-height: 270px;
    overflow: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 20px 0;
}

.service-image {
    width: 300px;
    height: 230px;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
    opacity: 0.6;
}

.service-image-overlay {
    display: none;
}

.service-image-wrapper::after {
    display: none;
}

.service-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--gap-lg);
    padding: 18px 18px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.service-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.service-head > h1,
.service-head > h3 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 32px;
    letter-spacing: -0.64px;
}
.service-head > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.service-bottom > p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
    color: #000;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}
.service-bottom > p > span {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-sm);
    letter-spacing: -0.18px;
}

.service-ico {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 32px;
    height: 32px;
}
.service-ico > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.service {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
}

.teach-info-about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 32px;
}

.tech-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
/* Section heading colors - Optimized: tech-info specific */
.tech-info > h1,
.tech-info > .section-title {
    color: #FFF;
}
.tech-info > h1 > span,
.tech-info > .section-title > span {
    color: #FD9E10; /* Orange color already defined in base styles above */
}
.tech-info > p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}

.responsive-technologies {
    padding: var(--spacing-section) 0;
    position: relative;
    background: #FFF;
    background-image: 
        radial-gradient(circle at 75% 50%, rgba(11, 116, 255, 0.1) 0%, transparent 70%),
        linear-gradient(rgba(11, 116, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 116, 255, 0.03) 1px, transparent 1px);
    background-size: 
        100% 100%,
        40px 40px,
        40px 40px;
    background-position: 
        center,
        0 0,
        0 0;
    background-repeat: 
        no-repeat,
        repeat,
        repeat;
    -webkit-animation: tech-grid-pan 20s linear infinite;
            animation: tech-grid-pan 20s linear infinite;
    overflow: hidden;
}

.fixed-image {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    z-index: -1;
}
.fixed-image > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-user-drag: none;
}

.technologies {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 40px;
}
.technologies > * {
    width: 100%;
}

/* Technologies Orchestrator - New Design */
.technologies-orchestrator {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 60px;
    min-height: 600px;
}

.tech-orchestrator-text {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 45%;
            flex: 0 0 45%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-xl);
}

.tech-orchestrator-label {
    font-family: 'FORGE SANS', sans-serif;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: none;
    color: #0b74ff;
}

.tech-orchestrator-title {
    font-family: var(--font-family-heading);
    font-size: 50px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: #000;
    letter-spacing: var(--letter-spacing-base);
}

.tech-orchestrator-description {
    font-family: 'Tektur', sans-serif;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    color: #6d6d6d;
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-normal);
}

.tech-orchestrator-text .def-button.button-w {
    background: transparent !important;
    border: 1px solid rgba(11, 116, 255, 0.2) !important;
}

.tech-orchestrator-text .def-button.button-w:hover {
    background: rgba(11, 116, 255, 0.05) !important;
    border-color: rgba(11, 116, 255, 0.4) !important;
}

.tech-orchestrator-text .def-button.button-w > p {
    color: #0b74ff !important;
}

.tech-orchestrator-visual {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 55%;
            flex: 0 0 55%;
    position: relative;
    height: 500px;
    min-height: 500px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.tech-connector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.tech-connector-line {
    stroke: #0b74ff;
    stroke-width: 2;
    stroke-dasharray: 5 5;
    fill: none;
    opacity: 0.6;
}

.tech-node {
    position: absolute;
    width: 64px;
    height: 64px;
    background: #FFF;
    border-radius: 50%;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 3;
}

.tech-node-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
}

.tech-node-icon img {
    width: 32px;
    height: 32px;
    -o-object-fit: contain;
       object-fit: contain;
}

.tech-node-telegram {
    top: 10%;
    left: 5%;
}

.tech-node-chatgpt {
    top: 10%;
    right: 5%;
}

.tech-node-sheets {
    bottom: 10%;
    right: 5%;
}

.tech-node-crm {
    bottom: 10%;
    left: 5%;
}

.tech-robot-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 2;
    -webkit-animation: hover-robot 4s ease-in-out infinite;
            animation: hover-robot 4s ease-in-out infinite;
}

.tech-robot-image {
    width: 200px;
    height: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.tech-robot-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.link-ico {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
    position: relative;
}
.link-ico::after {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.link-ico > p {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 24px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: -0.48px;
    text-decoration-line: underline;
}

.techn-bottom {
    padding: 24px;
}

.techn-details {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #FFF;
}

.icon-name-tech {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
}
.icon-name-tech > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 40px;
    height: 40px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -o-object-fit: contain;
       object-fit: contain;
}
.icon-name-tech > p {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 40px;
    letter-spacing: -0.48px;
}

.techn-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.techn-head > .item {
    padding: 24px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}
.techn-head > .item:first-child {
    background: #FD9E10;
}
.techn-head > .item:last-child {
    position: relative;
    isolation: isolate;
}
.techn-head > .item:last-child::before {
    right: 0;
    top: 0;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.techn-head > .item > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    overflow: hidden;
    color: #6d6d6d;
    text-overflow: ellipsis;
    font-family: 'Tektur', sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-normal);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.item-live {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-base);
    height: 56px;
}

.live-left {
    background-image: url(../../wdo/source/img/live-a.svg);
    -webkit-animation: live-a 8s linear infinite;
            animation: live-a 8s linear infinite;
}

.live-right {
    background-image: url(../../wdo/source/img/live-b.svg);
    -webkit-animation: live-b 8s linear infinite;
            animation: live-b 8s linear infinite;
}

@-webkit-keyframes live-a {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -612px;
    }
}

@keyframes live-a {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -612px;
    }
}
@-webkit-keyframes live-b {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 612px;
    }
}
@keyframes live-b {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 612px;
    }
}

/* Technologies Orchestrator Animations */
@keyframes hover-robot {
    0%, 100% {
        -webkit-transform: translate(-50%, -50%) translateY(0);
            -ms-transform: translate(-50%, -50%) translateY(0);
                transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        -webkit-transform: translate(-50%, -50%) translateY(-20px);
            -ms-transform: translate(-50%, -50%) translateY(-20px);
                transform: translate(-50%, -50%) translateY(-20px);
    }
}

@keyframes data-flow {
    to {
        stroke-dashoffset: -100;
    }
}

@keyframes float-node {
    0%, 100% {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
                transform: translateY(-10px);
    }
}


.tech-connector-line {
    -webkit-animation: data-flow 1s linear infinite;
            animation: data-flow 1s linear infinite;
}

.tech-node-telegram {
    -webkit-animation: float-node 3s ease-in-out infinite;
            animation: float-node 3s ease-in-out infinite;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.tech-node-chatgpt {
    -webkit-animation: float-node 3.5s ease-in-out infinite;
            animation: float-node 3.5s ease-in-out infinite;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}

.tech-node-sheets {
    -webkit-animation: float-node 3.2s ease-in-out infinite;
            animation: float-node 3.2s ease-in-out infinite;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}

.tech-node-crm {
    -webkit-animation: float-node 3.8s ease-in-out infinite;
            animation: float-node 3.8s ease-in-out infinite;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
}

.techn-middle {
    padding: 24px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
    background: #F0F0F0;
}

.image-maintenance {
    width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 16px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.image-maintenance > img {
    -webkit-user-drag: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
	height: auto;
	max-height: 520px;
	-o-object-fit: contain;
	   object-fit: contain;
}

.maintenance {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #F0F0F0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1px;
    position: relative;
}
.maintenance > .item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1px;
    position: relative;
    z-index: 1;
}
.maintenance .rain-background {
    z-index: 0;
}

.responsive-maintenance {
    background: #F0F0F0;
    padding: var(--spacing-section) 0;
    z-index: 0;
}

.maintenance-read {
    background: #FFF;
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.maintenance-read > h1,
.maintenance-read > .section-title {
    color: #000;
}
.maintenance-read > h1 > span,
.maintenance-read > .section-title > span {
    background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 55%, #5a3fc0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.maintenance-read > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 26px;
    letter-spacing: var(--letter-spacing-sm);
}

.maintenance-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-2xl);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 24px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    background: #FFF;
}

.bottom-maintenance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}
.bottom-maintenance > p {
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
}
.bottom-maintenance > .def-button {
    max-width: 100%;
}

.items-maintenance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.items-maintenance > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--gap-md);
    position: relative;
}
.items-maintenance > .item::before {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.items-maintenance > .item.maintenance-feature::before {
	display: none;
}
.items-maintenance > .item.maintenance-feature {
	align-items: center;
	gap: 10px;
}
.items-maintenance > .item.maintenance-feature img {
	width: 24px;
	height: 24px;
	-webkit-box-flex: 0;
	    -ms-flex: none;
	        flex: none;
}
.items-maintenance > .item.maintenance-feature p {
	position: relative;
}
.feature-term {
	font-weight: 700;
	color: #000;
	position: relative;
	cursor: help;
}
.feature-tooltip {
	position: absolute;
	left: 0;
	top: 100%;
	transform: translateY(6px);
	background: #FFF;
	border: 1px solid #EBEBEB;
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.13px;
	color: rgba(0, 0, 0, 0.85);
	box-shadow: 0 12px 28px rgba(26, 26, 26, 0.07);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	min-width: 240px;
	max-width: 320px;
	z-index: 3;
}
.feature-term:hover + .feature-tooltip {
	opacity: 1;
	visibility: visible;
}
.items-maintenance > .item > p {
    color: #000;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.details-maintenance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-base);
}
.details-maintenance.min > .maintenance-ico {
    width: 40px;
    height: 40px;
}
.details-maintenance.min > .maintenance-ico > img {
    width: 24px;
    height: 24px;
}
.details-maintenance > p {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 24px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: -0.48px;
}

.maintenance-ico {
    width: 64px;
    height: 64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.maintenance-ico > img {
    -webkit-user-drag: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 32px;
    height: 32px;
    -o-object-fit: contain;
       object-fit: contain;
}

.head-maintenance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-2xl);
}

.responsive-stats {
    padding: 40px 0;
}

.stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 32px;
}
.stats > .item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}
.stats > .item > .stat-value {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 40px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 40px;
    letter-spacing: -0.8px;
    text-transform: uppercase;
    display: block;
}
.stats > .item > p {
    color: #000;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}

.default-select {
    width: 100%;
    position: relative;
}
.default-select.light-select > .head-select {
    background: #F2F2F2;
}
.default-select.active > .body-select {
    opacity: 1;
    pointer-events: all;
    -webkit-animation: show 0.3s;
            animation: show 0.3s;
}
.default-select.active > .head-select {
    border: var(--border-width) solid var(--color-black);
}
.default-select.active > .head-select::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.default-select.selected > .head-select > .content-head-select > p {
    color: #000;
}

.head-select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 48px;
    border: var(--border-width) solid var(--color-gray-border);
    background: #FFF;
    border-radius: var(--radius-sm);
    overflow: hidden;
    padding-left: 16px;
    padding-right: 12px;
    position: relative;
    gap: 10px;
    cursor: pointer;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.head-select::after {
    position: relative;
    content: "";
    width: 24px;
    height: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.head-select:hover {
    border: 1px solid rgba(0, 0, 0, 0.24);
}

.content-head-select {
    width: 100%;
    overflow: hidden;
}
.content-head-select > p {
    font-style: normal;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: var(--line-height-sm);
    color: rgba(0, 0, 0, 0.4);
}

.body-select {
    position: relative;
    z-index: 2;
    top: 100%;
    pointer-events: none;
    width: 100%;
    left: 0;
    right: 0;
    position: absolute;
    max-height: 222px;
    overflow-y: auto;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.24);
    background: #FFF;
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
    display: -ms-grid;
    display: grid;
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    opacity: 0;
}
.body-select > .item {
    border-bottom: 1px solid #EBEBEB;
    overflow: hidden;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0px 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.body-select > .item:last-child {
    border-bottom: none;
}
.body-select > .item > p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: #000;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.body-select > .item:hover {
    background: #FBFBFB;
}
.body-select > .item.active {
    background: #EBEBEB;
}
.body-select > .item.active > p {
    color: rgba(0, 0, 0, 0.8);
}

@-webkit-keyframes show {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
                transform: translateY(100px);
    }
    50% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(4px);
                transform: translateY(4px);
    }
}

@keyframes show {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
                transform: translateY(100px);
    }
    50% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(4px);
                transform: translateY(4px);
    }
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Jura', sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
}

h3 {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    color: #000;
}

/* Global h4, h5, h6 styles */
h4, h5, h6 {
    color: #000;
}
.responsive-individual {
    position: relative;
    padding: var(--spacing-section) 0;
    isolation: isolate;
}
/* Общий класс для анимированной сетки */
.animated-grid-bg {
    background-color: #F0F0F0;
    background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.85) 0%, rgba(240, 240, 240, 0.55) 50%, rgba(240, 240, 240, 0.12) 70%, rgba(240, 240, 240, 0.05) 85%, rgba(240, 240, 240, 0) 100%), linear-gradient(#d9d9d9 1px, transparent 1px), linear-gradient(90deg, #d9d9d9 1px, transparent 1px);
    background-size: 100% 100%, 48px 48px, 48px 48px;
    background-position: center, center, center;
    background-repeat: no-repeat, repeat, repeat;
    animation: individual-grid-pan 14s linear infinite;
}

.individual-bg {
    border-radius: 30px;
}

@keyframes individual-grid-pan {
	0% {
		background-position: center, 0 0, 0 0;
	}
	50% {
		background-position: center, 24px 24px, 24px 24px;
	}
	100% {
		background-position: center, 0 0, 0 0;
	}
}

/* Technologies Section Animated Grid */
@keyframes tech-grid-pan {
	0% {
		background-position: center, 0 0, 0 0;
	}
	50% {
		background-position: center, 20px 20px, 20px 20px;
	}
	100% {
		background-position: center, 0 0, 0 0;
	}
}
.individual.individual-layout {
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 32px;
    padding: 50px;
}
.individual-info-light {
    max-width: 560px;
    width: 100%;
    color: #000;
    gap: 60px;
}
.individual-info-light > h2 {
    font-family: 'Jura', sans-serif;
    font-optical-sizing: auto;
    font-size: 50px;
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 32px 0;
    max-width: 80%;
    background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 55%, #5a3fc0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.individual-info-light > h2 > span {
    color: #FD9E10;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}
.individual-info-light > p {
    color: #6d6d6d;
    font-family: 'Tektur', sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    line-height: 26px;
    letter-spacing: var(--letter-spacing-normal);
    margin: 0;
}
.individual-card {
    background: #FFF;
    border-radius: 20px;
    padding: 24px;
	-webkit-box-flex: 1;
		-ms-flex: 1 1 430px;
			flex: 1 1 430px;
    max-width: 680px;
    width: 100%;
    -webkit-box-shadow: 0 12px 28px rgba(26, 26, 26, 0.07);
            box-shadow: 0 12px 28px rgba(26, 26, 26, 0.07);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}
.individual-card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.individual-card-header h3 {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    margin: 0;
    color: #000;
}
.individual-card-header h2 {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    line-height: 36px;
}
.individual-card-header p {
    margin: 0;
    color: #000;
    line-height: 1.5;
}

.fill-item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    margin-bottom: 20px;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6px;
}
.fill-item.m-gap {
    gap: var(--spacing-md);
}
.fill-item > p {
    color: var(--color-black);
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    margin: 0 0 var(--spacing-md) 0;
}

.fill-item > h2 {
    color: var(--color-black);
    font-family: var(--font-family-heading);
    font-optical-sizing: auto;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    margin: 0 0 var(--spacing-md) 0;
}

/* Base form input styles - common for fill-content and fill-text */
.fill-base,
.fill-content,
.fill-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--color-gray-border);
    -webkit-transition: var(--transition-fast);
    transition: var(--transition-fast);
    background: var(--color-white);
}
.fill-base:hover,
.fill-content:hover,
.fill-text:hover {
    border: var(--border-width) solid var(--color-black-24);
}
.fill-base:focus-within,
.fill-content:focus-within,
.fill-text:focus-within {
    border: var(--border-width) solid var(--color-black);
}
.fill-base > input,
.fill-base > textarea,
.fill-content > input,
.fill-text > textarea {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: none;
    background: none;
    -webkit-appearance: none;
    color: var(--color-black);
    font-family: var(--font-family-input);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}
.fill-base > input::-webkit-input-placeholder,
.fill-base > textarea::-webkit-input-placeholder,
.fill-content > input::-webkit-input-placeholder,
.fill-text > textarea::-webkit-input-placeholder {
    color: var(--color-black-40);
}
.fill-base > input::-moz-placeholder,
.fill-base > textarea::-moz-placeholder,
.fill-content > input::-moz-placeholder,
.fill-text > textarea::-moz-placeholder {
    color: var(--color-black-40);
}
.fill-base > input:-ms-input-placeholder,
.fill-base > textarea:-ms-input-placeholder,
.fill-content > input:-ms-input-placeholder,
.fill-text > textarea:-ms-input-placeholder {
    color: var(--color-black-40);
}
.fill-base > input::-ms-input-placeholder,
.fill-base > textarea::-ms-input-placeholder,
.fill-content > input::-ms-input-placeholder,
.fill-text > textarea::-ms-input-placeholder {
    color: var(--color-black-40);
}
.fill-base > input::placeholder,
.fill-base > textarea::placeholder,
.fill-content > input::placeholder,
.fill-text > textarea::placeholder {
    color: var(--color-black-40);
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-normal);
}

.fill-content {
    height: var(--size-input-height);
    padding: 0px var(--spacing-md);
    overflow: hidden;
}
.fill-content.light-fill {
    background: var(--color-white);
}

.fill-text {
    overflow: hidden;
}
.fill-text > textarea {
    padding: 12px 16px;
    min-height: 118px;
}

.ico-fill {
    pointer-events: none;
}

.fill-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-lg);
}

.individual-fills {
	padding: 0px 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
    margin-top: 28px;
}

@media screen and (max-width: 1024px) {
	.individual-fills {
		padding: 0;
	}
}

.individual-action {
    border-radius: 0 0 7px 7px;
    overflow: hidden;
}

.button-fill {
    padding: 16px 32px;
    max-width: 100%;
    background: #FFF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    position: relative;
}
.button-fill.al-fill::after {
    content: none;
}
.button-fill::after {
    content: "";
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.button-fill > p {
    color: #000;
    text-align: center;
    font-family: 'Tektur', sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-normal);
}

.individual-content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    border-radius: var(--radius-sm);
    background: #FD9E10;
}

.individual-info {
    max-width: 710px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.individual-info > h1 {
    color: #FFF;
    font-family: 'FORGE SANS';
    font-size: 112px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 112px;
    letter-spacing: -2.24px;
    text-transform: uppercase;
}
.individual-info > h1 > span {
    color: #FD9E10;
    font-family: 'FORGE SANS';
    font-size: 112px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 112px;
    letter-spacing: -2.24px;
    text-transform: uppercase;
}
.individual-info > p {
    color: #6d6d6d;
    font-family: 'Tektur', sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-normal);
}
.individual-info.individual-info-light > p {
    color: #000;
}

.individual {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 32px;
    padding: 50px;
}

.image-work {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.image-work > img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 16/9;
}

.works {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-2xl);
}
.works > .item {
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--color-gray-border-alt);
    background: #FFF;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.responsive-works {
    padding: var(--spacing-section) 0;
}

.time-work {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
    position: relative;
}
.time-work::before {
    content: "";
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.time-work > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
}

.head-work {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.work-tag-time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.info-work {
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}
.info-work > h1 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 24px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: -0.48px;
}

.work-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.work-details > h3 {
    color: #000;
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}
.work-details > p {
    color: #6d6d6d;
    font-family: 'Tektur', sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-normal);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.work-items-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}
.work-items-info > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
    position: relative;
}
.work-items-info > .item.work-ico-a {
    opacity: 0.4;
}
.work-items-info > .item.work-ico-a.active {
    opacity: 1;
}
.work-items-info > .item::before {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.work-items-info > .item > p {
    color: #000;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.work-price > p {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.24px;
}

.bottom-work {
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}

.review-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
    text-align: center;
}
.review-head > h1 {
    color: #000;
    text-align: center;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 68px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}
.review-head > p {
    max-width: 604px;
    width: 100%;
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}

.responsive-reviews {
    padding: var(--spacing-section) 0;
    background: #F0F0F0;
}

.avatar-user-review {
    width: 48px;
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
}
.avatar-user-review > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 100px;
}

.info-user-review {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}
.info-user-review > h1 {
    color: #000;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}
.info-user-review > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
}

.bottom-review-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-base);
    padding: 24px;
}

.head-review-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
    padding: 24px;
}
.head-review-item > p {
    color: #000;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.rate-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.rate-items.larg-r > .item {
    width: 32px;
    height: 32px;
}
.rate-items > .item {
    width: 20px;
    height: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.review-items {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1px;
}
.review-items > .swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1px;
}

.item-review {
    width: 100%;
    background: #FFF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.review-bottom {
    gap: var(--gap-md);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.review-bottom > p {
    max-width: 604px;
    width: 100%;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}

.reviews {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
}

.start-info > h1,
.start-info > .section-title {
    color: #FFF;
    font-family: 'Jura', sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 68px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
    display: block;
}
.start-info > h1 > span,
.start-info > .section-title > span {
    color: #FD9E10;
    text-align: center;
    font-family: 'Jura', sans-serif;
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 68px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}

.start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: var(--gap-md);
}

.responsive-footer {
    background: #FFF;
    padding: var(--spacing-section) 0;
    border-top: 1px solid #EBEBEB;
    position: relative;
    overflow: hidden;
}

.footer-watermark {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 300px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    font-family: "FORGE SANS", "Noto Sans", sans-serif;
    letter-spacing: 20px;
    line-height: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.5fr;
    gap: 48px;
    margin-bottom: 64px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    position: relative;
    z-index: 1;
}

@media (max-width: 1400px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr) 1.5fr;
        gap: 40px;
    }
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-column {
        gap: var(--gap-lg);
        padding-bottom: 24px;
        border-bottom: 1px solid #EBEBEB;
        border-right: none !important;
    }
    
    .footer-column::after {
        display: none !important;
    }
    
    .footer-column:not(:last-child)::after {
        display: none !important;
        content: none !important;
    }
}

.footer-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0;
    height: 100%;
    position: relative;
    padding-right: 0;
}

.footer-column-header {
    min-height: 140px;
    width: 100%;
}

.footer-column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #EBEBEB;
}

.footer-column-title {
    color: #000;
    font-family: "FORGE SANS", "Noto Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: -0.18px;
    margin: 0;
    margin-bottom: 1px;
}

.footer-column-description {
    color: rgba(0, 0, 0, 0.64);
    font-family: "Noto Sans", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 18px;
    letter-spacing: -0.13px;
    margin: 0;
    margin-bottom: 12px;
    min-height: 100px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-top: 0;
}

.footer-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 6px;
    color: rgba(0, 0, 0, 0.64);
    font-family: "Noto Sans", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-xs);
    letter-spacing: -0.13px;
    text-decoration: none;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    white-space: nowrap;
}

.footer-link:hover {
    color: #FD9E10;
}

.footer-link-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    opacity: 1 !important;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    margin-right: 8px;
    display: inline-block !important;
    visibility: visible !important;
    object-fit: contain;
    vertical-align: middle;
}

.footer-link-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.footer-link:hover .footer-link-icon {
    opacity: 1;
    -webkit-transform: translateX(-2px);
        -ms-transform: translateX(-2px);
            transform: translateX(-2px);
}

.logo-footer {
    height: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 24px;
}
.logo-footer > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.footer-about {
    max-width: 100%;
    width: 100%;
}
.footer-about > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
    margin: 0;
}

.footer-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0;
    height: 100%;
}

.footer-illustration {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.footer-illustration img {
    width: 100%;
    height: auto;
    max-width: 280px;
    -o-object-fit: contain;
       object-fit: contain;
}

.footer-cta-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: var(--gap-md);
    width: 100%;
    height: 56px;
    background: transparent;
    color: #000;
    font-family: "Noto Sans", sans-serif;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
    text-decoration: none;
    border: var(--border-width) solid var(--color-gray-border-alt);
    border-radius: var(--radius-sm);
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}

.footer-cta-button:hover {
    border-color: #FD9E10;
    color: #FD9E10;
}

.footer-cta-button svg {
    width: 24px;
    height: 24px;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}

.footer-cta-button:hover svg {
    -webkit-transform: translateX(4px);
        -ms-transform: translateX(4px);
            transform: translateX(4px);
}

.footer-social-icons {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: var(--gap-lg);
    visibility: visible !important;
}

.footer-social-icon {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    opacity: 1;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    text-decoration: none;
    border-radius: 50%;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    overflow: hidden;
    visibility: visible !important;
}

.footer-social-icon img,
.footer-social-icon span,
.footer-social-icon > * {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    display: block !important;
}

.footer-social-icon:hover {
    opacity: 1;
}

.footer-social-telegram:hover img {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(186deg) brightness(100%) contrast(101%);
}

.footer-social-whatsapp:hover img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(95%) saturate(1200%) hue-rotate(90deg) brightness(95%) contrast(95%);
}

.footer-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-top: 32px;
    border-top: 1px solid #EBEBEB;
    gap: var(--gap-2xl);
    position: relative;
    z-index: 1;
}

.footer-copyright {
    color: rgba(0, 0, 0, 0.64);
    font-family: "Noto Sans", sans-serif;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    margin: 0;
}

.footer-bottom-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 32px;
}

.footer-bottom-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--gap-md);
}

.footer-bottom-link {
    color: rgba(0, 0, 0, 0.64);
    font-family: "Noto Sans", sans-serif;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    text-decoration: none;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}

.footer-bottom-link:hover {
    color: #FD9E10;
}

.responsive-faq {
    padding: 40px 0;
    background: #F0F0F0;
}

.info-faq {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.info-faq > h1 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 68px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}
.info-faq > h1 > span {
    color: #FD9E10;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 68px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}
.info-faq > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}

.faq {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
}

.faq-items {
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1px;
}
.faq-items > .item {
    background: #FFF;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}
.faq-items > .item.active {
    background: #FD9E10;
}

.head-faq {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    padding: 12px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative;
    user-select: none;
}
.head-faq::after {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 32px;
    height: 32px;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.head-faq > h3 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-sm);
    letter-spacing: -0.36px;
    margin: 0;
}
.head-faq > p {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 18px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: -0.36px;
}

.body-faq {
    padding: 16px 16px 12px 16px;
    margin-top: -20px;
    display: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.faq-items > .item.active .body-faq {
    display: block;
}
.marquee-section {
    padding: 64px 0;
    background: #FFF;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}
.marquee-row {
    position: relative;
    margin-top: 28px;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}
.marquee-row .marquee-mask {
    pointer-events: none;
}
.marquee-row::before,
.marquee-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 220px;
    z-index: 2;
}
.marquee-row::before {
    left: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0) 100%);
}
.marquee-row::after {
    right: 0;
    background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0) 100%);
}
.track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-lg);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    animation: scrollLeft 40s linear infinite;
    position: relative;
    z-index: 1;
    padding: 8px 0;
}
.scroll-right .track {
    animation: scrollRight 36s linear infinite;
}
.marquee-row:hover .track {
    animation-play-state: paused;
}
.marquee-chip {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 12px 20px;
	border: 1px solid #EBEBEB;
	border-radius: 999px;
	background: #FFF;
	color: #000;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.14px;
	white-space: nowrap;
}
.card.task-card {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 24px;
    width: 300px;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    -webkit-transition: transform 0.3s ease, border-color 0.3s ease;
    -o-transition: transform 0.3s ease, border-color 0.3s ease;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.card.task-card:hover {
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
    border-color: rgba(0, 0, 0, 0.1);
}
.task-icon {
    margin-bottom: 12px;
}
.task-icon img {
    width: 48px;
    height: 48px;
    -o-object-fit: contain;
       object-fit: contain;
}
.task-title {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: var(--line-height-sm);
    letter-spacing: -0.36px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.task-subtitle {
    color: rgba(0, 0, 0, 0.6);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    margin-bottom: 4px;
}
.task-solution {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
}

.growth-section {
    padding: var(--spacing-section) 0;
    background: #FFF;
}
.growth-block {
    position: relative;
    border-radius: 60px;
    background: radial-gradient(circle at 80% 0%, #10b981 0%, rgba(16, 185, 129, 0.6) 20%, #064e3b 70%, #043626 100%);
    overflow: hidden;
    padding: 80px 60px;
    color: #fff;
    -webkit-box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.25);
            box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.25);
}
.growth-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px);
    background-size: 140px 140px, 160px 160px, 180px 180px;
    opacity: 0.5;
    pointer-events: none;
}
.growth-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 48px;
    align-items: center;
}
.growth-tag {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #d1fae5;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.growth-title {
    font-family: 'FORGE SANS';
    font-size: 42px;
    line-height: 1.1;
    font-weight: var(--font-weight-normal);
    margin: 0 0 16px 0;
}
.growth-title span {
    background: linear-gradient(90deg, #d1fae5 0%, #6ee7b7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.growth-description {
    color: #e6fff4;
    font-size: var(--font-size-sm);
    line-height: 26px;
    margin: 0 0 24px 0;
    max-width: 640px;
}
.work-stages {
    padding: var(--spacing-section) 0;
    background: #fff;
    position: relative;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 0 0;
}
.work-stages::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(90, 63, 192, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(90, 63, 192, 0.04) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.work-stages-head h2,
.section-heading h2 {
    font-family: 'Jura', sans-serif;
    font-optical-sizing: auto;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 32px 0;
    max-width: 80%;
    background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 55%, #5a3fc0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.work-stages-note {
    margin: 0 0 28px 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    color: #3a3a3a;
    font-size: 15.5px;
    line-height: 1.6;
    font-weight: var(--font-weight-medium);
}
.work-stages-desc {
    margin: 0 0 18px 0;
    color: #3a3a3a;
    font-size: 15.5px;
    line-height: 1.6;
    font-weight: var(--font-weight-medium);
    max-width: 80%;
}
.tooltip-word {
    position: relative;
    font-weight: 700;
    border-bottom: 1px dashed #000;
    cursor: help;
}
.tooltip-word {
	position: relative;
	display: inline;
}

.tooltip-word::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 320px;
    background: #1a1a1a;
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    -webkit-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
    transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
    z-index: 10000;
    white-space: normal;
    text-align: left;
}

.tooltip-word:hover::after {
    opacity: 1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.work-stages-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2xl);
}
.work-card {
    background: #ffffff;
    border-radius: var(--radius-2xl);
    padding: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 14px;
    -webkit-box-shadow: 0 12px 28px rgba(26, 26, 26, 0.07);
            box-shadow: 0 12px 28px rgba(26, 26, 26, 0.07);
}
.work-card h4 {
    margin: 0;
    color: #1a1a1a;
    font-family: 'FORGE SANS', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
.work-card p {
    margin: 0;
    color: #555555;
    font-size: 15.5px;
    line-height: 1.55;
    font-weight: var(--font-weight-normal);
}
.work-card-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--gap-base);
    min-height: 60px;
}
.work-illus {
    width: 100%;
    height: 160px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.work-illus img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.avatar-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}
.avatar-dot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3e8ff, #d9d6fe);
    color: #1a1a1a;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: 'Inter', 'Manrope', sans-serif;
}
.circle-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
}
.chart-wrap {
    position: relative;
    padding: 8px 0 12px;
}
.chart-line {
    width: 100%;
    height: 120px;
}
.price-tag {
    position: absolute;
    top: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.price-tag.low {
    left: 38%;
    background: #fff;
    color: #1a1a1a;
}
.price-tag.high {
    right: 6%;
    background: #ff9800;
    color: #fff;
}
.icons-row {
    gap: 10px;
}
.icons-row.overlap {
    display: block;
}
.icon-pill {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: inline-block;
    vertical-align: middle;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-box-shadow: 0 4px 12px rgba(26, 26, 26, 0.04);
            box-shadow: 0 4px 12px rgba(26, 26, 26, 0.04);
}
.icons-row.overlap .icon-pill:not(:first-child) {
    margin-left: -12px;
}
.icon-pill img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    -o-object-fit: contain;
       object-fit: contain;
}
.bento-visual.overlap .icon-pill:not(:first-child) {
    margin-left: -12px;
}
.bento-visual.stacked {
    display: inline-flex;
    gap: var(--gap-md);
}
.bento-visual.success {
    display: inline-flex;
    gap: 10px;
}
.success-pill {
    background: #e7f8ef;
    border-color: rgba(0, 0, 0, 0.05);
    color: #168046;
}
.bento-visual.avatars .icon-pill.avatar {
    background: linear-gradient(135deg, #f3e8ff, #d9d6fe);
    color: #1a1a1a;
    font-weight: 700;
    font-family: 'Inter', 'Manrope', sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.bento-visual.avatars .icon-pill.call {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #1a1a1a;
}
.work-stages-extras {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-lg);
}
.work-extra-card {
    background: rgba(245, 243, 249, 0.8);
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    -webkit-box-shadow: 0 4px 12px rgba(26, 26, 26, 0.04);
            box-shadow: 0 4px 12px rgba(26, 26, 26, 0.04);
}
.extra-tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    background: #efe5ff;
    color: #5a3fc0;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 10px;
}
.extra-title {
    margin: 0;
    color: #1a1a1a;
    font-size: var(--font-size-sm);
    font-weight: 700;
}
.growth-bullets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}
.glass-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 15px;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: default;
}
.glass-item:hover {
    background: rgba(255, 255, 255, 0.15);
    -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
            transform: translateX(10px);
    border-color: rgba(255, 255, 255, 0.2);
}
.glass-text .glass-title {
    margin: 0;
    font-family: 'FORGE SANS';
    font-size: var(--font-size-sm);
    line-height: 22px;
    color: #fff;
}
.glass-text .glass-desc {
    margin: 4px 0 0 0;
    color: #e6fff4;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}
.growth-visual {
    position: relative;
    min-height: 340px;
    -webkit-filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
            filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
}
.growth-orb {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0) 80%);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    opacity: 0.9;
}
.growth-arrow {
    position: absolute;
    left: 35%;
    top: 20%;
    width: 8px;
    height: 180px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 999px;
    -webkit-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
            transform: rotate(-6deg);
}
.growth-arrow::after {
    content: '';
    position: absolute;
    top: -18px;
    left: -10px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 22px solid rgba(255, 255, 255, 0.85);
    -webkit-filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
            filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}
.growth-shard {
    position: absolute;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}
.shard-1 {
    width: 90px;
    height: 26px;
    top: 32%;
    right: 10%;
    -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
            transform: rotate(12deg);
}
.shard-2 {
    width: 110px;
    height: 22px;
    top: 55%;
    right: 18%;
    -webkit-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
            transform: rotate(-8deg);
}
.shard-3 {
    width: 70px;
    height: 18px;
    top: 68%;
    right: 6%;
    -webkit-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
            transform: rotate(6deg);
}
@keyframes scrollLeft {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes scrollRight {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to { -webkit-transform: translateX(0); transform: translateX(0); }
}

@-webkit-keyframes borderFlow {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes borderFlow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.body-faq > * {
    color: #FFF;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}

.blog-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.blog-image > img {
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.name-link > a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #16181D;
    font-family: 'FORGE SANS';
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 40px;
    letter-spacing: -0.64px;
}

.header-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: 32px;
}

.header-desc {
    padding: 40px 0;
    padding-top: 80px;
}

.head-info-content {
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.head-info-content > h1 {
    color: #FFF;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 64px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}
.head-info-content > h1 > span {
    color: #FD9E10;
    text-align: center;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 64px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}
.head-info-content > p {
    max-width: 604px;
    width: 100%;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}

.price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1px;
}
.price > .item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.responsive-price {
    padding: 40px 0;
    background: #F0F0F0;
}


.image-example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.image-example > img {
    aspect-ratio: 5/3.5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.examples {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 32px;
}
.examples > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    grid-gap: 12px;
}

.example-info {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}
.example-info > .name-project {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
.example-info > .name-project > h1 {
    line-height: 40px;
}
.example-info > p {
    overflow: hidden;
    color: rgba(0, 0, 0, 0.8);
    text-overflow: ellipsis;
    whitespace: nowrap;
    font-family: Noto Sans;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.responsive-examples {
    position: relative;
    z-index: 1;
    padding: 40px 0;
    padding-bottom: 80px;
}

.head-tags {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: var(--gap-md);
}
.head-tags > .item {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap;
    padding: 5px 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #FFF;
    text-align: center;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    border-radius: 100px;
    border: 1px solid #FFF;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.head-tags > .item.active {
    background: #FFF;
    color: #000;
}

.blog-items {
    max-width: 922px;
    width: 100%;
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 32px;
}
.blog-items > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}

.responsive-blog {
    padding-top: 40px;
    padding-bottom: 80px;
}

.blog-bar-image {
    height: 286px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.blog-bar-image > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.blog-bar-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}
.blog-bar-item > h1 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 24px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: -0.48px;
}

.blog-bar {
    position: sticky;
    top: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-2xl);
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.blog {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 32px 286px;
    grid-template-columns: 1fr 286px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 32px;
}

.search-a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 44px;
}

.search-fill {
    width: 100%;
    position: relative;
}
.search-fill::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.4);
}
.search-fill > input {
    padding-right: 12px;
    border: none;
    background: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    font-family: Noto Sans;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    color: rgb(0, 0, 0);
}
.search-fill > input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.search-fill > input::-moz-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.search-fill > input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.search-fill > input::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.search-fill > input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.find-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    height: 100%;
    width: 44px;
    border-radius: 100px 100px 100px 0px;
    background-color: #000;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.navigate-blog-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
    overflow: hidden;
}
.navigate-blog-items > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
    position: relative;
    overflow: hidden;
    -webkit-transform: translateX(-32px);
            transform: translateX(-32px);
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.navigate-blog-items > .item::before {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.navigate-blog-items > .item > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.navigate-blog-items > .item > span {
    color: rgba(0, 0, 0, 0.4);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}
.navigate-blog-items > .item:hover {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
.navigate-blog-items > .item:hover > p {
    color: #000;
}

.blog-info > h1 {
    color: #16181D;
    font-family: 'FORGE SANS';
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 40px;
    letter-spacing: -0.64px;
}

.responsive-example {
    padding: 40px 0px;
}

.go-back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    opacity: 0.4;
    gap: 4px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    width: 100%;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
}
.go-back:hover {
    opacity: 1;
}
.go-back::before {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    content: "";
    width: 20px;
    height: 20px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.go-back > p {
    color: #000;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
}

.complete-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-2xl);
}
.complete-info > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}
.complete-info > .item > h1 {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
}
.complete-info > .item > p {
    color: #000;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
}

.info-example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}
.info-example > h1 {
    color: #16181D;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 64px;
    letter-spacing: -1.28px;
}

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
}

.about-example > * {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.details-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}
.details-item > h3 {
    color: #000;
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}
.details-item > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}
.details-item > h1 {
    color: #16181D;
    font-family: 'FORGE SANS';
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 40px;
    letter-spacing: -0.64px;
}
.details-item > ul {
    list-style-position: inside;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.details-item > ul > li {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}
.details-item > ul > li::first-letter {
    text-transform: uppercase;
}

.ico-ex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}

.action-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
}
.action-items > .item {
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    transition: 0.2s;
    gap: 4px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0px 11px;
    height: 40px;
}
.action-items > .item:hover {
    border: var(--border-width) solid var(--color-black);
}
.action-items > .item.active {
    background: #000;
}
.action-items > .item.active > p {
    color: #FFF;
}
.action-items > .item.st-type {
    cursor: default;
    background: #F5F5F5;
    border: 1px solid #F5F5F5;
}
.action-items > .item > p {
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    color: #000;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.social-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
}
.social-items > .item {
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    width: 40px;
    height: 40px;
    padding: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.social-items > .item:hover {
    border: var(--border-width) solid var(--color-black);
}
.social-items > .item > img {
    -webkit-user-drag: none;
    width: 24px;
    height: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -o-object-fit: contain;
       object-fit: contain;
}

.action-example {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-2xl);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.content-example {
    overflow: hidden;
    border-radius: var(--radius-sm);
}
.content-example > .swiper-wrapper > .item {
    width: 100% !important;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.content-example > .swiper-wrapper > .item > img {
    -webkit-user-drag: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 16/9;
}

.gallery-example {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.example-action {
    z-index: 1;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.example-action > .item {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border-radius: 100px;
    border: 1px solid rgba(214, 214, 214, 0.84);
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.example-action > .item.example-next {
    margin-right: -16px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.example-action > .item.example-prev {
    margin-left: -16px;
}

.review-middle {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.swip-action {
    pointer-events: none;
    z-index: 2;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0px 6px;
}
.swip-action.inside > .item:first-child, .swip-action.inside > .item:last-child {
    margin: 0;
}
.swip-action > .item {
    pointer-events: all;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border-radius: 100px;
    border: 1px solid rgba(214, 214, 214, 0.84);
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.swip-action > .item:first-child {
    margin-left: -16px;
}
.swip-action > .item:last-child {
    margin-right: -16px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.responsive-similar {
    padding: 40px 0;
    padding-bottom: 80px;
}

.similar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-2xl);
}
.similar > h1 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 64px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}

.space {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.info-article {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.info-article > h1 {
    color: #16181D;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 64px;
    letter-spacing: -1.28px;
}
.info-article > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.article-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.article-image > img {
    border-radius: var(--radius-sm);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 16/9;
}

.header-head-about {
    padding: var(--spacing-section) 0;
    padding-bottom: 120px;
}

.header-about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.header-about > h1 {
    color: #FFF;
    text-align: center;
    font-family: 'FORGE SANS';
    font-size: 132px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 132px;
    letter-spacing: -2.64px;
    text-transform: uppercase;
}
.header-about > h1 > span {
    color: #FD9E10;
    font-family: 'FORGE SANS';
    font-size: 132px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 132px;
    letter-spacing: -2.64px;
    text-transform: uppercase;
}
.header-about > p {
    max-width: 816px;
    width: 100%;
    color: #FFF;
    text-align: center;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}

.head-bracket {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
}
.head-bracket.dark > p {
    color: #000;
}
.head-bracket::before, .head-bracket::after {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    position: relative;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    width: 5px;
    height: 20px;
}
.head-bracket::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.head-bracket > p {
    color: #FFF;
    text-align: center;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    text-transform: uppercase;
}

.examples-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.examples-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
}

.responsive-about {
    background: #F0F0F0;
    padding: var(--spacing-section) 0;
    position: relative;
    isolation: isolate;
}

.head-about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.head-about.light > h1 {
    color: #FFF;
}
/* Section heading colors - Optimized: head-about specific */
.head-about > h1,
.head-about > .section-title {
    color: #000;
}
.head-about > h1 > span,
.head-about > .section-title > span {
    color: #FD9E10; /* Orange color already defined in base styles above */
}
.head-about > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}
.head-about > h3 {
    color: #000;
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}

.head-about > h2 {
    font-family: var(--font-family-heading);
    font-size: 70px;
    line-height: var(--line-height-2xl);
    letter-spacing: var(--letter-spacing-base);
    font-weight: var(--font-weight-bold);
    background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 55%, #5a3fc0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
}

.info-about > * {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    letter-spacing: var(--letter-spacing-sm);
}

.responsive-cases {
    position: relative;
    z-index: 1;
    padding: var(--spacing-section) 0;
    padding-top: 0px;
    margin-top: -92px;
}

.action-about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-base);
}

.about-items {
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1px;
}
.about-items > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
    padding: 16px;
    background: #FFF;
    cursor: pointer;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.about-items > .item:hover {
    background: #000;
}
.about-items > .item:hover > p {
    color: #FFF;
}
.about-items > .item:hover > .name-project > h1 {
    color: #FFF;
}
.about-items > .item:hover > .name-project > .go-project {
    opacity: 1;
}
.about-items > .item > p {
    color: rgba(0, 0, 0, 0.8);
    font-family: Noto Sans;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    letter-spacing: var(--letter-spacing-xs);
}
.about-items > .item > .name-project > h1 {
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.about-items > .item > .name-project > .go-project {
    opacity: 0;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}

.find {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 32px;
}
.find > .item {
    width: 100%;
}

.responsive-find {
    position: relative;
    padding: var(--spacing-section) 0;
    isolation: isolate;
}

.req-fills {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
}

.req-fills {
    padding: 24px;
    background: #E1E1E1;
}

.req-fills.quiz-form {
    background: #FFF;
    border: var(--border-width) solid var(--color-gray-border);
    border-radius: var(--radius-sm);
}

.req-content {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.req-action > .button-fill {
    background: #FD9E10;
}
.req-action > .button-fill:hover {
    background: #FFC267;
}

.responsive-messenger {
    position: relative;
    padding: var(--spacing-section) 0;
    isolation: isolate;
}

.messenger-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
}
.messenger-info > h1 {
    color: #FFF;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 68px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}
.messenger-info > h1 > span {
    color: #FD9E10;
    text-align: center;
    font-family: 'FORGE SANS';
    font-size: 70px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 68px;
    letter-spacing: -1.28px;
    text-transform: uppercase;
}

.messenger-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.messenger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 32px;
}

.responsive-contact {
    position: relative;
    isolation: isolate;
    padding: var(--spacing-section) 0;
    background: #F0F0F0;
}

.image-contact {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.image-contact > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 16px;
}

.contact-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 32px;
}
.contact-content > .item {
    width: 100%;
}

.contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
}

.switch-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.switch-content > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-xs);
}

.check-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.check-content > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-xs);
}

.switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 44px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 24px;
    border-radius: var(--radius-2xl);
    border: 1px solid #DCDCDC;
    background: #F3F3F3;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}
.switch::before {
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    left: 3px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 20px;
    background: #BEBEBE;
}

.check {
    width: 24px;
    height: 24px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.default-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.default-check > input {
    display: none;
}

.default-switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.default-switch > input {
    display: none;
}
.default-switch > input:checked ~ .switch-content > .switch {
    border: 1px solid #FD9E10;
    background: #FD9E10;
}
.default-switch > input:checked ~ .switch-content > .switch::before {
    left: calc(100% - 21px);
    background: #FFF;
}

.fill-items-var {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}

.head-calc {
    padding: 16px;
    position: relative;
    background: #FFF;
}
.head-calc::before {
    position: absolute;
    content: "";
    width: 100%;
    pointer-events: none;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #F0F0F0;
}
.head-calc > h1 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 40px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 40px;
    letter-spacing: -0.8px;
    text-transform: uppercase;
}

.fills-calc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
    padding: 16px;
    background: #FFF;
}

.responsive-calculate {
    padding: var(--spacing-section) 0;
    background: #F0F0F0;
}

.calculate-req {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.calculate {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 32px 498px;
    grid-template-columns: 1fr 498px;
    grid-gap: 32px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.head-res {
    padding: 16px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 16px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    position: relative;
}
.head-res::before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    height: 1px;
    background: #F0F0F0;
}
.head-res > .item {
    width: 100%;
}
.head-res > .item:first-child {
    padding-right: 16px;
    position: relative;
}
.head-res > .item:first-child::before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: #F0F0F0;
}
.head-res > .item > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.res-price > p {
    color: #000;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}
.res-price > h1 {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.24px;
}

.calculate-res {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #FFF;
}

.body-res {
    padding: 16px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 16px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
}
.body-res > .item {
    width: 100%;
}

.items-req {
    padding-right: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
    position: relative;
}
.items-req::before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: #F0F0F0;
}
.items-req > .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}
.items-req > .item > h1 {
    color: rgba(0, 0, 0, 0.4);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}
.items-req > .item > p {
    color: #000;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}

.service-res {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}
.service-res > h1 {
    color: rgba(0, 0, 0, 0.4);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
}

.items-serv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}
.items-serv > .item > p {
    color: #000;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-sm);
}

.info-res {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}
.info-res > h1 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 24px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: -0.48px;
}
.info-res > p {
    color: rgba(0, 0, 0, 0.8);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-xs);
}

.footer-res {
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-lg);
    position: relative;
}
.footer-res::before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    height: 1px;
    background: #F0F0F0;
}

.item-nk {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
}
.item-nk::after {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.item-nk > p {
    color: #000;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
}

.link-res {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap-lg);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.responsive-modal {
    background: rgba(240, 240, 240, 0.8);
    position: fixed;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow-y: auto;
    z-index: 99;
}

.special {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-2xl);
    overflow: hidden;
}

.hide-modal {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    width: 24px;
    height: 24px;
    border-radius: 100px;
    opacity: 0.8;
    background-color: #FFF;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4L12 12' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4L4 12' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    position: absolute;
    right: 12px;
    top: 12px;
}
.hide-modal:hover {
    opacity: 1;
}

.content-modal {
    position: relative;
    max-width: 604px;
    width: 100%;
    margin: auto;
    border-radius: var(--radius-2xl);
    background: #FFF;
}
.content-modal.min {
    max-width: 400px;
}

.info-modal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}
.info-modal > h1 {
    color: #000;
    font-family: 'FORGE SANS';
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 40px;
    letter-spacing: -0.64px;
}
.info-modal > p {
    color: #000;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
}

.top-modal {
    padding: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-2xl);
}

.fills-modal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}

.bottom-modal {
    padding: 24px;
    padding-top: 0;
}
.bottom-modal > .def-button {
    max-width: 100%;
}

.image-special {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
}
.image-special > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 8/4;
}

.info-special {
    padding: 0px 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
}
.info-special > h1 {
    color: #000;
    text-align: center;
    font-family: 'FORGE SANS';
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 40px;
    letter-spacing: -0.64px;
}
.info-special > p {
    color: #000;
    text-align: center;
    font-family: Noto Sans;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
}

.header-special {
    padding: 12px 0;
    background: #95F000;
}

.special-content > p {
    color: #000;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-md);
    letter-spacing: -0.18px;
    text-transform: capitalize;
}

.example-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
}
.example-gallery > .swip-action {
    opacity: 0;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}

.examples > .item:hover > .example-gallery > .swip-action {
    opacity: 1;
}

.nav-toggle {
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    width: 24px;
    display: none;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.nav-m {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-lg);
}

/* Quiz Form Styles */
.responsive-quiz {
    position: relative;
    padding: var(--spacing-section) 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 0 0;
    overflow: hidden;
}

.responsive-quiz::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(253, 158, 16, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(253, 158, 16, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.responsive-quiz > .container {
    position: relative;
    z-index: 0;
}

.quiz {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
}

.quiz-content {
    width: 100%;
    overflow: visible;
}

.site-type-selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}

.site-type-option {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.site-type-option > input {
    display: none;
}

.site-type-card {
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--color-gray-border);
    background: #FFF;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--gap-base);
    width: 100%;
    min-height: 80px;
}

.site-type-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 40px;
    height: 40px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(253, 158, 16, 0.1);
}

.site-type-icon .def-ico {
    width: 24px;
    height: 24px;
}

.site-type-icon-img {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0.8;
}

.site-type-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.site-type-title {
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Jura', sans-serif;
    font-optical-sizing: auto;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    margin: 0;
}

.site-type-description {
    color: #6d6d6d;
    font-family: 'Tektur', sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-size: 12px;
    font-style: normal;
    font-weight: var(--font-weight-light);
    line-height: 16px;
    letter-spacing: var(--letter-spacing-normal);
}

.site-type-option:hover .site-type-card {
    border: 1px solid rgba(0, 0, 0, 0.24);
}

.site-type-option > input:checked + .site-type-card {
    border: 1px solid #FD9E10;
    background: rgba(253, 158, 16, 0.05);
}

.site-type-option > input:checked + .site-type-card .site-type-title {
    color: #FD9E10;
    font-weight: var(--font-weight-semibold);
}

.file-upload-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-base);
}

.file-upload-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-md);
}

.file-upload-label {
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
    padding: 0px 12px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--color-gray-border);
    background: #FFF;
    -webkit-transition: var(--transition-fast);
    transition: var(--transition-fast);
    cursor: pointer;
}

.file-upload-label:hover {
    border: 1px solid rgba(0, 0, 0, 0.24);
}

.file-upload-label > span {
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Tektur', sans-serif;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-sm);
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.file-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--gap-base);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: #F2F2F2;
}

.file-name {
    color: rgba(0, 0, 0, 0.8);
    font-family: Noto Sans;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs);
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-remove {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    color: rgba(0, 0, 0, 0.8);
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.file-remove:hover {
    background: rgba(0, 0, 0, 0.2);
}

.error-text {
    color: #FF0000;
    font-family: Noto Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 16px;
    margin-top: 4px;
}

/* Quiz Steps */
.quiz-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 32px;
    position: relative;
    padding: 24px 40px;
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.quiz-steps::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 40px;
    right: 40px;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    z-index: 0;
}

.quiz-step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--gap-md);
    position: relative;
    z-index: 1;
    padding: 0 12px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: rgba(0, 0, 0, 0.4);
    font-family: Noto Sans;
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.step-number .step-icon {
    width: 20px;
    height: 20px;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0.4;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
    display: block;
}

.quiz-step:not(.active):not(.completed) .step-number .step-icon {
    opacity: 0.3;
}

.quiz-step.active .step-number {
    border: 1px solid #FD9E10;
    background: #FD9E10;
    color: #000;
    -webkit-box-shadow: 0 2px 12px rgba(253, 158, 16, 0.3);
            box-shadow: 0 2px 12px rgba(253, 158, 16, 0.3);
}

.quiz-step.active .step-icon {
    opacity: 1;
    filter: brightness(0);
}

.quiz-step.completed .step-number {
    border: 1px solid #FD9E10;
    background: #FD9E10;
    color: #000;
    -webkit-box-shadow: 0 2px 12px rgba(253, 158, 16, 0.3);
            box-shadow: 0 2px 12px rgba(253, 158, 16, 0.3);
}

.quiz-step.completed .step-icon {
    opacity: 1;
    filter: brightness(0);
}

.step-label {
    color: rgba(0, 0, 0, 0.4);
    font-family: 'Tektur', sans-serif;
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    text-align: center;
    -webkit-transition: var(--transition-base);
    transition: var(--transition-base);
}

.quiz-step.active .step-label {
    color: rgba(0, 0, 0, 0.8);
    font-weight: var(--font-weight-semibold);
}

.quiz-step.completed .step-label {
    color: rgba(0, 0, 0, 0.8);
}

.quiz-step-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    overflow: visible;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--gap-2xl);
}

.quiz-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-xl);
    margin-bottom: var(--gap-xl);
}

.quiz-form-grid .quiz-form-full-width {
    grid-column: 1 / -1;
}

.quiz-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--gap-lg);
    margin-top: 8px;
}

.quiz-actions > .def-button {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

/* Responsive styles for quiz */
@media (max-width: 768px) {
    .responsive-quiz {
        padding: 40px 0;
    }

    .site-type-selector {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .site-type-card {
        width: 100%;
        padding: 12px 16px;
        min-height: 70px;
    }

    .site-type-icon {
        width: 32px;
        height: 32px;
    }

    .site-type-icon .def-ico {
        width: 20px;
        height: 20px;
    }

    .site-type-title {
        font-size: 13px;
    }

    .site-type-description {
        font-size: 11px;
    }

    .quiz-steps {
        padding: 0 20px;
    }

    .quiz-steps::before {
        left: 20px;
        right: 20px;
    }

    .step-label {
        font-size: 12px;
    }

    .quiz-actions {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
}

/* Rain background */
@-webkit-keyframes rain-line-fall {
    0% {
        -webkit-transform: translate3d(0, -160px, 0);
                transform: translate3d(0, -160px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 120vh, 0);
                transform: translate3d(0, 120vh, 0);
    }
}

@keyframes rain-line-fall {
    0% {
        -webkit-transform: translate3d(0, -160px, 0);
                transform: translate3d(0, -160px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 120vh, 0);
                transform: translate3d(0, 120vh, 0);
    }
}

.rain-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.rain-lines {
    position: absolute;
    inset: -160px 0 0 0;
}

.rain-line {
    position: absolute;
    width: 2px;
    height: 220px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    opacity: 0.45;
    -webkit-transform: translate3d(0, -160px, 0);
            transform: translate3d(0, -160px, 0);
    -webkit-animation: rain-line-fall var(--rain-duration, 2s) linear infinite;
            animation: rain-line-fall var(--rain-duration, 2s) linear infinite;
    -webkit-animation-delay: var(--rain-delay, 0s);
            animation-delay: var(--rain-delay, 0s);
    left: var(--rain-left, 0);
    will-change: transform;
}

.rain-line--1 { --rain-left: 2%; --rain-duration: 2.1s; --rain-delay: -1.8s; }
.rain-line--2 { --rain-left: 6%; --rain-duration: 1.8s; --rain-delay: -1.1s; }
.rain-line--3 { --rain-left: 10%; --rain-duration: 2.7s; --rain-delay: -2.2s; }
.rain-line--4 { --rain-left: 14%; --rain-duration: 2.0s; --rain-delay: -0.9s; }
.rain-line--5 { --rain-left: 18%; --rain-duration: 2.5s; --rain-delay: -1.6s; }
.rain-line--6 { --rain-left: 22%; --rain-duration: 1.9s; --rain-delay: -0.8s; }
.rain-line--7 { --rain-left: 26%; --rain-duration: 2.8s; --rain-delay: -2.3s; }
.rain-line--8 { --rain-left: 30%; --rain-duration: 2.2s; --rain-delay: -1.2s; }
.rain-line--9 { --rain-left: 34%; --rain-duration: 2.6s; --rain-delay: -1.9s; }
.rain-line--10 { --rain-left: 38%; --rain-duration: 1.7s; --rain-delay: -0.6s; }
.rain-line--11 { --rain-left: 42%; --rain-duration: 2.4s; --rain-delay: -1.4s; }
.rain-line--12 { --rain-left: 46%; --rain-duration: 2.9s; --rain-delay: -2.4s; }
.rain-line--13 { --rain-left: 50%; --rain-duration: 2.1s; --rain-delay: -0.7s; }
.rain-line--14 { --rain-left: 54%; --rain-duration: 2.7s; --rain-delay: -2.0s; }
.rain-line--15 { --rain-left: 58%; --rain-duration: 1.9s; --rain-delay: -0.5s; }
.rain-line--16 { --rain-left: 62%; --rain-duration: 2.5s; --rain-delay: -1.5s; }
.rain-line--17 { --rain-left: 66%; --rain-duration: 2.8s; --rain-delay: -2.1s; }
.rain-line--18 { --rain-left: 70%; --rain-duration: 2.2s; --rain-delay: -1.1s; }
.rain-line--19 { --rain-left: 74%; --rain-duration: 2.6s; --rain-delay: -1.8s; }
.rain-line--20 { --rain-left: 78%; --rain-duration: 1.8s; --rain-delay: -0.6s; }
.rain-line--21 { --rain-left: 82%; --rain-duration: 2.4s; --rain-delay: -1.3s; }
.rain-line--22 { --rain-left: 86%; --rain-duration: 2.1s; --rain-delay: -0.9s; }
.rain-line--23 { --rain-left: 90%; --rain-duration: 2.7s; --rain-delay: -2.0s; }
.rain-line--24 { --rain-left: 94%; --rain-duration: 2.0s; --rain-delay: -0.8s; }
.rain-line--25 { --rain-left: 4%; --rain-duration: 2.3s; --rain-delay: -1.7s; }
.rain-line--26 { --rain-left: 12%; --rain-duration: 2.6s; --rain-delay: -2.1s; }
.rain-line--27 { --rain-left: 21%; --rain-duration: 1.8s; --rain-delay: -0.7s; }
.rain-line--28 { --rain-left: 33%; --rain-duration: 2.5s; --rain-delay: -1.9s; }
.rain-line--29 { --rain-left: 45%; --rain-duration: 2.0s; --rain-delay: -0.9s; }
.rain-line--30 { --rain-left: 57%; --rain-duration: 2.8s; --rain-delay: -2.3s; }
.rain-line--31 { --rain-left: 69%; --rain-duration: 2.2s; --rain-delay: -1.2s; }
.rain-line--32 { --rain-left: 81%; --rain-duration: 2.6s; --rain-delay: -1.8s; }
.rain-line--33 { --rain-left: 93%; --rain-duration: 1.9s; --rain-delay: -0.6s; }
.rain-line--34 { --rain-left: 15%; --rain-duration: 2.4s; --rain-delay: -1.5s; }
.rain-line--35 { --rain-left: 48%; --rain-duration: 2.1s; --rain-delay: -1.0s; }
.rain-line--36 { --rain-left: 76%; --rain-duration: 2.7s; --rain-delay: -2.2s; }

/* Feature grid */
.feature-grid-section {
	background: #f0f0f0;
	border-radius: 40px;
	padding: 30px;
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.feature-grid-swiper {
	overflow: visible;
	width: 100%;
}

.feature-grid-swiper .swiper-wrapper {
	align-items: stretch;
}

.feature-grid-swiper .swiper-slide {
	height: auto;
}

.feature-grid-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(
			to right,
			rgba(0, 0, 0, 0.08) 1px,
			transparent 1px
		),
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.08) 1px,
			transparent 1px
		);
	background-size: 120px 120px, 120px 120px;
	opacity: 0.25;
	pointer-events: none;
	animation: feature-grid-shift 18s linear infinite;
}

@keyframes feature-grid-shift {
	0% {
		background-position: 0 0, 0 0;
	}
	100% {
		background-position: 120px 120px, 120px 120px;
	}
}

.feature-grid-card {
	position: relative;
	overflow: hidden;
	padding: 20px;
}

.feature-grid-card::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(
			circle at 25% 20%,
			rgba(255, 255, 255, 0.25) 0,
			rgba(255, 255, 255, 0.25) 1px,
			transparent 1px
		),
		radial-gradient(
			circle at 75% 60%,
			rgba(255, 255, 255, 0.2) 0,
			rgba(255, 255, 255, 0.2) 1px,
			transparent 1px
		);
	background-size: 48px 48px;
	opacity: 0.6;
}

/* Hero Soft Tech - Removed old hero-v2 styles */

/* ============================================
   Header Soft Tech Styles
   ============================================ */

.header-soft-tech {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 99999 !important;
	background: #FFFFFF;
	transition: all 0.3s ease;
	border-bottom: 1px solid transparent;
}

.header-soft-tech-scrolled {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
	border-bottom-color: #EBEBEB;
}

.header-soft-tech-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	gap: 32px;
}

.header-soft-tech-logo {
	flex-shrink: 0;
	height: 40px;
}

.header-soft-tech-logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

.header-soft-tech-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	justify-content: center;
}

.header-soft-tech-nav-item {
	padding: 8px 16px;
	border-radius: 100px;
	color: #0A1B3D;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	transition: all 0.2s ease;
	opacity: 0.8;
}

.header-soft-tech-nav-item:hover {
	opacity: 1;
	background: rgba(26, 92, 255, 0.08);
	color: #1A5CFF;
}

.header-soft-tech-nav-item.active {
	opacity: 1;
	background: rgba(253, 158, 16, 0.08);
	color: #FD9E10;
	border: 1px solid rgba(253, 158, 16, 0.2);
}

.header-soft-tech-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.header-soft-tech-cta {
	padding: 12px 24px;
	border-radius: 100px;
	background: #FD9E10;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.header-soft-tech-cta:hover {
	background: #FFB340;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(253, 158, 16, 0.3);
}

.header-soft-tech-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}

.header-soft-tech-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: #0A1B3D;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.header-soft-tech-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.header-soft-tech-toggle.active span:nth-child(2) {
	opacity: 0;
}

.header-soft-tech-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

.header-soft-tech-mobile {
	display: none;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border-top: none;
	margin-top: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin-top 0.3s ease;
}

.header-soft-tech-mobile.active {
	display: flex;
	max-height: 500px;
	padding: 16px 0;
	border-top: 1px solid #EBEBEB;
	margin-top: 16px;
	opacity: 1;
}

.header-soft-tech-mobile-item {
	padding: 12px 16px;
	color: #0A1B3D;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid #F0F0F0;
	transition: all 0.2s ease;
}

.header-soft-tech-mobile-item:hover {
	background: rgba(26, 92, 255, 0.08);
	color: #1A5CFF;
}

.header-soft-tech-mobile-item.active {
	background: rgba(253, 158, 16, 0.08);
	color: #FD9E10;
	border-left: 3px solid #FD9E10;
}

.header-soft-tech-mobile-cta {
	padding: 12px 16px;
	margin-top: 8px;
	border-radius: 100px;
	background: #FD9E10;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s ease;
}

.header-soft-tech-mobile-cta:hover {
	background: #FFB340;
}

/* ============================================
   Hero Soft Tech Styles
   ============================================ */

.hero-soft-tech {
	position: relative;
	min-height: 100vh;
	padding: 140px 0 80px;
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, #F3F5FF 100%);
}

.hero-soft-tech-mesh-bg {
	position: absolute;
	inset: 0;
	background: 
		radial-gradient(circle at top right, #E0D9FC 0%, transparent 50%),
		radial-gradient(circle at bottom left, #E0D9FC 0%, transparent 50%),
		radial-gradient(circle at top left, rgba(224, 217, 252, 0.3) 0%, transparent 40%);
	pointer-events: none;
	z-index: 0;
}

.hero-soft-tech-watermark {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	font-size: 300px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.03);
	opacity: 1;
	white-space: nowrap;
	z-index: 0;
	pointer-events: none;
	font-family: "FORGE SANS", "Noto Sans", sans-serif;
	letter-spacing: 30px;
	line-height: 1;
}

.hero-soft-tech-content {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 55% 45%;
	gap: 60px;
	align-items: center;
}

.hero-soft-tech-text {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hero-soft-tech-label {
	color: #1A5CFF;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.hero-soft-tech-title {
	color: #0A1B3D;
	font-family: "FORGE SANS", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: var(--font-size-xl) !important;
	font-weight: 700;
	line-height: var(--line-height-lg) !important;
	letter-spacing: var(--letter-spacing-xs) !important;
	margin: 0;
}

.hero-soft-tech-description {
	color: #667085;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	max-width: 540px;
}

.hero-soft-tech-actions {
	display: flex;
	gap: 16px;
	margin-top: 8px;
}

.hero-soft-tech-btn-primary {
	padding: 16px 32px;
	border-radius: 100px;
	background: #1A5CFF;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.hero-soft-tech-btn-primary:hover {
	background: #3392FF;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(26, 92, 255, 0.35);
}

.hero-soft-tech-btn-secondary {
	padding: 16px 32px;
	border-radius: 100px;
	background: transparent;
	border: 1px solid rgba(10, 27, 61, 0.2);
	color: #0A1B3D;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.hero-soft-tech-btn-secondary:hover {
	border-color: rgba(10, 27, 61, 0.4);
	background: rgba(10, 27, 61, 0.05);
}

.hero-soft-tech-robot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-soft-tech-robot-wrapper {
	position: relative;
	width: 100%;
	max-width: 500px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-soft-tech-robot-circle {
	position: absolute;
	width: 90%;
	height: 90%;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	z-index: 1;
}

.hero-soft-tech-robot-image {
	position: relative;
	z-index: 2;
	width: 80%;
	height: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-soft-tech-robot-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hero-soft-tech-floating-icon {
	position: absolute;
	z-index: 3;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	animation: float 6s ease-in-out infinite;
	pointer-events: none;
}

.hero-soft-tech-floating-icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.hero-soft-tech-floating-icon-left {
	left: -20px;
	top: 20%;
	animation-delay: 0s;
}

.hero-soft-tech-floating-icon-left img {
	filter: hue-rotate(250deg) saturate(1.2);
}

.hero-soft-tech-floating-icon-right {
	right: -20px;
	top: 60%;
	animation-delay: 2s;
}

.hero-soft-tech-floating-icon-right img {
	filter: hue-rotate(160deg) saturate(1.2);
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-15px);
	}
}

/* Page Header Section */
.page-header-section {
	position: relative;
	min-height: 60vh;
	padding: 140px 0 80px;
	overflow: hidden;
	background: #F0F0F0;
}

.page-header-section-mesh-bg {
	display: none;
}

.page-header-section-content {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 55% 45%;
	gap: 60px;
	align-items: center;
}

.page-header-section-content-no-illustration {
	grid-template-columns: 1fr;
}

.page-header-section-text {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-header-section-title {
	color: #0A1B3D;
	font-family: "FORGE SANS", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1px;
	margin: 0;
}

.page-header-section-description {
	color: #667085;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	max-width: 540px;
}

.page-header-section-illustration {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-header-section-illustration-wrapper {
	position: relative;
	width: 100%;
	max-width: 500px;
	aspect-ratio: 1.25;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-header-section-illustration-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Breadcrumbs */
.breadcrumbs {
	margin-bottom: 8px;
}

.breadcrumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.breadcrumbs-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.breadcrumbs-link {
	color: #667085;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	transition: color 0.3s ease;
}

.breadcrumbs-link:hover {
	color: #1A5CFF;
}

.breadcrumbs-current {
	color: #0A1B3D;
	font-size: 14px;
	font-weight: 600;
}

.breadcrumbs-separator {
	color: #667085;
	font-size: 14px;
	font-weight: 400;
	user-select: none;
}

/* Override all paragraph styles to use Tektur */
p:not(h1 p):not(h2 p):not(h3 p):not(h4 p):not(h5 p):not(h6 p),
.service-info > p,
.service-head > p,
.tech-info > p,
.maintenance-read > p,
.individual-info > p,
.individual-info-light > p,
.work-details > p,
.techn-head > .item > p,
.button-fill > p {
	font-family: 'Tektur', sans-serif !important;
	font-optical-sizing: auto;
	font-variation-settings: "wdth" 100;
	font-weight: 200;
	letter-spacing: 0.03rem;
	color: #6d6d6d;
}

/* Force Tektur for lists */
ul, ol, li {
	font-family: 'Tektur', sans-serif !important;
	font-optical-sizing: auto;
	font-variation-settings: "wdth" 100;
	font-weight: 200;
	letter-spacing: 0.03rem;
	color: #6d6d6d;
}

/* Force Tektur for placeholders */
input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
	font-family: 'Tektur', sans-serif !important;
	font-optical-sizing: auto;
	font-variation-settings: "wdth" 100;
	font-weight: 200;
	letter-spacing: 0.03rem;
}

/* Chat button */
.chat-button {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 1000;
	box-shadow: 0px 4px 20px -8px rgba(0, 0, 0, 0.24);
	transition: transform 0.2s, box-shadow 0.2s;
}

.chat-button:hover {
	transform: translateY(-2px);
	box-shadow: 0px 6px 24px -8px rgba(253, 158, 16, 0.4);
}

.project-action {
	margin-top: 15px;
	width: 100%;
}
.project-action .def-button {
	width: 100%;
	max-width: 100%;
}

/* Mobile override for hero title - Force override */
@media screen and (max-width: 768px) {
	section.hero-soft-tech h1.hero-soft-tech-title,
	.hero-soft-tech h1.hero-soft-tech-title,
	.hero-soft-tech .hero-soft-tech-title,
	h1.hero-soft-tech-title,
	.hero-soft-tech-title {
		font-size: var(--font-size-lg) !important;
		line-height: var(--line-height-lg) !important;
		letter-spacing: var(--letter-spacing-xs) !important;
	}
}

/* ============================================
   Project Builder Wizard Styles
   ============================================ */

/* Wizard Progress Bar */
.wizard-progress {
	margin-bottom: 32px;
}

.wizard-progress-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 8px;
}

.wizard-progress-text {
	color: rgba(0, 0, 0, 0.6);
	font-family: 'Tektur', sans-serif;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-xs);
}

.wizard-progress-bar {
	width: 100%;
	height: 4px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 2px;
	overflow: hidden;
}

.wizard-progress-fill {
	height: 100%;
	background: #FFC267;
	border-radius: 2px;
	-webkit-transition: width 0.3s ease;
	transition: width 0.3s ease;
}

/* Wizard Swiper */
.wizard-swiper {
	width: 100%;
	overflow: hidden;
	height: auto;
}

.wizard-swiper .swiper-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	overflow: hidden;
}

.wizard-swiper .swiper-slide {
	width: 100%;
	height: auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: visible;
	flex-shrink: 0;
	transition: opacity 0.3s ease;
}

/* Скрываем неактивные слайды */
.wizard-swiper .swiper-slide:not(.swiper-slide-active) {
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}

/* Активный слайд всегда виден */
.wizard-swiper .swiper-slide.swiper-slide-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.wizard-slide {
	min-height: auto;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
	overflow: visible;
}

/* Services Grid Container */
.services-grid-container {
	width: 100%;
	margin-bottom: 0;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	width: 100%;
}

@media (min-width: 640px) {
	.services-grid {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 20px;
	}
}

@media (min-width: 1024px) {
	.services-grid {
		grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
		gap: 24px;
	}
}

/* Services Swiper Container (legacy, можно удалить если не используется) */
.services-swiper-container {
	width: 100%;
	margin-bottom: 0;
	overflow: hidden;
	position: relative;
}

.services-swiper {
	width: 100%;
	padding-bottom: 48px;
	overflow: hidden;
	position: relative;
}

.services-swiper .swiper-wrapper {
	overflow: hidden;
}

.services-swiper .swiper-slide {
	overflow: visible;
	height: auto;
}

/* Navigation для services-swiper */
.services-swiper .swiper-button-next,
.services-swiper .swiper-button-prev {
	color: #0b74ff;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.services-swiper .swiper-button-next:after,
.services-swiper .swiper-button-prev:after {
	font-size: 16px;
	font-weight: bold;
}

.services-swiper .swiper-button-next:hover,
.services-swiper .swiper-button-prev:hover {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.services-swiper .swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

/* Pagination для services-swiper */
.services-swiper .swiper-pagination {
	bottom: 8px;
}

.services-swiper .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: rgba(11, 116, 255, 0.3);
	opacity: 1;
	transition: all 0.3s ease;
}

.services-swiper .swiper-pagination-bullet-active {
	background: #0b74ff;
	width: 24px;
	border-radius: 4px;
}

/* Service Card */
.service-card {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border-radius: 20px;
	border: none;
	background: #f0f0f0;
	-webkit-box-shadow: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	text-align: center;
	width: 100%;
	height: 400px;
	overflow: visible;
}

.service-card:hover {
	opacity: 0.9;
}

.service-card:active {
	-webkit-transform: scale(0.98);
	transform: scale(0.98);
}

.service-card.selected {
	background: #F0F6FF;
	border: 2px solid #FD9E10;
}

/* Иконка по центру */
.service-card-icon-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 100px;
	padding-top: 20px;
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}

.service-card-icon {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 64px;
	height: 64px;
}

.service-card-icon-img {
	width: 64px;
	height: 64px;
	-o-object-fit: contain;
	object-fit: contain;
	display: block;
}

/* Заголовок для тегов */
.service-card-tags-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
	text-align: left;
	padding: 0;
	margin-left: 8px;
	margin-right: 8px;
}

.service-card-tags-title {
	color: rgba(0, 0, 0, 0.9);
	font-family: 'Jura', sans-serif;
	font-size: 14px;
	font-weight: var(--font-weight-semibold);
	line-height: 18px;
	margin: 0;
}

.service-card-tags-subtitle {
	color: #6d6d6d;
	font-family: 'Tektur', sans-serif;
	font-size: 11px;
	font-weight: var(--font-weight-light);
	line-height: 14px;
	margin: 0;
}

/* Теги с анимацией */
.service-card-tags {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	overflow: hidden;
	margin-bottom: 12px;
	height: 88px;
	padding: 0;
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}

.service-tags-row {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 40px;
}

.service-tags-track {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	padding: 0;
}

.service-tags-row-left .service-tags-track {
	animation: scrollLeft var(--tags-left-speed, 20s) linear infinite;
}

.service-tags-row-right .service-tags-track {
	animation: scrollRight var(--tags-right-speed, 18s) linear infinite;
}

.service-tag {
	display: inline-block;
	padding: 6px 12px;
	background: #FFF;
	border-radius: 999px;
	color: #000;
	font-family: 'Tektur', sans-serif;
	font-size: 11px;
	font-weight: var(--font-weight-medium);
	line-height: 16px;
	white-space: nowrap;
	border: 1px solid #EBEBEB;
}

/* Описание карточки */
.service-card-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 8px;
	padding: 0 8px;
	margin-bottom: 12px;
	text-align: center;
	width: 100%;
	position: relative;
	overflow: visible;
	z-index: 10;
	flex: 1 1 auto;
	min-height: 0;
}

.service-card-title {
	color: rgba(0, 0, 0, 0.9);
	font-family: 'Jura', sans-serif;
	font-size: 16px;
	font-weight: var(--font-weight-semibold);
	line-height: 20px;
	letter-spacing: var(--letter-spacing-xs);
	margin: 0;
	text-align: center;
}

.service-card.selected .service-card-title {
	color: #FD9E10;
	font-weight: var(--font-weight-bold);
}

.service-card-description {
	color: #6d6d6d;
	font-family: 'Tektur', sans-serif;
	font-size: 12px;
	font-weight: var(--font-weight-light);
	line-height: 16px;
	letter-spacing: var(--letter-spacing-normal);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: visible;
	text-overflow: ellipsis;
	max-height: 64px;
	width: 100%;
	padding: 20px;
	position: relative;
	word-wrap: break-word;
	word-break: break-word;
	text-align: left;
}

/* Статус выбран/не выбран */
.service-card-status {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	padding: 8px 0;
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
}

.service-status-selected {
	color: #FD9E10;
	font-family: 'Jura', sans-serif;
	font-size: 14px;
	font-weight: var(--font-weight-semibold);
	line-height: 20px;
}

.service-status-not-selected {
	color: #6d6d6d;
	font-family: 'Jura', sans-serif;
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: 20px;
}

/* Success Slide */
.success-slide {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-height: 400px;
}

.success-content {
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 24px;
	max-width: 500px;
	margin: 0 auto;
}

.success-icon {
	width: 80px;
	height: 80px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: #F0F6FF;
	border-radius: 50%;
	padding: 16px;
}

.success-icon img {
	width: 48px;
	height: 48px;
	-o-object-fit: contain;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

.success-content h2 {
	color: rgba(0, 0, 0, 0.9);
	font-family: 'Jura', sans-serif;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-lg);
	margin: 0;
}

.success-content p {
	color: #6d6d6d;
	font-family: 'Tektur', sans-serif;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-sm);
	margin: 0;
}

/* Selected Services List */
.selected-services-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}

.selected-service-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: #F0F6FF;
	border-radius: 8px;
	border: 1px solid #1A5CFF;
}

.selected-service-icon {
	width: 24px;
	height: 24px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	flex-shrink: 0;
}

.selected-service-icon img {
	width: 24px;
	height: 24px;
	-o-object-fit: contain;
	object-fit: contain;
}

.selected-service-title {
	color: #1A5CFF;
	font-family: 'Jura', sans-serif;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-xs);
}

/* Responsive Styles for Project Builder */
@media (max-width: 768px) {
	.service-card {
		height: 350px;
		padding: 0;
	}

	.service-card-icon-wrapper {
		height: 80px;
		padding-top: 12px;
	}

	.service-card-content {
		padding: 0 4px;
		margin-bottom: 8px;
		gap: 6px;
	}

	.service-card-description {
		padding: 20px;
		max-height: 56px;
	}

	.service-card-tags {
		height: 80px;
		margin-bottom: 8px;
	}

	.service-card-status {
		padding: 6px 0;
	}

	.service-card-title {
		font-size: 14px;
		line-height: 18px;
	}

	.service-card-description {
		font-size: 11px;
		line-height: 14px;
	}

	.service-card-icon {
		width: 48px;
		height: 48px;
	}

	.service-card-icon-img {
		width: 48px;
		height: 48px;
	}

	.service-card-tags-header {
		margin-bottom: 12px;
		gap: 4px;
		padding: 0;
		margin-left: 4px;
		margin-right: 4px;
	}

	.service-card-tags-title {
		font-size: 12px;
		line-height: 16px;
	}

	.service-card-tags-subtitle {
		font-size: 10px;
		line-height: 12px;
	}

	.service-card-tags {
		bottom: 45px;
		height: 80px;
		margin-bottom: 0;
		padding: 0;
	}

	.service-tags-row {
		height: 36px;
	}

	.service-tag {
		font-size: 10px;
		padding: 4px 10px;
	}

	.service-card-title {
		font-size: 13px;
	}

	.service-card-description {
		font-size: 11px;
		line-height: 14px;
	}

	.wizard-progress {
		margin-bottom: 24px;
	}

	.wizard-slide {
		min-height: 300px;
	}

	.success-content {
		padding: 0 16px;
	}

	.success-icon {
		width: 64px;
		height: 64px;
		padding: 12px;
	}

	.success-icon img {
		width: 40px;
		height: 40px;
	}

	.success-content h2 {
		font-size: var(--font-size-base);
		line-height: var(--line-height-md);
	}
}

/* ============================================
   Content Page Styles
   ============================================ */

/* Content Hero Section */
.content-hero-section {
	position: relative;
	padding: 100px 0 60px;
	background: #F5F7FA;
	overflow: hidden;
}

.content-hero-section-grid-bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(
			to right,
			rgba(0, 0, 0, 0.03) 1px,
			transparent 1px
		),
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.03) 1px,
			transparent 1px
		);
	background-size: 40px 40px;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
}

.content-hero-section-content {
	position: relative;
	z-index: 1;
}

.content-hero-section-header {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 24px;
}

.content-hero-section-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.content-hero-section-text {
	flex: 1;
}

.content-hero-section-title {
	color: #0A1B3D;
	font-family: "FORGE SANS", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin: 0 0 16px 0;
}

.content-hero-section-description {
	color: #667085;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	max-width: 700px;
}

/* Content Section */
.content-section {
	padding: 80px 0;
	background: #FFFFFF;
}

.content-section-grid {
	display: block;
	position: relative;
}

/* Content Section Illustration */
.content-section-illustration {
	width: 100%;
	max-width: 100%;
	margin: 0 0 60px 0;
	text-align: center;
}

.content-section-illustration-image {
	width: 100%;
	height: auto;
	max-width: 800px;
	object-fit: contain;
}

/* Content Main */
.content-main {
	width: 100%;
	max-width: 100%;
	font-family: "Inter", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #1F2937;
}

.content-main h1,
.content-main h2,
.content-main h3,
.content-main h4,
.content-main h5,
.content-main h6 {
	color: #0A1B3D;
	font-family: "FORGE SANS", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 700;
	line-height: 1.3;
	margin: 10px 0;
	scroll-margin-top: 120px;
	scroll-padding-top: 120px;
}

.content-main h1:first-child,
.content-main h2:first-child,
.content-main h3:first-child,
.content-main h4:first-child,
.content-main h5:first-child,
.content-main h6:first-child {
	margin-top: 0;
}

.content-main h1 {
	font-size: 36px;
}

.content-main h2 {
	font-size: 28px;
}

.content-main h3 {
	font-size: 24px;
}

.content-main h4 {
	font-size: 20px;
}

.content-main h5 {
	font-size: 18px;
}

.content-main h6 {
	font-size: 16px;
}

.content-main p {
	margin: 0 0 24px 0;
	color: #1F2937;
	font-size: 16px;
	line-height: 1.6;
}

.content-main ul {
	margin: 0 0 24px 0;
	padding-left: 15px;
	list-style: disc;
	color: #1F2937;
}

.content-main li {
	margin: 0 0 12px 0;
	padding-left: 8px;
	line-height: 1.6;
	color: #1F2937;
}

.content-main ol {
	margin: 0 0 24px 0;
	padding-left: 15px;
	list-style: decimal;
	color: #1F2937;
}

.content-list {
	margin: 0 0 24px 0;
	padding-left: 24px;
	list-style: none;
}

.content-list-item {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
	color: #1F2937;
	line-height: 1.6;
}

.content-list-item::before {
	content: '•';
	position: absolute;
	left: 0;
	color: #1A5CFF;
	font-weight: 700;
	font-size: 20px;
}

.content-image-wrapper {
	margin: 32px 0;
	border-radius: 12px;
	overflow: hidden;
}

.content-image {
	width: 100%;
	height: auto;
	display: block;
}

/* Blockquote */
blockquote {
	background: #f7f7f7;
	border-left: 4px solid #fd9e106e;
	padding: 20px 24px;
	margin: 32px 0;
	border-radius: 0;
	color: #1F2937;
	font-size: 16px;
	line-height: 1.6;
	font-style: normal;
}


/* Content Sidebar */
.content-sidebar {
	position: relative;
	width: 320px;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	transition: all 0.3s ease;
}

.content-sidebar.content-sidebar-fixed {
	position: fixed;
	top: 120px;
	right: max(16px, calc((100vw - 1440px) / 2 + 16px));
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	z-index: 100;
}

.content-sidebar-meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.content-sidebar-meta-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #6B7280;
}

.content-sidebar-meta-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	opacity: 0.7;
}

.content-sidebar-meta-text {
	flex: 1;
}

.content-sidebar-meta-text-updated {
	color: #10B981;
	font-weight: 600;
}

.content-sidebar-divider {
	height: 1px;
	background: #E5E7EB;
	margin: 20px 0;
}

.content-sidebar-toc {
	margin-top: 0;
}

.content-sidebar-toc-title {
	color: #0A1B3D;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 16px 0;
}

.content-sidebar-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.content-sidebar-toc-item {
	margin: 0;
}

.content-sidebar-toc-item-level-1 {
	padding-left: 0;
}

.content-sidebar-toc-item-level-2 {
	padding-left: 16px;
}

.content-sidebar-toc-item-level-3 {
	padding-left: 32px;
}

.content-sidebar-toc-item-level-4 {
	padding-left: 48px;
}

.content-sidebar-toc-link {
	background: none;
	border: none;
	padding: 0;
	color: #6B7280;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: color 0.2s ease;
	text-decoration: none;
	display: block;
	width: 100%;
}

.content-sidebar-toc-link:hover {
	color: #1A5CFF;
}

.content-sidebar-toc-item.active .content-sidebar-toc-link {
	color: #1A5CFF;
	font-weight: 600;
}

.content-sidebar-download-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 16px;
	background: #1A5CFF;
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.content-sidebar-download-btn:hover {
	background: #3392FF;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(26, 92, 255, 0.3);
}

/* Reading Progress Bar */
.content-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #E5E7EB;
	z-index: 9999;
}

.content-reading-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #1A5CFF 0%, #3392FF 100%);
	transition: width 0.1s ease;
}

/* ============================================
   Sticky Scroll Section Styles
   ============================================ */

.sticky-scroll-section {
	padding: var(--spacing-section) 0;
	min-height: 100vh;
	position: relative;
	overflow: visible;
}

.sticky-scroll-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-6xl);
	align-items: start;
	position: relative;
}

/* Левая колонка - скроллируемый контент */
.sticky-scroll-left {
	position: relative;
	padding-right: var(--spacing-4xl);
}

.sticky-scroll-progress {
	position: absolute;
	left: 0;
	top: 120px;
	bottom: 0;
	width: 2px;
	z-index: 1;
}

.sticky-scroll-progress-line {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--color-gray-light);
	border-radius: 2px;
}

.sticky-scroll-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background: linear-gradient(180deg, #1A5CFF 0%, #3392FF 100%);
	border-radius: 2px;
	will-change: height;
}

.sticky-scroll-steps {
	position: relative;
	padding-left: var(--spacing-5xl);
}

.sticky-scroll-step {
	margin-bottom: var(--spacing-6xl);
	opacity: 0.3;
	position: relative;
	will-change: opacity;
}

.sticky-scroll-step:last-child {
	margin-bottom: 0;
}

.sticky-scroll-step.active {
	opacity: 1;
}

.sticky-scroll-step-number {
	font-family: 'Jura', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-gray-text);
	margin-bottom: var(--spacing-base);
	letter-spacing: 0.1em;
}

.sticky-scroll-step.active .sticky-scroll-step-number {
	color: #1A5CFF;
}

.sticky-scroll-step-content {
	position: relative;
}

.sticky-scroll-step-title {
	font-family: 'Jura', sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: #000;
	margin-bottom: var(--spacing-lg);
}

.sticky-scroll-step-description {
	font-family: 'Tektur', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-gray-text);
	font-weight: 400;
}

/* Правая колонка - sticky контейнер */
.sticky-scroll-right {
	position: sticky;
	top: 120px;
	height: fit-content;
	align-self: start;
	max-height: calc(100vh - 140px);
	overflow: visible;
	z-index: 10;
	width: 100%;
}

.sticky-scroll-frame {
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 30px 60px rgba(26, 92, 255, 0.15);
	overflow: hidden;
	position: relative;
	will-change: transform;
	width: 100%;
}

.sticky-scroll-frame-header {
	background: #F5F5F5;
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--color-gray-border);
	display: flex;
	align-items: center;
}

.sticky-scroll-frame-dots {
	display: flex;
	gap: var(--spacing-sm);
	align-items: center;
}

.sticky-scroll-frame-dots .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: block;
}

.sticky-scroll-frame-dots .dot-red {
	background: #FF5F57;
}

.sticky-scroll-frame-dots .dot-yellow {
	background: #FFBD2E;
}

.sticky-scroll-frame-dots .dot-green {
	background: #28CA42;
}

.sticky-scroll-frame-content {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	background: #FFFFFF;
}

.sticky-scroll-frame-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform, z-index;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.sticky-scroll-frame-image-active {
	opacity: 1 !important;
	transform: translateY(0) !important;
	pointer-events: auto;
	z-index: 10 !important;
}

.sticky-scroll-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
}

/* ============================================
   Bento Grid Section Styles
   ============================================ */

.bento-grid-section {
	padding: var(--spacing-section) 0;
	background: #F5F7FA;
}

.bento-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	gap: 24px;
	margin-top: 60px;
}

.bento-card {
	background: #FFFFFF;
	border-radius: 28px;
	padding: 32px;
	transition: all 0.3s ease;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.04);
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
	position: relative;
	/* Noise Texture - зернистость */
	background-image: 
		radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.03) 1px, transparent 0);
	background-size: 20px 20px;
}

/* Soft Glow - радиальный градиент в верхнем правом углу */
.bento-card::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(26, 92, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.bento-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

.bento-card:hover::before {
	opacity: 1.2;
}

.bento-card-large {
	grid-column: span 2;
}

.bento-card-small {
	grid-column: span 1;
}

.bento-card-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	z-index: 1;
}

.bento-card-content-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
}

.bento-card-text {
	flex: 1;
}

.bento-card-title {
	font-family: 'Jura', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px 0;
	color: #0A1B3D;
	z-index: 1;
	position: relative;
}

.bento-card-description {
	font-family: 'Tektur', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #6d6d6d;
	margin: 0;
	z-index: 1;
	position: relative;
}

.bento-card-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.bento-card-image {
	width: 100%;
	height: auto;
	max-width: 200px;
	object-fit: contain;
	transition: transform 0.3s ease;
}

/* Bleed Layout - изображение выходит за край */
.bento-card-image-bleed {
	width: 140%;
	height: auto;
	max-width: none;
	object-fit: contain;
	transform: translate(15%, 10%);
	transition: transform 0.3s ease;
}

.bento-card:hover .bento-card-image-bleed {
	transform: translate(12%, 8%) scale(1.05);
}

/* Карточка 1: Умный диалог */
.bento-card-dialog .bento-card-content {
	flex-direction: row;
	align-items: center;
	gap: 32px;
}

.bento-card-dialog .bento-card-text {
	flex: 1;
}

.bento-card-dialog .bento-card-visual {
	margin-top: 0;
	flex-shrink: 0;
	overflow: visible;
	position: relative;
}

.bento-card-dialog .bento-card-image {
	max-width: 280px;
	transform: translate(20%, 15%);
}

.bento-card-dialog:hover {
	background: linear-gradient(135deg, #FFF 0%, #F8F9FF 100%);
}

.bento-card-dialog:hover .bento-card-image {
	transform: translate(12%, 8%) scale(1.05);
}

/* Карточка 2: Скорость */
.bento-card-speed {
	background: #FFF;
	/* Усиленная зернистость для премиального вида */
	background-image: 
		radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0);
	background-size: 20px 20px;
}

.bento-card-speed::before {
	background: radial-gradient(circle, rgba(26, 92, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
}

.bento-card-number {
	font-family: 'Jura', sans-serif;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	color: #FD9E10;
	margin: 0 0 16px 0;
	z-index: 1;
	position: relative;
}

.bento-card-icon-wrapper {
	margin-top: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.bento-card-icon {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.bento-card-icon-pulse {
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

/* Убраны специальные hover стили - карточка ведет себя как остальные */

/* Карточка 3: Интеграции */
.bento-card-integrations {
	position: relative;
}

.bento-card-integrations-orbital {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 24px auto 0;
}

.bento-card-integrations-orbit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: orbit 20s linear infinite;
}

@keyframes orbit {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.bento-card-integrations-item {
	position: absolute;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFF;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bento-card-integrations-item img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.bento-card-integrations-item-1 {
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.bento-card-integrations-item-2 {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.bento-card-integrations-item-3 {
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.bento-card-integrations {
	background: linear-gradient(135deg, #F8F9FF 0%, #FFFFFF 100%);
}

.bento-card-integrations::before {
	background: radial-gradient(circle, rgba(26, 92, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
}

.bento-card-integrations:hover {
	background: linear-gradient(135deg, #F0F4FF 0%, #FFFFFF 100%);
}

/* Карточка 4: Аналитика */
.bento-card-analytics .bento-card-content {
	flex-direction: row;
	align-items: center;
	gap: 32px;
}

.bento-card-analytics .bento-card-text {
	flex: 1;
}

.bento-card-analytics .bento-card-visual {
	margin-top: 0;
	flex-shrink: 0;
	position: relative;
	overflow: visible;
}

.bento-card-analytics .bento-card-image {
	max-width: 280px;
	transform: translate(-15%, 10%);
}

.bento-card-analytics:hover .bento-card-image {
	transform: translate(-12%, 8%) scale(1.05);
}

.bento-card-chart {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 150px;
	height: 80px;
	opacity: 0.8;
}

.bento-card-chart-svg {
	width: 100%;
	height: 100%;
}

.bento-card-chart-line {
	stroke: #FD9E10;
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
	animation: drawLine 2s ease-in-out forwards;
}

@keyframes drawLine {
	to {
		stroke-dashoffset: 0;
	}
}

.bento-card-analytics:hover {
	background: linear-gradient(135deg, #FFF 0%, #FFF8F0 100%);
}

/* ============================================
   Features Section Styles (Techzo Grid 3-Col)
   ============================================ */

.features-section {
	padding: var(--spacing-section) 0;
	background: #F5F7FA;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 60px;
}

.feature-card {
	background: #FFFFFF;
	padding: 32px;
	border-radius: 24px;
	border: 1px solid rgba(0, 0, 0, 0.03);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	/* Noise Texture - зернистость */
	background-image: 
		radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.03) 1px, transparent 0);
	background-size: 20px 20px;
}

/* Soft Glow для feature cards */
.feature-card::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(26, 92, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.feature-card:hover::before {
	opacity: 1.2;
}

.feature-card-icon-box {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
	transition: transform 0.3s ease;
}

.feature-card:hover .feature-card-icon-box {
	transform: scale(1.05);
}

.feature-card-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.feature-card-title {
	font-family: 'Jura', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px 0;
	color: #0A1B3D;
	position: relative;
	z-index: 1;
}

.feature-card-description {
	font-family: 'Tektur', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #667085;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* ============================================
   About SEO Content Section
   ============================================ */

.about-seo-content {
	background: #F8FAFC;
	padding: var(--spacing-section) 0;
}

.about-seo-content-grid {
	display: grid;
	grid-template-columns: 40% 60%;
	gap: 48px;
	align-items: start;
}

/* Левая колонка - визуал */
.about-seo-visual {
	position: relative;
}

.about-seo-image {
	width: 100%;
	height: auto;
	border-radius: 24px;
	object-fit: cover;
}

/* Плавающий бейдж */
.about-seo-badge {
	position: absolute;
	bottom: 24px;
	left: 24px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 16px 20px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	gap: 12px;
}

.about-seo-badge-icon {
	width: 24px;
	height: 24px;
	font-size: 24px;
	line-height: 1;
}

.about-seo-badge-content {
	display: flex;
	flex-direction: column;
}

.about-seo-badge-value {
	font-size: 24px;
	font-weight: 700;
	color: #000;
	line-height: 1.2;
}

.about-seo-badge-label {
	font-size: 14px;
	color: #555;
	line-height: 1.2;
}

/* Правая колонка - текст */
.about-seo-text {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.about-seo-label {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #555;
}

.about-seo-heading {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	color: #000;
	margin: 0;
}

.about-seo-description {
	font-size: 16px;
	line-height: 1.6;
	color: #555;
	margin: 0;
}

.about-seo-description strong {
	color: #0b74ff;
	font-weight: 600;
}

/* Мини-сетка преимуществ в стиле бенто */
.about-seo-benefits-bento {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.about-seo-benefit-bento {
	background: #FFFFFF;
	border-radius: 28px;
	padding: 32px;
	transition: all 0.3s ease;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.04);
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
	position: relative;
	/* Noise Texture - зернистость */
	background-image: 
		radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.03) 1px, transparent 0);
	background-size: 20px 20px;
}

/* Soft Glow - радиальный градиент в верхнем правом углу */
.about-seo-benefit-bento::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(26, 92, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	opacity: 0;
}

.about-seo-benefit-bento:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

.about-seo-benefit-bento:hover::before {
	opacity: 1.2;
}

.about-seo-benefit-bento-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	z-index: 1;
}

.about-seo-benefit-bento-icon-wrapper {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	background: rgba(26, 92, 255, 0.08);
	border-radius: 20px;
	position: relative;
	z-index: 1;
}

.about-seo-benefit-bento-icon {
	width: 60px;
	height: 60px;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.about-seo-benefit-bento:hover .about-seo-benefit-bento-icon {
	transform: scale(1.1);
}

.about-seo-benefit-bento-title {
	font-family: 'Jura', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 12px 0;
	color: #0A1B3D;
	z-index: 1;
	position: relative;
}

.about-seo-benefit-bento-description {
	font-family: 'Tektur', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #6d6d6d;
	margin: 0;
	z-index: 1;
	position: relative;
}

/* CTA ссылка */
.about-seo-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0b74ff;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s;
}

.about-seo-cta:hover {
	opacity: 0.8;
}

/* Кнопка CTA в секции about-seo-content */
.about-seo-text .button-outline {
	background: transparent;
	align-self: center;
}