@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');



/* =================================
GLOBAL VARIABLES
================================= */


:root {


--primary-color:#C9954A;

--dark-color:#2B2520;

--text-color:#4A4038;

--light-bg:#FAF7F2;

--cream-bg:#EFE5D8;

--white:#ffffff;


--border-color:#E7D9C8;


--shadow:
0 20px 60px rgba(43,37,32,0.12);



--radius:24px;


--transition:
all .35s ease;


}






/* =================================
RESET
================================= */


* {

margin:0;

padding:0;

box-sizing:border-box;

}



html {

scroll-behavior:smooth;

}



body {


font-family:'Inter',sans-serif;

color:var(--text-color);

background:var(--light-bg);

line-height:1.7;

}




img {

max-width:100%;

display:block;

}



a {

text-decoration:none;

color:inherit;

}




.container {


width:min(1180px,90%);

margin:auto;


}






/* =================================
TYPOGRAPHY
================================= */


h1,
h2,
h3 {


font-family:'Playfair Display',serif;

color:var(--dark-color);

line-height:1.2;


}



h1 {


font-size:clamp(42px,5vw,68px);

font-weight:700;


}



h2 {


font-size:clamp(34px,4vw,48px);


}



h3 {


font-size:28px;


}



p {


font-size:17px;

color:var(--text-color);


}






/* =================================
SECTION COMMON
================================= */


section {


padding:100px 0;


}



.section-heading {


text-align:center;

max-width:720px;

margin:0 auto 60px;


}



.section-label {


display:inline-block;

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

color:var(--primary-color);

font-weight:600;

margin-bottom:18px;


}







/* =================================
BUTTON
================================= */


.primary-btn,
.product-btn,
.header-btn {


display:inline-flex;

align-items:center;

justify-content:center;


background:var(--primary-color);

color:white;


padding:16px 34px;


border-radius:50px;


font-weight:600;


transition:var(--transition);


}



.primary-btn:hover,
.product-btn:hover,
.header-btn:hover {


transform:translateY(-3px);


box-shadow:0 15px 30px rgba(201,149,74,.35);


}








/* =================================
HEADER
================================= */


.header {


position:fixed;

top:0;

left:0;

width:100%;


z-index:999;


background:rgba(250,247,242,.85);


backdrop-filter:blur(15px);


border-bottom:1px solid rgba(231,217,200,.5);


}




.header-container {


height:90px;


display:flex;

align-items:center;

justify-content:space-between;


}




.logo {


font-family:'Playfair Display';

font-size:28px;

font-weight:700;

color:var(--dark-color);


}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap; /* 不让子元素换行 */
}

.logo {
  flex-shrink: 0; /* Logo 不被压缩 */
}

.logo img {
  height: 50px;
  width: auto;
  display: block;
}

.navigation {
  display: flex;
  align-items: center;
  gap: 20px; /* 导航链接之间的间距 */
  flex: 1; /* 让导航占据剩余空间 */
  justify-content: center; /* 导航链接居中 */
  flex-wrap: nowrap; /* 不让导航换行 */
}

.navigation a {
  white-space: nowrap; /* 不让文字换行 */
  font-size: 15px; /* 稍微调小一点，给更多空间 */
}

.header-btn {
  flex-shrink: 0; /* 按钮不被压缩 */
  white-space: nowrap; /* 按钮文字不换行 */
}


.navigation {


display:flex;

gap:35px;


}



.navigation a {


font-size:15px;

font-weight:500;


transition:.3s;


}



.navigation a:hover {


color:var(--primary-color);


}



.header-btn {


padding:12px 28px;


}








/* =================================
HERO SECTION
================================= */


.hero {


padding-top:170px;


}



.hero-container {


display:grid;

grid-template-columns:

1fr 1fr;


align-items:center;


gap:70px;


}






.hero-content h1 {


margin-bottom:25px;


}




.hero-content p {


font-size:19px;

max-width:520px;


margin-bottom:35px;


line-height:1.8;


}





.hero-trust {


display:flex;

gap:20px;

margin-top:35px;


}



.trust-item {


background:white;


padding:10px 18px;


border-radius:50px;


font-size:14px;


box-shadow:0 10px 30px rgba(0,0,0,.06);


}



.trust-item span {


color:var(--primary-color);

font-weight:bold;


}







/* =================================
HERO IMAGE
================================= */


.hero-image {


position:relative;


}




.image-card {


background:white;


padding:18px;


border-radius:35px;


box-shadow:var(--shadow);


transform:rotate(2deg);


}



.image-card img {


border-radius:25px;


}





.floating-card {


position:absolute;


background:white;


padding:12px;


border-radius:20px;


box-shadow:var(--shadow);


display:flex;

align-items:center;

gap:12px;


font-size:14px;

font-weight:600;


}



.floating-card img {


width:55px;

height:55px;


object-fit:cover;


border-radius:15px;


}



.card-one {


left:-50px;

bottom:80px;


}



.card-two {


right:-30px;

top:80px;


}







/* =================================
STORY SECTION
================================= */


