/* Sylius UK one-pager styles */
:root { --bg:#0f1114; --fg:#e9eef1; --muted:#b6c1c7; --accent:#30ba9d; --ink:#131718; --divider:#3a4046 }
* { box-sizing:border-box }
body { margin:0; font:16px/1.6 'Manrope',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji; color:var(--fg); background:var(--bg) }
.wrap { max-width:1100px; margin:0 auto; padding:0 20px }

/* Animations */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px) }
  to { opacity:1; transform:translateY(0) }
}
@keyframes floatBadge {
  0%, 100% { transform:translateY(0) }
  50% { transform:translateY(-10px) }
}

/* Typography */
h2 { text-align:center; font-size:32px; line-height:1.15; margin:0 0 40px; font-weight:700 }

/* Hero section */
.hero { padding:132px 0 116px; background:radial-gradient(1000px 500px at 15% -20%, rgba(48,186,157,0.95) 0%, rgba(48,186,157,0.08) 38%), radial-gradient(1000px 500px at 85% -15%, rgba(16,90,78,0.9) 0%, rgba(16,90,78,0.06) 45%), linear-gradient(180deg, #113536 0%, #081316 100%); border-bottom:1px solid rgba(30,120,105,0.25) }
.hero .brand { text-align:center }
.hero .brand-logos { display:inline-flex; align-items:center; gap:0; margin-bottom:40px; animation:fadeInUp 0.8s ease-out }
.hero .logo-item img { height:72px; width:auto; display:block }
.hero .logo-3brs { height:90px }
.hero .logo-divider { width:1px; height:56px; background:#888888; display:block; margin:0 40px }
.hero h1 { margin:0 0 12px; font-size:40px; line-height:1.15; animation:fadeInUp 0.8s ease-out 0.2s backwards }
.hero .tagline { max-width:820px; margin:0 auto 20px; color:var(--muted); animation:fadeInUp 0.8s ease-out 0.3s backwards }
.hero .cta { animation:fadeInUp 0.8s ease-out 0.4s backwards }

/* CTA buttons */
.cta { display:inline-block; background:var(--accent); color:#00382e; font-weight:700; text-decoration:none; padding:12px 18px; border-radius:8px; transition:transform .2s ease, filter .2s ease, box-shadow .2s ease }
.cta:hover { transform:translateY(-3px) scale(1.02); filter:brightness(1.15); box-shadow:0 6px 16px rgba(48,186,157,0.25) }
.cta:active { transform:translateY(-1px) scale(1); box-shadow:0 3px 8px rgba(48,186,157,0.2) }

/* Badges section */
.badges { padding:106px 0; background:linear-gradient(180deg, #07383b 0%, #072025 55%, #031214 100%); border-bottom:1px solid rgba(26,54,60,0.35) }
.badges h2 { margin:0 0 8px; animation:fadeInUp 0.8s ease-out }
.badges .lede { color:var(--muted); margin:0 0 24px; text-align:center; animation:fadeInUp 0.8s ease-out 0.2s backwards }
.badge-grid { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px }
.badge { margin:0; padding:0; opacity:0; animation:fadeInUp 0.6s ease-out forwards, floatBadge 3s ease-in-out 0.6s infinite }
.badge:nth-child(1) { animation-delay:0.3s, 0.9s }
.badge:nth-child(2) { animation-delay:0.4s, 1.4s }
.badge:nth-child(3) { animation-delay:0.5s, 1.9s }
.badge:hover { animation-play-state:paused, paused }
.badge img { width:180px; height:auto; display:block }

/* Value section */
.value { padding:106px 0; background:linear-gradient(180deg, #24303a 0%, #12161a 60%, #0d1113 100%) }
.value h2 { animation:fadeInUp 0.8s ease-out }
.pillars { list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; margin:0; padding:0 }
.pillars li { padding:20px; border-radius:8px; transition:transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeInUp 0.6s ease-out forwards }
.pillars li:nth-child(1) { animation-delay:0.2s }
.pillars li:nth-child(2) { animation-delay:0.3s }
.pillars li:nth-child(3) { animation-delay:0.4s }
.pillars li:nth-child(4) { animation-delay:0.5s }
.pillars li:hover { transform:translateY(-4px); background:rgba(255,255,255,0.02); box-shadow:0 8px 24px rgba(0,0,0,0.3) }
.pillars h3 { margin:.2rem 0 .3rem; font-size:20px; display:flex; align-items:center; gap:10px }
.pillar-icon { width:28px; height:28px; flex-shrink:0; opacity:0.9 }
.pillars p { margin:0; color:var(--muted) }

/* Services section */
.services { padding:106px 0; background:linear-gradient(180deg, #114642 0%, #0a1614 60%, #061011 100%); border-bottom:1px solid rgba(24,54,50,0.38) }
.services h2 { animation:fadeInUp 0.8s ease-out }
.services .grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px }
.services article { padding:18px; border:1px solid #1b2327; border-radius:10px; background:#0f1316; transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeInUp 0.6s ease-out forwards }
.services article:nth-child(1) { animation-delay:0.2s }
.services article:nth-child(2) { animation-delay:0.3s }
.services article:nth-child(3) { animation-delay:0.4s }
.services article:nth-child(4) { animation-delay:0.5s }
.services article:nth-child(5) { animation-delay:0.6s }
.services article:nth-child(6) { animation-delay:0.7s }
.services article:hover { transform:translateY(-4px); border-color:#2a3842; box-shadow:0 8px 24px rgba(0,0,0,0.4) }
.services h3 { margin:.2rem 0 .3rem; font-size:18px }
.services p { margin:0; color:var(--muted) }

/* Contact section */
.contact { padding:106px 0; background:linear-gradient(180deg, #4a4560 0%, #2d2a3d 65%, #1a1825 100%) }
.contact .wrap { text-align:center }
.contact h2 { animation:fadeInUp 0.8s ease-out }
.contact p { animation:fadeInUp 0.8s ease-out 0.2s backwards }
.contact a { color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.contact .cta { color:#000; text-decoration:none; animation:fadeInUp 0.8s ease-out 0.4s backwards }
.contact .cta:hover, .contact .cta:visited { color:#000 }

/* Footer */
.site-footer { padding:80px 0 80px; background:linear-gradient(180deg, #0f1919 0%, #081014 100%); border-top:1px solid rgba(255,255,255,0.04); color:var(--muted); font-size:14px }
.site-footer .wrap { text-align:center }
.site-footer a { color:var(--fg) }
.site-footer .sylius-love { display:block; width:140px; height:auto; opacity:.85; margin:12px auto 8px; filter:drop-shadow(0 1px 0 rgba(0,0,0,.2)) }

/* Responsive */
@media (max-width: 600px) {
  h2 { font-size:22px }
  .hero .logo-item img { height:48px }
  .hero .logo-divider { height:36px }
  .badge img { width:120px }
}

@media (max-width: 800px) {
  .hero { padding:56px 0 44px }
  .hero h1 { font-size:30px }
  .badge-grid { grid-template-columns:repeat(2, auto) }
  .pillars, .services .grid { grid-template-columns:1fr }
  .site-footer { padding:24px 0 32px }
  .site-footer .sylius-love { width:120px }
}