@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600;700&display=swap');

.gm-section{
  --gm-bg:#080810;--gm-surf:#13131a;--gm-surf2:#1c1c28;
  --gm-bord:rgba(255,255,255,.06);--gm-accent:#c8a96e;
  --gm-text:#f0eee8;--gm-muted:rgba(240,238,232,.4);
  --gm-fh:'DM Serif Display',Georgia,serif;
  --gm-fb:'DM Sans',-apple-system,sans-serif;
  font-family:var(--gm-fb);color:var(--gm-text);
  background:var(--gm-bg);border-radius:24px;
  margin:48px 0;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4);
  position:relative;opacity:0;transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
}
.gm-section.gm-visible{opacity:1;transform:translateY(0)}
.gm-section::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,var(--gm-accent) 50%,transparent 95%)}

.gm-container{position:relative;z-index:1;padding:36px 44px 40px}

.gm-header{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.gm-header-icon{width:52px;height:52px;min-width:52px;background:var(--gm-surf);
  border:1px solid rgba(200,169,110,.18);border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:var(--gm-accent);
  animation:gm-bob 4s ease-in-out infinite}
@keyframes gm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.gm-icon-svg{width:34px;height:auto}
.gm-title{font-family:var(--gm-fh);font-size:clamp(1.35rem,2.5vw,1.9rem);font-weight:400;
  color:var(--gm-text);margin:0 0 5px;line-height:1.1}
.gm-desc{font-size:.8rem;color:var(--gm-muted);margin:0;line-height:1.55}

.gm-viewer-area{background:#0d0d15;border:1px solid rgba(200,169,110,.08);
  border-radius:18px;overflow:hidden;position:relative;margin-bottom:14px}
.gm-canvas{display:block;width:100%;height:auto;cursor:grab}
.gm-canvas:active{cursor:grabbing}
.gm-stage-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
  background:rgba(8,8,16,.8);border:1px solid rgba(200,169,110,.14);
  border-radius:20px;padding:6px 16px;pointer-events:none;white-space:nowrap}
.gm-stage-hint span{font-size:.63rem;font-weight:600;letter-spacing:1.8px;
  text-transform:uppercase;color:rgba(200,169,110,.45)}

.gm-view-btns{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.gm-vbtn{background:var(--gm-surf);border:1px solid var(--gm-bord);
  color:rgba(240,238,232,.38);font-size:.67rem;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;padding:8px 18px;border-radius:9px;
  cursor:pointer;transition:all .2s;font-family:var(--gm-fb)}
.gm-vbtn:hover,.gm-vbtn--on{background:var(--gm-surf2);border-color:rgba(200,169,110,.4);color:var(--gm-accent)}

.gm-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gm-card{background:var(--gm-surf);border:1px solid var(--gm-bord);border-radius:14px;
  padding:16px 12px 14px;cursor:pointer;transition:all .25s;text-align:center;
  opacity:0;transform:translateY(10px);animation:gm-cin .4s ease forwards}
.gm-card:nth-child(1){animation-delay:.08s}.gm-card:nth-child(2){animation-delay:.16s}
.gm-card:nth-child(3){animation-delay:.24s}.gm-card:nth-child(4){animation-delay:.32s}
.gm-card:nth-child(5){animation-delay:.4s}
@keyframes gm-cin{to{opacity:1;transform:translateY(0)}}
.gm-card:hover,.gm-card--active{background:var(--gm-surf2);border-color:rgba(200,169,110,.38);transform:translateY(-4px)}
.gm-card--active .gm-card-key{box-shadow:0 0 22px rgba(200,169,110,.45)}
.gm-card-key{width:34px;height:34px;background:linear-gradient(135deg,#c8a96e,#9a6f32);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:var(--gm-fh);font-size:1rem;color:#080810;font-weight:700;
  margin:0 auto 10px;transition:box-shadow .25s}
.gm-card-body{display:flex;flex-direction:column;gap:2px}
.gm-card-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--gm-muted);margin-bottom:4px}
.gm-card-val{font-size:1.22rem;font-weight:700;color:var(--gm-text);line-height:1;
  display:flex;align-items:baseline;gap:3px;justify-content:center}
.gm-card-unit{font-size:.58rem;color:var(--gm-accent);font-weight:600;letter-spacing:1px;text-transform:uppercase}
.gm-card-sub{font-size:.6rem;color:rgba(240,238,232,.22);margin-top:5px;line-height:1.4}

@media(max-width:700px){
  .gm-container{padding:24px 18px 28px}
  .gm-header{gap:14px}
  .gm-cards{grid-template-columns:repeat(3,1fr);gap:8px}
  .gm-vbtn{font-size:.6rem;padding:6px 12px}
}
@media(max-width:440px){
  .gm-cards{grid-template-columns:repeat(2,1fr)}
  .gm-header{flex-direction:column;align-items:flex-start}
}

/* ── Responsive overrides (mobile-first fixes) ─── */
@media(max-width:520px){
  .gm-container{padding:20px 14px 24px}
  .gm-header{gap:12px}
  .gm-title{font-size:1.15rem}
  .gm-desc{font-size:.74rem}
  .gm-view-btns{gap:5px}
  .gm-vbtn{font-size:.58rem;padding:6px 10px}
  .gm-cards{grid-template-columns:repeat(3,1fr);gap:7px}
  .gm-card-sub{display:none}
  .gm-card{padding:12px 8px 10px}
  .gm-card-val{font-size:1rem}
}
@media(max-width:380px){
  .gm-cards{grid-template-columns:repeat(2,1fr)}
  .gm-header{flex-direction:column;align-items:flex-start}
}