.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(135deg,#fafaf5,#f0f4e8)}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0}.logo{font-family:var(--font-heading);font-size:1.8rem;font-weight:800;color:var(--color-primary);letter-spacing:-.5px}.hero-content{flex:1;display:flex;align-items:center;padding-bottom:4rem}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.hero-text h1{font-size:3.5rem;margin-bottom:1.5rem;color:var(--color-text-main);animation:fadeUp .8s ease-out}.hero-text p{font-size:1.25rem;color:var(--color-text-muted);margin-bottom:2.5rem;max-width:500px;animation:fadeUp .8s ease-out .2s backwards}.hero-cta{display:flex;gap:1rem;animation:fadeUp .8s ease-out .4s backwards}.hero-visuals{position:relative;height:600px;animation:fadeIn 1s ease-out .5s backwards}.phone-mockup{position:absolute;width:280px;height:560px;background:#fff;border-radius:40px;box-shadow:0 24px 48px -12px #00000026;border:8px solid #2D2D2D;overflow:hidden;z-index:2;left:50%;transform:translate(-50%);display:flex;flex-direction:column}.phone-left{transform:translate(-120%) translateY(40px) rotate(-10deg);z-index:1;opacity:.8;filter:blur(1px)}.phone-right{transform:translate(20%) translateY(40px) rotate(10deg);z-index:1;opacity:.8;filter:blur(1px)}.app-header{height:60px;background:var(--color-background);border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:0 1rem;font-weight:700}.app-body{flex:1;background:#f8f8f8;padding:1rem;display:flex;flex-direction:column;gap:1rem}.feed-item{background:#fff;border-radius:12px;height:120px;box-shadow:0 2px 4px #0000000d}.outfit-preview-card{background:linear-gradient(to bottom right,#ffd1dc,#f0f4e8);flex:1;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--color-danger)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-text h1{font-size:2.5rem}.hero-text p{margin:0 auto 2.5rem}.hero-cta{justify-content:center}.phone-left,.phone-right{display:none}.hero-visuals{height:400px;margin-top:2rem}}.how-it-works{background-color:var(--color-surface)}.section-title{font-size:2.5rem;margin-bottom:1rem;color:var(--color-text-main)}.section-subtitle{color:var(--color-text-muted);margin-bottom:4rem;font-size:1.1rem}.mb-5{margin-bottom:3rem}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.step-card{position:relative;background:var(--color-background);padding:3rem 2rem;border-radius:var(--radius-lg);text-align:center;transition:var(--transition-default);display:flex;flex-direction:column;align-items:center}.step-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-md)}.step-number{position:absolute;top:-15px;left:50%;transform:translate(-50%);background-color:var(--color-primary);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;box-shadow:var(--shadow-sm)}.step-icon-wrapper{width:80px;height:80px;background-color:#d4a3731a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;color:var(--color-primary)}.step-card h3{margin-bottom:1rem;font-size:1.25rem}.step-card p{color:var(--color-text-muted);font-size:.95rem}@media (max-width: 768px){.steps-grid{grid-template-columns:1fr}}.features{background-color:var(--color-background)}.features-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.style-filters{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}.filter-btn{padding:.5rem 1.5rem;border-radius:var(--radius-full);border:1px solid var(--color-border);background:#fff;color:var(--color-text-muted);font-size:.9rem;transition:var(--transition-default)}.filter-btn.active,.filter-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.bottom-selector{margin-bottom:2rem}.bottom-selector h3,.recommendations-list h3{font-size:1rem;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:1rem}.color-options{display:flex;gap:1rem}.color-btn{width:40px;height:40px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .2s}.color-btn.active{transform:scale(1.2);border-color:var(--color-primary)}.rec-grid{display:flex;gap:1rem;flex-direction:column}.rec-card{display:flex;align-items:center;gap:1rem;padding:.8rem;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer;transition:var(--transition-default)}.rec-card:hover,.rec-card.active{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.rec-color-preview{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.1)}.rec-info h4{font-size:.95rem;margin-bottom:.2rem}.badge{font-size:.75rem;padding:.2rem .6rem;border-radius:4px;font-weight:600}.badge-perfect{background:#d1ffdc;color:#006c2e}.badge-safe{background:#d1e7ff;color:#00458f}.badge-daring{background:#ffd1dc;color:#8f002e}.features-preview{background:#fff;padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.outfit-canvas{position:relative;height:400px;background:#f8f8f8;border-radius:var(--radius-md);display:flex;flex-direction:column;overflow:hidden}.outfit-top-area,.outfit-bottom-area{flex:1;display:flex;justify-content:center;align-items:center;padding:1rem}.garment{width:120px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:background-color .5s ease}.top-garment{height:140px;border-radius:20px 20px 0 0;clip-path:polygon(20% 0,80% 0,100% 30%,100% 100%,0 100%,0 30%)}.bottom-garment{height:160px;border-radius:0 0 20px 20px}.garment-label{background:#fffc;padding:.2rem .5rem;border-radius:4px;font-size:.8rem;font-weight:700}.match-score{position:absolute;top:1rem;right:1rem;background:#fff;padding:.5rem 1rem;border-radius:var(--radius-full);font-size:.9rem;box-shadow:var(--shadow-sm)}.save-look-btn{position:absolute;bottom:1rem;right:1rem;background:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-danger);box-shadow:var(--shadow-sm);border:none;cursor:pointer;transition:transform .2s}.save-look-btn:hover{transform:scale(1.1);background:var(--color-danger);color:#fff}@media (max-width: 768px){.features-layout{grid-template-columns:1fr}}.personas{background-color:var(--color-surface)}.personas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.persona-card{background:var(--color-background);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition-default);position:relative;padding:2rem;border:1px solid transparent}.persona-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--color-border)}.persona-icon-wrapper{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}.persona-content h3{margin-bottom:.5rem;font-size:1.25rem}.persona-content p{color:var(--color-text-muted)}@media (max-width: 768px){.personas-grid{grid-template-columns:1fr}}.cta-section{background:var(--color-accent);margin:var(--spacing-lg) var(--spacing-sm);border-radius:var(--radius-lg);text-align:center;padding:6rem 2rem}.cta-section h2{font-size:2.5rem;margin-bottom:1rem;color:var(--color-text-main)}.cta-section p{color:var(--color-text-muted);margin-bottom:2rem;font-size:1.2rem}.cta-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.store-btn{min-width:200px}.footer{background-color:#fff;padding-top:4rem;padding-bottom:2rem;border-top:1px solid var(--color-border)}.footer-content{display:flex;justify-content:space-between;margin-bottom:4rem;flex-wrap:wrap;gap:2rem}.footer-brand h3{font-size:1.5rem;margin-bottom:.5rem;color:var(--color-primary)}.footer-links{display:flex;gap:4rem}.link-group h4{margin-bottom:1rem;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.link-group a{display:block;margin-bottom:.5rem;color:var(--color-text-muted);transition:color .2s}.link-group a:hover{color:var(--color-primary)}.footer-social{display:flex;gap:1rem}.footer-social a{width:40px;height:40px;border-radius:50%;background:var(--color-background);display:flex;align-items:center;justify-content:center;color:var(--color-text-main);transition:all .2s}.footer-social a:hover{background:var(--color-primary);color:#fff}.footer-bottom{text-align:center;color:var(--color-text-muted);font-size:.9rem;padding-top:2rem;border-top:1px solid var(--color-border)}@media (max-width: 768px){.footer-content{flex-direction:column}.footer-links{gap:2rem;flex-wrap:wrap}}:root{--color-primary: #D4A373;--color-primary-hover: #C08D60;--color-secondary: #CCD5AE;--color-accent: #E9EDC9;--color-background: #FAFAF5;--color-surface: #FFFFFF;--color-text-main: #2D2D2D;--color-text-muted: #666666;--color-border: #E5E5E5;--color-success: #A3B18A;--color-warning: #F4A261;--color-danger: #E76F51;--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 2rem;--spacing-lg: 4rem;--spacing-xl: 8rem;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0,0,0,.05);--shadow-md: 0 8px 16px rgba(0,0,0,.08);--shadow-lg: 0 16px 32px rgba(0,0,0,.12);--transition-default: all .3s cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--color-background);color:var(--color-text-main);line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}a{text-decoration:none;color:inherit}button{cursor:pointer;border:none;font-family:inherit}img{max-width:100%;display:block}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-sm)}.section{padding:var(--spacing-lg) 0}.text-center{text-align:center}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.grid{display:grid}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 2rem;border-radius:var(--radius-full);font-weight:600;transition:var(--transition-default);font-size:1rem}.btn-primary{background-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-surface);color:var(--color-text-main);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-accent);border-color:var(--color-accent)}