/* ===================================================================
   JACOB KOREA — Verafly Brand page (pastel emotional theme)
   =================================================================== */
:root{
  --v-green:#1f7a4d;
  --v-green-deep:#176b42;
  --v-pink:#f7cfd6;
  --v-blue:#aec4ec;
  --v-yellow:#f6d96b;
  --v-cream:#fdfaf5;
  --v-rose:#f4b8c1;
}

.brand-page{background:var(--v-cream);font-family:var(--font-ko)}

/* make header blend with pastel */
.brand-page .site-header{background:rgba(253,250,245,.9)}
.brand-page .nav-links a{color:var(--v-green-deep)}
.brand-page .nav-links a::after{background:var(--v-rose)}
.brand-page .lang-switch button.active{background:var(--v-green)}

/* ---------- Brand hero ---------- */
.brand-hero{
  position:relative;padding:150px 0 90px;overflow:hidden;
  background:
    radial-gradient(1200px 500px at 80% -10%, #fde9ee 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 20%, #eaf1ff 0%, transparent 55%),
    linear-gradient(160deg,#fdfaf5 0%,#f6f1ea 100%);
  text-align:center;
}
.brand-hero .vlogo{height:84px;margin:0 auto 22px}
.brand-hero .vslo{
  color:var(--v-green-deep);font-weight:800;font-size:1.5rem;margin-bottom:16px;letter-spacing:-.01em;
}
.brand-hero p{color:#6b7566;max-width:600px;margin:0 auto 30px;font-size:1.08rem}
.brand-hero .confetti{position:absolute;font-size:1.6rem;opacity:.9}
.brand-hero .c1{top:16%;left:10%;color:var(--v-blue)}
.brand-hero .c2{top:30%;right:12%;color:var(--v-rose)}
.brand-hero .c3{bottom:20%;left:16%;color:var(--v-yellow)}
.brand-hero .c4{bottom:28%;right:18%;color:var(--v-green)}
.btn-brand{background:var(--v-green);color:#fff;border:0}
.btn-brand:hover{background:var(--v-green-deep);transform:translateY(-2px)}
.btn-brand-out{background:#fff;color:var(--v-green-deep);border:2px solid var(--v-green)}
.btn-brand-out:hover{background:var(--v-green);color:#fff}

/* ---------- Brand story ---------- */
.brand-section{padding:84px 0}
.brand-story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.brand-story-img{border-radius:30px;overflow:hidden;box-shadow:0 24px 60px rgba(31,122,77,.16);aspect-ratio:3/4}
.brand-story-img img{width:100%;height:100%;object-fit:cover}
.brand-eyebrow{display:inline-block;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--v-rose);margin-bottom:14px}
.brand-story h2{color:var(--v-green-deep);font-size:2rem;margin-bottom:18px;line-height:1.3}
.brand-story p{color:#6b7566;margin-bottom:16px;font-size:1.03rem}

/* ---------- Product cards ---------- */
.brand-section.soft{background:linear-gradient(160deg,#fef6f8 0%,#f3f8f4 100%)}
.brand-head{text-align:center;max-width:640px;margin:0 auto 50px}
.brand-head h2{color:var(--v-green-deep);font-size:2rem;margin-bottom:12px}
.brand-head p{color:#6b7566}
.vcards{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.vcard{background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 16px 40px rgba(31,122,77,.1);transition:.3s}
.vcard:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(31,122,77,.18)}
.vcard-img{aspect-ratio:4/3;overflow:hidden}
.vcard-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.vcard:hover .vcard-img img{transform:scale(1.07)}
.vcard-body{padding:26px 28px 30px}
.vcard-body h3{color:var(--v-green-deep);font-size:1.25rem;margin-bottom:10px}
.vcard-body p{color:#6b7566;font-size:.96rem}
.vcard-body .tag{display:inline-block;background:#fdeef1;color:var(--v-rose);font-weight:700;font-size:.75rem;padding:5px 12px;border-radius:50px;margin-bottom:12px}

/* ---------- Feature chips ---------- */
.vfeatures{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.vfeature{background:#fff;border-radius:22px;padding:30px 24px;text-align:center;box-shadow:0 12px 30px rgba(31,122,77,.08)}
.vfeature .vic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-size:1.4rem;color:#fff;background:var(--v-green)}
.vfeature:nth-child(2) .vic{background:var(--v-rose)}
.vfeature:nth-child(3) .vic{background:var(--v-blue)}
.vfeature h3{color:var(--v-green-deep);font-size:1.1rem;margin-bottom:8px}
.vfeature p{color:#6b7566;font-size:.92rem}

/* ---------- Brand CTA ---------- */
.brand-cta{
  text-align:center;padding:84px 0;
  background:radial-gradient(900px 400px at 50% 0%, #fde9ee 0%, transparent 60%),linear-gradient(160deg,#f3f8f4,#eaf1ff);
}
.brand-cta h2{color:var(--v-green-deep);font-size:2rem;margin-bottom:14px}
.brand-cta p{color:#6b7566;margin-bottom:28px;font-size:1.05rem}
.brand-cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* brand footer accent */
.brand-page .float-contact{background:var(--v-green)}
.brand-page .float-contact:hover{background:var(--v-green-deep)}

@media(max-width:768px){
  .brand-story{grid-template-columns:1fr;gap:34px}
  .vcards{grid-template-columns:1fr}
  .vfeatures{grid-template-columns:1fr}
  .brand-hero{padding:120px 0 70px}
  .brand-hero .vslo{font-size:1.25rem}
  .brand-story h2,.brand-head h2,.brand-cta h2{font-size:1.6rem}
}