/* =========================================================
   1. RESET — remove browser variance only
========================================================= */

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

* {
  margin: 0;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* media elements behave predictably */
img,
picture,
video,
canvas,
svg {
  display: block;
  width: 100%;
}

/* form elements inherit typography */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* preserve accessibility */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* prevent overflow issues */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* =========================================================
   2. BASE — tokens + minimal system decisions
========================================================= */

:root {
  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* radius */
  --radius-1: 4px;
  --radius-2: 8px;

  /* optional colors (neutral baseline) */
  --color-text: #111;
  --color-bg: #fff;
}

body {
  color: var(--color-text);
  background: var(--color-bg);
}

/* layout primitive */
.stack > * + * {
  margin-top: var(--space-4);
}

/* =========================================================
   3. UTILITIES — fast layout helpers
========================================================= */

/* text */
.tcenter {
  text-align: center;
}

/* spacing helpers: margin (m) + padding (p) */

/* auto centering */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* margin: all */
.m0 { margin: 0; }
.m1 { margin: var(--space-1); }
.m2 { margin: var(--space-2); }
.m3 { margin: var(--space-3); }
.m4 { margin: var(--space-4); }
.m5 { margin: var(--space-5); }
.m6 { margin: var(--space-6); }

/* margin: axis */
.mx0 { margin-left: 0; margin-right: 0; }
.mx1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx6 { margin-left: var(--space-6); margin-right: var(--space-6); }

.my0 { margin-top: 0; margin-bottom: 0; }
.my1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }

/* margin: sides */
.mt0 { margin-top: 0; }
.mt1 { margin-top: var(--space-1); }
.mt2 { margin-top: var(--space-2); }
.mt3 { margin-top: var(--space-3); }
.mt4 { margin-top: var(--space-4); }
.mt5 { margin-top: var(--space-5); }
.mt6 { margin-top: var(--space-6); }

.mr0 { margin-right: 0; }
.mr1 { margin-right: var(--space-1); }
.mr2 { margin-right: var(--space-2); }
.mr3 { margin-right: var(--space-3); }
.mr4 { margin-right: var(--space-4); }
.mr5 { margin-right: var(--space-5); }
.mr6 { margin-right: var(--space-6); }

.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: var(--space-1); }
.mb2 { margin-bottom: var(--space-2); }
.mb3 { margin-bottom: var(--space-3); }
.mb4 { margin-bottom: var(--space-4); }
.mb5 { margin-bottom: var(--space-5); }
.mb6 { margin-bottom: var(--space-6); }

.ml0 { margin-left: 0; }
.ml1 { margin-left: var(--space-1); }
.ml2 { margin-left: var(--space-2); }
.ml3 { margin-left: var(--space-3); }
.ml4 { margin-left: var(--space-4); }
.ml5 { margin-left: var(--space-5); }
.ml6 { margin-left: var(--space-6); }

/* padding: all */
.p0 { padding: 0; }
.p1 { padding: var(--space-1); }
.p2 { padding: var(--space-2); }
.p3 { padding: var(--space-3); }
.p4 { padding: var(--space-4); }
.p5 { padding: var(--space-5); }
.p6 { padding: var(--space-6); }

/* padding: axis */
.px0 { padding-left: 0; padding-right: 0; }
.px1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py0 { padding-top: 0; padding-bottom: 0; }
.py1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* padding: sides */
.pt0 { padding-top: 0; }
.pt1 { padding-top: var(--space-1); }
.pt2 { padding-top: var(--space-2); }
.pt3 { padding-top: var(--space-3); }
.pt4 { padding-top: var(--space-4); }
.pt5 { padding-top: var(--space-5); }
.pt6 { padding-top: var(--space-6); }

.pr0 { padding-right: 0; }
.pr1 { padding-right: var(--space-1); }
.pr2 { padding-right: var(--space-2); }
.pr3 { padding-right: var(--space-3); }
.pr4 { padding-right: var(--space-4); }
.pr5 { padding-right: var(--space-5); }
.pr6 { padding-right: var(--space-6); }

.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: var(--space-1); }
.pb2 { padding-bottom: var(--space-2); }
.pb3 { padding-bottom: var(--space-3); }
.pb4 { padding-bottom: var(--space-4); }
.pb5 { padding-bottom: var(--space-5); }
.pb6 { padding-bottom: var(--space-6); }

.pl0 { padding-left: 0; }
.pl1 { padding-left: var(--space-1); }
.pl2 { padding-left: var(--space-2); }
.pl3 { padding-left: var(--space-3); }
.pl4 { padding-left: var(--space-4); }
.pl5 { padding-left: var(--space-5); }
.pl6 { padding-left: var(--space-6); }

/* flex */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

/* positioning */
.relative {
  position: relative;
}

.center{
  margin: 0 auto;
}

.absolute {
  position: absolute;
}

/* sizing */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.full {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.fulldvh {
  width: 100%;
  max-height: 100dvh;
  min-height: 100dvh;
}
.absolute{position: absolute;}

.fimg{ width:100%;height:100%;left:0;top:0; object-fit: cover; object-position: center; }
/* visibility */
.hidden {
  display: none;
}

/* =========================================================
   4. OPTIONAL (for your GSAP/banner workflow)
========================================================= */

/* prevents flicker on transforms */
.gpu {
  transform: translateZ(0);
}

/* isolate animation layers */
.isolate {
  isolation: isolate;
}

/* disable pointer interaction */
.no-pointer {
  pointer-events: none;
}

.no-select {
  user-select: none;
}

/* allow pointer interaction */
.pointer {
  pointer-events: auto;
}