/* ==========================================================================
   FLOREX ENTERPRISES — Google Ads Landing Page
   Table of Contents:
   1. Variables & Reset
   2. Base / Typography
   3. Layout Helpers
   4. Buttons
   5. Header
   6. Hero + Lead Form
   7. Why Choose (USP)
   8. Flooring Solutions (Services)
   9. Real Projects
   10. Simple Process
   11. Testimonials
   12. FAQ Accordion
   13. Final CTA
   14. Footer
   15. Floating Buttons / Back to Top
   16. Animations
   17. Responsive
   ========================================================================== */

/* ---------- 1. Variables & Reset ---------- */
:root{
  --navy:#071B45;
  --navy-light:#122a63;
  --red:#D71920;
  --red-dark:#b3141a;
  --bg:#FFFFFF;
  --bg-light:#F8F9FC;
  --text:#222222;
  --text-muted:#5b6478;
  --border:#EAEAEA;
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --shadow-sm:0 4px 16px rgba(7,27,69,0.06);
  --shadow-md:0 12px 32px rgba(7,27,69,0.10);
  --shadow-lg:0 24px 60px rgba(7,27,69,0.16);
  --font-head:'Plus Jakarta Sans', 'Manrope', sans-serif;
  --font-body:'Manrope', 'Plus Jakarta Sans', sans-serif;
  --container:1200px;
  --transition:0.35s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* No overflow-x:hidden on html/body — it turns the root into a scroll
   container, which stops position:fixed elements (header, floating
   buttons) tracking the viewport correctly while the page scrolls. */
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  overflow-wrap:break-word;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-head); color:var(--navy); line-height:1.2; font-weight:700; }

/* ---------- 2. Base / Typography ---------- */
.section-eyebrow{
  display:inline-block;
  color:var(--red);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:0.8rem;
  margin-bottom:14px;
}
.section-title{
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  margin-bottom:0;
  letter-spacing:-0.01em;
}
.section-head{
  max-width:760px;
  margin:0 auto 52px;
  text-align:center;
}

/* ---------- 3. Layout Helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
section{ padding:90px 0; }

/* ---------- 4. Buttons ---------- */
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 32px;
  border-radius:100px;
  font-weight:700;
  font-size:0.95rem;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space:nowrap;
}
.btn--primary{
  background:var(--red);
  color:#fff;
  box-shadow:0 10px 24px rgba(215,25,32,0.28);
}
.btn--primary:hover{ background:var(--red-dark); transform:translateY(-3px); box-shadow:0 16px 32px rgba(215,25,32,0.36); }
.btn--outline{
  border:1.5px solid rgba(255,255,255,0.5);
  color:#fff;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
}
.btn--outline:hover{ background:#fff; color:var(--navy); transform:translateY(-3px); }
.btn--outline-light{
  border:1.5px solid rgba(255,255,255,0.6);
  color:#fff;
}
.btn--outline-light:hover{ background:#fff; color:var(--navy); transform:translateY(-3px); }
.btn--lg{ padding:17px 38px; font-size:1rem; }
.btn--sm{ padding:11px 22px; font-size:0.85rem; }

.ripple{ position:relative; overflow:hidden; }
.ripple-circle{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.55);
  transform:scale(0);
  animation:rippleAnim 0.6s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- 5. Header ---------- */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:#FFFFFF;
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--transition);
}
.header.scrolled{ box-shadow:var(--shadow-sm); }
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:14px;
  padding-bottom:14px;
}
.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; line-height:0; }
.logo__img{
  display:block;
  height:52px;
  width:auto;
  max-width:none;
  object-fit:contain;
}
.logo__img--footer{
  height:52px;
  background:#fff;
  padding:12px 18px;
  border-radius:var(--radius-sm);
}
.header__actions{ display:flex; align-items:center; gap:16px; }
.header__call{
  display:flex; align-items:center; gap:8px;
  font-weight:700;
  font-size:0.92rem;
  color:var(--navy);
}
.header__call svg{ color:var(--red); flex-shrink:0; }
.header__call:hover{ color:var(--red); }

