:root {
    --color-white: rgba(255, 255, 255, 1);
    --color-black: rgba(0, 0, 0, 1);
    --color-cream-50: rgba(252, 252, 249, 1);
    --color-cream-100: rgba(255, 255, 253, 1);
    --color-gray-200: rgba(245, 245, 245, 1);
    --color-gray-300: rgba(167, 169, 169, 1);
    --color-gray-400: rgba(119, 124, 124, 1);
    --color-slate-500: rgba(98, 108, 113, 1);
    --color-brown-600: rgba(94, 82, 64, 1);
    --color-charcoal-700: rgba(31, 33, 33, 1);
    --color-charcoal-800: rgba(38, 40, 40, 1);
    --color-slate-900: rgba(19, 52, 59, 1);
    --color-teal-300: rgba(50, 184, 198, 1);
    --color-teal-400: rgba(45, 166, 178, 1);
    --color-teal-500: rgba(33, 128, 141, 1);
    --color-teal-600: rgba(29, 116, 128, 1);
    --color-teal-700: rgba(26, 104, 115, 1);
    --color-teal-800: rgba(41, 150, 161, 1);
    --color-red-400: rgba(255, 84, 89, 1);
    --color-red-500: rgba(192, 21, 47, 1);
    --color-orange-400: rgba(230, 129, 97, 1);
    --color-orange-500: rgba(168, 75, 47, 1);
    --color-brown-600-rgb: 94, 82, 64;
    --color-teal-500-rgb: 33, 128, 141;
    --color-slate-900-rgb: 19, 52, 59;
    --color-slate-500-rgb: 98, 108, 113;
    --color-red-500-rgb: 192, 21, 47;
    --color-red-400-rgb: 255, 84, 89;
    --color-orange-500-rgb: 168, 75, 47;
    --color-orange-400-rgb: 230, 129, 97;
    --color-bg-1: rgba(59, 130, 246, 0.08);
    --color-bg-2: rgba(245, 158, 11, 0.08);
    --color-bg-3: rgba(34, 197, 94, 0.08);
    --color-bg-4: rgba(239, 68, 68, 0.08);
    --color-bg-5: rgba(147, 51, 234, 0.08);
    --color-bg-6: rgba(249, 115, 22, 0.08);
    --color-bg-7: rgba(236, 72, 153, 0.08);
    --color-bg-8: rgba(6, 182, 212, 0.08);
    --color-background: var(--color-cream-50);
    --color-surface: var(--color-cream-100);
    --color-text: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-500);
    --color-primary: var(--color-teal-500);
    --color-primary-hover: var(--color-teal-600);
    --color-primary-active: var(--color-teal-700);
    --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
    --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
    --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
    --color-border: rgba(var(--color-brown-600-rgb), 0.2);
    --color-btn-primary-text: var(--color-cream-50);
    --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
    --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
    --color-error: var(--color-red-500);
    --color-success: var(--color-teal-500);
    --color-warning: var(--color-orange-500);
    --color-info: var(--color-slate-500);
    --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
    --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --color-success-rgb: 33, 128, 141;
    --color-error-rgb: 192, 21, 47;
    --color-warning-rgb: 168, 75, 47;
    --color-info-rgb: 98, 108, 113;
    --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 30px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 550;
    --font-weight-bold: 600;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --letter-spacing-tight: -0.01em;
    --space-0: 0;
    --space-1: 1px;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --radius-sm: 6px;
    --radius-base: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --qrtix-primary: #FF6B6B;
    --qrtix-secondary: #FFA500;
    --qrtix-accent: #FF8E53;
    --qrtix-success: #28A745;
    --qrtix-warning: #FFC107;
    --qrtix-error: #DC3545;
    --qrtix-background: #FFFFFF;
    --qrtix-surface: #F8F9FA;
    --qrtix-text: #2C3E50;
    --qrtix-text-secondary: #6C757D;
    --color-primary: var(--qrtix-primary);
    --color-primary-hover: #FF5252;
    --color-primary-active: #FF4444;
    --color-background: var(--qrtix-background);
    --color-surface: var(--qrtix-surface);
    --color-text: var(--qrtix-text);
    --color-text-secondary: var(--qrtix-text-secondary);
    --color-success: var(--qrtix-success);
    --color-warning: var(--qrtix-warning);
    --color-error: var(--qrtix-error);
    --color-card-border: rgba(255, 107, 107, 0.1);
    --color-border: rgba(255, 107, 107, 0.2);
    --color-secondary: rgba(255, 165, 0, 0.1);
    --color-secondary-hover: rgba(255, 165, 0, 0.2)
}

