:root {
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-price: "Manrope", system-ui, sans-serif;
  --color-brand-teal: #b7ff3c;
  --color-brand-teal-dark: #141811;
  --color-brand-teal-light: #e8ffc6;
  --color-brand-teal-cream: #f6f4ea;
  --color-gray-50: #f6f4ea;
  --color-gray-100: #e8e4d7;
  --color-gray-200: #d8d2c3;
  --color-gray-300: #beb7a8;
  --color-gray-400: #847e72;
  --color-gray-500: #625d53;
  --color-gray-600: #4a463f;
  --color-gray-700: #312f2a;
  --color-gray-800: #20221d;
  --color-gray-900: #141811;
  --color-gray-950: #0b0d09;
  --color-slate-200: #ece8dc;
  --color-slate-400: #9b9485;
  --color-slate-800: #252720;
  --color-slate-900: #12140f;
  --color-teal-600: #8edb22;
  --color-teal-900: #151a12;
  --color-red-600: #b7ff3c;
  --color-red-950: #141811;
  --color-red-50: #f6f4ea;
  --color-red-100: #e8ffc6;
  --color-red-200: #d7f99a;
  --color-rose-500: #9ee832;
  --color-amber-400: #b7ff3c;
  --color-amber-500: #96df23;
  --color-amber-900: #141811;
}

* {
  letter-spacing: 0 !important;
}

html,
body {
  font-family: var(--font-sans);
  background: #10120f;
  color: #141811;
}

body {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(180deg, #10120f 0%, #191b15 50%, #10120f 100%);
  background-size: 42px 42px, auto;
}

body::-webkit-scrollbar-thumb {
  background: #b7ff3c;
}

#root > div {
  background: transparent !important;
}

#root main {
  max-width: 500px;
  background: #f8f6ed !important;
  border: 1px solid rgba(183, 255, 60, .18) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .45) !important;
}

section {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

section.bg-white,
section[class*="bg-white"] {
  background: #f8f6ed !important;
}

section.bg-gray-50,
section[class*="bg-gray-50"] {
  background: #eeeadf !important;
}

#hero-section {
  background: #12140f !important;
  color: #f8f6ed;
  padding-top: 18px !important;
  border-bottom: 1px solid rgba(183, 255, 60, .22);
}

#hero-section h1 {
  color: #f8f6ed !important;
  font-family: var(--font-display);
  font-size: 34px !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
}

#hero-section p,
#hero-section .text-brand-teal-dark {
  color: #b7ff3c !important;
}

#hero-section > div:first-child {
  border-color: rgba(183, 255, 60, .2) !important;
}

h1,
h2,
h3,
.font-display {
  font-family: var(--font-display) !important;
}

h2 {
  font-size: 23px !important;
  line-height: 1.16 !important;
  font-weight: 800 !important;
  color: #141811 !important;
}

h3 {
  line-height: 1.2 !important;
}

p,
li,
span,
a,
label,
input,
button {
  font-family: var(--font-sans);
}

.text-teal,
.text-teal-600,
.text-brand-teal,
.text-brand-teal-dark {
  color: #8edb22 !important;
}

.bg-brand-teal,
.bg-red-600,
.bg-green-500 {
  background: #b7ff3c !important;
  color: #141811 !important;
}

.bg-brand-teal-light,
.bg-red-50,
.bg-amber-50 {
  background: #e8ffc6 !important;
}

.bg-brand-teal-cream\/30,
.bg-brand-teal-cream\/50,
.bg-brand-teal\/5,
.bg-gray-50,
.bg-gray-50\/50 {
  background: rgba(255, 255, 255, .58) !important;
}

.border-brand-teal,
.border-brand-teal-light,
.border-brand-teal-light\/50,
.border-red-100,
.border-red-200,
.border-red-600,
.border-amber-200,
.border-gray-50,
.border-gray-100,
.border-gray-200 {
  border-color: rgba(20, 24, 17, .12) !important;
}

.w-12.h-1 {
  width: 64px !important;
  height: 3px !important;
  background: #b7ff3c !important;
  border-radius: 999px;
}

.media-card {
  aspect-ratio: 2 / 3;
  background: #ebe6d9;
  border: 1px solid rgba(20, 24, 17, .1) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 42px rgba(20, 24, 17, .12) !important;
}

