*{box-sizing: border-box}html{scroll-behavior: smooth;transition: background-color var(--transition-normal), color var(--transition-normal)}img{max-width: 100%;height: auto}@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration: 0.1s !important;animation-iteration-count: 1 !important;transition-duration: 0ms !important}}:root{--primary-color: rgb(0 102 204);--primary-dark: rgb(0 77 153);--primary-light: rgb(51 143 255);--secondary-color: rgb(107 114 128);--text-primary: rgb(17 24 39);--text-secondary: rgb(55 65 81);--text-muted: rgb(107 114 128);--bg-primary: rgb(255 255 255);--bg-secondary: rgb(249 250 251);--bg-tertiary: rgb(243 244 246);--bg-accent: rgb(240 249 255);--bg-dark: rgb(26 26 26);--bg-darker: rgb(45 45 45);--success-color: rgb(16 185 129);--warning-color: rgb(245 158 11);--error-color: rgb(239 68 68);--info-color: rgb(59 130 246);--gradient-primary: rgb(79 172 254);--gradient-secondary: rgb(240 147 251);--gradient-gold: rgb(255 215 0);--gradient-gold-light: rgb(255 237 78);--hero-gradient: linear-gradient(135deg, rgb(102 126 234) 0%, rgb(118 75 162) 25%, var(--gradient-secondary) 50%, rgb(245 87 108) 75%, var(--gradient-primary) 100%);--color-white: rgb(255 255 255);--text-muted-darker: rgb(156 163 175);--text-muted-light: rgb(203 213 225);--bg-secondary-light: rgb(245 247 250);--text-comment: rgb(100 116 139);--text-command: rgb(6 214 160);--text-output: rgb(59 130 246);--success-color-light: rgb(134 239 172);--error-color-light: rgb(252 165 165);--border-color: rgb(229 231 235);--border-light: rgb(243 244 246);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);--spacing-xs: 0.25rem;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--radius-sm: 0.25rem;--radius-md: 0.375rem;--radius-lg: 0.5rem;--radius-xl: 0.75rem;--radius-2xl: 1rem;--radius-full: 9999px;--transition-fast: 150ms ease-in-out;--transition-normal: 250ms ease-in-out;--transition-slow: 350ms ease-in-out}@media (prefers-color-scheme: dark){:root{--text-primary: rgb(243 244 246);--text-secondary: rgb(209 213 219);--text-muted: rgb(156 163 175);--bg-primary: rgb(17 24 39);--bg-secondary: rgb(31 41 55);--bg-tertiary: rgb(55 65 81);--bg-accent: rgb(30 58 95);--border-color: rgb(55 65 81);--border-light: rgb(31 41 55);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 30%);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 40%), 0 2px 4px -2px rgb(0 0 0 / 40%);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 40%), 0 4px 6px -4px rgb(0 0 0 / 40%)}}[data-theme="light"]{color-scheme: light;--text-primary: rgb(17 24 39);--text-secondary: rgb(55 65 81);--text-muted: rgb(107 114 128);--bg-primary: rgb(255 255 255);--bg-secondary: rgb(249 250 251);--bg-tertiary: rgb(243 244 246);--bg-accent: rgb(240 249 255);--border-color: rgb(229 231 235);--border-light: rgb(243 244 246);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%)}[data-theme="dark"]{color-scheme: dark;--text-primary: rgb(243 244 246);--text-secondary: rgb(209 213 219);--text-muted: rgb(156 163 175);--bg-primary: rgb(17 24 39);--bg-secondary: rgb(31 41 55);--bg-tertiary: rgb(55 65 81);--bg-accent: rgb(30 58 95);--border-color: rgb(55 65 81);--border-light: rgb(31 41 55);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 30%);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 40%), 0 2px 4px -2px rgb(0 0 0 / 40%);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 40%), 0 4px 6px -4px rgb(0 0 0 / 40%)}@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration: 0.1s !important;animation-iteration-count: 1 !important;transition-duration: 0.1s !important;scroll-behavior: auto !important}}*, *::before, *::after{box-sizing: border-box}body{margin: 0;font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size: 16px;line-height: 1.6;color: var(--text-primary);background-color: var(--bg-primary);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;animation: fadeIn 0.6s ease-out forwards}h1, h2, h3, h4, h5, h6{margin: 0 0 var(--spacing-md) 0;font-weight: 600;line-height: 1.2;color: var(--text-primary)}h1{font-size: 2.25rem}h2{font-size: 1.875rem}h3{font-size: 1.5rem}h4{font-size: 1.25rem}h5{font-size: 1.125rem}h6{font-size: 1rem}p{margin: 0 0 var(--spacing-md) 0;color: var(--text-secondary)}a{color: var(--primary-color);text-decoration: none;transition: color var(--transition-fast)}a:hover{color: var(--primary-dark)}input, textarea, select, button{font-family: inherit;font-size: inherit;line-height: inherit}button{cursor: pointer;border: none;background: none;padding: 0}.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip-path: inset(100%);white-space: nowrap;border: 0}.container{width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 var(--spacing-md)}@media (width >= 768px){.container{padding: 0 var(--spacing-lg)}}*:focus{outline: 2px solid var(--primary-color);outline-offset: 2px}button:focus, input:focus, textarea:focus, select:focus{outline: 2px solid var(--primary-color);outline-offset: 2px}.noscript-overlay{position: fixed;inset: 0;background: rgb(0 0 0 / 80%);color: var(--color-white);display: flex;align-items: center;justify-content: center;z-index: 9999;text-align: center;padding: 20px}.noscript-link{color: rgb(0 102 204)}.text-heart{color: rgb(226 85 85)}.theme-icon--dark{display: none}[data-theme="dark"] .theme-icon--dark{display: inline}[data-theme="dark"] .theme-icon--light{display: none}.error{border-color: var(--error-color) !important;background-color: rgb(239 68 68 / 10%) !important}.success{border-color: var(--success-color) !important;background-color: rgb(16 185 129 / 10%) !important}.skip-link{position: absolute;top: -40px;left: 6px;background: var(--primary-color);color: var(--color-white);padding: 8px;text-decoration: none;border-radius: 4px;z-index: 1000;font-weight: 500}.skip-link:focus{top: 6px}.btn{display: inline-flex;align-items: center;justify-content: center;gap: var(--spacing-sm);padding: var(--spacing-sm) var(--spacing-lg);min-height: 44px;font-weight: 500;font-size: 0.875rem;line-height: 1.5;text-decoration: none;border-radius: var(--radius-md);border: 1px solid transparent;cursor: pointer;transition: all var(--transition-fast);white-space: nowrap}.btn--primary{background-color: var(--primary-color);color: var(--color-white);border-color: var(--primary-color)}.btn--primary:hover{background-color: var(--primary-dark);border-color: var(--primary-dark);transform: translateY(-1px);box-shadow: var(--shadow-md)}.btn--primary:active{transform: translateY(0);box-shadow: var(--shadow-sm)}.btn--primary:focus{outline: none;box-shadow: 0 0 0 3px var(--primary-color), 0 0 0 6px rgb(0 102 204 / 10%)}.btn--secondary{background-color: transparent;color: var(--text-primary);border-color: var(--border-color)}.btn--secondary:hover{background-color: var(--bg-secondary);border-color: var(--text-secondary);transform: translateY(-1px)}.btn--secondary:active{transform: translateY(0)}.btn--outline{background-color: transparent;color: var(--primary-color);border-color: var(--primary-color)}.btn--outline:hover{background-color: var(--primary-color);color: var(--color-white);transform: translateY(-1px);box-shadow: 0 4px 12px rgb(0 102 204 / 25%)}.btn--outline:active{transform: translateY(0)}.btn--lg{padding: var(--spacing-md) var(--spacing-xl);font-size: 1rem}.btn--sm{padding: var(--spacing-xs) var(--spacing-md);font-size: 0.75rem}.btn--full{width: 100%}.card{background-color: var(--bg-primary);border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);border: 1px solid var(--border-color);overflow: hidden;transition: box-shadow var(--transition-normal)}.card:hover{box-shadow: var(--shadow-md);transform: translateY(-2px)}.card__header{padding: var(--spacing-lg);border-bottom: 1px solid var(--border-light)}.card__body{padding: var(--spacing-lg)}.card__footer{padding: var(--spacing-lg);border-top: 1px solid var(--border-light);background-color: var(--bg-secondary)}.card__title{margin: 0 0 var(--spacing-sm) 0;font-size: 1.25rem;font-weight: 600;color: var(--text-primary)}.card__subtitle{margin: 0 0 var(--spacing-md) 0;font-size: 0.875rem;color: var(--text-secondary)}.form-group{margin-bottom: var(--spacing-lg)}.form-label{display: block;margin-bottom: var(--spacing-sm);font-weight: 500;color: var(--text-primary)}.form-input{width: 100%;padding: var(--spacing-sm) var(--spacing-md);border: 1px solid var(--border-color);border-radius: var(--radius-md);font-size: 1rem;line-height: 1.5;color: var(--text-primary);background-color: var(--bg-primary);transition: border-color var(--transition-fast), box-shadow var(--transition-fast)}.form-input:focus{border-color: var(--primary-color);box-shadow: 0 0 0 3px rgb(0 102 204 / 10%);outline: none}.form-input::placeholder{color: var(--text-muted)}.form-textarea{min-height: 120px;resize: vertical}.form-error{margin-top: var(--spacing-xs);font-size: 0.875rem;color: var(--error-color)}.form-helper{color: var(--text-secondary);font-size: 0.875rem;line-height: 1.5;margin-bottom: var(--spacing-md)}.navbar{background-color: var(--bg-primary);border-bottom: 1px solid var(--border-color);position: sticky;top: 0;z-index: 100}.nav-container{display: flex;align-items: center;justify-content: space-between;padding: var(--spacing-md) 0;max-width: 1200px;margin: 0 auto}.logo{display: flex;align-items: center;gap: 0.5rem;font-size: 1.5rem;font-weight: 700;color: var(--text-primary);text-decoration: none}.logo-icon{font-size: 1.8rem;color: var(--primary-color)}.logo-text{background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));background-clip: text}a{transition: color var(--transition-fast), opacity var(--transition-fast)}.nav-menu{display: flex;list-style: none;gap: 2rem;margin: 0}.nav-menu a{color: var(--text-secondary);text-decoration: none;font-weight: 500;transition: color 0.3s ease;position: relative}.breadcrumb-item a{color: var(--primary-color);text-decoration: none;transition: color var(--transition-fast)}.breadcrumb-item a:hover, .breadcrumb-item a:focus{color: var(--primary-dark);text-decoration: underline}.nav-menu a:hover, .nav-menu a:focus{color: var(--primary-color)}.nav-menu a::after{content: '';position: absolute;bottom: -5px;left: 0;width: 0;height: 2px;background: var(--primary-color);transition: width 0.3s ease}.nav-menu a:hover::after, .nav-menu a.active::after{width: 100%}.nav-menu a.active{color: var(--primary-color)}.breadcrumbs{display: flex;align-items: center;gap: var(--spacing-xs);font-size: 0.875rem;color: var(--text-secondary);flex-wrap: wrap;margin-bottom: var(--spacing-lg)}.breadcrumb-item{display: flex;align-items: center;gap: var(--spacing-xs)}.breadcrumb-separator{color: var(--text-muted);margin: 0 var(--spacing-xs)}.breadcrumb-item:last-child a{color: var(--text-secondary);cursor: default;pointer-events: none}@media (width <= 480px){.breadcrumbs{font-size: 0.75rem;margin-bottom: var(--spacing-md)}}a:not(.btn, .nav-link):hover{color: var(--primary-color);opacity: 0.8}a:not(.btn, .nav-link):active{opacity: 0.6}.nav-actions{display: flex;align-items: center;gap: 1rem}.github-btn{display: flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;background: var(--bg-secondary);border: 1px solid var(--border-color);border-radius: var(--radius-md);color: var(--text-secondary);text-decoration: none;font-weight: 500;transition: all 0.3s ease}.github-btn:hover{background: var(--text-primary);color: var(--color-white);border-color: var(--text-primary)}.theme-toggle{display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;padding: 0;border: 1px solid var(--border-color);border-radius: var(--radius-md);background: transparent;color: var(--text-secondary);cursor: pointer;transition: all var(--transition-fast);font-size: 1.25rem}.theme-toggle:hover{background: var(--bg-secondary);color: var(--text-primary);border-color: var(--primary-color)}.theme-toggle:active{transform: scale(0.95)}.theme-icon{transition: opacity var(--transition-normal), transform var(--transition-normal);position: absolute}.theme-toggle[data-theme="dark"] .theme-icon--light{display: none}.theme-toggle[data-theme="dark"] .theme-icon--dark{display: block}button:not(:disabled), input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled){cursor: pointer;position: relative}button:disabled, input:disabled{opacity: 0.5;cursor: not-allowed}@media (prefers-reduced-motion: no-preference){*{transition-duration: var(--transition-fast) !important}}.alert{padding: var(--spacing-md);border-radius: var(--radius-md);border: 1px solid;margin-bottom: var(--spacing-md)}.alert--success{background-color: rgb(16 185 129 / 10%);border-color: var(--success-color);color: rgb(5 150 105 / 100%)}.alert--warning{background-color: rgb(245 158 11 / 10%);border-color: var(--warning-color);color: rgb(217 119 6 / 100%)}.alert--error{background-color: rgb(239 68 68 / 10%);border-color: var(--error-color);color: rgb(220 38 38 / 100%)}.alert--info{background-color: rgb(59 130 246 / 10%);border-color: var(--info-color);color: rgb(37 99 235 / 100%)}.badge{display: inline-flex;align-items: center;padding: var(--spacing-xs) var(--spacing-sm);font-size: 0.75rem;font-weight: 500;border-radius: var(--radius-full);text-transform: uppercase;letter-spacing: 0.025em}.badge--primary{background-color: rgb(0 102 204 / 10%);color: var(--primary-color)}.badge--success{background-color: rgb(16 185 129 / 10%);color: var(--success-color)}.badge--warning{background-color: rgb(245 158 11 / 10%);color: var(--warning-color)}.loading{display: inline-block;width: 1rem;height: 1rem;border: 2px solid var(--border-color);border-radius: 50%;border-top-color: var(--primary-color);animation: spin 1s ease-in-out infinite;opacity: 0.6;pointer-events: none}@keyframes spin{to{transform: rotate(360deg)}}.spinner{display: inline-block;width: 20px;height: 20px;border: 2px solid var(--border-color);border-radius: 50%;border-top-color: var(--primary-color);animation: spin 1s linear infinite}.spinner--sm{width: 16px;height: 16px;border-width: 1.5px}.spinner--lg{width: 32px;height: 32px;border-width: 3px}.spinner--white{border-color: rgb(255 255 255 / 30%);border-top-color: var(--color-white)}.spinner--primary{border-color: rgb(0 102 204 / 30%);border-top-color: var(--primary-color)}.skeleton{background: linear-gradient( 90deg, var(--border-light) 25%, rgb(0 0 0 / 4%) 50%, var(--border-light) 75% );background-size: 200% 100%;animation: skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{background-position: 200% 0}100%{background-position: -200% 0}}.skeleton--text{height: 1rem;border-radius: var(--radius-sm);margin-bottom: 0.5rem}.skeleton--avatar{width: 48px;height: 48px;border-radius: 50%}.skeleton--card{height: 200px;border-radius: var(--radius-lg)}[aria-busy="true"]{opacity: 0.6;pointer-events: none}.state-loading .spinner{display: inline-block;margin-right: 0.5rem}.state-error{color: var(--error-color);background-color: rgb(239 68 68 / 10%);border: 1px solid rgb(239 68 68 / 20%);border-radius: var(--radius-md);padding: var(--spacing-sm)}.state-success{color: var(--success-color);background-color: rgb(16 185 129 / 10%);border: 1px solid rgb(16 185 129 / 20%);border-radius: var(--radius-md);padding: var(--spacing-sm)}.icon{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0}.icon svg{display: block;width: 100%;height: 100%}.icon--xs{width: 12px;height: 12px}.icon--sm{width: 16px;height: 16px}.icon--md{width: 24px;height: 24px}.icon--lg{width: 32px;height: 32px}.icon--xl{width: 48px;height: 48px}.icon--primary{color: var(--primary-color)}.icon--success{color: var(--success-color)}.icon--warning{color: var(--warning-color)}.icon--error{color: var(--error-color)}.icon--info{color: var(--info-color)}.icon--muted{color: var(--text-muted)}.icon--bg{background: linear-gradient(135deg, var(--primary-color), var(--gradient-secondary));color: var(--color-white);border-radius: var(--radius-md);padding: 0.5rem}.icon--bg.icon--sm{padding: 0.25rem}.icon--bg.icon--lg{padding: 0.75rem}.icon--bg.icon--xl{padding: 1rem}@media (prefers-reduced-motion: no-preference){.icon--animated{animation: iconBounce 2s ease-in-out infinite}@keyframes iconBounce{0%, 100%{transform: translateY(0)}50%{transform: translateY(-4px)}}}@media (width <= 768px){.nav-menu{position: fixed;left: -100%;top: 70px;flex-direction: column;background-color: var(--bg-primary);width: 100%;text-align: center;transition: left 0.3s;gap: 0;padding: var(--spacing-lg) 0;border-bottom: 1px solid var(--border-color);display: flex !important;z-index: 99}.nav-menu.active{left: 0}.nav-menu li{padding: var(--spacing-sm) 0}.mobile-menu-toggle{display: flex;flex-direction: column;background: none;border: none;cursor: pointer;padding: var(--spacing-sm);min-height: 44px;min-width: 44px;align-items: center;justify-content: center}.mobile-menu-toggle:focus{outline: 2px solid var(--primary-color);outline-offset: 2px}.hamburger{display: flex;flex-direction: column;gap: 5px}.hamburger__line{width: 24px;height: 3px;background-color: var(--text-primary);border-radius: 2px;transition: all 0.3s ease}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--top{transform: rotate(45deg) translate(10px, 10px)}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--middle{opacity: 0}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--bottom{transform: rotate(-45deg) translate(8px, -8px)}.nav-container{padding: var(--spacing-sm) var(--spacing-md)}.btn--lg{padding: var(--spacing-sm) var(--spacing-lg);font-size: 0.875rem}.github-btn{padding: 0.375rem 0.75rem;font-size: 0.875rem}}@media (width >= 769px){.mobile-menu-toggle{display: none}}img.lazy{opacity: 0.5;transition: opacity var(--transition-normal)}img.lazy-loaded{opacity: 1}[data-bg-src]{transition: background-image var(--transition-normal)}[data-bg-src].lazy-loaded{background-attachment: scroll}@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}@keyframes slideInUp{from{opacity: 0;transform: translateY(30px)}to{opacity: 1;transform: translateY(0)}}@keyframes slideInLeft{from{opacity: 0;transform: translateX(-30px)}to{opacity: 1;transform: translateX(0)}}@keyframes slideInRight{from{opacity: 0;transform: translateX(30px)}to{opacity: 1;transform: translateX(0)}}.hero, .features, .benefits, .testimonials, .stats, .code-preview, .newsletter{animation: slideInUp 0.8s ease-out forwards;opacity: 0}.benefits{animation-delay: 0.3s}.newsletter{animation-delay: 0.7s}.slide-in-up{animation: slideInUp 0.6s ease-out forwards}.slide-in-left{animation: slideInLeft 0.6s ease-out forwards}.slide-in-right{animation: slideInRight 0.6s ease-out forwards}@media (prefers-reduced-motion: reduce){@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}@keyframes slideInUp{from{opacity: 0}to{opacity: 1}}@keyframes slideInLeft{from{opacity: 0}to{opacity: 1}}@keyframes slideInRight{from{opacity: 0}to{opacity: 1}}.hero, .features, .benefits, .testimonials, .stats, .code-preview, .newsletter, .slide-in-up, .slide-in-left, .slide-in-right{animation-duration: 0ms !important}}.grid{display: grid;gap: var(--spacing-lg)}.grid--cols-1{grid-template-columns: 1fr}.grid--cols-2{grid-template-columns: repeat(2, 1fr)}.grid--cols-3{grid-template-columns: repeat(3, 1fr)}.grid--cols-4{grid-template-columns: repeat(4, 1fr)}.grid--gap-sm{gap: var(--spacing-sm)}.grid--gap-md{gap: var(--spacing-md)}.grid--gap-lg{gap: var(--spacing-lg)}.grid--gap-xl{gap: var(--spacing-xl)}.flex{display: flex}.flex--col{flex-direction: column}.flex--row{flex-direction: row}.flex--wrap{flex-wrap: wrap}.flex--nowrap{flex-wrap: nowrap}.flex--center{align-items: center}.flex--start{align-items: flex-start}.flex--end{align-items: flex-end}.flex--justify-center{justify-content: center}.flex--justify-between{justify-content: space-between}.flex--justify-around{justify-content: space-around}.flex--justify-end{justify-content: flex-end}.margin-0{margin: 0}.margin-xs{margin: var(--spacing-xs)}.margin-sm{margin: var(--spacing-sm)}.margin-md{margin: var(--spacing-md)}.margin-lg{margin: var(--spacing-lg)}.margin-xl{margin: var(--spacing-xl)}.margin-2xl{margin: var(--spacing-2xl)}.margin-t-0{margin-top: 0}.margin-t-xs{margin-top: var(--spacing-xs)}.margin-t-sm{margin-top: var(--spacing-sm)}.margin-t-md{margin-top: var(--spacing-md)}.margin-t-lg{margin-top: var(--spacing-lg)}.margin-t-xl{margin-top: var(--spacing-xl)}.margin-b-0{margin-bottom: 0}.margin-b-xs{margin-bottom: var(--spacing-xs)}.margin-b-sm{margin-bottom: var(--spacing-sm)}.margin-b-md{margin-bottom: var(--spacing-md)}.margin-b-lg{margin-bottom: var(--spacing-lg)}.margin-b-xl{margin-bottom: var(--spacing-xl)}.padding-0{padding: 0}.padding-xs{padding: var(--spacing-xs)}.padding-sm{padding: var(--spacing-sm)}.padding-md{padding: var(--spacing-md)}.padding-lg{padding: var(--spacing-lg)}.padding-xl{padding: var(--spacing-xl)}.padding-t-0{padding-top: 0}.padding-t-xs{padding-top: var(--spacing-xs)}.padding-t-sm{padding-top: var(--spacing-sm)}.padding-t-md{padding-top: var(--spacing-md)}.padding-t-lg{padding-top: var(--spacing-lg)}.padding-t-xl{padding-top: var(--spacing-xl)}.padding-b-0{padding-bottom: 0}.padding-b-xs{padding-bottom: var(--spacing-xs)}.padding-b-sm{padding-bottom: var(--spacing-sm)}.padding-b-md{padding-bottom: var(--spacing-md)}.padding-b-lg{padding-bottom: var(--spacing-lg)}.padding-b-xl{padding-bottom: var(--spacing-xl)}.section{padding: var(--spacing-3xl) 0}.section--sm{padding: var(--spacing-2xl) 0}.section--lg{padding: var(--spacing-3xl) 0}.section--hero{padding: var(--spacing-3xl) 0 var(--spacing-2xl) 0;background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-primary) 100%)}.section--dark{background-color: var(--text-primary);color: var(--bg-primary)}.section--gray{background-color: var(--bg-secondary)}.hero{text-align: center;max-width: 800px;margin: 0 auto;animation-delay: 0.1s}.hero__title{font-size: clamp(2rem, 5vw, 3.5rem);font-weight: 700;color: var(--text-primary);margin-bottom: var(--spacing-lg);line-height: 1.1}.hero__subtitle{font-size: 1.25rem;color: var(--text-secondary);margin-bottom: var(--spacing-xl);line-height: 1.6;max-width: 600px;margin-left: auto;margin-right: auto}.hero__actions{display: flex;gap: var(--spacing-md);justify-content: center;flex-wrap: wrap}.features{margin: var(--spacing-2xl) 0;animation-delay: 0.2s}.feature{text-align: center;padding: var(--spacing-lg)}.feature__icon{width: 64px;height: 64px;margin: 0 auto var(--spacing-md) auto;background-color: var(--primary-color);border-radius: var(--radius-lg);display: flex;align-items: center;justify-content: center;color: var(--color-white);font-size: 1.5rem}.feature__title{font-size: 1.25rem;font-weight: 600;margin-bottom: var(--spacing-sm);color: var(--text-primary)}.feature__description{color: var(--text-secondary);line-height: 1.6}.testimonials{background-color: var(--bg-secondary);padding: var(--spacing-3xl) 0;animation-delay: 0.4s}.testimonial__info h4{margin: 0;font-size: 1rem;font-weight: 600;color: var(--text-primary)}.testimonial__info p{margin: 0;font-size: 0.875rem;color: var(--text-secondary)}footer{background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 50%, var(--bg-dark) 100%);color: var(--bg-primary);position: relative;overflow: hidden;margin-top: 4rem}footer::before{content: '';position: absolute;inset: 0;background: radial-gradient(circle at 20% 30%, rgb(102 126 234 / 10%) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgb(245 87 108 / 10%) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgb(79 172 254 / 5%) 0%, transparent 50%)}.footer-content{position: relative;z-index: 1;max-width: 1400px;margin: 0 auto;padding: var(--spacing-3xl) 2rem 0;display: grid;grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;gap: var(--spacing-md);align-items: start}.footer-section a{color: var(--text-muted-darker);text-decoration: none;font-size: 0.9rem;font-weight: 500;transition: all var(--transition-fast);position: relative;display: inline-block}.footer-section a::before{content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;background: linear-gradient(135deg, var(--primary-color), var(--gradient-primary));transition: width var(--transition-fast)}.footer-bottom{border-top: 1px solid rgb(255 255 255 / 10%);margin-top: var(--spacing-3xl);padding: var(--spacing-xl) 0 var(--spacing-2xl);text-align: center;color: var(--text-muted);font-size: 0.875rem;position: relative}.footer-bottom::before{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 200px;height: 1px;background: linear-gradient(90deg, transparent, rgb(255 255 255 / 20%), transparent)}.footer-bottom p{margin: 0;display: flex;align-items: center;justify-content: center;gap: var(--spacing-md);flex-wrap: wrap}.footer-bottom a{color: var(--gradient-primary);text-decoration: none;font-weight: 500;transition: color var(--transition-fast)}.footer-bottom a:hover{color: var(--bg-primary)}.footer-section a:hover{color: var(--bg-secondary-light);transform: none}.footer-section a:hover::before{width: 100%}.footer-section{margin-bottom: var(--spacing-3xl)}.footer-logo{display: flex;align-items: center;gap: 1rem;margin-bottom: var(--spacing-lg)}.footer-logo .logo-icon{font-size: 2.5rem;background: linear-gradient(135deg, var(--gradient-gold), var(--gradient-gold-light));background-clip: text;filter: drop-shadow(0 2px 8px rgb(255 215 0 / 30%))}.footer-logo .logo-text{font-size: 2rem;font-weight: 800;background: linear-gradient(135deg, var(--bg-primary), var(--border-color));background-clip: text;margin: 0}.footer-section p{color: var(--text-muted-light);font-size: 1.125rem;line-height: 1.6;margin-bottom: var(--spacing-xl);max-width: 400px}.footer-section h4{color: var(--bg-primary);font-size: 1.25rem;font-weight: 700;margin-bottom: var(--spacing-md);position: relative}.footer-section h4::after{content: '';position: absolute;bottom: -8px;left: 0;width: 40px;height: 3px;background: linear-gradient(135deg, var(--primary-color), var(--gradient-primary));border-radius: 2px}.footer-section ul{list-style: none;padding: 0;margin: 0}.footer-section li{margin-bottom: var(--spacing-sm)}.footer-section .social-links{display: flex;gap: 1rem;margin-top: var(--spacing-lg)}.footer-section .social-links a{display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;background: rgb(255 255 255 / 10%);border-radius: var(--radius-full);color: var(--text-muted);transition: all var(--transition-fast);border: 1px solid rgb(255 255 255 / 10%)}.footer-newsletter{background: linear-gradient(135deg, rgb(102 126 234 / 10%), rgb(240 147 251 / 10%));border-radius: var(--radius-xl);padding: var(--spacing-xl);margin-top: var(--spacing-xl);border: 1px solid rgb(102 126 234 / 20%);backdrop-filter: blur(10px);box-shadow: 0 8px 32px rgb(0 0 0 / 10%);grid-column: 1 / -1}.footer-newsletter h4{color: var(--bg-primary);margin-bottom: var(--spacing-md);font-size: 1.25rem}.footer-newsletter p:not(.form-message){color: var(--text-secondary);font-size: 0.875rem;margin-bottom: var(--spacing-lg)}.footer-newsletter .newsletter-form{max-width: none}.footer-newsletter .newsletter-row1{display: grid;grid-template-columns: auto 1fr;gap: var(--spacing-md);align-items: center;margin-bottom: var(--spacing-sm)}.footer-newsletter .newsletter-row1 h4{margin: 0}.footer-newsletter .newsletter-row2{display: grid;grid-template-columns: 1fr auto;gap: var(--spacing-md);align-items: center}.footer-newsletter .newsletter-note{color: var(--text-muted);font-size: 0.875rem;white-space: nowrap}.footer-newsletter .form-group{display: grid;grid-template-columns: 1fr auto;gap: var(--spacing-sm)}.footer-newsletter input{flex: 1;padding: 0.75rem 1rem;border: 1px solid rgb(255 255 255 / 20%);border-radius: var(--radius-md);background: rgb(255 255 255 / 8%);color: var(--color-white);font-size: 0.875rem;min-height: 44px;transition: all 0.3s ease}.footer-newsletter input::placeholder{color: var(--text-muted-darker)}.footer-newsletter input:focus{outline: none;border-color: var(--primary-color);background: rgb(255 255 255 / 12%);box-shadow: 0 0 0 3px rgb(0 102 204 / 20%)}.footer-newsletter input:invalid:not(:placeholder-shown){border-color: var(--error-color)}.footer-newsletter button{min-height: 44px;padding: 0.75rem 1.5rem;background: linear-gradient(135deg, var(--primary-color), var(--gradient-primary));color: var(--color-white);border: none;border-radius: var(--radius-md);font-weight: 600;cursor: pointer;transition: all 0.3s ease;white-space: nowrap}.footer-newsletter button:disabled{opacity: 0.6;cursor: not-allowed}.footer-newsletter button:hover:not(:disabled){transform: translateY(-2px);box-shadow: 0 12px 32px rgb(0 102 204 / 40%)}.footer-newsletter .form-helper{color: var(--text-muted-darker);font-size: 0.875rem;margin-bottom: var(--spacing-md)}.footer-newsletter .form-field{display: block;margin-bottom: var(--spacing-sm)}.footer-newsletter .form-actions{margin-bottom: var(--spacing-sm)}.footer-newsletter .reassurance{color: var(--text-muted-darker);font-size: 0.875rem;margin-bottom: var(--spacing-sm)}.footer-newsletter .newsletter-highlights{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: var(--spacing-sm);margin: var(--spacing-sm) 0 0;padding: 0;list-style: none;color: var(--text-muted-darker);font-size: 0.85rem}.footer-newsletter .newsletter-highlights li::before{content: '• ';color: var(--gradient-primary)}.footer-newsletter .consent{display: flex;align-items: flex-start;gap: 0.5rem;color: var(--text-muted-darker);font-size: 0.875rem;margin-top: var(--spacing-sm)}.footer-newsletter .consent a{color: var(--gradient-primary)}.footer-newsletter .hp-field{position: absolute;left: -10000px;top: auto;width: 1px;height: 1px;overflow: hidden}.footer-newsletter .form-message{margin-top: var(--spacing-md);font-size: 0.875rem;display: none;padding: 0.75rem;border-radius: var(--radius-md)}.footer-newsletter .form-message.show{display: block}.footer-newsletter .form-message.success{background: rgb(16 185 129 / 15%);color: var(--success-color-light);border: 1px solid rgb(16 185 129 / 30%)}.footer-newsletter .form-message.error{background: rgb(239 68 68 / 15%);color: var(--error-color-light);border: 1px solid rgb(239 68 68 / 30%)}.footer-section .social-links a:hover{background: linear-gradient(135deg, var(--primary-color), var(--gradient-primary));color: var(--color-white);transform: translateY(-3px);box-shadow: 0 8px 25px rgb(0 102 204 / 30%)}@media (width <= 1200px){.container{padding: 0 var(--spacing-lg)}}@media (width <= 1024px){.grid--cols-4{grid-template-columns: repeat(2, 1fr)}.container{padding: 0 var(--spacing-md)}}@media (width <= 768px){.grid--cols-2, .grid--cols-3, .grid--cols-4{grid-template-columns: 1fr}.container{padding: 0 var(--spacing-md)}.section{padding: var(--spacing-2xl) 0}.section--hero{padding: var(--spacing-2xl) 0 var(--spacing-xl) 0}.features{margin: var(--spacing-xl) 0}.footer__container{grid-template-columns: 1fr;text-align: center;gap: var(--spacing-lg)}.hero__actions{flex-direction: column;align-items: center}.hero__title{font-size: 2.5rem}.hero__subtitle{font-size: 1.125rem}.feature{padding: var(--spacing-md)}}@media (width <= 480px){.container{padding: 0 var(--spacing-sm)}.section{padding: var(--spacing-xl) 0}.section--hero{padding: var(--spacing-xl) 0 var(--spacing-lg) 0}.hero__title{font-size: 2rem}.hero__subtitle{font-size: 1rem}.feature{padding: var(--spacing-sm)}.footer{padding: var(--spacing-xl) 0 var(--spacing-lg) 0}.footer__container{gap: var(--spacing-md)}.footer__section h3{font-size: 1.125rem}}@media (width <= 1200px){.footer-content{padding: var(--spacing-2xl) 2rem 0}}@media (width <= 1024px){.footer-content{grid-template-columns: repeat(2, 1fr);gap: var(--spacing-2xl);padding: var(--spacing-2xl) 1.5rem 0}.footer-newsletter .form-group{grid-template-columns: 1fr}.footer-newsletter .newsletter-row1{grid-template-columns: 1fr}.footer-newsletter .newsletter-row2{grid-template-columns: 1fr;gap: var(--spacing-sm)}.footer-newsletter .newsletter-highlights{grid-template-columns: repeat(2, minmax(0, 1fr))}.footer-newsletter input, .footer-newsletter button{width: 100%}}@media (width <= 768px){.footer-content{grid-template-columns: 1fr;gap: var(--spacing-xl);padding: var(--spacing-xl) 1rem 0}.footer-logo{text-align: center}.footer-logo .logo-text{font-size: 1.75rem}.footer-section{text-align: center}.footer-section h4::after{display: none}.footer-section .social-links{justify-content: center}.footer-newsletter{margin-top: var(--spacing-lg)}.footer-newsletter .newsletter-row1, .footer-newsletter .newsletter-row2{grid-template-columns: 1fr}.footer-newsletter .newsletter-highlights{grid-template-columns: 1fr}.footer-bottom p{flex-direction: column;gap: var(--spacing-sm);text-align: center}}@media (width <= 480px){.footer-content{padding: var(--spacing-lg) 1rem 0}.footer-logo .logo-icon{font-size: 2rem}.footer-logo .logo-text{font-size: 1.5rem}.footer-section h4{font-size: 1.125rem}.footer-section ul{padding-left: 0}.footer-section li{margin-bottom: var(--spacing-sm)}.footer-section .social-links{gap: 0.75rem}.footer-section .social-links a{width: 40px;height: 40px}.footer-newsletter{padding: var(--spacing-lg)}.footer-newsletter h4{font-size: 1.125rem}.footer-newsletter p{font-size: 0.875rem}.footer-bottom{padding: var(--spacing-lg) 1rem var(--spacing-xl)}.footer-bottom p{font-size: 0.8rem}}#hero{position: relative;color: var(--color-white);padding: clamp(80px, 15vh, 120px) 0 clamp(40px, 10vh, 80px);overflow: hidden}#hero.hero{max-width: none;width: 100%;margin: 0;text-align: left}#hero::before{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 100vw;height: 100%;background: var(--hero-gradient);background-size: 400% 400%;animation: gradientShift 15s ease infinite;z-index: -1}@keyframes gradientShift{0%{background-position: 0% 50%}50%{background-position: 100% 50%}100%{background-position: 0% 50%}}@media (prefers-reduced-motion: reduce){#hero::before{animation: none !important}}#hero::after{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 100vw;height: 100%;background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3Ccircle cx='27' cy='7' r='1.5'/%3E%3Ccircle cx='47' cy='7' r='1'/%3E%3Ccircle cx='7' cy='27' r='1.5'/%3E%3Ccircle cx='27' cy='27' r='2'/%3E%3Ccircle cx='47' cy='27' r='1'/%3E%3Ccircle cx='7' cy='47' r='1'/%3E%3Ccircle cx='27' cy='47' r='1.5'/%3E%3Ccircle cx='47' cy='47' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat, radial-gradient(circle at 20% 80%, rgb(120 119 198 / 15%) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgb(255 119 198 / 15%) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgb(120 219 226 / 10%) 0%, transparent 50%);opacity: 0.8;z-index: 1;pointer-events: none}.hero-container{width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 clamp(1.5rem, 5vw, 3rem);display: grid;grid-template-columns: 1.1fr 0.9fr;gap: min(clamp(2rem, 8vw, 6rem), 48px);place-items: center center;position: relative;z-index: 2;min-height: 500px}.hero-content{width: 100%;max-width: 600px;animation: slideInLeft 1s ease-out;justify-self: start}@keyframes slideInLeft{0%{opacity: 0;transform: translateX(-50px)}100%{opacity: 1;transform: translateX(0)}}.hero-title{font-size: clamp(2.5rem, 4vw, 4.25rem);font-weight: 800;line-height: 1.05;margin-bottom: clamp(1rem, 3vw, 2rem);text-shadow: 0 2px 8px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);letter-spacing: -0.015em;text-wrap: balance}.btn-primary span{position: relative;z-index: 1}.btn-secondary span{position: relative;z-index: 1}.hero-title span:not(.highlight){display: block;font-size: clamp(1.5rem, 3vw, 2.5rem);font-weight: 600;margin-bottom: 0.5rem;opacity: 0.9}.highlight{background: linear-gradient(135deg, var(--gradient-gold), var(--gradient-gold-light), var(--gradient-gold));background-clip: text;background-size: 200% 200%;animation: goldShimmer 3s ease-in-out infinite;text-shadow: none}@keyframes goldShimmer{0%, 100%{background-position: 0% 50%}50%{background-position: 100% 50%}}.hero-subtitle{font-size: clamp(1rem, 2.5vw, 1.375rem);font-weight: 400;color: rgb(255 255 255 / 95%);margin-bottom: clamp(2rem, 5vw, 3rem);line-height: 1.7;text-shadow: 0 2px 6px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 30%);max-width: 600px}.hero-actions{display: flex;gap: clamp(1rem, 2vw, 1.5rem);margin-bottom: clamp(2rem, 5vw, 4rem);flex-wrap: wrap;animation: slideInUp 1s ease-out 0.3s both}@keyframes slideInUp{0%{opacity: 0;transform: translateY(30px)}100%{opacity: 1;transform: translateY(0)}}.btn-primary{background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);color: var(--primary-color);padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);border-radius: var(--radius-xl);font-weight: 600;font-size: clamp(0.875rem, 2vw, 1.125rem);border: none;cursor: pointer;transition: all var(--transition-normal);box-shadow: 0 8px 32px rgb(0 0 0 / 20%);position: relative;overflow: hidden}.btn-primary::before{content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgb(255 255 255 / 40%), transparent);transition: left 0.5s}.btn-primary:hover::before{left: 100%}.btn-primary:hover{background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);transform: translateY(-3px);box-shadow: 0 12px 40px rgb(0 0 0 / 30%)}.btn-secondary{background: rgb(255 255 255 / 15%);color: var(--color-white);padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);border-radius: var(--radius-xl);font-weight: 600;font-size: clamp(0.875rem, 2vw, 1.125rem);border: 2px solid rgb(255 255 255 / 30%);cursor: pointer;transition: all var(--transition-normal);backdrop-filter: blur(10px);position: relative;overflow: hidden}.btn-secondary::before{content: '';position: absolute;inset: 0;background: linear-gradient(135deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 5%));opacity: 0;transition: opacity var(--transition-normal)}.btn-secondary:hover::before{opacity: 1}.btn-secondary:hover{background: rgb(255 255 255 / 25%);border-color: rgb(255 255 255 / 50%);transform: translateY(-2px);box-shadow: 0 8px 32px rgb(0 0 0 / 20%)}.hero-visual{width: 100%;display: flex;justify-content: center;align-items: center;animation: slideInRight 1s ease-out 0.5s both;justify-self: end}@keyframes slideInRight{0%{opacity: 0;transform: translateX(50px)}100%{opacity: 1;transform: translateX(0)}}.code-preview{background: rgb(0 0 0 / 85%);border-radius: var(--radius-2xl);overflow: hidden;box-shadow: 0 25px 50px rgb(0 0 0 / 40%), 0 0 0 1px rgb(255 255 255 / 10%);backdrop-filter: blur(20px);border: 1px solid rgb(255 255 255 / 10%);max-width: min(clamp(300px, 40vw, 450px), 400px);width: 100%;position: relative;transform: perspective(1000px) rotateY(-5deg);transition: transform var(--transition-normal);will-change: transform;animation-delay: 0.6s}@media (width <= 768px){.code-preview{transform: none;max-width: 100%;perspective: none}}.code-preview:hover{transform: perspective(1000px) rotateY(0deg)}@media (width <= 768px){.code-preview:hover{transform: none}}.code-preview::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg, transparent, rgb(255 255 255 / 30%), transparent)}.code-preview__header{display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 1.25rem 1.5rem;background: linear-gradient(135deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 4%));border-bottom: 1px solid rgb(255 255 255 / 10%);backdrop-filter: blur(10px)}.code-preview__dots{display: flex;gap: 0.75rem}.code-preview__dot{width: 14px;height: 14px;border-radius: 50%;transition: all var(--transition-fast);cursor: pointer}.code-preview__dot:hover{transform: scale(1.2)}.code-preview__dot--red{background: linear-gradient(135deg, var(--gradient-red), var(--gradient-red-dark));box-shadow: 0 2px 8px rgb(238 90 82 / 40%)}.code-preview__dot--yellow{background: linear-gradient(135deg, var(--gradient-yellow), var(--gradient-yellow-dark));box-shadow: 0 2px 8px rgb(255 177 66 / 40%)}.code-preview__dot--green{background: linear-gradient(135deg, var(--gradient-green), var(--gradient-green-dark));box-shadow: 0 2px 8px rgb(78 205 196 / 40%)}.code-preview__title{color: rgb(255 255 255 / 90%);font-size: 0.875rem;font-weight: 600;font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;letter-spacing: 0.025em}.code-preview__content{padding: 2rem 1.5rem;font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;font-size: clamp(0.7rem, 2vw, 0.875rem);line-height: 1.6;margin: 0;background: linear-gradient(135deg, rgb(0 0 0 / 90%), rgb(0 0 0 / 95%));position: relative;overflow: auto;-webkit-overflow-scrolling: touch}.code-preview__content::before{content: '';position: absolute;inset: 0;background: linear-gradient(135deg, rgb(255 255 255 / 2%), transparent);pointer-events: none}.code-preview__comment{color: var(--text-comment);font-style: italic}.code-preview__command{color: var(--text-command);font-weight: 600}.code-preview__output{color: var(--text-output);font-weight: 500}#key-benefits{padding: 60px 0;background: var(--bg-primary);border-bottom: 1px solid var(--border-color)}.benefits-grid{display: grid;grid-template-columns: 2fr 1fr 1fr;gap: 2rem;width: 100%}.benefit-item{display: flex;align-items: center;gap: 1rem;padding: 1.5rem;background: linear-gradient(135deg, var(--bg-primary), rgb(102 126 234 / 2%));border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);border: 1px solid var(--border-color);transition: all 0.3s ease}.benefit-item:hover{transform: translateY(-4px);box-shadow: 0 12px 24px rgb(0 0 0 / 10%);border-color: var(--primary-color)}.benefit-item--primary{padding: 2rem;background: linear-gradient(135deg, rgb(102 126 234 / 8%), rgb(240 147 251 / 8%));box-shadow: 0 8px 20px rgb(102 126 234 / 15%);border-color: var(--primary-color)}.benefit-item--primary:hover{scale: 1.05;box-shadow: 0 16px 32px rgb(102 126 234 / 20%)}@media (width >= 768px){.benefit-item--primary{grid-column: auto}}.benefit-icon{width: 56px;height: 56px;min-width: 56px;color: var(--color-white);flex-shrink: 0;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, var(--primary-color), var(--gradient-secondary));border-radius: var(--radius-lg);padding: 0.5rem}.benefit-item--primary .benefit-icon{width: 64px;height: 64px;min-width: 64px;font-size: 1.5rem}.benefit-item span:last-child{font-weight: 600;color: var(--text-primary);font-size: 1rem;flex: 1;min-width: 0;white-space: normal;overflow-wrap: anywhere}.benefit-item--primary span:last-child{font-size: 1.125rem;font-weight: 700;flex: 1;min-width: 0;white-space: normal;overflow-wrap: anywhere}#cloudflare-edge{padding: 80px 0;background: var(--bg-secondary)}.section-header{text-align: center;margin-bottom: 4rem}.section-header h2{font-size: 2.5rem;font-weight: 700;color: var(--text-primary);margin-bottom: 1rem}.section-header p{font-size: 1.25rem;color: var(--text-secondary);max-width: 600px;margin: 0 auto;line-height: 1.6}.edge-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem}.edge-card{background: var(--bg-primary);padding: 2rem;border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);border: 1px solid var(--border-color);text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease}.edge-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-md)}.edge-icon{margin-bottom: 1.5rem;color: var(--primary-color)}.edge-card h3{font-size: 1.25rem;font-weight: 600;color: var(--text-primary);margin-bottom: 1rem}.edge-card p{color: var(--text-secondary);line-height: 1.6}#features{padding: 80px 0;background: var(--bg-secondary)}.features-container{max-width: 1200px;margin: 0 auto;padding: 0 2rem}.features-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem}.feature-card{background: var(--bg-primary);padding: 2rem;border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);border: 1px solid var(--border-color);text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease}.feature-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-md)}.feature-card:nth-child(1), .feature-card:nth-child(2), .feature-card:nth-child(3){border: 2px solid var(--primary-color);background: linear-gradient(135deg, rgb(0 102 204 / 5%), rgb(0 102 204 / 2%))}.feature-card:nth-child(1)::before, .feature-card:nth-child(2)::before, .feature-card:nth-child(3)::before{content: '⭐ Featured';display: inline-block;background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));color: var(--color-white);padding: 0.25rem 0.75rem;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 600;margin-bottom: 1rem}.feature-icon{font-size: 2.5rem;color: var(--primary-color);margin-bottom: 1rem}.feature-title{font-size: 1.25rem;font-weight: 600;color: var(--text-primary);margin-bottom: 1rem}.feature-description{color: var(--text-secondary);line-height: 1.6}#comparison{padding: 80px 0;background: var(--bg-primary)}.comparison-section h2{text-align: center;font-size: 2.5rem;font-weight: 700;color: var(--text-primary);margin-bottom: 3rem}.comparison-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;max-width: 1000px;margin: 0 auto}.comparison-item{text-align: center;padding: 2rem;background: var(--bg-secondary);border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);border: 1px solid var(--border-color)}.comparison-item h3{font-size: 1.25rem;font-weight: 600;color: var(--text-primary);margin-bottom: 1rem}.comparison-item .traditional{color: var(--text-secondary);margin-bottom: 0.5rem;text-decoration: line-through}.comparison-item .clodo{color: var(--primary-color);font-weight: 600}#testimonials{padding: 80px 0;background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%)}.testimonials-container{max-width: 1200px;margin: 0 auto;padding: 0 2rem}.testimonials-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));gap: 2rem}.testimonial-card{background: var(--bg-primary);padding: 2rem;border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);border: 1px solid var(--border-color)}.testimonial-quote{font-size: 1.125rem;line-height: 1.6;color: var(--text-primary);margin-bottom: 1.5rem;font-style: italic}.testimonial-author{display: flex;align-items: center;gap: 1rem}.testimonial-avatar{width: 48px;height: 48px;border-radius: 50%;object-fit: cover}.testimonial-info h4{margin: 0;font-size: 1rem;font-weight: 600;color: var(--text-primary)}.testimonial-info p{margin: 0;font-size: 0.875rem;color: var(--text-secondary)}#social-proof{padding: 80px 0;background: var(--bg-secondary)}.social-proof{padding: 80px 0;background: var(--bg-secondary)}.social-proof__container{max-width: 1200px;margin: 0 auto;padding: 0 2rem}.social-proof__header{text-align: center;margin-bottom: 4rem}.social-proof__title{font-size: 2.5rem;font-weight: 700;color: var(--text-primary);margin-bottom: 1rem}.social-proof__grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));gap: 2rem}.testimonial{background: linear-gradient(135deg, rgb(102 126 234 / 5%) 0%, rgb(240 147 251 / 5%) 100%);padding: 2rem;border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);border: 1px solid var(--border-color);display: flex;flex-direction: column;transition: all 0.3s ease}.testimonial:hover{transform: translateY(-4px);box-shadow: 0 12px 24px rgb(0 0 0 / 10%);border-color: var(--primary-color)}.testimonial__rating{display: flex;gap: 0.25rem;margin-bottom: 1rem;align-items: center}.testimonial__rating .star{color: var(--gradient-warning);font-size: 1.25rem;line-height: 1}.testimonial__content{font-size: 1.125rem;line-height: 1.6;color: var(--text-primary);margin-bottom: 1.5rem;font-style: italic;flex-grow: 1}.testimonial__content p{margin: 0}.testimonial__author{display: flex;align-items: center;gap: 1rem;margin-top: 1.5rem;padding-top: 1.5rem;border-top: 1px solid var(--border-color)}.testimonial__avatar{flex-shrink: 0;width: 56px;height: 56px;border-radius: 50%;overflow: hidden;background: linear-gradient(135deg, var(--primary-color), var(--gradient-secondary))}.testimonial__avatar img{width: 100%;height: 100%;object-fit: cover}.testimonial__info{flex: 1;min-width: 0}.testimonial__name{display: block;font-weight: 600;color: var(--text-primary);font-style: normal;margin-bottom: 0.25rem}.testimonial__title{display: block;font-size: 0.875rem;color: var(--text-secondary);margin: 0;font-style: normal}.stats{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 2rem;margin-top: 4rem;padding: 3rem 2rem;background: linear-gradient(135deg, rgb(102 126 234 / 8%) 0%, rgb(240 147 251 / 8%) 100%);border-radius: var(--radius-lg);box-shadow: 0 8px 16px rgb(0 0 0 / 6%);animation-delay: 0.5s}.stat-item{text-align: center;padding: 1rem;transition: all 0.3s ease;position: relative}.stat-item::before{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 60px;height: 4px;background: linear-gradient(90deg, var(--primary-color), var(--gradient-secondary));border-radius: 2px;opacity: 0;transition: opacity 0.3s ease}.stat-item:hover::before{opacity: 1}.stat-number{display: block;font-size: clamp(2.5rem, 5vw, 3.5rem);font-weight: 800;background: linear-gradient(135deg, var(--primary-color), var(--gradient-secondary));background-clip: text;margin-bottom: 0.5rem;margin-top: 0.5rem}.stat-label{color: var(--text-primary);font-weight: 600;font-size: 1rem}#cta{padding: 80px 0;background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);color: var(--color-white)}.cta-section{padding: 80px 0;background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);color: var(--color-white)}.cta-content{max-width: 800px;margin: 0 auto;text-align: center;padding: 0 2rem}.cta-content h2{font-size: 2.5rem;font-weight: 700;margin-bottom: 1rem;color: var(--color-white)}.cta-content p{font-size: 1.25rem;margin-bottom: 2rem;color: rgb(255 255 255 / 90%);line-height: 1.6}.cta-actions{display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap}@media (width <= 1200px){.hero-container{gap: 3rem}.hero-title{font-size: 3rem}.edge-grid, .features-grid{grid-template-columns: repeat(2, 1fr)}}@media (width <= 1024px){.hero-container{grid-template-columns: 1fr;gap: 3rem;text-align: center;max-width: 800px;margin: 0 auto;min-height: auto}.hero-content{max-width: 100%;justify-self: center}.hero-visual{justify-self: center}.hero-title{font-size: clamp(2.25rem, 6vw, 3.25rem)}.hero-title span:not(.highlight){font-size: clamp(1.25rem, 4vw, 2rem)}.hero-subtitle{font-size: clamp(0.95rem, 2.5vw, 1.25rem)}.hero-actions{justify-content: center;gap: 1rem}.code-preview{max-width: 500px;margin: 0 auto}.edge-grid, .features-grid{grid-template-columns: repeat(2, 1fr);gap: 1.5rem}.social-proof__grid{grid-template-columns: 1fr}.section-header h2{font-size: 2.25rem}.cta-content h2{font-size: 2.25rem}}@media (width <= 768px){#hero{padding: clamp(60px, 12vh, 100px) 0 clamp(30px, 8vh, 60px)}.hero-container{gap: 2.5rem;padding: 0 clamp(1rem, 3vw, 1.5rem);min-height: auto}.hero-content{justify-self: center}.hero-visual{justify-self: center}.hero-title{font-size: clamp(2rem, 7vw, 2.75rem);line-height: 1.1}.hero-title span:not(.highlight){font-size: clamp(1.125rem, 4vw, 1.5rem)}.hero-subtitle{font-size: clamp(0.9rem, 2.5vw, 1.125rem);margin-bottom: 2.5rem}.hero-actions{flex-direction: column;align-items: center;gap: 1rem}.btn{width: 100%;max-width: 320px}.code-preview{max-width: 100%;transform: none}.edge-grid, .features-grid{grid-template-columns: 1fr;gap: 1.5rem}.edge-card, .feature-card{padding: 1.5rem}.section-header{margin-bottom: 3rem}.section-header h2{font-size: 2rem}.section-header p{font-size: 1.125rem}.social-proof__title{font-size: 2rem}.testimonial{padding: 1.5rem}.stats{grid-template-columns: 1fr;margin-top: 3rem;padding: 1.5rem}.stat-number{font-size: 2.5rem}.cta-content h2{font-size: 2rem}.cta-content p{font-size: 1.125rem}.cta-actions{flex-direction: column;align-items: center}}@media (width <= 480px){#hero{padding: clamp(40px, 8vh, 80px) 0 clamp(20px, 5vh, 40px)}.hero-container{padding: 0 clamp(0.75rem, 4vw, 1rem);gap: 2rem;min-height: auto}.hero-content{justify-self: center}.hero-visual{justify-self: center}.hero-title{font-size: clamp(1.75rem, 8vw, 2.25rem);line-height: 1.1}.hero-title span:not(.highlight){font-size: clamp(1rem, 5vw, 1.25rem)}.hero-subtitle{font-size: clamp(0.85rem, 4vw, 1rem);margin-bottom: 2rem;line-height: 1.6}.hero-actions{gap: 0.75rem}.btn{padding: 1rem 1.5rem;font-size: 1rem}.code-preview{max-width: 100%;margin: 0 auto;transform: none !important;perspective: none;max-height: 60vh}.code-preview:hover{transform: none !important}.code-preview__header{padding: 0.75rem 1rem}.code-preview__content{padding: 1rem;font-size: 0.75rem;max-height: 50vh;overflow-y: auto;-webkit-overflow-scrolling: touch}.code-preview__title{font-size: 0.75rem}.code-preview__dot{width: 12px;height: 12px}.benefits-grid{grid-template-columns: 1fr}.benefit-item{padding: 1rem;gap: 0.75rem}.benefit-icon{font-size: 1.5rem}.edge-grid, .features-grid{padding: 0 1rem;gap: 1rem}.edge-card, .feature-card{padding: 1.25rem}.section-header{margin-bottom: 2rem}.section-header h2{font-size: 1.75rem}.section-header p{font-size: 1rem}.social-proof__container{padding: 0 1rem}.social-proof__title{font-size: 1.75rem}.social-proof__grid{gap: 1rem}.testimonial{padding: 1.25rem}.testimonial__content{font-size: 1rem}.stats{margin-top: 2rem;padding: 1rem;gap: 1rem}.stat-number{font-size: 2rem}.stat-label{font-size: 0.875rem}.cta-section{padding: 60px 0}.cta-content{padding: 0 1rem}.cta-content h2{font-size: 1.75rem}.cta-content p{font-size: 1rem}}pre{background: var(--bg-secondary);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 1rem;overflow-x: auto;font-size: 0.875rem;line-height: 1.5;margin: 1rem 0}code{font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;background: var(--bg-secondary);color: var(--text-primary);padding: 0.125rem 0.25rem;border-radius: 0.25rem;font-size: 0.875em}pre code{background: none;padding: 0;border-radius: 0;color: inherit}.language-javascript .token.keyword{color: rgb(86 156 214)}.language-javascript .token.string{color: rgb(206 145 120)}.language-javascript .token.comment{color: rgb(106 153 85)}.language-javascript .token.function{color: rgb(220 220 170)}.language-javascript .token.punctuation{color: rgb(212 212 212)}.architecture-section{padding: 4rem 0;background: var(--color-bg-primary)}.architecture-diagram{display: flex;flex-direction: column;gap: 3rem;align-items: center}.diagram-container{width: 100%;max-width: 800px;padding: 2rem;background: var(--color-bg-secondary);border-radius: 12px;box-shadow: 0 4px 6px rgb(0 0 0 / 10%)}.architecture-svg{width: 100%;height: auto;max-height: 400px}.diagram-label{font-size: 1.1rem;font-weight: 600;fill: var(--color-text-primary)}.diagram-subtext{font-size: 0.9rem;fill: var(--color-text-secondary);font-weight: 400}.diagram-features{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;width: 100%;max-width: 800px}.feature-highlight{text-align: center;padding: 1.5rem;background: var(--color-bg-secondary);border-radius: 8px;border: 1px solid var(--color-border)}.highlight-icon{font-size: 2rem;margin-bottom: 1rem}.feature-highlight h4{font-size: 1.1rem;margin-bottom: 0.5rem;color: var(--color-text-primary)}.feature-highlight p{color: var(--color-text-secondary);font-size: 0.9rem;line-height: 1.5}