html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box
}

body {
    margin: 0;
    padding: 0
}

*,
::after,
::before {
    box-sizing: inherit
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight)
}

h1 {
    font-size: var(--font-size-4xl)
}

h2 {
    font-size: var(--font-size-3xl)
}

h3 {
    font-size: var(--font-size-2xl)
}

h4 {
    font-size: var(--font-size-xl)
}

h5 {
    font-size: var(--font-size-lg)
}

h6 {
    font-size: var(--font-size-md)
}

p {
    margin: 0 0 var(--space-16) 0
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard)
}

a:hover {
    color: var(--color-white)
}

code {
    font-family: var(--font-family-mono);
    font-size: calc(var(--font-size-base) * .95);
    background-color: var(--color-secondary);
    border-radius: var(--radius-sm)
}

code {
    padding: var(--space-1) var(--space-4)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-standard);
    border: none;
    text-decoration: none;
    position: relative
}

.btn:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring)
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-btn-primary-text)
}

.btn--primary:hover {
    background: var(--color-primary-hover)
}

.btn--primary:active {
    background: var(--color-primary-active)
}

.btn--outline {
    background: 0 0;
    border: 1px solid var(--color-border);
    color: var(--color-text)
}

.btn--outline:hover {
    background: var(--color-secondary)
}

.btn--full-width {
    width: 100%
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.form-label {
    display: block;
    margin-bottom: var(--space-8);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm)
}

.form-group {
    margin-bottom: var(--space-16)
}

.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--ease-standard)
}

.card:hover {
    box-shadow: var(--shadow-md)
}

.card__body {
    padding: var(--space-16)
}

.card__footer,
.card__header {
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-card-border-inner)
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-16);
    padding-left: var(--space-16)
}

@media (min-width:640px) {
    .container {
        max-width: var(--container-sm)
    }
}

@media (min-width:768px) {
    .container {
        max-width: var(--container-md)
    }
}

@media (min-width:1024px) {
    .container {
        max-width: var(--container-lg)
    }
}

@media (min-width:1280px) {
    .container {
        max-width: var(--container-xl)
    }
}

.p-0 {
    padding: 0
}

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: all var(--duration-normal) var(--ease-standard);
    box-shadow: var(--shadow-sm)
}

.nav-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-20);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-12)
}

.nav-logo {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-base);
    object-fit: contain
}

.footer-logo {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-base);
    object-fit: contain;
    vertical-align: middle
}

.nav-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    font-family: var(--font-family-base);
    margin: 0
}

.nav-brand a:hover {
    color: var(--color-primary-hover)
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-32)
}

.nav-link {
    text-decoration: none;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    padding: var(--space-8) 0;
    position: relative;
    transition: color var(--duration-fast);
    font-family: var(--font-family-base)
}

.nav-link.active,
.nav-link:hover {
    color: var(--color-primary)
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px
}

.nav-btn {
    background: var(--color-primary);
    color: var(--color-btn-primary-text);
    padding: var(--space-10) var(--space-24);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: all var(--duration-normal) var(--ease-standard);
    font-family: var(--font-family-base)
}

.nav-btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md)
}

