@import url("./PARTIALS/NAV.css");
@import url("./PARTIALS/MAIN.css");
@import url("./PARTIALS/CART.css");
@import url("./PARTIALS/DASHBOARD.css");
@import url("./PARTIALS/ADMIN.css");
@import url("./PARTIALS/FOOTER.css");

:root {
  --font-body: "Outfit", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Syne", "Outfit", sans-serif;
}

:root[data-theme="dark"],
body[data-theme="dark"] {
  --color-primary: #4EEA1E;
  --color-primary-hover: #3FC51A;
  --color-primary-light: #B7FF8A;
  --color-secondary: #7AD9FF;
  --color-secondary-light: #BFEFFF;
  --color-secondary-dark: #2C95C0;
  --gradient-primary: linear-gradient(135deg, #4EEA1E, #1EAE52);
  --color-bg: #04070D;
  --color-surface: #0C1320;
  --color-surface-soft: #111B2C;
  --color-text: #F3F7FF;
  --color-text-secondary: #B1C0D4;
  --color-border: #1A263A;
  --color-success: #4EEA1E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-shadow: rgba(2, 6, 13, 0.72);
}

:root[data-theme="light"],
body[data-theme="light"] {
  --color-primary: #2B9517;
  --color-primary-hover: #227511;
  --color-primary-light: #39C91F;
  --color-secondary: #2A7D9E;
  --color-secondary-light: #4DAFD1;
  --color-secondary-dark: #1E637E;
  --gradient-primary: linear-gradient(135deg, #2B9517, #1F7F43);
  --color-bg: #F5FAFF;
  --color-surface: #FFFFFF;
  --color-surface-soft: #EEF4FB;
  --color-text: #0A1425;
  --color-text-secondary: #3F5574;
  --color-border: #C9D6E6;
  --color-success: #2B9517;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-shadow: rgba(9, 20, 36, 0.11);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

#three-background {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

#three-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(5, 8, 15, 0.08), rgba(5, 8, 15, 0.5) 68%, rgba(5, 8, 15, 0.76)),
    linear-gradient(180deg, rgba(5, 8, 15, 0.2), rgba(5, 8, 15, 0.54));
}

#three-background canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  opacity: 0.78;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

body[data-theme="dark"] #three-background canvas {
  opacity: 0.74;
  filter: saturate(0.92) brightness(0.82);
}

body[data-theme="light"] #three-background canvas {
  opacity: 0.44;
  filter: saturate(0.72) brightness(0.82);
}

body[data-theme="light"] #three-background::after {
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(245, 250, 255, 0.03), rgba(245, 250, 255, 0.18) 68%, rgba(245, 250, 255, 0.28)),
    linear-gradient(180deg, rgba(245, 250, 255, 0.04), rgba(245, 250, 255, 0.2));
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin-top: 0;
}

.kick-word-mark {
  display: inline-block;
  color: #4EEA1E;
  font-family: "Press Start 2P", var(--font-display);
  font-weight: 400;
  font-size: 0.88em;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  vertical-align: baseline;
  transform: translateY(0.08em);
  text-shadow:
    0 0 7px rgba(78, 234, 30, 0.34),
    0 0 14px rgba(78, 234, 30, 0.22);
}

body[data-theme="light"] .kick-word-mark {
  color: #227A11;
  text-shadow:
    0 0 4px rgba(34, 122, 17, 0.16),
    0 0 8px rgba(34, 122, 17, 0.08);
}

h1 .kick-word-mark,
h2 .kick-word-mark,
h3 .kick-word-mark {
  font-size: 0.92em;
  transform: translateY(0.07em);
}

.chip .kick-word-mark {
  font-size: 0.84em;
  transform: translateY(0.06em);
}

body[data-theme="light"] .chip {
  color: #236F12;
  border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 10%, white);
}

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

.container {
  width: min(1160px, 92%);
  margin-inline: auto;
}

.section {
  padding: 5.75rem 0;
  position: relative;
  z-index: 2;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary-light);
  font-weight: 700;
  font-size: 0.77rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.btn {
  border: 1px solid transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 0.72rem 1.2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.btn-primary:hover {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.btn-secondary {
  background: color-mix(in srgb, var(--color-surface-soft) 88%, transparent);
  color: var(--color-text);
  border-color: var(--color-border);
}

.full {
  width: 100%;
}

.section-head {
  max-width: 700px;
  margin-bottom: 2rem;
}

.section-head h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.8rem);
  margin: 0.8rem 0 0.7rem;
}

.section-head p {
  margin: 0;
  color: var(--color-text-secondary);
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bg-orb {
  position: fixed;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}

.bg-orb-1 {
  top: -16vw;
  left: -8vw;
  background: var(--color-primary);
}

.bg-orb-2 {
  bottom: -22vw;
  right: -6vw;
  background: var(--color-secondary);
}

.grid-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%),
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--color-bg) 40%, black) 100%),
    linear-gradient(transparent 95%, color-mix(in srgb, var(--color-primary) 30%, transparent) 95%),
    linear-gradient(90deg, transparent 95%, color-mix(in srgb, var(--color-primary) 25%, transparent) 95%);
  background-size: auto, auto, 55px 55px, 55px 55px;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

body.three-active .grid-backdrop {
  opacity: 0.06;
}

body.three-active .bg-orb {
  opacity: 0.09;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  body.cursor-fx-active,
  body.cursor-fx-active * {
    cursor: none !important;
  }
}

#cursorFx {
  position: fixed;
  inset: 0;
  z-index: 2147483647 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#cursorFx.visible {
  opacity: 1;
}

.cursor-ring,
.cursor-core,
.cursor-orb,
.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
}

.cursor-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 78%, white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 26%, transparent),
    0 0 18px color-mix(in srgb, var(--color-primary) 30%, transparent);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cursor-core {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary-light) 82%, white);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 48%, transparent);
  transition: transform 0.18s ease, background 0.2s ease;
}

.cursor-orb {
  display: none;
}

.cursor-orb-b {
  display: none;
}

.cursor-trail {
  display: none;
}

#cursorFx.is-hover .cursor-ring {
  width: 38px;
  height: 38px;
  border-color: color-mix(in srgb, var(--color-primary-light) 82%, white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent),
    0 0 22px color-mix(in srgb, var(--color-primary) 34%, transparent);
}

#cursorFx.is-hover .cursor-core {
  transform: translate3d(-50%, -50%, 0) scale(1.2);
}

#cursorFx.is-down .cursor-ring {
  width: 22px;
  height: 22px;
}

#cursorFx.is-down .cursor-core {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #cursorFx {
    display: none;
  }
}

@media (max-width: 860px) {
  .section {
    padding: 4.2rem 0;
  }
}