:root{--primary: #1A63A0;--primary-dark: #14568F;--primary-light: #E8F0F7;--secondary: #667eea;--secondary-dark: #764ba2;--success: #10b981;--success-light: #d1fae5;--warning: #f59e0b;--warning-light: #fef3c7;--danger: #ef4444;--danger-light: #fee2e2;--dark: #18222B;--gray: #414E5B;--gray-light: #6C7885;--gray-lighter: #94A0AC;--gray-lightest: #E5E7E0;--bg-dark: #FBFBF9;--bg-light: #ffffff;--border-radius: 12px;--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);--shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);--font-sans: 'Inter', 'Segoe UI', sans-serif;--font-mono: 'Courier New', monospace} *{margin: 0;padding: 0;box-sizing: border-box} html{scroll-behavior: smooth} body{font-family: var(--font-sans);background: var(--bg-dark);color: var(--gray);line-height: 1.6;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} .container{max-width: 1200px;margin: 0 auto;padding: 0 20px} h1, h2, h3, h4, h5, h6{color: var(--dark);font-weight: 600;line-height: 1.2;margin-bottom: 0.5em} h1{font-size: 2.5rem} h2{font-size: 2rem} h3{font-size: 1.5rem} h4{font-size: 1.2rem} h5{font-size: 1.1rem} h6{font-size: 1rem} p{margin-bottom: 1em} .subtitle{color: var(--gray-light);font-size: 1.1rem;margin-bottom: 30px} .btn{display: inline-flex;align-items: center;gap: 8px;padding: 12px 20px;border-radius: 8px;font-weight: 600;text-decoration: none;transition: all 0.3s ease;border: none;cursor: pointer;font-family: inherit;font-size: 14px;white-space: nowrap} .btn:disabled{opacity: 0.6;cursor: not-allowed;transform: none !important} .btn-primary{background: var(--primary);color: white} .btn-primary:hover:not(:disabled){background: var(--primary-dark);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(26, 99, 160, 0.3)} .btn-secondary{background: var(--gray-lightest);color: var(--dark)} .btn-secondary:hover:not(:disabled){background: var(--gray-lighter);transform: translateY(-2px)} .input-group{display: flex;gap: 15px;margin-bottom: 30px;flex-wrap: wrap} input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select{flex: 1;padding: 15px 20px;border: 2px solid var(--gray-lightest);border-radius: 8px;font-size: 16px;font-family: inherit;transition: all 0.3s ease;min-width: 250px} input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px var(--primary-light)} textarea{resize: vertical;font-family: var(--font-mono);min-height: 300px} .loading{display: none;text-align: center;padding: 20px} .spinner{border: 3px solid var(--gray-lightest);border-top: 3px solid var(--primary);border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;margin: 0 auto 15px} @media (max-width: 768px){h1{font-size: 2rem} h2{font-size: 1.5rem} h3{font-size: 1.3rem} .input-group{flex-direction: column} input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select{min-width: auto;width: 100%}}:root{--primary: #1A63A0;--primary-dark: #14568F;--primary-light: #E8F0F7;--secondary: #667eea;--secondary-dark: #764ba2;--accent: #6a4bed;--success: #10b981;--success-light: #d1fae5;--warning: #f59e0b;--warning-light: #fef3c7;--danger: #ef4444;--danger-light: #fee2e2;--dark: #18222B;--darker: #16202A;--gray: #414E5B;--gray-light: #6C7885;--gray-lighter: #94A0AC;--gray-lightest: #E5E7E0;--light: #FBFBF9;--bg-dark: #FBFBF9;--bg-light: #ffffff;--font-sans: 'Inter', 'Segoe UI', sans-serif;--font-mono: 'Courier New', monospace;--border-radius: 12px;--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);--shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);--shadow: 0 10px 25px rgba(0, 0, 0, 0.1);--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);--transition: all 0.3s ease} *{margin: 0;padding: 0;border: none;box-sizing: border-box} *::before, *::after{box-sizing: border-box} html{scroll-behavior: smooth} body{font-family: var(--font-sans);background: var(--bg-dark);color: var(--gray);line-height: 1.6;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow-x: hidden} aside, nav, footer, header, section, main{display: block} h1, h2, h3, h4, h5, h6, p{font-size: inherit;font-weight: inherit} ul, ol, li{list-style: none} a, a:link, a:visited{text-decoration: none;color: inherit} a:hover{text-decoration: none} img, svg{vertical-align: top;max-width: 100%;height: auto} address{font-style: normal} input, textarea, button, select{font-family: inherit;font-size: inherit;color: inherit;background-color: transparent} button, input[type="submit"]{display: inline-block;box-shadow: none;background-color: transparent;background: none;cursor: pointer} input:focus, input:active, button:focus, button:active{outline: none} button::-moz-focus-inner{padding: 0;border: 0} label{cursor: pointer} legend{display: block} .container{width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px} h1, h2, h3, h4, h5, h6{color: var(--dark);font-weight: 600;line-height: 1.2;margin-bottom: 0.5em} h1{font-size: 2.5rem} h2{font-size: 2rem} h3{font-size: 1.5rem} h4{font-size: 1.2rem} h5{font-size: 1.1rem} h6{font-size: 1rem} p{margin-bottom: 1em} .subtitle{color: var(--gray-light);font-size: 1.1rem;margin-bottom: 30px} .btn{display: inline-flex;align-items: center;gap: 8px;padding: 12px 20px;border-radius: 8px;font-weight: 600;text-decoration: none;transition: var(--transition);border: none;cursor: pointer;font-family: inherit;font-size: 14px;white-space: nowrap} .btn:disabled{opacity: 0.6;cursor: not-allowed;transform: none !important} .btn-primary{background: var(--primary);color: white} .btn-primary:hover:not(:disabled){background: var(--primary-dark);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(26, 99, 160, 0.3)} .btn-secondary{background: var(--gray-lightest);color: var(--dark)} .btn-secondary:hover:not(:disabled){background: var(--gray-lighter);transform: translateY(-2px)} .input-group{display: flex;gap: 15px;margin-bottom: 30px;flex-wrap: wrap} input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select{flex: 1;padding: 15px 20px;border: 2px solid var(--gray-lightest);border-radius: 8px;font-size: 16px;font-family: inherit;transition: var(--transition);min-width: 250px} input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px var(--primary-light)} textarea{resize: vertical;font-family: var(--font-mono);min-height: 300px} .loading{display: none;text-align: center;padding: 20px} .spinner{border: 3px solid var(--gray-lightest);border-top: 3px solid var(--primary);border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;margin: 0 auto 15px} @media (max-width: 768px){h1{font-size: 2rem} h2{font-size: 1.5rem} h3{font-size: 1.3rem} .input-group{flex-direction: column} input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select{min-width: auto;width: 100%}}.btn{display: inline-flex;align-items: center;gap: 8px;padding: 12px 20px;border-radius: 10px;font-weight: 600;text-decoration: none;transition: all 0.3s ease;border: none;cursor: pointer;font-family: inherit;font-size: 14px} .btn:hover{transform: translateY(-2px)} .btn-primary{background: #1A63A0;color: white} .btn-primary:hover{background: #14568F;box-shadow: 0 6px 20px rgba(26, 99, 160, 0.3)} .btn-secondary{background: #F3F4EF;color: #414E5B;border: 1px solid #D5D8D1} .btn-secondary:hover{background: #E5E7E0} .grid{display: grid;gap: 20px;margin-bottom: 20px} .form-control, textarea, input[type="text"], input[type="email"], input[type="number"], select{width: 100%;padding: 12px;border: 2px solid #E5E7E0;border-radius: 8px;font-family: inherit;font-size: 14px;transition: all 0.3s ease;background: #FBFBF9} .form-control:focus, textarea:focus, input:focus, select:focus{outline: none;border-color: #1A63A0;box-shadow: 0 0 0 3px rgba(26, 99, 160, 0.1);background: white} textarea{resize: vertical} table{width: 100%;border-collapse: collapse;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)} table th{background: linear-gradient(135deg, #1A63A0, #004499);color: white;padding: 15px;text-align: left;font-weight: 600;font-size: 0.9rem} table td{padding: 15px;border-bottom: 1px solid #E5E7E0;background: white} table tbody tr:hover td{background: #FBFBF9} .loading{display: none;text-align: center;padding: 20px} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)}} .spinner{display: inline-block;width: 40px;height: 40px;border: 4px solid #f3f3f3;border-top: 4px solid #1A63A0;border-radius: 50%;animation: spin 1s linear infinite}:root{--primary: #1A63A0;--primary-dark: #14568F;--secondary: #00bcd4;--accent: #6a4bed;--dark: #18222B;--darker: #16202A;--light: #FBFBF9;--gray: #6C7885;--gray-light: #D5D8D1;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--border-radius: 12px;--shadow: 0 10px 25px rgba(0, 0, 0, 0.1);--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);--transition: all 0.3s ease} *{margin: 0;padding: 0;box-sizing: border-box} html{scroll-behavior: smooth} body{font-family: 'Inter', sans-serif;line-height: 1.6;color: var(--dark);background-color: var(--light);overflow-x: hidden} .container{width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px} .remote-popup{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(2, 8, 23, 0.42);display: flex;align-items: center;justify-content: center;z-index: 10000;animation: fadeIn 0.3s ease;padding: 20px} .remote-popup-content{background: white;padding: 30px;border-radius: 18px;max-width: 500px;width: 100%;position: relative;box-shadow: 0 24px 55px rgba(2, 8, 23, 0.34);animation: slideUp 0.3s ease} .remote-popup-panel{max-width: 430px;border: 1px solid rgba(0, 82, 163, 0.18)} .remote-popup-header{display: flex;align-items: center;gap: 12px;margin-bottom: 16px} .remote-popup-header i{font-size: 2rem;color: #14568F;background: linear-gradient(135deg, #14568F, #0E406B);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent} .remote-popup-header h3{font-size: 1.45rem;color: var(--dark);margin: 0} .remote-popup p{color: var(--gray);margin-bottom: 16px;line-height: 1.6;font-size: 1rem} .remote-os-grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;margin-bottom: 16px} .remote-os-card{display: flex;flex-direction: column;gap: 6px;text-decoration: none;color: #18222B;background: linear-gradient(140deg, #E8F0F7 0%, #f7faff 100%);border: 1px solid rgba(0, 82, 163, 0.22);border-radius: 12px;padding: 12px;transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;width: 100%;text-align: left;cursor: pointer;font: inherit} .remote-os-card strong{font-size: 0.95rem;color: #003b94} .remote-os-card span{color: #414E5B;font-size: 0.86rem;line-height: 1.45} .remote-os-card:hover{transform: translateY(-2px);box-shadow: 0 12px 24px rgba(0, 82, 163, 0.2);border-color: rgba(0, 82, 163, 0.45)} .remote-buttons{display: flex;gap: 12px;margin-bottom: 16px} .remote-buttons .btn{flex: 1;padding: 12px 14px;border-radius: 12px;font-weight: 600;font-size: 0.95rem;text-align: center;transition: var(--transition);color: white} .remote-buttons .btn:visited{color: white} .remote-buttons .btn i{margin-right: 10px;font-size: 1.2rem} .remote-info{background: #FBFBF9;padding: 16px;border-radius: 12px;margin-bottom: 14px} .remote-info-item{display: flex;align-items: center;gap: 10px;margin-bottom: 10px;color: var(--gray);font-size: 0.92rem} .remote-info-item i{color: var(--success);width: 20px;font-size: 1.1rem} .remote-info-item:last-child{margin-bottom: 0} .btn-close{position: absolute;top: 12px;right: 12px;background: none;border: none;font-size: 24px;cursor: pointer;color: var(--gray);width: 34px;height: 34px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: var(--transition)} .btn-close i{font-size: 16px;line-height: 1} .btn-close:hover{background: #F3F4EF;color: var(--dark);transform: rotate(90deg)} .btn-call{display: inline-flex;align-items: center;justify-content: center;gap: 12px;width: 100%;padding: 14px;background: linear-gradient(135deg, #14568F 0%, var(--primary) 50%, #0E406B 100%);color: white !important;text-decoration: none;border-radius: 16px;font-weight: 700;font-size: 1.15rem;transition: var(--transition);border: 2px solid rgba(255, 255, 255, 0.3);box-shadow: 0 8px 20px rgba(20, 86, 143, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);letter-spacing: 0;text-transform: none;min-height: 54px;position: relative;overflow: hidden} @media (max-width: 768px){.remote-popup{justify-content: center;align-items: center;padding: 14px} .remote-popup-content, .remote-popup-panel{max-width: 100%;padding: 22px;border-radius: 16px} .remote-os-grid{grid-template-columns: 1fr}} .btn-call::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.6s ease} .btn-call:hover{transform: translateY(-4px);box-shadow: 0 12px 30px rgba(20, 86, 143, 0.45), 0 4px 12px rgba(0, 0, 0, 0.2);background: linear-gradient(135deg, #0E406B 0%, var(--primary) 50%, #0A3151 100%)} .btn-call:hover::before{left: 100%} .remote-buttons .btn:hover{transform: translateY(-3px);box-shadow: 0 12px 30px rgba(20, 86, 143, 0.4);background: linear-gradient(135deg, #0E406B 0%, #14568F 50%, #0A3151 100%)} .remote-buttons .btn:hover::before{left: 100%} .btn-call:hover::before{left: 100%} .btn-call i{color: white !important} .btn{display: inline-flex;align-items: center;gap: 8px;padding: 12px 24px;border-radius: var(--border-radius);font-weight: 600;text-decoration: none;transition: var(--transition);border: none;cursor: pointer;font-family: inherit;min-height: 44px;min-width: 44px;justify-content: center;position: relative;overflow: hidden} .btn-primary{background: linear-gradient(135deg, #14568F 0%, var(--primary) 50%, #0E406B 100%);color: white;box-shadow: 0 6px 18px rgba(20, 86, 143, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);border: 2px solid rgba(255, 255, 255, 0.3)} .btn-primary::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.6s ease;z-index: 1} .btn-primary:hover{transform: translateY(-3px);box-shadow: 0 12px 30px rgba(20, 86, 143, 0.4);background: linear-gradient(135deg, #0E406B 0%, #14568F 50%, #0A3151 100%)} .btn-primary:hover::before{left: 100%} .btn-secondary{background: linear-gradient(135deg, #14568F 0%, var(--primary) 50%, #0E406B 100%);color: white;border: 2px solid rgba(255, 255, 255, 0.3);box-shadow: 0 6px 18px rgba(20, 86, 143, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15)} .btn-secondary::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.6s ease;z-index: 1} .btn-secondary:hover{transform: translateY(-3px);box-shadow: 0 12px 30px rgba(20, 86, 143, 0.4);background: linear-gradient(135deg, #0E406B 0%, #14568F 50%, #0A3151 100%)} .btn-secondary:hover::before{left: 100%} .section{padding: 100px 0;background: white} .section-header{text-align: center;margin-bottom: 60px} .section-title{font-size: 2.5rem;margin-bottom: 15px;color: #18222B;font-weight: 700;background: linear-gradient(135deg, #14568F, #0E406B);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .section-subtitle{font-size: 1.1rem;color: var(--gray);max-width: 600px;margin: 0 auto} @media (max-width: 992px){} @media (max-width: 768px){.section{padding: 60px 0}} @media (max-width: 576px){.section-title{font-size: 2rem} .btn{width: 100%;justify-content: center;min-height: 54px;font-size: 1.1rem} .section-title{font-size: 1.6rem} .remote-popup-content{padding: 30px 20px} .remote-popup-header h3{font-size: 1.5rem} .remote-buttons{flex-direction: column;gap: 10px} .remote-buttons .btn{width: 100%} .remote-info{padding: 20px} .btn-call{padding: 16px;font-size: 1rem;min-height: 48px}} @media (max-width: 480px){} @keyframes fadeIn{from{opacity: 0;transform: translateY(20px)} to{opacity: 1;transform: translateY(0)}} .fade-in{animation: fadeIn 0.6s ease-out} @keyframes slideUp{from{opacity: 0;transform: translateY(30px)} to{opacity: 1;transform: translateY(0)}}:root{--canvas: #FBFBF9;--surface: #FFFFFF;--surface-2: #F3F4EF;--surface-3: #E7EBE2;--ink: #18222B;--ink-2: #414E5B;--ink-muted: #5F6B78;--brand: #14568F;--brand-strong: #0E406B;--brand-soft: #E8F0F7;--hairline: #E5E7E0;--shadow-sm: 0 1px 2px rgba(24, 34, 43, 0.05);--shadow-md: 0 6px 18px rgba(24, 34, 43, 0.07);--shadow-lg: 0 18px 40px rgba(24, 34, 43, 0.10);--border-radius: 14px} body{background: var(--canvas);color: var(--ink-2)} h1, h2, h3, h4, h5, h6{color: var(--ink);font-weight: 600;letter-spacing: -0.02em;line-height: 1.15} h1{font-weight: 600} .section-title, .section-header h2{font-weight: 600;letter-spacing: -0.025em} .section-subtitle, .subtitle{color: var(--ink-muted);font-weight: 400} section{background: transparent} .solutions{background: var(--surface-2)} .service-card{background: var(--surface);border: 1px solid var(--hairline);box-shadow: var(--shadow-sm);border-radius: var(--border-radius)} .service-card:hover{box-shadow: var(--shadow-md);transform: translateY(-3px)} .btn{border-radius: 8px;font-weight: 600;letter-spacing: -0.01em;box-shadow: none;transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease} .btn.btn-primary, .btn-primary{background: var(--brand);color: #fff;border: 1px solid var(--brand)} .btn-primary:hover:not(:disabled){background: var(--brand-strong);border-color: var(--brand-strong);transform: none;box-shadow: none} .btn-secondary{background: transparent;color: var(--ink);border: 1px solid var(--hairline)} .btn-secondary:hover:not(:disabled){background: var(--surface-2);border-color: #D5D8D1;color: var(--ink);transform: none;box-shadow: none}.wrap{width: 100%;max-width: 1140px;margin: 0 auto;padding: 0 24px} .wrap--narrow{max-width: 800px} .band{padding: 96px 0} .band--tight{padding: 64px 0} .band--white{background: var(--surface)} .band--warm{background: var(--surface-2)} .band--brand{background: var(--brand-strong);color: rgba(255, 255, 255, 0.82)} .band--brand h2, .band--brand h3{color: #fff} .band--white + .band--white{border-top: 1px solid var(--hairline)} .eyebrow{display: block;font-size: 0.78rem;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--brand);margin-bottom: 14px} .band--brand .eyebrow{color: rgba(255, 255, 255, 0.65)} .h-display{font-size: clamp(2.4rem, 4.4vw, 3.4rem);line-height: 1.06;letter-spacing: -0.03em;font-weight: 600;color: var(--ink);margin: 0 0 20px} .h-section{font-size: clamp(1.75rem, 2.6vw, 2.25rem);line-height: 1.15;letter-spacing: -0.025em;font-weight: 600;color: var(--ink);margin: 0 0 16px} .lead{font-size: 1.15rem;line-height: 1.65;color: var(--ink-muted);max-width: 62ch;margin: 0} .band--brand .lead{color: rgba(255, 255, 255, 0.72)} .section-head{margin-bottom: 48px;max-width: 68ch} .hero2{padding: 150px 0 88px;background: var(--canvas);border-bottom: 1px solid var(--hairline);position: relative;overflow: hidden} .hero2::after{content: '';position: absolute;inset: 0;background: radial-gradient(1000px 460px at 88% -10%, rgba(20, 86, 143, 0.07), transparent 65%);pointer-events: none} .hero2__grid{position: relative;z-index: 1;display: grid;grid-template-columns: 1.35fr 0.65fr;gap: 64px;align-items: start} .hero2__actions{display: flex;gap: 12px;flex-wrap: wrap;margin-top: 34px} .hero2__facts{display: flex;flex-direction: column;gap: 2px;border-left: 2px solid var(--hairline);padding-left: 26px;margin-top: 8px} .fact{padding: 14px 0} .fact + .fact{border-top: 1px solid var(--hairline)} .fact__value{display: block;font-size: 1.6rem;font-weight: 600;letter-spacing: -0.02em;color: var(--ink);line-height: 1.1} .fact__label{display: block;font-size: 0.88rem;color: var(--ink-muted);margin-top: 4px} .solutions{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;background: transparent} .scard{display: flex;flex-direction: column;padding: 30px 28px 26px;background: var(--surface);border: 1px solid var(--hairline);border-radius: 16px;color: inherit;transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease} .scard:hover{border-color: #C9D3DD;transform: translateY(-3px);box-shadow: var(--shadow-md);color: inherit} .scard__icon{width: 44px;height: 44px;border-radius: 11px;background: var(--brand-soft);color: var(--brand);display: grid;place-items: center;font-size: 1.15rem;margin-bottom: 20px} .scard__title{font-size: 1.18rem;font-weight: 600;letter-spacing: -0.02em;color: var(--ink);margin: 0 0 10px} .scard__text{font-size: 0.97rem;line-height: 1.6;color: var(--ink-muted);margin: 0 0 20px;flex: 1} .scard__more{font-size: 0.9rem;font-weight: 600;color: var(--brand);display: inline-flex;align-items: center;gap: 8px} .scard:hover .scard__more{gap: 12px} .scard__more::after{content: '→';transition: transform 0.15s ease} .steps{display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 36px 32px;counter-reset: step} .step{counter-increment: step} .step__num{display: flex;align-items: center;gap: 12px;font-size: 0.8rem;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--brand);margin-bottom: 14px} .step__num::before{content: counter(step, decimal-leading-zero);font-size: 1.05rem;letter-spacing: -0.02em} .step__num::after{content: '';flex: 1;height: 1px;background: var(--hairline)} .step__title{font-size: 1.1rem;font-weight: 600;letter-spacing: -0.015em;color: var(--ink);margin: 0 0 8px} .step__text{font-size: 0.96rem;line-height: 1.6;color: var(--ink-muted);margin: 0} .ticks{list-style: none;margin: 0;padding: 0;display: grid;gap: 12px} .ticks--two{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 12px 32px} .ticks li{position: relative;padding-left: 30px;font-size: 1rem;line-height: 1.55;color: var(--ink-2)} .ticks li::before{content: '';position: absolute;left: 0;top: 0.42em;width: 8px;height: 8px;border-radius: 2px;background: var(--brand)} .band--brand .ticks li{color: rgba(255, 255, 255, 0.8)} .band--brand .ticks li::before{background: rgba(255, 255, 255, 0.5)} .split{display: grid;grid-template-columns: 1fr 1fr;gap: 64px;align-items: start} .split--sidebar{grid-template-columns: 1.5fr 1fr} .aside-card{background: var(--surface-2);border: 1px solid var(--hairline);border-radius: 16px;padding: 28px} .aside-card h3{font-size: 1.05rem;font-weight: 600;letter-spacing: -0.015em;margin: 0 0 14px;color: var(--ink)} .faq2{display: grid;gap: 10px} .faq2 details{background: var(--surface);border: 1px solid var(--hairline);border-radius: 12px;padding: 0 22px} .faq2 summary{list-style: none;cursor: pointer;padding: 20px 0;font-weight: 600;font-size: 1.02rem;letter-spacing: -0.015em;color: var(--ink);display: flex;justify-content: space-between;gap: 20px;align-items: center} .faq2 summary::-webkit-details-marker{display: none} .faq2 summary::after{content: '+';font-size: 1.4rem;font-weight: 400;color: var(--brand);line-height: 1;flex-shrink: 0} .faq2 details[open] summary::after{content: '–'} .faq2 details p{margin: 0;padding: 0 0 22px;color: var(--ink-muted);line-height: 1.65;max-width: 72ch} .cta2{text-align: center} .cta2 .lead{margin: 0 auto} .cta2__actions{display: flex;gap: 12px;justify-content: center;flex-wrap: wrap;margin-top: 34px} .btn.btn-onlight{background: #fff;color: var(--brand-strong);border: 1px solid #fff} .btn.btn-onlight:hover{background: var(--brand-soft);color: var(--brand-strong)} .btn.btn-ghost-light{background: transparent;color: #fff;border: 1px solid rgba(255, 255, 255, 0.42)} .btn.btn-ghost-light:hover{background: rgba(255, 255, 255, 0.1);color: #fff} .hdr{position: fixed;top: 0;left: 0;right: 0;z-index: 900;background: rgba(251, 251, 249, 0.9);backdrop-filter: blur(12px);border-bottom: 1px solid var(--hairline)} .hdr__inner{display: flex;align-items: center;gap: 40px;height: 76px} .hdr__logo{display: flex;align-items: center;flex-shrink: 0} .hdr__logo img{height: 42px;width: auto;object-fit: contain} .hdr__nav{display: flex;align-items: center;gap: 4px;margin-right: auto} a.hdr__link{display: block;padding: 9px 14px;border-radius: 8px;font-size: 0.97rem;font-weight: 500;color: var(--ink-2);text-decoration: none} a.hdr__link:hover, a.hdr__link:focus-visible{background: var(--surface-2);color: var(--brand)} .hdr__actions{display: flex;align-items: center;gap: 10px;flex-shrink: 0} a.hdr__phone{font-size: 0.97rem;font-weight: 600;color: var(--ink);text-decoration: none;padding: 9px 12px;white-space: nowrap} a.hdr__phone:hover{color: var(--brand)} .hdr__group{position: relative} .hdr__panel{position: absolute;top: calc(100% + 10px);left: 0;min-width: 300px;background: var(--surface);border: 1px solid var(--hairline);border-radius: 14px;box-shadow: var(--shadow-lg);padding: 8px;opacity: 0;visibility: hidden;transform: translateY(-6px);transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s} .hdr__group:hover .hdr__panel, .hdr__group:focus-within .hdr__panel{opacity: 1;visibility: visible;transform: translateY(0)} .hdr__panel a{display: block;padding: 11px 14px;border-radius: 9px;text-decoration: none;color: var(--ink);font-size: 0.95rem;font-weight: 500} .hdr__panel a span{display: block;font-size: 0.85rem;font-weight: 400;color: var(--ink-muted);margin-top: 2px} .hdr__panel a:hover, .hdr__panel a:focus-visible{background: var(--surface-2)} .hdr__caret{font-size: 0.62rem;margin-left: 6px;opacity: 0.6} .hdr__burger{display: none} .hdr__burger-label{display: none;width: 42px;height: 42px;border-radius: 9px;border: 1px solid var(--hairline);background: var(--surface);cursor: pointer;place-items: center;color: var(--ink);font-size: 1.05rem} main.site-main:focus, main.site-main:focus-visible{outline: none} .validation-errors{list-style: none;margin: 18px 0 0;padding: 0;display: grid;gap: 6px} .validation-message, .validation-errors li{color: #9B2226;font-size: 0.9rem} .ftr{background: var(--ink);color: rgba(255, 255, 255, 0.7);padding: 72px 0 0} .ftr__grid{display: grid;grid-template-columns: 1.6fr 1fr 1fr 1fr;gap: 48px;padding-bottom: 56px} .ftr__logo{height: 38px;width: auto;margin-bottom: 18px;filter: grayscale(1) brightness(0) invert(1);opacity: 0.92} .ftr__about p{font-size: 0.95rem;line-height: 1.65;color: rgba(255, 255, 255, 0.62);max-width: 34ch;margin: 0 0 22px} .ftr h3{font-size: 0.78rem;font-weight: 700;letter-spacing: 0.11em;text-transform: uppercase;color: rgba(255, 255, 255, 0.58);margin: 0 0 18px} .ftr ul{list-style: none;margin: 0;padding: 0;display: grid;gap: 11px} .ftr li{font-size: 0.95rem;color: rgba(255, 255, 255, 0.62)} .ftr a{color: rgba(255, 255, 255, 0.72);text-decoration: none} .ftr a:hover{color: #fff} .ftr__social{display: flex;gap: 10px} .ftr__social a{width: 38px;height: 38px;border-radius: 9px;border: 1px solid rgba(255, 255, 255, 0.16);display: grid;place-items: center;color: rgba(255, 255, 255, 0.72)} .ftr__social a:hover{background: rgba(255, 255, 255, 0.1);color: #fff} .ftr__bottom{border-top: 1px solid rgba(255, 255, 255, 0.1);padding: 22px 0 26px;display: flex;justify-content: space-between;align-items: center;gap: 18px;flex-wrap: wrap;font-size: 0.88rem;color: rgba(255, 255, 255, 0.58)} .ftr__bottom nav{display: flex;gap: 18px;flex-wrap: wrap;align-items: center} .ftr__linkbtn{background: none;border: 0;padding: 0;font: inherit;color: rgba(255, 255, 255, 0.72);cursor: pointer} .ftr__linkbtn:hover{color: #fff} .contact2{display: grid;grid-template-columns: 1.25fr 0.75fr;gap: 56px;align-items: start} .form2{background: var(--surface);border: 1px solid var(--hairline);border-radius: 18px;padding: 36px} .form2__grid{display: grid;grid-template-columns: 1fr 1fr;gap: 18px} .form2__full{grid-column: 1 / -1} .form2 label{display: block;font-size: 0.88rem;font-weight: 600;color: var(--ink);margin-bottom: 7px} .form2 input, .form2 select, .form2 textarea{width: 100%;padding: 12px 14px;border: 1px solid var(--hairline);border-radius: 9px;background: var(--canvas);font: inherit;font-size: 0.97rem;color: var(--ink)} .form2 textarea{min-height: 150px;resize: vertical} .form2 input:focus, .form2 select:focus, .form2 textarea:focus{outline: none;border-color: var(--brand);box-shadow: 0 0 0 3px var(--brand-soft)} .form2__submit{margin-top: 24px;padding: 13px 28px;background: var(--brand);color: #fff;border: 1px solid var(--brand);border-radius: 9px;font: inherit;font-weight: 600;cursor: pointer} .form2__submit:hover:not(:disabled){background: var(--brand-strong);border-color: var(--brand-strong)} .form2__submit:disabled{opacity: 0.6;cursor: default} .form2__status{margin-top: 18px;padding: 13px 16px;border-radius: 9px;font-size: 0.94rem} .form2__status--ok{background: #E7F3EC;color: #1E5735;border: 1px solid #C6E2D2} .form2__status--err{background: #FCECEC;color: #7A2020;border: 1px solid #F2CFCF} .form2__trap{position: absolute;left: -9999px;width: 1px;height: 1px;overflow: hidden} .contact2__aside{display: grid;gap: 12px} .ccard{display: flex;gap: 16px;align-items: flex-start;padding: 22px;background: var(--surface);border: 1px solid var(--hairline);border-radius: 14px;text-decoration: none;color: inherit} .ccard:hover{border-color: #C9D3DD;color: inherit} .ccard__icon{width: 40px;height: 40px;border-radius: 10px;background: var(--brand-soft);color: var(--brand);display: grid;place-items: center;flex-shrink: 0} .ccard strong{display: block;font-size: 1rem;color: var(--ink);margin-bottom: 4px} .ccard span{font-size: 0.92rem;color: var(--ink-muted);line-height: 1.5} .platforms{display: grid;grid-template-columns: 1fr 1fr;gap: 24px;align-items: start} .pfcard{background: var(--surface);border: 1px solid var(--hairline);border-radius: 18px;padding: 34px 32px;box-shadow: var(--shadow-sm)} .pfcard__head{display: flex;align-items: center;gap: 14px;margin-bottom: 8px} .pfcard__logo{width: 46px;height: 46px;border-radius: 11px;background: var(--surface-2);color: var(--ink);display: grid;place-items: center;font-size: 1.35rem;flex-shrink: 0} .pfcard__head h2{font-size: 1.35rem;margin: 0;letter-spacing: -0.02em} .pfcard__intro{font-size: 0.98rem;line-height: 1.6;color: var(--ink-muted);margin: 0 0 24px} .pfcard__dl{display: flex;align-items: center;justify-content: center;gap: 10px;width: 100%;padding: 16px 24px;background: var(--brand);color: #fff;border: 1px solid var(--brand);border-radius: 10px;font-weight: 600;font-size: 1.02rem;text-decoration: none} a.pfcard__dl{color: #fff} a.pfcard__dl:hover{background: var(--brand-strong);border-color: var(--brand-strong);color: #fff} .pfcard__meta{display: flex;justify-content: center;gap: 8px;flex-wrap: wrap;font-size: 0.85rem;color: var(--ink-muted);margin-top: 12px} .pfcard__steps{list-style: none;margin: 30px 0 0;padding: 0;counter-reset: pfstep} .pfcard__steps li{counter-increment: pfstep;position: relative;padding: 0 0 22px 46px;font-size: 0.97rem;line-height: 1.6;color: var(--ink-2)} .pfcard__steps li::before{content: counter(pfstep);position: absolute;left: 0;top: -2px;width: 30px;height: 30px;border-radius: 50%;background: var(--brand-soft);color: var(--brand);font-size: 0.85rem;font-weight: 700;display: grid;place-items: center} .pfcard__steps li:not(:last-child)::after{content: '';position: absolute;left: 15px;top: 32px;bottom: 8px;width: 1px;background: var(--hairline)} .pfcard__steps li:last-child{padding-bottom: 0} .pfcard__steps strong{color: var(--ink);font-weight: 600} .pfcard__note{margin-top: 26px;padding: 18px 20px;background: var(--surface-2);border-radius: 12px;font-size: 0.92rem;line-height: 1.6;color: var(--ink-muted)} .pfcard__note strong{color: var(--ink)} .pfcard__note p{margin: 0} .pfcard__note p + p{margin-top: 10px} .logos{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 20px 52px} .logos img{height: 32px;width: auto;max-width: 130px;object-fit: contain;opacity: 0.75;transition: opacity 0.15s ease} .logos a:hover img{opacity: 1} @media (max-width: 1080px){.hdr__inner{height: 64px;gap: 10px} .hdr__logo{margin-right: auto} .hdr__logo img{height: 34px} a.hdr__phone{display: none} .hdr__actions{order: 2} .hdr__burger-label{display: grid;order: 3;width: 40px;height: 40px} .hdr__actions .btn{padding: 10px 15px;font-size: 0.9rem;min-width: 0} .hdr__nav{display: none;position: absolute;top: 100%;left: 0;right: 0;flex-direction: column;align-items: stretch;gap: 2px;padding: 14px 20px 22px;background: var(--canvas);border-bottom: 1px solid var(--hairline);box-shadow: var(--shadow-md);max-height: calc(100vh - 64px);overflow-y: auto} .hdr__burger:checked ~ .hdr__nav{display: flex} .hdr__link{padding: 12px 4px;font-size: 1.02rem} .hdr__caret{display: none} .hdr__panel{position: static;opacity: 1;visibility: visible;transform: none;box-shadow: none;background: transparent;border: 0;border-left: 2px solid var(--hairline);border-radius: 0;min-width: 0;padding: 0 0 0 12px;margin: 2px 0 8px 4px} .hdr__panel a span{display: none}} @media (max-width: 1000px){.ftr__grid{grid-template-columns: 1fr 1fr;gap: 40px}} @media (max-width: 900px){.band{padding: 64px 0} .hero2{padding: 120px 0 60px} .hero2__grid, .split, .split--sidebar, .contact2, .platforms{grid-template-columns: 1fr;gap: 40px} .pfcard{padding: 28px 22px} .hero2__facts{border-left: 0;padding-left: 0;border-top: 1px solid var(--hairline)} .section-head{margin-bottom: 34px} .form2{padding: 26px 22px} .form2__grid{grid-template-columns: 1fr} .wrap{padding: 0 20px}} @media (max-width: 640px){.ftr__grid{grid-template-columns: 1fr;gap: 34px} .ftr__bottom{flex-direction: column;align-items: flex-start}}