/* ==========================================================================
   custom.css
   Zayloft Enterprise UI System
   Premium Bootstrap 5 Theme Layer
   ========================================================================== */

:root{

  /* Core Brand */
  --z-primary: #ff6b35;
  --z-primary-dark: #e85a28;
  --z-secondary: #2563eb;
  --z-accent: #ff9f1c;

  /* Neutral */
  --z-dark: #0f172a;
  --z-dark-2: #1e293b;
  --z-text: #334155;
  --z-muted: #64748b;

  /* Backgrounds */
  --z-bg: #ffffff;
  --z-bg-soft: #f8fafc;
  --z-bg-card: rgba(255,255,255,.88);

  /* Borders */
  --z-border: rgba(15,23,42,.08);
  --z-border-strong: rgba(15,23,42,.16);

  /* Shadows */
  --z-shadow-sm:
    0 8px 24px rgba(15,23,42,.06);

  --z-shadow-md:
    0 18px 40px rgba(15,23,42,.10);

  --z-shadow-lg:
    0 28px 60px rgba(15,23,42,.14);

  /* Radius */
  --z-radius-sm: .75rem;
  --z-radius-md: 1rem;
  --z-radius-lg: 1.4rem;
  --z-radius-xl: 1.8rem;

  /* Gradients */
  --z-gradient-primary:
    linear-gradient(
      135deg,
      var(--z-primary),
      var(--z-secondary)
    );

  --z-gradient-soft:
    radial-gradient(
      1200px 600px at 0% 0%,
      rgba(255,107,53,.16),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 100% 10%,
      rgba(37,99,235,.14),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fafc 100%
    );

  --z-gradient-dark:
    linear-gradient(
      135deg,
      #0f172a,
      #1e293b
    );
}

/* ==========================================================================
   Base
   ========================================================================== */

html,
body{
  height:100%;
  scroll-behavior:smooth;
}

body{
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:var(--z-bg);
  color:var(--z-dark);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
}

a{
  color:var(--z-secondary);
  transition:.2s ease;
}

a:hover{
  color:var(--z-primary);
}

::selection{
  background:rgba(255,107,53,.18);
  color:var(--z-dark);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
  color:var(--z-dark);
  font-weight:800;
  letter-spacing:-0.03em;
}

.display-6{
  letter-spacing:-0.045em;
  line-height:1.1;
}

.text-muted{
  color:var(--z-muted)!important;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar-z{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--z-border);
  transition:.25s ease;
}

.navbar-z.scrolled{
  box-shadow:var(--z-shadow-sm);
}

.navbar-z .navbar-brand{
  font-weight:900;
  color:var(--z-dark);
}

.navbar-z .nav-link{
  color:var(--z-dark);
  opacity:.84;
  font-weight:600;
  position:relative;
  transition:.2s ease;
}

.navbar-z .nav-link:hover,
.navbar-z .nav-link.active{
  color:var(--z-primary);
  opacity:1;
}

.navbar-z .nav-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--z-gradient-primary);
  border-radius:999px;
  transition:.25s ease;
}

.navbar-z .nav-link:hover::after,
.navbar-z .nav-link.active::after{
  width:100%;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  border-radius:var(--z-radius-md);
  min-height:48px;
  font-weight:700;
  padding:.82rem 1.2rem;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

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

.btn-z-primary{
  background:var(--z-gradient-primary);
  color:#fff;
  border:none;
  box-shadow:
    0 10px 22px rgba(255,107,53,.22);
}

.btn-z-primary:hover{
  color:#fff;
  box-shadow:
    0 16px 30px rgba(255,107,53,.28);
}

.btn-z-outline{
  background:#fff;
  color:var(--z-dark);
  border:1px solid var(--z-border);
}

.btn-z-outline:hover{
  border-color:rgba(255,107,53,.30);
  color:var(--z-primary);
  box-shadow:var(--z-shadow-sm);
}

/* ==========================================================================
   Pills & Badges
   ========================================================================== */

.z-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  padding:.45rem .9rem;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.22);

  background:rgba(255,255,255,.75);

  backdrop-filter:blur(10px);

  color:var(--z-muted);

  font-size:.92rem;
  font-weight:500;
}

.badge-soft{
  background:
    rgba(255,107,53,.10);

  color:var(--z-primary);

  border:
    1px solid rgba(255,107,53,.18);

  border-radius:999px;

  padding:.38rem .72rem;

  font-size:.78rem;
  font-weight:800;
}

