* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter', sans-serif; background:#f6f5f1; color:#111; overflow-x:hidden; }
h1,h2,h3 { font-family:'Syne', sans-serif; letter-spacing:-0.02em; }
nav { display:flex; justify-content:space-between; align-items:center; padding:22px 6%; background:#fff; position:sticky; top:0; z-index:10; border-bottom:1px solid #eee; }
.logo { font-family:'Syne'; font-weight:800; font-size:24px; }
.nav-links { display:flex; gap:32px; } .nav-links a { text-decoration:none; color:#111; font-size:14px; font-weight:500; text-transform:uppercase; }
.nav-actions { display:flex; gap:18px; align-items:center; } .cart { font-size:14px; font-weight:600; }
.btn-small { background:#111; color:#fff; border:none; padding:10px 18px; border-radius:100px; font-size:13px; cursor:pointer; }
.hero { display:grid; grid-template-columns:1.1fr 0.9fr; min-height:88vh; padding:0 6%; align-items:center; background:#fff; }
.eyebrow { background:#111; color:#fff; padding:6px 14px; border-radius:100px; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.hero-text h1 { font-size: clamp(48px, 7vw, 96px); line-height:0.9; margin:20px 0; font-weight:800; }
.stroke { color:transparent; -webkit-text-stroke:2px #111; }
.hero-text p { max-width:420px; color:#666; line-height:1.6; font-size:16px; margin-bottom:32px; }
.hero-btns { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.btn-primary { background:#111; color:#fff; border:none; padding:18px 32px; border-radius:100px; font-size:15px; font-weight:600; cursor:pointer; }
.avatars { display:flex; } .av { width:32px; height:32px; border-radius:50%; background:#ddd; border:2px solid #fff; margin-left:-8px; } .av2 { background:#bbb; } .av3 { background:#999; }
.rating { display:flex; align-items:center; gap:10px; font-size:13px; color:#555; }
.hero-image { position:relative; height:100%; display:flex; align-items:center; justify-content:center; }
.circle-bg { position:absolute; width:480px; height:480px; background:radial-gradient(#f0e9ff,#e6d9ff); border-radius:50%; z-index:1; }
.product-card.floating { position:relative; z-index:2; background:#fff; border-radius:24px; padding:20px; width:320px; box-shadow:0 40px 80px rgba(0,0,0,0.12); transform:rotate(-2deg); }
.tag { font-size:10px; font-weight:700; background:#ffef5c; display:inline-block; padding:4px 10px; border-radius:100px; margin-bottom:16px; }
.img-placeholder { font-size:120px; text-align:center; padding:20px 0; background:#f9f9f9; border-radius:16px; }
.card-info { display:flex; justify-content:space-between; margin-top:16px; }
.brands { display:flex; gap:40px; align-items:center; padding:24px 6%; background:#f6f5f1; flex-wrap:wrap; }
.brands span { font-size:11px; opacity:0.5; } .brand-list { display:flex; gap:48px; font-family:'Syne'; font-weight:700; opacity:0.4; letter-spacing:2px; }
.products { padding:80px 6%; } .section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; } .section-head h2 { font-size:48px; } .section-head a { text-decoration:none; color:#111; font-weight:600; border-bottom:2px solid #111; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.p-card { background:#fff; border-radius:24px; padding:24px; border:1px solid #eee; transition:0.3s; position:relative; } .p-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.06); }
.p-card.featured { background:#111; color:#fff; } .p-card.featured p { color:#aaa; }
.p-img { font-size:80px; background:#f6f5f1; border-radius:16px; text-align:center; padding:30px 0; margin-bottom:20px; } .featured .p-img { background:#1a1a1a; }
.p-meta { display:flex; justify-content:space-between; margin-bottom:6px; } .p-card p { font-size:13px; color:#888; margin-bottom:18px; }
.p-card button { width:100%; padding:14px; border-radius:100px; border:1px solid #111; background:#fff; font-weight:600; cursor:pointer; } .p-card button.dark { background:#fff; color:#111; border:none; }
.badge { position:absolute; top:16px; right:16px; background:#ff4d4d; color:#fff; font-size:11px; font-weight:700; padding:6px 10px; border-radius:100px; }
.banner { display:grid; grid-template-columns:1fr 1fr; margin:0 6%; border-radius:32px; overflow:hidden; background:#111; color:#fff; min-height:520px; }
.banner-content { padding:60px; display:flex; flex-direction:column; justify-content:center; } .banner-content h2 { font-size:48px; line-height:0.95; margin-bottom:20px; } .banner-content p { color:#aaa; line-height:1.6; max-width:400px; margin-bottom:40px; }
.stats { display:flex; gap:40px; } .stats h3 { font-size:32px; } .stats span { font-size:12px; color:#777; text-transform:uppercase; letter-spacing:1px; }
.banner-image { background:linear-gradient(45deg,#ddd,#bbb); color:#111; display:flex; align-items:end; padding:30px; font-weight:600; font-family:'Syne'; }
footer { padding:60px 6% 30px; background:#fff; margin-top:80px; border-top:1px solid #eee; }
.footer-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:30px; } .footer-top h2 { font-size:42px; font-weight:800; }
.newsletter p { font-size:14px; margin-bottom:10px; font-weight:600; } .input-group { display:flex; background:#f6f5f1; border-radius:100px; padding:6px; } .input-group input { border:none; background:transparent; padding:10px 18px; outline:none; min-width:240px; } .input-group button { background:#111; color:#fff; border:none; padding:10px 22px; border-radius:100px; cursor:pointer; font-weight:600; }
.footer-bottom { display:flex; justify-content:space-between; margin-top:50px; padding-top:24px; border-top:1px solid #eee; font-size:13px; color:#999; flex-wrap:wrap; gap:16px; } .links { display:flex; gap:20px; }
@media(max-width:900px){ .hero, .banner, .grid { grid-template-columns:1fr; } .circle-bg { width:320px; height:320px; } .banner-content { padding:40px 24px; } .section-head h2, .banner-content h2 { font-size:36px; } }