@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f7f5ef;
  --paper:#fffefa;
  --ink:#18251f;
  --muted:#738078;
  --green:#315f4c;
  --green2:#467b62;
  --mint:#c9dfcf;
  --lime:#dfe9a8;
  --peach:#f4c6aa;
  --lav:#ddd0e8;
  --line:rgba(24,37,31,.10);
  --dark:#14231b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;width:100%}
button,input,select{font:inherit}
.wrap{width:min(1240px,calc(100% - 48px));margin:auto}

/* NAV */
header{
  position:absolute;z-index:50;top:0;left:0;right:0;
  border-bottom:1px solid rgba(35,65,50,.08);
  backdrop-filter:blur(14px);
}
.nav{height:84px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:47px;height:47px;border-radius:16px;background:var(--green);
  position:relative;box-shadow:0 12px 30px rgba(49,95,76,.18);
}
.logo:before{
  content:"";position:absolute;width:19px;height:15px;border-radius:50% 50% 45% 45%;
  background:var(--lime);left:14px;top:20px;transform:rotate(-4deg)
}
.logo i,.logo b,.logo em,.logo span{
  position:absolute;background:var(--lime);border-radius:50%;width:8px;height:10px
}
.logo i{left:8px;top:10px}.logo b{left:18px;top:7px}.logo em{right:9px;top:11px}.logo span{right:15px;top:7px}
.brand strong{display:block;font-size:14px;letter-spacing:-.4px}
.brand small{display:block;font:500 7px "DM Mono";color:#78867e;margin-top:3px;letter-spacing:.09em}
.links{display:flex;gap:22px;margin-left:auto}
.links a{font:500 8px "DM Mono";color:#67756d;transition:.2s}
.links a:hover{color:var(--green)}
.phone{
  margin-left:25px;background:var(--green);color:white;padding:13px 17px;
  border-radius:50px;font:500 8px "DM Mono"
}
.menu{display:none;margin-left:auto;border:0;background:none;font-size:23px;color:var(--ink)}

/* HERO */
.hero{
  min-height:920px;position:relative;overflow:hidden;display:flex;align-items:center;
  background:
  radial-gradient(circle at 77% 29%,rgba(220,235,170,.9),transparent 24%),
  radial-gradient(circle at 89% 78%,rgba(244,198,170,.55),transparent 22%),
  #f8f6ef;
}
.grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(49,95,76,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(49,95,76,.045) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:linear-gradient(#000,transparent 96%);
}
.hero-in{
  position:relative;z-index:2;padding-top:85px;display:grid;
  grid-template-columns:1fr 1fr;align-items:center;gap:25px
}
.eyebrow{font:500 8px "DM Mono";letter-spacing:.13em;color:#5b7c69}
h1{
  margin:21px 0;font:800 clamp(62px,7.6vw,108px)/.88 Manrope;
  letter-spacing:-6px
}
h1 em{font-style:normal;color:var(--green)}
.hero-copy{max-width:535px;color:#748079;font-size:11px;line-height:1.9}
.actions{display:flex;gap:10px;margin-top:30px}
.btn{
  min-height:51px;padding:0 22px;border:1px solid #cbd1c9;border-radius:50px;
  display:inline-flex;align-items:center;justify-content:center;font:500 8px "DM Mono";
  transition:.25s;cursor:pointer;background:transparent
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{background:var(--green);border-color:var(--green);color:white}

/* HERO OBJECT */
.petworld{
  height:620px;position:relative;display:grid;place-items:center;
  perspective:1100px;transform-style:preserve-3d;transition:.15s
}
.orbit{position:absolute;border:1px solid rgba(49,95,76,.14);border-radius:50%;width:520px;height:520px;transform:rotateX(67deg)}
.orbit.o2{width:410px;height:410px;border-style:dashed;animation:spin 20s linear infinite}
@keyframes spin{to{transform:rotateX(67deg) rotateZ(360deg)}}
.petbubble{
  position:absolute;width:430px;height:480px;
  background:linear-gradient(145deg,#dce8b5,#c7decf);
  border-radius:46% 54% 50% 50% / 44% 45% 55% 56%;
  box-shadow:0 45px 90px rgba(51,81,62,.16);
  animation:morph 8s ease-in-out infinite
}
@keyframes morph{50%{border-radius:55% 45% 44% 56% / 54% 41% 59% 46%;transform:rotate(4deg)}}
.petphoto{
  position:relative;z-index:3;width:390px;height:490px;object-fit:cover;
  border-radius:195px 195px 40px 40px;box-shadow:0 40px 80px rgba(45,65,52,.22)
}
.badge{
  position:absolute;z-index:6;padding:14px 16px;background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(16px);
  border-radius:16px;box-shadow:0 18px 50px rgba(40,60,47,.12);
  color:#748179;font:500 7px "DM Mono"
}
.badge b{display:block;color:#24372c;font-size:10px;margin-top:5px}
.b1{right:-5px;top:115px}.b2{left:-20px;bottom:140px}.b3{right:5px;bottom:65px}

/* TICKER */
.ticker{background:var(--green);overflow:hidden;white-space:nowrap}
.ticker-in{width:max-content;padding:15px;color:#c8d8ce;font:500 8px "DM Mono";animation:ticker 30s linear infinite}
.ticker-in b{color:var(--lime)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* COMMON */
section{padding:108px 0}
.sid{font:500 8px "DM Mono";letter-spacing:.11em;color:#678673}
.head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-top:15px}
.head h2{margin:0;font:800 clamp(42px,5vw,66px)/.96 Manrope;letter-spacing:-3.8px}
.head p{max-width:450px;margin:0;color:#77827b;font-size:10px;line-height:1.9}
.reveal{opacity:0;transform:translateY(24px);transition:.75s cubic-bezier(.2,.8,.2,1)}
.reveal.on{opacity:1;transform:none}

/* CATEGORY */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:52px}
.cat{
  min-height:320px;padding:26px;border:1px solid var(--line);border-radius:27px;
  background:var(--paper);position:relative;overflow:hidden;transition:.3s
}
.cat:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(55,75,62,.1)}
.shape{position:absolute;width:150px;height:150px;border-radius:50%;right:-30px;top:-30px;background:var(--lime)}
.cat:nth-child(2) .shape{background:var(--peach)}
.cat:nth-child(3) .shape{background:var(--mint)}
.cat:nth-child(4) .shape{background:var(--lav)}
.cat small{font:500 7px "DM Mono";color:#829087}
.cat h3{margin:150px 0 10px;font-size:21px}
.cat p{margin:0;color:#78847c;font-size:9px;line-height:1.75}

/* SERVICES */
.dark{background:var(--dark);color:white}
.dark .head p{color:#91a097}
.servicegrid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:12px;margin-top:52px}
.service{
  min-height:470px;border:1px solid rgba(255,255,255,.08);border-radius:28px;
  overflow:hidden;position:relative;background:#1c2d24
}
.service img{position:absolute;inset:0;height:100%;object-fit:cover;opacity:.48;transition:.7s}
.service:hover img{transform:scale(1.05)}
.service:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(17,34,25,.96))}
.service-content{position:absolute;z-index:3;left:28px;right:28px;bottom:28px}
.service small{font:500 7px "DM Mono";color:var(--lime)}
.service h3{font-size:26px;margin:8px 0}
.service p{font-size:9px;line-height:1.75;color:#b0bcb4}

/* SHOP */
.shop{background:#fff}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:52px}
.product{border:1px solid var(--line);border-radius:25px;overflow:hidden;background:#faf9f5;transition:.3s}
.product:hover{transform:translateY(-5px)}
.productpic{height:270px;overflow:hidden;background:#eef1e8}
.productpic img{height:100%;object-fit:cover;transition:.6s}
.product:hover img{transform:scale(1.04)}
.productbody{padding:20px}
.productbody small{font:500 7px "DM Mono";color:#829087}
.productbody h3{font-size:14px;margin:8px 0 14px}
.price{font-weight:800;font-size:20px;color:var(--green)}

/* GROOM */
.groom{background:#ede8dc}
.groomgrid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.groomphoto{height:620px;position:relative;border-radius:32px;overflow:hidden;background:#d8e2cf}
.groomphoto img{height:100%;object-fit:cover}
.groomphoto:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 70%,rgba(20,35,27,.35))}
.groomcopy h2{margin:16px 0 25px;font:800 62px/.94 Manrope;letter-spacing:-4px}
.groomcopy>p{color:#747f78;font-size:11px;line-height:1.9}
.prices{margin-top:30px}
.pr{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid #cbc6b9;font-size:10px}
.pr b{color:var(--green);font:600 10px "DM Mono"}

/* CLUB */
.club{background:var(--green);color:white}
.clubgrid{display:grid;grid-template-columns:1fr .9fr;gap:50px;align-items:center}
.club h2{font:800 66px/.94 Manrope;letter-spacing:-4px;margin:16px 0 22px}
.club p{max-width:550px;color:#c7d5cc;font-size:10px;line-height:1.9}
.cardstage{height:380px;display:grid;place-items:center;perspective:1000px}
.membercard{
  width:410px;height:245px;padding:30px;border-radius:29px;color:#193025;
  background:linear-gradient(135deg,#e1eca8,#f3f4d7 55%,#c7dfd0);
  box-shadow:40px 45px 90px rgba(11,31,20,.4);
  transform:rotateY(-16deg) rotateX(8deg);transition:.3s;position:relative;overflow:hidden
}
.membercard:hover{transform:rotateY(-5deg) rotateX(2deg)}
.membercard:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-100px;top:-100px;border:1px solid #56745e40;box-shadow:0 0 0 40px #56745e12,0 0 0 80px #56745e0a}
.membercard strong{font-size:25px}.membercard small{font:500 8px "DM Mono"}.cardnum{margin-top:100px;font:500 10px "DM Mono"}

/* STORES */
.storegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:52px}
.store{padding:30px;border-radius:26px;background:white;border:1px solid var(--line);min-height:255px;transition:.3s}
.store:hover{transform:translateY(-4px);box-shadow:0 25px 60px rgba(50,70,58,.08)}
.storetop{display:flex;justify-content:space-between;gap:20px}
.city{font-size:27px;font-weight:800;letter-spacing:-1px}
.open{font:500 7px "DM Mono";color:#43805f}
.store address{font-style:normal;margin-top:42px;color:#737f77;font-size:10px;line-height:1.9}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tags span{padding:7px 9px;border-radius:20px;background:#eef2e9;color:#5e7566;font:500 7px "DM Mono"}

/* FAQ */
.faq{max-width:920px;margin:52px auto 0}
.faqitem{border-bottom:1px solid var(--line)}
.question{padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:700;cursor:pointer}
.answer{max-height:0;overflow:hidden;color:#748078;font-size:10px;line-height:1.85;transition:.35s}
.faqitem.active .answer{max-height:180px;padding-bottom:22px}

/* CONTACT */
.contact{background:#14231b;color:white}
.contactbox{
  border:1px solid rgba(255,255,255,.09);border-radius:30px;padding:58px;
  background:radial-gradient(circle at 90% 10%,rgba(177,215,188,.16),transparent 28%),#1a2b22
}
.contactbox h2{font:800 clamp(48px,6vw,76px)/.93 Manrope;letter-spacing:-4px;margin:16px 0 32px}
.contactgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.contactitem{padding-top:15px;border-top:1px solid rgba(255,255,255,.13)}
.contactitem small{font:500 7px "DM Mono";color:#81968a}
.contactitem b{display:block;margin-top:8px;font-size:9px}

/* PAGE */
.pagehero{
  padding:185px 0 105px;min-height:520px;
  background:radial-gradient(circle at 85% 30%,#dce8ad,transparent 25%),#f7f5ef
}
.pagehero h1{font-size:clamp(55px,7vw,92px)}
.pagehero p{max-width:600px;color:#758079;font-size:11px;line-height:1.9}
.infogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:50px}
.infocard{background:white;border:1px solid var(--line);border-radius:25px;padding:28px;min-height:245px}
.infocard small{font:500 7px "DM Mono";color:#6c8776}
.infocard h3{font-size:21px;margin:65px 0 10px}
.infocard p{font-size:10px;line-height:1.8;color:#758079}

/* FOOTER */
footer{background:#0d1712;color:white;padding:50px 0 25px}
.footer{display:flex;justify-content:space-between;gap:40px}
.footerlinks{display:flex;gap:55px}
.footerlinks div{display:flex;flex-direction:column;gap:9px}
.footerlinks b{font:500 7px "DM Mono";color:#708078}
.footerlinks a{font-size:9px;color:#b9c4bd}
.copyright{margin-top:42px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;color:#657269;font:500 7px "DM Mono"}

@media(max-width:900px){
  .links,.phone{display:none}.menu{display:block}
  .links.open{display:flex;position:absolute;top:84px;left:0;right:0;padding:25px;background:#f8f7f1;flex-direction:column}
  .hero-in{grid-template-columns:1fr;padding-top:145px}.petworld{height:520px}
  .catgrid,.products{grid-template-columns:1fr 1fr}
  .servicegrid{grid-template-columns:1fr}.groomgrid,.clubgrid{grid-template-columns:1fr}
  .storegrid{grid-template-columns:1fr}.contactgrid{grid-template-columns:1fr 1fr}.infogrid{grid-template-columns:1fr 1fr}
}
@media(max-width:580px){
  .wrap{width:calc(100% - 28px)}.nav{height:72px}.links.open{top:72px}
  h1{font-size:53px;letter-spacing:-3px}.hero{min-height:auto}.hero-in{padding-top:125px}
  .actions{flex-direction:column}.btn{width:100%}
  .petworld{height:430px;transform:scale(.8)}.badge{display:none}
  section{padding:76px 0}.head{display:block}.head p{margin-top:18px}
  .catgrid,.products,.infogrid{grid-template-columns:1fr}
  .groomphoto{height:450px}.groomcopy h2,.club h2{font-size:44px;letter-spacing:-2px}
  .membercard{width:300px;height:190px}.cardnum{margin-top:60px}
  .contactbox{padding:30px}.contactgrid{grid-template-columns:1fr}
  .footer{display:block}.footerlinks{margin-top:35px;flex-wrap:wrap}.copyright{display:block;line-height:2}
}