/* ============================================================
   DCCNL NIGERIA LIMITED — GLOBAL STYLESHEET v3.3
   Full site styles + guaranteed text justification
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --primary-dark:#0a1e30;
  --primary:#0f2f4a;
  --gold:#b8860b;
  --gold-light:#d4a017;
  --gold-gradient:linear-gradient(135deg,#b8860b 0%,#d4a017 50%,#a67c00 100%);
  --text-body:#1e3347;
  --text-muted:#4a6178;
  --bg-light:#f0f4f9;
  --border-light:#d6e0ea;
  --shadow-sm:0 2px 8px rgba(10,30,48,.06);
  --shadow-md:0 8px 24px rgba(10,30,48,.10);
  --radius-md:16px;
  --radius-xl:40px;
  --transition:.35s cubic-bezier(.4,0,.2,1);
  --whatsapp:#25D366;
}

html{scroll-behavior:smooth;font-size:16px}

body{
  background:var(--bg-light);
  color:var(--text-body);
  line-height:1.7;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-align:justify;
}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}
img,video{max-width:100%;height:auto;display:block}

/* ============================================================
   ★ TEXT JUSTIFICATION — FORCED SITE-WIDE ★
   Applies to all body copy: paragraphs, list items, blockquotes,
   captions, description text, form textareas, testimonials,
   footer text, blog articles, product descriptions, etc.
   ============================================================ */
p,
li,
blockquote,
figcaption,
.about-text p,
.about-text li,
.commodity-card .card-desc,
.news-card p,
.testimonial p,
.video-item p,
.gallery-item figcaption,
.article-body p,
.article-body li,
.footer-col p,
.form-group textarea,
.section-sub + p{
  text-align:justify !important;
  text-justify:inter-word !important;
  hyphens:auto !important;
  -webkit-hyphens:auto !important;
  -ms-hyphens:auto !important;
}

/* ============================================================
   NON-JUSTIFIED ELEMENTS — keep these aligned naturally
   (headings, nav, buttons, badges, labels, small UI text)
   ============================================================ */
h1,h2,h3,h4,h5,h6,
.section-title,
.section-tag,
.hero-badge,
.hero-badge-outline,
.nav-desktop a,
.form-btn,
.btn-cta,
.client-name,
.client-industry,
.card-header h3,
.read-more,
.breadcrumbs,
.breadcrumbs a,
.footer-col h4,
.footer-col a,
.footer-copy,
.article-meta,
.news-card h3,
.news-card .news-meta,
.news-card .read-more,
.form-group label,
.form-group .hint,
.form-note,
.form-status,
.video-item h3,
.gallery-item .tag,
.rss-btn,
.testimonial .author,
.testimonial .role{
  text-align:left;
}

/* Centre the main heroes / titles */
.hero h1,
.page-hero h1,
h2.section-title{
  text-align:center;
}
.hero-badges,
.hero-cta{
  text-align:center;
}

/* ============ SKIP LINK ============ */
.skip-link{
  position:absolute;top:-100%;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#fff;padding:8px 20px;border-radius:8px;
  font-weight:600;z-index:9999;transition:top .3s;
}
.skip-link:focus{top:10px}

/* ============ SECTION HEADINGS ============ */
.section-tag{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--gold);background:#f5e7c8;
  padding:4px 16px;border-radius:var(--radius-xl);margin-bottom:10px;
}

h2.section-title{
  font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:800;
  color:var(--primary-dark);margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
}
h2.section-title i{color:var(--gold)}

.section-sub{
  color:var(--text-muted);margin:0 auto 28px;font-size:.95rem;
  border-left:4px solid var(--gold);padding-left:18px;max-width:840px;
  text-align:justify;
}

