/* ═══════════════════════════════════════════
   GLIST ERA GLOBAL LTD — style.css
   Mobile-first, fully responsive
   glisteraglobal.com
═══════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#06050A;color:#F0EDE8;font-family:'Cormorant Garamond',Georgia,serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:#06050A}
::-webkit-scrollbar-thumb{background:rgba(212,175,55,.32);border-radius:2px}
img{max-width:100%;display:block}
a{color:inherit}
input,textarea,select{outline:none;resize:none;font-family:'Montserrat',sans-serif;background:rgba(212,175,55,.04);border:1px solid rgba(212,175,55,.15);border-radius:5px;color:#F0EDE8;font-size:14px;padding:12px 14px;width:100%;transition:border-color .3s;-webkit-appearance:none}
input:focus,textarea:focus,select:focus{border-color:rgba(212,175,55,.45)}
select option{background:#1a1208;color:#F0EDE8}
button{cursor:pointer;font-family:'Montserrat',sans-serif}

/* ── Keyframes ── */
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes shimmer{0%{background-position:-300% center}100%{background-position:300% center}}
@keyframes pulseGlow{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.68;transform:scale(1.07)}}
@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes scanline{0%{top:-4%}100%{top:104%}}
@keyframes routeTravel{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-2000}}
@keyframes brandPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ── Nav ── */
.nav-a:hover{color:rgba(212,175,55,1)!important}
.btn-ghost:hover{background:rgba(212,175,55,.1)!important;border-color:rgba(212,175,55,.65)!important}
.div-btn:hover{background:rgba(212,175,55,.12)!important;border-color:rgba(212,175,55,.55)!important;color:rgba(212,175,55,.9)!important}

/* ── Buttons ── */
.btn-gold{transition:all .35s ease}
.btn-gold:hover{transform:translateY(-2px)!important;box-shadow:0 14px 40px rgba(212,175,55,.42)!important}
.btn-hero:hover{opacity:.85}
.wa-btn:hover{background:rgba(37,211,102,.22)!important}
.tab-btn:hover{color:#F0EDE8!important}

/* ── Cards ── */
.species-card:hover .card-img{transform:scale(1.08)}
.species-card:hover{border-color:rgba(212,175,55,.65)!important;box-shadow:0 0 36px rgba(212,175,55,.18),0 20px 56px rgba(0,0,0,.55)!important}
.agri-card:hover .card-img{transform:scale(1.07)}
.agri-card:hover{border-color:rgba(126,216,122,.5)!important;box-shadow:0 0 36px rgba(126,216,122,.12),0 20px 56px rgba(0,0,0,.5)!important}
.mining-card:hover{background:rgba(28,20,8,.98)!important;border-color:rgba(255,195,80,.45)!important;box-shadow:0 0 32px rgba(255,195,80,.14),0 20px 50px rgba(0,0,0,.5)!important}
.logistics-card:hover{border-color:rgba(212,175,55,.45)!important;transform:translateY(-4px)!important;background:rgba(212,175,55,.05)!important}
.card-img{transition:transform .7s cubic-bezier(.16,1,.3,1)}

/* ── Brand watermark on logistics images ── */
.brand-overlay{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:linear-gradient(0deg,rgba(6,5,10,.92) 0%,rgba(6,5,10,.5) 60%,transparent 100%);display:flex;align-items:flex-end;justify-content:space-between}
.brand-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(212,175,55,.92),rgba(170,120,25,.8));border-radius:3px;padding:3px 10px;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;color:#06050A;letter-spacing:1.5px;white-space:nowrap}

/* ══ MOBILE-FIRST LAYOUT ══ */

/* Hamburger */
.ham{display:none;flex-direction:column;gap:5px;background:transparent;border:none;padding:6px;z-index:400;position:relative}
.ham span{display:block;width:22px;height:2px;background:rgba(212,175,55,.8);border-radius:1px;transition:all .3s}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav drawer */
.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:rgba(6,5,10,.97);backdrop-filter:blur(24px);border-bottom:1px solid rgba(212,175,55,.1);z-index:299;padding:24px 24px 32px;flex-direction:column;gap:0}
.mobile-menu.open{display:flex}
.mobile-menu a,.mobile-menu button{font-family:'Montserrat',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:rgba(200,190,175,.75);text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(212,175,55,.07);display:flex;align-items:center;gap:10px;background:transparent;border-left:none;border-right:none;border-top:none;width:100%;text-align:left}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover{color:rgba(212,175,55,.95)!important}

/* Desktop nav */
.nav-desktop{display:flex;gap:28px;align-items:center}

/* Section padding — desktop */
.sp{padding:120px 48px}

/* Two-col grid */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
/* Three-col grid */
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
/* Four-col grid */
.g4{display:grid;grid-template-columns:repeat(4,1fr)}
/* Auto-fill card grids */
.gc-species{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.gc-agri{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.gc-mining{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.gc-logistics{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

/* Image mosaic */
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:220px 180px;gap:10px}
.mosaic-a{grid-column:1/2;grid-row:1/2}
.mosaic-b{grid-column:2/3;grid-row:1/2}
.mosaic-c{grid-column:1/3;grid-row:2/3}

/* Contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:36px}

/* Form row */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Hero buttons */
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Footer */
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;margin-bottom:44px}
.footer-cols{display:flex;gap:52px}

/* ══ TABLET ≤ 1024px ══ */
@media(max-width:1024px){
  .sp{padding:90px 36px}
  .g2{gap:48px}
  .g3{grid-template-columns:1fr;gap:0}
  .g3>div{border-right:none!important;border-bottom:1px solid rgba(212,175,55,.1);padding:24px 0!important}
  .g3>div:last-child{border-bottom:none}
  .g4{grid-template-columns:1fr 1fr}
  .footer-inner{flex-direction:column}
  .footer-cols{gap:32px}
}

/* ══ MOBILE ≤ 768px ══ */
@media(max-width:768px){
  .sp{padding:72px 20px}
  .g2{grid-template-columns:1fr!important;gap:40px}
  .g4{grid-template-columns:1fr 1fr}
  .gc-species{grid-template-columns:1fr}
  .gc-agri{grid-template-columns:1fr}
  .gc-mining{grid-template-columns:1fr}
  .gc-logistics{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr;grid-template-rows:auto;gap:8px}
  .mosaic-a,.mosaic-b,.mosaic-c{grid-column:auto!important;grid-row:auto!important;height:180px}
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:center}
  .nav-desktop{display:none!important}
  .ham{display:flex!important}
  .footer-inner{flex-direction:column}
  .footer-cols{flex-direction:column;gap:24px}
  .div-selector{flex-direction:column;align-items:center}
  .stats-pill{font-size:9px!important;padding:4px 10px!important}
  /* Reduce ring sizes on mobile */
  .ring-lg{width:320px!important;height:320px!important;margin-top:-160px!important;margin-left:-160px!important}
  .ring-md{width:240px!important;height:240px!important;margin-top:-120px!important;margin-left:-120px!important}
  .ring-sm{width:160px!important;height:160px!important;margin-top:-80px!important;margin-left:-80px!important}
}

/* ══ SMALL MOBILE ≤ 480px ══ */
@media(max-width:480px){
  .sp{padding:60px 16px}
  .g4{grid-template-columns:1fr}
  h1.hero-h1{font-size:clamp(36px,11vw,60px)!important}
  .hero-sub{font-size:14px!important}
  .section-h2{font-size:clamp(30px,8vw,48px)!important}
}