.nav-toggle {
    display: none;
    background: 0 0;
    border: none;
    font-size: var(--font-size-2xl);
    color: var(--color-text);
    cursor: pointer
}

.hero-section {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--color-primary) 0, var(--color-primary-active) 100%);
    color: var(--color-white);
    overflow: hidden;
    min-height: 60vh
}

.hero-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-20);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32);
    align-items: center
}

.hero-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-20);
    font-family: var(--font-family-base)
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    opacity: .9;
    margin-bottom: var(--space-32);
    line-height: var(--line-height-normal)
}

.hero-buttons {
    display: flex;
    gap: var(--space-16);
    flex-wrap: wrap
}

.btn {
    padding: var(--space-12) var(--space-24);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: all var(--duration-normal) var(--ease-standard);
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    border: none;
    cursor: pointer;
    font-family: var(--font-family-base)
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-btn-primary-text)
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md)
}

.btn-outline {
    background: 0 0;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, .3)
}

.btn-outline:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .6)
}

.hero-graphic {
    background: rgba(255, 255, 255, .1);
    border-radius: var(--radius-lg);
    padding: var(--space-32);
    text-align: center;
    backdrop-filter: blur(10px)
}

.hero-icon {
    font-size: 80px;
    margin-bottom: var(--space-24);
    opacity: .9
}

.hero-stats {
    display: flex;
    justify-content: space-around;
    gap: var(--space-20)
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4)
}

.stat-label {
    font-size: var(--font-size-sm);
    opacity: .8
}

.features-section {
    padding: 80px 0;
    background: var(--color-surface)
}

.container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-20)
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-32)
}

.section-header h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-16);
    color: var(--color-text);
    font-family: var(--font-family-base)
}

.section-header p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary)
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-32)
}

.feature-card {
    background: var(--color-background);
    padding: var(--space-32) var(--space-24);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-card-border);
    transition: all var(--duration-normal) var(--ease-standard)
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary)
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-24);
    font-size: var(--space-32);
    color: var(--color-white)
}

.feature-card h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-16);
    color: var(--color-text);
    font-family: var(--font-family-base)
}

.feature-card p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal)
}

.benefits-section {
    padding: 80px 0;
    background: var(--color-background)
}

.benefits-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32);
    align-items: center
}

.benefits-text h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-32);
    color: var(--color-text);
    font-family: var(--font-family-base)
}

.benefit-item {
    display: flex;
    gap: var(--space-20);
    margin-bottom: var(--space-24)
}

.benefit-icon {
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--space-20);
    flex-shrink: 0
}

.benefit-content h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-8);
    color: var(--color-text);
    font-family: var(--font-family-base)
}

.benefit-content p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal)
}

.phone-mockup {
    min-width: 240px;
    margin: 0 auto;
    background: var(--color-bg-2);
    border-radius: var(--space-20);
    padding: var(--space-20);
    box-shadow: var(--shadow-lg)
}

.phone-screen {
    background: var(--color-background);
    border-radius: var(--space-20);
    overflow: hidden;
    min-height: 400px
}

.app-header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-20);
    text-align: center;
    font-weight: var(--font-weight-semibold)
}

.app-content {
    padding: var(--space-32) var(--space-20)
}

.scan-area {
    padding: var(--space-32) var(--space-20);
    margin-bottom: var(--space-24);
    background: linear-gradient(135deg, var(--color-primary), var(--qrtix-accent));
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.qr-scan-animation {
    width: 100px;
    height: 100px;
    border: 3px solid #fff;
    position: relative;
    animation: scan 3s infinite
}

.qr-scan-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    animation: scan-line 3s infinite
}

@keyframes scan {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

@keyframes scan-line {
    0% {
        top: 0
    }

    100% {
        top: 100%
    }
}

.stats-mini {
    display: flex;
    justify-content: space-around
}

.mini-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.mini-stat span:first-child {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary)
}

.mini-stat span:last-child {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary)
}