/* ---------- 6. Hero + Lead Form ---------- */
.hero{
  position:relative;
  padding-top:140px;
  padding-bottom:80px;
  overflow:hidden;
  color:#fff;
}
.hero__bg{ position:absolute; inset: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(120deg, rgba(7,27,69,0.94) 10%, rgba(7,27,69,0.86) 45%, rgba(7,27,69,0.7) 100%);
}
.hero__edge{
  position:absolute;
  z-index:2;
  left:0; right:0; bottom:-1px;
  height:56px;
  background:var(--bg-light);
  clip-path:polygon(0 100%, 100% 100%, 100% 40%, 0 100%);
}
.hero__grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:start;
}
.eyebrow{
  display:inline-block;
  padding:8px 18px;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:100px;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.05em;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(6px);
  margin-bottom:22px;
}
.hero__title{
  font-size:clamp(2rem, 4.2vw, 3.2rem);
  color:#fff;
  margin-bottom:18px;
  letter-spacing:-0.02em;
}
.hero__subtitle{
  font-size:1.1rem;
  color:rgba(255,255,255,0.85);
  max-width:520px;
  margin-bottom:26px;
}
.hero__trust{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  margin-bottom:32px;
}
.hero__trust li{
  display:flex; align-items:center; gap:8px;
  font-weight:600;
  font-size:0.9rem;
  color:#fff;
}
.hero__trust svg{ color:var(--red); background:#fff; border-radius:50%; padding:2px; flex-shrink:0; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.hero__phone{ font-weight:700; font-size:1rem; color:#fff; }

.lead-form-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:36px;
}
.lead-form-card h2{ font-size:1.5rem; margin-bottom:6px; }
.lead-form-card > p{ color:var(--text-muted); margin-bottom:22px; font-size:0.95rem; }
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 14px;
}
.form-group{ margin-bottom:14px; }
.form-group label{
  display:block;
  font-size:0.82rem;
  font-weight:600;
  color:var(--navy);
  margin-bottom:5px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:11px 14px;
  line-height:1.3;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:0.92rem;
  color:var(--text);
  background:#fff;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 4px rgba(215,25,32,0.1);
}
.form-group textarea{ resize:vertical; }
.lead-form-card .btn{ width:100%; margin-top:6px; }
/* form-note keeps a small reserved height so the success/error message
   doesn't shift the layout when it appears — but that reserved space
   showed up as unwanted empty air between the button and the privacy
   line when the form is untouched. Kept just tall enough to avoid the
   jump, not tall enough to look like a gap. */
.form-note{ margin-top:4px; font-weight:600; font-size:0.85rem; color:var(--navy); min-height:0.2em; }
.form-note:empty{ margin-top:0; }
.form-privacy{ margin-top:6px; font-size:0.8rem; color:var(--text-muted); text-align:center; }
.form-hp{
  position:absolute;
  width:1px; height:1px;
  clip-path:inset(50%);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
}

/* ---------- 7. Why Choose (USP) ---------- */
.usp{ background:var(--bg-light); }
.usp__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.usp-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px 26px;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.usp-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--red); }
.usp-card__icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--bg-light);
  color:var(--red);
  margin-bottom:18px;
  transition:background var(--transition), color var(--transition);
}
.usp-card:hover .usp-card__icon{ background:var(--red); color:#fff; }
.usp-card__icon svg{ width:24px; height:24px; }
.usp-card h3{ font-size:1.1rem; margin-bottom:8px; }
.usp-card p{ color:var(--text-muted); font-size:0.92rem; }

/* ---------- 8. Flooring Solutions (Services) ---------- */
.services__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.service-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.service-card::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--red);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--transition);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.service-card:hover::before{ transform:scaleY(1); }
.service-card__body{ padding:32px 28px; }
.service-card__icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:14px;
  background:var(--bg-light);
  color:var(--navy);
  margin-bottom:18px;
  transition:background var(--transition), color var(--transition);
}
.service-card:hover .service-card__icon{ background:var(--navy); color:#fff; }
.service-card__icon svg{ width:24px; height:24px; }
.service-card h3{ font-size:1.1rem; margin-bottom:8px; }
.service-card p{ color:var(--text-muted); font-size:0.92rem; }

/* ---------- 9. Real Projects ---------- */
.projects{ background:var(--bg-light); }
.projects__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.project-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  aspect-ratio:4/5;
  box-shadow:var(--shadow-sm);
}
.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--transition);
}
.project-card:hover img{ transform:scale(1.06); }
.project-card figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px 18px;
  background:linear-gradient(to top, rgba(7,27,69,0.9), rgba(7,27,69,0));
  color:#fff;
}
.project-card figcaption strong{ display:block; font-size:0.98rem; margin-bottom:2px; }
.project-card figcaption span{ font-size:0.8rem; color:rgba(255,255,255,0.8); }

