/* ============ TOKENS ============ */
:root{
  --gold:#E8B10A; --orange:#F4A300; --charcoal:#1C1C1C; --white:#FAFAFA;
  --cream:#F8F4EE; --grey:#6F6F6F; --ink:#141414;
  --glass:rgba(255,255,255,.055); --glass-brd:rgba(255,255,255,.10);
  --ease:cubic-bezier(.16,1,.3,1);
  --bs-primary:#E8B10A;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  font-family:'Inter',sans-serif; background:var(--charcoal); color:var(--white);
  overflow-x:hidden; line-height:1.7; letter-spacing:.1px; cursor:none;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
::selection{ background:var(--gold); color:var(--charcoal); }
h1,h2,h3,h4,.navbar-brand{ font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-.03em; line-height:1.05; }
em{ font-style:normal; color:var(--gold); }

/* subtle grain */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ LOADER ============ */
.loader{ position:fixed; inset:0; z-index:10000; background:var(--charcoal); display:grid; place-items:center; transition:opacity .6s var(--ease),visibility .6s; }
.loader.hide{ opacity:0; visibility:hidden; }
.loader__brand{ font-family:'Poppins'; font-weight:800; font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:.05em; color:var(--white); }
.loader__brand span{ color:var(--gold); }
.loader__bar{ width:220px; height:2px; background:rgba(255,255,255,.12); margin:1.4rem auto 0; overflow:hidden; border-radius:2px; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--gold); }

/* ============ CURSOR ============ */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:10001; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-dot{ width:6px; height:6px; background:var(--gold); }
.cursor-ring{ width:38px; height:38px; border:1px solid rgba(255,255,255,.6); transition:width .3s var(--ease),height .3s var(--ease),background .3s; }
.cursor-ring.hovering{ width:64px; height:64px; background:rgba(232,177,10,.12); border-color:var(--gold); }
@media (max-width:991px){ .cursor-dot,.cursor-ring{ display:none; } body{ cursor:auto; } }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--gold),var(--orange)); z-index:9999; }

/* ============ ORBS ============ */
.bg-orbs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.16; }
.orb--gold{ width:520px; height:520px; background:var(--gold); top:-140px; right:-120px; animation:float1 16s var(--ease) infinite; }
.orb--orange{ width:420px; height:420px; background:var(--orange); bottom:-120px; left:-100px; animation:float2 20s var(--ease) infinite; }
@keyframes float1{ 50%{ transform:translate(-60px,80px) scale(1.15);} }
@keyframes float2{ 50%{ transform:translate(80px,-60px) scale(1.1);} }

/* ============ GLASS + BUTTONS ============ */
.glass{ background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-brd); border-radius:24px; box-shadow:0 24px 64px -18px rgba(0,0,0,.55); }
.btn{ font-weight:600; border-radius:50px; padding:.85rem 1.8rem; letter-spacing:.02em; border:none; transition:transform .5s var(--ease),background-color .4s,color .4s,box-shadow .5s var(--ease); position:relative; }
.btn-lg{ padding:1rem 2.2rem; }
.btn-gold{ background:var(--gold); color:var(--charcoal); box-shadow:0 12px 30px -8px rgba(232,177,10,.5); }
.btn-gold:hover{ background:var(--orange); color:var(--charcoal); transform:translateY(-3px) scale(1.03); }
.btn-ghost{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.35); }
.btn-ghost:hover{ background:var(--white); color:var(--charcoal); transform:translateY(-3px); }
.btn i{ transition:transform .4s var(--ease); }
.btn:hover i{ transform:translateX(4px); }

.badge-pill,.warranty{ display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--gold); background:rgba(232,177,10,.12); border:1px solid rgba(232,177,10,.4); border-radius:50px; padding:.5rem 1rem; }

