/* ============================================================
   BAILOS – Global Design System v2.0
   Container-Inspired: Navy / Teal / Amber
   Fonts: Syne (headings) + DM Sans (body)
   © 2026 mindshift IT Solutions OG
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --navy:        #0A1F44;
  --navy-light:  #0f2a5c;
  --navy-deep:   #071633;
  --navy-card:   #0d2347;

  --white:         #FFFFFF;
  --off-white:     #F0F4F8;
  --slate:         #4F5B66;
  --slate-light:   #8899A6;
  --slate-lighter: #a8b8c4;

  --teal:       #00A6A6;
  --teal-light: #00C4C4;
  --teal-dim:   rgba(0,166,166,.12);
  --teal-glow:  rgba(0,166,166,.25);

  --amber:       #FFB020;
  --amber-light: #FFC850;
  --amber-dim:   rgba(255,176,32,.12);
  --amber-glow:  rgba(255,176,32,.3);

  --green:      #22C55E;
  --green-dim:  rgba(34,197,94,.12);
  --red:        #FF4D4D;
  --red-dim:    rgba(255,77,77,.12);

  --glass:        rgba(255,255,255,.04);
  --glass-light:  rgba(255,255,255,.07);
  --glass-medium: rgba(255,255,255,.10);
  --border:        rgba(255,255,255,.08);
  --border-light:  rgba(255,255,255,.15);
  --border-hover:  rgba(255,255,255,.22);

  --shadow-sm:  0 2px 8px rgba(0,0,0,.15);
  --shadow-md:  0 8px 24px rgba(0,0,0,.2);
  --shadow-lg:  0 20px 50px rgba(0,0,0,.3);
  --shadow-xl:  0 30px 70px rgba(0,0,0,.4);

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 100px;

  --max-width: 1200px;
  --nav-height: 72px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--navy);
  color:var(--white);
  overflow-x:hidden;
  min-height:100vh;
  line-height:1.6;
  font-size:16px;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; }

h1,h2,h3,h4,h5,h6 {
  font-family:'Syne',-apple-system,sans-serif;
  font-weight:800;
  letter-spacing:-0.5px;
  line-height:1.15;
}

/* ── Container ─────────────────────────────────────────────── */
.container { max-width:var(--max-width); margin:0 auto; padding:0 3rem; }

/* ── Navigation ────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 3rem; height:var(--nav-height);
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  background:rgba(10,31,68,.85);
  border-bottom:1px solid var(--border);
  transition:all .3s ease;
}
nav.scrolled { background:rgba(10,31,68,.97); box-shadow:var(--shadow-md); }

.nav-left { display:flex; align-items:center; gap:3rem; }

.logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.5rem;
  color:var(--white); letter-spacing:-.5px; text-decoration:none;
}
.logo span { color:var(--teal); }

.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  color:var(--slate-light); font-size:.85rem; font-weight:500;
  letter-spacing:.3px; transition:color .3s; position:relative; padding:.25rem 0;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:2px; background:var(--teal); transition:width .3s;
}
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color:var(--teal); }
.nav-links a.active::after { width:100%; }

.nav-right { display:flex; align-items:center; gap:1rem; }

/* Language Switcher */
.lang-switcher {
  display:flex; align-items:center; gap:.25rem; padding:.3rem;
  background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-full);
}
.lang-switcher a {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:28px; border-radius:var(--radius-full);
  font-size:.7rem; font-weight:600; color:var(--slate-light);
  text-transform:uppercase; transition:all .2s;
}
.lang-switcher a:hover { color:var(--white); background:var(--glass-light); }
.lang-switcher a.active {
  background:var(--teal-dim); color:var(--teal);
  border:1px solid rgba(0,166,166,.25);
}

.nav-cta-secondary {
  padding:.55rem 1.2rem; background:transparent;
  border:1px solid var(--border-light); border-radius:var(--radius-sm);
  color:var(--white); font-family:'Syne',sans-serif; font-weight:600;
  font-size:.8rem; cursor:pointer; transition:all .3s; text-decoration:none;
}
.nav-cta-secondary:hover {
  border-color:var(--teal); color:var(--teal); background:var(--teal-dim);
}

