/* ============================================================
   BATU AGRI — PREMIUM ENHANCEMENT LAYER
   Deep Forest · Lime · Emerald · Gold
   ============================================================ */

@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glowPulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%       { opacity: .65; transform: scale(1.08); }
}
@keyframes heroOverlayShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Section Alternation ──────────────────────────────────── */
body { background: #060d06 !important; }

.stats-section        { background: #081008 !important; position: relative; overflow: hidden; }
.why-section          { background: #070e08 !important; position: relative; overflow: hidden; }
.services-section     { background: #09120a !important; position: relative; overflow: hidden; }
.process-section      { background: #060d06 !important; position: relative; overflow: hidden; }
.about-section        { background: #081008 !important; position: relative; overflow: hidden; }
.testimonials-section { background: #070c07 !important; position: relative; overflow: hidden; }
.contact-section      { background: #050a05 !important; position: relative; overflow: hidden; }

.stats-section::before        { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(132,204,22,.18) 0%, transparent 70%); top: -80px; right: -80px; pointer-events: none; animation: glowPulse 7s ease-in-out infinite; }
.services-section::before     { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.12) 0%, transparent 70%); top: -100px; left: -100px; pointer-events: none; animation: glowPulse 8s ease-in-out infinite; }
.why-section::before          { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(217,119,6,.12) 0%, transparent 70%); bottom: -60px; right: -80px; pointer-events: none; animation: glowPulse 9s ease-in-out infinite; }
.about-section::before        { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(132,204,22,.10) 0%, transparent 70%); top: -60px; right: -100px; pointer-events: none; animation: glowPulse 6s ease-in-out infinite; }
.testimonials-section::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 70%); top: 50px; left: -60px; pointer-events: none; animation: glowPulse 10s ease-in-out infinite; }

/* ── Animated Gradient Text ───────────────────────────────── */
.hero-title {
  background: linear-gradient(270deg, #84cc16, #10b981, #d97706, #4ade80, #84cc16) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientFlow 6s ease infinite !important;
}

.section-title {
  background: linear-gradient(270deg, #84cc16, #34d399, #d97706, #84cc16);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 7s ease infinite;
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #84cc16, #10b981, #84cc16);
  background-size: 200% 100%;
  animation: gradientFlow 3s ease infinite;
  transform-origin: left; transform: scaleX(0);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
[data-aos].aos-animate .section-title::after,
.section-title.aos-animate::after,
.section-header.aos-animate .section-title::after { transform: scaleX(1); }

/* ── Glassmorphism Navbar ─────────────────────────────────── */
.navbar.scrolled {
  background: rgba(6,13,6,.82) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(132,204,22,.2) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.4) !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 55%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
}
.btn:hover::after { left: 160%; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(132,204,22,.4) !important; }
.btn-primary { background: linear-gradient(135deg, #65a30d, #10b981) !important; border: none !important; }

/* ── Cards ────────────────────────────────────────────────── */
.service-card, .testimonial-card, .process-card, .why-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(132,204,22,.12) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease !important;
}
.service-card:hover, .process-card:hover, .why-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(132,204,22,.4) !important;
  box-shadow: 0 24px 60px rgba(132,204,22,.2), 0 0 0 1px rgba(16,185,129,.12) !important;
}

/* ── Stats ────────────────────────────────────────────────── */
.stat-number {
  background: linear-gradient(135deg, #84cc16, #34d399) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}

/* ── Dot Grid ─────────────────────────────────────────────── */
.services-section, .testimonials-section, .about-section {
  background-image: radial-gradient(circle, rgba(132,204,22,.06) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}

/* ── Inputs ───────────────────────────────────────────────── */
.contact-section input, .contact-section select, .contact-section textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(132,204,22,.2) !important;
  color: #e2e8f0 !important;
}
.contact-section input:focus, .contact-section select:focus, .contact-section textarea:focus {
  border-color: rgba(132,204,22,.6) !important;
  box-shadow: 0 0 0 3px rgba(132,204,22,.12) !important;
  outline: none !important;
}

footer { background: linear-gradient(135deg, #030603, #050c05) !important; border-top: 1px solid rgba(132,204,22,.12) !important; }

/* ============================================================
   HERO SECTION — PREMIUM ANIMATION ENHANCEMENTS
   ============================================================ */

/* ── Hero min-height & centering ────────────────────────────── */
.hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ── Canvas fills hero fully ─────────────────────────────────── */
.hero canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  transition: transform .08s linear !important;
}

/* ── Hero content above canvas ───────────────────────────────── */
/* only the content block: forcing position:relative on every hero child
   pulled the absolutely-positioned decorative layers into the flex flow */
.hero > .container {
  position: relative !important;
  z-index: 3 !important;
}

/* ── Constellation icons enhanced ───────────────────────────── */
[class*="constellation-icon"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.07) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-size: 1.3rem !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
[class*="constellation-icon"]:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 0 24px rgba(255,255,255,.2) !important;
}

/* ── Hero headline entrance ──────────────────────────────────── */
.hero-headline,
.hero-title,
.hero__headline {
  opacity: 0;
  animation: heroTitleIn 1s cubic-bezier(.16,1,.3,1) .3s both !important;
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(40px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ── Hero subtitle entrance ──────────────────────────────────── */
.hero-sub, .hero-description, .hero__description, .hero-subtitle {
  opacity: 0;
  animation: heroSubIn .9s cubic-bezier(.16,1,.3,1) .6s both !important;
}
@keyframes heroSubIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero CTA entrance ───────────────────────────────────────── */
.hero-ctas, .hero__ctas, .hero-actions {
  opacity: 0;
  animation: heroCTAIn .8s cubic-bezier(.16,1,.3,1) .9s both !important;
}
@keyframes heroCTAIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero badge entrance ─────────────────────────────────────── */
.hero-badge, .hero-tagline-badge, .hero__badge, .hero-eyebrow {
  opacity: 0;
  animation: heroBadgeIn .7s cubic-bezier(.16,1,.3,1) .1s both !important;
}
@keyframes heroBadgeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Hero visual (right side icon cluster) ───────────────────── */
[class*="hero-split"][class*="visual"],
[class*="hero__visual"],
.hero-split__visual,
.hero-split-st__visual {
  opacity: 0;
  animation: heroVisualIn 1.1s cubic-bezier(.16,1,.3,1) .4s both !important;
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: translateX(40px) scale(.95); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}

/* ── Orbiting icon cluster animations ───────────────────────── */
[class*="ic-orbit--1"], [class*="ic-st-orbit--1"] { animation: orbit1 12s linear infinite !important; }
[class*="ic-orbit--2"], [class*="ic-st-orbit--2"] { animation: orbit2 15s linear infinite !important; }
[class*="ic-orbit--3"], [class*="ic-st-orbit--3"] { animation: orbit3 18s linear infinite !important; }
[class*="ic-orbit--4"], [class*="ic-st-orbit--4"] { animation: orbit4 10s linear infinite !important; }
[class*="ic-orbit--5"], [class*="ic-st-orbit--5"] { animation: orbit5 22s linear infinite !important; }

@keyframes orbit1 {
  from { transform: rotate(0deg)   translateX(120px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}
@keyframes orbit2 {
  from { transform: rotate(72deg)  translateX(160px) rotate(-72deg); }
  to   { transform: rotate(432deg) translateX(160px) rotate(-432deg); }
}
@keyframes orbit3 {
  from { transform: rotate(144deg) translateX(110px) rotate(-144deg); }
  to   { transform: rotate(504deg) translateX(110px) rotate(-504deg); }
}
@keyframes orbit4 {
  from { transform: rotate(216deg) translateX(140px) rotate(-216deg); }
  to   { transform: rotate(576deg) translateX(140px) rotate(-576deg); }
}
@keyframes orbit5 {
  from { transform: rotate(288deg) translateX(130px) rotate(-288deg); }
  to   { transform: rotate(648deg) translateX(130px) rotate(-648deg); }
}

/* ── Center icon ring pulse ──────────────────────────────────── */
[class*="ic-center__ring"],
[class*="ic-st-ring"],
[class*="ic-center"] .ring {
  animation: ringPulse 3s ease-in-out infinite !important;
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1);    opacity: .6; }
  50%       { transform: scale(1.15); opacity: 1; }
}

/* ── Sun animation (julflame) enhanced ───────────────────────── */
.sun-core {
  animation: sunCorePulse 3s ease-in-out infinite !important;
}
.ray {
  animation: rayRotate 8s linear infinite !important;
  transform-origin: center center !important;
}
@keyframes sunCorePulse {
  0%, 100% { box-shadow: 0 0 40px 10px rgba(245,158,11,.5), 0 0 80px 20px rgba(239,68,68,.3); }
  50%       { box-shadow: 0 0 60px 20px rgba(245,158,11,.8), 0 0 120px 40px rgba(239,68,68,.5); }
}
@keyframes rayRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Hero features list stagger ──────────────────────────────── */
[class*="hero-features"] li {
  opacity: 0;
  animation: featureIn .6s cubic-bezier(.16,1,.3,1) both !important;
}
[class*="hero-features"] li:nth-child(1) { animation-delay: .7s !important; }
[class*="hero-features"] li:nth-child(2) { animation-delay: .85s !important; }
[class*="hero-features"] li:nth-child(3) { animation-delay: 1s !important; }
@keyframes featureIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Hero scroll indicator bounce ────────────────────────────── */
.hero-scroll-indicator, .hero-scroll-cue, .scroll-indicator {
  animation: scrollBounce 2s ease-in-out infinite !important;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ── Hero grid overlay animated ─────────────────────────────── */
.hero-grid-overlay, .hero-bg-grid, .hero-blueprint {
  animation: gridShift 20s linear infinite !important;
  background-size: 48px 48px !important;
}
@keyframes gridShift {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}

/* ── Stats bar entrance ──────────────────────────────────────── */
.stat-item, .stat-card {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease !important;
}
.stat-item:hover, .stat-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
}

/* ── Section titles get ::before decorative line ─────────────── */
.section-header {
  position: relative !important;
}
.section-header::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--scroll-bar-color, linear-gradient(90deg, #a855f7, #06b6d4)) !important;
  margin: 0 auto 16px !important;
  border-radius: 2px !important;
  animation: lineGrow 1s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes lineGrow {
  from { width: 0; opacity: 0; }
  to   { width: 40px; opacity: 1; }
}

/* ── Navbar Logo Image ────────────────────────────────────── */
.nav-logo-img, .navbar-logo .nav-logo-img {
  height: 40px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  display: block !important;
}
.nav-logo, .navbar-logo, .navbar__logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── UNIQUE SECTION COLOR PALETTE — Batu Agri ────────────────
   Deep forest → Rich earth green → Dark sage → Olive dark → Forest → Earth brown → Black-green
   ─────────────────────────────────────────────────────────── */
body                      { background: #07100a !important; }
.hero                     { background: linear-gradient(160deg, #060d06 0%, #0d2010 60%, #060d06 100%) !important; }
.stats-section            { background: #0d2010 !important; }
.why-section              { background: #091a0c !important; }
.services-section         { background: #0f1e10 !important; }
.process-section          { background: #0a1a0c !important; }
.about-section            { background: #122010 !important; }
.testimonials-section     { background: #070e07 !important; }
.contact-section          { background: #050a05 !important; }

/* ── HERO TEXT CENTERING — All Sites ─────────────────────────── */
.hero .container,
.hero .hero-split,
.hero .hero-split-st,
.hero .hero__inner,
.hero-content,
.hero .container > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* Kill the two-column split — stack and center everything */
.hero-split,
.hero-split-st,
.hero__inner {
  grid-template-columns: 1fr !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* Hide the right-side visual cluster (icon orbit / dashboard) on hero */
.hero-split__visual,
.hero-split-st__visual,
.hero__visual {
  display: none !important;
}

/* Text blocks */
.hero-split__text,
.hero-split-st__text,
.hero__text,
.hero-content {
  align-items: center !important;
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}

/* Badges */
.hero-badge,
.hero-tagline-badge,
.hero__badge,
.hero-eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CTA button row */
.hero-ctas,
.hero__ctas,
.hero-actions,
.hero-ctas-st {
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* Feature lists */
[class*="hero-features"] {
  justify-content: center !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 12px 24px !important;
}

/* Headline max-width */
.hero-headline,
.hero-title,
.hero__headline,
.hero-sub,
.hero-description,
.hero__description,
.hero-subtitle {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Constellation icons — reposition to background decorative layer */
[class*="constellation"] {
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Scroll indicator stays centered */
.hero-scroll-indicator,
.hero-scroll-cue,
.scroll-indicator {
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 auto !important;
}

/* Badge strip (sifotech bottom strip) */
.hero-badge-strip {
  justify-content: center !important;
}



/* ============================================================
   HERO TEXT CENTERING — FINAL OVERRIDE
   Uses !important to beat inline styles and any specificity war
   ============================================================ */

/* Full-width centered flex column for every hero container */
.hero,
.hero .container,
.hero .hero-content,
.hero .hero-split,
.hero .hero-split-st,
.hero .hero__inner,
.hero .hero-container,
.hero > div:not([aria-hidden]):not(.hero-overlay):not(.hero-glow):not(.hero-blueprint):not(.hero-diagonal):not(.hero-bg-grid):not(canvas) {
  text-align: center !important;
}

/* Text blocks — center aligned and max-width constrained */
.hero-split__text,
.hero-split-st__text,
.hero__text,
.hero-content {
  text-align: center !important;
  align-items: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* All direct headline/subtitle/description elements */
.hero h1, .hero h2,
.hero-title, .hero-headline, .hero__headline,
.hero-sub, .hero-subtitle, .hero-description, .hero__description,
.hero-eyebrow, .hero-badge, .hero-tagline-badge, .hero__badge {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* CTA rows */
.hero-ctas, .hero__ctas, .hero-actions,
.hero-features, .hero-features-st, [class*="hero-features"],
.hero-trust-badges, .hero-trust-badges-bp, [class*="trust-badges"],
.hero-badge-strip, .hero-icon-marquee {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

/* Section titles that have inline text-align:left — override */
.hero .section-title,
.hero h2[style],
section h2[style*="text-align"] {
  text-align: center !important;
}

:root {
  --white:             rgba(255,255,255,.05);
  --bg:                #07100a;
  --bg-alt:            #0d2010;
  --card-bg:           rgba(255,255,255,.05);
  --text-primary:      #e2e8f0;
  --text-secondary:    rgba(226,232,240,.65);
  --text-muted:        rgba(226,232,240,.45);
  --accent-light:      #84cc16;
  --border:            rgba(132,204,22,.15);
}
h1,h2,h3,h4,h5,h6 { color: #e2e8f0; }
p,li { color: rgba(226,232,240,.8); }
input, textarea, select { background: rgba(255,255,255,.05) !important; color: #e2e8f0 !important; border-color: rgba(132,204,22,.2) !important; }
input::placeholder, textarea::placeholder { color: rgba(226,232,240,.4) !important; }


/* All card types — dark glass background + readable text */
.why-card, .service-card, .project-card, .team-card, .agent-card,
.testimonial-card, .stat-card, .stat-item, .process-card,
.process-step, .security-card, .step-card, .why-card,
.cred-card, .highlight-card, .contact-item, .contact-form-wrap,
.about-content, .dashboard {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Headings inside cards */
.why-card h3, .service-card h3, .project-card h3,
.team-card h3, .agent-card h3, .testimonial-card h4,
.stat-card h3, .process-card h3, .process-step h3,
.why-card h4, .service-card h4,
.why-card .card-title, .service-card .service-title,
.card-title, .service-title, .project-title {
  color: #f1f5f9 !important;
}

/* Body text inside cards */
.why-card p, .service-card p, .project-card p,
.team-card p, .testimonial-card p, .process-card p,
.process-step p, .card-desc, .service-desc,
.why-card .card-desc, .service-card .service-desc {
  color: rgba(226,232,240,.75) !important;
}

/* Section descriptions */
.section-sub, .section-desc, .section-intro,
.about-intro, .about-desc, .about-text p,
.why-desc, .process-desc {
  color: rgba(226,232,240,.75) !important;
}

/* Contact sections */
.contact-section, .contact, section#contact {
  color: #e2e8f0 !important;
}
.contact-label, .contact-value, .contact-info p {
  color: rgba(226,232,240,.8) !important;
}





@media (max-width: 900px) { .stat-card, .stat-card:nth-child(2n), .stat-card:nth-child(3) { border-right: none !important; } }
/* ── Value chain gallery ─────────────────────────────────────── */
.vc-section { background: linear-gradient(180deg, #07100a, #0b1a10); }
.vc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.vc-card { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: #0d1a10; border: 1px solid rgba(132,204,22,.2); }
.vc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.vc-card:hover img { transform: scale(1.07); }
.vc-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,12,7,.1) 35%, rgba(5,12,7,.92) 100%); }
.vc-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; }
.vc-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #84cc16, #34d399); color: #07100a; margin-bottom: 10px; }
.vc-card h3 { color: #fff; font-size: 1.2rem; margin: 0 0 6px; }
.vc-card p { color: #e2e8f0; font-size: .9rem; line-height: 1.55; margin: 0; }
@media (max-width: 1100px) { .vc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vc-grid { grid-template-columns: 1fr; } .vc-card { aspect-ratio: 4 / 3; } }

/* ── Readability on the dark theme ─────────────────────────── */
.btn-primary, .btn-nav, .btn-footer-cta, .btn-submit { color: #07100a !important; font-weight: 800; }
.btn-outline-light { color: #fff !important; }
.btn-outline-green { color: #86efac !important; border-color: rgba(134,239,172,.6) !important; }
.service-badge { background: linear-gradient(135deg, #E8A93A, #C8830A) !important; color: #07100a !important; }
.stat-number { color: #86efac !important; -webkit-text-fill-color: #86efac; }
.stat-label, .highlight-body p, .section-sub { color: rgba(226,232,240,.82); }
.highlight-body h3, .contact-info h3, .contact-card strong, .contact-form label { color: #f1f5f9; }
.form-error { color: #fca5a5; }
.footer-bottom-inner p, .footer-legal a { color: rgba(226,232,240,.75); }
.footer-links a, .footer-contact-list a, .footer-contact-list span, .footer-tagline { color: #c3cddb; }
.footer-links a:hover, .footer-contact-list a:hover { color: #fff; }
.hamburger span { background: #fff; }
.contact-form select option { background: #14231a; color: #e2e8f0; }

/* ── Tap targets (>= 44px) ─────────────────────────────────── */
.hamburger { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.service-link-card { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
.footer-links a, .footer-legal a, .footer-contact-list a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-card a { display: inline-block; padding: 12px 0; }
.carousel-btn, .back-to-top { min-width: 44px; min-height: 44px; }
.nav-logo, .footer-logo { min-height: 44px; }
.section-tag { background: rgba(200,131,10,.16) !important; color: #f3bd5e !important; border: 1px solid rgba(200,131,10,.4); }
.contact-socials a, .footer-socials a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* five service cards: fill the grid instead of leaving an orphan row */
.services-grid { grid-template-columns: repeat(6, 1fr); }
.services-grid .service-card { grid-column: span 2; }
.services-grid .service-card:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .services-grid .service-card, .services-grid .service-card:nth-child(n+4) { grid-column: span 1; }
  .services-grid .service-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-card:last-child { grid-column: auto; }
}
.btn-nav { min-height: 44px; display: inline-flex; align-items: center; }