/* TailorBiz — works with Tailwind CDN *and* degrades when CDN is blocked (e.g. file:// offline). */

/* -------------------------------------------------------------------------- */
/* Base + no-Tailwind fallbacks                                               */
/* -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #050506;
  color: #f7f3eb;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Readable links when Tailwind color utilities are missing (stops default blue on black) */
a {
  color: #e3c77a;
}
a:hover {
  color: #f0d78c;
}

header a,
footer a {
  color: #c4b8a5;
  text-decoration: none;
}

header a:hover,
footer a:hover {
  color: #ffffff;
}

/* Brand lockup: not default link blue */
.sf-site-header a[href="#top"] {
  color: #f7f3eb;
}

.sf-site-header a[href="#top"] span span {
  color: #e3c77a;
}

.sf-site-header nav a {
  color: #b9aa96;
}

/* Headings/body copy contrast without utility classes */
main h1,
main h2,
main h3 {
  color: #ffffff;
}

main p,
main li,
main figcaption {
  color: #b9aa96;
}

main blockquote {
  color: #f7f3eb;
}

/* Hero CTAs without Tailwind gradients */
section.hero-mesh a[href="#demo"] {
  background: linear-gradient(90deg, #c9a227, #e07a2f);
  color: #0f1014 !important;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

section.hero-mesh a[href="#trial"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff !important;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

section.hero-mesh h1 {
  font-family: Outfit, Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.65rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* Positioning + stacking (required when Tailwind CDN does not load) */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.inset-0 {
  inset: 0;
}

.inset-x-0 {
  left: 0;
  right: 0;
}

.top-0 {
  top: 0;
}

.-z-10 {
  z-index: -10;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}

.z-\[100\] {
  z-index: 100;
}

.overflow-hidden {
  overflow: hidden;
}

/* Hero: wave layer must not sit in document flow and cover copy */
.sf-hero-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
}

.sf-hero-inner {
  position: relative;
  z-index: 1;
}

.pt-28 {
  padding-top: 7rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .lg\:pt-32 {
    padding-top: 8rem;
  }

  .lg\:pb-28 {
    padding-bottom: 7rem;
  }
}

/* Fixed chrome (Tailwind "fixed/top/inset/z" may be missing if CDN fails) */
#page-loader.sf-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #050506;
}

.sf-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(5, 5, 6, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body > main {
  padding-top: 5.25rem;
}

/* Layout primitives (mirror common Tailwind tokens used on this page) */
.max-w-7xl {
  max-width: 80rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

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

.justify-between {
  justify-content: space-between;
}

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

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

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-12 {
  gap: 3rem;
}

@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex !important;
  }

  .md\:hidden {
    display: none !important;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

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

  .lg\:items-end {
    align-items: end;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.text-white {
  color: #ffffff;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-2xl {
  border-radius: 1rem;
}

/* Nav: default hide desktop links on small screens like Tailwind's `hidden md:flex` */
header nav[aria-label="Primary"] {
  display: none;
}

@media (min-width: 768px) {
  header nav[aria-label="Primary"] {
    display: flex !important;
    align-items: center;
    gap: 2rem;
  }

  header .sf-header-cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  #nav-toggle {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  header .sf-header-cta {
    display: none;
  }
}

/* Hero section keeps height even if utilities fail */
section.hero-mesh {
  position: relative;
  overflow: hidden;
  min-height: min(92vh, 980px);
  padding-top: 6.5rem;
  padding-bottom: 4rem;
}

/* -------------------------------------------------------------------------- */
/* Original design tokens                                                      */
/* -------------------------------------------------------------------------- */

.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.glass-dark {
  background: linear-gradient(135deg, rgba(10, 10, 12, 0.72), rgba(10, 10, 12, 0.45));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.text-gradient {
  background: linear-gradient(120deg, #f0d78c 0%, #c9a227 35%, #e07a2f 70%, #f7f3eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* Solid fallback when background-clip:text is unsupported */
  color: #e3c77a;
  -webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
  .text-gradient {
    -webkit-text-fill-color: currentColor;
    color: #e3c77a;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
  }
}

.border-gradient {
  border: 1px solid transparent;
  background:
    linear-gradient(#0b0c10, #0b0c10) padding-box,
    linear-gradient(
        135deg,
        rgba(201, 162, 39, 0.65),
        rgba(224, 122, 47, 0.35),
        rgba(255, 255, 255, 0.12)
      )
      border-box;
}

/* Scroll “reveal”: keep content visible if JS/CDN fails (no more opacity:0 trap) */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
  }
}

.hero-mesh {
  background:
    radial-gradient(ellipse 120% 80% at 10% 0%, rgba(201, 162, 39, 0.22), transparent 55%),
    radial-gradient(ellipse 90% 60% at 90% 10%, rgba(224, 122, 47, 0.18), transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(247, 243, 235, 0.08), transparent 55%),
    linear-gradient(180deg, #050506 0%, #0b0c10 45%, #12131a 100%);
}

.fabric-wave {
  filter: blur(0.2px);
}

#page-loader {
  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}

#page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}