:root{
  --blue:#0f2e63;
  --blue-dark:#081b3d;
  --red:#c8151d;
  --red-dark:#8f0e14;
  --dark:#151515;
  --gray:#5a5a5a;
  --gray-light:#f4f5f7;
  --border:#e7e9ee;
  --radius:14px;
  --shadow:0 10px 30px rgba(20,30,70,0.08);
  --shadow-sm:0 4px 14px rgba(20,30,70,0.06);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  background:#ffffff;
  color:var(--dark);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1120px;margin:0 auto;padding:0 6%;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:800;
  font-size:1.2rem;
  color:var(--dark);
}
.brand img{height:38px;width:auto;}
.main-nav{
  display:flex;
  align-items:center;
  gap:1.8rem;
}
.main-nav a{
  text-decoration:none;
  color:var(--dark);
  font-size:0.95rem;
  font-weight:600;
  opacity:0.8;
  transition:opacity .15s ease;
}
.main-nav a:hover{opacity:1;color:var(--blue);}
.lang-switch{
  display:flex;
  align-items:center;
  gap:0.4rem;
  margin-left:0.6rem;
  padding-left:1.2rem;
  border-left:1px solid var(--border);
}
.lang-switch a{display:flex;}
.lang-switch img{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border);
  transition:transform .15s ease;
}
.lang-switch img:hover{transform:scale(1.15);}
.lang-switch a.active img{outline:2px solid var(--blue);outline-offset:1px;}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--dark);}

@media (max-width:820px){
  .main-nav{
    position:fixed;
    top:72px;left:0;right:0;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:0 6%;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border-bottom:1px solid var(--border);
  }
  .main-nav.open{max-height:400px;padding:1rem 6% 1.5rem;}
  .main-nav a{padding:0.6rem 0;width:100%;border-bottom:1px solid var(--border);}
  .lang-switch{border-left:none;margin:0.8rem 0 0;padding-left:0;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(circle at 15% 20%, rgba(26,79,214,0.08), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(224,39,45,0.07), transparent 45%),
    #ffffff;
  padding:5rem 0 4rem;
  text-align:center;
}
.hero-logo{max-width:190px;width:45%;margin:0 auto 1.6rem;}
.hero h1{
  font-size:clamp(1.7rem, 4vw, 2.6rem);
  color:var(--blue);
  margin:0 0 1rem;
  letter-spacing:-0.01em;
}
.hero .sub{
  color:var(--gray);
  max-width:620px;
  margin:0 auto 2rem;
  font-size:1.08rem;
}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:0.85rem 1.7rem;
  border-radius:999px;
  font-weight:700;
  font-size:0.98rem;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
  border:2px solid transparent;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(224,39,45,0.28);}
.btn-primary:hover{background:var(--red-dark);}
.btn-secondary{background:#fff;color:var(--blue);border-color:var(--blue);}
.btn-secondary:hover{background:var(--blue);color:#fff;}

/* ---------- Language flags grid (homepage) ---------- */
.flags{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:1.4rem;
  flex-wrap:wrap;
  padding:0.5rem 6% 4rem;
}
.flag-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:var(--dark);
}
.flag-link img{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.flag-link:hover img{transform:translateY(-4px);box-shadow:var(--shadow);}
.flag-link span{margin-top:0.55rem;font-size:0.85rem;color:var(--gray);font-weight:600;}

/* ---------- Trust bar ---------- */
.trust-bar{
  background:var(--gray-light);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:1.6rem 0;
}
.trust-bar .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
  text-align:center;
}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:0.5rem;}
.trust-item .icon{
  width:42px;height:42px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  color:var(--blue);
}
.trust-item span{font-size:0.82rem;font-weight:600;color:var(--gray);}
@media (max-width:700px){
  .trust-bar .container{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Sections ---------- */
section.block{padding:4.5rem 0;}
section.block.alt{background:var(--gray-light);}
.section-head{text-align:center;max-width:680px;margin:0 auto 2.8rem;}
.eyebrow{
  display:inline-block;
  color:var(--red);
  font-weight:800;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:0.6rem;
}
.section-head h2{
  font-size:clamp(1.4rem,3vw,2rem);
  color:var(--dark);
  margin:0 0 0.7rem;
}
.section-head p{color:var(--gray);margin:0;}

/* Product cards */
.product-group{margin-bottom:3rem;}
.product-group:last-child{margin-bottom:0;}
.product-group-title{
  display:flex;
  align-items:baseline;
  gap:0.7rem;
  margin-bottom:0.4rem;
}
.product-group-title h3{font-size:1.25rem;margin:0;color:var(--blue);}
.product-group-lead{color:var(--gray);margin:0 0 1.6rem;max-width:680px;}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.card-grid{grid-template-columns:1fr;}}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.6rem;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.card .icon{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg, var(--blue), var(--red));
  display:flex;align-items:center;justify-content:center;
  color:#fff;margin-bottom:1rem;
}
.card h4{margin:0 0 0.5rem;font-size:1.05rem;color:var(--dark);}
.card p{margin:0;color:var(--gray);font-size:0.92rem;}