/* ==========================================================================
   Hero Sections
   ========================================================================== */

.hero-z{
  position:relative;
  overflow:hidden;
  background:var(--z-gradient-soft);
  border-bottom:1px solid var(--z-border);
}

.hero-z::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.55),
      rgba(255,255,255,.10)
    );

  pointer-events:none;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.z-card{
  position:relative;

  background:var(--z-bg-card);

  backdrop-filter:blur(10px);

  border:1px solid var(--z-border);

  border-radius:var(--z-radius-lg);

  box-shadow:var(--z-shadow-sm);

  overflow:hidden;
}

.z-card::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.26),
      transparent
    );

  pointer-events:none;
}

.z-card.hover-lift{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.z-card.hover-lift:hover{
  transform:translateY(-6px);

  border-color:
    rgba(255,107,53,.16);

  box-shadow:var(--z-shadow-lg);
}

/* ==========================================================================
   Icon Dots
   ========================================================================== */

.icon-dot{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,107,53,.12),
      rgba(37,99,235,.10)
    );

  border:
    1px solid rgba(255,107,53,.12);

  color:var(--z-primary);

  flex-shrink:0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.form-select{
  border-radius:var(--z-radius-md);

  border:1px solid var(--z-border);

  background:#fff;

  padding:.9rem 1rem;

  min-height:52px;

  box-shadow:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.form-control:focus,
.form-select:focus{
  border-color:
    rgba(255,107,53,.45);

  box-shadow:
    0 0 0 .25rem rgba(255,107,53,.12);
}

/* ==========================================================================
   Focus States
   ========================================================================== */

:focus-visible{
  outline:none;

  box-shadow:
    0 0 0 .25rem rgba(255,107,53,.18)!important;
}

/* ==========================================================================
   Sticky CTA
   ========================================================================== */

.sticky-cta{
  position:sticky;
  bottom:0;
  z-index:1040;

  background:
    rgba(255,255,255,.92);

  backdrop-filter:blur(14px);

  border-top:
    1px solid var(--z-border);

  box-shadow:
    0 -10px 30px rgba(15,23,42,.05);
}

/* ==========================================================================
   Image Helpers
   ========================================================================== */

.thumb{
  object-fit:cover;
  background:#f1f5f9;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer-z{
  background:
    linear-gradient(
      180deg,
      #f8fafc 0%,
      #ffffff 100%
    );

  border-top:
    1px solid var(--z-border);
}

.footer-card{
  background:#fff;

  border:
    1px solid var(--z-border);

  border-radius:var(--z-radius-lg);

  box-shadow:var(--z-shadow-sm);
}

.footer-link{
  text-decoration:none;
  color:var(--z-muted);
  transition:.18s ease;
}

.footer-link:hover{
  color:var(--z-primary);
}

.social-btn{
  width:44px;
  height:44px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  border:
    1px solid var(--z-border);

  background:#fff;

  color:var(--z-dark);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.social-btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 12px 24px rgba(15,23,42,.08);

  color:var(--z-primary);
}

/* ==========================================================================
   Utility
   ========================================================================== */

.anchor-offset{
  scroll-margin-top:100px;
}

.bg-soft{
  background:var(--z-bg-soft);
}

.border-soft{
  border:1px solid var(--z-border);
}

.shadow-soft{
  box-shadow:var(--z-shadow-sm);
}

/* ==========================================================================
   Stripe Card Element
   ========================================================================== */

#card-element{
  padding:1rem;

  border-radius:var(--z-radius-md);

  border:1px solid var(--z-border);

  background:#fff;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table{
  border-color:var(--z-border);
}

.table thead{
  background:rgba(15,23,42,.03);
}

.table th{
  font-weight:700;
  color:var(--z-dark);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px){

  .display-6{
    font-size:2.5rem;
  }

  .hero-z{
    text-align:left;
  }

}

@media (max-width: 767px){

  .display-6{
    font-size:2.1rem;
  }

  .btn{
    width:100%;
  }

  .sticky-cta .btn{
    width:100%;
  }

  .z-card{
    border-radius:1.2rem;
  }

}

@media (max-width: 575px){

  .display-6{
    font-size:1.85rem;
  }

  .container{
    padding-left:1rem;
    padding-right:1rem;
  }

}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

  *{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }

}