:root {--primary-color: #00a8ff; --secondary-color: #00e0ff; --background-color: #0b1620; --surface-color: rgba(14, 26, 38, 0.66); --text-color: #f0f0f0; --text-color-secondary: #a0a0a0; --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, Ubuntu, Cantarell, 'Noto Sans', sans-serif; --glow-shadow: 0 0 15px rgba(0, 168, 255, 0.5), 0 0 30px rgba(0, 224, 255, 0.3); --success-color: #10b981; --error-color: #ef4444; --warning-color: #f59e0b; --max-width: 1200px; --accent-color: var(--primary-color); --gradient-primary: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); --glass-bg: rgba(14, 26, 38, 0.55); --glass-border: rgba(0, 168, 255, 0.14); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.35); --animation-duration: 0.3s; --transition-duration: 0.3s; --interaction-duration: 0.15s; --button-press-scale: 0.98; --input-focus-scale: 1.02; --header-offset-mobile: 56px; --header-offset-desktop: 100px; --focus-outline: 2px solid var(--primary-color); --focus-outline-offset: 2px; --reduced-motion: 0.1s; --safe-area-inset-top: env(safe-area-inset-top); --safe-area-inset-bottom: env(safe-area-inset-bottom); --safe-area-inset-left: env(safe-area-inset-left); --safe-area-inset-right: env(safe-area-inset-right); --scroll-behavior: smooth; --backface-visibility: hidden; --transform-style: preserve-3d; --perspective: 1000px; --gpu-acceleration: translateZ(0); --layer-promotion: will-change: transform; --composite-layer: transform3d(0, 0, 0)} html {scroll-behavior: var(--scroll-behavior); text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; contain: layout style; scroll-padding-top: 2rem; backface-visibility: var(--backface-visibility); transform-style: var(--transform-style); perspective: var(--perspective); overflow-x: hidden} html, body {margin: 0; font-family: var(--font-family); line-height: 1.6} *:focus-visible {outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); border-radius: 4px} @media (prefers-contrast: high) {*:focus-visible {outline: 3px solid #ffffff; outline-offset: 2px; background: rgba(255, 255, 255, 0.1)} } @media (prefers-reduced-motion: reduce) {*:focus-visible {outline: 2px solid var(--primary-color); outline-offset: 2px; transition: none} } button, .button, .nav__toggle, input[type="submit"], select, textarea {min-height: 44px; min-width: 44px; transform: var(--gpu-acceleration); backface-visibility: var(--backface-visibility)} .button, .nav__toggle, input, textarea, select {transform: var(--composite-layer); will-change: transform} @media (hover: hover) {.button:hover, .nav__toggle:hover, input:hover, textarea:hover, select:hover {transform: var(--composite-layer) scale(1.02); will-change: transform} } @media (max-width: 767px) {.nav__link {padding: 12px 16px; min-height: 44px; display: flex; align-items: center} .hero__actions .button {min-height: 48px; padding: 12px 24px} .contact-form input, .contact-form textarea, .contact-form select {min-height: 44px; padding: 12px 16px} .hero__gradient, .feature-card::before, .hero__badge, .hero__stat {animation-duration: 2s; transition-duration: 0.2s} .hero, .about, .services, .process, .contact {contain: layout style paint; will-change: auto} .button:hover, .nav__toggle:hover, input:hover, textarea:hover, select:hover {transform: var(--composite-layer)} .button:active, .nav__toggle:active {transform: var(--composite-layer) scale(0.98); transition-duration: 0.1s} .nav__menu {position: fixed; top: 100%; left: 0; right: 0; background: rgba(11, 22, 32, 0.94); border-top: 1px solid var(--glass-border); z-index: 1000; transform: translateY(-100%); transition: transform 0.3s ease} .nav__menu.active {transform: translateY(0)} .container {padding-left: 1rem; padding-right: 1rem} } .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0} .skip-link {position: absolute; top: -40px; left: 6px; background: var(--primary-color); color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px; z-index: 10000; transition: top 0.3s ease; font-weight: 600; font-size: 0.9rem} .skip-link:focus {top: 6px; outline: 2px solid white; outline-offset: 2px} img {max-width: 100%; height: auto; display: block; contain: layout style paint; aspect-ratio: auto} .container, .process__grid, .hero, .hero__content, .hero__bg {contain: layout style paint} .font-loading {font-family: var(--font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size-adjust: 0.5; font-synthesis: none; font-display: swap; contain: layout style paint; opacity: 1; visibility: visible} .font-loaded {font-family: var(--font-family); transition: font-family 0.1s ease; contain: layout style paint; opacity: 1; visibility: visible} h1, h2, h3, h4, h5, h6, p, span, div {font-display: swap; font-synthesis: none; contain: layout style} .hero__main {contain: layout style paint; transform: translateZ(0); min-height: 40vh} .hero__info {contain: layout style paint; transform: translateZ(0); min-height: 2rem} .hero__subtitle {contain: layout style paint; transform: translateZ(0); min-height: 1.2rem; font-display: swap; font-synthesis: none; text-rendering: optimizeSpeed} .hero__stats {contain: layout style paint; transform: translateZ(0); min-height: 4rem} .hero__stat {contain: layout style paint; transform: translateZ(0); min-height: 3rem; max-height: 3rem; min-width: 80px; max-width: 80px} .hero__stat-number {contain: layout style paint; transform: translateZ(0); min-height: 1.5rem; max-height: 1.5rem; font-display: swap; font-synthesis: none; text-rendering: optimizeSpeed} .hero__stat-label {contain: layout style paint; transform: translateZ(0); min-height: 0.8rem; max-height: 0.8rem; font-display: swap; font-synthesis: none; text-rendering: optimizeSpeed} .fonts-loading .hero__gradient, .fonts-loading .hero__badge, .fonts-loading .hero__stat {animation: none !important} .fonts-loaded .hero__gradient {animation: gradientShift 8s ease-in-out infinite} .fonts-loaded .hero__badge {animation: pulse 2s ease-in-out infinite} .fonts-loaded .hero__stat {animation: pulse 3s ease-in-out infinite} .button, button {transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; transition: all var(--interaction-duration) cubic-bezier(0.4, 0, 0.2, 1); contain: layout style paint} .button--pressed, button:active {transform: translateZ(0) scale(var(--button-press-scale)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3)} .nav__toggle {touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: all var(--interaction-duration) ease} .nav__toggle--active {transform: scale(0.95); background-color: rgba(0, 168, 255, 0.2)} input, textarea, select {transform: translateZ(0); backface-visibility: hidden; transition: all var(--interaction-duration) ease; contain: layout style paint} .input--focused {transform: translateZ(0) scale(var(--input-focus-scale)); box-shadow: 0 0 0 2px var(--primary-color)} .input--valid {border-color: var(--success-color); box-shadow: 0 0 0 1px var(--success-color)} .input--invalid {border-color: var(--error-color); box-shadow: 0 0 0 1px var(--error-color)} .button:hover:not(:disabled), button:hover:not(:disabled) {transform: translateZ(0) scale(1.02); box-shadow: 0 4px 12px rgba(0, 168, 255, 0.3)} @media (hover: none) and (pointer: coarse) {.button, button {transition: none; min-height: 44px; min-width: 44px} .button:hover:not(:disabled), button:hover:not(:disabled) {transform: none; box-shadow: none} .nav__toggle, input, textarea, select {min-height: 44px; min-width: 44px} } @media (prefers-reduced-motion: reduce) {.button, button, input, textarea, select, .nav__toggle {transition: none !important; animation: none !important} .button--pressed, button:active, .input--focused {transform: none !important} } button, .button, .nav__toggle, .nav__link, a, input[type="submit"], select, textarea {cursor: pointer} button:disabled, .button:disabled, input[type="submit"]:disabled {cursor: not-allowed} input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea {cursor: text} @media (hover: none) and (pointer: coarse) {button, .button, .nav__toggle, .nav__link, a, input[type="submit"], select, textarea {cursor: default} } .container {max-width: var(--max-width); margin: 0 auto; padding: 0 2rem} [id] {scroll-margin-top: var(--header-offset-mobile)} @media (min-width: 768px) {[id] {scroll-margin-top: var(--header-offset-desktop)} } h1, h2, h3, h4 {font-weight: 600; line-height: 1.2; margin-bottom: 1rem} .hero__title, .section__title {background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent} a {color: var(--primary-color); text-decoration: none; transition: color 0.3s} a:hover {color: var(--secondary-color)} ul {list-style: none} section {padding: 6rem 0; position: relative} .defer-section {content-visibility: auto; contain-intrinsic-size: 800px} .section__title {font-size: 2.5rem; margin-bottom: 1rem; text-shadow: var(--glow-shadow); text-align: center} .section__subtitle {font-size: 1.2rem; color: var(--text-color-secondary); text-align: center; margin-bottom: 3rem} .header {position: fixed; top: 0; left: 0; right: 0; z-index: 10000; width: 100%; background: rgba(11,22,32,0.65); border-bottom: 1px solid rgba(0,168,255,0.14); box-shadow: none; backdrop-filter: none} @supports (-ms-ime-align: auto) {.header {backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(26, 26, 26, 0.98)} } .nav {display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; max-width: var(--max-width); margin: 0 auto} .nav__logo {font-weight: 700; font-size: 1.3rem; color: var(--primary-color); text-shadow: 0 0 8px rgba(0,168,255,0.35)} .nav__toggle {display: block; background: none; border: none; color: var(--text-color); font-size: 1.5rem; cursor: pointer; transition: color 0.3s ease; z-index: 1001} .nav__toggle:hover {color: var(--primary-color)} .nav__toggle {position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center} .nav__toggle span {position: absolute; width: 22px; height: 2px; background: var(--text-color); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center} .nav__toggle span:nth-child(1) {transform: translateY(-6px)} .nav__toggle span:nth-child(2) {transform: translateY(0)} .nav__toggle span:nth-child(3) {transform: translateY(6px)} .nav__toggle.nav__toggle--active span:nth-child(1) {transform: translateY(0) rotate(45deg)} .nav__toggle.nav__toggle--active span:nth-child(2) {opacity: 0} .nav__toggle.nav__toggle--active span:nth-child(3) {transform: translateY(0) rotate(-45deg)} body.nav-open {overflow: hidden} .nav__menu {display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(11, 22, 32, 0.88); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0; flex-direction: column; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)} .nav__menu.active {display: flex} .nav-overlay {position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 999} .nav-overlay.active {opacity: 1; visibility: visible} .nav__item {padding: 0.5rem 0} .nav__link {display: block; padding: 0.75rem 1rem; color: var(--text-color); text-decoration: none; font-weight: 500; font-size: 1rem; transition: all 0.3s ease; position: relative} .nav__link:hover {color: var(--primary-color); background: rgba(0, 168, 255, 0.1)} .hero {min-height: 100vh; height: 100vh; box-sizing: border-box; max-width: unset !important; width: unset !important; overflow: unset !important; contain: unset !important; will-change: unset !important; visibility: unset !important; opacity: unset !important; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; padding: 6rem 1rem 2rem; background: none; margin-top: 0} .hero__bg {position: absolute; inset: 0; z-index: 1 !important; pointer-events: none; background: radial-gradient(80% 60% at 10% 50%, rgba(0,168,255,0.12) 0%, rgba(11,22,32,0.0) 40%), radial-gradient(70% 50% at 80% 20%, rgba(0,224,255,0.10) 0%, rgba(11,22,32,0.0) 45%), linear-gradient(135deg, rgba(7, 15, 24, 0.95) 0%, rgba(8, 18, 28, 0.97) 50%, rgba(5, 10, 16, 0.98) 100%); width: 100%; height: 100vh; transform: translateZ(0); backface-visibility: hidden; top: 0; left: 0; right: 0; bottom: 0; contain: none !important} .hero__gradient {position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 168, 255, 0.12) 0%, rgba(0, 224, 255, 0.06) 25%, rgba(11, 22, 32, 0.45) 50%, rgba(0, 168, 255, 0.10) 75%, rgba(0, 224, 255, 0.05) 100%); animation: none; background-image: none} .hero__bg::after {content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.3))} .hero__content {max-width: 100%; width: 100%; position: relative; z-index: 2 !important; display: flex; flex-direction: column; gap: 2rem; align-items: center; text-align: center; min-height: 70vh; justify-content: center; transform: translateZ(0); contain: none !important; background: none !important} .hero__main {display: flex; flex-direction: column; align-items: center; gap: 1rem; min-height: 10vh} .hero__title {font-size: 1.8rem; font-weight: 700; line-height: 1.1; margin: 0; display: flex; flex-direction: column; contain: none !important; min-height: 4rem; font-display: swap; font-synthesis: none; text-rendering: optimizeSpeed; gap: 0.25rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 1; visibility: visible; color: var(--text-color); min-height: 2.2rem} .hero__title-line {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis} .hero__badge {background: var(--gradient-primary); padding: 0.5rem 1rem; border-radius: 2rem; box-shadow: 0 4px 15px rgba(0, 168, 255, 0.3); transform: translateY(0); transition: transform 0.3s ease; opacity: 1; visibility: visible} .hero__badge:hover {transform: translateY(-2px)} .hero__badge-text {font-size: 0.9rem; font-weight: 600; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)} .hero__info {display: flex; flex-direction: column; gap: 1rem; max-width: 600px} .hero__subtitle {font-size: 1.2rem; color: var(--text-color); margin: 0; line-height: 1.4; font-weight: 500; min-height: 1.4rem} .hero__description {font-size: 1rem; color: var(--text-color-secondary); margin: 0; line-height: 1.6; min-height: 1.6rem} .hero__actions {display: flex; gap: 1rem; justify-content: center; flex-direction: column; align-items: center; min-height: 3rem; opacity: 1; visibility: visible} .hero__stats {display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; opacity: 1; visibility: visible} .hero__stat {display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1rem; background: rgba(0, 168, 255, 0.08); border: 1px solid rgba(0, 168, 255, 0.15); border-radius: 1rem; min-width: 80px; transition: all 0.3s ease} .hero__stat:hover {background: rgba(0, 168, 255, 0.12); border-color: rgba(0, 168, 255, 0.25); transform: translateY(-2px)} .hero__stat-number {font-size: 1.5rem; font-weight: 700; color: var(--primary-color); line-height: 1} .hero__stat-label {font-size: 0.8rem; color: var(--text-color-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500} .button {padding: 0.75rem 1.5rem; border: none; border-radius: 25px; cursor: pointer; font-weight: 600; font-size: 0.95rem; font-family: var(--font-family); transition: all 0.3s ease; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; text-decoration: none; width: 100%; max-width: 280px; touch-action: manipulation} .button--primary {background: var(--gradient-primary); color: #002b3d; box-shadow: 0 4px 15px rgba(0, 168, 255, 0.2)} .button--secondary {background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color)} .button:hover:not(:disabled) {transform: translateY(-2px)} .button--primary:hover:not(:disabled) {box-shadow: 0 6px 20px rgba(0, 168, 255, 0.4); color: #002b3d} .button--secondary:hover:not(:disabled) {background: var(--primary-color); color: #002b3d} .button:active:not(:disabled) {transform: translateY(0)} .button:disabled {cursor: not-allowed; opacity: 0.7} .button__text {display: inline-block} .button__icon {display: inline-block; transition: transform 0.3s ease; font-weight: bold} .button:hover .button__icon {transform: translateX(3px)} @keyframes gradientShift {0%, 100% {background: linear-gradient(135deg, rgba(0, 168, 255, 0.1) 0%, rgba(0, 224, 255, 0.05) 25%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 168, 255, 0.08) 75%, rgba(0, 224, 255, 0.03) 100%)} 50% {background: linear-gradient(135deg, rgba(0, 224, 255, 0.08) 0%, rgba(0, 168, 255, 0.05) 25%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 224, 255, 0.1) 75%, rgba(0, 168, 255, 0.05) 100%)} } @keyframes pulse {0%, 100% {opacity: 0.3} 50% {opacity: 1} } @media (min-width: 768px) {.nav {padding: 1rem 2rem} .nav__logo {font-size: 1.4rem} .nav__toggle {display: none} .nav__menu {display: flex; position: static; background: none; border: none; padding: 0; flex-direction: row; box-shadow: none; gap: 1.5rem} .nav__item {padding: 0} .nav__link {padding: 0.5rem 0; font-size: 0.95rem; background: none} .nav__link:hover {background: none; text-shadow: 0 0 5px var(--primary-color)} .hero {padding: 8rem 2rem 2rem} .hero__content {max-width: 700px; gap: 2.5rem} .hero__title {font-size: 2.1rem; gap: 0.4rem} .hero__subtitle {font-size: 1.25rem} .hero__description {font-size: 1.1rem} .hero__actions {flex-direction: row; gap: 1rem} .hero__stats {gap: 2.5rem} .button {padding: 1rem 2rem; font-size: 1rem; width: auto; max-width: none; border-radius: 8px; min-height: 50px} .hero__gradient {animation: gradientShift 8s ease-in-out infinite} } @media (min-width: 1024px) {.nav__logo {font-size: 1.5rem} .nav__menu {gap: 2rem} .nav__link {font-size: 1rem} .hero__content {max-width: 800px; gap: 3rem} .hero__title {font-size: 2.4rem; gap: 0.5rem} .hero__subtitle {font-size: 1.3rem} .hero__description {font-size: 1.1rem} .hero__actions {gap: 1.25rem} .hero__stats {gap: 3rem} } @media (max-width: 767px) {.hero__gradient {animation: none !important} .feature-card::before {transition: none !important} .feature-card:hover::before {transform: none !important} .hero__badge {transition: none !important} .hero__stat {transition: none !important} .hero__title, .section__title, .hero__subtitle {text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} .hero__bg {background: rgba(0, 0, 0, 0.8) !important} .hero__gradient {background: linear-gradient(135deg, rgba(0, 168, 255, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%) !important} } @media (max-width: 479px) {.hero__title {font-size: 1.5rem; gap: 0.25rem} .hero__subtitle {font-size: 1rem} .hero__description {font-size: 0.9rem} .hero__stats {gap: 1.5rem} .hero__title {text-rendering: optimizeSpeed} .hero__badge {transition: none} .hero__stat {transition: none} .feature-card::before {transition: none} .feature-card:hover::before {transform: none} } @media (max-width: 359px) {.nav {padding: 0.4rem 0.8rem} .nav__logo {font-size: 1.1rem} .nav__menu {padding: 0.4rem 0} .section__title {font-size: 1.6rem} .hero__actions {flex-direction: column; gap: 0.5rem} .button {width: 100%; max-width: 260px; padding: 0.75rem 1rem; font-size: 0.9rem} .container {padding: 0 1rem} .hero__title {font-size: 1.4rem; gap: 0.2rem} .hero__badge {padding: 0.4rem 0.8rem} .hero__badge-text {font-size: 0.8rem} .hero__subtitle {font-size: 0.9rem} .hero__description {font-size: 0.85rem} .hero__actions {gap: 0.5rem} .hero__stats {gap: 1rem} .hero__stat {padding: 0.75rem; min-width: 70px} .hero__stat-number {font-size: 1.2rem} .hero__stat-label {font-size: 0.7rem} } @media (min-width: 480px) and (max-width: 767px) {.hero__title {font-size: 1.8rem; gap: 0.3rem} .hero__subtitle {font-size: 1.1rem} .hero__description {font-size: 1rem} .hero__stats {gap: 2rem} } @media (min-width: 1280px) {:root {--max-width: 1400px} .hero__title {font-size: 6rem} .hero__content {max-width: 900px} .section__title {font-size: 3rem} } @media (min-width: 1536px) {:root {--max-width: 1600px} .hero__title {font-size: 6.5rem} .section__title {font-size: 3.2rem} } .high-contrast {--primary-color: #00ffff; --secondary-color: #ffffff; --text-color: #ffffff; --text-color-secondary: #cccccc; --background-color: #000000; --glass-bg: rgba(0, 0, 0, 0.9); --glass-border: rgba(255, 255, 255, 0.3)} .low-performance {--animation-duration: 0.1s; --transition-duration: 0.1s} .low-performance * {animation-duration: 0.1s !important; transition-duration: 0.1s !important} .low-performance .hero__gradient, .low-performance .feature-card::before {animation: none !important} .is-scrolling {pointer-events: none} .is-scrolling .hero__gradient, .is-scrolling .feature-card::before {animation-play-state: paused} .is-scrolling * {will-change: auto} @media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important} .hero__gradient, .feature-card::before, .hero__badge, .hero__stat {animation: none !important; transition: none !important} } @media (prefers-color-scheme: dark) {:root {--background-color: #000000; --text-color: #ffffff; --text-color-secondary: #cccccc} } @media (max-width: 767px) {.hero__gradient {animation-duration: 3s} .feature-card::before {animation-duration: 2s} .hero__badge {animation-duration: 2s} .hero__stat {animation-duration: 1.5s} .hero__gradient, .feature-card::before, .hero__badge, .hero__stat {will-change: auto} .hero, .about, .services, .process, .contact {contain: layout style paint} } @media (max-width: 480px) {.hero__title {font-size: 1.5rem; line-height: 1.2} .hero__subtitle {font-size: 1rem} .hero__description {font-size: 0.9rem} .button {padding: 14px 20px; font-size: 0.9rem} * {animation-duration: 0.5s !important; transition-duration: 0.2s !important} .hero__gradient {animation: none !important} .feature-card::before {animation: none !important} .hero, .about, .services, .process, .contact {contain: layout style paint; will-change: auto} } .reduced-motion .hero__gradient, .reduced-motion .feature-card::before, .reduced-motion .hero__badge, .reduced-motion .hero__stat {animation: none !important; transition: none !important} .mobile-optimized .hero__gradient, .mobile-optimized .feature-card::before, .mobile-optimized .hero__badge, .mobile-optimized .hero__stat {animation: none !important; transition: none !important} .lazy {opacity: 0; transition: opacity 0.3s ease-in-out} .lazy.loaded {opacity: 1} .skip-link {position: absolute; top: -100px; left: 0; background: var(--primary-color); color: #fff; padding: 0.75rem 1.25rem; z-index: 10000; transition: top 0.3s ease} .skip-link:focus {top: 0} .about {background: rgba(14, 26, 38, 0.28)} .about__content {display: grid; gap: 4rem; align-items: center} .about__intro {font-size: 1.2rem; font-weight: 500; color: var(--primary-color); margin-bottom: 1.5rem} .about__highlights {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; justify-items: center; align-items: stretch; max-width: 600px; margin-left: auto; margin-right: auto} .highlight {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-width: 160px; padding: 1.1rem 1.2rem; background: rgba(0, 168, 255, 0.08); border: 1px solid rgba(0, 168, 255, 0.13); border-radius: 15px; backdrop-filter: blur(10px); transition: all 0.3s ease; box-sizing: border-box} .highlight__icon {font-size: 1.5rem; margin-bottom: 0.2rem} .highlight__text {color: var(--text-color); font-weight: 500; font-size: 1rem; text-align: center; white-space: normal} @media (max-width: 480px) {.about__highlights {grid-template-columns: 1fr 1fr; gap: 0.7rem} .highlight {min-width: 0; padding: 0.8rem 0.5rem} .highlight__icon {font-size: 1.2rem} .highlight__text {font-size: 0.92rem} } .about__image-placeholder {height: 300px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; backdrop-filter: blur(10px); box-shadow: var(--shadow-glass)} .code-animation {display: flex; flex-direction: column; gap: 1rem} .code-line {height: 6px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); border-radius: 3px; animation: pulse 2s infinite} .code-line:nth-child(1) {width: 120px; animation-delay: 0s} .code-line:nth-child(2) {width: 80px; animation-delay: 0.5s} .code-line:nth-child(3) {width: 100px; animation-delay: 1s} .code-line:nth-child(4) {width: 60px; animation-delay: 1.5s} @keyframes pulse {0%, 100% {opacity: 0.3} 50% {opacity: 1} } .mobile-first {background: linear-gradient(135deg, rgba(0, 168, 255, 0.08) 0%, rgba(0, 224, 255, 0.05) 100%); padding: 4rem 0} .mobile-features {display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0} .feature-card {background: rgba(14, 26, 38, 0.66); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 1.5rem; backdrop-filter: blur(12px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden} .feature-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); transform: scaleX(0); transition: transform 0.3s ease; transform-origin: left} .feature-card:hover::before {transform: scaleX(1)} .feature-card:hover {transform: translateY(-3px); border-color: rgba(0, 168, 255, 0.3); box-shadow: 0 8px 25px rgba(0, 168, 255, 0.15)} .feature-icon {font-size: 2rem; margin-bottom: 1rem; display: block} .feature-card h3 {color: var(--primary-color); margin-bottom: 0.75rem; font-size: 1.2rem; font-weight: 600} .feature-card p {color: var(--text-color-secondary); line-height: 1.5; font-size: 0.95rem} .performance-stats {margin-top: 3rem; text-align: center} .performance-stats h3 {color: var(--primary-color); margin-bottom: 2rem; font-size: 1.4rem} .stats-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 500px; margin: 0 auto} .stat-item {background: rgba(0, 168, 255, 0.1); border: 1px solid rgba(0, 168, 255, 0.2); border-radius: 12px; padding: 1rem; backdrop-filter: blur(10px)} .stat-value {font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.25rem} .stat-label {font-size: 0.85rem; color: var(--text-color-secondary); text-transform: uppercase; letter-spacing: 0.5px} @media (min-width: 768px) {.mobile-first {padding: 6rem 0} .mobile-features {grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 3rem 0} .feature-card {padding: 2rem} .feature-card h3 {font-size: 1.3rem} .feature-card p {font-size: 1rem} .stat-value {font-size: 1.8rem} } @media (min-width: 1024px) {.mobile-features {grid-template-columns: repeat(4, 1fr); gap: 2.5rem} .stats-grid {grid-template-columns: repeat(4, 1fr)} .stat-item {padding: 1.5rem} .stat-value {font-size: 2rem} } .services__container {display: grid; gap: 2rem; margin-top: 3rem; grid-template-columns: 1fr; justify-content: center; align-content: start} .service-card {background-color: var(--surface-color); padding: 2.5rem 2rem; border-radius: 12px; border: 1px solid rgba(0, 168, 255, 0.12); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: transform 0.3s, box-shadow 0.3s; text-align: left} .service-card--featured {position: relative} .service-card__icon {font-size: 3rem; margin-bottom: 1rem} .service-card h3 {background: -webkit-linear-gradient(45deg, var(--primary-color), var(--secondary-color)); background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5rem; margin-bottom: 1rem} .service-card__summary {font-size: 1.1rem; margin-bottom: 1.5rem; color: var(--text-color-secondary)} .service-card__features {list-style: none; margin-bottom: 1.5rem} .service-card__features li {padding: 0.5rem 0; padding-left: 1.5rem; position: relative} .service-card__features li::before {content: '✓'; position: absolute; left: 0; color: var(--primary-color); font-weight: bold} .service-card__tech {display: flex; flex-wrap: wrap; gap: 0.5rem} .tech-tag {background: rgba(0, 168, 255, 0.1); color: var(--primary-color); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; border: 1px solid rgba(0, 168, 255, 0.3)} .service-card:hover {transform: translateY(-10px); box-shadow: var(--glow-shadow); border-color: rgba(0, 168, 255, 0.5)} .pricing {background: rgba(14, 26, 38, 0.28); padding: 6rem 0} .pricing-info {max-width: 800px; margin: 0 auto} .price-range {display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem} @media (min-width: 768px) {.price-range {grid-template-columns: repeat(2, 1fr); gap: 2.5rem} } .price-card {background: var(--surface-color); border: 1px solid rgba(0, 168, 255, 0.12); border-radius: 20px; padding: 2rem; text-align: center; backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative} .price-card:hover {transform: translateY(-5px); border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)} .price-card--special {border: 2px solid var(--primary-color); background: rgba(0, 168, 255, 0.1)} .special-badge {position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--primary-color); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600} .price-card h3 {color: var(--primary-color); margin-bottom: 1rem; font-size: 1.4rem} .price {font-size: 2rem; font-weight: 700; color: var(--text-color); margin-bottom: 1rem; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent} .price-card p {color: var(--text-color-secondary); margin-bottom: 1.5rem} .price-card ul {text-align: left; margin-bottom: 2rem} .price-card li {padding: 0.5rem 0; color: var(--text-color)} @media (max-width: 767px) {.pricing .price-card .button {width: auto; max-width: 220px; min-height: 44px; padding: 0.65rem 1rem; border-radius: 12px; margin: 0.25rem auto 0} .process__cta .button {width: auto; max-width: 240px; min-height: 44px; padding: 0.65rem 1rem; border-radius: 12px; margin: 0.25rem auto 0} } @media (min-width: 360px) and (max-width: 767px) {.button, button[type="button"], button[type="submit"], input[type="submit"], input[type="button"] {width: auto; max-width: 200px; min-height: 40px; padding: 0.55rem 0.9rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.1; margin-left: auto; margin-right: auto} .hero__actions .button {width: auto; max-width: 200px} .contact-form .button, .contact-form button[type="submit"] {width: auto; max-width: 200px} .process__cta .button {max-width: 200px} .pricing .price-card .button {max-width: 200px} } .why-us {background: rgba(14, 26, 38, 0.28)} .why-us__grid {display: grid; gap: 2rem; margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); justify-items: center; justify-content: center} .why-us__item {text-align: center; padding: 2rem 1.5rem; background: var(--surface-color); border-radius: 12px; border: 1px solid rgba(0, 168, 255, 0.12); transition: transform 0.3s} .why-us__item:hover {transform: translateY(-5px)} .why-us__icon {font-size: 2.5rem; margin-bottom: 1rem} .why-us__item h3 {color: var(--primary-color); margin-bottom: 1rem} .process {background: linear-gradient(135deg, rgba(0,168,255,0.07) 0%, rgba(0,224,255,0.04) 100%); padding: 4rem 0; position: relative; overflow: hidden} .process::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(0, 168, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(0, 224, 255, 0.1) 0%, transparent 50%); pointer-events: none} .process__grid {display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 3rem 0} .process__step {background: var(--surface-color); border: 1px solid rgba(0, 168, 255, 0.12); border-radius: 1rem; padding: 2rem; transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease; will-change: transform} .process__step--hidden {opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease var(--animation-delay, 0s), transform 0.6s ease var(--animation-delay, 0s)} .process__step--visible {opacity: 1; transform: translateY(0)} .process__step:hover {transform: translateY(-5px); box-shadow: var(--shadow-glass), 0 0 25px rgba(0, 168, 255, 0.2)} .process__step-header {display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem} .process__step-number {width: 3rem; height: 3rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: white; box-shadow: 0 0 20px rgba(0, 168, 255, 0.4); flex-shrink: 0} .process__step-icon {font-size: 2rem; opacity: 0.8} .process__step-content h3 {margin-bottom: 1rem; font-size: 1.4rem; color: var(--primary-color); font-weight: 600} .process__step-content p {color: var(--text-color-secondary); line-height: 1.6; margin-bottom: 1.5rem} .process__step-features {list-style: none; padding: 0; margin: 0} .process__step-features li {position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--text-color); font-size: 0.95rem} .process__step-features li::before {content: '✓'; position: absolute; left: 0; top: 0; color: var(--primary-color); font-weight: bold; font-size: 1rem} .process__cta {text-align: center; margin-top: 4rem; padding: 3rem; background: var(--surface-color); border: 1px solid rgba(0, 168, 255, 0.12); border-radius: 1rem} .process__cta h3 {font-size: 2rem; color: var(--primary-color); margin-bottom: 1rem} .process__cta p {color: var(--text-color-secondary); margin-bottom: 2rem; font-size: 1.1rem} @media (min-width: 768px) {.process__grid {grid-template-columns: repeat(2, 1fr); gap: 2.5rem} .process__step {padding: 2.5rem} .process__step-content h3 {font-size: 1.5rem} } @media (min-width: 1024px) {.process__grid {gap: 3rem} .process__step {padding: 3rem} .process__step-content h3 {font-size: 1.6rem} } @media (max-width: 767px) {.process {padding: 3rem 0} .process__grid {gap: 1.5rem; margin: 2rem 0} .process__step {padding: 1.5rem} .process__step-header {gap: 0.75rem; margin-bottom: 1rem} .process__step-number {width: 2.5rem; height: 2.5rem; font-size: 1rem} .process__step-icon {font-size: 1.5rem} .process__step-content h3 {font-size: 1.3rem} .process__step-content p {font-size: 0.95rem} .process__step-features li {font-size: 0.9rem; padding-left: 1.25rem} .process__cta {margin-top: 3rem; padding: 2rem} .process__cta h3 {font-size: 1.5rem} .hero__content {padding: 2rem 1rem; text-align: center} .hero__title {font-size: 2rem; line-height: 1.2; margin-bottom: 1rem} .hero__subtitle {font-size: 1rem; margin-bottom: 1.5rem} .hero__actions {flex-direction: column; gap: 1rem; align-items: center} .hero__actions .button {width: 100%; max-width: 280px} .services__container {grid-template-columns: 1fr; gap: 2rem} .service-card {padding: 1.5rem} .contact__wrapper {grid-template-columns: 1fr; gap: 2rem} .contact-form {padding: 1.5rem} } .contact {background: rgba(14, 26, 38, 0.28)} .contact__wrapper {display: grid; gap: 4rem; margin-top: 3rem} .contact__info {background: var(--surface-color); padding: 2rem; border-radius: 12px; border: 1px solid rgba(0, 168, 255, 0.12)} .contact__info h3 {color: var(--primary-color); margin-bottom: 1.5rem} .contact__item {margin-bottom: 1rem; padding: 0.5rem 0} .contact__item strong {color: var(--text-color); display: inline-block; width: 120px} .contact__benefits {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1)} .contact__benefits h4 {color: var(--primary-color); margin-bottom: 1rem} .contact__benefits ul {list-style: none} .contact__benefits li {padding: 0.3rem 0} .contact-form {background: var(--surface-color); border: 1px solid rgba(0, 168, 255, 0.12); padding: 2rem; border-radius: 20px; box-shadow: var(--shadow-glass)} .contact-form input, .contact-form textarea {width: 100%; padding: 1rem; margin-bottom: 1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease} .contact-form input::placeholder, .contact-form textarea::placeholder {color: rgba(255, 255, 255, 0.6)} .contact-form input:focus, .contact-form textarea:focus {outline: none; border-color: var(--accent-color); background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1)} .form-status {margin: 1rem 0; padding: 1rem; border-radius: 8px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease} .form-status--visible {opacity: 1; visibility: visible} .button--loading {opacity: 0.7; pointer-events: none} .hidden {display: none !important} .form-status.success {background-color: rgba(46, 204, 113, 0.2); border: 1px solid rgba(46, 204, 113, 0.3); color: #2ecc71} .form-status.error {background-color: rgba(231, 76, 60, 0.2); border: 1px solid rgba(231, 76, 60, 0.3); color: #e74c3c} .button-loader {animation: spin 1s linear infinite} @keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(360deg)} } .button {padding: 0.75rem 1.5rem; border: none; border-radius: 25px; cursor: pointer; font-weight: 600; font-size: 0.95rem; font-family: var(--font-family); transition: all 0.3s ease; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; text-decoration: none; width: 100%; max-width: 280px; touch-action: manipulation} .button--primary {background: var(--gradient-primary); color: #002b3d; box-shadow: 0 4px 15px rgba(0, 168, 255, 0.2)} .button--secondary {background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color)} .button:hover:not(:disabled) {transform: translateY(-2px)} .button--primary:hover:not(:disabled) {box-shadow: 0 6px 20px rgba(0, 168, 255, 0.4); color: #002b3d} .button--secondary:hover:not(:disabled) {background: var(--primary-color); color: #002b3d} .button:active:not(:disabled) {transform: translateY(0)} .button:disabled {cursor: not-allowed; opacity: 0.7} .button__text {display: inline-block} .button__icon {display: inline-block; transition: transform 0.3s ease; font-weight: bold} .button:hover .button__icon {transform: translateX(3px)} .footer {background: rgba(11, 22, 32, 0.9); border-top: 1px solid rgba(0, 168, 255, 0.12); padding: 3rem 0 1rem} .footer__content {display: grid; gap: 2rem; margin-bottom: 2rem} .footer__main h3 {color: var(--primary-color); margin-bottom: 0.5rem} .footer__main p {color: var(--text-color-secondary)} .footer__links-wrapper {display: grid; gap: 2rem} .footer__section h4 {color: var(--text-color); margin-bottom: 1rem} .footer__section ul {display: flex; flex-direction: column; gap: 0.5rem} .footer__section a {color: var(--text-color-secondary); transition: color 0.3s} .footer__section a:hover {color: var(--primary-color)} .footer__bottom {text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-color-secondary)} @media (min-width: 768px) {.hero__title {font-size: 4rem} .hero::before {inset: 0; width: auto; height: auto} .about__content {grid-template-columns: 1fr 1fr} .services__container {grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))} .why-us__grid {grid-template-columns: repeat(2, 1fr)} .contact__wrapper {grid-template-columns: 1fr 1fr} .footer__content {grid-template-columns: 2fr 1fr} .footer__links-wrapper {grid-template-columns: repeat(2, 1fr)} } @media (min-width: 1024px) {.hero__title {font-size: 5rem} .services__container {grid-template-columns: repeat(2, 1fr)} .why-us__grid {grid-template-columns: repeat(2, 1fr)} .nav__menu {gap: 3rem} } @media (max-width: 767px) {* {animation: none !important; transition: none !important} .hero__gradient, .feature-card::before, .hero__badge, .hero__stat, .button, .feature-card, .highlight, .city-card, .benefit-item {animation: none !important; transition: none !important} .hero__gradient {animation: none !important} .feature-card::before {transition: none !important} .feature-card:hover::before {transform: none !important} .hero__badge {transition: none !important} .hero__stat {transition: none !important} .hero__title, .section__title, .hero__subtitle {text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} .hero__bg {background: rgba(0, 0, 0, 0.8) !important} .hero__gradient {background: linear-gradient(135deg, rgba(0, 168, 255, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%) !important} } @media (max-width: 359px) {.nav {padding: 0.4rem 0.8rem} .nav__logo {font-size: 1.1rem} .nav__menu {padding: 0.4rem 0} .section__title {font-size: 1.6rem} .hero__actions {flex-direction: column; gap: 0.5rem} .button {width: 100%; max-width: 260px; padding: 0.75rem 1rem; font-size: 0.9rem} .about__highlights {flex-direction: column; gap: 0.8rem} .highlight {width: 100%; max-width: 260px; justify-content: center; padding: 0.7rem 1rem} .highlight__text {font-size: 0.8rem} .local-cities {grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0} .city-card {padding: 0.8rem} .city-card h3 {font-size: 1.2rem} .local-benefits {grid-template-columns: 1fr; gap: 0.8rem} .process__step {padding: 0.8rem} .process__step:not(:last-child)::after {display: none} .contact__wrapper {grid-template-columns: 1fr; gap: 1.2rem} .contact-form {padding: 0.8rem} .price-range {grid-template-columns: 1fr; gap: 0.8rem} .price-card {padding: 0.8rem} .price {font-size: 1.4rem} .container {padding-left: 0.6rem; padding-right: 0.6rem} .hero__title {font-size: 1.6rem; line-height: 1.1} .hero__subtitle {font-size: 0.85rem} .hero__description {font-size: 0.8rem} .hero__stats {grid-template-columns: 1fr; gap: 0.8rem} .hero__stat {padding: 0.6rem} .hero__stat-number {font-size: 1.3rem} .hero__stat-label {font-size: 0.7rem} .nav__menu {position: fixed; top: 100%; left: 0; right: 0; background: var(--background-color); border-top: 1px solid var(--glass-border); z-index: 1000; transform: translateY(-100%); transition: transform 0.3s ease; padding: 1rem 0.8rem} .nav__menu.active {transform: translateY(0)} .nav__link {padding: 0.8rem 1rem; font-size: 0.9rem} .city-card {padding: 1.2rem} .city-card h3 {font-size: 1.1rem} .local-benefits {margin: 2rem auto 0; padding: 0 0.8rem} .process__step {flex-direction: column; text-align: center} .process__step:not(:last-child)::after {display: none} .contact__wrapper {grid-template-columns: 1fr} .contact-form {order: -1} .price-range {grid-template-columns: 1fr; gap: 1rem} .price-card {padding: 1.2rem} .price {font-size: 1.3rem} .container {padding: 0 1rem} .hero__title {font-size: 1.6rem; line-height: 1.1} .hero__subtitle {font-size: 0.85rem} .hero__description {font-size: 0.8rem} .hero__stats {grid-template-columns: 1fr; gap: 0.8rem} .hero__stat {padding: 0.6rem} .hero__stat-number {font-size: 1.3rem} .hero__stat-label {font-size: 0.7rem} .nav__menu {position: fixed; top: 100%; left: 0; right: 0; background: var(--background-color); border-top: 1px solid var(--glass-border); z-index: 1000; transform: translateY(-100%); transition: transform 0.3s ease; padding: 1rem 0.8rem} .nav__menu.active {transform: translateY(0)} .nav__link {padding: 0.8rem 1rem; font-size: 0.9rem} } @media (min-width: 360px) and (max-width: 479px) {.nav {padding: 0.5rem 1rem} .nav__logo {font-size: 1.2rem} .nav__menu {padding: 0.5rem 0} .section__title {font-size: 1.8rem} .hero__actions {flex-direction: column; gap: 0.75rem} .button {width: 100%; max-width: 280px} .about__highlights {flex-direction: column; gap: 1rem} .highlight {width: 100%; max-width: 280px; justify-content: center; padding: 0.8rem 1.2rem} .local-cities {grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0} .city-card {padding: 1.5rem} .local-benefits {margin: 3rem auto 0; padding: 0 1rem} .process__step {flex-direction: column; text-align: center} .process__step:not(:last-child)::after {display: none} .contact__wrapper {grid-template-columns: 1fr} .contact-form {order: -1} .price-range {grid-template-columns: 1fr; gap: 1.5rem} .price-card {padding: 1.5rem} .price {font-size: 1.5rem} .hero__title {text-rendering: optimizeSpeed} .hero__badge {transition: none} .hero__stat {transition: none} .feature-card::before {transition: none} .feature-card:hover::before {transform: none} } @media (min-width: 480px) and (max-width: 767px) {.nav {padding: 0.5rem 1rem} .nav__logo {font-size: 1.3rem} .nav__menu {padding: 0.5rem 0} .section__title {font-size: 2rem} .hero__actions {flex-direction: column; gap: 0.75rem} .button {width: 100%; max-width: 300px} .about__highlights {flex-direction: column; gap: 1rem} .highlight {width: 100%; max-width: 300px; justify-content: center; padding: 0.8rem 1.2rem} .local-cities {grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0} .city-card {padding: 1.5rem} .local-benefits {margin: 3rem auto 0; padding: 0 1rem} .process__step {flex-direction: column; text-align: center} .process__step:not(:last-child)::after {display: none} .contact__wrapper {grid-template-columns: 1fr} .contact-form {order: -1} .price-range {grid-template-columns: 1fr; gap: 1.5rem} .price-card {padding: 1.5rem} .price {font-size: 1.5rem} } .references {padding: 6rem 0; background: linear-gradient(135deg, #0b1620 0%, #0e1a26 100%); position: relative; overflow: hidden} .references::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(40% 40% at 15% 85%, rgba(0, 191, 255, 0.08) 0%, transparent 60%), radial-gradient(40% 40% at 85% 15%, rgba(0, 224, 255, 0.08) 0%, transparent 60%); pointer-events: none} .references__grid {display: grid; gap: 2rem; margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-items: center; justify-content: center} .reference-card {display: flex; flex-direction: column; background: var(--surface-color); backdrop-filter: blur(12px); border: 1px solid rgba(0, 168, 255, 0.12); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; color: inherit; text-decoration: none; height: 100%} .reference-card:hover {transform: translateY(-12px) scale(1.02); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--primary-color); border-color: var(--primary-color); color: inherit} .reference-card__header {position: relative; height: 200px; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)} .reference-card__image {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem} .reference-card__screenshot {width: 100%; max-width: 300px; transform: perspective(1000px) rotateX(15deg) rotateY(-5deg); transition: transform 0.3s ease} .reference-card:hover .reference-card__screenshot {transform: perspective(1000px) rotateX(10deg) rotateY(-2deg) scale(1.05)} .website-mockup {background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)} .browser-bar {background: #f0f0f0; height: 24px; display: flex; align-items: center; padding: 0 0.5rem; gap: 0.5rem} .browser-dots {display: flex; gap: 4px} .browser-dots span {width: 8px; height: 8px; border-radius: 50%} .browser-dots span:nth-child(1) {background: #ff5f57} .browser-dots span:nth-child(2) {background: #ffbd2e} .browser-dots span:nth-child(3) {background: #28ca42} .browser-url {background: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; color: #666; flex: 1; text-align: center} .website-content {height: 80px; padding: 0.5rem; display: flex; flex-direction: column; gap: 4px} .content-header {font-size: 16px; text-align: center; margin-bottom: 4px} .content-lines {display: flex; flex-direction: column; gap: 3px} .line {height: 4px; border-radius: 2px; animation: pulse 2s ease-in-out infinite} .line:nth-child(1) {animation-delay: 0s} .line:nth-child(2) {animation-delay: 0.3s} .line:nth-child(3) {animation-delay: 0.6s} .health-line {background: linear-gradient(90deg, #4CAF50, #81C784)} .beauty-line {background: linear-gradient(90deg, #E91E63, #F8BBD9)} .tools-line {background: linear-gradient(90deg, #FF9800, #FFB74D)} .website-content.health {background: linear-gradient(135deg, #E8F5E8, #F1F8E9)} .website-content.beauty {background: linear-gradient(135deg, #FCE4EC, #F3E5F5)} .website-content.tools {background: linear-gradient(135deg, #FFF3E0, #FFF8E1)} @keyframes pulse {0%, 100% {opacity: 0.6} 50% {opacity: 1} } .reference-card__content {padding: 2rem; flex: 1; display: flex; flex-direction: column; gap: 1rem} .reference-card__content h3 {font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; background: -webkit-linear-gradient(45deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent} .reference-card__category {color: var(--primary-color); font-size: 0.9rem; font-weight: 500; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px} .reference-card__description {color: rgba(255, 255, 255, 0.85); line-height: 1.6; font-size: 0.95rem; flex: 1} .reference-card__features {display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 1rem 0} .feature-tag {background: rgba(0, 168, 255, 0.1); border: 1px solid rgba(0, 168, 255, 0.2); border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.8rem; color: var(--primary-color); text-align: center; transition: all 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis} .feature-tag:hover {background: rgba(0, 168, 255, 0.15); border-color: var(--primary-color); transform: translateY(-1px)} .reference-card__results {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-top: 1.2rem} .result {text-align: center} .result-number {font-size: 1.2rem; color: var(--primary-color); margin-bottom: 0.3rem; font-weight: bold} .result-label {font-size: 0.75rem; color: var(--text-color-secondary); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2} .references__cta {text-align: center; margin-top: 4rem; padding: 3rem 2rem; background: var(--surface-color); backdrop-filter: blur(12px); border: 1px solid rgba(0, 168, 255, 0.12); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); transition: all 0.3s ease} .references__cta:hover {border-color: var(--primary-color); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3)} .references__cta h3 {font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent} .references__cta p {color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; margin-bottom: 2rem} .legal-page {padding-top: 8rem; padding-bottom: 6rem; background: linear-gradient(180deg, rgba(12, 17, 33, 0.8) 0%, #0c1121 100%)} .legal-content {max-width: 900px; margin: 0 auto; text-align: left} .legal-card {margin-bottom: 2rem; padding: 2.5rem; background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--shadow-glass)} .legal-card--highlight {border-color: var(--accent-color); box-shadow: 0 0 25px rgba(0, 168, 255, 0.15)} .legal-content h2 {font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; margin-top: 0; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; border-bottom: 1px solid var(--glass-border); padding-bottom: 1rem} .legal-content h3 {color: var(--accent-color); font-size: 1.2rem; margin-top: 2rem; margin-bottom: 1rem; font-weight: 600} .legal-content p {margin-bottom: 1rem; line-height: 1.8; color: rgba(255, 255, 255, 0.8)} .legal-content a {color: var(--accent-color); text-decoration: none; font-weight: 500; transition: color 0.3s ease} .legal-content a:hover {color: white; text-decoration: underline} .definition-list {display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem} .definition-list dt {font-weight: 600; color: rgba(255, 255, 255, 0.9)} .definition-list dd {margin: 0; color: rgba(255, 255, 255, 0.8)} @media (max-width: 767px) {.legal-card {padding: 1.5rem} .legal-content h2 {font-size: 1.3rem} .definition-list {grid-template-columns: 1fr; gap: 0.5rem} } @media (min-width: 768px) and (max-width: 1024px) {.references__grid {grid-template-columns: repeat(2, 1fr); gap: 2rem} .reference-card__content {padding: 1.75rem} .reference-card__header {height: 180px} } @media (min-width: 1024px) {.references__grid {grid-template-columns: repeat(2, 1fr); gap: 2.5rem} } @media (max-width: 767px) {.references {padding: 4rem 0} .references__grid {grid-template-columns: 1fr; gap: 2rem; margin: 2rem 0} .reference-card {margin: 0 auto; max-width: 100%} .reference-card__header {height: 160px; padding: 1rem} .reference-card__screenshot {max-width: 280px; transform: perspective(1000px) rotateX(12deg) rotateY(-3deg)} .reference-card:hover .reference-card__screenshot {transform: perspective(1000px) rotateX(8deg) rotateY(-1deg) scale(1.03)} .reference-card__content {padding: 1.5rem} .reference-card__content h3 {font-size: 1.3rem; margin-bottom: 0.75rem} .reference-card__category {font-size: 0.85rem; margin-bottom: 1rem} .reference-card__description {font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.25rem} .reference-card__features {gap: 0.5rem; margin-bottom: 1.25rem} .feature-tag {font-size: 0.8rem; padding: 0.3rem 0.8rem} .reference-card__results {justify-content: center; gap: 2rem; margin-top: 1rem} .result-number {font-size: 1.4rem} .result-label {font-size: 0.75rem} .references__cta {padding: 2rem 1.5rem; margin-top: 2.5rem} .references__cta h3 {font-size: 1.6rem; margin-bottom: 1rem} .references__cta p {font-size: 1rem; margin-bottom: 1.5rem} } @media (max-width: 480px) {.references {padding: 3rem 0} .references__grid {gap: 1.5rem; margin: 1.5rem 0} .reference-card__header {height: 140px} .reference-card__screenshot {max-width: 220px} .reference-card__content {padding: 1.25rem} .reference-card__results {gap: 1.5rem} .references__cta {padding: 1.5rem 1rem} .references__cta h3 {font-size: 1.4rem} } .legal-section {margin-bottom: 3rem; padding: 2.5rem; background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--shadow-glass)} .legal-section--highlight {border-color: var(--accent-color); box-shadow: 0 0 25px rgba(0, 168, 255, 0.15)} img, video, svg {max-width: 100%; height: auto} @media (max-width: 767px) {.legal-section {padding: 1.5rem} } .skip-link {position: absolute; top: -100px; left: 0; background: var(--primary-color); color: #fff; padding: 0.75rem 1.25rem; z-index: 10000; transition: top 0.3s ease} .skip-link:focus {top: 0} @media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important} } .reduced-motion .hero__gradient {animation: none !important} .reduced-motion .feature-card::before {transition: none !important} .reduced-motion .hero__badge {transition: none !important} .reduced-motion .hero__stat {transition: none !important} @media (min-width: 1280px) {:root {--max-width: 1400px} .hero__title {font-size: 6rem} .hero__content {max-width: 900px} .section__title {font-size: 3rem} .services__container {max-width: 1200px; margin-left: auto; margin-right: auto} .why-us__grid {grid-template-columns: repeat(4, 1fr)} } @media (min-width: 1536px) {:root {--max-width: 1600px} .hero__title {font-size: 6.5rem} .section__title {font-size: 3.2rem} } .testimonials {background: rgba(14, 26, 38, 0.28)} .testimonials__grid {display: grid; gap: 2rem; margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))} .testimonial {background: var(--surface-color); padding: 2rem 1.5rem; border-radius: 12px; border: 1px solid rgba(0, 168, 255, 0.12); text-align: center; transition: transform 0.3s} .testimonial:hover {transform: translateY(-5px); box-shadow: var(--glow-shadow)} .testimonial__text {font-style: italic; margin-bottom: 1rem; color: var(--text-color-secondary)} .testimonial__author {font-weight: 600; color: var(--primary-color)} .local-seo {background: linear-gradient(135deg, rgba(11, 22, 32, 0.85), rgba(11, 22, 32, 0.85)); position: relative; contain: layout style paint; will-change: auto} .local-seo::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(30% 30% at 10% 20%, rgba(0,168,255,0.10) 0%, transparent 60%), radial-gradient(25% 25% at 90% 80%, rgba(0,224,255,0.08) 0%, transparent 60%); opacity: 1; pointer-events: none; z-index: -1; will-change: auto; contain: layout style paint} .local-cities {display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 3rem 0} .city-card {background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.5rem; backdrop-filter: blur(12px); transition: all 0.3s ease; position: relative; overflow: hidden} .city-card::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 168, 255, 0.1), transparent); transition: left 0.5s ease} .city-card:hover::before {left: 100%} .city-card:hover {transform: translateY(-5px); box-shadow: var(--shadow-glass), 0 0 20px rgba(0, 168, 255, 0.2); border-color: rgba(0, 168, 255, 0.3)} .city-card h3 {color: var(--primary-color); font-size: 1.3rem; margin-bottom: 1rem; font-weight: 600} .city-card p {color: var(--text-color-secondary); margin-bottom: 1rem; line-height: 1.6} .city-features {display: flex; flex-wrap: wrap; gap: 0.5rem} .city-feature {background: rgba(0, 168, 255, 0.1); color: var(--primary-color); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(0, 168, 255, 0.2); transition: all 0.3s ease} .city-feature:hover {background: rgba(0, 168, 255, 0.2); transform: scale(1.05)} .local-benefits {text-align: center; margin-top: 3rem} .local-benefits h3 {font-size: 1.8rem; margin-bottom: 2rem; color: var(--text-color)} .benefits-grid {display: grid; grid-template-columns: 1fr; gap: 1.5rem} .benefit-item {background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.5rem; backdrop-filter: blur(12px); transition: all 0.3s ease; text-align: center} .benefit-item:hover {transform: translateY(-3px); box-shadow: var(--shadow-glass), 0 0 15px rgba(0, 168, 255, 0.2)} .benefit-icon {font-size: 2rem; margin-bottom: 1rem; display: block} .benefit-item h4 {color: var(--primary-color); font-size: 1.2rem; margin-bottom: 0.5rem; font-weight: 600} .benefit-item p {color: var(--text-color-secondary); font-size: 0.9rem; line-height: 1.5} @media (min-width: 768px) {.local-cities {grid-template-columns: repeat(2, 1fr); gap: 2.5rem} .benefits-grid {grid-template-columns: repeat(2, 1fr); gap: 2rem} .city-card {padding: 2rem} .city-card h3 {font-size: 1.4rem} .benefit-item {padding: 2rem} } @media (min-width: 1024px) {.local-cities {grid-template-columns: repeat(4, 1fr); gap: 2.5rem} .benefits-grid {grid-template-columns: repeat(4, 1fr); gap: 2rem} .city-card h3 {font-size: 1.5rem} .benefit-item h4 {font-size: 1.3rem} } @media (max-width: 767px) {.local-cities {gap: 1rem} .city-card {padding: 1.25rem} .city-card h3 {font-size: 1.2rem} .city-features {gap: 0.4rem} .city-feature {font-size: 0.75rem; padding: 0.2rem 0.6rem} .local-benefits h3 {font-size: 1.5rem} .benefit-item {padding: 1.25rem} .benefit-icon {font-size: 1.5rem} } .faq {background: rgba(14, 26, 38, 0.28); backdrop-filter: blur(8px); border: 1px solid var(--glass-border); position: relative} .faq::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(0, 168, 255, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 224, 255, 0.08) 0%, transparent 50%); pointer-events: none} .faq__grid {display: grid; gap: 1.5rem; margin-top: 3rem} .faq-item {background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1.5rem; backdrop-filter: blur(12px); transition: all 0.3s ease; position: relative; overflow: hidden} .faq-item::before {content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--primary-color), var(--secondary-color)); transition: width 0.3s ease} .faq-item:hover::before {width: 8px} .faq-item:hover {transform: translateX(5px); box-shadow: var(--shadow-glass), 0 0 15px rgba(0, 168, 255, 0.2); border-color: rgba(0, 168, 255, 0.3)} .faq-item h3 {color: var(--primary-color); font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600; padding-left: 1rem} .faq-item p {color: var(--text-color-secondary); line-height: 1.6; padding-left: 1rem} @media (min-width: 768px) {.faq__grid {grid-template-columns: repeat(2, 1fr); gap: 2rem} .faq-item {padding: 2rem} .faq-item h3 {font-size: 1.3rem} } @media (min-width: 1024px) {.faq__grid {grid-template-columns: repeat(2, 1fr); gap: 2rem} .faq-item h3 {font-size: 1.4rem} } @media (max-width: 767px) {.faq__grid {gap: 1rem} .faq-item {padding: 1.25rem} .faq-item h3 {font-size: 1.1rem; padding-left: 0.75rem} .faq-item p {padding-left: 0.75rem} } .contact-form select {width: 100%; padding: 0.9rem 2.5rem 0.9rem 1rem; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass-bg) url('data:image/svg+xml;utf8,<svg fill="%2300a8ff" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>') no-repeat right 1rem center/1.2rem 1.2rem; font-size: 1rem; color: var(--text-color); appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color 0.2s; margin-bottom: 1rem} .contact-form input:focus, .contact-form textarea:focus, .contact-form input.input--focused, .contact-form textarea.input--focused {outline: none; border-color: var(--accent-color); background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1)} .contact-form select:focus {border-color: var(--primary-color); outline: none} .contact-form label[for], .contact-form label {display: flex; align-items: center; gap: 0.75rem; font-size: 0.98rem; margin: 1rem 0 1.5rem 0; cursor: pointer} .contact-form input[type="checkbox"] {width: 1.3em; height: 1.3em; min-width: 24px; min-height: 24px; accent-color: var(--primary-color); border-radius: 6px; border: 2px solid var(--glass-border); margin-top: 0.1em; transition: box-shadow 0.2s, border-color 0.2s; box-shadow: 0 0 0 2px transparent} .contact-form input[type="checkbox"]:focus {outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color)} .contact-form input[type="checkbox"]:checked {background-color: var(--primary-color); border-color: var(--primary-color)} .contact-form label span a {color: var(--primary-color); text-decoration: underline} @media (max-width: 480px) {.contact-form input, .contact-form select, .contact-form textarea {font-size: 1rem; padding: 0.9rem 1rem} .contact-form label[for], .contact-form label {font-size: 0.95rem; gap: 0.6rem} .contact-form input[type="checkbox"] {min-width: 22px; min-height: 22px} } @media (hover: none) and (pointer: coarse) {.contact-form input[type="checkbox"] {min-width: 28px; min-height: 28px} } @media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important} } .reduced-motion .hero__gradient {animation: none !important} .reduced-motion .feature-card::before {transition: none !important} .reduced-motion .hero__badge {transition: none !important} .reduced-motion .hero__stat {transition: none !important} .mobile-optimized .hero__gradient {animation: none !important} .mobile-optimized .feature-card::before {transition: none !important} .mobile-optimized .hero__badge {transition: none !important} .mobile-optimized .hero__stat {transition: none !important} .lazy {opacity: 0; transition: opacity 0.3s ease-in-out} .lazy.loaded {opacity: 1} img {max-width: 100%; height: auto; display: block; contain: layout style paint; will-change: auto} @media (max-width: 767px) {.hero__gradient {animation: none !important} .feature-card::before {transition: none !important} .feature-card:hover::before {transform: none !important} .hero__badge {transition: none !important} .hero__stat {transition: none !important} } body {padding-top: 0 !important} body {background-color: #0b1620; background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/images/background-2560.webp'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center center} @media (max-width: 767px) {body {background-attachment: scroll} } body::after {content: none; display: none} @media (min-width: 1200px) {body {background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/images/background-3200.webp'); background-blend-mode: normal} } .hero::before {content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('/images/hero.webp'); background-size: cover; background-repeat: no-repeat; background-position: 12% 58%; opacity: 0.25} .hero > * {position: relative; z-index: 1} .hero::after {content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60rem 40rem at 18% 55%, rgba(0,205,255,0.18), transparent 55%), linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); animation: heroGlow 6s ease-in-out infinite alternate} @keyframes heroGlow {from {filter: brightness(1)} to {filter: brightness(1.05)} } @media (prefers-reduced-motion: reduce) {.hero::after {animation: none !important} } .mobile-no-anim * {animation: none !important; transition: none !important} #ueber-uns .section__title {margin-bottom: 2.2rem} #ueber-uns .about__intro {margin-top: 0; margin-bottom: 1.5rem} @media (max-width: 767px) {#ueber-uns .section__title {margin-bottom: 1.5rem} #ueber-uns .about__intro {margin-bottom: 1.2rem} } .header {position: static} @media (min-width: 768px) {.header {position: fixed; top: 0; left: 0; right: 0; z-index: 10000; width: 100%; background: transparent; box-shadow: none} body {padding-top: 0} } @media (max-width: 767px) {.header {position: fixed; top: 0; left: 0; right: 0; z-index: 10000; width: 100%; background: rgba(11,22,32,0.88); box-shadow: none} body {padding-top: 56px} } .scroll-top {position: fixed !important; right: 2rem !important; bottom: 2rem !important; width: 3.5rem !important; height: 3.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--primary-color) !important; color: #fff !important; border: none !important; border-radius: 50% !important; box-shadow: 0 8px 25px rgba(0, 168, 255, 0.3) !important; cursor: pointer !important; opacity: 0; pointer-events: none; transition: all 0.3s ease !important; z-index: 999999 !important; transform: none !important; contain: none !important; will-change: auto !important; inset: auto 2rem 2rem auto !important; -webkit-transform: none !important; -webkit-backface-visibility: visible !important; -webkit-perspective: none !important} .scroll-top:hover {transform: scale(1.1) !important; box-shadow: 0 12px 35px rgba(0, 168, 255, 0.4) !important; background: #0097e6 !important} .scroll-top svg {width: 1.5rem; height: 1.5rem; fill: currentColor} .scroll-top.visible {opacity: 1; pointer-events: auto; transform: scale(1)} .scroll-top:focus-visible {outline: var(--focus-outline); outline-offset: var(--focus-outline-offset)} @media (max-width: 768px) {.scroll-top {right: 1rem !important; bottom: 1rem !important; width: 3rem !important; height: 3rem !important} .scroll-top svg {width: 1.25rem; height: 1.25rem} }