/* ============ NAVBAR ============ */
.site-nav{     width: 100%;
    padding: 1rem 0;
    transition: padding .4s var(--ease), background-color .4s, box-shadow .4s;
    z-index: 1000;
    background: #00000059; }
.site-nav.scrolled{ padding:.7rem 0; background:rgba(20,20,20,.72); backdrop-filter:blur(18px); box-shadow:0 8px 30px rgba(0,0,0,.35); border-bottom:1px solid rgba(255,255,255,.06); }
.navbar-brand{ font-size:1.4rem; letter-spacing:.04em; color:var(--white)!important; }
.navbar-brand span{ color:var(--gold); }
.site-nav .nav-link{ color:rgba(255,255,255,.8)!important; font-family:'Inter'; font-weight:500; font-size:.95rem; margin:0 .35rem; position:relative; padding:.4rem .2rem!important; transition:color .3s; }
.site-nav .nav-link::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--gold); transition:width .4s var(--ease); }
.site-nav .nav-link:hover{ color:#fff!important; }
.site-nav .nav-link:hover::after{ width:100%; }
.navbar-toggler{ border:none; color:var(--gold); font-size:1.6rem; box-shadow:none!important; }
@media (max-width:991px){ .navbar-collapse{ background:rgba(20,20,20,.96); margin-top:1rem; border-radius:20px; padding:1.2rem; border:1px solid rgba(255,255,255,.08);} .site-nav .btn{ margin-top:.6rem; display:inline-block; } }

/* ============ HERO ============ */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:-8% 0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.72) 45%,rgba(20,20,20,.4) 100%); }
.hero__content{ position:relative; z-index:2; max-width:900px; padding-top:85px; }
.hero__title{ font-size:clamp(2.9rem,8vw,6.2rem); margin:1.6rem 0; }
.hero__title .line{ display:block; overflow:hidden; }
/* .hero__title .line>span{ display:block; transform:translateY(110%); } */
.hero__sub{ font-size:clamp(1.05rem,2vw,1.35rem); color:rgba(255,255,255,.82); max-width:600px; margin-bottom:2.4rem; font-weight:300; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__scroll{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.7); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.mouse{ width:24px; height:38px; border:1px solid rgba(255,255,255,.5); border-radius:14px; position:relative; }
.mouse::after{ content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--gold); border-radius:2px; animation:scrolldot 1.6s var(--ease) infinite; }
@keyframes scrolldot{ 50%{ transform:translate(-50%,10px); opacity:.3; } }

/* ============ MARQUEE ============ */
.marquee{
  background:var(--gold);
  color:var(--charcoal);
  padding:1.1rem 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex;
  gap:2.2rem;
  align-items:center;
  width:max-content;               /* FIX: let the track size to its real (doubled) content instead of shrinking to the container width */
  animation:marquee 26s linear infinite;
  will-change:transform;
  font-family:'Poppins';
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.02em;
}
.marquee__track .dot{ opacity:.5; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Removed the old ".marquee:hover .marquee__track{ animation-play-state:paused; }" rule
   — it made the strip look "broken" any time the cursor rested over it. */

/* ============ SECTIONS ============ */
.section{ position:relative; z-index:1; padding:clamp(80px,12vw,150px) 0; }
.eyebrow{ display:inline-block; font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:1.1rem; }
.eyebrow--dark{ color:var(--orange); }
.section__title{ font-size:clamp(2.1rem,5vw,4rem); margin-bottom:1.4rem; }
.section__title--dark{ color:var(--charcoal); }
.section__head{ max-width:760px; margin-bottom:3.5rem; }
.lead-txt{ color:rgba(255,255,255,.72); font-size:1.1rem; font-weight:300; max-width:560px; }
.section__head .lead-txt.mx-auto{ margin-left:0; }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(40px); }

/* ============ STATS ============ */
.stats{ margin-top:-70px; position:relative; z-index:3; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); padding:2.6rem 2rem; }
.stat{ text-align:center; padding:1rem; border-right:1px solid rgba(255,255,255,.08); }
.stat:last-child{ border-right:none; }
.stat__num{ font-family:'Poppins'; font-weight:800; font-size:clamp(2.2rem,4vw,3.4rem); color:var(--gold); line-height:1; }
.stat__label{ color:rgba(255,255,255,.7); font-size:.9rem; margin-top:.5rem; letter-spacing:.03em; }
@media (max-width:767px){ .stats__grid{ grid-template-columns:repeat(2,1fr); gap:1rem; } .stat{ border-right:none; } }

