.designer-demo-page{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.hero-section{position:relative;padding:4rem 2rem;min-height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-bg-pattern{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.05'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");animation:float 20s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(20px,-20px)}}.hero-content{max-width:900px;text-align:center;z-index:2;position:relative}.hero-badge{display:inline-block;background:rgba(255,255,255,.2);color:white;padding:.5rem 1.5rem;border-radius:50px;font-size:.875rem;font-weight:600;margin-bottom:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}.hero-title{font-size:4rem;font-weight:800;color:white;margin:0 0 1.5rem;line-height:1.1;text-shadow:0 4px 20px rgba(0,0,0,.3)}.hero-subtitle{font-size:1.25rem;color:rgba(255,255,255,.9);line-height:1.6;max-width:600px;margin:0 auto 3rem}.product-context-card{background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:1.5rem;margin:2rem auto 0;max-width:400px;display:flex;align-items:center;gap:1rem}.product-icon{font-size:3rem;background:rgba(255,255,255,.2);border-radius:12px;padding:.5rem;min-width:80px;text-align:center}.product-details{flex:1}.product-name{font-size:1.25rem;font-weight:700;color:white;margin-bottom:.5rem}.product-specs{display:flex;gap:1rem;flex-wrap:wrap}.spec{background:rgba(255,255,255,.2);padding:.25rem .75rem;border-radius:20px;font-size:.875rem;color:white;font-weight:500}.product-reminder{background:linear-gradient(135deg,#f8fafc,#e2e8f0);border:1px solid #e2e8f0;border-radius:12px;padding:1rem;margin-top:1rem;display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:#374151}.reminder-icon{font-size:1.5rem}.hero-stats{display:flex;justify-content:center;gap:3rem;margin-top:3rem}.stat{text-align:center;color:white}.stat-number{font-size:2.5rem;font-weight:800;line-height:1;margin-bottom:.5rem}.stat-label{font-size:.875rem;opacity:.8;font-weight:500}.feature-highlight{background:white;padding:5rem 2rem}.feature-content{max-width:1200px;margin:0 auto}.feature-highlight h2{text-align:center;font-size:2.5rem;font-weight:700;margin:0 0 3rem;color:#1f2937}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.feature-item{text-align:center;padding:2rem;border-radius:16px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border:1px solid #e2e8f0;transition:transform .3s ease,box-shadow .3s ease}.feature-item:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.1)}.feature-icon{font-size:3rem;margin-bottom:1rem;display:block}.feature-item h3{font-size:1.25rem;font-weight:700;margin:0 0 1rem;color:#1f2937}.feature-item p{color:#64748b;line-height:1.6;margin:0}.additional-demos{margin-top:4rem;padding-top:4rem;border-top:2px solid #e2e8f0}.additional-demos-title{text-align:center;font-size:2rem;font-weight:700;margin:0 0 3rem;color:#1f2937}.designer-showcase{background:#f8fafc;padding:5rem 2rem}.showcase-header{text-align:center;max-width:800px;margin:0 auto 4rem}.showcase-header h2{font-size:2.5rem;font-weight:700;margin:0 0 1rem;color:#1f2937}.showcase-header p{font-size:1.125rem;color:#64748b;margin:0}.designer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;max-width:1200px;margin:0 auto}.designer-card,.designer-card-wrapper{position:relative}.designer-card{background:white;border-radius:20px;padding:0;cursor:pointer;transition:all .4s ease;text-decoration:none;display:block;overflow:hidden;border:2px solid transparent;box-shadow:0 4px 20px rgba(0,0,0,.08)}.designer-card--link{text-decoration:none;color:inherit}.designer-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.15)}.designer-card.active{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.2);transform:translateY(-8px)}.designer-card.popular{border-color:#f59e0b}.designer-card.recommended{border-color:#8b5cf6;box-shadow:0 4px 20px rgba(139,92,246,.15)}.recommended-badge{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 12px rgba(139,92,246,.4)}.popular-badge,.recommended-badge{position:absolute;top:1rem;right:1rem;color:white;padding:.5rem 1rem;border-radius:50px;font-size:.75rem;font-weight:700;z-index:3}.popular-badge{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 12px rgba(245,158,11,.4)}.designer-card__gradient{position:absolute;top:0;left:0;right:0;height:120px;opacity:.8}.designer-card__content{position:relative;padding:2rem;z-index:2}.designer-card__icon{font-size:3rem;margin-bottom:1rem;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.designer-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;gap:1rem}.designer-card h3{margin:0;font-size:1.5rem;font-weight:700;color:#1f2937;line-height:1.2}.designer-card__description{color:#64748b;line-height:1.6;margin:0 0 1.5rem;font-size:.875rem}.designer-card__features{margin-bottom:2rem}.designer-card__features h4{font-size:.875rem;font-weight:600;color:#374151;margin:0 0 .75rem}.designer-card__features ul{margin:0;padding:0;list-style:none}.designer-card__features li{font-size:.8rem;color:#64748b;margin-bottom:.5rem;padding-left:0}.tier-badge{padding:.375rem .75rem;border-radius:8px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.tier-badge--basic{background:linear-gradient(135deg,#10b981,#059669);color:white}.tier-badge--professional{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white}.tier-badge--enterprise{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:white}.demo-link-badge,.preview-badge{padding:1rem 1.5rem;background:linear-gradient(135deg,#1f2937,#374151);color:white;border-radius:12px;font-size:.875rem;font-weight:600;text-align:center;transition:all .3s ease}.designer-card:hover .demo-link-badge,.designer-card:hover .preview-badge{background:linear-gradient(135deg,#3b82f6,#1d4ed8);transform:translateY(-2px)}.designer-card.active .preview-badge{background:linear-gradient(135deg,#10b981,#059669)}.demo-section{background:white;padding:2rem;border-top:1px solid #e2e8f0}.demo-features{max-width:1200px;margin:0 auto;background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:1.5rem;border-radius:12px;border:1px solid #e2e8f0}.demo-features h4{margin:0 0 1rem;font-size:1rem;font-weight:600;color:#1f2937;display:inline-block}.feature-tips{display:flex;flex-wrap:wrap;gap:.75rem}.tip{background:white;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;color:#64748b;border:1px solid #e2e8f0;white-space:nowrap}.tip kbd{background:#374151;color:white;padding:.125rem .375rem;border-radius:4px;font-size:.75rem;font-weight:600;margin:0 .25rem}.designer-container{background:#f8fafc;padding:3rem 2rem}.container-header{text-align:center;max-width:800px;margin-left:auto;margin-right:auto;margin-bottom:2rem}.container-header h3{font-size:2rem;font-weight:700;margin:0 0 .5rem;color:#1f2937}.container-header p{color:#64748b;font-size:1.125rem;margin:0}.designer-wrapper-container{max-width:1400px;margin:0 auto;height:80vh;min-height:600px;max-height:900px}.designer-wrapper{background:white;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);overflow:hidden;height:100%;display:flex;flex-direction:column}.designer-wrapper>*{flex:1;overflow:hidden}.cta-section{background:linear-gradient(135deg,#1f2937,#374151);padding:5rem 2rem;text-align:center}.cta-content{max-width:800px;margin:0 auto}.cta-content h2{font-size:2.5rem;font-weight:700;color:white;margin:0 0 1rem}.cta-content p{font-size:1.125rem;color:rgba(255,255,255,.8);margin:0 0 2rem}.cta-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.cta-primary,.cta-secondary{padding:1rem 2rem;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;border:2px solid transparent;text-decoration:none;display:inline-block}.cta-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white}.cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,130,246,.4)}.cta-secondary{background:transparent;color:white;border-color:rgba(255,255,255,.3)}.cta-secondary:hover{background:rgba(255,255,255,.1);border-color:white}@media (max-width:768px){.hero-title{font-size:2.5rem}.hero-stats{flex-direction:column;gap:1.5rem}.designer-grid,.feature-grid{grid-template-columns:1fr}.demo-info{gap:1.5rem;text-align:center}.cta-buttons,.demo-info,.feature-tips{flex-direction:column}.cta-buttons{align-items:center}.cta-primary,.cta-secondary{width:100%;max-width:300px}}