:root{
    --bg:#101314;
    --bg-alt:#171b1c;
    --bg-alt-2:#1d2122;
    --accent:#c98a3e;
    --accent-soft:#e0aa66;
    --accent-2:#7c96a0;
    --text:#ece7df;
    --text-muted:#a2a09a;
    --border:#2a2f30;
    --stripe-a:#c98a3e;
    --stripe-b:#171b1c;
  }

  *{box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.65;
  }

  h1,h2,h3,h4,.brand,.nav-link,.btn{
    font-family:'Space Grotesk', sans-serif;
  }

  h1,h2,h3{
    color:#fff;
    letter-spacing:-0.01em;
  }

  a{ text-decoration:none; }

  ::selection{ background:var(--accent); color:#101314; }

  .container-narrow{ max-width:1160px; }

  /* ---------- Stripe motif ---------- */
  .stripe-bar{
    height:6px;
    width:100%;
    background:repeating-linear-gradient(
      -45deg,
      var(--stripe-a) 0px, var(--stripe-a) 18px,
      var(--stripe-b) 18px, var(--stripe-b) 36px
    );
  }
  .stripe-bar.thin{ height:4px; }

  /* ---------- Navbar ---------- */
  .navbar-custom{
    background:rgba(16,19,20,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }
  .navbar-custom .navbar-brand{
    color:#fff;
    font-weight:700;
    font-size:1.15rem;
    display:flex;
    align-items:center;
    gap:.6rem;
  }
  .brand-mark{
    width:34px;height:34px;flex:0 0 auto;
  }
  .navbar-custom .navbar-brand small{
    display:block;
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:.66rem;
    color:var(--text-muted);
    letter-spacing:.03em;
  }
  .navbar-custom .nav-link{
    color:var(--text);
    font-size:.94rem;
    font-weight:500;
    margin:0 .35rem;
    padding:.5rem .6rem !important;
    border-bottom:2px solid transparent;
    transition:color .2s, border-color .2s;
  }
  .navbar-toggler{
    background-color: #c98a3e;
  }
  .navbar-custom .nav-link:hover,
  .navbar-custom .nav-link:focus{
    color:var(--accent-soft);
    border-color:var(--accent);
  }
  .btn-callnow{
    background:var(--accent);
    color:#171307;
    font-weight:600;
    border-radius:2px;
    padding:.5rem 1.1rem;
    border:1px solid var(--accent);
    font-size:.9rem;
  }
  .btn-callnow:hover{ background:var(--accent-soft); color:#171307; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:6.5rem 0 4.5rem;
    overflow:hidden;
    border-bottom:1px solid var(--border);
  }
  .hero .eyebrow-line{
    color:var(--accent-soft);
    font-weight:500;
    font-size:.95rem;
    margin-bottom:.9rem;
  }
  .hero h1{
    font-size:clamp(2.3rem, 5vw, 3.4rem);
    font-weight:700;
    line-height:1.12;
    max-width:640px;
  }
  .hero p.lead{
    color:var(--text-muted);
    max-width:520px;
    font-size:1.08rem;
    margin-top:1.2rem;
  }
  .hero-cta{
    margin-top:2rem;
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
  }
  .btn-primary-custom{
    background:var(--accent);
    border:1px solid var(--accent);
    color:#171307;
    font-weight:600;
    padding:.8rem 1.6rem;
    border-radius:2px;
  }
  .btn-primary-custom:hover{ background:var(--accent-soft); color:#171307; }
  .btn-outline-custom{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    font-weight:500;
    padding:.8rem 1.6rem;
    border-radius:2px;
  }
  .btn-outline-custom:hover{ border-color:var(--accent-soft); color:var(--accent-soft); }

  .hero-illustration{
    position:relative;
    height:100%;
    min-height:340px;
  }
  .awning-graphic{ width:100%; height:auto; }

  .hero-stat-strip{
    border-top:1px solid var(--border);
    margin-top:3.5rem;
    padding-top:1.8rem;
    display:flex;
    gap:2.5rem;
    flex-wrap:wrap;
  }
  .hero-stat-strip .stat b{
    display:block;
    font-family:'Space Grotesk',sans-serif;
    color:#fff;
    font-size:1.6rem;
  }
  .hero-stat-strip .stat span{
    color:var(--text-muted);
    font-size:.85rem;
  }

  /* ---------- Section shell ---------- */
  section{ padding:5.5rem 0; }
  .section-alt{ background:var(--bg-alt); }
  .section-head{ max-width:620px; margin-bottom:3rem; }
  .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:700; }
  .section-head p{ color:var(--text-muted); margin-top:.8rem; }
  .section-tag{
    color:var(--accent-soft);
    font-size:.85rem;
    font-weight:600;
    margin-bottom:.6rem;
    display:inline-block;
  }

  /* ---------- About ---------- */
  .about-figure{
    border:1px solid var(--border);
    background:var(--bg-alt-2);
    padding:1.6rem;
    position:relative;
  }
  .about-figure svg{ width:100%; height:auto; display:block; }
  .about-list{ list-style:none; padding:0; margin-top:1.6rem; }
  .about-list li{
    display:flex;
    gap:.7rem;
    padding:.55rem 0;
    border-top:1px solid var(--border);
    color:var(--text-muted);
    font-size:.95rem;
  }
  .about-list li:first-child{ border-top:none; }
  .about-list i{ color:var(--accent); margin-top:.15rem; }

  /* ---------- Why choose us ---------- */
  .why-card{
    border:1px solid var(--border);
    padding:1.8rem 1.6rem;
    height:100%;
    background:var(--bg);
    position:relative;
    transition:border-color .2s;
  }
  .section-alt .why-card{ background:var(--bg-alt); }
  .why-card:hover{ border-color:var(--accent); }
  .why-card .why-icon{
    width:46px;height:46px;
    border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;
    color:var(--accent-soft);
    margin-bottom:1.1rem;
  }
  .why-card h3{ font-size:1.08rem; font-weight:600; margin-bottom:.5rem; }
  .why-card p{ color:var(--text-muted); font-size:.92rem; margin:0; }

  /* ---------- Products ---------- */
  .product-card{
    border:1px solid var(--border);
    background:var(--bg-alt);
    height:100%;
    overflow:hidden;
  }
  .product-card .product-top{
    height:5px;
    background:var(--accent);
  }
  .product-card:nth-child(2n) .product-top{ background:var(--accent-2); }
  .product-card .product-body{ padding:1.7rem; }
  .product-card .product-icon{
    font-size:1.6rem;
    color:var(--accent-soft);
    margin-bottom:.9rem;
  }
  .product-card:nth-child(2n) .product-icon{ color:var(--accent-2); }
  .product-card h3{ font-size:1.12rem; font-weight:600; }
  .product-card p{ color:var(--text-muted); font-size:.92rem; margin-bottom:0; }

  /* ---------- Gallery ---------- */
  .gallery-item{
    border:1px solid var(--border);
    overflow:hidden;
    cursor:pointer;
    position:relative;
    background:var(--bg-alt-2);
  }
  .gallery-item img, .gallery-item svg{
    width:100%;
    height:230px;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
  }
  .gallery-item:hover img,
  .gallery-item:hover svg{ transform:scale(1.06); }
  .gallery-caption{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:.7rem .9rem;
    background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
    font-size:.85rem;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .gallery-caption i{ color:var(--accent-soft); }

  #lightboxModal .modal-content{
    background:var(--bg-alt);
    border:1px solid var(--border);
  }
  #lightboxModal .modal-header{ border-bottom:1px solid var(--border); }
  #lightboxModal .btn-close{ filter:invert(1); }
  #lightboxImg{ width:100%; height:auto; display:block; }

  /* ---------- Contact ---------- */
  .contact-card{
    border:1px solid var(--border);
    background:var(--bg-alt);
    padding:2rem;
  }
  .form-control-custom{
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:2px;
    padding:.7rem .9rem;
  }
  .form-control-custom:focus{
    background:var(--bg);
    color:var(--text);
    border-color:var(--accent);
    box-shadow:0 0 0 .18rem rgba(201,138,62,.2);
  }
  .form-control-custom::placeholder{ color:#6f6d68; }
  label.form-label{ font-size:.85rem; color:var(--text-muted); margin-bottom:.35rem; }

  .contact-info-block{
    border:1px solid var(--border);
    background:var(--bg-alt-2);
    padding:1.8rem;
    /* height:100%; */
  }
  .contact-info-block .info-row{
    display:flex;
    gap:.9rem;
    padding:.9rem 0;
    border-top:1px solid var(--border);
  }
  .contact-info-block .info-row:first-child{ border-top:none; padding-top:0; }
  .contact-info-block .info-row i{
    color:var(--accent-soft);
    font-size:1.15rem;
    margin-top:.15rem;
  }
  .contact-info-block .info-row span{ color:var(--text-muted); font-size:.92rem; }
  .contact-info-block .info-row strong{ display:block; color:#fff; font-size:.95rem; }

  .map-frame{
    border:1px solid var(--border);
    overflow:hidden;
    height:260px;
    margin-top:1.5rem;
  }
  .map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.05) invert(0.92) hue-rotate(180deg); }

  /* ---------- Footer ---------- */
  footer{
    background:var(--bg-alt-2);
    border-top:1px solid var(--border);
    padding:3.5rem 0 0;
  }
  footer .footer-brand{
    display:flex;
    align-items:center;
    gap:.7rem;
    color:#fff;
    font-weight:700;
    font-size:1.1rem;
    margin-bottom:.9rem;
  }
  footer .footer-brand svg{ width:30px;height:30px; }
  footer p{ color:var(--text-muted); font-size:.9rem; }
  footer h4{
    color:#fff;
    font-size:.95rem;
    font-weight:600;
    margin-bottom:1.1rem;
  }
  footer ul{ list-style:none; padding:0; margin:0; }
  footer ul li{ margin-bottom:.65rem; }
  footer ul li a{
    color:var(--text-muted);
    font-size:.92rem;
    transition:color .2s;
  }
  footer ul li a:hover{ color:var(--accent-soft); }
  footer .footer-contact li{
    display:flex;
    gap:.6rem;
    color:var(--text-muted);
    font-size:.9rem;
    align-items:flex-start;
  }
  footer .footer-contact li i{ color:var(--accent-soft); margin-top:.2rem; }
  .footer-bottom{
    border-top:1px solid var(--border);
    margin-top:2.6rem;
    padding:1.2rem 0;
    font-size:.82rem;
    color:#6f6d68;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.5rem;
  }

  .back-to-top{
    position:fixed;
    right:1.4rem;
    bottom:1.4rem;
    width:44px;height:44px;
    border:1px solid var(--border);
    background:var(--bg-alt);
    color:var(--accent-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
    z-index:1050;
  }
  .back-to-top.show{ opacity:1; pointer-events:auto; }

  @media (max-width: 767px){
    section{ padding:3.5rem 0; }
    .hero{ padding:5.5rem 0 3rem; text-align:left; }
    .hero-stat-strip{ gap:1.6rem; }
  }