.service-section {
    padding: 80px 0;
    background: var(--color-background)
}

.service-card {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
    border-radius: var(--radius-lg);
    padding: var(--space-32) var(--space-32);
    text-align: center;
    color: var(--color-white)
}

.service-content h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-16);
    font-family: var(--font-family-base)
}

.service-content p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-32);
    opacity: .9
}

.service-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-16);
    margin-bottom: var(--space-32);
    text-align: left
}

.service-feature {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    font-size: var(--font-size-base)
}

.service-feature i {
    color: var(--color-white);
    font-size: var(--font-size-lg)
}

.pricing-section {
    padding: 80px 0;
    background: var(--color-surface)
}

.pricing-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-32);
    gap: var(--space-8)
}

.toggle-btn {
    padding: var(--space-12) var(--space-24);
    border: 2px solid var(--color-primary);
    background: 0 0;
    color: var(--color-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: all var(--duration-normal) var(--ease-standard);
    font-family: var(--font-family-base)
}

.toggle-btn.active {
    background: var(--color-primary);
    color: var(--color-btn-primary-text)
}

.pricing-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32);
    max-width: 900px;
    margin: 0 auto
}

.pricing-plan {
    background: var(--color-background);
    border: 2px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-32) var(--space-24);
    text-align: center;
    position: relative;
    transition: all var(--duration-normal) var(--ease-standard)
}

.pricing-plan:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg)
}

.plan-header {
    margin-bottom: var(--space-32)
}

.plan-header h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-16);
    color: var(--color-text);
    font-family: var(--font-family-base)
}

.price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-4)
}

.currency {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary)
}

.amount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary)
}

.period {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary)
}

.plan-features {
    list-style: none;
    margin-bottom: var(--space-24);
    padding: 0
}

.plan-features li {
    padding: var(--space-8) 0;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    text-align: left
}

.plan-features i {
    color: var(--color-success);
    font-size: var(--font-size-base);
    width: var(--space-16)
}

.plan-comparison {
    background: var(--color-surface);
    padding: var(--space-16);
    border-radius: var(--radius-base);
    margin-top: var(--space-24)
}

.comparison-text {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    text-decoration: line-through
}

.savings {
    display: block;
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-top: var(--space-4)
}

.calculator-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-32) var(--space-24);
    text-align: center
}

.calculator-card h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-24);
    color: var(--color-text);
    font-family: var(--font-family-base)
}

.calculator-input {
    margin-bottom: var(--space-20)
}

.calculator-input label {
    display: block;
    margin-bottom: var(--space-8);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base)
}

.calculator-input input {
    width: 100%;
    padding: var(--space-12);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    text-align: center;
    font-family: var(--font-family-base);
    background: var(--color-background);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-standard)
}

.calculator-input input:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring)
}

.calculator-result {
    background: var(--color-background);
    padding: var(--space-16);
    border-radius: var(--radius-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-weight-semibold)
}

.result-amount {
    color: var(--color-primary);
    font-size: var(--font-size-lg)
}

.contact-section {
    padding: 80px 0;
    background: var(--color-surface)
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32);
    align-items: start
}

.contact-info h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-16);
    color: var(--color-text);
    font-family: var(--font-family-base)
}

.contact-info p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-32);
    line-height: var(--line-height-normal)
}

.contact-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-20)
}

.contact-feature {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    font-weight: var(--font-weight-medium)
}

.contact-feature i {
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
    width: var(--space-24)
}

.contact-form-container {
    background: var(--color-background);
    border-radius: var(--radius-lg);
    padding: var(--space-32);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-card-border)
}

.contact-form h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-24);
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-family-base)
}

.form-group {
    position: relative;
    margin-bottom: var(--space-24)
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--space-16) var(--space-12) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    transition: all var(--duration-normal) var(--ease-standard);
    background: var(--color-surface);
    font-family: var(--font-family-base);
    color: var(--color-text)
}

