:root{--primary-color:#8b5cf6;--primary-dark:#7c3aed;--accent-color:#ddd6fe;--text-dark:#1e293b;--text-light:#64748b;--white:#ffffff;--gradient-primary:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%)}

/* Enhanced font fallback for CLS prevention only */
@font-face{font-family:'Inter-fallback';size-adjust:106.8%;src:local('Arial')}

*{box-sizing:border-box}
body,html{margin:0;padding:0;font-family:'Inter','Inter-fallback',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;font-display:swap}

/* Header - preserve original design with minimal CLS fixes */
.header{background:var(--white);border-bottom:1px solid #e5e7eb;position:relative;z-index:1000}
.header-top{background:#f8f9fa;padding:0.5rem 0;font-size:0.875rem}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header-info{display:flex;justify-content:space-between;align-items:center}
.contact-info{display:flex;gap:2rem}
.info-item{display:flex;align-items:center;gap:0.5rem}
.info-item a{text-decoration:none;color:var(--text-dark)}

/* Navigation - original design preserved */
.navbar{padding:1rem 0}
.nav-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.nav-brand{display:flex;align-items:center}
.brand-link{display:flex;align-items:center;gap:1rem;text-decoration:none}
.brand-logo img{width:40px;height:40px}
.brand-name{font-size:1.5rem;font-weight:700;color:var(--primary-color);margin:0}
.brand-tagline{font-size:0.875rem;color:var(--text-light)}

/* Hero - key CLS fixes while preserving design */
.hero{background:var(--gradient-primary);color:var(--white);padding:2.5rem 0 2rem;margin-top:0;position:relative;overflow:hidden;min-height:380px}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;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='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.hero-container{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center;position:relative;z-index:1;min-height:330px}

.hero-badge{display:inline-flex;align-items:center;gap:0.3rem;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);padding:0.3rem 0.6rem;border-radius:50px;font-size:0.7rem;font-weight:600;margin-bottom:0.5rem;width:max-content}

/* Hero text - targeted CLS fixes with design preservation */
.hero-title{font-size:1.8rem;font-weight:800;line-height:1.1;margin:0.5rem 0;min-height:65px;contain:layout}
.highlight{color:var(--accent-color);text-shadow:0 0 30px rgba(221,214,254,0.5)}
.hero-description{font-size:0.9rem;line-height:1.4;opacity:0.9;margin:0.75rem 0;min-height:45px;contain:layout}

.hero-features{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;margin:1rem 0;min-height:60px}
.hero-feature{display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;height:25px}
.hero-feature a{color:inherit;text-decoration:none}
.hero-feature i{width:16px;text-align:center;flex-shrink:0;font-size:0.8rem}

.hero-buttons{display:flex;gap:0.75rem;margin:1.5rem 0;height:48px}
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.6rem 1.2rem;border-radius:8px;text-decoration:none;font-weight:600;transition:none;border:none;cursor:pointer;height:48px;box-sizing:border-box;font-size:0.9rem}
.btn-primary{background:var(--white);color:var(--primary-color)}
.btn-secondary{background:rgba(255,255,255,0.1);color:var(--white);border:1px solid rgba(255,255,255,0.3)}
.btn-large{padding:1rem 2rem;font-size:1rem}

/* Hero visual - fixed dimensions for CLS */
.hero-visual{display:flex;justify-content:center;align-items:center;height:100%;min-height:320px}
.hero-screenshot{background:var(--white);color:var(--text-dark);border-radius:12px;overflow:visible;box-shadow:0 15px 40px rgba(139,92,246,0.15);width:100%;max-width:380px;height:300px;transform:perspective(1000px) rotateY(-12deg)}

/* Screenshot content - original proportions */
.screenshot-frame{height:100%;display:flex;flex-direction:column}
.screenshot-header{flex-shrink:0;padding:0.4rem 0.8rem;background:#f8f9fa;border-bottom:1px solid #e5e7eb;font-size:0.7rem}
.screenshot-content{flex:1;padding:0.8rem;overflow:hidden}
.compact-header{margin-bottom:0.8rem;font-size:0.7rem}
.compact-kpis{display:flex;gap:0.6rem;margin-bottom:0.8rem}
.compact-widgets{display:flex;gap:0.6rem}
.mini-card{flex:1;padding:0.5rem;background:#f8f9fa;border-radius:6px;font-size:0.65rem}
.mini-chart,.mini-schedule{flex:1;background:#f8f9fa;padding:0.5rem;border-radius:6px;font-size:0.65rem}

/* Trust stats - minimal CLS fix */
.trust-stats{display:flex;gap:1.5rem;margin-top:1rem;height:50px}
.trust-stat{text-align:center;min-width:60px}
.trust-number{display:block;font-size:1.2rem;font-weight:700;line-height:1;margin-bottom:0.2rem;height:24px}
.trust-label{font-size:0.7rem;opacity:0.8;height:16px}

/* Navigation menu - original styling */
.nav-menu{display:flex;list-style:none;margin:0;padding:0;gap:2rem}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;text-decoration:none;color:var(--text-dark);min-height:44px;box-sizing:border-box}

/* Icon optimization - minimal impact */
.fas,.fab,.far,.fa{font-family:'Font Awesome 6 Free','Font Awesome 6 Brands',system-ui,sans-serif;width:20px;text-align:center;display:inline-block}

/* Font loading optimization */
.hero-title,.hero-description,.hero-feature{font-display:swap}

/* Below fold - enhanced CLS prevention */
.features-overview,.services-section,.success-stories{will-change:auto;contain:layout}
.section-header{min-height:120px;contain:layout;text-align:center}
.section-header h2{margin:2rem 0 1rem;line-height:1.2;font-size:2.2rem}
.section-header p{margin:0 auto 2rem;max-width:600px;line-height:1.5;font-size:1.1rem}
.features-grid,.services-grid,.stories-grid{min-height:450px;contain:layout}
.feature-card,.service-card,.story-card{height:auto;min-height:320px;contain:layout}

/* Image CLS prevention */
img{height:auto}
.brand-logo img{width:40px;height:40px}

/* Mobile responsive - preserve original design */
@media (max-width:768px){
.hero{min-height:520px;padding:2rem 0 1.5rem}
.hero-container{grid-template-columns:1fr;min-height:460px;gap:2rem}
.hero-title{font-size:1.6rem;min-height:55px}
.hero-description{min-height:40px;font-size:0.8rem}
.hero-features{grid-template-columns:1fr;min-height:80px;gap:0.4rem}
.hero-feature{font-size:0.8rem;height:22px}
.hero-buttons{flex-direction:column;height:100px;gap:0.8rem}
.btn{height:40px;font-size:0.85rem}
.hero-visual{min-height:280px}
.hero-screenshot{height:260px;max-width:320px}
.trust-stats{gap:1rem;height:40px}
.trust-number{font-size:1rem;height:20px}
.trust-label{font-size:0.65rem;height:14px}
.contact-info{flex-direction:column;gap:0.5rem}
.nav-container{flex-direction:column;gap:1rem}
.features-grid{min-height:600px}
}