/* ============ HEADER ============ */
.header{
  background:var(--primary-dark);color:#fff;position:sticky;top:0;z-index:1000;
  border-bottom:2px solid var(--gold);
  box-shadow:0 2px 24px rgba(0,0,0,.25);
}
.header::before{
  content:'';display:block;height:3px;background:var(--gold-gradient);
}
.header-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:12px 0;gap:12px 30px;
}
.brand{
  font-family:'Playfair Display',serif;font-size:2rem;font-weight:900;
  background:var(--gold-gradient);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;
}
.brand span{-webkit-text-fill-color:#b8d4e8;font-weight:300}
.brand-sub{
  font-size:.7rem;font-weight:400;color:#9bb8cc;letter-spacing:1.2px;
  text-transform:uppercase;margin-left:8px;
}
.nav-desktop{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav-desktop a{
  color:#cfdfea;font-size:.8rem;font-weight:500;padding:6px 14px;
  border-radius:var(--radius-xl);transition:var(--transition);
  text-align:left;
}
.nav-desktop a:hover,.nav-desktop a.active{
  color:#fff;background:rgba(184,134,11,.2);
}

/* ============ HERO ============ */
.hero{
  background:linear-gradient(160deg,#dce6f0 0%,#c4d4e4 100%);
  padding:60px 0 50px;border-bottom:1px solid var(--border-light);
  position:relative;
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:var(--gold-gradient);
}
.hero-content{
  max-width:860px;margin:0 auto;text-align:center;
  position:relative;z-index:1;
}
.hero-content h1{
  font-family:'Playfair Display',serif;font-size:2.8rem;font-weight:900;
  color:var(--primary-dark);line-height:1.15;margin-bottom:18px;
  text-align:center;
}
.hero-content h1 i{color:var(--gold);margin-right:8px}
.hero-content p{
  font-size:1.05rem;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);
  padding:20px 26px;border-radius:var(--radius-md);
  border-left:5px solid var(--gold);box-shadow:var(--shadow-sm);
  margin-bottom:20px;
  text-align:justify;
}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;
  margin-bottom:20px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--primary);
  color:#fff;padding:6px 20px 6px 16px;border-radius:var(--radius-xl);
  font-size:.8rem;font-weight:500;box-shadow:var(--shadow-sm);
  text-align:left;
}
.hero-badge i{color:var(--gold-light)}
.hero-badge-outline{
  background:transparent;color:var(--primary-dark);border:1px solid var(--primary);
}
.hero-badge-outline i{color:var(--gold)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{
  background:linear-gradient(160deg,#dce6f0 0%,#c4d4e4 100%);
  padding:60px 0 50px;border-bottom:1px solid var(--border-light);
  position:relative;text-align:center;
}
.page-hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:var(--gold-gradient);
}
.page-hero h1{
  font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:900;
  color:var(--primary-dark);margin-bottom:12px;text-align:center;
}
.page-hero p{
  font-size:1rem;color:var(--text-muted);max-width:760px;margin:0 auto;
  text-align:justify;
}

/* ============ BREADCRUMBS ============ */
.breadcrumbs{
  padding:16px 0;font-size:.8rem;color:var(--text-muted);
  max-width:1280px;margin:0 auto;
  padding-left:24px;padding-right:24px;
  text-align:left;
}
.breadcrumbs a{color:var(--gold);font-weight:500}
.breadcrumbs a:hover{color:var(--gold-light)}
.breadcrumbs span{margin:0 6px}

/* ============ SECTION WRAPPERS ============ */
section{scroll-margin-top:100px}

.about-section,
.commodities,
.news-section,
.order-section,
.content-section,
.clients-section,
.gallery-section{
  background:#fff;padding:56px 0 48px;
  border-bottom:1px solid var(--border-light);
}

.about-text{
  font-size:1rem;line-height:1.85;max-width:900px;margin:0 auto;
}
.about-text p{margin-bottom:16px;text-align:justify}
.about-text li{text-align:justify}
.about-text strong{color:var(--primary)}

/* ============ PRODUCT GRID ============ */
.commodity-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;max-width:1200px;margin:0 auto;
}
.commodity-card{
  background:#fff;border-radius:var(--radius-md);padding:20px 22px;
  border:1px solid var(--border-light);transition:var(--transition);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.commodity-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.commodity-card .card-header{
  display:flex;align-items:center;gap:12px;margin-bottom:6px;
}
.commodity-card .card-header i{
  font-size:1.3rem;color:var(--gold);width:28px;
  text-align:center;flex-shrink:0;
}
.commodity-card .card-header h3{
  font-family:'Playfair Display',serif;font-size:1.05rem;
  font-weight:700;color:var(--primary-dark);text-align:left;
}
.commodity-card .card-header h3 a{color:inherit}
.commodity-card .card-header h3 a:hover{color:var(--gold)}
.commodity-card .card-desc{
  font-size:.87rem;color:var(--text-muted);line-height:1.55;
  padding-left:40px;flex-grow:1;
  text-align:justify;
}
.commodity-card .card-tag{
  display:inline-block;font-size:.6rem;font-weight:600;
  text-transform:uppercase;color:var(--gold);background:#f5e7c8;
  padding:2px 12px;border-radius:var(--radius-xl);
  margin-top:10px;align-self:flex-start;
}

/* ============ NEWS / BLOG CARDS ============ */
.news-header{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;margin-bottom:20px;gap:16px;
  max-width:1200px;margin-left:auto;margin-right:auto;
}
.rss-btn{
  display:inline-flex;align-items:center;gap:8px;background:#f26522;
  color:#fff;padding:10px 22px;border-radius:var(--radius-xl);
  font-weight:600;font-size:.85rem;border:none;cursor:pointer;
  transition:var(--transition);
  box-shadow:0 4px 14px rgba(242,101,34,.3);
}
.rss-btn:hover{transform:translateY(-2px)}

.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;max-width:1200px;margin:0 auto;
}
.news-card{
  background:var(--bg-light);border-radius:var(--radius-md);
  padding:22px 24px;border:1px solid var(--border-light);
  transition:var(--transition);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.news-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.news-card .news-tag{
  display:inline-block;font-size:.6rem;font-weight:600;
  text-transform:uppercase;color:var(--gold);background:#f5e7c8;
  padding:3px 12px;border-radius:var(--radius-xl);
  margin-bottom:10px;align-self:flex-start;
}
.news-card h3{
  font-family:'Playfair Display',serif;font-size:1.05rem;
  font-weight:700;color:var(--primary-dark);
  margin-bottom:8px;line-height:1.35;text-align:left;
}
.news-card h3 a{color:inherit}
.news-card h3 a:hover{color:var(--gold)}
.news-card .news-meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:.72rem;color:var(--text-muted);margin-bottom:10px;
  text-align:left;
}
.news-card .news-meta i{color:var(--gold);margin-right:4px}
.news-card p{
  font-size:.87rem;line-height:1.6;margin-bottom:12px;flex-grow:1;
  text-align:justify;
}
.news-card .read-more{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--gold);font-weight:600;font-size:.82rem;
  margin-top:auto;transition:var(--transition);
  text-align:left;
}
.news-card .read-more:hover{gap:12px}