.premium-product-photo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 18px;
  object-fit: cover;
  filter: saturate(.88) contrast(1.08) brightness(1.02);
}

section .rounded-xl,
section .rounded-2xl {
  border-radius: 14px !important;
}

section div[class*="shadow"],
section div[class*="border"] {
  box-shadow: 0 12px 28px rgba(20, 24, 17, .07) !important;
}

section div[class*="grid"] > div,
section form,
#faq-section .max-w-sm > div,
#reviews-section .flex-col > div {
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(20, 24, 17, .1) !important;
  backdrop-filter: blur(10px);
}

#hero-section ul,
#order-section form,
#reviews-section .flex-col > div,
#faq-section .max-w-sm > div {
  border-radius: 18px !important;
}

#hero-section ul {
  background: rgba(255, 255, 255, .06);
  padding: 16px;
}

.primary-cta-btn,
.fixed button {
  min-height: 56px;
  border: 1px solid rgba(183, 255, 60, .7) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #b7ff3c 0%, #e0ff7b 54%, #9ee832 100%) !important;
  color: #11140f !important;
  box-shadow: 0 16px 34px rgba(115, 180, 35, .34) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

.primary-cta-btn:hover,
.fixed button:hover {
  transform: translateY(-2px) scale(1.01);
  filter: saturate(1.08);
  box-shadow: 0 20px 42px rgba(115, 180, 35, .44) !important;
}

.primary-cta-btn:active,
.fixed button:active {
  transform: translateY(0) scale(.98);
}

.animate-bounce {
  animation: none !important;
}

.animate-pulse {
  animation-duration: 2.8s !important;
}

input {
  min-height: 52px;
  background: #fffdf7 !important;
  border-color: rgba(20, 24, 17, .14) !important;
  color: #141811 !important;
  font-size: 14px !important;
}

input:focus {
  border-color: #b7ff3c !important;
  box-shadow: 0 0 0 4px rgba(183, 255, 60, .22) !important;
}

label {
  color: #625d53 !important;
}

.fixed.bottom-0 {
  background: rgba(18, 20, 15, .9) !important;
  border-color: rgba(183, 255, 60, .24) !important;
}

footer {
  background: #11140f !important;
  color: #c8c2b3 !important;
  border-color: rgba(183, 255, 60, .18) !important;
}

footer p:first-child {
  color: #f8f6ed !important;
}

a:hover {
  color: #8edb22 !important;
}

@media (max-width: 420px) {
  #root main {
    max-width: 100%;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #hero-section h1 {
    font-size: 31px !important;
  }

  h2 {
    font-size: 21px !important;
  }

  .grid-cols-2 {
    gap: 10px !important;
  }
}

body:has(.thank_name) {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(180deg, #10120f 0%, #191b15 55%, #10120f 100%) !important;
  background-size: 42px 42px, auto !important;
  font-family: var(--font-sans) !important;
}

body:has(.thank_name) .container {
  max-width: 680px;
  width: min(92vw, 680px);
  padding: 0;
}

body:has(.thank_name) .col-12 {
  background: #f8f6ed;
  border: 1px solid rgba(183, 255, 60, .22);
  border-radius: 22px;
  padding: 42px 28px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .42);
}

body:has(.thank_name) h1 {
  margin-bottom: 18px;
  color: #141811;
  font-family: var(--font-display) !important;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 800;
  text-transform: uppercase;
}

body:has(.thank_name) .thank_name {
  color: #77b814;
}

body:has(.thank_name) p {
  margin-bottom: 14px;
  color: #4a463f;
  font-size: 17px;
  line-height: 1.55;
}

body:has(.thank_name) .thank-please {
  display: inline-block;
  margin: 12px 0 20px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #b7ff3c;
  color: #141811;
  font-weight: 800;
}

body:has(.thank_name) .info {
  border-top: 1px solid rgba(20, 24, 17, .12);
  color: #141811;
}

body:has(.thank_name) a {
  color: #77b814;
  font-weight: 800;
}

@media (max-width: 480px) {
  body:has(.thank_name) {
    align-items: flex-start;
    padding-top: 24px;
  }

  body:has(.thank_name) .col-12 {
    padding: 30px 18px;
    border-radius: 18px;
  }

  body:has(.thank_name) h1 {
    font-size: 25px;
  }
}