*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;color:#1a202c;background-color:#fff}:root{--primary-50: #eff6ff;--primary-100: #dbeafe;--primary-200: #bfdbfe;--primary-300: #93c5fd;--primary-400: #60a5fa;--primary-500: #3b82f6;--primary-600: #2563eb;--primary-700: #1d4ed8;--primary-800: #1e40af;--primary-900: #1e3a8a;--secondary-50: #f0fdfa;--secondary-100: #ccfbf1;--secondary-200: #99f6e4;--secondary-300: #5eead4;--secondary-400: #2dd4bf;--secondary-500: #14b8a6;--secondary-600: #0891b2;--secondary-700: #0e7490;--secondary-800: #155e75;--secondary-900: #164e63;--accent-500: #f97316;--success-500: #10b981;--warning-500: #f59e0b;--warning-50: #fffbeb;--error-500: #ef4444;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--leading-tight: 1.2;--leading-normal: 1.5;--leading-relaxed: 1.6;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}.role-badge{display:inline-flex;align-items:center;padding:var(--space-2) var(--space-4);border-radius:var(--radius-xl);font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:.05em}.hr-badge{background:linear-gradient(135deg,var(--primary-100),var(--primary-200));color:var(--primary-700);border:1px solid var(--primary-300)}.employee-badge{background:linear-gradient(135deg,var(--secondary-100),var(--secondary-200));color:var(--secondary-700);border:1px solid var(--secondary-300)}.nav-container{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-200);z-index:1000;transition:all .3s ease}.nav-content{max-width:1200px;margin:0 auto;padding:var(--space-4) var(--space-6);display:flex;justify-content:space-between;align-items:center}.nav-brand .brand-link{text-decoration:none}.nav-brand .brand-text{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-600);text-decoration:none}.nav-links{display:flex;align-items:center;gap:var(--space-8)}.nav-link{text-decoration:none;color:var(--gray-600);font-weight:500;transition:color .2s ease;position:relative}.nav-link:hover,.nav-link.active{color:var(--primary-600)}.nav-link:hover:after,.nav-link.active:after{width:100%}.nav-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary-600);transition:width .2s ease}.mobile-menu-toggle{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:var(--space-2)}.hamburger-line{width:24px;height:2px;background:var(--gray-600);margin:2px 0;transition:all .3s ease}.hamburger-line.active:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger-line.active:nth-child(2){opacity:0}.hamburger-line.active:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--gray-200);padding:var(--space-6);flex-direction:column;gap:var(--space-4)}.mobile-menu.open{display:flex}.mobile-nav-link{text-decoration:none;color:var(--gray-600);font-weight:500;padding:var(--space-3) 0;border-bottom:1px solid var(--gray-100)}.mobile-nav-link.active{color:var(--primary-600)}.cta-button,.primary-button,.secondary-button{padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease;cursor:pointer;border:none;font-size:var(--font-size-base)}.cta-button,.primary-button{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));color:#fff;box-shadow:var(--shadow-sm)}.cta-button:hover,.primary-button:hover{background:linear-gradient(135deg,var(--primary-700),var(--primary-800));box-shadow:var(--shadow-md);transform:translateY(-1px)}.secondary-button{background:#fff;color:var(--primary-600);border:2px solid var(--primary-600)}.secondary-button:hover{background:var(--primary-50);transform:translateY(-1px)}.primary-button.large,.secondary-button.large{padding:var(--space-4) var(--space-8);font-size:var(--font-size-lg)}.cta-button.mobile{width:100%;margin-top:var(--space-4)}.page-hero{padding:var(--space-24) var(--space-6) var(--space-12);background:linear-gradient(135deg,var(--primary-50),var(--secondary-50));margin-top:80px;text-align:center}.page-title{font-size:var(--font-size-4xl);font-weight:800;line-height:var(--leading-tight);color:var(--gray-900);margin-bottom:var(--space-4)}.page-subtitle{font-size:var(--font-size-lg);color:var(--gray-600);line-height:var(--leading-relaxed);max-width:600px;margin:0 auto}.hero-section{padding:var(--space-24) var(--space-6) var(--space-20);background:linear-gradient(135deg,var(--primary-50),var(--secondary-50));margin-top:80px}.hero-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}.hero-title{font-size:var(--font-size-5xl);font-weight:800;line-height:var(--leading-tight);color:var(--gray-900);margin-bottom:var(--space-4)}.hero-subtitle{font-size:var(--font-size-xl);color:var(--primary-600);font-weight:600;margin-bottom:var(--space-6)}.hero-description{font-size:var(--font-size-lg);color:var(--gray-600);line-height:var(--leading-relaxed);margin-bottom:var(--space-8)}.hero-buttons{display:flex;gap:var(--space-4);margin-bottom:var(--space-12)}.hero-stats{display:flex;gap:var(--space-8)}.stat-item{text-align:center}.stat-number{font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-600)}.stat-label{font-size:var(--font-size-sm);color:var(--gray-500)}.hero-visual{display:flex;justify-content:center}.dashboard-preview{background:#fff;border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);overflow:hidden;width:100%;max-width:500px}.dashboard-header{background:var(--gray-50);padding:var(--space-4);border-bottom:1px solid var(--gray-200)}.dashboard-tabs{display:flex;gap:var(--space-2);overflow-x:auto}.tab{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.tab.active{background:var(--primary-600);color:#fff}.dashboard-content{padding:var(--space-6);display:grid;gap:var(--space-4)}.dashboard-card{background:var(--gray-50);padding:var(--space-4);border-radius:var(--radius-lg);display:flex;align-items:center;gap:var(--space-3)}.card-icon{font-size:var(--font-size-xl)}.card-title{font-size:var(--font-size-sm);color:var(--gray-600);flex:1}.card-value{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-900)}.section-container{max-width:1200px;margin:0 auto;padding:var(--space-20) var(--space-6)}.section-header{text-align:center;margin-bottom:var(--space-16)}.section-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--gray-900);margin-bottom:var(--space-4)}.section-subtitle{font-size:var(--font-size-lg);color:var(--gray-600);line-height:var(--leading-relaxed);max-width:600px;margin:0 auto}.section-description{font-size:var(--font-size-lg);color:var(--gray-600);line-height:var(--leading-relaxed);margin-bottom:var(--space-8)}.features-section{background:var(--gray-50)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-8)}.feature-card{background:#fff;padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);text-align:center;transition:all .3s ease}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.feature-icon{font-size:var(--font-size-4xl);margin-bottom:var(--space-4)}.feature-title{font-size:var(--font-size-xl);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-3)}.feature-description{color:var(--gray-600);line-height:var(--leading-relaxed)}.features-page{margin-top:80px}.detailed-features{background:var(--gray-50)}.features-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--space-8)}.feature-category{background:#fff;padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.category-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}.category-icon{font-size:var(--font-size-3xl)}.category-title{font-size:var(--font-size-xl);font-weight:600;color:var(--gray-900)}.category-features{list-style:none}.category-feature{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-3);color:var(--gray-600);line-height:var(--leading-relaxed)}.feature-check{color:var(--success-500);font-weight:600;flex-shrink:0;margin-top:2px}.feature-comparison{background:#fff}.comparison-table{background:#fff;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm)}.comparison-header{display:grid;grid-template-columns:2fr 1fr 1fr;background:var(--gray-100);font-weight:600;color:var(--gray-900)}.comparison-header>div{padding:var(--space-4);text-align:center}.comparison-row{display:grid;grid-template-columns:2fr 1fr 1fr;border-bottom:1px solid var(--gray-200)}.comparison-row:last-child{border-bottom:none}.comparison-row>div{padding:var(--space-4);text-align:center;display:flex;align-items:center;justify-content:center}.comparison-feature{text-align:left!important;justify-content:flex-start!important;font-weight:500;color:var(--gray-900)}.comparison-traditional{color:var(--gray-600)}.comparison-indyz{color:var(--primary-600);font-weight:500}.dashboard-hero{padding:var(--space-20) var(--space-6) var(--space-12);background:linear-gradient(135deg,var(--primary-50),var(--secondary-50));margin-top:80px}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-8)}.dashboard-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--gray-900);margin-bottom:var(--space-2)}.dashboard-subtitle{font-size:var(--font-size-lg);color:var(--gray-600);line-height:var(--leading-relaxed)}.employee-details{font-size:var(--font-size-base);color:var(--gray-500)}.dashboard-actions{display:flex;gap:var(--space-4);flex-shrink:0}.dashboard-stats{background:#fff;padding:var(--space-12) 0}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6)}.stat-card{background:#fff;padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);text-align:center;border:1px solid var(--gray-200)}.stat-value{font-size:var(--font-size-3xl);font-weight:700;color:var(--primary-600);margin-bottom:var(--space-2)}.stat-label{font-size:var(--font-size-base);color:var(--gray-600);margin-bottom:var(--space-2)}.stat-change{font-size:var(--font-size-sm);font-weight:500}.stat-change.up{color:var(--success-500)}.stat-change.neutral{color:var(--warning-500)}.dashboard-content{background:var(--gray-50)}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}.dashboard-section{background:#fff;padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.dashboard-section.full-width{grid-column:1 / -1}.section-heading{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-4)}.activity-list,.task-list{display:flex;flex-direction:column;gap:var(--space-4)}.activity-item,.task-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-lg);background:var(--gray-50)}.activity-icon,.task-priority{flex-shrink:0}.status-dot{width:8px;height:8px;border-radius:50%;margin-top:6px}.status-dot.completed{background:var(--success-500)}.task-priority{width:4px;height:100%;border-radius:var(--radius-sm);margin-top:2px}.task-priority.high{background:var(--error-500)}.task-priority.medium{background:var(--warning-500)}.activity-action,.task-name{font-weight:500;color:var(--gray-900);margin-bottom:var(--space-1)}.activity-time,.task-due{font-size:var(--font-size-sm);color:var(--gray-500)}.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}.action-card{background:var(--gray-50);padding:var(--space-6);border-radius:var(--radius-lg);border:none;cursor:pointer;text-align:center;transition:all .2s ease}.action-card:hover{background:var(--primary-50);transform:translateY(-2px)}.action-icon{font-size:var(--font-size-2xl);margin-bottom:var(--space-3)}.action-title{font-size:var(--font-size-base);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2)}.action-desc{font-size:var(--font-size-sm);color:var(--gray-600);line-height:var(--leading-relaxed)}.dashboard-overview{background:#fff;padding:var(--space-12) 0}.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-8)}.overview-card{background:#fff;padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.card-title{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-900)}.card-badge{background:var(--primary-100);color:var(--primary-700);padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500}.payslip-summary{margin-bottom:var(--space-4)}.salary-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--gray-100)}.salary-item:last-child{border-bottom:none}.salary-item.net-salary{border-top:2px solid var(--primary-600);margin-top:var(--space-2);padding-top:var(--space-4)}.salary-label{color:var(--gray-600)}.salary-value{font-weight:600;color:var(--gray-900)}.salary-value.deduction{color:var(--error-500)}.salary-item.net-salary .salary-value{color:var(--primary-600);font-size:var(--font-size-lg)}.leave-summary{display:flex;flex-direction:column;gap:var(--space-4)}.leave-type{display:flex;flex-direction:column;gap:var(--space-2)}.leave-info{display:flex;justify-content:space-between;align-items:center}.leave-label{color:var(--gray-600);font-size:var(--font-size-sm)}.leave-balance{font-weight:600;color:var(--gray-900)}.leave-bar{height:6px;background:var(--gray-200);border-radius:var(--radius-sm);overflow:hidden}.leave-used{height:100%;background:linear-gradient(90deg,var(--primary-500),var(--secondary-500));transition:width .3s ease}.tax-summary{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.tax-item{display:flex;justify-content:space-between;align-items:center}.tax-item.pending{color:var(--warning-500)}.tax-label{color:var(--gray-600);font-size:var(--font-size-sm)}.tax-value{font-weight:500;color:var(--gray-900)}.tax-savings{background:var(--success-50);padding:var(--space-3);border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-3)}.savings-label{color:var(--success-700);font-size:var(--font-size-sm);font-weight:500}.savings-value{color:var(--success-700);font-weight:600}.card-action{background:var(--primary-600);color:#fff;border:none;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-weight:500;cursor:pointer;transition:all .2s ease;width:100%}.card-action:hover{background:var(--primary-700)}.dashboard-details{background:var(--gray-50)}.details-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-8)}.details-section{background:#fff;padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.transaction-list{display:flex;flex-direction:column;gap:var(--space-4)}.transaction-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--gray-50);border-radius:var(--radius-lg)}.transaction-icon{flex-shrink:0}.transaction-content{flex:1}.transaction-type{font-weight:500;color:var(--gray-900);margin-bottom:var(--space-1)}.transaction-date{font-size:var(--font-size-sm);color:var(--gray-500)}.transaction-amount{font-weight:600;color:var(--success-500)}.employee-actions{display:flex;flex-direction:column;gap:var(--space-3)}.action-button{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--gray-50);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease;text-align:left}.action-button:hover{background:var(--primary-50)}.action-icon{font-size:var(--font-size-lg)}.action-text{font-weight:500;color:var(--gray-900)}.pricing-page{margin-top:80px}.pricing-hero{background:linear-gradient(135deg,var(--primary-50),var(--secondary-50));padding:var(--space-20) var(--space-6) var(--space-12)}.pricing-header{text-align:center}.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-8)}.toggle-label{font-weight:500;color:var(--gray-600)}.toggle-switch{position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch label{display:block;width:50px;height:24px;background:var(--gray-300);border-radius:12px;cursor:pointer;transition:all .3s ease;position:relative}.toggle-switch label:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:all .3s ease}.toggle-switch input:checked+label{background:var(--primary-600)}.toggle-switch input:checked+label:after{transform:translate(26px)}.discount-badge{background:var(--success-500);color:#fff;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;margin-left:var(--space-2)}.pricing-plans{background:#fff}.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-8)}.pricing-card{background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-2xl);padding:var(--space-8);position:relative;transition:all .3s ease}.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.pricing-card.popular{border-color:var(--primary-600);transform:scale(1.05)}.popular-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:var(--primary-600);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:600}.plan-header{text-align:center;margin-bottom:var(--space-8)}.plan-name{font-size:var(--font-size-xl);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-4)}.plan-price{margin-bottom:var(--space-4)}.price{font-size:var(--font-size-4xl);font-weight:700;color:var(--primary-600)}.period{font-size:var(--font-size-base);color:var(--gray-500);margin-left:var(--space-2)}.plan-description{color:var(--gray-600);line-height:var(--leading-relaxed)}.plan-features{margin-bottom:var(--space-8)}.features-list{list-style:none}.feature-item{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-3);color:var(--gray-600);line-height:var(--leading-relaxed)}.plan-button{width:100%;padding:var(--space-4);border-radius:var(--radius-lg);font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.plan-button.primary{background:var(--primary-600);color:#fff}.plan-button.primary:hover{background:var(--primary-700)}.plan-button.secondary{background:#fff;color:var(--primary-600);border:2px solid var(--primary-600)}.plan-button.secondary:hover{background:var(--primary-50)}.pricing-features{background:var(--gray-50)}.included-features{margin-top:var(--space-8)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-8)}.included-feature{text-align:center}.pricing-faq{background:#fff}.faq-list{max-width:800px;margin:0 auto}.faq-item{border-bottom:1px solid var(--gray-200);padding:var(--space-6) 0}.faq-item:last-child{border-bottom:none}.faq-question{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-3)}.faq-answer{color:var(--gray-600);line-height:var(--leading-relaxed)}.pricing-cta{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));color:#fff}.contact-page{margin-top:80px}.contact-hero{background:linear-gradient(135deg,var(--primary-50),var(--secondary-50));padding:var(--space-20) var(--space-6) var(--space-12)}.contact-content{background:#fff}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:flex-start}.contact-info{padding-right:var(--space-8)}.info-title{font-size:var(--font-size-2xl);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-4)}.info-description{color:var(--gray-600);line-height:var(--leading-relaxed);margin-bottom:var(--space-8)}.contact-methods{margin-bottom:var(--space-8)}.contact-method{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6);padding:var(--space-4);background:var(--gray-50);border-radius:var(--radius-lg)}.method-icon{font-size:var(--font-size-xl);flex-shrink:0}.method-title{font-weight:600;color:var(--gray-900);margin-bottom:var(--space-1)}.method-details{color:var(--primary-600);font-weight:500;margin-bottom:var(--space-1)}.method-description{font-size:var(--font-size-sm);color:var(--gray-500)}.contact-features{background:var(--primary-50);padding:var(--space-6);border-radius:var(--radius-lg)}.features-title{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-4)}.contact-form-section{background:var(--gray-50);padding:var(--space-8);border-radius:var(--radius-xl)}.contact-form{max-width:100%}.form-title{font-size:var(--font-size-xl);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-6)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}.form-group{margin-bottom:var(--space-4)}.form-label{display:block;font-weight:500;color:var(--gray-700);margin-bottom:var(--space-2)}.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-3);border:1px solid var(--gray-300);border-radius:var(--radius-lg);font-size:var(--font-size-base);transition:all .2s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-100)}.form-textarea{resize:vertical;min-height:120px}.form-submit{width:100%;background:var(--primary-600);color:#fff;border:none;padding:var(--space-4);border-radius:var(--radius-lg);font-weight:600;cursor:pointer;transition:all .2s ease;margin-bottom:var(--space-4)}.form-submit:hover{background:var(--primary-700)}.form-note{font-size:var(--font-size-sm);color:var(--gray-500);text-align:center;line-height:var(--leading-relaxed)}.contact-cta{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));color:#fff}.hr-section{background:#fff}.section-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}.section-content.reverse{grid-template-columns:1fr 1fr}.section-content.reverse .content-visual{order:-1}.feature-list{margin-bottom:var(--space-8)}.feature-item{display:flex;gap:var(--space-4);margin-bottom:var(--space-6);align-items:flex-start}.feature-bullet{font-size:var(--font-size-xl);flex-shrink:0}.feature-name{font-size:var(--font-size-lg);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-2)}.feature-desc{color:var(--gray-600);line-height:var(--leading-relaxed)}.hr-dashboard-mockup,.employee-dashboard-mockup{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;max-width:500px;width:100%}.mockup-header{background:var(--primary-600);color:#fff;padding:var(--space-4);display:flex;justify-content:space-between;align-items:center}.mockup-title{font-weight:600}.mockup-user{font-size:var(--font-size-sm);opacity:.9}.mockup-nav{background:var(--gray-100);padding:var(--space-3);display:flex;gap:var(--space-2);overflow-x:auto}.nav-item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.nav-item.active{background:#fff;color:var(--primary-600);box-shadow:var(--shadow-sm)}.mockup-content{padding:var(--space-6);display:grid;gap:var(--space-4)}.mockup-card{background:var(--gray-50);padding:var(--space-4);border-radius:var(--radius-lg)}.card-header{font-weight:600;color:var(--gray-900);margin-bottom:var(--space-3)}.progress-bar{background:var(--gray-200);height:8px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--space-2)}.progress-fill{background:linear-gradient(90deg,var(--primary-500),var(--secondary-500));height:100%;transition:width .3s ease}.card-status{font-size:var(--font-size-sm);color:var(--gray-600)}.compliance-indicator{color:var(--success-500);font-weight:600}.payslip-amount{font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-600);margin-bottom:var(--space-2)}.card-action{background:var(--primary-600);color:#fff;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;margin-top:var(--space-2)}.leave-info,.tax-info{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--font-size-sm);color:var(--gray-600)}.approval-items{display:flex;flex-direction:column;gap:var(--space-2)}.approval-item{font-size:var(--font-size-sm);color:var(--warning-500);font-weight:500;padding:var(--space-1) var(--space-2);background:var(--warning-50);border-radius:var(--radius-md);border-left:3px solid var(--warning-500)}.employee-section{background:var(--gray-50)}.benefits-section{background:#fff}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8)}.benefit-card{text-align:center;padding:var(--space-6)}.benefit-icon{font-size:var(--font-size-4xl);margin-bottom:var(--space-4)}.benefit-title{font-size:var(--font-size-xl);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-3)}.benefit-description{color:var(--gray-600);line-height:var(--leading-relaxed)}.cta-section{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));color:#fff}.cta-content{text-align:center}.cta-title{font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--space-4)}.cta-description{font-size:var(--font-size-lg);line-height:var(--leading-relaxed);margin-bottom:var(--space-8);opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.cta-buttons{display:flex;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-6)}.cta-note{font-size:var(--font-size-sm);opacity:.8}.footer{background:var(--gray-900);color:#fff}.footer-content{max-width:1200px;margin:0 auto;padding:var(--space-16) var(--space-6) var(--space-8);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-8)}.footer-title{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-400);margin-bottom:var(--space-4)}.footer-description{color:var(--gray-300);line-height:var(--leading-relaxed)}.footer-heading{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-4)}.footer-links{list-style:none}.footer-links li{margin-bottom:var(--space-2)}.footer-links a{color:var(--gray-300);text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:var(--primary-400)}.footer-bottom{max-width:1200px;margin:0 auto;padding:var(--space-6);border-top:1px solid var(--gray-800);display:flex;justify-content:space-between;align-items:center;color:var(--gray-400)}.footer-legal{display:flex;gap:var(--space-6)}.footer-legal a{color:var(--gray-400);text-decoration:none;font-size:var(--font-size-sm);transition:color .2s ease}.footer-legal a:hover{color:var(--primary-400)}@media (max-width: 1024px){.hero-content,.section-content,.contact-grid,.dashboard-header{grid-template-columns:1fr;gap:var(--space-12)}.section-content.reverse .content-visual{order:0}.hero-title{font-size:var(--font-size-4xl)}.section-title{font-size:var(--font-size-3xl)}.dashboard-header{text-align:center}.dashboard-actions{justify-content:center}.details-grid,.overview-grid,.plans-grid{grid-template-columns:1fr}.pricing-card.popular{transform:none}}@media (max-width: 768px){.nav-links{display:none}.mobile-menu-toggle{display:flex}.hero-section,.page-hero,.dashboard-hero,.pricing-hero,.contact-hero{padding:var(--space-16) var(--space-4) var(--space-12);text-align:center}.hero-title,.page-title,.dashboard-title{font-size:var(--font-size-3xl)}.hero-buttons,.cta-buttons{flex-direction:column;align-items:center}.hero-stats{justify-content:center}.section-container{padding:var(--space-12) var(--space-4)}.section-title{font-size:var(--font-size-2xl)}.features-grid,.benefits-grid,.stats-grid{grid-template-columns:1fr}.cta-title{font-size:var(--font-size-3xl)}.footer-bottom{flex-direction:column;gap:var(--space-4);text-align:center}.hr-dashboard-mockup,.employee-dashboard-mockup{max-width:100%}.mockup-nav{padding:var(--space-2)}.nav-item{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2)}.dashboard-grid,.quick-actions,.form-row{grid-template-columns:1fr}.contact-info{padding-right:0}.comparison-header,.comparison-row{grid-template-columns:1fr;text-align:left!important}.comparison-header>div,.comparison-row>div{padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--gray-200)}.features-categories{grid-template-columns:1fr}}@media (max-width: 480px){.hero-title,.page-title,.dashboard-title{font-size:var(--font-size-2xl)}.section-title{font-size:var(--font-size-xl)}.cta-title{font-size:var(--font-size-2xl)}.feature-card,.benefit-card{padding:var(--space-6)}.overview-card,.details-section,.contact-form-section{padding:var(--space-4)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.feature-card,.benefit-card{animation:fadeInUp .6s ease-out}*{transition:transform .2s ease,box-shadow .2s ease}button:focus,a:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-500);outline-offset:2px}@media print{.nav-container,.mobile-menu,.cta-section,.footer{display:none}body{font-size:12pt;line-height:1.5}.hero-section,.section-container{padding:1rem}}