/* ============ CLIENTS ============ */
.clients-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:22px;margin-top:30px;
  max-width:1200px;margin-left:auto;margin-right:auto;
}
.client-card{
  background:#fff;border:1px solid var(--border-light);
  border-radius:var(--radius-md);padding:26px 18px;text-align:center;
  transition:var(--transition);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.client-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.client-card img{
  max-height:70px;width:auto;object-fit:contain;
  filter:grayscale(100%);opacity:.75;transition:var(--transition);
}
.client-card:hover img{filter:grayscale(0%);opacity:1}
.client-card .client-name{
  font-family:'Playfair Display',serif;font-size:1rem;
  font-weight:700;color:var(--primary-dark);text-align:center;
}
.client-card .client-industry{
  font-size:.72rem;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:1px;text-align:center;
}

/* ============ CLIENT MARQUEE ============ */
.client-marquee{
  overflow:hidden;padding:22px 0;background:var(--bg-light);
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
}
.client-marquee-track{
  display:flex;gap:60px;
  animation:scroll-x 40s linear infinite;
  width:max-content;
}
.client-marquee-track span{
  font-family:'Playfair Display',serif;font-weight:700;
  color:var(--primary);opacity:.65;font-size:1.15rem;
  white-space:nowrap;
  display:flex;align-items:center;gap:10px;
}
.client-marquee-track span i{color:var(--gold);opacity:.8}
@keyframes scroll-x{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============ TESTIMONIALS ============ */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;margin-top:36px;
  max-width:1200px;margin-left:auto;margin-right:auto;
}
.testimonial{
  background:var(--bg-light);border-radius:var(--radius-md);
  padding:28px 26px;border-left:4px solid var(--gold);
  box-shadow:var(--shadow-sm);position:relative;
}
.testimonial::before{
  content:'\201C';
  font-family:'Playfair Display',serif;
  font-size:4rem;color:var(--gold);opacity:.25;
  position:absolute;top:0;left:14px;line-height:1;
}
.testimonial p{
  font-size:.93rem;font-style:italic;color:var(--text-body);
  margin-bottom:16px;position:relative;z-index:1;
  text-align:justify;
}
.testimonial .author{
  font-weight:600;color:var(--primary-dark);
  font-size:.85rem;font-style:normal;text-align:left;
}
.testimonial .role{
  font-size:.75rem;color:var(--text-muted);
  font-style:normal;text-align:left;
}

/* ============ GALLERY ============ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;max-width:1200px;margin:0 auto;
}
.gallery-item{
  position:relative;border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);
  border:1px solid var(--border-light);
  transition:var(--transition);cursor:pointer;background:#000;
}
.gallery-item:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.gallery-item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s ease;display:block;
}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item figcaption{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(10,30,48,.92),transparent);
  color:#fff;padding:30px 14px 12px;
  font-size:.85rem;font-weight:500;text-align:left;
}
.gallery-item .tag{
  position:absolute;top:12px;left:12px;
  background:var(--gold-gradient);color:#fff;
  font-size:.65rem;font-weight:600;
  padding:3px 12px;border-radius:var(--radius-xl);
  text-transform:uppercase;letter-spacing:1px;
}

/* ============ VIDEO GRID ============ */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;max-width:1200px;margin:0 auto;
}
.video-item{
  background:var(--bg-light);border-radius:var(--radius-md);
  overflow:hidden;border:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
}
.video-item video,.video-item iframe{
  width:100%;aspect-ratio:16/9;display:block;border:0;
}
.video-item h3{
  font-family:'Playfair Display',serif;font-size:1rem;
  color:var(--primary-dark);padding:14px 18px 4px;text-align:left;
}
.video-item p{
  font-size:.82rem;color:var(--text-muted);padding:0 18px 16px;
  text-align:justify;
}

