/* ═══════════════════════════════════════════════════════════
   ESB Group — Design Tokens & Shared Base
   Linked by every page for consistent theming.
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}
input,button,select,textarea{font-family:inherit}

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root{
  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  17px;
  --text-lg:  19px;
  --text-xl:  21px;

  /* Colors */
  --color-bg:             #000;
  --color-surface:        #0a0a0a;
  --color-elevated:       #141414;
  --color-text:           #f0f0f4;
  --color-text-secondary: rgba(255,255,255,.7);
  --color-text-muted:     rgba(255,255,255,.5);
  --color-text-faint:     rgba(255,255,255,.35);

  /* Borders */
  --border-subtle:  rgba(255,255,255,.06);
  --border-default: rgba(255,255,255,.08);
  --border-medium:  rgba(255,255,255,.12);
  --border-strong:  rgba(255,255,255,.2);
  --border-focus:   rgba(255,255,255,.3);

  /* Accent (subtle red) */
  --accent:        rgb(180,40,50);
  --accent-hover:  rgb(200,50,60);
  --accent-soft:   rgba(180,40,50,.1);
  --accent-border: rgba(180,40,50,.25);
  --accent-glow:   rgba(180,40,50,.06);

  /* Glass */
  --glass-bg:     rgba(18,18,28,.8);
  --glass-blur:   blur(20px);
  --glass-border: rgba(255,255,255,.06);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.4);

  /* Gradients */
  --gradient-bg:          linear-gradient(135deg, #000 0%, #050508 100%);
  --gradient-card:        linear-gradient(135deg, rgba(255,255,255,.02) 0%, rgba(0,0,0,.8) 50%, rgba(255,255,255,.015) 100%);
  --gradient-text-silver: linear-gradient(91deg, rgb(130,130,130) 0%, #fff 52%, rgb(150,150,150) 100%);
  --gradient-text-accent: linear-gradient(91deg, rgb(180,40,50) 0%, rgb(230,90,90) 50%, rgb(60,15,20) 100%);
  --gradient-button:      linear-gradient(89deg, #fff, #b8b8b8);
  --gradient-accent-btn:  linear-gradient(135deg, rgb(160,35,45), rgb(120,25,30));

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* Radius - Brutalist (0px) */
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-xl:   0px;
  --radius-pill: 0px;

  /* Transitions — smooth, polished enterprise feel */
  --ease-smooth:     cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: .15s  ease-out;
  --transition-base: .3s ease-out;
  --transition-slow: .5s ease-out;
}

/* ── ROOT & BODY ────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  font-weight: 400;
}

main {
  overflow-x: hidden;
  width: 100%;
}

/* ── SHARED KEYFRAMES ───────────────────────────────────── */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── GRADIENT BUTTON (Chrome / Silver enterprise CTA) ──── */
.btn-gradient{
  background: linear-gradient(135deg, var(--color-text) 0%, #d4d4d4 50%, #e8e8e8 100%);
  color: var(--color-bg);
  border: none;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease-out, transform .15s ease-out;
  box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-gradient::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
  opacity:0;
  transition:opacity .3s ease-out;
}
.btn-gradient:hover{
  box-shadow: 0 4px 20px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.8);
  transform: translateY(-1px);
}
.btn-gradient:hover::before{
  opacity:1;
}

/* ── SCROLLBARS ─────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL FOOTER — ESBG Brutalist Polish (Consistent on all pages)
   ═══════════════════════════════════════════════════════════ */
.footer {
  width: 100%;
  padding: 32px 0 36px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--color-bg, #000);
  box-sizing: border-box;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.footer__left,
.footer__right,
.footer__center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__copy {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
  letter-spacing: -0.01em;
}

.footer__right a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__right a:hover {
  color: var(--color-text, #fff);
}

.footer-claw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  opacity: 0.85;
  flex-shrink: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-claw svg {
  display: block;
}

.footer-claw:hover {
  opacity: 1;
  color: var(--color-text, #fff);
}

@media (max-width: 809px) {
  .footer {
    padding: 24px 0 32px;
  }
  .footer__inner {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 0 16px;
  }
  .footer__left,
  .footer__right {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .footer__center {
    display: none;
  }
}