/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap") layer(base);
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-gray-200: oklch(0.928 0.006 264.531);
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(
      --font-sans--font-variation-settings
    );
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(
      --font-mono--font-feature-settings
    );
    --default-mono-font-variation-settings: var(
      --font-mono--font-variation-settings
    );
    
    /* Proxmox Orange Theme Colors */
    --color-primary: #E57035;
    --color-primary-dark: #C55A28;
    --color-primary-light: #F08A5A;
    --color-primary-50: #FDF2ED;
    --color-primary-100: #F9E4D8;
    
    --color-dark: #1A1A1A;
    --color-dark-2: #2D2D2D;
    --color-dark-3: #3D3D3D;
    --color-dark-6: #6B7280;
    --color-dark-700: #1a1a1ab3;
    
    --color-secondary: #13c296;
    --color-body-color: #4B5563;
    --color-body-secondary: #6B7280;
    --color-stroke: #E5E7EB;
    --color-gray-1: #F9FAFB;
    --color-gray-2: #F3F4F6;
    --color-gray-7: #D1D5DB;
  }
}

@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var( --default-font-variation-settings, normal );
    -webkit-tap-highlight-color: transparent;
  }
  body {
    line-height: inherit;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

/* Custom Proxmox Theme Styles */
@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md bg-primary px-7 py-[14px] text-center text-base font-medium text-white shadow-1 transition duration-300 ease-in-out hover:bg-primary-dark;
  }
  
  .btn-outline {
    @apply inline-flex items-center justify-center rounded-md border-2 border-primary px-7 py-[14px] text-center text-base font-medium text-primary transition duration-300 ease-in-out hover:bg-primary hover:text-white;
  }
  
  .section-title {
    @apply mb-4 text-3xl font-bold text-dark sm:text-4xl lg:text-5xl;
  }
  
  .section-subtitle {
    @apply mx-auto max-w-[600px] text-base font-medium text-body-color sm:text-lg;
  }
  
  .ud-header {
    @apply transition-all duration-300;
  }
  
  .ud-header.sticky {
    @apply fixed top-0 left-0 z-50 w-full bg-white shadow-md;
  }
  
  .ud-header.sticky .navbar-logo img {
    @apply brightness-100;
  }
  
  .mega-menu {
    @apply invisible absolute left-0 top-full w-full bg-white py-6 opacity-0 shadow-lg transition-all duration-300 group-hover:visible group-hover:opacity-100;
  }
  
  .mega-menu-grid {
    @apply container mx-auto grid grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-4;
  }
  
  .mega-menu-column h4 {
    @apply mb-4 text-lg font-semibold text-dark;
  }
  
  .mega-menu-column ul li {
    @apply mb-2;
  }
  
  .mega-menu-column ul li a {
    @apply text-sm text-body-color hover:text-primary transition-colors duration-200;
  }
  
  .service-card {
    @apply rounded-lg bg-white p-8 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
  }
  
  .service-icon {
    @apply mb-6 flex h-[70px] w-[70px] items-center justify-center rounded-lg bg-primary/10 text-primary;
  }
  
  .pricing-card {
    @apply rounded-lg bg-white p-8 shadow-lg transition-all duration-300 hover:shadow-xl;
  }
  
  .pricing-card.featured {
    @apply border-2 border-primary;
  }
  
  .pricing-header {
    @apply mb-8 border-b border-stroke pb-8;
  }
  
  .pricing-price {
    @apply text-4xl font-bold text-dark;
  }
  
  .pricing-period {
    @apply text-sm text-body-color;
  }
  
  .pricing-features {
    @apply mb-8 space-y-4;
  }
  
  .pricing-features li {
    @apply flex items-center text-base text-body-color;
  }
  
  .pricing-features li svg {
    @apply mr-3 h-5 w-5 text-primary;
  }
  
  .cookie-notice {
    @apply fixed bottom-0 left-0 right-0 z-50 transform bg-dark-2 p-4 text-white transition-transform duration-300;
  }
  
  .cookie-notice.hidden {
    @apply translate-y-full;
  }
  
  .blog-card {
    @apply overflow-hidden rounded-lg bg-white shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
  }
  
  .blog-card img {
    @apply h-48 w-full object-cover;
  }
  
  .blog-content {
    @apply p-6;
  }
  
  .blog-meta {
    @apply mb-3 flex items-center text-sm text-body-secondary;
  }
  
  .blog-title {
    @apply mb-3 text-xl font-bold text-dark hover:text-primary;
  }
  
  .blog-excerpt {
    @apply text-base text-body-color;
  }
}