/* ============ FORMS ============ */
.order-form-wrap{
  background:#fff;border-radius:var(--radius-md);padding:36px 40px;
  box-shadow:var(--shadow-md);border:1px solid var(--border-light);
  max-width:860px;margin:0 auto;
}
.form-row{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:4px;
}
.form-group{margin-bottom:16px}
.form-group label{
  display:block;font-weight:600;font-size:.82rem;
  color:var(--primary-dark);margin-bottom:5px;text-align:left;
}
.form-group label i{color:var(--gold);margin-right:6px}
.form-group label .required{color:#d32f2f;margin-left:2px}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--border-light);border-radius:8px;
  font-family:'Inter',sans-serif;font-size:.92rem;background:#fff;
  transition:border-color var(--transition),box-shadow var(--transition);
  color:var(--text-body);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(184,134,11,.10);
}
.form-group textarea{
  min-height:110px;resize:vertical;text-align:justify;
}
.form-group select[multiple]{min-height:120px}
.form-group .hint{
  font-size:.72rem;color:var(--text-muted);margin-top:4px;
  display:block;text-align:left;font-style:italic;
}

.form-btn{
  background:var(--gold-gradient);color:#fff;
  padding:14px 34px;border:none;border-radius:var(--radius-xl);
  font-weight:600;font-size:.95rem;cursor:pointer;
  transition:var(--transition);
  box-shadow:0 4px 14px rgba(184,134,11,.3);
  display:inline-flex;align-items:center;gap:10px;
}
.form-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(184,134,11,.4);
}
.form-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}
.form-btn.btn-whatsapp{
  background:linear-gradient(135deg,#25D366,#1da851);
  box-shadow:0 4px 14px rgba(37,211,102,.35);
}

.form-note{
  margin-top:14px;font-size:.82rem;color:var(--text-muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-align:left;
}
.form-note i{color:var(--gold)}

.form-status{
  margin-top:14px;padding:12px 18px;border-radius:8px;
  font-weight:500;display:none;text-align:left;
}
.form-status.success{
  display:block;background:#e8f5e9;color:#2e7d32;
  border:1px solid #a5d6a7;
}
.form-status.error{
  display:block;background:#fce4ec;color:#c62828;
  border:1px solid #ef9a9a;
}

/* ============ BLOG ARTICLE ============ */
.article-body{
  max-width:820px;margin:0 auto;font-size:1.02rem;
  line-height:1.85;color:var(--text-body);
}
.article-body h2{
  font-family:'Playfair Display',serif;font-size:1.65rem;
  color:var(--primary-dark);margin:38px 0 14px;text-align:left;
}
.article-body h3{
  font-family:'Playfair Display',serif;font-size:1.25rem;
  color:var(--primary-dark);margin:26px 0 10px;text-align:left;
}
.article-body p{margin-bottom:18px;text-align:justify}
.article-body ul,.article-body ol{margin:0 0 20px 26px}
.article-body li{margin-bottom:10px;text-align:justify}
.article-body strong{color:var(--primary-dark)}
.article-body a{
  color:var(--gold);font-weight:500;
  border-bottom:1px solid rgba(184,134,11,.3);
}
.article-body a:hover{border-bottom-color:var(--gold)}

.article-meta{
  color:var(--text-muted);font-size:.85rem;margin-top:12px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  text-align:left;
}
.article-meta i{color:var(--gold);margin-right:6px}

/* ============ FOOTER ============ */
.footer{
  background:var(--primary-dark);color:#cfdfea;
  padding:48px 0 26px;border-top:3px solid var(--gold);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:32px 40px;max-width:1280px;margin:0 auto;
}
.footer-col h4{
  color:#fff;font-weight:600;margin-bottom:14px;
  font-size:1rem;font-family:'Playfair Display',serif;
  text-align:left;
}
.footer-col h4 i{color:var(--gold);margin-right:6px}
.footer-col p,.footer-col a{
  color:#b8cedc;display:flex;align-items:center;gap:10px;
  margin:6px 0;font-size:.85rem;transition:color var(--transition);
  text-align:left;
}
.footer-col a:hover{color:var(--gold-light)}
.footer-col i{width:20px;color:var(--gold);font-size:.85rem;flex-shrink:0}

.social-links{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.05);color:#cfdfea;font-size:1rem;
  transition:var(--transition);border:1px solid rgba(255,255,255,.05);
}
.social-icon:hover{
  background:var(--gold);color:#fff;border-color:var(--gold);
  transform:translateY(-3px);
}

.footer-action-buttons{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;
}
.footer-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px 7px 14px;border-radius:var(--radius-xl);
  font-weight:500;font-size:.8rem;transition:var(--transition);
  border:none;cursor:pointer;
  background:rgba(255,255,255,.05);color:#cfdfea;
  border:1px solid rgba(255,255,255,.06);
}
.footer-btn.whatsapp{
  background:var(--whatsapp);color:#fff;border-color:var(--whatsapp);
}
.footer-btn.phone{
  background:var(--gold-gradient);color:#fff;border-color:transparent;
}