/* ============ ABOUT ============ */
.about__img{ position:relative; border-radius:28px; overflow:hidden; }
.about__img img{ width:100%; height:560px; object-fit:cover; transition:transform 1.1s var(--ease); }
.about__img:hover img{ transform:scale(1.05); }
.about__badge{ position:absolute; bottom:1.4rem; left:1.4rem; right:1.4rem; display:flex; align-items:center; gap:1rem; padding:1.1rem 1.3rem; }
.about__badge-num{ font-family:'Poppins'; font-weight:800; font-size:1.6rem; color:var(--gold); }
.about__badge-txt{ font-size:.9rem; color:rgba(255,255,255,.85); }
.mini-card{ padding:1.6rem; height:100%; transition:transform .5s var(--ease); }
.mini-card:hover{ transform:translateY(-6px); }
.mini-card i{ font-size:1.8rem; color:var(--gold); }
.mini-card h3{ font-size:1.15rem; margin:.7rem 0 .4rem; }
.mini-card p{ font-size:.92rem; color:rgba(255,255,255,.7); margin:0; }

/* timeline */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:5rem; position:relative; }
.timeline::before{ content:''; position:absolute; top:9px; left:0; right:0; height:1px; background:rgba(255,255,255,.12); }
.timeline__item{ position:relative; padding-top:2.4rem; }
.timeline__item::before{ content:''; position:absolute; top:2px; left:0; width:16px; height:16px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(232,177,10,.15); }
.timeline__year{ color:var(--gold); font-family:'Poppins'; font-weight:700; font-size:.95rem; }
.timeline__item h4{ font-size:1.15rem; margin:.4rem 0; }
.timeline__item p{ font-size:.88rem; color:rgba(255,255,255,.65); }
@media (max-width:767px){ .timeline{ grid-template-columns:1fr 1fr; } }