/* Why choose - icon list */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
}
@media (max-width:820px){.why-grid{grid-template-columns:1fr;}}
.why-item{text-align:center;padding:1.2rem;}
.why-item .icon{
  width:56px;height:56px;border-radius:50%;
  background:#fff;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;
  color:var(--red);
  box-shadow:var(--shadow-sm);
}
.why-item h4{margin:0 0 0.5rem;font-size:1.02rem;}
.why-item p{margin:0;color:var(--gray);font-size:0.9rem;}

/* FAQ */
.faq{max-width:760px;margin:0 auto;}
.faq details{
  border-bottom:1px solid var(--border);
  padding:1.1rem 0;
}
.faq summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";
  font-size:1.3rem;
  color:var(--blue);
  flex-shrink:0;
  transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq p{color:var(--gray);margin:0.8rem 0 0;font-size:0.94rem;}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg, var(--blue), var(--blue-dark));
  color:#fff;
  text-align:center;
  padding:3.5rem 0;
}
.cta-band h2{margin:0 0 0.6rem;font-size:1.6rem;}
.cta-band p{margin:0 0 1.6rem;opacity:0.9;}
.cta-band .btn-primary{box-shadow:0 8px 24px rgba(0,0,0,0.25);}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:#c9cbd1;padding:3.5rem 0 1.6rem;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2rem;
  margin-bottom:2.4rem;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand img{height:32px;margin-bottom:0.8rem;}
.footer-brand p{font-size:0.85rem;color:#9195a3;max-width:260px;}
.site-footer h5{
  color:#fff;font-size:0.82rem;text-transform:uppercase;
  letter-spacing:0.06em;margin:0 0 1rem;
}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:0.55rem;}
.site-footer a{color:#c9cbd1;text-decoration:none;font-size:0.9rem;}
.site-footer a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid #2b2c33;
  padding-top:1.4rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.8rem;
  font-size:0.8rem;
  color:#83858f;
}
.footer-disclaimer{
  font-size:0.76rem;
  color:#6c6e78;
  max-width:900px;
  margin:1.4rem 0 0;
  line-height:1.6;
}

/* ---------- Inner pages (legacy content wrapper) ---------- */
main.content{max-width:820px;margin:0 auto;padding:0 6%;}
.back-link{display:block;text-align:center;margin-top:1rem;color:var(--gray);font-size:0.85rem;}

/* ---------- Visually hidden (a11y) ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Brand fader banner (Creatine/Protein -> CreaProt.com) ---------- */
.brand-fader{
  font-weight:900;
  font-size:clamp(2.4rem, 8vw, 5.4rem);
  line-height:1;
  letter-spacing:-0.02em;
  text-align:center;
  margin:0.4rem 0 1.2rem;
  white-space:nowrap;
}
.brand-fader .bf-keep{opacity:1;}
.brand-fader .bf-red{color:var(--red);}
.brand-fader .bf-blue{color:var(--blue);}
.brand-fader .bf-dotcom{
  color:var(--dark);
  opacity:0.45;
  font-weight:800;
}
.brand-fader .bf-fade{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  color:var(--gray);
  max-width:calc(var(--bfw, 4) * 1ch);
  animation:bfFade 5s ease-in-out infinite;
}
@keyframes bfFade{
  0%,12%{opacity:1;max-width:calc(var(--bfw, 4) * 1ch);}
  30%,100%{opacity:0;max-width:0;}
}
@media (max-width:640px){
  .brand-fader{font-size:clamp(1.8rem, 11vw, 3.2rem);}
}
@media (max-width:380px){
  .brand-fader{white-space:normal;}
}