*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Poppins",sans-serif;background:#fff;color:#333;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.main-header{background:linear-gradient(90deg,#111,#222);color:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.main-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.logo{font-size:1.8rem;font-weight:700;color:#f8b400;text-decoration:none;letter-spacing:2px;text-transform:uppercase}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:#fff;text-decoration:none;font-weight:500;transition:color 0.3s}
.nav-links a:hover{color:#f8b400}

.hero{position:relative;background:url('https://images.pexels.com/photos/1571459/pexels-photo-1571459.jpeg') center/cover no-repeat;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.hero .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6)}
.hero-content{position:relative;z-index:2;max-width:800px}
.hero-content h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:1rem;font-weight:700}
.hero-content p{font-size:1.2rem;margin-bottom:2rem}
.search-form{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.search-form input,.search-form select{padding:0.9rem 1rem;border:none;border-radius:8px;font-size:1rem;min-width:180px}
.search-form button{background:#f8b400;color:#fff;border:none;padding:1rem 2rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s}
.search-form button:hover{background:#ffcb05}

.showcase{padding:4rem 0;text-align:center}
.showcase h2{font-size:2rem;margin-bottom:2rem}
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.showcase-grid img{width:100%;height:300px;object-fit:cover;border-radius:12px;transition:transform .3s}
.showcase-grid img:hover{transform:scale(1.03)}

.info-section{background:#f9f9f9;padding:4rem 0;text-align:center}
.info-section h2{font-size:2.2rem;margin-bottom:2rem}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.05);transition:transform .3s}
.card:hover{transform:translateY(-5px)}

.cta-section{background:linear-gradient(135deg,#f8b400,#ff7300);color:#fff;padding:5rem 1rem;text-align:center}
.cta-content h2{font-size:2.5rem;margin-bottom:1rem}
.cta-content p{font-size:1.2rem;margin-bottom:2rem}
.large-btn{padding:1rem 2.5rem;font-size:1.1rem;border-radius:8px;background:#fff;color:#f37335;text-decoration:none;transition:all .3s}
.large-btn:hover{background:#f4f4f4}

.main-footer{background:#111;color:#fff;padding:3rem 1rem;text-align:center}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;text-align:left;margin-bottom:2rem}
.footer-cols h3{color:#f8b400;margin-bottom:1rem}
.footer-cols ul{list-style:none;padding:0}
.footer-cols ul li a{color:#ddd;text-decoration:none;line-height:1.8;transition:color .3s}
.footer-cols ul li a:hover{color:#f8b400}
.social-icons a img{width:28px;height:28px;margin-right:.5rem;transition:transform .3s}
.social-icons a:hover img{transform:scale(1.1)}
.copyright{font-size:.9rem;color:#aaa;border-top:1px solid rgba(255,255,255,0.1);padding-top:1rem}

.fade-in{opacity:0;transform:translateY(30px);transition:all .8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media(max-width:768px){
.hero{height:80vh}
.nav-links{gap:1rem}
.search-form{flex-direction:column;align-items:center}
.showcase-grid img{height:220px}
}
.page{background:#fff;color:#333}
.hero-page{position:relative;color:#fff;text-align:center;padding:8rem 1rem}
.hero-page .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5)}
.hero-text{position:relative;z-index:2}
.hero-text h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem}
.hero-text p{font-size:1.2rem}

.content-section{padding:4rem 1rem}
.content-section h2{font-size:2rem;margin-bottom:1rem;color:#222}
.content-section p{margin-bottom:1.5rem;font-size:1rem;line-height:1.6}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}
.value-card{background:#f9f9f9;border-radius:12px;padding:2rem;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.05)}
.value-card h3{color:#f8b400;margin-bottom:.5rem}

.styled-form{max-width:700px;margin:auto;display:flex;flex-direction:column;gap:1rem}
.styled-form .form-row{display:flex;gap:1rem;flex-wrap:wrap}
.styled-form input,.styled-form select,.styled-form textarea{width:100%;padding:1rem;border:1px solid #ddd;border-radius:8px;font-size:1rem}
.styled-form button{align-self:flex-start}

.contact-info{background:#fafafa;padding:4rem 1rem}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;text-align:center}
.info-grid h3{color:#f8b400;margin-bottom:.5rem}
.info-grid p a{color:#333;text-decoration:none;font-weight:500}
.info-grid p a:hover{text-decoration:underline}

.design-tool{padding:4rem 0}
.tool-controls{display:flex;gap:1rem;align-items:center;margin-bottom:2rem}
.tool-controls input{width:150px;padding:0.6rem;border:1px solid #ddd;border-radius:8px}
.design-wrapper{display:flex;flex-wrap:wrap;gap:1rem}
.tool-sidebar{flex:1 1 250px;background:#fff;border-radius:12px;padding:1rem;box-shadow:0 4px 20px rgba(0,0,0,0.05)}
.tool-items{display:flex;flex-wrap:wrap;gap:.6rem}
.item{background:#f9fafb;border-radius:8px;padding:.6rem .9rem;font-size:1rem;cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,0.05);transition:transform .2s}
.item:active{transform:scale(1.05)}
.room-area{flex:1 1 600px;background:#f3f4f6;border-radius:12px;position:relative;min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.room-item{position:absolute;cursor:move;font-size:1.8rem;user-select:none;animation:dropIn .5s ease}
@keyframes dropIn{from{transform:scale(.8)translateY(-20px);opacity:0}to{transform:scale(1)translateY(0);opacity:1}}
.hint{color:#aaa;font-size:1rem}
@media(max-width:768px){
.hero-page{padding:6rem 1rem}
.tool-controls{flex-direction:column;align-items:flex-start}
}