@charset "UTF-8";
/* ==========================================================================
   WINVN Global — Natural Pet Toys OEM & Private Label Manufacturer
   Design system: warm natural + professional + export-ready + trustworthy
   ========================================================================== */

:root{
  /* Espresso & Sage palette (C) */
  --color-bg:        #FAF8F6;   /* warm off-white background */
  --color-bg-alt:     #EDE8DF;   /* deeper cream section background */
  --color-surface:    #FFFFFF;   /* card / surface white */
  --color-text:       #2A241E;   /* ink text */
  --color-text-soft:  #534E49;   /* secondary text */
  --color-text-faint: #8A8179;   /* tertiary / captions */
  --color-border:     #E3DDD0;   /* hairline borders */

  --color-wood:        #462F21;  /* espresso accent (primary) */
  --color-wood-dark:   #322218;
  --color-green:       #7F8970;  /* sage accent (secondary) */
  --color-green-dark:  #353A2F;
  --color-cream:       #EDE8DF;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 3px rgba(42,36,30,0.08);
  --shadow-md: 0 6px 20px rgba(42,36,30,0.08);

  --container-w: 1160px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-0.01em; }
h1{ font-size: clamp(2rem, 4vw, 2.75rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3{ font-size: 1.2rem; }
p{ margin:0 0 1em; color: var(--color-text-soft); }
.container{ max-width: var(--container-w); margin:0 auto; padding:0 24px; }
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--color-wood-dark); margin-bottom:.6em;
}
.section{ padding: 72px 0; }
.section--alt{ background: var(--color-bg-alt); }
.section--tight{ padding: 48px 0; }
.section-head{ max-width: 720px; margin: 0 0 40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.text-center{ text-align:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: var(--radius-md); font-weight:700; font-size:.95rem;
  border: 2px solid transparent; cursor:pointer; transition: all .15s ease; white-space:nowrap;
}
.btn-primary{ background: var(--color-wood); color:#fff; }
.btn-primary:hover{ background: var(--color-wood-dark); }
.btn-secondary{ background: transparent; border-color: var(--color-text); color: var(--color-text); }
.btn-secondary:hover{ background: var(--color-text); color:#fff; }
.btn-ghost{ background: transparent; color: var(--color-green-dark); border-color: var(--color-green-dark); }
.btn-ghost:hover{ background: var(--color-green-dark); color:#fff; }
.btn-sm{ padding:10px 18px; font-size:.85rem; }
.btn-block{ width:100%; }

/* ===== Header / Nav ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(250,248,246,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; gap: 24px; }
.nav-logo{ font-weight:800; font-size:1.2rem; letter-spacing:-.01em; color: var(--color-text); flex-shrink:0; display:flex; align-items:center; gap:10px; }
.nav-logo span{ color: var(--color-wood); }
.nav-logo-text{ font-size:.8rem; font-weight:700; letter-spacing:.02em; color: var(--color-text); white-space:nowrap; }
@media (max-width: 720px){ .nav-logo-text{ display:none; } }
.logo-img{ height:40px; width:auto; display:block; }
.footer-col img.logo-img{ height:32px; margin-bottom:10px; }
.nav-links{ display:flex; align-items:center; gap: 28px; flex:1; justify-content:center; }
.nav-links > li{ position:relative; }
.nav-links a.nav-link{ font-weight:600; font-size:.94rem; color: var(--color-text-soft); padding: 8px 0; }
.nav-links a.nav-link:hover, .nav-links a.nav-link.is-active{ color: var(--color-wood-dark); }
.nav-links .has-dropdown > a::after{ content:"▾"; font-size:.7em; margin-left:5px; opacity:.6; }
.dropdown{
  position:absolute; top: 100%; left:50%; transform: translateX(-50%);
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding:10px; min-width:220px;
  opacity:0; visibility:hidden; translate: 0 6px; transition: all .15s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; translate:0 0; }
.dropdown li a{ display:flex; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:6px; font-size:.9rem; font-weight:500; color:var(--color-text); }
.dropdown li a:hover{ background: var(--color-bg-alt); }
.dropdown li a .soon-tag{ font-size:.68rem; font-weight:700; color: var(--color-text-faint); border:1px solid var(--color-border); border-radius:20px; padding:1px 7px; }
.nav-cta{ flex-shrink:0; }
.nav-toggle{ display:none; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ===== Hero ===== */
.hero{ padding: 64px 0 56px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.hero h1{ margin-bottom:.4em; }
.hero-sub{ font-size:1.15rem; color: var(--color-text-soft); max-width: 46ch; margin-bottom:1.6em; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.direct-answer{
  background: var(--color-surface); border-left:4px solid var(--color-green); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 20px; margin: 22px 0; font-size:.98rem; color: var(--color-text);
}
.direct-answer strong{ color: var(--color-green-dark); }

/* ===== Image placeholder ===== */
.img-placeholder{
  background: repeating-linear-gradient(135deg, #F0EAE0, #F0EAE0 10px, #E4DAC8 10px, #E4DAC8 20px);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 220px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color: var(--color-text-faint); font-size:.85rem; font-weight:600; padding: 20px;
}
.img-placeholder.tall{ min-height: 340px; }
.img-placeholder.short{ min-height: 140px; }
.img-placeholder span{ max-width: 220px; }

/* ===== Real photos ===== */
.photo-frame{
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md);
  min-height: 220px;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-frame.tall{ min-height: 340px; }

.material-photo{
  background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  min-height: 140px; padding: 14px;
}
.material-photo img{ max-width:100%; max-height:170px; width:auto; height:auto; object-fit:contain; display:block; }

/* ===== Cards ===== */
.grid{ display:grid; gap: 24px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* Flex-based grid that centers a leftover last row instead of leaving it
   pinned left with empty gaps (used where card count doesn't divide evenly) */
.grid-flex-balanced{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
}
.grid-flex-balanced .card{
  flex: 1 1 220px; max-width: calc(25% - 18px);
}
@media (max-width: 960px){
  .grid-flex-balanced .card{ max-width: calc(50% - 12px); }
}
@media (max-width: 620px){
  .grid-flex-balanced .card{ max-width: 100%; }
}
.card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.card h3{ margin-bottom:.4em; }
.card p{ margin-bottom: 1em; font-size:.95rem; }
.card-icon{
  width:46px; height:46px; border-radius:10px; background: var(--color-bg-alt);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:1.3rem;
}
.card-link{ font-weight:700; font-size:.9rem; color: var(--color-wood-dark); }
.card-link::after{ content:" →"; }

/* Product card image slot */
.product-card .img-placeholder{ margin-bottom: 16px; }

/* ===== Process steps ===== */
.steps{ display:grid; gap: 20px; counter-reset: step; }
.step{ display:grid; grid-template-columns: 64px 1fr; gap:20px; align-items:flex-start; }
.step-num{
  width:56px; height:56px; border-radius:50%; background: var(--color-wood); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; flex-shrink:0;
}
.step h3{ margin-bottom:.3em; }
.steps--connected .step{ position:relative; }
.steps--connected .step:not(:last-child)::before{
  content:""; position:absolute; left:27px; top:56px; width:2px; height:calc(100% + 4px);
  background: var(--color-border);
}

/* ===== Stat bar ===== */
.stat-bar{ display:flex; flex-wrap:wrap; gap: 32px; justify-content:center; padding: 28px 0; }
.stat{ text-align:center; min-width:150px; }
.stat-num{ font-size:1.9rem; font-weight:800; color: var(--color-wood-dark); display:block; }
.stat-label{ font-size:.85rem; color: var(--color-text-soft); }

/* ===== FAQ ===== */
.faq-item{ border-bottom:1px solid var(--color-border); padding: 6px 0; }
.faq-item summary{ cursor:pointer; font-weight:700; padding: 14px 0; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.3rem; color: var(--color-wood); flex-shrink:0; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-a{ padding: 0 0 18px; font-size:.95rem; }

/* ===== Table (comparison) ===== */
.table-wrap{ overflow-x:auto; border:1px solid var(--color-border); border-radius: var(--radius-md); }
table{ width:100%; border-collapse:collapse; min-width:520px; }
th, td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--color-border); font-size:.92rem; }
th{ background: var(--color-bg-alt); font-weight:700; }
tr:last-child td{ border-bottom:none; }

/* ===== Flow diagram (private label) ===== */
.flow{ display:flex; flex-direction:column; align-items:center; gap:10px; max-width:800px; margin-left:auto; margin-right:auto; }
.flow-node{ background: var(--color-surface); border:2px solid var(--color-green); border-radius: var(--radius-md); padding:14px 20px; font-weight:700; text-align:center; width:100%; max-width:220px; box-sizing:border-box; }
.flow-arrow{ color: var(--color-text-faint); font-size:1.3rem; }
@media (min-width: 700px){
  .flow{ flex-direction:row; align-items:stretch; justify-content:center; }
  .flow-node{ flex:1 1 0; max-width:none; display:flex; align-items:center; justify-content:center; }
  .flow-arrow{ display:flex; align-items:center; transform: rotate(0deg); }
}

/* ===== CTA band ===== */
.cta-band{
  background: var(--color-green-dark); color:#fff; border-radius: var(--radius-lg);
  padding: 48px; text-align:center;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color: rgba(255,255,255,.85); max-width:60ch; margin-left:auto; margin-right:auto; }
.cta-band .btn-secondary{ border-color:#fff; color:#fff; }
.cta-band .btn-secondary:hover{ background:#fff; color: var(--color-green-dark); }

/* ===== Forms ===== */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column: 1 / -1; }
label{ font-weight:700; font-size:.88rem; }
label .req{ color: var(--color-wood); }
input, select, textarea{
  font-family: inherit; font-size:.95rem; padding: 12px 14px; border-radius: var(--radius-sm);
  border:1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--color-green); outline-offset:1px; }
textarea{ resize: vertical; min-height:110px; }
.form-note{ font-size:.85rem; color: var(--color-text-faint); margin-top:10px; }

/* ===== Breadcrumb ===== */
.breadcrumb{ font-size:.85rem; color: var(--color-text-faint); margin-bottom: 18px; }
.breadcrumb a{ color: var(--color-green-dark); font-weight:600; }

/* ===== Footer ===== */
.site-footer{ background: var(--color-green-dark); padding: 56px 0 28px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr .9fr .9fr 1.3fr; gap: 32px; margin-bottom: 36px; }
.footer-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; color: var(--color-green); }
.footer-col p{ color: rgba(255,255,255,.75); }
.footer-col li{ margin-bottom:9px; font-size:.92rem; }
.footer-col a{ color: rgba(255,255,255,.9); }
.footer-col a:hover{ color: var(--color-green); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top:22px; font-size:.82rem; color: rgba(255,255,255,.7); text-align:center; }

/* Footer brand column (email / whatsapp / address) */
.footer-info{ margin-top:14px; }
.footer-info-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--color-green); margin-bottom:3px; }
.footer-info p{ margin:0; color: rgba(255,255,255,.9); font-size:.92rem; }

/* Footer map column */
.footer-map-card{ position:relative; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-md); background:#fff; height:170px; margin-bottom:16px; }
.footer-map-card iframe{ width:100%; height:100%; border:0; display:block; }
a.footer-map-btn{ position:absolute; top:12px; left:12px; z-index:2; background:#fff; color: var(--color-text); font-weight:700; font-size:.8rem; padding:8px 14px; border-radius:30px; box-shadow: var(--shadow-sm); text-decoration:none; }
a.footer-map-btn:hover{ background: var(--color-bg-alt); color: var(--color-text); }

/* ===== Responsive ===== */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .section{ padding: 48px 0; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .cta-band{ padding: 32px 20px; }
  .step{ grid-template-columns: 48px 1fr; }
  .site-footer{ padding: 40px 0 24px; }
}