.form-group input:focus,
.form-group textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring)
}

.form-group label {
    position: absolute;
    top: var(--space-16);
    left: var(--space-12);
    color: var(--color-text-secondary);
    transition: all var(--duration-normal) var(--ease-standard);
    pointer-events: none;
    font-size: var(--font-size-base);
    font-family: var(--font-family-base)
}

.form-group input:focus+label,
.form-group input:valid+label,
.form-group textarea:focus+label,
.form-group textarea:valid+label {
    top: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-primary)
}

.btn-full {
    width: 100%;
    justify-content: center
}

.footer {
    background: var(--color-charcoal-700);
    color: var(--color-white);
    padding: var(--space-32) 0 var(--space-20)
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-24)
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-8)
}

.footer-brand a:hover {
    color: var(--color-primary-hover)
}

.footer-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    font-family: var(--font-family-base)
}

.footer-brand p {
    color: rgba(255, 255, 255, .7)
}

.footer-column h4 {
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1.15rem
}

.footer-column a {
    display: block;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    margin-bottom: .5rem;
    transition: color .3s
}

.footer-column a:hover {
    color: #fff
}

.footer-links {
    display: flex;
    gap: var(--space-32)
}

.footer-links a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color var(--duration-fast);
    font-size: var(--font-size-base)
}

.footer-links a:hover {
    color: var(--color-white)
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-20);
    border-top: 1px solid rgba(255, 255, 255, .1)
}

.footer-bottom p {
    color: rgba(255, 255, 255, .5);
    font-size: var(--font-size-sm)
}

.message {
    background: rgba(var(--color-success-rgb, 40, 167, 69), 0.1);
    position: fixed;
    top: var(--space-20);
    right: var(--space-20);
    padding: var(--space-16) var(--space-20);
    border-radius: var(--radius-base);
    color: var(--color-black);
    font-weight: var(--font-weight-medium);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-width: 300px;
    box-shadow: var(--shadow-lg);
    animation: slideInRight .3s ease-out;
    font-family: var(--font-family-base)
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

.message--info {
    background: var(--color-info)
}

@media (max-width:768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--color-surface);
        flex-direction: column;
        padding: var(--space-20);
        gap: var(--space-16);
        box-shadow: var(--shadow-sm);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--duration-normal) var(--ease-standard)
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible
    }

    .nav-toggle {
        display: block
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-32);
        text-align: center
    }

    .hero-title {
        font-size: var(--font-size-3xl)
    }

    .hero-subtitle {
        font-size: var(--font-size-lg)
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-24)
    }

    .benefits-content {
        grid-template-columns: 1fr;
        gap: var(--space-32)
    }

    .pricing-plans {
        grid-template-columns: 1fr;
        gap: var(--space-32)
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--space-32)
    }

    .footer-content {
        flex-direction: column;
        gap: var(--space-24);
        text-align: center
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center
    }

    .section-header h2 {
        font-size: var(--font-size-2xl)
    }

    .benefits-text h2,
    .contact-info h2,
    .service-content h2 {
        font-size: var(--font-size-2xl)
    }

    .message {
        /*left: var(--space-20);*/
        right: var(--space-20);
        /*max-width: 200px*/
    }

    .service-card {
        padding: var(--space-32) var(--space-20)
    }

    .service-features {
        grid-template-columns: 1fr
    }
}