.story {


background:var(--cream-bg);


}



.story-container {


display:grid;


grid-template-columns:

1fr 1fr;


align-items:center;


gap:80px;


}



.story-image img {


border-radius:35px;


box-shadow:var(--shadow);


}



.story-content h2 {


margin-bottom:25px;


}



.story-content p {


margin-bottom:30px;

font-size:18px;


}



.text-link {


color:var(--primary-color);

font-weight:600;


}

/* =================================
STYLE SELECTOR SECTION
================================= */


.styles {


background:var(--light-bg);


}




.style-tabs {


display:flex;


justify-content:center;


gap:15px;


margin-bottom:60px;


}



.tab-btn {


border:none;


background:white;


padding:15px 35px;


border-radius:50px;


font-size:16px;


font-weight:600;


cursor:pointer;


color:var(--dark-color);


transition:var(--transition);


box-shadow:0 10px 25px rgba(0,0,0,.05);


}



.tab-btn:hover {


transform:translateY(-3px);


}




.tab-btn.active {


background:var(--primary-color);


color:white;


}








/* =================================
PRODUCT PANEL
================================= */


.product-wrapper {


position:relative;


min-height:520px;


}



.product-panel {


display:none;


background:white;


border-radius:40px;


padding:50px;


grid-template-columns:1fr 1fr;


gap:60px;


align-items:center;


box-shadow:var(--shadow);


animation:fadeProduct .45s ease;


}




.product-panel.active {


display:grid;


}





@keyframes fadeProduct {


from {


opacity:0;

transform:translateY(20px);


}



to {


opacity:1;

transform:translateY(0);


}


}





.product-image img {


border-radius:30px;


height:430px;


width:100%;


object-fit:cover;


}



.product-info h3 {


margin-bottom:10px;


}



.product-info h4 {


font-family:'Inter';


font-size:16px;


color:var(--primary-color);


margin-bottom:20px;


letter-spacing:1px;


}



.product-info p {


margin-bottom:25px;


line-height:1.8;


}




.product-info ul {


list-style:none;


margin-bottom:35px;


}



.product-info li {


margin-bottom:12px;


font-size:16px;


}





.product-btn {


padding:15px 30px;


}









/* =================================
BEFORE AFTER SECTION
================================= */


.comparison {


background:var(--cream-bg);


}



.before-after {


display:grid;


grid-template-columns:1fr 1fr;


gap:30px;


}



.before-image,
.after-image {


position:relative;


overflow:hidden;


border-radius:35px;


box-shadow:var(--shadow);


}



.before-image img,
.after-image img {


width:100%;


height:520px;


object-fit:cover;


transition:.5s;


}



.before-image:hover img,
.after-image:hover img {


transform:scale(1.05);


}





.before-image span,
.after-image span {


position:absolute;


bottom:25px;


left:25px;


background:white;


padding:10px 22px;


border-radius:50px;


font-weight:600;


font-size:14px;


}








/* =================================
PROCESS SECTION
================================= */


.process {


background:white;


}




.process-grid {


display:grid;


grid-template-columns:repeat(4,1fr);


gap:25px;


}




.process-card {


background:var(--light-bg);


padding:35px 25px;


border-radius:30px;


text-align:center;


transition:var(--transition);


}



.process-card:hover {


transform:translateY(-10px);


box-shadow:var(--shadow);


}





.process-number {


width:60px;


height:60px;


margin:0 auto 25px;


border-radius:50%;


background:var(--primary-color);


color:white;


display:flex;


align-items:center;


justify-content:center;


font-size:22px;


font-weight:700;


}





.process-card h3 {


font-size:22px;


margin-bottom:15px;


}



.process-card p {


font-size:15px;


}








/* =================================
ADVANTAGES SECTION
================================= */


.advantages {


background:var(--cream-bg);


}



.advantages-grid {


display:grid;


grid-template-columns:repeat(4,1fr);


gap:25px;


}





.advantage-card {


background:white;


padding:40px 25px;


border-radius:30px;


text-align:center;


transition:var(--transition);


}



.advantage-card:hover {


transform:translateY(-8px);


box-shadow:var(--shadow);


}





.advantage-icon {


font-size:35px;


margin-bottom:20px;


}



.advantage-card h3 {


font-size:22px;


margin-bottom:15px;


}



.advantage-card p {


font-size:15px;


}

/* =================================
CUSTOMER GALLERY
================================= */


.gallery {


background:var(--light-bg);


}




.gallery-grid {


display:grid;


grid-template-columns:repeat(3,1fr);


gap:25px;


}



.gallery-item {


overflow:hidden;


border-radius:30px;


box-shadow:0 15px 40px rgba(0,0,0,.08);


background:white;


}



.gallery-item img {


width:100%;


height:590px;


object-fit:cover;


transition:.5s;


}



.gallery-item:hover img {


transform:scale(1.08);


}








/* =================================
TESTIMONIALS
================================= */


.testimonials {


background:white;


}



.testimonial-grid {


display:grid;


grid-template-columns:repeat(3,1fr);


gap:30px;


}



