@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --orange:#f08a00;
  --orange2:#ffad2f;
  --ink:#0a0a0a;
  --ink2:#111111;
  --soft:#171717;
  --paper:#f5f3ef;
  --muted:#9b9b9b;
  --line:rgba(255,255,255,.10);
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--ink);
  color:#fff;
  font-family:'DM Sans',sans-serif;
  line-height:1.65;
}

a{
  text-decoration:none
}

/* =========================
   NAVBAR
========================= */

.navbar{
  background:rgba(8,8,8,.90)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(240,138,0,.18);
  padding:20px 0;
}

.navbar-brand img{
  width:210px !important;
  height:145px !important;
  object-fit:contain;
  display:block;
}

.nav-link{
  color:#ddd!important;
  font-weight:600;
  font-size:.94rem;
  padding:.7rem .85rem!important;
}

.nav-link:hover,
.nav-link.active{
  color:var(--orange)!important
}

/* =========================
   DROPDOWN
========================= */

.dropdown-menu{
  background:#111;
  border:1px solid rgba(240,138,0,.25);
  border-radius:14px;
  padding:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.45)
}

.dropdown-item{
  color:#ddd;
  border-radius:9px;
  padding:10px 13px
}

.dropdown-item:hover{
  background:rgba(240,138,0,.12);
  color:var(--orange)
}

/* =========================
   HERO
========================= */

.hero{
  min-height:86vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding-top:230px !important;

  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(240,138,0,.16),
      transparent 25%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(240,138,0,.07),
      transparent 28%
    ),
    #080808;
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:48px 48px;
}

.hero-ring{
  position:absolute;
  width:620px;
  height:620px;
  border:1px solid rgba(240,138,0,.22);
  border-radius:50%;
  right:-140px;
  top:50%;
  transform:translateY(-50%);

  box-shadow:
    0 0 0 70px rgba(240,138,0,.018),
    0 0 0 140px rgba(240,138,0,.012);
}

/* =========================
   TYPOGRAPHY
========================= */

.eyebrow{
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  font-size:.76rem;
  font-weight:700
}

.display-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.2rem,7vw,6.6rem);
  line-height:.98;
  margin:18px 0 24px
}

.display-title span{
  color:var(--orange)
}

.lead{
  font-size:1.12rem;
  color:#c8c8c8;
  max-width:690px
}

/* =========================
   BUTTONS
========================= */

.btn-orange{
  background:var(--orange);
  color:#090909;
  border:1px solid var(--orange);
  font-weight:700;
  border-radius:999px;
  padding:12px 22px
}

.btn-orange:hover{
  background:var(--orange2);
  color:#090909
}

.btn-ghost{
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  border-radius:999px;
  padding:12px 22px;
  font-weight:600
}

.btn-ghost:hover{
  border-color:var(--orange);
  color:var(--orange)
}

/* =========================
   SECTIONS
========================= */

.section{
  padding:105px 0
}

.section-dark{
  background:#0d0d0d
}

.section-paper{
  background:var(--paper);
  color:#111
}

.section-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.1rem,4vw,3.8rem);
  line-height:1.05;
  margin:10px 0 18px
}

.section-text{
  color:#a8a8a8;
  max-width:700px
}

.paper-text{
  color:#5e5e5e
}

/* =========================
   CARDS
========================= */

.card-dark{
  height:100%;
  background:linear-gradient(145deg,#151515,#0c0c0c);
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  transition:.35s;
  position:relative;
  overflow:hidden
}

.card-dark:hover{
  transform:translateY(-6px);
  border-color:rgba(240,138,0,.55);
  box-shadow:0 25px 60px rgba(0,0,0,.28)
}

.icon-box{
  width:58px;
  height:58px;
  border-radius:17px;
  background:rgba(240,138,0,.12);
  display:grid;
  place-items:center;
  color:var(--orange);
  font-size:1.35rem;
  margin-bottom:22px
}

/* =========================
   PRODUCTS
========================= */

.product-img,
.gallery-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:18px;
  background:linear-gradient(135deg,#252525,#101010);
}

.placeholder{
  display:grid;
  place-items:center;
  color:#666;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.product-card{
  overflow:hidden;
  padding:0
}

.product-card .body{
  padding:22px
}

.price{
  color:var(--orange);
  font-weight:800;
  font-size:1.15rem
}

/* =========================
   PAGE HERO
========================= */

.page-hero{
  padding:240px 0 90px !important;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(240,138,0,.12),
      transparent 28%
    ),
    #0a0a0a;
}

