.ts-control{border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);box-shadow:none;box-sizing:border-box;flex-wrap:wrap;overflow:hidden;padding:.375rem .75rem;position:relative;width:100%;z-index:1}.ts-wrapper.multi.has-items .ts-control{padding:calc(.375rem - 1px) .75rem calc(.375rem - 4px)}.full .ts-control{background-color:var(--bs-body-bg)}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:none}.ts-control>*{display:inline-block;vertical-align:baseline}.ts-wrapper.multi .ts-control>div{background:#efefef;border:0 solid #dee2e6;color:#343a40;cursor:pointer;margin:0 3px 3px 0;padding:1px 5px}.ts-wrapper.multi .ts-control>div.active{background:#0d6efd;border:0 solid transparent;color:#fff}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{background:#fff;border:0 solid #fff;color:#878787}.ts-control>input{background:none!important;border:0!important;box-shadow:none!important;display:inline-block!important;flex:1 1 auto;line-height:inherit!important;margin:0!important;max-height:none!important;max-width:100%!important;min-height:0!important;min-width:7rem;padding:0!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:calc(.75rem + 5px);right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{background-color:var(--bs-secondary-bg);opacity:.5}.input-hidden .ts-control>input{left:-10000px;opacity:0;position:absolute}.ts-dropdown{background:var(--bs-body-bg);border:1px solid #d0d0d0;border-radius:0 0 var(--bs-border-radius) var(--bs-border-radius);border-top:0;box-shadow:0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;left:0;margin:.25rem 0 0;position:absolute;top:100%;width:100%;z-index:10}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:rgba(255,237,40,.4);border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:3px .75rem}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{background:var(--bs-body-bg);color:#6c757d;cursor:default}.ts-dropdown .active{background-color:var(--bs-tertiary-bg)}.ts-dropdown .active,.ts-dropdown .active.create{color:var(--bs-body-color)}.ts-dropdown .create{color:rgba(52,58,64,.5)}.ts-dropdown .spinner{display:inline-block;height:30px;margin:3px .75rem;width:30px}.ts-dropdown .spinner:after{animation:lds-dual-ring 1.2s linear infinite;border-color:#d0d0d0 transparent;border-radius:50%;border-style:solid;border-width:5px;content:" ";display:block;height:24px;margin:3px;width:24px}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ts-dropdown-content{max-height:200px;overflow:hidden auto;scroll-behavior:smooth}.ts-wrapper.plugin-drag_drop .ts-dragging{color:transparent!important}.ts-wrapper.plugin-drag_drop .ts-dragging>*{visibility:hidden!important}.plugin-checkbox_options:not(.rtl) .option input{margin-right:.5rem}.plugin-checkbox_options.rtl .option input{margin-left:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{background:transparent!important;cursor:pointer;margin-right:0!important;opacity:0;position:absolute;right:calc(.75rem - 5px);top:50%;transform:translateY(-50%);transition:opacity .5s}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),.75rem)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:color-mix(var(--bs-body-bg),#d0d0d0,85%);border-bottom:1px solid #d0d0d0;border-radius:var(--bs-border-radius) var(--bs-border-radius) 0 0;padding:6px .75rem;position:relative}.ts-wrapper .dropdown-header-close{color:#343a40;font-size:20px!important;line-height:20px;margin-top:-12px;opacity:.4;position:absolute;right:.75rem;top:50%}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{border:1px solid var(--bs-border-color);box-shadow:none;box-shadow:var(--bs-box-shadow-inset)}.plugin-dropdown_input .dropdown-input{background:transparent;border:solid #d0d0d0;border-width:0 0 1px;box-shadow:none;display:block;padding:.375rem .75rem;width:100%}.plugin-dropdown_input.focus .ts-dropdown .dropdown-input{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);outline:0}.plugin-dropdown_input .items-placeholder{border:0!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0;flex-basis:0;flex-grow:1;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex}.ts-wrapper.plugin-remove_button .item .remove{border-radius:0 2px 2px 0;box-sizing:border-box;color:inherit;display:inline-block;padding:0 5px;text-decoration:none;vertical-align:middle}.ts-wrapper.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;right:0;top:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item{padding-right:0!important}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #dee2e6;margin-left:5px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:transparent}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#fff}.ts-wrapper.plugin-remove_button.rtl .item{padding-left:0!important}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #dee2e6;margin-right:5px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:transparent}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#fff}:root{--ts-pr-clear-button:0;--ts-pr-caret:0;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control:not(.rtl){padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-control.rtl{padding-left:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{color:#343a40;font-family:inherit;font-size:inherit;line-height:1.5}.ts-control,.ts-wrapper.single.input-active .ts-control{background:var(--bs-body-bg);cursor:text}.ts-hidden-accessible{clip:rect(0 0 0 0)!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.ts-dropdown,.ts-dropdown.form-control,.ts-dropdown.form-select{background:var(--bs-body-bg);border:1px solid var(--bs-border-color-translucent);border-radius:.375rem;box-shadow:0 6px 12px rgba(0,0,0,.175);height:auto;padding:0;z-index:1000}.ts-dropdown .optgroup-header{font-size:.875rem;line-height:1.5}.ts-dropdown .optgroup:first-child:before{display:none}.ts-dropdown .optgroup:before{border-top:1px solid var(--bs-border-color-translucent);content:" ";display:block;height:0;margin:.5rem -.75rem;overflow:hidden}.ts-dropdown .create{padding-left:.75rem}.ts-dropdown-content{padding:5px 0}.ts-control{align-items:center;display:flex;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.ts-control{transition:none}}.focus .ts-control{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);outline:0}.ts-control .item{align-items:center;display:flex}.ts-wrapper.is-invalid,.was-validated .invalid,.was-validated :invalid+.ts-wrapper{border-color:var(--bs-form-invalid-color)}.ts-wrapper.is-invalid:not(.single),.was-validated .invalid:not(.single),.was-validated :invalid+.ts-wrapper:not(.single){background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");background-position:right calc(.375em + .1875rem) center;background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.ts-wrapper.is-invalid.single,.was-validated .invalid.single,.was-validated :invalid+.ts-wrapper.single{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");background-position:right .75rem center,center right 2.25rem;background-repeat:no-repeat;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.ts-wrapper.is-invalid.focus .ts-control,.was-validated .invalid.focus .ts-control,.was-validated :invalid+.ts-wrapper.focus .ts-control{border-color:var(--bs-form-invalid-color);box-shadow:0 0 0 .25rem rgba(var(--bs-form-invalid-color),.25)}.ts-wrapper.is-valid,.was-validated .valid,.was-validated :valid+.ts-wrapper{border-color:var(--bs-form-valid-color)}.ts-wrapper.is-valid:not(.single),.was-validated .valid:not(.single),.was-validated :valid+.ts-wrapper:not(.single){background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");background-position:right calc(.375em + .1875rem) center;background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.ts-wrapper.is-valid.single,.was-validated .valid.single,.was-validated :valid+.ts-wrapper.single{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");background-position:right .75rem center,center right 2.25rem;background-repeat:no-repeat;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.ts-wrapper.is-valid.focus .ts-control,.was-validated .valid.focus .ts-control,.was-validated :valid+.ts-wrapper.focus .ts-control{border-color:var(--bs-form-valid-color);box-shadow:0 0 0 .25rem rgba(var(--bs-form-valid-color),.25)}.ts-wrapper{display:flex;min-height:calc(1.5em + .75rem + var(--bs-border-width)*2)}.input-group-sm>.ts-wrapper,.ts-wrapper.form-control-sm,.ts-wrapper.form-select-sm{min-height:calc(1.5em + .5rem + var(--bs-border-width)*2)}.input-group-sm>.ts-wrapper .ts-control,.ts-wrapper.form-control-sm .ts-control,.ts-wrapper.form-select-sm .ts-control{border-radius:var(--bs-border-radius-sm);font-size:.875rem}.input-group-sm>.ts-wrapper.has-items .ts-control,.ts-wrapper.form-control-sm.has-items .ts-control,.ts-wrapper.form-select-sm.has-items .ts-control{font-size:.875rem;padding-bottom:0}.input-group-sm>.ts-wrapper.multi.has-items .ts-control,.ts-wrapper.form-control-sm.multi.has-items .ts-control,.ts-wrapper.form-select-sm.multi.has-items .ts-control{padding-top:calc(.75em - .40625rem + var(--bs-border-width)*2/2 - (var(--bs-border-width) + 1px)*2/2)!important}.ts-wrapper.multi.has-items .ts-control{--ts-pr-min:calc(0.75rem - 5px);padding-left:calc(.75rem - 5px)}.ts-wrapper.multi .ts-control>div{border-radius:calc(var(--bs-border-radius) - 1px)}.input-group-lg>.ts-wrapper,.ts-wrapper.form-control-lg,.ts-wrapper.form-select-lg{min-height:calc(1.5em + 1rem + var(--bs-border-width)*2)}.input-group-lg>.ts-wrapper .ts-control,.ts-wrapper.form-control-lg .ts-control,.ts-wrapper.form-select-lg .ts-control{border-radius:var(--bs-border-radius-lg);font-size:1.25rem}.ts-wrapper:not(.form-control,.form-select){background:none;border:none;box-shadow:none;height:auto;padding:0}.ts-wrapper:not(.form-control,.form-select).single .ts-control{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:16px 12px}.ts-wrapper.form-select,.ts-wrapper.single{--ts-pr-caret:2.25rem}.ts-wrapper.form-control,.ts-wrapper.form-select{box-shadow:none;display:flex;height:auto;padding:0!important}.ts-wrapper.form-control .ts-control,.ts-wrapper.form-control.single.input-active .ts-control,.ts-wrapper.form-select .ts-control,.ts-wrapper.form-select.single.input-active .ts-control{border:none!important}.ts-wrapper.form-control:not(.disabled) .ts-control,.ts-wrapper.form-control:not(.disabled).single.input-active .ts-control,.ts-wrapper.form-select:not(.disabled) .ts-control,.ts-wrapper.form-select:not(.disabled).single.input-active .ts-control{background:transparent!important}.input-group>.ts-wrapper{flex-grow:1;width:1%}.input-group>.ts-wrapper:not(:nth-child(2))>.ts-control{border-bottom-left-radius:0;border-top-left-radius:0}.input-group>.ts-wrapper:not(:last-child)>.ts-control{border-bottom-right-radius:0;border-top-right-radius:0}:root {
--purple: #8b39b7;
--purple-dark: #6a2390;
--purple-light: #a855d6;
--purple-pale: #d4a5f0;
--orange: #ff7a00;
--orange-light: #ff9d40;
--bg-1: #241842;
--bg-2: #2b1e4c;
--bg-3: #33255a;
--bg-4: #1d1335;
--bg-card: rgba(255, 255, 255, 0.07);
--bg-card-hover: rgba(255, 255, 255, 0.13);
--white: #f5f0ff;
--gray-100: #eee4fa;
--gray-200: #d9c9ef;
--gray-300: #b8a5d5;
--gray-400: #9382b4;
--gradient-main: linear-gradient(135deg, #8b39b7, #ff7a00);
--gradient-subtle: linear-gradient(135deg, rgba(139, 57, 183, 0.2), rgba(255, 122, 0, 0.12));
--shadow-purple: 0 10px 36px rgba(139, 57, 183, 0.28);
} * {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
font-family: "Inter", sans-serif;
background: var(--bg-1);
color: var(--white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased
} .navbar-pz {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
padding: 14px 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--purple);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}
.navbar-pz.scrolled {
background: #fff;
backdrop-filter: blur(20px);
padding: 8px 0;
border-bottom: 1px solid rgba(84, 58, 122, 0.18);
box-shadow: 0 8px 24px rgba(30, 20, 55, 0.12)
} .logo-wrap {
text-decoration: none;
display: flex;
align-items: center;
transition: all 0.4s
}
.logo-stacked {
display: flex;
flex-direction: column;
line-height: 1;
transition: all 0.4s
}
.logo-stacked .logo-top {
font-size: 20px;
font-weight: 900;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.4s
}
.logo-stacked .logo-bot {
font-size: 20px;
font-weight: 900;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.4s
}
.logo-stacked .logo-dot {
color: #7a35a8;
font-size: 24px;
line-height: 0
}
.logo-inline {
display: none;
font-size: 20px;
font-weight: 900;
color: #fff;
letter-spacing: -0.5px;
white-space: nowrap;
transition: all 0.4s
}
.logo-inline .logo-dot {
color: #7a35a8;
font-size: 24px;
line-height: 0
}
.navbar-pz.scrolled .logo-stacked {
display: none
}
.navbar-pz.scrolled .logo-inline {
display: flex;
align-items: center
}
.navbar-pz.scrolled .logo-inline {
color: #2d224a
}
.navbar-pz.scrolled .nav-links>li>a {
color: #5a4978
}
.navbar-pz.scrolled .nav-links>li>a:hover {
color: #2d224a
}
.navbar-pz.scrolled .lang-sw {
color: #6f6190
}
.navbar-pz.scrolled .lang-sw:hover,
.navbar-pz.scrolled .lang-sw.active {
color: #2d224a
}
.navbar-pz.scrolled .nav-toggle {
color: #2d224a
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
margin: 0;
padding: 0
}
.nav-links>li>a {
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 800;
transition: color 0.3s;
position: relative
}
.nav-links>li>a:hover {
color: var(--white)
}
.nav-links>li>a::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-main);
transition: width 0.3s
}
.nav-links>li>a:hover::after {
width: 100%
}
.nav-links .has-menu {
position: relative
}
.nav-links .has-menu>a {
display: inline-flex;
align-items: center;
gap: 7px
}
.nav-links .has-menu>a .nav-caret {
font-size: 11px;
line-height: 1;
color: #fff;
transform: translateY(1px);
transition: transform 0.2s ease, color 0.2s ease;
}
.nav-links .dropdown-menu {
margin-top: 0;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--purple);
backdrop-filter: blur(16px);
padding: 8px;
min-width: 220px
}
.nav-links .dropdown-menu.growth-menu {
min-width: 460px;
padding: 10px;
}
.growth-menu-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.nav-links .dropdown-item {
color: #fff;
border-radius: 8px;
padding: 9px 11px;
font-size: 13px;
font-weight: 500;
transition: all 0.24s;
font-weight: 700;
}
.nav-links .dropdown-menu.growth-menu .dropdown-item {
font-size: 12px;
line-height: 1.35;
white-space: normal;
padding: 8px 10px;
}
.nav-links .dropdown-item:hover {
background: rgb(153 153 153 / 45%);
}
.nav-links>li>a.active::after {
width: 100%;
}
.nav-links .dropdown-item:active {
background: rgba(139, 57, 183, 0.34)
}
.nav-right {
display: flex;
align-items: center;
gap: 16px
}
.lang-switch {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.lang-switch__link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-radius: 999px;
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
transition: all 0.22s ease;
}
.lang-switch__flag {
font-size: 14px;
line-height: 1;
}
.lang-switch__link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.lang-switch__link.is-active {
color: #2f2150;
background: linear-gradient(135deg, #fff8ef 0%, #ffd9b5 100%);
box-shadow: 0 10px 18px rgba(15, 10, 32, 0.18);
}
.lang-sw {
color: var(--gray-400);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: color 0.3s
}
.lang-sw:hover,
.lang-sw.active {
color: var(--white)
}
.btn-cta-nav {
background: var(--gradient-main);
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
white-space: nowrap;
border: 1px solid #fff;
}
.btn-cta-nav:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-purple);
color: #fff
}
.nav-toggle {
display: none;
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer
}
.mobile-nav-canvas {
width: 100vw !important;
max-width: 100vw !important;
z-index: 10050 !important;
border-left: 0;
background: linear-gradient(180deg, #ffffff 0%, #f7f2ff 100%);
color: #2d224a;
}
.offcanvas-backdrop.show {
z-index: 10040 !important;
background: rgba(17, 10, 32, 0.52);
backdrop-filter: blur(4px);
}
.mobile-nav-canvas__bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at top right, rgba(255, 122, 0, 0.12), transparent 30%),
radial-gradient(circle at left center, rgba(139, 57, 183, 0.1), transparent 38%);
pointer-events: none;
}
.mobile-nav-canvas__header,
.mobile-nav-canvas__body {
position: relative;
z-index: 1;
}
.mobile-nav-canvas__header {
padding: 16px 20px 10px;
border-bottom: 1px solid rgba(84, 58, 122, 0.1);
}
.mobile-nav-brand img {
max-width: 108px;
}
.mobile-nav-canvas__close {
filter: none;
opacity: 0.92;
}
.mobile-nav-canvas__body {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 20px 20px;
}
.mobile-nav-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-nav-item {
border-radius: 16px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(84, 58, 122, 0.08);
box-shadow: 0 8px 20px rgba(48, 31, 84, 0.06);
overflow: hidden;
}
.mobile-nav-item__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 5px;
}
.mobile-nav-item__link {
flex: 1 1 auto;
display: flex;
align-items: center;
min-height: 42px;
padding: 0 10px;
color: #2d224a;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.mobile-nav-item__toggle {
width: 42px;
height: 42px;
flex: 0 0 42px;
border: 0;
border-radius: 12px;
background: rgba(103, 74, 149, 0.08);
color: #5a3f88;
font-size: 14px;
}
.mobile-nav-item__toggle i {
transition: transform 0.22s ease;
}
.mobile-nav-item__toggle:not(.collapsed) i {
transform: rotate(45deg);
}
.mobile-nav-item__collapse {
border-top: 1px solid rgba(84, 58, 122, 0.08);
}
.mobile-nav-submenu {
display: flex;
flex-direction: column;
padding: 8px 8px 10px;
}
.mobile-nav-submenu__link {
padding: 9px 10px;
border-radius: 10px;
color: #6a5a8c;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.mobile-nav-submenu__link:hover,
.mobile-nav-item__link:hover {
color: #2d224a;
}
.mobile-nav-actions .btn-cta-nav {
width: 100%;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
}
.mobile-nav-meta {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 6px;
}
.mobile-nav-meta__mail {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(103, 74, 149, 0.06);
border: 1px solid rgba(103, 74, 149, 0.08);
color: #4a3a6c;
text-decoration: none;
font-size: 13px;
font-weight: 700;
}
.mobile-nav-meta__socials {
display: flex;
gap: 10px;
}
.mobile-nav-meta__socials a {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(103, 74, 149, 0.06);
border: 1px solid rgba(103, 74, 149, 0.08);
color: #5f507f;
text-decoration: none;
}
.navbar-pz.scrolled .nav-links .has-menu>a .nav-caret {
color: #7b699f
}
.navbar-pz.scrolled .nav-links .dropdown-menu {
background: rgba(246, 241, 255, 0.98);
border-color: rgba(84, 58, 122, 0.2)
}
.navbar-pz.scrolled .nav-links .dropdown-item {
color: #4f3f6d
}
.navbar-pz.scrolled .lang-switch {
background: rgba(83, 59, 119, 0.08);
border-color: rgba(83, 59, 119, 0.16);
}
.navbar-pz.scrolled .lang-switch__link {
color: #6f5f91;
}
.navbar-pz.scrolled .lang-switch__link:hover {
color: #382756;
background: rgba(83, 59, 119, 0.08);
}
.navbar-pz.scrolled .lang-switch__link.is-active {
color: #fff;
background: linear-gradient(135deg, #8b39b7 0%, #ff7a00 100%);
}
.navbar-pz.scrolled .nav-links .dropdown-item:hover {
color: #2d224a;
background: rgba(139, 57, 183, 0.14)
}
@media(min-width:992px) {
.nav-links .has-menu {
padding-bottom: 14px;
margin-bottom: -14px
}
.nav-links .has-menu>.dropdown-menu {
position: absolute;
top: calc(100% - 2px);
left: 0;
display: block;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
.nav-links .has-menu:hover>a .nav-caret {
transform: translateY(1px) rotate(180deg);
color: var(--orange)
}
.nav-links .has-menu:hover>.dropdown-menu,
.nav-links .has-menu:focus-within>.dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
} .hero {
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(160deg, #2a1e4b 0%, #3a2a66 40%, #302151 100%);
position: relative;
overflow: hidden;
padding-top: 100px;
padding-bottom: 40px
}
.hero-inner {
position: relative;
z-index: 2
}
.hero-row {
min-height: calc(100vh - 140px)
}
.hero-copy {
position: relative;
z-index: 2
}
.hero-diagram-col {
display: flex;
align-items: center;
justify-content: flex-end
}
.hero-grid-bg {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(139, 57, 183, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 57, 183, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
mask-image: radial-gradient(ellipse at 60% 50%, black 30%, transparent 70%)
}
.hero-glow-1 {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: var(--purple);
filter: blur(150px);
opacity: 0.08;
top: -80px;
right: 10%;
pointer-events: none
}
.hero-glow-2 {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: var(--orange);
filter: blur(130px);
opacity: 0.05;
bottom: 10%;
left: 10%;
pointer-events: none
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 100px;
background: #fff;
border: 1px solid rgba(139, 57, 183, 0.25);
font-size: 13px;
font-weight: 700;
color: var(--purple);
margin-bottom: 24px
}
.pulse {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--orange);
animation: pulse 2s infinite
}
@keyframes pulse {
0%,
100% {
opacity: 1
}
50% {
opacity: 0.3
}
}
.hero-title {
font-size: clamp(2rem, 4.2vw, 3.4rem);
font-weight: 800;
line-height: 1.12;
margin-bottom: 22px;
letter-spacing: -0.02em;
color: #fff
}
.hero-equation {
display: none
}
.hero-eq-diagram {
position: relative;
z-index: 3;
width: min(560px, 100%);
height: 340px;
padding: 20px 20px 16px;
margin-left: auto;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(135deg, rgba(37, 25, 66, 0.72), rgba(61, 41, 102, 0.45));
backdrop-filter: blur(8px);
box-shadow: 0 20px 50px rgba(19, 10, 37, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.eq-head {
text-align: center;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.3px;
margin-bottom: 8px;
color: #fff;
text-shadow: 0 0 24px rgba(139, 57, 183, 0.4)
}
.eq-head .op {
color: #fff;
margin: 0 8px
}
.eq-sub {
text-align: center;
font-size: 11px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--gray-300);
margin-bottom: 8px
}
.eq-stage {
position: relative;
height: 252px
}
.eq-flow {
position: absolute;
inset: 0;
width: 100%;
height: 100%
}
.eq-path-main {
fill: none;
stroke: url(#eqLineGrad);
stroke-width: 2.2;
opacity: 0.9;
stroke-linecap: round
}
.eq-path-soft {
fill: none;
stroke: rgba(194, 156, 236, 0.25);
stroke-width: 1.2
}
.eq-path-target {
fill: none;
stroke: url(#eqRingGrad);
stroke-width: 2;
opacity: 0.7
}
.eq-node {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px 9px 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgb(39 25 70);
box-shadow: 0 8px 24px rgba(14, 7, 27, 0.35)
}
.eq-node i {
width: 30px;
height: 30px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #fff
}
.eq-node .k {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
color: var(--gray-400);
text-transform: uppercase
}
.eq-node .v {
display: block;
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 1.15
}
.eq-node.hi {
left: 10px;
top: 34px
}
.eq-node.hi i {
background: rgba(168, 85, 214, 0.42)
}
.eq-node.ai {
left: 10px;
bottom: 32px
}
.eq-node.ai i {
background: rgba(255, 122, 0, 0.4)
}
.eq-node.growth {
right: 8px;
top: 50%;
transform: translateY(-50%);
border-color: rgba(255, 122, 0, 0.38);
background: linear-gradient(135deg, rgba(56, 36, 96, 1), rgba(96, 46, 29, 1));
animation: nodePulse 2.8s ease-in-out infinite
}
.eq-node.growth i {
background: var(--gradient-main)
}
.eq-spark {
fill: #ffbe7a;
filter: drop-shadow(0 0 6px rgba(255, 158, 64, 0.95))
}
.eq-spark.alt {
fill: #cda5ff;
filter: drop-shadow(0 0 7px rgba(193, 139, 255, 0.85))
}
.eq-target-dot {
position: absolute;
right: 132px;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffd3a4;
transform: translateY(-50%);
box-shadow: 0 0 18px rgba(255, 161, 78, 0.85)
}
@keyframes nodePulse {
0%,
100% {
box-shadow: 0 10px 28px rgba(14, 7, 27, 0.36)
}
50% {
box-shadow: 0 16px 38px rgba(255, 122, 0, 0.22)
}
}
.hero-buttons {
display: flex;
gap: 14px;
flex-wrap: wrap
}
.btn-hero-1 {
background: var(--gradient-main);
color: #fff;
border: none;
padding: 16px 32px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px
}
.btn-hero-1:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-purple);
color: #fff
}
.btn-hero-2 {
background: rgba(255, 255, 255, 0.05);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 16px 32px;
border-radius: 12px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px
}
.btn-hero-2:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff
} .hero-canvas-wrap {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1
}
#heroCanvas {
width: 100%;
height: 100%;
display: block
} .sec-pad {
padding: 110px 0
}
.sec-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--purple-light);
margin-bottom: 14px
}
.sec-label .line {
width: 28px;
height: 2px; background: var(--purple);
}
.sec-title {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 800;
margin-bottom: 16px;
letter-spacing: -0.02em;
line-height: 1.2;
color: #2f2350;
}
.sub-title {
font-size: 32px;
font-weight: bold;
color:#2f2350;
}
.sec-sub {
font-size: 17px;
color: #7a35a8;
line-height: 1.7
} .accent-text {
color: var(--purple-light)
}
.accent-orange {
color: var(--orange)
}
.rv {
opacity: 0;
transform: translateY(50px);
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1)
}
.rv.active {
opacity: 1;
transform: translateY(0)
}
.rv-d1 {
transition-delay: .1s
}
.rv-d2 {
transition-delay: .2s
}
.rv-d3 {
transition-delay: .3s
}
.rv-d4 {
transition-delay: .4s
} .reality {
background: var(--bg-2)
}
.r-card {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 34px 26px;
transition: all 0.4s;
height: 100%;
position: relative;
overflow: hidden
}
.r-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-main);
opacity: 0;
transition: opacity 0.4s
}
.r-card:hover {
background: var(--bg-card-hover);
border-color: rgba(139, 57, 183, 0.2);
transform: translateY(-8px)
}
.r-card:hover::before {
opacity: 1
}
.r-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: rgba(139, 57, 183, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--purple-light);
margin-bottom: 18px
}
.r-card h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px
}
.r-card p {
font-size: 14px;
color: var(--gray-300);
line-height: 1.7;
margin: 0
}
.quote-box {
margin-top: 48px;
padding: 24px 32px;
background: linear-gradient(160deg, #ffffff 0%, #efe2ff 100%);
border: 1px solid rgba(116, 84, 160, 0.32);
box-shadow: 0 8px 16px rgba(72, 42, 116, 0.14);
border-left: 3px solid var(--purple);
border-radius: 0 14px 14px 0;
font-size: 17px;
font-weight: 500;
color: #fff;
font-style: italic;
background: var(--purple);
box-shadow: 0 8px 18px rgba(60, 34, 102, 0.06);
}
.quote-box--flat {
border-left: none;
border-bottom: 3px solid var(--purple);
border-radius: 12px 12px 0 0;
} .comparison {
background: linear-gradient(170deg, var(--bg-3) 0%, var(--bg-1) 100%)
}
.comp-grid {
display: grid;
grid-template-columns: 1fr 120px 1fr;
gap: 0;
align-items: stretch;
max-width: 950px;
margin: 0 auto
}
.comp-col {
display: flex;
flex-direction: column;
gap: 12px
}
.comp-col-header {
padding: 20px;
text-align: center;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
border-radius: 12px
}
.comp-col-header.old-h {
color: #fff;
background: rgba(139, 57, 183, 0.06);
border: 1px solid rgba(255, 255, 255, 0.04)
}
.comp-col-header.new-h {
color: #7a35a8;
background: rgba(255, 122, 0, 0.06);
border: 1px solid rgba(255, 122, 0, 0.12)
}
.comp-item {
padding: 5px 22px;
border-radius: 12px;
font-size: 14px;
line-height: 1.5;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s
}
.comp-item.old {
background: rgba(139, 57, 183, 0.06);
border: 1px solid rgba(255, 255, 255, 0.04)
}
.comp-item.old:hover {
background: rgba(255, 255, 255, 0.04)
}
.comp-item.old .ic {
color: rgba(239, 68, 68, 0.6);
font-size: 26px;
flex-shrink: 0
}
.comp-item.new:hover {
background: var(--purple);
border-color: rgba(139, 57, 183, 0.25)
}
.comp-item.new .ic {
color: #fff;
font-size: 26px;
flex-shrink: 0
}
.comp-vs-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
margin: auto;
}
.comp-vs {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
color: var(--gray-400);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06)
}
.comp-vs-line {
width: 1px;
flex: 1;
background: rgba(255, 255, 255, 0.04)
}
.comp-quote {
text-align: center;
margin-top: 48px;
font-size: 22px;
font-weight: 700;
color: var(--gray-200)
}
.comp-quote em {
color: #7a35a8;
font-style: normal
} .growth-arch {
background: var(--bg-2)
}
.ga-shell {
position: relative;
display: grid;
gap: 14px;
padding: 18px;
border-radius: 16px;
}
.ga-track {
position: absolute;
top: 28px;
bottom: 28px;
left: 51px;
width: 3px;
border-radius: 999px;
background: linear-gradient(to bottom, rgba(255, 142, 38, 0.95), rgba(168, 85, 214, 0.7));
box-shadow: 0 0 18px rgba(255, 122, 0, 0.3)
}
.ga-layer {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 66px 1.1fr 1.25fr;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 14px;
background: linear-gradient(135deg, rgb(81 16 115), rgb(141 44 192));
box-shadow: 0 10px 24px rgba(10, 8, 22, 0.28);
transition: .9s all;
}
.ga-layer:hover {
transform: translateY(-2px);
border-color: rgba(255, 122, 0, 0.6);
background: linear-gradient(135deg, rgb(139 57 183), rgb(255 122 0 / 89%));
}
.ga-n {
width: 38px;
height: 38px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 800;
color: #ffe5d1;
background: var(--orange);
}
.ga-c h3 {
margin: 0 0 4px;
font-size: 16px;
font-weight: 700;
color: #ffffff
}
.ga-c p {
margin: 0;
font-size: 12px;
color: #d5c7ee
}
.ga-d {
font-size: 13px;
line-height: 1.55;
color: #f0e9ff;
font-weight: 700;
}
@media(max-width: 991px) {
.ga-layer {
grid-template-columns: 56px 1fr;
gap: 10px;
}
.ga-d {
grid-column: 1 / -1;
padding-left: 56px;
}
}
@media(max-width: 575px) {
.ga-shell {
padding: 14px;
gap: 10px;
}
.ga-track {
left: 41px;
}
.ga-layer {
grid-template-columns: 46px 1fr;
padding: 12px;
}
.ga-n {
width: 30px;
height: 30px;
font-size: 11px;
}
.ga-c h3 {
font-size: 14px;
}
.ga-c p,
.ga-d {
font-size: 12px;
}
.ga-d {
padding-left: 56px;
}
} .systems {
background: var(--bg-4)
}
#sysGrid,
.sys-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px
}
.work-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sys-card {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 30px 22px;
text-align: center;
transition: all 0.4s;
cursor: pointer;
height: 100%;
position: relative;
overflow: hidden
}
.sys-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
background: radial-gradient(circle at 50% 0%, rgba(139, 57, 183, 0.1), transparent 60%);
opacity: 0;
transition: opacity 0.4s
}
.sys-card:hover {
border-color: rgba(139, 57, 183, 0.3);
transform: translateY(-6px);
background: var(--bg-card-hover)
}
.sys-card:hover::after {
opacity: 1
}
.sys-icon {
width: 54px;
height: 54px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--purple-light);
margin: 0 auto 14px;
position: relative;
z-index: 1
}
.sys-card:hover .sys-icon {
color: #fff
}
.sys-card h4 {
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
position: relative;
z-index: 1
}
.sys-card p {
font-size: 12px;
color: var(--gray-400);
line-height: 1.5;
margin: 0 0 14px;
position: relative;
z-index: 1
}
.sys-icon img {
width: 60px;
height: 60px;
display: block;
flex-shrink: 0;
}
.sys-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid transparent;
background: rgba(255, 122, 0, 0.09);
color: #fff5ea;
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
text-decoration: none;
transition: all .25s ease;
position: relative;
z-index: 1;
width: auto;
}
.sys-cta:hover {
color: #ffffff
}
.sys-cta--orange {
background: var(--orange);
}
.sys-cta--orange:hover {
background: var(--orange-light);
}
.sys-cta--purple {
background: var(--purple);
}
.sys-cta--purple:hover {
background: var(--purple-light);
}
.sys-cta--gradient {
background: linear-gradient(135deg, #8b39b7, #ff7a00);
border-color: rgba(206, 159, 255, 0.46);
box-shadow: 0 8px 16px rgba(139, 57, 183, 0.28);
}
.sys-cta--gradient:hover {
background: linear-gradient(135deg, #9b4cc9, #ff9228);
box-shadow: 0 10px 18px rgba(139, 57, 183, 0.36);
}
.sys-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;;
}
.pn-glyph {
position: relative;
width: 24px;
height: 24px;
display: inline-block
}
.pn-glyph span {
position: absolute;
border-radius: 999px;
background: currentColor
}
.pn-glyph--pulse {color:#ffb574}
.pn-glyph--search {color:#d2b0ff}
.pn-glyph--creative {color:#ffc190}
.pn-glyph--funnel {color:#c7d6ff}
.pn-glyph--infra {color:#ffd08f}
.pn-glyph--social {color:#c4a0ff}
.pn-glyph--crm {color:#ffbe84}
.pn-glyph--commerce {color:#bdd0ff}
.pn-glyph--local {color:#ffc68a}
.pn-glyph--intel {color:#d0b7ff}
.pn-glyph .g-a {left:1px;top:8px;width:6px;height:6px}
.pn-glyph .g-b {left:9px;top:4px;width:6px;height:6px}
.pn-glyph .g-c {left:17px;top:11px;width:6px;height:6px}
.pn-glyph::after {
content: "";
position: absolute;
left: 3px;
right: 3px;
top: 10px;
height: 1px;
opacity: .55;
background: currentColor
}
.pn-glyph--search .g-a {left:6px;top:6px;width:10px;height:10px;border:2px solid currentColor;background:transparent}
.pn-glyph--search .g-b {left:14px;top:14px;width:8px;height:2px;transform:rotate(45deg)}
.pn-glyph--search .g-c {display:none}
.pn-glyph--search::after {display:none}
.pn-glyph--creative .g-a {left:3px;top:12px;width:18px;height:2px;border-radius:2px}
.pn-glyph--creative .g-b {left:10px;top:4px;width:4px;height:16px;border-radius:2px}
.pn-glyph--creative .g-c {left:8px;top:8px;width:8px;height:8px;background:transparent;border:2px solid currentColor}
.pn-glyph--creative::after {display:none}
.pn-glyph--funnel .g-a {left:2px;top:4px;width:20px;height:2px}
.pn-glyph--funnel .g-b {left:7px;top:10px;width:10px;height:2px}
.pn-glyph--funnel .g-c {left:10px;top:16px;width:4px;height:6px;border-radius:3px}
.pn-glyph--funnel::after {display:none}
.pn-glyph--infra .g-a {left:3px;top:4px;width:18px;height:14px;background:transparent;border:2px solid currentColor}
.pn-glyph--infra .g-b {left:6px;top:8px;width:12px;height:2px}
.pn-glyph--infra .g-c {left:6px;top:13px;width:8px;height:2px}
.pn-glyph--infra::after {display:none}
.pn-glyph--social .g-a {left:2px;top:8px;width:6px;height:6px}
.pn-glyph--social .g-b {left:16px;top:5px;width:6px;height:6px}
.pn-glyph--social .g-c {left:10px;top:15px;width:6px;height:6px}
.pn-glyph--social::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(35deg, transparent 42%, currentColor 42%, currentColor 48%, transparent 48%),
linear-gradient(154deg, transparent 48%, currentColor 48%, currentColor 54%, transparent 54%);
opacity: .45
}
.pn-glyph--crm .g-a {left:2px;top:6px;width:8px;height:8px}
.pn-glyph--crm .g-b {left:14px;top:6px;width:8px;height:8px}
.pn-glyph--crm .g-c {left:8px;top:15px;width:8px;height:8px}
.pn-glyph--crm::after {display:none}
.pn-glyph--commerce .g-a {left:2px;top:8px;width:18px;height:2px}
.pn-glyph--commerce .g-b {left:4px;top:11px;width:14px;height:8px;background:transparent;border:2px solid currentColor}
.pn-glyph--commerce .g-c {left:8px;top:4px;width:6px;height:2px}
.pn-glyph--commerce::after {display:none}
.pn-glyph--local .g-a {left:8px;top:3px;width:8px;height:8px}
.pn-glyph--local .g-b {left:11px;top:10px;width:2px;height:11px;border-radius:2px}
.pn-glyph--local .g-c {left:7px;top:17px;width:10px;height:4px;border-radius:5px}
.pn-glyph--local::after {display:none}
.pn-glyph--intel .g-a {left:3px;top:5px;width:18px;height:14px;background:transparent;border:2px solid currentColor}
.pn-glyph--intel .g-b {left:7px;top:9px;width:10px;height:2px}
.pn-glyph--intel .g-c {left:10px;top:13px;width:4px;height:2px}
.pn-glyph--intel::after {display:none} .agents {
background: linear-gradient(170deg, var(--bg-3) 0%, var(--bg-1) 100%)
}
#agentHubCanvas {
width: 100%;
height: 520px;
display: block;
border-radius: 14px;
} .process {
background: var(--bg-2)
}
.tl-wrap {
position: relative;
padding: 60px 0 0
}
.tl-line {
position: absolute;
top: 80px;
left: 0;
right: 0;
height: 2px;
background: rgba(255, 255, 255, 0.06)
}
.tl-prog {
height: 100%;
width: 0;
background: var(--gradient-main);
transition: width 1.5s ease
}
.tl-step {
text-align: center;
cursor: pointer;
padding: 0 6px;
position: relative
}
.tl-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--bg-2);
border: 2px solid rgba(255, 255, 255, 0.15);
margin: 0 auto 22px;
position: relative;
z-index: 2;
transition: all 0.4s
}
.tl-dot::before {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: transparent;
transition: background 0.4s
}
.tl-step.active .tl-dot {
border-color: var(--purple);
box-shadow: 0 0 18px rgba(139, 57, 183, 0.3)
}
.tl-step.active .tl-dot::before {
background: var(--purple)
}
.tl-num {
font-size: 12px;
font-weight: 700;
color: #7a35a8;
margin-bottom: 6px
}
.tl-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 6px;
transition: color 0.3s
}
.tl-step:hover .tl-title {
color: var(--purple-light)
}
.tl-desc {
font-size: 12px;
color: var(--gray-400);
line-height: 1.6;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.5s
}
.tl-step.active .tl-desc {
max-height: 200px;
opacity: 1
}
.tl-step.completed .tl-desc {
max-height: 200px;
opacity: 1
}
.tl-step.completed .tl-dot {
border-color: rgba(139, 57, 183, 0.48)
}
.tl-step.completed .tl-dot::before {
background: rgba(139, 57, 183, 0.7)
} .difference {
background: var(--bg-1)
}
.diff-card {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 34px 26px;
transition: all 0.4s;
height: 100%
}
.diff-card:hover {
background: var(--bg-card-hover);
border-color: rgba(139, 57, 183, 0.2);
transform: translateY(-6px)
}
.diff-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(139, 57, 183, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--purple-light);
margin-bottom: 18px
}
.diff-card h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px
}
.diff-card p {
font-size: 14px;
color: var(--gray-300);
line-height: 1.7;
margin: 0
} .stats-band {
background: var(--gradient-main);
padding: 60px 0;
position: relative
}
.stats-band::before {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0' stroke='rgba(255,255,255,0.06)' fill='none'/%3E%3C/svg%3E")
}
.stat-item {
text-align: center;
padding: 12px;
position: relative;
z-index: 1
}
.stat-num {
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 800;
color: #fff;
line-height: 1;
margin-bottom: 6px
}
.stat-lbl {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500
} .cta-sec {
background: var(--bg-2);
padding: 120px 0;
position: relative
}
.cta-glow {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: var(--purple);
filter: blur(180px);
opacity: 0.06;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.cta-box {
text-align: center;
position: relative;
z-index: 1
}
.cta-title {
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 800;
margin-bottom: 16px
}
.cta-sub {
font-size: 17px;
color: var(--gray-300);
margin-bottom: 36px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
line-height: 1.7
}
.btn-cta-big {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--gradient-main);
color: #fff;
padding: 18px 44px;
border-radius: 14px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: all 0.4s;
border: none;
cursor: pointer
}
.btn-cta-big:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-purple);
color: #fff
} .footer {
background: var(--bg-4);
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding: 72px 0 32px
}
.footer-brand {
font-size: 22px;
font-weight: 900;
color: #fff;
margin-bottom: 14px;
letter-spacing: -0.5px
}
.footer-brand .dot {
color: #7a35a8;
font-size: 26px
}
.footer-desc {
font-size: 13px;
color: var(--gray-400);
line-height: 1.7;
}
.footer-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
margin-bottom: 18px
}
.footer-links {
list-style: none;
padding: 0;
margin: 0
}
.footer-links li {
margin-bottom: 10px
}
.footer-links a {
color: var(--gray-400);
text-decoration: none;
font-size: 14px;
transition: color 0.3s
}
.footer-links a:hover {
color: var(--purple-light)
}
.social-icons {
display: flex;
gap: 10px
}
.social-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-400);
transition: all 0.3s;
text-decoration: none;
font-size: 15px
}
.social-icon:hover {
background: rgba(139, 57, 183, 0.2);
color: var(--purple-light)
}
.footer-bottom {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--gray-400)
}
.strategy-modal .modal-content {
border-radius: 18px;
border: 1px solid rgba(139, 57, 183, 0.26);
background: linear-gradient(140deg, rgba(35, 24, 60, 0.98), rgba(24, 16, 43, 0.98));
color: #f5f0ff;
box-shadow: 0 24px 56px rgba(14, 8, 27, 0.45)
}
.strategy-modal .modal-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 18px 20px
}
.strategy-modal .modal-body {
padding: 18px 20px 20px
}
.strategy-modal .btn-close {
filter: invert(1) brightness(1.35);
opacity: 0.8
}
.strategy-modal .form-label {
font-size: 12px;
color: var(--gray-300);
font-weight: 600;
margin-bottom: 6px
}
.strategy-modal .form-control {
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.14);
color: #f5f0ff;
border-radius: 10px;
padding: 11px 12px
}
.strategy-modal .form-control::placeholder {
color: #9c8db9
}
.strategy-modal .form-control:focus {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 122, 0, 0.55);
box-shadow: 0 0 0 0.2rem rgba(255, 122, 0, 0.18);
color: #fff
}
.strategy-modal .form-check-label {
font-size: 12px;
line-height: 1.5;
color: var(--gray-200)
}
.strategy-modal .modal-note {
font-size: 12px;
color: var(--gray-400);
margin-top: 8px
}
.strategy-modal .btn-submit {
width: 100%;
border: none;
border-radius: 10px;
padding: 12px 16px;
font-size: 14px;
font-weight: 700;
color: #fff;
background: var(--gradient-main);
margin-top: 8px
}
.strategy-modal .btn-submit:hover {
box-shadow: var(--shadow-purple)
}
::-webkit-scrollbar {
width: 6px
}
::-webkit-scrollbar-track {
background: var(--bg-1)
}
::-webkit-scrollbar-thumb {
background: rgba(139, 57, 183, 0.3);
border-radius: 3px
}
@media(min-width:992px) {
.hero-eq-diagram {
transform: translateY(-14px)
}
}
@media(max-width:1199px) {
.hero {
padding-top: 94px
}
.hero-row {
min-height: calc(100vh - 132px)
}
.hero-title {
font-size: clamp(1.95rem, 4.1vw, 3rem)
}
.hero-eq-diagram {
width: min(520px, 100%);
height: 320px
}
.eq-head {
font-size: 23px
}
.eq-node .v {
font-size: 13px
}
}
@media(max-width:991px) {
.nav-links {
display: none
}
.nav-toggle {
display: block
}
.nav-links.open {
display: flex;
flex-direction: column;
position: fixed;
top: 60px;
left: 0;
right: 0;
background: rgba(43, 30, 76, 0.97);
padding: 24px;
gap: 18px;
border-bottom: 1px solid rgba(139, 57, 183, 0.18)
}
.navbar-pz.scrolled .nav-links.open {
background: rgba(246, 241, 255, 0.98);
border-bottom: 1px solid rgba(84, 58, 122, 0.2)
}
.nav-links .dropdown-menu {
position: static;
float: none;
min-width: 100%;
margin-top: 8px;
display: block
}
.nav-links .dropdown-menu.growth-menu {
min-width: 100%
}
.growth-menu-grid {
grid-template-columns: 1fr
}
.hero {
text-align: center;
min-height: auto;
padding-top: 96px;
padding-bottom: 56px
}
.hero-row {
min-height: auto;
row-gap: 28px
}
.hero-diagram-col {
justify-content: center
}
.hero-eq-diagram {
transform: none;
width: min(620px, 100%);
height: 320px;
margin: 0 auto
}
.hero-buttons {
justify-content: center
}
.comp-grid {
grid-template-columns: 1fr;
gap: 20px
}
.comp-vs-col {
display: none
}
.tl-wrap .row>div {
margin-bottom: 28px
}
.footer-bottom {
flex-direction: column;
gap: 10px;
text-align: center
}
#sysGrid,
.sys-grid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media(max-width:767px) {
.navbar-pz {
padding: 10px 0
}
.logo-inline {
font-size: 18px
}
.nav-right {
gap: 10px
}
.lang-switch {
gap: 6px;
padding: 5px;
}
.lang-switch__link {
padding: 7px 10px;
gap: 6px;
font-size: 11px;
}
.lang-sw {
font-size: 12px
}
.nav-links.open {
top: 56px;
padding: 18px 18px 20px
}
.hero {
padding-top: 82px;
padding-bottom: 50px
}
.hero-title {
font-size: clamp(1.7rem, 9vw, 2.45rem);
line-height: 1.14;
margin-bottom: 18px
}
.hero-badge {
margin-bottom: 16px
}
.hero-buttons a {
padding: 14px 20px
}
.btn-hero-1,
.btn-hero-2 {
font-size: 14px
}
.sec-sub,
.cta-sub {
font-size: 15px;
line-height: 1.65
}
#agentHubCanvas {
height: 380px
}
}
@media(max-width:575px) {
.sec-pad {
padding: 80px 0
}
.hero-buttons {
flex-direction: column
}
.hero-buttons a {
width: 100%;
text-align: center;
justify-content: center
}
.hero-eq-diagram {
height: 292px;
padding: 16px 12px 12px;
border-radius: 18px
}
.eq-stage {
height: 214px
}
.eq-head {
font-size: 21px
}
.eq-sub {
font-size: 10px;
letter-spacing: 1.2px
}
.eq-node {
padding: 7px 10px 7px 8px
}
.eq-node i {
width: 26px;
height: 26px;
font-size: 12px
}
.eq-node .v {
font-size: 12px
}
.eq-node.hi {
left: 8px;
top: 36px
}
.eq-node.ai {
left: 8px;
bottom: 34px
}
.eq-node.growth {
right: 6px
}
.eq-target-dot {
right: 110px
}
.comp-item {
padding: 15px 16px;
font-size: 13px
}
#sysGrid,
.sys-grid {
grid-template-columns: 1fr
}
#agentHubCanvas {
height: 340px
}
} a { text-decoration: none }
.breadcrumbs-wrap {
margin-top: 80px;
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, .05);
border-bottom: 1px solid rgba(255, 255, 255, .05)
}
.breadcrumb { margin: 0 }
.breadcrumb-item,
.breadcrumb-item a { font-size: 13px; color: var(--gray-400); font-weight: 600 }
.breadcrumb-item.active { color: #fff;font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .3) }
.diagram-shell {
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 18px;
padding: 16px
}
.accent { color: var(--orange) }
.cta-box { text-align: center }
.integration {
background: linear-gradient(170deg, var(--bg-3), var(--bg-1))
}
#integrationCanvas {
width: 100%;
height: 520px;
display: block;
border-radius: 14px;
background: radial-gradient(circle at 30% 15%, rgba(139, 57, 183, .08), transparent 60%), rgba(12, 9, 22, .62);
border: 1px solid rgba(139, 57, 183, .18)
}
.legend-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 12px
}
.legend-item {
border: 1px solid rgba(255, 255, 255, .1);
background: rgba(255, 255, 255, .03);
border-radius: 10px;
padding: 10px 12px;
font-size: 12px;
color: var(--gray-300)
}
@media(max-width:991px) {
.page-hero {
min-height: auto
}
.hero-row {
min-height: auto;
row-gap: 26px
}
.hero-visual-col {
justify-content: center
}
.hero-ai-visual {
height: 320px
}
.hero-title {
font-size: clamp(1.8rem, 8.6vw, 2.5rem)
}
#sysGrid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.legend-grid {
grid-template-columns: 1fr
}
#integrationCanvas {
height: 430px
}
}
@media(max-width:575px) {
.page-hero {
padding-top: 108px;
padding-bottom: 42px
}
.hero-sub {
font-size: 15px
}
.hero-ai-visual {
height: 280px;
border-radius: 14px
}
#sysGrid {
grid-template-columns: 1fr 1fr;
}
#integrationCanvas {
height: 360px
}
.btn-cta-big {
width: 100%;
justify-content: center
}
}
.ai-core {
background: var(--bg-2)
}
.ai-core-quote {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 14px;
padding: 20px 22px;
font-size: 18px;
line-height: 1.5;
font-weight: 700
}
.ai-core-quote .accent {
font-style: normal
}
.split {
background: linear-gradient(170deg, var(--bg-3), var(--bg-1))
}
.split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 20px
}
.split-col {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px;
padding: 22px
}
.split-col h3 {
font-size: 18px;
font-weight: 800;
margin-bottom: 12px
}
.split-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px
}
.split-list li {
display: flex;
gap: 10px;
font-size: 14px;
line-height: 1.6;
color: var(--gray-300)
}
.split-list i {
margin-top: 3px;
color: #7a35a8;
font-size: 12px
}
.power {
background: var(--bg-2)
}
.power-wrap {
margin-top: 18px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
padding: 18px
}
.power-grid {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 16px;
align-items: stretch
}
.power-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.power-item {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
padding: 14px
}
.power-item h4 {
font-size: 13px;
font-weight: 700;
margin-bottom: 6px
}
.power-item p {
font-size: 12px;
line-height: 1.55;
color: var(--gray-300);
margin: 0
}
.power-diagram {
position: relative;
min-height: 324px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, .1);
background: radial-gradient(circle at 50% 50%, rgba(139, 57, 183, .15), transparent 64%), rgba(18, 12, 32, .45);
overflow: hidden
}
.pd-track {
position: absolute;
left: 50%;
top: 50%;
width: 256px;
height: 256px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px dashed rgba(168, 85, 214, .24)
}
.pd-orbit {
position: absolute;
inset: 0
}
.pd-sat {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
animation: pdOrbit 18s linear infinite
}
.pd-sat.s1 {
animation-delay: 0s
}
.pd-sat.s2 {
animation-delay: -4.5s
}
.pd-sat.s3 {
animation-delay: -9s
}
.pd-sat.s4 {
animation-delay: -13.5s
}
.pd-node {
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -50%);
width: 96px;
height: 96px;
border-radius: 50%;
border: 1px solid rgba(139, 57, 183, .36);
background: radial-gradient(circle at 30% 25%, rgba(139, 57, 183, .35), rgba(22, 14, 40, .95));
box-shadow: 0 10px 24px rgba(10, 6, 20, .4);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px
}
.pd-node h4 {
font-size: 10px;
font-weight: 700;
line-height: 1.25;
margin: 0
}
.pd-arc {
position: absolute;
left: 50%;
top: 50%;
width: 236px;
height: 236px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .08)
}
.pd-dot {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--orange-light);
box-shadow: 0 0 10px rgba(255, 157, 64, .8)
}
.pd-dot.a {
animation: orbitA 5.2s linear infinite
}
.pd-dot.b {
background: #cda5ff;
box-shadow: 0 0 10px rgba(205, 165, 255, .8);
animation: orbitB 6.1s linear infinite
}
@keyframes pdOrbit {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(128px)
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(128px)
}
}
@keyframes orbitA {
from {
transform: translate(-50%, -50%) rotate(0) translateX(118px)
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(118px)
}
}
@keyframes orbitB {
from {
transform: translate(-50%, -50%) rotate(360deg) translateX(118px)
}
to {
transform: translate(-50%, -50%) rotate(0) translateX(118px)
}
}
.agents {
background: linear-gradient(170deg, var(--bg-3), var(--bg-1))
}
.agent-detail-grid {
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: 16px;
align-items: stretch;
margin-top: 18px
}
.agent-accordion {
display: grid;
gap: 10px
}
.agent-card {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 14px;
overflow: hidden;
transition: border-color .25s, background .25s
}
.agent-card.is-open {
border-color: rgba(255, 122, 0, .5);
background: rgba(255, 255, 255, .07)
}
.agent-card-head {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 14px 14px 12px;
border: none;
background: transparent;
color: inherit;
text-align: left
}
.agent-card-head h3 {
font-size: 15px;
font-weight: 800;
line-height: 1.3;
margin: 0 0 4px
}
.agent-card-head p {
font-size: 12px;
color: var(--gray-300);
margin: 0
}
.agent-card-head .caret {
font-size: 14px;
color: #7a35a8;
transform: rotate(0);
transition: transform .22s
}
.agent-card.is-open .agent-card-head .caret {
transform: rotate(180deg)
}
.agent-card-body {
max-height: 0;
overflow: hidden;
transition: max-height .28s ease;
padding: 0 14px
}
.agent-card.is-open .agent-card-body {
max-height: 180px;
padding: 0 14px 14px
}
.agent-card-body p {
font-size: 14px;
line-height: 1.62;
color: var(--gray-200);
margin: 0
}
@keyframes wheelOrbitA {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(120px)
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(120px)
}
}
@keyframes wheelOrbitB {
from {
transform: translate(-50%, -50%) rotate(360deg) translateX(120px)
}
to {
transform: translate(-50%, -50%) rotate(0deg) translateX(120px)
}
} .logos {
background: #ffffff;
border-top: 1px solid rgba(125, 93, 170, 0.12);
border-bottom: 1px solid rgba(125, 93, 170, 0.12)
}
.brand-marquee {
position: relative;
overflow: hidden;
margin-top: 14px;
border-radius: 0;
border: 0;
background: transparent
}
.brand-marquee::before,
.brand-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 70px;
z-index: 3;
pointer-events: none
}
.brand-marquee::before {
left: 0;
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%)
}
.brand-marquee::after {
right: 0;
background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%)
}
.brand-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 210px;
gap: 12px;
width: max-content;
padding: 8px 0;
animation: brand-flow 84s linear infinite
}
.brand-marquee--right .brand-track {
animation-direction: reverse;
animation-duration: 96s
}
.brand-marquee:hover .brand-track {
animation-play-state: paused
}
.logo-box {
height: 70px;
border-radius: 12px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
color: #624b8a;
font-weight: 700;
letter-spacing: .3px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.logo-box img {
width: 100%;
object-fit: fill;
filter: grayscale(1);
max-height: 50px;
}
.cases {
background: #f8f4ff;
border-top: 1px solid rgba(125, 93, 170, 0.12);
border-bottom: 1px solid rgba(125, 93, 170, 0.12)
}
.case-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 20px
}
.case {
background: linear-gradient(180deg, #35245a 0%, #2a1d49 100%);
border: 1px solid rgba(173, 133, 232, 0.24);
border-radius: 16px;
box-shadow: 0 10px 26px rgba(42, 22, 74, 0.2);
padding: 18px;
transition: transform .3s ease, box-shadow .3s ease
}
.case:hover {
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(42, 22, 74, 0.3)
}
.case-logo {
height: 58px;
border-radius: 12px;
border: 1px solid rgba(173, 133, 232, 0.35);
background: rgba(255, 255, 255, 0.08);
color: #efe7ff;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px
}
.case h3 {
color: #fff;
font-size: 1.05rem;
margin-bottom: 6px
}
.case .meta {
font-size: 12px;
font-weight: 700;
color: #ffc182;
margin-bottom: 10px
}
.case p {
font-size: 14px;
line-height: 1.65;
color: #d8c8f5;
margin-bottom: 10px
}
.case .result {
font-size: 12px;
font-weight: 800;
color: #ffcf9f
}
.testimonials {
background: #ffffff;
border-top: 1px solid rgba(125, 93, 170, 0.12);
border-bottom: 1px solid rgba(125, 93, 170, 0.12)
}
.brand-testi-carousel {
max-width: 900px;
margin: 0 auto
}
.brand-testi-carousel .carousel-item {
padding: 6px 54px 34px
}
.brand-testi-carousel .carousel-indicators {
margin-bottom: 0
}
.brand-testi-carousel .carousel-indicators button {
width: 10px;
height: 10px;
border-radius: 50%;
border: 0;
background-color: rgba(122, 83, 175, 0.34)
}
.brand-testi-carousel .carousel-indicators .active {
background-color: #7a35a8
}
.brand-testi-carousel .carousel-control-prev,
.brand-testi-carousel .carousel-control-next {
width: 40px;
opacity: 1
}
.brand-testi-carousel .carousel-control-prev-icon,
.brand-testi-carousel .carousel-control-next-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--purple);
background-size: 48%;
}
.t-card {
background: #ffffff;
border: 1px solid rgba(122, 83, 175, 0.16);
border-radius: 14px;
box-shadow: 0 8px 20px rgba(67, 40, 109, 0.08);
padding: 24px 24px
}
.t-card p {
font-size: 14px;
color: #5a4a76;
line-height: 1.65;
margin: 0 0 10px
}
.t-card strong {
color: #38285d;
font-size: 13px
}
@keyframes brand-flow {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
@media(max-width:991px) {
.brands-hero {
min-height: auto;
padding: 44px 0 34px
}
.case-grid {
grid-template-columns: 1fr 1fr
}
.brand-track {
grid-auto-columns: 180px
}
}
@media(max-width:575px) {
.case-grid {
grid-template-columns: 1fr
}
.brand-track {
grid-auto-columns: 150px;
gap: 10px
}
.social-icons {
justify-content: center;
}
.brand-testi-carousel .carousel-item {
padding: 6px 10px 34px
}
.brand-testi-carousel .carousel-control-prev,
.brand-testi-carousel .carousel-control-next {
display: none
}
.t-card {
padding: 20px 18px
}
} @keyframes orb1 {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(110px)
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(110px)
}
}
@keyframes orb2 {
from {
transform: translate(-50%, -50%) rotate(360deg) translateX(75px)
}
to {
transform: translate(-50%, -50%) rotate(0deg) translateX(75px)
}
}
.principles {
background: var(--bg-2)
}
.p-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 18px
}
.p-card {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 13px;
padding: 16px
}
.p-card i {
color: #ffb980;
margin-bottom: 8px
}
.p-card h3 {
font-size: 14px;
margin: 0 0 6px
}
.p-card p {
font-size: 12px;
color: var(--gray-300);
line-height: 1.6;
margin: 0
}
.timeline {
background: linear-gradient(170deg, var(--bg-3), var(--bg-1))
}
.steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 18px
}
.step {
background: var(--bg-card-hover);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
padding: 15px
}
.no {
font-size: 11px;
color: #ffb980;
letter-spacing: 1px;
font-weight: 700;
margin-bottom: 6px
}
.step h3 {
font-size: 14px;
margin: 0 0 6px
}
.step p {
font-size: 12px;
color: var(--gray-300);
line-height: 1.6;
margin: 0
}
.loop-sec {
background: var(--bg-2)
}
.team {
background: linear-gradient(170deg, var(--bg-3), var(--bg-1))
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 16px
}
.member {
background: var(--bg-card-hover);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
padding: 14px
}
.member h4 {
font-size: 13px;
margin: 0 0 4px
}
.member p {
font-size: 12px;
color: var(--gray-300);
margin: 0
}
@media(max-width:991px) {
.p-grid,
.steps,
.team-grid {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:575px) {
.p-grid,
.steps,
.team-grid {
grid-template-columns: 1fr
}
}
.contact {
background: var(--bg-2)
}
.contact-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 16px;
margin-top: 18px
}
.panel h3 {
font-size: 18px;
margin: 0 0 12px;
color: #2f2350;
}
#contactForm .form-label {
font-size: 12px;
color: #5b4a79;
font-weight: 600;
margin-bottom: 6px
}
#contactForm .form-control,
#contactForm .form-select {
background: #fff;
border: 1px solid rgba(125, 93, 170, 0.26);
color: #2f2350;
border-radius: 10px;
padding: 11px 12px
}
#contactForm .form-control::placeholder {
color: #9482b3;
}
#contactForm .form-control:focus,
#contactForm .form-select:focus {
background: #ffffff;
border-color: rgba(255, 122, 0, 0.55);
box-shadow: 0 0 0 0.2rem rgba(255, 122, 0, 0.12);
color: #2f2350;
}
#contactForm .service-radios {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#contactForm .service-radio {
display: flex;
align-items: center;
gap: 8px;
background: #ffffff;
border: 1px solid rgba(125, 93, 170, 0.22);
border-radius: 10px;
padding: 9px 10px;
color: #3f315f;
font-size: 13px;
line-height: 1.35;
}
#contactForm .service-radio input[type="radio"],
#contactForm .service-radio input[type="checkbox"] {
margin: 0;
accent-color: #ff7a00;
}
#contactForm .btn-main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--gradient-main);
color: #fff;
padding: 14px 22px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
width: 100%;
}
.info-list {
display: grid;
gap: 10px
}
.info {
background: var(--bg-card-hover);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 12px;
padding: 12px
}
.info i {
color: #ffb980;
margin-right: 8px
}
.info span {
font-size: 13px;
color: var(--gray-300);
font-weight: 700;
}
.map-wrap {
margin-top: 12px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .14)
}
.faq {
background: linear-gradient(170deg, var(--bg-3), var(--bg-1))
}
.accordion-item {
background: var(--bg-card-hover);
border: 1px solid rgba(255, 255, 255, .12);
margin-bottom: 10px;
border-radius: 12px;
overflow: hidden
}
.accordion-button {
background: transparent;
color: #fff;
font-weight: 700
}
.accordion-button:not(.collapsed) {
background: rgba(255, 255, 255, .04);
color: #fff
}
.accordion-body {
color: var(--gray-300);
font-size: 14px;
line-height: 1.65
}
@media(max-width:991px) {
.contact-grid {
grid-template-columns: 1fr
}
} .reality {
background: #ffffff;
border-top: 1px solid rgba(126, 95, 170, 0.12);
border-bottom: 1px solid rgba(126, 95, 170, 0.12);
}
.comparison {
background: #ffffff;
border-top: 1px solid rgba(118, 88, 163, 0.14);
border-bottom: 1px solid rgba(118, 88, 163, 0.14);
}
.growth-arch {
background: #ffffff;
border-top: 1px solid rgba(156, 126, 198, 0.22);
border-bottom: 1px solid rgba(156, 126, 198, 0.22);
}
.systems {
background: #f8f4ff;
border-top: 1px solid rgba(116, 86, 160, 0.14);
border-bottom: 1px solid rgba(116, 86, 160, 0.14);
}
.agents {
background: #ffffff;
border-top: 1px solid #e4e9f5;
border-bottom: 1px solid #e4e9f5;
}
.agent-live {
background: #ffffff;
border-radius: 18px;
padding: 22px;
box-shadow: 0 16px 34px rgba(20, 32, 61, 0.08);
}
.agent-live-body {
display: grid;
grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.45fr);
gap: 18px;
align-items: start;
}
.agent-live-canvas {
border-radius: 14px;
overflow: hidden;
background: #ffffff;
}
#agentHubCanvas {
background: #ffffff;
border-color: rgba(90, 106, 145, 0.22);
}
.agent-live-list {
background: #ffffff;
border-radius: 14px;
padding: 16px 15px;
}
.agent-live-list h3 {
margin: 0 0 12px;
color: #1f2940;
font-size: 18px;
font-weight: 800;
}
.agent-role-list {
display: flex;
flex-direction: column;
gap: 9px;
}
.agent-role-item {
background: transparent;
border: 0;
border-radius: 0;
padding: 8px 2px 10px;
border-bottom: 1px solid #e6edf8;
}
.agent-role-item h4 {
margin: 0 0 5px;
color: #1f2940;
font-size: 14px;
font-weight: 800;
}
.agent-role-item p {
margin: 0;
color: #55607a;
font-size: 12.5px;
line-height: 1.5;
}
.agent-role-item:last-child {
border-bottom: 0;
padding-bottom: 2px;
}
@media(max-width: 1199px) {
.agent-live-body {
grid-template-columns: minmax(0, 1fr);
}
}
@media(max-width: 767px) {
.agent-live {
padding: 14px;
}
}
.process {
background: #f8f4ff;
border-top: 1px solid rgba(114, 84, 158, 0.14);
border-bottom: 1px solid rgba(114, 84, 158, 0.14);
}
.difference {
background: #ffffff;
border-top: 1px solid rgba(126, 95, 170, 0.12);
border-bottom: 1px solid rgba(126, 95, 170, 0.12);
}
.sec-title,
.comp-quote,
.tl-title,
.r-card h4,
.diff-card h4,
.sys-card h4 {
color: #2f2350;
}
.sec-sub,
.r-card p,
.diff-card p,
.sys-card p,
.tl-desc,
.comp-item {
color: #5b4a79;
}
.r-card,
.diff-card,
.sys-card {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(125, 93, 170, 0.22);
box-shadow: 0 8px 20px rgba(67, 40, 109, 0.08);
} .reality .r-card {
background: linear-gradient(180deg, #ffffff 0%, #f6efff 100%);
border: 1px solid rgba(116, 84, 160, 0.24);
box-shadow: 0 12px 24px rgba(67, 40, 109, 0.11);
text-align: center;
}
.reality .r-card:hover {
background: linear-gradient(180deg, #ffffff 0%, #f1e7ff 100%);
border-color: rgba(116, 84, 160, 0.36);
box-shadow: 0 16px 30px rgba(67, 40, 109, 0.16);
}
.reality .r-card::before {
opacity: 0.55;
height: 4px;
}
.reality .r-card:hover::before {
opacity: 1;
}
.reality .r-icon {
width: 56px;
height: 56px;
border-radius: 999px;
background: linear-gradient(160deg, #ffffff 0%, #efe2ff 100%);
border: 1px solid rgba(116, 84, 160, 0.32);
color: #7a35a8;
box-shadow: 0 8px 16px rgba(72, 42, 116, 0.14);
margin-left: auto;
margin-right: auto;
}
.reality .r-card h4 {
color: #2f2350;
}
.reality .r-card p {
color: #5b4a79;
}
.r-card:hover,
.diff-card:hover,
.sys-card:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(125, 93, 170, 0.34);
box-shadow: 0 14px 28px rgba(67, 40, 109, 0.14);
}
.r-icon,
.diff-icon,
.sys-icon {
border: none;
color: var(--orange);
}
.sys-card:hover .sys-icon {
color: #fff;
}
.comp-col-header.old-h {
color: #3b2b61;
border: none;
background-color: #fff;
}
.comp-col-header.new-h {
background: #fff;
border: none;
}
.comp-item.old {
background: rgb(239 237 237 / 78%);
font-weight: 600;
border: 1px solid rgba(120, 89, 165, 0.18);
}
.comp-item.new {
background: var(--purple-light);
border: 1px solid #fff;
font-weight: 700;
color: #fff;
}
.comp-vs {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(120, 89, 165, 0.2);
color: #5e4d7d;
}
.tl-line {
background: rgba(90, 66, 130, 0.2);
}
.tl-dot {
background: #f2e9ff;
border-color: rgba(109, 78, 154, 0.38);
}
.logo-agency {
height: 50px;
}
.comp-col-header.new-h, .comp-col-header.old-h {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 10px 0 10px;
margin-bottom: 0;
font-size: 18px;
height: 70px;
}
.reality {
position: relative;
background: #ffffff;
}
.reality .row.g-4 {
row-gap: 1.25rem;
}
.reality .r-card {
background: #ffffff;
border: 1px solid rgba(120, 89, 165, 0.2);
border-radius: 18px;
box-shadow: 0 10px 24px rgba(60, 34, 102, 0.08);
padding: 28px 22px 24px;
text-align: left;
}
.reality .r-card::before {
opacity: 1;
height: 3px;
background: var(--orange);
}
.reality .r-card:hover {
transform: translateY(-8px);
border-color: rgba(120, 89, 165, 0.34);
box-shadow: 0 18px 32px rgba(60, 34, 102, 0.14);
background: #fcf9ff;
}
.reality .r-icon{
width: 58px;
height: 58px;
margin: 0 0 16px;
border-radius: 14px;
background: #f4ecff;
border: 1px solid rgba(139, 57, 183, 0.26);
color: #8237af;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 16px rgba(72, 42, 116, 0.1);
}
.reality .r-card h4{
color: #2f2350;
font-size: 1.45rem;
line-height: 1.32;
margin-bottom: 10px;
}
.reality .r-card p {
color: #5b4a79;
line-height: 1.68;
} .floating-strategy-cta {
position: fixed;
left: 18px;
bottom: 20px;
z-index: 1040;
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 14px;
border-radius: 999px;
text-decoration: none;
font-size: 13px;
font-weight: 800;
color: #fff;
background: linear-gradient(90deg, #8b39b7, #ff7a00);
box-shadow: 0 12px 30px rgba(36, 18, 67, 0.36);
transition: transform .2s ease, box-shadow .2s ease;
}
.floating-strategy-cta:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(36, 18, 67, 0.46);
}
.floating-strategy-cta i {
font-size: 14px;
}
@media (max-width: 767px) {
.floating-strategy-cta {
left: 50%;
bottom: max(12px, env(safe-area-inset-bottom));
transform: translateX(-50%);
width: min(92vw, 340px);
justify-content: center;
height: 42px;
padding: 0 12px;
font-size: 13px;
box-shadow: 0 12px 26px rgba(36, 18, 67, 0.3);
}
.floating-strategy-cta:hover {
transform: translateX(-50%);
}
} @keyframes wfFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.logo {
height: 50px;
}
@media (max-width: 991px) {
.reality .col-lg-3:nth-child(2) .r-card,
.reality .col-lg-3:nth-child(4) .r-card {
margin-top: 0;
}
.reality .r-card {
text-align: center;
padding: 24px 18px 20px;
}
.reality .r-icon {
margin: 0 auto 14px;
}
} .sys-icon svg,
.diff-icon svg {
width: 38px;
height: 38px;
display: block;
flex-shrink: 0;
}
.sys-icon svg * {
stroke-width: 2.15;
}
.difference .sys-card p {
margin-bottom: 0;
} .svc-hero {
min-height: 70vh;
display: flex;
align-items: center;
background: linear-gradient(160deg, #2a1e4b 0%, #3a2a66 40%, #302151 100%);
position: relative;
overflow: hidden;
padding: 80px 0 60px;
}
.svc-hero__canvas-wrap {
position: absolute; inset: 0;
pointer-events: none; z-index: 1;
}
.svc-hero__canvas-wrap canvas {
width: 100%; height: 100%; display: block;
}
.svc-hero__grid-bg {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(139,57,183,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(139,57,183,0.03) 1px, transparent 1px);
background-size: 50px 50px;
mask-image: radial-gradient(ellipse at 60% 50%, black 30%, transparent 70%);
}
.svc-hero__glow {
position: absolute; border-radius: 50%; pointer-events: none;
}
.svc-hero__glow--1 {
width: 500px; height: 500px;
background: var(--purple); filter: blur(150px);
opacity: .08; top: -80px; right: 10%;
}
.svc-hero__glow--2 {
width: 300px; height: 300px;
background: var(--orange); filter: blur(130px);
opacity: .05; bottom: -60px; left: 15%;
}
.svc-hero__inner {
position: relative; z-index: 2;
}
.svc-hero__badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255);
border: 1px solid rgba(255,255,255,.1);
border-radius: 40px; padding: 8px 20px;
font-size: 13px; font-weight: 600;
color: var(--purple); letter-spacing: .5px;
margin-bottom: 24px;
}
.svc-hero__title {
font-size: clamp(2rem, 4.5vw, 2.8rem);
font-weight: 900; color: #fff;
line-height: 1.15; letter-spacing: -.02em;
margin-bottom: 20px;
}
.svc-hero__sub {
font-size: 17px; color: var(--gray-300);
line-height: 1.7; max-width: 540px;
margin-bottom: 32px;
}
.svc-hero__actions {
display: flex; align-items: center;
gap: 20px; flex-wrap: wrap;
}
.svc-hero__scroll-link {
color: var(--gray-300); font-size: 14px;
font-weight: 600; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
transition: color .3s;
}
.svc-hero__scroll-link:hover { color: var(--orange); }
.svc-hero__scroll-link i { font-size: 11px; } .svc-hero__visual { position: relative; }
.svc-hero__stat-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px;
}
.svc-hero__stat {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px; padding: 24px 20px;
text-align: center;
backdrop-filter: blur(8px);
transition: border-color .3s, transform .3s;
}
.svc-hero__stat:hover {
border-color: rgba(139,57,183,.4);
transform: translateY(-3px);
}
.svc-hero__stat--accent {
border-color: rgba(255,122,0,.25);
background: rgba(255,122,0,.1);
}
.svc-hero__stat-val {
font-size: 28px; font-weight: 900;
background: var(--gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block; margin-bottom: 4px;
}
.svc-hero__stat--accent .svc-hero__stat-val {
background: linear-gradient(135deg, var(--orange), #ff9d40);
-webkit-background-clip: text; background-clip: text;
}
.svc-hero__stat-label {
font-size: 12px; color: var(--gray-400);
font-weight: 600; text-transform: uppercase;
letter-spacing: .5px;
} .hero-lead-form {
width: 100%;
}
.hero-form-card {
border-radius: 24px;
border: 1px solid rgb(208 208 208 / 81%);
background: linear-gradient(180deg, rgba(55, 32, 94, 0.96) 0%, rgba(45, 27, 78, 0.96) 100%);
box-shadow: 0 20px 42px rgba(22, 10, 44, 0.38);
padding: 40px 65px;
backdrop-filter: blur(6px);
}
.hero-form-title {
margin: 0 0 14px;
font-size: clamp(1.28rem, 1.7vw, 1.6rem);
font-weight: 900;
letter-spacing: -0.01em;
color: #ffffff;
line-height: 1.2;
}
.hero-form-title span {
color: var(--orange);
}
.hero-form {
display: grid;
gap: 11px;
}
.hero-form-field {
display: grid;
gap: 6px;
}
.hero-form-field label {
margin: 0;
font-size: 12px;
font-weight: 700;
color: rgba(235, 225, 255, 0.95);
}
.hero-form .form-control {
height: 40px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #f6f5fb;
color: #3f3857;
font-size: 13px;
font-weight: 500;
padding: 0 16px;
box-shadow: none;
}
.hero-form .form-control::placeholder {
color: #9d90bf;
}
.hero-form .form-control:focus {
border-color: rgba(255, 122, 0, 0.65);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15);
}
.hero-form-check {
display: grid;
grid-template-columns: 18px 1fr;
gap: 9px;
align-items: start;
margin: 10px 0;
}
.hero-form-check input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
border-radius: 4px;
border: 1px solid rgba(201, 183, 235, 0.8);
background: #ffffff;
appearance: none;
position: relative;
cursor: pointer;
}
.hero-form-check input[type="checkbox"]:checked {
background: linear-gradient(135deg, #8b39b7, #ff7a00);
border-color: transparent;
}
.hero-form-check input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.hero-form-check label {
margin: 0;
font-size: 12px;
line-height: 1.45;
color: rgba(233, 221, 255, 0.95);
}
.hero-form-submit {
margin-top: 4px;
border: 0;
border-radius: 12px;
height: 50px;
width: 100%;
background: var(--gradient-main);
color: #ffffff;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
transition: transform .25s ease, box-shadow .25s ease;
}
.hero-form-submit:hover {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(255, 122, 0, 0.24);
}
@media (max-width: 1199px) {
.hero-form-card {
padding: 20px 16px 16px;
}
.hero-form .form-control {
height: 48px;
font-size: 14px;
}
.hero-form-submit {
height: 46px;
font-size: 15px;
}
}
@media (max-width: 991px) {
.hero-lead-form {
margin-top: 20px;
}
.hero-form-title {
font-size: 1.25rem;
}
} .svc-overview-v2 {
background: #ffffff;
border-top: 1px solid rgba(126, 95, 170, 0.12);
border-bottom: 1px solid rgba(126, 95, 170, 0.12);
} .svc-overview-v2 .r-card {
background: #ffffff;
border: 1px solid rgba(120, 89, 165, 0.2);
border-radius: 18px;
box-shadow: 0 10px 24px rgba(60, 34, 102, 0.08);
padding: 28px 22px 24px;
text-align: left;
}
.svc-overview-v2 .r-card::before {
opacity: 1;
height: 3px;
background: var(--orange);
}
.svc-overview-v2 .r-card:hover {
transform: translateY(-8px);
border-color: rgba(120, 89, 165, 0.34);
box-shadow: 0 18px 32px rgba(60, 34, 102, 0.14);
background: #fcf9ff;
}
.svc-overview-v2 .r-icon {
width: 58px;
height: 58px;
margin: 0 0 16px;
border-radius: 14px;
background: #f4ecff;
border: 1px solid rgba(139, 57, 183, 0.26);
color: #8237af;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 16px rgba(72, 42, 116, 0.1);
}
.svc-overview-v2 .r-card h4 {
color: #2f2350;
font-size: 1.45rem;
line-height: 1.32;
margin-bottom: 10px;
}
.svc-overview-v2 .r-card p {
color: #5b4a79;
line-height: 1.68;
}
.sv2-card {
background: linear-gradient(180deg, #ffffff 0%, #f6efff 100%);
border: 1px solid rgba(125, 93, 170, 0.22);
border-radius: 18px; padding: 36px 28px;
height: 100%; position: relative;
box-shadow: 0 10px 22px rgba(67, 40, 109, 0.09);
transition: all .35s cubic-bezier(.4,0,.2,1);
}
.sv2-card:hover {
background: linear-gradient(180deg, #ffffff 0%, #f1e7ff 100%);
border-color: rgba(255, 122, 0, .36);
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(67, 40, 109, 0.14);
}
.sv2-card__icon {
width: 52px; height: 52px; border-radius: 14px;
background: linear-gradient(160deg, #ffffff 0%, #efe2ff 100%);
border: 1px solid rgba(116, 84, 160, 0.32);
box-shadow: 0 8px 16px rgba(72, 42, 116, 0.14);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px; font-size: 20px; color: #7a35a8;
}
.sv2-card h4 {
font-size: 18px; font-weight: 700;
color: #2f2350; margin-bottom: 12px;
}
.sv2-card p {
font-size: 15px; color: #5b4a79;
line-height: 1.7; margin-bottom: 0;
}
.sv2-card__tag {
display: inline-block; margin-top: 16px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px;
color: #7a35a8;
background: rgba(139,57,183,.08);
border: 1px solid rgba(139,57,183,.2);
border-radius: 6px; padding: 4px 10px;
} .svc-features-v2 {
background: #f8f4ff;
border-top: 1px solid rgba(114, 84, 158, 0.14);
border-bottom: 1px solid rgba(114, 84, 158, 0.14);
}
.sv2-bento {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.sv2-bento__item {
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(125, 93, 170, 0.22);
border-radius: 18px; padding: 36px 30px;
position: relative; overflow: hidden;
box-shadow: 0 10px 22px rgba(67, 40, 109, 0.08);
transition: all .35s cubic-bezier(.4,0,.2,1);
}
.sv2-bento__item:hover {
background: #fff;
border-color: rgba(255, 122, 0, .3);
transform: translateY(-4px);
box-shadow: 0 16px 30px rgba(67, 40, 109, 0.12);
}
.sv2-bento__item--wide {
grid-column: span 2;
}
.sv2-bento__num {
font-size: 48px; font-weight: 900;
background: linear-gradient(135deg, rgba(255,122,0,.25), rgba(139,57,183,.15));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1; margin-bottom: 14px;
}
.sv2-bento__item h4 {
font-size: 18px; font-weight: 700;
color: #2f2350; margin-bottom: 10px;
}
.sv2-bento__item p {
font-size: 15px; color: #5b4a79;
line-height: 1.7; margin-bottom: 0;
}
.sv2-bento__tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 18px; list-style: none; padding: 0;
}
.sv2-bento__tags li {
font-size: 12px; font-weight: 600;
color: var(--orange);
background: rgba(255,122,0,.06);
border: 1px solid rgba(255,122,0,.2);
border-radius: 8px; padding: 5px 12px;
} .svc-process-v2 {
background: #ffffff;
border-top: 1px solid rgba(126, 95, 170, 0.12);
border-bottom: 1px solid rgba(126, 95, 170, 0.12);
}
.sv2-timeline {
max-width: 700px; margin: 0 auto;
position: relative;
padding-left: 42px;
}
.sv2-timeline::before {
content: '';
position: absolute; left: 20px; top: 0; bottom: 0;
width: 2px;
background: var(--orange);
border-radius: 2px;
}
.sv2-timeline__item {
position: relative;
padding: 0 0 40px 32px;
}
.sv2-timeline__item:last-child { padding-bottom: 0; }
.sv2-timeline__marker {
position: absolute;
left: -42px; top: 2px;
width: 42px; height: 42px;
border-radius: 12px;
background: var(--orange);
box-shadow: 0 6px 16px rgba(139, 57, 183, 0.3);
display: flex; align-items: center; justify-content: center;
}
.sv2-timeline__marker span {
font-size: 15px; font-weight: 800; color: #fff;
}
.sv2-timeline__content h4 {
font-size: 17px; font-weight: 700;
color: #2f2350; margin-bottom: 8px;
}
.sv2-timeline__content p {
font-size: 14px; color: #5b4a79;
line-height: 1.7; margin-bottom: 0;
} .svc-metrics-v2 {
background: #f8f4ff;
border-top: 1px solid rgba(114, 84, 158, 0.14);
border-bottom: 1px solid rgba(114, 84, 158, 0.14);
}
.sv2-metric {
background: #ffffff;
border: 1px solid rgba(125, 93, 170, 0.22);
border-radius: 18px; padding: 36px 24px;
text-align: center; height: 100%;
box-shadow: 0 8px 20px rgba(67, 40, 109, 0.08);
transition: all .35s cubic-bezier(.4,0,.2,1);
}
.sv2-metric:hover {
border-color: rgba(255, 122, 0, .36);
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(67, 40, 109, 0.12);
}
.sv2-metric__val {
font-size: clamp(2.2rem, 4.5vw, 3rem);
font-weight: 900;
background: var(--purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.sv2-metric__label {
font-size: 14px; color: var(--orange);
font-weight: 600; margin-bottom: 12px;
}
.sv2-metric p {
font-size: 13px; color: #5b4a79;
line-height: 1.6; margin-bottom: 0;
} .svc-faq-v2 {
background: #f9f4ff;
border-top: 1px solid rgba(126, 95, 170, 0.12);
border-bottom: 1px solid rgba(126, 95, 170, 0.12);
}
.sv2-faq {
max-width: 760px; margin: 0 auto;
}
.sv2-faq .accordion-item {
background: #ffffff;
border: 1px solid rgba(125, 93, 170, 0.2);
margin-bottom: 10px;
border-radius: 14px !important;
overflow: hidden;
box-shadow: 0 8px 18px rgba(67, 40, 109, 0.07);
transition: border-color .3s;
}
.sv2-faq .accordion-item:hover {
border-color: rgba(139,57,183,.35);
}
.sv2-faq .accordion-button {
background: transparent;
color: #2f2350;
font-weight: 700;
font-size: 15px;
padding: 20px 24px;
box-shadow: none;
}
.sv2-faq .accordion-button::after { filter: none; }
.sv2-faq .accordion-button:not(.collapsed) {
background: rgba(139, 57, 183, .08);
color: #7a35a8;
}
.sv2-faq .accordion-body {
color: #5b4a79;
font-size: 14px; line-height: 1.7;
padding: 12px 24px 15px;
} .svc-cta-v2 {
background: linear-gradient(160deg, #2a1e4b 0%, #3a2a66 40%, #302151 100%);
padding: 100px 0;
position: relative;
}
.svc-cta-v2__box {
text-align: center;
margin: 0 auto;
}
.svc-cta-v2__box h2 {
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 800; color: #fff;
margin-bottom: 16px;
}
.svc-cta-v2__box p {
font-size: 17px; color: #b8a5d5;
line-height: 1.7; margin-bottom: 32px;
} @media (max-width: 991px) {
.svc-hero { min-height: 70vh; padding: 60px 0 50px; }
.svc-hero__title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.sv2-bento { grid-template-columns: 1fr; }
.sv2-bento__item--wide { grid-column: span 1; }
.sv2-timeline { padding-left: 36px; }
.sv2-timeline::before { left: 16px; }
.sv2-timeline__marker { left: -36px; width: 36px; height: 36px; }
.sv2-timeline__marker span { font-size: 13px; }
}
@media (max-width: 575px) {
.svc-hero { min-height: auto; padding: 48px 0 40px; }
.svc-hero__actions { flex-direction: column; align-items: flex-start; }
.sv2-card { padding: 28px 22px; }
.sv2-bento__item { padding: 28px 22px; }
.sv2-metric { padding: 28px 18px; }
.sv2-faq .accordion-button { font-size: 14px; padding: 16px 18px; }
.svc-cta-v2 { padding: 30px 0; }
}
.btn-cta-big--ghost {
background: transparent;
color: #7a35a8;
border: 1px solid rgba(122, 53, 168, 0.35);
}
.btn-cta-big--ghost:hover {
background: rgba(122, 53, 168, 0.08);
color: #6b2f95;
border-color: rgba(122, 53, 168, 0.55);
} .perf-related {
background: #ffffff;
border-top: 1px solid rgba(126, 95, 170, 0.12);
border-bottom: 1px solid rgba(126, 95, 170, 0.12);
}
.perf-related-card {
display: block;
height: 100%;
background: #fff;
border: 1px solid rgba(125, 93, 170, 0.22);
border-radius: 14px;
padding: 18px 16px;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.perf-related-card strong {
display: block;
color: #2f2350;
font-size: 15px;
margin-bottom: 6px;
}
.perf-related-card span {
display: block;
color: #5b4a79;
font-size: 13px;
line-height: 1.55;
margin-bottom: 10px;
}
.perf-related-card em {
font-style: normal;
color: #7a35a8;
font-size: 12px;
font-weight: 700;
}
.perf-related-card:hover {
transform: translateY(-4px);
border-color: rgba(122, 53, 168, 0.42);
box-shadow: 0 10px 20px rgba(67, 40, 109, 0.1);
}
.perf-next-link {
background: #f8f4ff;
border-top: 1px solid rgba(114, 84, 158, 0.14);
border-bottom: 1px solid rgba(114, 84, 158, 0.14);
}
.perf-next-link .container {
padding-top: 18px;
padding-bottom: 18px;
}
.perf-next-link p {
margin: 0;
color: #5b4a79;
font-size: 14px;
line-height: 1.65;
}
.perf-next-link a {
color: #7a35a8;
font-weight: 700;
text-decoration: none;
border-bottom: 1px dashed rgba(122, 53, 168, 0.5);
}
.perf-next-link a:hover {
color: var(--orange);
border-bottom-color: rgba(255, 122, 0, 0.55);
}
p a {
color: var(--purple);
font-weight: 600;
transition: .3s;
}
p a:hover {
color: var(--orange);
font-weight: 600;
} .contact {
background: #ffffff;
border-top: 1px solid rgba(126, 95, 170, 0.12);
border-bottom: 1px solid rgba(126, 95, 170, 0.12);
}
.panel {
background: #ffffff;
border: 1px solid rgba(125, 93, 170, 0.2);
border-radius: 16px;
padding: 18px;
box-shadow: 0 8px 20px rgba(67, 40, 109, 0.07);
}
.page-contact .info {
background: #f8f4ff;
border: 1px solid rgba(125, 93, 170, 0.18);
}
.page-contact .info i {
color: #ff7a00;
}
.page-contact .info span {
color: #5b4a79;
}
.map-wrap {
border: 1px solid rgba(125, 93, 170, 0.2);
}
@media (max-width: 991px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 575px) {
.page-contact .service-radios {
grid-template-columns: 1fr;
}
}
.integration {
background: #ffffff;
border-top: 1px solid rgba(126, 95, 170, 0.12);
border-bottom: 1px solid rgba(126, 95, 170, 0.12);
}
.diagram-shell {
background: #ffffff;
border: 1px solid rgba(125, 93, 170, 0.18);
border-radius: 18px;
box-shadow: 0 10px 24px rgba(67, 40, 109, 0.08);
padding: 16px;
}
#integrationCanvas {
width: 100%;
height: 520px;
display: block;
border-radius: 14px;
border: 1px solid rgba(122, 90, 166, 0.34);
background: radial-gradient(circle at 32% 14%, rgba(139, 57, 183, 0.12), transparent 56%), #151d32;
}
.legend-item {
border: 1px solid rgba(125, 93, 170, 0.22);
background: #f8f4ff;
border-radius: 10px;
color: #564678;
}
@media (max-width: 575px) {
.page-growth #integrationCanvas {
height: 360px;
}
}
.ai-core,
.power,
.cta-sec {
background: #ffffff !important;
}
.split,
.agents {
background: linear-gradient(180deg, #f7f9ff 0%, #f1f4fc 100%) !important;
border-top: 1px solid rgba(115, 133, 168, 0.18);
border-bottom: 1px solid rgba(115, 133, 168, 0.18);
}
.ai-core-quote {
background: #f7f9ff;
border: 1px solid rgba(113, 130, 166, 0.24);
color: #30405f;
box-shadow: 0 10px 24px rgba(42, 58, 88, 0.06);
}
.split-col,
.power-wrap,
.power-item,
.agent-live {
background: #ffffff !important;
border: 1px solid rgba(113, 130, 166, 0.24) !important;
box-shadow: 0 14px 30px rgba(42, 58, 88, 0.08);
border-radius: 16px;
}
.split-col h3,
.power-item h4,
.agent-live-list h3,
.agent-role-item h4 {
color: #1f2940 !important;
}
.split-list li,
.power-item p,
.agent-role-item p {
color: #52627f !important;
}
.split-list i {
color: #8b39b7 !important;
}
.culture-hero-panel {
border-radius: 16px;
border: 1px solid rgba(212, 191, 244, 0.36);
background: rgba(33, 22, 58, 0.72);
padding: 20px 18px;
}
.culture-hero-panel h3 {
margin: 0 0 10px;
font-size: 18px;
font-weight: 800;
color: #fff;
}
.culture-hero-panel ul {
margin: 0;
padding: 0 0 0 18px;
display: grid;
gap: 7px;
}
.culture-hero-panel li {
color: #e4d7f8;
font-size: 14px;
line-height: 1.45;
}
.principles,
.loop-sec {
background: #ffffff;
border-top: 1px solid rgba(111, 128, 165, 0.14);
border-bottom: 1px solid rgba(111, 128, 165, 0.14);
}
.timeline,
.team {
background: #f7f9ff;
}
.p-grid,
.steps {
gap: 16px;
margin-top: 22px;
}
.team-grid {
gap: 16px;
margin-top: 18px;
}
.p-card,
.step,
.member {
background: #ffffff;
border: 1px solid rgba(111, 128, 165, 0.24);
border-radius: 14px;
box-shadow: 0 12px 24px rgba(45, 63, 96, 0.08);
}
.p-card h3,
.step h3,
.member h4 {
color: #1f2940;
}
.p-card p,
.step p,
.member p {
color: #53637f;
}
.culture-flow {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.culture-flow-item {
background: #ffffff;
border: 1px solid rgba(111, 128, 165, 0.24);
border-radius: 14px;
box-shadow: 0 12px 24px rgba(45, 63, 96, 0.08);
padding: 16px 14px;
}
.culture-flow-item h3 {
margin: 8px 0 6px;
font-size: 15px;
color: #1f2940;
}
.culture-flow-item p {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: #53637f;
}
.flow-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(139, 57, 183, 0.12);
color: #8b39b7;
font-size: 12px;
font-weight: 800;
}
.loop-center {
border-color: rgba(255, 122, 0, 0.5);
color: #1f2940;
background: radial-gradient(circle at 35% 25%, rgba(226, 205, 255, 0.88), rgba(243, 236, 255, 0.96));
}
.ln {
border-color: rgba(111, 128, 165, 0.24);
background: #ffffff;
color: #2f3f5f;
} .page-static {
background: #f4f6fb;
}
.page-static .breadcrumbs-wrap {
margin-top: 79px;
background: var(--bg-1);
border-top: 1px solid rgba(84, 103, 140, 0.12);
border-bottom: 1px solid rgba(84, 103, 140, 0.12);
}
.legal-sec {
padding: 72px 0 104px;
}
.legal-card {
background: #ffffff;
border: 1px solid rgba(111, 128, 165, 0.22);
border-radius: 18px;
box-shadow: 0 18px 34px rgba(45, 63, 96, 0.08);
padding: 36px 34px;
}
.legal-head {
border-bottom: 1px solid rgba(111, 128, 165, 0.2);
margin-bottom: 18px;
padding-bottom: 16px;
}
.legal-head h1 {
font-size: clamp(1.7rem, 3vw, 2.2rem);
line-height: 1.18;
margin: 0 0 8px;
font-weight: 800;
color: #1f2940;
}
.legal-head p {
margin: 0;
color: #637491;
font-size: 14px;
}
.legal-block + .legal-block {
margin-top: 18px;
}
.legal-block h2 {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.35;
color: #1f2940;
font-weight: 700;
}
.legal-block p {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: #475a7a;
}
.legal-block p + p {
margin-top: 10px;
}
.legal-block a {
color: #7b42b4;
font-weight: 600;
}
.gray-timeline .sv2-timeline__marker {
background: #f4f4f6;
box-shadow: none;
}
.gray-timeline .sv2-timeline__marker span {
color: var(--orange);
}
.svc-features-v2 {
background: #fbf9ff;
border-top: 1px solid rgba(114, 84, 158, 0.1);
border-bottom: 1px solid rgba(114, 84, 158, 0.1);
}
.svc-features-v2 .sv2-bento {
gap: 18px;
}
.svc-features-v2 .sv2-bento__item {
padding: 30px 28px 26px;
border-radius: 20px;
border: 1px solid rgba(111, 127, 165, 0.16);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 12px 28px rgba(36, 20, 63, 0.05);
transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.svc-features-v2 .sv2-bento__item::before {
content: "";
position: absolute;
top: 0;
left: 28px;
right: 28px;
height: 1px;
background: rgba(139, 57, 183, 0.08);
}
.svc-features-v2 .sv2-bento__item:hover {
transform: translateY(-2px);
border-color: rgba(139, 57, 183, 0.22);
box-shadow: 0 18px 30px rgba(36, 20, 63, 0.08);
}
.svc-features-v2 .sv2-bento__num {
margin-bottom: 14px;
font-size: 18px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--orange);
-webkit-text-fill-color: initial;
background: none;
line-height: 1;
}
.svc-features-v2 .sv2-bento__item h4 {
margin-bottom: 12px;
font-size: 24px;
line-height: 1.18;
letter-spacing: -0.02em;
color: #2f2350;
}
.svc-features-v2 .sv2-bento__item p {
font-size: 15px;
line-height: 1.8;
color: #5b4a79;
}
@media (max-width: 767px) {
.svc-features-v2 .sv2-bento__item {
padding: 24px 20px 22px;
border-radius: 18px;
}
.svc-features-v2 .sv2-bento__item::before {
left: 20px;
right: 20px;
}
.svc-features-v2 .sv2-bento__item h4 {
font-size: 21px;
}
}
@media (max-width: 991px) {
.legal-sec {
padding: 60px 0 88px;
}
.legal-card {
padding: 28px 22px;
}
}
@media (max-width: 575px) {
.legal-card {
padding: 22px 16px;
border-radius: 14px;
}
.legal-block h2 {
font-size: 17px;
}
.legal-block p {
font-size: 14px;
}
}
.ring,
.dot,
.dot.b {
animation: none !important;
}
@media (max-width: 1199px) {
.culture-flow {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.culture-flow {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 575px) {
.culture-flow {
grid-template-columns: 1fr;
}
} @media (max-width: 1199px) {
.sec-title {
font-size: clamp(2rem, 4vw, 2.6rem);
line-height: 1.15;
}
.hero-title,
.svc-hero__title,
.page-hero .hero-title {
font-size: clamp(2rem, 5vw, 3.1rem);
line-height: 1.1;
}
}
@media (max-width: 991px) {
.container {
padding-left: 18px;
padding-right: 18px;
}
.navbar-pz {
padding: 10px 0;
}
.nav-right {
gap: 10px;
}
.nav-links.open {
top: 58px;
max-height: calc(100vh - 58px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 28px;
}
.nav-links.open .dropdown-menu {
max-height: 46vh;
overflow-y: auto;
}
.sec-pad,
.sec {
padding: 74px 0 !important;
}
.hero,
.page-hero,
.svc-hero {
min-height: auto !important;
padding-top: 98px !important;
padding-bottom: 54px !important;
}
.hero-row,
.page-hero .hero-row,
.svc-hero .row {
row-gap: 24px;
min-height: auto !important;
}
.hero-copy,
.svc-hero__inner .col-lg-8,
.svc-hero__inner .col-lg-7,
.svc-hero__inner .col-lg-6 {
text-align: center;
}
.hero-actions,
.hero-buttons,
.svc-hero__actions {
justify-content: center;
align-items: center;
gap: 10px;
}
.hero-diagram-col,
.hero-visual-col,
.svc-hero__visual {
justify-content: center !important;
}
.hero-eq-diagram,
.growth-hero-diagram,
.hero-ai-visual,
.agent-live,
.diagram-shell,
.hero-form-card {
width: 100% !important;
max-width: 640px !important;
margin-left: auto;
margin-right: auto;
}
#heroCanvas,
#heroNeuralCanvas,
#heroAiCanvas,
#integrationCanvas,
#agentHubCanvas,
#agentHubCanvasPrev {
width: 100% !important;
max-width: 100%;
}
#integrationCanvas {
height: 420px !important;
}
#agentHubCanvas,
#agentHubCanvasPrev {
height: 420px !important;
}
.contact-grid,
.case-grid,
.power-grid,
.split-grid,
.agent-detail-grid,
.culture-flow,
.team-grid,
.steps,
.p-grid {
grid-template-columns: 1fr !important;
}
.service-radios {
grid-template-columns: 1fr !important;
}
.brand-track {
min-width: max-content;
}
}
@media (max-width: 767px) {
.logo-wrap .logo {
max-height: 44px;
width: auto;
}
.tl-wrap {
padding: 18px 0 0;
}
.tl-wrap::before {
content: "";
position: absolute;
top: 12px;
bottom: 12px;
left: 19px;
width: 2px;
background: linear-gradient(180deg, rgba(139, 57, 183, 0.42) 0%, rgba(255, 122, 0, 0.24) 100%);
}
#tlSteps {
row-gap: 14px !important;
}
#tlSteps > div {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
.tl-step {
text-align: left;
padding: 0 0 0 44px;
}
.tl-dot {
position: absolute;
left: 11px;
top: 3px;
margin: 0;
width: 18px;
height: 18px;
}
.tl-num {
margin-bottom: 4px;
font-size: 11px;
}
.tl-title {
margin-bottom: 6px;
font-size: 15px;
line-height: 1.4;
}
.tl-desc {
max-height: none;
opacity: 1;
overflow: visible;
font-size: 13px;
line-height: 1.6;
padding-right: 4px;
}
.lang-switch {
gap: 5px;
padding: 4px;
}
.lang-switch__link {
padding: 6px 8px;
gap: 5px;
font-size: 10px;
}
.lang-sw {
font-size: 12px;
}
.sec-title {
font-size: clamp(1.7rem, 8vw, 2.2rem);
}
.sec-sub,
.hero-sub,
.svc-hero__sub,
p {
font-size: 15px;
line-height: 1.65;
}
.hero-eq-diagram,
.growth-hero-diagram,
.hero-ai-visual {
height: 300px !important;
}
#integrationCanvas {
height: 360px !important;
}
#agentHubCanvas,
#agentHubCanvasPrev {
height: 380px !important;
}
}
@media (max-width: 575px) {
.container {
padding-left: 14px;
padding-right: 14px;
}
.svc-hero__sub {
color: #fff;
}
.contact .sec-sub {
color: #5b4a79;
}
.hero,
.page-hero,
.svc-hero {
padding-top: 55px !important;
padding-bottom: 33px !important;
}
.sec-pad,
.sec {
padding: 32px 0 !important;
}
.hero-title,
.svc-hero__title,
.page-hero .hero-title {
font-size: clamp(1.56rem, 9vw, 2rem);
line-height: 1.14;
}
.hero-actions a,
.hero-buttons a,
.svc-hero__actions a,
.btn-hero-1,
.btn-hero-2,
.btn-main,
.btn-cta-big {
width: 75%;
justify-content: center;
text-align: center;
}
.hero-eq-diagram,
.growth-hero-diagram,
.hero-ai-visual,
.hero-form-card {
border-radius: 14px !important;
height: 280px !important;
}
.hero-form-card {
height: auto !important;
padding: 16px 14px !important;
}
.footer .row > div {
text-align: center;
}
.footer-links {
padding-left: 0;
list-style: none;
}
} html,
body {
max-width: 100%;
overflow-x: hidden;
}
.hero-eq-diagram {
overflow: hidden;
}
.section-light{
background: transparent !important;
}
.thanks-box{
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: clamp(28px,4vw,48px);
}
.section-light .sec-sub{
color: #cbc6ee !important;
}
.section-light .sec-label{
color: #cb9cff !important;
}
.section-light .sec-title {
color: #f4f2ff !important;
}
.logos.sec-pad , .testimonials.sec-pad{
padding: 30px 0;
}
.title-area {
margin-bottom: 3rem;
}
@media (max-width: 991px) {
.nav-links {
display: none !important;
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
}
.nav-right {
gap: 8px;
}
.lang-switch {
order: 2;
margin-left: auto;
}
.btn-cta-nav {
display: none !important;
}
.breadcrumbs-wrap {
margin-top: 70px;
}
.hero-title,
.svc-hero__title,
.page-hero .hero-title {
font-size: clamp(1.7rem, 6.8vw, 2.25rem) !important;
line-height: 1.15;
}
.eq-head {
font-size: 16px !important;
line-height: 1.35;
}
.eq-node.growth {
max-width: 48%;
}
.eq-node .v {
font-size: 12px;
line-height: 1.18;
}
.reality .r-card {
margin-bottom: 30px;
height: calc(100% - 30px);
}
.title-area {
margin-bottom: 1.5rem;
}
.reality .r-card h4 {
font-size: 1rem;
margin-bottom: 6px;
}
.comp-col-header.new-h, .comp-col-header.old-h {
height: auto;
max-height: 70px;
}
.comp-item {
padding: 2px 15px;
font-size: 13px;
}
.comp-item.old .ic , .comp-item.new .ic {
font-size: 22px;
}
}
@media only screen and (max-width: 768px) {
.comp-quote {
margin-top: 25px;
font-size: 16px;
}
.btn-cta-big {
padding: 15px;
}
.svc-cta-v2__box .accent-orange {
display: block;
}
.svc-hero__scroll-link {
padding: 12px 15px;
border: 1px solid var(--gray-300);
border-radius: 14px;
}
.svc-overview-v2 .r-card {
text-align: center;
}
.svc-overview-v2 .r-icon {
margin-left: auto;
margin-right: auto;
}
.svc-features-v2 .sv2-bento__item h4 {
text-align: center;
}
.svc-features-v2 .sv2-bento__item p {
text-align: center;
}
}
@media (max-width: 575px) {
.hero-eq-diagram {
height: 272px !important;
padding: 12px 10px 10px !important;
}
.eq-stage {
height: 196px !important;
}
.eq-head {
font-size: 14px !important;
margin-bottom: 6px;
}
.eq-sub {
font-size: 9px !important;
margin-bottom: 6px;
}
.eq-node {
padding: 6px 8px !important;
border-radius: 10px;
}
.eq-node i {
width: 22px !important;
height: 22px !important;
font-size: 10px !important;
}
.eq-node .k {
font-size: 8px;
letter-spacing: 0.7px;
}
.eq-node .v {
font-size: 10px !important;
}
.eq-node.hi {
top: 26px !important;
left: 6px !important;
}
.eq-node.ai {
left: 6px !important;
bottom: 22px !important;
}
.eq-node.growth {
right: 4px !important;
max-width: 52%;
}
.eq-target-dot {
right: 92px !important;
width: 8px;
height: 8px;
}
.hero-title,
.svc-hero__title,
.page-hero .hero-title {
font-size: clamp(1.46rem, 7.7vw, 1.6rem) !important;
margin-bottom: 20px;
}
.hero-buttons {
gap: 18px;
}
.sec-label {
font-size: 10px;
margin-bottom: 6px;
}
.sec-label .line {
width: 10px;
height: 1.13px;
}
.sec-title {
font-size: clamp(1.6rem, 5vw, 1.8rem);
margin-bottom: 12px;
}
.sec-sub, .hero-sub, .svc-hero__sub, p {
font-size: 13px;
}
.reality .r-card {
padding: 18px 14px 16px;
}
.reality .r-icon {
width: 40px;
height: 40px;
margin-bottom: 8px;
}
.reality .r-card h4 {
font-size: 13px;
margin-bottom: 6px;
}
.reality .r-card p {
font-size: 12px;
}
.tl-wrap {
padding: 30px 0;
}
.sys-icon img {
width: 50px;
height: 50px;
}
.sys-card {
padding: 15px 12px;
}
.svc-cta-v2__box h2 {
font-size: clamp(1.3rem, 3vw, 2.6rem);
margin-bottom: 6px;
}
.svc-cta-v2__box p {
font-size: 15px;
margin-bottom: 15px;
}
.svc-cta-v2 .btn-cta-big {
font-size: 13px;
padding: 12px 18px;
}
.hero {
padding-top: 82px !important;
}
.svc-hero__canvas-wrap {
opacity: .4; 
}
}