.nav-cta {
  padding:.55rem 1.4rem; background:var(--amber); border:none;
  border-radius:var(--radius-sm); color:var(--navy); font-family:'Syne',sans-serif;
  font-weight:700; font-size:.8rem; cursor:pointer; transition:all .3s;
  text-decoration:none; white-space:nowrap;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--amber-glow); }

.mobile-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.mobile-toggle span { width:24px; height:2px; background:var(--white); transition:all .3s; display:block; }

.nav-links.open {
  display:flex !important; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:rgba(10,31,68,.98); backdrop-filter:blur(24px);
  padding:2rem 3rem; gap:1.5rem; border-bottom:1px solid var(--border);
}

/* ── Footer ────────────────────────────────────────────────── */
footer { border-top:1px solid var(--border); background:var(--navy-deep); }

.footer-inner {
  max-width:var(--max-width); margin:0 auto;
  padding:4rem 3rem 2rem;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
}

.footer-brand-col .footer-logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.3rem; margin-bottom:1rem;
}
.footer-brand-col .footer-logo span { color:var(--teal); }
.footer-brand-col p { color:var(--slate-light); font-size:.85rem; line-height:1.7; max-width:300px; margin-bottom:1.5rem; }

.footer-badges { display:flex; gap:.75rem; flex-wrap:wrap; }
.footer-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .7rem; background:var(--glass);  border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:.7rem; color:var(--slate-light);
}
.footer-badge svg { width:12px; height:12px; }

.footer-col h4 {
  font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; color:var(--white); margin-bottom:1.25rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.footer-col a { color:var(--slate-light); font-size:.85rem; transition:color .3s; }
.footer-col a:hover { color:var(--teal); }

.footer-bottom {
  max-width:var(--max-width); margin:0 auto;
  padding:1.5rem 3rem; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { color:var(--slate); font-size:.75rem; }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:var(--slate); font-size:.75rem; transition:color .3s; }
.footer-bottom-links a:hover { color:var(--teal); }

/* ── Helpers ───────────────────────────────────────────────── */
.hl-teal  { color:var(--teal); }
.hl-amber { color:var(--amber); }
.hl-green { color:var(--green); }

.text-gradient {
  background:linear-gradient(135deg,var(--teal),var(--teal-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.oss-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem 1rem; background:var(--green-dim);
  border:1px solid rgba(34,197,94,.25); border-radius:var(--radius-full);
  font-size:.75rem; font-weight:600; color:var(--green);
}
.oss-badge svg { width:14px; height:14px; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes float    { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-20px)} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes gridPulse{ 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes barGrow  { from{height:0} }
@keyframes cardFloat{
  0%,100%{transform:perspective(800px) rotateY(-6deg) rotateX(3deg) translateY(0)}
  50%{transform:perspective(800px) rotateY(-6deg) rotateX(3deg) translateY(-12px)}
}
@keyframes shimmer  { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

[data-animate] { opacity:0; transform:translateY(30px); transition:opacity .6s ease,transform .6s ease; }
[data-animate].animated { opacity:1; transform:translateY(0); }

/* ── Nav Scroll State ──────────────────────────────────────── */
nav.nav-scrolled {
  background:rgba(10,31,68,.95);
  box-shadow:var(--shadow-md);
  height:60px;
}

/* ── Hero Badge (shared across pages) ──────────────────────── */
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem 1rem; border-radius:var(--radius-full);
  font-size:.78rem; font-weight:600;
}
.badge-oss { background:var(--green-dim); border:1px solid rgba(34,197,94,.3); color:var(--green); }
.badge-oss .badge-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite; }
.badge-ai  { background:var(--teal-dim); border:1px solid rgba(0,166,166,.3); color:var(--teal); }
.badge-austria { background:var(--amber-dim); border:1px solid rgba(255,176,32,.25); color:var(--amber); }

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1024px) {
  .footer-inner { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media(max-width:768px) {
  nav { padding:0 1.5rem; height:60px; }
  .nav-links { display:none; }
  .mobile-toggle { display:flex; }
  .nav-cta-secondary { display:none; }
  .container { padding:0 1.5rem; }
  .footer-inner { grid-template-columns:1fr; padding:3rem 1.5rem 1.5rem; }
  .footer-bottom { padding:1.5rem; flex-direction:column; text-align:center; }
}
@media(max-width:480px) {
  .nav-cta { font-size:.75rem; padding:.5rem 1rem; }
}