/* ---------- 10. Simple Process ---------- */
.process__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
}
.process-step{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:30px 24px;
  text-align:center;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.process-step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--red); }
.process-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.05rem;
}
.process-step h3{ font-size:1rem; }

/* ---------- 11. Testimonials ---------- */
.testimonials{ background:var(--bg-light); }
.testi-slider{ position:relative; overflow:hidden; max-width:720px; margin:0 auto; }
.testi-track{ display:flex; transition:transform 0.5s cubic-bezier(.4,0,.2,1); }
.testi-slide{
  min-width:100%;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:40px;
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.testi-stars{ color:var(--red); font-size:1.1rem; letter-spacing:3px; margin-bottom:18px; }
.testi-quote{ font-size:1.08rem; color:var(--navy); font-style:italic; line-height:1.7; margin-bottom:22px; }
.testi-author strong{ display:block; font-size:1rem; color:var(--navy); }
.testi-author span{ font-size:0.85rem; color:var(--text-muted); }
.testi-dots{ display:flex; justify-content:center; gap:10px; margin-top:26px; }
.testi-dots button{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--border);
  transition:background var(--transition), transform var(--transition);
}
.testi-dots button.active{ background:var(--red); transform:scale(1.2); }

/* ---------- 12. FAQ Accordion ---------- */
.accordion{ max-width:800px; margin:0 auto; }
.accordion__item{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:14px;
  overflow:hidden;
}
.accordion__header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  text-align:left;
  font-weight:700;
  font-size:1rem;
  color:var(--navy);
}
.accordion__header svg{
  flex-shrink:0;
  color:var(--red);
  transition:transform var(--transition);
}
.accordion__header[aria-expanded="true"] svg{ transform:rotate(180deg); }
.accordion__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--transition);
}
.accordion__panel p{
  padding:0 24px 20px;
  color:var(--text-muted);
  font-size:0.95rem;
  line-height:1.7;
}
.accordion__panel a{ color:var(--red); font-weight:600; }

/* ---------- 13. Final CTA ---------- */
.final-cta{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%);
  color:#fff;
  text-align:center;
}
.final-cta__inner{ max-width:720px; margin:0 auto; }
.final-cta h2{ color:#fff; font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px; }
.final-cta p{ color:rgba(255,255,255,0.8); font-size:1.05rem; margin-bottom:30px; }
.final-cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

/* ---------- 14. Footer ---------- */
.footer{ background:var(--navy); color:rgba(255,255,255,0.75); }
.footer__grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:56px;
  padding-top:70px;
  padding-bottom:50px;
}
.footer__col p{ font-size:0.9rem; margin:16px 0 20px; line-height:1.7; }
.footer__col h4{ color:#fff; margin-bottom:20px; font-size:1rem; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  transition:background var(--transition), transform var(--transition);
}
.footer__social a svg{ display:block; }
.footer__social a:hover{ background:var(--red); transform:translateY(-3px); }

.footer__contact li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
  line-height:1.6;
}
.footer__contact-icon{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  margin-top:1px;
}
.footer__contact-text{ display:flex; flex-direction:column; gap:2px; }
.footer__contact-label{
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.03em;
  color:rgba(255,255,255,0.55);
}
.footer__contact-text a,
.footer__contact-text > span:last-child{
  font-weight:700;
  font-size:0.92rem;
  color:#fff;
}
.footer__contact-text a:hover{ color:var(--red); }