/* ============ PRODUCTS ============ */
.p-card{ position:relative; height:100%; border-radius:26px; overflow:hidden; background:var(--glass); border:1px solid var(--glass-brd); transition:transform .6s var(--ease),box-shadow .6s var(--ease); }
.p-card:hover{ transform:translateY(-12px); box-shadow:0 40px 70px -24px rgba(0,0,0,.7); }
.p-card__img{ position:relative; height:260px; overflow:hidden; }
.p-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.p-card:hover .p-card__img img{ transform:scale(1.08); }
.p-card__img .warranty{ position:absolute; top:1rem; left:1rem; background:rgba(20,20,20,.7); backdrop-filter:blur(8px); }
.p-card__body{ padding:1.8rem; }
.p-card__body h3{ font-size:1.4rem; margin-bottom:.5rem; }
.p-card__desc{ font-size:.92rem; color:rgba(255,255,255,.7); margin-bottom:1.1rem; }
.p-spec{ display:flex; justify-content:space-between; font-size:.82rem; padding:.5rem 0; border-top:1px solid rgba(255,255,255,.08); }
.p-spec span:first-child{ color:rgba(255,255,255,.5); }
.p-spec span:last-child{ color:#fff; font-weight:500; text-align:right; }
.p-feat{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.p-feat span{ font-size:.72rem; padding:.3rem .7rem; border-radius:50px; background:rgba(232,177,10,.1); color:var(--gold); border:1px solid rgba(232,177,10,.25); }
.p-card .btn{ margin-top:.6rem; }

/* ============ WHY (light) ============ */
.why{ background:var(--cream); color:var(--charcoal); }
.why .lead-txt{ color:var(--grey); }
.why-card{ background:#fff; border-radius:22px; padding:2rem 1.6rem; height:100%; border:1px solid rgba(0,0,0,.04); box-shadow:0 14px 40px -22px rgba(0,0,0,.25); transition:transform .5s var(--ease),box-shadow .5s var(--ease); }
.why-card:hover{ transform:translateY(-8px); box-shadow:0 30px 55px -24px rgba(0,0,0,.35); }
.why-card .ic{ width:60px; height:60px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg,var(--gold),var(--orange)); color:#fff; font-size:1.5rem; margin-bottom:1.1rem; }
.why-card h3{ font-size:1.15rem; color:var(--charcoal); margin-bottom:.4rem; }
.why-card p{ font-size:.9rem; color:var(--grey); margin:0; }
.why-card .wc-num{ font-family:'Poppins'; font-weight:800; font-size:1.9rem; color:var(--gold); }

/* ============ PROCESS ============ */
.proc{ position:relative; }
.proc__row{ display:grid; grid-template-columns:100px 1fr 1fr; gap:2.5rem; align-items:center; padding:3rem 0; border-top:1px solid rgba(255,255,255,.1); }
.proc__row:last-child{ border-bottom:1px solid rgba(255,255,255,.1); }
.proc__num{ font-family:'Poppins'; font-weight:800; font-size:2.6rem; color:rgba(255,255,255,.14); transition:color .5s; }
.proc__row:hover .proc__num{ color:var(--gold); }
.proc__info h3{ font-size:1.7rem; margin-bottom:.4rem; }
.proc__info p{ color:rgba(255,255,255,.65); font-size:.95rem; margin:0; }
.proc__img{ height:180px; border-radius:18px; overflow:hidden; }
.proc__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.proc__row:hover .proc__img img{ transform:scale(1.07); }
@media (max-width:767px){ .proc__row{ grid-template-columns:60px 1fr; } .proc__img{ display:none; } .proc__num{ font-size:1.8rem;} }

/* ============ GALLERY ============ */
.masonry{ column-count:3; column-gap:20px; }
.masonry img{ width:100%; margin-bottom:20px; border-radius:18px; cursor:pointer; transition:transform .7s var(--ease),filter .5s; filter:saturate(.92); }
.masonry img:hover{ transform:scale(1.02); filter:saturate(1.1); }
@media (max-width:991px){ .masonry{ column-count:2; } }
@media (max-width:575px){ .masonry{ column-count:1; } }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:10002; background:rgba(10,10,10,.94); display:none; place-items:center; padding:4vw; }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:90vw; max-height:86vh; border-radius:14px; }
.lightbox__close{ position:absolute; top:1.4rem; right:1.4rem; background:none; border:none; color:#fff; font-size:1.6rem; cursor:none; }

/* ============ TESTIMONIALS (light) ============ */
.testimonials{ background:var(--cream); color:var(--charcoal); }
#reviewCarousel{ max-width:860px; margin:0 auto; }
.review{ text-align:center; padding:1rem 2rem 4rem; }
.review__stars{ color:var(--gold); font-size:1.1rem; margin-bottom:1.4rem; }
.review__quote{ font-family:'Poppins'; font-weight:600; font-size:clamp(1.3rem,3vw,2rem); line-height:1.4; color:var(--charcoal); letter-spacing:-.02em; margin-bottom:1.8rem; }
.review__who{ display:flex; align-items:center; justify-content:center; gap:.9rem; }
.review__av{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--orange)); color:#fff; display:grid; place-items:center; font-family:'Poppins'; font-weight:700; }
.review__name{ font-weight:600; color:var(--charcoal); }
.review__role{ font-size:.85rem; color:var(--grey); }
.carousel-control-prev,.carousel-control-next{ width:52px; height:52px; top:auto; bottom:0; background:#fff; border-radius:50%; box-shadow:0 10px 26px -10px rgba(0,0,0,.35); color:var(--charcoal); font-size:1.5rem; opacity:1; display:grid; place-items:center; }
.carousel-control-prev{ left:38%; } .carousel-control-next{ right:38%; }
@media (max-width:575px){ .carousel-control-prev{ left:30%;} .carousel-control-next{ right:30%;} }

/* ============ FAQ ============ */
.accordion-item{ background:var(--glass); border:1px solid var(--glass-brd)!important; border-radius:18px!important; margin-bottom:1rem; overflow:hidden; }
.accordion-button{ background:transparent!important; color:#fff!important; font-family:'Poppins'; font-weight:600; font-size:1.05rem; box-shadow:none!important; padding:1.3rem 1.5rem; }
.accordion-button:not(.collapsed){ color:var(--gold)!important; }
.accordion-button::after{ filter:invert(70%) sepia(80%) saturate(600%) hue-rotate(2deg); }
.accordion-body{ color:rgba(255,255,255,.7); font-size:.95rem; padding-top:0; }

/* ============ CONTACT ============ */
.contact__list{ list-style:none; padding:0; margin:2rem 0; }
.contact__list li{ display:flex; gap:1rem; margin-bottom:1.3rem; align-items:flex-start; }
.contact__list i{ color:var(--gold); font-size:1.3rem; margin-top:.2rem; }
.contact__list strong{ display:block; font-family:'Poppins'; font-size:.95rem; }
.contact__list span{ color:rgba(255,255,255,.7); font-size:.92rem; }
.contact__list a{ color:rgba(255,255,255,.7); transition:color .3s; }
.contact__list a:hover{ color:var(--gold); }
.map{ overflow:hidden; height:230px; padding:6px; }
.map iframe{ width:100%; height:100%; border:0; border-radius:18px; filter:grayscale(.3) contrast(1.05); }
.contact__form{ padding:2.4rem; position:relative; }
.contact__form label{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:.4rem; display:block; }
.contact__form input,.contact__form select,.contact__form textarea{ width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#fff; padding:.85rem 1rem; font-size:.95rem; outline:none; transition:border-color .3s,background-color .3s; }
.contact__form input::placeholder,.contact__form textarea::placeholder{ color:rgba(255,255,255,.35); }
.contact__form input:focus,.contact__form select:focus,.contact__form textarea:focus{ border-color:var(--gold); background:rgba(232,177,10,.06); }
.contact__form select option{ background:var(--charcoal); }
.contact__form .err{ color:#ff8a80; font-size:.78rem; min-height:1rem; display:block; margin-top:.2rem; }
.form-success{ position:absolute; inset:0; background:rgba(20,20,20,.97); backdrop-filter:blur(10px); border-radius:24px; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; }
.form-success.show{ display:flex; animation:pop .5s var(--ease); }
.form-success i{ font-size:3.5rem; color:var(--gold); margin-bottom:1rem; }
.form-success h3{ font-size:1.6rem; }
.form-success p{ color:rgba(255,255,255,.7); max-width:320px; }
@keyframes pop{ from{ transform:scale(.9); opacity:0; } }

/* ============ FOOTER ============ */
.footer{ background:var(--ink); padding:5rem 0 2rem; position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.06); }
.footer__brand{ font-size:1.6rem; display:inline-block; margin-bottom:1rem; }
.footer p{ color:rgba(255,255,255,.6); font-size:.92rem; }
.footer h4{ font-size:1rem; margin-bottom:1.2rem; color:#fff; }
.footer ul{ list-style:none; padding:0; }
.footer ul li{ margin-bottom:.6rem; }
.footer ul a{ color:rgba(255,255,255,.6); font-size:.92rem; transition:color .3s,padding-left .3s; }
.footer ul a:hover{ color:var(--gold); padding-left:5px; }
.footer__social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer__social a{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.06); color:#fff; transition:transform .4s var(--ease),background-color .3s; }
.footer__social a:hover{ background:var(--gold); color:var(--charcoal); transform:translateY(-4px); }
.footer__news{ display:flex; background:rgba(255,255,255,.06); border-radius:50px; padding:.35rem; margin-top:.6rem; }
.footer__news input{ flex:1; background:none; border:none; outline:none; color:#fff; padding:.6rem 1rem; }
.footer__news button{ width:46px; height:46px; border-radius:50%; border:none; background:var(--gold); color:var(--charcoal); font-size:1.1rem; transition:transform .3s; }
.footer__news button:hover{ transform:scale(1.08); }
.footer__note{ color:var(--gold)!important; font-size:.82rem!important; margin-top:.6rem; }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.45); font-size:.85rem; }

/* ============ FABs ============ */
.fab{ position:fixed; right:1.5rem; z-index:900; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; border:none; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); transition:transform .4s var(--ease),opacity .4s; }
.fab--wa{ bottom:1.5rem; background:#25D366; color:#fff; animation:pulse 2.4s infinite; }
.fab--top{ bottom:5.6rem; background:var(--gold); color:var(--charcoal); opacity:0; pointer-events:none; }
.fab--top.show{ opacity:1; pointer-events:auto; }
.fab:hover{ transform:scale(1.1); }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 50%{ box-shadow:0 0 0 14px rgba(37,211,102,0);} }

/* FIX: keep the marquee moving even when the OS/browser requests reduced motion.
   (Previously "*{ animation:none!important }" here silently killed the marquee too.) */
@media (prefers-reduced-motion:reduce){
  *:not(.marquee__track){ animation:none!important; transition:none!important; }
  [data-reveal]{ opacity:1; transform:none; }
}




/*==================================================
   COMPANY STORY SECTION
==================================================*/

.company-story{
    position:relative;
    padding:120px 0;
    /* background:linear-gradient(180deg,#fff,#faf8f3); */
    overflow:hidden;
}

.company-story::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(194,165,109,.08);
    top:-180px;
    left:-180px;
    filter:blur(20px);
}

.company-story::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(44,57,71,.04);
    bottom:-140px;
    right:-140px;
    filter:blur(25px);
}

/*=====================
 IMAGE
======================*/

.story-image{
    position:relative;
    overflow:hidden;
    border-radius:32px;
}

.story-image img{
    width:100%;
    display:block;
    border-radius:32px;
    transition:.7s ease;
}

.story-image:hover img{
    transform:scale(1.06);
}

/*=====================
 EXPERIENCE CARD
======================*/

.experience-card{
    position:absolute;
    left:30px;
    bottom:30px;
    padding:22px 28px;
    border-radius:22px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.experience-card h2{
    margin:0;
    font-size:3rem;
    font-weight:700;
    color:#C2A56D;
    line-height:1;
}

.experience-card span{
    display:block;
    margin-top:8px;
    color:#555;
    font-size:.95rem;
    font-weight:500;
}

/*=====================
 HEADING
======================*/

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#C2A56D;
    font-weight:600;
    margin-bottom:18px;
}

.section__title{
    font-size:3rem;
    line-height:1.2;
    margin-bottom:25px;
    /* color:#1e293b; */
    font-weight:700;
}

.section__title em{
    font-style:normal;
    color:#C2A56D;
}

.lead-txt{
    font-size:1.1rem;
    color:#555;
    line-height:1.9;
    margin-bottom:20px;
}

.company-story p{
    color:#666;
    line-height:1.9;
}

/*=====================
 FEATURE BOX
======================*/

.feature-box{
    height:100%;
    padding:28px;
    border-radius:24px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.4);
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    transition:.35s ease;
}