.page-hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(3rem,6vw,5.7rem);
  line-height:1
}

/* =========================
   TIMELINE
========================= */

.timeline{
  border-left:1px solid rgba(240,138,0,.35);
  padding-left:30px
}

.timeline-item{
  position:relative;
  margin-bottom:42px
}

.timeline-item:before{
  content:"";
  position:absolute;
  left:-37px;
  top:8px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 7px rgba(240,138,0,.1)
}

/* =========================
   GALLERY
========================= */

.gallery-tile{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  min-height:290px;
  background:#171717;
  border:1px solid var(--line)
}

.gallery-tile img{
  width:100%;
  height:100%;
  min-height:290px;
  object-fit:cover;
  transition:.5s
}

.gallery-tile:hover img{
  transform:scale(1.05)
}

.gallery-overlay{
  position:absolute;
  inset:auto 0 0;
  padding:45px 22px 20px;
  background:linear-gradient(
    transparent,
    rgba(0,0,0,.85)
  )
}

/* =========================
   DAYCO3D
========================= */

.dayco-card{
  min-height:320px;
  border:1px dashed rgba(240,138,0,.45);
  background:#0f0f0f;
  border-radius:22px;
  overflow:hidden;
  position:relative
}

.dayco-card .slot{
  height:100%;
  min-height:320px
}

.dayco-card img{
  width:100%;
  height:100%;
  object-fit:cover
}

.dayco-card .placeholder{
  height:100%;
  min-height:320px
}

/* =========================
   CONTACT
========================= */

.contact-card{
  border:1px solid rgba(0,0,0,.1);
  border-radius:22px;
  background:#fff;
  padding:30px;
  height:100%
}

.form-control,
.form-select{
  background:#111;
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  border-radius:12px;
  padding:13px 15px
}

.form-control:focus{
  background:#111;
  color:#fff;
  border-color:var(--orange);
  box-shadow:0 0 0 .2rem rgba(240,138,0,.12)
}

/* =========================
   FOOTER
========================= */

footer{
  background:#050505;
  border-top:1px solid rgba(240,138,0,.18);
  padding:55px 0 25px
}

.footer-logo{
  width:100px;
  height:70px;
  object-fit:contain
}

.footer-link{
  color:#9d9d9d;
  display:block;
  margin:8px 0
}

.footer-link:hover{
  color:var(--orange)
}

/* =========================
   STATS
========================= */

.stat{
  border-left:1px solid rgba(240,138,0,.4);
  padding-left:20px
}

.stat strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:2.3rem;
  color:var(--orange)
}

/* =========================
   ANIMATION
========================= */

.reveal{
  opacity:0;
  transform:translateY(25px);
  transition:opacity .7s,transform .7s
}

.reveal.show{
  opacity:1;
  transform:none
}

/* =========================
   LOGO
========================= */

.logo-wordmark{
  font-size:.78rem;
  letter-spacing:.12em;
  color:#fff;
  font-weight:700;
  line-height:1.1
}

.logo-wordmark span{
  color:var(--orange)
}

/* =========================
   WHATSAPP
========================= */

.floating-wa{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#25D366;
  color:#fff;
  z-index:9999;
  box-shadow:0 12px 35px rgba(0,0,0,.35);
  font-size:28px;
  transition:.25s
}

.floating-wa:hover{
  transform:translateY(-4px) scale(1.04);
  color:#fff
}

/* =========================
   PHOTO
========================= */

.photo-hero{
  min-height:520px;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.08)
}

.photo-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.82),
    rgba(0,0,0,.18)
  )
}

.photo-hero>*{
  position:relative;
  z-index:1
}

.real-img{
  width:100%;
  height:100%;
  object-fit:cover
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px){

  .navbar{
    padding:14px 0;
  }

  .navbar-brand img{
    width:160px !important;
    height:110px !important;
  }

  .hero{
    padding-top:180px !important;
  }

  .page-hero{
    padding:190px 0 70px !important;
  }

  .hero-ring{
    width:420px;
    height:420px;
    right:-180px;
    opacity:.5
  }

}

@media(max-width:575px){

  .navbar-brand img{
    width:140px !important;
    height:98px !important;
  }

  .section{
    padding:75px 0
  }

  .hero{
    min-height:80vh;
    padding-top:160px !important;
  }

  .page-hero{
    padding:170px 0 60px !important;
  }

  .display-title{
    font-size:3.2rem
  }

}