.footer__bottom{ border-top:1px solid rgba(255,255,255,0.1); padding:22px 0; }
.footer__bottom-inner{ text-align:center; font-size:0.85rem; }

/* ---------- 15. Floating Buttons / Back to Top ---------- */
.scroll-progress{
  position:fixed; top:0; left:0;
  height:3px;
  width:0%;
  background:var(--red);
  z-index:1100;
}
.float-btn{
  position:fixed;
  z-index:900;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  box-shadow:var(--shadow-md);
  transition:transform var(--transition), box-shadow var(--transition),
             opacity var(--transition), visibility var(--transition);
}
/* Hidden until JS reveals them past the hero, so they never sit on top
   of the hero's own buttons. Gated on .js so they stay visible if JS
   ever fails. */
.js .float-btn{ opacity:0; visibility:hidden; pointer-events:none; }
.js .float-btn.show{ opacity:1; visibility:visible; pointer-events:auto; }
.float-btn--whatsapp{
  bottom:24px; left:24px;
  width:58px; height:58px;
  background:#25D366;
  color:#fff;
}
.float-btn--call{
  bottom:96px; left:24px;
  width:52px; height:52px;
  background:var(--navy);
  color:#fff;
}
.float-btn:hover{ transform:scale(1.08); }

.back-to-top{
  position:fixed;
  bottom:96px; right:24px;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
  z-index:900;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--red); }

/* ---------- 16. Animations ---------- */
.fade-up, .fade-left, .fade-right{ opacity:1; transform:none; }
.js .fade-up:not(.in-view){ opacity:0; transform:translateY(34px); }
.js .fade-left:not(.in-view){ opacity:0; transform:translateX(-34px); }
.js .fade-right:not(.in-view){ opacity:0; transform:translateX(34px); }
.fade-up.in-view, .fade-left.in-view, .fade-right.in-view{
  opacity:1; transform:translate(0,0);
  transition:opacity 0.7s ease var(--d, 0s), transform 0.7s cubic-bezier(.2,.7,.3,1) var(--d, 0s);
}

/* ---------- 17. Responsive ---------- */
@media (max-width:1100px){
  .usp__grid, .services__grid{ grid-template-columns:repeat(2, 1fr); }
  .projects__grid{ grid-template-columns:repeat(2, 1fr); }
  .process__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .lead-form-card{ max-width:520px; }
  .header__call span{ display:none; }
}

@media (max-width:768px){
  section{ padding:64px 0; }
  .header__inner{ padding-top:12px; padding-bottom:12px; }
  .logo__img{ height:40px; }
  .hero{ padding-top:100px; padding-bottom:56px; }
  .hero__title{ margin-bottom:14px; }
  /* Force the eyebrow badge onto a single line on mobile instead of
     wrapping. Font-size scales down with the viewport (clamp) so the
     full phrase fits in one row on every phone; white-space:nowrap +
     text-overflow:ellipsis is a safety net in case any device is
     narrower than expected, so the worst case is a graceful "…"
     truncation rather than wrapping or overflowing the pill. */
  .eyebrow{
    display:block;
    width:max-content;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-radius:999px;
    font-size:clamp(0.62rem, 3.1vw, 0.8rem);
    letter-spacing:0.01em;
    line-height:1.4;
    padding:9px 14px;
  }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ justify-content:center; }
  .lead-form-card{ padding:28px 22px; max-width:100%; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .usp__grid, .services__grid, .process__grid{ grid-template-columns:1fr; }
  .projects__grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .final-cta__actions{ flex-direction:column; align-items:stretch; }
  .footer__grid{ grid-template-columns:1fr; padding-top:56px; padding-bottom:36px; gap:40px; }
  .logo__img--footer{
    height:auto;
    width:min(85vw, 320px);
    padding:16px 22px;
  }
}

@media (max-width:520px){
  .projects__grid{ grid-template-columns:1fr; }
  .float-btn--whatsapp{ bottom:24px; left:auto; right:20px; width:52px; height:52px; }
  .float-btn--call{ bottom:84px; left:auto; right:20px; width:48px; height:48px; }
  .back-to-top{ display:none; }
}