/* ============================================
   Modern Animation System
   ============================================ */

/* --- Base scroll-reveal setup --- */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

/* Direction variants */
[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="fade-down"] { transform: translateY(-40px); }
[data-animate="fade-left"] { transform: translateX(40px); }
[data-animate="fade-right"] { transform: translateX(-40px); }
[data-animate="fade-in"] { transform: scale(0.95); }
[data-animate="zoom-in"] { transform: scale(0.85); }

/* Stagger delays for grid children */
[data-stagger] > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger] > *:nth-child(2) { transition-delay: 100ms; }
[data-stagger] > *:nth-child(3) { transition-delay: 200ms; }
[data-stagger] > *:nth-child(4) { transition-delay: 300ms; }
[data-stagger] > *:nth-child(5) { transition-delay: 400ms; }
[data-stagger] > *:nth-child(6) { transition-delay: 500ms; }
[data-stagger] > *:nth-child(7) { transition-delay: 600ms; }
[data-stagger] > *:nth-child(8) { transition-delay: 700ms; }

/* Stagger children also start hidden */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* --- Keyframe Animations --- */

/* Legacy fadeInUp */
.fadeInUp {
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Smooth float for decorative elements */
@keyframes smoothFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(2deg); }
  66% { transform: translateY(8px) rotate(-1deg); }
}

/* Pulse glow for CTAs */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 112, 53, 0.4); }
  50% { box-shadow: 0 0 20px 8px rgba(229, 112, 53, 0); }
}

/* Gradient shimmer for backgrounds */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Counter number pop */
@keyframes counterPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Underline draw for links */
@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

/* --- Modern Component Enhancements --- */

/* Card hover lift with glow */
.card-modern {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(229, 112, 53, 0.1);
}

/* Button modern hover */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-modern::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-modern:hover::after {
  transform: translateX(100%);
}

.btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(229, 112, 53, 0.4);
}

/* Icon bounce on card hover */
.icon-animate {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-modern:hover .icon-animate {
  transform: scale(1.1) rotate(-5deg);
}

/* Link arrow slide */
.link-arrow i,
.link-arrow svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-arrow:hover i,
.link-arrow:hover svg {
  transform: translateX(6px);
}

/* Section label accent line */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.section-label::before {
  content: '';
  width: 40px;
  height: 2px;
  background: #E57035;
  display: inline-block;
}

/* Stats counter styling */
.stat-number {
  display: inline-block;
  animation: counterPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gradient text for headings */
.gradient-text {
  background: linear-gradient(135deg, #E57035 0%, #F08A5A 50%, #E57035 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

/* CTA pulse */
.cta-pulse {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* Trust badge line-up animation */
.trust-badge {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.trust-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Decorative float */
.deco-float {
  animation: smoothFloat 8s ease-in-out infinite;
}

.deco-float-reverse {
  animation: smoothFloat 10s ease-in-out infinite reverse;
}

/* Smooth image reveal */
.img-reveal {
  overflow: hidden;
  border-radius: 16px;
}

.img-reveal img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-reveal:hover img {
  transform: scale(1.05);
}

/* Divider wave between sections */
.section-wave {
  position: relative;
}

.section-wave::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 60px;
  background: inherit;
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-stagger] > *,
  .card-modern,
  .btn-modern,
  .icon-animate,
  .deco-float,
  .deco-float-reverse {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-1);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

/* Table Styles */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.prose thead {
  background: linear-gradient(135deg, #E57035 0%, #C55A28 100%);
  color: white;
}

.prose th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.prose td {
  padding: 1rem;
  border-bottom: 1px solid #E5E7EB;
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

.prose tbody tr:hover {
  background-color: #FDF2ED;
}

.prose tbody tr:nth-child(even) {
  background-color: #F9FAFB;
}

.prose tbody tr:nth-child(even):hover {
  background-color: #FDF2ED;
}

.prose td:first-child {
  font-weight: 500;
  color: #1a1a1a;
}

.prose td:nth-child(2) {
  color: #059669;
  font-weight: 500;
}