.feature-box:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.feature-box i{
    width:68px;
    height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:#C2A56D;
    color:#fff;
    font-size:28px;
    margin-bottom:22px;
}

.feature-box h4{
    margin-bottom:12px;
    color:#23303f;
    font-size:1.25rem;
    font-weight:600;
}

.feature-box p{
    margin:0;
    font-size:.97rem;
    line-height:1.8;
    color:#666;
}

/*=====================
 TABLET
======================*/

@media (max-width:991px){

.company-story{
    padding:90px 0;
}

.section__title{
    font-size:2.35rem;
}

.story-image{
    margin-bottom:50px;
}

.experience-card{
    left:20px;
    bottom:20px;
}

}

/*=====================
 MOBILE
======================*/

@media (max-width:767px){

.company-story{
    padding:70px 0;
}

.section__title{
    font-size:2rem;
}

.lead-txt{
    font-size:1rem;
}

.story-image{
    border-radius:24px;
}

.story-image img{
    border-radius:24px;
}

.experience-card{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:20px;
    text-align:center;
}

.experience-card h2{
    font-size:2.4rem;
}

.feature-box{
    padding:24px;
}

.feature-box i{
    width:60px;
    height:60px;
    font-size:24px;
}

}

/*=====================
 SMALL DEVICES
======================*/

