*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --terracotta: #C9684E;
      --terracotta-dark: #A4513C;
      --terracotta-light: #E08770;
      --terracotta-soft: #F4E0D5;
      --sand: #DCC9A6;
      --sand-light: #EDDDC0;
      --sand-dark: #B8A77E;
      --cream: #FBF7F2;
      --cream-warm: #F5EDE0;
      --linen: #EFE5D4;
      --sage: #8DA391;
      --sage-light: #C5D2C7;
      --sage-soft: #E8EEE9;
      --charcoal: #3D3530;
      --text: #4A413B;
      --text-soft: #7A6F66;
      --border: #E8DFD0;
      --white: #FFFFFF;
      --gold: #C99B5E;
      --shadow-sm: 0 2px 8px rgba(61,53,48,.06);
      --shadow-md: 0 8px 24px rgba(61,53,48,.1);
      --shadow-lg: 0 20px 50px rgba(61,53,48,.15);
      --shadow-terra: 0 12px 30px rgba(201,104,78,.25);
      --radius: 14px;
      --radius-sm: 8px;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Tajawal', sans-serif; color: var(--text); background: var(--cream); line-height: 1.6; overflow-x: hidden; }
    h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; color: var(--charcoal); }
    .serif { font-family: 'Fraunces', 'Tajawal', serif; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

    /* NAV */
    .navbar { position: fixed; top:0; left:0; right:0; z-index:1000; background: rgba(251,247,242,.92); backdrop-filter: blur(12px); transition: all .3s; }
    .navbar.scrolled { box-shadow: var(--shadow-sm); background: rgba(251,247,242,.98); border-bottom: 1px solid var(--border); }
    .nav-content { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 24px; max-width: 1280px; margin: 0 auto; }
    .logo { display: flex; align-items: baseline; gap: 10px; }
    .logo-main { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 900; color: var(--terracotta); letter-spacing: 1px; }
    .logo-sub { font-size: 10px; color: var(--text-soft); letter-spacing: 3px; font-weight: 600; text-transform: uppercase; }
    .nav-links { display: flex; gap: 36px; list-style: none; }
    .nav-links a { color: var(--text); font-weight: 500; font-size: 15px; position: relative; padding: 8px 0; transition: color .3s; }
    .nav-links a:hover { color: var(--terracotta); }
    .nav-links a::after { content:''; position: absolute; bottom: 0; right: 0; width: 0; height: 2px; background: var(--terracotta); transition: width .3s; }
    .nav-links a:hover::after { width: 100%; }
    .nav-cta { display: flex; align-items: center; gap: 14px; }
    .cart-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--cream-warm); display: flex; align-items: center; justify-content: center; transition: all .3s; font-size: 18px; }
    .cart-btn:hover { background: var(--terracotta); color: var(--white); transform: translateY(-2px); }

    /* Language switcher */
    .lang-switch { display: flex; align-items: center; gap: 4px; background: var(--cream-warm); border-radius: 100px; padding: 4px; }
    .lang-btn { padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; color: var(--text-soft); transition: all .25s; letter-spacing: 1px; }
    .lang-btn.active { background: var(--terracotta); color: var(--white); box-shadow: 0 2px 8px rgba(201, 104, 78, .3); }
    .lang-btn:not(.active):hover { color: var(--terracotta); }
    .cart-count { position: absolute; top: -4px; left: -4px; background: var(--terracotta); color: var(--white); font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .btn-primary { background: var(--terracotta); color: var(--white); padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; transition: all .3s; display: inline-flex; align-items: center; gap: 8px; }
    .btn-primary:hover { background: var(--terracotta-dark); transform: translateY(-2px); box-shadow: var(--shadow-terra); }

    /* HERO */
    .hero { position: relative; min-height: 100vh; background: linear-gradient(135deg, var(--cream-warm) 0%, var(--terracotta-soft) 50%, var(--sand-light) 100%); display: flex; align-items: center; overflow: hidden; padding: 100px 0 80px; }
    .hero::before { content:''; position: absolute; top: -20%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(201,104,78,.15), transparent 70%); border-radius: 50%; }
    .hero::after { content:''; position: absolute; bottom: -30%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(141,163,145,.18), transparent 65%); border-radius: 50%; }
    .hero-container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
    .hero-tag { display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; background: rgba(255,255,255,.7); border-radius: 100px; color: var(--terracotta-dark); font-size: 13px; font-weight: 700; margin-bottom: 28px; box-shadow: var(--shadow-sm); }
    .hero-tag-dot { width: 28px; height: 28px; background: var(--terracotta); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .hero-title { font-family: 'Fraunces', serif; font-size: clamp(48px, 7vw, 88px); font-weight: 900; line-height: 1; color: var(--charcoal); margin-bottom: 12px; }
    .hero-title .accent { color: var(--terracotta); font-style: italic; }
    .hero-title-en { font-family: 'Fraunces', serif; font-size: clamp(20px, 2.4vw, 28px); color: var(--terracotta); font-weight: 600; letter-spacing: 6px; margin-bottom: 32px; text-transform: uppercase; }
    .hero-desc { font-size: 18px; line-height: 1.8; color: var(--text); margin-bottom: 36px; max-width: 540px; }
    .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
    .btn-hero { background: var(--charcoal); color: var(--white); padding: 18px 36px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; transition: all .3s; display: inline-flex; align-items: center; gap: 12px; }
    .btn-hero:hover { background: var(--terracotta); transform: translateY(-3px); box-shadow: var(--shadow-terra); }
    .btn-hero-outline { background: transparent; color: var(--charcoal); padding: 18px 36px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; border: 2px solid var(--charcoal); transition: all .3s; display: inline-flex; align-items: center; gap: 12px; }
    .btn-hero-outline:hover { background: var(--charcoal); color: var(--white); }
    .hero-trust { display: flex; gap: 32px; margin-top: 50px; flex-wrap: wrap; }
    .trust-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
    .trust-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; color: var(--terracotta); font-size: 18px; box-shadow: var(--shadow-sm); }

    /* Bedroom scene */
    .hero-visual { position: relative; height: 560px; }
    .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-lg); }
    .bedroom-scene { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sage-soft) 0%, var(--cream-warm) 70%); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); }
    .scene-window { position: absolute; top: 8%; right: 10%; width: 30%; height: 35%; background: linear-gradient(180deg, #F4E0D5, #FAEFE3); border-radius: 8px; border: 4px solid var(--white); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
    .scene-window::before, .scene-window::after { content:''; position: absolute; background: var(--white); }
    .scene-window::before { top:0; bottom:0; left:50%; width: 4px; transform: translateX(-50%); }
    .scene-window::after { left:0; right:0; top:50%; height: 4px; transform: translateY(-50%); }
    .scene-plant { position: absolute; top: 25%; left: 12%; width: 60px; height: 90px; }
    .plant-pot { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 35px; background: linear-gradient(180deg, var(--terracotta), var(--terracotta-dark)); border-radius: 4px 4px 8px 8px; }
    .plant-leaves { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; }
    .leaf { position: absolute; width: 16px; height: 36px; background: var(--sage); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; bottom: 0; left: 50%; }
    .leaf:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
    .leaf:nth-child(2) { transform: translateX(-50%) rotate(-30deg) translateY(-4px); background: #98B19D; }
    .leaf:nth-child(3) { transform: translateX(-50%) rotate(30deg) translateY(-4px); background: #98B19D; }
    .leaf:nth-child(4) { transform: translateX(-50%) rotate(-55deg) translateY(-8px); background: #7A8F7E; }
    .leaf:nth-child(5) { transform: translateX(-50%) rotate(55deg) translateY(-8px); background: #7A8F7E; }
    .scene-bed { position: absolute; bottom: 0; left: 8%; right: 8%; height: 55%; }
    .bed-headboard { position: absolute; bottom: 35%; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, var(--terracotta-soft), var(--sand)); border-radius: 24px 24px 8px 8px; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
    .bed-headboard::before { content:''; position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; border: 2px solid rgba(201,104,78,.2); border-radius: 16px; }
    .bed-mattress { position: absolute; bottom: 15%; left: -5%; right: -5%; height: 22%; background: linear-gradient(180deg, var(--white), var(--cream-warm)); border-radius: 10px; box-shadow: 0 12px 25px rgba(0,0,0,.12); }
    .bed-mattress::before { content:''; position: absolute; left: 30px; right: 30px; top: 50%; height: 1px; background: var(--sand); transform: translateY(-50%); }
    .bed-base { position: absolute; bottom: 0; left: -5%; right: -5%; height: 15%; background: var(--charcoal); border-radius: 4px; }
    .bed-pillow { position: absolute; bottom: 38%; width: 28%; height: 16%; background: var(--white); border-radius: 50px; box-shadow: 0 6px 15px rgba(0,0,0,.1); }
    .bed-pillow.left { left: 8%; transform: rotate(-3deg); }
    .bed-pillow.right { right: 8%; transform: rotate(3deg); }
    .bed-cushion { position: absolute; bottom: 40%; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 22%; height: 13%; background: linear-gradient(135deg, var(--terracotta), var(--terracotta-dark)); border-radius: 8px; box-shadow: 0 6px 15px rgba(0,0,0,.15); }
    .bed-blanket { position: absolute; bottom: 15%; left: -5%; right: -5%; height: 12%; background: linear-gradient(135deg, var(--sage), #7A8F7E); border-radius: 0 0 8px 8px; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
    .hero-floating-card { position: absolute; bottom: 60px; left: -40px; background: var(--white); padding: 20px 24px; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 16px; max-width: 280px; z-index: 3; }
    .floating-card-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--sage-soft); display: flex; align-items: center; justify-content: center; color: var(--sage); font-size: 20px; flex-shrink: 0; }
    .floating-card-text strong { display: block; font-size: 16px; color: var(--charcoal); margin-bottom: 2px; }
    .floating-card-text span { font-size: 13px; color: var(--text-soft); }

    /* STATS */
    .stats { background: var(--white); padding: 70px 0; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .stat { text-align: center; position: relative; }
    .stat:not(:last-child)::after { content:''; position: absolute; left: -16px; top: 15%; height: 70%; width: 1px; background: var(--border); }
    .stat-icon { width: 56px; height: 56px; background: var(--terracotta-soft); color: var(--terracotta); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 16px; }
    .stat-number { font-family: 'Fraunces', serif; font-size: 48px; font-weight: 900; color: var(--charcoal); line-height: 1; margin-bottom: 6px; }
    .stat-label { font-size: 14px; color: var(--text); font-weight: 600; }

    /* SECTIONS */
    .section { padding: 100px 0; }
    .section-header { text-align: center; margin-bottom: 60px; }
    .section-tag { display: inline-block; color: var(--terracotta); font-size: 13px; font-weight: 700; letter-spacing: 4px; margin-bottom: 16px; padding: 6px 20px; background: var(--terracotta-soft); border-radius: 100px; }
    .section-title { font-family: 'Fraunces', serif; font-size: clamp(34px, 4vw, 50px); color: var(--charcoal); margin-bottom: 16px; }
    .section-title .accent { color: var(--terracotta); font-style: italic; }
    .section-subtitle { font-size: 16px; color: var(--text-soft); max-width: 680px; margin: 0 auto; line-height: 1.7; }

    /* ABOUT */
    #about { background: var(--cream-warm); }
    .sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .sector-card { background: var(--white); border-radius: var(--radius); padding: 36px 24px; text-align: center; transition: all .4s; position: relative; overflow: hidden; }
    .sector-card::before { content:''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--terracotta); transform: scaleX(0); transition: transform .4s; transform-origin: right; }
    .sector-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
    .sector-card:hover::before { transform: scaleX(1); }
    .sector-icon { width: 84px; height: 84px; border-radius: 20px; background: linear-gradient(135deg, var(--terracotta), var(--terracotta-light)); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 36px; transition: transform .4s; box-shadow: var(--shadow-terra); }
    .sector-card:hover .sector-icon { transform: rotate(-5deg) scale(1.05); }
    .sector-card.sector-humanity::before { background: var(--sage); }
    .sector-card.sector-humanity .sector-icon { background: linear-gradient(135deg, var(--sage), #7A8F7E); box-shadow: 0 12px 30px rgba(141, 163, 145, .35); }
    .sector-card.sector-humanity .sector-tag-en { color: var(--sage); }
    .sector-card h3 { font-family: 'Fraunces', serif; font-size: 24px; color: var(--charcoal); margin-bottom: 6px; }
    .sector-tag-en { font-size: 11px; color: var(--terracotta); letter-spacing: 3px; font-weight: 700; margin-bottom: 16px; }
    .sector-card p { font-size: 14px; color: var(--text-soft); line-height: 1.7; }

    /* FEATURES */
    .features { background: var(--white); padding: 80px 0; }
    .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .feature { text-align: center; padding: 32px 20px; border-radius: var(--radius); transition: all .3s; }
    .feature:hover { background: var(--cream-warm); transform: translateY(-4px); }
    .feature-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: var(--sage-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sage); font-size: 26px; transition: all .3s; }
    .feature:hover .feature-icon { background: var(--terracotta); color: var(--white); transform: rotate(10deg) scale(1.05); }
    .feature h4 { font-size: 17px; color: var(--charcoal); margin-bottom: 8px; }
    .feature p { font-size: 13px; color: var(--text-soft); line-height: 1.6; }

    /* SHOP */
    .shop { background: linear-gradient(180deg, var(--cream) 0%, var(--linen) 100%); padding: 100px 0; }
    .filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 50px; flex-wrap: wrap; }
    .filter-btn { padding: 12px 24px; border-radius: 100px; background: var(--white); color: var(--text); font-size: 14px; font-weight: 600; border: 1.5px solid var(--border); transition: all .3s; }
    .filter-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
    .filter-btn.active { background: var(--terracotta); color: var(--white); border-color: var(--terracotta); box-shadow: var(--shadow-terra); }
    .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
    .product-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: all .4s; position: relative; }
    .product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
    .product-image { position: relative; height: 260px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--cream-warm); }
    .product-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
    .product-card:hover .product-photo { transform: scale(1.08); }
    .product-image.bg-1 { background: linear-gradient(135deg, var(--terracotta-soft), var(--sand-light)); }
    .product-image.bg-2 { background: linear-gradient(135deg, var(--sage-soft), var(--cream-warm)); }
    .product-image.bg-3 { background: linear-gradient(135deg, var(--linen), var(--sand-light)); }
    .product-image.bg-4 { background: linear-gradient(135deg, #FAEFE3, var(--terracotta-soft)); }
    .product-image.bg-5 { background: linear-gradient(135deg, var(--sage-light), var(--sage-soft)); }
    .product-image.bg-6 { background: linear-gradient(135deg, var(--cream-warm), var(--linen)); }
    .product-image.bg-7 { background: linear-gradient(135deg, var(--sand-light), var(--terracotta-soft)); }
    .product-image.bg-8 { background: linear-gradient(135deg, var(--sage-soft), var(--sand-light)); }
    .product-img-visual { position: relative; width: 78%; height: 65%; }
    .shape-mattress { position: absolute; bottom: 18%; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, var(--white), var(--cream-warm)); border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,.12); }
    .shape-mattress::before { content:''; position: absolute; top: 10px; left: 10%; right: 10%; height: 1px; background: var(--sand); box-shadow: 0 8px 0 var(--sand), 0 16px 0 var(--sand); }
    .shape-mattress-dark { position: absolute; bottom: 18%; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, var(--charcoal), #2A2420); border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.25); }
    .shape-mattress-dark::after { content:'ROYAL'; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; color: var(--gold); font-family: 'Fraunces', serif; font-size: 18px; font-weight: 900; letter-spacing: 5px; }
    .shape-mattress-dark::before { content:''; position: absolute; top: 8px; left: 8px; right: 8px; height: 12px; background: var(--gold); border-radius: 3px; }
    .shape-pillow { position: absolute; width: 48%; height: 50%; background: var(--white); border-radius: 50%; box-shadow: 0 8px 18px rgba(0,0,0,.1); }
    .shape-pillow.p1 { top: 30%; right: 0; background: linear-gradient(135deg, var(--white), var(--linen)); }
    .shape-pillow.p2 { top: 20%; right: 30%; background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta)); transform: rotate(-10deg); }
    .shape-pillow.p3 { top: 45%; right: 18%; width: 36%; height: 36%; background: linear-gradient(135deg, var(--white), var(--cream-warm)); transform: rotate(5deg); }
    .shape-bedding { position: absolute; width: 92%; height: 75%; bottom: 8%; left: 4%; background: linear-gradient(180deg, var(--white), var(--sand-light)); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.1); overflow: hidden; }
    .shape-bedding::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 22%; background: var(--terracotta); }
    .shape-bedding-2 { position: absolute; width: 92%; height: 75%; bottom: 8%; left: 4%; background: linear-gradient(180deg, var(--white), var(--sage-light)); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.1); overflow: hidden; }
    .shape-bedding-2::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 22%; background: var(--sage); }
    .shape-bed-protector { position: absolute; top: 25%; left: 18%; width: 64%; height: 50%; background: linear-gradient(135deg, var(--white), var(--cream-warm)); border-radius: 16px; box-shadow: 0 10px 20px rgba(0,0,0,.1); border: 2px solid var(--sand); }
    .shape-bed-protector::after { content:'🌊'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; opacity: .4; }
    .product-badges { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
    .badge { padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 700; box-shadow: var(--shadow-sm); }
    .badge-new { background: var(--sage); color: var(--white); }
    .badge-best { background: var(--terracotta); color: var(--white); }
    .badge-discount { background: var(--charcoal); color: var(--white); }
    .product-wishlist { position: absolute; top: 16px; left: 16px; width: 38px; height: 38px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; color: var(--text-soft); font-size: 16px; transition: all .3s; z-index: 2; box-shadow: var(--shadow-sm); }
    .product-wishlist:hover, .product-wishlist.active { color: var(--terracotta); transform: scale(1.1); }
    .product-info { padding: 24px; }
    .product-category { font-size: 12px; color: var(--terracotta); margin-bottom: 8px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
    .product-name { font-family: 'Fraunces', serif; font-size: 19px; color: var(--charcoal); font-weight: 700; margin-bottom: 12px; min-height: 50px; }
    .product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
    .stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
    .rating-count { font-size: 12px; color: var(--text-soft); }
    .product-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .product-prices { display: flex; align-items: baseline; gap: 8px; }
    .product-price { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 900; color: var(--charcoal); }
    .product-currency { font-size: 13px; color: var(--text-soft); }
    .product-price-old { font-size: 13px; color: var(--text-soft); text-decoration: line-through; }
    .add-to-cart { background: var(--charcoal); color: var(--white); padding: 10px 18px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; transition: all .3s; }
    .add-to-cart:hover { background: var(--terracotta); transform: scale(1.05); box-shadow: var(--shadow-terra); }
    .shop-cta { text-align: center; margin-top: 50px; }
    .btn-shop-all { background: transparent; color: var(--charcoal); padding: 16px 40px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; border: 2px solid var(--charcoal); transition: all .3s; display: inline-flex; align-items: center; gap: 10px; }
    .btn-shop-all:hover { background: var(--charcoal); color: var(--white); }

    /* CTA */
    .cta-banner { background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-dark) 100%); padding: 90px 0; color: var(--white); text-align: center; position: relative; overflow: hidden; }
    .cta-banner::before, .cta-banner::after { content:''; position: absolute; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%); }
    .cta-banner::before { top: -120px; right: -120px; }
    .cta-banner::after { bottom: -120px; left: -120px; }
    .cta-content { position: relative; z-index: 2; }
    .cta-tag { display: inline-block; padding: 6px 16px; background: rgba(255,255,255,.15); border-radius: 100px; font-size: 12px; letter-spacing: 3px; font-weight: 700; margin-bottom: 20px; }
    .cta-banner h2 { font-family: 'Fraunces', serif; font-size: clamp(30px, 4vw, 46px); margin-bottom: 16px; color: var(--white); }
    .cta-banner p { font-size: 17px; opacity: .92; margin-bottom: 36px; max-width: 600px; margin-inline: auto; }
    .btn-cta { background: var(--white); color: var(--terracotta-dark); padding: 18px 40px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; transition: all .3s; display: inline-flex; align-items: center; gap: 10px; }
    .btn-cta:hover { background: var(--charcoal); color: var(--white); transform: translateY(-3px); }

    /* FOOTER */
    .footer { background: var(--charcoal); color: var(--white); padding: 80px 0 30px; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 60px; margin-bottom: 60px; }
    .footer-brand .logo-main { color: var(--terracotta-light); font-size: 32px; }
    .footer-brand .logo-sub { color: rgba(255,255,255,.4); }
    .footer-desc { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.8; margin-top: 20px; }
    .footer h5 { color: var(--terracotta-light); font-size: 13px; letter-spacing: 3px; margin-bottom: 24px; font-weight: 700; }
    .footer ul { list-style: none; }
    .footer ul li { margin-bottom: 12px; }
    .footer ul a { color: rgba(255,255,255,.7); font-size: 14px; transition: color .3s; }
    .footer ul a:hover { color: var(--terracotta-light); }
    .footer-contact-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; font-size: 14px; color: rgba(255,255,255,.7); }
    .footer-contact-item span:first-child { color: var(--terracotta-light); font-size: 16px; }
    .social-icons { display: flex; gap: 10px; margin-top: 20px; }
    .social-icons a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 16px; transition: all .3s; }
    .social-icons a:hover { background: var(--terracotta); transform: translateY(-3px); }
    .footer-bottom { padding-top: 30px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.5); flex-wrap: wrap; gap: 16px; }
    .footer-bottom a { color: rgba(255,255,255,.7); }

    /* TOAST */
    .toast { position: fixed; bottom: 30px; left: 30px; background: var(--charcoal); color: var(--white); padding: 16px 24px; border-radius: var(--radius); box-shadow: var(--shadow-lg); transform: translateY(120px); opacity: 0; transition: all .4s; z-index: 9999; display: flex; align-items: center; gap: 12px; font-weight: 600; max-width: 360px; }
    .toast.show { transform: translateY(0); opacity: 1; }
    .toast-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--terracotta); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

    /* RESPONSIVE */
    @media (max-width: 1024px) {
      .hero-container { grid-template-columns: 1fr; }
      .hero-visual { height: 420px; max-width: 600px; margin: 0 auto; }
      .hero-floating-card { left: 20px; bottom: 20px; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .stat:not(:last-child)::after { display: none; }
      .products-grid { grid-template-columns: repeat(2, 1fr); }
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .sectors-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-cta .btn-primary { display: none; }
      .hero { min-height: auto; padding: 120px 0 80px; }
      .hero-visual { height: 320px; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .products-grid { grid-template-columns: 1fr; }
      .features-grid { grid-template-columns: 1fr; }
      .sectors-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; text-align: center; }
      .section { padding: 60px 0; }
      .hero-trust { gap: 16px; }
    }