:root{
  --bg:#0b0d10;
  --text:#0e1116;
  --muted:#6b7280;
  --brand:#ff8aa4;
  --card:#ffffff;
  --accent:#111827;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",Roboto,Ubuntu,Arial,sans-serif;color:var(--text);line-height:1.6;background:#fafafa}

.container{width:min(1100px,92%);margin-inline:auto}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e5e7eb}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{font-weight:800;font-size:1.25rem;letter-spacing:.5px;text-decoration:none;color:var(--accent)}

.site-header nav{display:flex;gap:1rem;align-items:center}
.site-header nav a{color:#111827;text-decoration:none;font-weight:600}
.btn{padding:.7rem 1rem;border-radius:999px;background:var(--accent);color:white;text-decoration:none;font-weight:700;border:1px solid #111827}
.btn:hover{opacity:.9}
.btn.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}

.hero{position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(105%) contrast(102%)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55))}
.hero-content{position:relative;text-align:center;color:#fff;padding:4rem 0}
.hero h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.15;margin:0 0 .5rem}
.hero p{opacity:.95;margin:0 0 1.25rem;font-weight:600}
.cta-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

.section{padding:64px 0}
.section-alt{background:#f4f6f9;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.section h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 1rem}
.section p{margin:0 0 1rem}
.feature-list{display:grid;gap:.5rem;padding-left:1.2rem}
.feature-list li{margin:.2rem 0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:12px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.card h3{margin:.2rem 0 .4rem;font-size:1.05rem}

.contact .grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.contact .grid{grid-template-columns:repeat(2,1fr)}}
.contact-form label{display:flex;flex-direction:column;gap:.35rem}
input,textarea{padding:.8rem;border-radius:12px;border:1px solid #e5e7eb;background:#fff;font:inherit}
.tiny{font-size:.8rem;color:var(--muted)}

.site-footer{padding:32px 0;color:#6b7280;text-align:center;background:#fff;border-top:1px solid #e5e7eb}


.rejuran {padding-top:72px; padding-bottom:72px}
.rejuran-head {text-align:center; max-width:780px; margin:0 auto 28px}
.rejuran-tag {display:inline-block; font-size:.8rem; font-weight:700; padding:.35rem .6rem; border:1px solid #e5e7eb; border-radius:999px; background:#fff}
.rejuran-sub {color:#4b5563}
.rejuran-features {margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.r-feature {background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:0 8px 22px rgba(0,0,0,.04)}
.r-ico {width:40px; height:40px; display:grid; place-items:center; border:1px solid #e5e7eb; border-radius:12px}
.rejuran-catalog {margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.r-card {background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.05)}
.rejuran-cta {text-align:center; margin-top:20px}
.rejuran-note {font-size:.86rem; color:#6b7280; margin-bottom:.8rem}


.lang-toggle{margin-left:.5rem;font-size:.9rem;color:#111827;user-select:none}
.lang-toggle .lang-btn{background:transparent;border:0;cursor:pointer;font-weight:700;padding:.2rem .2rem}
.lang-toggle .lang-btn.active{text-decoration:underline}


.logo img {
  height: 42px;
  width: auto;
  display: block;
}
@media (max-width: 640px){
  .logo img { height: 34px; }
}


 /* Larger logo sizing (Option B - Increased visibility) */
 .logo img {
   height: 54px;
   width: auto;
 }
 @media (max-width: 640px){
   .logo img { height: 44px; }
 }


/* 200% larger logo adjustment */
.logo img {
  height: 108px !important;
  width: auto !important;
}
@media (max-width: 640px){
  .logo img { height: 88px !important; }
}


/* Brand accent for header Download button (A2) */
.site-header .btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.site-header .btn:hover {
  opacity: .92;
}


.store-btn img {
  height: 44px;
  width: auto;
}
@media (max-width: 640px){
  .store-btn img { height: 38px; }
}
.cta-row {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}


.contact-quick {
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-top:1.2rem;
}
.contact-cta {
  padding:0.7rem 1.4rem;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
}
.contact-cta.whatsapp { background:#25D366; }
.contact-cta.phone { background:#111827; }
.contact-cta:hover { opacity:0.9; }
@media(max-width:640px){
  .contact-quick { flex-direction:column; }
  .contact-cta { text-align:center; }
}


/* CTA text buttons in hero (ensure spacing) */
.cta-row .btn { margin: 0 .1rem; }


.store-btn img {
  height: 44px;
  width: auto;
}
@media (max-width: 640px){
  .store-btn img { height: 38px; }
}
.cta-row {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* Mini download button on scroll */
.site-header.scrolled { 
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.site-header.scrolled .nav { padding: .55rem 0; }
.site-header.scrolled .btn {
  padding: .42rem .8rem;
  font-size: .86rem;
  border-radius: 999px;
}
.logo img { transition: height .18s ease; }
.site-header.scrolled .logo img { height: 84px; } /* respect your 200% scale even when scrolled */
@media (max-width: 640px){
  .site-header.scrolled .logo img { height: 72px; }
  .site-header.scrolled .btn { font-size: .84rem; }
}


/* Official badge sizing */
.store-btn img { height: 40px; width: auto; }
@media (max-width: 640px){
  .store-btn img { height: 32px; }
}
/* Space & alignment stays consistent */
.cta-row { gap: .6rem; }


/* Flex-based official-like store badges */
.store-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#000;
  color:#fff;
  padding:10px 18px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  line-height:1;
}
.store-badge .icon{
  height:20px;
  width:auto;
  display:block;
}
.store-badge:hover{opacity:.92}
@media (max-width:640px){
  .store-badge{padding:9px 16px; border-radius:12px; font-size:14px}
  .store-badge .icon{height:18px}
}
.cta-row{gap:.8rem; justify-content:center; flex-wrap:wrap}


/* Text-only store badges */
.store-badge.textonly{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#fff;
  padding:12px 20px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  line-height:1;
  letter-spacing:.2px;
}
.store-badge.textonly:hover{opacity:.92}
@media (max-width:640px){
  .store-badge.textonly{padding:10px 18px; font-size:15px; border-radius:12px}
}

.hero .store-badge.textonly{
  background: transparent;
  border: 1px solid rgba(255,255,255,.88);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.hero .store-badge.textonly:hover{
  background: rgba(255,255,255,.12);
  opacity: 1;
}

.section-kicker{
  color:#0f6f9f;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.3rem;
}
.section-lead{
  max-width:680px;
  color:#5b6472;
  font-size:1.02rem;
}
.product-showcase{
  display:grid;
  gap:18px;
  margin-top:24px;
}
.product-feature{
  min-height:360px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,420px);
  align-items:center;
  gap:24px;
  padding:28px;
  border:1px solid #dfe6ee;
  border-radius:8px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbfd 54%,#eef8fb 100%);
  overflow:hidden;
}
.product-feature.cool-feature{
  background:linear-gradient(135deg,#ffffff 0%,#f8fbfd 48%,#f7eef4 100%);
}
.product-copy{
  max-width:560px;
}
.product-tag{
  display:inline-flex;
  width:max-content;
  align-items:center;
  padding:.32rem .58rem;
  border-radius:999px;
  background:#e8f6f8;
  color:#0d668b;
  font-size:.78rem;
  font-weight:800;
}
.cool-feature .product-tag{
  background:#fff0f5;
  color:#b5446a;
}
.product-copy h3{
  margin:.8rem 0 .55rem;
  font-size:clamp(1.42rem,2.5vw,2rem);
  line-height:1.12;
  color:#0f2f55;
}
.product-copy p{
  color:#4b5563;
  margin-bottom:1rem;
}
.product-copy ul{
  display:grid;
  gap:.46rem;
  margin:0;
  padding-left:1.05rem;
  color:#263241;
  font-weight:600;
}
.product-art{
  min-height:300px;
  display:grid;
  place-items:center;
}
.product-art img{
  max-width:100%;
  max-height:340px;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(18,36,52,.16));
}
.cool-feature .product-art img{
  max-height:320px;
}
.brochure-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:18px;
  padding:22px 24px;
  border:1px solid #dfe6ee;
  border-radius:8px;
  background:#fff;
}
.brochure-strip h3{
  margin:.55rem 0 .2rem;
  color:#0f2f55;
}
.brochure-strip p{
  margin:0;
  color:#5b6472;
}
.brochure-btn{
  flex:0 0 auto;
  background:#0f2f55;
  border-color:#0f2f55;
}
@media (max-width:780px){
  .product-feature{
    grid-template-columns:1fr;
    padding:22px;
  }
  .product-art{
    min-height:auto;
    order:-1;
  }
  .product-art img{
    max-height:280px;
  }
  .brochure-strip{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* Products image gallery */
.product-gallery{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.p-item{
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:16px; 
  padding:12px; 
  box-shadow:0 8px 22px rgba(0,0,0,.04);
}
.p-item img{
  width:100%; 
  height:auto; 
  border-radius:12px; 
  display:block;
}
.p-item figcaption{
  margin-top:8px; 
  font-size:.92rem; 
  color:#374151;
}


/* --- Compact product gallery adjustments --- */
.product-gallery{
  margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.p-item{
  padding: 10px;
  border-radius: 14px;
}
.p-item img{
  max-width: 78%;
  margin: 6px auto 0;
}
.p-item figcaption{
  font-size: .88rem;
  text-align: center;
  color:#444;
}
@media (max-width: 640px){
  .product-gallery{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }
  .p-item img{ max-width: 82%; }
  .p-item figcaption{ font-size: .86rem; }
}


/* --- Harmonize product gallery with text box layout --- */
.product-gallery{
  align-items: stretch;
}
.p-item{
  background:#fff;
  border:1px solid #e5e7eb;           /* same subtle border */
  border-radius:16px;                  /* match other section boxes */
  padding:16px;                        /* comfortable inner padding */
  box-shadow:0 10px 24px rgba(0,0,0,.05); /* consistent soft shadow */
  transition: box-shadow .2s ease, transform .2s ease;
}
.p-item:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.07);
}
.p-item img{
  max-width: 76%;
  margin: 4px auto 6px;
  display:block;
  border-radius:12px;
}
.p-item figcaption{
  margin-top:6px;
  font-size:.9rem;
  line-height:1.45;
  color:#374151;                       /* same text tone as boxes */
  text-align:center;
}
@media (max-width: 640px){
  .p-item{ padding:14px; border-radius:14px }
  .p-item img{ max-width: 82% }
  .p-item figcaption{ font-size:.88rem }
}

/* Balanced header for deployed Netlify version */
.site-header .nav{
  min-height: 68px;
  padding: .18rem 0;
  gap: 1.25rem;
}
.site-header .logo img{
  height: 56px !important;
  max-width: 198px;
  object-fit: contain;
}
.site-header nav{
  gap: .82rem;
  align-items: center;
  flex-wrap: nowrap;
}
.site-header nav a{
  font-size: .92rem;
  line-height: 1;
}
.site-header .btn{
  padding: .52rem .86rem;
  border-radius: 999px;
  font-size: .86rem;
  line-height: 1;
}
.lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: .24rem;
  margin-left: .1rem;
  font-size: .82rem;
  line-height: 1;
}
.lang-toggle .lang-btn{
  font-size: .82rem;
  line-height: 1;
}
.site-header.scrolled .logo img{
  height: 48px !important;
}
@media (max-width: 760px){
  .site-header .nav{
    min-height: 62px;
    padding: .15rem 0;
    gap: .55rem;
  }
  .site-header .logo img{
    height: 48px !important;
    max-width: 158px;
  }
  .site-header nav{
    gap: .45rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header nav::-webkit-scrollbar{
    display: none;
  }
  .site-header nav a{
    font-size: .78rem;
    white-space: nowrap;
  }
  .site-header .btn{
    padding: .42rem .58rem;
    font-size: .76rem;
  }
  .lang-toggle,
  .lang-toggle .lang-btn{
    font-size: .72rem;
    white-space: nowrap;
  }
  .site-header.scrolled .logo img{
    height: 42px !important;
  }
}