/* =====================================================================
   GN Logistik — Compiled design tokens + custom layers
   Faithful port of src/index.css from the React reference app.
   Tailwind utilities themselves are provided by the Play CDN loaded
   from functions.php (`tailwindcss`); this file only contributes the
   custom CSS variables, component classes, and keyframes the React
   app relies on through `@layer` and CSS variables.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 224 50% 15%;
  --card: 0 0% 100%;
  --card-foreground: 224 50% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 50% 15%;
  --primary: 25 92% 54%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 28 96% 60%;
  --primary-dark: 22 88% 46%;
  --secondary: 224 54% 24%;
  --secondary-foreground: 0 0% 98%;
  --accent: 224 54% 24%;
  --accent-foreground: 0 0% 98%;
  --muted: 220 13% 96%;
  --muted-foreground: 224 20% 40%;
  --whatsapp: 142 70% 42%;
  --whatsapp-foreground: 0 0% 100%;
  --call: 224 54% 24%;
  --call-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 13% 88%;
  --input: 220 13% 91%;
  --ring: 25 92% 54%;
  --radius: 1rem;
  --gradient-primary: linear-gradient(135deg, hsl(25, 92%, 54%), hsl(20, 88%, 48%));
  --gradient-secondary: linear-gradient(135deg, hsl(224, 54%, 24%), hsl(224, 54%, 18%));
  --gradient-hero: linear-gradient(135deg, hsl(224, 54%, 24%) 0%, hsl(224, 60%, 16%) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(25, 92%, 54%), hsl(20, 88%, 46%));
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 40px hsl(25 92% 54% / 0.35);
  --shadow-gold: 0 8px 32px hsl(25 92% 54% / 0.3);
}

.dark {
  --background: 224 50% 8%;
  --foreground: 0 0% 98%;
  --card: 224 50% 12%;
  --card-foreground: 0 0% 98%;
  --popover: 224 50% 12%;
  --popover-foreground: 0 0% 98%;
  --primary: 25 92% 54%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 98%;
  --secondary-foreground: 224 54% 24%;
  --muted: 224 30% 18%;
  --muted-foreground: 0 0% 70%;
  --accent: 25 92% 54%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 224 30% 22%;
  --input: 224 30% 22%;
  --ring: 25 92% 54%;
}

html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  touch-action: manipulation;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
input, textarea, select { font-size: 16px !important; }
html, body { height: 100%; overflow-x: hidden; }

@media (hover: none) and (pointer: coarse) {
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
}

@supports (height: 100dvh) { .h-screen-stable { height: 100dvh; } }
.safe-area-top { padding-top: env(safe-area-inset-top); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
.pb-safe { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }

img { background-color: hsl(var(--muted) / 0.25); }
img[src=""], img:not([src]) { background-color: transparent; }

@media (max-width: 1023px) { * { background-attachment: scroll !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ── Component layer (ported from src/index.css @layer components) ── */
.glass-card {
  background: hsl(var(--card) / 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
}
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 0 50px hsl(30 100% 60% / 0.4); }
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--whatsapp));
  color: hsl(var(--whatsapp-foreground));
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s;
}
.btn-whatsapp:hover { transform: scale(1.02); filter: brightness(1.1); }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid hsl(var(--primary));
  color: hsl(var(--primary));
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s;
  background: transparent;
}
.btn-outline:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.section-padding { padding: 2rem 0.75rem; }
@media (min-width: 768px) { .section-padding { padding: 4rem 2rem; } }
.section-padding-compact { padding: 1.5rem 0.75rem; }
@media (min-width: 768px) { .section-padding-compact { padding: 3rem 2rem; } }
.form-input {
  width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.5);
  backdrop-filter: blur(4px);
  transition: all 0.3s;
  min-height: 48px; font-size: 16px !important;
}
.form-input:focus { outline: none; box-shadow: 0 0 0 2px hsl(var(--primary) / 0.5); border-color: hsl(var(--primary)); }
@media (max-width: 768px) { .form-input { padding: 1rem; min-height: 52px; } }

.float-animation { animation: gnl-float 3s ease-in-out infinite; }
@keyframes gnl-float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
.pulse-ring { animation: gnl-pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes gnl-pulse-ring {
  0%,100% { box-shadow: 0 0 0 0 hsl(142 70% 49% / 0.4); }
  50%     { box-shadow: 0 0 0 15px hsl(142 70% 49% / 0); }
}
.gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-gold { box-shadow: var(--shadow-gold); }
.shadow-premium { box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15); }

/* Tailwind keyframes used by class names like animate-fade-in */
@keyframes fade-in { 0% { opacity:0; transform: translateY(20px);} 100% { opacity:1; transform: translateY(0);} }
@keyframes fade-in-up { 0% { opacity:0; transform: translateY(30px);} 100% { opacity:1; transform: translateY(0);} }
@keyframes slide-in-right { 0% { opacity:0; transform: translateX(30px);} 100% { opacity:1; transform: translateX(0);} }
@keyframes scale-in { 0% { opacity:0; transform: scale(0.95);} 100% { opacity:1; transform: scale(1);} }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 hsl(24 95% 53% / 0.4);} 50% { box-shadow: 0 0 20px 10px hsl(24 95% 53% / 0);} }
@keyframes bounce-subtle { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-5px);} }
.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.5s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.4s ease-out forwards; }
.animate-float { animation: gnl-float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-bounce-subtle { animation: bounce-subtle 2s ease-in-out infinite; }

/* Marquee (TrustedBrands) */
@keyframes gn-marquee { from { transform: translate3d(0,0,0);} to { transform: translate3d(-50%,0,0);} }
@keyframes gn-marquee-reverse { from { transform: translate3d(-50%,0,0);} to { transform: translate3d(0,0,0);} }
.marquee-track { animation: gn-marquee 70s linear infinite; will-change: transform; }
.marquee-track-reverse { animation: gn-marquee-reverse 90s linear infinite; will-change: transform; }
.group:hover .marquee-track, .group:hover .marquee-track-reverse { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track, .marquee-track-reverse { animation: none; } }

/* Mobile container overrides */
@media (max-width: 1023px) {
  .container { max-width: 100% !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .glass-card { border-radius: 0.75rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* Blog content */
.blog-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(var(--border)); }
.blog-content h3 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 1rem; }
.blog-content p { color: hsl(var(--muted-foreground)); line-height: 1.65; margin-bottom: 1rem; }
.blog-content strong { color: hsl(var(--foreground)); font-weight: 600; }