@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --silver: 220 10% 75%;
  --silver-light: 220 10% 92%;
  --silver-dark: 220 10% 45%;
  --gold: 43 74% 49%;
  --gold-light: 43 65% 65%;
  --gold-dark: 38 72% 38%;
  --bronze: 28 60% 45%;
  --bronze-light: 30 50% 55%;
  --background: 220 10% 98%;
  --foreground: 0 0% 8%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 8%;
  --primary: 220 15% 12%;
  --primary-foreground: 220 10% 98%;
  --secondary: 220 10% 92%;
  --secondary-foreground: 220 15% 15%;
  --muted: 220 10% 96%;
  --muted-foreground: 220 10% 40%;
  --accent: 43 74% 49%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 72% 29%;
  --success-foreground: 0 0% 100%;
  --border: 220 10% 85%;
  --input: 220 10% 90%;
  --ring: 43 74% 49%;
  --gradient-hero: linear-gradient(135deg, hsl(220 15% 8%) 0%, hsl(220 12% 18%) 50%, hsl(220 10% 25%) 100%);
  --gradient-silver: linear-gradient(180deg, hsl(220 10% 96%) 0%, hsl(220 10% 90%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(43 74% 49%) 0%, hsl(38 72% 38%) 100%);
  --gradient-bronze: linear-gradient(135deg, hsl(28 60% 45%) 0%, hsl(30 50% 55%) 100%);
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(220 10% 97%) 100%);
  --shadow-sm: 0 2px 8px -2px hsla(220, 15%, 12%, 0.08);
  --shadow-md: 0 8px 24px -8px hsla(220, 15%, 12%, 0.12);
  --shadow-lg: 0 16px 48px -12px hsla(220, 15%, 12%, 0.18);
  --shadow-xl: 0 24px 64px -16px hsla(220, 15%, 12%, 0.25);
  --shadow-gold: 0 8px 32px -8px hsla(43, 74%, 49%, 0.35);
  --shadow-inner: inset 0 2px 4px 0 hsla(220, 15%, 12%, 0.06);
  --radius: 0.5rem;
}
html{scroll-behavior:smooth}
body{margin:0;background-color:hsl(var(--background));color:hsl(var(--foreground));font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,serif}
::selection{background-color:hsl(43 74% 49% / 0.3);color:hsl(220 15% 12%)}
*:focus-visible{outline:2px solid hsl(43 74% 49%);outline-offset:2px}
button:active{transform:scale(0.98)}
.text-gradient-gold{background:linear-gradient(135deg, hsl(43 74% 49%) 0%, hsl(38 72% 38%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.glass{background:hsla(0,0%,100%,0.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid hsla(0,0%,100%,0.12)}
.glass-dark{background:hsla(220,15%,6%,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,0.08)}
.shine{position:relative;overflow:hidden}
.shine::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to right, transparent 0%, hsla(0,0%,100%,0.1) 50%, transparent 100%);transform:rotate(30deg);transition:transform .6s ease;pointer-events:none}
.shine:hover::after{transform:rotate(30deg) translateX(100%)}
.nav-scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);box-shadow:var(--shadow-lg)}

.top-contact-bar{position:fixed;top:0;left:0;right:0;z-index:60}

/* Mobile header: keep logo readable while scrolling */
@media (max-width: 1023px){
  /* Header is fixed in markup; sticky here is harmless and improves behavior in some mobile browsers */
  [data-site-header]{
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
    background-color:hsl(var(--primary)) !important;
    background-image:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Prevent the scroll JS class from switching to a light background on mobile */
  [data-site-header].nav-scrolled{
    background: hsl(var(--primary)) !important;
    box-shadow: var(--shadow-lg) !important;
  }
}

@media (max-width: 768px) {
  .mobile-company-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin-left: 10px;
    white-space: nowrap;
  }
}


/* Mobile header: sticky + dark background, and remove white gap caused by main padding */
@media (max-width: 768px) {
  header[data-site-header]{
    position: sticky !important;
    top: 0 !important;
    background-color: #0f172a !important;
    background-image: none !important;
  }
  main{
    padding-top: 0 !important;
  }
  .mobile-company-name{
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}