@media (max-width:480px) {
    .container {
        padding: 0 var(--space-16)
    }

    .nav-container {
        padding: 0 var(--space-16);
        height: 60px
    }

    .hero-section {
        padding: 100px 0 var(--space-32)
    }

    .hero-container {
        padding: 0 var(--space-16)
    }

    .hero-title {
        font-size: var(--font-size-2xl)
    }

    .hero-subtitle {
        font-size: var(--font-size-base);
        margin-bottom: var(--space-24)
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch
    }

    .btn {
        justify-content: center;
        padding: var(--space-12) var(--space-20)
    }

    .contact-form-container {
        padding: var(--space-24)
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-20)
    }

    .feature-card {
        padding: var(--space-24) var(--space-20)
    }

    .section-header h2 {
        font-size: var(--font-size-xl)
    }

    .benefits-text h2,
    .contact-info h2,
    .service-content h2 {
        font-size: var(--font-size-xl)
    }

    .hero-graphic {
        padding: var(--space-24)
    }

    .hero-icon {
        font-size: 60px
    }

    .stat-number {
        font-size: var(--font-size-2xl)
    }

    .benefit-item {
        gap: var(--space-16)
    }

    .nav-title {
        font-size: var(--font-size-2xl)
    }
}

/*!
 * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
.fa {
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    font-weight: var(--fa-style, 900)
}

.fa,
.fa-brands,
.fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}

.fas {
    font-family: "Font Awesome 6 Free"
}

.fa-brands {
    font-family: "Font Awesome 6 Brands"
}

.fa-1x {
    font-size: 1em
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-6x {
    font-size: 6em
}

.fa-7x {
    font-size: 7em
}

.fa-8x {
    font-size: 8em
}

.fa-9x {
    font-size: 9em
}

.fa-10x {
    font-size: 10em
}

.fa-ul {
    list-style-type: none;
    margin-left: var(--fa-li-margin, 2.5em);
    padding-left: 0
}

.fa-ul>li {
    position: relative
}

.fa-li {
    left: calc(var(--fa-li-width, 2em)*-1);
    position: absolute;
    text-align: center;
    width: var(--fa-li-width, 2em);
    line-height: inherit
}

@-webkit-keyframes fa-beat {

    0%,
    90% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    45% {
        -webkit-transform: scale(var(--fa-beat-scale, 1.25));
        transform: scale(var(--fa-beat-scale, 1.25))
    }
}

@keyframes fa-beat {

    0%,
    90% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    45% {
        -webkit-transform: scale(var(--fa-beat-scale, 1.25));
        transform: scale(var(--fa-beat-scale, 1.25))
    }
}

@-webkit-keyframes fa-bounce {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }

    10% {
        -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0);
        transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
    }

    30% {
        -webkit-transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em));
        transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
    }

    50% {
        -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0);
        transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
    }

    57% {
        -webkit-transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em));
        transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em))
    }

    64% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }

    to {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }
}

@keyframes fa-bounce {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }

    10% {
        -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0);
        transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
    }

    30% {
        -webkit-transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em));
        transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
    }

    50% {
        -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0);
        transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
    }

    57% {
        -webkit-transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em));
        transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em))
    }

    64% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }

    to {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0)
    }
}

@-webkit-keyframes fa-fade {
    50% {
        opacity: var(--fa-fade-opacity, .4)
    }
}

@keyframes fa-fade {
    50% {
        opacity: var(--fa-fade-opacity, .4)
    }
}

@-webkit-keyframes fa-beat-fade {

    0%,
    to {
        opacity: var(--fa-beat-fade-opacity, .4);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
        transform: scale(var(--fa-beat-fade-scale, 1.125))
    }
}

@keyframes fa-beat-fade {

    0%,
    to {
        opacity: var(--fa-beat-fade-opacity, .4);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
        transform: scale(var(--fa-beat-fade-scale, 1.125))
    }
}

@-webkit-keyframes fa-flip {
    50% {
        -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
        transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg))
    }
}

@keyframes fa-flip {
    50% {
        -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
        transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg))
    }
}

@-webkit-keyframes fa-shake {
    0% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }

    4% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    24%,
    8% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }

    12%,
    28% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

    16% {
        -webkit-transform: rotate(-22deg);
        transform: rotate(-22deg)
    }

    20% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg)
    }

    32% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg)
    }

    36% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    40%,
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes fa-shake {
    0% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg)
    }

    4% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    24%,
    8% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg)
    }

    12%,
    28% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg)
    }

    16% {
        -webkit-transform: rotate(-22deg);
        transform: rotate(-22deg)
    }

    20% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg)
    }

    32% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg)
    }

    36% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg)
    }

    40%,
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.fa-0:before {
    content: "\30"
}

.fa-1:before {
    content: "\31"
}

.fa-2:before {
    content: "\32"
}

.fa-3:before {
    content: "\33"
}

.fa-4:before {
    content: "\34"
}

.fa-5:before {
    content: "\35"
}

.fa-6:before {
    content: "\36"
}

.fa-7:before {
    content: "\37"
}

.fa-8:before {
    content: "\38"
}

.fa-9:before {
    content: "\39"
}

.fa-at:before {
    content: "\40"
}

.fa-message:before {
    content: "\f27a"
}

.fa-info:before {
    content: "\f129"
}

.fa-file-alt:before,
.fa-file-text:before {
    content: "\f15c"
}

.fa-icons:before {
    content: "\f86d"
}

.fa-k:before {
    content: "\4b"
}

.fa-bars:before {
    content: "\f0c9"
}

.fa-header:before {
    content: "\f1dc"
}

.fa-users:before {
    content: "\f0c0"
}

.fa-i:before {
    content: "\49"
}

.fa-chart-simple:before {
    content: "\e473"
}

.fa-dashboard:before {
    content: "\f624"
}

.fa-area-chart:before,
.fa-chart-area:before {
    content: "\f1fe"
}

.fa-star:before {
    content: "\f005"
}

.fa-toggle-on:before {
    content: "\f205"
}

.fa-headset:before {
    content: "\f590"
}

.fa-image:before {
    content: "\f03e"
}

.fa-address-card:before,
.fa-contact-card:before {
    content: "\f2bb"
}

.fa-shield-alt:before {
    content: "\f3ed"
}

.fa-z:before {
    content: "\5a"
}

.fa-a:before {
    content: "\41"
}

.fa-p:before {
    content: "\50"
}

.fa-code:before {
    content: "\f121"
}

.fa-h:before {
    content: "\48"
}

.fa-mobile-alt:before,
.fa-mobile-screen-button:before {
    content: "\f3cd"
}

.fa-file-image:before {
    content: "\f1c5"
}

.fa-phone-alt:before {
    content: "\f879"
}

.fa-tags:before {
    content: "\f02c"
}

.fa-mobile-button:before {
    content: "\f10b"
}

.fa-file-shield:before {
    content: "\e4f0"
}

.fa-file-code:before {
    content: "\f1c9"
}

.fa-save:before {
    content: "\f0c7"
}

.fa-phone:before {
    content: "\f095"
}

.fa-text-width:before {
    content: "\f035"
}

.fa-clock:before {
    content: "\f017"
}

.fa-mobile-screen:before {
    content: "\f3cf"
}

.fa-plane-up:before {
    content: "\e22d"
}

.fa-ticket:before {
    content: "\f145"
}

.fa-images:before {
    content: "\f302"
}

.fa-calculator:before {
    content: "\f1ec"
}

.fa-mobile-phone:before,
.fa-mobile:before {
    content: "\f3ce"
}

.fa-id-card:before {
    content: "\f2c2"
}

.fa-home-alt:before,
.fa-home:before {
    content: "\f015"
}

.fa-b:before {
    content: "\42"
}

.fa-up-long:before {
    content: "\f30c"
}

.fa-less-than:before {
    content: "\3c"
}

.fa-file:before {
    content: "\f15b"
}

.fa-section:before {
    content: "\e447"
}

.fa-link:before {
    content: "\f0c1"
}

.fa-font:before {
    content: "\f031"
}

.fa-copy:before {
    content: "\f0c5"
}

.fa-add:before {
    content: "\2b"
}

.fa-rocket:before {
    content: "\f135"
}

.fa-percentage:before {
    content: "\25"
}

.fa-display:before {
    content: "\e163"
}

.fa-ticket-alt:before,
.fa-ticket-simple:before {
    content: "\f3ff"
}

.fa-qrcode:before {
    content: "\f029"
}

.fa-shield:before {
    content: "\f132"
}

.fa-t:before {
    content: "\54"
}

.fa-chart-column:before {
    content: "\e0e3"
}

.fa-check:before {
    content: "\f00c"
}

.fa-paper-plane:before {
    content: "\f1d8"
}

.fa-id-card-alt:before {
    content: "\f47f"
}

.fa-plane:before {
    content: "\f072"
}

.fa-x:before {
    content: "\58"
}

:host,
:root {
    --fa-style-family-brands: "Font Awesome 6 Brands";
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.ttf) format("truetype")
}

.fa-brands {
    font-weight: 400
}

.fa-cloudflare:before {
    content: "\e07d"
}

.fa-css3-alt:before {
    content: "\f38b"
}

.fa-font-awesome-alt:before {
    content: "\f35c"
}

.fa-meta:before {
    content: "\e49b"
}

.fa-font-awesome-logo-full:before,
.fa-font-awesome:before {
    content: "\f2b4"
}

.fa-less:before {
    content: "\f41d"
}

.fa-42-group:before {
    content: "\e080"
}

.fa-whatsapp:before {
    content: "\f232"
}

.fa-html5:before {
    content: "\f13b"
}

.fa-css3:before {
    content: "\f13c"
}

.fa-js:before {
    content: "\f3b8"
}

:host,
:root {
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.ttf) format("truetype")
}

:host,
:root {
    --fa-style-family-classic: "Font Awesome 6 Free";
    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf) format("truetype")
}

.fas {
    font-weight: 900
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: block;
    font-weight: 400;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.ttf) format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 900;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf) format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: block;
    font-weight: 400;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.ttf) format("truetype")
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.ttf) format("truetype");
    unicode-range: u+f003, u+f006, u+f014, u+f016-f017, u+f01a-f01b, u+f01d, u+f022, u+f03e, u+f044, u+f046, u+f05c-f05d, u+f06e, u+f070, u+f087-f088, u+f08a, u+f094, u+f096-f097, u+f09d, u+f0a0, u+f0a2, u+f0a4-f0a7, u+f0c5, u+f0c7, u+f0e5-f0e6, u+f0eb, u+f0f6-f0f8, u+f10c, u+f114-f115, u+f118-f11a, u+f11c-f11d, u+f133, u+f147, u+f14e, u+f150-f152, u+f185-f186, u+f18e, u+f190-f192, u+f196, u+f1c1-f1c9, u+f1d9, u+f1db, u+f1e3, u+f1ea, u+f1f7, u+f1f9, u+f20a, u+f247-f248, u+f24a, u+f24d, u+f255-f25b, u+f25d, u+f271-f274, u+f278, u+f27b, u+f28c, u+f28e, u+f29c, u+f2b5, u+f2b7, u+f2ba, u+f2bc, u+f2be, u+f2c0-f2c1, u+f2c3, u+f2d0, u+f2d2, u+f2d4, u+f2dc
}

@font-face {
    font-family: FontAwesome;
    font-display: block;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-v4compatibility.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-v4compatibility.ttf) format("truetype");
    unicode-range: u+f041, u+f047, u+f065-f066, u+f07d-f07e, u+f080, u+f08b, u+f08e, u+f090, u+f09a, u+f0ac, u+f0ae, u+f0b2, u+f0d0, u+f0d6, u+f0e4, u+f0ec, u+f10a-f10b, u+f123, u+f13e, u+f148-f149, u+f14c, u+f156, u+f15e, u+f160-f161, u+f163, u+f175-f178, u+f195, u+f1f8, u+f219, u+f27a
}