/* ==========================================================================
   MG Mobiles Advertisement — Shared Design Tokens
   Used by the marketing site, login page, client dashboard and admin
   dashboard, so all four feel like one product.
   ========================================================================== */

:root{
  /* surfaces */
  --void:        #06070d;
  --surface:     #10131f;
  --surface-2:   #171b2c;
  --border:      rgba(255,255,255,0.08);
  --border-2:    rgba(255,255,255,0.14);

  /* text */
  --text-hi:     #f4f6fb;
  --text-mid:    #b6bdd1;
  --text-low:    #7c84a0;

  /* platform accents */
  --ig:          #dd2a7b;
  --ig-2:        #f58529;
  --fb:          #1877f2;
  --tt:          #25f4ee;
  --tt-2:        #fe2c55;

  /* status */
  --ok:          #2ee6a8;
  --warn:        #f5b942;
  --danger:      #fb5c72;

  /* signal gradient — the signature */
  --signal:      linear-gradient(90deg, var(--fb) 0%, var(--ig) 50%, var(--tt) 100%);
  --signal-soft: linear-gradient(90deg, rgba(24,119,242,.35) 0%, rgba(221,42,123,.35) 50%, rgba(37,244,238,.35) 100%);

  /* type */
  --f-display: 'Space Grotesk', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --radius:    14px;
  --radius-lg: 22px;
  --ease:      cubic-bezier(.22,.9,.28,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--void);
  color: var(--text-hi);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--f-display);
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; color: var(--text-mid); }

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; display: block; }

ul, ol{ margin:0; padding:0; list-style:none; }

button, input, select, textarea{ font-family: inherit; }

::selection{ background: var(--ig); color: #fff; }

:focus-visible{
  outline: 2px solid var(--tt);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow{
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-low);
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.grad-text{
  background: var(--signal);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 8s ease-in-out infinite;
}

@keyframes gradShift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

.grain{
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn--primary{ background: var(--text-hi); color: var(--void); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(37,244,238,.35); }
.btn--primary:disabled{ opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--ghost{ background: transparent; color: var(--text-hi); border-color: var(--border-2); }
.btn--ghost:hover{ border-color: var(--tt); color: var(--tt); }
.btn--small{ padding: .7rem 1.3rem; font-size: .85rem; }
.btn--danger{ background: transparent; color: var(--danger); border-color: rgba(251,92,114,.4); }
.btn--danger:hover{ background: rgba(251,92,114,.1); }

.badge{
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border-2);
  color: var(--text-mid);
}
.badge--ok{ color: var(--ok); border-color: rgba(46,230,168,.35); background: rgba(46,230,168,.08); }
.badge--warn{ color: var(--warn); border-color: rgba(245,185,66,.35); background: rgba(245,185,66,.08); }
.badge--danger{ color: var(--danger); border-color: rgba(251,92,114,.35); background: rgba(251,92,114,.08); }
.badge--muted{ color: var(--text-low); }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .grad-text{ animation: none !important; }
}