:root{
  --bg:#ebebeb; --text:#000; --accent:#52abff;
  --radius:14px; --container:1200px; --header-h:64px;
}

/* Watermark */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: url('assets/bg.png') no-repeat center center;
  background-size: clamp(100px, 20vw, 180px);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.site-header, main, footer { position: relative; z-index: 1; }

/* Base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:underline}
a:hover{opacity:.85}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section h2{margin:0 0 12px}
.section-intro{margin:0 0 28px;max-width:60ch}

/* Buttons */
.btn{
  display:inline-block;background:var(--accent);color:#fff !important;border:2px solid var(--accent);
  padding:12px 18px;border-radius:var(--radius);text-decoration:none;font-weight:600
}
.btn:hover{filter:brightness(.92)}
.btn-small{padding:8px 12px;font-size:.95rem}

/* Header + Tabs + Lang button */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 7px solid #000;
}
.header-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;   /* logo | tabs | lang btn */
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo{height:50px;width:auto;display:block}

.nav.tabs{
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; -ms-overflow-style:none;
  scrollbar-width: none; padding:4px 12px; justify-content:flex-start; grid-column: 2; justify-self:end; min-width:0;
  flex-wrap: nowrap; touch-action: pan-x; overscroll-behavior-x: contain; max-width:100%; position:relative;
}
.nav.tabs::-webkit-scrollbar{ display:none; }
.nav.tabs::before,
.nav.tabs::after{ content:none; display:none; }
.nav.tabs .nav-link{
  display:inline-block; white-space:nowrap; flex:0 0 auto;
  padding:10px 14px; border:2px solid #000; border-radius:999px;
  background:#fff; color:#000; text-decoration:none; font-weight:700;
}
.nav.tabs .nav-link:hover{ background:#000; color:#fff; }
.nav.tabs .nav-link.active{ background:#000; color:#fff; }

/* language toggle button */
.lang-btn{
  border:2px solid #000; background:#fff; color:#000; font-weight:700;
  border-radius:999px; padding:8px 12px; cursor:pointer;
  grid-column: 3; justify-self:end; align-self:center; white-space:nowrap;
}
.lang-btn:hover{ background:#000; color:#fff; }

/* Hero */
.hero-inner{display:grid;gap:28px;align-items:center}
.hero-copy h1{font-size:clamp(2.2rem,5.2vw,3.5rem);margin:0 0 10px}
.hero-copy p{margin:0 0 20px}
.hero-media img{border:2px solid #000;border-radius:var(--radius)}
@media (min-width: 900px){ .hero-inner{grid-template-columns:1.2fr .8fr} }

/* Grids / Cards */
.grid{display:grid;gap:18px}
.cards{grid-template-columns:1fr}
@media (min-width:700px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .cards{grid-template-columns:repeat(4,1fr)} }
.card{border:2px solid #000;border-radius:var(--radius);padding:18px}

/* Two-column Story */
.two-col{display:grid;gap:24px}
@media (min-width:900px){ .two-col{grid-template-columns:1.1fr .9fr} }
.story-placeholder{border:none;border-radius:var(--radius);padding:0;text-align:center}
.story-placeholder img{border:none;border-radius:var(--radius)}

/* Team */
.team-grid{grid-template-columns:1fr;gap:22px}
@media (min-width:700px){ .team-grid{grid-template-columns:repeat(4,1fr)} }
.team-card{border:2px solid #000;border-radius:var(--radius);padding:16px;text-align:center}
.team-card img{
  display:block; margin:0 auto 10px;
  width:180px; height:180px;
  object-fit:cover; border:none; border-radius:50%;
}

/* Contact */
.contact-form{max-width:600px}
.form-row{display:flex;flex-direction:column;margin-bottom:14px}
label{font-weight:600;margin-bottom:6px}
input,textarea{border:2px solid #000;border-radius:var(--radius);padding:12px;background:#fff;color:#000}
input::placeholder,textarea::placeholder{color:#000}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-status{margin-top:10px}

/* Footer */
.site-footer{border-top:7px solid #000;background:var(--bg)}
.footer-inner{padding:20px 0;text-align:center}
.social a{display:inline-flex;padding:6px;border:2px solid #000;border-radius:999px}

/* To top button */
.to-top{
  position:fixed;right:18px;bottom:18px;border:2px solid #000;background:#000;color:#fff;
  border-radius:999px;width:48px;height:48px;display:none;align-items:center;justify-content:center;
  cursor:pointer; z-index:1000; box-shadow:0 6px 18px rgba(0,0,0,.2)
}
.to-top.show{display:flex}
.to-top:hover{filter:brightness(1.1)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Cookie banner */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;display:none;background:#000;color:#fff;padding:12px 16px;z-index:9999}
.cookie-banner.show{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.cookie-banner p{margin:0}
.cookie-banner a{color:#fff;text-decoration:underline}
.cookie-banner .btn{background:#fff;color:#000 !important;border-color:#fff;padding:6px 10px}