*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--gold:#C9A84C;--gl:#E8C56A;--dark:#1a1a1a;--darker:#111;--muted:#888}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f5f0eb;color:#1a1a1a;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;width:100%;z-index:200;background:#fff;border-bottom:1px solid #e0d8cc;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:60px}
.nav-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:1px;text-decoration:none;color:inherit}
.nav-logo svg{width:26px;height:26px;flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-phone{font-weight:600;font-size:13px;color:#333;text-decoration:none}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{text-decoration:none;color:#333;font-size:14px;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.burger span{display:block;width:24px;height:2px;background:#333;border-radius:2px;transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:#fff;z-index:150;flex-direction:column;padding:28px 24px;gap:0}
.nav-drawer.open{display:flex}
.nav-drawer a{display:block;padding:18px 0;font-size:20px;font-weight:700;color:#1a1a1a;text-decoration:none;border-bottom:1px solid #f0ebe4}
.nav-drawer .d-phone{margin-top:auto;padding-top:28px;font-size:18px;font-weight:800;color:var(--gold);text-decoration:none;border:none}

/* HERO */
.hero{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;min-height:460px}
.hero-left{background:#e8e0d5;padding:60px 50px;display:flex;flex-direction:column;justify-content:center}
.hero-left h1{font-size:38px;font-weight:800;line-height:1.1;margin-bottom:14px}
.hero-left h1 span{color:var(--gold)}
.hero-left p{color:#666;font-size:15px;margin-bottom:26px;line-height:1.6}
.btn-gold{display:inline-block;background:var(--gold);color:#fff;padding:14px 28px;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:none;transition:background .2s;align-self:flex-start}
.btn-gold:hover{background:var(--gl)}
.hero-right{position:relative;overflow:hidden;min-height:280px;background:url('https://images.unsplash.com/photo-1615066831055-dd7f79c03dbd?w=800') center/cover}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:flex-end;padding:40px 36px}
.hero-overlay h2{color:#fff;font-size:32px;font-weight:800;line-height:1.1;margin-bottom:8px}
.hero-overlay h2 span{color:var(--gold)}
.hero-overlay p{color:rgba(255,255,255,.85);font-size:12px;line-height:1.8}

/* STRIP */
.strip{background:var(--dark);display:grid;grid-template-columns:1fr 1fr 1fr;padding:50px}
.sb{padding:0 36px 0 0;border-right:1px solid #2a2a2a}
.sb:last-child{border:none;padding-left:36px;padding-right:0}
.sb:first-child{padding-left:0}
.sb .lbl{color:var(--gold);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.sb h3{color:#fff;font-size:21px;font-weight:800;margin-bottom:8px;line-height:1.2}
.sb p{color:var(--muted);font-size:13px;line-height:1.6}

/* SECTION TITLE */
.st{text-align:center;padding:60px 24px 32px}
.st h2{font-size:30px;font-weight:800;margin-bottom:10px}
.st p{color:#666;font-size:14px;max-width:440px;margin:0 auto;line-height:1.6}

/* CATALOG */
.catalog{padding:0 48px 70px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:2px solid transparent;cursor:pointer;transition:all .25s;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 12px 40px rgba(201,168,76,.2)}
.card:active{transform:scale(.98)}
.card-img{height:200px;overflow:hidden;position:relative;background:#f0ebe4}
.card-img img{width:100%;height:100%;object-fit:contain;background:#1a1a1a;transition:transform .4s;display:block}
.card:hover .card-img img{transform:scale(1.05)}
.badge{position:absolute;top:14px;left:14px;background:var(--dark);color:#fff;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px}
.card-body{padding:20px}
.card-body h3{font-size:17px;font-weight:800;margin-bottom:5px}
.card-sub{color:var(--muted);font-size:11px;margin-bottom:14px;line-height:1.4}
.specs{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.spec{font-size:11px;color:#555}
.spec strong{display:block;font-size:13px;color:#1a1a1a;font-weight:700}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-size:19px;font-weight:800;color:var(--gold);white-space:nowrap}
.btn-cfg{background:var(--dark);color:#fff;border:none;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:background .2s;white-space:nowrap;-webkit-tap-highlight-color:rgba(201,168,76,0.3);touch-action:manipulation}
.btn-cfg:hover{background:var(--gold)}

/* FEATURES */
.features{background:var(--dark);padding:70px 48px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.fi{text-align:center}
.fi-icon{width:56px;height:56px;background:var(--gold);border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:22px}
.fi h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:8px}
.fi p{color:var(--muted);font-size:12px;line-height:1.6}

/* REVIEWS */
.reviews{padding:70px 48px;background:#f5f0eb}
.grid3r{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.rev{background:#fff;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.rev-auth{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rev-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.rev-name{font-weight:700;font-size:14px}
.rev-date{font-size:11px;color:var(--muted)}
.stars{color:var(--gold);font-size:13px;margin-bottom:10px}
.rev-text{font-size:13px;color:#555;line-height:1.7}

/* FOOTER */
footer{background:var(--darker);color:#666;text-align:center;padding:28px 20px;font-size:13px;line-height:1.8}
footer strong{color:var(--gold)}
footer a{color:var(--gold);text-decoration:none}

/* MODAL */
.mo{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mo.active{display:flex!important}
.modal{background:var(--darker);color:#fff;width:100%;max-width:920px;border:1px solid #2a2a2a;display:grid;grid-template-columns:1fr 1fr;position:relative;animation:mIn .28s ease;margin:auto}
@keyframes mIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.m-close{position:absolute;top:14px;right:14px;background:#2a2a2a;border:none;color:#fff;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:4px;transition:background .2s;touch-action:manipulation}
.m-close:hover,.m-close:active{background:var(--gold)}
.m-prev{background:#1c1c1c;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 36px 36px;position:relative;min-height:340px}
.m-prev img{max-width:100%;max-height:240px;object-fit:contain;transition:opacity .3s}
.m-badge{position:absolute;top:18px;left:18px;background:var(--gold);color:#fff;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px}
.m-cfg{padding:36px 32px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.m-title{font-size:24px;font-weight:800;line-height:1.2}
.m-sub{color:var(--muted);font-size:12px;margin-top:6px}
.cfg-lbl{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cfg-opts{display:flex;gap:8px;flex-wrap:wrap}
.cfg-btn{padding:9px 16px;border:1.5px solid #3a3a3a;background:transparent;color:#bbb;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;touch-action:manipulation}
.cfg-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.12)}
.cfg-colors{display:flex;gap:14px;align-items:center}
.cfg-clr{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;touch-action:manipulation;position:relative}
.cfg-clr.active{border-color:var(--gold)}
.cfg-clr.active::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.clr-name{font-size:12px;color:#777}
.size-sl{width:100%;height:6px;accent-color:var(--gold);cursor:pointer;margin-top:4px}
.size-val{color:var(--gold);font-size:15px;font-weight:700;margin-top:8px}
.price-blk{border-top:1px solid #2a2a2a;padding-top:18px}
.m-price{font-size:32px;font-weight:800;color:var(--gold)}
.m-price small{font-size:13px;color:var(--muted);font-weight:400}
.btn-order{background:var(--gold);color:#fff;border:none;padding:16px;font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .2s;width:100%;touch-action:manipulation}
.btn-order:hover,.btn-order:active{background:var(--gl)}
.m-feats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-feat{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.m-feat::before{content:'✓';color:var(--gold);font-weight:800;flex-shrink:0}

/* ──── MOBILE ──── */
@media(max-width:768px){
  .nav-links{display:none}
  .nav-phone{display:none}
  .burger{display:flex}

  .hero{grid-template-columns:1fr;min-height:unset}
  .hero-left{padding:32px 20px}
  .hero-left h1{font-size:26px}
  .hero-left p{font-size:14px;margin-bottom:20px}
  .btn-gold{align-self:stretch;text-align:center;padding:15px 20px}
  .hero-right{min-height:230px}
  .hero-overlay{padding:22px 20px}
  .hero-overlay h2{font-size:24px}

  .strip{grid-template-columns:1fr;padding:28px 20px;gap:0}
  .sb{border-right:none;border-bottom:1px solid #2a2a2a;padding:0 0 24px !important;margin-bottom:24px}
  .sb:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0 !important}
  .sb h3{font-size:18px}

  .st{padding:36px 20px 24px}
  .st h2{font-size:22px}

  .catalog{padding:0 14px 48px}
  .grid3{grid-template-columns:1fr;gap:14px}
  .card-img{height:200px}
  .card-body{padding:16px}
  .card-body h3{font-size:17px}
  .card-foot{gap:10px}
  .price{font-size:19px}
  .btn-cfg{flex:1;text-align:center;padding:14px 12px;font-size:13px;min-height:48px;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:rgba(201,168,76,0.3)}

  .features{padding:40px 20px}
  .grid4{grid-template-columns:1fr 1fr;gap:24px}

  .reviews{padding:40px 14px}
  .grid3r{grid-template-columns:1fr;gap:12px}

  /* Modal — slides up from bottom, full mobile sheet */
  .mo.active{display:flex!important;padding:0;align-items:flex-end}
  .modal{
    grid-template-columns:1fr;
    max-width:100%;
    width:100%;
    border-radius:20px 20px 0 0;
    border:none;
    animation:mUp .3s ease;
    margin:0;
    max-height:95vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  @keyframes mUp{from{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}
  .modal::before{content:'';display:block;width:40px;height:4px;background:#444;border-radius:2px;margin:14px auto 0;flex-shrink:0}
  .m-close{top:10px;right:12px;width:48px;height:48px;font-size:22px;border-radius:50%;z-index:10}

  /* Preview image hidden on mobile to save space */
  .m-prev{display:none}

  /* Config panel takes full width and scrolls */
  .m-cfg{
    padding:16px 18px 40px;
    gap:16px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;
  }

  .m-title{font-size:20px}
  .m-sub{font-size:13px}

  /* Model buttons */
  .cfg-opts{display:flex;flex-wrap:wrap;gap:8px}
  .cfg-btn{
    flex:1;
    text-align:center;
    min-height:46px;
    font-size:13px;
    padding:10px 8px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  /* Sliders — bigger touch targets */
  .size-sl{
    width:100%;
    height:8px;
    cursor:pointer;
    margin-top:6px;
    accent-color:var(--gold);
    -webkit-appearance:none;
  }
  .size-sl::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--gold);
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.4);
  }
  .size-val{font-size:16px;margin-top:6px}

  /* Color swatches */
  .cfg-clr{width:44px;height:44px;touch-action:manipulation}
  .cfg-colors{gap:12px;flex-wrap:wrap}

  /* Price block */
  .price-blk{padding:10px 0}
  .m-price{font-size:22px}

  /* Features row */
  .m-feats{grid-template-columns:1fr 1fr;gap:8px}
  .m-feat{font-size:12px;padding:8px 10px}

  /* Order button */
  .btn-order{
    padding:16px;
    font-size:14px;
    letter-spacing:1px;
    min-height:54px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    position:sticky;
    bottom:0;
    border-radius:0;
    margin:0 -18px -40px;
    width:calc(100% + 36px);
  }
}

@media(max-width:480px){
  .hero-left h1{font-size:22px}
  .grid4{grid-template-columns:1fr 1fr;gap:18px}
  .fi-icon{width:46px;height:46px;font-size:18px}
  .m-cfg{padding:14px 16px 36px;gap:14px}
  .cfg-btn{min-height:44px;font-size:12px}
  .btn-order{font-size:13px;padding:15px}
}

@media(max-width:360px){
  .hero-left h1{font-size:20px}
  .m-title{font-size:18px}
  .cfg-btn{font-size:11px;padding:8px 6px}
  .m-price{font-size:20px}
}

/* Model button with SVG */
.cfg-model{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;min-width:0;flex:1}
.cfg-model svg{opacity:0.5;transition:opacity .2s}
.cfg-model.active svg,.cfg-model:hover svg{opacity:1}
.cfg-model span{font-size:11px;letter-spacing:1px}

/* Order confirmation modal */
.ord-mo{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.88);align-items:center;justify-content:center;padding:20px}
.ord-mo.show{display:flex}
.ord-box{background:#111;border:1px solid #2a2a2a;border-radius:16px;padding:36px 32px;max-width:420px;width:100%;text-align:center}
.ord-icon{width:60px;height:60px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin:0 auto 16px}
.ord-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:16px}
.ord-body{background:#1a1a1a;border-radius:10px;padding:16px;text-align:left;font-size:13px;color:#ccc;line-height:1.8;margin-bottom:16px;white-space:pre-line}
.ord-note{font-size:13px;color:#888;margin-bottom:24px;line-height:1.6}
.ord-note strong{color:var(--gold)}

/* Quick view modal */
.qv-mo{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.92);align-items:center;justify-content:center;padding:20px}
.qv-mo.show{display:flex}
.qv-box{background:#111;border:1px solid #2a2a2a;border-radius:16px;padding:24px;max-width:600px;width:100%;position:relative}
.qv-close{position:absolute;top:12px;right:12px;background:#2a2a2a;border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qv-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:16px}
.qv-img-wrap{border-radius:10px;overflow:hidden;background:#1a1a1a}
.qv-img{width:100%;max-height:400px;object-fit:cover;display:block}

/* Modal image gallery */
.m-prev{background:#0d0d0d;display:flex;flex-direction:column;padding:20px;gap:12px;position:relative}
.m-img-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:180px;background:#111;border-radius:10px;overflow:hidden}
.m-img-wrap #mImg{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.m-arr{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.6);border:1px solid #444;color:#fff;width:36px;height:36px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;line-height:1;transition:background .2s}
.m-arr:hover{background:var(--gold);border-color:var(--gold)}
.m-arr-l{left:8px}
.m-arr-r{right:8px}
.m-thumbs{display:flex;gap:10px;overflow-x:auto;padding:14px 0 0;}
.m-thumbs::-webkit-scrollbar{height:3px}
.m-thumbs::-webkit-scrollbar-thumb{background:#444;border-radius:2px}
.m-thumb{width:160px;height:120px;border-radius:8px;overflow:hidden;cursor:pointer;opacity:0.55;border:2px solid transparent;flex-shrink:0;transition:all .2s}
.m-thumb img{width:100%;height:100%;object-fit:cover}
.m-thumb.active{opacity:1;border-color:var(--gold)}

.ord-success{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.92);align-items:center;justify-content:center;padding:20px}
.ord-phone-wrap{margin-bottom:16px}
.ord-phone-input{width:100%;background:#1a1a1a;border:1px solid #444;border-radius:10px;padding:14px 16px;font-size:18px;color:#fff;outline:none;text-align:center;letter-spacing:1px;transition:border-color .2s;font-family:inherit}
.ord-phone-input:focus{border-color:var(--gold)}
.ord-phone-input::placeholder{color:#555;font-size:15px;letter-spacing:0}
.ord-btns{display:flex;flex-direction:column;gap:10px}
.ord-cancel{background:transparent;border:1px solid #444;color:#888;border-radius:10px;padding:12px;font-size:13px;cursor:pointer;transition:all .2s;font-family:inherit}
.ord-cancel:hover{border-color:#888;color:#fff}

@media(max-width:768px){
  #orderBtn{
    position:static !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    width:100%;
    margin-top:16px;
    border-radius:10px;
  }
  .m-cfg{
    padding-bottom:20px !important;
  }
}