.footer-copy{
  border-top:1px solid #2b4a5e;padding-top:20px;margin-top:24px;
  text-align:center;font-size:.82rem;color:#8aaec2;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
}
.footer-copy a{color:var(--gold-light)}
.footer-copy a:hover{color:#fff}

/* ============================================================
   BACK-TO-TOP BUTTON
   ============================================================ */
.back-to-top-btn{
  position:fixed;
  bottom:30px;
  right:30px;
  background:var(--gold-gradient);
  color:#fff;
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  box-shadow:0 4px 20px rgba(184,134,11,.4);
  transition:var(--transition);
  z-index:1001;
  border:none;
  cursor:pointer;
}
.back-to-top-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(184,134,11,.55);
}
.back-to-top-btn i{
  color:#fff;
  pointer-events:none;
}

/* ============================================================
   FLOATING CONTACT BUTTONS (Call + WhatsApp) — All Pages
   ============================================================ */
.floating-contact{
  position:fixed !important;
  right:20px !important;
  bottom:100px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  z-index:1002 !important;
  pointer-events:auto !important;
}
.floating-contact a{
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  font-size:1.5rem !important;
  box-shadow:0 6px 20px rgba(0,0,0,.25) !important;
  transition:transform .3s ease,box-shadow .3s ease !important;
  text-decoration:none !important;
  position:relative !important;
}
.floating-contact a:hover{
  transform:translateY(-3px) scale(1.06) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.35) !important;
}
.floating-contact a.whatsapp-float{
  background:#25D366 !important;
}
.floating-contact a.whatsapp-float:hover{
  background:#1da851 !important;
}
.floating-contact a.phone-float{
  background:linear-gradient(135deg,#b8860b 0%,#d4a017 50%,#a67c00 100%) !important;
}
.floating-contact a.phone-float:hover{
  filter:brightness(1.1) !important;
}
.floating-contact a::before{
  content:'' !important;
  position:absolute !important;
  inset:-4px !important;
  border-radius:50% !important;
  border:2px solid currentColor !important;
  opacity:0 !important;
  animation:float-pulse 2.5s ease-out infinite !important;
}
.floating-contact a.whatsapp-float::before{
  color:#25D366 !important;
}
.floating-contact a.phone-float::before{
  color:#d4a017 !important;
}
@keyframes float-pulse{
  0%{opacity:.7;transform:scale(.9)}
  100%{opacity:0;transform:scale(1.5)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .header-inner{
    flex-direction:column;align-items:flex-start;
    gap:10px;padding:10px 0;
  }
  .brand{font-size:1.8rem;white-space:normal}
  .nav-desktop{width:100%;justify-content:flex-start;gap:2px}
  .nav-desktop a{font-size:.72rem;padding:5px 11px}
  .hero-content h1{font-size:2rem}
  .hero-content p{font-size:.95rem;padding:16px 20px}
  .commodity-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr;gap:0}
  .order-form-wrap{padding:26px 22px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr}
  .clients-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:480px){
  .container{padding:0 16px}
  .brand{font-size:1.4rem}
  .hero-content h1{font-size:1.6rem}
  h2.section-title{font-size:1.5rem}
  .footer-grid,
  .clients-grid,
  .gallery-grid{grid-template-columns:1fr}
  .form-btn{width:100%;justify-content:center}
  .back-to-top-btn{
    bottom:20px;right:20px;
    width:42px;height:42px;font-size:1.1rem;
  }
  .floating-contact{
    right:14px !important;
    bottom:84px !important;
    gap:10px !important;
  }
  .floating-contact a{
    width:50px !important;
    height:50px !important;
    font-size:1.3rem !important;
  }
}