@media (max-width:480px){

.company-story{
    padding:60px 0;
}

.section__title{
    font-size:1.7rem;
}

.feature-box{
    border-radius:20px;
}

.feature-box h4{
    font-size:1.1rem;
}

.feature-box p{
    font-size:.92rem;
}

.experience-card{
    padding:18px;
}

.experience-card h2{
    font-size:2rem;
}

}



.tech-card{
    padding:35px;
    border-radius:24px;
    text-align:center;
    height:100%;
    transition:.4s;
}

.tech-card i{
    font-size:42px;
    color:#D4AF37;
    margin-bottom:20px;
}

.tech-card:hover{
    transform:translateY(-10px);
}

.tech-card h4{
    margin-bottom:15px;
}

.tech-card p{
    color:#777;
    line-height:1.7;
}

.benefit-list{
    margin-top:35px;
}

.benefit-item{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:22px;
    font-size:18px;
    font-weight:500;
}

.benefit-item i{
    color:#D4AF37;
    font-size:22px;
}



.navbar-brand{
    display:flex;
    align-items:center;
    padding:0;
}

.navbar-logo{
    height:58px;
    width:auto;
    display:block;
    transition:.3s ease;
}

.navbar.scrolled .navbar-logo{
    height:50px;
}

.navbar-brand:hover .navbar-logo{
    transform:scale(1.05);
}