.testimonial-card {


background:var(--light-bg);


padding:40px 30px;


border-radius:30px;


transition:var(--transition);


}



.testimonial-card:hover {


transform:translateY(-8px);


box-shadow:var(--shadow);


}





.stars {


color:var(--primary-color);


font-size:20px;


letter-spacing:3px;


margin-bottom:20px;


}



.testimonial-card p {


font-size:16px;


font-style:italic;


margin-bottom:30px;


}



.customer-info {


display:flex;


align-items:center;


gap:15px;


}



.customer-info img {


width:55px;


height:55px;


border-radius:50%;


object-fit:cover;


}



.customer-info span {


font-weight:600;


color:var(--dark-color);


}








/* =================================
FAQ SECTION
================================= */


.faq {


background:var(--cream-bg);


}




.faq-list {


max-width:850px;


margin:auto;


}



.faq-item {


background:white;


border-radius:20px;


margin-bottom:15px;


overflow:hidden;


}



.faq-question {


width:100%;


padding:25px 30px;


border:none;


background:none;


display:flex;


justify-content:space-between;


align-items:center;


font-size:17px;


font-weight:600;


cursor:pointer;


color:var(--dark-color);


}



.faq-question span {


font-size:25px;


color:var(--primary-color);


}



.faq-answer {


max-height:0;


overflow:hidden;


transition:max-height .4s ease;


}



.faq-answer p {


padding:0 30px 25px;


font-size:16px;


}








/* =================================
FINAL CTA
================================= */


.final-cta {
  min-height: 650px;
  background: linear-gradient(rgba(43, 33, 32, 0.7), rgba(43, 37, 32, 0.45)), url("../img/pet-final-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 40px 20px;
}

/* 手机端：让图片完整显示 */
@media (max-width: 768px) {
  .final-cta {
    min-height: 500px;
    background-size: contain; /* 关键：完整显示整张图 */
    background-position: center;
    background-repeat: no-repeat;
    /* 图片未覆盖到的区域会露出背景色（深色底色），不影响文字阅读 */
    background-color: #2b2120; /* 和遮罩颜色接近，过渡自然 */
  }
}



.cta-overlay {


max-width:750px;


padding:40px;


}



.final-cta h2 {


color:white;


font-size:clamp(38px,5vw,60px);


margin-bottom:25px;


}



.final-cta p {


color:white;


font-size:20px;


margin-bottom:40px;


}








/* =================================
WHATSAPP FLOAT
================================= */


.whatsapp-float {


position:fixed;


right:30px;


bottom:30px;


width:65px;


height:65px;


border-radius:50%;


background:#25D366;


display:flex;


align-items:center;


justify-content:center;


z-index:999;


box-shadow:0 15px 40px rgba(0,0,0,.2);


animation:pulse 2s infinite;


}



.whatsapp-float img {


width:35px;


height:35px;


}



@keyframes pulse {


0% {


transform:scale(1);


}


50% {


transform:scale(1.08);


}


100% {


transform:scale(1);


}


}








/* =================================
FOOTER
================================= */


.footer {


background:#2B2520;


color:white;


padding:50px 0;


}



.footer-container {


text-align:center;


}



.footer-logo {


font-family:'Playfair Display';


font-size:30px;


margin-bottom:25px;


}



.footer-links {


display:flex;


justify-content:center;


gap:30px;


margin-bottom:25px;


}



.footer-links a {


color:#eee;


font-size:15px;


}




.footer p {


color:#aaa;


font-size:14px;


}








/* =================================
TABLET RESPONSIVE
================================= */


@media(max-width:1024px){



.hero-container,
.story-container,
.product-panel {


grid-template-columns:1fr;


}



.process-grid,
.advantages-grid {


grid-template-columns:repeat(2,1fr);


}




.hero-image {


margin-top:40px;


}



.navigation {


display:none;


}



}








/* =================================
MOBILE RESPONSIVE
================================= */


@media(max-width:768px){



section {


padding:70px 0;


}




.header-container {


height:75px;


}



.logo {


font-size:24px;


}




.hero {


padding-top:120px;


}




.hero-content {


text-align:center;


}



.hero-content p {


font-size:16px;


}



.hero-trust {


flex-direction:column;


align-items:center;


}



.floating-card {


display:none;


}




.story-container {


gap:40px;


}



.style-tabs {


flex-direction:column;


}



.tab-btn {


width:100%;


}



.product-panel {


padding:25px;


border-radius:25px;


}



.product-image img {


height:300px;


}




.before-after {


grid-template-columns:1fr;


}



.before-image img,
.after-image img {


height:350px;


}





.process-grid,
.advantages-grid,
.testimonial-grid {


grid-template-columns:1fr;


}




.gallery-grid {


grid-template-columns:1fr;


}




.gallery-item img {


height:320px;


}





.final-cta {


min-height:500px;


}



.final-cta p {


font-size:16px;


}




.whatsapp-float {


width:55px;


height:55px;


right:20px;


bottom:20px;


}



}