@media (max-width:992px){
    .navbar-logo{
        height:46px;
    }
}


@media (max-width: 768px){

    .hero--products{
        min-height: auto;
        padding: 120px 0 70px;
    }

    .hero--products .hero__bg img{
              height:62%;
        object-fit: cover;
        object-position: -3% center;
    }

    .hero--products .hero__content{
        padding: 0 20px;
        text-align: center;
    }

    .hero--products .hero__title{
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero--products .hero__sub{
        font-size: .95rem;
    }

    .hero--products .hero__cta{
        flex-direction: column;
        gap: 15px;
    }

    .hero-highlights{
        grid-template-columns: repeat(2,1fr);
        gap: 12px;
        margin-top: 30px;
 
    }
}


/* ===============================
   CTA SECTION
=================================*/
.cta-section{
    padding:100px 0;
    /* background:linear-gradient(135deg,#0f172a,#1e293b); */
    position:relative;
    overflow:hidden;
}

.cta-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(212,175,55,.15);
    border-radius:50%;
    top:-180px;
    right:-150px;
    filter:blur(70px);
}

.cta-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    bottom:-120px;
    left:-120px;
    filter:blur(60px);
}

/* Glass Card */
.cta-box{
    /* max-width:900px; */
    margin:auto;
    padding:70px 50px;
    border-radius:28px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    position:relative;
    z-index:2;
}

/* Eyebrow */
.eyebrow{
    display:inline-block;
    color:#D4AF37;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
}

/* Heading */
.section__title{
    /* color:#fff; */
    font-size:clamp(2rem,5vw,3.5rem);
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
}

.section__title em{
    color:#D4AF37;
    font-style:normal;
}

/* Paragraph */
.lead-txt{
    max-width:650px;
    color:#d6d6d6;
    font-size:1.1rem;
    line-height:1.8;
}

/* Buttons */
.cta-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:35px;
}

.cta-buttons .btn{
    padding:14px 30px;
    border-radius:50px;
    font-size:1rem;
    font-weight:600;
    transition:.35s;
}

.btn-gold{
    background:#D4AF37;
    color:#111;
    border:none;
}

.btn-gold:hover{
    background:#f0c74b;
    color:#111;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(212,175,55,.35);
}

.btn-outline-light{
    border:2px solid rgba(255,255,255,.4);
    color:#fff;
    background:transparent;
}

.btn-outline-light:hover{
    background:#fff;
    color:#111;
    transform:translateY(-3px);
}

/* Info Section */
.cta-info{
    margin-top:50px;
    display:grid;
    gap:18px;
}

.info-item{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:14px;
    color:#eee;
    font-size:1rem;
}

.info-item i{
    color:#D4AF37;
    font-size:1.2rem;
    margin-top:2px;
}

.info-item a{
    color:#fff;
    text-decoration:none;
}

.info-item a:hover{
    color:#D4AF37;
}

/* Mobile */
@media(max-width:768px){

    .cta-section{
        padding:70px 20px;
    }

    .cta-box{
        padding:45px 25px;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-buttons .btn{
        width:100%;
    }

    .info-item{
        justify-content:flex-start;
        text-align:left;
    }

    .section__title{
        font-size:2rem;
    }

    .lead-txt{
        font-size:1rem;
    }

}

@media(max-width:480px){

    .cta-div{
        padding:0 !important;
    }

    .section__title{
        font-size:1.7rem;
    }

    .lead-txt{
        font-size:.95rem;
    }

}